postcss-print

postcss-print

PostCSS plugin to extract all @media print from your stylesheets and move it to a print.css file

This is really specific for my needs right now and it may evolve for a better opensource plugin, but right now I don't really recommend it's use, as it's not even tested.

Installation

npm install postcss-print

How to use

Options

generate (default: false)

This is the option that generates the new print.css file, I use it like this (with Grunt):

generatePrint: {
    options: {
        processors: [
            require('postcss-print')({ generate: true })
        ]
    },
    src  : 'public/css/dist/all.min.css',
    dest : 'public/css/dist/print.css'
}

pure (default: false)

This option removes all occurences of @media print from your original css files. I use it like this (with Grunt):

removePrint: {
    options: {
        processors: [
            require('postcss-print')({ remove: true })
        ]
    },
    src: 'public/css/dist/*.min.css'
}

Using

Plugin can be used just like any other PostCSS plugin. For example, Gulp setup (using gulp-postcss). Or Grunt setup (using grunt-postcss):

module.exports = function(grunt) {
    grunt.config('postcss', {
        prefix: {
            options: {
                map  : true,
                diff : true,
                processors: [
                    require('autoprefixer-core')({ browsers: ['> 1%', 'last 1 version', 'ie 8', 'ie 9'] })
                ]
            },
            src: 'public/css/dist/*.css'
        },
        generatePrint: {
            options: {
                processors: [
                    require('postcss-print')({ generate: true })
                ]
            },
            src  : 'public/css/dist/all.min.css',
            dest : 'public/css/dist/print.css'
        },
        removePrint: {
            options: {
                processors: [
                    require('postcss-print')({ remove: true })
                ]
            },
            src: 'public/css/dist/*.min.css'
        }
    });

    grunt.loadNpmTasks('grunt-postcss');
};

And then use the print.css like this:

<link rel="stylesheet" href="print.css" media="print">

License

MIT © Gustavo Siqueira