PostCSS plugin to transform W3C CSS Custom Media Queries to more compatible CSS
Clone or download
Failed to load latest commit information.
test Update dependencies May 12, 2017
.editorconfig First release Aug 12, 2014
.gitignore First release Aug 12, 2014
.travis.yml Update dependencies May 12, 2017 6.0.0 May 12, 2017
LICENSE 6.0.0 May 12, 2017 Update heading May 15, 2018
index.js 5.0.1 Feb 3, 2016
package.json 6.0.0 May 12, 2017

PostCSS Custom Media PostCSS Logo

NPM Version CSS Standard Status Build Status Support Chat

PostCSS Custom Media lets you use Custom Media Queries in CSS, following the CSS Media Queries specification.

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

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

/* becomes */

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


$ npm install postcss-custom-media


// 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()

Checkout tests for more examples.



(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)',


(default: false)

Allows you to preserve custom media query definitions in output.


(default: false)

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