esbuild as peer denpendency

Author: indooorsman

index.js

@@ -15,37 +15,46 @@ const cssHandler = require('@parcel/css');
 const camelCase = require('lodash/camelCase');
 
 const getAbsoluteUrl = (resolveDir, url) => {
-  return path.resolve(resolveDir, url.replace(/\"/g, '').replace(/\'/g, ''));
+  const pureUrl = url.replace(/\"/g, '').replace(/\'/g, '');
+  if (path.isAbsolute(pureUrl) || pureUrl.startsWith('http')) {
+    return pureUrl;
+  }
+  return path.resolve(resolveDir, pureUrl);
 };
 
 const buildCssModulesJS2 = async (cssFullPath) => {
   const resolveDir = path.dirname(cssFullPath);
-  const cssContent = await readFile(cssFullPath);
-  const transformConfig = {
-    filename: path.basename(cssFullPath),
-    code: cssContent,
+
+  /**
+   * @type {import('@parcel/css').BundleOptions}
+   */
+  const bundleConfig = {
+    filename: cssFullPath,
     minify: false,
     sourceMap: true,
     cssModules: true,
     analyzeDependencies: true
   };
-  const { code, exports, map, dependencies } = cssHandler.transform(transformConfig);
+  const { code, exports = {}, map, dependencies = [] } = cssHandler.bundle(bundleConfig);
+
   const cssModulesJSON = {};
   Object.keys(exports).forEach((originClass) => {
     cssModulesJSON[camelCase(originClass)] = exports[originClass].name;
   });
-  const classNames = JSON.stringify(cssModulesJSON);
-  const jsContent = `
-    export default ${classNames};    
-  `;
-  const urls = dependencies?.filter((d) => d.type === 'url') ?? [];
+  const classNames = JSON.stringify(cssModulesJSON, null, 2);
+
+  const urls = dependencies.filter((d) => d.type === 'url');
+
   let finalCssContent = code.toString('utf-8');
   urls.forEach(({ url, placeholder }) => {
     finalCssContent = finalCssContent.replace(
       new RegExp(`${placeholder}`, 'g'),
       getAbsoluteUrl(resolveDir, url)
     );
   });
+
+  const jsContent = `export default ${classNames};`;
+
   if (map) {
     finalCssContent += `\n/*# sourceMappingURL=data:application/json;base64,${map.toString(
       'base64'
@@ -155,7 +164,8 @@ const CssModulesPlugin = (options = {}) => {
             .join(path.posix.sep)}";\n${jsContent}`;
 
           return {
-            contents: jsFileContent
+            contents: jsFileContent,
+            loader: 'js'
           };
         });
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "esbuild-css-modules-plugin",
-  "version": "2.1.2",
+  "version": "2.1.3",
   "description": "A esbuild plugin to bundle css modules into js(x)/ts(x).",
   "main": "index.js",
   "keywords": [
@@ -18,15 +18,15 @@
     "test": "cd ./test && node test.js",
     "pub": "npm_config_registry=\"https://registry.npmjs.org/\" npm publish --userconfig ~/.pubnpmrc  --access public"
   },
-  "devDependencies": {
-    "esbuild": "^0.14.11"
+  "peerDependencies": {
+    "esbuild": "^0.14.21"
   },
   "dependencies": {
-    "@parcel/css": "^1.0.1",
+    "@parcel/css": "^1.3.1",
     "fs-extra": "^9.1.0",
     "lodash": "^4.17.21",
-    "postcss": "^8.2.7",
-    "postcss-modules": "^4.0.0",
+    "postcss": "^8.4.6",
+    "postcss-modules": "^4.3.0",
     "tmp": "^0.2.1"
   }
 }

test/components/hello.world.jsx

@@ -1,19 +1,15 @@
 import React from 'react';
 import styles, * as appCssModules from '../styles/app.modules.css';
-import styles2, * as h from '../styles/deep/styles/hello.modules.css';
 
 export const HelloWorld = () => (
   <>
     <h3 className={styles.helloWorld}>Hello World!</h3>
-    <p className={styles2.helloText}>hi...</p>
+    <p className={styles.helloText}>hi...</p>
     <pre>
       <code>${appCssModules?.digest ?? '// n/a'}</code>
     </pre>
     <pre>
-      <code>${h?.digest ?? '// n/a'}</code>
-    </pre>
-    <pre>
-      <code>${h?.css ?? '// n/a'}</code>
+      <code>${appCssModules?.css ?? '// n/a'}</code>
     </pre>
   </>
 );

test/styles/app.modules.css

@@ -1,10 +1,12 @@
+@import url(./deep/styles/hello.modules.css);
+
 .hello-world {
   color: red;
   background: url("../components/world.jpg");
 }
 
 .hello-world:hover {
-  background-image: url(../components//world2.jpg);
+  background-image: url(../components/world2.jpg);
 }
 
 .some-other-selector {