@csstools/postcss-media-minmax

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.

README

PostCSS Media MinMax

npm 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.

@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(/* pluginOptions */)
]).process(YOUR_CSS /*, processOptions */);

PostCSS Media MinMax runs in all Node environments, with special instructions for:

• Node
• PostCSS CLI
• PostCSS Load Config
• Webpack
• Next.js
• Gulp
• Grunt

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.