vite/rollup: Return empty sourcemaps (#706)

Co-authored-by: mattcompiles <[email protected]>

Author: graup

.changeset/rich-bobcats-teach.md

@@ -0,0 +1,6 @@
+---
+'@vanilla-extract/rollup-plugin': patch
+'@vanilla-extract/vite-plugin': patch
+---
+
+Suppress empty sourcemap warnings

packages/rollup-plugin/src/index.ts

@@ -42,11 +42,15 @@ export function vanillaExtractPlugin({
         this.addWatchFile(file);
       }
 
-      return processVanillaFile({
+      const output = await processVanillaFile({
         source,
         filePath,
         identOption: identifiers ?? (isProduction ? 'short' : 'debug'),
       });
+      return {
+        code: output,
+        map: { mappings: '' },
+      };
     },
     async resolveId(id) {
       if (!virtualCssFileFilter.test(id)) {
@@ -81,14 +85,18 @@ export function vanillaExtractPlugin({
 
       // ...replace import paths with relative paths to emitted css files
       const chunkPath = dirname(chunkInfo.fileName);
-      return importsToReplace.reduce((codeResult, importPath) => {
+      const output = importsToReplace.reduce((codeResult, importPath) => {
         const assetId = emittedFiles.get(importPath)!;
         const assetName = this.getFileName(assetId);
         const fixedImportPath = `./${normalize(
           relative(chunkPath, assetName),
         )}`;
         return codeResult.replace(importPath, fixedImportPath);
       }, code);
+      return {
+        code: output,
+        map: chunkInfo.map ?? null,
+      };
     },
   };
 }

packages/rollup-plugin/test/__snapshots__/rollup-plugin.test.ts.snap

@@ -494,6 +494,43 @@ export { altTheme, responsiveTheme, theme, vars };
 ]
 `;
 
+exports[`rollup-plugin should build with sourcemaps 1`] = `
+Array [
+  Array [
+    "assets/src/shared.css.ts.vanilla-31027048.css",
+    "",
+  ],
+  Array [
+    "assets/src/styles.css.ts.vanilla-eb3ed277.css",
+    "",
+  ],
+  Array [
+    "assets/src/themes.css.ts.vanilla-9cd4611f.css",
+    "",
+  ],
+  Array [
+    "src/index.js",
+    ";;;;;;AAKA,MAAM,WAAW,GAAG,gBAAgB,CAAC,IAAI,EAAE;AAC3C,EAAE,MAAM,EAAE;AACV,IAAI,eAAe,EAAE,QAAQ;AAC7B,IAAI,IAAI,EAAE,OAAO;AACjB,GAAG;AACH,EAAE,KAAK,EAAE;AACT,IAAI,CAAC,EAAE,KAAK;AACZ,IAAI,CAAC,EAAE,KAAK;AACZ,IAAI,CAAC,EAAE,MAAM;AACb,GAAG;AACH,CAAC,CAAC,CAAC;AACH,SAAS,MAAM,GAAG;AAClB,EAAE,QAAQ,CAAC,IAAI,CAAC,SAAS,GAAG,CAAC;AAC7B,WAAW,EAAE,SAAS,CAAC,IAAI,CAAC,SAAS,EAAE,MAAM,CAAC;AAC9C;AACA,aAAa,EAAE,SAAS,CAAC,aAAa,CAAC,SAAS,EAAE,SAAS,CAAC;AAC5D,kBAAkB,EAAE,SAAS,CAAC,UAAU,CAAC,SAAS,EAAE,MAAM,CAAC;AAC3D,kBAAkB,EAAE,QAAQ,CAAC;AAC7B;AACA,iBAAiB,EAAE,SAAS,CAAC,YAAY,CAAC,SAAS,EAAE,SAAS,CAAC;AAC/D,sBAAsB,EAAE,SAAS,CAAC,SAAS,CAAC,SAAS,EAAE,MAAM,CAAC;AAC9D,sBAAsB,EAAE,KAAK,CAAC;AAC9B;AACA,qBAAqB,EAAE,SAAS,CAAC,mBAAmB,CAAC,SAAS,EAAE,SAAS,CAAC;AAC1E,0BAA0B,EAAE,SAAS,CAAC,gBAAgB,CAAC,SAAS,EAAE,MAAM,CAAC;AACzE,wBAAwB,EAAE,WAAW,CAAC;AACtC;AACA,yBAAyB,EAAE,SAAS,CAAC,oBAAoB,CAAC,SAAS,EAAE,SAAS,CAAC;AAC/E,8BAA8B,EAAE,SAAS,CAAC,iBAAiB,CAAC,SAAS,EAAE,MAAM,CAAC,CAAC,EAAE,OAAO,CAAC,KAAK,CAAC,CAAC;AAChG;AACA;AACA,6BAA6B,EAAE,SAAS,CAAC,oBAAoB,CAAC,SAAS,EAAE,SAAS,CAAC;AACnF,kCAAkC,EAAE,SAAS,CAAC,iBAAiB,CAAC,SAAS,EAAE,MAAM,CAAC;AAClF,8BAA8B,EAAE,eAAe,CAAC;AAChD;AACA,yBAAyB,EAAE,SAAS,CAAC,wBAAwB,CAAC,SAAS,EAAE,SAAS,CAAC;AACnF,8BAA8B,EAAE,SAAS,CAAC,qBAAqB,CAAC,SAAS,EAAE,MAAM,CAAC;AAClF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC,CAAC;AACF,EAAE,MAAM,oBAAoB,GAAG,QAAQ,CAAC,cAAc,CAAC,SAAS,CAAC,oBAAoB,CAAC,CAAC;AACvF,EAAE,IAAI,CAAC,oBAAoB,EAAE;AAC7B,IAAI,MAAM,IAAI,KAAK,CAAC,mCAAmC,CAAC,CAAC;AACzD,GAAG;AACH,EAAE,cAAc,CAAC,oBAAoB,EAAE,IAAI,EAAE;AAC7C,IAAI,MAAM,EAAE;AACZ,MAAM,eAAe,EAAE,aAAa;AACpC,MAAM,IAAI,EAAE,YAAY;AACxB,KAAK;AACL,IAAI,KAAK,EAAE;AACX,MAAM,CAAC,EAAE,KAAK;AACd,MAAM,CAAC,EAAE,MAAM;AACf,MAAM,CAAC,EAAE,MAAM;AACf,KAAK;AACL,GAAG,CAAC,CAAC;AACL,EAAE,cAAc,CAAC,oBAAoB,EAAE;AACvC,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,eAAe,GAAG,YAAY;AAC/C,GAAG,CAAC,CAAC;AACL,CAAC;AACD,MAAM,EAAE",
+  ],
+  Array [
+    "src/shared.css.js",
+    ";;;;;;",
+  ],
+  Array [
+    "src/styles.css.js",
+    ";;;;;;;;;;",
+  ],
+  Array [
+    "src/themes.css.js",
+    ";;;;;;;;;",
+  ],
+  Array [
+    "test-nodes.json.js",
+    ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;",
+  ],
+]
+`;
+
 exports[`rollup-plugin should build without preserveModules 1`] = `
 Array [
   Array [

packages/rollup-plugin/test/rollup-plugin.test.ts

@@ -5,7 +5,7 @@ import path from 'path';
 
 import { vanillaExtractPlugin } from '..';
 
-async function buildAndMatchSnapshot(outputOptions: OutputOptions) {
+async function build(outputOptions: OutputOptions) {
   const bundle = await rollup({
     input: require.resolve('@fixtures/themed'),
     plugins: [
@@ -19,15 +19,17 @@ async function buildAndMatchSnapshot(outputOptions: OutputOptions) {
   });
   const { output } = await bundle.generate(outputOptions);
   output.sort((a, b) => a.fileName.localeCompare(b.fileName));
+  return output;
+}
+
+async function buildAndMatchSnapshot(outputOptions: OutputOptions) {
+  const output = await build(outputOptions);
   expect(
     output.map((chunkOrAsset) => [
       chunkOrAsset.fileName,
       chunkOrAsset.type === 'asset' ? chunkOrAsset.source : chunkOrAsset.code,
     ]),
   ).toMatchSnapshot();
-  if (bundle) {
-    await bundle.close();
-  }
 }
 
 describe('rollup-plugin', () => {
@@ -57,4 +59,18 @@ describe('rollup-plugin', () => {
       },
     });
   });
+
+  it('should build with sourcemaps', async () => {
+    const output = await build({
+      format: 'esm',
+      preserveModules: true,
+      sourcemap: true,
+    });
+    expect(
+      output.map((chunkOrAsset) => [
+        chunkOrAsset.fileName,
+        chunkOrAsset.type === 'asset' ? '' : chunkOrAsset.map?.mappings,
+      ]),
+    ).toMatchSnapshot();
+  });
 });

packages/vite-plugin/src/index.ts

@@ -139,7 +139,7 @@ export function vanillaExtractPlugin({ identifiers }: Options = {}): Plugin {
         }
       }
 
-      return processVanillaFile({
+      const output = await processVanillaFile({
         source,
         filePath: validId,
         identOption:
@@ -182,6 +182,11 @@ export function vanillaExtractPlugin({ identifiers }: Options = {}): Plugin {
           return `import "${id}";`;
         },
       });
+
+      return {
+        code: output,
+        map: { mappings: '' },
+      };
     },
   };
 }