Initial (Less) CSS Module support

[mikekasprzak]

This patch adds support for Less flavored CSS Module support via ESBuild's CSS Module support. Support is extremely barebones, just enough to get it working.

How to use it

Create a file with a .module.less file extension.

/* style.module.less */
/* these names will change */
.someLocal {
    display: block;
}

:local .some-explicit-local {
    display: inline;
}

/* this will not change */
:global .some-global {
    font-weight: bold;
}

You can now import the .less file as if it was a javascript module.

import styles from './style.module.less';             // import all locals
import { someLocal } from './style.module.less';      // import specific locals

console.log("styles =", styles);

The values will be mangled names used by the bundler/minifier.

styles = {
    "someLocal": "style_module_someLocal",
    "some-explicit-local": "style_module_some-explicit-local"
}

The resulting bundled CSS output will match accordingly.

/* style.module.css */
.style_module_someLocal {
    display: block;
}

.style_module_some-explicit-local {
    display: inline;
}

.some-global {
    font-weight: bold;
}

And now ESBuild can help you both avoid name conflicts, and minify CSS class names.

VSCode & Typescript tip

To stop the Typescript compiler from complaining, you can add this to any .d.ts file.

declare module "*.module.less";

[iam-medvedev]

Thank you!

[github-actions[bot]]

:tada: This PR is included in version 1.3.0 :tada:

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot :package::rocket: