Use W3C CSS Level 4 Modules Today with PostCSS. Take advantage of future techniques like variables, custom selectors, color functions, and new pseudo selectors.

Install

npm i --save-dev level4

Usage

var fs = require('fs');
var postcss = require('postcss');
var contrast = require('level4');
var css = fs.readFileSync('input.css', 'utf8');
var output = postcss()
  .use(level4())
  .process(css)
  .css;

Custom Properties

Transform var() functions to compatible values.

:root {
  --color: green;
}
div {
  color: var(--color);
}
/* compiles to */
div {
  color: green;
}

Custom Media

Define reusable media queries. Used with media minmax you can write some beautiful media queries.

@custom-media --name (width >= 10em) and (width <= 40em);
@media (--name) { ... }
/* compiles to */
@media screen and (min-width: 10em) and (max-width: 40em) { ... }

Custom Selectors

Define reusable custom selectors.

@custom-selector :--headings h1, h2, h3, h4, h5, h6;
:--headings + p { ... }
/* compiles to */
h1 + p,
h2 + p,
h3 + p,
h4 + p,
h5 + p,
h6 + p { ... }

Color Function

Transform color values at will. See everything you can do with this in interface

div {
  color: color(green a(90%));
}
/* compiles to */
div {
  color: rgba(0, 128, 0, 0.9);
}

Color `gray()`

Transform gray() function to rgba() equivalent.

div {
  background: gray(255, 50%);
  color: gray(0);
}
/* compiles to */
div {
  background: rgba(255, 255, 255, 0.5);
  color: rgb(0, 0, 0);
}

Color Hex Alpha

Transform #RRGGBBAA or #RGBA to rgba().

div {
  background: #9823f834;
  color: #9d9c;
}
/* compiles to */
div {
  background: rgba(152, 35, 248, 0.20392);
  color: rgba(153, 221, 153, 0.8);
}

Color `hwb()`

Transform hwb() colors to rgba().

div {
  background: hwb(90, 0%, 0%, .5);
  color: hwb(190, 50%, 0%);
}
/* compiles to */
div {
  background: rgba(128, 255, 0, 0.5);
  color: rgb(128, 234, 255);
}

Font Variant

Transforms font-variant-* property to the more supported font-feature-settings.

h1 {
  font-variant-caps: small-caps;
}
table {
  font-variant-numeric: lining-nums;
}
/* compiles to */
h1 {
  font-feature-settings: "c2sc";
  font-variant-caps: small-caps;
}
table {
  font-feature-settings: "lnum";
  font-variant-numeric: lining-nums;
}

`:matches()`

Simplifies :matches() pseudo selectors.

li:matches(:last-child, .fancy) { ... }
/* compiles to */
li:last-child, li.fancy { ... }

`:not()`

Transforms level 4 :not() to a level 3 selector.

li:not(:last-child, .fancy) { ... }
/* compiles to */
li:not(:last-child):not(.fancy) { ... }

`:any-link`

Transforms :any-link to :link and :visited.

a:any-link { ... }
/* compiles to */
a:link,a:visited { ... }

Media Minmax

Transform >=/<= operators into working min-/max- prefixes.

@media screen and (width >= 10em) and (width <= 40em) { ... }
/* compiles to */
@media screen and (min-width: 10em) and (max-width: 40em) { ... }

Nesting

You are able to write both types of nesting with this feature.

div {
  color blue;
  & div {
    color: green;
  }
  @nest body & {
    color: yellow;
  }
}
/* compiles to */
div {
  color: blue;
}
div div {
  color: green;
}
body div {
  color: yellow;
}

You can also combine this with custom-media.

Plugins

A collection of plugins that power level4 with reference to the drafts they support..

Contributing

Make a branch, npm test often, submit a new pull when it passes.

git clone https://github.com/stephenway/level4.git
git checkout -b patch-1
npm i
npm test