Fix false positives for hex with alpha-channel and false negatives for modern syntax in `color-named` #5718

ota-meshi · 2021-11-14T10:14:33Z

Which issue, if any, is this issue related to?

Is there anything in the PR that needs further explanation?

This PR fixes false positives for alpha-channel posted in #5716, and false negatives for modern syntax (e.g. rgba(0 0 0 / 1)).

ota-meshi · 2021-11-14T10:17:35Z

package.json

@@ -109,6 +109,7 @@
  },
  "dependencies": {
    "balanced-match": "^2.0.0",
+    "colord": "^2.9.1",


Changed to use colord package instead of reference file.

The colord package looks nice to me. Just in case, could you tell us why you choose this package, please?

colord seems to be used in cssnano and I think we can trust it. Also, another well-known package, color, doesn't seem to be able to parse modern syntax (e.g. rgb(0 0 0)), so I think colord is better.

Please let me know if you know any other better packages.

ota-meshi · 2021-11-14T10:19:07Z

lib/rules/color-named/colord-utils.js

+	/* Syntaxes that is removed in Color Module Level 4 specification. */
+
+	// hwb() with comma
+	(_colordClass, parsers) => {
+		parsers.string.push([parseHwbWithCommaString, /** @type {any} */ ('hwb-with-comma')]);
+	},
+	// gray()
+	(_colordClass, parsers) => {
+		parsers.string.push([parseGrayString, /** @type {any} */ ('gray')]);
+	},


colord doesn't understand the old syntax, so I extended it.

ybiquitous

@ota-meshi Thank you for the great fix PR! 👍🏼

I've left some questions and refactoring suggestions, but this PR looks mostly fine to me! 👏🏼

lib/rules/color-named/__tests__/colord-utils.test.js

lib/rules/color-named/colord-utils.js

lib/rules/color-named/index.js

Co-authored-by: Masafumi Koba <473530+ybiquitous@users.noreply.github.com>

ota-meshi · 2021-11-15T08:30:41Z

@ybiquitous I have added your requested changes to this PR. So could you check it again?

ybiquitous

@ota-meshi Great work! LGTM 👏🏼

jeddy3

LGTM, thank you!

This rule was problematically slow in the past.

@ota-meshi It'd be good to get a benchmark of this branch against main before merging.

ota-meshi · 2021-11-15T23:23:24Z

I didn't do that intentionally, but it also seems to be of value in terms of performance.

After:

npm run benchmark-rule -- color-named never 

Warnings: 0
Mean: 37.03908788571429 ms
Deviation: 20.985396496488296 ms

npm run benchmark-rule -- color-named always-where-possible

Warnings: 131
Mean: 41.65396371538462 ms
Deviation: 25.849404139328065 ms

Before:

npm run benchmark-rule -- color-named never 

Warnings: 0
Mean: 57.58543509615383 ms
Deviation: 40.58585746807126 ms

npm run benchmark-rule -- color-named always-where-possible

Warnings: 129
Mean: 69.16574440277776 ms
Deviation: 25.362776611378344 ms

ota-meshi · 2021-11-15T23:38:23Z

The result of npm run benchmark-rule --color-named always-where-possible is different, so I checked the cause and noticed that the new logic was converted to transparent. I will fix it.

ota-meshi · 2021-11-15T23:43:39Z

I fixed this PR. So please check it again.
45371c0

jeddy3

Excellent, thank you!

jeddy3 · 2021-11-16T10:15:19Z

Fixed: color-named false positives for hex with alpha-channel and false negatives for modern syntax (#5718).

omgovich · 2022-01-20T14:26:27Z

Hey guys! Thanks for choosing colord! Let me know if you will need any help!

Mouvedia · 2022-03-11T22:06:14Z

After reading https://github.com/postcss/postcss-color-gray, I am wondering if gray() was actually implemented by one browser.

ota-meshi added 2 commits November 14, 2021 19:12

Fix false positives for #RRGGBBAA in color-named

19eb3f4

update package-lock

329867c

ota-meshi commented Nov 14, 2021

View reviewed changes

fix modern syntax

061fae8

ota-meshi changed the title ~~Fix false positives for #RRGGBBAA in color-named~~ Fix false positives for alpha-channel and false negatives for modern syntax in color-named Nov 14, 2021

ota-meshi changed the title ~~Fix false positives for alpha-channel and false negatives for modern syntax in color-named~~ Fix false positives for hex with alpha-channel and false negatives for modern syntax in color-named Nov 14, 2021

ybiquitous reviewed Nov 15, 2021

View reviewed changes

ota-meshi and others added 6 commits November 15, 2021 16:14

Update lib/rules/color-named/__tests__/colord-utils.test.js

e25750f

Co-authored-by: Masafumi Koba <473530+ybiquitous@users.noreply.github.com>

Update lib/rules/color-named/__tests__/colord-utils.test.js

66d124b

Co-authored-by: Masafumi Koba <473530+ybiquitous@users.noreply.github.com>

Update lib/rules/color-named/colord-utils.js

3b7e72b

Co-authored-by: Masafumi Koba <473530+ybiquitous@users.noreply.github.com>

Update lib/rules/color-named/colord-utils.js

dd8a505

Co-authored-by: Masafumi Koba <473530+ybiquitous@users.noreply.github.com>

rename

8b94a16

avoid using regex

c243f4d

ybiquitous approved these changes Nov 15, 2021

View reviewed changes

jeddy3 reviewed Nov 15, 2021

View reviewed changes

fix rgba(0, 0, 0, 0) to transparent

45371c0

ota-meshi requested a review from jeddy3 November 15, 2021 23:43

jeddy3 approved these changes Nov 16, 2021

View reviewed changes

jeddy3 merged commit c91774c into main Nov 16, 2021

jeddy3 deleted the fix-color-named branch November 16, 2021 10:12

sync-by-unito bot mentioned this pull request Jan 1, 2022

build(deps-dev): bump stylelint and stylelint-config-standard numbersprotocol/capture-lite#1143

Closed

sync-by-unito bot mentioned this pull request Jan 27, 2022

build(deps-dev): bump stylelint and stylelint-config-standard numbersprotocol/capture-lite#1195

Closed

sync-by-unito bot mentioned this pull request Mar 1, 2022

build(deps-dev): bump stylelint and stylelint-config-standard numbersprotocol/capture-lite#1331

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Fix false positives for hex with alpha-channel and false negatives for modern syntax in `color-named` #5718

Fix false positives for hex with alpha-channel and false negatives for modern syntax in `color-named` #5718

ota-meshi commented Nov 14, 2021 •

edited

ota-meshi Nov 14, 2021

ybiquitous Nov 14, 2021

ota-meshi Nov 15, 2021

ota-meshi Nov 14, 2021

ybiquitous left a comment

ota-meshi commented Nov 15, 2021

ybiquitous left a comment

jeddy3 left a comment •

edited

ota-meshi commented Nov 15, 2021

ota-meshi commented Nov 15, 2021

ota-meshi commented Nov 15, 2021

jeddy3 left a comment

jeddy3 commented Nov 16, 2021

omgovich commented Jan 20, 2022

Mouvedia commented Mar 11, 2022

Fix false positives for hex with alpha-channel and false negatives for modern syntax in color-named #5718

Fix false positives for hex with alpha-channel and false negatives for modern syntax in color-named #5718

Conversation

ota-meshi commented Nov 14, 2021 • edited

ota-meshi Nov 14, 2021

Choose a reason for hiding this comment

ybiquitous Nov 14, 2021

Choose a reason for hiding this comment

ota-meshi Nov 15, 2021

Choose a reason for hiding this comment

ota-meshi Nov 14, 2021

Choose a reason for hiding this comment

ybiquitous left a comment

Choose a reason for hiding this comment

ota-meshi commented Nov 15, 2021

ybiquitous left a comment

Choose a reason for hiding this comment

jeddy3 left a comment • edited

Choose a reason for hiding this comment

ota-meshi commented Nov 15, 2021

ota-meshi commented Nov 15, 2021

ota-meshi commented Nov 15, 2021

jeddy3 left a comment

Choose a reason for hiding this comment

jeddy3 commented Nov 16, 2021

omgovich commented Jan 20, 2022

Mouvedia commented Mar 11, 2022

Fix false positives for hex with alpha-channel and false negatives for modern syntax in `color-named` #5718

Fix false positives for hex with alpha-channel and false negatives for modern syntax in `color-named` #5718

ota-meshi commented Nov 14, 2021 •

edited

jeddy3 left a comment •

edited