What is @csstools/postcss-media-minmax?
@csstools/postcss-media-minmax is a PostCSS plugin that allows you to use the `<=` and `>=` operators in CSS media queries. This simplifies the syntax for writing media queries and makes them more readable.
What are @csstools/postcss-media-minmax's main functionalities?
Using `<=` in media queries
This feature allows you to use the `<=` operator in media queries, which is transformed into the equivalent `max-width` query.
/* Input CSS */
@media (width <= 600px) {
.example {
background: red;
}
}
/* Output CSS */
@media (max-width: 600px) {
.example {
background: red;
}
}
Using `>=` in media queries
This feature allows you to use the `>=` operator in media queries, which is transformed into the equivalent `min-width` query.
/* Input CSS */
@media (width >= 800px) {
.example {
background: blue;
}
}
/* Output CSS */
@media (min-width: 800px) {
.example {
background: blue;
}
}
Combining `<=` and `>=` in media queries
This feature allows you to combine `<=` and `>=` operators in a single media query, which is transformed into the equivalent `min-width` and `max-width` query.
/* Input CSS */
@media (400px <= width <= 800px) {
.example {
background: green;
}
}
/* Output CSS */
@media (min-width: 400px) and (max-width: 800px) {
.example {
background: green;
}
}
Other packages similar to @csstools/postcss-media-minmax
postcss-custom-media
postcss-custom-media is a PostCSS plugin that allows you to define custom media queries. While it doesn't provide the same `<=` and `>=` syntax, it allows for reusable and more readable media queries by defining them once and using them throughout your CSS.
PostCSS Media MinMax
PostCSS Media MinMax lets you use the range notation in media queries following the Media Queries 4 Specification.
@media screen and (width >=500px) and (width <=1200px) {
.bar {
display: block;
}
}
/* becomes */
@media screen and (min-width:500px) and (max-width:1200px) {
.bar {
display: block;
}
}
Usage
Add PostCSS Media MinMax to your project:
npm install postcss @csstools/postcss-media-minmax --save-dev
Use it as a PostCSS plugin:
const postcss = require('postcss');
const postcssMediaMinMax = require('@csstools/postcss-media-minmax');
postcss([
postcssMediaMinMax()
]).process(YOUR_CSS );
PostCSS Media MinMax runs in all Node environments, with special
instructions for:
See prior work by yisibl here postcss-media-minmax
To ensure long term maintenance and to provide the needed features this plugin was recreated based on yisibl's work.