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
andscreen
@media
queries, allows@media
queries forforced-colors
andms-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 seconds
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
, andrem
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
, andrem
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.