allow plugin to work in rolldown (vanilla-extract-css#1616)

Author: radnan

.changeset/light-guests-pull.md

@@ -0,0 +1,5 @@
+---
+'@vanilla-extract/rollup-plugin': patch
+---
+
+allow plugin to work in rolldown

packages/rollup-plugin/package.json

@@ -24,6 +24,7 @@
     "@rollup/plugin-json": "^6.1.0",
     "@vanilla-extract/css": "workspace:^",
     "esbuild": "~0.25.0",
+    "rolldown": "1.0.0-beta.27",
     "rollup": "^4.20.0",
     "rollup-plugin-esbuild": "^6.1.1"
   },

packages/rollup-plugin/src/index.ts

@@ -116,30 +116,21 @@ export function vanillaExtractPlugin({
         },
       };
     },
-
-    // Emit .css assets
-    moduleParsed(moduleInfo) {
-      moduleInfo.importedIdResolutions.forEach((resolution) => {
-        if (resolution.meta.css && !extract) {
-          resolution.meta.assetId = this.emitFile({
-            type: 'asset',
-            name: resolution.id,
-            source: resolution.meta.css,
-          });
-        }
-      });
-    },
-
-    // Replace .css import paths with relative paths to emitted css files
+    // Emit .css assets and replace .css import paths with relative paths to emitted css files
     renderChunk(code, chunkInfo) {
       const chunkPath = dirname(chunkInfo.fileName);
       const output = chunkInfo.imports.reduce((codeResult, importPath) => {
         const moduleInfo = this.getModuleInfo(importPath);
-        if (!moduleInfo?.meta.assetId) {
+        if (!moduleInfo?.meta.css || extract) {
           return codeResult;
         }
 
-        const assetPath = this.getFileName(moduleInfo?.meta.assetId);
+        const assetId = this.emitFile({
+          type: 'asset',
+          name: moduleInfo.id,
+          source: moduleInfo.meta.css,
+        });
+        const assetPath = this.getFileName(assetId);
         const relativeAssetPath = `./${normalize(
           relative(chunkPath, assetPath),
         )}`;

packages/rollup-plugin/src/lib.ts

@@ -3,11 +3,9 @@ import MagicString, { Bundle as MagicStringBundle } from 'magic-string';
 import type { ModuleInfo, PluginContext } from 'rollup';
 
 /** Generate a CSS bundle from Rollup context */
-export function generateCssBundle({
-  getModuleIds,
-  getModuleInfo,
-  warn,
-}: Pick<PluginContext, 'getModuleIds' | 'getModuleInfo' | 'warn'>): {
+export function generateCssBundle(
+  plugin: Pick<PluginContext, 'getModuleIds' | 'getModuleInfo' | 'warn'>,
+): {
   bundle: MagicStringBundle;
   extractedCssIds: Set<string>;
 } {
@@ -16,17 +14,18 @@ export function generateCssBundle({
 
   // 1. identify CSS files to bundle
   const cssFiles: Record<string, ImportChain> = {};
-  for (const id of getModuleIds()) {
+  for (const id of plugin.getModuleIds()) {
     if (cssFileFilter.test(id)) {
-      cssFiles[id] = buildImportChain(id, { getModuleInfo, warn });
+      cssFiles[id] = buildImportChain(id, plugin);
     }
   }
 
   // 2. build bundle from import order
   for (const id of sortModules(cssFiles)) {
-    const { importedIdResolutions } = getModuleInfo(id) ?? {};
-    for (const resolution of importedIdResolutions ?? []) {
-      if (resolution.meta.css && !extractedCssIds.has(resolution.id)) {
+    const { importedIds } = plugin.getModuleInfo(id) ?? {};
+    for (const importedId of importedIds ?? []) {
+      const resolution = plugin.getModuleInfo(importedId);
+      if (resolution?.meta.css && !extractedCssIds.has(resolution.id)) {
         extractedCssIds.add(resolution.id);
         cssBundle.addSource({
           filename: resolution.id,
@@ -45,9 +44,9 @@ export type ImportChain = [id: string, order: number][];
 /** Trace a file back through its importers, building an ordered list */
 export function buildImportChain(
   id: string,
-  { getModuleInfo, warn }: Pick<PluginContext, 'getModuleInfo' | 'warn'>,
+  plugin: Pick<PluginContext, 'getModuleInfo' | 'warn'>,
 ): ImportChain {
-  let mod: ModuleInfo | null = getModuleInfo(id)!;
+  let mod: ModuleInfo | null = plugin.getModuleInfo(id)!;
   if (!mod) {
     return [];
   }
@@ -61,14 +60,14 @@ export function buildImportChain(
       break;
     }
     if (chain.some(([id]) => id === lastImporterId)) {
-      warn(
+      plugin.warn(
         `Circular import detected. Can’t determine ideal import order of module.\n${chain
           .reverse()
           .join('\n  → ')}`,
       );
       break;
     }
-    mod = getModuleInfo(lastImporterId);
+    mod = plugin.getModuleInfo(lastImporterId);
     if (!mod) {
       break;
     }