@tbela99/css-parser 0.5.4 → 0.6.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/README.md +2 -2
- package/dist/index-umd-web.js +41 -6
- package/dist/index.cjs +41 -6
- package/dist/index.d.ts +6 -6
- package/dist/lib/parser/parse.js +23 -5
- package/dist/lib/parser/utils/syntax.js +9 -0
- package/dist/lib/renderer/color/utils/constants.js +5 -1
- package/dist/lib/renderer/render.js +5 -2
- package/dist/node/index.js +1 -0
- package/dist/web/load.js +1 -0
- package/jsr.json +29 -0
- package/package.json +4 -3
package/README.md
CHANGED
|
@@ -16,7 +16,7 @@ $ npm install @tbela99/css-parser
|
|
|
16
16
|
- fault-tolerant parser, will try to fix invalid tokens according to the CSS syntax module 3 recommendations.
|
|
17
17
|
- fast and efficient minification without unsafe transforms, see [benchmark](https://tbela99.github.io/css-parser/benchmark/index.html)
|
|
18
18
|
- minify colors.
|
|
19
|
-
- support css color level 4 & 5: color(), lab(), lch(), oklab(), oklch(), color-mix() and relative color
|
|
19
|
+
- support css color level 4 & 5: color(), lab(), lch(), oklab(), oklch(), color-mix(), light-dark(), system colors and relative color
|
|
20
20
|
- generate nested css rules
|
|
21
21
|
- convert nested css rules to legacy syntax
|
|
22
22
|
- generate sourcemap
|
|
@@ -76,7 +76,7 @@ import {transform} from '@tbela99/css-parser/web';
|
|
|
76
76
|
|
|
77
77
|
Javascript module from cdn
|
|
78
78
|
|
|
79
|
-
```
|
|
79
|
+
```html
|
|
80
80
|
|
|
81
81
|
<script type="module">
|
|
82
82
|
|
package/dist/index-umd-web.js
CHANGED
|
@@ -184,6 +184,10 @@
|
|
|
184
184
|
const D50 = [0.3457 / 0.3585, 1.00000, (1.0 - 0.3457 - 0.3585) / 0.3585];
|
|
185
185
|
const k = Math.pow(29, 3) / Math.pow(3, 3);
|
|
186
186
|
const e = Math.pow(6, 3) / Math.pow(29, 3);
|
|
187
|
+
// color module v4
|
|
188
|
+
const systemColors = new Set(['ActiveText', 'ButtonBorder', 'ButtonFace', 'ButtonText', 'Canvas', 'CanvasText', 'Field', 'FieldText', 'GrayText', 'Highlight', 'HighlightText', 'LinkText', 'Mark', 'MarkText', 'VisitedText'].map(m => m.toLowerCase()));
|
|
189
|
+
// deprecated
|
|
190
|
+
const deprecatedSystemColors = new Set(['ActiveBorder', 'ActiveCaption', 'AppWorkspace', 'Background', 'ButtonFace', 'ButtonHighlight', 'ButtonShadow', 'ButtonText', 'CaptionText', 'GrayText', 'Highlight', 'HighlightText', 'InactiveBorder', 'InactiveCaption', 'InactiveCaptionText', 'InfoBackground', 'InfoText', 'Menu', 'MenuText', 'Scrollbar', 'ThreeDDarkShadow', 'ThreeDFace', 'ThreeDHighlight', 'ThreeDLightShadow', 'ThreeDShadow', 'Window', 'WindowFrame', 'WindowText'].map(t => t.toLowerCase()));
|
|
187
191
|
// name to color
|
|
188
192
|
const COLORS_NAMES = Object.seal({
|
|
189
193
|
'aliceblue': '#f0f8ff',
|
|
@@ -2958,7 +2962,7 @@
|
|
|
2958
2962
|
}
|
|
2959
2963
|
}
|
|
2960
2964
|
|
|
2961
|
-
const colorsFunc = ['rgb', 'rgba', 'hsl', 'hsla', 'hwb', 'device-cmyk', 'color-mix', 'color', 'oklab', 'lab', 'oklch', 'lch'];
|
|
2965
|
+
const colorsFunc = ['rgb', 'rgba', 'hsl', 'hsla', 'hwb', 'device-cmyk', 'color-mix', 'color', 'oklab', 'lab', 'oklch', 'lch', 'light-dark'];
|
|
2962
2966
|
function reduceNumber(val) {
|
|
2963
2967
|
val = String(+val);
|
|
2964
2968
|
if (val === '0') {
|
|
@@ -3226,6 +3230,9 @@
|
|
|
3226
3230
|
case exports.EnumToken.Div:
|
|
3227
3231
|
return '/';
|
|
3228
3232
|
case exports.EnumToken.ColorTokenType:
|
|
3233
|
+
if (token.kin == 'light-dark') {
|
|
3234
|
+
return token.val + '(' + token.chi.reduce((acc, curr) => acc + renderToken(curr, options, cache), '') + ')';
|
|
3235
|
+
}
|
|
3229
3236
|
if (options.convertColor) {
|
|
3230
3237
|
if (token.cal == 'mix' && token.val == 'color-mix') {
|
|
3231
3238
|
const children = token.chi.reduce((acc, t) => {
|
|
@@ -3319,7 +3326,7 @@
|
|
|
3319
3326
|
return reduceHexValue(value);
|
|
3320
3327
|
}
|
|
3321
3328
|
}
|
|
3322
|
-
if (
|
|
3329
|
+
if (['hex', 'lit', 'sys', 'dpsys'].includes(token.kin)) {
|
|
3323
3330
|
return token.val;
|
|
3324
3331
|
}
|
|
3325
3332
|
if (Array.isArray(token.chi)) {
|
|
@@ -3585,6 +3592,15 @@
|
|
|
3585
3592
|
}
|
|
3586
3593
|
let isLegacySyntax = false;
|
|
3587
3594
|
if (token.typ == exports.EnumToken.FunctionTokenType && token.chi.length > 0 && colorsFunc.includes(token.val)) {
|
|
3595
|
+
if (token.val == 'light-dark') {
|
|
3596
|
+
const children = token.chi.filter((t) => [exports.EnumToken.IdenTokenType, exports.EnumToken.NumberTokenType, exports.EnumToken.LiteralTokenType, exports.EnumToken.ColorTokenType, exports.EnumToken.FunctionTokenType, exports.EnumToken.PercentageTokenType].includes(t.typ));
|
|
3597
|
+
if (children.length != 2) {
|
|
3598
|
+
return false;
|
|
3599
|
+
}
|
|
3600
|
+
if (isColor(children[0]) && isColor(children[1])) {
|
|
3601
|
+
return true;
|
|
3602
|
+
}
|
|
3603
|
+
}
|
|
3588
3604
|
if (token.val == 'color') {
|
|
3589
3605
|
const children = token.chi.filter((t) => [exports.EnumToken.IdenTokenType, exports.EnumToken.NumberTokenType, exports.EnumToken.LiteralTokenType, exports.EnumToken.ColorTokenType, exports.EnumToken.FunctionTokenType, exports.EnumToken.PercentageTokenType].includes(t.typ));
|
|
3590
3606
|
const isRelative = children[0].typ == exports.EnumToken.IdenTokenType && children[0].val == 'from';
|
|
@@ -6574,9 +6590,9 @@
|
|
|
6574
6590
|
}));
|
|
6575
6591
|
}
|
|
6576
6592
|
function getTokenType(val, hint) {
|
|
6577
|
-
if (val === '' && hint == null) {
|
|
6578
|
-
|
|
6579
|
-
}
|
|
6593
|
+
// if (val === '' && hint == null) {
|
|
6594
|
+
// throw new Error('empty string?');
|
|
6595
|
+
// }
|
|
6580
6596
|
if (hint != null) {
|
|
6581
6597
|
return enumTokenHints.has(hint) ? { typ: hint } : { typ: hint, val };
|
|
6582
6598
|
}
|
|
@@ -6705,6 +6721,20 @@
|
|
|
6705
6721
|
};
|
|
6706
6722
|
}
|
|
6707
6723
|
if (isIdent(val)) {
|
|
6724
|
+
if (systemColors.has(val.toLowerCase())) {
|
|
6725
|
+
return {
|
|
6726
|
+
typ: exports.EnumToken.ColorTokenType,
|
|
6727
|
+
val,
|
|
6728
|
+
kin: 'sys'
|
|
6729
|
+
};
|
|
6730
|
+
}
|
|
6731
|
+
if (deprecatedSystemColors.has(val.toLowerCase())) {
|
|
6732
|
+
return {
|
|
6733
|
+
typ: exports.EnumToken.ColorTokenType,
|
|
6734
|
+
val,
|
|
6735
|
+
kin: 'dpsys'
|
|
6736
|
+
};
|
|
6737
|
+
}
|
|
6708
6738
|
return {
|
|
6709
6739
|
typ: val.startsWith('--') ? exports.EnumToken.DashedIdenTokenType : exports.EnumToken.IdenTokenType,
|
|
6710
6740
|
val
|
|
@@ -6986,7 +7016,11 @@
|
|
|
6986
7016
|
// t.chi = t.chi.filter((t: Token) => [EnumToken.IdenTokenType, EnumToken.NumberTokenType, EnumToken.PercentageTokenType].includes(t.typ));
|
|
6987
7017
|
}
|
|
6988
7018
|
}
|
|
6989
|
-
|
|
7019
|
+
const filter = [exports.EnumToken.WhitespaceTokenType, exports.EnumToken.CommentTokenType];
|
|
7020
|
+
if (t.val != 'light-dark') {
|
|
7021
|
+
filter.push(exports.EnumToken.CommaTokenType);
|
|
7022
|
+
}
|
|
7023
|
+
t.chi = t.chi.filter((t) => !filter.includes(t.typ));
|
|
6990
7024
|
continue;
|
|
6991
7025
|
}
|
|
6992
7026
|
if (t.typ == exports.EnumToken.UrlFunctionTokenType) {
|
|
@@ -9491,6 +9525,7 @@
|
|
|
9491
9525
|
const path = resolve(url, currentFile).absolute;
|
|
9492
9526
|
t = new URL(path, self.origin);
|
|
9493
9527
|
}
|
|
9528
|
+
// @ts-ignore
|
|
9494
9529
|
return fetch(t, t.origin != self.origin ? { mode: 'cors' } : {}).then(parseResponse);
|
|
9495
9530
|
}
|
|
9496
9531
|
|
package/dist/index.cjs
CHANGED
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
+
var process = require('node:process');
|
|
3
4
|
var promises = require('node:fs/promises');
|
|
4
5
|
|
|
5
6
|
exports.EnumToken = void 0;
|
|
@@ -182,6 +183,10 @@ const colorFuncColorSpace = ['srgb', 'srgb-linear', 'display-p3', 'prophoto-rgb'
|
|
|
182
183
|
const D50 = [0.3457 / 0.3585, 1.00000, (1.0 - 0.3457 - 0.3585) / 0.3585];
|
|
183
184
|
const k = Math.pow(29, 3) / Math.pow(3, 3);
|
|
184
185
|
const e = Math.pow(6, 3) / Math.pow(29, 3);
|
|
186
|
+
// color module v4
|
|
187
|
+
const systemColors = new Set(['ActiveText', 'ButtonBorder', 'ButtonFace', 'ButtonText', 'Canvas', 'CanvasText', 'Field', 'FieldText', 'GrayText', 'Highlight', 'HighlightText', 'LinkText', 'Mark', 'MarkText', 'VisitedText'].map(m => m.toLowerCase()));
|
|
188
|
+
// deprecated
|
|
189
|
+
const deprecatedSystemColors = new Set(['ActiveBorder', 'ActiveCaption', 'AppWorkspace', 'Background', 'ButtonFace', 'ButtonHighlight', 'ButtonShadow', 'ButtonText', 'CaptionText', 'GrayText', 'Highlight', 'HighlightText', 'InactiveBorder', 'InactiveCaption', 'InactiveCaptionText', 'InfoBackground', 'InfoText', 'Menu', 'MenuText', 'Scrollbar', 'ThreeDDarkShadow', 'ThreeDFace', 'ThreeDHighlight', 'ThreeDLightShadow', 'ThreeDShadow', 'Window', 'WindowFrame', 'WindowText'].map(t => t.toLowerCase()));
|
|
185
190
|
// name to color
|
|
186
191
|
const COLORS_NAMES = Object.seal({
|
|
187
192
|
'aliceblue': '#f0f8ff',
|
|
@@ -2956,7 +2961,7 @@ class SourceMap {
|
|
|
2956
2961
|
}
|
|
2957
2962
|
}
|
|
2958
2963
|
|
|
2959
|
-
const colorsFunc = ['rgb', 'rgba', 'hsl', 'hsla', 'hwb', 'device-cmyk', 'color-mix', 'color', 'oklab', 'lab', 'oklch', 'lch'];
|
|
2964
|
+
const colorsFunc = ['rgb', 'rgba', 'hsl', 'hsla', 'hwb', 'device-cmyk', 'color-mix', 'color', 'oklab', 'lab', 'oklch', 'lch', 'light-dark'];
|
|
2960
2965
|
function reduceNumber(val) {
|
|
2961
2966
|
val = String(+val);
|
|
2962
2967
|
if (val === '0') {
|
|
@@ -3224,6 +3229,9 @@ function renderToken(token, options = {}, cache = Object.create(null), reducer,
|
|
|
3224
3229
|
case exports.EnumToken.Div:
|
|
3225
3230
|
return '/';
|
|
3226
3231
|
case exports.EnumToken.ColorTokenType:
|
|
3232
|
+
if (token.kin == 'light-dark') {
|
|
3233
|
+
return token.val + '(' + token.chi.reduce((acc, curr) => acc + renderToken(curr, options, cache), '') + ')';
|
|
3234
|
+
}
|
|
3227
3235
|
if (options.convertColor) {
|
|
3228
3236
|
if (token.cal == 'mix' && token.val == 'color-mix') {
|
|
3229
3237
|
const children = token.chi.reduce((acc, t) => {
|
|
@@ -3317,7 +3325,7 @@ function renderToken(token, options = {}, cache = Object.create(null), reducer,
|
|
|
3317
3325
|
return reduceHexValue(value);
|
|
3318
3326
|
}
|
|
3319
3327
|
}
|
|
3320
|
-
if (
|
|
3328
|
+
if (['hex', 'lit', 'sys', 'dpsys'].includes(token.kin)) {
|
|
3321
3329
|
return token.val;
|
|
3322
3330
|
}
|
|
3323
3331
|
if (Array.isArray(token.chi)) {
|
|
@@ -3583,6 +3591,15 @@ function isColor(token) {
|
|
|
3583
3591
|
}
|
|
3584
3592
|
let isLegacySyntax = false;
|
|
3585
3593
|
if (token.typ == exports.EnumToken.FunctionTokenType && token.chi.length > 0 && colorsFunc.includes(token.val)) {
|
|
3594
|
+
if (token.val == 'light-dark') {
|
|
3595
|
+
const children = token.chi.filter((t) => [exports.EnumToken.IdenTokenType, exports.EnumToken.NumberTokenType, exports.EnumToken.LiteralTokenType, exports.EnumToken.ColorTokenType, exports.EnumToken.FunctionTokenType, exports.EnumToken.PercentageTokenType].includes(t.typ));
|
|
3596
|
+
if (children.length != 2) {
|
|
3597
|
+
return false;
|
|
3598
|
+
}
|
|
3599
|
+
if (isColor(children[0]) && isColor(children[1])) {
|
|
3600
|
+
return true;
|
|
3601
|
+
}
|
|
3602
|
+
}
|
|
3586
3603
|
if (token.val == 'color') {
|
|
3587
3604
|
const children = token.chi.filter((t) => [exports.EnumToken.IdenTokenType, exports.EnumToken.NumberTokenType, exports.EnumToken.LiteralTokenType, exports.EnumToken.ColorTokenType, exports.EnumToken.FunctionTokenType, exports.EnumToken.PercentageTokenType].includes(t.typ));
|
|
3588
3605
|
const isRelative = children[0].typ == exports.EnumToken.IdenTokenType && children[0].val == 'from';
|
|
@@ -6572,9 +6589,9 @@ function parseString(src, options = { location: false }) {
|
|
|
6572
6589
|
}));
|
|
6573
6590
|
}
|
|
6574
6591
|
function getTokenType(val, hint) {
|
|
6575
|
-
if (val === '' && hint == null) {
|
|
6576
|
-
|
|
6577
|
-
}
|
|
6592
|
+
// if (val === '' && hint == null) {
|
|
6593
|
+
// throw new Error('empty string?');
|
|
6594
|
+
// }
|
|
6578
6595
|
if (hint != null) {
|
|
6579
6596
|
return enumTokenHints.has(hint) ? { typ: hint } : { typ: hint, val };
|
|
6580
6597
|
}
|
|
@@ -6703,6 +6720,20 @@ function getTokenType(val, hint) {
|
|
|
6703
6720
|
};
|
|
6704
6721
|
}
|
|
6705
6722
|
if (isIdent(val)) {
|
|
6723
|
+
if (systemColors.has(val.toLowerCase())) {
|
|
6724
|
+
return {
|
|
6725
|
+
typ: exports.EnumToken.ColorTokenType,
|
|
6726
|
+
val,
|
|
6727
|
+
kin: 'sys'
|
|
6728
|
+
};
|
|
6729
|
+
}
|
|
6730
|
+
if (deprecatedSystemColors.has(val.toLowerCase())) {
|
|
6731
|
+
return {
|
|
6732
|
+
typ: exports.EnumToken.ColorTokenType,
|
|
6733
|
+
val,
|
|
6734
|
+
kin: 'dpsys'
|
|
6735
|
+
};
|
|
6736
|
+
}
|
|
6706
6737
|
return {
|
|
6707
6738
|
typ: val.startsWith('--') ? exports.EnumToken.DashedIdenTokenType : exports.EnumToken.IdenTokenType,
|
|
6708
6739
|
val
|
|
@@ -6984,7 +7015,11 @@ function parseTokens(tokens, options = {}) {
|
|
|
6984
7015
|
// t.chi = t.chi.filter((t: Token) => [EnumToken.IdenTokenType, EnumToken.NumberTokenType, EnumToken.PercentageTokenType].includes(t.typ));
|
|
6985
7016
|
}
|
|
6986
7017
|
}
|
|
6987
|
-
|
|
7018
|
+
const filter = [exports.EnumToken.WhitespaceTokenType, exports.EnumToken.CommentTokenType];
|
|
7019
|
+
if (t.val != 'light-dark') {
|
|
7020
|
+
filter.push(exports.EnumToken.CommaTokenType);
|
|
7021
|
+
}
|
|
7022
|
+
t.chi = t.chi.filter((t) => !filter.includes(t.typ));
|
|
6988
7023
|
continue;
|
|
6989
7024
|
}
|
|
6990
7025
|
if (t.typ == exports.EnumToken.UrlFunctionTokenType) {
|
package/dist/index.d.ts
CHANGED
|
@@ -459,7 +459,7 @@ export declare interface ImportantToken extends BaseToken {
|
|
|
459
459
|
typ: EnumToken.ImportantTokenType;
|
|
460
460
|
}
|
|
461
461
|
|
|
462
|
-
export declare type ColorKind = 'lit' | 'hex' | 'rgb' | 'rgba' | 'hsl' | 'hsla' | 'hwb' | 'device-cmyk' | 'oklab' | 'oklch' | 'lab' | 'lch' | 'color';
|
|
462
|
+
export declare type ColorKind = 'sys' | 'dpsys' | 'lit' | 'hex' | 'rgb' | 'rgba' | 'hsl' | 'hsla' | 'hwb' | 'device-cmyk' | 'oklab' | 'oklch' | 'lab' | 'lch' | 'color' | 'light-dark';
|
|
463
463
|
|
|
464
464
|
// export declare type HueInterpolationMethod = 'shorter' | 'longer' | 'increasing' | 'decreasing';
|
|
465
465
|
|
|
@@ -820,11 +820,11 @@ export declare interface MinifyFeature {
|
|
|
820
820
|
|
|
821
821
|
ordering: number;
|
|
822
822
|
|
|
823
|
-
register
|
|
824
|
-
|
|
825
|
-
|
|
826
|
-
|
|
827
|
-
cleanup
|
|
823
|
+
register(options: MinifyOptions | ParserOptions): void;
|
|
824
|
+
|
|
825
|
+
// run(ast: AstRule | AstAtRule, options: ParserOptions = {}, parent: AstRule | AstAtRule | AstRuleStyleSheet, context: { [key: string]: any }): void;
|
|
826
|
+
|
|
827
|
+
// cleanup?(ast: AstRuleStyleSheet, options: ParserOptions = {}, context: { [key: string]: any }): void;
|
|
828
828
|
}
|
|
829
829
|
|
|
830
830
|
export declare interface MinifyFeature {
|
package/dist/lib/parser/parse.js
CHANGED
|
@@ -5,7 +5,7 @@ import { walkValues, walk } from '../ast/walk.js';
|
|
|
5
5
|
import { expand } from '../ast/expand.js';
|
|
6
6
|
import { parseDeclaration } from './utils/declaration.js';
|
|
7
7
|
import { renderToken } from '../renderer/render.js';
|
|
8
|
-
import { COLORS_NAMES } from '../renderer/color/utils/constants.js';
|
|
8
|
+
import { COLORS_NAMES, systemColors, deprecatedSystemColors } from '../renderer/color/utils/constants.js';
|
|
9
9
|
import { tokenize } from './tokenize.js';
|
|
10
10
|
|
|
11
11
|
const urlTokenMatcher = /^(["']?)[a-zA-Z0-9_/.-][a-zA-Z0-9_/:.#?-]+(\1)$/;
|
|
@@ -539,9 +539,9 @@ function parseString(src, options = { location: false }) {
|
|
|
539
539
|
}));
|
|
540
540
|
}
|
|
541
541
|
function getTokenType(val, hint) {
|
|
542
|
-
if (val === '' && hint == null) {
|
|
543
|
-
|
|
544
|
-
}
|
|
542
|
+
// if (val === '' && hint == null) {
|
|
543
|
+
// throw new Error('empty string?');
|
|
544
|
+
// }
|
|
545
545
|
if (hint != null) {
|
|
546
546
|
return enumTokenHints.has(hint) ? { typ: hint } : { typ: hint, val };
|
|
547
547
|
}
|
|
@@ -670,6 +670,20 @@ function getTokenType(val, hint) {
|
|
|
670
670
|
};
|
|
671
671
|
}
|
|
672
672
|
if (isIdent(val)) {
|
|
673
|
+
if (systemColors.has(val.toLowerCase())) {
|
|
674
|
+
return {
|
|
675
|
+
typ: EnumToken.ColorTokenType,
|
|
676
|
+
val,
|
|
677
|
+
kin: 'sys'
|
|
678
|
+
};
|
|
679
|
+
}
|
|
680
|
+
if (deprecatedSystemColors.has(val.toLowerCase())) {
|
|
681
|
+
return {
|
|
682
|
+
typ: EnumToken.ColorTokenType,
|
|
683
|
+
val,
|
|
684
|
+
kin: 'dpsys'
|
|
685
|
+
};
|
|
686
|
+
}
|
|
673
687
|
return {
|
|
674
688
|
typ: val.startsWith('--') ? EnumToken.DashedIdenTokenType : EnumToken.IdenTokenType,
|
|
675
689
|
val
|
|
@@ -951,7 +965,11 @@ function parseTokens(tokens, options = {}) {
|
|
|
951
965
|
// t.chi = t.chi.filter((t: Token) => [EnumToken.IdenTokenType, EnumToken.NumberTokenType, EnumToken.PercentageTokenType].includes(t.typ));
|
|
952
966
|
}
|
|
953
967
|
}
|
|
954
|
-
|
|
968
|
+
const filter = [EnumToken.WhitespaceTokenType, EnumToken.CommentTokenType];
|
|
969
|
+
if (t.val != 'light-dark') {
|
|
970
|
+
filter.push(EnumToken.CommaTokenType);
|
|
971
|
+
}
|
|
972
|
+
t.chi = t.chi.filter((t) => !filter.includes(t.typ));
|
|
955
973
|
continue;
|
|
956
974
|
}
|
|
957
975
|
if (t.typ == EnumToken.UrlFunctionTokenType) {
|
|
@@ -63,6 +63,15 @@ function isColor(token) {
|
|
|
63
63
|
}
|
|
64
64
|
let isLegacySyntax = false;
|
|
65
65
|
if (token.typ == EnumToken.FunctionTokenType && token.chi.length > 0 && colorsFunc.includes(token.val)) {
|
|
66
|
+
if (token.val == 'light-dark') {
|
|
67
|
+
const children = token.chi.filter((t) => [EnumToken.IdenTokenType, EnumToken.NumberTokenType, EnumToken.LiteralTokenType, EnumToken.ColorTokenType, EnumToken.FunctionTokenType, EnumToken.PercentageTokenType].includes(t.typ));
|
|
68
|
+
if (children.length != 2) {
|
|
69
|
+
return false;
|
|
70
|
+
}
|
|
71
|
+
if (isColor(children[0]) && isColor(children[1])) {
|
|
72
|
+
return true;
|
|
73
|
+
}
|
|
74
|
+
}
|
|
66
75
|
if (token.val == 'color') {
|
|
67
76
|
const children = token.chi.filter((t) => [EnumToken.IdenTokenType, EnumToken.NumberTokenType, EnumToken.LiteralTokenType, EnumToken.ColorTokenType, EnumToken.FunctionTokenType, EnumToken.PercentageTokenType].includes(t.typ));
|
|
68
77
|
const isRelative = children[0].typ == EnumToken.IdenTokenType && children[0].val == 'from';
|
|
@@ -30,6 +30,10 @@ const colorFuncColorSpace = ['srgb', 'srgb-linear', 'display-p3', 'prophoto-rgb'
|
|
|
30
30
|
const D50 = [0.3457 / 0.3585, 1.00000, (1.0 - 0.3457 - 0.3585) / 0.3585];
|
|
31
31
|
const k = Math.pow(29, 3) / Math.pow(3, 3);
|
|
32
32
|
const e = Math.pow(6, 3) / Math.pow(29, 3);
|
|
33
|
+
// color module v4
|
|
34
|
+
const systemColors = new Set(['ActiveText', 'ButtonBorder', 'ButtonFace', 'ButtonText', 'Canvas', 'CanvasText', 'Field', 'FieldText', 'GrayText', 'Highlight', 'HighlightText', 'LinkText', 'Mark', 'MarkText', 'VisitedText'].map(m => m.toLowerCase()));
|
|
35
|
+
// deprecated
|
|
36
|
+
const deprecatedSystemColors = new Set(['ActiveBorder', 'ActiveCaption', 'AppWorkspace', 'Background', 'ButtonFace', 'ButtonHighlight', 'ButtonShadow', 'ButtonText', 'CaptionText', 'GrayText', 'Highlight', 'HighlightText', 'InactiveBorder', 'InactiveCaption', 'InactiveCaptionText', 'InfoBackground', 'InfoText', 'Menu', 'MenuText', 'Scrollbar', 'ThreeDDarkShadow', 'ThreeDFace', 'ThreeDHighlight', 'ThreeDLightShadow', 'ThreeDShadow', 'Window', 'WindowFrame', 'WindowText'].map(t => t.toLowerCase()));
|
|
33
37
|
// name to color
|
|
34
38
|
const COLORS_NAMES = Object.seal({
|
|
35
39
|
'aliceblue': '#f0f8ff',
|
|
@@ -188,4 +192,4 @@ const NAMES_COLORS = Object.seal(Object.entries(COLORS_NAMES).reduce((acc, [key,
|
|
|
188
192
|
return acc;
|
|
189
193
|
}, Object.create(null)));
|
|
190
194
|
|
|
191
|
-
export { COLORS_NAMES, D50, NAMES_COLORS, colorFuncColorSpace, colorRange, e, k };
|
|
195
|
+
export { COLORS_NAMES, D50, NAMES_COLORS, colorFuncColorSpace, colorRange, deprecatedSystemColors, e, k, systemColors };
|
|
@@ -11,7 +11,7 @@ import { SourceMap } from './sourcemap/sourcemap.js';
|
|
|
11
11
|
import '../parser/parse.js';
|
|
12
12
|
import { isColor, isNewLine } from '../parser/utils/syntax.js';
|
|
13
13
|
|
|
14
|
-
const colorsFunc = ['rgb', 'rgba', 'hsl', 'hsla', 'hwb', 'device-cmyk', 'color-mix', 'color', 'oklab', 'lab', 'oklch', 'lch'];
|
|
14
|
+
const colorsFunc = ['rgb', 'rgba', 'hsl', 'hsla', 'hwb', 'device-cmyk', 'color-mix', 'color', 'oklab', 'lab', 'oklch', 'lch', 'light-dark'];
|
|
15
15
|
function reduceNumber(val) {
|
|
16
16
|
val = String(+val);
|
|
17
17
|
if (val === '0') {
|
|
@@ -279,6 +279,9 @@ function renderToken(token, options = {}, cache = Object.create(null), reducer,
|
|
|
279
279
|
case EnumToken.Div:
|
|
280
280
|
return '/';
|
|
281
281
|
case EnumToken.ColorTokenType:
|
|
282
|
+
if (token.kin == 'light-dark') {
|
|
283
|
+
return token.val + '(' + token.chi.reduce((acc, curr) => acc + renderToken(curr, options, cache), '') + ')';
|
|
284
|
+
}
|
|
282
285
|
if (options.convertColor) {
|
|
283
286
|
if (token.cal == 'mix' && token.val == 'color-mix') {
|
|
284
287
|
const children = token.chi.reduce((acc, t) => {
|
|
@@ -372,7 +375,7 @@ function renderToken(token, options = {}, cache = Object.create(null), reducer,
|
|
|
372
375
|
return reduceHexValue(value);
|
|
373
376
|
}
|
|
374
377
|
}
|
|
375
|
-
if (
|
|
378
|
+
if (['hex', 'lit', 'sys', 'dpsys'].includes(token.kin)) {
|
|
376
379
|
return token.val;
|
|
377
380
|
}
|
|
378
381
|
if (Array.isArray(token.chi)) {
|
package/dist/node/index.js
CHANGED
package/dist/web/load.js
CHANGED
package/jsr.json
ADDED
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@tbela99/css-parser",
|
|
3
|
+
"version": "0.6.0",
|
|
4
|
+
"publish": {
|
|
5
|
+
"exclude": [
|
|
6
|
+
"dist",
|
|
7
|
+
"test",
|
|
8
|
+
".gitattributes",
|
|
9
|
+
".github",
|
|
10
|
+
".idea",
|
|
11
|
+
".npmignore",
|
|
12
|
+
".npmrc",
|
|
13
|
+
"tsconfig.json",
|
|
14
|
+
"Writerside",
|
|
15
|
+
"build.sh",
|
|
16
|
+
"docs",
|
|
17
|
+
"package-lock.json",
|
|
18
|
+
"CHANGELOG.md",
|
|
19
|
+
"ROADMAP.md",
|
|
20
|
+
"rollup.config.js",
|
|
21
|
+
"tools"
|
|
22
|
+
]
|
|
23
|
+
},
|
|
24
|
+
"exports": {
|
|
25
|
+
".": "./src/node/index.ts",
|
|
26
|
+
"./node": "./src/node/index.ts",
|
|
27
|
+
"./web": "./src/web/index.ts"
|
|
28
|
+
}
|
|
29
|
+
}
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@tbela99/css-parser",
|
|
3
3
|
"description": "CSS parser for node and the browser",
|
|
4
|
-
"version": "0.
|
|
4
|
+
"version": "0.6.0",
|
|
5
5
|
"exports": {
|
|
6
6
|
".": "./dist/node/index.js",
|
|
7
7
|
"./umd": "./dist/index-umd-web.js",
|
|
@@ -55,12 +55,13 @@
|
|
|
55
55
|
"@rollup/plugin-typescript": "^11.1.6",
|
|
56
56
|
"@types/chai": "^4.3.12",
|
|
57
57
|
"@types/mocha": "^10.0.6",
|
|
58
|
-
"@types/node": "^20.11
|
|
58
|
+
"@types/node": "^20.14.11",
|
|
59
|
+
"@types/web": "^0.0.151",
|
|
59
60
|
"@web/test-runner": "^0.18.1",
|
|
60
61
|
"@web/test-runner-playwright": "^0.11.0",
|
|
61
62
|
"c8": "^9.1.0",
|
|
62
63
|
"mocha": "^10.4.0",
|
|
63
|
-
"playwright": "^1.
|
|
64
|
+
"playwright": "^1.45.2",
|
|
64
65
|
"rollup": "^4.13.0",
|
|
65
66
|
"rollup-plugin-dts": "^6.1.0",
|
|
66
67
|
"tslib": "^2.6.2"
|