extract-css-media-cli

A cli wrapper around the extractCssMedia npm module, to extract media query selectors from a given css file and write them into separate files.

This helps to load different css files per media query. When a media query doesn't match on load, modern browsers don't load them in a render blocking way.

Installation

I recommend installing the module globally to easily access it everywhere in your console.

sudo npm i extract-css-media-cli -g

API

The exposed command is extractCssMedia which takes several options. The only required option is --inputFilename=[your-css-file].

The program reads the given css file, parses out the media queries which satisfy the minRules option (see below) and stores all found media query bundles into separate files. The rest of the css will be written to a file which is suffixed with _nomedia.

Options

minRules: Number - default: 20

This option is passed to the extract-media-query module. It specifies a minimum number of rules for a media query to be required to split that media query definitions into an extra string.

The background for that is, that there are sometimes media queries which contain only a little amount of definitions. In that case it often makes sense to keep them in the overall css.

compress: Boolean - default: true

This option is passed to the extract-media-query module which passes it further to css.parse. When set to true, the output css gets minified.

outDir: String - default: './',

The directory to write the separated files to.

normalizeFilenames: Boolean - default: true

If set to true (default), all characters in the filename which don't match /[0-9a-z._]/i get replaced by an underscore. If set to false, the output filenames will contain whitespaces and probably parenthesis. This happens because the media query will get used in the output filenames.

showLinkTags: Boolean - default: false

If set to true the program shows the link tags which you can use in your html. To ensure, that the paths are fitting, the program should be run in the right folder (depending on your web server configuration)

Example

extractCssMedia --inputFilename=test.css --showLinkTags=true

Note

The compress option doesn't produce a fully minimized css. Like you can already see in the example output, the splitting semicolon for css definitions is also added to the last statement of each definition. If you really want to have the smallest css, you should use a real minifier after the media query separation.