PostCSS Reverse Media
Reverse media query parameters. Equivalent to a not
if the native syntax allowed. Useful to avoid media query overlap.
not
and logic already?
Wait, I thought media queries had 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 = ;var reverseMedia = ; var fs = ; var mycss = fs; // Process your CSS with postcss-reverse-mediavar output = css; console;
Input:
{ /*...*/ } { /*...*/ }
Output:
{ /*...*/ } { /*...*/ }
Chaining parameters with logic
Input:
{ /*...*/ } { /*...*/ }
Output:
{ /*...*/ } { /*...*/ }
@media
Use with other plugins that modify 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 = ;var minmax = ;var reverseMedia = ; var pluginStack = ;
@); { /*...*/ }
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