# esbuild-style-plugin

> Another esbuild plugin for your styling with CSS,SASS,LESS,STYLUS

Latest version **1.6.3** (published 2023-11-05) · ISC license · 0 weekly downloads

## Install

```sh
npm install esbuild-style-plugin
pnpm add esbuild-style-plugin
yarn add esbuild-style-plugin
bun add esbuild-style-plugin
```

## Health

**Score 30/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.6.3 |
| Published | 2023-11-05 |
| First published | 2021-09-27 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 6 |
| Unpacked size | 23.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 56 |
| Author | g45t345rt |
| Maintainers | g45t345rt |

## Links

- npm: https://www.npmjs.com/package/esbuild-style-plugin
- Repository: https://github.com/g45t345rt/esbuild-style-plugin
- Homepage: https://github.com/g45t345rt/esbuild-style-plugin#readme
- Issues: https://github.com/g45t345rt/esbuild-style-plugin/issues
- npm.io page: https://npm.io/package/esbuild-style-plugin

## Dependencies (6)

- [glob](https://npm.io/package/glob.md) ^10.2.2
- [postcss](https://npm.io/package/postcss.md) ^8.4.31
- [@types/less](https://npm.io/package/@types/less.md) ^3.0.3
- [@types/sass](https://npm.io/package/@types/sass.md) ^1.43.1
- [@types/stylus](https://npm.io/package/@types/stylus.md) ^0.48.38
- [postcss-modules](https://npm.io/package/postcss-modules.md) ^6.0.0

## Recent versions

- 1.6.3 (latest) — 2023-11-05
- 1.6.2 — 2023-05-02
- 1.6.1 — 2022-12-24
- 1.6.0 — 2022-05-15
- 1.5.1 — 2022-05-02
- 1.5.0 — 2022-04-25
- 1.4.1 — 2022-03-29
- 1.4.0 — 2022-03-27
- 1.3.1 — 2022-03-26
- 1.3.0 — 2022-02-18
- 1.2.0 — 2022-02-15
- 1.1.2 — 2021-11-24
- 1.1.1 — 2021-11-13
- 1.1.0 — 2021-11-09
- 1.0.13 — 2021-10-01
- … 13 more at https://npm.io/package/esbuild-style-plugin/versions

## README

# esbuild-style-plugin

Another esbuild plugin for your styling.

- Supports multiple preprocessors like SASS, STYLUS, LESS
- Dynamic preprocessors import - no preprocessors installed by default
- Handles css modules automatically with PostCSS
- You can include postcss plugins (autoprefixer, preset-env)
- Can read `postcss.config.js` config file - if path is provided in `postcssConfigFile` option
- Support postcss/tailwindcss dependencies for watching files - <https://github.com/postcss/postcss/blob/main/docs/guidelines/plugin.md#3-dependencies>
- SSR / Server side rendering friendly :)
- Includes d.ts files in dist
- Build format for both cjs and esm
- Support esbuild watch
- Written in Typescript with maintainable code

## NPM package

`npm i -D esbuild-style-plugin`

## Using the package

Look at the test files or here is a basic example

```ts
import stylePlugin from 'esbuild-style-plugin'
//const stylePlugin = require('esbuild-style-plugin')

esbuild.build({
  plugins: [
    stylePlugin()
  ]
})
```

### Plugin options

- `extract` default to true
- `cssModulesMatch` match `.module.` by default
- `cssModulesOptions` <https://github.com/madyankin/postcss-modules#usage>
- `renderOptions`
  - `sassOptions` <https://sass-lang.com/documentation/js-api#options>
  - `lessOptions` <https://lesscss.org/usage/#less-options>
  - `stylusOptions` <https://stylus-lang.com/docs/js.html>
- `postcss`
  - `plugins` array of postcss accepted plugins
  - `parser` | `syntax` parse source css - use with postcss-scss
- `postcssConfigFile` absolute path to `postcss.config.js` or `true` for using root folder path

## Preprocessor

The plugin does not come with all preprocessor installed since you might not need all of them.

Install the ones you need!

- SASS `npm i -D sass`
- LESS `npm i -D less`
- STYLUS `npm i -D stylus`

## CSS Modules

### Server side rendering

A specific use case that this plugin covers is SSR.
Using `extract: false` will not process css on server side but will keep css mapping for css modules.

## PostCSS

The plugin is using PostCSS to handle css modules files.
You can include any other plugins with the `postcss` option.

### CSSNano

Do not use cssnano plugin. It won't work and if it did it minifies all files seperatly (slow not efficient).
Just let esbuild minify and do his job.

### Preprocessors import typings

If you want to be able to use `import styles from 'styles.module.sass'` without any errors
Just add `esbuild-style-plugin` to your types in `tsconfig.json`

![tsconfig.json import types](import_types.jpg)

---
_Source: https://npm.io/package/esbuild-style-plugin · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._