.stylelintrc.yaml

# https://stylelint.io/user-guide/rules/

defaultSeverity: warning

extends:
  - stylelint-config-standard
  - stylelint-config-html
  - stylelint-config-html/svelte

customSyntax: postcss-html

overrides:
  - files:
      - '**/*.scss'
    customSyntax: postcss-scss

ignoreFiles:
  - node_modules/*
  - svelte-kit/**
  - static/**
  - build/**

plugins:
  # - stylelint-at-rule-no-children
  # - stylelint-csstree-validator
  # - stylelint-declaration-block-no-ignored-properties
  # - stylelint-declaration-strict-value
  # - stylelint-declaration-use-variable
  # - stylelint-images
  # - stylelint-no-browser-hacks
  - stylelint-no-unsupported-browser-features
  - stylelint-order
  - stylelint-scss
  - stylelint-selector-bem-pattern

rules:
  # -- Plugin
  plugin/no-unsupported-browser-features:
    - true
    - browsers:
        - '>0.5%'
      ignore:
        - background-clip-text
        - background-img-opts
        - border-image
        - border-radius
        - calc
        - css-animation
        - css-appearance
        - css-boxshadow
        - css-cascade-layers
        - css-display-contents
        - css-fixed
        - css-gradients
        - css-initial-value
        - css-nesting
        - css-not-sel-list
        - css-overflow
        - css-overscroll-behavior
        - css-resize
        - css-rrggbbaa
        - css-scroll-behavior
        - css-scrollbar
        - css-selection
        - css-snappoints
        - css-transitions
        - css-variables
        - css3-cursors
        - flexbox
        - intrinsic-width
        - kerning-pairs-ligatures
        - object-fit
        - outline
        - pointer-events
        - rem
        - svg-css
        - text-decoration
        - text-size-adjust
        - transforms2d
        - transforms3d
        - user-select-none
        - viewport-units
        - word-break

  #-- Possible errors

  # import
  import-notation: string

  # Color
  color-no-invalid-hex: true

  # Font family
  font-family-no-duplicate-names: true
  font-family-no-missing-generic-family-keyword: true

  # Function
  function-calc-no-unspaced-operator: true
  function-linear-gradient-no-nonstandard-direction: true

  # String
  string-no-newline: true

  # Unit
  unit-no-unknown: null # via unit-whitelist

  # Property
  property-no-unknown: true

  # Keyframe declaration
  keyframe-declaration-no-important: true

  # Declaration block
  declaration-block-no-duplicate-properties: true
  declaration-block-no-shorthand-property-overrides: true

  # Block
  block-no-empty: true

  # Selector
  selector-pseudo-class-no-unknown: true
  selector-pseudo-element-no-unknown: true
  selector-type-no-unknown: true

  # Media feature
  media-feature-name-no-unknown: true
  media-feature-range-notation: prefix

  # At-rule
  at-rule-no-unknown: null

  # Comment
  comment-no-empty: true

  # General / Sheet
  no-descending-specificity: null # too complicated to implement
  no-duplicate-at-import-rules: true
  no-duplicate-selectors: true
  no-empty-source: true
  no-extra-semicolons: true
  no-invalid-double-slash-comments: true # CSS-only

  #-- Limit language features

  # Color
  color-named: null # via stylelint-declaration-strict-value
  color-no-hex: null # via stylelint-declaration-strict-value

  # Function
  function-url-no-scheme-relative: true

  # Number
  number-max-precision: 10

  # Keyframes
  keyframes-name-pattern: ^([a-z][a-z0-9]*)(-[a-z0-9]+)*(-animation)$

  # Time
  time-min-milliseconds: null

  # Unit
  unit-disallowed-list: null # via unit-whitelist
  unit-allowed-list:
    - rem
    - em
    - '%'
    - px
    - vw
    - vh
    - fr
    - ms
    - s
    - deg

  # Shorthand property
  shorthand-property-no-redundant-values: true

  # Value
  value-no-vendor-prefix: true

  # Custom property
  custom-property-pattern: null

  # Property
  property-no-vendor-prefix: true

  # Declaration
  declaration-block-no-redundant-longhand-properties: null
  declaration-no-important: null

  # Declaration block
  declaration-block-single-line-max-declarations: null # no single line

  # Selector
  selector-class-pattern:
    - ^(?:(?:o|c|u|t|s|is|has|_|js|qa)-)?[a-zA-Z0-9]+(?:-[a-zA-Z0-9]+)*(?:--[a-zA-Z0-9]+(?:-[a-zA-Z0-9]+)*)?(?:\\[.+\\])?$
    - resolveNestedSelectors: true
      message: Class selector must follow the BEM pattern. Example .button. Element that depends upon the block .button-price. Modifier that changes the style of the block .button-alert

  selector-id-pattern:
    - /\s\S/
    - message: Unexpected id selector

  selector-max-attribute: null
  selector-max-class: null
  selector-max-combinators: null
  selector-max-compound-selectors: null
  selector-max-empty-lines: 0
  selector-max-id: null
  selector-max-pseudo-class: null
  selector-max-specificity: null
  selector-max-type: null
  selector-max-universal: 0
  selector-nested-pattern: null
  selector-no-qualifying-type: null
  selector-no-vendor-prefix: true

  # Media feature
  media-feature-name-no-vendor-prefix: true

  # Custom media
  custom-media-pattern: null

  # At-rule
  # at-rule-blacklist: null
  #   - extend
  #   - message: Unexpected @extend directive

  at-rule-no-vendor-prefix: true
  # at-rule-property-required-list: null
  # at-rule-whitelist: null # via at-rule-blacklist

  # Comment
  comment-word-disallowed-list:
    - /todo/i/idea/fixme/TODO/I/IDEA/FIXME/
    - severity: warning
      message: Don't forget this TODO

  # General / Sheet
  max-nesting-depth: 6
  no-unknown-animations: null # keyframes / animation in different files

  #-- Stylistic issues

  # Color
  color-hex-case: lower
  color-hex-length: long

  # Font family
  font-family-name-quotes: null

  # Font weight
  font-weight-notation: null # via scale-unlimited/declaration-strict-value

  # Function
  function-comma-newline-after: always-multi-line
  function-comma-newline-before: never-multi-line
  function-comma-space-after: always
  function-comma-space-before: never
  function-max-empty-lines: 0
  function-name-case: null
  function-parentheses-newline-inside: always-multi-line
  function-parentheses-space-inside: never
  function-url-quotes:
    - always
    - except: empty

  function-whitespace-after: always

  # Number
  number-leading-zero: always
  number-no-trailing-zeros: true

  # String
  string-quotes:
    - single
    - avoidEscape: true

  # Length
  length-zero-no-unit: true

  # Unit
  unit-case: lower

  # Value
  value-keyword-case: lower

  # Value list
  value-list-comma-newline-after: always-multi-line
  value-list-comma-newline-before: never-multi-line
  value-list-comma-space-after: always-single-line
  value-list-comma-space-before: never
  value-list-max-empty-lines: 0

  # Custom property
  custom-property-empty-line-before: never

  # Property
  property-case: lower

  # Declaration
  declaration-bang-space-after: never
  declaration-bang-space-before: always
  declaration-colon-newline-after: null
  declaration-colon-space-after: null
  declaration-colon-space-before: null
  declaration-empty-line-before: null

  # Declaration block
  declaration-block-semicolon-newline-after: null
  declaration-block-semicolon-newline-before: null
  declaration-block-semicolon-space-after: null
  declaration-block-semicolon-space-before: null
  declaration-block-trailing-semicolon: always

  # Block
  block-closing-brace-empty-line-before: null
  block-closing-brace-newline-after:
    null
    # - always
    # - ignoreAtRules:
    #     - if
    #     - else

  block-closing-brace-newline-before: null
  block-closing-brace-space-after: null
  block-closing-brace-space-before: null
  block-opening-brace-newline-after: null
  block-opening-brace-newline-before: null
  block-opening-brace-space-after: null
  block-opening-brace-space-before:
    null
    # - always
    # - ignoreAtRules:
    #     - if
    #     - else

  # Selector
  selector-attribute-brackets-space-inside: never
  selector-attribute-operator-space-after: never
  selector-attribute-operator-space-before: never
  selector-attribute-quotes: always
  selector-combinator-space-after: always
  selector-combinator-space-before: always
  selector-descendant-combinator-no-non-space: true
  selector-pseudo-class-case: lower
  selector-pseudo-class-parentheses-space-inside: never
  selector-pseudo-element-case: lower
  selector-pseudo-element-colon-notation: double
  selector-type-case: lower

  # Selector list
  selector-list-comma-newline-after: always-multi-line
  selector-list-comma-newline-before: never-multi-line
  selector-list-comma-space-after: always-single-line
  selector-list-comma-space-before: never

  # Rule
  rule-empty-line-before:
    null
    # - always
    # - except:
    #     - after-single-line-comment
    #   ignore:
    #     - first-nested
    #     - after-comment

  # Media feature
  media-feature-colon-space-after: always
  media-feature-colon-space-before: never
  media-feature-name-case: lower
  media-feature-parentheses-space-inside: never
  media-feature-range-operator-space-after: always
  media-feature-range-operator-space-before: always

  # Media query list
  media-query-list-comma-newline-after: always-multi-line
  media-query-list-comma-newline-before: never-multi-line
  media-query-list-comma-space-after: always-single-line
  media-query-list-comma-space-before: never

  # At-rule
  at-rule-empty-line-before: null
  at-rule-name-case: lower
  at-rule-name-newline-after: null
  at-rule-name-space-after: always-single-line
  at-rule-semicolon-newline-after: null
  at-rule-semicolon-space-before: null

  # Comment
  comment-empty-line-before:
    - always
    - except: [first-nested]
      ignore: [after-comment, stylelint-commands]

  comment-whitespace-inside: always

  # General / Sheet
  indentation: null
  linebreaks: unix
  max-empty-lines: null
  max-line-length: null
  no-eol-whitespace: true
  no-missing-end-of-source-newline: null
  no-empty-first-line: true

  #-- Plugins

  #-- Declaration strict value
  # scale-unlimited/declaration-strict-value:
  #   - - z-index
  #     - /-radius/
  #     - /color/
  #     - font-family
  #     - font-size
  #     - font-weight

  #   - ignoreKeywords:
  #       z-index:
  #         - '-1'
  #         - auto
  #         - inherit

  #       /-radius/:
  #         - inherit

  #       /color/:
  #         - transparent
  #         - currentColor
  #         - inherit

  #       font-family:
  #         - inherit

  #       font-size:
  #         - inherit

  #       font-weight:
  #         - inherit

  #-- SCSS

  # @-else
  scss/at-else-closing-brace-newline-after: always-last-in-chain
  scss/at-else-closing-brace-space-after: null
  scss/at-else-empty-line-before: null
  scss/at-else-if-parentheses-space-before: always

  # @-extend
  scss/at-extend-no-missing-placeholder: null # via at-rule-blacklist

  # @-function
  scss/at-function-named-arguments: null
  scss/at-function-parentheses-space-before: never
  scss/at-function-pattern:
    - (^[a-z]|[A-Z0-9])[a-z]*
    - message: Function name must be kebab-case

  # @-if
  scss/at-if-closing-brace-newline-after: always-last-in-chain
  scss/at-if-closing-brace-space-after: null

  # @-import
  scss/at-import-no-partial-leading-underscore: true
  scss/at-import-partial-extension-blacklist: null # via scss/at-import-partial-extension-whitelist
  scss/at-import-partial-extension-whitelist:
    - scss
    - sass
    - css

  # @-mixin
  scss/at-mixin-argumentless-call-parentheses: always
  scss/at-mixin-named-arguments: null
  scss/at-mixin-parentheses-space-before: never
  # scss/at-mixin-pattern:
  #   - ^([a-z][a-z0-9]*)(-[a-z0-9]+)*(-styles|-image)$
  #   - message: Mixin name must be kebab-case and suffixed with -styles | -image

  # @-rule
  scss/at-rule-no-unknown:
    - true
    - ignoreAtRules:
        - extends
        - components
        - utilities
        - screen

  # $-variable
  scss/dollar-variable-colon-newline-after: null
  scss/dollar-variable-colon-space-after: at-least-one-space
  scss/dollar-variable-colon-space-before: never
  scss/dollar-variable-default: null
  scss/dollar-variable-empty-line-before: null
  scss/dollar-variable-no-missing-interpolation: true
  scss/dollar-variable-pattern:
    - ^(?:(?:o|c|u|t|s|is|has|_|js|qa)-)?[a-zA-Z0-9]+(?:-[a-zA-Z0-9]+)*(?:--[a-zA-Z0-9]+(?:-[a-zA-Z0-9]+)*)?(?:\\[.+\\])?$
    - message: Variable name must follow the BEM pattern. Example $color-brand. Variety of the main/primary variable $color-brand-primary && $color-brand-secondary

  # %-placeholder
  scss/percent-placeholder-pattern: null # via at-rule-blacklist

  # //-comment
  scss/double-slash-comment-empty-line-before: null
  scss/double-slash-comment-inline: null
  scss/double-slash-comment-whitespace-inside: null

  # Declaration
  scss/declaration-nested-properties: never
  scss/declaration-nested-properties-no-divided-groups: null # via scss/declaration-nested-properties

  # Media feature
  scss/media-feature-value-dollar-variable: null

  # Operator
  scss/operator-no-newline-after: true
  scss/operator-no-newline-before: true
  scss/operator-no-unspaced: true

  # Partial
  scss/partial-no-import: null

  # Selector
  scss/selector-nest-combinators: null
  scss/selector-no-redundant-nesting-selector: null

  # General / Sheet
  scss/no-dollar-variables: null
  scss/no-duplicate-dollar-variables:
    - true
    - ignoreInside: at-rule

  #-- Order
  order/order:
    - # $variables
      - dollar-variables

      # @include
      - type: at-rule
        name: include
        hasBlock: false

      # @include {}
      - type: at-rule
        name: include
        hasBlock: true

      # properties
      - declarations

      # Nested
      - rules

      # Current &,
      - type: rule
        selector: ^&,

      # &::pseudo-elements
      - type: rule
        selector: ^&::[\w-]+,?

      # &:pseudo-classes
      - type: rule
        selector: ^&:[\w-]+,?
      - type: rule
        selector: ^#{\$hover-selector}$

      # Parent selection &
      - type: rule
        selector: '&$'

    - unspecified: ignore

  # no-invalid-position-at-import-rule: null

  # https://www.w3.org/Style/CSS/all-properties.en.html (excluding FPWD)
  order/properties-order:
    - - groupName: 'Content'
        properties:
          - content
          - quotes

      - groupName: 'Position'
        properties:
          - position
          - top
          - right
          - bottom
          - left
          - z-index

      - groupName: 'Element'
        properties:
          - appearance
          - display
          - float
          - clear
          - overflow
          - overflow-x
          - overflow-y
          - overflow-style
          - overflow-wrap
          - overflow-scrolling # Not W3C
          - overscroll-behavior
          - clip
          - clip-path
          - clip-rule
          - visibility
          - opacity
          - vertical-align
          - resize

      - groupName: 'Flex'
        properties:
          - flex
          - flex-grow
          - flex-shrink
          - flex-basis
          - flex-flow
          - flex-direction
          - flex-wrap
          - justify-items
          - justify-content
          - justify-self
          - align-items
          - align-content
          - align-self
          - order

      - groupName: 'List'
        properties:
          - list-style
          - list-style-type
          - list-style-position
          - list-style-image
          - counter-reset
          - counter-set
          - counter-increment

      - groupName: 'Dimension'
        properties:
          - box-sizing
          - width
          - min-width
          - max-width
          - height
          - min-height
          - max-height
          - padding
          - padding-top
          - padding-right
          - padding-bottom
          - padding-left
          - 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-color
          - border-top-color
          - border-right-color
          - border-bottom-color
          - border-left-color
          - border-radius
          - border-top-left-radius
          - border-top-right-radius
          - border-bottom-left-radius
          - border-bottom-right-radius
          - border-image
          - border-image-source
          - border-image-slice
          - border-image-width
          - border-image-outset
          - border-image-repeat
          - margin
          - margin-top
          - margin-right
          - margin-bottom
          - margin-left
          - outline
          - outline-width
          - outline-style
          - outline-color
          - outline-offset
          - box-shadow

      - groupName: 'Background'
        properties:
          - background
          - background-color
          - background-image
          - background-position
          - background-size
          - background-repeat
          - background-origin
          - background-clip
          - background-attachment
          - background-blend-mode

      - groupName: 'Text'
        properties:
          - color
          - font
          - font-family
          - font-size
          - font-size-adjust
          - font-weight
          - font-style
          - font-kerning
          - font-stretch
          - font-display
          - font-variant
          - font-variant-alternates
          - font-variant-caps
          - font-variant-east-asian
          - font-variant-ligatures
          - font-variant-numeric
          - font-variant-position
          - font-variation-settings
          - font-feature-settings
          - font-language-override
          - text-align
          - text-align-all
          - text-align-last
          - text-justify
          - text-indent
          - text-transform
          - text-decoration
          - text-decoration-line
          - text-decoration-style
          - text-decoration-color
          - text-decoration-skip
          - text-underline-position
          - text-shadow
          - text-combine-upright
          - text-orientation
          - text-overflow
          - text-emphasis
          - text-emphasis-style
          - text-emphasis-color
          - text-emphasis-position
          - line-height
          - direction
          - letter-spacing
          - tab-size
          - white-space
          - word-break
          - word-spacing
          - word-wrap
          - src

      - groupName: 'Table'
        properties:
          - caption-side
          - table-layout
          - border-collapse
          - border-spacing
          - empty-cells
          - columns
          - column-gap
          - column-fill
          - column-rule
          - column-span
          - column-count
          - column-width

      - groupName: 'Alteration'
        properties:
          - filter
          - transform
          - transform-origin
          - transform-box

      - groupName: 'Transition'
        properties:
          - transition
          - transition-property
          - transition-duration
          - transition-timing-function
          - transition-delay

      - groupName: 'Animation'
        properties:
          - animation
          - animation-name
          - animation-duration
          - animation-timing-function
          - animation-delay
          - animation-iteration-count
          - animation-direction
          - animation-fill-mode
          - animation-play-state

      - groupName: 'Cursor'
        properties:
          - cursor
          - user-select

    - unspecified: bottomAlphabetical

  order/properties-alphabetical-order: null