Run Sakugawa via gulp, 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 gulp 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.
npm install gulp-sakugawa --save-dev
var gulpSakugawa = require('gulp-sakugawa');
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.
var gulp = require('gulp'),
gulpSakugawa = require('gulp-sakugawa');
gulp.task('default', function() {
gulp.src('pure-min.css')
.pipe(gulpSakugawa({
maxSelectors: 400,
mediaQueries: 'separate',
suffix: '_'
}))
.pipe(gulp.dest('.'));
});
The CSS file used in the example can be retrieved with:
wget http://yui.yahooapis.com/pure/0.5.0/pure-min.css
Please refer to a GitHub blog post on how to create somewhat perfect pull request.
- v0.4.0 (2015-03-11) Update Sakugawa to
v0.4.0
which preserves existing@charset
rules to all resulting files - v0.3.0 (2015-02-23) Update Sakugawa to
v0.3.0
which adds theminSheets
option - v0.2.0 (2014-11-19) First release, directly paired with Speed improvement release of Sakugawa
Copyright (c) Juga Paazmaya [email protected]
Licensed under the MIT license.