Add a thirdparty fixture to test precompiled Vanilla Extract styles (…

…#1263)
vanilla-extract-css · Jan 16, 2024 · 0081273 · 0081273
1 parent 610c50b
commit 0081273
Show file tree

Hide file tree

Showing 29 changed files with 757 additions and 458 deletions.
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -1,3 +1,5 @@
 {
-  "typescript.tsdk": "node_modules/typescript/lib"
+  "typescript.tsdk": "node_modules/typescript/lib",
+  "vitest.enable": true,
+  "vitest.commandLine": "pnpm test:vitest"
 }
diff --git a/fixtures/thirdparty/index.html b/fixtures/thirdparty/index.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite App</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="./src/index.ts"></script>
+  </body>
+</html>
diff --git a/fixtures/thirdparty/package.json b/fixtures/thirdparty/package.json
@@ -0,0 +1,11 @@
+{
+  "name": "@fixtures/thirdparty",
+  "version": "0.0.1",
+  "main": "src/index.ts",
+  "author": "SEEK",
+  "private": true,
+  "dependencies": {
+    "@fixtures/thirdparty-dep": "0.0.1",
+    "@vanilla-extract/css": "1.14.0"
+  }
+}
diff --git a/fixtures/thirdparty/src/index.ts b/fixtures/thirdparty/src/index.ts
@@ -0,0 +1,14 @@
+import { block, depBlock, depdepBlock } from './styles.css';
+import testNodes from '../test-nodes.json';
+
+document.body.innerHTML = `
+  <div id="${testNodes.first}" class="${block}">
+    I'm a first-party block
+    <div id="${testNodes.third}" class="${depBlock}">
+      I'm a third party block
+      <div id="${testNodes.thirdThird}" class="${depdepBlock}">
+        I'm a third party of third party block
+      </div>
+    </div>
+  </div>
+`;
diff --git a/fixtures/thirdparty/src/styles.css.ts b/fixtures/thirdparty/src/styles.css.ts
@@ -0,0 +1,18 @@
+import { style, createVar } from '@vanilla-extract/css';
+
+export {
+  depBlock,
+  depColor,
+  depdepBlock,
+  depdepColor,
+  // @ts-expect-error no types
+} from '@fixtures/thirdparty-dep';
+
+const color = createVar();
+
+export const block = style({
+  vars: {
+    [color]: 'red',
+  },
+  backgroundColor: color,
+});
diff --git a/fixtures/thirdparty/test-nodes.json b/fixtures/thirdparty/test-nodes.json
@@ -0,0 +1,5 @@
+{
+  "first": "first",
+  "third": "third",
+  "thirdThird": "thirdThird"
+}
diff --git a/fixtures/thirdparty/thirdparty-dep/index.mjs b/fixtures/thirdparty/thirdparty-dep/index.mjs
@@ -0,0 +1,3 @@
+export { depBlock, depColor } from './styles.css.mjs';
+
+export { depdepBlock, depdepColor } from '@fixtures/thirdparty-dep-dep';
diff --git a/fixtures/thirdparty/thirdparty-dep/package.json b/fixtures/thirdparty/thirdparty-dep/package.json
@@ -0,0 +1,16 @@
+{
+  "name": "@fixtures/thirdparty-dep",
+  "version": "0.0.1",
+  "exports": {
+    ".": {
+      "import": "./index.mjs"
+    },
+    "./package.json": "./package.json"
+  },
+  "author": "SEEK",
+  "private": true,
+  "dependencies": {
+    "@fixtures/thirdparty-dep-dep": "0.0.1",
+    "@vanilla-extract/css": "1.14.0"
+  }
+}
diff --git a/fixtures/thirdparty/thirdparty-dep/styles.css.mjs b/fixtures/thirdparty/thirdparty-dep/styles.css.mjs
@@ -0,0 +1,10 @@
+import { style, createVar } from '@vanilla-extract/css';
+
+export const depColor = createVar();
+
+export const depBlock = style({
+  vars: {
+    [depColor]: 'green',
+  },
+  backgroundColor: depColor,
+});
diff --git a/fixtures/thirdparty/thirdparty-dep/thirdparty-dep-dep/index.mjs b/fixtures/thirdparty/thirdparty-dep/thirdparty-dep-dep/index.mjs
@@ -0,0 +1 @@
+export { depdepBlock, depdepColor } from './styles.css.mjs';
diff --git a/fixtures/thirdparty/thirdparty-dep/thirdparty-dep-dep/package.json b/fixtures/thirdparty/thirdparty-dep/thirdparty-dep-dep/package.json
@@ -0,0 +1,15 @@
+{
+  "name": "@fixtures/thirdparty-dep-dep",
+  "version": "0.0.1",
+  "exports": {
+    ".": {
+      "import": "./index.mjs"
+    },
+    "./package.json": "./package.json"
+  },
+  "author": "SEEK",
+  "private": true,
+  "dependencies": {
+    "@vanilla-extract/css": "1.14.0"
+  }
+}
diff --git a/fixtures/thirdparty/thirdparty-dep/thirdparty-dep-dep/styles.css.mjs b/fixtures/thirdparty/thirdparty-dep/thirdparty-dep-dep/styles.css.mjs
@@ -0,0 +1,10 @@
+import { style, createVar } from '@vanilla-extract/css';
+
+export const depdepColor = createVar();
+
+export const depdepBlock = style({
+  vars: {
+    [depdepColor]: 'blue',
+  },
+  backgroundColor: depdepColor,
+});
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		export { depBlock, depColor } from './styles.css.mjs';

		export { depdepBlock, depdepColor } from '@fixtures/thirdparty-dep-dep';
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		export { depdepBlock, depdepColor } from './styles.css.mjs';