Skip to content

Commit

Permalink
Remove deprecated v10 custom properties from stylelint-polaris (Sho…
Browse files Browse the repository at this point in the history 
…pify#9887)

### WHY are these changes introduced?

Fixes Shopify#8420

### WHAT is this pull request doing?

Removes [these deprecated v10 custom
properties](Shopify#8405) from
`stylelint-polaris` which were added in
Shopify#8549 and
Shopify#9074.
  • Loading branch information
@lgriffee
lgriffee authored Aug 15, 2023
1 parent 60b08ed commit eb73c2f
Show file tree
Hide file tree
Showing 3 changed files with 27 additions and 281 deletions.
5 changes: 5 additions & 0 deletions .changeset/big-paws-shave.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'@shopify/stylelint-polaris': major
---

Removed deprecated v10 custom properties from stylelint-polaris disallowed lists
281 changes: 0 additions & 281 deletions stylelint-polaris/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,259 +33,6 @@ const disallowedUnits = [
'pt',
];

const disallowedVarsBorder = [
// Legacy custom properties
'--p-border-radius-base',
'--p-border-radius-large',
'--p-border-radius-wide',
'--p-border-radius-half',
'--p-control-border-width',
'--p-thin-border-subdued',
'--p-banner-border-default',
'--p-banner-border-success',
'--p-banner-border-highlight',
'--p-banner-border-warning',
'--p-banner-border-critical',
'--p-text-field-focus-ring-offset',
'--p-border-base',
'--p-border-dark',
'--p-border-transparent',
'--p-border-divider',
'--p-border-divider-on-dark',
];

const disallowedVarsColor = [
// Legacy custom properties
'--p-override-transparent',
'--p-badge-mix-blend-mode',
'--p-text-warning',
'--p-text-success',
'--p-text-subdued-on-dark',
'--p-text-subdued',
'--p-text-primary-pressed',
'--p-text-primary-hovered',
'--p-text-primary',
'--p-text-on-primary',
'--p-text-on-interactive',
'--p-text-on-dark',
'--p-text-on-critical',
'--p-text-highlight',
'--p-text-disabled',
'--p-text-critical',
'--p-text',
'--p-surface-warning-subdued-pressed',
'--p-surface-warning-subdued-hovered',
'--p-surface-warning-subdued',
'--p-surface-warning',
'--p-surface-success-subdued-pressed',
'--p-surface-success-subdued-hovered',
'--p-surface-success-subdued ',
'--p-surface-success',
'--p-surface-subdued',
'--p-surface-selected-pressed',
'--p-surface-selected-hovered',
'--p-surface-selected',
'--p-surface-search-field-dark',
'--p-surface-search-field',
'--p-surface-primary-selected-pressed',
'--p-surface-primary-selected-hovered',
'--p-surface-primary-selected',
'--p-surface-pressed-dark',
'--p-surface-pressed',
'--p-surface-neutral-subdued-dark',
'--p-surface-neutral-subdued',
'--p-surface-neutral-pressed',
'--p-surface-neutral-hovered',
'--p-surface-neutral-disabled',
'--p-surface-neutral',
'--p-surface-hovered-dark',
'--p-surface-hovered',
'--p-surface-highlight-subdued-pressed',
'--p-surface-highlight-subdued-hovered',
'--p-surface-highlight-subdued',
'--p-surface-highlight',
'--p-surface-disabled',
'--p-surface-depressed',
'--p-surface-dark',
'--p-surface-critical-subdued-pressed',
'--p-surface-critical-subdued-hovered',
'--p-surface-critical-subdued-depressed',
'--p-surface-critical-subdued',
'--p-surface-critical',
'--p-surface-attention',
'--p-surface',
'--p-shadow-color-picker-dragger',
'--p-shadow-color-picker',
'--p-overlay',
'--p-interactive-pressed-on-dark',
'--p-interactive-pressed',
'--p-interactive-on-dark',
'--p-interactive-hovered',
'--p-interactive-disabled',
'--p-interactive-critical-pressed',
'--p-interactive-critical-hovered',
'--p-interactive-critical-disabled',
'--p-interactive-critical',
'--p-interactive',
'--p-icon-warning',
'--p-icon-success',
'--p-icon-subdued',
'--p-icon-pressed',
'--p-icon-on-primary',
'--p-icon-on-interactive',
'--p-icon-on-dark',
'--p-icon-on-critical',
'--p-icon-hovered',
'--p-icon-highlight',
'--p-icon-disabled',
'--p-icon-critical',
'--p-icon-attention',
'--p-icon',
'--p-hint-from-direct-light',
'--p-focused',
'--p-divider-dark',
'--p-divider',
'--p-decorative-two-text',
'--p-decorative-two-surface',
'--p-decorative-two-icon',
'--p-decorative-three-text',
'--p-decorative-three-surface',
'--p-decorative-three-icon',
'--p-decorative-one-text',
'--p-decorative-one-surface',
'--p-decorative-one-icon',
'--p-decorative-four-text',
'--p-decorative-four-surface',
'--p-decorative-four-icon',
'--p-decorative-five-text',
'--p-decorative-five-surface',
'--p-decorative-five-icon',
'--p-border-warning-subdued',
'--p-border-warning',
'--p-border-success-subdued',
'--p-border-success',
'--p-border-subdued',
'--p-border-shadow-subdued',
'--p-border-shadow',
'--p-border-on-dark',
'--p-border-neutral-subdued',
'--p-border-hovered',
'--p-border-highlight-subdued',
'--p-border-highlight',
'--p-border-disabled',
'--p-border-depressed',
'--p-border-critical-subdued',
'--p-border-critical-disabled',
'--p-border-critical',
'--p-border',
'--p-background-selected',
'--p-background-pressed',
'--p-background-hovered',
'--p-background',
'--p-backdrop',
'--p-action-secondary-pressed-dark',
'--p-action-secondary-pressed',
'--p-action-secondary-hovered-dark',
'--p-action-secondary-hovered',
'--p-action-secondary-disabled',
'--p-action-secondary-depressed',
'--p-action-secondary',
'--p-action-primary-pressed',
'--p-action-primary-hovered',
'--p-action-primary-disabled',
'--p-action-primary-depressed',
'--p-action-primary',
'--p-action-critical-pressed',
'--p-action-critical-hovered',
'--p-action-critical-disabled',
'--p-action-critical-depressed',
'--p-action-critical',
];

const disallowedVarsLayout = [
// Legacy custom properties
'--p-range-slider-thumb-size-base',
'--p-range-slider-thumb-size-active',
'--p-choice-size',
'--p-icon-size-small',
'--p-icon-size-medium',
];

const disallowedVarsMotion = [
// Legacy custom properties
'--p-linear',
'--p-ease-in-out',
'--p-ease-out',
'--p-ease-in',
'--p-ease',
'--p-duration-0',
'--p-duration-50',
'--p-duration-100',
'--p-duration-150',
'--p-duration-200',
'--p-duration-250',
'--p-duration-300',
'--p-duration-350',
'--p-duration-400',
'--p-duration-450',
'--p-duration-500',
'--p-duration-5000',
'--p-keyframes-bounce',
'--p-keyframes-fade-in',
'--p-keyframes-pulse',
'--p-keyframes-spin',
'--p-keyframes-appear-above',
'--p-keyframes-appear-below',
];

const disallowedVarsShadow = [
// Legacy custom properties
'--p-button-drop-shadow',
'--p-button-inner-shadow',
'--p-button-pressed-inner-shadow',
'--p-card-shadow',
'--p-popover-shadow',
'--p-modal-shadow',
'--p-top-bar-shadow',
'--p-shadow-transparent',
'--p-shadow-faint',
'--p-shadow-base',
'--p-shadow-deep',
'--p-shadow-button',
'--p-shadow-top-bar',
'--p-shadow-card',
'--p-shadow-popover',
'--p-shadow-layer',
'--p-shadow-modal',
'--p-shadows-inset-button',
'--p-shadows-inset-button-pressed',
];

const disallowedVarsSpace = [
// Legacy custom properties
'--p-button-group-item-spacing',
'--p-choice-margin',
'--p-text-field-spinner-offset',
'--p-frame-offset',
];

const disallowedVarsZIndex = [
// Legacy custom properties
'--p-override-loading-z-index',
'--p-z-1',
'--p-z-2',
'--p-z-3',
'--p-z-4',
'--p-z-5',
'--p-z-6',
'--p-z-7',
'--p-z-8',
'--p-z-9',
'--p-z-10',
'--p-z-11',
'--p-z-12',
];

/**
* @type {import('./plugins/coverage').PrimaryOptions} The stylelint-polaris/coverage rule expects a 3-dimensional rule config that groups Stylelint rules by coverage categories. It reports problems with dynamic rule names by appending the category to the coverage plugin's rule name
Expand All @@ -312,10 +59,6 @@ const stylelintPolarisCoverageOptions = {
'no-focus-ring',
].map(matchNameRegExp),
},
'polaris/custom-property-disallowed-list': {
disallowedProperties: disallowedVarsBorder,
disallowedValues: {'/.+/': disallowedVarsBorder},
},
},
{
message: 'Please use a Polaris border token',
Expand Down Expand Up @@ -347,10 +90,6 @@ const stylelintPolarisCoverageOptions = {
'ms-high-contrast-color',
].map(matchNameRegExp),
},
'polaris/custom-property-disallowed-list': {
disallowedProperties: disallowedVarsColor,
disallowedValues: {'/.+/': disallowedVarsColor},
},
'polaris/global-disallowed-list': [
// Legacy mixin map-get data
/\$polaris-colors/,
Expand Down Expand Up @@ -434,10 +173,6 @@ const stylelintPolarisCoverageOptions = {
'polaris/at-rule-disallowed-list': {
include: ['layout-flex-fix', 'safe-area-for'].map(matchNameRegExp),
},
'polaris/custom-property-disallowed-list': {
disallowedProperties: disallowedVarsLayout,
disallowedValues: {'/.+/': disallowedVarsLayout},
},
'polaris/global-disallowed-list': [
// Legacy mixin map-get data
/\$layout-width-data/,
Expand Down Expand Up @@ -571,10 +306,6 @@ const stylelintPolarisCoverageOptions = {
'polaris/at-rule-disallowed-list': {
include: ['skeleton-shimmer'].map(matchNameRegExp),
},
'polaris/custom-property-disallowed-list': {
disallowedProperties: disallowedVarsMotion,
disallowedValues: {'/.+/': disallowedVarsMotion},
},
'polaris/global-disallowed-list': [
// Legacy mixin map-get data
/\$skeleton-shimmer-duration/,
Expand All @@ -593,10 +324,6 @@ const stylelintPolarisCoverageOptions = {
},
],
'property-disallowed-list': ['text-shadow'],
'polaris/custom-property-disallowed-list': {
disallowedProperties: disallowedVarsShadow,
disallowedValues: {'/.+/': disallowedVarsShadow},
},
'polaris/global-disallowed-list': [
// Legacy mixin map-get data
/\$shadows-data/,
Expand All @@ -618,10 +345,6 @@ const stylelintPolarisCoverageOptions = {
'/^gap/': disallowedUnits,
},
],
'polaris/custom-property-disallowed-list': {
disallowedProperties: disallowedVarsSpace,
disallowedValues: {'/.+/': disallowedVarsSpace},
},
'polaris/global-disallowed-list': [
// Legacy mixin map-get data
/\$polaris-spacing/,
Expand Down Expand Up @@ -688,10 +411,6 @@ const stylelintPolarisCoverageOptions = {
},
],
'function-disallowed-list': ['z-index'].map(matchNameRegExp),
'polaris/custom-property-disallowed-list': {
disallowedProperties: disallowedVarsZIndex,
disallowedValues: {'/.+/': disallowedVarsZIndex},
},
'polaris/global-disallowed-list': [
// Legacy mixin map-get data
/\$fixed-element-stacking-order/,
Expand Down
22 changes: 22 additions & 0 deletions stylelint-polaris/plugins/custom-property-disallowed-list/README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,8 @@ interface PrimaryOptions {

### Configuration

#### Example 1

```js
const stylelintConfig = {
rules: {
Expand All @@ -32,5 +34,25 @@ const stylelintConfig = {
};
```

#### Example 2

```js
const disallowedVarsBorder = [
// Legacy custom properties
'--p-foo',
'--p-bar',
];

const stylelintOptions = {
border: [
{
'polaris/custom-property-disallowed-list': {
disallowedProperties: disallowedVarsBorder,
disallowedValues: {'/.+/': disallowedVarsBorder},
},
},
],
```
> Note: Property keys for `disallowedValues` are evaluated in order. Please ensure that you
> order your property keys from most specific to least specific.

0 comments on commit eb73c2f

Please sign in to comment.