Stylus Plugin

Introduction

The stylus plugin allows for generation of CSS from stylus input.

In addition to the core stylus features this lumbar plugin

• Defines platform variables to allow conditional stylus generation.
• Allows for generate of pixelDensity targeted stylesheets.
• Manages image dependencies within the build.
• Includes the nib and stylus-images plugins by default.

Usage

The stylus plugin will compile any resources whose name ends with '.styl' defined on the styles object. It can be configured through a styles object located on the root lumbar configuration project.

Within the stylus pages themselves, the platform variables allow for conditional code like

body
  color $primaryBack if $web

Note that if multiple stylus files are defined for a given module they are all combined into a single stylus build. As a consequence the stylus variable state will be common across the module.

Configuration

• pixelDensity : Defines the pixel densities, either per-platform as a hash of arrays containing density targets or for all platforms as an array containing the density targets, that will be generated. For each pixel density a file name@{density}x.css will be generated, where {density} is the value defined in the array. This value is used by stylus-image to select the appropriate source image for the url() method.
• urlSizeLimit : Maximum size of images that will be inlined as data URIs. Larger images will be left as url('path') references.
• copyFiles : Truthy to copy non-inlined source files into a build directory relative to the output
• includes : List of paths that are included in all generated stylus files
• styleRoot : Directory to add to the stylus lookup path. This is relative to the configuration file.

Example

{
  "platforms": [ "iphone", "web" ],
  "modules": {
    "base": {
      "styles": [
        "styles/base.styl",
        {"src": "styles/iphone.styl", "platform": "iphone"},
        {"src": "styles/web.styl", "platform": "web"}
      ]
    }
  },

  "styles": {
    "pixelDensity": {
      "iphone": [ 1, 2 ]
    },
    "urlSizeLimit": 103,
    "copyFiles": true,
    "styleRoot": "static",
    "useNib": true,
    "includes": [
      "styles/global.styl"
    ]
  }
}