[#108] Fix injection for multiple build of same entry point (#109)

* fix: inject css into multiple build process of same entry point

* docs: add info about relativeCSSInjection

* 3.2.1

* refactor: remove unreq comment

README.md

@@ -249,6 +249,9 @@ _This feature is based on information provided by Vite. Since we can't control h
 The default behavior of this plugin takes all the CSS code of your application directly to the entrypoint generated.
 The `relativeCSSInjection` if configured to `true` will inject the CSS code of every entrypoint to the relative importer.
 
+**Set this option to `true` if you are using the multiple entry point option of Rollup.**
+_Future release can have an advanced behavior where this options will be configured to true automatically by sniffing user configurations._
+
 If a CSS code it's not injected inside some JS a warning will be showed.
 To disable this warning set `suppressUnusedCssWarning` to `true`.
 

package.json

@@ -1,6 +1,6 @@
 {
     "name": "vite-plugin-css-injected-by-js",
-    "version": "3.2.0",
+    "version": "3.2.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",

src/utils.ts

@@ -108,6 +108,7 @@ function defaultJsAssetsFilter(chunk: OutputChunk): boolean {
 
 // The cache must be global since execution context is different every entry
 const cssSourceCache: { [key: string]: string } = {};
+
 export function extractCss(bundle: OutputBundle, cssName: string): string {
     const cssAsset = bundle[cssName] as OutputAsset;
 
@@ -224,6 +225,9 @@ export async function relativeCssInjection(
     }
 }
 
+const globalCSSCodeEntryCache = new Map();
+let previousFacadeModuleId = '';
+
 export async function globalCssInjection(
     bundle: OutputBundle,
     cssAssets: string[],
@@ -241,10 +245,39 @@ export async function globalCssInjection(
     process.env.VITE_CSS_INJECTED_BY_JS_DEBUG &&
         debugLog(`[vite-plugin-css-injected-by-js] Global CSS Assets: [${cssAssets.join(',')}]`);
     const allCssCode = concatCssAndDeleteFromBundle(bundle, cssAssets);
-    const cssInjectionCode = allCssCode.length > 0 ? (await buildCssCode(allCssCode))?.code : '';
+    let cssInjectionCode: string = '';
+
+    if (allCssCode.length > 0) {
+        const cssCode = (await buildCssCode(allCssCode))?.code;
+        if (typeof cssCode == 'string') {
+            cssInjectionCode = cssCode;
+        }
+    }
 
     for (const jsTargetKey of jsTargetBundleKeys) {
         const jsAsset = bundle[jsTargetKey] as OutputChunk;
+
+        /**
+         * Since it creates the assets once sequential builds for the same entry point
+         * (for example when multiple formats of same entry point are built),
+         * we need to reuse the same CSS created the first time.
+         */
+        if (jsAsset.facadeModuleId != null && jsAsset.isEntry && cssInjectionCode != '') {
+            if (jsAsset.facadeModuleId != previousFacadeModuleId) {
+                globalCSSCodeEntryCache.clear();
+            }
+            previousFacadeModuleId = jsAsset.facadeModuleId;
+            globalCSSCodeEntryCache.set(jsAsset.facadeModuleId, cssInjectionCode);
+        }
+        if (
+            cssInjectionCode == '' &&
+            jsAsset.isEntry &&
+            jsAsset.facadeModuleId != null &&
+            typeof globalCSSCodeEntryCache.get(jsAsset.facadeModuleId) == 'string'
+        ) {
+            cssInjectionCode = globalCSSCodeEntryCache.get(jsAsset.facadeModuleId);
+        }
+
         process.env.VITE_CSS_INJECTED_BY_JS_DEBUG &&
             debugLog(`[vite-plugin-css-injected-by-js] Global CSS inject: ${jsAsset.fileName}`);
         jsAsset.code = buildOutputChunkWithCssInjectionCode(