esbuild-plugin-less

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

# 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

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

With LESS Options

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,
    }),
  ],
});

With Loader Options

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.

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

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

Configuration Options

LESS Options

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.

Loader Options

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.