@tbela99/css-parser 0.2.0 → 0.4.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/{LICENSE → LICENSE.md} +1 -1
- package/README.md +250 -77
- package/dist/config.json.js +245 -1
- package/dist/index-umd-web.js +4241 -1583
- package/dist/index.cjs +4242 -1584
- package/dist/index.d.ts +71 -23
- package/dist/lib/ast/expand.js +1 -1
- package/dist/lib/ast/features/calc.js +31 -192
- package/dist/lib/ast/features/index.js +3 -3
- package/dist/lib/ast/features/inlinecssvariables.js +6 -6
- package/dist/lib/ast/features/shorthand.js +5 -6
- package/dist/lib/ast/math/expression.js +220 -0
- package/dist/lib/ast/{features/utils → math}/math.js +4 -4
- package/dist/lib/ast/minify.js +0 -1
- package/dist/lib/ast/types.js +31 -13
- package/dist/lib/ast/utils/minifyfeature.js +4 -3
- package/dist/lib/ast/walk.js +24 -4
- package/dist/lib/fs/resolve.js +4 -3
- package/dist/lib/parser/declaration/list.js +6 -2
- package/dist/lib/parser/declaration/map.js +158 -24
- package/dist/lib/parser/declaration/set.js +42 -22
- package/dist/lib/parser/parse.js +345 -349
- package/dist/lib/parser/tokenize.js +220 -223
- package/dist/lib/parser/utils/declaration.js +67 -0
- package/dist/lib/parser/utils/syntax.js +172 -6
- package/dist/lib/parser/utils/type.js +2 -2
- package/dist/lib/renderer/color/a98rgb.js +64 -0
- package/dist/lib/renderer/color/color.js +521 -0
- package/dist/lib/renderer/color/colormix.js +337 -0
- package/dist/lib/renderer/color/hex.js +92 -0
- package/dist/lib/renderer/color/hsl.js +118 -0
- package/dist/lib/renderer/color/hsv.js +20 -0
- package/dist/lib/renderer/color/hwb.js +101 -0
- package/dist/lib/renderer/color/lab.js +136 -0
- package/dist/lib/renderer/color/lch.js +79 -0
- package/dist/lib/renderer/color/oklab.js +121 -0
- package/dist/lib/renderer/color/oklch.js +65 -0
- package/dist/lib/renderer/color/p3.js +57 -0
- package/dist/lib/renderer/color/prophotorgb.js +56 -0
- package/dist/lib/renderer/color/rec2020.js +70 -0
- package/dist/lib/renderer/color/relativecolor.js +152 -0
- package/dist/lib/renderer/color/rgb.js +44 -0
- package/dist/lib/renderer/color/srgb.js +261 -0
- package/dist/lib/renderer/color/utils/components.js +20 -0
- package/dist/lib/renderer/color/utils/constants.js +191 -0
- package/dist/lib/renderer/color/utils/matrix.js +35 -0
- package/dist/lib/renderer/color/xyz.js +64 -0
- package/dist/lib/renderer/color/xyzd50.js +33 -0
- package/dist/lib/renderer/render.js +128 -30
- package/dist/node/index.js +1 -1
- package/dist/node/load.js +1 -1
- package/dist/web/index.js +1 -1
- package/package.json +19 -18
- package/quickjs.sh +1 -0
- package/dist/lib/iterable/weakmap.js +0 -53
- package/dist/lib/renderer/utils/color.js +0 -499
- /package/dist/lib/iterable/{set.js → weakset.js} +0 -0
|
@@ -0,0 +1,152 @@
|
|
|
1
|
+
import { convert, getNumber } from './color.js';
|
|
2
|
+
import { EnumToken } from '../../ast/types.js';
|
|
3
|
+
import '../../ast/minify.js';
|
|
4
|
+
import { walkValues } from '../../ast/walk.js';
|
|
5
|
+
import '../../parser/parse.js';
|
|
6
|
+
import { reduceNumber } from '../render.js';
|
|
7
|
+
import { colorRange } from './utils/constants.js';
|
|
8
|
+
import { eq } from '../../parser/utils/eq.js';
|
|
9
|
+
import { evaluate } from '../../ast/math/expression.js';
|
|
10
|
+
|
|
11
|
+
function parseRelativeColor(relativeKeys, original, rExp, gExp, bExp, aExp) {
|
|
12
|
+
let r;
|
|
13
|
+
let g;
|
|
14
|
+
let b;
|
|
15
|
+
let alpha = null;
|
|
16
|
+
let keys = {};
|
|
17
|
+
let values = {};
|
|
18
|
+
// colorFuncColorSpace x,y,z or r,g,b
|
|
19
|
+
const names = relativeKeys.startsWith('xyz') ? 'xyz' : relativeKeys.slice(-3);
|
|
20
|
+
// @ts-ignore
|
|
21
|
+
const converted = convert(original, relativeKeys);
|
|
22
|
+
if (converted == null) {
|
|
23
|
+
return null;
|
|
24
|
+
}
|
|
25
|
+
const children = converted.chi.filter(t => ![EnumToken.WhitespaceTokenType, EnumToken.LiteralTokenType, EnumToken.CommentTokenType].includes(t.typ));
|
|
26
|
+
[r, g, b, alpha] = converted.kin == 'color' ? children.slice(1) : children;
|
|
27
|
+
values = {
|
|
28
|
+
[names[0]]: getValue(r, converted, names[0]),
|
|
29
|
+
[names[1]]: getValue(g, converted, names[1]), // string,
|
|
30
|
+
[names[2]]: getValue(b, converted, names[2]),
|
|
31
|
+
// @ts-ignore
|
|
32
|
+
alpha: alpha == null || eq(alpha, {
|
|
33
|
+
typ: EnumToken.IdenTokenType,
|
|
34
|
+
val: 'none'
|
|
35
|
+
}) ? {
|
|
36
|
+
typ: EnumToken.NumberTokenType,
|
|
37
|
+
val: '1'
|
|
38
|
+
} : (alpha.typ == EnumToken.PercentageTokenType ? {
|
|
39
|
+
typ: EnumToken.NumberTokenType,
|
|
40
|
+
val: String(getNumber(alpha))
|
|
41
|
+
} : alpha)
|
|
42
|
+
};
|
|
43
|
+
keys = {
|
|
44
|
+
[names[0]]: getValue(rExp, converted, names[0]),
|
|
45
|
+
[names[1]]: getValue(gExp, converted, names[1]),
|
|
46
|
+
[names[2]]: getValue(bExp, converted, names[2]),
|
|
47
|
+
// @ts-ignore
|
|
48
|
+
alpha: getValue(aExp == null || eq(aExp, { typ: EnumToken.IdenTokenType, val: 'none' }) ? {
|
|
49
|
+
typ: EnumToken.NumberTokenType,
|
|
50
|
+
val: '1'
|
|
51
|
+
} : aExp)
|
|
52
|
+
};
|
|
53
|
+
return computeComponentValue(keys, values);
|
|
54
|
+
}
|
|
55
|
+
function getValue(t, converted, component) {
|
|
56
|
+
if (t == null) {
|
|
57
|
+
return t;
|
|
58
|
+
}
|
|
59
|
+
if (t.typ == EnumToken.PercentageTokenType) {
|
|
60
|
+
let value = getNumber(t);
|
|
61
|
+
if (converted.kin in colorRange) {
|
|
62
|
+
// @ts-ignore
|
|
63
|
+
value *= colorRange[converted.kin][component].at(-1);
|
|
64
|
+
}
|
|
65
|
+
return {
|
|
66
|
+
typ: EnumToken.NumberTokenType,
|
|
67
|
+
val: String(value)
|
|
68
|
+
};
|
|
69
|
+
}
|
|
70
|
+
return t;
|
|
71
|
+
}
|
|
72
|
+
function computeComponentValue(expr, values) {
|
|
73
|
+
for (const object of [values, expr]) {
|
|
74
|
+
if ('h' in object) {
|
|
75
|
+
// normalize hue
|
|
76
|
+
// @ts-ignore
|
|
77
|
+
for (const k of walkValues([object.h])) {
|
|
78
|
+
if (k.value.typ == EnumToken.AngleTokenType && k.value.unit == 'deg') {
|
|
79
|
+
// @ts-ignore
|
|
80
|
+
k.value.typ = EnumToken.NumberTokenType;
|
|
81
|
+
// @ts-ignore
|
|
82
|
+
delete k.value.unit;
|
|
83
|
+
}
|
|
84
|
+
}
|
|
85
|
+
}
|
|
86
|
+
}
|
|
87
|
+
for (const [key, exp] of Object.entries(expr)) {
|
|
88
|
+
if (exp == null) {
|
|
89
|
+
if (key in values) {
|
|
90
|
+
if (typeof values[key] == 'number') {
|
|
91
|
+
expr[key] = {
|
|
92
|
+
typ: EnumToken.NumberTokenType,
|
|
93
|
+
val: reduceNumber(values[key])
|
|
94
|
+
};
|
|
95
|
+
}
|
|
96
|
+
else {
|
|
97
|
+
expr[key] = values[key];
|
|
98
|
+
}
|
|
99
|
+
}
|
|
100
|
+
}
|
|
101
|
+
else if ([EnumToken.NumberTokenType, EnumToken.PercentageTokenType, EnumToken.AngleTokenType, EnumToken.LengthTokenType].includes(exp.typ)) ;
|
|
102
|
+
else if (exp.typ == EnumToken.IdenTokenType && exp.val in values) {
|
|
103
|
+
if (typeof values[exp.val] == 'number') {
|
|
104
|
+
expr[key] = {
|
|
105
|
+
typ: EnumToken.NumberTokenType,
|
|
106
|
+
val: reduceNumber(values[exp.val])
|
|
107
|
+
};
|
|
108
|
+
}
|
|
109
|
+
else {
|
|
110
|
+
expr[key] = values[exp.val];
|
|
111
|
+
}
|
|
112
|
+
}
|
|
113
|
+
else if (exp.typ == EnumToken.FunctionTokenType && exp.val == 'calc') {
|
|
114
|
+
for (let { value, parent } of walkValues(exp.chi)) {
|
|
115
|
+
if (value.typ == EnumToken.IdenTokenType) {
|
|
116
|
+
if (!(value.val in values)) {
|
|
117
|
+
return null;
|
|
118
|
+
}
|
|
119
|
+
if (parent == null) {
|
|
120
|
+
parent = exp;
|
|
121
|
+
}
|
|
122
|
+
if (parent.typ == EnumToken.BinaryExpressionTokenType) {
|
|
123
|
+
if (parent.l == value) {
|
|
124
|
+
parent.l = values[value.val];
|
|
125
|
+
}
|
|
126
|
+
else {
|
|
127
|
+
parent.r = values[value.val];
|
|
128
|
+
}
|
|
129
|
+
}
|
|
130
|
+
else {
|
|
131
|
+
for (let i = 0; i < parent.chi.length; i++) {
|
|
132
|
+
if (parent.chi[i] == value) {
|
|
133
|
+
parent.chi.splice(i, 1, values[value.val]);
|
|
134
|
+
break;
|
|
135
|
+
}
|
|
136
|
+
}
|
|
137
|
+
}
|
|
138
|
+
}
|
|
139
|
+
}
|
|
140
|
+
const result = evaluate(exp.chi);
|
|
141
|
+
if (result.length == 1 && result[0].typ != EnumToken.BinaryExpressionTokenType) {
|
|
142
|
+
expr[key] = result[0];
|
|
143
|
+
}
|
|
144
|
+
else {
|
|
145
|
+
return null;
|
|
146
|
+
}
|
|
147
|
+
}
|
|
148
|
+
}
|
|
149
|
+
return expr;
|
|
150
|
+
}
|
|
151
|
+
|
|
152
|
+
export { parseRelativeColor };
|
|
@@ -0,0 +1,44 @@
|
|
|
1
|
+
import { minmax } from './color.js';
|
|
2
|
+
import { COLORS_NAMES } from './utils/constants.js';
|
|
3
|
+
import '../../ast/types.js';
|
|
4
|
+
import '../../ast/minify.js';
|
|
5
|
+
import '../../parser/parse.js';
|
|
6
|
+
import { expandHexValue } from './hex.js';
|
|
7
|
+
import { hwb2srgb, hslvalues, hsl2srgbvalues, cmyk2srgb, oklab2srgb, oklch2srgb, lab2srgb, lch2srgb } from './srgb.js';
|
|
8
|
+
import '../sourcemap/lib/encode.js';
|
|
9
|
+
|
|
10
|
+
function srgb2rgb(value) {
|
|
11
|
+
return minmax(Math.round(value * 255), 0, 255);
|
|
12
|
+
}
|
|
13
|
+
function hex2rgb(token) {
|
|
14
|
+
const value = expandHexValue(token.kin == 'lit' ? COLORS_NAMES[token.val.toLowerCase()] : token.val);
|
|
15
|
+
const rgb = [];
|
|
16
|
+
for (let i = 1; i < value.length; i += 2) {
|
|
17
|
+
rgb.push(parseInt(value.slice(i, i + 2), 16));
|
|
18
|
+
}
|
|
19
|
+
return rgb;
|
|
20
|
+
}
|
|
21
|
+
function hwb2rgb(token) {
|
|
22
|
+
return hwb2srgb(token).map(srgb2rgb);
|
|
23
|
+
}
|
|
24
|
+
function hsl2rgb(token) {
|
|
25
|
+
let { h, s, l, a } = hslvalues(token);
|
|
26
|
+
return hsl2srgbvalues(h, s, l, a).map((t) => minmax(Math.round(t * 255), 0, 255));
|
|
27
|
+
}
|
|
28
|
+
function cmyk2rgb(token) {
|
|
29
|
+
return cmyk2srgb(token).map(srgb2rgb);
|
|
30
|
+
}
|
|
31
|
+
function oklab2rgb(token) {
|
|
32
|
+
return oklab2srgb(token).map(srgb2rgb);
|
|
33
|
+
}
|
|
34
|
+
function oklch2rgb(token) {
|
|
35
|
+
return oklch2srgb(token).map(srgb2rgb);
|
|
36
|
+
}
|
|
37
|
+
function lab2rgb(token) {
|
|
38
|
+
return lab2srgb(token).map(srgb2rgb);
|
|
39
|
+
}
|
|
40
|
+
function lch2rgb(token) {
|
|
41
|
+
return lch2srgb(token).map(srgb2rgb);
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
export { cmyk2rgb, hex2rgb, hsl2rgb, hwb2rgb, lab2rgb, lch2rgb, oklab2rgb, oklch2rgb, srgb2rgb };
|
|
@@ -0,0 +1,261 @@
|
|
|
1
|
+
import { COLORS_NAMES } from './utils/constants.js';
|
|
2
|
+
import { getComponents } from './utils/components.js';
|
|
3
|
+
import { color2srgbvalues, getNumber, getAngle } from './color.js';
|
|
4
|
+
import { EnumToken } from '../../ast/types.js';
|
|
5
|
+
import '../../ast/minify.js';
|
|
6
|
+
import '../../parser/parse.js';
|
|
7
|
+
import { expandHexValue } from './hex.js';
|
|
8
|
+
import { lch2labvalues, getLABComponents, Lab_to_sRGB } from './lab.js';
|
|
9
|
+
import { getOKLABComponents, OKLab_to_sRGB } from './oklab.js';
|
|
10
|
+
import { getLCHComponents } from './lch.js';
|
|
11
|
+
import { getOKLCHComponents } from './oklch.js';
|
|
12
|
+
import { XYZ_to_lin_sRGB } from './xyz.js';
|
|
13
|
+
import { eq } from '../../parser/utils/eq.js';
|
|
14
|
+
import '../sourcemap/lib/encode.js';
|
|
15
|
+
|
|
16
|
+
// from https://www.w3.org/TR/css-color-4/#color-conversion-code
|
|
17
|
+
// srgb-linear -> srgb
|
|
18
|
+
// 0 <= r, g, b <= 1
|
|
19
|
+
function srgbvalues(token) {
|
|
20
|
+
switch (token.kin) {
|
|
21
|
+
case 'lit':
|
|
22
|
+
case 'hex':
|
|
23
|
+
return hex2srgb(token);
|
|
24
|
+
case 'rgb':
|
|
25
|
+
case 'rgba':
|
|
26
|
+
return rgb2srgb(token);
|
|
27
|
+
case 'hsl':
|
|
28
|
+
case 'hsla':
|
|
29
|
+
return hsl2srgb(token);
|
|
30
|
+
case 'hwb':
|
|
31
|
+
return hwb2srgb(token);
|
|
32
|
+
case 'lab':
|
|
33
|
+
return lab2srgb(token);
|
|
34
|
+
case 'lch':
|
|
35
|
+
return lch2srgb(token);
|
|
36
|
+
case 'oklab':
|
|
37
|
+
return oklab2srgb(token);
|
|
38
|
+
case 'oklch':
|
|
39
|
+
return oklch2srgb(token);
|
|
40
|
+
case 'color':
|
|
41
|
+
return color2srgbvalues(token);
|
|
42
|
+
}
|
|
43
|
+
return null;
|
|
44
|
+
}
|
|
45
|
+
function rgb2srgb(token) {
|
|
46
|
+
return getComponents(token).map((t, index) => index == 3 ? (eq(t, {
|
|
47
|
+
typ: EnumToken.IdenTokenType,
|
|
48
|
+
val: 'none'
|
|
49
|
+
}) ? 1 : getNumber(t)) : (t.typ == EnumToken.PercentageTokenType ? 255 : 1) * getNumber(t) / 255);
|
|
50
|
+
}
|
|
51
|
+
function hex2srgb(token) {
|
|
52
|
+
const value = expandHexValue(token.kin == 'lit' ? COLORS_NAMES[token.val.toLowerCase()] : token.val);
|
|
53
|
+
const rgb = [];
|
|
54
|
+
for (let i = 1; i < value.length; i += 2) {
|
|
55
|
+
rgb.push(parseInt(value.slice(i, i + 2), 16) / 255);
|
|
56
|
+
}
|
|
57
|
+
return rgb;
|
|
58
|
+
}
|
|
59
|
+
function xyz2srgb(x, y, z) {
|
|
60
|
+
// @ts-ignore
|
|
61
|
+
return lsrgb2srgbvalues(...XYZ_to_lin_sRGB(x, y, z));
|
|
62
|
+
}
|
|
63
|
+
function hwb2srgb(token) {
|
|
64
|
+
const { h: hue, s: white, l: black, a: alpha } = hslvalues(token);
|
|
65
|
+
const rgb = hsl2srgbvalues(hue, 1, .5);
|
|
66
|
+
for (let i = 0; i < 3; i++) {
|
|
67
|
+
rgb[i] *= (1 - white - black);
|
|
68
|
+
rgb[i] = rgb[i] + white;
|
|
69
|
+
}
|
|
70
|
+
if (alpha != null && alpha != 1) {
|
|
71
|
+
rgb.push(alpha);
|
|
72
|
+
}
|
|
73
|
+
return rgb;
|
|
74
|
+
}
|
|
75
|
+
function hsl2srgb(token) {
|
|
76
|
+
let { h, s, l, a } = hslvalues(token);
|
|
77
|
+
return hsl2srgbvalues(h, s, l, a);
|
|
78
|
+
}
|
|
79
|
+
function cmyk2srgb(token) {
|
|
80
|
+
const components = getComponents(token);
|
|
81
|
+
// @ts-ignore
|
|
82
|
+
let t = components[0];
|
|
83
|
+
// @ts-ignore
|
|
84
|
+
const c = getNumber(t);
|
|
85
|
+
// @ts-ignore
|
|
86
|
+
t = components[1];
|
|
87
|
+
// @ts-ignore
|
|
88
|
+
const m = getNumber(t);
|
|
89
|
+
// @ts-ignore
|
|
90
|
+
t = components[2];
|
|
91
|
+
// @ts-ignore
|
|
92
|
+
const y = getNumber(t);
|
|
93
|
+
// @ts-ignore
|
|
94
|
+
t = components[3];
|
|
95
|
+
// @ts-ignore
|
|
96
|
+
const k = getNumber(t);
|
|
97
|
+
const rgb = [
|
|
98
|
+
1 - Math.min(1, c * (1 - k) + k),
|
|
99
|
+
1 - Math.min(1, m * (1 - k) + k),
|
|
100
|
+
1 - Math.min(1, y * (1 - k) + k)
|
|
101
|
+
];
|
|
102
|
+
// @ts-ignore
|
|
103
|
+
if (token.chi.length >= 9) {
|
|
104
|
+
// @ts-ignore
|
|
105
|
+
t = token.chi[8];
|
|
106
|
+
// @ts-ignore
|
|
107
|
+
rgb.push(getNumber(t));
|
|
108
|
+
}
|
|
109
|
+
return rgb;
|
|
110
|
+
}
|
|
111
|
+
function oklab2srgb(token) {
|
|
112
|
+
const [l, a, b, alpha] = getOKLABComponents(token);
|
|
113
|
+
const rgb = OKLab_to_sRGB(l, a, b);
|
|
114
|
+
if (alpha != null && alpha != 1) {
|
|
115
|
+
rgb.push(alpha);
|
|
116
|
+
}
|
|
117
|
+
return rgb;
|
|
118
|
+
}
|
|
119
|
+
function oklch2srgb(token) {
|
|
120
|
+
const [l, c, h, alpha] = getOKLCHComponents(token);
|
|
121
|
+
// @ts-ignore
|
|
122
|
+
const rgb = OKLab_to_sRGB(...lch2labvalues(l, c, h));
|
|
123
|
+
if (alpha != 1) {
|
|
124
|
+
rgb.push(alpha);
|
|
125
|
+
}
|
|
126
|
+
return rgb;
|
|
127
|
+
}
|
|
128
|
+
function hslvalues(token) {
|
|
129
|
+
const components = getComponents(token);
|
|
130
|
+
let t;
|
|
131
|
+
// @ts-ignore
|
|
132
|
+
let h = getAngle(components[0]);
|
|
133
|
+
// @ts-ignore
|
|
134
|
+
t = components[1];
|
|
135
|
+
// @ts-ignore
|
|
136
|
+
let s = getNumber(t);
|
|
137
|
+
// @ts-ignore
|
|
138
|
+
t = components[2];
|
|
139
|
+
// @ts-ignore
|
|
140
|
+
let l = getNumber(t);
|
|
141
|
+
let a = null;
|
|
142
|
+
if (token.chi?.length == 4) {
|
|
143
|
+
// @ts-ignore
|
|
144
|
+
t = token.chi[3];
|
|
145
|
+
// @ts-ignore
|
|
146
|
+
a = getNumber(t);
|
|
147
|
+
}
|
|
148
|
+
return a == null ? { h, s, l } : { h, s, l, a };
|
|
149
|
+
}
|
|
150
|
+
function hsl2srgbvalues(h, s, l, a = null) {
|
|
151
|
+
let v = l <= .5 ? l * (1.0 + s) : l + s - l * s;
|
|
152
|
+
let r = l;
|
|
153
|
+
let g = l;
|
|
154
|
+
let b = l;
|
|
155
|
+
if (v > 0) {
|
|
156
|
+
let m = l + l - v;
|
|
157
|
+
let sv = (v - m) / v;
|
|
158
|
+
h *= 6.0;
|
|
159
|
+
let sextant = Math.floor(h);
|
|
160
|
+
let fract = h - sextant;
|
|
161
|
+
let vsf = v * sv * fract;
|
|
162
|
+
let mid1 = m + vsf;
|
|
163
|
+
let mid2 = v - vsf;
|
|
164
|
+
switch (sextant) {
|
|
165
|
+
case 0:
|
|
166
|
+
r = v;
|
|
167
|
+
g = mid1;
|
|
168
|
+
b = m;
|
|
169
|
+
break;
|
|
170
|
+
case 1:
|
|
171
|
+
r = mid2;
|
|
172
|
+
g = v;
|
|
173
|
+
b = m;
|
|
174
|
+
break;
|
|
175
|
+
case 2:
|
|
176
|
+
r = m;
|
|
177
|
+
g = v;
|
|
178
|
+
b = mid1;
|
|
179
|
+
break;
|
|
180
|
+
case 3:
|
|
181
|
+
r = m;
|
|
182
|
+
g = mid2;
|
|
183
|
+
b = v;
|
|
184
|
+
break;
|
|
185
|
+
case 4:
|
|
186
|
+
r = mid1;
|
|
187
|
+
g = m;
|
|
188
|
+
b = v;
|
|
189
|
+
break;
|
|
190
|
+
case 5:
|
|
191
|
+
r = v;
|
|
192
|
+
g = m;
|
|
193
|
+
b = mid2;
|
|
194
|
+
break;
|
|
195
|
+
}
|
|
196
|
+
}
|
|
197
|
+
const values = [r, g, b];
|
|
198
|
+
if (a != null && a != 1) {
|
|
199
|
+
values.push(a);
|
|
200
|
+
}
|
|
201
|
+
return values;
|
|
202
|
+
}
|
|
203
|
+
function lab2srgb(token) {
|
|
204
|
+
const [l, a, b, alpha] = getLABComponents(token);
|
|
205
|
+
const rgb = Lab_to_sRGB(l, a, b);
|
|
206
|
+
if (alpha != null && alpha != 1) {
|
|
207
|
+
rgb.push(alpha);
|
|
208
|
+
}
|
|
209
|
+
return rgb;
|
|
210
|
+
}
|
|
211
|
+
function lch2srgb(token) {
|
|
212
|
+
// @ts-ignore
|
|
213
|
+
const [l, a, b, alpha] = lch2labvalues(...getLCHComponents(token));
|
|
214
|
+
// https://www.w3.org/TR/css-color-4/#lab-to-lch
|
|
215
|
+
const rgb = Lab_to_sRGB(l, a, b);
|
|
216
|
+
if (alpha != 1) {
|
|
217
|
+
rgb.push(alpha);
|
|
218
|
+
}
|
|
219
|
+
return rgb;
|
|
220
|
+
}
|
|
221
|
+
// sRGB -> lRGB
|
|
222
|
+
function srgb2lsrgbvalues(r, g, b, a = null) {
|
|
223
|
+
// convert an array of linear-light sRGB values in the range 0.0-1.0
|
|
224
|
+
// to gamma corrected form
|
|
225
|
+
// https://en.wikipedia.org/wiki/SRGB
|
|
226
|
+
// Extended transfer function:
|
|
227
|
+
// For negative values, linear portion extends on reflection
|
|
228
|
+
// of axis, then uses reflected pow below that
|
|
229
|
+
const rgb = [r, g, b].map((val) => {
|
|
230
|
+
const abs = Math.abs(val);
|
|
231
|
+
if (abs <= 0.04045) {
|
|
232
|
+
return val / 12.92;
|
|
233
|
+
}
|
|
234
|
+
return (Math.sign(val) || 1) * Math.pow((abs + 0.055) / 1.055, 2.4);
|
|
235
|
+
});
|
|
236
|
+
if (a != 1 && a != null) {
|
|
237
|
+
rgb.push(a);
|
|
238
|
+
}
|
|
239
|
+
return rgb;
|
|
240
|
+
}
|
|
241
|
+
function lsrgb2srgbvalues(r, g, b, alpha) {
|
|
242
|
+
// convert an array of linear-light sRGB values in the range 0.0-1.0
|
|
243
|
+
// to gamma corrected form
|
|
244
|
+
// https://en.wikipedia.org/wiki/SRGB
|
|
245
|
+
// Extended transfer function:
|
|
246
|
+
// For negative values, linear portion extends on reflection
|
|
247
|
+
// of axis, then uses reflected pow below that
|
|
248
|
+
const rgb = [r, g, b].map((val) => {
|
|
249
|
+
let abs = Math.abs(val);
|
|
250
|
+
if (Math.abs(val) > 0.0031308) {
|
|
251
|
+
return (Math.sign(val) || 1) * (1.055 * Math.pow(abs, 1 / 2.4) - 0.055);
|
|
252
|
+
}
|
|
253
|
+
return 12.92 * val;
|
|
254
|
+
});
|
|
255
|
+
if (alpha != 1 && alpha != null) {
|
|
256
|
+
rgb.push(alpha);
|
|
257
|
+
}
|
|
258
|
+
return rgb;
|
|
259
|
+
}
|
|
260
|
+
|
|
261
|
+
export { cmyk2srgb, hex2srgb, hsl2srgb, hsl2srgbvalues, hslvalues, hwb2srgb, lab2srgb, lch2srgb, lsrgb2srgbvalues, oklab2srgb, oklch2srgb, rgb2srgb, srgb2lsrgbvalues, srgbvalues, xyz2srgb };
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
import { EnumToken } from '../../../ast/types.js';
|
|
2
|
+
import '../../../ast/minify.js';
|
|
3
|
+
import '../../../parser/parse.js';
|
|
4
|
+
import { COLORS_NAMES } from './constants.js';
|
|
5
|
+
import { expandHexValue } from '../hex.js';
|
|
6
|
+
import '../../sourcemap/lib/encode.js';
|
|
7
|
+
|
|
8
|
+
function getComponents(token) {
|
|
9
|
+
if (token.kin == 'hex' || token.kin == 'lit') {
|
|
10
|
+
const value = expandHexValue(token.kin == 'lit' ? COLORS_NAMES[token.val.toLowerCase()] : token.val);
|
|
11
|
+
// @ts-ignore
|
|
12
|
+
return value.slice(1).match(/([a-fA-F0-9]{2})/g).map((t) => {
|
|
13
|
+
return { typ: EnumToken.Number, val: parseInt(t, 16).toString() };
|
|
14
|
+
});
|
|
15
|
+
}
|
|
16
|
+
return token.chi
|
|
17
|
+
.filter((t) => ![EnumToken.LiteralTokenType, EnumToken.CommentTokenType, EnumToken.CommaTokenType, EnumToken.WhitespaceTokenType].includes(t.typ));
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
export { getComponents };
|
|
@@ -0,0 +1,191 @@
|
|
|
1
|
+
import { EnumToken } from '../../../ast/types.js';
|
|
2
|
+
import '../../../ast/minify.js';
|
|
3
|
+
import '../../../parser/parse.js';
|
|
4
|
+
import '../../sourcemap/lib/encode.js';
|
|
5
|
+
|
|
6
|
+
const colorRange = {
|
|
7
|
+
lab: {
|
|
8
|
+
l: [0, 100],
|
|
9
|
+
a: [-125, 125],
|
|
10
|
+
b: [-125, 125]
|
|
11
|
+
},
|
|
12
|
+
lch: {
|
|
13
|
+
l: [0, 100],
|
|
14
|
+
c: [0, 150],
|
|
15
|
+
h: [0, 360]
|
|
16
|
+
},
|
|
17
|
+
oklab: {
|
|
18
|
+
l: [0, 1],
|
|
19
|
+
a: [-0.4, .4],
|
|
20
|
+
b: [-0.4, 0.4]
|
|
21
|
+
},
|
|
22
|
+
oklch: {
|
|
23
|
+
l: [0, 1],
|
|
24
|
+
a: [0, .4],
|
|
25
|
+
b: [0, 0.4]
|
|
26
|
+
}
|
|
27
|
+
};
|
|
28
|
+
const colorFuncColorSpace = ['srgb', 'srgb-linear', 'display-p3', 'prophoto-rgb', 'a98-rgb', 'rec2020', 'xyz', 'xyz-d65', 'xyz-d50'];
|
|
29
|
+
const powerlessColorComponent = { typ: EnumToken.IdenTokenType, val: 'none' };
|
|
30
|
+
const D50 = [0.3457 / 0.3585, 1.00000, (1.0 - 0.3457 - 0.3585) / 0.3585];
|
|
31
|
+
const k = Math.pow(29, 3) / Math.pow(3, 3);
|
|
32
|
+
const e = Math.pow(6, 3) / Math.pow(29, 3);
|
|
33
|
+
// name to color
|
|
34
|
+
const COLORS_NAMES = Object.seal({
|
|
35
|
+
'aliceblue': '#f0f8ff',
|
|
36
|
+
'antiquewhite': '#faebd7',
|
|
37
|
+
'aqua': '#00ffff',
|
|
38
|
+
'aquamarine': '#7fffd4',
|
|
39
|
+
'azure': '#f0ffff',
|
|
40
|
+
'beige': '#f5f5dc',
|
|
41
|
+
'bisque': '#ffe4c4',
|
|
42
|
+
'black': '#000000',
|
|
43
|
+
'blanchedalmond': '#ffebcd',
|
|
44
|
+
'blue': '#0000ff',
|
|
45
|
+
'blueviolet': '#8a2be2',
|
|
46
|
+
'brown': '#a52a2a',
|
|
47
|
+
'burlywood': '#deb887',
|
|
48
|
+
'cadetblue': '#5f9ea0',
|
|
49
|
+
'chartreuse': '#7fff00',
|
|
50
|
+
'chocolate': '#d2691e',
|
|
51
|
+
'coral': '#ff7f50',
|
|
52
|
+
'cornflowerblue': '#6495ed',
|
|
53
|
+
'cornsilk': '#fff8dc',
|
|
54
|
+
'crimson': '#dc143c',
|
|
55
|
+
'cyan': '#00ffff',
|
|
56
|
+
'darkblue': '#00008b',
|
|
57
|
+
'darkcyan': '#008b8b',
|
|
58
|
+
'darkgoldenrod': '#b8860b',
|
|
59
|
+
'darkgray': '#a9a9a9',
|
|
60
|
+
'darkgrey': '#a9a9a9',
|
|
61
|
+
'darkgreen': '#006400',
|
|
62
|
+
'darkkhaki': '#bdb76b',
|
|
63
|
+
'darkmagenta': '#8b008b',
|
|
64
|
+
'darkolivegreen': '#556b2f',
|
|
65
|
+
'darkorange': '#ff8c00',
|
|
66
|
+
'darkorchid': '#9932cc',
|
|
67
|
+
'darkred': '#8b0000',
|
|
68
|
+
'darksalmon': '#e9967a',
|
|
69
|
+
'darkseagreen': '#8fbc8f',
|
|
70
|
+
'darkslateblue': '#483d8b',
|
|
71
|
+
'darkslategray': '#2f4f4f',
|
|
72
|
+
'darkslategrey': '#2f4f4f',
|
|
73
|
+
'darkturquoise': '#00ced1',
|
|
74
|
+
'darkviolet': '#9400d3',
|
|
75
|
+
'deeppink': '#ff1493',
|
|
76
|
+
'deepskyblue': '#00bfff',
|
|
77
|
+
'dimgray': '#696969',
|
|
78
|
+
'dimgrey': '#696969',
|
|
79
|
+
'dodgerblue': '#1e90ff',
|
|
80
|
+
'firebrick': '#b22222',
|
|
81
|
+
'floralwhite': '#fffaf0',
|
|
82
|
+
'forestgreen': '#228b22',
|
|
83
|
+
'fuchsia': '#ff00ff',
|
|
84
|
+
'gainsboro': '#dcdcdc',
|
|
85
|
+
'ghostwhite': '#f8f8ff',
|
|
86
|
+
'gold': '#ffd700',
|
|
87
|
+
'goldenrod': '#daa520',
|
|
88
|
+
'gray': '#808080',
|
|
89
|
+
'grey': '#808080',
|
|
90
|
+
'green': '#008000',
|
|
91
|
+
'greenyellow': '#adff2f',
|
|
92
|
+
'honeydew': '#f0fff0',
|
|
93
|
+
'hotpink': '#ff69b4',
|
|
94
|
+
'indianred': '#cd5c5c',
|
|
95
|
+
'indigo': '#4b0082',
|
|
96
|
+
'ivory': '#fffff0',
|
|
97
|
+
'khaki': '#f0e68c',
|
|
98
|
+
'lavender': '#e6e6fa',
|
|
99
|
+
'lavenderblush': '#fff0f5',
|
|
100
|
+
'lawngreen': '#7cfc00',
|
|
101
|
+
'lemonchiffon': '#fffacd',
|
|
102
|
+
'lightblue': '#add8e6',
|
|
103
|
+
'lightcoral': '#f08080',
|
|
104
|
+
'lightcyan': '#e0ffff',
|
|
105
|
+
'lightgoldenrodyellow': '#fafad2',
|
|
106
|
+
'lightgray': '#d3d3d3',
|
|
107
|
+
'lightgrey': '#d3d3d3',
|
|
108
|
+
'lightgreen': '#90ee90',
|
|
109
|
+
'lightpink': '#ffb6c1',
|
|
110
|
+
'lightsalmon': '#ffa07a',
|
|
111
|
+
'lightseagreen': '#20b2aa',
|
|
112
|
+
'lightskyblue': '#87cefa',
|
|
113
|
+
'lightslategray': '#778899',
|
|
114
|
+
'lightslategrey': '#778899',
|
|
115
|
+
'lightsteelblue': '#b0c4de',
|
|
116
|
+
'lightyellow': '#ffffe0',
|
|
117
|
+
'lime': '#00ff00',
|
|
118
|
+
'limegreen': '#32cd32',
|
|
119
|
+
'linen': '#faf0e6',
|
|
120
|
+
'magenta': '#ff00ff',
|
|
121
|
+
'maroon': '#800000',
|
|
122
|
+
'mediumaquamarine': '#66cdaa',
|
|
123
|
+
'mediumblue': '#0000cd',
|
|
124
|
+
'mediumorchid': '#ba55d3',
|
|
125
|
+
'mediumpurple': '#9370d8',
|
|
126
|
+
'mediumseagreen': '#3cb371',
|
|
127
|
+
'mediumslateblue': '#7b68ee',
|
|
128
|
+
'mediumspringgreen': '#00fa9a',
|
|
129
|
+
'mediumturquoise': '#48d1cc',
|
|
130
|
+
'mediumvioletred': '#c71585',
|
|
131
|
+
'midnightblue': '#191970',
|
|
132
|
+
'mintcream': '#f5fffa',
|
|
133
|
+
'mistyrose': '#ffe4e1',
|
|
134
|
+
'moccasin': '#ffe4b5',
|
|
135
|
+
'navajowhite': '#ffdead',
|
|
136
|
+
'navy': '#000080',
|
|
137
|
+
'oldlace': '#fdf5e6',
|
|
138
|
+
'olive': '#808000',
|
|
139
|
+
'olivedrab': '#6b8e23',
|
|
140
|
+
'orange': '#ffa500',
|
|
141
|
+
'orangered': '#ff4500',
|
|
142
|
+
'orchid': '#da70d6',
|
|
143
|
+
'palegoldenrod': '#eee8aa',
|
|
144
|
+
'palegreen': '#98fb98',
|
|
145
|
+
'paleturquoise': '#afeeee',
|
|
146
|
+
'palevioletred': '#d87093',
|
|
147
|
+
'papayawhip': '#ffefd5',
|
|
148
|
+
'peachpuff': '#ffdab9',
|
|
149
|
+
'peru': '#cd853f',
|
|
150
|
+
'pink': '#ffc0cb',
|
|
151
|
+
'plum': '#dda0dd',
|
|
152
|
+
'powderblue': '#b0e0e6',
|
|
153
|
+
'purple': '#800080',
|
|
154
|
+
'red': '#ff0000',
|
|
155
|
+
'rosybrown': '#bc8f8f',
|
|
156
|
+
'royalblue': '#4169e1',
|
|
157
|
+
'saddlebrown': '#8b4513',
|
|
158
|
+
'salmon': '#fa8072',
|
|
159
|
+
'sandybrown': '#f4a460',
|
|
160
|
+
'seagreen': '#2e8b57',
|
|
161
|
+
'seashell': '#fff5ee',
|
|
162
|
+
'sienna': '#a0522d',
|
|
163
|
+
'silver': '#c0c0c0',
|
|
164
|
+
'skyblue': '#87ceeb',
|
|
165
|
+
'slateblue': '#6a5acd',
|
|
166
|
+
'slategray': '#708090',
|
|
167
|
+
'slategrey': '#708090',
|
|
168
|
+
'snow': '#fffafa',
|
|
169
|
+
'springgreen': '#00ff7f',
|
|
170
|
+
'steelblue': '#4682b4',
|
|
171
|
+
'tan': '#d2b48c',
|
|
172
|
+
'teal': '#008080',
|
|
173
|
+
'thistle': '#d8bfd8',
|
|
174
|
+
'tomato': '#ff6347',
|
|
175
|
+
'turquoise': '#40e0d0',
|
|
176
|
+
'violet': '#ee82ee',
|
|
177
|
+
'wheat': '#f5deb3',
|
|
178
|
+
'white': '#ffffff',
|
|
179
|
+
'whitesmoke': '#f5f5f5',
|
|
180
|
+
'yellow': '#ffff00',
|
|
181
|
+
'yellowgreen': '#9acd32',
|
|
182
|
+
'rebeccapurple': '#663399',
|
|
183
|
+
'transparent': '#00000000'
|
|
184
|
+
});
|
|
185
|
+
// color to name
|
|
186
|
+
const NAMES_COLORS = Object.seal(Object.entries(COLORS_NAMES).reduce((acc, [key, value]) => {
|
|
187
|
+
acc[value] = key;
|
|
188
|
+
return acc;
|
|
189
|
+
}, Object.create(null)));
|
|
190
|
+
|
|
191
|
+
export { COLORS_NAMES, D50, NAMES_COLORS, colorFuncColorSpace, colorRange, e, k, powerlessColorComponent };
|