Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including grunt-cssondiet with all npm packages installed. Try it out:

grunt-cssondiet lists no main file and has no index.js, so it can't be directly required. If this is a mistake, please let us know. It may however contain internal files that you can require manually:

require("grunt/package.json"); // grunt is a peer dependency. // require("grunt-cssondiet/[??]")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

grunt-cssondiet v0.1.5

Easy and fast CSS preprocessor


Grunt plugin which compiles CSS-On-Diet files to CSS.

"cssondiet" Grunt Task

This plugin can be installed in your project directory by this command:

npm install grunt-cssondiet --save-dev

But it requires CSS-On-Diet preprocessor, which can be installed like this:

pip install CSSOnDiet

On some system that command (pip) will not be present. It should be installed with not too old Python version. But if you have old version install it from here.

If you are new to Grunt check out Introduction page

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


The CSS-On-Diet preprocessor

CSS-On-Diet is a preprocessor for CSS files. The key feature is mnemonics for frequently used properties, which are similar to Emmet abbreviations. Other goodies include intuitive media breakpoints, nested and single line comments, variables and mixins, a calculator, hexadecimal RGBA, minifier, ...

This task requires you to have Python and CSS-On-Diet installed. If you're on OS X or Linux you probably already have Python installed; test with python -V in your terminal. When you've confirmed you have Python installed, run pip install CSSOnDiet to install CSS-On-Diet. Maybe you will need to install pip command before.


Example config

module.exports = function(grunt) {

    cssondiet: {                         // Task
      dist: {                            // Target
        options: {                       // Target options
          minifyCss: true       
        files: {                         // Dictionary of files
          'main.css': 'main.cod',        // 'destination': 'source' 
          'widgets.css': 'widgets.cod'



  grunt.registerTask('default', ['cssondiet']);


Compile from multiple sources

CSS-On-Diet concatenates all source files, like they were included in some root-meta file


  cssondiet: {
    dist: {
      files: {
        'main.css': [ 'main.cod', 'side.cod' ]




Type: Boolean
Default: false

Minifies final CSS file.


Type: Array of Strings

Additional directories paths to look for imported files (@cod-include rule).


Type: Boolean
Default: false

Extract comments from final CSS. Always enabled for minify-css option.


Type: Boolean
Default: false

Don't add header line (banner) at the beginning of the CSS. Always enabled for minify-css option.

Release History

  • 2015-05-06 v0.1.5 Installation issue with COD1.8
  • 2014-12-03 v0.1.4 Mnemonics updated
  • 2014-10-29 v0.1.3 A new website link.
  • 2014-07-24 v0.1.2 Documentation update.
  • 2014-07-15 v0.1.1 Better warning messages.
  • 2014-07-11 v0.1.0 Initial
RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free