# component-stylus-plugin

> Highly customizable Stylus compiler plugin for Component

Latest version **0.3.1** (published 2014-04-25) · MIT license · 0 weekly downloads

## Install

```sh
npm install component-stylus-plugin
pnpm add component-stylus-plugin
yarn add component-stylus-plugin
bun add component-stylus-plugin
```

## 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.3.1 |
| Published | 2014-04-25 |
| First published | 2013-03-25 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 3 |
| Known vulnerabilities | 0 (+2 in 1 direct dependencies) |
| Install scripts | no |
| GitHub stars | 8 |
| Author | Ryan Schmukler |
| Maintainers | rschmukler |
| Keywords | component, stylus |

## Links

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

## Dependencies (3)

- [batch](https://npm.io/package/batch.md) ~0.5.0
- [debug](https://npm.io/package/debug.md) ~0.7.2
- [stylus](https://npm.io/package/stylus.md) ~0.43.0

## Recent versions

- 0.3.1 (latest) — 2014-04-25
- 0.3.0 — 2014-02-26
- 0.2.6 — 2014-01-29
- 0.2.5 — 2013-11-11
- 0.2.4 — 2013-09-03
- 0.2.3 — 2013-08-02
- 0.2.2 — 2013-05-03
- 0.2.1 — 2013-04-19
- 0.2.0 — 2013-04-18
- 0.1.2 — 2013-04-02
- 0.1.1 — 2013-03-26
- 0.1.0 — 2013-03-25

## README

# Component Stylus Plugin

Plugin for [component/builder](http://github.com/component/builder.js) to enable the direct use of stylus with components.


## Usage Example

    var Builder  = require('component-builder'),
    stylusPlugin = require('component-stylus-plugin');

    var builder = new Builder('.');
    builder.copyAssetsTo('public');
    builder.use(stylusPlugin);

    builder.build(function(err, res) {
      write('public/app.js', res.require + res.js);
      write('public/app.css', res.css);
    });

## Options

Component Stylus Plugin is highly customizable and exhibits a lot of the options that stylus itself has.

### Compression (default false)

Minfies the output of the stylus files that are being compiled

    stylusPlugin.compress = false

### Line Numbers (default true)

Adds line numbers as comments to the CSS being output. Very helpful for debugging.

    stylusPlugin.linenos = true

### Firebug Support (default false)

Adds support for Firebug's Stylus plugin for Firefox

    stylusPlugin.firebug = false

### Imports (default empty)

Allows you to import stylus files into your stylus files before compiling. Useful for custom mixins or global
variable definitions. You must provide a full path to the files.

    stylusPlugin.imports = [__dirname + '/../globals/variableDefinitions.styl',
                            __dirname + '/../globals/customMixins.styl']

If you don't want to have to define imported files in the `stylusPlugin.imports` option, it is possible to import stylus file from a component using `@import "componentName/fileName"`

For instance:
```
{
  ...
  "local": [
    "base-styles"
  ],
}
```

```
@import "base-styles/animation-mixin";

.foo {
  animation();
  position: relative;
}
```

There is an example in the [tests](https://github.com/rschmukler/component-stylus-plugin/tree/master/test/fixtures/with-import).

**However, you must be careful to not import files containing CSS properties, otherwise they will be duplicated in the output.**
Only import files containing variables, placeholder selectors, functions or mixins.

### Include CSS (default false)

Allow `@import` statements to load up regular CSS.

    stylusPlugin.includeCSS = false

### Paths (default empty)

Add additional paths to be searched for `@import` statements

    stylusPlugin.paths = [__dirname + '/../junkDrawer',
                          __dirname + '/../someOtherPlace']

### Plugins (default empty)

Load up any additional plugins that you want to use.

    var nib = require('nib')();

    stylusPlugin.plugins.push(nib);

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