Stylelint Order规则问题：appearance与all属性被错误移至声明末尾

问题现象 #

项目使用Stylelint时，当CSS中同时声明appearance: none和all: unset，即便写在样式块顶部，也会被自动移至末尾，导致后续的padding、cursor等样式被all: unset覆盖失效。示例代码如下：

:host {
  ---company-icon-button-spacing: var(--company-icon-button-spacing, 10px);
}

button {
  appearance: none;
  all: unset;

  padding: var(---company-icon-button-spacing);

  cursor: pointer;
}

原因分析 #

问题源于你使用的stylelint-config-rational-order插件——它的默认属性分组规则中，all和appearance被归类到靠后的分组，自动排序时会被移到其他样式之后，而all: unset会重置所有后续样式，导致padding、cursor等属性失效。

解决方案 #

自定义rational-order的属性分组规则，将all和appearance放在最优先的分组中，确保它们始终排在其他样式之前。修改你的.stylelintrc.yml配置，调整plugin/rational-order部分：

extends:
  - stylelint-config-standard-scss
  - stylelint-config-rational-order
  - stylelint-config-prettier-scss
rules:
  # 保留原有规则
  custom-property-pattern:
    - (?<=company-)
    - message: Expected kebab-case custom property name starting with "company-"
  no-duplicate-selectors: null
  unit-disallowed-list:
    - [rem]
    - message: Use `utils.font-size` function instead of "%s"
  length-zero-no-unit: null
  declaration-empty-line-before: null
  order/properties-order:
    - []
    - severity: error
  plugin/rational-order:
    - true
    - empty-line-between-groups: true
      # 自定义属性分组，将重置类属性放在最前面
      groups:
        - ['all', 'appearance']
        - ['position', 'top', 'right', 'bottom', 'left', 'z-index', 'inset']
        - ['display', 'flex', 'flex-grow', 'flex-shrink', 'flex-basis', 'flex-direction', 'flex-wrap', 'justify-content', 'align-items', 'align-self', 'align-content', 'order', 'grid', 'grid-template', 'grid-template-rows', 'grid-template-columns', 'grid-template-areas', 'grid-auto-rows', 'grid-auto-columns', 'grid-auto-flow', 'grid-gap', 'grid-row-gap', 'grid-column-gap', 'grid-row', 'grid-column', 'grid-area', 'gap', 'row-gap', 'column-gap']
        - ['float', 'clear']
        - ['width', 'min-width', 'max-width', 'height', 'min-height', 'max-height', 'box-sizing']
        - ['padding', 'padding-top', 'padding-right', 'padding-bottom', 'padding-left']
        - ['margin', 'margin-top', 'margin-right', 'margin-bottom', 'margin-left', 'margin-collapse', 'margin-top-collapse', 'margin-right-collapse', 'margin-bottom-collapse', 'margin-left-collapse']
        - ['overflow', 'overflow-x', 'overflow-y', 'clip', 'zoom']
        - ['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-color', 'border-top-color', 'border-right-color', 'border-bottom-color', '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']
        - ['outline', 'outline-width', 'outline-style', 'outline-color', 'outline-offset']
        - ['background', 'background-color', 'background-image', 'background-repeat', 'background-position', 'background-position-x', 'background-position-y', 'background-size', 'background-attachment', 'background-origin', 'background-clip']
        - ['color']
        - ['font', 'font-family', 'font-size', 'font-weight', 'font-style', 'font-variant', 'font-size-adjust', 'font-stretch', 'font-effect', 'font-emphasize', 'font-emphasize-position', 'font-emphasize-style', 'font-smooth']
        - ['text-align', 'text-align-last', 'text-emphasis', 'text-emphasis-color', 'text-emphasis-style', 'text-emphasis-position', 'text-decoration', 'text-indent', 'text-justify', 'text-outline', 'text-transform', 'text-wrap', 'text-overflow', 'text-overflow-ellipsis', 'text-overflow-mode', 'text-shadow']
        - ['line-height', 'word-spacing', 'letter-spacing', 'white-space', 'word-wrap', 'word-break']
        - ['list-style', 'list-style-position', 'list-style-type', 'list-style-image']
        - ['pointer-events', 'touch-action', 'cursor']
        - ['visibility', 'opacity']
        - ['filter', 'backdrop-filter']
        - ['transition', 'transition-property', 'transition-duration', 'transition-timing-function', 'transition-delay']
        - ['transform', 'transform-origin']
        - ['animation', 'animation-name', 'animation-duration', 'animation-play-state', 'animation-timing-function', 'animation-delay', 'animation-iteration-count', 'animation-direction', 'animation-fill-mode']
        - ['content', 'quotes', 'counter-reset', 'counter-increment']
        - ['user-select', 'nav-index', 'nav-up', 'nav-right', 'nav-down', 'nav-left']
        - ['tab-size', 'hyphens']
      order: 'strict'

说明 #

通过将all和appearance单独放在第一个分组，Stylelint会强制它们排在所有其他样式之前，避免all: unset覆盖后续声明的样式。同时保留了原有的分组逻辑和空行分隔要求，不会破坏项目的代码风格规范。

内容的提问来源于stack exchange，提问作者Tuliodnw