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.

Colors

• colors/at-rule-disallowed-list: Disallows use of legacy color mixins.
• colors/color-named: Disallows named colors.
• colors/color-no-hex: Disallows hex colors.
• colors/declaration-property-value-disallowed-list: Disallows custom decimal opacity values.
• colors/function-disallowed-list: Disallows allows use of built in and legacy color functions.
• colors/global-disallowed-list: Disallows use of legacy color custom properties and mixin map data.

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.

Depth

• depth/declaration-property-unit-disallowed-list: Disallows box-shadow declarations with hard coded px, rem, or em units.
• depth/function-disallowed-list: Disallows use of built-in and legacy shadow functions.
• depth/global-disallowed-list: Disallows use of legacy shadow custom properties and Sass mixin data.
• depth/property-disallowed-list: Disallows text shadow property.

Layout

• layout/at-rule-disallowed-list: Disallows use of legacy Sass mixins.
• layout/function-disallowed-list: Disallows use of internal Sass layout functions.
• layout/global-disallowed-list: Disallows use of legacy custom properties and Sass mixin map data.

Legacy

• legacy/at-rule-disallowed-list: Disallows use pf 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/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 Polaris motion tokens.

Shape

• shape/at-rule-disallowed-list: Disallows use of legacy Sass border mixins.
• shape/declaration-property-unit-disallowed-list: Disallows hard-coded px, em, and rem units in border property values.
• shape/function-disallowed-list: Disallows use of legacy Sass border functions.
• shape/global-disallowed-list: Disallows use of legacy Polaris shape tokens and mixin map data.

Spacing

• spacing/declaration-property-unit-disallowed-list: Disallows use of hard-coded px, em, and rem values on gap, margin, and padding properties.
• spacing/function-disallowed-list: Disallows use of legacy Sass spacing functions.
• spacing/global-disallowed-list: Disallows use of legacy spacing custom properties and Sass mixin data.

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 Polaris typography tokens and mixin map data.

Z-index

• 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 the use of legacy z-index custom properties and Sass mixin data.