Skip to content

allow plugin to work in rolldown #1616

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 3 commits into
base: master
Choose a base branch
from
Open

allow plugin to work in rolldown #1616

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
9446b1a
keep plugin as object instead of destructuring
radnan Jul 14, 2025
96389ce
allow plugin to work in rolldown
radnan Jun 18, 2025
d385965
add rolldown tests for rollup-plugin
radnan Jun 24, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions .changeset/light-guests-pull.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'@vanilla-extract/rollup-plugin': patch
---

allow plugin to work in rolldown
1 change: 1 addition & 0 deletions packages/rollup-plugin/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
},
Expand Down
25 changes: 8 additions & 17 deletions packages/rollup-plugin/src/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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),
)}`;
Expand Down
27 changes: 13 additions & 14 deletions packages/rollup-plugin/src/lib.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>;
} {
Expand All @@ -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) ?? {};
Copy link
Author

@radnan radnan Jul 14, 2025 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

thanks for offering to take it up @askoufis! but i resolved the conflicts - didn't look like there were too many of them.

i also duplicated the same extract test under rolldown describe section

and thanks again for taking the time to review this

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,
Expand All @@ -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 [];
}
Expand All @@ -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;
}
Expand Down
Loading
Loading