injectEvent (#27)

Author: indooorsman

index.d.ts

@@ -42,6 +42,7 @@ declare interface CssModulesOptions {
 
 declare interface PluginOptions {
   inject?: boolean | string | ((css: string, digest: string) => string);
+  injectEvent?: string;
   localsConvention?: CssModulesOptions['localsConvention'];
   generateScopedName?: CssModulesOptions['generateScopedName'];
   cssModulesOption?: CssModulesOptions;

lib/plugin.js

@@ -58,13 +58,14 @@ const buildCssModulesJs = async ({ fullPath, outDir, options, digest, build }) =
   let builtCssFullPath = null;
 
   if (inject) {
+    const injectOptions = { urlFullPathMap, injectEvent: options.injectEvent };
     const typeofInject = typeof inject;
     if (typeofInject === 'boolean') {
-      injectCode = buildInjectCode('head', finalCssContent, digest, { urlFullPathMap });
+      injectCode = buildInjectCode('head', finalCssContent, digest, injectOptions);
     } else if (typeofInject === 'string') {
-      injectCode = buildInjectCode(inject, finalCssContent, digest, { urlFullPathMap });
+      injectCode = buildInjectCode(inject, finalCssContent, digest, injectOptions);
     } else if (typeofInject === 'function') {
-      injectCode = inject(finalCssContent, digest, { urlFullPathMap });
+      injectCode = inject(finalCssContent, digest, injectOptions);
     } else {
       throw new Error('type of `inject` must be boolean or string or function');
     }

lib/utils.js

@@ -39,7 +39,7 @@ const getAbsoluteUrl = (resolveDir, url) => {
  * @param {string} digest
  * @returns {string}
  */
-const buildInjectCode = (injectToSelector = 'head', css, digest, { urlFullPathMap }) => {
+const buildInjectCode = (injectToSelector = 'head', css, digest, { urlFullPathMap, injectEvent }) => {
   const patchedPlaceholders = [];
   const imports = Object.keys(urlFullPathMap)
     .map((placeholder) => {
@@ -50,6 +50,7 @@ const buildInjectCode = (injectToSelector = 'head', css, digest, { urlFullPathMa
     .join('\n');
   return `${imports}
 (function(){
+  const injectEvent = ${injectEvent ? `"${injectEvent}"` : 'undefined'}
   let css = \`${css}\`;
   ${
     patchedPlaceholders.length
@@ -65,22 +66,31 @@ const buildInjectCode = (injectToSelector = 'head', css, digest, { urlFullPathMa
   }
   
   const __inject = function() {
-    let root = document.querySelector('${injectToSelector}');
-    if (root && root.shadowRoot) {
-      root = root.shadowRoot;
+    const doInject = () => {
+      let root = document.querySelector('${injectToSelector}');
+      if (root && root.shadowRoot) {
+        root = root.shadowRoot;
+      }
+      if (!root) {
+        root = document.head;
+        console.warn('[esbuild-css-modules-plugin]', 'can not find element \`${injectToSelector}\`, append style to', root);
+      }
+      if (!root.querySelector('#_${digest}')) {
+        const el = document.createElement('style');
+        el.id = '_${digest}';
+        el.textContent = css;
+        root.appendChild(el);
+      }
     }
-    if (!root) {
-      root = document.head;
-      console.warn('[esbuild-css-modules-plugin]', 'can not find element \`${injectToSelector}\`, append style to', root);
-    }
-    if (!root.querySelector('#_${digest}')) {
-      const el = document.createElement('style');
-      el.id = '_${digest}';
-      el.textContent = css;
-      root.appendChild(el);
+    if (injectEvent) {
+      window.addEventListener(injectEvent, function() {
+        doInject();
+      });
+    } else {
+      doInject();
     }
   }
-  if (document.readyState !== 'interactive' && document.readyState !== 'complete') {
+  if (!injectEvent && document.readyState !== 'interactive' && document.readyState !== 'complete') {
     window.addEventListener('DOMContentLoaded', function() {
       __inject();
     });

package.json

@@ -1,6 +1,6 @@
 {
   "name": "esbuild-css-modules-plugin",
-  "version": "2.2.3",
+  "version": "2.2.4",
   "description": "A esbuild plugin to bundle css modules into js(x)/ts(x).",
   "main": "index.js",
   "keywords": [