Skip to content

Commit 981cdeb

Browse files
bezoerbbezoerb
committed
adds tests for modern css & require node 20
1 parent 1d1e618 commit 981cdeb

File tree

9 files changed

+209
-25
lines changed

9 files changed

+209
-25
lines changed

‎.github/workflows/test.yml‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ jobs:
1313
strategy:
1414
fail-fast: false
1515
matrix:
16-
node: [18, 20]
16+
node: [20.19.0, 22.12.0]
1717
os: [ubuntu-latest, windows-latest]
1818

1919
steps:

‎.gitignore‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
/coverage/
2+
.cursor/temp
23
/node_modules/
34
/test/fixture/bower_components/bootstrap/dist/css/*
45
/test/fixture/test-*

‎package-lock.json‎

Lines changed: 4 additions & 23 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@
2929
"optimization"
3030
],
3131
"engines": {
32-
"node": ">=18.18"
32+
"node": "^20.19.0 || >=22.12.0"
3333
},
3434
"dependencies": {
3535
"@adobe/css-tools": "^4.4.0",

‎test/blackbox.test.js‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -985,6 +985,23 @@ describe('generate (local)', () => {
985985
assertCritical(target, expected, done)
986986
);
987987
});
988+
989+
test('issue #580 - preserve modern CSS features (@container, @layer, :where, :has)', (done) => {
990+
const expected = read('expected/modern-css-features.css');
991+
const target = path.join(__dirname, '.modern-css-features.css');
992+
993+
generate(
994+
{
995+
base: FIXTURES_DIR,
996+
src: 'modern-css-features.html',
997+
target,
998+
inline: false,
999+
width: 1300,
1000+
height: 900,
1001+
},
1002+
assertCritical(target, expected, done)
1003+
);
1004+
});
9881005
});
9891006

9901007
describe('generate (remote)', () => {

‎test/core.test.js‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -96,3 +96,26 @@ test('Generate critical-path CSS with custom cleancss config', async () => {
9696
}
9797
}
9898
});
99+
100+
test('Generate critical-path CSS with modern CSS features', async () => {
101+
const css = read('expected/modern-css-features.css');
102+
const html = read('fixtures/modern-css-features.html');
103+
104+
try {
105+
const result = await create({
106+
src: `http://localhost:${port}/modern-css-features.html`,
107+
width: 1300,
108+
height: 900,
109+
});
110+
111+
// Verify modern CSS features are preserved
112+
expect(result.css).toContain('@container');
113+
expect(result.css).toContain('@layer');
114+
expect(result.css).toContain(':where');
115+
expect(result.css).toContain(':has');
116+
expect(result.css).toBe(css);
117+
expect(result.html).toBe(html);
118+
} catch (error) {
119+
expect(error).toBe(undefined);
120+
}
121+
});

‎test/expected/modern-css-features.css‎

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎test/fixtures/modern-css-features.html‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
7+
<title>Modern CSS Features</title>
8+
<link rel="stylesheet" href="styles/modern-css-features.css" />
9+
</head>
10+
<body>
11+
<header class="site-header">
12+
<h1>Modern CSS Features Test</h1>
13+
<p class="tagline">Testing @container, @layer, :where, and :has</p>
14+
</header>
15+
16+
<div class="container">
17+
<div class="card">
18+
<img src="images/critical.png" alt="Card image" />
19+
<h2>Card with Image</h2>
20+
<p>This card demonstrates @container queries and :has selector.</p>
21+
</div>
22+
23+
<div class="card">
24+
<h2>Card without Image</h2>
25+
<p>This card shows different styling without an image.</p>
26+
</div>
27+
</div>
28+
29+
<article>
30+
<h2>Article Title</h2>
31+
<p>Article content demonstrating :where selector.</p>
32+
</article>
33+
34+
<section>
35+
<h2>Section Title</h2>
36+
<p>Section content also using :where selector.</p>
37+
</section>
38+
</body>
39+
</html>
40+

‎test/fixtures/styles/modern-css-features.css‎

Lines changed: 121 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,121 @@
1+
/* @layer - Cascade Layers */
2+
@layer base {
3+
body {
4+
margin: 0;
5+
padding: 0;
6+
font-family: system-ui, sans-serif;
7+
line-height: 1.5;
8+
background: #f5f5f5;
9+
}
10+
11+
/* :where - Zero specificity selector */
12+
:where(h1, h2) {
13+
margin: 0;
14+
font-weight: 600;
15+
}
16+
17+
:where(p) {
18+
margin: 0;
19+
}
20+
}
21+
22+
@layer theme {
23+
.site-header {
24+
background: #2c3e50;
25+
color: #fff;
26+
padding: 2rem;
27+
margin-bottom: 1rem;
28+
}
29+
30+
.site-header h1 {
31+
font-size: 2rem;
32+
color: #ecf0f1;
33+
}
34+
35+
.tagline {
36+
color: #bdc3c7;
37+
font-size: 1rem;
38+
margin-top: 0.5rem;
39+
}
40+
41+
/* @container - Container Queries */
42+
.container {
43+
container-type: inline-size;
44+
width: 100%;
45+
padding: 1rem;
46+
}
47+
48+
.card {
49+
background: white;
50+
padding: 1.5rem;
51+
margin-bottom: 1rem;
52+
border-radius: 8px;
53+
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
54+
}
55+
56+
/* :has - Relational selector */
57+
.card:has(img) {
58+
display: grid;
59+
grid-template-columns: 150px 1fr;
60+
gap: 1rem;
61+
background: #e3f2fd;
62+
border-left: 4px solid #2196f3;
63+
}
64+
65+
.card:has(img) img {
66+
width: 100%;
67+
height: auto;
68+
border-radius: 4px;
69+
}
70+
71+
.card:not(:has(img)) {
72+
background: #fff3e0;
73+
border-left: 4px solid #ff9800;
74+
}
75+
76+
.card h2 {
77+
color: #333;
78+
font-size: 1.25rem;
79+
margin-bottom: 0.5rem;
80+
}
81+
82+
.card p {
83+
color: #666;
84+
line-height: 1.6;
85+
}
86+
87+
/* Container query for responsive card layout */
88+
@container (min-width: 500px) {
89+
.card {
90+
padding: 2rem;
91+
}
92+
93+
.card h2 {
94+
font-size: 1.5rem;
95+
}
96+
97+
.card:has(img) {
98+
grid-template-columns: 200px 1fr;
99+
}
100+
}
101+
102+
/* :where with article and section */
103+
:where(article, section) {
104+
padding: 1.5rem;
105+
margin-bottom: 1rem;
106+
background: #fff;
107+
border-radius: 4px;
108+
}
109+
110+
:where(article h2, section h2) {
111+
color: #2c3e50;
112+
font-size: 1.5rem;
113+
margin-bottom: 1rem;
114+
}
115+
116+
:where(article p, section p) {
117+
color: #34495e;
118+
font-size: 1rem;
119+
}
120+
}
121+

0 commit comments

Comments
 (0)