Awesome
rework-custom-media
A Rework (>=1.0.0
) plugin to add support for the
W3C-style CSS Custom Media Queries syntax.
Installation
npm install rework-custom-media
Use
As a Rework plugin:
// dependencies
var fs = require('fs');
var rework = require('rework');
var media = require('rework-custom-media');
// css to be processed
var css = fs.readFileSync('build/build.css', 'utf8').toString();
// process css using rework-custom-media
css = rework(css).use(media()).toString();
Options
map
Optionally, you may define the <media-query-list>
for each <extension-name>
in a JavaScript object that is passed to the function.
var options = {
map: {
'--wide-screen': 'screen and (min-width:900px)'
}
}
var out = rework(css).use(media(options)).toString();
CSS syntax
A custom media query is defined with the @custom-media
rule. Its scope is
global.
@custom-media <extension-name> <media-query-list>;
This defines that the custom media query named by the <extension-name>
represents the given <media-query-list>
.
The <extension-name>
can then be used in a media feature. The alias must be
wrapped in parentheses.
@custom-media --narrow-window screen and (max-width: 30em);
@media (--narrow-window) {
/* narrow window styles */
}
If an undefined <extension-name>
is used by a media feature, the media
feature will be stripped from the output, and a warning will be logged to the
console.
License
MIT