fix(css): default splitting to true in unbundle mode for CSS inject (#867)

Author: sxzz

packages/css/src/options.test.ts

@@ -63,6 +63,16 @@ describe('resolveCssOptions', () => {
     })
   })
 
+  test('splitting defaults to true when unbundle is true', () => {
+    const result = resolveCssOptions({}, undefined, true)
+    expect(result.splitting).toBe(true)
+  })
+
+  test('explicit splitting=false overrides unbundle default', () => {
+    const result = resolveCssOptions({ splitting: false }, undefined, true)
+    expect(result.splitting).toBe(false)
+  })
+
   test('custom options are passed through', () => {
     const result = resolveCssOptions({
       transformer: 'postcss',

packages/css/src/options.ts

@@ -61,7 +61,8 @@ export interface CssOptions {
    * Enable/disable CSS code splitting.
    * When set to `false`, all CSS in the entire project will be extracted into a single CSS file named by {@link fileName}.
    * When set to `true`, CSS imported in async JS chunks will be preserved as chunks.
-   * @default false
+   *
+   * Defaults to `false`, but if `unbundle` is `true`, it defaults to `true` to preserve chunk splitting.
    */
   splitting?: boolean
 
@@ -204,6 +205,7 @@ export const defaultCssBundleName = 'style.css'
 export function resolveCssOptions(
   options: CssOptions = {},
   topLevelTarget?: string[],
+  unbundle?: boolean,
 ): ResolvedCssOptions {
   let cssTarget: string[] | undefined
   if (options.target === false) {
@@ -216,7 +218,7 @@ export function resolveCssOptions(
 
   return {
     transformer: options.transformer ?? 'lightningcss',
-    splitting: options.splitting ?? false,
+    splitting: options.splitting ?? !!unbundle,
     fileName: options.fileName ?? defaultCssBundleName,
     minify: options.minify ?? false,
     inject: options.inject ?? false,

packages/css/src/plugin.ts

@@ -41,7 +41,7 @@ export function CssPlugin(
   { logger }: { logger: Logger },
 ): Plugin[] {
   const cssConfig: CssPluginConfig = {
-    css: resolveCssOptions(config.css, config.target),
+    css: resolveCssOptions(config.css, config.target, config.unbundle),
     cwd: config.cwd,
     target: config.target,
   }
@@ -198,19 +198,19 @@ export function CssPlugin(
           if (
             chunk.type !== 'chunk' ||
             chunk.exports.length ||
-            !chunk.moduleIds.length ||
-            chunk.isEntry ||
-            chunk.isDynamicEntry
+            !chunk.moduleIds.length
           )
             continue
           // Strict: all modules are CSS
           if (chunk.moduleIds.every((id) => styles.has(id))) {
             pureCssChunks.add(chunk.fileName)
             continue
           }
-          // Relaxed: chunk has CSS modules and code is trivially empty
+          // Relaxed: non-entry chunk has CSS modules and code is trivially empty
           // (e.g. a JS file whose only purpose is `import './foo.css'`)
           if (
+            !chunk.isEntry &&
+            !chunk.isDynamicEntry &&
             chunk.moduleIds.some((id) => styles.has(id)) &&
             isEmptyChunkCode(chunk.code)
           ) {

tests/__snapshots__/css-inject/with-unbundle-true.snap.md

@@ -0,0 +1,19 @@
+## button.css
+
+```css
+.button {
+  color: red;
+}
+
+```
+
+## index.mjs
+
+```mjs
+import "./button.css";
+//#region index.ts
+const a = 1;
+//#endregion
+export { a };
+
+```

tests/css.test.ts

@@ -1523,6 +1523,24 @@ describe('css', () => {
       expect(asyncCode).not.toContain('empty css')
     })
 
+    test('with unbundle=true', async (context) => {
+      const { outputFiles, fileMap } = await testBuild({
+        context,
+        files: {
+          'index.ts': `import './button.css'\nexport const a = 1`,
+          'button.css': `.button { color: red }`,
+        },
+        options: {
+          unbundle: true,
+          css: { inject: true },
+        },
+      })
+      expect(outputFiles).toContain('button.css')
+      expect(outputFiles).toContain('index.mjs')
+      expect(fileMap['index.mjs']).toContain('import "./button.css"')
+      expect(fileMap['index.mjs']).not.toContain('empty css')
+    })
+
     test('rewrites shared css-only chunk imports to css files', async (context) => {
       const { outputFiles, fileMap } = await testBuild({
         context,