--- /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