PostCSS plugin to transform W3C CSS Custom Media Queries to more compatible CSS
JavaScript
Latest commit c1bfe9f Feb 3, 2016 @MoOx MoOx 5.0.1
Permalink
Failed to load latest commit information.
test 5.0.1 Feb 3, 2016
.editorconfig First release Aug 12, 2014
.gitignore First release Aug 12, 2014
.travis.yml 5.0.1 Feb 3, 2016
CHANGELOG.md 5.0.1 Feb 3, 2016
LICENSE Fix npm description Nov 9, 2014
README.md 4.0.0 Jun 17, 2015
index.js 5.0.1 Feb 3, 2016
package.json 5.0.1 Feb 3, 2016

README.md

postcss-custom-media Build Status

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.


Changelog

License