test(*): global and root are written at the same time.

zss-in-js · Oct 23, 2024 · 38a0210 · 38a0210
1 parent 566bfde
commit 38a0210
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 6 deletions.
diff --git a/e2e/site/app/page.tsx b/e2e/site/app/page.tsx
@@ -9,6 +9,16 @@ const css = cssx.create({
   },
 });
 
+cssx.global({
+  h1: {
+    color: 'cyan',
+  },
+});
+
+cssx.root({
+  '--color-skyblue': 'skyblue',
+});
+
 export default function Home() {
   return (
     <main>

diff --git a/e2e/site/component/style-create.tsx b/e2e/site/component/style-create.tsx
@@ -11,12 +11,6 @@ const css = cssx.create({
   },
 });
 
-cssx.global({
-  h1: {
-    color: 'aqua',
-  },
-});
-
 export function E2ETest() {
   return (
     <div className={css.e2e} data-testid="e2e-test-div">

diff --git a/test/compiler-integration.test.ts b/test/compiler-integration.test.ts
@@ -15,4 +15,8 @@ test('CSS compilation logs contain expected output', async () => {
   expect(stdout).toContain('color: pink;');
   expect(stdout).toContain('@media (max-width: 1024px)');
   expect(stdout).toContain('color: aqua;');
+  // It will also be compiled if global and root are written at the same time.
+  expect(stdout).toContain('Generating global static css');
+  expect(stdout).toContain('color: cyan');
+  expect(stdout).toContain('--color-skyblue: skyblue');
 }, 15000);