www.aleph1.co.uk Git - yaffs-website/blob - web/modules/contrib/paragraphs/css/.stylelintrc.yml

   1 # Base taken from https://github.com/material-components/material-components-web/blob/master/.stylelintrc.yaml
   2 #
   3 # For more information about Drupal standards that this configuration is trying
   4 # to follow please check
   5 #
   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
   8
   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
  12 ignoreFiles:
  13   - node_modules/**/*
  14 plugins:
  15   - stylelint-selector-bem-pattern
  16   - stylelint-scss
  17   - stylelint-order
  18 rules:
  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.
  28   string-quotes: double
  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.
  35   #
  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:
  39     # Box
  40
  41     - display
  42     - position
  43     - top
  44     - right
  45     - bottom
  46     - left
  47
  48     - flex
  49     - flex-basis
  50     - flex-direction
  51     - flex-flow
  52     - flex-grow
  53     - flex-shrink
  54     - flex-wrap
  55     - align-content
  56     - align-items
  57     - align-self
  58     - justify-content
  59     - order
  60
  61     - width
  62     - min-width
  63     - max-width
  64
  65     - height
  66     - min-height
  67     - max-height
  68
  69     - margin
  70     - margin-top
  71     - margin-right
  72     - margin-bottom
  73     - margin-left
  74
  75     - padding
  76     - padding-top
  77     - padding-right
  78     - padding-bottom
  79     - padding-left
  80
  81     - float
  82     - clear
  83
  84     - columns
  85     - column-gap
  86     - column-fill
  87     - column-rule
  88     - column-span
  89     - column-count
  90     - column-width
  91
  92     - transform
  93     - transform-box
  94     - transform-origin
  95     - transform-style
  96
  97     - transition
  98     - transition-delay
  99     - transition-duration
 100     - transition-property
 101     - transition-timing-function
 102
 103     # Border
 104
 105     - border
 106     - border-top
 107     - border-right
 108     - border-bottom
 109     - border-left
 110     - border-width
 111     - border-top-width
 112     - border-right-width
 113     - border-bottom-width
 114     - border-left-width
 115
 116     - border-style
 117     - border-top-style
 118     - border-right-style
 119     - border-bottom-style
 120     - border-left-style
 121
 122     - border-radius
 123     - border-top-left-radius
 124     - border-top-right-radius
 125     - border-bottom-left-radius
 126     - border-bottom-right-radius
 127
 128     - border-color
 129     - border-top-color
 130     - border-right-color
 131     - border-bottom-color
 132     - border-left-color
 133
 134     - outline
 135     - outline-color
 136     - outline-offset
 137     - outline-style
 138     - outline-width
 139
 140     # Background
 141
 142     - background
 143     - background-attachment
 144     - background-clip
 145     - background-color
 146     - background-image
 147     - background-repeat
 148     - background-position
 149     - background-size
 150
 151     # Text
 152
 153     - color
 154
 155     - font
 156     - font-family
 157     - font-size
 158     - font-smoothing
 159     - font-style
 160     - font-variant
 161     - font-weight
 162
 163     - letter-spacing
 164     - line-height
 165     - list-style
 166
 167     - text-align
 168     - text-decoration
 169     - text-indent
 170     - text-overflow
 171     - text-rendering
 172     - text-shadow
 173     - text-transform
 174     - text-wrap
 175
 176     - white-space
 177     - word-spacing
 178
 179     # Other
 180
 181     - border-collapse
 182     - border-spacing
 183     - box-shadow
 184     - caption-side
 185     - content
 186     - cursor
 187     - empty-cells
 188     - opacity
 189     - overflow
 190     - quotes
 191     - speak
 192     - table-layout
 193     - vertical-align
 194     - visibility
 195     - z-index
 196   declaration-property-unit-whitelist:
 197     font-size:
 198       - "rem"
 199       - "px"
 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.
 206   max-nesting-depth: 3
 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.
 221   at-rule-blacklist:
 222     - extend
 223   # Extremely useful for typos, and anything emergent can be ignored by this rule
 224   property-no-unknown:
 225     - true
 226     - ignoreProperties:
 227         - contain
 228   # There is no reason that a specific ID would be needed for UI components
 229   selector-no-id: true
 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.
 238   selector-no-type:
 239     - true
 240     - ignoreTypes:
 241         - fieldset
 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:
 249   #  - ^mdc?-.+
 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:
 259     -
 260       - todo
 261       - /^TODO:/
 262       - /^FIXME:/
 263     - severity: warning
 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
 267
 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]+)*)*(?:\[.+\])*$
 275     ignoreSelectors:
 276       - ^fieldset
 277       - ^\[aria\-disabled=(?:.+)\]
 278
 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:
 283   #  - ^_?mdc-.+
 284   #  -
 285   #    ignore: local
 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
 293   # can be omitted.
 294   scss/at-mixin-no-argumentless-call-parentheses: true