grunt-sakugawa (グラント佐久川)
Run Sakugawa via Grunt, for CSS splitting, filtering and organising.
Internet Explorer versions from 6 up to 9 come with a limitation for selectors present in a single CSS file. This limitation of 4095 selectors created the need for CSS splitter, which might be the main use case of this task runner plugin.
Since IE8 and earlier, do not support media queries, but IE9 does, there is an option for handling media queries differently, based on the targeted IE version. By separating media queries in to a different file, it will allow the to include that CSS file conditionally only when IE9 is being used. Ideally this would reduce the amount of bytes downloaded by IE8, which cannot handle the media queries anyhow, and thus prevent downloading something that is not even used.
Internally this Grunt task uses Sakugawa, thus in the case of any problems regarding the resulting output or input handling, and also for any feature requests, please refer to the issues at Sakugawa project.
Getting Started
This plugin requires Grunt ~0.4
and Node.js
version to be minimum of 10.13.0
, which is the active Long Term Support (LTS) version.
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-sakugawa --save-dev
Once the plugin has been installed, it may be enabled inside your Gruntfile with this line of JavaScript:
grunt;
The "sakugawa" task
Overview
Example configuration against Pure CSS,
which results in two files, pure-min_1.css
and pure-min_2.css
in which the latter
contains all media queries.
grunt;
The CSS file used in the example can be retrieved with:
wget http://yui.yahooapis.com/pure/0.5.0/pure-min.css
Options
options.maxSelectors
Type: Number
Default value: 4090
Maximum number of selector in a single resulting file. The actual selector count might be a bit lower based on the distribution of the selectors.
options.minSheets
Type: Number
Default value: 1
Minimum number of output CSS files
options.mediaQueries
Type: String
Default value: 'normal'
Media query handling, separation to different file ('separate'
) or ignorance ('ignore'
).
By default media queries are included as they appear in the original CSS.
options.suffix
Type: String
Default value: '_'
Output CSS file suffix.
For example the underscore before file counter, styles_1.css
.
Contributing
"A Beginner's Guide to Open Source: The Best Advice for Making your First Contribution".
Also there is a blog post about "45 Github Issues Dos and Don’ts".
Linting is done with ESLint and can be executed with npm run lint
.
There should be no errors appearing after any JavaScript file changes.
Version history
v0.6.0
(2020-05-28)- Minimum Node.js version lifted from
4.2.0
to10.13.0
- Four years worth of dependency updates 🎩
- Minimum Node.js version lifted from
v0.5.1
(2016-08-11)- Dependencies are sure 🎩 up to date
- Use ESLint directly without the Grunt.js plugin
- Start testing at Wercker #1
v0.5.0
(2016-05-03)- Update to match Sakugawa
v0.5.0
- Compatible with Grunt
1.0.0
- Use shared ESLint configuration #5
- Take ESLint in use
- Require Node.js version minimum of
4.2.0
(LTS)
- Update to match Sakugawa
v0.4.0
(2015-03-11)- Update Sakugawa to
v0.4.0
which preserves existing@charset
rules to all resulting files
- Update Sakugawa to
v0.3.1
(2015-02-25)- Use at least Sakugawa
v0.3.2
due to its fixes - Better destination handling
- Use at least Sakugawa
v0.3.0
(2015-02-23)- Update Sakugawa to
v0.3.0
which adds theminSheets
option - Also fix task when destination is a directory
- Update Sakugawa to
v0.2.0
(2014-11-19)- Speed improvements release of Sakugawa migration
v0.1.0
(2014-11-17)- Initial release matching with Sakugawa release
License
Copyright (c) Juga Paazmaya paazmaya@yahoo.com
Licensed under the MIT license.