esbuild-plugin-less


esbuild plugin for LESS files.

Supports all LESS features, including imports, variables, mixins, and more.

Features

- 💫 Support for all LESS.js features and options
- 🎨 CSS Modules support with .module.less files
- 🔄 Watch mode support with automatic rebuilds
- 🎯 Custom file filtering options
- 📝 Written in TypeScript

Installation

``sh


Using bun

$ bun add -D esbuild-plugin-less

Using yarn

$ yarn add -D esbuild-plugin-less

Using pnpm

$ pnpm add -D esbuild-plugin-less

Using npm

$ npm install --save-dev esbuild-plugin-less
`

Basic Usage

`ts
import { build } from 'esbuild';
import { lessLoader } from 'esbuild-plugin-less';

build({
entryPoints: ['src/index.ts'],
bundle: true,
outdir: 'dist',
plugins: [lessLoader()], // That's it!
loader: {
'.ts': 'ts',
},
});
`

Advanced Configuration

$3

`ts
import { build } from 'esbuild';
import { lessLoader } from 'esbuild-plugin-less';

build({
entryPoints: ['src/index.ts'],
bundle: true,
outdir: 'dist',
plugins: [
lessLoader({
// LESS.js options
math: 'always',
globalVars: {
primaryColor: '#ff0000',
},
paths: ['./src/styles'],
javascriptEnabled: true,
}),
],
});
`

$3

`ts
import { build } from 'esbuild';
import { lessLoader } from 'esbuild-plugin-less';

build({
entryPoints: ['src/index.ts'],
bundle: true,
outdir: 'dist',
plugins: [
lessLoader(
{}, // LESS options (empty in this example)
{
// Loader options
filter: /\._?less$/, // Custom file filter
inline: false, // Control if LESS files should be inlined as strings
},
),
],
});
`

CSS Modules Support

The plugin automatically handles .module.less files as CSS Modules. This enables local scoping of styles and generates unique class names.

`less
// styles.module.less
.button {
color: blue;
}
`

`ts
// Component.ts
import styles from './styles.module.less';
element.className = styles.button; // Will use the generated unique class name
`

Configuration Options

$3

The plugin accepts all valid options from LESS.js. Here are some commonly used options:

For a complete list of LESS options, see the LESS documentation.

$3

| Option | Type | Default | Description |
| -------- | --------- | ----------- | ------------------------------------------ |
| filter | RegExp | /\.less$/ | Custom filter for processing files |
| inline | boolean | false | Import LESS files as strings in TypeScript |

License

esbuild-plugin-less` is WTFPL licensed.