Skip to content

Commit 83ff1ad

Browse files
NickGerlemanfacebook-github-bot
authored andcommitted
Breaking: Remove incorrect hwb() syntax support from normalize-color
Summary: The implementation of `hwb()` color functions added in #34600 is pretty flawed. `hwb()` color functions do not allow comma delimited values. So most of the examples in the unit test here will fail to parse on web. Like `hsl()`, these should also allow numeric non-hue components (instead of just %), and angle values for hue (instead of just numbers), and this is also missing support for alpha values, though these are less dangerous compared to allowing and encouraging incorrect delimiters. https://www.w3.org/TR/css-color-4/#the-hwb-notation These were added for web compat, and the examples fail to parse on web, so I'm opting to just remove this incorrect support before implementing this more correctly in the Fabric CSS parser in next diff. I did not attempt to fix the other issues I discovered with the PR implementation in the last couple diffs, around mixing and matching syntax allowed in legacy/modern, along with allowing inconsistent delimiters. Changelog: [General][Breaking] - Remove incorrect hwb() syntax support from normalize-color Differential Revision: D68591172
1 parent dd98b45 commit 83ff1ad

File tree

2 files changed

+12
-7
lines changed

2 files changed

+12
-7
lines changed

packages/normalize-color/__tests__/normalizeColor-test.js

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -127,14 +127,15 @@ it('handles hsla properly', () => {
127127
});
128128

129129
it('handles hwb properly', () => {
130-
expect(normalizeColor('hwb(0, 0%, 100%)')).toBe(0x000000ff);
131-
expect(normalizeColor('hwb(0, 100%, 0%)')).toBe(0xffffffff);
132-
expect(normalizeColor('hwb(0, 0%, 0%)')).toBe(0xff0000ff);
133-
expect(normalizeColor('hwb(70, 50%, 0%)')).toBe(0xeaff80ff);
134-
expect(normalizeColor('hwb(0, 50%, 50%)')).toBe(0x808080ff);
135-
expect(normalizeColor('hwb(360, 100%, 100%)')).toBe(0x808080ff);
130+
expect(normalizeColor('hwb(0 0% 100%)')).toBe(0x000000ff);
131+
expect(normalizeColor('hwb(0 100% 0%)')).toBe(0xffffffff);
136132
expect(normalizeColor('hwb(0 0% 0%)')).toBe(0xff0000ff);
137133
expect(normalizeColor('hwb(70 50% 0%)')).toBe(0xeaff80ff);
134+
expect(normalizeColor('hwb(0 50% 50%)')).toBe(0x808080ff);
135+
expect(normalizeColor('hwb(360 100% 100%)')).toBe(0x808080ff);
136+
expect(normalizeColor('hwb(0 0% 0%)')).toBe(0xff0000ff);
137+
expect(normalizeColor('hwb(70 50% 0%)')).toBe(0xeaff80ff);
138+
expect(normalizeColor('hwb(0, 0%, 100%)')).toBe(null);
138139
});
139140

140141
it('handles named colors properly', () => {

packages/normalize-color/index.js

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -216,6 +216,10 @@ function call(...args) {
216216
return '\\(\\s*(' + args.join(')\\s*,?\\s*(') + ')\\s*\\)';
217217
}
218218

219+
function callModern(...args) {
220+
return '\\(\\s*(' + args.join(')\\s*(') + ')\\s*\\)';
221+
}
222+
219223
function callWithSlashSeparator(...args) {
220224
return (
221225
'\\(\\s*(' +
@@ -251,7 +255,7 @@ function getMatchers() {
251255
callWithSlashSeparator(NUMBER, PERCENTAGE, PERCENTAGE, NUMBER) +
252256
')',
253257
),
254-
hwb: new RegExp('hwb' + call(NUMBER, PERCENTAGE, PERCENTAGE)),
258+
hwb: new RegExp('hwb' + callModern(NUMBER, PERCENTAGE, PERCENTAGE)),
255259
hex3: /^#([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})$/,
256260
hex4: /^#([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})$/,
257261
hex6: /^#([0-9a-fA-F]{6})$/,

0 commit comments

Comments
 (0)