Find file
Fetching contributors…
Cannot retrieve contributors at this time
96 lines (75 sloc) 2.22 KB


Grunt plugin for processing CSS with Styletto

Getting Started

Install styletto: npm install styletto -g

Install plugin in your project directory with: npm install grunt-styletto

Then load it from your own grunt.js file:



Add styletto task in grunt.js file like this:

styletto: {
  all: {

    // optional params, @see for syntax and default settings
    options: {
      compress: "csso",
      base64: 1500,
      // same but with more control
      //base64: {
      //    limit: 1500,
      //    types: {
      //        'jpeg': 'image/jpeg'
      //    }
      stylus: {
          variables: { "ie": true },
          imports: [ 'mixin1.styl', 'mixin2.styl' ]
      less: {
          variables: { "bg-color": "red" },
          imports: [ 'lesshat.less' ]
      errors: "alert",
      // same but with more control
      // errors: {
      //   imports: 'alert',
      //   resources: 'alert',
      //   processors: 'alert'
      // },
      path: "../"

    // path to input file or array of paths
    src: "blocks/style.css",

    // path to result file
    dest: "blocks/__style.css",


Then you can run grunt styletto to compile blocks/style.css file with styletto


This plugin provides only one task: styletto.

This task is a multi task, so you can run styletto multiple times with different configs, like so:

styletto: {
  dev: {
    src: ['test/all.css'],
    dest: "test/__all.css",
    compress: 'csso',
    errors: "alert"
  publish: {
    src: ['test/all.css'],
    dest: "publish/__deploy.css",
    compress: "yui",
    base64: 15000,
    errors: "alert"

To run only one subtask run styletto from console like so: grunt styletto:dev


Please use the issue tracker and pull requests.


Copyright (c) 2012 ilya.akhmadullin
Licensed under the MIT license.