[#30] ESM & CJS support and bugfixing (#32)

* WIP

* 2.0.0-beta

* Require manual tests

* 2.0.0-beta-0

* Fix

* 2.0.0-beta-1

* Restore logic

* 2.0.0-beta-2

* Fix and support Vite 3

* 2.0.0-beta-2.0

* 2.0.0

Author: marco-prontera

.prettierrc

@@ -1,5 +1,5 @@
 {
-  "printWidth": 80,
+  "printWidth": 130,
   "tabWidth": 4,
   "endOfLine": "auto",
   "singleQuote": true,

cjs-esm-fixup

@@ -0,0 +1,11 @@
+cat >dist/cjs/package.json <<!EOF
+{
+    "type": "commonjs"
+}
+!EOF
+
+cat >dist/esm/package.json <<!EOF
+{
+    "type": "module"
+}
+!EOF

package-lock.json

@@ -1,11 +1,21 @@
 {
   "name": "vite-plugin-css-injected-by-js",
-  "version": "1.5.1",
+  "version": "2.0.0",
   "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/index.js",
-  "types": "dist/index.d.ts",
+  "main": "dist/cjs/index.js",
+  "module": "dist/esm/index.js",
+  "exports": {
+    ".": {
+      "import": "./dist/esm/index.js",
+      "require": "./dist/cjs/index.js"
+    }
+  },
+  "typings": "dist/esm/declarations/index.d.ts",
+  "files": [
+    "dist"
+  ],
   "scripts": {
-    "build": "tsc",
+    "build": "rm -rf dist && tsc -p tsconfig.json && tsc -p tsconfig-cjs.json && ./cjs-esm-fixup",
     "format": "prettier 'src/index.ts' --write"
   },
   "repository": {
@@ -22,9 +32,6 @@
     "css",
     "js"
   ],
-  "files": [
-    "dist/**/*"
-  ],
   "peerDependencies": {
     "vite": ">2.0.0-0"
   },

package.json

@@ -1,15 +1,13 @@
-import {
-    IndexHtmlTransformContext,
-    IndexHtmlTransformResult,
-    Plugin,
-} from 'vite';
+import { Plugin } from 'vite';
+import { OutputAsset, OutputChunk } from 'rollup';
+import { buildCSSInjectionCode, removeLinkStyleSheets } from './utils';
 
 /**
  * Inject the CSS compiled with JS.
  *
  * @return {Plugin}
  */
-function cssInjectedByJsPlugin(
+export default function cssInjectedByJsPlugin(
     { topExecutionPriority, styleId } = {
         topExecutionPriority: true,
         styleId: '',
@@ -22,87 +20,41 @@ function cssInjectedByJsPlugin(
         apply: 'build',
         enforce: 'post',
         name: 'css-in-js-plugin',
-        generateBundle(opts, bundle) {
-            let styleCode = '';
-
-            for (const key in bundle) {
-                if (bundle[key]) {
-                    const chunk = bundle[key];
-
-                    if (
-                        chunk.type === 'asset' &&
-                        chunk.fileName.includes('.css')
-                    ) {
-                        styleCode += chunk.source;
-                        delete bundle[key];
-                    }
+        async generateBundle(opts, bundle) {
+            const htmlFiles = Object.keys(bundle).filter((i) => i.endsWith('.html'));
+            const cssAssets = Object.keys(bundle).filter((i) => bundle[i].type == 'asset' && bundle[i].fileName.endsWith('.css'));
+            const jsAssets = Object.keys(bundle).filter(
+                (i) =>
+                    bundle[i].type == 'chunk' &&
+                    bundle[i].fileName.match(/.[cm]?js$/) != null &&
+                    !bundle[i].fileName.includes('polyfill')
+            );
+
+            for (const name of htmlFiles) {
+                const htmlChunk = bundle[name] as OutputAsset;
+                let replacedHtml = htmlChunk.source as string;
+
+                const allCssCode = cssAssets.reduce(function extractCssCodeAndDeleteFromBundle(previousValue, cssName) {
+                    const cssAsset = bundle[cssName] as OutputAsset;
+                    const result = previousValue + cssAsset.source;
+                    delete bundle[cssName];
+                    replacedHtml = removeLinkStyleSheets(replacedHtml, cssName);
+                    htmlChunk.source = replacedHtml;
+                    return result;
+                }, '');
+
+                if (allCssCode.length > 0) {
+                    cssToInject = allCssCode;
                 }
             }
 
-            if (styleCode.length > 0) {
-                cssToInject = styleCode;
-            }
-
-            for (const key in bundle) {
-                if (bundle[key]) {
-                    const chunk = bundle[key];
+            const jsAsset = bundle[jsAssets[0]] as OutputChunk;
 
-                    if (
-                        chunk.type === 'chunk' &&
-                        chunk.fileName.match(/.[cm]?js$/) != null &&
-                        !chunk.fileName.includes('polyfill')
-                    ) {
-                        let topCode: string = '';
-                        let bottomCode: string = '';
-                        if (topExecutionPriority) {
-                            bottomCode = chunk.code;
-                        } else {
-                            topCode = chunk.code;
-                        }
-
-                        chunk.code = topCode;
-                        chunk.code +=
-                            "(function(){ try {var elementStyle = document.createElement('style'); elementStyle.appendChild(document.createTextNode(";
-                        chunk.code += JSON.stringify(cssToInject.trim());
-                        chunk.code += ')); ';
-                        if (typeof styleId == 'string' && styleId.length > 0) {
-                            chunk.code += ` elementStyle.id = "${styleId}"; `;
-                        }
-                        chunk.code +=
-                            "document.head.appendChild(elementStyle);} catch(e) {console.error('vite-plugin-css-injected-by-js', e);} })();";
-                        chunk.code += bottomCode;
-
-                        break;
-                    }
-                }
-            }
-        },
-        transformIndexHtml: {
-            enforce: 'post',
-            transform(
-                html: string,
-                ctx?: IndexHtmlTransformContext
-            ): IndexHtmlTransformResult {
-                if (!ctx || !ctx.bundle) return html;
-
-                for (const [, value] of Object.entries(ctx.bundle)) {
-                    if (value.fileName.endsWith('.css')) {
-                        // Remove CSS link from HTML generated.
-                        const reCSS = new RegExp(
-                            `<link rel="stylesheet"[^>]*?href=".*/${value.fileName}"[^>]*?>`
-                        );
-                        html = html.replace(reCSS, '');
-                    }
-                }
-
-                return html;
-            },
+            const cssInjectionCode = await buildCSSInjectionCode(cssToInject, styleId);
+            const appCode = jsAsset.code;
+            jsAsset.code = topExecutionPriority ? '' : appCode;
+            jsAsset.code += cssInjectionCode ? cssInjectionCode.code : '';
+            jsAsset.code += !topExecutionPriority ? '' : appCode;
         },
     };
 }
-
-module.exports = cssInjectedByJsPlugin;
-
-cssInjectedByJsPlugin.default = cssInjectedByJsPlugin;
-
-export default cssInjectedByJsPlugin;

src/index.ts

@@ -0,0 +1,62 @@
+import {build, Plugin} from "vite";
+import {OutputChunk} from "rollup";
+
+const cssInjectedByJsId = '\0vite/all-css';
+
+export async function buildCSSInjectionCode(cssToInject: string, styleId: string): Promise<OutputChunk | null> {
+    const res = await build({
+        root: '',
+        configFile: false,
+        logLevel: 'error',
+        plugins: [injectionCSSCodePlugin(cssToInject, styleId)],
+        build: {
+            write: false,
+            target: 'es2015',
+            minify: 'esbuild',
+            assetsDir: '',
+            rollupOptions: {
+                input: {
+                    ['all-css']: cssInjectedByJsId,
+                },
+                output: {
+                    format: 'iife',
+                    manualChunks: undefined,
+                },
+            },
+        },
+    });
+    const _cssChunk = Array.isArray(res) ? res[0] : res;
+    if (!('output' in _cssChunk)) return null;
+
+    return _cssChunk.output[0];
+}
+
+/**
+ * @param {string} cssToInject
+ * @param {string|null} styleId
+ * @return {Plugin}
+ */
+function injectionCSSCodePlugin(cssToInject: string, styleId: string | null): Plugin {
+    return {
+        name: 'vite:injection-css-code-plugin',
+        resolveId(id: string) {
+            if (id == cssInjectedByJsId) {
+                return id;
+            }
+        },
+        load(id: string) {
+            if (id == cssInjectedByJsId) {
+                const cssCode = JSON.stringify(cssToInject.trim());
+
+                return `try{var elementStyle = document.createElement('style');${
+                    typeof styleId == 'string' && styleId.length > 0 ? 'elementStyle.id = "${styleId}";' : ''
+                }elementStyle.appendChild(document.createTextNode(${cssCode}));document.head.appendChild(elementStyle);}catch(e){console.error('vite-plugin-css-injected-by-js', e);}`;
+            }
+        },
+    };
+}
+
+export function removeLinkStyleSheets(html: string, cssFileName: string): string {
+    const removeCSS = new RegExp(`<link rel=".*"[^>]*?href=".*/?${cssFileName}"[^>]*?>`);
+    return html.replace(removeCSS, '');
+}

src/utils.ts

@@ -0,0 +1,28 @@
+{
+	"compilerOptions": {
+		"allowJs": true,
+		"allowSyntheticDefaultImports": true,
+		"baseUrl": "src",
+		"declaration": true,
+		"declarationMap": false,
+		"esModuleInterop": true,
+		"inlineSourceMap": false,
+		"lib": ["esnext", "dom"],
+		"listEmittedFiles": false,
+		"moduleResolution": "node",
+		"noUnusedLocals": true,
+		"noUnusedParameters": false,
+		"outDir": "dist",
+		"pretty": true,
+		"resolveJsonModule": true,
+		"rootDir": "src",
+		"skipLibCheck": true,
+		"strict": true,
+		"sourceMap": false,
+		"traceResolution": false,
+		"types": ["node"]
+	},
+	"compileOnSave": false,
+	"include": ["./src"],
+	"exclude": ["node_modules", "dist"]
+}

tsconfig-base.json

@@ -0,0 +1,9 @@
+{
+	"extends": "./tsconfig-base.json",
+	"compilerOptions": {
+		"declarationDir": "dist/cjs/declarations",
+		"module": "commonjs",
+		"outDir": "dist/cjs",
+		"target": "es2015"
+	}
+}

tsconfig-cjs.json

@@ -1,14 +1,9 @@
 {
-  "include": ["src"],
+  "extends": "./tsconfig-base.json",
   "compilerOptions": {
-    "declaration": true,
-    "esModuleInterop": true,
-    "module": "commonjs",
-    "moduleResolution": "node",
-    "noUnusedLocals": true,
-    "outDir": "dist",
-    "strict": true,
-    "sourceMap": false,
-    "target": "es2018"
+    "declarationDir": "dist/esm/declarations",
+    "module": "esnext",
+    "outDir": "dist/esm",
+    "target": "esnext"
   }
 }