grunt-extract-css-media

A grunt task for extracting media queries out of CSS files and store them in separate files. It uses extract-css-media and issues with the created css itself should be reported here.

With the right options, it can also create html snippet files, which contain the link tags to that extracted CSS files with the right media attributes.

Background

Like you can read on the Google Developer's article about render blocking css, it's good for the loading performance of a web page to load CSS files separately for different media types. Therefore you can specify media attributes on the link tags to let the CSS files be loaded only when they're required. If the media query doesn't match, the CSS gets loaded though but it doesn't block the rendering anymore.

Since it's sometimes complicated to structure your CSS (especially when using sass, where you can write media queries hierarchically) this way, I wrote this grunt plugin, to let these files be generated automatically.

Getting Started

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-extract-css-media -S

Once the plugin has been installed, it may be enabled inside your Gruntfile with this line of JavaScript:

grunt.loadNpmTasks('grunt-extract-css-media');

Options

minRules: Number - Default: 20

Gets passed to the extractCssMedia module and 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

The parameter gets passed to the extractCssMedia module which itself passes it to css.parse. When set to true, the output CSS gets minified.

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.

snippetDest: String

If the value is set, a snippet html file gets created, which contains link tags with the appropriate media attributes for all created CSS files.

hrefBase: String,

If snippetDest is set, the hrefBaseOption specifies the prefixing path for the created hrefs in the link tags. This can be used, to adjust the CSS urls to your webserver configuration. If it's not set, then hrefs will be the same as specified by the snippetDest option.

Include the created files via grunt

By using the processhtml plugin, you can easily include the created html snippet into your HTML files.

According to the documentation, you can specify an include comment around the css files, which you processed with grunt-extract-css-media and it automatically includes the snippet at this place.

To let the snippet be created, you have to specify the snippetDest option.

Example config

This is a very basic grunt configuration which uses processhtml and extract-css-media.

gruntfile.js

module.exports = function (grunt) {
    grunt.initConfig({
        processhtml: {
            dist: {
                files: {
                    'dest/index.html': ['src/index.html']
                }
            }
        },

        extractCssMedia: {
            dist: {
                options: {
                    minRules: 3,
                    snippetDest: 'dest/snippet/medias.html',
                    hrefBase: './css/'
                },
                files: [{
                    src: ['src/shop.css'],
                    dest: 'dest/css/'
                }]
            }
        }
    })

    grunt.loadNpmTasks('grunt-processhtml')
    grunt.loadNpmTasks('grunt-extract-css-media')

    grunt.registerTask('default', ['extractCssMedia', 'processhtml'])
}

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>grunt-extract-css-media Example</title>

    <!-- build:include ../dest/snippet/medias.html -->
    <link rel="stylesheet" type="text/css" href="src/style.css" />
    <!-- /build -->
</head>
<body>

</body>
</html>

style.css

body {
    color: green;
}

@media screen and (min-width: 100px) {
    html {
        background: red;    
    }
    
    body {
        background: green;
    }
    
    p {
        background: black;
    }
}

/* will be in style_all.css since the setting says, there are at least 3 rules required for the extraction */
@media screen and (min-width: 200px) {
    html {
        background: yellow;
    }
}

output

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Extract</title>

    <link rel="stylesheet" type="text/css" href="./css/style_screen_and_min_width_100px.css" media="screen and (min-width: 100px)" />
<link rel="stylesheet" type="text/css" href="./css/style_all.css" media="all" />
</head>
<body>

</body>
</html>

Yeah, I know, the indentation breaks, but probably you minimize the html anyways ;)