PostCSS plugin to transform W3C CSS Custom Media Queries to more compatible CSS
JavaScript
Clone or download
Permalink
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
CHANGELOG.md 6.0.0 May 12, 2017
LICENSE 6.0.0 May 12, 2017
README.md Update README.md heading May 15, 2018
index.js 5.0.1 Feb 3, 2016
package.json 6.0.0 May 12, 2017

README.md

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 */
}

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

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