.stylelintrc.yml

extends:
  - "stylelint-config-prettier"
plugins:
  - "stylelint-order"
rules:
  # ----------------------------------------------------------------------------------------------------------------------------
  # Default Rules
  # ----------------------------------------------------------------------------------------------------------------------------
  # Specify a blacklist of disallowed at-rules.
  at-rule-blacklist: ~
  # Specify lowercase or uppercase for at-rules names (Autofixable).
  at-rule-name-case: "lower"
  # Require a newline after at-rule names.
  at-rule-name-newline-after: ~
  # Require a single space after at-rule names.
  at-rule-name-space-after: "always"
  # Disallow vendor prefixes for at-rules.
  at-rule-no-vendor-prefix: true
  # Disallow unknown at-rules.
  at-rule-no-unknown: true
  # Specify a requirelist of properties for an at-rule.
  at-rule-property-requirelist: ~
  # Require a newline after the semicolon of at-rules.
  at-rule-semicolon-newline-after: "always"
  # Require a single space or disallow whitespace before the semicolons of at rules.
  at-rule-semicolon-space-before: "never"
  # Specify a whitelist of allowed at-rules.
  at-rule-whitelist: ~
  # Require or disallow an empty line before the closing brace of blocks.
  block-closing-brace-empty-line-before: "never"
  # Require a newline or disallow whitespace after the closing brace of blocks.
  block-closing-brace-newline-after: "always"
  # Require a newline or disallow whitespace before the closing brace of blocks.
  block-closing-brace-newline-before: "always-multi-line"
  # Require a single space or disallow whitespace after the closing brace of blocks.
  block-closing-brace-space-after: ~
  # Require a single space or disallow whitespace before the closing brace of blocks.
  block-closing-brace-space-before: "always-single-line"
  # Disallow empty blocks.
  block-no-empty: true
  # Require a newline after the opening brace of blocks.
  block-opening-brace-newline-after: "always-multi-line"
  # Require a newline or disallow whitespace before the opening brace of blocks.
  block-opening-brace-newline-before: ~
  # Require a single space or disallow whitespace after the opening brace of blocks.
  block-opening-brace-space-after: "always-single-line"
  # Require a single space or disallow whitespace before the opening brace of blocks.
  block-opening-brace-space-before: "always"
  # Specify lowercase or uppercase for hex colors (Autofixable).
  color-hex-case: "lower"
  # Specify short or long notation for hex colors (Autofixable).
  color-hex-length: "long"
  # Require (where possible) or disallow named colors.
  color-named: "never"
  # Disallow hex colors.
  color-no-hex: true
  # Disallow invalid hex colors.
  color-no-invalid-hex: true
  # Require or disallow an empty line before comments (Autofixable).
  comment-empty-line-before: ~
  # Disallow empty comments.
  comment-no-empty: true
  # Require or disallow whitespace on the inside of comment markers.
  comment-whitespace-inside: "always"
  # Specify a blacklist of disallowed words within comments.
  comment-word-blacklist: ~
  # Specify a pattern for custom media query names.
  custom-media-pattern: ~
  # Require or disallow an empty line before custom properties (Autofixable).
  custom-property-empty-line-before: "never"
  # Specify a pattern for custom properties.
  custom-property-pattern: "^([a-z][a-z0-9]*)(\\-[a-z0-9]+)*$"
  # Require a single space or disallow whitespace after the bang of declarations.
  declaration-bang-space-after: "never"
  # Require a single space or disallow whitespace before the bang of declarations.
  declaration-bang-space-before: "always"
  # Disallow duplicate properties within declaration blocks.
  declaration-block-no-duplicate-properties:
    - true
    - ignore: ["consecutive-duplicates-with-different-values"]
  # Disallow longhand properties that can be combined into one shorthand property.
  declaration-block-no-redundant-longhand-properties:
    - true
    - ignoreShorthands:
        - "animation"
        - "background"
        - "flex"
        - "font"
        - "grid"
        - "list-style"
        - "transition"
  # Disallow shorthand properties that override related longhand properties within declaration blocks.
  declaration-block-no-shorthand-property-overrides: true
  # Require a newline or disallow whitespace after the semicolons of declaration blocks.
  declaration-block-semicolon-newline-after: ~
  # Require a newline or disallow whitespace before the semicolons of declaration blocks.
  declaration-block-semicolon-newline-before: "never-multi-line"
  # Require a single space or disallow whitespace after the semicolons of declaration blocks.
  declaration-block-semicolon-space-after: "always-single-line"
  # Require a single space or disallow whitespace before the semicolons of declaration blocks.
  declaration-block-semicolon-space-before: "never"
  # Limit the number of declaration within single line declaration blocks.
  declaration-block-single-line-max-declarations: 0
  # Require or disallow a trailing semicolon within declaration blocks.
  declaration-block-trailing-semicolon: "always"
  # Require a newline or disallow whitespace after the colon of declarations.
  declaration-colon-newline-after: "always-multi-line"
  # Require a single space or disallow whitespace after the colon of declarations.
  declaration-colon-space-after: "always-single-line"
  # Require a single space or disallow whitespace before the colon of declarations.
  declaration-colon-space-before: "never"
  # Require or disallow an empty line before declarations (Autofixable).
  declaration-empty-line-before: ~
  # Disallow !important within declarations.
  declaration-no-important: true
  # Specify a blacklist of disallowed property and unit pairs within declarations.
  declaration-property-unit-disallowed-list:
    font-size: ["%", "vh"]
  # Specify a whitelist of allowed property and unit pairs within declarations.
  declaration-property-unit-whitelist: ~
  # Specify a blacklist of disallowed property and value pairs within declarations.
  declaration-property-value-blacklist: ~
  # Specify a whitelist of allowed property and value pairs within declarations.
  declaration-property-value-whitelist: ~
  # Specify whether or not quotation marks should be used around font family names.
  font-family-name-quotes: "always-unless-keyword"
  # Require numeric or named (where possible) font-weight values.
  font-weight-notation: "named-where-possible"
  # Disallow duplicate font family names.
  font-family-no-duplicate-names: true
  # Disallow missing generic families in lists of font family names.
  font-family-no-missing-generic-family-keyword: true
  # Specify a blacklist of disallowed functions.
  function-blacklist: ~
  # Disallow an invalid expression within calc functions.
  function-calc-no-invalid: ~ # Cannot use calc(-1 * var(--xxx))
  # Disallow an unspaced operator within `calc` functions.
  function-calc-no-unspaced-operator: true
  # Require a newline or disallow whitespace after the commas of functions.
  function-comma-newline-after: "never-multi-line"
  # Require a newline or disallow whitespace before the commas of functions.
  function-comma-newline-before: "never-multi-line"
  # Require a single space or disallow whitespace after the commas of functions.
  function-comma-space-after: "always"
  # Require a single space or disallow whitespace before the commas of functions.
  function-comma-space-before: "never"
  # Disallow direction values in `linear-gradient()` calls that are not valid according to the standard syntax.
  function-linear-gradient-no-nonstandard-direction: true
  # Limit the number of adjacent empty lines within functions.
  function-max-empty-lines: 0
  # Specify lowercase or uppercase for function names.
  function-name-case: "lower"
  # Require a newline or disallow whitespace on the inside of the parentheses of functions.
  function-parentheses-newline-inside: "never-multi-line"
  # Require a single space or disallow whitespace on the inside of the parentheses of functions.
  function-parentheses-space-inside: "never"
  # Disallow scheme-relative urls.
  function-url-no-scheme-relative: true
  # Specify a blacklist of disallowed url schemes.
  function-url-scheme-disallowed-list:
    - "ftp"
    - "/^http/"
  # Specify a whitelist of allowed url schemes.
  function-url-scheme-whitelist: ~
  # Require or disallow quotes for urls.
  function-url-quotes: "always"
  # Specify a whitelist of allowed functions.
  function-whitelist: ~
  # Require or disallow whitespace after functions.
  function-whitespace-after: "always"
  # Specify indentation (Autofixable).
  indentation: 2
  # Disallow `!important` within keyframe declarations.
  keyframe-declaration-no-important: true
  # Disallow units for zero lengths (Autofixable).
  length-zero-no-unit:
    - true
    - ignore:
        - "custom-properties"
  # Specify unix or windows linebreaks.
  linebreaks: "unix"
  # Limit the number of adjacent empty lines.
  max-empty-lines: 1
  # Limit the length of a line.
  max-line-length: 128
  # Limit the depth of nesting.
  max-nesting-depth: 3
  # Require a single space or disallow whitespace after the colon in media features.
  media-feature-colon-space-after: "always"
  # Require a single space or disallow whitespace before the colon in media features.
  media-feature-colon-space-before: "never"
  # Specify a blacklist of disallowed media feature names.
  media-feature-name-blacklist: ~
  # Specify lowercase or uppercase for media feature names.
  media-feature-name-case: "lower"
  # Disallow vendor prefixes for media feature names.
  media-feature-name-no-vendor-prefix: ~
  # Disallow unknown media feature names.
  media-feature-name-no-unknown: true
  # Specify a whitelist of allowed media feature name and value pairs.
  media-feature-name-value-whitelist: ~
  # Specify a whitelist of allowed media feature names.
  media-feature-name-whitelist: ~
  # Require a single space or disallow whitespace on the inside of the parentheses within media features.
  media-feature-parentheses-space-inside: "never"
  # Require a single space or disallow whitespace after the range operator in media features.
  media-feature-range-operator-space-after: "always"
  # Require a single space or disallow whitespace before the range operator in media features.
  media-feature-range-operator-space-before: "always"
  # Require a newline or disallow whitespace after the commas of media query lists.
  media-query-list-comma-newline-after: "never-multi-line"
  # Require a newline or disallow whitespace before the commas of media query lists.
  media-query-list-comma-newline-before: "never-multi-line"
  # Require a single space or disallow whitespace after the commas of media query lists.
  media-query-list-comma-space-after: "always"
  # Require a single space or disallow whitespace before the commas of media query lists.
  media-query-list-comma-space-before: "never"
  # Disallow selectors of lower specificity from coming after overriding selectors of higher specificity.
  no-descending-specificity: true
  # Disallow duplicate `@import` rules within a stylesheet.
  no-duplicate-at-import-rules: true
  # Disallow duplicate selectors.
  no-duplicate-selectors: true
  # Disallow empty first lines.
  no-empty-first-line: true
  # Disallow empty sources.
  no-empty-source: true
  # Disallow end-of-line whitespace.
  no-eol-whitespace: true
  # Disallow extra semicolons.
  no-extra-semicolons: true
  # Disallow double-slash comments ( `//...` ) which are not supported by CSS.
  no-invalid-double-slash-comments: true
  # Disallow unknown animations.
  no-unknown-animations: true
  # Require or disallow a leading zero for fractional numbers less than 1 (Autofixable).
  number-leading-zero: "always"
  # Limit the number of decimal places allowed in numbers.
  number-max-precision: 2
  # Disallow trailing zeros in numbers (Autofixable).
  number-no-trailing-zeros: ~
  # Specify lowercase or uppercase for properties.
  property-case: "lower"
  # Specify a blacklist of disallowed properties.
  property-disallowed-list:
    - "grid-gap"
    - "grid-column-gap"
    - "grid-row-gap"
    - "animation"
    - "background"
    - "flex"
    - "font"
    - "word-wrap"
    - "grid"
    - "list-style"
    - "transition"
  # Disallow unknown properties.
  property-no-unknown: true
  # Disallow vendor prefixes for properties.
  property-no-vendor-prefix: ~
  # Specify a whitelist of allowed properties.
  property-whitelist: ~
  # Require or disallow an empty line before rules (Autofixable).
  rule-empty-line-before: ~
  # Require a single space or disallow whitespace on the inside of the brackets within attribute selectors.
  selector-attribute-brackets-space-inside: "never"
  # Specify a blacklist of disallowed attribute operators.
  selector-attribute-operator-blacklist: ~
  # Require a single space or disallow whitespace after operators within attribute selectors.
  selector-attribute-operator-space-after: "never"
  # Require a single space or disallow whitespace before operators within attribute selectors.
  selector-attribute-operator-space-before: "never"
  # Specify a whitelist of allowed attribute operators.
  selector-attribute-operator-whitelist: ~
  # Require or disallow quotes for attribute values.
  selector-attribute-quotes: "always"
  # Specify a pattern for class selectors.
  selector-class-pattern: ~ # Recommended to use kebab-case but ti is impossible to access from JS
  # Specify a blacklist of disallowed combinators.
  selector-combinator-blacklist: ~
  # Require a single space or disallow whitespace after the combinators of selectors.
  selector-combinator-space-after: "always"
  # Require a single space or disallow whitespace before the combinators of selectors.
  selector-combinator-space-before: "always"
  # Specify a whitelist of allowed combinators.
  selector-combinator-whitelist: ~
  # Disallow non-space characters for descendant combinators of selectors.
  selector-descendant-combinator-no-non-space: true
  # Specify a pattern for id selectors.
  selector-id-pattern: "^spec-up$"
  # Require a newline or disallow whitespace after the commas of selector lists.
  selector-list-comma-newline-after: "always-multi-line"
  # Require a newline or disallow whitespace before the commas of selector lists.
  selector-list-comma-newline-before: "never-multi-line"
  # Require a single space or disallow whitespace after the commas of selector lists.
  selector-list-comma-space-after: "always-single-line"
  # Require a single space or disallow whitespace before the commas of selector lists.
  selector-list-comma-space-before: "never"
  # Limit the number of attribute selectors in a selector.
  selector-max-attribute: 1
  # Limit the number of classes in a selector.
  selector-max-class: 4
  # Limit the number of combinators in a selector.
  selector-max-combinators: 4
  # Limit the number of compound selectors in a selector.
  selector-max-compound-selectors: 5
  # Limit the number of adjacent empty lines within selectors.
  selector-max-empty-lines: 0
  # Limit the number of id selectors in a selector.
  selector-max-id: 1
  # Limit the specificity of selectors.
  selector-max-specificity: ~
  # Limit the number of type in a selector.
  selector-max-type: 4
  # Limit the number of universal selectors in a selector.
  selector-max-universal: 1
  # Specify a pattern for the selectors of rules nested within rules.
  selector-nested-pattern: ~
  # Disallow qualifying a selector by type.
  selector-no-qualifying-type: ~
  # Disallow vendor prefixes for selectors.
  selector-no-vendor-prefix: true
  # Specify a blacklist of disallowed pseudo-class selectors.
  selector-pseudo-class-blacklist: ~
  # Specify lowercase or uppercase for pseudo-class selectors.
  selector-pseudo-class-case: "lower"
  # Disallow unknown pseudo-class selectors.
  selector-pseudo-class-no-unknown:
    - true
    - { ignorePseudoClasses: ["global"] }
  # Require a single space or disallow whitespace on the inside of the parentheses within pseudo-class selectors.
  selector-pseudo-class-parentheses-space-inside: "never"
  # Specify a whitelist of allowed pseudo-class selectors.
  selector-pseudo-class-whitelist: ~
  # Specify a blacklist of disallowed pseudo-element selectors.
  selector-pseudo-element-blacklist: ~
  # Specify lowercase or uppercase for pseudo-element selectors.
  selector-pseudo-element-case: "lower"
  # Specify single or double colon notation for applicable pseudo-elements.
  selector-pseudo-element-colon-notation: "double"
  # Disallow unknown pseudo-element selectors.
  selector-pseudo-element-no-unknown: true
  # Specify a whitelist of allowed pseudo-element selectors.
  selector-pseudo-element-whitelist: ~
  # Specify lowercase or uppercase for type selector.
  selector-type-case: "lower"
  # Disallow unknown type selectors.
  selector-type-no-unknown: true
  # Disallow redundant values in shorthand properties (Autofixable).
  shorthand-property-no-redundant-values: true
  # Disallow (unescaped) newlines in strings.
  string-no-newline: true
  # Specify single or double quotes around strings (Autofixable).
  string-quotes: "double"
  # Specify the minimum number of milliseconds for time values.
  time-min-milliseconds: 10
  # Specify a whitelist of allowed units.
  unit-allowed-list:
    - ["px", "vw", "vh", "%", "em"]
    - ignoreProperties:
        em:
          - "margin"
          - "margin-top"
          - "margin-right"
          - "margin-bottom"
          - "margin-left"
          - "padding"
          - "padding-top"
          - "padding-right"
          - "padding-bottom"
          - "padding-left"
          - "height"
          - "min-height"
          - "font-size"
          - "letter-spacing"
          - "text-indent"
          - "/^\\-\\-/"
        ms:
          - "animation-duration"
          - "animation-delay"
          - "transition-duration"
          - "transition-delay"
          - "/^\\-\\-/"
        deg:
          - "background-image"
          - "transform"
          - "/^\\-\\-/"
        fr:
          - "/^grid\\-/"
  # Specify lowercase or uppercase for units.
  unit-case: "lower"
  # Specify a blacklist of disallowed units.
  unit-disallowed-list: "unit"
  # Disallow unknown units.
  unit-no-unknown: true
  # Specify lowercase or uppercase for keywords values.
  value-keyword-case: ~
  # Require a newline or disallow whitespace after the commas of value lists.
  value-list-comma-newline-after: "never-multi-line"
  # Require a newline or disallow whitespace before the commas of value lists.
  value-list-comma-newline-before: "never-multi-line"
  # Require a single space or disallow whitespace after the commas of value lists.
  value-list-comma-space-after: "always"
  # Require a single space or disallow whitespace before the commas of value lists.
  value-list-comma-space-before: "never"
  # Limit the number of adjacent empty lines within value lists.
  value-list-max-empty-lines: 0
  # Disallow vendor prefixes for values.
  value-no-vendor-prefix: true

  # ----------------------------------------------------------------------------------------------------------------------------
  # stylelint-order
  # ----------------------------------------------------------------------------------------------------------------------------
  # For more detail, https://github.com/hudochenkov/stylelint-order .
  # ----------------------------------------------------------------------------------------------------------------------------
  "order/order":
    - - "custom-properties"
      - "declarations"
      - "rules"
      - "at-rules"
    - unspecified: "bottom"
  "order/properties-order":
    - "display"
    - "grid"
    - "grid-column"
    - "grid-row"
    - "grid-area"
    - "grid-template"
    - "grid-template-columns"
    - "grid-template-rows"
    - "grid-template-areas"
    - "grid-auto-flow"
    - "grid-auto-columns"
    - "grid-auto-rows"
    - "flex"
    - "flex-grow"
    - "flex-shrink"
    - "justify-self"
    - "align-self"
    - "flex-basis"
    - "flex-direction"
    - "order"
    - "flex-order"
    - "flex-wrap"
    - "flex-flow"
    - "justify-content"
    - "align-items"
    - "align-content"
    - "flex-pack"
    - "flex-align"
    - "float"
    - "clear"
    - "box-sizing"
    - "box-decoration-break"
    - "box-shadow"
    - "position"
    - "top"
    - "right"
    - "bottom"
    - "left"
    - "z-index"
    - "margin"
    - "margin-top"
    - "margin-right"
    - "margin-bottom"
    - "margin-left"
    - "padding"
    - "padding-top"
    - "padding-right"
    - "padding-bottom"
    - "padding-left"
    - "width"
    - "min-width"
    - "max-width"
    - "height"
    - "min-height"
    - "max-height"
    - "overflow"
    - "overflow-x"
    - "overflow-y"
    - "vertical-align"
    - "list-style"
    - "list-style-position"
    - "list-style-type"
    - "list-style-image"
    - "columns"
    - "column-span"
    - "column-width"
    - "column-fill"
    - "column-gap"
    - "column-rule"
    - "column-rule-width"
    - "column-rule-style"
    - "column-rule-color"
    - "row-gap"
    - "color"
    - "font"
    - "font-family"
    - "font-size"
    - "font-size-adjust"
    - "font-stretch"
    - "font-weight"
    - "font-style"
    - "font-variant"
    - "word-spacing"
    - "word-wrap"
    - "word-break"
    - "white-space"
    - "tab-size"
    - "hyphens"
    - "src"
    - "line-height"
    - "letter-spacing"
    - "overflow-wrap"
    - "text-align"
    - "text-align-last"
    - "text-decoration"
    - "text-emphasis"
    - "text-emphasis-position"
    - "text-emphasis-style"
    - "text-emphasis-color"
    - "text-indent"
    - "text-justify"
    - "text-outline"
    - "text-transform"
    - "text-wrap"
    - "text-overflow"
    - "text-overflow-ellipsis"
    - "text-overflow-mode"
    - "text-shadow"
    - "border"
    - "border-spacing"
    - "border-collapse"
    - "border-width"
    - "border-style"
    - "border-color"
    - "border-top"
    - "border-top-width"
    - "border-top-style"
    - "border-top-color"
    - "border-right"
    - "border-right-width"
    - "border-right-style"
    - "border-right-color"
    - "border-bottom"
    - "border-bottom-width"
    - "border-bottom-style"
    - "border-bottom-color"
    - "border-left"
    - "border-left-width"
    - "border-left-style"
    - "border-left-color"
    - "border-radius"
    - "border-top-left-radius"
    - "border-top-right-radius"
    - "border-bottom-right-radius"
    - "border-bottom-left-radius"
    - "border-image"
    - "border-image-source"
    - "border-image-slice"
    - "border-image-width"
    - "border-image-outset"
    - "border-image-repeat"
    - "border-top-image"
    - "border-right-image"
    - "border-bottom-image"
    - "border-left-image"
    - "border-corner-image"
    - "border-top-left-image"
    - "border-top-right-image"
    - "border-bottom-right-image"
    - "border-bottom-left-image"
    - "background"
    - "background-color"
    - "background-image"
    - "background-attachment"
    - "background-position"
    - "background-position-x"
    - "background-position-y"
    - "background-repeat"
    - "background-clip"
    - "background-origin"
    - "background-size"
    - "clip"
    - "filter"
    - "mix-blend-mode"
    - "outline"
    - "outline-width"
    - "outline-style"
    - "outline-color"
    - "outline-offset"
    - "table-layout"
    - "caption-side"
    - "empty-cells"
    - "quotes"
    - "content"
    - "counter-increment"
    - "counter-reset"
    - "opacity"
    - "visibility"
    - "filter"
    - "resize"
    - "cursor"
    - "nav-index"
    - "nav-up"
    - "nav-right"
    - "nav-down"
    - "nav-left"
    - "transition"
    - "transition-property"
    - "transition-duration"
    - "transition-delay"
    - "transition-timing-function"
    - "transform"
    - "transform-origin"
    - "animation"
    - "animation-name"
    - "animation-duration"
    - "animation-play-state"
    - "animation-timing-function"
    - "animation-delay"
    - "animation-iteration-count"
    - "animation-direction"
    - "animation-fill-mode"
    - "pointer-events"
    - "unicode-bidi"
    - "direction"
    - "break-before"
    - "break-inside"
    - "break-after"
    - "page-break-before"
    - "page-break-inside"
    - "page-break-after"
    - "orphans"
    - "widows"
    - "zoom"
    - "max-zoom"
    - "min-zoom"
    - "user-zoom"
    - "orientation"