# next-with-stylus

> Next.js + Stylus support

Latest version **0.2.0** (published 2022-07-25) · MIT license · 0 weekly downloads

## Install

```sh
npm install next-with-stylus
pnpm add next-with-stylus
yarn add next-with-stylus
bun add next-with-stylus
```

## Health

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

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.2.0 |
| Published | 2022-07-25 |
| First published | 2021-11-04 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 10.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 2 |
| Author | itibbers |
| Maintainers | ryanji |
| Keywords | nextjs, next-plugin, stylus |

## Links

- npm: https://www.npmjs.com/package/next-with-stylus
- Repository: https://github.com/itibbers/next-with-stylus
- Homepage: https://github.com/itibbers/next-with-stylus#readme
- Issues: https://github.com/itibbers/next-with-stylus/issues
- npm.io page: https://npm.io/package/next-with-stylus

## Dependencies (1)

- [clone-deep](https://npm.io/package/clone-deep.md) ^4.0.1

## Recent versions

- 0.2.0 (latest) — 2022-07-25
- 0.1.0 — 2021-11-07
- 0.0.1-beta.0 — 2021-11-04

## README

# next-with-stylus

> Forked from [next-with-less](https://github.com/elado/next-with-less).

[Next.js](https://nextjs.org/) + [Stylus CSS](https://www.stylus.com/) Support

Next.js supports SASS/SCSS, but not stylus. This plugin adds stylus support by duplicating SASS webpack rules and adding support for `.styl` files with `stylus-loader`.
It mimics the exact behavior of CSS extraction/css-modules/errors/client/server of SASS.

⚠️ _**Use with caution - Next.js implementation can chance in any version, and the monkey patching may not work anymore.**_

Tested with `next@11.0.1` (with webpack5), `next@12.0.7`.

## Install

```sh
yarn add next-with-stylus

npm i next-with-stylus
```

Peer dependencies to install: `stylus` `stylus-loader`.

## Usage

```js
// next.config.js
const withStylus = require('next-with-stylus')

module.exports = withStylus({
  stylusLoaderOptions: {
    /* ... */
  },
})
```

You can see all the options available to `stylus-loader` [here](https://webpack.js.org/loaders/stylus-loader/#options).

### Usage with [`next-compose-plugins`](https://github.com/cyrilwanner/next-compose-plugins)

```js
// next.config.js
const withPlugins = require('next-compose-plugins')

const withStylus = require('next-with-stylus')

const plugins = [
  /* ...other plugins... */
  [
    withStylus,
    {
      stylusLoaderOptions: {
        /* ... */
      },
    },
  ],
  /* ...other plugins... */
]

module.exports = withPlugins(plugins, {
  /* ... */
})
```

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