EN
Forum

Methodology

Toolbox

Platform

Stylus technology API

Collects the source files of style blocks written in Stylus syntax (files with the .styl extension) or in pure CSS (files with the .CSS extension).

Uses the Stylus CSS preprocessor to compile Stylus files into CSS code.

The result of the build is a CSS file. The postcss post processor is used for processing the resulting CSS.

Options

target

Type: String. Default: ?.css.

The name of the file for saving the build result with the necessary .styl and .css project files.

filesTarget

Type: String. Default: ?.files.

The name of the target for accessing the list of source files for the build. The file list is provided by the files technology in the enb-bem-techs package.

sourceSuffixes

Type: String | String[]. Default: ['styl', 'css'].

The suffixes to use for filtering style files for the build.

url

Type: String. Default: rebase.

Processing url() in .styl and .css files.

Acceptable values:

imports

Type: String. Default: include.

Detects CSS @imports.

Acceptable values:

sourcemap

Type: String | Boolean. Default: false.

The source map with information about the source files.

Acceptable values:

autoprefixer

Type: Object | Boolean. Default: false.

Adds vendor prefixes using autoprefixer.

Acceptable values:

prefix

Type: String. Default: ''.

Adding a prefix for CSS classes.

Important! The option only works for files with the .styl extension.

compress

Type: Boolean. Default: false.

CSS minification. Support source maps.

comments

Type: Boolean. Default: true.

Wrapping CSS code in comments in the file. Comments contain the relative path to the source file. This can be useful during project development.

Example

/* ../../blocks/block/block.styl:begin */
.block
{
    background-image: url(../../blocks/block/block.png);
}
/* ../../blocks/block/block.styl:end */

globals

Type: String | String[]. Default: [].

Links .styl files with global variables, methods, or mixins at the beginning of the file.

includes

Type: String | String[]. Default: [].

Specifies the paths to use when processing @import and url(). You can use it to connect third-party libraries such as nib.

Important! The option only works for files with the .styl extension.

use

Type: Function | Function[]. Default: [].

Enables plugins or a single plugin for Stylus via use()

Important! The option only works for files with the .styl extension.

useNib

Type: Boolean. Default: false.

Connects the nib library of CSS3 mixins for Stylus.

Important! The option only works for files with the .styl extension.

importPaths

Type: String[]. Default: [].

Connects .styl files or directories with index.styl via import()

Important! The option only works for files with the .styl extension.

inlineMaxSize

Type: Number. Default: 14.

The maximum file size in kilobytes that can be base64-encoded in inline mode.

Example

var stylusTech = require('enb-stylus/techs/stylus'),
    FileProvideTech = require('enb/techs/file-provider'),
    nib = require('nib'),
    rupture = require('rupture'),
    bemTechs = require('enb-bem-techs');

module.exports = function(config) {
    config.node('bundle', function(node) {
        // Getting the file names (FileList)
        node.addTechs([
            [FileProvideTech, { target: '?.bemdecl.js' }],
            [bemTechs.levels, { levels: ['blocks'] }],
            bemTechs.deps,
            bemTechs.files
        ]);

        // Creating CSS files
        node.addTech([stylusTech, {
            use: [nib(), rupture()],
            importPaths: [nib.path + '/nib']
        }]);
        node.addTarget('?.css');
    });
};

License

© 2014 YANDEX LLC. Code released under the Mozilla Public License 2.0.

Rate the article
Report an error on GitHub or correct using prose.io.