stylelint.config.js

import postcssHtml from 'postcss-html';
import sugarss from 'sugarss';

const options = {
	rules: [
		{
			test: /^customcss$/i,
			lang: 'sass',
		},
	],

	sass: sugarss,
};
const syntax = postcssHtml(options);

export default {
	extends: [
		'@stylistic/stylelint-config',
		'stylelint-config-html/vue',
		'stylelint-config-recommended-scss',
		'stylelint-config-recommended-vue/scss',
	],
	plugins: ['stylelint-order'],
	overrides: [
		{
			files: ['**/*.sass'],
			customSyntax: sugarss,
		},
		{
			files: ['**/*.{vue,html}'],
			customSyntax: syntax,
		},
	],
	rules: {
		'order/order': [
			{ type: 'at-rule', name: 'import' },
			{ type: 'at-rule', name: 'forward' },
			{ type: 'at-rule', name: 'use' },
			'dollar-variables',
			'custom-properties',
			'declarations',
			{
				type: 'at-rule',
				name: 'include',
			},
			{
				type: 'at-rule',
				name: 'include',
				parameter: 'media',
				hasBlock: true,
			},
			{
				type: 'rule',
				selector: '&::before',
			},
			{
				type: 'rule',
				selector: '&::after',
			},
			{
				type: 'rule',
				selector: '&:link',
			},
			{
				type: 'rule',
				selector: '&:visited',
			},
			{
				type: 'rule',
				selector: '&:focus',
			},
			{
				type: 'rule',
				selector: '&:focus-visible',
			},
			{
				type: 'at-rule',
				name: 'include',
				parameter: 'hover',
				hasBlock: true,
			},
			{
				type: 'rule',
				selector: '&:hover',
			},
			{
				type: 'rule',
				selector: '&:active',
			},
			{
				type: 'rule',
				selector: '&:disabled',
			},
			{
				type: 'rule',
				selector: '&:first-child',
			},
			{
				type: 'rule',
				selector: '&:last-child',
			},
			{
				type: 'rule',
				selector: '&:nth-child.+',
			},
			{
				type: 'rule',
				selector: '&:not.+',
			},
			'at-rules',
			{
				type: 'rule',
				selector: '&\\[[^\\[\\]]+\\]',
			},
			{
				type: 'rule',
				selector: '&\\..+',
			},
			{
				type: 'rule',
				selector: '& .+',
			},
			{
				type: 'rule',
				selector: '.* &',
			},
			{
				type: 'rule',
				selector: '&__.+',
			},
			{
				type: 'rule',
				selector: '&--.+',
			},
			'rules',
		],
		'order/properties-alphabetical-order': null,
		'order/properties-order': [
			[
				{
					groupName: 'positioning',
					emptyLineBefore: 'threshold',
					properties: [
						'content',
						'position',
						'inset',
						'top',
						'right',
						'bottom',
						'left',
						'z-index',
						'isolation',
					],
				},
				{
					groupName: 'block',
					emptyLineBefore: 'threshold',
					properties: [
						'display',
						'box-sizing',
						'grid',
						'grid-after',
						'grid-area',
						'grid-auto-columns',
						'grid-auto-flow',
						'grid-auto-rows',
						'grid-before',
						'grid-column',
						'grid-column-end',
						'grid-column-gap',
						'grid-column-start',
						'grid-columns',
						'grid-end',
						'grid-gap',
						'grid-row',
						'grid-row-end',
						'grid-row-gap',
						'grid-row-start',
						'grid-rows',
						'grid-start',
						'grid-template',
						'grid-template-areas',
						'grid-template-columns',
						'grid-template-rows',
						'flex',
						'flex-basis',
						'flex-direction',
						'flex-flow',
						'flex-grow',
						'flex-shrink',
						'flex-wrap',
						'align-content',
						'align-items',
						'align-self',
						'justify-content',
						'gap',
						'order',
						'visibility',
					],
				},
				{
					groupName: 'sizes',
					emptyLineBefore: 'threshold',
					properties: [
						'size',
						'width',
						'min-width',
						'max-width',
						'height',
						'min-height',
						'max-height',
						'aspect-ratio',
						'margin',
						'margin-top',
						'margin-right',
						'margin-bottom',
						'margin-left',
						'padding',
						'padding-top',
						'padding-right',
						'padding-bottom',
						'padding-left',
					],
				},
				{
					groupName: 'layout',
					emptyLineBefore: 'threshold',
					properties: [
						'float',
						'clear',
						'overflow',
						'overflow-x',
						'overflow-y',
						'clip',
						'zoom',
						'table-layout',
						'empty-cells',
						'caption-side',
						'border-spacing',
						'border-collapse',
						'list-style',
						'list-style-position',
						'list-style-type',
						'list-style-image',
					],
				},
				{
					groupName: 'background',
					emptyLineBefore: 'threshold',
					properties: [
						'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-right-radius',
						'border-bottom-left-radius',
						'border-color',
						'border-top-color',
						'border-right-color',
						'border-bottom-color',
						'border-left-color',
						'outline',
						'outline-color',
						'outline-offset',
						'outline-style',
						'outline-width',
						'stroke-width',
						'stroke-linecap',
						'stroke-dasharray',
						'stroke-dashoffset',
						'stroke',
						'background',
						'background-attachment',
						'background-clip',
						'background-color',
						'background-image',
						'background-repeat',
						'background-position',
						'background-size',
						'mask',
						'mask-clip',
						'mask-composite',
						'mask-image',
						'mask-mode',
						'mask-origin',
						'mask-position',
						'mask-position-x',
						'mask-position-y',
						'mask-repeat',
						'mask-repeat-x',
						'mask-repeat-y',
						'mask-size',
						'mask-type',
						'mask',
						'mask-clip',
						'mask-composite',
						'mask-image',
						'mask-mode',
						'mask-origin',
						'mask-position',
						'mask-position-x',
						'mask-position-y',
						'mask-repeat',
						'mask-repeat-x',
						'mask-repeat-y',
						'mask-size',
						'mask-type',
						'opacity',
						'box-shadow',
						'fill',
						'filter',
					],
				},
				{
					groupName: 'typography',
					emptyLineBefore: 'threshold',
					properties: [
						'color',
						'font',
						'font-family',
						'font-size',
						'font-size-adjust',
						'font-smoothing',
						'font-stretch',
						'font-style',
						'font-variant',
						'font-weight',
						'font-emphasize',
						'font-emphasize-position',
						'font-emphasize-style',
						'letter-spacing',
						'line-height',
						'list-style',
					],
				},
				{
					groupName: 'text',
					emptyLineBefore: 'threshold',
					properties: [
						'text-align',
						'text-align-last',
						'text-decoration',
						'text-decoration-color',
						'text-decoration-line',
						'text-decoration-style',
						'text-indent',
						'text-justify',
						'text-overflow',
						'text-overflow-ellipsis',
						'text-overflow-mode',
						'text-rendering',
						'text-outline',
						'text-shadow',
						'text-transform',
						'text-wrap',
						'word-wrap',
						'word-break',
						'text-emphasis',
						'text-emphasis-color',
						'text-emphasis-style',
						'text-emphasis-position',
						'vertical-align',
						'white-space',
						'word-spacing',
						'hyphens',
					],
				},
				{
					groupName: 'animation',
					emptyLineBefore: 'threshold',
					properties: [
						'transform',
						'transform-box',
						'transform-origin',
						'transform-style',
						'backface-visibility',
						'perspective',
						'perspective-origin',
						'transition',
						'transition-property',
						'transition-duration',
						'transition-timing-function',
						'transition-delay',
						'animation',
						'animation-name',
						'animation-duration',
						'animation-play-state',
						'animation-timing-function',
						'animation-delay',
						'animation-iteration-count',
						'animation-direction',
						'will-change',
					],
				},
				{
					groupName: 'misc',
					emptyLineBefore: 'threshold',
					properties: [
						'tab-size',
						'counter-reset',
						'counter-increment',
						'resize',
						'touch-action',
						'cursor',
						'pointer-events',
						'speak',
						'user-select',
						'nav-index',
						'nav-up',
						'nav-right',
						'nav-down',
						'nav-left',
					],
				},
			],
			{
				unspecified: 'bottom',
				emptyLineBeforeUnspecified: 'never',
				emptyLineMinimumPropertyThreshold: 8,
			},
		],
		'at-rule-empty-line-before': [
			'always',
			{
				except: ['blockless-after-same-name-blockless', 'first-nested'],
				ignore: ['after-comment'],
				ignoreAtRules: ['else'],
			},
		],
		'at-rule-no-unknown': null,
		'at-rule-no-vendor-prefix': true,
		'block-no-empty': [
			true,
			{
				severity: 'warning',
			},
		],
		'color-hex-length': 'short',
		'color-named': 'never',
		'color-no-hex': null,
		'color-no-invalid-hex': true,
		'comment-empty-line-before': [
			'always',
			{
				except: ['first-nested'],
				ignore: ['after-comment', 'stylelint-commands'],
			},
		],
		'comment-no-empty': null,
		'comment-whitespace-inside': 'always',
		'custom-media-pattern': null,
		'custom-property-empty-line-before': [
			'always',
			{
				except: ['after-custom-property', 'first-nested'],
				ignore: ['after-comment', 'inside-single-line-block'],
			},
		],
		'custom-property-pattern': null,
		'no-descending-specificity': null,
		'declaration-empty-line-before': null,
		'declaration-block-no-duplicate-properties': true,
		'declaration-block-no-redundant-longhand-properties': null,
		'declaration-block-no-shorthand-property-overrides': true,
		'declaration-block-single-line-max-declarations': 0,
		'font-family-name-quotes': 'always-unless-keyword',
		'font-family-no-duplicate-names': true,
		'font-weight-notation': 'numeric',
		'function-calc-no-unspaced-operator': true,
		'function-linear-gradient-no-nonstandard-direction': true,
		'function-name-case': null,
		'function-url-no-scheme-relative': true,
		'function-url-quotes': 'always',
		'keyframe-declaration-no-important': true,
		'length-zero-no-unit': [
			true,
			{
				ignore: ['custom-properties'],
			},
		],
		'max-nesting-depth': null,
		'media-feature-name-no-unknown': true,
		'media-feature-name-no-vendor-prefix': true,
		'no-duplicate-selectors': true,
		'no-empty-source': null,
		'no-invalid-double-slash-comments': true,
		'no-unknown-animations': null,
		'number-max-precision': null,
		'property-no-unknown': [
			true,
			{
				checkPrefixed: true,
			},
		],
		'property-no-vendor-prefix': null,
		'rule-empty-line-before': [
			'always',
			{
				except: [],
				ignore: ['first-nested', 'after-comment'],
			},
		],
		// "selector-class-pattern": [
		// 	"^[a-z]([-]?[a-z0-9]+)*(__[a-z0-9]([-]?[a-z0-9]+)*)?(_[a-z0-9]([-]?[a-z0-9]+)*)?$",
		// 	{
		// 		resolveNestedSelectors: true,
		// 		message: "class is not written by BEM",
		// 	},
		// ],
		'selector-attribute-quotes': 'always',
		'selector-id-pattern': null,
		'selector-max-attribute': null,
		'selector-max-class': null,
		'selector-max-combinators': null,
		'selector-max-compound-selectors': null,
		'selector-max-id': 1,
		'selector-max-specificity': null,
		'selector-max-type': null,
		'selector-max-universal': null,
		'selector-nested-pattern': null,
		'selector-no-qualifying-type': null,
		'selector-no-vendor-prefix': true,
		'selector-pseudo-class-no-unknown': [
			true,
			{
				ignorePseudoClasses: ['global', 'deep', 'slotted'],
			},
		],
		'selector-pseudo-element-colon-notation': 'double',
		'selector-pseudo-element-no-unknown': true,
		'selector-type-case': 'lower',
		'selector-type-no-unknown': null,
		'shorthand-property-no-redundant-values': true,
		'string-no-newline': true,
		'time-min-milliseconds': null,
		'unit-no-unknown': true,
		'value-keyword-case': [
			'lower',
			{
				ignoreFunctions: ['/$^/', 'var', 'v-bind'],
			},
		],
		'value-no-vendor-prefix': null,
		'scss/at-else-empty-line-before': 'never',
		'scss/at-else-if-parentheses-space-before': 'always',
		'scss/at-extend-no-missing-placeholder': null,
		'scss/at-function-parentheses-space-before': 'never',
		'scss/at-function-pattern': null,
		'scss/at-import-partial-extension-blacklist': null,
		'scss/at-mixin-argumentless-call-parentheses': 'never',
		'scss/at-mixin-parentheses-space-before': 'never',
		'scss/at-mixin-pattern': null,
		'scss/load-no-partial-leading-underscore': null,
		'scss/at-rule-no-unknown': [
			true,
			{
				ignoreAtRules: ['/regex/', /regex/, 'string'],
			},
		],
		'scss/declaration-nested-properties': 'never',
		'scss/declaration-nested-properties-no-divided-groups': null,
		'scss/dollar-variable-colon-newline-after': 'always-multi-line',
		'scss/dollar-variable-colon-space-after': 'always-single-line',
		'scss/dollar-variable-colon-space-before': 'never',
		'scss/dollar-variable-empty-line-before': [
			'always',
			{
				except: ['after-dollar-variable', 'first-nested'],
				ignore: ['after-comment', 'inside-single-line-block'],
			},
		],
		'scss/dollar-variable-no-missing-interpolation': null,
		'scss/dollar-variable-pattern': null,
		'scss/double-slash-comment-empty-line-before': [
			'always',
			{
				except: ['first-nested'],
				ignore: ['between-comments', 'stylelint-commands', 'inside-block'],
			},
		],
		'scss/double-slash-comment-inline': null,
		'scss/double-slash-comment-whitespace-inside': null,
		'scss/media-feature-value-dollar-variable': null,
		'scss/operator-no-newline-after': null,
		'scss/operator-no-newline-before': null,
		'scss/operator-no-unspaced': true,
		'scss/partial-no-import': null,
		'scss/percent-placeholder-pattern': null,
		// @stylistic
		'@stylistic/indentation': 'tab',
		'@stylistic/max-line-length': null,
		'@stylistic/at-rule-semicolon-newline-after': null,
		'@stylistic/block-opening-brace-newline-after': null,
		'@stylistic/string-quotes': 'single',
		'@stylistic/unit-case': null,
		'@stylistic/value-list-max-empty-lines': null,
		'@stylistic/named-grid-areas-alignment': true,
		'@stylistic/selector-list-comma-space-after': null,
		'@stylistic/selector-list-comma-newline-after': null,
	},
	ignoreFiles: [
		'**/*',
		'!./src/**/*.sass',
		'!./src/**/*.vue',
		'node_modules/',
		'dist/',
		'.git/',
		'.vscode/',
	],
	fix: true,
};