panec / postcss-mq-optimize

[PostCSS] plugin Removes invalid media queries or its expressions.

PostCSS Mq Optimize

PostCSS plugin Removes invalid media queries or its expressions.

/* Input example */
@media (min-width: 200px) and (max-width: 300px) {
  .foo {}
}
@media (min-width: 200px) and (max-width: 300px) and (min-width: 100px) {
  .bar {}
}
@media (min-width: 200px) and (max-width: 300px) and (min-width: 200px) {
  .baz {}
}
@media (min-width: 200px) and (max-width: 300px) and (max-width: 100px) {
  .qux {}
}
@media screen and (max-width: 300px), (max-width: 200px) {
  .quux {}
}

/* Output example */
@media (min-width: 200px) and (max-width: 300px) {
  .foo {}
}
@media (min-width: 200px) and (max-width: 300px) {
  .bar {}
}
@media (min-width: 200px) and (max-width: 300px) {
  .baz {}
}
@media screen and (max-width: 300px), (max-width: 200px) {
  .quux {}
}

Usage

postcss([ require('postcss-mq-optimize') ])

See PostCSS docs for examples for your environment.

postcss-mq-optimize's Issues

min-width consolidations choose the largest value instead of the smallest

When a media query has two min-width values this plugin currently chooses to keep the largest value and removes the smallest value. This is a "breaking" choice since the the styles defined for the smallest min-width will be lost.

/* Input example /
@media (min-width: 200px) and (max-width: 300px) and (min-width: 100px) {
.bar {}
}
/ Current Output example */
@media (min-width: 200px) and (max-width: 300px) {
.bar {}
}

/* Should be */
@media (min-width: 100px) and (max-width: 300px) {
.bar {}
}

Update npm package?

@panec I appreciate the merges of those two pull requests—thank you!

That said, the version of this package in npm is still using the old code. Can you bump version number (currently 0.0.0), create a version tag, and update release on npm so users can receive the latest without needing extra steps?

Orientation media query breaks output

When using orientation css media query, the optimiser fails to correctly render the output.

@media (max-width: 1024px) and (orientation: landscape) {
	...
}

Will be compiled as:

@media (max-width:1024px)and) and (orientation:landscape){
	...
}

Plugin deprecated

Can this plugin update to work correctly with postcss 8?

Postcss version: 8.4.21

Warning:

postcss-mq-optimize: postcss.plugin was deprecated. Migration guide:
https://evilmartians.com/chronicles/postcss-8-plugin-migration