postcss-preset-kensho

postcss-preset-kensho is the standard postcss pipeline used across Kensho projects. It includes:

• Autoprefixing
• Nesting
• Variables

Install

$ npm i -D postcss-preset-kensho

Usage

Add the plugin to your postcss.config.js:

module.exports = {
  plugins: [require('postcss-preset-kensho')],
}

Features

Autoprefixing

Vendor prefixes are automatically added to properties, at rules, etc.

Nesting

Selectors can be nested as you'd expect from frameworks like LESS, Sass, etc.

.foo {
  color: red;
 
  .bar {
    color: blue;
  }
 
  &:first-child {
    color: yellow;
  }
}
 
/* becomes: */
 
.foo {
  color: red;
}
 
.foo .bar {
  color: blue;
}
 
.foo:first-child {
  color: yellow;
}

Variables

Variables conform to a transpilable subset of the native CSS spec. They are declared within the :root selector and invoked with the var(name) function:

:root {
  --size: 5px;
}
 
.foo {
  width: var(--size);
}

Global variables can be injected by passing {variables: {...[name]: value}} as an option.