From 089a4f1d7aa26f3a89e0365e569c5709ae3b78ee Mon Sep 17 00:00:00 2001 From: Aron Date: Fri, 17 Jan 2025 20:38:16 +0800 Subject: [PATCH] Refactor prerender functionality and add comprehensive Playwright tests for CSS layers --- packages/runtime/e2e/prerender.ts | 6 -- .../progressive/comprehensive/index.test.ts | 18 +++++ .../progressive/comprehensive/master.css.ts | 13 ++++ .../progressive/comprehensive/prerender.css | 53 ++++++++++++++ .../progressive/comprehensive/prerender.html | 7 ++ .../e2e/progressive/default-mode.test.ts | 2 +- packages/runtime/package.json | 4 +- packages/runtime/playground/.gitignore | 24 +++++++ packages/runtime/playground/index.html | 71 +++++++++++++++++++ packages/runtime/playground/package.json | 15 ++++ packages/runtime/playground/src/main.ts | 1 + packages/runtime/playground/src/vite-env.d.ts | 1 + packages/runtime/playground/tsconfig.json | 24 +++++++ packages/runtime/src/core.ts | 4 -- 14 files changed, 230 insertions(+), 13 deletions(-) delete mode 100644 packages/runtime/e2e/prerender.ts create mode 100644 packages/runtime/e2e/progressive/comprehensive/index.test.ts create mode 100644 packages/runtime/e2e/progressive/comprehensive/master.css.ts create mode 100644 packages/runtime/e2e/progressive/comprehensive/prerender.css create mode 100644 packages/runtime/e2e/progressive/comprehensive/prerender.html create mode 100644 packages/runtime/playground/.gitignore create mode 100644 packages/runtime/playground/index.html create mode 100644 packages/runtime/playground/package.json create mode 100644 packages/runtime/playground/src/main.ts create mode 100644 packages/runtime/playground/src/vite-env.d.ts create mode 100644 packages/runtime/playground/tsconfig.json diff --git a/packages/runtime/e2e/prerender.ts b/packages/runtime/e2e/prerender.ts deleted file mode 100644 index ac1ae759f..000000000 --- a/packages/runtime/e2e/prerender.ts +++ /dev/null @@ -1,6 +0,0 @@ -export default function prerender({ output }: { output: string }) { - const style = document.createElement('style') - style.id = 'master' - style.textContent = output - document.head.appendChild(style) -} \ No newline at end of file diff --git a/packages/runtime/e2e/progressive/comprehensive/index.test.ts b/packages/runtime/e2e/progressive/comprehensive/index.test.ts new file mode 100644 index 000000000..e94634128 --- /dev/null +++ b/packages/runtime/e2e/progressive/comprehensive/index.test.ts @@ -0,0 +1,18 @@ +import { expect, test } from '@playwright/test' +import init from '../../init' +import config from './master.css' +import { readFileSync } from 'fs' +import { fileURLToPath } from 'url' +import { dirname, resolve } from 'path' + +const __filename = fileURLToPath(import.meta.url) +const __dirname = dirname(__filename) + +test('basic', async ({ page }) => { + const prerenderCSS = readFileSync(resolve(__dirname, 'prerender.css'), 'utf-8') + const prerenderHTML = readFileSync(resolve(__dirname, 'prerender.html'), 'utf-8') + await page.evaluate((html) => document.body.innerHTML = html, prerenderHTML) + await init(page, prerenderCSS, config) + const rules = await page.evaluate(() => globalThis.runtimeCSS.rules) + expect(rules.map(({ name }) => name)).toEqual(['layer-statement', 'base', 'theme', 'preset', 'styles', 'general']) +}) diff --git a/packages/runtime/e2e/progressive/comprehensive/master.css.ts b/packages/runtime/e2e/progressive/comprehensive/master.css.ts new file mode 100644 index 000000000..e837a74bf --- /dev/null +++ b/packages/runtime/e2e/progressive/comprehensive/master.css.ts @@ -0,0 +1,13 @@ +import { Config } from '@master/css' + +export default { + variables: { + primary: { + '@light': '#000000', + '@dark': '#ffffff' + } + }, + styles: { + btn: 'inline-flex bg:primary' + } +} satisfies Config \ No newline at end of file diff --git a/packages/runtime/e2e/progressive/comprehensive/prerender.css b/packages/runtime/e2e/progressive/comprehensive/prerender.css new file mode 100644 index 000000000..a0113afa6 --- /dev/null +++ b/packages/runtime/e2e/progressive/comprehensive/prerender.css @@ -0,0 +1,53 @@ +@layer base, theme, preset, styles, general; + +@layer base { + .list-style\:none_ul\@base ul { + list-style: none + } +} + +@layer theme { + + .light, + :root { + --primary: 0 0 0 + } + + .dark { + --primary: 255 255 255 + } +} + +@layer preset { + .text\:16_p\@preset p { + font-size: 1rem; + line-height: calc(1rem + 0.875em) + } +} + +@layer styles { + .btn { + display: inline-flex; + background-color: rgb(var(--primary)) + } +} + +@layer general { + .flex { + display: flex + } + + .\@fade\|1s { + animation: fade 1s + } +} + +@keyframes fade { + 0% { + opacity: 0 + } + + to { + opacity: 1 + } +} \ No newline at end of file diff --git a/packages/runtime/e2e/progressive/comprehensive/prerender.html b/packages/runtime/e2e/progressive/comprehensive/prerender.html new file mode 100644 index 000000000..d51c171cd --- /dev/null +++ b/packages/runtime/e2e/progressive/comprehensive/prerender.html @@ -0,0 +1,7 @@ +
+ + +
+

…

+
+
\ No newline at end of file diff --git a/packages/runtime/e2e/progressive/default-mode.test.ts b/packages/runtime/e2e/progressive/default-mode.test.ts index a2289270b..d0062ddd6 100644 --- a/packages/runtime/e2e/progressive/default-mode.test.ts +++ b/packages/runtime/e2e/progressive/default-mode.test.ts @@ -5,7 +5,7 @@ import init from '../init' test('prerender', async ({ page }) => { const text = css_beautify(` - @layer theme{ + @layer theme { :root { --base: 0 0 0; } .dark { --base: 34 33 35; } .light, :root { --base: 255 255 255; } diff --git a/packages/runtime/package.json b/packages/runtime/package.json index 05a1f796f..f6cfeab98 100644 --- a/packages/runtime/package.json +++ b/packages/runtime/package.json @@ -56,7 +56,7 @@ "@master/css": "workspace:^" }, "devDependencies": { - "shared": "workspace:^", - "@playwright/test": "1.41.2" + "@playwright/test": "1.41.2", + "shared": "workspace:^" } } \ No newline at end of file diff --git a/packages/runtime/playground/.gitignore b/packages/runtime/playground/.gitignore new file mode 100644 index 000000000..a547bf36d --- /dev/null +++ b/packages/runtime/playground/.gitignore @@ -0,0 +1,24 @@ +# Logs +logs +*.log +npm-debug.log* +yarn-debug.log* +yarn-error.log* +pnpm-debug.log* +lerna-debug.log* + +node_modules +dist +dist-ssr +*.local + +# Editor directories and files +.vscode/* +!.vscode/extensions.json +.idea +.DS_Store +*.suo +*.ntvs* +*.njsproj +*.sln +*.sw? diff --git a/packages/runtime/playground/index.html b/packages/runtime/playground/index.html new file mode 100644 index 000000000..b5ad001a7 --- /dev/null +++ b/packages/runtime/playground/index.html @@ -0,0 +1,71 @@ + + + + + + + Vite + TS + + + + +
+ +

Hello World

+ + + \ No newline at end of file diff --git a/packages/runtime/playground/package.json b/packages/runtime/playground/package.json new file mode 100644 index 000000000..a1412a570 --- /dev/null +++ b/packages/runtime/playground/package.json @@ -0,0 +1,15 @@ +{ + "name": "playground", + "private": true, + "version": "0.0.0", + "type": "module", + "scripts": { + "dev": "vite", + "build": "tsc && vite build", + "preview": "vite preview" + }, + "devDependencies": { + "typescript": "~5.6.2", + "vite": "^6.0.5" + } +} diff --git a/packages/runtime/playground/src/main.ts b/packages/runtime/playground/src/main.ts new file mode 100644 index 000000000..d147fc0c1 --- /dev/null +++ b/packages/runtime/playground/src/main.ts @@ -0,0 +1 @@ +import '../../src/global.min' \ No newline at end of file diff --git a/packages/runtime/playground/src/vite-env.d.ts b/packages/runtime/playground/src/vite-env.d.ts new file mode 100644 index 000000000..11f02fe2a --- /dev/null +++ b/packages/runtime/playground/src/vite-env.d.ts @@ -0,0 +1 @@ +/// diff --git a/packages/runtime/playground/tsconfig.json b/packages/runtime/playground/tsconfig.json new file mode 100644 index 000000000..a4883f28e --- /dev/null +++ b/packages/runtime/playground/tsconfig.json @@ -0,0 +1,24 @@ +{ + "compilerOptions": { + "target": "ES2020", + "useDefineForClassFields": true, + "module": "ESNext", + "lib": ["ES2020", "DOM", "DOM.Iterable"], + "skipLibCheck": true, + + /* Bundler mode */ + "moduleResolution": "bundler", + "allowImportingTsExtensions": true, + "isolatedModules": true, + "moduleDetection": "force", + "noEmit": true, + + /* Linting */ + "strict": true, + "noUnusedLocals": true, + "noUnusedParameters": true, + "noFallthroughCasesInSwitch": true, + "noUncheckedSideEffectImports": true + }, + "include": ["src"] +} diff --git a/packages/runtime/src/core.ts b/packages/runtime/src/core.ts index 0d2c32b12..4b8affa0a 100644 --- a/packages/runtime/src/core.ts +++ b/packages/runtime/src/core.ts @@ -99,8 +99,6 @@ export class RuntimeCSS extends MasterCSS { if (syntaxRule) { if (!layer.rules.includes(syntaxRule)) { layer.rules.push(syntaxRule) - this.themeLayer.insert(syntaxRule) - this.animationsNonLayer.insert(syntaxRule) syntaxRule.definition.insert?.call(syntaxRule) } for (const eachNode of syntaxRule.nodes) { @@ -211,8 +209,6 @@ export class RuntimeCSS extends MasterCSS { node.native = cssRule if (!this.stylesLayer.rules.includes(eachSyntaxRule)) { this.stylesLayer.rules.push(eachSyntaxRule) - this.themeLayer.insert(eachSyntaxRule) - this.animationsNonLayer.insert(eachSyntaxRule) eachSyntaxRule.definition.insert?.call(eachSyntaxRule) } matched = true