.stylelintrc.js

module.exports = {
	extends: ["stylelint-stylistic/config", "stylelint-config-standard-scss"],
	customSyntax: "postcss-scss",
	plugins: ["stylelint-order", "stylelint-scss"],
	rules: {
		"at-rule-property-required-list": {
			"font-face": ["font-display", "font-family", "font-style", "font-weight"],
		},
		"color-named": [
			"never",
			{
				ignore: ["inside-function"],
				severity: "warning",
			},
		],
		"comment-empty-line-before": ["never", { ignore: ["stylelint-commands"] }],
		"custom-property-empty-line-before": "never",
		"declaration-block-single-line-max-declarations": 1,
		"declaration-property-unit-allowed-list": {
			"/^animation/": ["s"],
			"/^transition/": ["s"],
		},
		"declaration-property-value-disallowed-list": [
			{
				"/.*/": [/transparent/i],
			},
			{
				message:
					"The `transparent` keyword is not allowed - use rgba(255, 255, 255, 0)",
			},
		],
		"font-weight-notation": [
			"numeric",
			{
				ignore: ["relative"],
			},
		],
		"no-descending-specificity": [
			true,
			{
				ignore: ["selectors-within-list"],
			},
		],
		"no-unknown-animations": true,
		"number-max-precision": 10,
		"property-no-unknown": [
			true,
			{
				ignoreProperties: ["composes"],
			},
		],
		"selector-max-attribute": 2,
		"selector-max-id": 2,
		"selector-max-pseudo-class": 2,
		"selector-max-specificity": "1,3,0",
		"selector-max-type": 1,
		"selector-max-universal": 2,
		"selector-no-qualifying-type": [
			true,
			{
				ignore: ["attribute"],
			},
		],
		"selector-pseudo-class-no-unknown": [
			true,
			{
				ignorePseudoClasses: ["global"],
			},
		],

		// stylelint-stylistic
		"stylistic/string-quotes": "single",
		"stylistic/indentation": "tab",
		"stylistic/declaration-colon-space-after": "always-single-line",
		"stylistic/block-closing-brace-newline-after": [
			"always",
			{
				ignoreAtRules: ["if", "else"],
			},
		],
		// stylelint-scss
		"scss/at-import-partial-extension-blacklist": ["scss"],
		"scss/at-mixin-argumentless-call-parentheses": "always",
		"scss/map-keys-quotes": "always",
		"scss/no-duplicate-dollar-variables": [
			true,
			{
				ignoreInsideAtRules: ["if", "else", "for"],
			},
		],
		"scss/selector-no-redundant-nesting-selector": true,

		// stylelint-order
		"order/order": [["dollar-variables", "custom-properties", "declarations"]],
		"order/properties-order": [
			[
				"composes",
				"all",
				"content",
				"position",
				"inset",
				"inset-block",
				"inset-block-start",
				"inset-block-end",
				"inset-inline",
				"inset-inline-start",
				"inset-inline-end",
				"top",
				"right",
				"bottom",
				"left",
				"z-index",
				"display",
				"visibility",
				"grid",
				"grid-template",
				"grid-template-areas",
				"grid-template-rows",
				"grid-template-columns",
				"grid-auto-rows",
				"grid-auto-columns",
				"grid-auto-flow",
				"grid-row",
				"grid-row-start",
				"grid-row-end",
				"grid-column",
				"grid-column-start",
				"grid-column-end",
				"grid-area",
				"flex",
				"flex-grow",
				"flex-shrink",
				"flex-basis",
				"flex-direction",
				"flex-flow",
				"flex-wrap",
				"justify-content",
				"justify-items",
				"justify-self",
				"align-content",
				"align-items",
				"align-self",
				"place-content",
				"place-items",
				"place-self",
				"gap",
				"row-gap",
				"column-gap",
				"order",
				"float",
				"clear",
				"contain",
				"block-size",
				"min-block-size",
				"max-block-size",
				"inline-size",
				"min-inline-size",
				"max-inline-size",
				"width",
				"min-width",
				"max-width",
				"height",
				"min-height",
				"max-height",
				"overflow",
				"overflow-x",
				"overflow-y",
				"overflow-block",
				"overflow-inline",
				"overflow-anchor",
				"scroll-behavior",
				"scroll-snap-align",
				"scroll-snap-stop",
				"scroll-snap-type",
				"scroll-margin",
				"scroll-margin-block",
				"scroll-margin-block-start",
				"scroll-margin-block-end",
				"scroll-margin-inline",
				"scroll-margin-inline-start",
				"scroll-margin-inline-end",
				"scroll-margin-top",
				"scroll-margin-right",
				"scroll-margin-bottom",
				"scroll-margin-left",
				"scroll-padding",
				"scroll-padding-block",
				"scroll-padding-block-start",
				"scroll-padding-block-end",
				"scroll-padding-inline",
				"scroll-padding-inline-start",
				"scroll-padding-inline-end",
				"scroll-padding-top",
				"scroll-padding-right",
				"scroll-padding-bottom",
				"scroll-padding-left",
				"overscroll-behavior",
				"overscroll-behavior-x",
				"overscroll-behavior-y",
				"object-fit",
				"object-position",
				"image-rendering",
				"shape-outside",
				"shape-margin",
				"shape-image-threshold",
				"clip",
				"clip-path",
				"box-sizing",
				"margin",
				"margin-block",
				"margin-block-start",
				"margin-block-end",
				"margin-inline",
				"margin-inline-start",
				"margin-inline-end",
				"margin-top",
				"margin-right",
				"margin-bottom",
				"margin-left",
				"padding",
				"padding-block",
				"padding-block-start",
				"padding-block-end",
				"padding-inline",
				"padding-inline-start",
				"padding-inline-end",
				"padding-top",
				"padding-right",
				"padding-bottom",
				"padding-left",
				"outline",
				"outline-width",
				"outline-style",
				"outline-color",
				"outline-offset",
				"border",
				"border-block",
				"border-block-width",
				"border-block-style",
				"border-block-color",
				"border-block-start",
				"border-block-start-width",
				"border-block-start-style",
				"border-block-start-color",
				"border-block-end",
				"border-block-end-width",
				"border-block-end-style",
				"border-block-end-color",
				"border-inline",
				"border-inline-width",
				"border-inline-style",
				"border-inline-color",
				"border-inline-start",
				"border-inline-start-width",
				"border-inline-start-style",
				"border-inline-start-color",
				"border-inline-end",
				"border-inline-end-width",
				"border-inline-end-style",
				"border-inline-end-color",
				"border-start-start-radius",
				"border-start-end-radius",
				"border-end-start-radius",
				"border-end-end-radius",
				"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-spacing",
				"border-collapse",
				"background",
				"background-color",
				"background-image",
				"background-position",
				"background-position-x",
				"background-position-y",
				"background-size",
				"background-repeat",
				"background-attachment",
				"background-origin",
				"background-clip",
				"background-blend-mode",
				"mix-blend-mode",
				"isolation",
				"box-decoration-break",
				"box-shadow",
				"color",
				"color-adjust",
				"mask-type",
				"mask-image",
				"mask-position",
				"mask-repeat",
				"mask-size",
				"mask-origin",
				"mask-clip",
				"table-layout",
				"caption-side",
				"empty-cells",
				"list-style",
				"list-style-position",
				"list-style-type",
				"list-style-image",
				"quotes",
				"additive-symbols",
				"counter-increment",
				"counter-reset",
				"counter-set",
				"vertical-align",
				"text-align",
				"text-align-last",
				"text-combine-upright",
				"text-decoration",
				"text-decoration-color",
				"text-decoration-line",
				"text-decoration-skip-ink",
				"text-decoration-style",
				"text-underline-offset",
				"text-underline-position",
				"text-emphasis",
				"text-emphasis-color",
				"text-emphasis-position",
				"text-emphasis-style",
				"text-indent",
				"text-justify",
				"text-orientation",
				"text-overflow",
				"text-rendering",
				"text-shadow",
				"text-size-adjust",
				"text-transform",
				"direction",
				"unicode-bidi",
				"writing-mode",
				"white-space",
				"word-spacing",
				"word-wrap",
				"word-break",
				"overflow-wrap",
				"tab-size",
				"hyphens",
				"letter-spacing",
				"font",
				"font-family",
				"font-size",
				"font-size-adjust",
				"font-weight",
				"font-style",
				"font-display",
				"font-feature-settings",
				"font-kerning",
				"font-optical-sizing",
				"font-stretch",
				"font-synthesis",
				"font-variant",
				"font-variant-alternates",
				"font-variant-caps",
				"font-variant-east-asian",
				"font-variant-ligatures",
				"font-variant-numeric",
				"font-variation-settings",
				"line-height",
				"line-height-step",
				"line-break",
				"src",
				"unicode-range",
				"opacity",
				"filter",
				"backdrop-filter",
				"resize",
				"cursor",
				"caret-color",
				"appearance",
				"transition",
				"transition-property",
				"transition-duration",
				"transition-timing-function",
				"transition-delay",
				"transform",
				"transform-origin",
				"transform-style",
				"perspective",
				"perspective-origin",
				"animation",
				"animation-name",
				"animation-duration",
				"animation-play-state",
				"animation-timing-function",
				"animation-delay",
				"animation-iteration-count",
				"animation-direction",
				"animation-fill-mode",
				"will-change",
				"offset",
				"offset-anchor",
				"offset-distance",
				"offset-path",
				"offset-position",
				"offset-rotate",
				"pointer-events",
				"touch-action",
				"columns",
				"column-span",
				"column-width",
				"column-count",
				"column-fill",
				"column-rule",
				"column-rule-width",
				"column-rule-style",
				"column-rule-color",
				"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",
				"user-select",
				"fill",
				"fill-opacity",
				"fill-rule",
				"stroke",
				"stroke-width",
				"stroke-opacity",
				"stroke-dasharray",
				"stroke-dashoffset",
				"stroke-linecap",
				"stroke-linejoin",
				"stroke-miterlimit",
				"paint-order",
			],
			{ unspecified: "bottomAlphabetical" },
		],
	},
};