level4
Use W3C CSS Level 4 Modules Today
Last updated 5 years ago by stephenway .
ISC · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install level4 
SYNC missed versions from official npm registry.

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

Current Tags

  • 1.0.1                                ...           latest (5 years ago)

2 Versions

  • 1.0.1                                ...           5 years ago
  • 1.0.0                                ...           5 years ago
Maintainers (1)
Downloads
Today 0
This Week 0
This Month 2
Last Day 0
Last Week 1
Last Month 1
Dev Dependencies (3)
Dependents (1)

Copyright 2014 - 2017 © taobao.org |