diff --git a/.changeset/hungry-teachers-bow.md b/.changeset/hungry-teachers-bow.md new file mode 100644 index 0000000000..39d2133344 --- /dev/null +++ b/.changeset/hungry-teachers-bow.md @@ -0,0 +1,5 @@ +--- +"stylelint": patch +--- + +Fixed: `value-no-vendor-prefix` false negatives/positives diff --git a/lib/rules/value-no-vendor-prefix/README.md b/lib/rules/value-no-vendor-prefix/README.md index 8ab5301c7f..7e0d3dfbf8 100644 --- a/lib/rules/value-no-vendor-prefix/README.md +++ b/lib/rules/value-no-vendor-prefix/README.md @@ -83,4 +83,4 @@ a { -moz-user-select: -moz-all; } > [!WARNING] > An _exact_ match comparison will be performed for non-regex strings in the next major version. > If you want to keep the legacy behavior, please consider using a regex instead. -> E.g. `[/^(-webkit-|-moz-|-ms-)?max-content$/]`. +> E.g. `[/^(-webkit-|-moz-)?max-content$/]`. diff --git a/lib/rules/value-no-vendor-prefix/__tests__/index.mjs b/lib/rules/value-no-vendor-prefix/__tests__/index.mjs index 44b09b2df4..bfe482b987 100644 --- a/lib/rules/value-no-vendor-prefix/__tests__/index.mjs +++ b/lib/rules/value-no-vendor-prefix/__tests__/index.mjs @@ -10,6 +10,12 @@ testRule({ { code: 'a { display: flex; }', }, + { + code: '.foo { display: -webkit-box; }', + }, + { + code: '.foo { display: -moz-box; }', + }, { code: 'a { background: linear-gradient(to top, #000, #fff); }', }, @@ -102,22 +108,13 @@ testRule({ endColumn: 42, }, { - code: '.foo { display: -webkit-box; }', - fixed: '.foo { display: box; }', - message: messages.rejected('-webkit-box'), + code: '.foo { image-rendering: -o-crisp-edges; }', + fixed: '.foo { image-rendering: crisp-edges; }', + message: messages.rejected('-o-crisp-edges'), line: 1, - column: 17, - endLine: 1, - endColumn: 28, - }, - { - code: '.foo { display: -khtml-box; }', - fixed: '.foo { display: box; }', - message: messages.rejected('-khtml-box'), - line: 1, - column: 17, + column: 25, endLine: 1, - endColumn: 27, + endColumn: 39, }, { code: '.foo { background: -webkit-linear-gradient(bottom, #000, #fff); }', @@ -175,7 +172,7 @@ testRule({ accept: [ { - code: 'a { $margin: -webkit-box; }', + code: 'a { $foo: -webkit-plaintext; }', }, { code: 'a { margin: $variable-webkit-variable; }', @@ -184,7 +181,7 @@ testRule({ code: 'a { margin: #{$variable-webkit-variable}; }', }, { - code: 'a { #{$display}: -webkit-box; }', + code: 'a { #{$foo}: -webkit-plaintext; }', }, ], }); diff --git a/lib/utils/isAutoprefixable.cjs b/lib/utils/isAutoprefixable.cjs index e71fc993a9..822199dd47 100644 --- a/lib/utils/isAutoprefixable.cjs +++ b/lib/utils/isAutoprefixable.cjs @@ -206,6 +206,9 @@ const PROPERTIES = new Set([ ]); /** + * This list is currently being used to compile all the prefixed values that can safely be unprefixed. + * i.e. value-no-vendor-prefix autofix ought to be able to handle it appropriately + * It was initially populated using the following example: * @example * Object.values(prefixes.remove) * .filter((p) => Array.isArray(p.values)) @@ -216,10 +219,7 @@ const PROPERTIES = new Set([ * @see https://github.com/stylelint/stylelint/pull/5312/files#r636018013 */ const PROPERTY_VALUES = new Set([ - '-khtml-box', '-moz-all', - '-moz-available', - '-moz-box', '-moz-calc', '-moz-crisp-edges', '-moz-element', @@ -227,7 +227,6 @@ const PROPERTY_VALUES = new Set([ '-moz-grab', '-moz-grabbing', '-moz-initial', - '-moz-inline-box', '-moz-isolate', '-moz-isolate-override', '-moz-linear-gradient', @@ -242,35 +241,31 @@ const PROPERTY_VALUES = new Set([ '-moz-zoom-out', '-ms-flexbox', '-ms-grid', - '-ms-inline-flexbox', '-ms-inline-grid', '-ms-linear-gradient', '-ms-radial-gradient', '-ms-repeating-linear-gradient', '-ms-repeating-radial-gradient', + '-o-crisp-edges', '-o-linear-gradient', - '-o-pixelated', '-o-pre-wrap', '-o-radial-gradient', '-o-repeating-linear-gradient', '-o-repeating-radial-gradient', - '-webkit-box', '-webkit-calc', '-webkit-cross-fade', - '-webkit-fill-available', '-webkit-filter', '-webkit-fit-content', '-webkit-flex', '-webkit-grab', '-webkit-grabbing', '-webkit-image-set', - '-webkit-inline-box', '-webkit-inline-flex', '-webkit-isolate', '-webkit-linear-gradient', '-webkit-max-content', '-webkit-min-content', - '-webkit-optimize-contrast', + '-webkit-plaintext', '-webkit-radial-gradient', '-webkit-repeating-linear-gradient', '-webkit-repeating-radial-gradient', diff --git a/lib/utils/isAutoprefixable.mjs b/lib/utils/isAutoprefixable.mjs index b92f3620dc..f9c764c930 100644 --- a/lib/utils/isAutoprefixable.mjs +++ b/lib/utils/isAutoprefixable.mjs @@ -202,6 +202,9 @@ const PROPERTIES = new Set([ ]); /** + * This list is currently being used to compile all the prefixed values that can safely be unprefixed. + * i.e. value-no-vendor-prefix autofix ought to be able to handle it appropriately + * It was initially populated using the following example: * @example * Object.values(prefixes.remove) * .filter((p) => Array.isArray(p.values)) @@ -212,10 +215,7 @@ const PROPERTIES = new Set([ * @see https://github.com/stylelint/stylelint/pull/5312/files#r636018013 */ const PROPERTY_VALUES = new Set([ - '-khtml-box', '-moz-all', - '-moz-available', - '-moz-box', '-moz-calc', '-moz-crisp-edges', '-moz-element', @@ -223,7 +223,6 @@ const PROPERTY_VALUES = new Set([ '-moz-grab', '-moz-grabbing', '-moz-initial', - '-moz-inline-box', '-moz-isolate', '-moz-isolate-override', '-moz-linear-gradient', @@ -238,35 +237,31 @@ const PROPERTY_VALUES = new Set([ '-moz-zoom-out', '-ms-flexbox', '-ms-grid', - '-ms-inline-flexbox', '-ms-inline-grid', '-ms-linear-gradient', '-ms-radial-gradient', '-ms-repeating-linear-gradient', '-ms-repeating-radial-gradient', + '-o-crisp-edges', '-o-linear-gradient', - '-o-pixelated', '-o-pre-wrap', '-o-radial-gradient', '-o-repeating-linear-gradient', '-o-repeating-radial-gradient', - '-webkit-box', '-webkit-calc', '-webkit-cross-fade', - '-webkit-fill-available', '-webkit-filter', '-webkit-fit-content', '-webkit-flex', '-webkit-grab', '-webkit-grabbing', '-webkit-image-set', - '-webkit-inline-box', '-webkit-inline-flex', '-webkit-isolate', '-webkit-linear-gradient', '-webkit-max-content', '-webkit-min-content', - '-webkit-optimize-contrast', + '-webkit-plaintext', '-webkit-radial-gradient', '-webkit-repeating-linear-gradient', '-webkit-repeating-radial-gradient',