esbuild-css-modules-plugin - npm Package Compare versions

Comparing version 2.2.11 to 2.2.12

changelog.md

@@ -0,1 +1,6 @@
+## V2.2.12
+- **[v2]** only use cache in watch mode
+- **[v2]** refine inject logic
+- **[v2]** add example of custom inject to tests
+
 ## V2.2.11
@@ -2,0 +7,0 @@ - replace `process.memoryUsage.rss()` to `process.memoryUsage().rss` to support Nodejs<15.6.0

lib/plugin.js

 const path = require('path');
 const { createHash } = require('crypto');
-const { readFile, appendFile } = require('fs/promises');
+const { readFile, writeFile, unlink, appendFile } = require('fs/promises');
 const {
@@ -39,4 +39,4 @@ getLogger,
     code: originCss,
-    minify: true,
-    sourceMap: !options.inject,
+    minify: false,
+    sourceMap: true,
     cssModules: true,
@@ -183,4 +183,6 @@ analyzeDependencies: false
 
-  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) {
@@ -213,5 +215,8 @@ log('return build cache for', rpath);
   };
-  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;
@@ -281,9 +286,79 @@ };
 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 (sourcemap === 'external') {
+        await appendFile(entryPath, `\n//# sourceMappingURL=${r(entryPath)}.map`, { encoding: 'utf8' });
+      } else if (publicPath && sourcemap) {
+        const fixedPublicPath = publicPath.endsWith('/') ? publicPath : publicPath + '/';
+        const entryContent = await readFile(entryPath, { encoding: 'utf8' });
+        await writeFile(
+          entryPath,
+          entryContent.replace(`sourceMappingURL=${fixedPublicPath}`, '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 = [];
@@ -303,3 +378,3 @@ if (Array.isArray(entryPoints)) {
 
-    let injectTo = null;
+    let entryToInject = null;
     const outputs = Object.keys(result.metafile?.outputs ?? []);
@@ -310,8 +385,8 @@
         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);
         }
@@ -321,3 +396,4 @@ if (path.extname(f) === '.css') {
           const css = await readFile(fullpath, { encoding: 'utf8' });
-          cssContents.push(`${css}`);
+          const transformed = await transformCss(css);
+          cssContents.push(`${transformed}`);
         }
@@ -327,10 +403,9 @@ })
 
-    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);
     }
@@ -337,0 +412,0 @@ }

lib/utils.js

@@ -39,6 +39,4 @@ const path = require('path');
 (function(){
-  const css = \`${css}\`;
-  const digest = \`${digest}\`;
   const doInject = () => {
-    ${options.inject(css, digest)};
+    ${options.inject(css, digest)}
     delete window.__inject_${digest}__;
@@ -45,0 +43,0 @@ };

package.json

 {
   "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).",
@@ -5,0 +5,0 @@ "main": "index.js",

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

32483

increased by7.73%

Lines of code

854

increased by8.93%

No dependency changes