coagmano:stylus

v1.0.2Published 7 years ago

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

coagmano:stylus

A fork of meteor:stylus including the stylus plugins from mquandalle:stylus

mquandalle:stylus was failing when using the import syntax as part of ecmascript modules, so I forked the excellent meteor:stylus package which supports ecmascript and caching and added the same stylus plugins that mquandalle:stylus used so it is backwards compatible with mquandalle:stylus.

Included packages

Stylus 0.54.5

Expressive, dynamic, robust CSS. Curly braces and semicolons: optional.

Nib 1.1.2

Nib is a popular Stylus package that adds many helpful, basic, utility mixins.

Jeet 7.1.0

An advanced -- yet intuitive -- grid system. Very capable, and useful for laying out a page without cluttering up HTML with grid classes.

It's important to remember to include it in your styles, like so:

@import 'jeet'

Rupture 0.6.2

Simple media queries for Stylus. Must be imported before use.

Typographic 2.9.3

Quick and dirty responsive typography for the rest of us. Offers great selection of common font stacks, and several ways to apply them to your document. Must be imported before use.

Axis 0.4.3

A higher-level Stylus mixin library with lots of extra functionality. Be sure not to miss the normalize() mixin. Axis uses and imports Nib, so Nib has been removed from this package. This might not require an import statement.

Autoprefixer 0.13.0

An autoprefixer plugin for Stylus. Will also remove unnecessary prefixes if there is widespread browser support. It is automatic and does not need to be imported.


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 http://tj.github.io/nib/ for documentation of the nib extensions of Stylus.

Usage

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}).

Example:

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

// app/components/my-component/styles.import.styl
$primary-color = #A7A7A7
.my-component
  input
    border 1px solid
  textarea
    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
.my-buttons
  @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
.generic-buttons
  background-color: $app-base-color

Limitations

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