.stylelintrc.yaml

extends:
  - stylelint-config-standard-scss
plugins:
  - stylelint-scss
  - stylelint-order
rules:
  # Override stylelint-config-standard - we only use CSS comments for annotations that don't warrant an empty line
  comment-empty-line-before: null
  # Follow best practices
  font-family-name-quotes: always-where-recommended
  # https://stackoverflow.com/a/34383157/467582
  function-url-quotes: always
  # 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
  property-no-unknown: null
  max-line-length: null
  # custom-property-pattern: null, because otherwise it throws following error
  # Expected custom property name to be kebab-case (_settings.scss --> 51:5)
  custom-property-pattern: null
  # ignoreProperties: ["contain-intrinsic-size"]
  # see: https://stylelint.io/user-guide/rules/no-descending-specificity
  no-descending-specificity: null
  # selector-class-pattern: null, because otherwise it throws errors with BEM classes
  selector-class-pattern: null
  # Disallow unknown media feature names like "prefers-reduced-data"
  # https://stylelint.io/user-guide/rules/media-feature-name-no-unknown/
  media-feature-name-no-unknown: null
  no-invalid-position-at-import-rule: null
  # color-function-notation: legacy required to avoid compilation errors with node-sass
  color-function-notation: legacy
  alpha-value-notation: number
  # SCSS
  # double-slash-comment-whitespace-inside: null because throws error with comments that include urls.
  scss/double-slash-comment-whitespace-inside: null
  #  no-global-function-names: null because throws error with map-get or unquote functions
  scss/no-global-function-names: null
  scss/at-import-no-partial-leading-underscore: null
  order/order:
    - - type: at-rule
        hasBlock: false
      - custom-properties
      - declarations
    - unspecified: ignore
      disableFix: true
  # https://github.com/sasstools/sass-lint/blob/develop/lib/config/property-sort-orders/smacss.yml
  order/properties-order:
    - 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

    - box-sizing

    - 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

    - resize

    - columns
    - column-count
    - column-gap
    - column-fill
    - column-rule
    - column-span
    - column-width

    - grid-gap
    - grid-template-columns

    - animation
    - animation-name
    - animation-timing-function

    - 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

    - fill

    - opacity

    # 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

    # Cursor

    - cursor
    - pointer-events
    - user-select

    # Other

    - appearance
    - border-collapse
    - border-spacing
    - box-shadow
    - caption-side
    - content
    - empty-cells
    - overflow
    - overflow-x
    - overflow-y
    - quotes
    - speak
    - table-layout
    - vertical-align
    - visibility
    - will-change
    - z-index