Use the range notation in CSS media queries
npm install @csstools/postcss-media-minmaxnpm install @csstools/postcss-media-minmax --save-dev
[PostCSS Media MinMax] lets you use the range notation in media queries following the [Media Queries 4 Specification].
``css
@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;
}
}
`
Add [PostCSS Media MinMax] to your project:
`bash`
npm install postcss @csstools/postcss-media-minmax --save-dev
Use it as a [PostCSS] plugin:
`js
const postcss = require('postcss');
const postcssMediaMinMax = require('@csstools/postcss-media-minmax');
postcss([
postcssMediaMinMax(/ pluginOptions /)
]).process(YOUR_CSS /, processOptions /);
``
_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._
[cli-url]: https://github.com/csstools/postcss-plugins/actions/workflows/test.yml?query=workflow/test
[css-url]: https://cssdb.org/#media-query-ranges
[discord]: https://discord.gg/bUadyRwkJS
[npm-url]: https://www.npmjs.com/package/@csstools/postcss-media-minmax
[PostCSS]: https://github.com/postcss/postcss
[PostCSS Media MinMax]: https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-media-minmax
[Media Queries 4 Specification]: https://www.w3.org/TR/mediaqueries-4/#mq-features