Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Fix value-no-vendor-prefix false negatives #7654

Merged
merged 2 commits into from
Apr 25, 2024
Merged

Fix value-no-vendor-prefix false negatives #7654

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
0600e66
Fix `value-no-vendor-prefix` false negatives
Mouvedia Apr 25, 2024
f5f8186
Apply suggestions from code review
Mouvedia Apr 25, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
5 changes: 5 additions & 0 deletions .changeset/serious-bees-burn.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"stylelint": minor
---

Fixed: `value-no-vendor-prefix` false negatives
14 changes: 13 additions & 1 deletion lib/reference/prefixes.cjs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,18 @@
// please instead edit the ESM counterpart and rebuild with Rollup (npm run build).
'use strict';

const prefixes = new Set(['-webkit-', '-moz-', '-ms-', '-o-']);
// used by value-no-vendor-prefix and selector-no-vendor-prefix
// i.e. this list is deliberately not exhaustive
// cf https://www.w3.org/TR/CSS22/syndata.html#vendor-keyword-history
const prefixes = new Set([
'-webkit-',
'-moz-',
'-ms-',
'-o-',
'-xv-',
'-apple-',
'-wap-',
'-khtml-',
]);

exports.prefixes = prefixes;
14 changes: 13 additions & 1 deletion lib/reference/prefixes.mjs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1 +1,13 @@
export const prefixes = new Set(['-webkit-', '-moz-', '-ms-', '-o-']);
// used by value-no-vendor-prefix and selector-no-vendor-prefix
// i.e. this list is deliberately not exhaustive
// cf https://www.w3.org/TR/CSS22/syndata.html#vendor-keyword-history
export const prefixes = new Set([
'-webkit-',
'-moz-',
'-ms-',
'-o-',
'-xv-',
'-apple-',
'-wap-',
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

see https://www.developershome.com/wap/wcss/wcss_tutorial.asp?page=marqueeExtension

'-khtml-',
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

e.g. :-khtml-drag

]);
15 changes: 5 additions & 10 deletions lib/rules/value-no-vendor-prefix/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ a { display: -webkit-flex; }
* This prefix */
```

This rule ignores non-standard vendor-prefixed values that aren't handled by [Autoprefixer](https://github.com/postcss/autoprefixer).
This rule does not fix vendor-prefixed values that weren't handled by [Autoprefixer](https://github.com/postcss/autoprefixer) version 10.2.5. Exceptions may be added on a case by case basis.
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I have added some examples of such cases that happen to be the false negatives that I am fixing in this PR.
see https://github.com/stylelint/stylelint/pull/7654/files#diff-db7ee227393b97a75cdd1e359512825b05fc5e14bfd94e304762622814f41a14

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

For the version check #5312 (comment)


The [`fix` option](../../../docs/user-guide/options.md#fix) can automatically fix all of the problems reported by this rule. However, it will not remove duplicate values produced when the prefixes are removed. You can use [Autoprefixer](https://github.com/postcss/autoprefixer) itself, with the [`add` option off and the `remove` option on](https://github.com/postcss/autoprefixer#options), in these situations.

Expand Down Expand Up @@ -60,7 +60,7 @@ a { background: linear-gradient(bottom, #000, #fff); }
Given:

```json
["grab", "hangul", "/^-apple-/"]
["grab", "max-content", "/^-moz-all$/"]
```

The following patterns are _not_ considered problems:
Expand All @@ -72,20 +72,15 @@ a { cursor: -webkit-grab; }

<!-- prettier-ignore -->
```css
a { list-style-type: -moz-hangul; }
```

<!-- prettier-ignore -->
```css
a { list-style-type: -moz-hangul-consonant; }
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This was technically true that it was being ignored but it was misleading.
i.e. it was ignored because it wasn't part of the variables that are considered unprefixable
see https://github.com/stylelint/stylelint/pull/7654/files#diff-5f9be0b5e6e40c3ad07fc3db2a8895c25da53046e10664c0112bbb9e237893c5R295

a { max-width: -moz-max-content; }
```

<!-- prettier-ignore -->
```css
a { -webkit-appearance: -apple-pay-button; }
a { -moz-user-select: -moz-all; }
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The previous example was misleading, -apple-pay-button is always ignored.

```

> [!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-)?inline-/]`.
> E.g. `[/^(-webkit-|-moz-|-ms-)?max-content$/]`.
82 changes: 70 additions & 12 deletions lib/rules/value-no-vendor-prefix/__tests__/index.mjs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,26 +8,42 @@ testRule({

accept: [
{
code: '.foo { display: flex; }',
code: 'a { display: flex; }',
},
{
code: '.foo { background: linear-gradient(to top, #000, #fff); }',
code: 'a { background: linear-gradient(to top, #000, #fff); }',
},
{
code: '.foo { max-width: max-content; }',
code: 'a { max-width: max-content; }',
},
{
code: '.foo { -webkit-transform: translate(0, 0); }',
code: 'a { -webkit-transform: translate(0, 0); }',
description: 'ignores property vendor prefixes',
},
{
code: '.foo { -wEbKiT-tRaNsFoRm: translate(0, 0); }',
code: 'a { -wEbKiT-tRaNsFoRm: translate(0, 0); }',
description: 'ignores property vendor prefixes',
},
{
code: '.foo { -WEBKIT-TRANSFORM: translate(0, 0); }',
code: 'a { -WEBKIT-TRANSFORM: translate(0, 0); }',
description: 'ignores property vendor prefixes',
},
{
code: 'a { white-space: -pre-wrap; }',
description: 'ignores non-vendor prefixed values',
Comment on lines +32 to +33
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

see https://web.archive.org/web/20100502064159/http://users.tkk.fi:80/tkarvine/pre-wrap-css3-mozilla-opera-ie.html

},
{
code: 'a { background-color: -apple-wireless-playback-target-active; }',
description: '-apple-: ignores unfixable',
},
{
code: 'a { display: -wap-marquee; }',
description: '-wap-: ignores unfixable',
},
{
code: 'a { list-style-type: -moz-ethiopic-halehame; }',
description: '-moz-: ignores unfixable',
},
],

reject: [
Expand Down Expand Up @@ -94,6 +110,15 @@ testRule({
endLine: 1,
endColumn: 28,
},
{
code: '.foo { display: -khtml-box; }',
fixed: '.foo { display: box; }',
Comment on lines +114 to +115
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

see Igalia/webkit@a659cc2#diff-29c17e702b85143afffde80667b4c59b196f34d765b2f77e1586d3c3de7f1679

message: messages.rejected('-khtml-box'),
line: 1,
column: 17,
endLine: 1,
endColumn: 27,
},
{
code: '.foo { background: -webkit-linear-gradient(bottom, #000, #fff); }',
fixed: '.foo { background: linear-gradient(bottom, #000, #fff); }',
Expand All @@ -112,6 +137,33 @@ testRule({
endLine: 1,
endColumn: 35,
},
{
code: '.foo { speak: -xv-digits; }',
fixed: '.foo { speak: digits; }',
Comment on lines +141 to +142
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

see https://issues.chromium.org/issues/40813740

message: messages.rejected('-xv-digits'),
line: 1,
column: 15,
endLine: 1,
endColumn: 25,
},
{
code: '.foo { white-space: -o-pre-wrap; }',
fixed: '.foo { white-space: pre-wrap; }',
message: messages.rejected('-o-pre-wrap'),
line: 1,
column: 21,
endLine: 1,
endColumn: 32,
},
{
code: '.foo { -webkit-user-select: -moz-all; }',
fixed: '.foo { -webkit-user-select: all; }',
Comment on lines +159 to +160
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

see https://bugzilla.mozilla.org/show_bug.cgi?id=1492958

message: messages.rejected('-moz-all'),
line: 1,
column: 29,
endLine: 1,
endColumn: 37,
},
],
});

Expand Down Expand Up @@ -155,24 +207,21 @@ testRule({

testRule({
ruleName,
config: [
true,
{ ignoreValues: ['grab', 'hangul', '/^-webkit-linear-/', /^-moz-use-text-color$/] },
],
config: [true, { ignoreValues: ['grab', 'hangul', '/^-webkit-linear-/', /^-moz-all$/] }],
fix: true,

accept: [
{
code: 'a { cursor: -webkit-grab; }',
},
{
code: 'a { list-style-type: -moz-hangul-consonant; }',
code: 'a { list-style-type: -moz-hangul; }',
},
{
code: 'a { background: -webkit-linear-gradient(bottom, #000, #fff); }',
},
{
code: 'a { outline-color: -moz-use-text-color; }',
code: 'a { -moz-user-select: -moz-all; }',
description: 'RegExp: exact match',
},
],
Expand Down Expand Up @@ -204,5 +253,14 @@ testRule({
endLine: 1,
endColumn: 29,
},
{
code: '.foo { list-style-type: -moz-hangul-consonant; }',
fixed: '.foo { list-style-type: hangul-consonant; }',
message: messages.rejected('-moz-hangul-consonant'),
line: 1,
column: 25,
endLine: 1,
endColumn: 46,
},
],
});
38 changes: 38 additions & 0 deletions lib/utils/isAutoprefixable.cjs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -216,6 +216,8 @@ 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',
Expand All @@ -224,12 +226,14 @@ const PROPERTY_VALUES = new Set([
'-moz-fit-content',
'-moz-grab',
'-moz-grabbing',
'-moz-initial',
'-moz-inline-box',
'-moz-isolate',
'-moz-isolate-override',
'-moz-linear-gradient',
'-moz-max-content',
'-moz-min-content',
'-moz-pre-wrap',
'-moz-plaintext',
'-moz-radial-gradient',
'-moz-repeating-linear-gradient',
Expand All @@ -246,6 +250,7 @@ const PROPERTY_VALUES = new Set([
'-ms-repeating-radial-gradient',
'-o-linear-gradient',
'-o-pixelated',
'-o-pre-wrap',
'-o-radial-gradient',
'-o-repeating-linear-gradient',
'-o-repeating-radial-gradient',
Expand All @@ -272,6 +277,39 @@ const PROPERTY_VALUES = new Set([
'-webkit-sticky',
'-webkit-zoom-in',
'-webkit-zoom-out',
'-xv-digits',
'-xv-literal-punctuation',
'-xv-no-punctuation',
// Firefox does not support
// ethiopic-halehame, ethiopic-halehame-am, ethiopic-halehame-ti-er and ethiopic-halehame-ti-et
// without a -moz- prefix
// see https://developer.mozilla.org/en-US/docs/Web/CSS/list-style-type
'-moz-arabic-indic',
'-moz-bengali',
'-moz-cjk-earthly-branch',
'-moz-cjk-heavenly-stem',
'-moz-devanagari',
'-moz-ethiopic-numeric',
'-moz-gujarati',
'-moz-gurmukhi',
'-moz-hangul',
'-moz-hangul-consonant',
'-moz-japanese-formal',
'-moz-japanese-informal',
'-moz-kannada',
'-moz-khmer',
'-moz-lao',
'-moz-malayalam',
'-moz-myanmar',
'-moz-oriya',
'-moz-persian',
'-moz-simp-chinese-formal',
'-moz-simp-chinese-informal',
'-moz-tamil',
'-moz-telugu',
'-moz-thai',
'-moz-trad-chinese-formal',
'-moz-trad-chinese-informal',
]);

/**
Expand Down
38 changes: 38 additions & 0 deletions lib/utils/isAutoprefixable.mjs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -212,6 +212,8 @@ 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',
Expand All @@ -220,12 +222,14 @@ const PROPERTY_VALUES = new Set([
'-moz-fit-content',
'-moz-grab',
'-moz-grabbing',
'-moz-initial',
'-moz-inline-box',
'-moz-isolate',
'-moz-isolate-override',
'-moz-linear-gradient',
'-moz-max-content',
'-moz-min-content',
'-moz-pre-wrap',
'-moz-plaintext',
'-moz-radial-gradient',
'-moz-repeating-linear-gradient',
Expand All @@ -242,6 +246,7 @@ const PROPERTY_VALUES = new Set([
'-ms-repeating-radial-gradient',
'-o-linear-gradient',
'-o-pixelated',
'-o-pre-wrap',
'-o-radial-gradient',
'-o-repeating-linear-gradient',
'-o-repeating-radial-gradient',
Expand All @@ -268,6 +273,39 @@ const PROPERTY_VALUES = new Set([
'-webkit-sticky',
'-webkit-zoom-in',
'-webkit-zoom-out',
'-xv-digits',
'-xv-literal-punctuation',
'-xv-no-punctuation',
// Firefox does not support
// ethiopic-halehame, ethiopic-halehame-am, ethiopic-halehame-ti-er and ethiopic-halehame-ti-et
// without a -moz- prefix
// see https://developer.mozilla.org/en-US/docs/Web/CSS/list-style-type
'-moz-arabic-indic',
'-moz-bengali',
'-moz-cjk-earthly-branch',
'-moz-cjk-heavenly-stem',
'-moz-devanagari',
'-moz-ethiopic-numeric',
'-moz-gujarati',
'-moz-gurmukhi',
'-moz-hangul',
'-moz-hangul-consonant',
'-moz-japanese-formal',
'-moz-japanese-informal',
'-moz-kannada',
'-moz-khmer',
'-moz-lao',
'-moz-malayalam',
'-moz-myanmar',
'-moz-oriya',
'-moz-persian',
'-moz-simp-chinese-formal',
'-moz-simp-chinese-informal',
'-moz-tamil',
'-moz-telugu',
'-moz-thai',
'-moz-trad-chinese-formal',
'-moz-trad-chinese-informal',
]);

/**
Expand Down