PostCSS
plugin to extract @media
queries from your stylesheets and move it to a separate.css
file
This is alpha stage software to solve some of my specific needs. Jump in the issues section to collaborate if it also solve yours.
npm install postcss-extract-media --save-dev
This is the match for the media query:
'^print'
'screen and (max-width: 300px)'
This prefix will be appended to the filename:
'-print' => main.css will be saved as main-print.css
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'] }),
require('postcss-print')({ match: '^print', prefix: '-print' }),
require('postcss-print')({ match: '(min-width: 568px)', prefix: '-tablet' })
]
},
src: [
'public/css/dist/*.css',
'!public/css/dist/*-print.css',
'!public/css/dist/*.min.css'
]
}
});
grunt.loadNpmTasks('grunt-postcss');
};
And then use the print.css like this:
<link rel="stylesheet" href="main-print.css" media="print">
MIT © Gustavo Siqueira