Skip to content

Commit 089a4f1

Browse files
1aron1aron
committed
Refactor prerender functionality and add comprehensive Playwright tests for CSS layers
1 parent ee56dcf commit 089a4f1

File tree

14 files changed

+230
-13
lines changed

14 files changed

+230
-13
lines changed

Diff for: ‎packages/runtime/e2e/prerender.ts

-6
This file was deleted.

Diff for: ‎packages/runtime/e2e/progressive/comprehensive/index.test.ts

+18
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
import { expect, test } from '@playwright/test'
2+
import init from '../../init'
3+
import config from './master.css'
4+
import { readFileSync } from 'fs'
5+
import { fileURLToPath } from 'url'
6+
import { dirname, resolve } from 'path'
7+
8+
const __filename = fileURLToPath(import.meta.url)
9+
const __dirname = dirname(__filename)
10+
11+
test('basic', async ({ page }) => {
12+
const prerenderCSS = readFileSync(resolve(__dirname, 'prerender.css'), 'utf-8')
13+
const prerenderHTML = readFileSync(resolve(__dirname, 'prerender.html'), 'utf-8')
14+
await page.evaluate((html) => document.body.innerHTML = html, prerenderHTML)
15+
await init(page, prerenderCSS, config)
16+
const rules = await page.evaluate(() => globalThis.runtimeCSS.rules)
17+
expect(rules.map(({ name }) => name)).toEqual(['layer-statement', 'base', 'theme', 'preset', 'styles', 'general'])
18+
})

Diff for: ‎packages/runtime/e2e/progressive/comprehensive/master.css.ts

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import { Config } from '@master/css'
2+
3+
export default {
4+
variables: {
5+
primary: {
6+
'@light': '#000000',
7+
'@dark': '#ffffff'
8+
}
9+
},
10+
styles: {
11+
btn: 'inline-flex bg:primary'
12+
}
13+
} satisfies Config

Diff for: ‎packages/runtime/e2e/progressive/comprehensive/prerender.css

+53
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
@layer base, theme, preset, styles, general;
2+
3+
@layer base {
4+
.list-style\:none_ul\@base ul {
5+
list-style: none
6+
}
7+
}
8+
9+
@layer theme {
10+
11+
.light,
12+
:root {
13+
--primary: 0 0 0
14+
}
15+
16+
.dark {
17+
--primary: 255 255 255
18+
}
19+
}
20+
21+
@layer preset {
22+
.text\:16_p\@preset p {
23+
font-size: 1rem;
24+
line-height: calc(1rem + 0.875em)
25+
}
26+
}
27+
28+
@layer styles {
29+
.btn {
30+
display: inline-flex;
31+
background-color: rgb(var(--primary))
32+
}
33+
}
34+
35+
@layer general {
36+
.flex {
37+
display: flex
38+
}
39+
40+
.\@fade\|1s {
41+
animation: fade 1s
42+
}
43+
}
44+
45+
@keyframes fade {
46+
0% {
47+
opacity: 0
48+
}
49+
50+
to {
51+
opacity: 1
52+
}
53+
}

Diff for: ‎packages/runtime/e2e/progressive/comprehensive/prerender.html

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
<div class="list-style:none_ul@base">
2+
<button class="btn flex">Submit</button>
3+
<ul class="@fade|1s">…</ul>
4+
<article class="text:16_p@preset">
5+
<p>…</p>
6+
</article>
7+
</div>

Diff for: ‎packages/runtime/e2e/progressive/default-mode.test.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import init from '../init'
55

66
test('prerender', async ({ page }) => {
77
const text = css_beautify(`
8-
@layer theme{
8+
@layer theme {
99
:root { --base: 0 0 0; }
1010
.dark { --base: 34 33 35; }
1111
.light, :root { --base: 255 255 255; }

Diff for: ‎packages/runtime/package.json

+2-2
Original file line numberDiff line numberDiff line change
@@ -56,7 +56,7 @@
5656
"@master/css": "workspace:^"
5757
},
5858
"devDependencies": {
59-
"shared": "workspace:^",
60-
"@playwright/test": "1.41.2"
59+
"@playwright/test": "1.41.2",
60+
"shared": "workspace:^"
6161
}
6262
}

Diff for: ‎packages/runtime/playground/.gitignore

+24
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
# Logs
2+
logs
3+
*.log
4+
npm-debug.log*
5+
yarn-debug.log*
6+
yarn-error.log*
7+
pnpm-debug.log*
8+
lerna-debug.log*
9+
10+
node_modules
11+
dist
12+
dist-ssr
13+
*.local
14+
15+
# Editor directories and files
16+
.vscode/*
17+
!.vscode/extensions.json
18+
.idea
19+
.DS_Store
20+
*.suo
21+
*.ntvs*
22+
*.njsproj
23+
*.sln
24+
*.sw?

Diff for: ‎packages/runtime/playground/index.html

+71
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
<!doctype html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>Vite + TS</title>
8+
<style id="master">
9+
@layer base, theme, preset, styles, general;
10+
11+
@layer base {
12+
.list-style\:none_ul\@base ul {
13+
list-style: none
14+
}
15+
}
16+
17+
@layer theme {
18+
19+
.light,
20+
:root {
21+
--primary: 0 0 0
22+
}
23+
24+
.dark {
25+
--primary: 255 255 255
26+
}
27+
}
28+
29+
@layer preset {
30+
.text\:16_p\@preset p {
31+
font-size: 1rem;
32+
line-height: calc(1rem + 0.875em)
33+
}
34+
}
35+
36+
@layer styles {
37+
.btn {
38+
display: inline-flex;
39+
background-color: rgb(var(--primary))
40+
}
41+
}
42+
43+
@layer general {
44+
.flex {
45+
display: flex
46+
}
47+
48+
.\@fade\|1s {
49+
animation: fade 1s
50+
}
51+
}
52+
53+
@keyframes fade {
54+
0% {
55+
opacity: 0
56+
}
57+
58+
to {
59+
opacity: 1
60+
}
61+
}
62+
</style>
63+
</head>
64+
65+
<body>
66+
<div id="app"></div>
67+
<script type="module" src="/src/main.ts"></script>
68+
<h1>Hello World</h1>
69+
</body>
70+
71+
</html>

Diff for: ‎packages/runtime/playground/package.json

+15
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
{
2+
"name": "playground",
3+
"private": true,
4+
"version": "0.0.0",
5+
"type": "module",
6+
"scripts": {
7+
"dev": "vite",
8+
"build": "tsc && vite build",
9+
"preview": "vite preview"
10+
},
11+
"devDependencies": {
12+
"typescript": "~5.6.2",
13+
"vite": "^6.0.5"
14+
}
15+
}

Diff for: ‎packages/runtime/playground/src/main.ts

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
import '../../src/global.min'

Diff for: ‎packages/runtime/playground/src/vite-env.d.ts

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
/// <reference types="vite/client" />

Diff for: ‎packages/runtime/playground/tsconfig.json

+24
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
{
2+
"compilerOptions": {
3+
"target": "ES2020",
4+
"useDefineForClassFields": true,
5+
"module": "ESNext",
6+
"lib": ["ES2020", "DOM", "DOM.Iterable"],
7+
"skipLibCheck": true,
8+
9+
/* Bundler mode */
10+
"moduleResolution": "bundler",
11+
"allowImportingTsExtensions": true,
12+
"isolatedModules": true,
13+
"moduleDetection": "force",
14+
"noEmit": true,
15+
16+
/* Linting */
17+
"strict": true,
18+
"noUnusedLocals": true,
19+
"noUnusedParameters": true,
20+
"noFallthroughCasesInSwitch": true,
21+
"noUncheckedSideEffectImports": true
22+
},
23+
"include": ["src"]
24+
}

Diff for: ‎packages/runtime/src/core.ts

-4
Original file line numberDiff line numberDiff line change
@@ -99,8 +99,6 @@ export class RuntimeCSS extends MasterCSS {
9999
if (syntaxRule) {
100100
if (!layer.rules.includes(syntaxRule)) {
101101
layer.rules.push(syntaxRule)
102-
this.themeLayer.insert(syntaxRule)
103-
this.animationsNonLayer.insert(syntaxRule)
104102
syntaxRule.definition.insert?.call(syntaxRule)
105103
}
106104
for (const eachNode of syntaxRule.nodes) {
@@ -211,8 +209,6 @@ export class RuntimeCSS extends MasterCSS {
211209
node.native = cssRule
212210
if (!this.stylesLayer.rules.includes(eachSyntaxRule)) {
213211
this.stylesLayer.rules.push(eachSyntaxRule)
214-
this.themeLayer.insert(eachSyntaxRule)
215-
this.animationsNonLayer.insert(eachSyntaxRule)
216212
eachSyntaxRule.definition.insert?.call(eachSyntaxRule)
217213
}
218214
matched = true

0 commit comments

Comments
 (0)