From 034fe79a5283bef73579759cdb44e7c1bebfa632 Mon Sep 17 00:00:00 2001 From: Alex Page Date: Mon, 17 Apr 2023 11:05:22 +1000 Subject: [PATCH] Revert "Add `custom-property-disallowed-list` `stylelint-polaris` plugin (#8968)" This reverts commit dbe68efb40fcd6261aee98b8784e0fca696c5b1b. --- .changeset/sour-parrots-cry.md | 5 - .../custom-property-allowed-list/index.js | 50 +++-- .../index.test.js | 26 --- .../custom-property-disallowed-list/README.md | 36 ---- .../custom-property-disallowed-list/index.js | 189 ------------------ .../index.test.js | 108 ---------- 6 files changed, 28 insertions(+), 386 deletions(-) delete mode 100644 .changeset/sour-parrots-cry.md delete mode 100644 stylelint-polaris/plugins/custom-property-disallowed-list/README.md delete mode 100644 stylelint-polaris/plugins/custom-property-disallowed-list/index.js delete mode 100644 stylelint-polaris/plugins/custom-property-disallowed-list/index.test.js diff --git a/.changeset/sour-parrots-cry.md b/.changeset/sour-parrots-cry.md deleted file mode 100644 index 5a13faa7633..00000000000 --- a/.changeset/sour-parrots-cry.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -'@shopify/stylelint-polaris': minor ---- - -Added `custom-property-disallowed-list` rule diff --git a/stylelint-polaris/plugins/custom-property-allowed-list/index.js b/stylelint-polaris/plugins/custom-property-allowed-list/index.js index 99a778e385a..b42adc4ee79 100644 --- a/stylelint-polaris/plugins/custom-property-allowed-list/index.js +++ b/stylelint-polaris/plugins/custom-property-allowed-list/index.js @@ -16,25 +16,18 @@ const messages = stylelint.utils.ruleMessages(ruleName, { * @type {stylelint.RuleMessageFunc} */ rejected: (prop, value, prefix, isInvalidProp, invalidValues) => { - const invalidPropertyMessage = isInvalidProp - ? `Unexpected prefix "${prefix}" for defined custom property "${prop}" - Properties with prefixes "--p-" or "--pc-" cannot be defined outside of Polaris"` - : null; - - const plural = invalidValues?.length > 1; - - const invalidValueMessage = invalidValues - ? `Unexpected value "${value}" for property "${prop}" - Token${ - plural ? 's' : '' - } ${invalidValues.map((token) => `"${token}"`).join(', ')} ${ - plural ? 'are' : 'is' - } either private or ${plural ? 'do' : 'does'} not exist` - : null; - - const message = [invalidPropertyMessage, invalidValueMessage] - .filter(Boolean) - .join('. '); + if (isInvalidProp) { + return `Unexpected prefix "${prefix}" for defined custom property "${prop}" - Properties with prefixes "--p-" or "--pc-" cannot be defined outside of Polaris"`; + } - return message; + if (invalidValues) { + const plural = invalidValues.length > 1; + return `Unexpected value "${value}" for property "${prop}" - Token${ + plural ? 's' : '' + } ${invalidValues.map((token) => `"${token}"`).join(', ')} ${ + plural ? 'are' : 'is' + } either private or ${plural ? 'do' : 'does'} not exist`; + } }, }); @@ -89,7 +82,7 @@ const {rule} = stylelint.createPlugin( value, ); - if (isInvalidProperty || invalidValues) { + if (isInvalidProperty) { stylelint.utils.report({ message: messages.rejected( prop, @@ -103,6 +96,21 @@ const {rule} = stylelint.createPlugin( ruleName, }); } + + if (invalidValues) { + stylelint.utils.report({ + message: messages.rejected( + prop, + value, + undefined, + isInvalidProperty, + invalidValues, + ), + node: decl, + result, + ruleName, + }); + } }); }; }, @@ -114,9 +122,7 @@ const {rule} = stylelint.createPlugin( * @returns {string} */ function getCustomPropertyPrefix(property) { - return isCustomProperty(property) - ? `--${property.split('-')[2]}-` - : undefined; + return `--${property.split('-')[2]}-`; } /** diff --git a/stylelint-polaris/plugins/custom-property-allowed-list/index.test.js b/stylelint-polaris/plugins/custom-property-allowed-list/index.test.js index 1748c827a86..8256e93d81e 100644 --- a/stylelint-polaris/plugins/custom-property-allowed-list/index.test.js +++ b/stylelint-polaris/plugins/custom-property-allowed-list/index.test.js @@ -96,31 +96,5 @@ testRule({ endLine: 1, endColumn: 28, }, - { - code: '.a { --p-foo: var(--p-bar); }', - description: 'Using disallowed --p- prefixed custom property and value', - message: messages.rejected('--p-foo', 'var(--p-bar)', '--p-', true, [ - '--p-bar', - ]), - line: 1, - column: 6, - endLine: 1, - endColumn: 28, - }, - { - code: '.a { --p-foo: var(--p-bar) solid var(--p-baz); }', - description: 'Using disallowed --p- prefixed custom property and values', - message: messages.rejected( - '--p-foo', - 'var(--p-bar) solid var(--p-baz)', - '--p-', - true, - ['--p-bar', '--p-baz'], - ), - line: 1, - column: 6, - endLine: 1, - endColumn: 47, - }, ], }); diff --git a/stylelint-polaris/plugins/custom-property-disallowed-list/README.md b/stylelint-polaris/plugins/custom-property-disallowed-list/README.md deleted file mode 100644 index 79391769ee9..00000000000 --- a/stylelint-polaris/plugins/custom-property-disallowed-list/README.md +++ /dev/null @@ -1,36 +0,0 @@ -## Custom property disallowed list plugin - -### Options: - -```ts -interface PrimaryOptions { - /** - * A list of regular expressions or string literals that match disallowed custom properties. - */ - disallowedProperties?: (string | RegExp)[]; - /** - * A map of properties and their disallowed custom properties represented as a list - * of regular expressions or string literals. - */ - disallowedValues?: {[property: string]: (string | RegExp)[]}; -} -``` - -### Configuration - -```js -const stylelintConfig = { - rules: { - 'polaris/custom-property-disallowed-list': { - disallowedProperties: ['--p-foo'], - disallowedValues: { - width: ['--p-foo', /--p-bar/ /* etc... */], - '/.+/': ['--p-foo', /--p-bar/ /* etc... */], - }, - }, - }, -}; -``` - -> Note: Property keys for `disallowedValues` are evaluated in order. Please ensure that you -> order your property keys from most specific to least specific. diff --git a/stylelint-polaris/plugins/custom-property-disallowed-list/index.js b/stylelint-polaris/plugins/custom-property-disallowed-list/index.js deleted file mode 100644 index 24cd916c618..00000000000 --- a/stylelint-polaris/plugins/custom-property-disallowed-list/index.js +++ /dev/null @@ -1,189 +0,0 @@ -const stylelint = require('stylelint'); -const valueParser = require('postcss-value-parser'); - -const { - vendorUnprefixed, - matchesStringOrRegExp, - isCustomProperty, - isRegExp, - isString, -} = require('../../utils'); - -const ruleName = 'polaris/custom-property-disallowed-list'; - -const messages = stylelint.utils.ruleMessages(ruleName, { - /** - * @type {stylelint.RuleMessageFunc} - */ - rejected: (prop, value, isInvalidProp, invalidValues) => { - const invalidPropertyMessage = isInvalidProp - ? `Unexpected custom property definition "${prop}"` - : null; - - const plural = invalidValues?.length > 1; - - const invalidValueMessage = invalidValues - ? `Unexpected value${plural ? 's' : ''} ${invalidValues - .map((token) => `"${token}"`) - .join(', ')} for property "${prop}"` - : null; - - const message = [invalidPropertyMessage, invalidValueMessage] - .filter(Boolean) - .join('. '); - - return message; - }, -}); - -/** @typedef {(string | RegExp)[]} DisallowedPatterns */ - -/** - * @typedef {Object} PrimaryOptions - * @property {DisallowedPatterns} [disallowedProperties] - * @property {{[property: string]: DisallowedPatterns}} [disallowedValues] - */ - -const {rule} = stylelint.createPlugin( - ruleName, - /** @param {PrimaryOptions} primary */ - (primary) => { - return (root, result) => { - const validOptions = stylelint.utils.validateOptions( - result, - ruleName, - { - actual: primary.disallowedProperties, - possible: isDisallowedPatterns, - optional: true, - }, - { - actual: primary.disallowedValues, - possible: validateDisallowedValuesOption, - optional: true, - }, - ); - - if (!validOptions) { - return; - } - - const {disallowedProperties = [], disallowedValues = {}} = primary; - - root.walkDecls((decl) => { - const prop = decl.prop; - const value = decl.value; - - const isInvalidProperty = isInvalidCustomProperty( - disallowedProperties, - prop, - ); - - const invalidValues = getInvalidCustomPropertyValues( - disallowedValues, - prop, - value, - ); - - if (isInvalidProperty || invalidValues) { - stylelint.utils.report({ - message: messages.rejected( - prop, - value, - isInvalidProperty, - invalidValues, - ), - node: decl, - result, - ruleName, - }); - } - }); - }; - }, -); - -/** - * @param {NonNullable} disallowedProperties - * @param {string} property - */ -function isInvalidCustomProperty(disallowedProperties, property) { - if (!isCustomProperty(property)) return false; - - const isInvalid = disallowedProperties.some((disallowedProperty) => { - return matchesStringOrRegExp(property, disallowedProperty); - }); - - return isInvalid; -} - -/** - * @param {NonNullable} disallowedValues - * @param {string} prop - * @param {string} value - * @returns {string[] | undefined} - */ -function getInvalidCustomPropertyValues(disallowedValues, prop, value) { - const invalidValues = []; - - const unprefixedProp = vendorUnprefixed(prop); - - /** Property key for the disallowed values option */ - const propKey = Object.keys(disallowedValues).find((propIdentifier) => - matchesStringOrRegExp(unprefixedProp, propIdentifier), - ); - - if (!propKey) return; - - const disallowedPatterns = disallowedValues[propKey]; - - if (!disallowedPatterns.length) return; - - valueParser(value).walk((node) => { - if ( - node.type === 'word' && - isCustomProperty(node.value) && - matchesStringOrRegExp(node.value, disallowedPatterns) - ) { - invalidValues.push(node.value); - } - }); - - if (invalidValues.length > 0) return invalidValues; -} - -module.exports = { - rule, - ruleName, - messages, -}; - -/** - * Validates the input is an array of String or RegExp. - * @param {unknown} disallowedPatterns - * @returns {disallowedPatterns is DisallowedPatterns} - */ -function isDisallowedPatterns(disallowedPatterns) { - if (!Array.isArray(disallowedPatterns)) return false; - - for (const pattern of disallowedPatterns) { - if (!(isString(pattern) || isRegExp(pattern))) return false; - } - - return true; -} - -/** - * @param {unknown} option - `primary.disallowedValues` option. - */ -function validateDisallowedValuesOption(option) { - if (typeof option !== 'object' || option === null) return false; - - for (const [property, disallowedPatterns] of Object.entries(option)) { - if (!(isString(property) && isDisallowedPatterns(disallowedPatterns))) { - return false; - } - } - - return true; -} diff --git a/stylelint-polaris/plugins/custom-property-disallowed-list/index.test.js b/stylelint-polaris/plugins/custom-property-disallowed-list/index.test.js deleted file mode 100644 index e9d647382e8..00000000000 --- a/stylelint-polaris/plugins/custom-property-disallowed-list/index.test.js +++ /dev/null @@ -1,108 +0,0 @@ -const {messages, ruleName} = require('.'); - -const config = [ - { - disallowedProperties: ['--p-foo', /--p-bar/], - disallowedValues: { - '/.+/': ['--p-foo', /--p-bar/], - }, - }, -]; - -testRule({ - ruleName, - plugins: [__dirname], - config, - accept: [ - { - code: '.a { --p-foo-bar: red; }', - description: 'Defining allowed custom property', - }, - { - code: '.a { color: var(--p-foo-bar); }', - description: 'Defining allowed custom property value', - }, - { - code: '.a { --p-foo-bar: var(--p-foo-bar); }', - description: 'Defining allowed custom property and value', - }, - ], - - reject: [ - { - code: '.a { --p-foo: red; }', - description: 'Defining disallowed custom property (literal match)', - message: messages.rejected('--p-foo', 'red', true, undefined), - line: 1, - column: 6, - endLine: 1, - endColumn: 19, - }, - { - code: '.a { --p-bar-baz: red; }', - description: 'Defining disallowed custom property (regex match)', - message: messages.rejected('--p-bar-baz', 'red', true, undefined), - line: 1, - column: 6, - endLine: 1, - endColumn: 23, - }, - { - code: '.a { color: var(--p-foo); }', - description: 'Defining disallowed custom property value (literal match)', - message: messages.rejected('color', 'var(--p-foo)', false, ['--p-foo']), - line: 1, - column: 6, - endLine: 1, - endColumn: 26, - }, - { - code: '.a { color: var(--p-bar-baz); }', - description: 'Defining disallowed custom property value (regex match)', - message: messages.rejected('color', 'var(--p-bar-baz)', false, [ - '--p-bar-baz', - ]), - line: 1, - column: 6, - endLine: 1, - endColumn: 30, - }, - { - code: '.a { --p-foo: var(--p-bar); }', - description: 'Defining disallowed custom property and value', - message: messages.rejected('--p-foo', 'var(--p-bar)', true, ['--p-bar']), - line: 1, - column: 6, - endLine: 1, - endColumn: 28, - }, - { - code: '.a { border: var(--p-foo) solid var(--p-bar); }', - description: 'Defining multiple disallowed custom property values', - message: messages.rejected( - 'border', - 'var(--p-foo) solid var(--p-bar)', - false, - ['--p-foo', '--p-bar'], - ), - line: 1, - column: 6, - endLine: 1, - endColumn: 46, - }, - { - code: '.a { --p-foo: var(--p-foo) solid var(--p-bar); }', - description: 'Defining multiple disallowed custom property and values', - message: messages.rejected( - '--p-foo', - 'var(--p-foo) solid var(--p-bar)', - true, - ['--p-foo', '--p-bar'], - ), - line: 1, - column: 6, - endLine: 1, - endColumn: 47, - }, - ], -});