Package Exports

postcss-custom-media

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (postcss-custom-media) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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.

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

JSPM