diff --git a/.changeset/stale-trees-obey.md b/.changeset/stale-trees-obey.md new file mode 100644 index 00000000000..e9bf79f808b --- /dev/null +++ b/.changeset/stale-trees-obey.md @@ -0,0 +1,5 @@ +--- +'@shopify/stylelint-polaris': minor +--- + +Allow polaris/media-query-allowed-list lint rule to be disabled diff --git a/stylelint-polaris/plugins/media-query-allowed-list/index.js b/stylelint-polaris/plugins/media-query-allowed-list/index.js index fc59ff3ced6..d604db575c1 100644 --- a/stylelint-polaris/plugins/media-query-allowed-list/index.js +++ b/stylelint-polaris/plugins/media-query-allowed-list/index.js @@ -8,6 +8,7 @@ const { isString, isRegExp, matchesStringOrRegExp, + isBoolean, } = require('../../utils'); const ruleName = 'polaris/media-query-allowed-list'; @@ -26,6 +27,7 @@ const messages = stylelint.utils.ruleMessages(ruleName, { * @property {AllowedPatterns} allowedMediaTypes * @property {AllowedPatterns} allowedMediaFeatureNames * @property {AllowedPatterns} allowedScssInterpolations + * @property {boolean} disabled */ const {rule} = stylelint.createPlugin( @@ -51,6 +53,11 @@ const {rule} = stylelint.createPlugin( possible: [isString, isRegExp], optional: true, }, + { + actual: primary.disabled, + possible: [isBoolean], + optional: true, + }, ); if (!validOptions) { @@ -63,8 +70,13 @@ const {rule} = stylelint.createPlugin( allowedMediaTypes = [], allowedMediaFeatureNames = [], allowedScssInterpolations = [], + disabled, } = primary; + if (disabled) { + return; + } + // Pass `primary.allowedMediaFeatureNames` to the // built-in `media-feature-name-allowed-list` rule stylelint.utils.checkAgainstRule( diff --git a/stylelint-polaris/plugins/media-query-allowed-list/index.test.js b/stylelint-polaris/plugins/media-query-allowed-list/index.test.js index 5bdc9f77aba..fa86e639f5d 100644 --- a/stylelint-polaris/plugins/media-query-allowed-list/index.test.js +++ b/stylelint-polaris/plugins/media-query-allowed-list/index.test.js @@ -122,3 +122,19 @@ testRule({ }, ], }); + +testRule({ + ruleName, + plugins: [__dirname], + config: { + disabled: true, + }, + customSyntax: 'postcss-scss', + accept: [ + { + code: '@media (width: 0px) {}', + description: 'Defining media queries with width when rule is disabled', + }, + ], + reject: [], +});