Product
Introducing License Enforcement in Socket
Ensure open-source compliance with Socket’s License Enforcement Beta. Set up your License Policy and secure your software!
grunt-extract-css-media
Advanced tools
grunt task to split css files in html files into separate medie query css files
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.
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.
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');
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.
The parameter gets passed to the extractCssMedia module which itself passes it to css.parse. When set to true, the output CSS gets minified.
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.
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.
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.
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.
This is a very basic grunt configuration which uses processhtml and extract-css-media.
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'])
}
<!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>
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;
}
}
<!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 ;)
FAQs
grunt task to split css files in html files into separate medie query css files
The npm package grunt-extract-css-media receives a total of 215 weekly downloads. As such, grunt-extract-css-media popularity was classified as not popular.
We found that grunt-extract-css-media demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Product
Ensure open-source compliance with Socket’s License Enforcement Beta. Set up your License Policy and secure your software!
Product
We're launching a new set of license analysis and compliance features for analyzing, managing, and complying with licenses across a range of supported languages and ecosystems.
Product
We're excited to introduce Socket Optimize, a powerful CLI command to secure open source dependencies with tested, optimized package overrides.