How it works with cssModulesPlugin

[WangShuXian6]

Expected Behavior

...

cssModulesPlugin https://github.com/indooorsman/esbuild-css-modules-plugin#readme

When working with the cssModulesPlugin, the less files can be compiled into css files first and then handed over to the cssModulesPlugin for further processing

Actual Behavior

...

When working with the cssModulesPlugin, the cssModulesPlugin will not work

Steps to Reproduce the Problem

1. ...

const esbuild = require("esbuild");
const { nodeExternalsPlugin } = require("esbuild-node-externals");
const autoprefixer = require("autoprefixer");
const postCssPlugin = require("@deanc/esbuild-plugin-postcss");
const cssModulesPlugin = require("esbuild-css-modules-plugin");
const { lessLoader } = require("esbuild-plugin-less");

esbuild
  .build({
    //logLevel: 'silent',
    //absWorkingDir: basePath,
    entryPoints: ["./src/index.tsx"],
    entryNames: "[name]",
    //outfile: "./dist/index.js",
    outdir: "./dist/",
    bundle: true,
    //minify: true, //process.env.NODE_ENV === "production"
    platform: "browser", //"node", "browser"
    sourcemap: true, //process.env.NODE_ENV !== "production"
    external: ["react", "react-dom"],
    target: "es6",
    loader: { ".svg": "dataurl", ".png": "dataurl", ".jpg": "file" },
    plugins: [
      nodeExternalsPlugin(),

      
      cssModulesPlugin({ v2: false ,inject: true,}), //cssModulesPlugin 必须在 postCssPlugin 之前
      lessLoader(),
      postCssPlugin({
        plugins: [autoprefixer],
      }),
    ],
    inject: ["../../scripts/react-shim.js"],
  })
  .catch(() => process.exit(1));

2. ...

import styles from "./index.module.less";

export const Ui = () => {
  return <div className={styles.aa}>ui</div>;
};

3. ...

.aa{
    color: rgb(189, 29, 29);
    background-color: rgb(20, 221, 154);
}

Versions

• esbuild: 0.14.18
• esbuild-plugin-less: 1.1.6
• Platform:mac os x 11.6

[dim00n62]

Same issue for me @WangShuXian6 Did you find any solution to resolve the case LESS + CSS modules ? Thanks

[jeffdrumgod]

Sorry owner but to help @dim00n62 I switched to https://github.com/g45t345rt/esbuild-style-plugin until I update this specific package for less.

[dim00n62]

@jeffdrumgod also switched to esbuild-style-plugin and it helped, thanks!