allinssl/frontend/environment/stylelint/index.js

193 lines
3.9 KiB
JavaScript

/**
* @type {import('stylelint').Config}
*/
export default {
// 继承配置
extends: [
'stylelint-config-standard',
'stylelint-config-prettier',
'stylelint-config-html',
'stylelint-config-tailwindcss',
],
// 插件
plugins: ['stylelint-order'],
// 规则
rules: {
'declaration-block-trailing-semicolon': null,
'no-descending-specificity': null,
// TailwindCSS 规则
'at-rule-no-unknown': [
true,
{
ignoreAtRules: ['tailwind', 'apply', 'variants', 'responsive', 'screen', 'layer'],
},
],
// 缩进 2 空格
indentation: 2,
// 颜色值小写
'color-hex-case': 'lower',
// 禁止空块
'block-no-empty': true,
// 颜色6位长度
'color-hex-length': 'long',
// 兼容自定义标签名
'selector-type-no-unknown': [
true,
{
ignoreTypes: [],
},
],
// 忽略特殊伪类选择器
'selector-pseudo-element-no-unknown': [
true,
{
ignorePseudoElements: ['v-deep', ':deep'],
},
],
// 禁止空注释
'comment-no-empty': true,
// 禁止简写属性覆盖相关普通属性
'declaration-block-no-shorthand-property-overrides': true,
// 禁止重复的属性
'declaration-block-no-duplicate-properties': true,
// 属性的排序
'order/properties-order': [
// 定位
{
groupName: 'positioning',
emptyLineBefore: 'always',
properties: ['position', 'top', 'right', 'bottom', 'left', 'z-index'],
},
// 布局
{
groupName: 'layout',
emptyLineBefore: 'always',
properties: [
'display',
'flex',
'flex-direction',
'flex-wrap',
'flex-basis',
'flex-grow',
'flex-shrink',
'flex-flow',
'grid',
'grid-template-columns',
'grid-template-rows',
'grid-template-areas',
'grid-auto-columns',
'grid-auto-rows',
'grid-auto-flow',
'gap',
'justify-content',
'align-items',
'align-content',
'order',
'float',
'clear',
],
},
// 盒模型
{
groupName: 'box-model',
emptyLineBefore: 'always',
properties: [
'width',
'min-width',
'max-width',
'height',
'min-height',
'max-height',
'margin',
'margin-top',
'margin-right',
'margin-bottom',
'margin-left',
'padding',
'padding-top',
'padding-right',
'padding-bottom',
'padding-left',
'box-sizing',
'overflow',
'overflow-x',
'overflow-y',
],
},
// 排版
{
groupName: 'typography',
emptyLineBefore: 'always',
properties: [
'font',
'font-family',
'font-size',
'font-weight',
'font-style',
'font-variant',
'font-size-adjust',
'line-height',
'letter-spacing',
'text-align',
'text-transform',
'text-decoration',
'text-indent',
'text-overflow',
'text-shadow',
'white-space',
'word-break',
'word-spacing',
'word-wrap',
'color',
],
},
// 视觉效果
{
groupName: 'visual',
emptyLineBefore: 'always',
properties: [
'background',
'background-color',
'background-image',
'background-repeat',
'background-position',
'background-size',
'border',
'border-width',
'border-style',
'border-color',
'border-radius',
'box-shadow',
'opacity',
'visibility',
'cursor',
'pointer-events',
],
},
// 动画
{
groupName: 'animation',
emptyLineBefore: 'always',
properties: [
'transition',
'transition-property',
'transition-duration',
'transition-timing-function',
'transition-delay',
'animation',
'animation-name',
'animation-duration',
'animation-timing-function',
'animation-delay',
'animation-iteration-count',
'animation-direction',
'animation-fill-mode',
'animation-play-state',
'transform',
'transform-origin',
],
},
],
},
}