postcss/docs/plugins.md

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

• 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

• postcss-color-function supports functions to transform colors.
• postcss-color-gray supports the gray() function.
• postcss-color-hex-alpha supports #rrggbbaa and #rgba notation.
• postcss-color-hwb transforms hwb() to widely compatible rgb().
• postcss-color-rebeccapurple supports the rebeccapurple color.
• postcss-conic-gradient supports the conic-gradient background.
• postcss-custom-media supports custom aliases for media queries.
• postcss-custom-properties supports variables, using syntax from the W3C Custom Properties.
• postcss-custom-selectors adds custom aliases for selectors.
• postcss-extend supports spec-approximate @extend for rules and placeholders, recursively.
• postcss-font-normalize to normalize font, especially font-family.
• postcss-font-variant transpiles human-readable font-variant to more widely supported CSS.
• postcss-host makes the Shadow DOM’s :host selector work properly with pseudo-classes.
• postcss-initial supports initial keyword and all: initial to clean inherit styles.
• postcss-logical-properties transforms start and end properties to left and right depending on the writing direction of the document.
• postcss-media-minmax adds <= and => statements to media queries.
• postcss-pseudo-class-any-link adds :any-link pseudo-class.
• postcss-selector-not transforms CSS4 :not() to CSS3 :not().
• postcss-selector-matches transforms CSS4 :matches() to more compatible CSS.
• postcss-apply supports custom properties sets references
• mq4-hover-shim supports the @media (hover) feature.

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

Fallbacks

• postcss-color-rgba-fallback transforms rgba() to hexadecimal.
• postcss-epub adds the -epub- prefix to relevant properties.
• postcss-esplit splits your CSS exceeding 4095 selectors for IE.
• postcss-fallback adds fallback function to avoid duplicate declarations.
• postcss-filter-gradient adds gradient filter for the old IE.
• postcss-flexibility adds -js- prefix for Flexibility polyfill.
• postcss-gradient-transparency-fix transforms transparent values in gradients to support Safari's different color interpolation.
• postcss-hash-classname append hash string to your css class name.
• postcss-mqwidth-to-class converts min/max-width media queries to classes.
• postcss-opacity adds opacity filter for IE8.
• postcss-pseudoelements Convert :: selectors into : selectors for IE 8 compatibility.
• postcss-round-subpixels plugin that rounds sub-pixel values to the nearest full pixel.
• postcss-unmq removes media queries while preserving desktop rules for IE≤8.
• postcss-vmin generates vm fallback for vmin unit in IE9.
• postcss-will-change inserts 3D hack before will-change property.
• autoprefixer adds vendor prefixes for you, using data from Can I Use.
• cssgrace provides various helpers and transpiles CSS 3 for IE and other old browsers.
• pixrem generates pixel fallbacks for rem units.

See also oldie plugins pack.

Language Extensions

• postcss-aspect-ratio fix an element's dimensions to an aspect ratio.
• postcss-atroot place rules directly at the root node.
• postcss-bem adds at-rules for BEM and SUIT style classes.
• postcss-conditionals adds @if statements.
• postcss-css-variables supports variables for selectors, and at-rules using W3C similar syntax.
• postcss-current-selector to get current selector in declaration.
• postcss-define-property to define properties shortcut.
• postcss-each adds @each statement.
• postcss-for adds @for loops.
• postcss-at-rules-variables adds support for custom properties in @for, @each, @if, etc.
• postcss-functions enables exposure of JavaScript functions.
• postcss-if-media inline or nest media queries within CSS rules & properties.
• postcss-local-constants adds support for localized constants.
• postcss-map enables configuration maps.
• postcss-match adds @match for Rust-style pattern matching.
• postcss-mixins enables mixins more powerful than Sass’, defined within stylesheets or in JS.
• postcss-media-variables adds support for var() and calc() in @media rules
• postcss-modular-scale adds a modular scale ms() function.
• postcss-namespace prefix a namespace to a selector.
• postcss-nested unwraps nested rules.
• postcss-nested-props unwraps nested properties.
• postcss-nested-vars supports nested Sass-style variables.
• postcss-pseudo-class-any-button adds :any-button pseudo-class for targeting all button elements.
• postcss-pseudo-class-enter transforms :enter into :hover and :focus.
• postcss-quantity-queries enables quantity queries.
• postcss-reverse-media reverse/Invert media query parameters.
• postcss-sassy-mixins enables mixins with Sass keywords.
• postcss-simple-extend lightweight extending of silent classes, like Sass’ @extend.
• postcss-simple-vars supports for Sass-style variables.
• postcss-strip-units strips units off of property values.
• postcss-vertical-rhythm adds a vertical rhythm unit based on font-size and line-height.
• postcss-vertical-rhythm-function adds a vertical rhythm vr() function that is unit agnostic and works in situations where the font-size cannot be calculated during build time.
• csstyle adds components workflow to your styles.

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

Colors

• postcss-ase-colors replaces color names with values read from an ASE palette file.
• postcss-brand-colors inserts company brand colors in the brand-colors module.
• postcss-color-alpha transforms #hex.a, black(alpha) and white(alpha) to rgba().
• postcss-color-hcl transforms hcl(H, C, L) and hcl(H, C, L, alpha) to #rgb and rgba().
• postcss-color-hexa transforms hexa(hex, alpha) into rgba format.
• postcss-color-mix mixes two colors together.
• postcss-color-palette transforms CSS 2 color keywords to a custom palette.
• postcss-color-pantone transforms pantone color to RGB.
• postcss-color-scale adds a color scale cs() function.
• postcss-color-short adds shorthand color declarations.
• postcss-color-yiq sets foreground colors using the YIQ color space.
• postcss-colorblind transforms colors using filters to simulate colorblindness.
• postcss-contrast checks background-color and gives either white or black.
• postcss-hexrgba adds shorthand hex rgba(hex, alpha) method.
• postcss-rgb-plz converts 3 or 6 digit hex values to rgb.
• postcss-rgba-hex converts rgba values to hex analogues.
• postcss-shades-of-gray helps keeping grayscale colors consistent to a gray palette.
• colorguard helps maintain a consistent color palette.
• postcss-get-color get the prominent colors from an image.

Images and Fonts

• postcss-assets allows you to simplify URLs, insert image dimensions, and inline files.
• postcss-assets-rebase rebases assets from url().
• postcss-at2x handles retina background images via use of at-2x keyword.
• postcss-cachebuster adds version parameter to images and fonts
• postcss-copy-assets copies assets referenced by relative url()s into a build directory.
• postcss-data-packer moves embedded Base64 data to a separate file.
• postcss-easysprites combine images to sprites, based on their image.png#hash and aspect ratio (@2x).
• postcss-image-set adds background-image with first image for image-set().
• postcss-image-inliner inlines local and remote images.
• postcss-instagram adds Instagram filters to filter.
• postcss-font-awesome adds an easy shortcut to font-awesome unicode codes
• postcss-font-pack simplifies font declarations and validates they match configured font packs.
• postcss-fontpath adds font links for different browsers.
• postcss-placehold makes it easy to drop in placeholder images.
• postcss-responsive-images adds stylesheets for making your images responsive.
• postcss-sprites generates CSS sprites from stylesheets.
• postcss-svg insert inline SVG to CSS and allows to manage it colors.
• postcss-svg-fallback converts SVG in your CSS to PNG files for IE 8.
• postcss-svgo processes inline SVG through SVGO.
• postcss-url rebases or inlines url()s.
• postcss-urlrev adds MD5 hash strings to url()s.
• postcss-write-svg write inline SVGs in CSS.
• postcss-inline-svg inline SVG images and customize their styles.
• webpcss adds URLs for WebP images for browsers that support WebP.

Grids

• postcss-grid adds a semantic grid system.
• postcss-grid-system creates grids based on a fixed column width.
• postcss-grid-fluid creates fluid grids.
• postcss-layout a plugin for some common CSS layout patterns and a Grid system.
• postcss-maze is a mobile first, semantic responsive grid to suit any design pattern.
• postcss-neat is a semantic and fluid grid framework.
• postcss-oldschool-grid is a grid system with wrapping columns and padding gutters.
• postcss-simple-grid create grid with one line.
• lost feature-rich calc() grid system by Jeet author.

Optimizations

• postcss-calc reduces calc() to values (when expressions involve the same units).
• postcss-combine-duplicated-selectors automatically join identical css selectors.
• postcss-filter-mq Filter all matching or non-matching media queries.
• postcss-import inlines the stylesheets referred to by @import rules.
• postcss-partial-import inlines standard imports and Sass-like partials.
• postcss-reference emulates Less’s [@import (reference)].
• postcss-remove-root removes all instances of :root from a stylesheet.
• postcss-single-charset ensures that there is one and only one @charset rule at the top of file.
• postcss-zindex rebases positive z-index values.
• css-byebye removes the CSS rules that you don’t want.
• css-mqpacker joins matching CSS media queries into a single statement.
• stylehacks removes CSS hacks based on browser support.
• postcss-mq-optimize removes invalid media queries or its expresions.

See also plugins in modular minifier cssnano.

Shortcuts

• postcss-alias creates shorter aliases for properties.
• postcss-alias-atrules creates shorter aliases for at-rules.
• postcss-all-link-colors insert colors for link-related pseudo-classes.
• postcss-border adds shorthand for width and color of all borders in border property.
• postcss-border-shortcut PostCSS plugin for assign default border type if not expressed.
• postcss-button creates buttons.
• postcss-center centers elements.
• postcss-circle inserts a circle with color.
• postcss-clearfix adds fix and fix-legacy properties to the clear declaration.
• postcss-crip shorthand properties for Crips that are too lazy to write.
• postcss-default-unit adds default unit to numeric CSS properties.
• postcss-easings replaces easing names from easings.net with cubic-bezier() functions.
• postcss-filter adds shorthand for black and white filter.
• postcss-focus adds :focus selector to every :hover.
• postcss-generate-preset allows quick generation of rules. Useful for creating repetitive utilities.
• postcss-hidden allows for easy ways to hide elements.
• postcss-input-style adds new pseudo-elements for cross-browser styling of inputs.
• postcss-position adds shorthand declarations for position attributes.
• postcss-property-lookup allows referencing property values without a variable.
• postcss-responsive-type changes font-size depends on screen size.
• postcss-scrib define your own aliases/shortcuts for properties or values.
• postcss-short-font-size extends font-size to define line-height s a second value.
• postcss-short-position extends position to define edges as additional values.
• postcss-short-spacing extends margin and padding to allow or omitted edges.
• postcss-short-text adds a text shortcut property for several text-related properties.
• postcss-size adds a size shortcut that sets width and height with one declaration.
• postcss-speech-bubble adds speech bubbles of different kinds with just a couple of lines of CSS.
• postcss-transform-shortcut allows shorthand transform properties in CSS.
• postcss-triangle creates a triangle.
• postcss-typescale sets type based on a typographic scale.
• postcss-verthorz adds vertical and horizontal spacing declarations.
• font-magician generates all the @font-face rules needed in CSS.
• postcss-animation PostCSS plugin that adds @keyframes from animate.css.
• postcss-magic-animations PostCSS plugin that adds @keyframes from Magic Animations.

Others

• postcss-attribute-selector-prefix adds a prefix to attribute selectors
• postcss-autoreset automatically adds reset styles.
• postcss-camelcaser transforms selectors to camelcase.
• postcss-class-prefix adds a prefix/namespace to class selectors.
• postcss-currency replaces name of currency with symbols.
• postcss-extract-value extracts values from css properties and puts them into variables.
• postcss-fakeid transforms #foo IDs to attribute selectors [id="foo"].
• postcss-filter-stream blacklist files / folders that you don't want to process with a PostCSS plugin.
• postcss-flexbox easy way to understand and start using CSS3 Flexbox.
• postcss-flexboxfixer unprefixes -webkit- only flexbox in legacy CSS.
• postcss-flexbugs-fixes fixes some of known flexbox bugs.
• postcss-gradientfixer unprefixes -webkit- only gradients in legacy CSS.
• postcss-ie8 strips out unsupported properties and mediaqueries for IE8.
• postcss-increase-specificity increases the specificity of your selectors.
• • postcss-inline-rtl converts your CSS to right-to-left, but inline (adding just what you need).
• postcss-modules allows to use CSS Modules everywhere.
• postcss-mq-keyframes moves any animation keyframes in media queries to the end of the file.
• postcss-pseudo-content-insert adds content: '' to :before and :after if it is missing.
• postcss-pseudo-elements-content adds content: '' to :before-c and :after-c.
• postcss-pxtorem converts pixel units to rem.
• postcss-raw protects nodes inside @raw at-rules from being touched by other plugins.
• postcss-remove-prefixes removes vendor prefixes.
• postcss-safe-important adds !important to style declarations safely.
• postcss-sanitize remove properties and values using rules (css sanitization).
• postcss-scopify adds a user input scope to each selector.
• postcss-select select rules based off a selector list.
• postcss-selector-prefixer adds a prefix to css selectors.
• postcss-shorthand-expand expands shorthand properties.
• postcss-sorting sort rules content with specified order.
• postcss-style-guide generates a style guide automatically.
• css-declaration-sorter sorts CSS declarations fast and automatically in a certain order.
• perfectionist formats poorly written CSS and renders a “pretty” result.
• rtlcss mirrors styles for right-to-left locales.
• stylefmt modern CSS formatter that works well with stylelint.

Analysis

• postcss-bem-linter lints CSS for conformance to SUIT CSS methodology.
• postcss-cssstats returns an object with CSS statistics.
• postcss-regexp-detect search for regexp in CSS declarations.
• css2modernizr creates a Modernizr config file that requires only the tests that your CSS uses.
• doiuse lints CSS for browser support, using data from Can I Use.
• immutable-css lints CSS for class mutations.
• list-selectors lists and categorizes the selectors used in your CSS, for code review.

Reporters

• postcss-browser-reporter displays warning messages from other plugins right in your browser.
• postcss-reporter logs warnings and other messages from other plugins in the console.

Fun

• postcss-australian-stylesheets Australian Style Sheets.
• postcss-andalusian-stylesheets Andalusian Style Sheets.
• postcss-canadian-stylesheets Canadian Style Sheets.
• postcss-chinese-stylesheets Chinese Style Sheets.
• postcss-czech-stylesheets Czech Style Sheets.
• postcss-german-stylesheets German Style Sheets.
• postcss-russian-stylesheets Russian Style Sheets.
• postcss-swedish-stylesheets Swedish Style Sheets.
• postcss-tatar-stylesheets Tatar Style Sheets
• postcss-trolling Trolling Style Sheets.
• postcss-lolcat-stylesheets Lolspeak Style Sheets.
• postcss-imperial adds CSS support for Imperial and US customary units of length.
• postcss-russian-units adds CSS support for russian units of length.
• postcss-pointer Replaces pointer: cursor with cursor: pointer.
• postcss-spiffing lets you use British English in your CSS.
• postcss-spanish-stylesheets Spanish Style Sheets.