1 # Base taken from https://github.com/material-components/material-components-web/blob/master/.stylelintrc.yaml
3 # For more information about Drupal standards that this configuration is trying
4 # to follow please check
6 # - https://www.drupal.org/docs/develop/standards/css/css-formatting-guidelines
7 # - https://www.drupal.org/docs/develop/standards/css/csscomb-settings-for-drupal-css-formatting-and-sort-tool
9 # We are using https://github.com/stylelint/stylelint-config-standard/blob/master/index.js
10 # as a base for our rules.
11 extends: stylelint-config-standard
15 - stylelint-selector-bem-pattern
19 # Follow best practices
20 font-family-name-quotes: always-where-recommended
21 # http://stackoverflow.com/questions/2168855/is-quoting-the-value-of-url-really-necessary
22 function-url-quotes: never
23 # https://www.w3.org/TR/selectors/#attribute-selectors
24 # http://stackoverflow.com/q/3851091
25 selector-attribute-quotes: always
26 # Double-quotes are our convention throughout our codebase within (S)CSS.
27 # They also reflect how attribute strings are normally quoted within the DOM.
29 # Before getting a hard attack about the fact that we require proper CSS
30 # ordering please read next articles:
31 # - https://css-tricks.com/poll-results-how-do-you-order-your-css-properties/
32 # - https://www.drupal.org/docs/develop/standards/css/csscomb-settings-for-drupal-css-formatting-and-sort-tool
33 # Note that we do not follow exactly the same proposed standard for now like
34 # in csscomb ddo page.
36 # This order definition is taken from:
37 # - https://github.com/sasstools/sass-lint/blob/develop/lib/config/property-sort-orders/smacss.yml
38 order/declaration-block-properties-specified-order:
100 - transition-property
101 - transition-timing-function
113 - border-bottom-width
119 - border-bottom-style
123 - border-top-left-radius
124 - border-top-right-radius
125 - border-bottom-left-radius
126 - border-bottom-right-radius
131 - border-bottom-color
143 - background-attachment
148 - background-position
196 declaration-property-unit-whitelist:
200 # The following prefix rules are enabled since we use autoprefixer.
201 at-rule-no-vendor-prefix: true
202 media-feature-name-no-vendor-prefix: true
203 selector-no-vendor-prefix: true
204 value-no-vendor-prefix: true
205 # Usually if you're nesting past 3 levels deep there's a problem.
207 # Because we adhere to BEM we can limit the amount of necessary compound
208 # selectors. Most should
209 # just be 1 level selector. However, modifiers can introduce an additional compound selector.
210 # Futhermore, generic qualifying selectors (e.g. `[dir="rtl"]`) can introduce yet another level.
211 selector-max-compound-selectors: 4
212 # For specificity: disallow IDs (0). Allow for complex combinations of classes, pseudo-classes,
213 # attribute modifiers based on selector-max-compound-selectors, plus an addition for
214 # pseudo-classes (4). Allow for pseudo-elements (1).
215 selector-max-specificity: 0,4,1
216 # Disallow "@extend" in scss.
217 # http://csswizardry.com/2016/02/mixins-better-for-performance/
218 # http://vanseodesign.com/css/sass-mixin-or-extend/
219 # Besides performance, @extend actually *changes* the selector precedence by creating a compound
220 # selector, which can lead to ambiguous results.
223 # Extremely useful for typos, and anything emergent can be ignored by this rule
228 # There is no reason that a specific ID would be needed for UI components
230 # Qualifying types are not needed when using a naming system like BEM
231 selector-no-qualifying-type: true
232 # In general, we should *never* be modifying elements within our components, since we can't
233 # predict the use cases in which users would add a certain type of element into a component.
234 # The only hard exception to this are `fieldset` elements, which can be disabled and in that case
235 # we want our UI components within that fieldset to be disabled as well.
236 # Other exceptions to this may be in packages/material-components-web, in which case this rule could
237 # be disabled for that file, with an explanation.
242 # Styles for components should never need the universal selector.
243 selector-no-universal: true
244 # Ensure any defined symbols are prefixed with "mdc-"
245 # TODO: Remove "md-" pattern.
246 #custom-media-pattern: ^mdc?-.+
247 #custom-property-pattern: ^mdc?-.+
248 #selector-class-pattern:
250 # - resolveNestedSelectors: true
251 #selector-id-pattern: ^mdc?-.+
252 # Names are more semantic than numbers
253 font-weight-notation: named-where-possible
254 # http://www.paulirish.com/2010/the-protocol-relative-url/
255 function-url-no-scheme-relative: true
256 # @todo TODO: and FIXME: warnings are super useful because they remind us that
257 # we should address these within our codebase.
258 comment-word-blacklist:
264 # Our Drupal style guide is with leading zero.
265 # Leading zero presence does not matter http://hey.georgie.nu/leadingzero/.
266 number-leading-zero: always
268 # We use Harry Roberts' BEM dialect as our preferred way to format classes.
269 # See: http://csswizardry.com/2013/01/mindbemding-getting-your-head-round-bem-syntax/
270 # See: https://github.com/postcss/postcss-bem-linter/blob/c59db3f/lib/preset-patterns.js#L39
271 plugin/selector-bem-pattern:
272 componentName: ^[a-z]+(?:-[a-z]+)*$
273 # <namespace>-<block>__<element>*--<modifier>*[<attribute>]*
274 componentSelectors: ^\.paragraphs?-{componentName}(?:__[a-z]+(?:-[a-z]+)*)*(?:--[a-z]+(?:-[a-z]+)*)*(?:\[.+\])*$
277 - ^\[aria\-disabled=(?:.+)\]
279 # @todo - figure how we are going to use this SCSS naming patterns?
280 # SCSS naming patterns, just like our CSS conventions above.
281 # (note for $-vars we use a leading underscore for "private" variables)
282 #scss/dollar-variable-pattern:
286 #scss/at-function-pattern: ^mdc-.+
287 #scss/at-mixin-pattern: ^mdc-.+
288 # Prevents unneeded nesting selectors
289 scss/selector-no-redundant-nesting-selector: true
290 # Since leading underscores are not needed, they can be omitted
291 scss/at-import-no-partial-leading-underscore: true
292 # Since mixins are explicit (`@include`) and parens are unnecessary for argumentless mixins, they
294 scss/at-mixin-no-argumentless-call-parentheses: true