rollup: Correctly strip side-effect imports (#1699)

Author: askoufis

.changeset/many-parts-fail.md

@@ -0,0 +1,5 @@
+---
+'@vanilla-extract/rollup-plugin': patch
+---
+
+Fixed a bug where side-effect `require`s would not be stripped when bundling CSS with the `extract` option 

.changeset/twenty-rivers-smash.md

@@ -0,0 +1,5 @@
+---
+'@vanilla-extract/rollup-plugin': patch
+---
+
+Fixed a bug where side-effect imports would not be stripped in `.cjs` or `.mjs` files when bundling CSS with the `extract` option

packages/rollup-plugin/src/index.ts

@@ -211,12 +211,13 @@ export function vanillaExtractPlugin({
       }
       await Promise.all(
         Object.entries(bundle).map(async ([id, chunk]) => {
+          const isJsFile = /\.(m|c)?js$/.test(id);
           if (
             chunk.type === 'chunk' &&
-            id.endsWith('.js') &&
+            isJsFile &&
             chunk.imports.some((specifier) => extractedCssIds.has(specifier))
           ) {
-            chunk.code = await stripSideEffectImportsMatching(chunk.code, [
+            chunk.code = stripSideEffectImportsMatching(chunk.code, [
               ...extractedCssIds,
             ]);
           }

packages/rollup-plugin/src/lib.ts

@@ -102,26 +102,17 @@ export function sortModules(modules: Record<string, ImportChain>): string[] {
   return sortedModules.map(([id]) => id);
 }
 
-const SIDE_EFFECT_IMPORT_RE = /^\s*import\s+['"]([^'"]+)['"]\s*;?\s*/gm;
+const SIDE_EFFECT_IMPORT_RE =
+  /^\s*(?:import\s+['"]([^'"]+)['"]|require\s*\(\s*['"]([^'"]+)['"]\s*\))\s*;?\s*/gm;
 
-/** Remove specific side effect imports from JS */
-export function stripSideEffectImportsMatching(
+/** Remove specific side effect imports and requires from JS */
+export const stripSideEffectImportsMatching = (
   code: string,
   sources: string[],
-): string {
-  const matches = code.matchAll(SIDE_EFFECT_IMPORT_RE);
-  if (!matches) {
-    return code;
-  }
-  let output = code;
-  for (const match of matches) {
-    if (!match[1] || !sources.includes(match[1])) {
-      continue;
-    }
-    output = output.replace(match[0], '');
-  }
-  return output;
-}
+): string =>
+  code.replace(SIDE_EFFECT_IMPORT_RE, (match, importSource, requireSource) =>
+    sources.includes(importSource ?? requireSource) ? '' : match,
+  );
 
 export async function tryGetPackageName(cwd: string): Promise<string | null> {
   try {

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

@@ -386,8 +386,7 @@ describe('rollup-plugin', () => {
 });
 
 describe('stripSideEffectImportsMatching', () => {
-  it('strips only specified side effects', () => {
-    // assert all specified imports are stripped
+  it('strips only specified side effects in ESM', () => {
     expect(
       stripSideEffectImportsMatching(
         `import React from 'react';
@@ -410,7 +409,6 @@ export default function Button() {
   });
 
   it('leaves code alone if no side effects specified', () => {
-    // assert empty array returns code as expected
     const code = `import React from 'react';
 import 'button.vanilla.css';
 import './foobar.js';
@@ -420,4 +418,26 @@ export default function Button() {
 }`;
     expect(stripSideEffectImportsMatching(code, [])).toBe(code);
   });
+
+  it('strips only specified side effects in CJS', () => {
+    expect(
+      stripSideEffectImportsMatching(
+        `const React = require('react');
+require('button.vanilla.css');
+require('./foobar.js');
+
+module.exports = function Button() {
+  return <button>My Button</button>;
+}`,
+        ['button.vanilla.css', 'checkbox.vanilla.css', 'radio.vanilla.css'],
+      ),
+    ).toBe(
+      `const React = require('react');
+require('./foobar.js');
+
+module.exports = function Button() {
+  return <button>My Button</button>;
+}`,
+    );
+  });
 });