@vanilla-extract/integration - npm Package Compare versions

Comparing version 0.0.0-filescope-urls-202281281439 to 0.0.0-filescope-urls-2022827112433

dist/declarations/src/compile.d.ts

 import { Plugin, BuildOptions as EsbuildOptions } from 'esbuild';
-export declare const vanillaExtractFilescopePlugin: () => Plugin;
+import type { IdentifierOption } from './types';
+interface VanillaExtractTransformPluginParams {
+    identOption?: IdentifierOption;
+}
+export declare const vanillaExtractTransformPlugin: ({ identOption, }: VanillaExtractTransformPluginParams) => Plugin;
 export interface CompileOptions {
     filePath: string;
+    identOption: IdentifierOption;
     cwd?: string;
     esbuildOptions?: Pick<EsbuildOptions, 'plugins' | 'external' | 'define' | 'loader'>;
 }
-export declare function compile({ filePath, cwd, esbuildOptions, }: CompileOptions): Promise<{
+export declare function compile({ filePath, identOption, cwd, esbuildOptions, }: CompileOptions): Promise<{
     source: string;
     watchFiles: string[];
 }>;
+export {};

dist/declarations/src/index.d.ts

@@ -1,11 +0,14 @@
-export { processVanillaFile, parseFileScope, stringifyFileScope, } from './processVanillaFile';
+export { processVanillaFile, parseFileScope, stringifyFileScope, serializeVanillaModule, } from './processVanillaFile';
 export { getSourceFromVirtualCssFile } from './virtualFile';
 export { getPackageInfo } from './packageInfo';
-export { compile, vanillaExtractFilescopePlugin } from './compile';
+export { compile, vanillaExtractTransformPlugin } from './compile';
 export { hash } from './hash';
 export { addFileScope } from './addFileScope';
 export { serializeCss, deserializeCss } from './serialize';
+export { transformSync, transform } from './transform';
+export { createCompiler } from './compiler';
 export * from './filters';
-export type { IdentifierOption } from './processVanillaFile';
+export type { IdentifierOption } from './types';
 export type { PackageInfo } from './packageInfo';
 export type { CompileOptions } from './compile';
+export type { Compiler, CreateCompilerParams } from './compiler';

dist/declarations/src/processVanillaFile.d.ts

@@ -1,5 +0,5 @@
-import { FileScope, Adapter } from '@vanilla-extract/css';
+import { FileScope } from '@vanilla-extract/css';
+import type { IdentifierOption } from './types';
 export declare function stringifyFileScope({ packageName, filePath, url, }: FileScope): string;
 export declare function parseFileScope(serialisedFileScope: string): FileScope;
-export declare type IdentifierOption = ReturnType<Adapter['getIdentOption']>;
 interface ProcessVanillaFileOptions {
@@ -10,4 +10,4 @@ source: string;
     identOption?: IdentifierOption;
-    serializeVirtualCssPath?: (file: {
-        fileName: string;
+    serializeVirtualCssPath: (file: {
+        absoluteFilePath: string;
         fileScope: FileScope;
@@ -19,2 +19,3 @@ source: string;
 export declare function stringifyExports(recipeImports: Set<string>, value: any, unusedCompositionRegex: RegExp | null): any;
+export declare function serializeVanillaModule(cssImports: Array<string>, exports: Record<string, unknown>, unusedCompositionRegex: RegExp | null): string;
 export {};

dist/vanilla-extract-integration.cjs.dev.js

@@ -5,2 +5,3 @@ 'use strict';
 
+var url = require('url');
 var transformCss = require('@vanilla-extract/css/transformCss');
@@ -18,6 +19,31 @@ var evalCode = require('eval');
 var esbuild = require('esbuild');
-var url = require('url');
+var babel = require('@babel/core');
+var vanillaBabelPlugin = require('@vanilla-extract/babel-plugin-debug-ids');
+var typescriptSyntax = require('@babel/plugin-syntax-typescript');
+var adapter = require('@vanilla-extract/css/adapter');
+var mlly = require('mlly');
+var vite = require('vite');
+var client = require('vite-node/client');
+var server = require('vite-node/server');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
 
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n["default"] = e;
+  return Object.freeze(n);
+}
+
 var evalCode__default = /*#__PURE__*/_interopDefault(evalCode);
@@ -29,27 +55,8 @@ var isPlainObject__default = /*#__PURE__*/_interopDefault(isPlainObject);
 var findUp__default = /*#__PURE__*/_interopDefault(findUp);
+var babel__namespace = /*#__PURE__*/_interopNamespace(babel);
+var vanillaBabelPlugin__default = /*#__PURE__*/_interopDefault(vanillaBabelPlugin);
+var typescriptSyntax__default = /*#__PURE__*/_interopDefault(typescriptSyntax);
 
 const hash = value => crypto__default["default"].createHash('md5').update(value).digest('hex');
 
-const zip = util.promisify(zlib.gzip);
-const unzip = util.promisify(zlib.gunzip); // The byte threshold for applying compression, below which compressing would out-weigh its value.
-
-const compressionThreshold = 1000;
-const compressionFlag = '#';
-async function serializeCss(source) {
-  if (source.length > compressionThreshold) {
-    const compressedSource = await zip(source);
-    return compressionFlag + compressedSource.toString('base64');
-  }
-
-  return Buffer.from(source, 'utf-8').toString('base64');
-}
-async function deserializeCss(source) {
-  if (source.indexOf(compressionFlag) > -1) {
-    const decompressedSource = await unzip(Buffer.from(source.replace(compressionFlag, ''), 'base64'));
-    return decompressedSource.toString('utf-8');
-  }
-
-  return Buffer.from(source, 'base64').toString('utf-8');
-}
-
 const originalNodeEnv = process.env.NODE_ENV;
@@ -129,20 +136,19 @@ function stringifyFileScope({
     }).join('\n');
-    const fileName = `${fileScope.filePath}.vanilla.css`;
+
+    if (!fileScope.url) {
+      throw new Error(`vanilla-extract: Filescope missing URL property`);
+    }
+
+    const absoluteFilePath = url.fileURLToPath(fileScope.url);
     let virtualCssFilePath;
+    const serializedResult = serializeVirtualCssPath({
+      absoluteFilePath,
+      fileScope,
+      source: css
+    });
 
-    if (serializeVirtualCssPath) {
-      const serializedResult = serializeVirtualCssPath({
-        fileName,
-        fileScope,
-        source: css
-      });
-
-      if (typeof serializedResult === 'string') {
-        virtualCssFilePath = serializedResult;
-      } else {
-        virtualCssFilePath = await serializedResult;
-      }
+    if (typeof serializedResult === 'string') {
+      virtualCssFilePath = serializedResult;
     } else {
-      const serializedCss = await serializeCss(css);
-      virtualCssFilePath = `import '${fileName}?source=${serializedCss}';`;
+      virtualCssFilePath = await serializedResult;
     }
@@ -225,3 +231,2 @@
 }
-
 function serializeVanillaModule(cssImports, exports, unusedCompositionRegex) {
@@ -234,2 +239,24 @@ const recipeImports = new Set();
 
+const zip = util.promisify(zlib.gzip);
+const unzip = util.promisify(zlib.gunzip); // The byte threshold for applying compression, below which compressing would out-weigh its value.
+
+const compressionThreshold = 1000;
+const compressionFlag = '#';
+async function serializeCss(source) {
+  if (source.length > compressionThreshold) {
+    const compressedSource = await zip(source);
+    return compressionFlag + compressedSource.toString('base64');
+  }
+
+  return Buffer.from(source, 'utf-8').toString('base64');
+}
+async function deserializeCss(source) {
+  if (source.indexOf(compressionFlag) > -1) {
+    const decompressedSource = await unzip(Buffer.from(source.replace(compressionFlag, ''), 'base64'));
+    return decompressedSource.toString('utf-8');
+  }
+
+  return Buffer.from(source, 'base64').toString('utf-8');
+}
+
 async function getSourceFromVirtualCssFile(id) {
@@ -294,3 +321,3 @@ var _id$match;
 // .css.ts files but it's added anyway so we need to allow for it in the file match
-const cssFileFilter = /\.css\.(js|mjs|jsx|ts|tsx)(\?used)?$/;
+const cssFileFilter = /\.css\.(js|mjs|cjs|jsx|ts|tsx)(\?used)?$/;
 const virtualCssFileFilter = /\.vanilla\.css\?source=.*$/;
@@ -324,3 +351,68 @@
 
-const vanillaExtractFilescopePlugin = () => ({
+const transformSync = ({
+  source,
+  filePath,
+  rootPath,
+  packageName,
+  identOption
+}) => {
+  let code = source;
+
+  if (identOption === 'debug') {
+    const result = babel__namespace.transformSync(source, {
+      filename: filePath,
+      cwd: rootPath,
+      plugins: [vanillaBabelPlugin__default["default"], typescriptSyntax__default["default"]],
+      configFile: false
+    });
+
+    if (!result || !result.code) {
+      throw new Error('Error adding debug IDs');
+    }
+
+    code = result.code;
+  }
+
+  return addFileScope({
+    source: code,
+    filePath,
+    rootPath,
+    packageName
+  });
+};
+const transform = async ({
+  source,
+  filePath,
+  rootPath,
+  packageName,
+  identOption
+}) => {
+  let code = source;
+
+  if (identOption === 'debug') {
+    const result = await babel__namespace.transform(source, {
+      filename: filePath,
+      cwd: rootPath,
+      plugins: [vanillaBabelPlugin__default["default"], typescriptSyntax__default["default"]],
+      configFile: false
+    });
+
+    if (!result || !result.code) {
+      throw new Error('Error adding debug IDs');
+    }
+
+    code = result.code;
+  }
+
+  return addFileScope({
+    source: code,
+    filePath,
+    rootPath,
+    packageName
+  });
+};
+
+const vanillaExtractTransformPlugin = ({
+  identOption
+}) => ({
   name: 'vanilla-extract-filescope',
@@ -336,7 +428,8 @@
       const originalSource = await fs.promises.readFile(path$1, 'utf-8');
-      const source = addFileScope({
+      const source = await transform({
         source: originalSource,
         filePath: path$1,
         rootPath: build.initialOptions.absWorkingDir,
-        packageName: packageInfo.name
+        packageName: packageInfo.name,
+        identOption: identOption !== null && identOption !== void 0 ? identOption : build.initialOptions.minify ? 'short' : 'debug'
       });
@@ -354,2 +447,3 @@ return {
   filePath,
+  identOption,
   cwd = process.cwd(),
@@ -367,3 +461,5 @@ esbuildOptions
     write: false,
-    plugins: [vanillaExtractFilescopePlugin(), ...((_esbuildOptions$plugi = esbuildOptions === null || esbuildOptions === void 0 ? void 0 : esbuildOptions.plugins) !== null && _esbuildOptions$plugi !== void 0 ? _esbuildOptions$plugi : [])],
+    plugins: [vanillaExtractTransformPlugin({
+      identOption
+    }), ...((_esbuildOptions$plugi = esbuildOptions === null || esbuildOptions === void 0 ? void 0 : esbuildOptions.plugins) !== null && _esbuildOptions$plugi !== void 0 ? _esbuildOptions$plugi : [])],
     absWorkingDir: cwd,
@@ -388,4 +484,261 @@ loader: esbuildOptions === null || esbuildOptions === void 0 ? void 0 : esbuildOptions.loader,
 
+const queue = [];
+let isRunning = false;
+const lock = async fn => {
+  const executeNextTask = () => {
+    const nextTask = queue.pop();
+
+    if (nextTask) {
+      nextTask();
+    } else {
+      isRunning = false;
+    }
+  };
+
+  if (!isRunning) {
+    isRunning = true;
+    const result = await fn();
+    executeNextTask();
+    return result;
+  } else {
+    return new Promise(resolve => {
+      queue.push(async () => {
+        const result = await fn();
+        resolve(result);
+        executeNextTask();
+      });
+    });
+  }
+};
+
+const scanModule = (enrtyModule, cssCache) => {
+  const queue = [enrtyModule];
+  const cssDeps = new Set();
+  const watchFiles = new Set();
+
+  for (const moduleNode of queue) {
+    if (moduleNode.id && cssCache.has(moduleNode.id)) {
+      cssDeps.add(moduleNode.id);
+    }
+
+    if (moduleNode.file) {
+      watchFiles.add(moduleNode.file);
+    }
+
+    for (const importedModule of moduleNode.importedModules) {
+      queue.push(importedModule);
+    }
+  }
+
+  return {
+    cssDeps,
+    watchFiles
+  };
+};
+
+const createViteServer = async root => {
+  const pkg = getPackageInfo(root);
+  const server$1 = await vite.createServer({
+    root,
+    server: {
+      hmr: false
+    },
+    logLevel: 'silent',
+    optimizeDeps: {
+      disabled: true
+    },
+    plugins: [{
+      name: 'vanilla-extract-externalize',
+      enforce: 'pre',
+
+      async resolveId(source, importer) {
+        if (source.startsWith('@vanilla-extract/')) {
+          return {
+            external: true,
+            id: await mlly.resolvePath(source, {
+              url: url.pathToFileURL(importer)
+            })
+          };
+        }
+      }
+
+    }, {
+      name: 'vanilla-extract-transform',
+
+      async transform(code, id) {
+        if (cssFileFilter.test(id)) {
+          const filescopedCode = await transform({
+            source: code,
+            rootPath: root,
+            filePath: id,
+            packageName: pkg.name,
+            identOption: 'debug'
+          });
+          return filescopedCode;
+        }
+      }
+
+    }]
+  }); // this is need to initialize the plugins
+
+  await server$1.pluginContainer.buildStart({});
+  const node = new server.ViteNodeServer(server$1);
+  const runner = new client.ViteNodeRunner({
+    root,
+    base: server$1.config.base,
+
+    fetchModule(id) {
+      return node.fetchModule(id);
+    },
+
+    resolveId(id, importer) {
+      return node.resolveId(id, importer);
+    }
+
+  });
+  server$1.watcher.on('change', filePath => {
+    runner.moduleCache.invalidateDepTree([filePath]);
+  });
+  return {
+    server: server$1,
+    runner
+  };
+};
+
+const createCompiler = ({
+  root,
+  toCssImport
+}) => {
+  const vitePromise = createViteServer(root);
+  const cssCache = new Map();
+  return {
+    async processVanillaFile(filePath) {
+      const {
+        server,
+        runner
+      } = await vitePromise;
+      const cssByFileScope = new Map();
+      const localClassNames = new Set();
+      const composedClassLists = [];
+      const usedCompositions = new Set();
+      const executedUrls = [];
+      const cssAdapter = {
+        appendCss: (css, fileScope) => {
+          var _cssByFileScope$get;
+
+          const fileScopeCss = (_cssByFileScope$get = cssByFileScope.get(fileScope.url)) !== null && _cssByFileScope$get !== void 0 ? _cssByFileScope$get : [];
+          fileScopeCss.push(css);
+          cssByFileScope.set(fileScope.url, fileScopeCss);
+        },
+        registerClassName: className => {
+          localClassNames.add(className);
+        },
+        registerComposition: composedClassList => {
+          composedClassLists.push(composedClassList);
+        },
+        markCompositionUsed: identifier => {
+          usedCompositions.add(identifier);
+        },
+        onEndFileScope: fileScope => {
+          executedUrls.push(fileScope.url);
+        },
+        getIdentOption: () => 'debug'
+      };
+      const {
+        fileExports,
+        cssImports,
+        watchFiles
+      } = await lock(async () => {
+        adapter.setAdapter(cssAdapter);
+        const fileExports = await runner.executeFile(filePath);
+        const moduleNode = server.moduleGraph.getModuleById(filePath);
+
+        if (!moduleNode) {
+          throw new Error(`Can't find ModuleNode for ${filePath}`);
+        }
+
+        const cssImports = [];
+        const {
+          cssDeps,
+          watchFiles
+        } = scanModule(moduleNode, cssCache);
+
+        for (const moduleId of cssDeps) {
+          const cssEntry = cssCache.get(moduleId);
+
+          if (!cssEntry) {
+            throw new Error(`No CSS Entry in cache for ${moduleId}`);
+          }
+
+          cssImports.push(`import '${toCssImport(filePath)}';`);
+          cssEntry.localClassNames.forEach(localClassName => {
+            localClassNames.add(localClassName);
+          });
+          cssEntry.usedCompositions.forEach(usedComposition => {
+            usedCompositions.add(usedComposition);
+          });
+          composedClassLists.push(...cssEntry.composedClassLists);
+        }
+
+        for (const url$1 of executedUrls) {
+          const css = transformCss.transformCss({
+            localClassNames: Array.from(localClassNames),
+            composedClassLists,
+            cssObjs: cssByFileScope.get(url$1)
+          }).join('\n');
+          const moduleId = url.fileURLToPath(url$1);
+          cssImports.push(`import '${toCssImport(moduleId)}';`);
+          cssCache.set(moduleId, {
+            localClassNames,
+            composedClassLists,
+            usedCompositions,
+            css
+          });
+        }
+
+        adapter.removeAdapter();
+        return {
+          fileExports,
+          cssImports,
+          watchFiles
+        };
+      });
+      const unusedCompositions = composedClassLists.filter(({
+        identifier
+      }) => !usedCompositions.has(identifier)).map(({
+        identifier
+      }) => identifier);
+      const unusedCompositionRegex = unusedCompositions.length > 0 ? RegExp(`(${unusedCompositions.join('|')})\\s`, 'g') : null;
+      return {
+        source: serializeVanillaModule(cssImports, fileExports, unusedCompositionRegex),
+        watchFiles
+      };
+    },
+
+    getCssForFile(filePath) {
+      const result = cssCache.get(filePath);
+
+      if (!result) {
+        throw new Error(`No CSS for file: ${filePath}`);
+      }
+
+      return {
+        css: result.css,
+        filePath
+      };
+    },
+
+    async close() {
+      const {
+        server
+      } = await vitePromise;
+      await server.close();
+    }
+
+  };
+};
+
 exports.addFileScope = addFileScope;
 exports.compile = compile;
+exports.createCompiler = createCompiler;
 exports.cssFileFilter = cssFileFilter;
@@ -399,4 +752,7 @@ exports.deserializeCss = deserializeCss;
 exports.serializeCss = serializeCss;
+exports.serializeVanillaModule = serializeVanillaModule;
 exports.stringifyFileScope = stringifyFileScope;
-exports.vanillaExtractFilescopePlugin = vanillaExtractFilescopePlugin;
+exports.transform = transform;
+exports.transformSync = transformSync;
+exports.vanillaExtractTransformPlugin = vanillaExtractTransformPlugin;
 exports.virtualCssFileFilter = virtualCssFileFilter;

dist/vanilla-extract-integration.cjs.prod.js

@@ -5,2 +5,3 @@ 'use strict';
 
+var url = require('url');
 var transformCss = require('@vanilla-extract/css/transformCss');
@@ -18,6 +19,31 @@ var evalCode = require('eval');
 var esbuild = require('esbuild');
-var url = require('url');
+var babel = require('@babel/core');
+var vanillaBabelPlugin = require('@vanilla-extract/babel-plugin-debug-ids');
+var typescriptSyntax = require('@babel/plugin-syntax-typescript');
+var adapter = require('@vanilla-extract/css/adapter');
+var mlly = require('mlly');
+var vite = require('vite');
+var client = require('vite-node/client');
+var server = require('vite-node/server');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
 
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n["default"] = e;
+  return Object.freeze(n);
+}
+
 var evalCode__default = /*#__PURE__*/_interopDefault(evalCode);
@@ -29,27 +55,8 @@ var isPlainObject__default = /*#__PURE__*/_interopDefault(isPlainObject);
 var findUp__default = /*#__PURE__*/_interopDefault(findUp);
+var babel__namespace = /*#__PURE__*/_interopNamespace(babel);
+var vanillaBabelPlugin__default = /*#__PURE__*/_interopDefault(vanillaBabelPlugin);
+var typescriptSyntax__default = /*#__PURE__*/_interopDefault(typescriptSyntax);
 
 const hash = value => crypto__default["default"].createHash('md5').update(value).digest('hex');
 
-const zip = util.promisify(zlib.gzip);
-const unzip = util.promisify(zlib.gunzip); // The byte threshold for applying compression, below which compressing would out-weigh its value.
-
-const compressionThreshold = 1000;
-const compressionFlag = '#';
-async function serializeCss(source) {
-  if (source.length > compressionThreshold) {
-    const compressedSource = await zip(source);
-    return compressionFlag + compressedSource.toString('base64');
-  }
-
-  return Buffer.from(source, 'utf-8').toString('base64');
-}
-async function deserializeCss(source) {
-  if (source.indexOf(compressionFlag) > -1) {
-    const decompressedSource = await unzip(Buffer.from(source.replace(compressionFlag, ''), 'base64'));
-    return decompressedSource.toString('utf-8');
-  }
-
-  return Buffer.from(source, 'base64').toString('utf-8');
-}
-
 const originalNodeEnv =         "production";
@@ -129,20 +136,19 @@ function stringifyFileScope({
     }).join('\n');
-    const fileName = `${fileScope.filePath}.vanilla.css`;
+
+    if (!fileScope.url) {
+      throw new Error(`vanilla-extract: Filescope missing URL property`);
+    }
+
+    const absoluteFilePath = url.fileURLToPath(fileScope.url);
     let virtualCssFilePath;
+    const serializedResult = serializeVirtualCssPath({
+      absoluteFilePath,
+      fileScope,
+      source: css
+    });
 
-    if (serializeVirtualCssPath) {
-      const serializedResult = serializeVirtualCssPath({
-        fileName,
-        fileScope,
-        source: css
-      });
-
-      if (typeof serializedResult === 'string') {
-        virtualCssFilePath = serializedResult;
-      } else {
-        virtualCssFilePath = await serializedResult;
-      }
+    if (typeof serializedResult === 'string') {
+      virtualCssFilePath = serializedResult;
     } else {
-      const serializedCss = await serializeCss(css);
-      virtualCssFilePath = `import '${fileName}?source=${serializedCss}';`;
+      virtualCssFilePath = await serializedResult;
     }
@@ -225,3 +231,2 @@
 }
-
 function serializeVanillaModule(cssImports, exports, unusedCompositionRegex) {
@@ -234,2 +239,24 @@ const recipeImports = new Set();
 
+const zip = util.promisify(zlib.gzip);
+const unzip = util.promisify(zlib.gunzip); // The byte threshold for applying compression, below which compressing would out-weigh its value.
+
+const compressionThreshold = 1000;
+const compressionFlag = '#';
+async function serializeCss(source) {
+  if (source.length > compressionThreshold) {
+    const compressedSource = await zip(source);
+    return compressionFlag + compressedSource.toString('base64');
+  }
+
+  return Buffer.from(source, 'utf-8').toString('base64');
+}
+async function deserializeCss(source) {
+  if (source.indexOf(compressionFlag) > -1) {
+    const decompressedSource = await unzip(Buffer.from(source.replace(compressionFlag, ''), 'base64'));
+    return decompressedSource.toString('utf-8');
+  }
+
+  return Buffer.from(source, 'base64').toString('utf-8');
+}
+
 async function getSourceFromVirtualCssFile(id) {
@@ -294,3 +321,3 @@ var _id$match;
 // .css.ts files but it's added anyway so we need to allow for it in the file match
-const cssFileFilter = /\.css\.(js|mjs|jsx|ts|tsx)(\?used)?$/;
+const cssFileFilter = /\.css\.(js|mjs|cjs|jsx|ts|tsx)(\?used)?$/;
 const virtualCssFileFilter = /\.vanilla\.css\?source=.*$/;
@@ -324,3 +351,68 @@
 
-const vanillaExtractFilescopePlugin = () => ({
+const transformSync = ({
+  source,
+  filePath,
+  rootPath,
+  packageName,
+  identOption
+}) => {
+  let code = source;
+
+  if (identOption === 'debug') {
+    const result = babel__namespace.transformSync(source, {
+      filename: filePath,
+      cwd: rootPath,
+      plugins: [vanillaBabelPlugin__default["default"], typescriptSyntax__default["default"]],
+      configFile: false
+    });
+
+    if (!result || !result.code) {
+      throw new Error('Error adding debug IDs');
+    }
+
+    code = result.code;
+  }
+
+  return addFileScope({
+    source: code,
+    filePath,
+    rootPath,
+    packageName
+  });
+};
+const transform = async ({
+  source,
+  filePath,
+  rootPath,
+  packageName,
+  identOption
+}) => {
+  let code = source;
+
+  if (identOption === 'debug') {
+    const result = await babel__namespace.transform(source, {
+      filename: filePath,
+      cwd: rootPath,
+      plugins: [vanillaBabelPlugin__default["default"], typescriptSyntax__default["default"]],
+      configFile: false
+    });
+
+    if (!result || !result.code) {
+      throw new Error('Error adding debug IDs');
+    }
+
+    code = result.code;
+  }
+
+  return addFileScope({
+    source: code,
+    filePath,
+    rootPath,
+    packageName
+  });
+};
+
+const vanillaExtractTransformPlugin = ({
+  identOption
+}) => ({
   name: 'vanilla-extract-filescope',
@@ -336,7 +428,8 @@
       const originalSource = await fs.promises.readFile(path$1, 'utf-8');
-      const source = addFileScope({
+      const source = await transform({
         source: originalSource,
         filePath: path$1,
         rootPath: build.initialOptions.absWorkingDir,
-        packageName: packageInfo.name
+        packageName: packageInfo.name,
+        identOption: identOption !== null && identOption !== void 0 ? identOption : build.initialOptions.minify ? 'short' : 'debug'
       });
@@ -354,2 +447,3 @@ return {
   filePath,
+  identOption,
   cwd = process.cwd(),
@@ -367,3 +461,5 @@ esbuildOptions
     write: false,
-    plugins: [vanillaExtractFilescopePlugin(), ...((_esbuildOptions$plugi = esbuildOptions === null || esbuildOptions === void 0 ? void 0 : esbuildOptions.plugins) !== null && _esbuildOptions$plugi !== void 0 ? _esbuildOptions$plugi : [])],
+    plugins: [vanillaExtractTransformPlugin({
+      identOption
+    }), ...((_esbuildOptions$plugi = esbuildOptions === null || esbuildOptions === void 0 ? void 0 : esbuildOptions.plugins) !== null && _esbuildOptions$plugi !== void 0 ? _esbuildOptions$plugi : [])],
     absWorkingDir: cwd,
@@ -388,4 +484,261 @@ loader: esbuildOptions === null || esbuildOptions === void 0 ? void 0 : esbuildOptions.loader,
 
+const queue = [];
+let isRunning = false;
+const lock = async fn => {
+  const executeNextTask = () => {
+    const nextTask = queue.pop();
+
+    if (nextTask) {
+      nextTask();
+    } else {
+      isRunning = false;
+    }
+  };
+
+  if (!isRunning) {
+    isRunning = true;
+    const result = await fn();
+    executeNextTask();
+    return result;
+  } else {
+    return new Promise(resolve => {
+      queue.push(async () => {
+        const result = await fn();
+        resolve(result);
+        executeNextTask();
+      });
+    });
+  }
+};
+
+const scanModule = (enrtyModule, cssCache) => {
+  const queue = [enrtyModule];
+  const cssDeps = new Set();
+  const watchFiles = new Set();
+
+  for (const moduleNode of queue) {
+    if (moduleNode.id && cssCache.has(moduleNode.id)) {
+      cssDeps.add(moduleNode.id);
+    }
+
+    if (moduleNode.file) {
+      watchFiles.add(moduleNode.file);
+    }
+
+    for (const importedModule of moduleNode.importedModules) {
+      queue.push(importedModule);
+    }
+  }
+
+  return {
+    cssDeps,
+    watchFiles
+  };
+};
+
+const createViteServer = async root => {
+  const pkg = getPackageInfo(root);
+  const server$1 = await vite.createServer({
+    root,
+    server: {
+      hmr: false
+    },
+    logLevel: 'silent',
+    optimizeDeps: {
+      disabled: true
+    },
+    plugins: [{
+      name: 'vanilla-extract-externalize',
+      enforce: 'pre',
+
+      async resolveId(source, importer) {
+        if (source.startsWith('@vanilla-extract/')) {
+          return {
+            external: true,
+            id: await mlly.resolvePath(source, {
+              url: url.pathToFileURL(importer)
+            })
+          };
+        }
+      }
+
+    }, {
+      name: 'vanilla-extract-transform',
+
+      async transform(code, id) {
+        if (cssFileFilter.test(id)) {
+          const filescopedCode = await transform({
+            source: code,
+            rootPath: root,
+            filePath: id,
+            packageName: pkg.name,
+            identOption: 'debug'
+          });
+          return filescopedCode;
+        }
+      }
+
+    }]
+  }); // this is need to initialize the plugins
+
+  await server$1.pluginContainer.buildStart({});
+  const node = new server.ViteNodeServer(server$1);
+  const runner = new client.ViteNodeRunner({
+    root,
+    base: server$1.config.base,
+
+    fetchModule(id) {
+      return node.fetchModule(id);
+    },
+
+    resolveId(id, importer) {
+      return node.resolveId(id, importer);
+    }
+
+  });
+  server$1.watcher.on('change', filePath => {
+    runner.moduleCache.invalidateDepTree([filePath]);
+  });
+  return {
+    server: server$1,
+    runner
+  };
+};
+
+const createCompiler = ({
+  root,
+  toCssImport
+}) => {
+  const vitePromise = createViteServer(root);
+  const cssCache = new Map();
+  return {
+    async processVanillaFile(filePath) {
+      const {
+        server,
+        runner
+      } = await vitePromise;
+      const cssByFileScope = new Map();
+      const localClassNames = new Set();
+      const composedClassLists = [];
+      const usedCompositions = new Set();
+      const executedUrls = [];
+      const cssAdapter = {
+        appendCss: (css, fileScope) => {
+          var _cssByFileScope$get;
+
+          const fileScopeCss = (_cssByFileScope$get = cssByFileScope.get(fileScope.url)) !== null && _cssByFileScope$get !== void 0 ? _cssByFileScope$get : [];
+          fileScopeCss.push(css);
+          cssByFileScope.set(fileScope.url, fileScopeCss);
+        },
+        registerClassName: className => {
+          localClassNames.add(className);
+        },
+        registerComposition: composedClassList => {
+          composedClassLists.push(composedClassList);
+        },
+        markCompositionUsed: identifier => {
+          usedCompositions.add(identifier);
+        },
+        onEndFileScope: fileScope => {
+          executedUrls.push(fileScope.url);
+        },
+        getIdentOption: () => 'debug'
+      };
+      const {
+        fileExports,
+        cssImports,
+        watchFiles
+      } = await lock(async () => {
+        adapter.setAdapter(cssAdapter);
+        const fileExports = await runner.executeFile(filePath);
+        const moduleNode = server.moduleGraph.getModuleById(filePath);
+
+        if (!moduleNode) {
+          throw new Error(`Can't find ModuleNode for ${filePath}`);
+        }
+
+        const cssImports = [];
+        const {
+          cssDeps,
+          watchFiles
+        } = scanModule(moduleNode, cssCache);
+
+        for (const moduleId of cssDeps) {
+          const cssEntry = cssCache.get(moduleId);
+
+          if (!cssEntry) {
+            throw new Error(`No CSS Entry in cache for ${moduleId}`);
+          }
+
+          cssImports.push(`import '${toCssImport(filePath)}';`);
+          cssEntry.localClassNames.forEach(localClassName => {
+            localClassNames.add(localClassName);
+          });
+          cssEntry.usedCompositions.forEach(usedComposition => {
+            usedCompositions.add(usedComposition);
+          });
+          composedClassLists.push(...cssEntry.composedClassLists);
+        }
+
+        for (const url$1 of executedUrls) {
+          const css = transformCss.transformCss({
+            localClassNames: Array.from(localClassNames),
+            composedClassLists,
+            cssObjs: cssByFileScope.get(url$1)
+          }).join('\n');
+          const moduleId = url.fileURLToPath(url$1);
+          cssImports.push(`import '${toCssImport(moduleId)}';`);
+          cssCache.set(moduleId, {
+            localClassNames,
+            composedClassLists,
+            usedCompositions,
+            css
+          });
+        }
+
+        adapter.removeAdapter();
+        return {
+          fileExports,
+          cssImports,
+          watchFiles
+        };
+      });
+      const unusedCompositions = composedClassLists.filter(({
+        identifier
+      }) => !usedCompositions.has(identifier)).map(({
+        identifier
+      }) => identifier);
+      const unusedCompositionRegex = unusedCompositions.length > 0 ? RegExp(`(${unusedCompositions.join('|')})\\s`, 'g') : null;
+      return {
+        source: serializeVanillaModule(cssImports, fileExports, unusedCompositionRegex),
+        watchFiles
+      };
+    },
+
+    getCssForFile(filePath) {
+      const result = cssCache.get(filePath);
+
+      if (!result) {
+        throw new Error(`No CSS for file: ${filePath}`);
+      }
+
+      return {
+        css: result.css,
+        filePath
+      };
+    },
+
+    async close() {
+      const {
+        server
+      } = await vitePromise;
+      await server.close();
+    }
+
+  };
+};
+
 exports.addFileScope = addFileScope;
 exports.compile = compile;
+exports.createCompiler = createCompiler;
 exports.cssFileFilter = cssFileFilter;
@@ -399,4 +752,7 @@ exports.deserializeCss = deserializeCss;
 exports.serializeCss = serializeCss;
+exports.serializeVanillaModule = serializeVanillaModule;
 exports.stringifyFileScope = stringifyFileScope;
-exports.vanillaExtractFilescopePlugin = vanillaExtractFilescopePlugin;
+exports.transform = transform;
+exports.transformSync = transformSync;
+exports.vanillaExtractTransformPlugin = vanillaExtractTransformPlugin;
 exports.virtualCssFileFilter = virtualCssFileFilter;

package.json

 {
   "name": "@vanilla-extract/integration",
-  "version": "0.0.0-filescope-urls-202281281439",
+  "version": "0.0.0-filescope-urls-2022827112433",
   "description": "Zero-runtime Stylesheets-in-TypeScript",
@@ -11,3 +11,3 @@ "main": "dist/vanilla-extract-integration.cjs.js",
     "type": "git",
-    "url": "https://github.com/seek-oss/vanilla-extract.git",
+    "url": "https://github.com/vanilla-extract-css/vanilla-extract.git",
     "directory": "packages/integration"
@@ -18,3 +18,6 @@ },
   "dependencies": {
-    "@vanilla-extract/css": "^0.0.0-filescope-urls-202281281439",
+    "@babel/core": "^7.13.10",
+    "@babel/plugin-syntax-typescript": "^7.18.6",
+    "@vanilla-extract/babel-plugin-debug-ids": "^1.0.0",
+    "@vanilla-extract/css": "^0.0.0-filescope-urls-2022827112433",
     "esbuild": "^0.11.16",
@@ -25,7 +28,11 @@ "eval": "0.1.6",
     "lodash": "^4.17.21",
-    "outdent": "^0.8.0"
+    "mlly": "0.5.16",
+    "outdent": "^0.8.0",
+    "vite": "^2.9.15",
+    "vite-node": "^0.23.4"
   },
   "devDependencies": {
+    "@types/babel__core": "^7.1.19",
     "@types/lodash": "^4.14.168"
   }
 }

No alert changes

Improved metrics

Total package byte prevSize

51644

increased by62.95%

Number of package files

20

increased by25%

Lines of code

1417

increased by89.69%

Worsened metrics

Dependency count

13

increased by85.71%

Dev dependency count

2

increased by100%

Dependency changes

• + Added@babel/core@^7.13.10

• + Added@babel/plugin-syntax-typescript@^7.18.6

• + Added@vanilla-extract/babel-plugin-debug-ids@^1.0.0

• + Addedmlly@0.5.16

• + Addedvite@^2.9.15

• + Addedvite-node@^0.23.4

• + Added@ampproject/remapping@2.3.0(transitive)

• + Added@babel/code-frame@7.26.2(transitive)

• + Added@babel/compat-data@7.26.5(transitive)

• + Added@babel/core@7.26.0(transitive)

• + Added@babel/generator@7.26.5(transitive)

• + Added@babel/helper-compilation-targets@7.26.5(transitive)

• + Added@babel/helper-module-imports@7.25.9(transitive)

• + Added@babel/helper-module-transforms@7.26.0(transitive)

• + Added@babel/helper-plugin-utils@7.26.5(transitive)

• + Added@babel/helper-string-parser@7.25.9(transitive)

• + Added@babel/helper-validator-identifier@7.25.9(transitive)

• + Added@babel/helper-validator-option@7.25.9(transitive)

• + Added@babel/helpers@7.26.0(transitive)

• + Added@babel/parser@7.26.5(transitive)

• + Added@babel/plugin-syntax-typescript@7.25.9(transitive)

• + Added@babel/template@7.25.9(transitive)

• + Added@babel/traverse@7.26.5(transitive)

• + Added@babel/types@7.26.5(transitive)

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

• + Added@jridgewell/gen-mapping@0.3.8(transitive)

• + Added@jridgewell/resolve-uri@3.1.2(transitive)

• + Added@jridgewell/set-array@1.2.1(transitive)

• + Added@jridgewell/sourcemap-codec@1.5.0(transitive)

• + Added@jridgewell/trace-mapping@0.3.25(transitive)

• + Added@vanilla-extract/babel-plugin-debug-ids@1.2.0(transitive)

• + Addedacorn@8.14.0(transitive)

• + Addedbrowserslist@4.24.4(transitive)

• + Addedcaniuse-lite@1.0.30001695(transitive)

• + Addedconvert-source-map@2.0.0(transitive)

• + Addeddebug@4.4.0(transitive)

• + Addedelectron-to-chromium@1.5.84(transitive)

• + Addedesbuild@0.14.54(transitive)

• + Addedesbuild-android-64@0.14.54(transitive)

• + Addedesbuild-android-arm64@0.14.54(transitive)

• + Addedesbuild-darwin-64@0.14.54(transitive)

• + Addedesbuild-darwin-arm64@0.14.54(transitive)

• + Addedesbuild-freebsd-64@0.14.54(transitive)

• + Addedesbuild-freebsd-arm64@0.14.54(transitive)

• + Addedesbuild-linux-32@0.14.54(transitive)

• + Addedesbuild-linux-64@0.14.54(transitive)

• + Addedesbuild-linux-arm@0.14.54(transitive)

• + Addedesbuild-linux-arm64@0.14.54(transitive)

• + Addedesbuild-linux-mips64le@0.14.54(transitive)

• + Addedesbuild-linux-ppc64le@0.14.54(transitive)

• + Addedesbuild-linux-riscv64@0.14.54(transitive)

• + Addedesbuild-linux-s390x@0.14.54(transitive)

• + Addedesbuild-netbsd-64@0.14.54(transitive)

• + Addedesbuild-openbsd-64@0.14.54(transitive)

• + Addedesbuild-sunos-64@0.14.54(transitive)

• + Addedesbuild-windows-32@0.14.54(transitive)

• + Addedesbuild-windows-64@0.14.54(transitive)

• + Addedesbuild-windows-arm64@0.14.54(transitive)

• + Addedescalade@3.2.0(transitive)

• + Addedfsevents@2.3.3(transitive)

• + Addedfunction-bind@1.1.2(transitive)

• + Addedgensync@1.0.0-beta.2(transitive)

• + Addedglobals@11.12.0(transitive)

• + Addedhasown@2.0.2(transitive)

• + Addedis-core-module@2.16.1(transitive)

• + Addedjs-tokens@4.0.0(transitive)

• + Addedjsesc@3.1.0(transitive)

• + Addedjson5@2.2.3(transitive)

• + Addedjsonc-parser@3.3.1(transitive)

• + Addedlru-cache@5.1.1(transitive)

• + Addedmlly@0.5.16(transitive)

• + Addedms@2.1.3(transitive)

• + Addednanoid@3.3.8(transitive)

• + Addednode-releases@2.0.19(transitive)

• + Addedpath-parse@1.0.7(transitive)

• + Addedpathe@0.2.00.3.9(transitive)

• + Addedpicocolors@1.1.1(transitive)

• + Addedpkg-types@0.3.6(transitive)

• + Addedpostcss@8.5.1(transitive)

• + Addedresolve@1.22.10(transitive)

• + Addedrollup@2.77.3(transitive)

• + Addedsemver@6.3.1(transitive)

• + Addedsource-map-js@1.2.1(transitive)

• + Addedsupports-preserve-symlinks-flag@1.0.0(transitive)

• + Addedufo@0.8.6(transitive)

• + Addedupdate-browserslist-db@1.1.2(transitive)

• + Addedvite@2.9.18(transitive)

• + Addedvite-node@0.23.4(transitive)

• + Addedyallist@3.1.1(transitive)

• Updated@vanilla-extract/css@^0.0.0-filescope-urls-2022827112433