Find file Copy path
797 lines (751 sloc) 52.4 KB

PostCSS Plugins


There are two ways to make PostCSS magic more explicit.

Limit a plugin's local stylesheet context using postcss-plugin-context: {
  color: gray(255, 50%);
@context postcss-preset-env { {
    color: gray(255, 50%);

Or enable plugins directly in CSS using postcss-use:

@use autoprefixer(browsers: ['last 2 versions']);

:fullscreen a {
  display: flex;


  • postcss-utilities includes the most commonly used mixins, shortcuts and helpers to use as @util rules.
  • atcss contains plugins that transform your CSS according to special annotation comments.
  • cssnano contains plugins that optimize CSS size for use in production.
  • oldie contains plugins that transform your CSS for older Internet Explorer compatibility.
  • precss contains plugins that allow you to use Sass-like CSS.
  • rucksack contains plugins to speed up CSS development with new features and shortcuts.
  • level4 contains only plugins that let you write CSS4 without the IE9 fallbacks.
  • short adds and extends numerous shorthand properties.
  • stylelint contains plugins that lint your stylesheets.
  • postcss-hamster for vertical rhythm, typography, modular scale functions.
  • 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.

Future CSS Syntax

See also [posctss-preset-env] plugins pack to add future CSS syntax by one line of code.


See also oldie plugins pack.

Language Extensions

See also precss plugins pack to add them by one line of code.


Images and Fonts



See also plugins in modular minifier cssnano.