grunt-csscomb

grunt-csscomb

The grunt plugin for sorting CSS properties in specific order.

Getting Started

This plugin requires Grunt >=1.0.x.

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

npm install grunt-csscomb --save-dev

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

grunt.loadNpmTasks('grunt-csscomb');

The "csscomb" task

Overview

In your project's Gruntfile, add a section named csscomb to the data object passed into grunt.initConfig().

grunt.initConfig({
    csscomb: {
        options: {
            // Task-specific options go here.
        },
        your_target: {
            // Target-specific file lists and/or options go here.
        }
    }
});

Options

options.config

Type: String Default value: null

A string value that is used to specify custom-csscomb.json file path.

Usage Examples

grunt.initConfig({
    csscomb: {
        foo: {
            files: {
                'dest/resorted-foo.css': ['src/foo.css'],
            }
        },
        bar: {
            files: {
                'dest/resorted-foo.css': ['src/foo.css'],
                'dest/resorted-bar.css': ['src/bar.css']
            }
        }
    }
});

Custom Options

You can set the config option if you want to use the configuration which you are accustomed to.

grunt.initConfig({
    csscomb: {
        dist: {
            options: {
                config: '/path/to/config.json'
            },
            files: {
                'dest/resorted-foo.css': ['src/foo.css']
            }
        }
    }
});

Dynamic Mappings

You can process many individual files of directory with a few additional properties.

grunt.initConfig({
    csscomb: {
        dynamic_mappings: {
            expand: true,
            cwd: '/assets/css/',
            src: ['*.css', '!*.resorted.css'],
            dest: '/assets/dest/css/',
            ext: '.resorted.css'
        }
    }
});

Src Only

If you provide only a src with no value for dest, then dest will automatically be set to the src directory.

grunt.initConfig({
    csscomb: {
        src_only: {
            src: ['foo/bar.css'],
            ext: '.resorted.css'
        }
    }
});

Release History

• v4.2.0: Update dependencies.
• v4.1.0: Update csscomb.js to v4.3.0; update dependencies.
• v4.0.0: Update csscomb.js to v4; update dependencies; allow src only.
• v3.1.1: Update grunt version.
• v3.0.0: Update csscomb.js to v3.0 but grunt-csscomb API doesn't change.
• v2.0.1: Stop searching config if we reach root directory.
• v2.0.0: Bump up.
• v1.2.1: Bump up.
• v1.2.0: Update csscomb.js to v2.0 and change API sortOrder to config.
• v1.1.0: Improve process.
• v1.0.0: Support csscomb.js.
• v0.5.0: Enable multiple files.
• v0.4.0: Move to csscomb's repository.
• v0.3.0: Fix sort option bug.
• v0.2.0: Fix bugs.
• v0.1.0: Release.