diff --git a/.changeset/light-guests-pull.md b/.changeset/light-guests-pull.md new file mode 100644 index 000000000..e4123db4d --- /dev/null +++ b/.changeset/light-guests-pull.md @@ -0,0 +1,5 @@ +--- +'@vanilla-extract/rollup-plugin': patch +--- + +allow plugin to work in rolldown diff --git a/packages/rollup-plugin/package.json b/packages/rollup-plugin/package.json index ff04d361e..845de2972 100644 --- a/packages/rollup-plugin/package.json +++ b/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" }, diff --git a/packages/rollup-plugin/src/index.ts b/packages/rollup-plugin/src/index.ts index 84764be9c..775bd5153 100644 --- a/packages/rollup-plugin/src/index.ts +++ b/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), )}`; diff --git a/packages/rollup-plugin/src/lib.ts b/packages/rollup-plugin/src/lib.ts index ca711afc6..b397c8ab7 100644 --- a/packages/rollup-plugin/src/lib.ts +++ b/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): { +export function generateCssBundle( + plugin: Pick, +): { bundle: MagicStringBundle; extractedCssIds: Set; } { @@ -16,17 +14,18 @@ export function generateCssBundle({ // 1. identify CSS files to bundle const cssFiles: Record = {}; - 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, + plugin: Pick, ): 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; } diff --git a/packages/rollup-plugin/test/__snapshots__/rollup-plugin.test.ts.snap b/packages/rollup-plugin/test/__snapshots__/rollup-plugin.test.ts.snap index 72a411414..f44b44a74 100644 --- a/packages/rollup-plugin/test/__snapshots__/rollup-plugin.test.ts.snap +++ b/packages/rollup-plugin/test/__snapshots__/rollup-plugin.test.ts.snap @@ -1220,3 +1220,1270 @@ export { Radio as default }; ], ] `; + +exports[`stripSideEffectImportsMatching should be compatible with rolldown extract generates .css bundle 1`] = ` +[ + [ + "app.css", + "html, body { + font-size: 100%; + height: 100%; + line-height: 1; + margin: 0; +} +.vars__15dpm870 { + --color-black-100: color(srgb 0.047058823529411764 0.047058823529411764 0.050980392156862744 / 0.050980392156862744); + --color-black-200: color(srgb 0.047058823529411764 0.047058823529411764 0.050980392156862744 / 0.10196078431372549); + --color-black-300: color(srgb 0.047058823529411764 0.047058823529411764 0.050980392156862744 / 0.2); + --color-black-400: color(srgb 0.047058823529411764 0.047058823529411764 0.050980392156862744 / 0.4); + --color-black-500: color(srgb 0.047058823529411764 0.047058823529411764 0.050980392156862744 / 0.6980392156862745); + --color-black-600: color(srgb 0.047058823529411764 0.047058823529411764 0.050980392156862744 / 0.8); + --color-black-700: color(srgb 0.047058823529411764 0.047058823529411764 0.050980392156862744 / 0.8509803921568627); + --color-black-800: color(srgb 0.047058823529411764 0.047058823529411764 0.050980392156862744 / 0.8980392156862745); + --color-black-900: color(srgb 0.047058823529411764 0.047058823529411764 0.050980392156862744 / 0.9490196078431372); + --color-black-1000: color(srgb 0.047058823529411764 0.047058823529411764 0.050980392156862744); + --color-brand-100: color(srgb 0.9607843137254902 0.9607843137254902 0.9607843137254902); + --color-brand-200: color(srgb 0.9019607843137255 0.9019607843137255 0.9019607843137255); + --color-brand-300: color(srgb 0.8509803921568627 0.8509803921568627 0.8509803921568627); + --color-brand-400: color(srgb 0.7019607843137254 0.7019607843137254 0.7019607843137254); + --color-brand-500: color(srgb 0.4588235294117647 0.4588235294117647 0.4588235294117647); + --color-brand-600: color(srgb 0.26666666666666666 0.26666666666666666 0.26666666666666666); + --color-brand-700: color(srgb 0.2196078431372549 0.2196078431372549 0.2196078431372549); + --color-brand-800: color(srgb 0.17254901960784313 0.17254901960784313 0.17254901960784313); + --color-brand-900: color(srgb 0.11764705882352941 0.11764705882352941 0.11764705882352941); + --color-brand-1000: color(srgb 0.06666666666666667 0.06666666666666667 0.06666666666666667); + --color-gray-100: color(srgb 0.9607843137254902 0.9607843137254902 0.9607843137254902); + --color-gray-200: color(srgb 0.9019607843137255 0.9019607843137255 0.9019607843137255); + --color-gray-300: color(srgb 0.8509803921568627 0.8509803921568627 0.8509803921568627); + --color-gray-400: color(srgb 0.7019607843137254 0.7019607843137254 0.7019607843137254); + --color-gray-500: color(srgb 0.4588235294117647 0.4588235294117647 0.4588235294117647); + --color-gray-600: color(srgb 0.26666666666666666 0.26666666666666666 0.26666666666666666); + --color-gray-700: color(srgb 0.2196078431372549 0.2196078431372549 0.2196078431372549); + --color-gray-800: color(srgb 0.17254901960784313 0.17254901960784313 0.17254901960784313); + --color-gray-900: color(srgb 0.11764705882352941 0.11764705882352941 0.11764705882352941); + --color-gray-1000: color(srgb 0.06666666666666667 0.06666666666666667 0.06666666666666667); + --color-green-100: color(srgb 0.9215686274509803 1 0.9333333333333333); + --color-green-200: color(srgb 0.8117647058823529 0.9686274509803922 0.8274509803921568); + --color-green-300: color(srgb 0.6862745098039216 0.9568627450980393 0.7764705882352941); + --color-green-400: color(srgb 0.5215686274509804 0.8784313725490196 0.6392156862745098); + --color-green-500: color(srgb 0.0784313725490196 0.6823529411764706 0.3607843137254902); + --color-green-600: color(srgb 0 0.6 0.3176470588235294); + --color-green-700: color(srgb 0 0.5019607843137255 0.2627450980392157); + --color-green-800: color(srgb 0.00784313725490196 0.32941176470588235 0.17647058823529413); + --color-green-900: color(srgb 0.00784313725490196 0.25098039215686274 0.13725490196078433); + --color-green-1000: color(srgb 0.023529411764705882 0.17647058823529413 0.10588235294117647); + --color-pink-100: color(srgb 0.9882352941176471 0.9450980392156862 0.9921568627450981); + --color-pink-200: color(srgb 0.9803921568627451 0.8823529411764706 0.9803921568627451); + --color-pink-300: color(srgb 0.9607843137254902 0.7529411764705882 0.9372549019607843); + --color-pink-400: color(srgb 0.9450980392156862 0.6196078431372549 0.8627450980392157); + --color-pink-500: color(srgb 0.9176470588235294 0.24705882352941178 0.7215686274509804); + --color-pink-600: color(srgb 0.8431372549019608 0.19607843137254902 0.6588235294117647); + --color-pink-700: color(srgb 0.7294117647058823 0.16470588235294117 0.5725490196078431); + --color-pink-800: color(srgb 0.5411764705882353 0.13333333333333333 0.43529411764705883); + --color-pink-900: color(srgb 0.3411764705882353 0.09411764705882353 0.2901960784313726); + --color-pink-1000: color(srgb 0.24705882352941178 0.08235294117647059 0.21176470588235294); + --color-red-100: color(srgb 0.996078431372549 0.9137254901960784 0.9058823529411765); + --color-red-200: color(srgb 0.9921568627450981 0.8274509803921568 0.8156862745098039); + --color-red-300: color(srgb 0.9882352941176471 0.7019607843137254 0.6784313725490196); + --color-red-400: color(srgb 0.9568627450980393 0.4666666666666667 0.41568627450980394); + --color-red-500: color(srgb 0.9254901960784314 0.13333333333333333 0.12156862745098039); + --color-red-600: color(srgb 0.7529411764705882 0.058823529411764705 0.047058823529411764); + --color-red-700: color(srgb 0.5647058823529412 0.043137254901960784 0.03529411764705882); + --color-red-800: color(srgb 0.4117647058823529 0.03137254901960784 0.027450980392156862); + --color-red-900: color(srgb 0.30196078431372547 0.043137254901960784 0.0392156862745098); + --color-red-1000: color(srgb 0.18823529411764706 0.023529411764705882 0.011764705882352941); + --color-slate-100: color(srgb 0.9529411764705882 0.9529411764705882 0.9529411764705882); + --color-slate-200: color(srgb 0.8901960784313725 0.8901960784313725 0.8901960784313725); + --color-slate-300: color(srgb 0.803921568627451 0.803921568627451 0.803921568627451); + --color-slate-400: color(srgb 0.6980392156862745 0.6980392156862745 0.6980392156862745); + --color-slate-500: color(srgb 0.5803921568627451 0.5803921568627451 0.5803921568627451); + --color-slate-600: color(srgb 0.4627450980392157 0.4627450980392157 0.4627450980392157); + --color-slate-700: color(srgb 0.35294117647058826 0.35294117647058826 0.35294117647058826); + --color-slate-800: color(srgb 0.2627450980392157 0.2627450980392157 0.2627450980392157); + --color-slate-900: color(srgb 0.18823529411764706 0.18823529411764706 0.18823529411764706); + --color-slate-1000: color(srgb 0.1411764705882353 0.1411764705882353 0.1411764705882353); + --color-white-100: color(srgb 1 1 1 / 0.050980392156862744); + --color-white-200: color(srgb 1 1 1 / 0.10196078431372549); + --color-white-300: color(srgb 1 1 1 / 0.2); + --color-white-400: color(srgb 1 1 1 / 0.4); + --color-white-500: color(srgb 1 1 1 / 0.6980392156862745); + --color-white-600: color(srgb 1 1 1 / 0.8); + --color-white-700: color(srgb 1 1 1 / 0.8509803921568627); + --color-white-800: color(srgb 1 1 1 / 0.8980392156862745); + --color-white-900: color(srgb 1 1 1 / 0.9490196078431372); + --color-white-1000: color(srgb 1 1 1); + --color-yellow-100: color(srgb 1 0.984313725490196 0.9215686274509803); + --color-yellow-200: color(srgb 1 0.9450980392156862 0.7607843137254902); + --color-yellow-300: color(srgb 1 0.9098039215686274 0.6392156862745098); + --color-yellow-400: color(srgb 0.9098039215686274 0.7254901960784313 0.19215686274509805); + --color-yellow-500: color(srgb 0.8980392156862745 0.6274509803921569 0); + --color-yellow-600: color(srgb 0.7490196078431373 0.41568627450980394 0.00784313725490196); + --color-yellow-700: color(srgb 0.592156862745098 0.3176470588235294 0.00784313725490196); + --color-yellow-800: color(srgb 0.40784313725490196 0.17647058823529413 0.011764705882352941); + --color-yellow-900: color(srgb 0.3215686274509804 0.1450980392156863 0.01568627450980392); + --color-yellow-1000: color(srgb 0.25098039215686274 0.10588235294117647 0.00392156862745098); + --color-background-brand-default: var(--color-brand-800); + --color-background-default-default: var(--color-white-1000); + --color-border-default-default: var(--color-gray-300); + --color-text-brand-default: var(--color-brand-800); + --color-text-default-default: var(--color-gray-900); + --size-blur-100: 0.25rem; + --size-depth-0: 0; + --size-depth-100: 0.25rem; + --size-depth-200: 0.5rem; + --size-depth-400: 1rem; + --size-depth-800: 2rem; + --size-depth-1200: 3rem; + --size-depth-025: 0.0625rem; + --size-depth-negative-025: -0.0625rem; + --size-depth-negative-100: -0.25rem; + --size-depth-negative-200: -0.5rem; + --size-depth-negative-400: -1rem; + --size-depth-negative-800: -2rem; + --size-depth-negative-1200: -3rem; + --size-icon-small: 1.5rem; + --size-icon-medium: 2rem; + --size-icon-large: 2.5rem; + --size-radius-100: 0.25rem; + --size-radius-200: 0.5rem; + --size-radius-400: 1rem; + --size-radius-full: 624.9375rem; + --size-space-0: 0; + --size-space-100: 0.25rem; + --size-space-150: 0.375rem; + --size-space-200: 0.5rem; + --size-space-300: 0.75rem; + --size-space-400: 1rem; + --size-space-600: 1.5rem; + --size-space-800: 2rem; + --size-space-1200: 3rem; + --size-space-1600: 4rem; + --size-space-2400: 6rem; + --size-space-4000: 0; + --size-space-050: 0.125rem; + --size-space-negative-100: -0.25rem; + --size-space-negative-200: -0.5rem; + --size-space-negative-300: -0.75rem; + --size-space-negative-400: -1rem; + --size-space-negative-600: -1.5rem; + --size-stroke-border: 0.0625rem; + --size-stroke-focus-ring: 0.125rem; + --typography-body-small-font-family: var(--typography-family-sans); + --typography-body-small-font-size: var(--typography-scale-02); + --typography-body-small-font-weight: var(--typography-weight-regular); + --typography-body-medium-font-family: var(--typography-family-sans); + --typography-body-medium-font-size: var(--typography-scale-03); + --typography-body-medium-font-weight: var(--typography-weight-regular); + --typography-body-large-font-family: var(--typography-family-sans); + --typography-body-large-font-size: var(--typography-scale-04); + --typography-body-large-font-weight: var(--typography-weight-regular); + --typography-code-small-font-family: var(--typography-family-mono); + --typography-code-small-font-size: var(--typography-scale-02); + --typography-code-small-font-weight: var(--typography-weight-regular); + --typography-code-medium-font-family: var(--typography-family-mono); + --typography-code-medium-font-size: var(--typography-scale-03); + --typography-code-medium-font-weight: var(--typography-weight-regular); + --typography-code-large-font-family: var(--typography-family-mono); + --typography-code-large-font-size: var(--typography-scale-04); + --typography-code-large-font-weight: var(--typography-weight-regular); + --typography-family-mono: "roboto mono", monospace; + --typography-family-sans: inter, sans-serif; + --typography-family-serif: "noto serif", serif; + --typography-scale-10: 4.5rem; + --typography-scale-01: 0.75rem; + --typography-scale-02: 0.875rem; + --typography-scale-03: 1rem; + --typography-scale-04: 1.25rem; + --typography-scale-05: 1.5rem; + --typography-scale-06: 2rem; + --typography-scale-07: 2.5rem; + --typography-scale-08: 3rem; + --typography-scale-09: 4rem; + --typography-weight-thin: 100; + --typography-weight-extralight: 200; + --typography-weight-light: 300; + --typography-weight-regular: 400; + --typography-weight-medium: 500; + --typography-weight-semibold: 600; + --typography-weight-bold: 700; + --typography-weight-extrabold: 800; + --typography-weight-black: 900; +} +.button_btn__s626q60 { + background: var(--color-background-brand-default); + border-radius: var(--size-radius-200); + color: var(--color-text-brand-default); + font-family: var(--typography-body-medium-font-family); + font-size: var(--typography-body-medium-font-size); + font-weight: var(--typography-body-medium-font-weight); + padding-block: var(--size-space-200); + padding-inline: var(--size-space-300); +} +.checkbox_label__8y0ume0 { + display: block; + font-family: var(--typography-body-medium-font-family); + font-size: var(--typography-body-medium-font-size); + font-weight: var(--typography-body-medium-font-weight); +} +.checkbox_label__8y0ume0::before { + content: ""; + background: var(--color-background-brand-default); + border-color: var(--color-border-default-default); + border-width: 1px; + border-style: solid; + border-radius: var(--size-radius-200); + margin-right: var(--size-space-300); +} +.checkbox_input__8y0ume1 { + width: 1.5rem; + height: 1.5rem; +} +.radio_label__1uatvdb0 { + display: block; + font-family: var(--typography-body-medium-font-family); + font-size: var(--typography-body-medium-font-size); + font-weight: var(--typography-body-medium-font-weight); +} +.radio_label__1uatvdb0::before { + content: ""; + background: var(--color-background-brand-default); + border-color: var(--color-border-default-default); + border-width: 1px; + border-style: solid; + border-radius: var(--size-radius-full); + margin-right: var(--size-space-300); +} +.radio_input__1uatvdb1 { + width: 1.5rem; + height: 1.5rem; +} +.utility_mt100__1vyatv80 { + margin-top: var(--size-space-100); +} +.utility_mt200__1vyatv81 { + margin-top: var(--size-space-200); +} +.utility_mt300__1vyatv82 { + margin-top: var(--size-space-300); +} +.utility_mt400__1vyatv83 { + margin-top: var(--size-space-400); +}", + ], + [ + "app.js", + "import "./styles/reset.css.js"; +import { Button } from "./button/button.js"; +import { Radio } from "./checkbox/checkbox.js"; +import { Radio as Radio$1 } from "./radio/radio.js"; +import "./styles/utility.css.js"; + +export { Button, Radio as Checkbox, Radio$1 as Radio };", + ], + [ + "button/button.css.js", + "//#region fixtures/react-library-example/src/button/button.css.ts +var btn = "button_btn__s626q60"; + +//#endregion +export { btn };", + ], + [ + "button/button.js", + "import { btn } from "./button.css.js"; +import clsx from "clsx"; +import { jsx } from "react/jsx-runtime"; + +//#region fixtures/react-library-example/src/button/button.tsx +function Button({ className, children, type = "button",...props }) { + return /* @__PURE__ */ jsx("button", { + ...props, + type, + className: clsx(btn, className), + children + }); +} + +//#endregion +export { Button };", + ], + [ + "checkbox/checkbox.css.js", + "//#region fixtures/react-library-example/src/checkbox/checkbox.css.ts +var input = "checkbox_input__8y0ume1"; +var label = "checkbox_label__8y0ume0"; + +//#endregion +export { input, label };", + ], + [ + "checkbox/checkbox.js", + "import { input, label } from "./checkbox.css.js"; +import clsx from "clsx"; +import { Fragment, jsx, jsxs } from "react/jsx-runtime"; +import { useId } from "react"; + +//#region fixtures/react-library-example/src/checkbox/checkbox.tsx +function Radio({ children, className, id,...props }) { + const randomID = useId(); + return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("input", { + ...props, + className: input, + id: id ?? randomID, + type: "checkbox" + }), /* @__PURE__ */ jsx("label", { + className: clsx(label, className), + htmlFor: id ?? randomID, + children + })] }); +} + +//#endregion +export { Radio };", + ], + [ + "radio/radio.css.js", + "//#region fixtures/react-library-example/src/radio/radio.css.ts +var input = "radio_input__1uatvdb1"; +var label = "radio_label__1uatvdb0"; + +//#endregion +export { input, label };", + ], + [ + "radio/radio.js", + "import { input, label } from "./radio.css.js"; +import clsx from "clsx"; +import { Fragment, jsx, jsxs } from "react/jsx-runtime"; +import { useId } from "react"; + +//#region fixtures/react-library-example/src/radio/radio.tsx +function Radio({ children, className, id,...props }) { + const randomID = useId(); + return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("input", { + ...props, + className: input, + id: id ?? randomID, + type: "radio" + }), /* @__PURE__ */ jsx("label", { + className: clsx(label, className), + htmlFor: id ?? randomID, + children + })] }); +} + +//#endregion +export { Radio };", + ], + [ + "styles/reset.css.js", + "", + ], + [ + "styles/utility.css.js", + "", + ], +] +`; + +exports[`stripSideEffectImportsMatching should be compatible with rolldown should build with preserveModules 1`] = ` +[ + [ + "assets/shared.css.ts.vanilla-G_Gyt4-e.css", + ".shared_shadow__4dtfen0 { + box-shadow: 0 0 5px red; +} +body { + background-color: skyblue; +} +body, button { + line-height: 16px; +}", + ], + [ + "assets/styles.css.ts.vanilla-BfisGtko.css", + "@font-face { + src: local("Impact"); + font-family: "styles_impact__jteyb10"; +} +@font-face { + src: local("Comic Sans MS"); + font-family: MyGlobalComicSans; +} +@property --blankVar1__jteyb14 { + syntax: ""; + inherits: false; + initial-value: 0.5; +} +.styles_container__jteyb11 { + display: flex; + flex-direction: column; + gap: var(--space-2__cvta174); + padding: var(--space-3__cvta175); +} +.styles_iDunno__jteyb12 { + z-index: 1; + position: relative; +} +.styles_button__jteyb13 { + font-family: "styles_impact__jteyb10"; + background-color: var(--colors-backgroundColor__cvta171, "THIS FALLBACK VALUE SHOULD NEVER BE USED"); + color: var(--colors-text__cvta172); + border-radius: 9999px; +} +.themes_altTheme__cvta176 .themes_theme__cvta170 .styles_container__jteyb11 .styles_button__jteyb13 { + font-family: MyGlobalComicSans; + outline: 5px solid red; +} +body .styles_iDunno__jteyb12:after { + content: 'I am content'; +} +html .styles_opacity_1\\/2__jteyb16 { + opacity: var(--blankVar1__jteyb14); +} +html .styles_opacity_1\\/4__jteyb17 { + opacity: var(--blankVar1__jteyb14, var(--blankVar2__jteyb15, 0.25)); +} +@media only screen and (min-width: 500px) { + .styles_container__jteyb11 { + border: 1px solid var(--colors-backgroundColor__cvta171); + } + .styles_button__jteyb13 { + padding: var(--space-1__cvta173); + } +} +@media only screen and (min-width: 1000px) { + .styles_button__jteyb13 { + padding: var(--space-2__cvta174); + } +}", + ], + [ + "assets/themes.css.ts.vanilla-s9rcEmBH.css", + "@layer themes_themeLayer__cvta177; +@layer globalThemeLayer; +:root, .themes_theme__cvta170 { + --colors-backgroundColor__cvta171: blue; + --colors-text__cvta172: white; + --space-1__cvta173: 4px; + --space-2__cvta174: 8px; + --space-3__cvta175: 12px; +} +.themes_altTheme__cvta176 { + --colors-backgroundColor__cvta171: green; + --colors-text__cvta172: white; + --space-1__cvta173: 8px; + --space-2__cvta174: 12px; + --space-3__cvta175: 16px; +} +.themes_responsiveTheme__cvta17e { + --colors-backgroundColor__cvta171: pink; + --colors-text__cvta172: purple; + --space-1__cvta173: 6px; + --space-2__cvta174: 12px; + --space-3__cvta175: 18px; +} +@layer themes_themeLayer__cvta177 { + .themes_altTheme2Class__cvta178 { + --colors-backgroundColor__cvta179: green; + --colors-text__cvta17a: white; + --space-1__cvta17b: 8px; + --space-2__cvta17c: 12px; + --space-3__cvta17d: 16px; + } +} +@layer globalThemeLayer { + :root { + --colors-backgroundColor__cvta179: green; + --colors-text__cvta17a: white; + --space-1__cvta17b: 8px; + --space-2__cvta17c: 12px; + --space-3__cvta17d: 16px; + } +} +@media screen and (min-width: 768px) { + .themes_responsiveTheme__cvta17e { + --colors-backgroundColor__cvta171: purple; + --colors-text__cvta172: pink; + } +}", + ], + [ + "src/index.js", + "import { altTheme, responsiveTheme, theme, vars } from "./themes.css.js"; +import { button, container, opacity } from "./styles.css.js"; +import { shadow } from "./shared.css.js"; +import test_nodes_default from "../test-nodes.js"; +import { assignInlineVars, setElementVars } from "@vanilla-extract/dynamic"; + +//#region fixtures/themed/src/index.ts +const inlineTheme = assignInlineVars(vars, { + colors: { + backgroundColor: "orange", + text: "black" + }, + space: { + 1: "4px", + 2: "8px", + 3: "12px" + } +}); +function render() { + document.body.innerHTML = \` +
+ Root theme +
+ +
+ Alt theme +
+ +
+ Back to root theme +
+ +
+ Inline theme +
+ +
+ Dynamic vars +
+ +
+ Responsive theme +
+ +
+
+
+
+
+
+
+
+
+
+
+
+ + +\`; + const dynamicVarsContainer = document.getElementById(test_nodes_default.dynamicVarsContainer); + if (!dynamicVarsContainer) throw new Error("Dynamic vars container not found."); + setElementVars(dynamicVarsContainer, vars, { + colors: { + backgroundColor: "transparent", + text: "papayawhip" + }, + space: { + 1: "5px", + 2: "10px", + 3: "15px" + } + }); + setElementVars(dynamicVarsContainer, { [vars.colors.backgroundColor]: "darksalmon" }); +} +render(); + +//#endregion", + ], + [ + "src/shared.css.js", + "import "./../assets/shared.css.ts.vanilla-G_Gyt4-e.css"; + +//#region fixtures/themed/src/shared.css.ts +var shadow = "shared_shadow__4dtfen0"; + +//#endregion +export { shadow };", + ], + [ + "src/styles.css.js", + "import "./../assets/themes.css.ts.vanilla-s9rcEmBH.css"; +import "./../assets/shared.css.ts.vanilla-G_Gyt4-e.css"; +import "./../assets/styles.css.ts.vanilla-BfisGtko.css"; + +//#region fixtures/themed/src/styles.css.ts +var button = "styles_button__jteyb13 shared_shadow__4dtfen0 styles_iDunno__jteyb12"; +var container = "styles_container__jteyb11"; +var opacity = { + "1/2": "styles_opacity_1/2__jteyb16", + "1/4": "styles_opacity_1/4__jteyb17" +}; + +//#endregion +export { button, container, opacity };", + ], + [ + "src/themes.css.js", + "import "./../assets/themes.css.ts.vanilla-s9rcEmBH.css"; + +//#region fixtures/themed/src/themes.css.ts +var altTheme = "themes_altTheme__cvta176"; +var responsiveTheme = "themes_responsiveTheme__cvta17e"; +var theme = "themes_theme__cvta170"; +var vars = { + colors: { + backgroundColor: "var(--colors-backgroundColor__cvta171)", + text: "var(--colors-text__cvta172)" + }, + space: { + "1": "var(--space-1__cvta173)", + "2": "var(--space-2__cvta174)", + "3": "var(--space-3__cvta175)" + } +}; + +//#endregion +export { altTheme, responsiveTheme, theme, vars };", + ], + [ + "test-nodes.js", + "//#region fixtures/themed/test-nodes.json +var root = "root"; +var rootContainer = "rootContainer"; +var rootButton = "rootButton"; +var altContainer = "altContainer"; +var altButton = "altButton"; +var nestedRootContainer = "nestedRootContainer"; +var nestedRootButton = "nestedRootButton"; +var inlineThemeContainer = "inlineThemeContainer"; +var inlineThemeButton = "inlineThemeButton"; +var dynamicVarsContainer = "dynamicVarsContainer"; +var dynamicVarsButton = "dynamicVarsButton"; +var responsiveThemeContainer = "responsiveThemeContainer"; +var responsiveThemeButton = "responsiveThemeButton"; +var test_nodes_default = { + root, + rootContainer, + rootButton, + altContainer, + altButton, + nestedRootContainer, + nestedRootButton, + inlineThemeContainer, + inlineThemeButton, + dynamicVarsContainer, + dynamicVarsButton, + responsiveThemeContainer, + responsiveThemeButton +}; + +//#endregion +export { test_nodes_default as default };", + ], +] +`; + +exports[`stripSideEffectImportsMatching should be compatible with rolldown should build with preserveModules and assetFileNames 1`] = ` +[ + [ + "index.js", + "import { altTheme, responsiveTheme, theme, vars } from "./themes.css.js"; +import { button, container, opacity } from "./styles.css.js"; +import { shadow } from "./shared.css.js"; +import test_nodes_default from "./test-nodes.js"; +import { assignInlineVars, setElementVars } from "@vanilla-extract/dynamic"; + +//#region fixtures/themed/src/index.ts +const inlineTheme = assignInlineVars(vars, { + colors: { + backgroundColor: "orange", + text: "black" + }, + space: { + 1: "4px", + 2: "8px", + 3: "12px" + } +}); +function render() { + document.body.innerHTML = \` +
+ Root theme +
+ +
+ Alt theme +
+ +
+ Back to root theme +
+ +
+ Inline theme +
+ +
+ Dynamic vars +
+ +
+ Responsive theme +
+ +
+
+
+
+
+
+
+
+
+
+
+
+ + +\`; + const dynamicVarsContainer = document.getElementById(test_nodes_default.dynamicVarsContainer); + if (!dynamicVarsContainer) throw new Error("Dynamic vars container not found."); + setElementVars(dynamicVarsContainer, vars, { + colors: { + backgroundColor: "transparent", + text: "papayawhip" + }, + space: { + 1: "5px", + 2: "10px", + 3: "15px" + } + }); + setElementVars(dynamicVarsContainer, { [vars.colors.backgroundColor]: "darksalmon" }); +} +render(); + +//#endregion", + ], + [ + "shared.css.js", + "import "./shared.css.ts.vanilla.css"; + +//#region fixtures/themed/src/shared.css.ts +var shadow = "shared_shadow__4dtfen0"; + +//#endregion +export { shadow };", + ], + [ + "shared.css.ts.vanilla.css", + ".shared_shadow__4dtfen0 { + box-shadow: 0 0 5px red; +} +body { + background-color: skyblue; +} +body, button { + line-height: 16px; +}", + ], + [ + "styles.css.js", + "import "./themes.css.ts.vanilla.css"; +import "./shared.css.ts.vanilla.css"; +import "./styles.css.ts.vanilla.css"; + +//#region fixtures/themed/src/styles.css.ts +var button = "styles_button__jteyb13 shared_shadow__4dtfen0 styles_iDunno__jteyb12"; +var container = "styles_container__jteyb11"; +var opacity = { + "1/2": "styles_opacity_1/2__jteyb16", + "1/4": "styles_opacity_1/4__jteyb17" +}; + +//#endregion +export { button, container, opacity };", + ], + [ + "styles.css.ts.vanilla.css", + "@font-face { + src: local("Impact"); + font-family: "styles_impact__jteyb10"; +} +@font-face { + src: local("Comic Sans MS"); + font-family: MyGlobalComicSans; +} +@property --blankVar1__jteyb14 { + syntax: ""; + inherits: false; + initial-value: 0.5; +} +.styles_container__jteyb11 { + display: flex; + flex-direction: column; + gap: var(--space-2__cvta174); + padding: var(--space-3__cvta175); +} +.styles_iDunno__jteyb12 { + z-index: 1; + position: relative; +} +.styles_button__jteyb13 { + font-family: "styles_impact__jteyb10"; + background-color: var(--colors-backgroundColor__cvta171, "THIS FALLBACK VALUE SHOULD NEVER BE USED"); + color: var(--colors-text__cvta172); + border-radius: 9999px; +} +.themes_altTheme__cvta176 .themes_theme__cvta170 .styles_container__jteyb11 .styles_button__jteyb13 { + font-family: MyGlobalComicSans; + outline: 5px solid red; +} +body .styles_iDunno__jteyb12:after { + content: 'I am content'; +} +html .styles_opacity_1\\/2__jteyb16 { + opacity: var(--blankVar1__jteyb14); +} +html .styles_opacity_1\\/4__jteyb17 { + opacity: var(--blankVar1__jteyb14, var(--blankVar2__jteyb15, 0.25)); +} +@media only screen and (min-width: 500px) { + .styles_container__jteyb11 { + border: 1px solid var(--colors-backgroundColor__cvta171); + } + .styles_button__jteyb13 { + padding: var(--space-1__cvta173); + } +} +@media only screen and (min-width: 1000px) { + .styles_button__jteyb13 { + padding: var(--space-2__cvta174); + } +}", + ], + [ + "test-nodes.js", + "//#region fixtures/themed/test-nodes.json +var root = "root"; +var rootContainer = "rootContainer"; +var rootButton = "rootButton"; +var altContainer = "altContainer"; +var altButton = "altButton"; +var nestedRootContainer = "nestedRootContainer"; +var nestedRootButton = "nestedRootButton"; +var inlineThemeContainer = "inlineThemeContainer"; +var inlineThemeButton = "inlineThemeButton"; +var dynamicVarsContainer = "dynamicVarsContainer"; +var dynamicVarsButton = "dynamicVarsButton"; +var responsiveThemeContainer = "responsiveThemeContainer"; +var responsiveThemeButton = "responsiveThemeButton"; +var test_nodes_default = { + root, + rootContainer, + rootButton, + altContainer, + altButton, + nestedRootContainer, + nestedRootButton, + inlineThemeContainer, + inlineThemeButton, + dynamicVarsContainer, + dynamicVarsButton, + responsiveThemeContainer, + responsiveThemeButton +}; + +//#endregion +export { test_nodes_default as default };", + ], + [ + "themes.css.js", + "import "./themes.css.ts.vanilla.css"; + +//#region fixtures/themed/src/themes.css.ts +var altTheme = "themes_altTheme__cvta176"; +var responsiveTheme = "themes_responsiveTheme__cvta17e"; +var theme = "themes_theme__cvta170"; +var vars = { + colors: { + backgroundColor: "var(--colors-backgroundColor__cvta171)", + text: "var(--colors-text__cvta172)" + }, + space: { + "1": "var(--space-1__cvta173)", + "2": "var(--space-2__cvta174)", + "3": "var(--space-3__cvta175)" + } +}; + +//#endregion +export { altTheme, responsiveTheme, theme, vars };", + ], + [ + "themes.css.ts.vanilla.css", + "@layer themes_themeLayer__cvta177; +@layer globalThemeLayer; +:root, .themes_theme__cvta170 { + --colors-backgroundColor__cvta171: blue; + --colors-text__cvta172: white; + --space-1__cvta173: 4px; + --space-2__cvta174: 8px; + --space-3__cvta175: 12px; +} +.themes_altTheme__cvta176 { + --colors-backgroundColor__cvta171: green; + --colors-text__cvta172: white; + --space-1__cvta173: 8px; + --space-2__cvta174: 12px; + --space-3__cvta175: 16px; +} +.themes_responsiveTheme__cvta17e { + --colors-backgroundColor__cvta171: pink; + --colors-text__cvta172: purple; + --space-1__cvta173: 6px; + --space-2__cvta174: 12px; + --space-3__cvta175: 18px; +} +@layer themes_themeLayer__cvta177 { + .themes_altTheme2Class__cvta178 { + --colors-backgroundColor__cvta179: green; + --colors-text__cvta17a: white; + --space-1__cvta17b: 8px; + --space-2__cvta17c: 12px; + --space-3__cvta17d: 16px; + } +} +@layer globalThemeLayer { + :root { + --colors-backgroundColor__cvta179: green; + --colors-text__cvta17a: white; + --space-1__cvta17b: 8px; + --space-2__cvta17c: 12px; + --space-3__cvta17d: 16px; + } +} +@media screen and (min-width: 768px) { + .themes_responsiveTheme__cvta17e { + --colors-backgroundColor__cvta171: purple; + --colors-text__cvta172: pink; + } +}", + ], +] +`; + +exports[`stripSideEffectImportsMatching should be compatible with rolldown should build with sourcemaps 1`] = ` +[ + [ + "assets/shared.css.ts.vanilla-G_Gyt4-e.css", + "", + ], + [ + "assets/styles.css.ts.vanilla-BfisGtko.css", + "", + ], + [ + "assets/themes.css.ts.vanilla-s9rcEmBH.css", + "", + ], + [ + "src/index.js", + ";;;;;;;AAiBA,MAAM,cAAc,iBAAiB,MAAM;CACzC,QAAQ;EACN,iBAAiB;EACjB,MAAM;CACP;CACD,OAAO;EACL,GAAG;EACH,GAAG;EACH,GAAG;CACJ;AACF,EAAC;AAEF,SAAS,SAAS;AAChB,UAAS,KAAK,YAAY,CAAC;WAClB,EAAEA,mBAAU,KAAK,SAAS,EAAE,OAAO;;aAEjC,EAAEA,mBAAU,cAAc,SAAS,EAAE,UAAU;kBAC1C,EAAEA,mBAAU,WAAW,SAAS,EAAE,OAAO;kBACzC,EAAE,SAAS;;iBAEZ,EAAEA,mBAAU,aAAa,SAAS,EAAE,UAAU;sBACzC,EAAEA,mBAAU,UAAU,SAAS,EAAE,OAAO;sBACxC,EAAE,MAAM;;qBAET,EAAEA,mBAAU,oBAAoB,SAAS,EAAE,UAAU;0BAChD,EAAEA,mBAAU,iBAAiB,SAAS,EAAE,OAAO;wBACjD,EAAE,YAAY;;yBAEb,EAAEA,mBAAU,qBAAqB,SAAS,EAAE,UAAU;8BACjD,EAAEA,mBAAU,kBAAkB,SAAS,EAAE,OAAO,CAAC,EAAE,QAAQ,OAAO,6BAA6B,EAAE,QAAQ,OAAO;;;6BAGjH,EAAEA,mBAAU,qBAAqB,SAAS,EAAE,UAAU;kCACjD,EAAEA,mBAAU,kBAAkB,SAAS,EAAE,OAAO;8BACpD,EAAE,gBAAgB;;yBAEvB,EAAEA,mBAAU,yBAAyB,SAAS,EAAE,UAAU;8BACrD,EAAEA,mBAAU,sBAAsB,SAAS,EAAE,OAAO;;;;;;;;;;;;;;;AAelF,CAAC;CAEC,MAAM,uBAAuB,SAAS,eACpCA,mBAAU,qBACX;AAED,MAAK,qBACH,OAAM,IAAI,MAAM;AAGlB,gBAAe,sBAAsB,MAAM;EACzC,QAAQ;GACN,iBAAiB;GACjB,MAAM;EACP;EACD,OAAO;GACL,GAAG;GACH,GAAG;GACH,GAAG;EACJ;CACF,EAAC;AAEF,gBAAe,sBAAsB,GAClC,KAAK,OAAO,kBAAkB,aAChC,EAAC;AACH;AAED,QAAQ", + ], + [ + "src/index.js.map", + "", + ], + [ + "src/shared.css.js", + "", + ], + [ + "src/shared.css.js.map", + "", + ], + [ + "src/styles.css.js", + "", + ], + [ + "src/styles.css.js.map", + "", + ], + [ + "src/themes.css.js", + "", + ], + [ + "src/themes.css.js.map", + "", + ], + [ + "test-nodes.js", + ";WACU;oBACS;iBACH;mBACE;gBACH;0BACU;uBACH;2BACI;wBACH;2BACG;wBACH;+BACO;4BACH;yBAb3B;;;;;;;;;;;;;;AAcC", + ], + [ + "test-nodes.js.map", + "", + ], +] +`; + +exports[`stripSideEffectImportsMatching should be compatible with rolldown should build without preserveModules 1`] = ` +[ + [ + "assets/shared.css.ts.vanilla-G_Gyt4-e.css", + ".shared_shadow__4dtfen0 { + box-shadow: 0 0 5px red; +} +body { + background-color: skyblue; +} +body, button { + line-height: 16px; +}", + ], + [ + "assets/styles.css.ts.vanilla-BfisGtko.css", + "@font-face { + src: local("Impact"); + font-family: "styles_impact__jteyb10"; +} +@font-face { + src: local("Comic Sans MS"); + font-family: MyGlobalComicSans; +} +@property --blankVar1__jteyb14 { + syntax: ""; + inherits: false; + initial-value: 0.5; +} +.styles_container__jteyb11 { + display: flex; + flex-direction: column; + gap: var(--space-2__cvta174); + padding: var(--space-3__cvta175); +} +.styles_iDunno__jteyb12 { + z-index: 1; + position: relative; +} +.styles_button__jteyb13 { + font-family: "styles_impact__jteyb10"; + background-color: var(--colors-backgroundColor__cvta171, "THIS FALLBACK VALUE SHOULD NEVER BE USED"); + color: var(--colors-text__cvta172); + border-radius: 9999px; +} +.themes_altTheme__cvta176 .themes_theme__cvta170 .styles_container__jteyb11 .styles_button__jteyb13 { + font-family: MyGlobalComicSans; + outline: 5px solid red; +} +body .styles_iDunno__jteyb12:after { + content: 'I am content'; +} +html .styles_opacity_1\\/2__jteyb16 { + opacity: var(--blankVar1__jteyb14); +} +html .styles_opacity_1\\/4__jteyb17 { + opacity: var(--blankVar1__jteyb14, var(--blankVar2__jteyb15, 0.25)); +} +@media only screen and (min-width: 500px) { + .styles_container__jteyb11 { + border: 1px solid var(--colors-backgroundColor__cvta171); + } + .styles_button__jteyb13 { + padding: var(--space-1__cvta173); + } +} +@media only screen and (min-width: 1000px) { + .styles_button__jteyb13 { + padding: var(--space-2__cvta174); + } +}", + ], + [ + "assets/themes.css.ts.vanilla-s9rcEmBH.css", + "@layer themes_themeLayer__cvta177; +@layer globalThemeLayer; +:root, .themes_theme__cvta170 { + --colors-backgroundColor__cvta171: blue; + --colors-text__cvta172: white; + --space-1__cvta173: 4px; + --space-2__cvta174: 8px; + --space-3__cvta175: 12px; +} +.themes_altTheme__cvta176 { + --colors-backgroundColor__cvta171: green; + --colors-text__cvta172: white; + --space-1__cvta173: 8px; + --space-2__cvta174: 12px; + --space-3__cvta175: 16px; +} +.themes_responsiveTheme__cvta17e { + --colors-backgroundColor__cvta171: pink; + --colors-text__cvta172: purple; + --space-1__cvta173: 6px; + --space-2__cvta174: 12px; + --space-3__cvta175: 18px; +} +@layer themes_themeLayer__cvta177 { + .themes_altTheme2Class__cvta178 { + --colors-backgroundColor__cvta179: green; + --colors-text__cvta17a: white; + --space-1__cvta17b: 8px; + --space-2__cvta17c: 12px; + --space-3__cvta17d: 16px; + } +} +@layer globalThemeLayer { + :root { + --colors-backgroundColor__cvta179: green; + --colors-text__cvta17a: white; + --space-1__cvta17b: 8px; + --space-2__cvta17c: 12px; + --space-3__cvta17d: 16px; + } +} +@media screen and (min-width: 768px) { + .themes_responsiveTheme__cvta17e { + --colors-backgroundColor__cvta171: purple; + --colors-text__cvta172: pink; + } +}", + ], + [ + "index.js", + "import { assignInlineVars, setElementVars } from "@vanilla-extract/dynamic"; +import "./assets/themes.css.ts.vanilla-s9rcEmBH.css"; +import "./assets/shared.css.ts.vanilla-G_Gyt4-e.css"; +import "./assets/styles.css.ts.vanilla-BfisGtko.css"; + +//#region fixtures/themed/src/themes.css.ts +var altTheme = "themes_altTheme__cvta176"; +var responsiveTheme = "themes_responsiveTheme__cvta17e"; +var theme = "themes_theme__cvta170"; +var vars = { + colors: { + backgroundColor: "var(--colors-backgroundColor__cvta171)", + text: "var(--colors-text__cvta172)" + }, + space: { + "1": "var(--space-1__cvta173)", + "2": "var(--space-2__cvta174)", + "3": "var(--space-3__cvta175)" + } +}; + +//#endregion +//#region fixtures/themed/src/styles.css.ts +var button = "styles_button__jteyb13 shared_shadow__4dtfen0 styles_iDunno__jteyb12"; +var container = "styles_container__jteyb11"; +var opacity = { + "1/2": "styles_opacity_1/2__jteyb16", + "1/4": "styles_opacity_1/4__jteyb17" +}; + +//#endregion +//#region fixtures/themed/src/shared.css.ts +var shadow = "shared_shadow__4dtfen0"; + +//#endregion +//#region fixtures/themed/test-nodes.json +var root = "root"; +var rootContainer = "rootContainer"; +var rootButton = "rootButton"; +var altContainer = "altContainer"; +var altButton = "altButton"; +var nestedRootContainer = "nestedRootContainer"; +var nestedRootButton = "nestedRootButton"; +var inlineThemeContainer = "inlineThemeContainer"; +var inlineThemeButton = "inlineThemeButton"; +var dynamicVarsContainer = "dynamicVarsContainer"; +var dynamicVarsButton = "dynamicVarsButton"; +var responsiveThemeContainer = "responsiveThemeContainer"; +var responsiveThemeButton = "responsiveThemeButton"; +var test_nodes_default = { + root, + rootContainer, + rootButton, + altContainer, + altButton, + nestedRootContainer, + nestedRootButton, + inlineThemeContainer, + inlineThemeButton, + dynamicVarsContainer, + dynamicVarsButton, + responsiveThemeContainer, + responsiveThemeButton +}; + +//#endregion +//#region fixtures/themed/src/index.ts +const inlineTheme = assignInlineVars(vars, { + colors: { + backgroundColor: "orange", + text: "black" + }, + space: { + 1: "4px", + 2: "8px", + 3: "12px" + } +}); +function render() { + document.body.innerHTML = \` +
+ Root theme +
+ +
+ Alt theme +
+ +
+ Back to root theme +
+ +
+ Inline theme +
+ +
+ Dynamic vars +
+ +
+ Responsive theme +
+ +
+
+
+
+
+
+
+
+
+
+
+
+ + +\`; + const dynamicVarsContainer$1 = document.getElementById(test_nodes_default.dynamicVarsContainer); + if (!dynamicVarsContainer$1) throw new Error("Dynamic vars container not found."); + setElementVars(dynamicVarsContainer$1, vars, { + colors: { + backgroundColor: "transparent", + text: "papayawhip" + }, + space: { + 1: "5px", + 2: "10px", + 3: "15px" + } + }); + setElementVars(dynamicVarsContainer$1, { [vars.colors.backgroundColor]: "darksalmon" }); +} +render(); + +//#endregion", + ], +] +`; diff --git a/packages/rollup-plugin/test/rollup-plugin.test.ts b/packages/rollup-plugin/test/rollup-plugin.test.ts index 9daefcdea..91d3a2693 100644 --- a/packages/rollup-plugin/test/rollup-plugin.test.ts +++ b/packages/rollup-plugin/test/rollup-plugin.test.ts @@ -1,3 +1,8 @@ +import { + rolldown, + type InputOptions as RolldownInputOptions, + type OutputOptions as RolldownOutputOptions, +} from 'rolldown'; import { rollup, type InputPluginOption, @@ -152,8 +157,8 @@ describe('rollup-plugin', () => { preserveModulesRoot: path.dirname( require.resolve('@fixtures/themed/src/index.ts'), ), - assetFileNames({ name }) { - return name?.replace(/^src\//, '') ?? ''; + assetFileNames({ names }) { + return names[0]?.replace(/^src\//, '') ?? ''; }, }, }, @@ -215,4 +220,156 @@ export default function Button() { }`; expect(stripSideEffectImportsMatching(code, [])).toBe(code); }); + + describe('should be compatible with rolldown', () => { + async function build({ + rollup: rollupOptions, + ...pluginOptions + }: VanillaExtractPluginOptions & { + rollup: RolldownInputOptions & { output: RolldownOutputOptions }; + }) { + const bundle = await rolldown({ + external: ['@vanilla-extract/dynamic'], + input: require.resolve('@fixtures/themed/src/index.ts'), + plugins: [ + vanillaExtractPlugin({ + cwd: path.dirname(require.resolve('@fixtures/themed/package.json')), + ...pluginOptions, + }), + ], + ...rollupOptions, + }); + const { output } = await bundle.generate(rollupOptions.output); + output.sort((a, b) => a.fileName.localeCompare(b.fileName)); + return output; + } + + async function buildAndMatchSnapshot(outputOptions: RolldownOutputOptions) { + const output = await build({ + rollup: { + output: outputOptions, + }, + }); + expect( + output.map((chunkOrAsset) => [ + chunkOrAsset.fileName, + chunkOrAsset.type === 'asset' + ? chunkOrAsset.source + : chunkOrAsset.code, + ]), + ).toMatchSnapshot(); + } + + it('extract generates .css bundle', async () => { + const cwd = path.dirname( + require.resolve('@fixtures/react-library-example/package.json'), + ); + const output = await build({ + cwd, + extract: { name: 'app.css', sourcemap: true }, + rollup: { + input: { app: path.join(cwd, 'src/index.ts') }, + external: ['clsx', 'react', 'react/jsx-runtime', 'react-dom'], + output: { + assetFileNames: '[name][extname]', + format: 'esm', + preserveModules: true, // not needed for output, just makes some assertions easier + }, + }, + }); + + // assert essential files were made + const bundleAsset = output.find( + (file) => file.type === 'asset' && file.fileName === 'app.css', + ); + expect(bundleAsset).toBeTruthy(); + const sourcemapAsset = output.find( + (file) => file.type === 'asset' && file.fileName === 'app.css.map', + ); + expect(sourcemapAsset).toBeTruthy(); + + // assert .css imports were removed + const jsFiles = output.filter( + (file) => file.type === 'chunk' && file.fileName.endsWith('.js'), + ) as OutputChunk[]; + for (const jsFile of jsFiles) { + expect(jsFile.code).not.toMatch(/^import .*\.css['"]/m); + } + + // assert bundle CSS reflects order from @fixtures/react-library-example/index.ts + const map = JSON.parse(String((sourcemapAsset as OutputAsset).source)); + expect(map.sources).toEqual([ + 'src/styles/reset.css.ts.vanilla.css', + 'src/styles/vars.css.ts.vanilla.css', + 'src/button/button.css.ts.vanilla.css', + 'src/checkbox/checkbox.css.ts.vanilla.css', + 'src/radio/radio.css.ts.vanilla.css', + 'src/styles/utility.css.ts.vanilla.css', // this always should be last + ]); + + // assert Vanilla CSS was stripped out + expect( + output.filter((file) => file.fileName.includes('.css.ts.vanilla')), + ).toHaveLength(0); + + // snapshot output for everything else + expect( + output + .filter((chunkOrAsset) => !chunkOrAsset.fileName.endsWith('.map')) // remove .msps + .map((chunkOrAsset) => [ + chunkOrAsset.fileName, + chunkOrAsset.type === 'asset' + ? chunkOrAsset.source + : chunkOrAsset.code, + ]), + ).toMatchSnapshot(); + }); + + it('should build without preserveModules', async () => { + // Bundle all JS outputs together + await buildAndMatchSnapshot({ + format: 'esm', + }); + }); + + it('should build with preserveModules', async () => { + // Preserve JS modules + await buildAndMatchSnapshot({ + format: 'esm', + preserveModules: true, + }); + }); + + it('should build with preserveModules and assetFileNames', async () => { + // Preserve JS modules and place assets next to JS files instead of assets directory + await buildAndMatchSnapshot({ + format: 'esm', + preserveModules: true, + preserveModulesRoot: path.dirname( + require.resolve('@fixtures/themed/src/index.ts'), + ), + assetFileNames({ names }) { + return names[0].replace(/^src\//, '') ?? ''; + }, + }); + }); + + it('should build with sourcemaps', async () => { + const output = await build({ + rollup: { + output: { + format: 'esm', + preserveModules: true, + sourcemap: true, + }, + }, + }); + expect( + output.map((chunkOrAsset) => [ + chunkOrAsset.fileName, + chunkOrAsset.type === 'asset' ? '' : chunkOrAsset.map?.mappings, + ]), + ).toMatchSnapshot(); + }); + }); }); diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 80fb31633..5613f61ba 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -598,6 +598,9 @@ importers: esbuild: specifier: ~0.25.0 version: 0.25.0 + rolldown: + specifier: 1.0.0-beta.27 + version: 1.0.0-beta.27 rollup: specifier: ^4.20.0 version: 4.44.2 @@ -1871,6 +1874,15 @@ packages: react-dom: optional: true + '@emnapi/core@1.4.4': + resolution: {integrity: sha512-A9CnAbC6ARNMKcIcrQwq6HeHCjpcBZ5wSx4U01WXCqEKlrzB9F9315WDNHkrs2xbx7YjjSxbUYxuN6EQzpcY2g==} + + '@emnapi/runtime@1.4.4': + resolution: {integrity: sha512-hHyapA4A3gPaDCNfiqyZUStTMqIkKRshqPIuDOXv1hcBnD4U3l8cP0T1HMCfGRxQ6V64TGCcoswChANyOAwbQg==} + + '@emnapi/wasi-threads@1.0.3': + resolution: {integrity: sha512-8K5IFFsQqF9wQNJptGbS6FNKgUTsSRYnTqNCG1vPP8jFdjSv18n2mQfJpkt2Oibo9iBEzcDnDxNwKTzC7svlJw==} + '@emotion/hash@0.9.0': resolution: {integrity: sha512-14FtKiHhy2QoPIzdTcvh//8OyBlknNs2nXRwIhG904opCby3l+9Xaf/wuPvICBF0rc1ZCNBd3nKe9cd2mecVkQ==} @@ -2865,6 +2877,9 @@ packages: cpu: [x64] os: [win32] + '@napi-rs/wasm-runtime@0.2.12': + resolution: {integrity: sha512-ZVWUcfwY4E/yPitQJl481FjFo3K22D6qF0DuFH6Y/nbnE11GY5uguDxZMGXPQ8WQ0128MXQD7TnfHyK4oWoIJQ==} + '@netlify/binary-info@1.0.0': resolution: {integrity: sha512-4wMPu9iN3/HL97QblBsBay3E1etIciR84izI3U+4iALY+JHCrI+a2jO0qbAZ/nxKoegypYEaiiqWXylm+/zfrw==} @@ -3326,6 +3341,13 @@ packages: '@octokit/types@6.41.0': resolution: {integrity: sha512-eJ2jbzjdijiL3B4PrSQaSjuF2sPEQPVCPzBvTHJD9Nz+9dw2SGH4K4xeQJ77YfTq5bRQ+bD8wT11JbeDPmxmGg==} + '@oxc-project/runtime@0.77.0': + resolution: {integrity: sha512-cMbHs/DaomWSjxeJ79G10GA5hzJW9A7CZ+/cO+KuPZ7Trf3Rr07qSLauC4Ns8ba4DKVDjd8VSC9nVLpw6jpoGQ==} + engines: {node: '>=6.9.0'} + + '@oxc-project/types@0.77.0': + resolution: {integrity: sha512-iUQj185VvCPnSba+ltUV5tVDrPX6LeZVtQywnnoGbe4oJ1VKvDKisjGkD/AvVtdm98b/BdsVS35IlJV1m2mBBA==} + '@parcel/bundler-default@2.8.3': resolution: {integrity: sha512-yJvRsNWWu5fVydsWk3O2L4yIy3UZiKWO2cPDukGOIWMgp/Vbpp+2Ct5IygVRtE22bnseW/E/oe0PV3d2IkEJGg==} engines: {node: '>= 12.0.0', parcel: ^2.8.3} @@ -3801,6 +3823,79 @@ packages: '@remix-run/web-stream@1.1.0': resolution: {integrity: sha512-KRJtwrjRV5Bb+pM7zxcTJkhIqWWSy+MYsIxHK+0m5atcznsf15YwUBWHWulZerV2+vvHH1Lp1DD7pw6qKW8SgA==} + '@rolldown/binding-android-arm64@1.0.0-beta.27': + resolution: {integrity: sha512-IJL3efUJmvb5MfTEi7bGK4jq3ZFAzVbSy+vmul0DcdrglUd81Tfyy7Zzq2oM0tUgmACG32d8Jz/ykbpbf+3C5A==} + cpu: [arm64] + os: [android] + + '@rolldown/binding-darwin-arm64@1.0.0-beta.27': + resolution: {integrity: sha512-TXTiuHbtnHfb0c44vNfWfIyEFJ0BFUf63ip9Z4mj8T2zRcZXQYVger4OuAxnwGNGBgDyHo1VaNBG+Vxn2VrpqQ==} + cpu: [arm64] + os: [darwin] + + '@rolldown/binding-darwin-x64@1.0.0-beta.27': + resolution: {integrity: sha512-Jpjflgvbolh+fAaaEajPJQCOpZMawYMbNVzuZp3nidX1B7kMAP7NEKp9CWzthoL2Y8RfD7OApN6bx4+vFurTaw==} + cpu: [x64] + os: [darwin] + + '@rolldown/binding-freebsd-x64@1.0.0-beta.27': + resolution: {integrity: sha512-07ZNlXIunyS1jCTnene7aokkzCZNBUnmnJWu4Nz5X5XQvVHJNjsDhPFJTlNmneSDzA3vGkRNwdECKXiDTH/CqA==} + cpu: [x64] + os: [freebsd] + + '@rolldown/binding-linux-arm-gnueabihf@1.0.0-beta.27': + resolution: {integrity: sha512-z74ah00oyKnTUtaIbg34TaIU1PYM8tGE1bK6aUs8OLZ9sWW4g3Xo5A0nit2zyeanmYFvrAUxnt3Bpk+mTZCtlg==} + cpu: [arm] + os: [linux] + + '@rolldown/binding-linux-arm64-gnu@1.0.0-beta.27': + resolution: {integrity: sha512-b9oKl/M5OIyAcosS73BmjOZOjvcONV97t2SnKpgwfDX/mjQO3dBgTYyvHMFA6hfhIDW1+2XVQR/k5uzBULFhoA==} + cpu: [arm64] + os: [linux] + + '@rolldown/binding-linux-arm64-musl@1.0.0-beta.27': + resolution: {integrity: sha512-RmaNSkVmAH8u/r5Q+v4O0zL4HY8pLrvlM5wBoBrb/QHDQgksGKBqhecpg1ERER0Q7gMh/GJUz6JiiD55Q+9UOA==} + cpu: [arm64] + os: [linux] + + '@rolldown/binding-linux-arm64-ohos@1.0.0-beta.27': + resolution: {integrity: sha512-gq78fI/g0cp1UKFMk53kP/oZAgYOXbaqdadVMuCJc0CoSkDJcpO2YIasRs/QYlE91QWfcHD5RZl9zbf4ksTS/w==} + cpu: [arm64] + os: [openharmony] + + '@rolldown/binding-linux-x64-gnu@1.0.0-beta.27': + resolution: {integrity: sha512-yS/GreJ6BT44dHu1WLigc50S8jZA+pDzzsf8tqRptUTwi5YW7dX3NqcDlc/lXsZqu57aKynLljgClYAm90LEKw==} + cpu: [x64] + os: [linux] + + '@rolldown/binding-linux-x64-musl@1.0.0-beta.27': + resolution: {integrity: sha512-6FV9To1sXewGHY4NaCPeOE5p5o1qfuAjj+m75WVIPw9HEJVsQoC5QiTL5wWVNqSMch4X0eWnQ6WsQolU6sGMIA==} + cpu: [x64] + os: [linux] + + '@rolldown/binding-wasm32-wasi@1.0.0-beta.27': + resolution: {integrity: sha512-VcxdhF0PQda9krFJHw4DqUkdAsHWYs/Uz/Kr/zhU8zMFDzmK6OdUgl9emGj9wTzXAEHYkAMDhk+OJBRJvp424g==} + engines: {node: '>=14.0.0'} + cpu: [wasm32] + + '@rolldown/binding-win32-arm64-msvc@1.0.0-beta.27': + resolution: {integrity: sha512-3bXSARqSf8jLHrQ1/tw9pX1GwIR9jA6OEsqTgdC0DdpoZ+34sbJXE9Nse3dQ0foGLKBkh4PqDv/rm2Thu9oVBw==} + cpu: [arm64] + os: [win32] + + '@rolldown/binding-win32-ia32-msvc@1.0.0-beta.27': + resolution: {integrity: sha512-xPGcKb+W8NIWAf5KApsUIrhiKH5NImTarICge5jQ2m0BBxD31crio4OXy/eYVq5CZkqkqszLQz2fWZcWNmbzlQ==} + cpu: [ia32] + os: [win32] + + '@rolldown/binding-win32-x64-msvc@1.0.0-beta.27': + resolution: {integrity: sha512-3y1G8ARpXBAcz4RJM5nzMU6isS/gXZl8SuX8lS2piFOnQMiOp6ajeelnciD+EgG4ej793zvNvr+WZtdnao2yrw==} + cpu: [x64] + os: [win32] + + '@rolldown/pluginutils@1.0.0-beta.27': + resolution: {integrity: sha512-+d0F4MKMCbeVUJwG96uQ4SgAznZNSq93I3V+9NHA4OpvqG8mRCpGdKmK8l/dl02h2CCDHwW2FqilnTyDcAnqjA==} + '@rollup/plugin-alias@3.1.8': resolution: {integrity: sha512-tf7HeSs/06wO2LPqKNY3Ckbvy0JRe7Jyn98bXnt/gfrxbe+AJucoNJlsEVi9sdgbQtXemjbakCpO/76JVgnHpA==} engines: {node: '>=8.0.0'} @@ -4080,6 +4175,9 @@ packages: '@tsconfig/node16@1.0.2': resolution: {integrity: sha512-eZxlbI8GZscaGS7kkc/trHTT5xgrjH3/1n2JDwusC9iahPKWMRvRjJSAN5mCXviuTGQ/lHnhvv8Q1YTpnfz9gA==} + '@tybys/wasm-util@0.10.0': + resolution: {integrity: sha512-VyyPYFlOMNylG45GoAe0xDoLwWuowvf92F9kySqzYh8vmYm7D2u4iUJKa1tOUpS70Ku13ASrOkS4ScXFsTaCNQ==} + '@types/acorn@4.0.6': resolution: {integrity: sha512-veQTnWP+1D/xbxVrPC3zHnCZRjSrKfhbMUlEA43iMZLu7EsnTtkJklIuwrCPbOi8YkvDQAiW05VQQFvvz9oieQ==} @@ -10185,6 +10283,10 @@ packages: resolution: {integrity: sha512-l0OE8wL34P4nJH/H2ffoaniAokM2qSmrtXHmlpvYr5AVVX8msAyW0l8NVJFDxlSK4u3Uh/f41cQheDVdnYijwQ==} hasBin: true + rolldown@1.0.0-beta.27: + resolution: {integrity: sha512-aYiJmzKoUHoaaEZLRegYVfZkXW7gzdgSbq+u5cXQ6iXc/y8tnQ3zGffQo44Pr1lTKeLluw3bDIDUCx/NAzqKeA==} + hasBin: true + rollup-plugin-dts@6.1.1: resolution: {integrity: sha512-aSHRcJ6KG2IHIioYlvAOcEq6U99sVtqDDKVhnwt70rW6tsz3tv5OSjEiWcgzfsHdLyGXZ/3b/7b/+Za3Y6r1XA==} engines: {node: '>=16'} @@ -13118,6 +13220,22 @@ snapshots: transitivePeerDependencies: - '@algolia/client-search' + '@emnapi/core@1.4.4': + dependencies: + '@emnapi/wasi-threads': 1.0.3 + tslib: 2.5.0 + optional: true + + '@emnapi/runtime@1.4.4': + dependencies: + tslib: 2.5.0 + optional: true + + '@emnapi/wasi-threads@1.0.3': + dependencies: + tslib: 2.5.0 + optional: true + '@emotion/hash@0.9.0': {} '@esbuild/aix-ppc64@0.19.12': @@ -13920,6 +14038,13 @@ snapshots: '@msgpackr-extract/msgpackr-extract-win32-x64@3.0.2': optional: true + '@napi-rs/wasm-runtime@0.2.12': + dependencies: + '@emnapi/core': 1.4.4 + '@emnapi/runtime': 1.4.4 + '@tybys/wasm-util': 0.10.0 + optional: true + '@netlify/binary-info@1.0.0': {} '@netlify/build@27.18.5': @@ -14446,6 +14571,10 @@ snapshots: dependencies: '@octokit/openapi-types': 12.11.0 + '@oxc-project/runtime@0.77.0': {} + + '@oxc-project/types@0.77.0': {} + '@parcel/bundler-default@2.8.3(@parcel/core@2.11.0)': dependencies: '@parcel/diagnostic': 2.8.3 @@ -15330,6 +15459,52 @@ snapshots: dependencies: web-streams-polyfill: 3.2.1 + '@rolldown/binding-android-arm64@1.0.0-beta.27': + optional: true + + '@rolldown/binding-darwin-arm64@1.0.0-beta.27': + optional: true + + '@rolldown/binding-darwin-x64@1.0.0-beta.27': + optional: true + + '@rolldown/binding-freebsd-x64@1.0.0-beta.27': + optional: true + + '@rolldown/binding-linux-arm-gnueabihf@1.0.0-beta.27': + optional: true + + '@rolldown/binding-linux-arm64-gnu@1.0.0-beta.27': + optional: true + + '@rolldown/binding-linux-arm64-musl@1.0.0-beta.27': + optional: true + + '@rolldown/binding-linux-arm64-ohos@1.0.0-beta.27': + optional: true + + '@rolldown/binding-linux-x64-gnu@1.0.0-beta.27': + optional: true + + '@rolldown/binding-linux-x64-musl@1.0.0-beta.27': + optional: true + + '@rolldown/binding-wasm32-wasi@1.0.0-beta.27': + dependencies: + '@napi-rs/wasm-runtime': 0.2.12 + optional: true + + '@rolldown/binding-win32-arm64-msvc@1.0.0-beta.27': + optional: true + + '@rolldown/binding-win32-ia32-msvc@1.0.0-beta.27': + optional: true + + '@rolldown/binding-win32-x64-msvc@1.0.0-beta.27': + optional: true + + '@rolldown/pluginutils@1.0.0-beta.27': {} + '@rollup/plugin-alias@3.1.8(rollup@2.79.1)': dependencies: rollup: 2.79.1 @@ -15561,6 +15736,11 @@ snapshots: '@tsconfig/node16@1.0.2': {} + '@tybys/wasm-util@0.10.0': + dependencies: + tslib: 2.5.0 + optional: true + '@types/acorn@4.0.6': dependencies: '@types/estree': 1.0.8 @@ -22902,6 +23082,28 @@ snapshots: dependencies: glob: 10.3.10 + rolldown@1.0.0-beta.27: + dependencies: + '@oxc-project/runtime': 0.77.0 + '@oxc-project/types': 0.77.0 + '@rolldown/pluginutils': 1.0.0-beta.27 + ansis: 4.1.0 + optionalDependencies: + '@rolldown/binding-android-arm64': 1.0.0-beta.27 + '@rolldown/binding-darwin-arm64': 1.0.0-beta.27 + '@rolldown/binding-darwin-x64': 1.0.0-beta.27 + '@rolldown/binding-freebsd-x64': 1.0.0-beta.27 + '@rolldown/binding-linux-arm-gnueabihf': 1.0.0-beta.27 + '@rolldown/binding-linux-arm64-gnu': 1.0.0-beta.27 + '@rolldown/binding-linux-arm64-musl': 1.0.0-beta.27 + '@rolldown/binding-linux-arm64-ohos': 1.0.0-beta.27 + '@rolldown/binding-linux-x64-gnu': 1.0.0-beta.27 + '@rolldown/binding-linux-x64-musl': 1.0.0-beta.27 + '@rolldown/binding-wasm32-wasi': 1.0.0-beta.27 + '@rolldown/binding-win32-arm64-msvc': 1.0.0-beta.27 + '@rolldown/binding-win32-ia32-msvc': 1.0.0-beta.27 + '@rolldown/binding-win32-x64-msvc': 1.0.0-beta.27 + rollup-plugin-dts@6.1.1(rollup@4.44.2)(typescript@5.8.3): dependencies: magic-string: 0.30.17