Use the new compiler in Vite plugin (#1264)

Author: mrm007

.changeset/integration-deps.md

@@ -0,0 +1,5 @@
+---
+'@vanilla-extract/integration': patch
+---
+
+Update dependencies

.changeset/integration-normalizePath.md

@@ -0,0 +1,14 @@
+---
+'@vanilla-extract/integration': minor
+---
+
+Export a `normalizePath` function that converts path separators to forward slashes
+
+**Example usage**
+
+```ts
+import { normalizePath } from '@vanilla-extract/integration';
+
+normalizePath('foo\\bar'); // 'foo/bar'
+normalizePath('foo/bar'); // 'foo/bar'
+```

.changeset/vite-plugin-compiler.md

@@ -0,0 +1,9 @@
+---
+'@vanilla-extract/vite-plugin': major
+---
+
+The Vite plugin now uses a newer, faster, Vite-based compiler by default.
+
+The new compiler uses [`vite-node`](https://github.com/vitest-dev/vitest/tree/main/packages/vite-node) to parse and extract CSS from `.css.ts` files. This comes with all the benefits of using Vite, faster builds and the ability to use Vite plugins.
+
+The new compiler has been used in Remix ever since support for Vanilla Extract was introduced.

.changeset/vite-plugin-emitCssInSsr.md

@@ -0,0 +1,7 @@
+---
+'@vanilla-extract/vite-plugin': major
+---
+
+The behaviour previously known as `emitCssInSsr` has been turned on by default. The `emitCssInSsr` option has been removed.
+
+This means that the CSS emitted by the plugin is now processed by Vite, so the plugin no longer needs to resolve PostCSS plugins and process the CSS output itself.

.changeset/vite-plugin-esbuildOptions.md

@@ -0,0 +1,5 @@
+---
+'@vanilla-extract/vite-plugin': major
+---
+
+The `esbuildOptions` option has been removed as we are no longer using esbuild internally

.changeset/vite-plugin-supported.md

@@ -0,0 +1,5 @@
+---
+'@vanilla-extract/vite-plugin': major
+---
+
+Drop support for Vite < 4

package.json

@@ -37,6 +37,7 @@
     "@swc/core": "^1.2.112",
     "@testing-library/jest-dom": "^5.11.9",
     "@types/jest": "^29.2.5",
+    "@types/node": "^20.9.5",
     "@types/testing-library__jest-dom": "^5.14.5",
     "@vanilla-extract/jest-transform": "*",
     "babel-jest": "^27.3.1",

packages/integration/package.json

@@ -23,10 +23,10 @@
     "find-up": "^5.0.0",
     "javascript-stringify": "^2.0.1",
     "lodash": "^4.17.21",
-    "mlly": "^1.1.0",
+    "mlly": "^1.4.2",
     "outdent": "^0.8.0",
-    "vite": "^5.0.10",
-    "vite-node": "^1.1.0"
+    "vite": "^5.0.11",
+    "vite-node": "^1.2.0"
   },
   "devDependencies": {
     "@types/babel__core": "^7.1.20",

packages/integration/src/addFileScope.test.ts

@@ -1,5 +1,15 @@
 import { outdent } from 'outdent';
-import { addFileScope } from './addFileScope';
+import { sep, posix, win32 } from 'path';
+
+import { addFileScope, normalizePath } from './addFileScope';
+
+const raw = String.raw;
+
+// remove quotes around the snapshot
+expect.addSnapshotSerializer({
+  test: (val) => typeof val === 'string',
+  print: (val) => (val as string).trim(),
+});
 
 describe('ESM', () => {
   test('should add missing fileScope', () => {
@@ -17,16 +27,12 @@ describe('ESM', () => {
         packageName: 'my-package',
       }),
     ).toMatchInlineSnapshot(`
-      "
-            
-            import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
-            setFileScope("app/app.css.ts", "my-package");
-            import {style} from '@vanilla-extract/css';
+      import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
+      setFileScope("app/app.css.ts", "my-package");
+      import {style} from '@vanilla-extract/css';
 
       export const myStyle = style({});
-            endFileScope();
-            
-          "
+      endFileScope();
     `);
   });
 
@@ -46,19 +52,15 @@ describe('ESM', () => {
         globalAdapterIdentifier: 'MY_GLOBAL_ADAPTER',
       }),
     ).toMatchInlineSnapshot(`
-      "
-            
-              import * as __vanilla_css_adapter__ from "@vanilla-extract/css/adapter";
-              __vanilla_css_adapter__.setAdapter(MY_GLOBAL_ADAPTER);
-            
-            import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
-            setFileScope("app/app.css.ts", "my-package");
-            import {style} from '@vanilla-extract/css';
+      import * as __vanilla_css_adapter__ from "@vanilla-extract/css/adapter";
+      __vanilla_css_adapter__.setAdapter(MY_GLOBAL_ADAPTER);
+      import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
+      setFileScope("app/app.css.ts", "my-package");
+      import {style} from '@vanilla-extract/css';
 
       export const myStyle = style({});
-            endFileScope();
-            __vanilla_css_adapter__.removeAdapter();
-          "
+      endFileScope();
+      __vanilla_css_adapter__.removeAdapter();
     `);
   });
 
@@ -80,12 +82,12 @@ describe('ESM', () => {
         packageName: 'my-package',
       }),
     ).toMatchInlineSnapshot(`
-      "import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
+      import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
       setFileScope("app/app.css.ts", "my-package");
       import {style} from '@vanilla-extract/css';
 
       export const myStyle = style({});
-      endFileScope();"
+      endFileScope();
     `);
   });
 
@@ -110,12 +112,12 @@ describe('ESM', () => {
         packageName: 'my-package',
       }),
     ).toMatchInlineSnapshot(`
-      "import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
+      import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
       setFileScope("app/app.css.ts", "my-package");
       import {style} from '@vanilla-extract/css';
 
       export const myStyle = style({});
-      endFileScope();"
+      endFileScope();
     `);
   });
 
@@ -137,13 +139,13 @@ describe('ESM', () => {
         packageName: 'my-package',
       }),
     ).toMatchInlineSnapshot(`
-          "import * as vanillaFileScope from "@vanilla-extract/css/fileScope";
-          vanillaFileScope.setFileScope("app/app.css.ts", "my-package");
-          import {style} from '@vanilla-extract/css';
+      import * as vanillaFileScope from "@vanilla-extract/css/fileScope";
+      vanillaFileScope.setFileScope("app/app.css.ts", "my-package");
+      import {style} from '@vanilla-extract/css';
 
-          export const myStyle = style({});
-          vanillaFileScope.endFileScope();"
-      `);
+      export const myStyle = style({});
+      vanillaFileScope.endFileScope();
+    `);
   });
 });
 
@@ -164,17 +166,13 @@ describe('CJS', () => {
         packageName: 'my-package',
       }),
     ).toMatchInlineSnapshot(`
-      "
-          
-          const __vanilla_filescope__ = require("@vanilla-extract/css/fileScope");
-          __vanilla_filescope__.setFileScope("app/app.css.ts", "my-package");
-          const _css = require('@vanilla-extract/css');
+      const __vanilla_filescope__ = require("@vanilla-extract/css/fileScope");
+      __vanilla_filescope__.setFileScope("app/app.css.ts", "my-package");
+      const _css = require('@vanilla-extract/css');
 
       var myStyle = _css.style({});
       exports.myStyle = myStyle;
-          __vanilla_filescope__.endFileScope();
-          ;
-        "
+      __vanilla_filescope__.endFileScope();
     `);
   });
 
@@ -195,20 +193,16 @@ describe('CJS', () => {
         globalAdapterIdentifier: 'MY_GLOBAL_ADAPTER',
       }),
     ).toMatchInlineSnapshot(`
-      "
-          
-            const __vanilla_css_adapter__ = require("@vanilla-extract/css/adapter");
-            __vanilla_css_adapter__.setAdapter(MY_GLOBAL_ADAPTER);
-          
-          const __vanilla_filescope__ = require("@vanilla-extract/css/fileScope");
-          __vanilla_filescope__.setFileScope("app/app.css.ts", "my-package");
-          const _css = require('@vanilla-extract/css');
+      const __vanilla_css_adapter__ = require("@vanilla-extract/css/adapter");
+      __vanilla_css_adapter__.setAdapter(MY_GLOBAL_ADAPTER);
+      const __vanilla_filescope__ = require("@vanilla-extract/css/fileScope");
+      __vanilla_filescope__.setFileScope("app/app.css.ts", "my-package");
+      const _css = require('@vanilla-extract/css');
 
       var myStyle = _css.style({});
       exports.myStyle = myStyle;
-          __vanilla_filescope__.endFileScope();
-          __vanilla_css_adapter__.removeAdapter();;
-        "
+      __vanilla_filescope__.endFileScope();
+      __vanilla_css_adapter__.removeAdapter();
     `);
   });
 
@@ -231,13 +225,13 @@ describe('CJS', () => {
         packageName: 'my-package',
       }),
     ).toMatchInlineSnapshot(`
-      "const __vanilla_filescope__ = require("@vanilla-extract/css/fileScope");
+      const __vanilla_filescope__ = require("@vanilla-extract/css/fileScope");
       __vanilla_filescope__.setFileScope("app/app.css.ts", "my-package");
       const _css = require('@vanilla-extract/css');
 
       var myStyle = _css.style({});
       exports.myStyle = myStyle;
-      __vanilla_filescope__.endFileScope();"
+      __vanilla_filescope__.endFileScope();
     `);
   });
 
@@ -263,13 +257,54 @@ describe('CJS', () => {
         packageName: 'my-package',
       }),
     ).toMatchInlineSnapshot(`
-      "const __vanilla_filescope__ = require("@vanilla-extract/css/fileScope");
+      const __vanilla_filescope__ = require("@vanilla-extract/css/fileScope");
       __vanilla_filescope__.setFileScope("app/app.css.ts", "my-package");
       const _css = require('@vanilla-extract/css');
 
       const myStyle = _css.style({});
       exports.myStyle = myStyle;
-      __vanilla_filescope__.endFileScope();"
+      __vanilla_filescope__.endFileScope();
     `);
   });
 });
+
+test('platform-specific relative path', () => {
+  const { rootPath, filePath } = {
+    [posix.sep]: {
+      rootPath: '/the-root',
+      filePath: '/the-root/app/app.css.ts',
+    },
+    [win32.sep]: {
+      rootPath: raw`D:\the-root`,
+      filePath: raw`D:\the-root\app\app.css.ts`,
+    },
+  }[sep];
+
+  const source = outdent`
+    import { style } from '@vanilla-extract/css';
+
+    export const myStyle = style({});
+  `;
+
+  // The snapshot should be the same for either platform
+  expect(
+    addFileScope({
+      source,
+      rootPath,
+      filePath,
+      packageName: 'my-package',
+    }),
+  ).toMatchInlineSnapshot(`
+    import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
+    setFileScope("app/app.css.ts", "my-package");
+    import { style } from '@vanilla-extract/css';
+
+    export const myStyle = style({});
+    endFileScope();
+  `);
+});
+
+test('normalizePath()', () => {
+  expect(normalizePath(raw`foo\bar`)).toMatchInlineSnapshot(`foo/bar`);
+  expect(normalizePath(raw`foo/bar`)).toMatchInlineSnapshot(`foo/bar`);
+});