https://github.com/rstackjs/rsbuild-plugin-stylus
An Rsbuild plugin for using Stylus as the CSS preprocessor
https://github.com/rstackjs/rsbuild-plugin-stylus
css rsbuild rsbuild-plugin rspack stylus
Last synced: 13 days ago
JSON representation
An Rsbuild plugin for using Stylus as the CSS preprocessor
- Host: GitHub
- URL: https://github.com/rstackjs/rsbuild-plugin-stylus
- Owner: rstackjs
- License: mit
- Created: 2026-05-21T05:38:44.000Z (about 1 month ago)
- Default Branch: main
- Last Pushed: 2026-05-28T13:31:51.000Z (23 days ago)
- Last Synced: 2026-05-28T15:13:36.260Z (23 days ago)
- Topics: css, rsbuild, rsbuild-plugin, rspack, stylus
- Language: TypeScript
- Homepage:
- Size: 48.8 KB
- Stars: 2
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
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.
## 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).