postcss-unwrap-mq

PostCSS plugin to extract matched media queries to their parents

Usage no npm install needed!

<script type="module">
  import postcssUnwrapMq from 'https://cdn.skypack.dev/postcss-unwrap-mq';
</script>

README

PostCSS Unwrap Mq

PostCSS plugin to extract matched media queries to their parents.

.foo {
    /* Input example */
}

@media print {
  .bar {
  }
}

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

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.