Permalink
718 lines (673 sloc) 46 KB

PostCSS Plugins

Control

There are two ways to make PostCSS magic more explicit.

Limit a plugin's local stylesheet context using postcss-plugin-context:

.css-example.is-test-for-css4-browsers {
    color: gray(255, 50%);
}
@context cssnext {
    .css-example.is-fallback-for-all-browsers {
        color: gray(255, 50%);
    }
}

Or enable plugins directly in CSS using postcss-use:

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

:fullscreen a {
    display: flex
}

Packs

  • 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.
  • cssnext contains plugins that allow you to use future CSS features today.
  • 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.

Future CSS Syntax

See also cssnext plugins pack to add future CSS syntax by one line of code.

Fallbacks

See also oldie plugins pack.

Language Extensions

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

Colors

Images and Fonts

Grids

Optimizations

See also plugins in modular minifier cssnano.

Shortcuts

Others

Analysis

Reporters

Fun