[#91] Fix manifest json includes non-existing css chunks (#93)

* fix: remove vitemetadata from output chunk to exclude all removed css

* 3.1.1

Author: marco-prontera

package-lock.json

@@ -1,6 +1,6 @@
 {
     "name": "vite-plugin-css-injected-by-js",
-    "version": "3.1.0",
+    "version": "3.1.1",
     "description": "A Vite plugin that takes the CSS and adds it to the page through the JS. For those who want a single JS file.",
     "main": "dist/cjs/index.js",
     "module": "dist/esm/index.js",

package.json

@@ -1,6 +1,7 @@
 import {
     buildCSSInjectionCode,
     buildJsCssMap,
+    clearImportedCssViteMetadataFromBundle,
     globalCssInjection,
     relativeCssInjection,
     removeLinkStyleSheets,
@@ -104,6 +105,8 @@ export default function cssInjectedByJsPlugin({
                 );
             }
 
+            clearImportedCssViteMetadataFromBundle(bundle, unusedCssAssets);
+
             const htmlFiles = Object.keys(bundle).filter((i) => i.endsWith('.html'));
             for (const name of htmlFiles) {
                 const htmlChunk = bundle[name] as OutputAsset;

src/index.ts

@@ -272,3 +272,18 @@ export function buildOutputChunkWithCssInjectionCode(
 
     return jsAssetCode;
 }
+
+export function clearImportedCssViteMetadataFromBundle(bundle: OutputBundle, unusedCssAssets: string[]): void {
+    // Required to exclude removed files from manifest.json
+    for (const key in bundle) {
+        const chunk = bundle[key] as OutputChunk;
+        if (chunk.viteMetadata && chunk.viteMetadata.importedCss.size > 0) {
+            const importedCssFileNames = chunk.viteMetadata.importedCss;
+            importedCssFileNames.forEach((importedCssFileName) => {
+                if (!unusedCssAssets.includes(importedCssFileName)) {
+                    chunk.viteMetadata.importedCss = new Set();
+                }
+            });
+        }
+    }
+}

src/utils.ts

@@ -4,6 +4,7 @@ import type { PluginConfiguration } from '../src/interface';
 import {
     buildCSSInjectionCode,
     buildJsCssMap,
+    clearImportedCssViteMetadataFromBundle,
     concatCssAndDeleteFromBundle,
     extractCss,
     getJsTargetBundleKeys,
@@ -527,5 +528,36 @@ describe('utils', () => {
                 }
             });
         });
+
+        describe('manifest.json clear viteMetadata', () => {
+            it('should not remove ununsedCssAssets', () => {
+                const bundle = {
+                    'chunk-1.js': generateJsChunk('style', ['style.css']),
+                    'chunk-2.js': generateJsChunk('style', ['style.css']),
+                };
+                const unusedCssAssets = ['style.css'];
+
+                clearImportedCssViteMetadataFromBundle(bundle, unusedCssAssets);
+
+                const chunk1 = bundle['chunk-1.js'] as OutputChunk;
+                const chunk2 = bundle['chunk-2.js'] as OutputChunk;
+                expect(chunk1.viteMetadata.importedCss.size).toBe(1);
+                expect(chunk2.viteMetadata.importedCss.size).toBe(1);
+            });
+
+            it('should remove all importedCss', () => {
+                const bundle: OutputBundle = {
+                    'chunk-1.js': generateJsChunk('style', ['style.css', 'style1.css', 'style2.css']),
+                    'chunk-2.js': generateJsChunk('style', ['style.css']),
+                };
+                const unusedCssAssets: string[] = [];
+
+                clearImportedCssViteMetadataFromBundle(bundle, unusedCssAssets);
+                const chunk1 = bundle['chunk-1.js'] as OutputChunk;
+                const chunk2 = bundle['chunk-2.js'] as OutputChunk;
+                expect(chunk1.viteMetadata.importedCss.size).toBe(0);
+                expect(chunk2.viteMetadata.importedCss.size).toBe(0);
+            });
+        });
     });
 });