Rules
There are over 40 rules configured in Stylelint Polaris to help you avoid errors and follow stylistic and non-stylistic conventions while building for the Shopify admin. These rules are grouped into categories that help us measure the Polaris design system's coverage in the Shopify admin code base.
Border
- border/at-rule-disallowed-list: Disallows use of legacy Sass border mixins.
- border/custom-property-disallowed-list: Disallows use of legacy border custom properties.
- border/declaration-property-unit-disallowed-list: Disallows hard-coded px, em, and rem units in border property values.
- border/function-disallowed-list: Disallows use of legacy Sass border functions.
Color
- color/at-rule-disallowed-list: Disallows use of legacy color mixins.
- color/color-named: Disallows named colors.
- color/color-no-hex: Disallows hex colors.
- color/custom-property-disallowed-list: Disallows use of legacy color custom properties.
- color/function-disallowed-list: Disallows allows use of built in and legacy color functions.
- color/global-disallowed-list: Disallows use of legacy color Sass APIs.
Conventions
- conventions/custom-property-allowed-list: Allows definition of custom properties not using Polaris prefixes, flags declaration property values that are not valid Polaris tokens, flags declaration property values using private tokens.
- conventions/selector-disallowed-list: Disallows overrides of Polaris component styles.
Layout
- layout/at-rule-disallowed-list: Disallows use of legacy Sass mixins.
- layout/custom-property-disallowed-list: Disallows use of legacy layout custom properties.
- layout/function-disallowed-list: Disallows use of internal Sass layout functions.
- layout/global-disallowed-list: Disallows use of legacy layout Sass APIs.
Legacy
- legacy/at-rule-disallowed-list: Disallows use of legacy Sass mixins.
- legacy/function-disallowed-list: Disallows use off legacy Sass functions.
- legacy/global-disallowed-list: Disallows use of legacy custom properties and Sass mixin map data.
Media queries
- media-queries/at-rule-disallowed-list: Disallows use of legacy breakpoint Sass mixins.
- media-queries/function-disallowed-list: Disallows use of legacy breakpoint sass functions.
- media-queries/media-queries-allowed-list: Allows declaration of print and screen @media queries, allows @media queries for forced-colors and ms-high-contrast features, allows @media queries using Polaris breakpoints.
Motion
- motion/at-rule-disallowed-list: Disallows use of CSS @keyframes.
- motion/custom-property-disallowed-list: Disallows use of legacy motion custom properties.
- motion/declaration-property-unit-disallowed-list: Disallows use of hard-coded millisecond ms and second s values on transition and animation properties.
- motion/function-disallowed-list: Disallows use of legacy Sass motion functions.
- motion/global-disallowed-list: Disallows use of legacy motion Sass APIs.
Shadow
- shadow/custom-property-disallowed-list: Disallows use of legacy shadow custom properties.
- shadow/declaration-property-unit-disallowed-list: Disallows box-shadow declarations with hard coded px, rem, or em units.
- shadow/function-disallowed-list: Disallows use of built-in and legacy shadow functions.
- shadow/global-disallowed-list: Disallows use of legacy shadow Sass APIs.
- shadow/property-disallowed-list: Disallows text shadow property.
Space
- space/custom-property-disallowed-list: Disallows use of legacy space custom properties.
- space/declaration-property-unit-disallowed-list: Disallows use of hard-coded px, em, and rem values on gap, margin, and padding properties.
- space/function-disallowed-list: Disallows use of legacy Sass space functions.
- space/global-disallowed-list: Disallows use of legacy spacing Sass APIs.
Typography
- typography/at-rule-disallowed-list: Disallows use of legacy Sass typography mixins.
- typography/declaration-property-unit-disallowed-list: Disallows hard-coded px, em, and rem values for font-size and line-height properties.
- typography/declaration-property-value-disallowed-list: Disallows hard-coded alphanumeric font-weight values.
- typography/function-disallowed-list: Disallows use of legacy Sass typography functions.
- typography/global-disallowed-list: Disallows use of legacy typography Sass APIs.
- typography/property-disallowed-list: Disallows declarations of text style properties.
Z-index
- z-index/custom-property-disallowed-list: Disallows use of legacy z-index custom properties.
- z-index/declaration-property-value-allowed-list: Disallows declaration of z-index values that are not Polaris z-index tokens.
- z-index/function-disallowed-list: Disallows use of the legacy z-index Sass function.
- z-index/global-disallowed-list: Disallows use of legacy z-index Sass APIs.