# @rsbuild/plugin-stylus

> Stylus plugin for Rsbuild

Latest version **2.0.1** (published 2026-05-28) · MIT license · 0 weekly downloads

## Install

```sh
npm install @rsbuild/plugin-stylus
pnpm add @rsbuild/plugin-stylus
yarn add @rsbuild/plugin-stylus
bun add @rsbuild/plugin-stylus
```

## Health

**Score 70/100 (B)** — status: active.

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

Warnings: low downloads.

## Facts

| | |
|---|---|
| Version | 2.0.1 |
| Published | 2026-05-28 |
| First published | 2023-10-17 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM |
| Dependencies | 3 |
| Unpacked size | 9.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Provenance | attested (GitHub Actions) |
| GitHub stars | 2 |
| Maintainers | chenjiahan, hardfist |

## Links

- npm: https://www.npmjs.com/package/@rsbuild/plugin-stylus
- Repository: https://github.com/rstackjs/rsbuild-plugin-stylus
- npm.io page: https://npm.io/package/@rsbuild/plugin-stylus

## Dependencies (3)

- [stylus](https://npm.io/package/stylus.md) 0.64.0
- [deepmerge](https://npm.io/package/deepmerge.md) ^4.3.1
- [stylus-loader](https://npm.io/package/stylus-loader.md) 8.1.3

## Recent versions

- 2.0.1 (latest) — 2026-05-28
- 2.0.0-alpha.3 (alpha) — 2026-01-26
- 1.1.0-beta.3 (beta) — 2025-03-26
- 0.0.0-next-20240729023126 (next) — 2024-07-29
- 0.0.0-nightly-20240114070311 (nightly) — 2024-01-14
- 2.0.0 — 2026-05-21
- 1.3.3 — 2026-05-21
- 1.3.2 — 2026-04-28
- 1.3.1 — 2026-03-11
- 1.3.0 — 2026-01-27
- 1.2.1 — 2026-01-15
- 1.2.0 — 2025-08-26
- 1.1.3 — 2025-08-04
- 1.1.2 — 2025-07-07
- 1.1.1 — 2025-03-29
- … 223 more at https://npm.io/package/@rsbuild/plugin-stylus/versions

## README

# @rsbuild/plugin-stylus

Stylus is an expressive, dynamic, and robust CSS preprocessor. With this plugin, you can use Stylus as the CSS preprocessor in Rsbuild.

<p>
  <a href="https://npmjs.com/package/@rsbuild/plugin-stylus">
   <img src="https://img.shields.io/npm/v/@rsbuild/plugin-stylus?style=flat-square&colorA=564341&colorB=EDED91" alt="npm version" />
  </a>
  <img src="https://img.shields.io/badge/License-MIT-blue.svg?style=flat-square&colorA=564341&colorB=EDED91" alt="license" />
  <a href="https://npmcharts.com/compare/@rsbuild/plugin-stylus?minimal=true"><img src="https://img.shields.io/npm/dm/@rsbuild/plugin-stylus.svg?style=flat-square&colorA=564341&colorB=EDED91" alt="downloads" /></a>
</p>

## Usage

Install:

```bash
npm add @rsbuild/plugin-stylus -D
```

Add plugin to your `rsbuild.config.ts`:

```ts
// rsbuild.config.ts
import { pluginStylus } from '@rsbuild/plugin-stylus';

export default {
  plugins: [pluginStylus()],
};
```

After registering the plugin, you can import `*.styl`, `*.stylus`, `*.module.styl`, or `*.module.stylus` files without adding other configs.

```styl
// normalize.styl
body
  color #000
  font 14px Arial, sans-serif
```

```styl
// title.module.styl
.title
  font-size 14px
```

```js
// index.js
import './normalize.styl';
import style from './title.module.styl';

console.log(style.title);
```

## Options

### stylusOptions

- Type:

```ts
type StylusOptions = {
  use?: string[];
  define?: [string, unknown, boolean?][];
  include?: string[];
  includeCSS?: boolean;
  import?: string[];
  resolveURL?: boolean;
  lineNumbers?: boolean;
  hoistAtrules?: boolean;
};
```

- Default: `undefined`

These options are passed to Stylus. For details, see the [Stylus documentation](https://stylus-lang.com/docs/js).

```ts
pluginStylus({
  stylusOptions: {
    lineNumbers: false,
  },
});
```

### sourceMap

- Type: `boolean`
- Default: the same as Rsbuild's `output.sourceMap.css` config

Whether to generate source maps.

```ts
pluginStylus({
  sourceMap: false,
});
```

## License

[MIT](./LICENSE).

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