rollup: Add unstable_injectFilescopes flag (#1654)

Author: askoufis

.changeset/quiet-islands-shake.md

@@ -0,0 +1,9 @@
+---
+'@vanilla-extract/rollup-plugin': minor
+---
+
+Add optional `unstable_injectFilescopes` flag
+
+The `unstable_injectFilescopes` flag injects filescopes into Vanilla Extract modules instead of generating CSS. This is useful for utility or component libraries that prefer their consumers to process Vanilla Extract files instead of bundling CSS.
+
+Note that this flag only works with `preserveModules: true`.

packages/rollup-plugin/src/index.ts

@@ -6,10 +6,15 @@ import {
   type IdentifierOption,
   getSourceFromVirtualCssFile,
   virtualCssFileFilter,
+  transform,
   type CompileOptions,
 } from '@vanilla-extract/integration';
 import { posix } from 'path';
-import { generateCssBundle, stripSideEffectImportsMatching } from './lib';
+import {
+  generateCssBundle,
+  stripSideEffectImportsMatching,
+  tryGetPackageName,
+} from './lib';
 
 const { relative, normalize, dirname } = posix;
 
@@ -51,13 +56,25 @@ export interface Options {
         sourcemap?: boolean;
       }
     | false;
+
+  /**
+   * Inject filescopes into Vanilla Extract modules instead of generating CSS.
+   * Useful for utility or component libraries that prefer their consumers to
+   * process Vanilla Extract files instead of bundling CSS.
+   *
+   * Only works with `preserveModules: true`.
+   *
+   * @default false
+   */
+  unstable_injectFilescopes?: boolean;
 }
 
 export function vanillaExtractPlugin({
   identifiers,
   cwd = process.cwd(),
   esbuildOptions,
   extract = false,
+  unstable_injectFilescopes = false,
 }: Options = {}): Plugin {
   const isProduction = process.env.NODE_ENV === 'production';
 
@@ -71,14 +88,29 @@ export function vanillaExtractPlugin({
     },
 
     // Transform .css.js to .js
-    async transform(_code, id) {
+    async transform(code, id) {
       if (!cssFileFilter.test(id)) {
         return null;
       }
 
+      const identOption = identifiers ?? (isProduction ? 'short' : 'debug');
       const [filePath] = id.split('?');
 
-      const identOption = identifiers ?? (isProduction ? 'short' : 'debug');
+      if (unstable_injectFilescopes) {
+        const packageName = await tryGetPackageName(cwd);
+        const transformedCode = await transform({
+          source: code,
+          filePath: id,
+          rootPath: cwd,
+          packageName: packageName ?? '',
+          identOption,
+        });
+
+        return {
+          code: transformedCode,
+          map: { mappings: '' },
+        };
+      }
 
       const { source, watchFiles } = await compile({
         filePath,

packages/rollup-plugin/src/lib.ts

@@ -1,6 +1,7 @@
 import { cssFileFilter } from '@vanilla-extract/integration';
 import MagicString, { Bundle as MagicStringBundle } from 'magic-string';
 import type { ModuleInfo, PluginContext } from 'rollup';
+import { posix } from 'path';
 
 /** Generate a CSS bundle from Rollup context */
 export function generateCssBundle(
@@ -121,3 +122,13 @@ export function stripSideEffectImportsMatching(
   }
   return output;
 }
+
+export async function tryGetPackageName(cwd: string): Promise<string | null> {
+  try {
+    const packageJson = require(posix.join(cwd, 'package.json'));
+
+    return packageJson?.name || null;
+  } catch {
+    return null;
+  }
+}