diff --git a/packages/vite/src/node/__tests__/plugins/css.spec.ts b/packages/vite/src/node/__tests__/plugins/css.spec.ts index d206e5b73e90d1..75d1c61060789b 100644 --- a/packages/vite/src/node/__tests__/plugins/css.spec.ts +++ b/packages/vite/src/node/__tests__/plugins/css.spec.ts @@ -272,7 +272,8 @@ import "other-module";` expect(replaced.length).toBe(code.length) expect(replaced).toMatchInlineSnapshot(` "import \\"some-module\\"; - /* empty css */import \\"other-module\\";" + /* empty css */ + import \\"other-module\\";" `) }) @@ -298,7 +299,8 @@ require("other-module");` expect(replaced.length).toBe(code.length) expect(replaced).toMatchInlineSnapshot(` "require(\\"some-module\\"); - /* empty css */require(\\"other-module\\");" + ;/* empty css */ + require(\\"other-module\\");" `) }) @@ -309,7 +311,30 @@ require("other-module");` const replaced = replacer(code) expect(replaced.length).toBe(code.length) expect(replaced).toMatchInlineSnapshot( - '"require(\\"some-module\\");/* empty css */require(\\"other-module\\");"', + '"require(\\"some-module\\");;/* empty css */require(\\"other-module\\");"', + ) + }) + + test('replaces require call in minified code that uses comma operator', () => { + const code = + 'require("some-module"),require("pure_css_chunk.js"),require("other-module");' + + const replacer = getEmptyChunkReplacer(['pure_css_chunk.js'], 'cjs') + const newCode = replacer(code) + expect(newCode).toMatchInlineSnapshot( + '"require(\\"some-module\\"),/* empty css */require(\\"other-module\\");"', + ) + // So there should be no pure css chunk anymore + expect(newCode.match(/pure_css_chunk\.js/)).toBeNull() + }) + + test('replaces require call in minified code that uses comma operator followed by assignment', () => { + const code = + 'require("some-module"),require("pure_css_chunk.js");const v=require("other-module");' + + const replacer = getEmptyChunkReplacer(['pure_css_chunk.js'], 'cjs') + expect(replacer(code)).toMatchInlineSnapshot( + '"require(\\"some-module\\");/* empty css */const v=require(\\"other-module\\");"', ) }) }) diff --git a/packages/vite/src/node/plugins/css.ts b/packages/vite/src/node/plugins/css.ts index 638c336fda74ed..cb8dbbdae2188f 100644 --- a/packages/vite/src/node/plugins/css.ts +++ b/packages/vite/src/node/plugins/css.ts @@ -828,10 +828,13 @@ export function getEmptyChunkReplacer( .join('|') .replace(/\./g, '\\.') + // for cjs, require calls might be chained by minifier using the comma operator. + // in this case we have to keep one comma if a next require is chained + // or add a semicolon to terminate the chain. const emptyChunkRE = new RegExp( outputFormat === 'es' - ? `\\bimport\\s*["'][^"']*(?:${emptyChunkFiles})["'];\n?` - : `\\brequire\\(\\s*["'][^"']*(?:${emptyChunkFiles})["']\\);\n?`, + ? `\\bimport\\s*["'][^"']*(?:${emptyChunkFiles})["'];` + : `(\\b|,\\s*)require\\(\\s*["'][^"']*(?:${emptyChunkFiles})["']\\)(;|,)`, 'g', ) @@ -839,7 +842,10 @@ export function getEmptyChunkReplacer( code.replace( emptyChunkRE, // remove css import while preserving source map location - (m) => `/* empty css ${''.padEnd(m.length - 15)}*/`, + (m) => + outputFormat === 'es' + ? `/* empty css ${''.padEnd(m.length - 15)}*/` + : `${m.at(-1)}/* empty css ${''.padEnd(m.length - 16)}*/`, ) }