level4
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;var postcss = require;var contrast = require; var css = fs.readFileSync; var output = . .process .css;
Custom Properties
Transform var()
functions to compatible values.
/* compiles to */
Custom Media
Define reusable media queries. Used with media minmax you can write some beautiful media queries.
@)); {/* compiles to */ {
Custom Selectors
Define reusable custom selectors.
@ /* compiles to */
Color Function
Transform color values at will. See everything you can do with this in interface
/* compiles to */
gray()
Color Transform gray()
function to rgba()
equivalent.
/* compiles to */
Color Hex Alpha
Transform #RRGGBBAA
or #RGBA
to rgba()
.
/* compiles to */
hwb()
Color Transform hwb()
colors to rgba()
.
/* compiles to */
Font Variant
Transforms font-variant-*
property to the more supported
font-feature-settings
.
/* compiles to */
:matches()
Simplifies :matches()
pseudo selectors.
) /* compiles to */
:not()
Transforms level 4 :not()
to a level 3 selector.
/* compiles to */
:any-link
Transforms :any-link
to :link
and :visited
.
/* compiles to */
Media Minmax
Transform >=
/<=
operators into working min-
/max-
prefixes.
{/* compiles to */ {
Nesting
You are able to write both types of nesting with this feature.
@} /* compiles to */
You can also combine this with custom-media.
Plugins
A collection of plugins that power level4 with reference to the drafts they support..
- postcss-custom-properties for css-variables
- postcss-custom-media for mediaqueries/custom-mq
- postcss-custom-selectors for css-extensions/custom-selectors
- postcss-color-function for css-color/modifying-colors
- postcss-color-gray for css-color/grays
- postcss-color-hex-alpha for css-color/hex-notation
- postcss-color-hwb for css-color/the-hwb-notation
- postcss-font-variant for css-fonts/propdef-font-variant
- postcss-selector-matches for selectors-4/matches
- postcss-selector-not for selectors-4/negation
- postcss-pseudo-class-any-link for selectors4/the-any-link-pseudo
- postcss-color-rebeccapurple for css-color/valdef-color-rebeccapurple
- postcss-media-minmax for mediaqueries/mq-min-max
- postcss-nested for css-nesting
- postcss-nesting for css-nesting
Contributing
Make a branch, npm test
often, submit a new pull when it passes.
git clone https://github.com/stephenway/level4.gitgit checkout -b patch-1npm inpm test