# stylus-brunch

> Adds Stylus support to brunch.

Latest version **3.0.0** (published 2019-12-16) · MIT license · 0 weekly downloads

> **Deprecated.** This package is deprecated.

## Install

```sh
npm install stylus-brunch
pnpm add stylus-brunch
yarn add stylus-brunch
bun add stylus-brunch
```

## Health

**Score 10/100 (F)** — status: deprecated.

Negative: deprecated.

## Facts

| | |
|---|---|
| Version | 3.0.0 |
| Published | 2019-12-16 |
| First published | 2012-03-12 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Node | >= 10.16 |
| Dependencies | 5 |
| Unpacked size | 9.6 KB |
| Known vulnerabilities | 0 (+5 in 1 direct dependencies) |
| Install scripts | no |
| GitHub stars | 21 |
| Author | Paul Miller |
| Maintainers | es128, paulmillr |

## Links

- npm: https://www.npmjs.com/package/stylus-brunch
- Repository: https://github.com/brunch/stylus-brunch
- Issues: https://github.com/brunch/stylus-brunch/issues
- npm.io page: https://npm.io/package/stylus-brunch

## Dependencies (5)

- [nib](https://npm.io/package/nib.md) ~1.1.2
- [stylus](https://npm.io/package/stylus.md) ~0.54.7
- [postcss](https://npm.io/package/postcss.md) ~7.0.24
- [progeny](https://npm.io/package/progeny.md) ~0.12.0
- [postcss-modules](https://npm.io/package/postcss-modules.md) ~1.4.1

## Recent versions

- 3.0.0 (latest) — 2019-12-16
- 2.10.1 — 2018-09-01
- 2.10.0 — 2017-02-15
- 2.9.0 — 2017-02-08
- 2.8.0 — 2016-10-27
- 2.7.2 — 2016-07-15
- 2.7.1 — 2016-07-15
- 2.7.0 — 2016-07-15
- 2.6.0 — 2016-04-02
- 2.0.0 — 2016-01-29
- 1.8.1 — 2014-06-05
- 1.8.0 — 2013-12-26
- 1.7.0 — 2013-08-28
- 1.6.1 — 2013-05-05
- 1.6.0 — 2013-04-17
- … 13 more at https://npm.io/package/stylus-brunch/versions

## README

# stylus-brunch

Adds [Stylus](http://learnboost.github.com/stylus/) support to
[Brunch](https://brunch.io).

The plugin includes [nib](http://tj.github.io/nib/) cross-browser mixins.

## Usage

Install the plugin via npm with `npm install --save-dev stylus-brunch`.

## Options

**You don't need to specify any options by default.**

### Use Plugin Middleware

You can include Stylus plugins with a config directive
`config.plugins.stylus.plugins` (array) with paths to require the needed
plugins.  You will have to include your plugin dependencies in `package.json`.

```js
module.exports = {
  // ...
  plugins: {
    stylus: {
      plugins: ['my-stylus-plugin']
    }
  }
};
```

If the plugin is module based you can import a specific member as a subarray.

```js
moduls.exports = {
  // ...
  plugins: {
    stylus: {
      plugins: ['my-stylus-plugin', ['my-module-plugin', 'member']]
    }
  }
};
```

Alternatively, you can pass a function.

```js
moduls.exports = {
  // ...
  plugins: {
    stylus: {
      plugins: [require('autoprefixer-stylus')({browsers: ['last 3 versions']})]
    }
  }
};
```


### Options

You can import your modules or Stylus sheets with a config directive
`config.plugins.stylus.imports` (array) with paths to your modules.

```js
moduls.exports = {
  // ...
  plugins: {
    stylus: {
      imports: ['']
    }
  }
};
```

Allow stylus files to include plain-css partials:

```js
moduls.exports = {
  // ...
  plugins: {
    stylus: {
      includeCss: true
    }
  }
};
```

### Debugging

Enable line number comments or FireStylus for Firebug debug messages (both are off by default)

```js
moduls.exports = {
  // ...
  plugins: {
    stylus: {
      linenos: true,
      firebug: true
    }
  }
};
```

### CSS Modules

Starting Brunch `<unreleased>`, you can use CSS Modules with stylus-brunch. To enable it, change your config to:

```js
module.exports = {
  // ...
  plugins: {
    stylus: {
      modules: true
    }
  }
};
```

Then, author your styles like you normally would:

```stylus
.title
  font-size: 32px
```

And reference CSS class names by requiring the specific style into your javascript:

```js
var style = require('./title.styl');

<h1 className={style.title}>Yo</h1>
```

Note: enabling `cssModules` does so for every stylesheet in your project, so it's all-or-nothing. Even the files you don't require will be transformed into CSS modules (aka will have obfuscated class names, like turn `.title` into `._title_fdphn_1`).

## License

The MIT License (MIT)

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