Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including postcss-custom-media with all npm packages installed. Try it out:

var postcssCustomMedia = require("postcss-custom-media")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

postcss-custom-media v6.0.0

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

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.

{
  '--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

Metadata

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free