peterkeatinggrunt-csscss
Grunt task that runs CSSCSS, a CSS redundancy analyzer.
CSSCSS
CSSCSS runs on Ruby (v1.9.x and up), to check Ruby is installed on your machine use ruby -v. To install the CSSCSS gem run gem install csscss command, this will grab the latest version.
Currently grunt-csscss handles all the features for CSSCSS that are available with version 1.3.1.
Getting Started
This plugin requires Grunt ~0.4.0
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-csscss --save-dev
Once the plugin has been installed, it may be enabled inside your Gruntfile with this line of JavaScript:
grunt.loadNpmTasks('grunt-csscss');
Options
bundleExec
Type: Boolean
Default: false
Run CSSCSS with bundle exec.
colorize
Type: Boolean
Default: true
Flag indicating whether the outputted analysis should be colorized.
compass
Type: Boolean
Default: false
Enables Compass extensions when parsing Sass.
Compass must be installed in order to use this option.
failWhenDuplicates
Type: Boolean
Default: false
Flag indicating whether the Grunt task should fail when rule sets with duplicate declarations are found by CSSCSS.
ignoreProperties
Type: String
Comma seperated list of CSS properties that should be ignored when finding matches.
ignoreSassMixins
Type: Boolean
Default: false
Flag indicating whether matches in Sass mixins should be ignored.
This is an experimental feature.
ignoreSelectors
Type: String
Comma seperated list of selectors that should be ignored when finding matches.
minMatch
Type: Number
Default: 3
Only report matches that have at least this many matching rules.
outputJson
Type: Boolean
Default: false
Output analysis in JSON format.
shorthand
Type: Boolean
Default: true
Whether shorthand CSS declaration should be parsed. Check here for a great explanation of this option.
showParserErrors
Type: Boolean
Default: false
Outputs parser errors.
require
Type: string
Path to a ruby file that is loaded before running CSSCSS.
Compass must be installed in order to use this option.
verbose
Type: Boolean
Default: false
Displays the CSS properties that have been matched.
Examples
Configuration Example
Basic example of a Grunt config containing the CSSCSS task.
grunt.initConfig({
csscss: {
dist: {
src: ['css/style.css']
}
}
});
grunt.loadNpmTasks('grunt-csscss');
grunt.registerTask('default', ['csscss']);
Multiple Files
Running CSSCSS against multiple CSS files. All the files specified in the src array will be analyzed by CSSCSS.
csscss: {
dist: {
src: ['css/style.css', 'css/another.css']
}
}
Specifying Options
Example of using the options.
csscss: {
options: {
colorize: false,
verbose: true,
outputJson: false,
minMatch: 2,
compass: true,
ignoreProperties: 'padding',
ignoreSelectors: '.rule-a'
},
dist: {
src: ['css/style.css', 'css/another.css']
}
}
Analyzing Compass Stylesheet
Example of using CSSCSS to analyze Sass files that are converted using Compass.
csscss: {
options: {
require: 'my/config/file.rb'
},
dist: {
src: ['sass/style.scss']
}
}
Specifying Files with Glob Pattern
Example of using a glob pattern to target many files that should be analysed by CSSCSS. The example below will analyse all the files in the css directory that have an extension of .css.
csscss: {
dist: {
src: ['css/*.css']
}
}
Outputting analysis to a file.
Example of using the Grunt task to output the analysis from CSSCSS to a local file. The example below will create (if necessary) output.json file, where it will write the output from CSSCSS. If the outputJson property is set to true (like in the example below) then valid JSON will be written to the file.
csscss: {
dist: {
options: {
outputJson: true
},
files: {
'output.json': ['css/style.css']
}
}
}
Release History
See CHANGELOG.
Credits
All credit goes to Zach Moazeni for his brilliant work on CSSCSS, great job Zach!