grunt-stylus-map

Compile Stylus files to CSS.

Note

This is a fork from the Stylus Grunt plugin but with Sourcemap support.

Getting Started

This plugin requires Grunt >=0.4.0

If you haven't used Grunt before, be sure to check out the Getting Started guide, as it explains how to create a Gruntfile as well as install and use Grunt plugins. Once you're familiar with that process, you may install this plugin with this command:

npm install grunt-stylus-map --save-dev

Once the plugin has been installed, it may be enabled inside your Gruntfile with this line of JavaScript:

grunt.loadNpmTasks('grunt-stylus-map');

Options

sourcemap

Type: Object

example:

sourcemap:{
  comment:true, //Adds a comment with the `sourceMappingURL` to the generated CSS (default: `true`)
  inline: true, //Inlines the sourcemap with full source text in base64 format (default: `false`)
  sourceRoot: ".", //"sourceRoot" property of the generated sourcemap
  basePath:"." //Base path from which sourcemap and all sources are relative (default: `.`)
}

compress

Type: Boolean
Default: true

Specifies if we should compress the compiled css. Compression is always disabled when --debug flag is passed to grunt.

linenos

Type: Boolean
Default: false

Specifies if the generated CSS file should contain comments indicating the corresponding stylus line.

firebug

Type: Boolean
Default: false

Specifies if the generated CSS file should contain debug info that can be used by the FireStylus Firebug plugin

paths

Type: Array

Specifies directories to scan for @import directives when parsing.

define

Type: Object

Allows you to define global variables in Gruntfile that will be accessible in Stylus files.

rawDefine

Type: Boolean|Array|String

If set to "true", defines global variables in Gruntfile without casting objects to Stylus lists. Allows using a JavaScript object in Gruntfile to be accessible as a Stylus Hash. See Stylus's issue tracker for details. LearnBoost/stylus#1286

Allows passing an array or string to specify individual keys to define "raw", casting all other keys as default Stylus behavior.

urlfunc

Type: String|Object

If String: specifies function name that should be used for embedding images as Data URI.

If Object:

• name - Type: String. Function name that should be used for embedding images as Data URI.
• [ limit ] - Type: Number|Boolean Default: 30000. Bytesize limit defaulting to 30Kb (30000), use false to disable the limit.
• [ [paths ] - Type: Array, Default: []. Image resolution path(s).

See url() for details.

use

Type: Array

Allows passing of stylus plugins to be used during compile.

import

Type: Array

Import given stylus packages into every compiled .styl file, as if you wrote @import '...' in every single one of said files.

include css

Type: Boolean
Default: false

When including a css file in your app.styl by using @import "style.css", by default it will not include the full script, use true to compile into one script. ( NOTICE: the object key contains a space "include css" )

resolve url

Type: Boolean
Default: false

Telling Stylus to generate url("bar/baz.png") in the compiled CSS files accordingly from @import "bar/bar.styl" and url("baz.png"), which makes relative pathes work in Stylus. ( NOTICE: the object key contains a space "resolve url" and Stylus resolves the url only if it finds the provided file )

banner

Type: String
Default: ''

This string will be prepended to the beginning of the compiled output.

Examples

stylus: {
  compile: {
    options: {
      paths: ['path/to/import', 'another/to/import'],
      urlfunc: 'embedurl', // use embedurl('test.png') in our code to trigger Data URI embedding
      use: [
        function () {
          return testPlugin('yep'); // plugin with options
        },
        require('fluidity') // use stylus plugin at compile time
      ],
      import: [      //  @import 'foo', 'bar/moo', etc. into every .styl file
        'foo',       //  that is compiled. These might be findable based on values you gave
        'bar/moo'    //  to `paths`, or a plugin you added under `use`
      ]
    },
    files: {
      'path/to/result.css': 'path/to/source.styl', // 1:1 compile
      'path/to/another.css': ['path/to/sources/*.styl', 'path/to/more/*.styl'] // compile and concat into single file
    }
  }
}