+++ /dev/null
-# Base taken from https://github.com/material-components/material-components-web/blob/master/.stylelintrc.yaml
-#
-# For more information about Drupal standards that this configuration is trying
-# to follow please check
-#
-# - https://www.drupal.org/docs/develop/standards/css/css-formatting-guidelines
-# - https://www.drupal.org/docs/develop/standards/css/csscomb-settings-for-drupal-css-formatting-and-sort-tool
-
-# We are using https://github.com/stylelint/stylelint-config-standard/blob/master/index.js
-# as a base for our rules.
-extends: stylelint-config-standard
-ignoreFiles:
- - node_modules/**/*
-plugins:
- - stylelint-selector-bem-pattern
- - stylelint-scss
- - stylelint-order
-rules:
- # Follow best practices
- font-family-name-quotes: always-where-recommended
- # http://stackoverflow.com/questions/2168855/is-quoting-the-value-of-url-really-necessary
- function-url-quotes: never
- # https://www.w3.org/TR/selectors/#attribute-selectors
- # http://stackoverflow.com/q/3851091
- selector-attribute-quotes: always
- # Double-quotes are our convention throughout our codebase within (S)CSS.
- # They also reflect how attribute strings are normally quoted within the DOM.
- string-quotes: double
- # Before getting a hard attack about the fact that we require proper CSS
- # ordering please read next articles:
- # - https://css-tricks.com/poll-results-how-do-you-order-your-css-properties/
- # - https://www.drupal.org/docs/develop/standards/css/csscomb-settings-for-drupal-css-formatting-and-sort-tool
- # Note that we do not follow exactly the same proposed standard for now like
- # in csscomb ddo page.
- #
- # This order definition is taken from:
- # - https://github.com/sasstools/sass-lint/blob/develop/lib/config/property-sort-orders/smacss.yml
- order/declaration-block-properties-specified-order:
- # Box
-
- - display
- - position
- - top
- - right
- - bottom
- - left
-
- - flex
- - flex-basis
- - flex-direction
- - flex-flow
- - flex-grow
- - flex-shrink
- - flex-wrap
- - align-content
- - align-items
- - align-self
- - justify-content
- - order
-
- - width
- - min-width
- - max-width
-
- - height
- - min-height
- - max-height
-
- - margin
- - margin-top
- - margin-right
- - margin-bottom
- - margin-left
-
- - padding
- - padding-top
- - padding-right
- - padding-bottom
- - padding-left
-
- - float
- - clear
-
- - columns
- - column-gap
- - column-fill
- - column-rule
- - column-span
- - column-count
- - column-width
-
- - transform
- - transform-box
- - transform-origin
- - transform-style
-
- - transition
- - transition-delay
- - transition-duration
- - transition-property
- - transition-timing-function
-
- # Border
-
- - border
- - border-top
- - border-right
- - border-bottom
- - border-left
- - border-width
- - border-top-width
- - border-right-width
- - border-bottom-width
- - border-left-width
-
- - border-style
- - border-top-style
- - border-right-style
- - border-bottom-style
- - border-left-style
-
- - border-radius
- - border-top-left-radius
- - border-top-right-radius
- - border-bottom-left-radius
- - border-bottom-right-radius
-
- - border-color
- - border-top-color
- - border-right-color
- - border-bottom-color
- - border-left-color
-
- - outline
- - outline-color
- - outline-offset
- - outline-style
- - outline-width
-
- # Background
-
- - background
- - background-attachment
- - background-clip
- - background-color
- - background-image
- - background-repeat
- - background-position
- - background-size
-
- # Text
-
- - color
-
- - font
- - font-family
- - font-size
- - font-smoothing
- - font-style
- - font-variant
- - font-weight
-
- - letter-spacing
- - line-height
- - list-style
-
- - text-align
- - text-decoration
- - text-indent
- - text-overflow
- - text-rendering
- - text-shadow
- - text-transform
- - text-wrap
-
- - white-space
- - word-spacing
-
- # Other
-
- - border-collapse
- - border-spacing
- - box-shadow
- - caption-side
- - content
- - cursor
- - empty-cells
- - opacity
- - overflow
- - quotes
- - speak
- - table-layout
- - vertical-align
- - visibility
- - z-index
- declaration-property-unit-whitelist:
- font-size:
- - "rem"
- - "px"
- # The following prefix rules are enabled since we use autoprefixer.
- at-rule-no-vendor-prefix: true
- media-feature-name-no-vendor-prefix: true
- selector-no-vendor-prefix: true
- value-no-vendor-prefix: true
- # Usually if you're nesting past 3 levels deep there's a problem.
- max-nesting-depth: 3
- # Because we adhere to BEM we can limit the amount of necessary compound
- # selectors. Most should
- # just be 1 level selector. However, modifiers can introduce an additional compound selector.
- # Futhermore, generic qualifying selectors (e.g. `[dir="rtl"]`) can introduce yet another level.
- selector-max-compound-selectors: 4
- # For specificity: disallow IDs (0). Allow for complex combinations of classes, pseudo-classes,
- # attribute modifiers based on selector-max-compound-selectors, plus an addition for
- # pseudo-classes (4). Allow for pseudo-elements (1).
- selector-max-specificity: 0,4,1
- # Disallow "@extend" in scss.
- # http://csswizardry.com/2016/02/mixins-better-for-performance/
- # http://vanseodesign.com/css/sass-mixin-or-extend/
- # Besides performance, @extend actually *changes* the selector precedence by creating a compound
- # selector, which can lead to ambiguous results.
- at-rule-blacklist:
- - extend
- # Extremely useful for typos, and anything emergent can be ignored by this rule
- property-no-unknown:
- - true
- - ignoreProperties:
- - contain
- # There is no reason that a specific ID would be needed for UI components
- selector-no-id: true
- # Qualifying types are not needed when using a naming system like BEM
- selector-no-qualifying-type: true
- # In general, we should *never* be modifying elements within our components, since we can't
- # predict the use cases in which users would add a certain type of element into a component.
- # The only hard exception to this are `fieldset` elements, which can be disabled and in that case
- # we want our UI components within that fieldset to be disabled as well.
- # Other exceptions to this may be in packages/material-components-web, in which case this rule could
- # be disabled for that file, with an explanation.
- selector-no-type:
- - true
- - ignoreTypes:
- - fieldset
- # Styles for components should never need the universal selector.
- selector-no-universal: true
- # Ensure any defined symbols are prefixed with "mdc-"
- # TODO: Remove "md-" pattern.
- #custom-media-pattern: ^mdc?-.+
- #custom-property-pattern: ^mdc?-.+
- #selector-class-pattern:
- # - ^mdc?-.+
- # - resolveNestedSelectors: true
- #selector-id-pattern: ^mdc?-.+
- # Names are more semantic than numbers
- font-weight-notation: named-where-possible
- # http://www.paulirish.com/2010/the-protocol-relative-url/
- function-url-no-scheme-relative: true
- # @todo TODO: and FIXME: warnings are super useful because they remind us that
- # we should address these within our codebase.
- comment-word-blacklist:
- -
- - todo
- - /^TODO:/
- - /^FIXME:/
- - severity: warning
- # Our Drupal style guide is with leading zero.
- # Leading zero presence does not matter http://hey.georgie.nu/leadingzero/.
- number-leading-zero: always
-
- # We use Harry Roberts' BEM dialect as our preferred way to format classes.
- # See: http://csswizardry.com/2013/01/mindbemding-getting-your-head-round-bem-syntax/
- # See: https://github.com/postcss/postcss-bem-linter/blob/c59db3f/lib/preset-patterns.js#L39
- plugin/selector-bem-pattern:
- componentName: ^[a-z]+(?:-[a-z]+)*$
- # <namespace>-<block>__<element>*--<modifier>*[<attribute>]*
- componentSelectors: ^\.paragraphs?-{componentName}(?:__[a-z]+(?:-[a-z]+)*)*(?:--[a-z]+(?:-[a-z]+)*)*(?:\[.+\])*$
- ignoreSelectors:
- - ^fieldset
- - ^\[aria\-disabled=(?:.+)\]
-
- # @todo - figure how we are going to use this SCSS naming patterns?
- # SCSS naming patterns, just like our CSS conventions above.
- # (note for $-vars we use a leading underscore for "private" variables)
- #scss/dollar-variable-pattern:
- # - ^_?mdc-.+
- # -
- # ignore: local
- #scss/at-function-pattern: ^mdc-.+
- #scss/at-mixin-pattern: ^mdc-.+
- # Prevents unneeded nesting selectors
- scss/selector-no-redundant-nesting-selector: true
- # Since leading underscores are not needed, they can be omitted
- scss/at-import-no-partial-leading-underscore: true
- # Since mixins are explicit (`@include`) and parens are unnecessary for argumentless mixins, they
- # can be omitted.
- scss/at-mixin-no-argumentless-call-parentheses: true
projects / yaffs-website / blobdiff