Skip to content

Commit

Permalink
[stylelint-polaris][v5] Final rule categorization (#7828)
Browse files Browse the repository at this point in the history 
### WHY are these changes being introduced?
To unblock the release of v5 and enabling the linter in
`@shopify/polaris` after running the disable comments codemod.

### WHAT is this pull request doing?

This PR fixes:
- Miscategorization of a few legacy at-rules grouped into
`function-disallowed-list` instead of
`stylelint-polaris/at-rule-disallowed-list`
- Categories not mapping to token groups:
  - ~Changed typography to font~
  - Added z-index category
  - Changed mediaQueries to breakpoints
- Changed legacySass to legacy (as it encompasses legacy Sass API stuff
and legacy CSS custom properties)
  • Loading branch information
@chloerice @sophschneider
chloerice authored and sophschneider committed Dec 2, 2022
1 parent 08bf5b5 commit a2eafba
Showing 1 changed file with 56 additions and 36 deletions.
92 changes: 56 additions & 36 deletions stylelint-polaris/index.js
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,8 @@
const {getCustomPropertyNames, tokens} = require('@shopify/polaris-tokens');
const {
getCustomPropertyNames,
createVar,
tokens,
} = require('@shopify/polaris-tokens');

/** @type {import('./plugins/coverage').PrimaryOptions} */
const stylelintPolarisCoverageOptions = {
Expand Down Expand Up @@ -27,14 +31,15 @@ const stylelintPolarisCoverageOptions = {
],
'stylelint-polaris/at-rule-disallowed-list': {
include: [
// mixins
// Legacy mixins
/([\w-]+\.)?color-icon($|\()/,
/([\w-]+\.)?recolor-icon($|\()/,
/([\w-]+\.)?control-backdrop($|\()/,
/([\w-]+\.)?ms-high-contrast-color/,
],
},
'stylelint-polaris/global-disallowed-list': [
// Legacy mixin map-get data
/\$polaris-colors/,
/\$color-filter-palette-data/,
/\$color-palette-data/,
Expand All @@ -55,12 +60,12 @@ const stylelintPolarisCoverageOptions = {
'/^animation/': ['ms', 's'],
'/^transition/': ['ms', 's'],
},
{severity: 'warning'},
],
'stylelint-polaris/at-rule-disallowed-list': {
include: [/([\w-]+\.)?skeleton-shimmer($|\()/],
},
'stylelint-polaris/global-disallowed-list': [
// Legacy mixin map-get data
/\$duration-data/,
/\$polaris-duration-map/,
/\$skeleton-shimmer-duration/,
Expand All @@ -80,7 +85,6 @@ const stylelintPolarisCoverageOptions = {
'/^font/': ['px', 'rem', 'em'],
'line-height': ['px', 'rem', 'em'],
},
{severity: 'warning'},
],
'function-disallowed-list': [
/([\w-]+\.)?font-family/,
Expand Down Expand Up @@ -108,6 +112,7 @@ const stylelintPolarisCoverageOptions = {
],
},
'stylelint-polaris/global-disallowed-list': [
// Legacy mixin map-get data
/\$typography-condensed/,
/\$typography-condensed/,
/\$base-font-size/,
Expand All @@ -123,24 +128,15 @@ const stylelintPolarisCoverageOptions = {
layout: {
'declaration-property-value-disallowed-list': [
{
display: ['grid', 'flex'],
top: [/(?!var\(--p-).+$/],
bottom: [/(?!var\(--p-).+$/],
left: [/(?!var\(--p-).+$/],
right: [/(?!var\(--p-).+$/],
width: [/(?!var\(--p-).+$/],
height: [/(?!var\(--p-).+$/],
'z-index': [/(?!var\(--p-).+$/],
'/^width/': [/(?!var\(--p-).+$/],
'/^height/': [/(?!var\(--p-).+$/],
},
{severity: 'warning'},
],
'declaration-property-unit-disallowed-list': [
{
'/^width/': ['px', 'rem', 'em'],
'/^height/': ['px', 'rem', 'em'],
},
{severity: 'error'},
],
'property-disallowed-list': [
[
'position',
Expand Down Expand Up @@ -182,11 +178,13 @@ const stylelintPolarisCoverageOptions = {
/([\w-]+\.)?hidden-when-printing($|\()/,
/([\w-]+\.)?print-hidden($|\()/,
/([\w-]+\.)?layout-flex-fix($|\()/,
/([\w-]+\.)?safe-area-for($|\()/,
/([\w-]+\.)?skeleton-page-header-layout($|\()/,
/([\w-]+\.)?skeleton-page-secondary-actions-layout($|\()/,
],
},
'stylelint-polaris/global-disallowed-list': [
// Legacy mixin map-get data
/\$layout-width-data/,
/\$navigation-width/,
/\$small-thumbnail-size/,
Expand Down Expand Up @@ -216,9 +214,9 @@ const stylelintPolarisCoverageOptions = {
'/^margin/': ['px', 'rem', 'em'],
'/^gap/': ['px', 'rem', 'em'],
},
{severity: 'warning'},
],
'stylelint-polaris/global-disallowed-list': [
// Legacy mixin map-get data
/\$polaris-spacing/,
/\$spacing-data/,
/\$actions-vertical-spacing/,
Expand All @@ -237,7 +235,6 @@ const stylelintPolarisCoverageOptions = {
'outline-offset': ['px', 'rem', 'em'],
outline: ['px', 'rem', 'em'],
},
{severity: 'warning'},
],
'stylelint-polaris/at-rule-disallowed-list': {
include: [
Expand All @@ -252,6 +249,7 @@ const stylelintPolarisCoverageOptions = {
],
},
'stylelint-polaris/global-disallowed-list': [
// Legacy mixin map-get data
/\$border-radius-data/,
/\$border-width-data/,
/\$borders-data/,
Expand All @@ -276,10 +274,10 @@ const stylelintPolarisCoverageOptions = {
{
'box-shadow': ['px', 'rem', 'em'],
},
{severity: 'warning'},
],
'property-disallowed-list': [['text-shadow'], {severity: 'warning'}],
'property-disallowed-list': ['text-shadow'],
'stylelint-polaris/global-disallowed-list': [
// Legacy mixin map-get data
/\$shadows-data/,
/\$fixed-element-stacking-order/,
/\$global-elements/,
Expand All @@ -293,6 +291,21 @@ const stylelintPolarisCoverageOptions = {
/--p-top-bar-shadow/,
],
},
'z-index': {
'declaration-property-value-allowed-list': [
{
'z-index': Object.keys(tokens.zIndex).map(createVar),
},
],
'function-disallowed-list': [/([\w-]+\.)?z-index/],
'stylelint-polaris/global-disallowed-list': [
// Legacy mixin map-get data
/\$fixed-element-stacking-order/,
/\$global-elements/,
// Legacy custom properties
/--p-override-loading-z-index/,
],
},
conventions: {
'stylelint-polaris/custom-properties-allowed-list': {
// Allow any custom property not prefixed with `--p-`, `--pc-`, or `--polaris-version-`
Expand All @@ -309,30 +322,26 @@ const stylelintPolarisCoverageOptions = {
],
},
},
'stylelint-polaris/global-disallowed-list': [
/ \* \$/,
// Legacy custom properties
/--p-override-none/,
/--p-override-one/,
/--p-override-zero/,
/--p-non-null-content/,
],
'stylelint-polaris/media-queries-allowed-list': {
// Allowed media types and media conditions
// https://www.w3.org/TR/mediaqueries-5/#media
allowedMediaTypes: ['print', 'screen'],
allowedMediaFeatureNames: ['forced-colors', '-ms-high-contrast'],
},
},
mediaQueries: {
breakpoints: {
// Legacy functions
'function-disallowed-list': [
/([\w-]+\.)?breakpoint/,
/([\w-]+\.)?layout-width/,
],
'stylelint-polaris/media-queries-allowed-list': {
// Allowed media types and media conditions
// https://www.w3.org/TR/mediaqueries-5/#media
allowedMediaTypes: ['print', 'screen'],
allowedMediaFeatureNames: ['forced-colors', '-ms-high-contrast'],
allowedScssInterpolations: [
// TODO: Add utility to @shopify/polaris-tokens to getMediaConditionNames
/^\$p-breakpoints-(xs|sm|md|lg|xl)-(up|down|only)$/,
],
},
// Legacy mixins
'stylelint-polaris/at-rule-disallowed-list': {
include: [
/([\w-]+\.)?after-topbar-sheet($|\()/,
Expand Down Expand Up @@ -367,7 +376,8 @@ const stylelintPolarisCoverageOptions = {
],
},
},
legacySass: {
legacy: {
// Legacy mixins
'stylelint-polaris/at-rule-disallowed-list': {
include: [
/([\w-]+\.)?base-button-disabled($|\()/,
Expand All @@ -376,6 +386,8 @@ const stylelintPolarisCoverageOptions = {
/([\w-]+\.)?button-full-width($|\()/,
/([\w-]+\.)?button-outline-disabled($|\()/,
/([\w-]+\.)?button-outline($|\()/,
/([\w-]+\.)?control-backdrop($|\()/,
/([\w-]+\.)?list-selected-indicator($|\()/,
/([\w-]+\.)?plain-button-backdrop($|\()/,
/([\w-]+\.)?unstyled-button($|\()/,
/([\w-]+\.)?skeleton-content($|\()/,
Expand All @@ -384,15 +396,23 @@ const stylelintPolarisCoverageOptions = {
/([\w-]+\.)?unstyled-list($|\()/,
/([\w-]+\.)?range-thumb-selectors($|\()/,
/([\w-]+\.)?range-track-selectors($|\()/,
/([\w-]+\.)?state($|\()/,
/([\w-]+\.)?visually-hidden($|\()/,
],
},
// Legacy functions
'function-disallowed-list': [
/([\w-]+\.)?available-names/,
/([\w-]+\.)?map-extend/,
/([\w-]+\.)?control-backdrop($|\()/,
/([\w-]+\.)?list-selected-indicator($|\()/,
/([\w-]+\.)?state($|\()/,
],
'stylelint-polaris/global-disallowed-list': [
// Legacy variables
/ \* \$/,
// Legacy custom properties
/--p-override-none/,
/--p-override-one/,
/--p-override-zero/,
/--p-non-null-content/,
],
},
};
Expand Down

0 comments on commit a2eafba

Please sign in to comment.