Skip to content

Latest commit

 

History

History
952 lines (894 loc) · 60.2 KB

plugins.md

File metadata and controls

952 lines (894 loc) · 60.2 KB
Raw

PostCSS Plugins

Table of Contents

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 postcss-preset-env {
  .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.
  • oldie contains plugins that transform your CSS for older Internet Explorer compatibility.
  • 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.
  • postcss-ui-theme gives you syntax sugar and allows you to change theme.

Future CSS Syntax

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

Fallbacks

See also oldie plugins pack.

Language Extensions

Colors

Images and Fonts

Grids

Optimizations

See also plugins in modular minifier cssnano.

Shortcuts

Others

Analysis

Reporters

Fun