CSS Custom Properties in @media and @custom-media

PostCSS plugin to use CSS Custom Properties in @media and @custom-media query parameters. Use ":root" scope only!

There's no specification for this!, but based on the specifications:

• W3C CSS Custom Properties
• W3C CSS Custom Media Queries

Example

/* input */
:root {
  --column-width: 300px;
  --columns-gap: 20px;
  --two-column: calc(2 * (var(--column-width) + var(--columns-gap)) + var(--columns-gap));
}

@custom-media --media-two-columns (min-width: var(--two-column));

@media (min-width: calc(3 * (var(--column-width) + var(--columns-gap)) + var(--columns-gap))) {}


/* becomes */


@custom-media --media-two-columns (min-width: calc(2 * (300px + 20px) + 20px));

@media (min-width: calc(3 * (300px + 20px) + 20px)) {}

Install

npm install postcss-media-properties --save-dev

Usage

Every other plugin is optional, but use this plugin first. Recommended to use postcss-calc plugin for fix calc nesting.

• postcss-media-properties
• postcss-custom-media
• postcss-calc
• postcss-media-minmax

Example

const fs = require('fs');
const postcss = require('postcss');

const postcssMediaProperties = require('postcss-media-properties');
const postcssCustomMedia = require('postcss-custom-media');
const postcssCalc = require('postcss-calc');
const postcssMediaMinmax = require('postcss-media-minmax');

const inputRaw = fs.readFileSync('input.css', 'utf8');

// Process your CSS
const outputCss = postcss()
                  .use(postcssMediaProperties())
                  .use(postcssCustomMedia(/* options */))
                  .use(postcssCalc({ mediaQueries: true, /* other options */}))
                  .use(postcssMediaMinmax(/* options */))
                  .process(cssRaw, { /* options */ })
                  .css;

fs.writeFileSync('output.css', outputCss, 'utf8');

For more exapmles, see PostCSS usage guide

Non-Standard functionality

This plugin is created in personal needs. Use CSS Custom Properties as part of media query not included in the standard or draft. But it's very convenient at large projects.

Changelog

License