Use the latest Vanilla Extract Vite plugin (#170)

seek-oss · Feb 7, 2024 · 750e012 · 750e012
1 parent 3e954b6
commit 750e012
Show file tree

Hide file tree

Showing 13 changed files with 119 additions and 81 deletions.
diff --git a/.changeset/core-deps.md b/.changeset/core-deps.md
@@ -0,0 +1,5 @@
+---
+'@crackle/core': patch
+---
+
+Update Vite plugin for Vanilla Extract
diff --git a/fixtures/braid-design-system b/fixtures/braid-design-system
diff --git a/packages/core/package.json b/packages/core/package.json
@@ -128,8 +128,8 @@
     "@crackle/router": "^0.4.1",
     "@ungap/structured-clone": "^1.2.0",
     "@vanilla-extract/css": "^1.14.0",
-    "@vanilla-extract/integration": "^6.2.4",
-    "@vanilla-extract/vite-plugin": "^3.9.2",
+    "@vanilla-extract/integration": "^7.0.0",
+    "@vanilla-extract/vite-plugin": "^4.0.3",
     "@vitejs/plugin-react-swc": "^3.5.0",
     "@vocab/webpack": "^1.2.5",
     "builtin-modules": "^3.3.0",

diff --git a/packages/core/src/package-utils/bundle.ts b/packages/core/src/package-utils/bundle.ts
@@ -2,14 +2,14 @@ import fs from 'fs';
 import path from 'path';
 
 import { cssFileFilter as vanillaCssFileFilter } from '@vanilla-extract/integration';
+import { vanillaExtractPlugin } from '@vanilla-extract/vite-plugin';
 import fse from 'fs-extra';
 import type { Rollup } from 'vite';
 
 import type { EnhancedConfig } from '../config';
 import { sideEffectsDir, srcDir, stylesDir } from '../constants';
 import { logger } from '../entries/logger';
 import { externals } from '../plugins/rollup/externals';
-import { addVanillaDebugIds } from '../plugins/rollup/vanilla-extract-debug-ids';
 import {
   isVocabFile,
   vocabTranslations,
@@ -110,7 +110,10 @@ export const createBundle = async (
     plugins: [
       // because we don't know ahead of time what the output format will be, we always patch imports
       externals(config, 'esm'),
-      addVanillaDebugIds(config),
+      vanillaExtractPlugin({
+        identifiers: 'debug',
+        unstable_mode: 'transform',
+      }),
       vocabTranslations(config, { toDistPath: getVocabPath }),
     ],
     logLevel: 'warn',

diff --git a/packages/core/src/plugins/rollup/vanilla-extract-debug-ids.ts b/packages/core/src/plugins/rollup/vanilla-extract-debug-ids.ts
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/...napshots__/package/library-with-docs/dist/styles/components/JobSummary/styles.css.ts.snap b/...napshots__/package/library-with-docs/dist/styles/components/JobSummary/styles.css.ts.snap
@@ -2,7 +2,7 @@
 "use strict";
 const fileScope = require("@vanilla-extract/css/fileScope");
 const css = require("@vanilla-extract/css");
-fileScope.setFileScope("src/components/JobSummary/styles.css.ts", "library-with-docs");
+fileScope.setFileScope("src/components/JobSummary/styles.css.ts", "@crackle-fixtures/library-with-docs");
 const redBorder = css.style({
   border: "5px solid red"
 }, "redBorder");
@@ -14,7 +14,7 @@ exports.redBorder = redBorder;
 /* #region dist/styles/components/JobSummary/styles.css.mjs */
 import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
 import { style } from "@vanilla-extract/css";
-setFileScope("src/components/JobSummary/styles.css.ts", "library-with-docs");
+setFileScope("src/components/JobSummary/styles.css.ts", "@crackle-fixtures/library-with-docs");
 const redBorder = style({
   border: "5px solid red"
 }, "redBorder");

diff --git a/tests/__snapshots__/package/package-preserve-dts-preserve/dist/lib/Component.css.ts.snap b/tests/__snapshots__/package/package-preserve-dts-preserve/dist/lib/Component.css.ts.snap
@@ -2,7 +2,7 @@
 "use strict";
 const fileScope = require("@vanilla-extract/css/fileScope");
 const css = require("@vanilla-extract/css");
-fileScope.setFileScope("src/lib/Component.css.ts", "package-preserve-dts-preserve");
+fileScope.setFileScope("src/lib/Component.css.ts", "@crackle-fixtures/package-preserve-dts-preserve");
 const redBorder = css.style({
   border: "5px solid red"
 }, "redBorder");
@@ -14,7 +14,7 @@ exports.redBorder = redBorder;
 /* #region dist/lib/Component.css.mjs */
 import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
 import { style } from "@vanilla-extract/css";
-setFileScope("src/lib/Component.css.ts", "package-preserve-dts-preserve");
+setFileScope("src/lib/Component.css.ts", "@crackle-fixtures/package-preserve-dts-preserve");
 const redBorder = style({
   border: "5px solid red"
 }, "redBorder");