v2.513.13-rc.13Published 7 years ago

This package has not had recent updates. Please investigate it's current state before committing to using it in your project.


Source code of released version | Source code of development version

Stylus is a CSS pre-processor with a simple syntax and expressive dynamic behavior. It allows for more compact stylesheets and helps reduce code duplication in CSS files.

With the stylus package installed, files with the .styl extension are sent through the stylus CSS pre-processor and the results are included in the client CSS bundle.

The stylus package also includes nib support. Add @import 'nib' to any *.styl file to enable cross-browser mixins such as linear-gradient and border-radius.

If you want to @import a file, give it the extension .import.styl to prevent Meteor from processing it independently.

See for documentation of the nib extensions of Stylus.


The package processes all .styl files, treating .styl as entry points and all files with extension .import.styl or a file in under an imports folder as an import.

Also, if a file is added in a package, a special isImport: true option can be passed to mark it as an import: api.add('styles.styl', 'client', {isImport: true}).


A component stylus file, importable, but not an entry-point:

// app/components/my-component/styles.import.styl
$primary-color = #A7A7A7
    border 1px solid
    color $primary-color

The main app entry point for the styles, app.styl:

// app/app.styl
@import './components/my-component/styles.import'

// ... rest of app styles

Cross-packages imports

This package allows apps to import Stylus styles from packages and vice-versa. The import syntax from importing files from other packages is curly braces:

// in procoder:fancy-buttons package's package.js file
api.add('styles/buttons.styl', 'client', {isImport: true});
// app.styl
// import styles from a package
@import '{procoder:fancy-buttons}/styles/buttons.styl'

// use imported styles in our code
  @extend .fancy-buttons
  color: white

To import a file from the app, leave the content of curly braces empty:

// packages/my-package/generic-buttons.styl
// import the base styles from app
@import '{}/client/imports/colors.styl'

// use the colors from app in this component
  background-color: $app-base-color


Since this package uses custom code for @imports, some of the import syntax is not supported at the moment:

  • globbing: @import './folder/*'
  • importing index.styl: @import ./folder/ - should automatically load ./folder/index.styl