@vanilla-extract/vite-plugin - npm Package Compare versions

Comparing version 0.0.0-inline-prototype-202342012537 to 0.0.0-vite-plugin-new-20231220045219

dist/vanilla-extract-vite-plugin.cjs.d.ts

@@ -6,3 +6,3 @@ import { Plugin } from 'vite';
     identifiers?: IdentifierOption;
-    emitCssInSsr?: boolean;
+    emitCssInSsr?: boolean | 'compiler';
     esbuildOptions?: CompileOptions['esbuildOptions'];
@@ -9,0 +9,0 @@ }

dist/vanilla-extract-vite-plugin.cjs.dev.js

@@ -6,4 +6,3 @@ 'use strict';
 var path = require('path');
-var vite = require('vite');
-var outdent = require('outdent');
+var assert = require('assert');
 var integration = require('@vanilla-extract/integration');
@@ -32,3 +31,3 @@
 var path__default = /*#__PURE__*/_interopDefault(path);
-var outdent__default = /*#__PURE__*/_interopDefault(outdent);
+var assert__default = /*#__PURE__*/_interopDefault(assert);
 
@@ -49,2 +48,3 @@ // Mostly copied from vite's implementation
       options,
+      //  @ts-expect-error TODO: incompatible types?
       plugins: inlineOptions.plugins || []
@@ -58,3 +58,2 @@ };
         options: postCssConfig.options,
-        // @ts-expect-error - The postcssrc options don't agree with real postcss, but it should be ok
         plugins: postCssConfig.plugins
@@ -71,8 +70,11 @@ };
 
-const styleUpdateEvent = fileId => `vanilla-extract-style-update:${fileId}`;
 const virtualExtCss = '.vanilla.css';
-const virtualExtJs = '.vanilla.js';
+const cssImportSpecifier = filePath => `${filePath}${virtualExtCss}`;
+
+// Inlined from @rollup/pluginutils
+// https://github.com/rollup/plugins/blob/33174f956304ab4aad4bbaba656f627c31679dc5/packages/pluginutils/src/normalizePath.ts#L5-L7
+const normalizePath = filename => filename.split(path__default["default"].win32.sep).join(path__default["default"].posix.sep);
 function vanillaExtractPlugin({
   identifiers,
-  emitCssInSsr,
+  emitCssInSsr = true,
   esbuildOptions
@@ -83,7 +85,27 @@ } = {}) {
   let postCssConfig;
+  let packageName;
+  let compiler;
   const cssMap = new Map();
-  const hasEmitCssOverride = typeof emitCssInSsr === 'boolean';
-  let resolvedEmitCssInSsr = hasEmitCssOverride ? emitCssInSsr : !!process.env.VITE_RSC_BUILD;
-  let packageName;
-  const getAbsoluteVirtualFileId = source => vite.normalizePath(path__default["default"].join(config.root, source));
+  const getAbsoluteFileId = source => normalizePath(path__default["default"].resolve(config.root, source));
+  const invalidateModule = absoluteId => {
+    const {
+      moduleGraph
+    } = server;
+    const modules = Array.from(moduleGraph.getModulesByFile(absoluteId) || []);
+    for (const module of modules) {
+      moduleGraph.invalidateModule(module);
+
+      // Vite uses this timestamp to add `?t=` query string automatically for HMR.
+      module.lastHMRTimestamp = module.lastInvalidationTimestamp || Date.now();
+    }
+  };
+  const processCss = async css => {
+    assert__default["default"](postCssConfig);
+    const postCssResult = await (await Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require('postcss')); })).default(postCssConfig.plugins).process(css, {
+      ...postCssConfig.options,
+      from: undefined,
+      map: false
+    });
+    return postCssResult.css;
+  };
   return {
@@ -95,8 +117,4 @@ name: 'vanilla-extract',
     },
-    config(_userConfig, env) {
-      const include = env.command === 'serve' ? ['@vanilla-extract/css/injectStyles'] : [];
+    config() {
       return {
-        optimizeDeps: {
-          include
-        },
         ssr: {
@@ -113,4 +131,12 @@ external: ['@vanilla-extract/css', '@vanilla-extract/css/fileScope', '@vanilla-extract/css/adapter']
       }
-      if (!hasEmitCssOverride && config.plugins.some(plugin => ['astro:build', 'solid-start-server', 'vite-plugin-qwik', 'vite-plugin-svelte'].includes(plugin.name))) {
-        resolvedEmitCssInSsr = true;
+      if (emitCssInSsr === 'compiler') {
+        var _config$inlineConfig$;
+        compiler = integration.createCompiler({
+          root: config.root,
+          identifiers: identifiers !== null && identifiers !== void 0 ? identifiers : config.mode === 'production' ? 'short' : 'debug',
+          cssImportSpecifier,
+          vitePlugins: ((_config$inlineConfig$ = config.inlineConfig.plugins) !== null && _config$inlineConfig$ !== void 0 ? _config$inlineConfig$ : []).flat()
+          // Prevent an infinite loop where the child compiler creates a new child compiler
+          .filter(plugin => typeof plugin === 'object' && plugin !== null && 'name' in plugin && plugin.name !== 'vanilla-extract')
+        });
       }
@@ -120,3 +146,3 @@ },
       const [validId, query] = source.split('?');
-      if (!validId.endsWith(virtualExtCss) && !validId.endsWith(virtualExtJs)) {
+      if (!validId.endsWith(virtualExtCss)) {
         return;
@@ -127,3 +153,3 @@ }
       // imported from outside the config root.
-      const absoluteId = source.startsWith(config.root) ? source : getAbsoluteVirtualFileId(validId);
+      const absoluteId = source.startsWith(config.root) ? source : getAbsoluteFileId(validId);
 
@@ -140,32 +166,8 @@ // There should always be an entry in the `cssMap` here.
       const [validId] = id.split('?');
-      if (!cssMap.has(validId)) {
-        return;
-      }
       const css = cssMap.get(validId);
-      if (typeof css !== 'string') {
-        return;
-      }
-      if (validId.endsWith(virtualExtCss)) {
+      if (typeof css === 'string' && validId.endsWith(virtualExtCss)) {
         return css;
       }
-      return outdent__default["default"]`
-        import { injectStyles } from '@vanilla-extract/css/injectStyles';
-
-        const inject = (css) => injectStyles({
-          fileScope: ${JSON.stringify({
-        filePath: validId
-      })},
-          css
-        });
-
-        inject(${JSON.stringify(css)});
-
-        if (import.meta.hot) {
-          import.meta.hot.on('${styleUpdateEvent(validId)}', (css) => {
-            inject(css);
-          });
-        }
-      `;
     },
-    async transform(code, id, ssrParam) {
+    async transform(code, id) {
       const [validId] = id.split('?');
@@ -175,13 +177,39 @@ if (!integration.cssFileFilter.test(validId)) {
       }
-      const identOption = identifiers ?? (config.mode === 'production' ? 'short' : 'debug');
-      let ssr;
-      if (typeof ssrParam === 'boolean') {
-        ssr = ssrParam;
-      } else {
-        ssr = ssrParam === null || ssrParam === void 0 ? void 0 : ssrParam.ssr;
+      const identOption = identifiers !== null && identifiers !== void 0 ? identifiers : config.mode === 'production' ? 'short' : 'debug';
+      if (compiler) {
+        const absoluteVirtualId = cssImportSpecifier(validId);
+        console.time(`[compiler] ${validId}`);
+        const {
+          source,
+          watchFiles
+        } = await compiler.processVanillaFile(validId);
+        let {
+          css
+        } = compiler.getCssForFile(validId);
+        console.timeEnd(`[compiler] ${validId}`);
+        if (postCssConfig) {
+          css = await processCss(css);
+        }
+        for (const file of watchFiles) {
+          // In start mode, we need to prevent the file from rewatching itself.
+          // If it's a `build --watch`, it needs to watch everything.
+          if (config.command === 'build' || normalizePath(file) !== validId) {
+            this.addWatchFile(file);
+          }
+        }
+        if (cssMap.has(absoluteVirtualId) && cssMap.get(absoluteVirtualId) !== css) {
+          invalidateModule(absoluteVirtualId);
+        }
+        cssMap.set(absoluteVirtualId, css);
+        return {
+          code: source,
+          map: {
+            mappings: ''
+          }
+        };
       }
-      if (ssr && !resolvedEmitCssInSsr) {
+      if (!emitCssInSsr) {
         return integration.transform({
           source: code,
-          filePath: vite.normalizePath(validId),
+          filePath: normalizePath(validId),
           rootPath: config.root,
@@ -192,2 +220,3 @@ packageName,
       }
+      console.time(`[current] ${validId}`);
       const {
@@ -202,9 +231,2 @@ source,
       });
-      for (const file of watchFiles) {
-        // In start mode, we need to prevent the file from rewatching itself.
-        // If it's a `build --watch`, it needs to watch everything.
-        if (config.command === 'build' || file !== validId) {
-          this.addWatchFile(file);
-        }
-      }
       const output = await integration.processVanillaFile({
@@ -218,31 +240,10 @@ source,
         }) => {
-          const rootRelativeId = `${fileScope.filePath}${config.command === 'build' || ssr && resolvedEmitCssInSsr ? virtualExtCss : virtualExtJs}`;
-          const absoluteId = getAbsoluteVirtualFileId(rootRelativeId);
+          const rootRelativeId = `${fileScope.filePath}${virtualExtCss}`;
+          const absoluteId = getAbsoluteFileId(rootRelativeId);
           let cssSource = source;
           if (postCssConfig) {
-            const postCssResult = await (await Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require('postcss')); })).default(postCssConfig.plugins).process(source, {
-              ...postCssConfig.options,
-              from: undefined,
-              map: false
-            });
-            cssSource = postCssResult.css;
+            cssSource = await processCss(cssSource);
           }
-          if (server && cssMap.has(absoluteId) && cssMap.get(absoluteId) !== source) {
-            const {
-              moduleGraph
-            } = server;
-            const modules = Array.from(moduleGraph.getModulesByFile(absoluteId) || []);
-            for (const module of modules) {
-              if (module) {
-                moduleGraph.invalidateModule(module);
-
-                // Vite uses this timestamp to add `?t=` query string automatically for HMR.
-                module.lastHMRTimestamp = module.lastInvalidationTimestamp || Date.now();
-              }
-            }
-            server.ws.send({
-              type: 'custom',
-              event: styleUpdateEvent(absoluteId),
-              data: cssSource
-            });
+          if (cssMap.has(absoluteId) && cssMap.get(absoluteId) !== cssSource) {
+            invalidateModule(absoluteId);
           }
@@ -256,2 +257,10 @@ cssMap.set(absoluteId, cssSource);
       });
+      console.timeEnd(`[current] ${validId}`);
+      for (const file of watchFiles) {
+        // In start mode, we need to prevent the file from rewatching itself.
+        // If it's a `build --watch`, it needs to watch everything.
+        if (config.command === 'build' || normalizePath(file) !== validId) {
+          this.addWatchFile(file);
+        }
+      }
       return {
@@ -258,0 +267,0 @@ code: output,

dist/vanilla-extract-vite-plugin.cjs.prod.js

@@ -6,4 +6,3 @@ 'use strict';
 var path = require('path');
-var vite = require('vite');
-var outdent = require('outdent');
+var assert = require('assert');
 var integration = require('@vanilla-extract/integration');
@@ -32,3 +31,3 @@
 var path__default = /*#__PURE__*/_interopDefault(path);
-var outdent__default = /*#__PURE__*/_interopDefault(outdent);
+var assert__default = /*#__PURE__*/_interopDefault(assert);
 
@@ -49,2 +48,3 @@ // Mostly copied from vite's implementation
       options,
+      //  @ts-expect-error TODO: incompatible types?
       plugins: inlineOptions.plugins || []
@@ -58,3 +58,2 @@ };
         options: postCssConfig.options,
-        // @ts-expect-error - The postcssrc options don't agree with real postcss, but it should be ok
         plugins: postCssConfig.plugins
@@ -71,8 +70,11 @@ };
 
-const styleUpdateEvent = fileId => `vanilla-extract-style-update:${fileId}`;
 const virtualExtCss = '.vanilla.css';
-const virtualExtJs = '.vanilla.js';
+const cssImportSpecifier = filePath => `${filePath}${virtualExtCss}`;
+
+// Inlined from @rollup/pluginutils
+// https://github.com/rollup/plugins/blob/33174f956304ab4aad4bbaba656f627c31679dc5/packages/pluginutils/src/normalizePath.ts#L5-L7
+const normalizePath = filename => filename.split(path__default["default"].win32.sep).join(path__default["default"].posix.sep);
 function vanillaExtractPlugin({
   identifiers,
-  emitCssInSsr,
+  emitCssInSsr = true,
   esbuildOptions
@@ -83,7 +85,27 @@ } = {}) {
   let postCssConfig;
+  let packageName;
+  let compiler;
   const cssMap = new Map();
-  const hasEmitCssOverride = typeof emitCssInSsr === 'boolean';
-  let resolvedEmitCssInSsr = hasEmitCssOverride ? emitCssInSsr : !!process.env.VITE_RSC_BUILD;
-  let packageName;
-  const getAbsoluteVirtualFileId = source => vite.normalizePath(path__default["default"].join(config.root, source));
+  const getAbsoluteFileId = source => normalizePath(path__default["default"].resolve(config.root, source));
+  const invalidateModule = absoluteId => {
+    const {
+      moduleGraph
+    } = server;
+    const modules = Array.from(moduleGraph.getModulesByFile(absoluteId) || []);
+    for (const module of modules) {
+      moduleGraph.invalidateModule(module);
+
+      // Vite uses this timestamp to add `?t=` query string automatically for HMR.
+      module.lastHMRTimestamp = module.lastInvalidationTimestamp || Date.now();
+    }
+  };
+  const processCss = async css => {
+    assert__default["default"](postCssConfig);
+    const postCssResult = await (await Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require('postcss')); })).default(postCssConfig.plugins).process(css, {
+      ...postCssConfig.options,
+      from: undefined,
+      map: false
+    });
+    return postCssResult.css;
+  };
   return {
@@ -95,8 +117,4 @@ name: 'vanilla-extract',
     },
-    config(_userConfig, env) {
-      const include = env.command === 'serve' ? ['@vanilla-extract/css/injectStyles'] : [];
+    config() {
       return {
-        optimizeDeps: {
-          include
-        },
         ssr: {
@@ -113,4 +131,12 @@ external: ['@vanilla-extract/css', '@vanilla-extract/css/fileScope', '@vanilla-extract/css/adapter']
       }
-      if (!hasEmitCssOverride && config.plugins.some(plugin => ['astro:build', 'solid-start-server', 'vite-plugin-qwik', 'vite-plugin-svelte'].includes(plugin.name))) {
-        resolvedEmitCssInSsr = true;
+      if (emitCssInSsr === 'compiler') {
+        var _config$inlineConfig$;
+        compiler = integration.createCompiler({
+          root: config.root,
+          identifiers: identifiers !== null && identifiers !== void 0 ? identifiers : config.mode === 'production' ? 'short' : 'debug',
+          cssImportSpecifier,
+          vitePlugins: ((_config$inlineConfig$ = config.inlineConfig.plugins) !== null && _config$inlineConfig$ !== void 0 ? _config$inlineConfig$ : []).flat()
+          // Prevent an infinite loop where the child compiler creates a new child compiler
+          .filter(plugin => typeof plugin === 'object' && plugin !== null && 'name' in plugin && plugin.name !== 'vanilla-extract')
+        });
       }
@@ -120,3 +146,3 @@ },
       const [validId, query] = source.split('?');
-      if (!validId.endsWith(virtualExtCss) && !validId.endsWith(virtualExtJs)) {
+      if (!validId.endsWith(virtualExtCss)) {
         return;
@@ -127,3 +153,3 @@ }
       // imported from outside the config root.
-      const absoluteId = source.startsWith(config.root) ? source : getAbsoluteVirtualFileId(validId);
+      const absoluteId = source.startsWith(config.root) ? source : getAbsoluteFileId(validId);
 
@@ -140,32 +166,8 @@ // There should always be an entry in the `cssMap` here.
       const [validId] = id.split('?');
-      if (!cssMap.has(validId)) {
-        return;
-      }
       const css = cssMap.get(validId);
-      if (typeof css !== 'string') {
-        return;
-      }
-      if (validId.endsWith(virtualExtCss)) {
+      if (typeof css === 'string' && validId.endsWith(virtualExtCss)) {
         return css;
       }
-      return outdent__default["default"]`
-        import { injectStyles } from '@vanilla-extract/css/injectStyles';
-
-        const inject = (css) => injectStyles({
-          fileScope: ${JSON.stringify({
-        filePath: validId
-      })},
-          css
-        });
-
-        inject(${JSON.stringify(css)});
-
-        if (import.meta.hot) {
-          import.meta.hot.on('${styleUpdateEvent(validId)}', (css) => {
-            inject(css);
-          });
-        }
-      `;
     },
-    async transform(code, id, ssrParam) {
+    async transform(code, id) {
       const [validId] = id.split('?');
@@ -175,13 +177,39 @@ if (!integration.cssFileFilter.test(validId)) {
       }
-      const identOption = identifiers ?? (config.mode === 'production' ? 'short' : 'debug');
-      let ssr;
-      if (typeof ssrParam === 'boolean') {
-        ssr = ssrParam;
-      } else {
-        ssr = ssrParam === null || ssrParam === void 0 ? void 0 : ssrParam.ssr;
+      const identOption = identifiers !== null && identifiers !== void 0 ? identifiers : config.mode === 'production' ? 'short' : 'debug';
+      if (compiler) {
+        const absoluteVirtualId = cssImportSpecifier(validId);
+        console.time(`[compiler] ${validId}`);
+        const {
+          source,
+          watchFiles
+        } = await compiler.processVanillaFile(validId);
+        let {
+          css
+        } = compiler.getCssForFile(validId);
+        console.timeEnd(`[compiler] ${validId}`);
+        if (postCssConfig) {
+          css = await processCss(css);
+        }
+        for (const file of watchFiles) {
+          // In start mode, we need to prevent the file from rewatching itself.
+          // If it's a `build --watch`, it needs to watch everything.
+          if (config.command === 'build' || normalizePath(file) !== validId) {
+            this.addWatchFile(file);
+          }
+        }
+        if (cssMap.has(absoluteVirtualId) && cssMap.get(absoluteVirtualId) !== css) {
+          invalidateModule(absoluteVirtualId);
+        }
+        cssMap.set(absoluteVirtualId, css);
+        return {
+          code: source,
+          map: {
+            mappings: ''
+          }
+        };
       }
-      if (ssr && !resolvedEmitCssInSsr) {
+      if (!emitCssInSsr) {
         return integration.transform({
           source: code,
-          filePath: vite.normalizePath(validId),
+          filePath: normalizePath(validId),
           rootPath: config.root,
@@ -192,2 +220,3 @@ packageName,
       }
+      console.time(`[current] ${validId}`);
       const {
@@ -202,9 +231,2 @@ source,
       });
-      for (const file of watchFiles) {
-        // In start mode, we need to prevent the file from rewatching itself.
-        // If it's a `build --watch`, it needs to watch everything.
-        if (config.command === 'build' || file !== validId) {
-          this.addWatchFile(file);
-        }
-      }
       const output = await integration.processVanillaFile({
@@ -218,31 +240,10 @@ source,
         }) => {
-          const rootRelativeId = `${fileScope.filePath}${config.command === 'build' || ssr && resolvedEmitCssInSsr ? virtualExtCss : virtualExtJs}`;
-          const absoluteId = getAbsoluteVirtualFileId(rootRelativeId);
+          const rootRelativeId = `${fileScope.filePath}${virtualExtCss}`;
+          const absoluteId = getAbsoluteFileId(rootRelativeId);
           let cssSource = source;
           if (postCssConfig) {
-            const postCssResult = await (await Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require('postcss')); })).default(postCssConfig.plugins).process(source, {
-              ...postCssConfig.options,
-              from: undefined,
-              map: false
-            });
-            cssSource = postCssResult.css;
+            cssSource = await processCss(cssSource);
           }
-          if (server && cssMap.has(absoluteId) && cssMap.get(absoluteId) !== source) {
-            const {
-              moduleGraph
-            } = server;
-            const modules = Array.from(moduleGraph.getModulesByFile(absoluteId) || []);
-            for (const module of modules) {
-              if (module) {
-                moduleGraph.invalidateModule(module);
-
-                // Vite uses this timestamp to add `?t=` query string automatically for HMR.
-                module.lastHMRTimestamp = module.lastInvalidationTimestamp || Date.now();
-              }
-            }
-            server.ws.send({
-              type: 'custom',
-              event: styleUpdateEvent(absoluteId),
-              data: cssSource
-            });
+          if (cssMap.has(absoluteId) && cssMap.get(absoluteId) !== cssSource) {
+            invalidateModule(absoluteId);
           }
@@ -256,2 +257,10 @@ cssMap.set(absoluteId, cssSource);
       });
+      console.timeEnd(`[current] ${validId}`);
+      for (const file of watchFiles) {
+        // In start mode, we need to prevent the file from rewatching itself.
+        // If it's a `build --watch`, it needs to watch everything.
+        if (config.command === 'build' || normalizePath(file) !== validId) {
+          this.addWatchFile(file);
+        }
+      }
       return {
@@ -258,0 +267,0 @@ code: output,

dist/vanilla-extract-vite-plugin.esm.js

 import path from 'path';
-import { normalizePath } from 'vite';
-import outdent from 'outdent';
-import { getPackageInfo, cssFileFilter, transform, compile, processVanillaFile } from '@vanilla-extract/integration';
+import assert from 'assert';
+import { getPackageInfo, createCompiler, cssFileFilter, transform, compile, processVanillaFile } from '@vanilla-extract/integration';
 
@@ -20,2 +19,3 @@ // Mostly copied from vite's implementation
       options,
+      //  @ts-expect-error TODO: incompatible types?
       plugins: inlineOptions.plugins || []
@@ -29,3 +29,2 @@ };
         options: postCssConfig.options,
-        // @ts-expect-error - The postcssrc options don't agree with real postcss, but it should be ok
         plugins: postCssConfig.plugins
@@ -42,8 +41,11 @@ };
 
-const styleUpdateEvent = fileId => `vanilla-extract-style-update:${fileId}`;
 const virtualExtCss = '.vanilla.css';
-const virtualExtJs = '.vanilla.js';
+const cssImportSpecifier = filePath => `${filePath}${virtualExtCss}`;
+
+// Inlined from @rollup/pluginutils
+// https://github.com/rollup/plugins/blob/33174f956304ab4aad4bbaba656f627c31679dc5/packages/pluginutils/src/normalizePath.ts#L5-L7
+const normalizePath = filename => filename.split(path.win32.sep).join(path.posix.sep);
 function vanillaExtractPlugin({
   identifiers,
-  emitCssInSsr,
+  emitCssInSsr = true,
   esbuildOptions
@@ -54,7 +56,27 @@ } = {}) {
   let postCssConfig;
+  let packageName;
+  let compiler;
   const cssMap = new Map();
-  const hasEmitCssOverride = typeof emitCssInSsr === 'boolean';
-  let resolvedEmitCssInSsr = hasEmitCssOverride ? emitCssInSsr : !!process.env.VITE_RSC_BUILD;
-  let packageName;
-  const getAbsoluteVirtualFileId = source => normalizePath(path.join(config.root, source));
+  const getAbsoluteFileId = source => normalizePath(path.resolve(config.root, source));
+  const invalidateModule = absoluteId => {
+    const {
+      moduleGraph
+    } = server;
+    const modules = Array.from(moduleGraph.getModulesByFile(absoluteId) || []);
+    for (const module of modules) {
+      moduleGraph.invalidateModule(module);
+
+      // Vite uses this timestamp to add `?t=` query string automatically for HMR.
+      module.lastHMRTimestamp = module.lastInvalidationTimestamp || Date.now();
+    }
+  };
+  const processCss = async css => {
+    assert(postCssConfig);
+    const postCssResult = await (await import('postcss')).default(postCssConfig.plugins).process(css, {
+      ...postCssConfig.options,
+      from: undefined,
+      map: false
+    });
+    return postCssResult.css;
+  };
   return {
@@ -66,8 +88,4 @@ name: 'vanilla-extract',
     },
-    config(_userConfig, env) {
-      const include = env.command === 'serve' ? ['@vanilla-extract/css/injectStyles'] : [];
+    config() {
       return {
-        optimizeDeps: {
-          include
-        },
         ssr: {
@@ -84,4 +102,12 @@ external: ['@vanilla-extract/css', '@vanilla-extract/css/fileScope', '@vanilla-extract/css/adapter']
       }
-      if (!hasEmitCssOverride && config.plugins.some(plugin => ['astro:build', 'solid-start-server', 'vite-plugin-qwik', 'vite-plugin-svelte'].includes(plugin.name))) {
-        resolvedEmitCssInSsr = true;
+      if (emitCssInSsr === 'compiler') {
+        var _config$inlineConfig$;
+        compiler = createCompiler({
+          root: config.root,
+          identifiers: identifiers !== null && identifiers !== void 0 ? identifiers : config.mode === 'production' ? 'short' : 'debug',
+          cssImportSpecifier,
+          vitePlugins: ((_config$inlineConfig$ = config.inlineConfig.plugins) !== null && _config$inlineConfig$ !== void 0 ? _config$inlineConfig$ : []).flat()
+          // Prevent an infinite loop where the child compiler creates a new child compiler
+          .filter(plugin => typeof plugin === 'object' && plugin !== null && 'name' in plugin && plugin.name !== 'vanilla-extract')
+        });
       }
@@ -91,3 +117,3 @@ },
       const [validId, query] = source.split('?');
-      if (!validId.endsWith(virtualExtCss) && !validId.endsWith(virtualExtJs)) {
+      if (!validId.endsWith(virtualExtCss)) {
         return;
@@ -98,3 +124,3 @@ }
       // imported from outside the config root.
-      const absoluteId = source.startsWith(config.root) ? source : getAbsoluteVirtualFileId(validId);
+      const absoluteId = source.startsWith(config.root) ? source : getAbsoluteFileId(validId);
 
@@ -111,32 +137,8 @@ // There should always be an entry in the `cssMap` here.
       const [validId] = id.split('?');
-      if (!cssMap.has(validId)) {
-        return;
-      }
       const css = cssMap.get(validId);
-      if (typeof css !== 'string') {
-        return;
-      }
-      if (validId.endsWith(virtualExtCss)) {
+      if (typeof css === 'string' && validId.endsWith(virtualExtCss)) {
         return css;
       }
-      return outdent`
-        import { injectStyles } from '@vanilla-extract/css/injectStyles';
-
-        const inject = (css) => injectStyles({
-          fileScope: ${JSON.stringify({
-        filePath: validId
-      })},
-          css
-        });
-
-        inject(${JSON.stringify(css)});
-
-        if (import.meta.hot) {
-          import.meta.hot.on('${styleUpdateEvent(validId)}', (css) => {
-            inject(css);
-          });
-        }
-      `;
     },
-    async transform(code, id, ssrParam) {
+    async transform(code, id) {
       const [validId] = id.split('?');
@@ -146,10 +148,36 @@ if (!cssFileFilter.test(validId)) {
       }
-      const identOption = identifiers ?? (config.mode === 'production' ? 'short' : 'debug');
-      let ssr;
-      if (typeof ssrParam === 'boolean') {
-        ssr = ssrParam;
-      } else {
-        ssr = ssrParam === null || ssrParam === void 0 ? void 0 : ssrParam.ssr;
+      const identOption = identifiers !== null && identifiers !== void 0 ? identifiers : config.mode === 'production' ? 'short' : 'debug';
+      if (compiler) {
+        const absoluteVirtualId = cssImportSpecifier(validId);
+        console.time(`[compiler] ${validId}`);
+        const {
+          source,
+          watchFiles
+        } = await compiler.processVanillaFile(validId);
+        let {
+          css
+        } = compiler.getCssForFile(validId);
+        console.timeEnd(`[compiler] ${validId}`);
+        if (postCssConfig) {
+          css = await processCss(css);
+        }
+        for (const file of watchFiles) {
+          // In start mode, we need to prevent the file from rewatching itself.
+          // If it's a `build --watch`, it needs to watch everything.
+          if (config.command === 'build' || normalizePath(file) !== validId) {
+            this.addWatchFile(file);
+          }
+        }
+        if (cssMap.has(absoluteVirtualId) && cssMap.get(absoluteVirtualId) !== css) {
+          invalidateModule(absoluteVirtualId);
+        }
+        cssMap.set(absoluteVirtualId, css);
+        return {
+          code: source,
+          map: {
+            mappings: ''
+          }
+        };
       }
-      if (ssr && !resolvedEmitCssInSsr) {
+      if (!emitCssInSsr) {
         return transform({
@@ -163,2 +191,3 @@ source: code,
       }
+      console.time(`[current] ${validId}`);
       const {
@@ -173,9 +202,2 @@ source,
       });
-      for (const file of watchFiles) {
-        // In start mode, we need to prevent the file from rewatching itself.
-        // If it's a `build --watch`, it needs to watch everything.
-        if (config.command === 'build' || file !== validId) {
-          this.addWatchFile(file);
-        }
-      }
       const output = await processVanillaFile({
@@ -189,31 +211,10 @@ source,
         }) => {
-          const rootRelativeId = `${fileScope.filePath}${config.command === 'build' || ssr && resolvedEmitCssInSsr ? virtualExtCss : virtualExtJs}`;
-          const absoluteId = getAbsoluteVirtualFileId(rootRelativeId);
+          const rootRelativeId = `${fileScope.filePath}${virtualExtCss}`;
+          const absoluteId = getAbsoluteFileId(rootRelativeId);
           let cssSource = source;
           if (postCssConfig) {
-            const postCssResult = await (await import('postcss')).default(postCssConfig.plugins).process(source, {
-              ...postCssConfig.options,
-              from: undefined,
-              map: false
-            });
-            cssSource = postCssResult.css;
+            cssSource = await processCss(cssSource);
           }
-          if (server && cssMap.has(absoluteId) && cssMap.get(absoluteId) !== source) {
-            const {
-              moduleGraph
-            } = server;
-            const modules = Array.from(moduleGraph.getModulesByFile(absoluteId) || []);
-            for (const module of modules) {
-              if (module) {
-                moduleGraph.invalidateModule(module);
-
-                // Vite uses this timestamp to add `?t=` query string automatically for HMR.
-                module.lastHMRTimestamp = module.lastInvalidationTimestamp || Date.now();
-              }
-            }
-            server.ws.send({
-              type: 'custom',
-              event: styleUpdateEvent(absoluteId),
-              data: cssSource
-            });
+          if (cssMap.has(absoluteId) && cssMap.get(absoluteId) !== cssSource) {
+            invalidateModule(absoluteId);
           }
@@ -227,2 +228,10 @@ cssMap.set(absoluteId, cssSource);
       });
+      console.timeEnd(`[current] ${validId}`);
+      for (const file of watchFiles) {
+        // In start mode, we need to prevent the file from rewatching itself.
+        // If it's a `build --watch`, it needs to watch everything.
+        if (config.command === 'build' || normalizePath(file) !== validId) {
+          this.addWatchFile(file);
+        }
+      }
       return {
@@ -229,0 +238,0 @@ code: output,

package.json

 {
   "name": "@vanilla-extract/vite-plugin",
-  "version": "0.0.0-inline-prototype-202342012537",
+  "version": "0.0.0-vite-plugin-new-20231220045219",
   "description": "Zero-runtime Stylesheets-in-TypeScript",
@@ -18,13 +18,13 @@ "main": "dist/vanilla-extract-vite-plugin.cjs.js",
   "dependencies": {
-    "@vanilla-extract/integration": "^0.0.0-inline-prototype-202342012537",
+    "@vanilla-extract/integration": "0.0.0-vite-plugin-new-20231220045219",
     "outdent": "^0.8.0",
-    "postcss": "^8.3.6",
-    "postcss-load-config": "^3.1.0"
+    "postcss": "^8.4.32",
+    "postcss-load-config": "^4.0.1"
   },
   "devDependencies": {
-    "vite": "npm:vite@^2.7.0"
+    "vite": "npm:vite@^5.0.10"
   },
   "peerDependencies": {
-    "vite": "^2.2.3 || ^3.0.0 || ^4.0.3"
+    "vite": "^2.2.3 || ^3.0.0 || ^4.0.3 || ^5.0.0"
   }
 }

Fixed alerts

Environment variable access

Supply chain risk

Package accesses environment variables, which may be a sign of credential stuffing or data theft.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

31882

increased by5.83%

Lines of code

734

increased by4.71%

Number of low supply chain risk alerts

1

decreased by-75%

Dependency changes

• + Added@esbuild/android-arm@0.17.6(transitive)

• + Added@esbuild/android-arm64@0.17.6(transitive)

• + Added@esbuild/android-x64@0.17.6(transitive)

• + Added@esbuild/darwin-arm64@0.17.6(transitive)

• + Added@esbuild/darwin-x64@0.17.6(transitive)

• + Added@esbuild/freebsd-arm64@0.17.6(transitive)

• + Added@esbuild/freebsd-x64@0.17.6(transitive)

• + Added@esbuild/linux-arm@0.17.6(transitive)

• + Added@esbuild/linux-arm64@0.17.6(transitive)

• + Added@esbuild/linux-ia32@0.17.6(transitive)

• + Added@esbuild/linux-loong64@0.17.6(transitive)

• + Added@esbuild/linux-mips64el@0.17.6(transitive)

• + Added@esbuild/linux-ppc64@0.17.6(transitive)

• + Added@esbuild/linux-riscv64@0.17.6(transitive)

• + Added@esbuild/linux-s390x@0.17.6(transitive)

• + Added@esbuild/linux-x64@0.17.6(transitive)

• + Added@esbuild/netbsd-x64@0.17.6(transitive)

• + Added@esbuild/openbsd-x64@0.17.6(transitive)

• + Added@esbuild/sunos-x64@0.17.6(transitive)

• + Added@esbuild/win32-arm64@0.17.6(transitive)

• + Added@esbuild/win32-ia32@0.17.6(transitive)

• + Added@esbuild/win32-x64@0.17.6(transitive)

• + Added@vanilla-extract/integration@0.0.0-vite-plugin-new-20231220045219(transitive)

• + Addedcaniuse-lite@1.0.30001703(transitive)

• + Addedesbuild@0.17.6(transitive)

• + Addedlilconfig@3.1.3(transitive)

• + Addedlodash@4.17.21(transitive)

• + Addedpostcss-load-config@4.0.2(transitive)

• + Addedyaml@2.7.0(transitive)

• - Removed@esbuild/android-arm@0.18.20(transitive)

• - Removed@esbuild/android-arm64@0.18.20(transitive)

• - Removed@esbuild/android-x64@0.18.20(transitive)

• - Removed@esbuild/darwin-arm64@0.18.20(transitive)

• - Removed@esbuild/darwin-x64@0.18.20(transitive)

• - Removed@esbuild/freebsd-arm64@0.18.20(transitive)

• - Removed@esbuild/freebsd-x64@0.18.20(transitive)

• - Removed@esbuild/linux-arm@0.18.20(transitive)

• - Removed@esbuild/linux-arm64@0.18.20(transitive)

• - Removed@esbuild/linux-ia32@0.18.20(transitive)

• - Removed@esbuild/linux-loong64@0.18.20(transitive)

• - Removed@esbuild/linux-mips64el@0.18.20(transitive)

• - Removed@esbuild/linux-ppc64@0.18.20(transitive)

• - Removed@esbuild/linux-riscv64@0.18.20(transitive)

• - Removed@esbuild/linux-s390x@0.18.20(transitive)

• - Removed@esbuild/linux-x64@0.18.20(transitive)

• - Removed@esbuild/netbsd-x64@0.18.20(transitive)

• - Removed@esbuild/openbsd-x64@0.18.20(transitive)

• - Removed@esbuild/sunos-x64@0.18.20(transitive)

• - Removed@esbuild/win32-arm64@0.18.20(transitive)

• - Removed@esbuild/win32-ia32@0.18.20(transitive)

• - Removed@esbuild/win32-x64@0.18.20(transitive)

• - Removed@vanilla-extract/integration@0.0.0-webpack-vite-compiler-wip-20240609024920(transitive)

• - Removedcaniuse-lite@1.0.30001702(transitive)

• - Removedesbuild@0.18.20(transitive)

• - Removedlilconfig@2.1.0(transitive)

• - Removedpostcss-load-config@3.1.4(transitive)

• - Removedrollup@3.29.5(transitive)

• - Removedvite@4.5.9(transitive)

• - Removedyaml@1.10.2(transitive)

• Updated@vanilla-extract/integration@0.0.0-vite-plugin-new-20231220045219

• Updatedpostcss@^8.4.32

• Updatedpostcss-load-config@^4.0.1