New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More
Socket
Sign inDemoInstall
Socket

postcss-combine-media-query

Package Overview
Dependencies
Maintainers
1
Versions
2
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

postcss-combine-media-query

PostCSS plugin to combine equal media query rules.

  • 1.0.1
  • latest
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
11K
increased by5.18%
Maintainers
1
Weekly downloads
 
Created
Source

postcss-combine-media-query

Build Status

If you are used to write the media queries of your components within those components (what you should do instead of maintaining a large global media query file) you might end up with CSS that contains the same media query rule multiple times.

.foo { color: red; }
@media (min-width: 1024px) {
    .foo { color: green; }
}
.bar { font-size: 1rem; }
@media (min-width: 1024px) {
    .bar { font-size: 2rem; }
}

While this is totally fine in development (and supports a modular structure in particular when using Sass) it's not that good for production where you wanna keep your CSS as small as possible.

That's the use case this plugin is built for! It looks for equal media query rules and appends them combined.

.foo { color: red; }
.bar { font-size: 1rem; }
@media (min-width: 1024px) {
    .foo { color: green; }
    .bar { font-size: 2rem; }
}

Installation

  • npm
npm install postcss-combine-media-query --save-dev
  • yarn
yarn add postcss-combine-media-query --dev

Usage

Simply add the plugin to your PostCSS config. That's all – easy as pie :wink: (there are no options)

If you're not familiar with using PostCSS you should read the official PostCSS documentation first.

Side Effects

Since this plugin moves all media queries to end of the file it may introduce bugs if your CSS is not well structured. So keep that in mind!

Let's say you've got the following code which results in .foo being yellow on desktop.

.foo { color: red; }
@media (min-width: 1024px) {
    .foo { color: green; }
}
.foo { color: yellow; }

Once you use this plugin it will change into green because the media query has been moved.

.foo { color: red; }
.foo { color: yellow; }
@media (min-width: 1024px) {
    .foo { color: green; }
}

Therefore it's recommended to use this plugin in development as well to detect such side effects sooner.

Credits

If this plugin is helpful to you it'll be great when you give me a star on github and share it. Keeps me motivated to continue the development.

Keywords

FAQs

Package last updated on 10 Mar 2020

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc