grunt-styl

Preprocess CSS with Styl

npm install grunt-styl
1 downloads in the last day
18 downloads in the last week
88 downloads in the last month

grunt-styl Build Status Built with Grunt

Preprocess CSS with Styl

Getting Started

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, install this plugin with this command:

npm install --save-dev grunt-styl

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

grunt.loadNpmTasks('grunt-styl');

Tip: the load-grunt-tasks module makes it easier to load multiple grunt tasks.

Example

#logo {
    width: 50px;
    height: @width;
    absolute: top 100px left 50%;
    background: linear-gradient(top, black, white);
}

Is preprocessed into:

#logo {
    width: 50px;
    height: 50px;
    position: absolute;
    top: 100px;
    left: 50%;
    background: -o-linear-gradient(top, black, white);
    background: -ms-linear-gradient(top, black, white);
    background: -moz-linear-gradient(top, black, white);
    background: -webkit-linear-gradient(top, black, white);
    background: linear-gradient(top, black, white)
}

Documentation

Read more in the Styl docs.

Example config

grunt.initConfig({
    styl: {                                            // Task
        dist: {                                        // Target
            files: {                                // Dictionary of files
                'dist/main.css': 'app/main.styl'    // 'destination': 'source'
            }
        }
    }
});

grunt.loadNpmTasks('grunt-styl');
grunt.registerTask('default', ['styl']);

Options

whitespace

Type: Boolean
Default: false

The Sass-style whitespace significant syntax supports nesting and parent selector references.

vendors

Type: Array
Default: ['webkit', 'moz', 'ms', 'o']

Vendor prefixes to apply.

compress

Type Boolean
Default: false

Output compression.

configure

Type Function
Default: undefined

Accepts a function that gives you the ability to interact with styl before compiling. Useful for adding on plugins, etc.

In this example stylVariables is a plugin:

grunt.initConfig({
    styl: {
        compile: {
            options: {
                whitespace: true,
                configure: function (styl) {
                    styl.use(stylVariables());
                }
            },
            files: {
                'dist/main.css': 'app/main.styl'
            }
        }
    }
});

License

MIT © Sindre Sorhus

npm loves you