
Product
A New Overview in our Dashboard
We redesigned Socket's first logged-in page to display rich and insightful visualizations about your repositories protected against supply chain threats.
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
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
We redesigned Socket's first logged-in page to display rich and insightful visualizations about your repositories protected against supply chain threats.
Product
Automatically fix and test dependency updates with socket fix—a new CLI tool that turns CVE alerts into safe, automated upgrades.
Security News
CISA denies CVE funding issues amid backlash over a new CVE foundation formed by board members, raising concerns about transparency and program governance.