Skip to content
Use W3C CSS Level 4 Modules Today with PostCSS
JavaScript
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
test
.editorconfig
.eslintrc
.gitignore
.npmignore
.travis.yml
LICENSE
README.md
giticon.png
gulpfile.js
index.js
package.json

README.md

level4 Travis Build Status

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

Resources

You can’t perform that action at this time.