10000 ref: added csstools plugins to parse color-mix · NativeScript/NativeScript@1ea200f · GitHub
[go: up one dir, main page]
Skip to content

Commit 1ea200f

Browse files
CatchABusCatchABus
committed
ref: added csstools plugins to parse color-mix
1 parent e5546ea commit 1ea200f

File tree

6 files changed

+31
-51
lines changed

6 files changed

+31
-51
lines changed

‎apps/automated/src/ui/styling/style-tests.ts

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1827,11 +1827,11 @@ export function test_nested_css_calc() {
18271827
}
18281828

18291829
export function test_evaluateCssColorMixExpression() {
1830-
TKUnit.assertEqual(new Color('color-mix(in lch longer hue, hsl(200deg 50% 80%), coral)').toRgbString(), 'rgba(217, 169, 155, 1.00)', 'Color mix (1)');
1831-
TKUnit.assertEqual(new Color('color-mix(in hsl, hsl(200 50 80), coral 80%)').toRgbString(), 'rgba(239, 144, 110, 1.00)', 'Color mix (2)');
1830+
TKUnit.assertEqual(new Color('color-mix(in lch longer hue, hsl(200deg 50% 80%), coral)').toRgbString(), 'rgba(136, 202, 134, 1.00)', 'Color mix (1)');
1831+
TKUnit.assertEqual(new Color('color-mix(in hsl, hsl(200 50 80), coral 80%)').toRgbString(), 'rgba(247, 103, 149, 1.00)', 'Color mix (2)');
18321832
TKUnit.assertEqual(new Color('color-mix(in srgb, plum, #f00)').toRgbString(), 'rgba(238, 80, 110, 1.00)', 'Color mix (4)');
1833-
TKUnit.assertEqual(new Color('color-mix(in lab, plum 60%, #f00 50%)').toRgbString(), 'rgba(236, 87, 120, 1.00)', 'Color mix (5)');
1834-
TKUnit.assertEqual(new Color('color-mix(in --swop5c, red, blue)').toRgbString(), 'rgba(127, 0, 127, 1.00)', 'Color mix (6)');
1833+
TKUnit.assertEqual(new Color('color-mix(in lab, plum 60%, #f00 50%)').toRgbString(), 'rgba(247, 112, 125, 1.00)', 'Color mix (5)');
1834+
TKUnit.assertEqual(new Color('color-mix(in --swop5c, red, blue)').toRgbString(), 'rgba(0, 0, 255, 0.00)', 'Color mix (6)');
18351835
}
18361836

18371837
export function test_nested_css_color_mix() {
@@ -1850,11 +1850,11 @@ export function test_nested_css_color_mix() {
18501850

18511851
stack.className = 'coral';
18521852

1853-
TKUnit.assertEqual((stack.backgroundColor as Color).toRgbString(), 'rgba(239, 144, 110, 1.00)', 'Stack - backgroundColor === color-mix(in hsl, hsl(200 50 80), coral 80%)');
1853+
TKUnit.assertEqual((stack.backgroundColor as Color).toRgbString(), 'rgba(247, 103, 149, 1.00)', 'Stack - backgroundColor === color-mix(in hsl, hsl(200 50 80), coral 80%)');
18541854

18551855
(stack as any).style = `background-color: color-mix(in --swop5c, red, blue);`;
18561856

1857-
TKUnit.assertDeepEqual((stack.backgroundColor as Color).toRgbString(), 'rgba(127, 0, 127, 1.00)', 'Stack - backgroundColor === color-mix(in --swop5c, red, blue)');
1857+
TKUnit.assertDeepEqual((stack.backgroundColor as Color).toRgbString(), 'rgba(0, 0, 255, 0.00)', 'Stack - backgroundColor === color-mix(in --swop5c, red, blue)');
18581858
}
18591859

18601860
export function test_css_variables() {

‎packages/core/color/color-utils.ts

Lines changed: 14 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -1,54 +1,28 @@
1-
import { Color } from '.';
1+
import { color } from '@csstools/css-color-parser';
2+
import { parseComponentValue } from '@csstools/css-parser-algorithms';
3+
import { serializeRGB } from '@csstools/css-color-parser';
4+
import { tokenize } from '@csstools/css-tokenizer';
25

36
export const HEX_REGEX = /(^#[0-9A-F]{6}$)|(^#[0-9A-F]{3}$)|(^#[0-9A-F]{8}$)|(^#[0-9A-F]{4}$)/i;
47

58
export function isCssColorMixExpression(value: string) {
69
return value.includes('color-mix(');
710
}
811

9-
const colorMixRegExp = new RegExp('^color-mix\\(\\s*in\\s+([\\w-]+(?:\\s+[\\w-]+)*)\\s*,\\s*' + '([^,]+?)(?:\\s+(\\d+(?:\\.\\d+)?%)?)?' + '\\s*,\\s*' + '([^,]+?)(?:\\s+(\\d+(?:\\.\\d+)?%)?)?' + '\\s*\\)$', 'i');
10-
1112
export function argbFromColorMix(value: string): number {
12-
const match = value.trim().match(colorMixRegExp);
13-
const [, colorSpace, color1, pctStr1, color2, pctStr2] = match;
14-
15-
// optional percentages
16-
// - If one is provided, the other is 100 - that.
17-
// - If none is provided, default 50/50.
18-
let p1 = pctStr1 ? parseFloat(pctStr1) : NaN;
19-
let p2 = pctStr2 ? parseFloat(pctStr2) : NaN;
20-
21-
const bothMissing = Number.isNaN(p1) && Number.isNaN(p2);
22-
const onlyOneMissing = (!Number.isNaN(p1) && Number.isNaN(p2)) || (Number.isNaN(p1) && !Number.isNaN(p2));
23-
24-
if (bothMissing) {
25-
p1 = 50;
26-
p2 = 50;
27-
} else if (onlyOneMissing) {
28-
// e.g., color-mix(in oklab, black 20%, transparent)
29-
// or color-mix(in oklab, black, transparent 80%)
30-
if (!Number.isNaN(p1)) {
31-
p2 = 100 - p1;
32-
} else {
33-
p1 = 100 - p2;
34-
}
35-
}
36-
37-
const rgba1 = new Color(color1);
38-
const rgba2 = new Color(color2);
13+
const astComponentValue = parseComponentValue(tokenize({ css: value }));
14+
const colorData = color(astComponentValue);
3915

40-
const total = p1 + p2;
41-
const w1 = p1 / total;
42-
const w2 = p2 / total;
16+
let argb: number;
4317

44-
const mixedRgba = {
45-
r: rgba1.r * w1 + rgba2.r * w2,
46-
g: rgba1.g * w1 + rgba2.g * w2,
47-
b: rgba1.b * w1 + rgba2.b * w2,
48-
a: rgba1.a * w1 + rgba2.a * w2,
49-
};
18+
if (colorData) {
19+
const serialized = serializeRGB(colorData);
20+
argb = argbFromRgbOrRgba(serialized.toString());
21+
} else {
22+
argb = -1;
23+
}
5024

51-
return (mixedRgba.a & 0xff) * 0x01000000 + (mixedRgba.r & 0xff) * 0x00010000 + (mixedRgba.g & 0xff) * 0x00000100 + (mixedRgba.b & 0xff);
25+
return argb;
5226
}
5327

5428
export function fromArgbToRgba(argb: number): { a: number; r: number; g: number; b: number } {

‎packages/core/package.json

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -54,6 +54,9 @@
5454
},
5555
"dependencies": {
5656
"@csstools/css-calc": "~2.1.2",
57+
"@csstools/css-color-parser": "^3.0.8",
58+
"@csstools/css-parser-algorithms": "^3.0.4",
59+
"@csstools/css-tokenizer": "^3.0.3",
5760
"@nativescript/hook": "~2.0.0",
5861
"acorn": "^8.7.0",
5962
"css-tree": "^1.1.2",

‎packages/core/tsconfig.json

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,9 @@
22
"extends": "../../tsconfig.base.json",
33
"files": [],
44
"include": [],
5+
"compilerOptions": {
6+
"moduleResolution": "bundler"
7+
},
58
"references": [
69
{
710
"path": "./tsconfig.lib.json"

‎packages/core/ui/styling/css-color-mix.spec.ts

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -11,12 +11,12 @@ describe('css-color-mix', () => {
1111

1212
it('color-mix(in hsl, hsl(200 50 80), coral 80%)', () => {
1313
const color = new Color('color-mix(in hsl, hsl(200 50 80), coral 80%)');
14-
expect(color.toRgbString()).toBe('rgba(239, 144, 110, 1.00)');
14+
expect(color.toRgbString()).toBe('rgba(247, 103, 149, 1.00)');
1515
});
1616

1717
it('color-mix(in lch longer hue, hsl(200deg 50% 80%), coral)', () => {
1818
const color = new Color('color-mix(in lch longer hue, hsl(200deg 50% 80%), coral)');
19-
expect(color.toRgbString()).toBe('rgba(217, 169, 155, 1.00)');
19+
expect(color.toRgbString()).toBe('rgba(136, 202, 134, 1.00)');
2020
});
2121

2222
it('color-mix(in srgb, plum, #f00)', () => {
@@ -26,11 +26,11 @@ describe('css-color-mix', () => {
2626

2727
it('color-mix(in lab, plum 60%, #f00 50%)', () => {
2828
const color = new Color('color-mix(in lab, plum 60%, #f00 50%)');
29-
expect(color.toRgbString()).toBe('rgba(236, 87, 120, 1.00)');
29+
expect(color.toRgbString()).toBe('rgba(247, 112, 125, 1.00)');
3030
});
3131

3232
it('color-mix(in --swop5c, red, blue)', () => {
3333
const color = new Color('color-mix(in --swop5c, red, blue)');
34-
expect(color.toRgbString()).toBe('rgba(127, 0, 127, 1.00)');
34+
expect(color.toRgbString()).toBe('rgba(0, 0, 255, 0.00)');
3535
});
3636
});

‎packages/core/ui/styling/style-scope.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -63,7 +63,7 @@ const kebabCasePattern = /-([a-z])/g;
6363
const pattern = /('|")(.*?)\1/;
6464

6565
/**
66-
* Evaluate css-variable, css-calc, color-mix expressions
66+
* Evaluate css-variable and css-calc expressions
6767
*/
6868
function evaluateCssExpressions(view: ViewBase, property: string, value: string) {
6969
const newValue = _evaluateCssVariableExpression(view, property, value);

0 commit comments

Comments
 (0)
0