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

Comparing version 1.0.6 to 1.1.0

index.js

@@ -12,10 +12,6 @@ const path = require('path');
 const ensureDir = util.promisify(fs.ensureDir);
-const pluginNamespace = 'esbuild-css-modules-plugin-namespace'
+const pluginNamespace = 'esbuild-css-modules-plugin-namespace';
 
 const buildCssModulesJS = async (cssFullPath, options) => {
-  const {
-    localsConvention = 'camelCaseOnly',
-    inject = true,
-    generateScopedName
-  } = options;
+  const { localsConvention = 'camelCaseOnly', inject = true, generateScopedName } = options;
 
@@ -42,15 +38,23 @@ const css = await readFile(cssFullPath);
   const digest = hash.copy().digest('hex');
-  return `
-const digest = '${digest}';
-const css = \`${result.css}\`;
-${inject && `
+
+  let injectedCode = '';
+  if (inject === true) {
+    injectedCode = `
 (function() {
   if (!document.getElementById(digest)) {
-    var ele = document.createElement('style');
-    ele.id = digest;
-    ele.textContent = css;
-    document.head.appendChild(ele);
+    var el = document.createElement('style');
+    el.id = digest;
+    el.textContent = css;
+    document.head.appendChild(el);
   }
 })();
-`}
+    `;
+  } else if (typeof inject === 'function') {
+    injectedCode = inject(css, digest);
+  }
+
+  return `
+const digest = '${digest}';
+const css = \`${result.css}\`;
+${injectedCode}
 export default ${classNames};
@@ -69,61 +73,72 @@ export { css, digest };
 
-      build.onResolve(
-        { filter: /\.modules?\.css$/, namespace: 'file' },
-        async (args) => {
-          const sourceFullPath = path.resolve(args.resolveDir, args.path);
+      build.onResolve({ filter: /\.modules?\.css$/, namespace: 'file' }, async (args) => {
+        const sourceFullPath = path.resolve(args.resolveDir, args.path);
 
-          const sourceExt = path.extname(sourceFullPath);
-          const sourceBaseName = path.basename(sourceFullPath, sourceExt);
-          const sourceDir = path.dirname(sourceFullPath);
-          const sourceRelDir = path.relative(path.dirname(rootDir), sourceDir);
+        const sourceExt = path.extname(sourceFullPath);
+        const sourceBaseName = path.basename(sourceFullPath, sourceExt);
+        const sourceDir = path.dirname(sourceFullPath);
+        const sourceRelDir = path.relative(path.dirname(rootDir), sourceDir);
 
-          const tmpDir = path.resolve(tmpDirPath, sourceRelDir);
-          await ensureDir(tmpDir);
-          const tmpFilePath = path.resolve(tmpDir, `${sourceBaseName}.css`);
+        const tmpDir = path.resolve(tmpDirPath, sourceRelDir);
+        await ensureDir(tmpDir);
+        const tmpFilePath = path.resolve(tmpDir, `${sourceBaseName}.css`);
 
-          const jsContent = await buildCssModulesJS(sourceFullPath, options);
+        const jsContent = await buildCssModulesJS(sourceFullPath, options);
 
-          await writeFile(`${tmpFilePath}.js`, jsContent);
+        await writeFile(`${tmpFilePath}.js`, jsContent);
 
-          if (outdir && !bundle) {
-            const isOutdirAbsolute = path.isAbsolute(outdir);
-            const absoluteOutdir = isOutdirAbsolute ? outdir : path.resolve(args.resolveDir, outdir);
-            const isEntryAbsolute = path.isAbsolute(args.path);
-            const entryRelDir = isEntryAbsolute ? path.dirname(path.relative(args.resolveDir, args.path)) : path.dirname(args.path);
+        if (outdir && !bundle) {
+          const isOutdirAbsolute = path.isAbsolute(outdir);
+          const absoluteOutdir = isOutdirAbsolute ? outdir : path.resolve(args.resolveDir, outdir);
+          const isEntryAbsolute = path.isAbsolute(args.path);
+          const entryRelDir = isEntryAbsolute
+            ? path.dirname(path.relative(args.resolveDir, args.path))
+            : path.dirname(args.path);
 
-            const targetSubpath = absoluteOutdir.indexOf(entryRelDir) === -1 ? path.join(entryRelDir, `${sourceBaseName}.css.js`) : `${sourceBaseName}.css.js`;
-            const target = path.resolve(absoluteOutdir, targetSubpath);
+          const targetSubpath =
+            absoluteOutdir.indexOf(entryRelDir) === -1
+              ? path.join(entryRelDir, `${sourceBaseName}.css.js`)
+              : `${sourceBaseName}.css.js`;
+          const target = path.resolve(absoluteOutdir, targetSubpath);
 
-            fs.ensureDirSync(path.dirname(target));
-            fs.copyFileSync(`${tmpFilePath}.js`, target);
+          fs.ensureDirSync(path.dirname(target));
+          fs.copyFileSync(`${tmpFilePath}.js`, target);
 
-            console.log('[esbuild-css-modules-plugin]', path.relative(rootDir, sourceFullPath), '=>', path.relative(rootDir, target));
-          }
+          console.log(
+            '[esbuild-css-modules-plugin]',
+            path.relative(rootDir, sourceFullPath),
+            '=>',
+            path.relative(rootDir, target)
+          );
+        }
 
-          if (!bundle) {
-            return { path: sourceFullPath, namespace: 'file' };
-          }
+        if (!bundle) {
+          return { path: sourceFullPath, namespace: 'file' };
+        }
 
-          return {
-            path: `${tmpFilePath}.js`,
-            namespace: pluginNamespace,
-            pluginData: {
-              content: jsContent,
-              resolveArgs: {
-                path: args.path,
-                importer: args.importer,
-                namespace: args.namespace,
-                resolveDir: args.resolveDir,
-                kind: args.kind
-              }
+        return {
+          path: `${tmpFilePath}.js`,
+          namespace: pluginNamespace,
+          pluginData: {
+            content: jsContent,
+            resolveArgs: {
+              path: args.path,
+              fullPath: sourceFullPath,
+              importer: args.importer,
+              namespace: args.namespace,
+              resolveDir: args.resolveDir,
+              kind: args.kind
             }
-          };
-        }
-      );
+          }
+        };
+      });
 
       build.onLoad({ filter: /\.modules?\.css\.js$/, namespace: pluginNamespace }, (args) => {
-        const {path: resolvePath, importer} = args.pluginData.resolveArgs;
+        const { path: resolvePath, importer, fullPath } = args.pluginData.resolveArgs;
         const importerName = path.basename(importer);
-        console.log('[esbuild-css-modules-plugin]', `${resolvePath} => ${resolvePath}.js => ${importerName}`);
-        return { contents: args.pluginData.content, loader: 'js' };
+        console.log(
+          '[esbuild-css-modules-plugin]',
+          `${resolvePath} => ${resolvePath}.js => ${importerName}`
+        );
+        return { contents: args.pluginData.content, loader: 'js', watchFiles: [fullPath] };
       });
@@ -130,0 +145,0 @@ }

package.json

 {
   "name": "esbuild-css-modules-plugin",
-  "version": "1.0.6",
+  "version": "1.1.0",
   "description": "A esbuild plugin to bundle css modules into js(x)/ts(x).",
@@ -19,3 +19,3 @@ "main": "index.js",
   "devDependencies": {
-    "esbuild": "^0.11.19"
+    "esbuild": "^0.12.19"
   },
@@ -22,0 +22,0 @@ "dependencies": {

readme.md

@@ -32,4 +32,12 @@ # esbuild-css-modules-plugin
     cssModulesPlugin({
-      inject: true, // optional. set to false to not inject generated CSS into <head>, default is true
+      // optional. set to false to not inject generated CSS into <head>, default is true. 
+      // could be a function with params content & digest (return a string of js code to inject to page), 
+      // e.g.
+      // ```
+      // inject: (cssContent, digest) => `console.log("${cssContent}", "${digest}")`
+      // ```
+      inject: true,
+
       localsConvention: 'camelCaseOnly', // optional. value could be one of 'camelCaseOnly', 'camelCase', 'dashes', 'dashesOnly', default is 'camelCaseOnly'
+      
       generateScopedName: (name, filename, css) => string // optional. 
@@ -36,0 +44,0 @@ })

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

9538

increased by5.85%

Lines of code

198

increased by7.03%

Number of lines in readme file

47

increased by20.51%

No dependency changes