postcss-cssnext features

• automatic vendor prefixes
• custom properties & `var()`
• custom properties set & `@apply`
• reduced `calc()`
• custom media queries
• media queries ranges
• custom selectors
• nesting
• `image-set()` function
• `color()` function
• `hwb()` function
• `gray()` function
• `#rrggbbaa` colors
• `rgba` function (`rgb` fallback)
• `rebeccapurple` color
• `font-variant` property
• `filter` property
• `initial` value
• `rem` unit (`px` fallback)
• `:any-link` pseudo-class
• `:matches` pseudo-class
• `:not` pseudo-class
• `::` pseudo syntax (`:` fallback)
• `overflow-wrap` property (`word-wrap` fallback)
• attribute case insensitive
• `rgb()` function (functional-notation)
• `hsl()` function (functional-notation)
• `system-ui` font-family
• @todo

Note that according to your browser scope some transformations can be skipped to avoid extra useless output. Eg: if you use don’t cover IE 8, rem fallback and rgba fallback might be skipped.

# automatic vendor prefixes

Vendor prefixes are automatically added (and removed if deprecated/useless depending on your browser scope) using autoprefixer.

# custom properties & var()

The current transformation for custom properties aims to provide a future-proof way of using a limited to :root selector of the features provided by native CSS custom properties.

:root {
  --mainColor: red;
}

a {
  color: var(--mainColor);
}

⚠️ The definitions are limited to :root selector.

Specification | Plugin documentation

# custom properties set & @apply

Allows you to store a set of properties in a named custom property, then reference them in other style rules.

:root {
  --danger-theme: {
    color: white;
    background-color: red;
  }
}

.danger {
  @apply --danger-theme;
}

⚠️ The definitions are limited to :root selector.

Specification | Plugin documentation

# reduced calc()

Allows you to use safely calc with custom properties by optimizing previously parsed var() references.

:root {
  --fontSize: 1rem;
}

h1 {
  font-size: calc(var(--fontSize) * 2);
}

Specification | Plugin documentation

# custom media queries

A nice way to have semantic media queries.

@custom-media --small-viewport (max-width: 30em);
/* check out media queries ranges for a better syntax !*/

@media (--small-viewport) {
  /* styles for small viewport */
}

Specification | Plugin documentation

# media queries ranges

Allows to replace min-/max- with <= & >= (syntax easier to read).

@media (width >= 500px) and (width <= 1200px) {
  /* your styles */
}

/* or coupled with custom media queries */
@custom-media --only-medium-screen (width >= 500px) and (width <= 1200px);

@media (--only-medium-screen) {
  /* your styles */
}

Specification | Plugin documentation

# custom selectors

Allows you to create your own selectors.

@custom-selector :--button button, .button;
@custom-selector :--enter :hover, :focus;

:--button {
  /* styles for your buttons */
}
:--button:--enter {
  /* hover/focus styles for your button */
  /* Read more about :enter proposal */
  /* http://discourse.specifiction.org/t/a-common-pseudo-class-for-hover-and-focus/877 */
}

Specification | Plugin documentation

# nesting

Allows you to nest selectors.

a {
  /* direct nesting (& MUST be the first part of selector)*/
  & span {
    color: white;
  }

  /* @nest rule (for complex nesting) */
  @nest span & {
    color: blue;
  }

  /* media query automatic nesting */
  @media (min-width: 30em) {
    color: yellow;
  }
}

Specification | Plugin documentation

# image-set() function

Allows you to set different images for each kind of resolution of user device.

.foo {
  background-image: image-set(
    url(img/test.png) 1x,
    url(img/test-2x.png) 2x,
    url(my-img-print.png) 600dpi
  );
}

Specification | Plugin documentation

# color() function

A color function to modify colors (transpiled to: rgba()).

a {
  color: color(red alpha(-10%));
}

a:hover {
  color: color(red blackness(80%));
}

There is a lot of color modifiers available, so be sure to check them !

Specification | Plugin documentation

# hwb() function

Similar to hsl() but easier for humans to work with (transpiled to: rgba()).

body {
  color: hwb(90, 0%, 0%, 0.5);
}

Specification | Plugin documentation

# gray() function

Allows you to use more than 50 shades of gray (transpiled to: rgba()). For the first argument, you can use a number between 0 and 255 or a percentage.

.foo {
  color: gray(85);
}

.bar {
  color: gray(10%, 50%);
}

Specification | Plugin documentation

# #rrggbbaa colors

Allows you to use 4 or 8 digits hexadecimal notation (transpiled to: rgba()).

body {
  background: #9d9c;
}

Specification | Plugin documentation

# rgba function (rgb fallback)

Add solid colors fallback for rgba colors (if your browser scope covers old browsers, eg: IE8).

body {
  background: rgba(153, 221, 153, 0.8);
  /* you will have the same value without alpha as a fallback */
}

Specification | Plugin documentation

# rebeccapurple color

Allows you to use the new color keyword as a homage to Eric Meyer’s daughter.

body {
  color: rebeccapurple;
}

Specification | Plugin documentation

# font-variant property

properties (fallback: font-feature-settings).

h2 {
  font-variant-caps: small-caps;
}

table {
  font-variant-numeric: lining-nums;
}

font-variant are transformed to font-feature-settings. You might take a look at the support of font feature settings.

Specification | Plugin documentation

# filter property

The W3C filters are only transformed as svg filter using the url(data:*) trick for Firefox < 35.

.blur {
  filter: blur(4px);
}

Specification | Plugin documentation

# initial value

Allows you to use initial value for any property. This value represents the value specified as the property’s initial value. It does not mean browser default.

For example, for the display property, initial always means inline, because that’s the designated initial value of the property. As an example, using div { display: initial }, will not be block, but inline.

div {
  display: initial; /* inline */
}

Killer feature :

div {
  all: initial; /* use initial for ALL PROPERTIES in one shot */
}

Specification | Plugin documentation

# rem unit (px fallback)

rem fallback to px (if your browser scope covers old browsers, eg: IE8).

h1 {
  font-size: 1.5rem;
}

Specification | Plugin documentation

# :any-link pseudo-class

Allows you to use :any-link pseudo class.

nav :any-link {
  background-color: yellow;
}

Specification | Plugin documentation

# :matches pseudo-class

Allows you to use :matches().

p:matches(:first-child, .special) {
  color: red;
}

Specification | Plugin documentation

# :not pseudo-class

Allows you to use :not() level 4 (which allows multiples selector). Transformed to :not() level 3 (which allows only one selector).

p:not(:first-child, .special) {
  color: red;
}

Specification | Plugin documentation

# :: pseudo syntax (: fallback)

Adjust :: to : (if your browser scope covers old browsers, eg: IE8).

a::before {
  /* ... */
}

Specification | Plugin documentation

# overflow-wrap property (word-wrap fallback)

Converts overflow-wrap to word-wrap (many browsers only support the old word-wrap property).

body {
  overflow-wrap: break-word;
}

Specification | Plugin documentation

# attribute case insensitive

Allows you to use case insensitive attributes.

[frame="hsides" i] {
  border-style: solid none;
}

Specification | Plugin documentation

# rgb() function (functional-notation)

Allows you to use its new syntax consisting of space-separated arguments and an optional slash-separated opacity.

You can also use number for color channels.

The alpha value accepts percentage as well as number and has been added to rgb() as optional argument. As a result, rgb() and rgba() are now aliases of each other.

div {
  background-color: rgb(100 222.2 100.9 / 30%);
}

Specification | Plugin documentation

# hsl() function (functional-notation)

Allows you to use its new syntax consisting of space-separated arguments and an optional slash-separated opacity.

hsl() now accepts angles (deg, grad, rad, turn) as well as numbers for hues and an optional percentage or number for alpha value. So, hsl() and hsla() are now aliases of each other too.

div {
  color: hsl(90deg 90% 70%);
  background-color: hsl(300grad 25% 15% / 70%);
}

Specification | Plugin documentation

# system-ui font-family

Allows you to use system-ui generic font-family. The current transformation provides a practical font-family list as fallback.

body {
  font-family: system-ui;
}

Specification | Plugin documentation

# @todo

Any omissions of the CSS specifications (even in draft) that are subject to be handled by cssnext are not intentional. You can take a look at the list of features that are waiting to be implemented. Feel free to work on a feature ready to be added, or open a new issue if you find something that should be handled. Keep in mind that, as of right now, this project is intended to support new CSS syntax only.