https://github.com/songsterr/postcss-unwrap-mq

PostCSS plugin to extract matched media queries to their parents
https://github.com/songsterr/postcss-unwrap-mq

css media-query postcss postcss-plugin unwrap

Last synced: 11 days ago
JSON representation

PostCSS plugin to extract matched media queries to their parents

• Host: GitHub
• URL: https://github.com/songsterr/postcss-unwrap-mq
• Owner: songsterr
• License: mit
• Created: 2019-12-03T09:40:54.000Z (about 5 years ago)
• Default Branch: master
• Last Pushed: 2023-10-07T10:55:58.000Z (over 1 year ago)
• Last Synced: 2025-01-06T18:52:27.281Z (17 days ago)
• Topics: css, media-query, postcss, postcss-plugin, unwrap
• Language: JavaScript
• Size: 1.09 MB
• Stars: 2
• Watchers: 11
• Forks: 0
• Open Issues: 2
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# PostCSS Unwrap Mq

[PostCSS] plugin to extract matched media queries to their parents.

![version](https://img.shields.io/npm/v/postcss-unwrap-mq?style=flat-square)

![node-current](https://img.shields.io/node/v/postcss-unwrap-mq?style=flat-square)

![npm](https://img.shields.io/npm/dt/postcss-unwrap-mq?style=flat-square)

![licence](https://img.shields.io/npm/l/postcss-unwrap-mq?style=flat-square)

![Snyk Vulnerabilities for npm package](https://img.shields.io/snyk/vulnerabilities/npm/postcss-unwrap-mq?style=flat-square)

[PostCSS]: https://github.com/postcss/postcss

```css

.foo {

    /* Input example */

}

@media print {

  .bar {

  }

}

```

```css

.foo {

  /* Output example */

}

.bar {

}

```

## Usage

Check you project for existed PostCSS config: `postcss.config.js`

in the project root, `"postcss"` section in `package.json`

or `postcss` in bundle config.

If you already use PostCSS, add the plugin to plugins list:

```diff

module.exports = {

  plugins: [

+   require('postcss-unwrap-mq')({

+     regex: /print/,

+   }),

    require('autoprefixer'),

  ],

}

```

If you do not use PostCSS, add it according to [official docs]

and set this plugin in settings.

[official docs]: https://github.com/postcss/postcss#usage