.stylelintrc.json

{
  "env": {
    "browser": true
  },
  "ignorePatterns": [
    "*.min.js"
  ],
  "ignoreFiles": "test/**",
  "plugins": [
    "stylelint-no-unsupported-browser-features",
    "stylelint-order",
    "stylelint-use-logical-spec"
  ],
  "overrides": [
    {
      "files": [
        "*.js",
        "**/*.js"
      ],
      "customSyntax": "postcss-jsx",
      "rules": {
        "indentation": null,
        "no-eol-whitespace": null
      }
    }
  ],
  "rules": {
    "plugin/no-unsupported-browser-features": [
      true,
      {
        "browsers": [
          "Firefox >= 110",
          "Safari >= 16.4",
          "Chrome >= 106",
          "Edge >= 106"
        ],
        "ignore": [
          "css-appearance",
          "overscroll-behavior",
          "css3-cursors",
          "css-clip-path",
          "css-masks",
          "user-select-none"
        ]
      }
    ],
    "liberty/use-logical-spec": [
      "always"
    ],
    "max-nesting-depth": [
      0
    ],
    "selector-no-vendor-prefix": null,
    "property-no-vendor-prefix": null,
    "value-no-vendor-prefix": null,
    "selector-no-qualifying-type": null,
    "number-no-trailing-zeros": null,
    "string-quotes": null,
    "font-family-no-missing-generic-family-keyword": null,
    "color-hex-length": null,
    "color-hex-case": null,
    "selector-nested-pattern": "^(\\s+|((:root|&|[a-z0-9A-Z._-])(:not\\([^\\)]*\\))*(\\[[^\\]]*\\])*([^\\s>~+])*)|&::?|[&+~>])*$",
    "no-empty-source": null,
    "block-no-empty": true,
    "no-extra-semicolons": true,
    "rule-empty-line-before": [
      "always-multi-line",
      {
        "except": [
          "first-nested"
        ],
        "ignore": [
          "after-comment"
        ]
      }
    ],
    "declaration-block-no-duplicate-properties": [
      true,
      {
        "ignore": [
          "consecutive-duplicates-with-different-values"
        ]
      }
    ],
    "no-eol-whitespace": true,
    "shorthand-property-no-redundant-values": null,
    "selector-max-universal": 0,
    "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-element-case": "lower",
    "selector-pseudo-class-parentheses-space-inside": "never",
    "selector-type-case": "lower",
    "selector-list-comma-space-before": "never",
    "custom-property-no-missing-var-function": true,
    "declaration-property-value-disallowed-list": [
      {
        "/^margin/": "/[^0]/",
        "/^visibility$/": "/^visible$/"
      },
      {
        "message": "Elements should not set margins. Use padding, or use parent element if styling layout."
      },
      {
        "message": "Use `inherit` of instead of `visible` to respect parent visibility."
      }
    ],
    "rule-selector-property-disallowed-list": [
      {
        "/^(?!:host)[^[]+\\[/": "/^--/"
      },
      { "message": "Avoid using CSS variables for state since they will traverse down the entire tree" },
      { "message": "Avoid constructing containers on shadowed elements since they will not be exposed to children as their offsetParent" }
    ],
    "indentation": [
      2,
      {
        "baseIndentLevel": 1,
        "indentInsideParens": "once-at-root-twice-in-block",
        "indentClosingBrace": false
      }
    ],
    "no-duplicate-selectors": true,
    "max-empty-lines": 1,
    "selector-max-compound-selectors": [
      1,
      {
        "severity": "error",
        "message": "Avoid all invalidations sets. https://chromium.googlesource.com/chromium/src/+/master/third_party/blink/renderer/core/css/style-invalidation.md"
      }
    ],
    "no-descending-specificity": [
      true,
      {
        "severity": "warning"
      }
    ],
    "order/order": [
      "dollar-variables",
      "custom-properties",
      "declarations",
      "rules"
    ],
    "order/properties-alphabetical-order": null,
    "order/properties-order": [
      {
        "groupName": "content",
        "emptyLineBefore": "always",
        "properties": [
          "content"
        ]
      },
      {
        "groupName": "position",
        "emptyLineBefore": "always",
        "properties": [
          "position",
          "top",
          "right",
          "bottom",
          "left",
          "inset",
          "inset-block",
          "inset-block-start",
          "inset-block-end",
          "inset-inline",
          "inset-inline-start",
          "inset-inline-end",
          "align-self",
          "justify-self",
          "order",
          "float",
          "float-defer",
          "float-offset",
          "float-reference"
        ]
      },
      {
        "groupName": "layout",
        "emptyLineBefore": "always",
        "properties": [
          "display",
          "align-content",
          "align-items",
          "grid-column-align",
          "grid-row-align",
          "alignment-adjust",
          "alignment-baseline",
          "baseline-shift",
          "box-decoration-break",
          "box-snap",
          "margin-break",
          "break-before",
          "break-inside",
          "break-after",
          "chains",
          "clear",
          "column-count",
          "column-fill",
          "column-gap",
          "column-rule",
          "column-rule-color",
          "column-rule-style",
          "column-rule-width",
          "column-span",
          "column-width",
          "columns",
          "flex-direction",
          "flex-flow",
          "flex-wrap",
          "flow",
          "flow-from",
          "flow-into",
          "gap",
          "grid-area",
          "grid",
          "grid-auto-columns",
          "grid-auto-flow",
          "grid-auto-rows",
          "grid-template",
          "grid-template-rows",
          "grid-template-columns",
          "grid-template-areas",
          "justify-content",
          "justify-items",
          "overflow",
          "overflow-block",
          "overflow-inline",
          "overflow-style",
          "overflow-wrap",
          "overflow-x",
          "overflow-y",
          "overflow-scrolling",
          "overscroll-behavior",
          "place-content",
          "place-items",
          "place-self",
          "row-gap",
          "scroll-behavior",
          "scroll-chaining",
          "scroll-margin",
          "scroll-margin-block",
          "scroll-margin-block-start",
          "scroll-margin-block-end",
          "scroll-margin-bottom",
          "scroll-margin-inline",
          "scroll-margin-inline-start",
          "scroll-margin-inline-end",
          "scroll-margin-left",
          "scroll-margin-right",
          "scroll-margin-top",
          "scroll-padding",
          "scroll-padding-block",
          "scroll-padding-block-start",
          "scroll-padding-block-end",
          "scroll-padding-bottom",
          "scroll-padding-inline",
          "scroll-padding-inline-start",
          "scroll-padding-inline-end",
          "scroll-padding-left",
          "scroll-padding-right",
          "scroll-padding-top",
          "scroll-snap-align",
          "scroll-snap-stop",
          "scroll-snap-type",
          "scrollbar-color",
          "scrollbar-gutter",
          "scrollbar-width",
          "vertical-align"
        ]
      },
      {
        "groupName": "table",
        "emptyLineBefore": "always",
        "properties": [
          "border-collapse",
          "border-spacing",
          "caption-side",
          "table-layout"
        ]
      },
      {
        "groupName": "box",
        "emptyLineBefore": "always",
        "properties": [
          "box-sizing",
          "height",
          "block-size",
          "min-height",
          "min-block-size",
          "max-height",
          "max-block-size",
          "width",
          "inline-size",
          "min-width",
          "min-inline-size",
          "max-width",
          "max-inline-size",
          "grid-column",
          "grid-column-start",
          "grid-column-span",
          "grid-column-end",
          "grid-row",
          "grid-row-start",
          "grid-row-span",
          "grid-row-end",
          "flex",
          "flex-grow",
          "flex-shrink",
          "flex-basis",
          "margin",
          "margin-top",
          "margin-right",
          "margin-bottom",
          "margin-left",
          "margin-block",
          "margin-block-start",
          "margin-block-end",
          "margin-inline",
          "margin-inline-start",
          "margin-inline-end",
          "margin-trim",
          "border-block",
          "border-block-start",
          "border-block-end",
          "border-block-style",
          "border-block-start-style",
          "border-block-end-style",
          "border-block-width",
          "border-block-start-width",
          "border-block-end-width",
          "border-fit",
          "border-fit-length",
          "border-fit-width",
          "border-corner-fit",
          "border-top-left-fit-length",
          "border-top-right-fit-length",
          "border-bottom-right-fit-length",
          "border-bottom-left-fit-length",
          "border-top-left-fit-width",
          "border-top-right-fit-width",
          "border-bottom-right-fit-width",
          "border-bottom-left-fit-width",
          "border-top-fit-length",
          "border-right-fit-length",
          "border-bottom-fit-length",
          "border-left-fit-length",
          "border-top-fit-width",
          "border-right-fit-width",
          "border-bottom-fit-width",
          "border-left-fit-width",
          "border-image",
          "border-image-source",
          "border-image-slice",
          "border-image-width",
          "border-image-outset",
          "border-image-repeat",
          "border-image-transform",
          "border-top-left-image",
          "border-top-image",
          "border-top-right-image",
          "border-right-image",
          "border-bottom-right-image",
          "border-bottom-image",
          "border-bottom-left-image",
          "border",
          "border-top",
          "border-right",
          "border-bottom",
          "border-left",
          "border-left-image",
          "border-style",
          "border-top-style",
          "border-right-style",
          "border-bottom-style",
          "border-left-style",
          "border-width",
          "border-top-width",
          "border-right-width",
          "border-bottom-width",
          "border-left-width",
          "border-boundary",
          "border-break",
          "border-corner-image",
          "border-corner-image-transform",
          "border-start-start-radius",
          "border-start-end-radius",
          "border-end-start-radius",
          "border-end-end-radius",
          "border-inline",
          "border-inline-style",
          "border-inline-width",
          "border-inline-start",
          "border-inline-start-style",
          "border-inline-start-width",
          "border-inline-end",
          "border-inline-end-style",
          "border-inline-end-width",
          "padding",
          "padding-top",
          "padding-right",
          "padding-bottom",
          "padding-left",
          "padding-block",
          "padding-block-start",
          "padding-block-end",
          "padding-inline",
          "padding-inline-start",
          "padding-inline-end"
        ]
      },
      {
        "groupName": "ui",
        "emptyLineBefore": "always",
        "properties": [
          "appearance",
          "caret",
          "caret-color",
          "caret-shape",
          "cursor",
          "nav-down",
          "nav-left",
          "nav-right",
          "nav-up",
          "outline",
          "outline-color",
          "outline-offset",
          "outline-style",
          "outline-width",
          "pointer-events",
          "resize",
          "tap-highlight-color",
          "user-select"
        ]
      },
      {
        "groupName": "layer",
        "emptyLineBefore": "always",
        "properties": [
          "backface-visibility",
          "background-blend-mode",
          "clip",
          "clip-path",
          "clip-rule",
          "filter",
          "isolation",
          "mask",
          "mask-border",
          "mask-border-mode",
          "mask-border-outset",
          "mask-border-repeat",
          "mask-border-slice",
          "mask-border-source",
          "mask-border-width",
          "mask-clip",
          "mask-composite",
          "mask-image",
          "mask-mode",
          "mask-origin",
          "mask-position",
          "mask-repeat",
          "mask-size",
          "mask-type",
          "mix-blend-mode",
          "opacity",
          "perspective",
          "perspective-origin",
          "transform",
          "transform-box",
          "transform-origin",
          "transform-style",
          "visibility",
          "z-index"
        ]
      },
      {
        "groupName": "appearance",
        "emptyLineBefore": "always",
        "properties": [
          "background",
          "background-clip",
          "background-color",
          "background-image",
          "background-origin",
          "background-position",
          "background-repeat",
          "background-size",
          "background-attachment",
          "border-color",
          "border-block-color",
          "border-block-start-color",
          "border-block-end-color",
          "border-top-color",
          "border-right-color",
          "border-bottom-color",
          "border-left-color",
          "border-inline-color",
          "border-inline-start-color",
          "border-inline-end-color",
          "border-radius",
          "border-top-left-radius",
          "border-top-right-radius",
          "border-bottom-right-radius",
          "border-bottom-left-radius",
          "border-start-start-radius",
          "border-start-end-radius",
          "border-end-start-radius",
          "border-end-end-radius",
          "box-shadow",
          "color",
          "color-adjust",
          "color-interpolation-filters",
          "text-decoration-color",
          "text-emphasis-color",
          "text-shadow"
        ]
      },
      {
        "groupName": "text",
        "emptyLineBefore": "always",
        "properties": [
          "direction",
          "font",
          "font-style",
          "font-weight",
          "font-size",
          "line-height",
          "font-family",
          "font-feature-settings",
          "font-kerning",
          "font-language-override",
          "font-max-size",
          "font-min-size",
          "font-optical-sizing",
          "font-palette",
          "font-size-adjust",
          "font-stretch",
          "font-synthesis",
          "font-synthesis-small-caps",
          "font-synthesis-style",
          "font-synthesis-weight",
          "font-variant",
          "font-variant-alternates",
          "font-variant-caps",
          "font-variant-east-asian",
          "font-variant-emoji",
          "font-variant-ligatures",
          "font-variant-numeric",
          "font-variant-position",
          "font-variation-settings",
          "glyph-orientation-vertical",
          "hanging-punctuation",
          "hyphenate-character",
          "hyphenate-limit-chars",
          "hyphenate-limit-last",
          "hyphenate-limit-lines",
          "hyphenate-limit-zone",
          "hyphens",
          "initial-letters",
          "initial-letters-align",
          "initial-letters-wrap",
          "letter-spacing",
          "line-break",
          "line-height-step",
          "line-padding",
          "max-lines",
          "tab-size",
          "text-align",
          "text-align-all",
          "text-align-last",
          "text-combine-upright",
          "text-decoration",
          "text-decoration-line",
          "text-decoration-skip",
          "text-decoration-skip-ink",
          "text-decoration-style",
          "text-decoration-width",
          "text-emphasis",
          "text-emphasis-position",
          "text-emphasis-skip",
          "text-emphasis-style",
          "text-group-align",
          "text-height",
          "text-indent",
          "text-justify",
          "text-orientation",
          "text-overflow",
          "text-space-collapse",
          "text-space-trim",
          "text-spacing",
          "text-transform",
          "text-underline-offset",
          "text-underline-position",
          "text-wrap",
          "unicode-bidi",
          "white-space",
          "word-break",
          "word-spacing",
          "word-wrap",
          "wrap-after",
          "wrap-before",
          "wrap-flow",
          "wrap-inside",
          "wrap-through",
          "writing-mode"
        ]
      },
      {
        "groupName": "svg",
        "emptyLineBefore": "always",
        "properties": [
          "fill",
          "fill-break",
          "fill-color",
          "fill-image",
          "fill-opacity",
          "fill-origin",
          "fill-position",
          "fill-repeat",
          "fill-rule",
          "fill-size",
          "stroke",
          "stroke-align",
          "stroke-alignment",
          "stroke-break",
          "stroke-color",
          "stroke-dash-corner",
          "stroke-dash-justify",
          "stroke-dashadjust",
          "stroke-dasharray",
          "stroke-dashcorner",
          "stroke-dashoffset",
          "stroke-image",
          "stroke-linecap",
          "stroke-linejoin",
          "stroke-miterlimit",
          "stroke-opacity",
          "stroke-origin",
          "stroke-position",
          "stroke-repeat",
          "stroke-size",
          "stroke-width"
        ]
      },
      {
        "groupName": "image",
        "emptyLineBefore": "always",
        "properties": [
          "image-orientation",
          "image-resolution",
          "object-fit",
          "object-position"
        ]
      },
      {
        "groupName": "animation",
        "emptyLineBefore": "always",
        "properties": [
          "transition",
          "transition-delay",
          "transition-duration",
          "transition-property",
          "transition-timing-function",
          "animation",
          "animation-name",
          "animation-duration",
          "animation-timing-function",
          "animation-delay",
          "animation-iteration-count",
          "animation-direction",
          "animation-fill-mode",
          "animation-play-state",
          "offset",
          "offset-after",
          "offset-anchor",
          "offset-before",
          "offset-distance",
          "offset-start",
          "offset-end",
          "offset-path",
          "offset-position",
          "offset-rotate",
          "will-change"
        ]
      }
    ]
  }
}