grunt-sakugawa

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.loadNpmTasks('grunt-sakugawa');

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.initConfig({
  sakugawa: {
    sakugawa: {
      pure: {
        options: {
          maxSelectors: 400,
          mediaQueries: 'separate',
          suffix: '_'
        },
        src: ['pure-min.css']
      }
    }
  },
});

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 to 10.13.0
  • Four years worth of dependency updates :tophat:
• v0.5.1 (2016-08-11)
  • Dependencies are sure :tophat: 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)
• v0.4.0 (2015-03-11)
  • Update Sakugawa to v0.4.0 which preserves existing @charset rules to all resulting files
• v0.3.1 (2015-02-25)
  • Use at least Sakugawa v0.3.2 due to its fixes
  • Better destination handling
• v0.3.0 (2015-02-23)
  • Update Sakugawa to v0.3.0 which adds the minSheets option
  • Also fix task when destination is a directory
• 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 [e-mail]

Licensed under the MIT license.