2.2.12

Author: indooorsman

changelog.md

@@ -1,3 +1,8 @@
+## V2.2.12
+- only use cache in watch mode
+- refine inject logic
+- add example of custom inject to tests
+
 ## V2.2.11
 - replace `process.memoryUsage.rss()` to `process.memoryUsage().rss` to support Nodejs<15.6.0
 

lib/plugin.js

@@ -1,6 +1,6 @@
 const path = require('path');
 const { createHash } = require('crypto');
-const { readFile, appendFile } = require('fs/promises');
+const { readFile, writeFile, unlink } = require('fs/promises');
 const {
   getLogger,
   buildInjectCode,
@@ -36,8 +36,8 @@ const buildCssModulesJs = async ({ fullPath, options, build }) => {
   const bundleConfig = {
     filename: fullPath,
     code: originCss,
-    minify: true,
-    sourceMap: !options.inject,
+    minify: false,
+    sourceMap: true,
     cssModules: true,
     analyzeDependencies: false
   };
@@ -179,8 +179,10 @@ const onLoadModulesCss = async (build, options, args) => {
 
   log(`loading ${rpath}${args.suffix}`);
 
-  log(`checking cache for`, rpath);
-  const cached = await cache.get(absPath);
+  const useCache = build.initialOptions.watch;
+
+  useCache && log(`checking cache for`, rpath);
+  const cached = useCache && (await cache.get(absPath));
   if (cached) {
     log('return build cache for', rpath);
     return cached;
@@ -208,8 +210,11 @@ const onLoadModulesCss = async (build, options, args) => {
     contents: js,
     loader: 'js'
   };
-  await cache.set(absPath, result, originCss);
-  log(`add build result to cache for ${rpath}`);
+
+  if (useCache) {
+    await cache.set(absPath, result, originCss);
+    log(`add build result to cache for ${rpath}`);
+  }
 
   return result;
 };
@@ -275,13 +280,82 @@ const onLoadBuiltModulesCss = async ({ pluginData }, build) => {
  * @param {import('esbuild').BuildResult} result
  */
 const onEnd = async (build, options, result) => {
-  const { buildId, buildRoot, cache } = build.context;
+  const { initialOptions, context, esbuild } = build;
+  const { buildId, buildRoot } = context;
   const log = getLogger(build);
 
-  if (options.inject === true || typeof options.inject === 'string') {
+  if (options.inject) {
+    const {
+      charset = 'utf8',
+      outdir,
+      sourceRoot,
+      sourcemap,
+      sourcesContent,
+      entryPoints,
+      minify,
+      logLevel,
+      format,
+      target,
+      external,
+      publicPath
+    } = initialOptions;
+    const absOutdir = path.isAbsolute(outdir) ? outdir : path.resolve(buildRoot, outdir);
+
+    const transformCss = async (css) => {
+      const r = await esbuild.transform(css, {
+        charset,
+        loader: 'css',
+        sourcemap: false,
+        minify: true,
+        logLevel,
+        format,
+        target
+      });
+      return r.code;
+    };
+
+    const buildJs = async (entryName, entryPath, jsCode) => {
+      const r = (p) => `./${path.relative(absOutdir, p).split(path.sep).join(path.posix.sep)}`;
+      const imports = `import "${r(entryPath)}";`;
+      if ((sourceRoot || publicPath) && sourcemap) {
+        const sp = sourceRoot || publicPath;
+        const fixedSourceRoot = sp.endsWith('/') ? sp : sp + '/';
+        const entryContent = await readFile(entryPath, { encoding: 'utf8' });
+        await writeFile(
+          entryPath,
+          entryContent.replace(`sourceMappingURL=${fixedSourceRoot}`, 'sourceMappingURL='),
+          { encoding: 'utf8' }
+        );
+      }
+      const tmpJsCode = `${imports}\n${jsCode}`;
+      const tmpJsPath = path.resolve(absOutdir, '.build.inject.js');
+      await writeFile(tmpJsPath, tmpJsCode, { encoding: 'utf8' });
+      await esbuild.build({
+        charset,
+        absWorkingDir: absOutdir,
+        write: true,
+        allowOverwrite: true,
+        treeShaking: false,
+        logLevel,
+        format,
+        target,
+        minify,
+        sourceRoot,
+        publicPath,
+        sourcemap,
+        sourcesContent,
+        entryPoints: {
+          [entryName]: tmpJsPath
+        },
+        outdir: absOutdir,
+        bundle: true,
+        external
+      });
+      await unlink(tmpJsPath);
+    };
+
     const cssContents = [];
 
-    const { entryPoints } = build.initialOptions;
     let entriesArray = [];
     if (Array.isArray(entryPoints)) {
       entriesArray = [...entryPoints];
@@ -296,35 +370,35 @@ const onEnd = async (build, options, result) => {
 
     log('entries:', entries);
 
-    let injectTo = null;
+    let entryToInject = null;
     const outputs = Object.keys(result.metafile?.outputs ?? []);
 
     await Promise.all(
       outputs.map(async (f) => {
         if (
-          !injectTo &&
+          !entryToInject &&
           result.metafile.outputs[f].entryPoint &&
           entries.includes(path.resolve(buildRoot, result.metafile.outputs[f].entryPoint)) &&
-          path.extname(f) === '.js'
+          ['.js', '.mjs', '.cjs'].includes(path.extname(f))
         ) {
-          injectTo = path.resolve(buildRoot, f);
+          entryToInject = path.resolve(buildRoot, f);
         }
         if (path.extname(f) === '.css') {
           const fullpath = path.resolve(buildRoot, f);
           const css = await readFile(fullpath, { encoding: 'utf8' });
-          cssContents.push(`${css}`);
+          const transformed = await transformCss(css);
+          cssContents.push(`${transformed}`);
         }
       })
     );
 
-    log('inject css to', path.relative(buildRoot, injectTo));
-
-    if (injectTo && cssContents.length) {
-      const allCss = cssContents.join('');
+    if (entryToInject && cssContents.length) {
+      log('inject css to', path.relative(buildRoot, entryToInject));
+      const entryName = path.basename(entryToInject, path.extname(entryToInject));
+      const allCss = cssContents.join('\n');
       const container = typeof options.inject === 'string' ? options.inject : 'head';
       const injectedCode = buildInjectCode(container, allCss, buildId, options);
-
-      await appendFile(injectTo, injectedCode, { encoding: 'utf-8' });
+      await buildJs(entryName, entryToInject, injectedCode);
     }
   }
 

lib/utils.js

@@ -36,10 +36,8 @@ const buildInjectCode = (injectToSelector = 'head', css, digest, options) => {
   if (typeof options.inject === 'function') {
     return `
 (function(){
-  const css = \`${css}\`;
-  const digest = \`${digest}\`;
   const doInject = () => {
-    ${options.inject(css, digest)};
+    ${options.inject(css, digest)}
     delete window.__inject_${digest}__;
   };
   window.__inject_${digest}__ = doInject;

package.json

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

test/test.js

@@ -78,9 +78,9 @@ fse.emptyDirSync('./dist');
     },
     entryNames: '[name]-[hash]',
     format: 'esm',
-    target: ['es2020'],
+    target: ['esnext'],
     bundle: true,
-    minify: false,
+    minify: true,
     sourcemap: true,
     publicPath: 'https://my.domain/static/',
     external: ['react', 'react-dom'],
@@ -97,11 +97,46 @@ fse.emptyDirSync('./dist');
   });
   console.log('[test][esbuild:bundle:v2] done, please check `test/dist/bundle-v2-inject`', '\n');
 
+  await esbuild.build({
+    entryPoints: {
+      ['custom-entry-name']: 'app.jsx'
+    },
+    entryNames: '[name]-[hash]',
+    format: 'esm',
+    target: ['esnext'],
+    bundle: true,
+    minify: false,
+    sourcemap: true,
+    publicPath: 'https://my.domain/static/',
+    external: ['react', 'react-dom'],
+    outdir: './dist/bundle-v2-custom-inject',
+    write: true,
+    loader: {
+      '.jpg': 'dataurl'
+    },
+    plugins: [cssModulesPlugin({ 
+      v2: true,
+      inject: (css, digest) => {
+        return `
+          const styleId = 'style_${digest}';
+          if (!document.getElementById(styleId)) {
+            const styleEle = document.createElement('style');
+            styleEle.id = styleId;
+            styleEle.textContent = \`${css.replace(/\n/g, '')}\`;
+            document.head.appendChild(styleEle);
+          }
+        `
+      } 
+    })],
+    logLevel: 'debug'
+  });
+  console.log('[test][esbuild:bundle:v2] done, please check `test/dist/bundle-v2-custom-inject`', '\n');
+
   await esbuild.build({
     entryPoints: ['app.jsx'],
     entryNames: '[name]-[hash]',
     format: 'esm',
-    target: ['es2020'],
+    target: ['esnext'],
     bundle: true,
     minify: false,
     sourcemap: true,