https://github.com/noyobo/esbuild-style-loader
A style loader for esbuild, support for CSS, SCSS, LESS, Stylus, and CSS Modules.
https://github.com/noyobo/esbuild-style-loader
esbuild esbuild-css-modules esbuild-loader esbuild-plugin
Last synced: about 1 year ago
JSON representation
A style loader for esbuild, support for CSS, SCSS, LESS, Stylus, and CSS Modules.
- Host: GitHub
- URL: https://github.com/noyobo/esbuild-style-loader
- Owner: noyobo
- Created: 2023-05-19T07:25:18.000Z (about 3 years ago)
- Default Branch: main
- Last Pushed: 2024-09-16T08:39:22.000Z (almost 2 years ago)
- Last Synced: 2024-09-22T19:47:30.014Z (over 1 year ago)
- Topics: esbuild, esbuild-css-modules, esbuild-loader, esbuild-plugin
- Language: TypeScript
- Homepage:
- Size: 662 KB
- Stars: 2
- Watchers: 2
- Forks: 0
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
Awesome Lists containing this project
README
# esbuild-style-loader
[](https://badge.fury.io/js/esbuild-style-loader)
[](https://opensource.org/licenses/MIT)
[](https://github.com/noyobo/esbuild-style-loader/issues)
[](#contributing)
[](https://www.npmjs.com/package/esbuild-style-loader)
[](https://codecov.io/gh/noyobo/esbuild-style-loader)
[](https://github.com/noyobo/esbuild-style-loader/actions/workflows/node.js.yml)
A style loader for esbuild, support for CSS, SCSS, LESS, Stylus, and CSS Modules.
## Features
- [x] Zero configuration
- [x] Support for CSS Modules
- [x] Support for LESS `builtin`
- [x] Support for CSS
- [x] Autoprefixer for CSS
- default: `ios >= 11, android >= 5, chrome >= 54`
- [x] Support sourceMap
- [x] Fast compiler engine by [lightningcss](https://lightningcss.dev/)
## Default behavior
The following rules enable css-modules
1. The file name ends with `/.modules?\.(css|less|scss|sass|styl)/`
2. The file query contains `modules` or `modules=true`
- Can be used with plugins [esbuild-plugin-auto-css-modules](https://www.npmjs.com/package/esbuild-plugin-auto-css-modules)
```ts
import styles from './style.css?modules';
import styles from './style.module.css';
import styles from './style.modules.css';
import styles from './style.less?modules';
import styles from './style.module.less';
import styles from './style.modules.less';
```
Normal CSS files are not treated as CSS Modules
```ts
import './style.css';
import './style.less';
import styles from './style.css';
import styles from './style.less';
```
## Usage
```ts
import { build } from 'esbuild';
import { styleLoader } from 'esbuild-style-loader';
const buildOptions = {
plugins: [
styleLoader({
filter: /\.(css|less|scss|sass|tyss)(\?.*)?$/,
/**
* Process file results from other plugins namespace
*/
namespace: ['native-component', 'file'],
/**
* The browser setting for lightningcss
*/
browsers: 'ios >= 11, android >= 5, chrome >= 54',
cssModules: {
pattern: process.env.CI_TEST === 'test' ? '[name]__[local]' : '[local]__[hash]',
},
/**
* The public path for absolute paths in css
*/
publicPath: __dirname,
}),
],
};
```
if you want to use absolute paths, you can specify the `publicPath` option
## TODO
- [ ] Support for Stylus
- [ ] Support for Sass
- [x] [sass](https://www.npmjs.com/package/sass)
- [ ] [node-sass](https://www.npmjs.com/package/node-sass)
- [ ] [sass-embedded](https://www.npmjs.com/package/sass-embedded)