@tbela99/css-parser 1.1.1 → 1.2.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/CHANGELOG.md +6 -0
- package/README.md +53 -6
- package/dist/index-umd-web.js +4195 -3363
- package/dist/index.cjs +4199 -3367
- package/dist/index.d.ts +42 -31
- package/dist/lib/ast/expand.js +81 -65
- package/dist/lib/ast/features/calc.js +37 -35
- package/dist/lib/ast/features/inlinecssvariables.js +25 -17
- package/dist/lib/ast/features/prefix.js +22 -19
- package/dist/lib/ast/features/shorthand.js +1 -1
- package/dist/lib/ast/features/transform.js +17 -2
- package/dist/lib/ast/math/expression.js +184 -159
- package/dist/lib/ast/math/math.js +22 -20
- package/dist/lib/ast/minify.js +249 -199
- package/dist/lib/ast/transform/compute.js +48 -38
- package/dist/lib/ast/transform/matrix.js +6 -5
- package/dist/lib/ast/transform/minify.js +31 -34
- package/dist/lib/ast/transform/utils.js +76 -16
- package/dist/lib/ast/types.js +32 -1
- package/dist/lib/fs/resolve.js +1 -14
- package/dist/lib/parser/declaration/list.js +1 -1
- package/dist/lib/parser/declaration/map.js +1 -1
- package/dist/lib/parser/declaration/set.js +1 -1
- package/dist/lib/parser/parse.js +19 -95
- package/dist/lib/parser/tokenize.js +1 -13
- package/dist/lib/parser/utils/declaration.js +1 -1
- package/dist/lib/parser/utils/type.js +1 -1
- package/dist/lib/renderer/render.js +44 -168
- package/dist/lib/{renderer → syntax}/color/a98rgb.js +2 -2
- package/dist/lib/syntax/color/cmyk.js +104 -0
- package/dist/lib/{renderer → syntax}/color/color-mix.js +20 -21
- package/dist/lib/syntax/color/color.js +581 -0
- package/dist/lib/syntax/color/hex.js +179 -0
- package/dist/lib/syntax/color/hsl.js +201 -0
- package/dist/lib/syntax/color/hwb.js +185 -0
- package/dist/lib/syntax/color/lab.js +262 -0
- package/dist/lib/syntax/color/lch.js +194 -0
- package/dist/lib/syntax/color/oklab.js +237 -0
- package/dist/lib/syntax/color/oklch.js +166 -0
- package/dist/lib/{renderer → syntax}/color/p3.js +3 -3
- package/dist/lib/{renderer → syntax}/color/rec2020.js +11 -11
- package/dist/lib/{renderer → syntax}/color/relativecolor.js +53 -40
- package/dist/lib/syntax/color/rgb.js +140 -0
- package/dist/lib/{renderer → syntax}/color/srgb.js +58 -46
- package/dist/lib/{renderer → syntax}/color/utils/components.js +7 -7
- package/dist/lib/{renderer → syntax}/color/utils/constants.js +6 -33
- package/dist/lib/syntax/color/utils/distance.js +30 -0
- package/dist/lib/{renderer → syntax}/color/xyz.js +27 -14
- package/dist/lib/{renderer → syntax}/color/xyzd50.js +8 -8
- package/dist/lib/syntax/syntax.js +77 -67
- package/dist/lib/syntax/utils.js +70 -0
- package/dist/lib/validation/at-rules/container.js +1 -1
- package/dist/lib/validation/at-rules/counter-style.js +1 -1
- package/dist/lib/validation/at-rules/custom-media.js +1 -1
- package/dist/lib/validation/at-rules/document.js +1 -1
- package/dist/lib/validation/at-rules/font-feature-values.js +2 -2
- package/dist/lib/validation/at-rules/import.js +1 -1
- package/dist/lib/validation/at-rules/keyframes.js +14 -13
- package/dist/lib/validation/at-rules/layer.js +1 -1
- package/dist/lib/validation/at-rules/media.js +1 -1
- package/dist/lib/validation/at-rules/namespace.js +1 -1
- package/dist/lib/validation/at-rules/page-margin-box.js +1 -1
- package/dist/lib/validation/at-rules/page.js +1 -1
- package/dist/lib/validation/at-rules/supports.js +1 -1
- package/dist/lib/validation/at-rules/when.js +1 -1
- package/dist/lib/validation/atrule.js +2 -2
- package/dist/lib/validation/config.js +4 -3
- package/dist/lib/validation/config.json.js +1 -1
- package/dist/lib/validation/parser/parse.js +12 -7
- package/dist/lib/validation/selector.js +9 -8
- package/dist/lib/validation/syntax.js +170 -120
- package/dist/lib/validation/syntaxes/complex-selector-list.js +13 -19
- package/dist/lib/validation/syntaxes/complex-selector.js +1 -1
- package/dist/lib/validation/syntaxes/compound-selector.js +5 -24
- package/dist/lib/validation/syntaxes/family-name.js +36 -39
- package/dist/lib/validation/syntaxes/keyframe-selector.js +14 -22
- package/dist/lib/validation/syntaxes/layer-name.js +1 -1
- package/dist/lib/validation/syntaxes/relative-selector-list.js +27 -25
- package/dist/lib/validation/syntaxes/relative-selector.js +1 -1
- package/dist/lib/validation/syntaxes/url.js +35 -33
- package/dist/lib/validation/utils/list.js +10 -9
- package/dist/lib/validation/utils/whitespace.js +1 -1
- package/dist/node/index.js +4 -2
- package/dist/web/index.js +4 -2
- package/package.json +4 -4
- package/.editorconfig +0 -484
- package/dist/lib/ast/transform/convert.js +0 -33
- package/dist/lib/ast/utils/utils.js +0 -104
- package/dist/lib/renderer/color/color.js +0 -654
- package/dist/lib/renderer/color/hex.js +0 -105
- package/dist/lib/renderer/color/hsl.js +0 -125
- package/dist/lib/renderer/color/hwb.js +0 -103
- package/dist/lib/renderer/color/lab.js +0 -148
- package/dist/lib/renderer/color/lch.js +0 -90
- package/dist/lib/renderer/color/oklab.js +0 -131
- package/dist/lib/renderer/color/oklch.js +0 -75
- package/dist/lib/renderer/color/rgb.js +0 -50
- package/dist/lib/validation/syntaxes/keyframe-block-list.js +0 -28
- package/dist/lib/{renderer → syntax}/color/hsv.js +0 -0
- package/dist/lib/{renderer → syntax}/color/prophotorgb.js +1 -1
- /package/dist/lib/{renderer → syntax}/color/utils/matrix.js +0 -0
|
@@ -0,0 +1,262 @@
|
|
|
1
|
+
import { e, k, D50 } from './utils/constants.js';
|
|
2
|
+
import { getComponents } from './utils/components.js';
|
|
3
|
+
import { color2srgbvalues, getNumber } from './color.js';
|
|
4
|
+
import { getOKLABComponents, OKLab_to_XYZ } from './oklab.js';
|
|
5
|
+
import { EnumToken, ColorType } from '../../ast/types.js';
|
|
6
|
+
import '../../ast/minify.js';
|
|
7
|
+
import '../../ast/walk.js';
|
|
8
|
+
import '../../parser/parse.js';
|
|
9
|
+
import '../../parser/tokenize.js';
|
|
10
|
+
import '../../parser/utils/config.js';
|
|
11
|
+
import { oklch2srgbvalues, cmyk2srgbvalues, hwb2srgbvalues, hsl2srgb, rgb2srgb, hex2srgbvalues, xyz2srgb } from './srgb.js';
|
|
12
|
+
import { getLCHComponents } from './lch.js';
|
|
13
|
+
import { srgb2xyz_d50, XYZ_D50_to_D65 } from './xyz.js';
|
|
14
|
+
import { XYZ_D65_to_D50 } from './xyzd50.js';
|
|
15
|
+
import '../../renderer/sourcemap/lib/encode.js';
|
|
16
|
+
|
|
17
|
+
function hex2labToken(token) {
|
|
18
|
+
const values = hex2labvalues(token);
|
|
19
|
+
return values == null ? null : labToken(values);
|
|
20
|
+
}
|
|
21
|
+
function rgb2labToken(token) {
|
|
22
|
+
const values = rgb2labvalues(token);
|
|
23
|
+
if (values == null) {
|
|
24
|
+
return null;
|
|
25
|
+
}
|
|
26
|
+
return labToken(values);
|
|
27
|
+
}
|
|
28
|
+
function hsl2labToken(token) {
|
|
29
|
+
const values = hsl2labvalues(token);
|
|
30
|
+
if (values == null) {
|
|
31
|
+
return null;
|
|
32
|
+
}
|
|
33
|
+
return labToken(values);
|
|
34
|
+
}
|
|
35
|
+
function hwb2labToken(token) {
|
|
36
|
+
const values = hwb2labvalues(token);
|
|
37
|
+
if (values == null) {
|
|
38
|
+
return null;
|
|
39
|
+
}
|
|
40
|
+
return labToken(values);
|
|
41
|
+
}
|
|
42
|
+
function cmyk2labToken(token) {
|
|
43
|
+
const values = cmyk2labvalues(token);
|
|
44
|
+
if (values == null) {
|
|
45
|
+
return null;
|
|
46
|
+
}
|
|
47
|
+
return labToken(values);
|
|
48
|
+
}
|
|
49
|
+
function lch2labToken(token) {
|
|
50
|
+
const values = lch2labvalues(token);
|
|
51
|
+
if (values == null) {
|
|
52
|
+
return null;
|
|
53
|
+
}
|
|
54
|
+
return labToken(values);
|
|
55
|
+
}
|
|
56
|
+
function oklab2labToken(token) {
|
|
57
|
+
const values = oklab2labvalues(token);
|
|
58
|
+
if (values == null) {
|
|
59
|
+
return null;
|
|
60
|
+
}
|
|
61
|
+
return labToken(values);
|
|
62
|
+
}
|
|
63
|
+
function oklch2labToken(token) {
|
|
64
|
+
const values = oklch2labvalues(token);
|
|
65
|
+
if (values == null) {
|
|
66
|
+
return null;
|
|
67
|
+
}
|
|
68
|
+
return labToken(values);
|
|
69
|
+
}
|
|
70
|
+
function color2labToken(token) {
|
|
71
|
+
const values = color2labvalues(token);
|
|
72
|
+
if (values == null) {
|
|
73
|
+
return null;
|
|
74
|
+
}
|
|
75
|
+
return labToken(values);
|
|
76
|
+
}
|
|
77
|
+
function labToken(values) {
|
|
78
|
+
const chi = [
|
|
79
|
+
{ typ: EnumToken.NumberTokenType, val: String(values[0]) },
|
|
80
|
+
{ typ: EnumToken.NumberTokenType, val: String(values[1]) },
|
|
81
|
+
{ typ: EnumToken.NumberTokenType, val: String(values[2]) },
|
|
82
|
+
];
|
|
83
|
+
if (values.length == 4) {
|
|
84
|
+
chi.push({ typ: EnumToken.LiteralTokenType, val: '/' }, {
|
|
85
|
+
typ: EnumToken.PercentageTokenType,
|
|
86
|
+
val: (values[3] * 100).toFixed()
|
|
87
|
+
});
|
|
88
|
+
}
|
|
89
|
+
return {
|
|
90
|
+
typ: EnumToken.ColorTokenType,
|
|
91
|
+
val: 'lab',
|
|
92
|
+
chi,
|
|
93
|
+
kin: ColorType.LAB
|
|
94
|
+
};
|
|
95
|
+
}
|
|
96
|
+
// L: 0% = 0.0, 100% = 100.0
|
|
97
|
+
// for a and b: -100% = -125, 100% = 125
|
|
98
|
+
function hex2labvalues(token) {
|
|
99
|
+
const values = hex2srgbvalues(token);
|
|
100
|
+
// @ts-ignore
|
|
101
|
+
return values == null ? null : srgb2labvalues(...values);
|
|
102
|
+
}
|
|
103
|
+
function rgb2labvalues(token) {
|
|
104
|
+
const values = rgb2srgb(token);
|
|
105
|
+
// @ts-ignore
|
|
106
|
+
return values == null ? null : srgb2labvalues(...values);
|
|
107
|
+
}
|
|
108
|
+
function cmyk2labvalues(token) {
|
|
109
|
+
const values = cmyk2srgbvalues(token);
|
|
110
|
+
// @ts-ignore
|
|
111
|
+
return values == null ? null : srgb2labvalues(...values);
|
|
112
|
+
}
|
|
113
|
+
function hsl2labvalues(token) {
|
|
114
|
+
const values = hsl2srgb(token);
|
|
115
|
+
if (values == null) {
|
|
116
|
+
return null;
|
|
117
|
+
}
|
|
118
|
+
// @ts-ignore
|
|
119
|
+
return srgb2labvalues(...values);
|
|
120
|
+
}
|
|
121
|
+
function hwb2labvalues(token) {
|
|
122
|
+
const values = hwb2srgbvalues(token);
|
|
123
|
+
if (values == null) {
|
|
124
|
+
return null;
|
|
125
|
+
}
|
|
126
|
+
// @ts-ignore
|
|
127
|
+
return srgb2labvalues(...values);
|
|
128
|
+
}
|
|
129
|
+
function lch2labvalues(token) {
|
|
130
|
+
const values = getLCHComponents(token);
|
|
131
|
+
// @ts-ignore
|
|
132
|
+
return values == null ? null : lchvalues2labvalues(...values);
|
|
133
|
+
}
|
|
134
|
+
function oklab2labvalues(token) {
|
|
135
|
+
const values = getOKLABComponents(token);
|
|
136
|
+
if (values == null) {
|
|
137
|
+
return null;
|
|
138
|
+
}
|
|
139
|
+
// @ts-ignore
|
|
140
|
+
return xyz2lab(...XYZ_D65_to_D50(...OKLab_to_XYZ(...values)));
|
|
141
|
+
}
|
|
142
|
+
function oklch2labvalues(token) {
|
|
143
|
+
const values = oklch2srgbvalues(token);
|
|
144
|
+
if (values == null) {
|
|
145
|
+
return null;
|
|
146
|
+
}
|
|
147
|
+
// @ts-ignore
|
|
148
|
+
return srgb2labvalues(...values);
|
|
149
|
+
}
|
|
150
|
+
function color2labvalues(token) {
|
|
151
|
+
const val = color2srgbvalues(token);
|
|
152
|
+
if (val == null) {
|
|
153
|
+
return null;
|
|
154
|
+
}
|
|
155
|
+
// @ts-ignore
|
|
156
|
+
return srgb2labvalues(...val);
|
|
157
|
+
}
|
|
158
|
+
function srgb2labvalues(r, g, b, a) {
|
|
159
|
+
// @ts-ignore */
|
|
160
|
+
const result = xyz2lab(...srgb2xyz_d50(r, g, b));
|
|
161
|
+
// Fixes achromatic RGB colors having a _slight_ chroma due to floating-point errors
|
|
162
|
+
// and approximated computations in sRGB <-> CIELab.
|
|
163
|
+
// See: https://github.com/d3/d3-color/pull/46
|
|
164
|
+
if (r === b && b === g) {
|
|
165
|
+
result[1] = result[2] = 0;
|
|
166
|
+
}
|
|
167
|
+
if (a != null) {
|
|
168
|
+
result.push(a);
|
|
169
|
+
}
|
|
170
|
+
return result;
|
|
171
|
+
}
|
|
172
|
+
function xyz2lab(x, y, z, a = null) {
|
|
173
|
+
// Assuming XYZ is relative to D50, convert to CIE Lab
|
|
174
|
+
// from CIE standard, which now defines these as a rational fraction
|
|
175
|
+
// var e = 216/24389; // 6^3/29^3
|
|
176
|
+
// var k = 24389/27; // 29^3/3^3
|
|
177
|
+
// compute xyz, which is XYZ scaled relative to reference white
|
|
178
|
+
const xyz = [x, y, z].map((value, i) => value / D50[i]);
|
|
179
|
+
// now compute f
|
|
180
|
+
const f = xyz.map((value) => value > e ? Math.cbrt(value) : (k * value + 16) / 116);
|
|
181
|
+
const result = [
|
|
182
|
+
(116 * f[1]) - 16, // L
|
|
183
|
+
500 * (f[0] - f[1]), // a
|
|
184
|
+
200 * (f[1] - f[2]) // b
|
|
185
|
+
];
|
|
186
|
+
// L in range [0,100]. For use in CSS, add a percent
|
|
187
|
+
if (a != null && a != 1) {
|
|
188
|
+
result.push(a);
|
|
189
|
+
}
|
|
190
|
+
return result;
|
|
191
|
+
}
|
|
192
|
+
function lchvalues2labvalues(l, c, h, a = null) {
|
|
193
|
+
// l, c * Math.cos(360 * h * Math.PI / 180), c * Math.sin(360 * h * Math.PI / 180
|
|
194
|
+
const result = [l, c * Math.cos(h * Math.PI / 180), c * Math.sin(h * Math.PI / 180)];
|
|
195
|
+
if (a != null) {
|
|
196
|
+
result.push(a);
|
|
197
|
+
}
|
|
198
|
+
return result;
|
|
199
|
+
}
|
|
200
|
+
function getLABComponents(token) {
|
|
201
|
+
const components = getComponents(token);
|
|
202
|
+
if (components == null) {
|
|
203
|
+
return null;
|
|
204
|
+
}
|
|
205
|
+
for (let i = 0; i < components.length; i++) {
|
|
206
|
+
if (![EnumToken.NumberTokenType, EnumToken.PercentageTokenType, EnumToken.AngleTokenType, EnumToken.IdenTokenType].includes(components[i].typ)) {
|
|
207
|
+
return null;
|
|
208
|
+
}
|
|
209
|
+
}
|
|
210
|
+
// @ts-ignore
|
|
211
|
+
let t = components[0];
|
|
212
|
+
// @ts-ignore
|
|
213
|
+
const l = getNumber(t) * (t.typ == EnumToken.PercentageTokenType ? 100 : 1);
|
|
214
|
+
// @ts-ignore
|
|
215
|
+
t = components[1];
|
|
216
|
+
// @ts-ignore
|
|
217
|
+
const a = getNumber(t) * (t.typ == EnumToken.PercentageTokenType ? 125 : 1);
|
|
218
|
+
// @ts-ignore
|
|
219
|
+
t = components[2];
|
|
220
|
+
// @ts-ignore
|
|
221
|
+
const b = getNumber(t) * (t.typ == EnumToken.PercentageTokenType ? 125 : 1);
|
|
222
|
+
// @ts-ignore
|
|
223
|
+
t = components[3];
|
|
224
|
+
// @ts-ignore
|
|
225
|
+
const alpha = t == null ? 1 : getNumber(t);
|
|
226
|
+
const result = [l, a, b];
|
|
227
|
+
if (alpha != null && alpha != 1) {
|
|
228
|
+
result.push(alpha);
|
|
229
|
+
}
|
|
230
|
+
return result;
|
|
231
|
+
}
|
|
232
|
+
// from https://www.w3.org/TR/css-color-4/#color-conversion-code
|
|
233
|
+
// D50 LAB
|
|
234
|
+
function Lab_to_sRGB(l, a, b) {
|
|
235
|
+
const xyz_d50 = Lab_to_XYZ(l, a, b);
|
|
236
|
+
// @ts-ignore
|
|
237
|
+
const xyz_d65 = XYZ_D50_to_D65(...xyz_d50);
|
|
238
|
+
// @ts-ignore
|
|
239
|
+
return xyz2srgb(...xyz_d65);
|
|
240
|
+
}
|
|
241
|
+
// from https://www.w3.org/TR/css-color-4/#color-conversion-code
|
|
242
|
+
function Lab_to_XYZ(l, a, b) {
|
|
243
|
+
// Convert Lab to D50-adapted XYZ
|
|
244
|
+
// http://www.brucelindbloom.com/index.html?Eqn_RGB_XYZ_Matrix.html
|
|
245
|
+
const k = 24389 / 27; // 29^3/3^3
|
|
246
|
+
const e = 216 / 24389; // 6^3/29^3
|
|
247
|
+
const f = [];
|
|
248
|
+
// compute f, starting with the luminance-related term
|
|
249
|
+
f[1] = (l + 16) / 116;
|
|
250
|
+
f[0] = a / 500 + f[1];
|
|
251
|
+
f[2] = f[1] - b / 200;
|
|
252
|
+
// compute xyz
|
|
253
|
+
const xyz = [
|
|
254
|
+
Math.pow(f[0], 3) > e ? Math.pow(f[0], 3) : (116 * f[0] - 16) / k,
|
|
255
|
+
l > k * e ? Math.pow((l + 16) / 116, 3) : l / k,
|
|
256
|
+
Math.pow(f[2], 3) > e ? Math.pow(f[2], 3) : (116 * f[2] - 16) / k
|
|
257
|
+
];
|
|
258
|
+
// Compute XYZ by scaling xyz by reference white
|
|
259
|
+
return xyz.map((value, i) => value * D50[i]);
|
|
260
|
+
}
|
|
261
|
+
|
|
262
|
+
export { Lab_to_XYZ, Lab_to_sRGB, cmyk2labToken, cmyk2labvalues, color2labToken, color2labvalues, getLABComponents, hex2labToken, hex2labvalues, hsl2labToken, hsl2labvalues, hwb2labToken, hwb2labvalues, lch2labToken, lch2labvalues, lchvalues2labvalues, oklab2labToken, oklab2labvalues, oklch2labToken, oklch2labvalues, rgb2labToken, rgb2labvalues, srgb2labvalues, xyz2lab };
|
|
@@ -0,0 +1,194 @@
|
|
|
1
|
+
import './utils/constants.js';
|
|
2
|
+
import { getComponents } from './utils/components.js';
|
|
3
|
+
import { color2srgbvalues, toPrecisionAngle, getNumber, getAngle } from './color.js';
|
|
4
|
+
import { cmyk2srgbvalues } from './srgb.js';
|
|
5
|
+
import { EnumToken, ColorType } from '../../ast/types.js';
|
|
6
|
+
import '../../ast/minify.js';
|
|
7
|
+
import '../../ast/walk.js';
|
|
8
|
+
import '../../parser/parse.js';
|
|
9
|
+
import '../../parser/tokenize.js';
|
|
10
|
+
import '../../parser/utils/config.js';
|
|
11
|
+
import { srgb2labvalues, xyz2lab, oklch2labvalues, oklab2labvalues, getLABComponents, hwb2labvalues, hsl2labvalues, rgb2labvalues, hex2labvalues } from './lab.js';
|
|
12
|
+
import '../../renderer/sourcemap/lib/encode.js';
|
|
13
|
+
|
|
14
|
+
function hex2lchToken(token) {
|
|
15
|
+
const values = hex2lchvalues(token);
|
|
16
|
+
if (values == null) {
|
|
17
|
+
return null;
|
|
18
|
+
}
|
|
19
|
+
return lchToken(values);
|
|
20
|
+
}
|
|
21
|
+
function rgb2lchToken(token) {
|
|
22
|
+
const values = rgb2lchvalues(token);
|
|
23
|
+
if (values == null) {
|
|
24
|
+
return null;
|
|
25
|
+
}
|
|
26
|
+
return lchToken(values);
|
|
27
|
+
}
|
|
28
|
+
function hsl2lchToken(token) {
|
|
29
|
+
const values = hsl2lchvalues(token);
|
|
30
|
+
if (values == null) {
|
|
31
|
+
return null;
|
|
32
|
+
}
|
|
33
|
+
return lchToken(values);
|
|
34
|
+
}
|
|
35
|
+
function hwb2lchToken(token) {
|
|
36
|
+
const values = hwb2lchvalues(token);
|
|
37
|
+
if (values == null) {
|
|
38
|
+
return null;
|
|
39
|
+
}
|
|
40
|
+
return lchToken(values);
|
|
41
|
+
}
|
|
42
|
+
function cmyk2lchToken(token) {
|
|
43
|
+
const values = cmyk2lchvalues(token);
|
|
44
|
+
if (values == null) {
|
|
45
|
+
return null;
|
|
46
|
+
}
|
|
47
|
+
return lchToken(values);
|
|
48
|
+
}
|
|
49
|
+
function lab2lchToken(token) {
|
|
50
|
+
const values = lab2lchvalues(token);
|
|
51
|
+
if (values == null) {
|
|
52
|
+
return null;
|
|
53
|
+
}
|
|
54
|
+
return lchToken(values);
|
|
55
|
+
}
|
|
56
|
+
function oklab2lchToken(token) {
|
|
57
|
+
const values = oklab2lchvalues(token);
|
|
58
|
+
if (values == null) {
|
|
59
|
+
return null;
|
|
60
|
+
}
|
|
61
|
+
return lchToken(values);
|
|
62
|
+
}
|
|
63
|
+
function oklch2lchToken(token) {
|
|
64
|
+
const values = oklch2lchvalues(token);
|
|
65
|
+
if (values == null) {
|
|
66
|
+
return null;
|
|
67
|
+
}
|
|
68
|
+
return lchToken(values);
|
|
69
|
+
}
|
|
70
|
+
function color2lchToken(token) {
|
|
71
|
+
const values = color2lchvalues(token);
|
|
72
|
+
if (values == null) {
|
|
73
|
+
return null;
|
|
74
|
+
}
|
|
75
|
+
return lchToken(values);
|
|
76
|
+
}
|
|
77
|
+
function lchToken(values) {
|
|
78
|
+
values[2] = toPrecisionAngle(values[2]);
|
|
79
|
+
const chi = [
|
|
80
|
+
{ typ: EnumToken.NumberTokenType, val: String(values[0]) },
|
|
81
|
+
{ typ: EnumToken.NumberTokenType, val: String(values[1]) },
|
|
82
|
+
{ typ: EnumToken.NumberTokenType, val: String(values[2]) },
|
|
83
|
+
];
|
|
84
|
+
if (values.length == 4) {
|
|
85
|
+
chi.push({ typ: EnumToken.LiteralTokenType, val: '/' }, { typ: EnumToken.PercentageTokenType, val: (values[3] * 100).toFixed() });
|
|
86
|
+
}
|
|
87
|
+
return {
|
|
88
|
+
typ: EnumToken.ColorTokenType,
|
|
89
|
+
val: 'lch',
|
|
90
|
+
chi,
|
|
91
|
+
kin: ColorType.LCH
|
|
92
|
+
};
|
|
93
|
+
}
|
|
94
|
+
function hex2lchvalues(token) {
|
|
95
|
+
const values = hex2labvalues(token);
|
|
96
|
+
// @ts-ignore
|
|
97
|
+
return values == null ? null : labvalues2lchvalues(...values);
|
|
98
|
+
}
|
|
99
|
+
function rgb2lchvalues(token) {
|
|
100
|
+
const values = rgb2labvalues(token);
|
|
101
|
+
// @ts-ignore
|
|
102
|
+
return values == null ? null : labvalues2lchvalues(...values);
|
|
103
|
+
}
|
|
104
|
+
function hsl2lchvalues(token) {
|
|
105
|
+
const values = hsl2labvalues(token);
|
|
106
|
+
// @ts-ignore
|
|
107
|
+
return values == null ? null : labvalues2lchvalues(...values);
|
|
108
|
+
}
|
|
109
|
+
function hwb2lchvalues(token) {
|
|
110
|
+
const values = hwb2labvalues(token);
|
|
111
|
+
// @ts-ignore
|
|
112
|
+
return values == null ? null : labvalues2lchvalues(...values);
|
|
113
|
+
}
|
|
114
|
+
function lab2lchvalues(token) {
|
|
115
|
+
const values = getLABComponents(token);
|
|
116
|
+
// @ts-ignore
|
|
117
|
+
return values == null ? null : labvalues2lchvalues(...values);
|
|
118
|
+
}
|
|
119
|
+
function srgb2lch(r, g, blue, alpha) {
|
|
120
|
+
// @ts-ignore
|
|
121
|
+
return labvalues2lchvalues(...srgb2labvalues(r, g, blue, alpha));
|
|
122
|
+
}
|
|
123
|
+
function oklab2lchvalues(token) {
|
|
124
|
+
const values = oklab2labvalues(token);
|
|
125
|
+
// @ts-ignore
|
|
126
|
+
return values == null ? null : labvalues2lchvalues(...values);
|
|
127
|
+
}
|
|
128
|
+
function cmyk2lchvalues(token) {
|
|
129
|
+
const values = cmyk2srgbvalues(token);
|
|
130
|
+
// @ts-ignore
|
|
131
|
+
return values == null ? null : srgb2lch(...values);
|
|
132
|
+
}
|
|
133
|
+
function oklch2lchvalues(token) {
|
|
134
|
+
const values = oklch2labvalues(token);
|
|
135
|
+
if (values == null) {
|
|
136
|
+
return null;
|
|
137
|
+
}
|
|
138
|
+
// @ts-ignore
|
|
139
|
+
return labvalues2lchvalues(...values);
|
|
140
|
+
}
|
|
141
|
+
function color2lchvalues(token) {
|
|
142
|
+
const values = color2srgbvalues(token);
|
|
143
|
+
if (values == null) {
|
|
144
|
+
return null;
|
|
145
|
+
}
|
|
146
|
+
// @ts-ignore
|
|
147
|
+
return srgb2lch(...values);
|
|
148
|
+
}
|
|
149
|
+
function labvalues2lchvalues(l, a, b, alpha = null) {
|
|
150
|
+
let c = Math.sqrt(a * a + b * b);
|
|
151
|
+
let h = Math.atan2(b, a) * 180 / Math.PI;
|
|
152
|
+
if (h < 0) {
|
|
153
|
+
h += 360;
|
|
154
|
+
}
|
|
155
|
+
if (c < .0001) {
|
|
156
|
+
c = h = 0;
|
|
157
|
+
}
|
|
158
|
+
return alpha == null ? [l, c, h] : [l, c, h, alpha];
|
|
159
|
+
}
|
|
160
|
+
function xyz2lchvalues(x, y, z, alpha) {
|
|
161
|
+
// @ts-ignore(
|
|
162
|
+
const lch = labvalues2lchvalues(...xyz2lab(x, y, z));
|
|
163
|
+
return alpha == null || alpha == 1 ? lch : lch.concat(alpha);
|
|
164
|
+
}
|
|
165
|
+
function getLCHComponents(token) {
|
|
166
|
+
const components = getComponents(token);
|
|
167
|
+
if (components == null) {
|
|
168
|
+
return null;
|
|
169
|
+
}
|
|
170
|
+
for (let i = 0; i < components.length; i++) {
|
|
171
|
+
if (![EnumToken.NumberTokenType, EnumToken.PercentageTokenType, EnumToken.AngleTokenType, EnumToken.IdenTokenType].includes(components[i].typ)) {
|
|
172
|
+
return null;
|
|
173
|
+
}
|
|
174
|
+
}
|
|
175
|
+
// @ts-ignore
|
|
176
|
+
let t = components[0];
|
|
177
|
+
// @ts-ignore
|
|
178
|
+
const l = getNumber(t) * (t.typ == EnumToken.PercentageTokenType ? 100 : 1);
|
|
179
|
+
// @ts-ignore
|
|
180
|
+
t = components[1];
|
|
181
|
+
// @ts-ignore
|
|
182
|
+
const c = getNumber(t) * (t.typ == EnumToken.PercentageTokenType ? 150 : 1);
|
|
183
|
+
// @ts-ignore
|
|
184
|
+
t = components[2];
|
|
185
|
+
// @ts-ignore
|
|
186
|
+
const h = getAngle(t) * 360;
|
|
187
|
+
// @ts-ignore
|
|
188
|
+
t = components[3];
|
|
189
|
+
// @ts-ignore
|
|
190
|
+
const alpha = t == null ? 1 : getNumber(t);
|
|
191
|
+
return alpha == null ? [l, c, h] : [l, c, h, alpha];
|
|
192
|
+
}
|
|
193
|
+
|
|
194
|
+
export { cmyk2lchToken, cmyk2lchvalues, color2lchToken, color2lchvalues, getLCHComponents, hex2lchToken, hex2lchvalues, hsl2lchToken, hsl2lchvalues, hwb2lchToken, hwb2lchvalues, lab2lchToken, lab2lchvalues, labvalues2lchvalues, oklab2lchToken, oklab2lchvalues, oklch2lchToken, oklch2lchvalues, rgb2lchToken, rgb2lchvalues, srgb2lch, xyz2lchvalues };
|
|
@@ -0,0 +1,237 @@
|
|
|
1
|
+
import { multiplyMatrices } from './utils/matrix.js';
|
|
2
|
+
import './utils/constants.js';
|
|
3
|
+
import { getComponents } from './utils/components.js';
|
|
4
|
+
import { color2srgbvalues, getNumber } from './color.js';
|
|
5
|
+
import { srgb2lsrgbvalues, lch2srgbvalues, lab2srgbvalues, cmyk2srgbvalues, hwb2srgbvalues, hsl2srgb, rgb2srgb, hex2srgbvalues, lsrgb2srgbvalues } from './srgb.js';
|
|
6
|
+
import { EnumToken, ColorType } from '../../ast/types.js';
|
|
7
|
+
import '../../ast/minify.js';
|
|
8
|
+
import '../../ast/walk.js';
|
|
9
|
+
import '../../parser/parse.js';
|
|
10
|
+
import '../../parser/tokenize.js';
|
|
11
|
+
import '../../parser/utils/config.js';
|
|
12
|
+
import { lchvalues2labvalues } from './lab.js';
|
|
13
|
+
import { getOKLCHComponents } from './oklch.js';
|
|
14
|
+
import '../../renderer/sourcemap/lib/encode.js';
|
|
15
|
+
|
|
16
|
+
function hex2oklabToken(token) {
|
|
17
|
+
const values = hex2oklabvalues(token);
|
|
18
|
+
if (values == null) {
|
|
19
|
+
return null;
|
|
20
|
+
}
|
|
21
|
+
return oklabToken(values);
|
|
22
|
+
}
|
|
23
|
+
function rgb2oklabToken(token) {
|
|
24
|
+
const values = rgb2oklabvalues(token);
|
|
25
|
+
if (values == null) {
|
|
26
|
+
return null;
|
|
27
|
+
}
|
|
28
|
+
return oklabToken(values);
|
|
29
|
+
}
|
|
30
|
+
function hsl2oklabToken(token) {
|
|
31
|
+
const values = hsl2oklabvalues(token);
|
|
32
|
+
if (values == null) {
|
|
33
|
+
return null;
|
|
34
|
+
}
|
|
35
|
+
return oklabToken(values);
|
|
36
|
+
}
|
|
37
|
+
function hwb2oklabToken(token) {
|
|
38
|
+
const values = hwb2oklabvalues(token);
|
|
39
|
+
if (values == null) {
|
|
40
|
+
return null;
|
|
41
|
+
}
|
|
42
|
+
return oklabToken(values);
|
|
43
|
+
}
|
|
44
|
+
function cmyk2oklabToken(token) {
|
|
45
|
+
const values = cmyk2oklabvalues(token);
|
|
46
|
+
if (values == null) {
|
|
47
|
+
return null;
|
|
48
|
+
}
|
|
49
|
+
return oklabToken(values);
|
|
50
|
+
}
|
|
51
|
+
function lab2oklabToken(token) {
|
|
52
|
+
const values = lab2oklabvalues(token);
|
|
53
|
+
if (values == null) {
|
|
54
|
+
return null;
|
|
55
|
+
}
|
|
56
|
+
return oklabToken(values);
|
|
57
|
+
}
|
|
58
|
+
function lch2oklabToken(token) {
|
|
59
|
+
const values = lch2oklabvalues(token);
|
|
60
|
+
if (values == null) {
|
|
61
|
+
return null;
|
|
62
|
+
}
|
|
63
|
+
return oklabToken(values);
|
|
64
|
+
}
|
|
65
|
+
function oklch2oklabToken(token) {
|
|
66
|
+
const values = oklch2oklabvalues(token);
|
|
67
|
+
if (values == null) {
|
|
68
|
+
return null;
|
|
69
|
+
}
|
|
70
|
+
return oklabToken(values);
|
|
71
|
+
}
|
|
72
|
+
function color2oklabToken(token) {
|
|
73
|
+
const values = color2oklabvalues(token);
|
|
74
|
+
if (values == null) {
|
|
75
|
+
return null;
|
|
76
|
+
}
|
|
77
|
+
return oklabToken(values);
|
|
78
|
+
}
|
|
79
|
+
function oklabToken(values) {
|
|
80
|
+
const chi = [
|
|
81
|
+
{ typ: EnumToken.NumberTokenType, val: String(values[0]) },
|
|
82
|
+
{ typ: EnumToken.NumberTokenType, val: String(values[1]) },
|
|
83
|
+
{ typ: EnumToken.NumberTokenType, val: String(values[2]) },
|
|
84
|
+
];
|
|
85
|
+
if (values.length == 4) {
|
|
86
|
+
chi.push({ typ: EnumToken.LiteralTokenType, val: '/' }, {
|
|
87
|
+
typ: EnumToken.PercentageTokenType,
|
|
88
|
+
val: (values[3] * 100).toFixed()
|
|
89
|
+
});
|
|
90
|
+
}
|
|
91
|
+
return {
|
|
92
|
+
typ: EnumToken.ColorTokenType,
|
|
93
|
+
val: 'oklab',
|
|
94
|
+
chi,
|
|
95
|
+
kin: ColorType.OKLAB
|
|
96
|
+
};
|
|
97
|
+
}
|
|
98
|
+
function hex2oklabvalues(token) {
|
|
99
|
+
const values = hex2srgbvalues(token);
|
|
100
|
+
if (values == null) {
|
|
101
|
+
return null;
|
|
102
|
+
}
|
|
103
|
+
// @ts-ignore
|
|
104
|
+
return srgb2oklab(...values);
|
|
105
|
+
}
|
|
106
|
+
function rgb2oklabvalues(token) {
|
|
107
|
+
const values = rgb2srgb(token);
|
|
108
|
+
if (values == null) {
|
|
109
|
+
return null;
|
|
110
|
+
}
|
|
111
|
+
// @ts-ignore
|
|
112
|
+
return srgb2oklab(...values);
|
|
113
|
+
}
|
|
114
|
+
function hsl2oklabvalues(token) {
|
|
115
|
+
const values = hsl2srgb(token);
|
|
116
|
+
if (values == null) {
|
|
117
|
+
return null;
|
|
118
|
+
}
|
|
119
|
+
// @ts-ignore
|
|
120
|
+
return srgb2oklab(...values);
|
|
121
|
+
}
|
|
122
|
+
function hwb2oklabvalues(token) {
|
|
123
|
+
// @ts-ignore
|
|
124
|
+
return srgb2oklab(...hwb2srgbvalues(token));
|
|
125
|
+
}
|
|
126
|
+
function cmyk2oklabvalues(token) {
|
|
127
|
+
const values = cmyk2srgbvalues(token);
|
|
128
|
+
// @ts-ignore
|
|
129
|
+
return values == null ? null : srgb2oklab(...values);
|
|
130
|
+
}
|
|
131
|
+
function lab2oklabvalues(token) {
|
|
132
|
+
const values = lab2srgbvalues(token);
|
|
133
|
+
if (values == null) {
|
|
134
|
+
return null;
|
|
135
|
+
}
|
|
136
|
+
// @ts-ignore
|
|
137
|
+
return srgb2oklab(...values);
|
|
138
|
+
}
|
|
139
|
+
function lch2oklabvalues(token) {
|
|
140
|
+
const values = lch2srgbvalues(token);
|
|
141
|
+
// @ts-ignore
|
|
142
|
+
return values == null ? null : srgb2oklab(...values);
|
|
143
|
+
}
|
|
144
|
+
function oklch2oklabvalues(token) {
|
|
145
|
+
const values = getOKLCHComponents(token);
|
|
146
|
+
// @ts-ignore
|
|
147
|
+
return values == null ? null : lchvalues2labvalues(...values);
|
|
148
|
+
}
|
|
149
|
+
function color2oklabvalues(token) {
|
|
150
|
+
const values = color2srgbvalues(token);
|
|
151
|
+
// @ts-ignore
|
|
152
|
+
return values == null ? null : srgb2oklab(...values);
|
|
153
|
+
}
|
|
154
|
+
function srgb2oklab(r, g, blue, alpha) {
|
|
155
|
+
[r, g, blue] = srgb2lsrgbvalues(r, g, blue);
|
|
156
|
+
let L = Math.cbrt(0.41222147079999993 * r + 0.5363325363 * g + 0.0514459929 * blue);
|
|
157
|
+
let M = Math.cbrt(0.2119034981999999 * r + 0.6806995450999999 * g + 0.1073969566 * blue);
|
|
158
|
+
let S = Math.cbrt(0.08830246189999998 * r + 0.2817188376 * g + 0.6299787005000002 * blue);
|
|
159
|
+
const l = 0.2104542553 * L + 0.793617785 * M - 0.0040720468 * S;
|
|
160
|
+
const a = r == g && g == blue ? 0 : 1.9779984951 * L - 2.428592205 * M + 0.4505937099 * S;
|
|
161
|
+
const b = r == g && g == blue ? 0 : 0.0259040371 * L + 0.7827717662 * M - 0.808675766 * S;
|
|
162
|
+
return alpha == null || alpha == 1 ? [l, a, b] : [l, a, b, alpha];
|
|
163
|
+
}
|
|
164
|
+
function getOKLABComponents(token) {
|
|
165
|
+
const components = getComponents(token);
|
|
166
|
+
if (components == null || components.length < 3) {
|
|
167
|
+
return null;
|
|
168
|
+
}
|
|
169
|
+
// @ts-ignore
|
|
170
|
+
let t = components[0];
|
|
171
|
+
// @ts-ignore
|
|
172
|
+
const l = getNumber(t);
|
|
173
|
+
// @ts-ignore
|
|
174
|
+
t = components[1];
|
|
175
|
+
// @ts-ignore
|
|
176
|
+
const a = getNumber(t) * (t.typ == EnumToken.PercentageTokenType ? .4 : 1);
|
|
177
|
+
// @ts-ignore
|
|
178
|
+
t = components[2];
|
|
179
|
+
// @ts-ignore
|
|
180
|
+
const b = getNumber(t) * (t.typ == EnumToken.PercentageTokenType ? .4 : 1);
|
|
181
|
+
// @ts-ignore
|
|
182
|
+
let alpha = null;
|
|
183
|
+
if (components.length > 3) {
|
|
184
|
+
alpha = getNumber(components[3]);
|
|
185
|
+
}
|
|
186
|
+
const rgb = [l, a, b];
|
|
187
|
+
if (alpha != 1 && alpha != null) {
|
|
188
|
+
rgb.push(alpha);
|
|
189
|
+
}
|
|
190
|
+
return rgb;
|
|
191
|
+
}
|
|
192
|
+
function OKLab_to_XYZ(l, a, b, alpha = null) {
|
|
193
|
+
// Given OKLab, convert to XYZ relative to D65
|
|
194
|
+
const LMStoXYZ = [
|
|
195
|
+
[1.2268798758459243, -0.5578149944602171, 0.2813910456659647],
|
|
196
|
+
[-0.0405757452148008, 1.1122868032803170, -0.0717110580655164],
|
|
197
|
+
[-0.0763729366746601, -0.4214933324022432, 1.5869240198367816]
|
|
198
|
+
];
|
|
199
|
+
const OKLabtoLMS = [
|
|
200
|
+
[1.0000000000000000, 0.3963377773761749, 0.2158037573099136],
|
|
201
|
+
[1.0000000000000000, -0.1055613458156586, -0.0638541728258133],
|
|
202
|
+
[1.0000000000000000, -0.0894841775298119, -1.2914855480194092]
|
|
203
|
+
];
|
|
204
|
+
const LMSnl = multiplyMatrices(OKLabtoLMS, [l, a, b]);
|
|
205
|
+
const xyz = multiplyMatrices(LMStoXYZ, LMSnl.map((c) => c ** 3));
|
|
206
|
+
if (alpha != null) {
|
|
207
|
+
xyz.push(alpha);
|
|
208
|
+
}
|
|
209
|
+
return xyz;
|
|
210
|
+
}
|
|
211
|
+
// from https://www.w3.org/TR/css-color-4/#color-conversion-code
|
|
212
|
+
function OKLab_to_sRGB(l, a, b) {
|
|
213
|
+
let L = Math.pow(l * 0.99999999845051981432 +
|
|
214
|
+
0.39633779217376785678 * a +
|
|
215
|
+
0.21580375806075880339 * b, 3);
|
|
216
|
+
let M = Math.pow(l * 1.0000000088817607767 -
|
|
217
|
+
0.1055613423236563494 * a -
|
|
218
|
+
0.063854174771705903402 * b, 3);
|
|
219
|
+
let S = Math.pow(l * 1.0000000546724109177 -
|
|
220
|
+
0.089484182094965759684 * a -
|
|
221
|
+
1.2914855378640917399 * b, 3);
|
|
222
|
+
return lsrgb2srgbvalues(
|
|
223
|
+
/* r: */
|
|
224
|
+
4.076741661347994 * L -
|
|
225
|
+
3.307711590408193 * M +
|
|
226
|
+
0.230969928729428 * S,
|
|
227
|
+
/* g: */
|
|
228
|
+
-1.2684380040921763 * L +
|
|
229
|
+
2.6097574006633715 * M -
|
|
230
|
+
0.3413193963102197 * S,
|
|
231
|
+
/* b: */
|
|
232
|
+
-0.004196086541837188 * L -
|
|
233
|
+
0.7034186144594493 * M +
|
|
234
|
+
1.7076147009309444 * S);
|
|
235
|
+
}
|
|
236
|
+
|
|
237
|
+
export { OKLab_to_XYZ, OKLab_to_sRGB, cmyk2oklabToken, cmyk2oklabvalues, color2oklabToken, getOKLABComponents, hex2oklabToken, hex2oklabvalues, hsl2oklabToken, hsl2oklabvalues, hwb2oklabToken, hwb2oklabvalues, lab2oklabToken, lab2oklabvalues, lch2oklabToken, lch2oklabvalues, oklch2oklabToken, oklch2oklabvalues, rgb2oklabToken, rgb2oklabvalues, srgb2oklab };
|