Skip to content

Commit 919251f

Browse files
tbela99tbela99
committed
bump version number
1 parent 4c4034a commit 919251f

File tree

10 files changed

+347
-5
lines changed

10 files changed

+347
-5
lines changed

‎dist/index-umd-web.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -830,7 +830,7 @@
830830
if (token.typ == 'Func' && token.chi.length > 0 && colorsFunc.includes(token.val)) {
831831
// @ts-ignore
832832
for (const v of token.chi) {
833-
if (!['Number', 'Perc', 'Comma', 'Whitespace'].includes(v.typ)) {
833+
if (!['Number', 'Angle', 'Perc', 'Comma', 'Whitespace', 'Literal'].includes(v.typ)) {
834834
return false;
835835
}
836836
}

‎dist/index.cjs‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -828,7 +828,7 @@ function isColor(token) {
828828
if (token.typ == 'Func' && token.chi.length > 0 && colorsFunc.includes(token.val)) {
829829
// @ts-ignore
830830
for (const v of token.chi) {
831-
if (!['Number', 'Perc', 'Comma', 'Whitespace'].includes(v.typ)) {
831+
if (!['Number', 'Angle', 'Perc', 'Comma', 'Whitespace', 'Literal'].includes(v.typ)) {
832832
return false;
833833
}
834834
}

‎dist/lib/parser/utils/syntax.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,7 @@ function isColor(token) {
3737
if (token.typ == 'Func' && token.chi.length > 0 && colorsFunc.includes(token.val)) {
3838
// @ts-ignore
3939
for (const v of token.chi) {
40-
if (!['Number', 'Perc', 'Comma', 'Whitespace'].includes(v.typ)) {
40+
if (!['Number', 'Angle', 'Perc', 'Comma', 'Whitespace', 'Literal'].includes(v.typ)) {
4141
return false;
4242
}
4343
}

‎src/lib/parser/utils/syntax.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -55,7 +55,7 @@ export function isColor(token: Token): boolean {
5555
// @ts-ignore
5656
for (const v of token.chi) {
5757

58-
if (!['Number', 'Perc', 'Comma', 'Whitespace'].includes(v.typ)) {
58+
if (!['Number', 'Angle', 'Perc', 'Comma', 'Whitespace', 'Literal'].includes(v.typ)) {
5959

6060
return false;
6161
}

‎src/lib/renderer/utils/color.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -501,7 +501,7 @@ export function getAngle(token: NumberToken | AngleToken): number {
501501
}
502502

503503
// @ts-ignore
504-
return token.val / 360
504+
return token.val / 360;
505505
}
506506

507507
function hsl2rgb(h: number, s: number, l: number, a: number | null = null) {

‎test/specs/angle.spec.js‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,4 +8,8 @@ describe('Parse angle', function () {
88
return transform(`
99
.transform { transform: rotate(0.75turn, 2.356194rad, 100grad); }`).then(result => f(result.code).equals(`.transform{transform:rotate(270deg,2.356194rad,90deg)}`));
1010
});
11+
it('angle #1', function () {
12+
return transform(`
13+
.transform { transform: rotate(0.75turn, 2.356194rad, 100grad); }`).then(result => f(result.code).equals(`.transform{transform:rotate(270deg,2.356194rad,90deg)}`));
14+
});
1115
});

‎test/specs/color.spec.js‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,31 @@ describe('Parse color', function () {
2424
it('hwb #4', function () {
2525
return parse(`.hwb { color: hwb(195, 0%, 0%, 50%); }`).then(result => f(render(result.ast, {minify: false}).code).equals(`.hwb {
2626
color: #00bfff80
27+
}`));
28+
});
29+
30+
it('hsl #5', function () {
31+
return parse(`a {
32+
color: hsl(300deg 100% 50% / 1);
33+
`).then(result => f(render(result.ast, {minify: false}).code).equals(`a {
34+
color: #f0f
35+
}`));
36+
});
37+
38+
it('device-cmyk #6', function () {
39+
return parse(`a {
40+
color: device-cmyk(0 81% 81% 30%);
41+
`).then(result => f(render(result.ast, {minify: false}).code).equals(`a {
42+
color: #b32222
43+
}`));
44+
});
45+
46+
it('hwb #7', function () {
47+
return parse(`
48+
a {
49+
color: hwb(3.1416rad 0% 0% / 100%)
50+
`).then(result => f(render(result.ast, {minify: false}).code).equals(`a {
51+
color: cyan
2752
}`));
2853
});
2954
});

‎test/specs/color.web-spec.js‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,31 @@ describe('Parse color', function () {
2424
it('hwb #4', function () {
2525
return parse(`.hwb { color: hwb(195, 0%, 0%, 50%); }`).then(result => f(render(result.ast, {minify: false}).code).equals(`.hwb {
2626
color: #00bfff80
27+
}`));
28+
});
29+
30+
it('hsl #5', function () {
31+
return parse(`a {
32+
color: hsl(300deg 100% 50% / 1);
33+
`).then(result => f(render(result.ast, {minify: false}).code).equals(`a {
34+
color: #f0f
35+
}`));
36+
});
37+
38+
it('device-cmyk #6', function () {
39+
return parse(`a {
40+
color: device-cmyk(0 81% 81% 30%);
41+
`).then(result => f(render(result.ast, {minify: false}).code).equals(`a {
42+
color: #b32222
43+
}`));
44+
});
45+
46+
it('hwb #7', function () {
47+
return parse(`
48+
a {
49+
color: hwb(3.1416rad 0% 0% / 100%)
50+
`).then(result => f(render(result.ast, {minify: false}).code).equals(`a {
51+
color: cyan
2752
}`));
2853
});
2954
});

‎test/specs/expand.web-spec.js‎

Lines changed: 253 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,253 @@
1+
/* generate from test/specs/nesting.spec.ts */
2+
import {expect as f} from '../../node_modules/@esm-bundle/chai/esm/chai.js';
3+
import {parse, render} from '../../dist/web/index.js';
4+
5+
describe('flatten nested css rules', function () {
6+
it('flatten #1', function () {
7+
const nesting1 = `
8+
9+
.foo {
10+
color: blue;
11+
&Bar { color: red; }
12+
}
13+
`;
14+
return parse(nesting1, {
15+
minify: true, nestingRules: true
16+
}).then((result) => f(render(result.ast, {minify: false, expandNestingRules: true}).code).equals(`.foo {
17+
color: blue
18+
}
19+
Bar.foo {
20+
color: red
21+
}`));
22+
});
23+
24+
it('flatten #2', function () {
25+
const nesting1 = `
26+
.header {
27+
background-color: blue;
28+
& p {
29+
font-size: 16px;
30+
& span {
31+
&:hover {
32+
color: green
33+
}
34+
}
35+
}
36+
}
37+
`;
38+
return parse(nesting1, {
39+
minify: true, nestingRules: true
40+
}).then((result) => f(render(result.ast, {minify: false, expandNestingRules: true}).code).equals(`.header {
41+
background-color: blue
42+
}
43+
.header p {
44+
font-size: 16px
45+
}
46+
.header p span:hover {
47+
color: green
48+
}`));
49+
});
50+
51+
it('flatten with at-rule #3', function () {
52+
const nesting1 = `
53+
.foo {
54+
display: grid;
55+
56+
@media (orientation: landscape) {
57+
& {
58+
grid-auto-flow: column;
59+
}
60+
}
61+
}
62+
`;
63+
return parse(nesting1, {
64+
minify: true, nestingRules: true
65+
}).then((result) => f(render(result.ast, {minify: false, expandNestingRules: true}).code).equals(`.foo {
66+
display: grid
67+
}
68+
@media (orientation:landscape) {
69+
.foo {
70+
grid-auto-flow: column
71+
}
72+
}`));
73+
});
74+
75+
it('flatten with at-rule #4', function () {
76+
const nesting1 = `
77+
.foo {
78+
display: grid;
79+
80+
@media (orientation: landscape) {
81+
grid-auto-flow: column;
82+
}
83+
}
84+
`;
85+
return parse(nesting1, {
86+
minify: true, nestingRules: true
87+
}).then((result) => f(render(result.ast, {minify: false, expandNestingRules: true}).code).equals(`.foo {
88+
display: grid
89+
}
90+
@media (orientation:landscape) {
91+
.foo {
92+
grid-auto-flow: column
93+
}
94+
}`));
95+
});
96+
97+
it('flatten with at-rule #5', function () {
98+
const nesting1 = `
99+
.foo {
100+
display: grid;
101+
102+
@media (orientation: landscape) {
103+
grid-auto-flow: column;
104+
105+
@media (min-width > 1024px) {
106+
max-inline-size: 1024px;
107+
}
108+
}
109+
}
110+
`;
111+
return parse(nesting1, {
112+
minify: true, nestingRules: true
113+
}).then((result) => f(render(result.ast, {minify: false, expandNestingRules: true}).code).equals(`.foo {
114+
display: grid
115+
}
116+
@media (orientation:landscape) {
117+
.foo {
118+
grid-auto-flow: column
119+
}
120+
}
121+
@media (orientation:landscape) and (min-width >1024px) {
122+
.foo {
123+
max-inline-size: 1024px
124+
}
125+
}`));
126+
});
127+
128+
it('flatten with at-rule #6', function () {
129+
const nesting1 = `
130+
html {
131+
@layer base {
132+
block-size: 100%;
133+
134+
@layer support {
135+
& body {
136+
min-block-size: 100%;
137+
}
138+
}
139+
}
140+
}
141+
`;
142+
return parse(nesting1, {
143+
minify: true, nestingRules: true
144+
}).then((result) => f(render(result.ast, {minify: false, expandNestingRules: true}).code).equals(`@layer base {
145+
html {
146+
block-size: 100%
147+
}
148+
}
149+
@layer base.support {
150+
html body {
151+
min-block-size: 100%
152+
}
153+
}`));
154+
});
155+
156+
it('flatten with at-rule #7', function () {
157+
const nesting1 = `
158+
html {
159+
@layer base {
160+
block-size: 100%;
161+
162+
@layer support {
163+
body {
164+
min-block-size: 100%;
165+
}
166+
}
167+
}
168+
}
169+
`;
170+
return parse(nesting1, {
171+
minify: true, nestingRules: true
172+
}).then((result) => f(render(result.ast, {minify: false, expandNestingRules: true}).code).equals(`@layer base {
173+
html {
174+
block-size: 100%
175+
}
176+
}
177+
@layer base.support {
178+
html body {
179+
min-block-size: 100%
180+
}
181+
}`));
182+
});
183+
184+
it('flatten with at-rule #8', function () {
185+
const nesting1 = `
186+
.card {
187+
inline-size: 40ch;
188+
aspect-ratio: 3/4;
189+
190+
@scope (&) {
191+
:scope {
192+
border: 1px solid white;
193+
}
194+
}
195+
}
196+
`;
197+
return parse(nesting1, {
198+
minify: true, nestingRules: true
199+
}).then((result) => f(render(result.ast, {minify: false, expandNestingRules: true}).code).equals(`.card {
200+
inline-size: 40ch;
201+
aspect-ratio: 3/4
202+
}
203+
@scope (.card) {
204+
:scope {
205+
border: 1px solid #fff
206+
}
207+
}`));
208+
});
209+
210+
it('flatten with at-rule #9', function () {
211+
const nesting1 = `
212+
.foo {
213+
color: blue;
214+
&& { padding: 2ch; }
215+
}
216+
`;
217+
return parse(nesting1, {
218+
minify: true, nestingRules: true
219+
}).then((result) => f(render(result.ast, {minify: false, expandNestingRules: true}).code).equals(`.foo {
220+
color: blue
221+
}
222+
.foo.foo {
223+
padding: 2ch
224+
}`));
225+
});
226+
227+
it('flatten with at-rule #10', function () {
228+
const nesting1 = `
229+
230+
@scope (.card) to (> header) {
231+
:scope {
232+
inline-size: 40ch;
233+
aspect-ratio: 3/4;
234+
235+
> header {
236+
border-block-end: 1px solid white;
237+
}
238+
}
239+
}
240+
`;
241+
return parse(nesting1, {
242+
minify: true, nestingRules: true
243+
}).then((result) => f(render(result.ast, {minify: false, expandNestingRules: true}).code).equals(`@scope (.card) to (>header) {
244+
:scope {
245+
inline-size: 40ch;
246+
aspect-ratio: 3/4
247+
}
248+
:scope>header {
249+
border-block-end: 1px solid #fff
250+
}
251+
}`));
252+
});
253+
});

0 commit comments

Comments
 (0)