stylus-autocompile

Auto compile Stylus.

olmokramer

6,715

8

0.6.1

MIT

GitHub

This package consumes the following services:

stylus-autocompile

Auto compile Stylus file on save. Fork of less-autocompile

Add the parameters on the first line of the Stylus file.

param type description
out 1 2 string path of css file to create
compress 3 bool compress css file
sourcemap 3 bool create a sourcemap for this file
libs 3 array space-separated list of libraries to include. the specified libraries must be installed in the (parent) directory of the stylus file
main 1 string path to the main stylus file to be compiled

1 The paths are relative to the stylus file. If both an out and a main field are specified, both the current file and the main file are compiled and stored in their respective out

2 The output filename may contain $1 or $2, which will be replaced by the input basename and extension, respectively. So a file named in.styl and is configured with # out: $1.$2.css will compile to in.styl.css.

3 The compress, sourcemap and libs fields don't have any effect when no out field is specified.

If stylus is installed locally in the project of the current file, that version will be used. Otherwise Stylus autocompile falls back to a bundled version of stylus.

Example

main.styl

// out: css/style.css, sourcemap: true, compress: true, libs: nib

@import "component.styl";
@import "other.styl";
@import "nib/gradients";

When saving main.styl, main.styl will be compiled, compressed and saved as css/style.css (relative to main.styl), along with a sourcemap css/style.css.map. The nib library is available for @imports in main.styl.

component.styl

// main: main.styl, out: css/component.css

my-component {
  height: 100px;
  width: 100px;
}

When saving component.styl, both main.styl and component.styl are compiled to css/style.css and css/component.css, respectively.

other.styl

// main: component.styl

other-component {
  height: 50px;
}

When other.styl is saved main.styl and component.styl will be compiled to css/style.css and css/component.css, respectively.