Refactor prerender functionality and add comprehensive Playwright tes…

…ts for CSS layers
master-co · Jan 17, 2025 · 089a4f1 · 089a4f1
1 parent ee56dcf
commit 089a4f1
Show file tree

Hide file tree

Showing 14 changed files with 230 additions and 13 deletions.
diff --git a/packages/runtime/e2e/prerender.ts b/packages/runtime/e2e/prerender.ts
diff --git a/packages/runtime/e2e/progressive/comprehensive/index.test.ts 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
@@ -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
diff --git a/packages/runtime/e2e/progressive/comprehensive/prerender.css 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
+    }
+}
diff --git a/packages/runtime/e2e/progressive/comprehensive/prerender.html b/packages/runtime/e2e/progressive/comprehensive/prerender.html
@@ -0,0 +1,7 @@
+<div class="list-style:none_ul@base">
+    <button class="btn flex">Submit</button>
+    <ul class="@fade|1s">…</ul>
+    <article class="text:16_p@preset">
+        <p>…</p>
+    </article>
+</div>
diff --git 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
@@ -56,7 +56,7 @@
         "@master/css": "workspace:^"
     },
     "devDependencies": {
-        "shared": "workspace:^",
-        "@playwright/test": "1.41.2"
+        "@playwright/test": "1.41.2",
+        "shared": "workspace:^"
     }
 }
diff --git a/packages/runtime/playground/.gitignore 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
@@ -0,0 +1,71 @@
+<!doctype html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite + TS</title>
+    <style id="master">
+        @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
+            }
+        }
+    </style>
+</head>
+
+<body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+    <h1>Hello World</h1>
+</body>
+
+</html>
diff --git a/packages/runtime/playground/package.json 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
@@ -0,0 +1 @@
+import '../../src/global.min'
diff --git a/packages/runtime/playground/src/vite-env.d.ts b/packages/runtime/playground/src/vite-env.d.ts
@@ -0,0 +1 @@
+/// <reference types="vite/client" />
diff --git a/packages/runtime/playground/tsconfig.json 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
@@ -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