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 {
}

CSS input

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

CSS output

Use tomorrow's CSS, today!

Write future-proof CSS and forget old preprocessor specific syntax. Use the latest CSS syntax today with cssnext. It transforms CSS specs into more compatible CSS so you don’t need to wait for browser support.

:root { 
  --red: #d33;
}
a { 
  &:hover {
    color: color(var(--red) a(54%));
  }
}

CSS input

a:hover { 
  color: #dd3333;
  color: rgba(221, 51, 51, 0.54);
}

CSS output

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;
}

CSS input

.Logo__name__SVK0g {
  color: gray;
}

CSS output

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;
}

CSS input

app.css
2:10 Invalid hex color

Console output

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 
}

CSS input

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; 
}

CSS output

Trusted by industry leaders

Is your company using PostCSS? Let us know!