Skip to content

Commit

Permalink
chore: update esbuild (#149)
Browse files Browse the repository at this point in the history
  • Loading branch information
iam-medvedev authored Feb 8, 2025
1 parent 9a88035 commit 24ce811
Show file tree
Hide file tree
Showing 3 changed files with 498 additions and 131 deletions.
118 changes: 104 additions & 14 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,49 +1,139 @@
# `esbuild-plugin-less`

[![License: WTFPL](https://img.shields.io/badge/License-WTFPL-brightgreen.svg)](http://www.wtfpl.net/about/)
[![TypeScript](https://img.shields.io/badge/%3C%2F%3E-TypeScript-%230074c1.svg)](http://www.typescriptlang.org/)
[![code style: prettier](https://img.shields.io/badge/code_style-prettier-f8bc45.svg)](https://github.com/prettier/prettier)
[![npm version](https://badge.fury.io/js/esbuild-plugin-less.svg)](https://www.npmjs.com/package/esbuild-plugin-less)
[![npm version](https://img.shields.io/npm/dt/esbuild-plugin-less.svg)](https://www.npmjs.com/package/esbuild-plugin-less)
[![npm downloads](https://img.shields.io/npm/dt/esbuild-plugin-less.svg)](https://www.npmjs.com/package/esbuild-plugin-less)
[![libraries.io](https://img.shields.io/librariesio/release/npm/esbuild-plugin-less)](https://libraries.io/github/iam-medvedev/esbuild-plugin-less)
[![FOSSA Status](https://app.fossa.com/api/projects/git%2Bgithub.com%2Fiam-medvedev%2Fesbuild-plugin-less.svg?type=shield)](https://app.fossa.com/projects/git%2Bgithub.com%2Fiam-medvedev%2Fesbuild-plugin-less?ref=badge_shield)
[![semantic-release](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg)](https://github.com/semantic-release/semantic-release)

# esbuild-plugin-less
[esbuild](https://github.com/evanw/esbuild) plugin for [LESS](https://lesscss.org/) files.

Supports all LESS features, including [imports](https://lesscss.org/#importing), [variables](https://lesscss.org/#variables), [mixins](https://lesscss.org/#mixins), and more.

## Features

[esbuild](https://github.com/evanw/esbuild) plugin for less files.
- 💫 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
yarn add esbuild-plugin-less -D
```
# Using bun
$ bun add -D esbuild-plugin-less

## Usage
# Using yarn
$ yarn add -D esbuild-plugin-less

You can see the example [here](./example).
# 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: [path.resolve(__dirname, 'index.ts')],
entryPoints: ['src/index.ts'],
bundle: true,
outdir: path.resolve(__dirname, 'output'),
plugins: [lessLoader()], // Just plug in
outdir: 'dist',
plugins: [lessLoader()], // That's it!
loader: {
'.ts': 'ts',
},
});
```

## Configuration
## Advanced Configuration

### With LESS Options

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

### With Loader Options

```ts
lessLoader(lessOptions: Less.Options = {}, loaderOptions: LoaderOptions = {})
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;
}
```

- `options` — Accepts all valid options from less.js. You can find a complete list of options [here](http://lesscss.org/usage/#less-options).
- `loaderOptions` — Options for the loader. Supports custom esbuild [filter](https://esbuild.github.io/plugins/#filters).
```ts
// 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](http://lesscss.org/usage/#less-options).

### 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

Expand Down
8 changes: 4 additions & 4 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -48,25 +48,25 @@
"@semantic-release/github": "11.0.1",
"@semantic-release/npm": "12.0.1",
"@semantic-release/release-notes-generator": "14.0.3",
"@types/node": "22.13.0",
"@types/node": "22.13.1",
"@vitest/coverage-v8": "3.0.5",
"cz-conventional-changelog": "3.3.0",
"esbuild": "0.24.2",
"esbuild": "0.25.0",
"git-cz": "4.9.0",
"husky": "9.1.7",
"lint-staged": "15.4.3",
"prettier": "3.4.2",
"semantic-release": "24.2.1",
"tsx": "4.19.2",
"typescript": "5.7.3",
"vite": "6.0.11",
"vite": "6.1.0",
"vitest": "3.0.5"
},
"peerDependencies": {
"esbuild": ">=0.14.0 <0.25.0"
},
"resolutions": {
"esbuild": "0.24.2"
"esbuild": "0.25.0"
},
"dependencies": {
"@types/less": "^3.0.8",
Expand Down
Loading

0 comments on commit 24ce811

Please sign in to comment.