PostCSS

A tool for transforming CSS with JavaScript.

Increase code readability

Add vendor prefixes to CSS rules using values from Can I Use. Autoprefixer will use the data based on current browser popularity and property support to apply prefixes for you.

:fullscreen {
}

:-webkit-:full-screen {
}
:-moz-:full-screen {
}
:full-screen {
}

Use tomorrow’s CSS today!

PostCSS Preset Env lets you convert modern CSS into something most browsers can understand, determining the polyfills you need based on your targeted browsers or runtime environments, using CSSdb.

@custom-media --med (width <= 50rem);

@media (--med) {
  a { 
    &:hover {
      color: color-mod(black alpha(54%));
    }
  }
}

@media (max-width: 50rem) {
  a:hover  { 
    color: rgba(0, 0, 0, 0.54);
  }
} 

The end of global CSS

CSS Modules means you never need to worry about your names being too generic, just use whatever makes the most sense.

.name {
  color: gray;
}

.Logo__name__SVK0g {
  color: gray;
}

Avoid errors in your CSS

Enforce consistent conventions and avoid errors in your stylesheets with stylelint, a modern CSS linter. It supports the latest CSS syntax, as well as CSS-like syntaxes, such as SCSS.

a { 
  color: #d3;
}

app.css
2:10 Invalid hex color

Powerful grid system

LostGrid makes use of calc() to create stunning grids based on fractions you define without having to pass a lot of options.

div {
  lost-column: 1/3 
}

div {
  width: calc(99.9% * 1/3 -  
  (30px - 30px * 1/3)); 
}
div:nth-child(1n) {
  float: left; 
  margin-right: 30px; 
  clear: none; 
}
div:last-child {
  margin-right: 0; 
}
div:nth-child(3n) {
  margin-right: 0; 
  float: right; 
}
div:nth-child(3n + 1) {
  clear: both; 
}

official postcss.org