postcss-reverse-media
v0.1.2
Published
Reverse media query parameters. Equivalent to a `not` if the native syntax allowed. Useful to avoid media query overlap.
Downloads
246
Readme
PostCSS Reverse Media
Reverse media query parameters. Equivalent to a not
if the native syntax allowed. Useful to avoid media query overlap.
Wait, I thought media queries had not
and logic already?
Unfortunately the not all
trick doesn't work when you want to chain(and
) another parameter.
- This works to reverse/invert/not the media query parameter:
@media not all and (max-width: 250px)
- When you want to chain, this doesn't work:
@media (max-width: 500px) and not all and (max-width: 250px)
I created this plugin so that this kind of thing is easy to do. I prefer to to use the reverse
keyword(to avoid confusion and collision in the future) but feel free to change it to not
in the options.
- With
postcss-reverse-media
: -@media (max-width: 500px) and reverse (max-width: 250px)
More info about media query logic in this article, Logic in Media Queries on CSS-Tricks
Latest Version: v0.1.2
Changelog
Install
npm install postcss-reverse-media --save-dev
Usage
Basic Example
var postcss = require('postcss');
var reverseMedia = require('postcss-reverse-media');
var fs = require('fs');
var mycss = fs.readFileSync('input.css', 'utf8');
// Process your CSS with postcss-reverse-media
var output = postcss([
reverseMedia(/*options*/)
])
.process(mycss)
.css;
console.log(output);
Input:
@media reverse (max-width: 150px) { /*...*/ }
@media reverse (min-width: 150px) { /*...*/ }
Output:
@media (min-width: 150.001px) { /*...*/ }
@media (max-width: 149.999px) { /*...*/ }
Chaining parameters with logic
Input:
@media (max-width: 300px) and reverse (max-width: 150px) { /*...*/ }
@media (min-width: 50px) and reverse (min-width: 150px) { /*...*/ }
Output:
@media (max-width: 300px) and (min-width: 150.001px) { /*...*/ }
@media (min-width: 50px) and (max-width: 149.999px) { /*...*/ }
Use with other plugins that modify @media
Put postcss-reverse-media
after other plugins that modify @media
rules. This is to have all of the substitutions and transformations complete before we look for the reverse
qualifier keyword and do our transformations.
var customMedia = require('postcss-custom-media');
var minmax = require('postcss-media-minmax');
var reverseMedia = require('postcss-reverse-media');
var pluginStack = [
customMedia(),
minmax(),
reverseMedia()
];
@custom-media --small-viewport (max-width: 150px);
@media reverse (--small-viewport) { /*...*/ }
Options
keyword
: string - The media query param reversal operator keyword.- Default:
'reverse'
- Default:
increment
: number - The ammount we increment/decrement by to avoid parameter overlap- Default:
0.001
- Default:
Testing
npm test