fix(vite): remove css files when fully inlined or under inline threshold

danielroe · danielroe · commit 91be2131d43b · 2025-04-07T11:08:28.000-07:00
diff --git a/packages/vite-plugin-beasties/src/index.ts b/packages/vite-plugin-beasties/src/index.ts
@@ -64,7 +64,13 @@ export function beasties(options: ViteBeastiesOptions = {}): Plugin {
             delete bundle[name]
             return true
           }
-          bundle[name]!.source = sheetInverse
+          else if (!sheetInverse.length) {
+            delete bundle[name]
+            return true
+          }
+          else {
+            bundle[name]!.source = sheetInverse
+          }
         }
         else {
           console.warn(`pruneSource is enabled, but a style (${name}) has no corresponding asset.`)
@@ -73,6 +79,26 @@ export function beasties(options: ViteBeastiesOptions = {}): Plugin {
         return isStyleInlined
       }
 
+      const originalCheckInline = beastiesInstance.checkInlineThreshold.bind(beastiesInstance)
+      beastiesInstance.checkInlineThreshold = function checkInlineThreshold(style, before, sheetInverse) {
+        const isStyleInlined = originalCheckInline(style, before, sheetInverse)
+
+        if (isStyleInlined || !sheetInverse.length) {
+          // @ts-expect-error internal property
+          const name = style.$$name.replace(/^\//, '') as string
+          if (name in bundle && bundle[name]!.type === 'asset') {
+            delete bundle[name]
+          }
+          else {
+            console.warn(
+              `${name} was not found in assets. the resource may still be emitted but will be unreferenced.`,
+            )
+          }
+        }
+
+        return isStyleInlined
+      }
+
       try {
         return await beastiesInstance.process(html)
       }
diff --git a/packages/vite-plugin-beasties/test/fixtures/basic/index.html b/packages/vite-plugin-beasties/test/fixtures/basic/index.html
@@ -1,12 +1,15 @@
 <!DOCTYPE html>
 <html>
+
 <head>
   <title>Test Page</title>
   <link rel="stylesheet" href="./style.css">
 </head>
+
 <body>
   <h1>Hello Beasties</h1>
   <div class="test-content">This is a test</div>
   <script type="module" src="./main.js"></script>
 </body>
-</html>
+
+</html>
diff --git a/packages/vite-plugin-beasties/test/fixtures/basic/style.css b/packages/vite-plugin-beasties/test/fixtures/basic/style.css
@@ -1,4 +1,4 @@
 .test-content {
   color: blue;
   font-weight: bold;
-}
+}
diff --git a/packages/vite-plugin-beasties/test/index.test.ts b/packages/vite-plugin-beasties/test/index.test.ts
@@ -47,12 +47,22 @@ describe('vite-plugin-beasties', () => {
     expect(html).toContain('<style>')
     expect(html).toContain('.test-content')
 
+    expect(html).not.toContain('.css')
+
     const hasCssColor = html?.includes('color: blue') || html?.includes('color:#00f')
     expect(hasCssColor).toBe(true)
 
+    const files = output.map(f => f.fileName.replace(/-[^.]+/, ''))
+    expect(files).toMatchInlineSnapshot(`
+      [
+        "assets/index.js",
+        "index.html",
+      ]
+    `)
+
     // prunes source
     const css = output.find(file => file.fileName.endsWith('.css')) as any
-    expect(css.source.trim()).toMatchInlineSnapshot(`""`)
+    expect(css?.source.trim()).toMatchInlineSnapshot(`undefined`)
   })
 
   it('allows disabling pruning of source CSS files during the build', async () => {
