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.

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.