rlugojr/postcss-custom-media

PostCSS plugin to transform W3C CSS Custom Media Queries to more compatible CSS

postcss-custom-media

PostCSS plugin to transform W3C CSS Custom Media Queries syntax to more compatible CSS.

Installation

$ npm install postcss-custom-media

Usage

// dependencies
var postcss = require("postcss")
var customMedia = require("postcss-custom-media")

// css to be processed
var css = fs.readFileSync("input.css", "utf8")

// process css using postcss-custom-media
var out = postcss()
  .use(customMedia())
  .process(css)
  .css

Using this input.css:

@custom-media --small-viewport (max-width: 30em);

@media (--small-viewport) {
  /* styles for small viewport */
}

you will get:

@media (max-width: 30em) {
  /* styles for small viewport */
}

Checkout tests for more examples.

Options

extensions

(default: {})

Allows you to pass an object to define the <media-query-list> for each <extension-name>. These definitions will override any that exist in the CSS.

{
  '--phone': '(min-width: 544px)',
  '--tablet': '(min-width: 768px)',
  '--desktop': '(min-width: 992px)',
  '--large-desktop': '(min-width: 1200px)',
}

preserve

(default: false)

Allows you to preserve custom media query definitions in output.

appendExtensions

(default: false)

This option only works if preserve is truthy. Allows you to append your extensions at end of your CSS.

---

Changelog

License