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

Comparing version 2.0.3 to 2.0.4

index.js

@@ -14,3 +14,22 @@ const path = require('path');
 const pluginNamespace = 'esbuild-css-modules-plugin-namespace';
+const csstree = require('css-tree');
 
+const transformUrlsInCss = (cssContent, fullPath) => {
+  const resolveDir = path.dirname(fullPath);
+  const ast = csstree.parse(cssContent);
+  csstree.walk(ast, {
+    visit: 'Url',
+    enter: (node) => {
+      const originPath = node.value.value;
+      const absolutePath = path.resolve(
+        resolveDir,
+        originPath.replaceAll(`"`, '').replaceAll(`'`, '')
+      );
+      node.value.value = JSON.stringify(absolutePath);
+    }
+  });
+  const transformedCssContent = csstree.generate(ast);
+  return transformedCssContent;
+};
+
 const buildCssModulesJS = async (cssFullPath, options) => {
@@ -76,6 +95,6 @@ const {
 
-  return {
+  return Promise.resolve({
     jsContent,
     cssContent: result.css
-  };
+  });
 };
@@ -98,15 +117,12 @@
       if (useV2) {
-        build.onResolve({ filter: /\.modules?\.css$/, namespace: 'file' }, (args) => {
-          const fullPath = path.resolve(args.resolveDir, args.path);
-          const tmpCssFile = fullPath.replace(/\.modules?\.css$/, '.modules_tmp_.css');
-          fs.writeFileSync(tmpCssFile, '/* placeholder */', { encoding: 'utf-8' });
-          outputLogs && console.log('[css-modules-puglin] create a placeholder file on resolve:', tmpCssFile);
-          return {
-            path: fullPath,
-            watchFiles: [fullPath]
-          };
-        });
         build.onLoad({ filter: /\.modules?\.css$/, namespace: 'file' }, async (args) => {
-          const { path: fullPath } = args;
-          const tmpCssFile = fullPath.replace(/\.modules?\.css$/, '.modules_tmp_.css');
+          const fullPath = args.path;
+          outputLogs && console.log(`[css-modules-plugin] ${fullPath}`);
+
+          const tmpCssFile = path.join(
+            tmp.dirSync().name,
+            fullPath.replace(/\.modules?\.css$/, '.modules_built.css')
+          );
+          fse.ensureDirSync(path.dirname(tmpCssFile));
+
           const { jsContent, cssContent } = await buildCssModulesJS(fullPath, {
@@ -116,16 +132,19 @@ ...options,
           });
-          fs.writeFileSync(tmpCssFile, cssContent, { encoding: 'utf-8' });
-  
-          const jsFileContent = `import "${tmpCssFile}";\n${jsContent}`;
+
+          const finalCss = transformUrlsInCss(cssContent, fullPath);
+          fs.writeFileSync(tmpCssFile, `${finalCss}`, { encoding: 'utf-8' });
+          outputLogs && console.log(`[css-modules-plugin] build css file`, tmpCssFile);
+
+          const jsFileContent = `import "${tmpCssFile}";${jsContent}`;
+
           tmpFiles.add(tmpCssFile);
-  
-          return {
+
+          return Promise.resolve({
             contents: jsFileContent,
-            loader: 'js',
             watchFiles: [fullPath]
-          };
+          });
         });
-  
+
         build.onEnd(() => {
-          outputLogs && console.log('[css-modules-plugin] Clean temp files...');
+          outputLogs && console.log('[css-modules-plugin] clean temp files...');
           tmpFiles.forEach((f) => {
@@ -147,10 +166,12 @@ try {
           const tmpFilePath = path.resolve(tmpDir, `${sourceBaseName}.css`);
-  
-          const {jsContent} = await buildCssModulesJS(sourceFullPath, options);
-  
-          await writeFile(`${tmpFilePath}.js`, jsContent, {encoding: 'utf-8'});
-  
+
+          const { jsContent } = await buildCssModulesJS(sourceFullPath, options);
+
+          await writeFile(`${tmpFilePath}.js`, jsContent, { encoding: 'utf-8' });
+
           if (outdir && !bundle) {
             const isOutdirAbsolute = path.isAbsolute(outdir);
-            const absoluteOutdir = isOutdirAbsolute ? outdir : path.resolve(args.resolveDir, outdir);
+            const absoluteOutdir = isOutdirAbsolute
+              ? outdir
+              : path.resolve(args.resolveDir, outdir);
             const isEntryAbsolute = path.isAbsolute(args.path);
@@ -167,8 +188,9 @@ const entryRelDir = isEntryAbsolute
             fse.copyFileSync(`${tmpFilePath}.js`, target);
-            outputLogs && console.log(
-              '[css-modules-plugin]',
-              path.relative(rootDir, sourceFullPath),
-              '=>',
-              path.relative(rootDir, target)
-            );
+            outputLogs &&
+              console.log(
+                '[css-modules-plugin]',
+                path.relative(rootDir, sourceFullPath),
+                '=>',
+                path.relative(rootDir, target)
+              );
           }
@@ -194,10 +216,11 @@ if (!bundle) {
         });
-  
+
         build.onLoad({ filter: /\.modules?\.css\.js$/, namespace: pluginNamespace }, (args) => {
           const { path: resolvePath, importer, fullPath } = args.pluginData.resolveArgs;
           const importerName = path.basename(importer);
-          outputLogs && console.log(
-            '[css-modules-plugin]',
-            `${resolvePath} => ${resolvePath}.js => ${importerName}`
-          );
+          outputLogs &&
+            console.log(
+              '[css-modules-plugin]',
+              `${resolvePath} => ${resolvePath}.js => ${importerName}`
+            );
           return { contents: args.pluginData.content, loader: 'js', watchFiles: [fullPath] };
@@ -204,0 +227,0 @@ });

package.json

 {
   "name": "esbuild-css-modules-plugin",
-  "version": "2.0.3",
+  "version": "2.0.4",
   "description": "A esbuild plugin to bundle css modules into js(x)/ts(x).",
@@ -19,2 +19,3 @@ "main": "index.js",
   "devDependencies": {
+    "css-tree": "^1.1.3",
     "esbuild": "^0.12.19"
@@ -21,0 +22,0 @@ },

test/test.js

@@ -53,2 +53,3 @@ const esbuild = require('esbuild');
     sourcemap: true,
+    publicPath: '/static/',
     external: ['react', 'react-dom'],
@@ -55,0 +56,0 @@ outdir: './dist/bundle-v2',

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

21305

increased by2.4%

Lines of code

284

increased by7.17%

Worsened metrics

Dev dependency count

2

increased by100%

No dependency changes