gulp-sakugawa (グルプ佐久川)

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.

Installation

Please note that Node.js version minimum of 10.13.0, which is the active Long Term Support (LTS) version, is required to use this plugin.

npm install gulp-sakugawa --save-dev

const gulpSakugawa = require('gulp-sakugawa');

Usage

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.

const 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

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.7.0 (2020-05-29)
  • Minimum Node.js version lifted from 6.9.5 to 10.13.0
• v0.6.0 (2017-06-28)
  • Minimum Node.js version lifted from 4.2.0 to 6.9.5
  • All dependencies are up to date again
• v0.5.1 (2016-08-24)
  • Better type checking of options
  • Update dependencies
  • Start testing in Windows at AppVeyor
• v0.5.0 (2016-05-13)
  • Minimum supported version of Node.js is 4.2.0 (LTS)
  • ESLint 2 and shared configuration #15
  • Minimum supported sakugawa is v0.5.0
• v0.4.1 (2015-09-03)
  • Output filenames were not as documented, fixed via #10
• 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 the minSheets option
• v0.2.0 (2014-11-19)
  • First release, directly paired with Speed improvement release of Sakugawa

License

Copyright (c) Juga Paazmaya [email protected]

Licensed under the MIT license.