PostCSS Plugins

Table of Contents

Control
Packs
Future CSS Syntax
Fallbacks
Language Extensions
Images and Fonts
Grids
Optimizations
Shortcuts
Others
Analysis
Reporters
Fun

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

postcss-apply supports custom properties sets references.
postcss-attribute-case-insensitive supports case insensitive attributes.
postcss-bidirection generate left-to-right and right-to-left styles with single 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-hsl: transforms CSS Colors 4 hsl() to more compatible hsl() or hsla().
postcss-color-hwb transforms hwb() to widely compatible rgb().
postcss-color-image supports image(<color>) syntax allowing to use a solid color as an image.
postcss-color-rebeccapurple supports the rebeccapurple color.
postcss-color-rgb: transforms CSS Colors 4 rgb() to more compatible rgb() or rgba().
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-format-keywords transforms keywords in @font-face rule’s format() function to widely supported strings.
postcss-font-normalize to normalize font, especially font-family.
postcss-font-variant transpiles human-readable font-variant to more widely supported CSS.
postcss-font-family-system-ui transforms W3C CSS font-family: system-ui to a practical font list.
postcss-font-display add font-display css rule.
postcss-if-function transforms if() function for media() and supports() to @media and @supports queries.
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-multi-value-display transforms inline flex and block flow to inline-flex and block
postcss-pseudo-class-any-link adds :any-link pseudo-class.
postcss-pseudo-is transforms :is() to more compatible CSS.
postcss-selector-not transforms CSS4 :not() to CSS3 :not().
postcss-selector-matches transforms CSS4 :matches() to more compatible CSS.
postcss-start-to-end lets you control your layout (LTR or RTL) through logical rather than direction / physical rules.
postcss-subgrid provides a basic shim for the CSS display: subgrid spec.
mq4-hover-shim supports the @media (hover) feature.

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

Fallbacks

postcss-auto-var-fallback adds var fallbacks by provided files of variables.
postcss-color-rgba-fallback transforms rgba() to hexadecimal.
postcss-disabled adds a [disabled] attribute and/or a .disabled class when the :disabled pseudo class is present.
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-opacity-percentage transforms CSS4 percentage-based opacity values to float values.
postcss-page-break adds page-break- fallback to break- properties.
postcss-pseudoelements Convert :: selectors into : selectors for IE 8 compatibility.
postcss-redundant-color-vars adds custom property for certain border and box-shadow declarations to fix a known Safari bug
postcss-replace-overflow-wrap replace overflow-wrap with word-wrap.
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.
postcss-pie makes IE several of the most useful CSS3 decoration features.
cssgrace provides various helpers and transpiles CSS 3 for IE and other old browsers.
pixrem generates pixel fallbacks for rem units.
postcss-fixie adds easy and painless IE hacks
postcss-safe-area adds browser fallbacks for safe-area-inset env variables.
webp-in-css to use WebP background images in CSS.
postcss-clamp transform clamp() to combination of min/max
postcss-spring-easing replaces spring() with a resulting linear() function and add a --spring-duration css variable.

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-fix adds at-rules for BEM and SUIT style classes.
postcss-click allows to use the :click pseudo class and implement it in JavaScript.
postcss-compact-mq provides compact syntax for media queries based on viewport width.
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-define-function to implement Sass @function directive.
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-inline-extract extract inline styles from HTML and convert them to CSS rules.
postcss-inline-media inline multiple media queries into CSS property values.
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-ref refers properties from another rule.
postcss-reverse-media reverse/Invert media query parameters.
postcss-sassy-mixins enables mixins with Sass keywords.
postcss-map-get adds the ability to use Sass like map function map-get.
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.
postcss-responsive-properties allows you to write responsive property values.
postcss-text-remove-gap remove space before and after text strings, added by line-height and extra space in glyph itself.
postcss-closest plugin to modify closest matching part of current selector.
csstyle adds components workflow to your styles.
postcss-percentage support Sass-like percentage() function.
postcss-custom-css-units Define custom css units and convert them to CSS variables.
postcss-easy-z lets you organize z-indices by declaring relations between them.
@csstools/postcss-design-tokens lets you import and use design tokens from CSS.
postcss-smooth-shadow generates more realistic smooth shadow.

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-dark-theme-class to force dark or light theme by custom switcher.
postcss-theme-colors add dark and light theme with color groups.
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.
postcss-randomcolor supports function to use random color.

Images and Fonts

avif-in-css to use AVIF image format in CSS background.
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-background-image-auto-size generates CSS rules width and height for background-image automatically.
postcss-border-9-patch generates 9-patch like border styles via a custom rule.
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-icon-blender create custom SVG icon sets from over 80,000 free and open-source icons
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-filter-tint adds tint filter to elements such as images.
postcss-foft-classes adds guarding classes to blocks using web fonts for better font loading strategies.
postcss-font-awesome adds an easy shortcut to font-awesome unicode codes
postcss-font-grabber grabs remote fonts in @font-face, download them and update your CSS.
postcss-font-pack simplifies font declarations and validates they match configured font packs.
postcss-fontsize generates rem unit font-size and line-height with px fallbacks.
postcss-fontpath adds font links for different browsers.
postcss-fontsource-url rewrite Fontsource assets folder.
postcss-lazyimagecss adds image width and height automatically.
postcss-lazysprite generates sprites from the directory of images.
postcss-placehold makes it easy to drop in placeholder images.
postcss-resemble-image provides a gradient fallback for an image that loosely resembles the original.
postcss-resolve-urls resolves relative urls referenced in url()s
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-unicode-characters makes it easier to write unicode-range descriptors.
postcss-url rebases or inlines url()s.
postcss-urlrebase rebases url()s to a given root URL.
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.
webp-in-css to use WebP image format in CSS background.

Grids

postcss-grid adds a semantic grid system.
postcss-grid-kiss transforms ASCII-art grids into CSS Grid layout.
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-remove-nested-calc calc(100vw - calc(20% - 10px)) to calc(100vw - (20% - 10px)) for IE 11 compatibility.
postcss-class-name-shortener shortens CSS class names to optimize website performance.
postcss-combine-duplicated-selectors automatically join identical selectors.
postcss-filter-mq Filter all matching or non-matching media queries.
postcss-import inlines the stylesheets referred to by @import rules.
postcss-nested-import inlines stylesheets referred to by @import rules inside nested rule blocks.
postcss-partial-import inlines standard imports and Sass-like partials.
postcss-reference emulates Less’s @import.
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.
postcss-unprefix Unprefixes vendor prefixes in legacy CSS.
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 expressions.
postcss-uncss removes unused CSS from your stylesheets.
postcss-html-filter filters out CSS that does not apply to the HTML you provide.
postcss-no-important delete declarations !important.
postcss-deep-scopable unified deep scoped style for Vue.js.
postcss-deadcss helps to find dead CSS in stylesheets.
postcss-variable-compress minifies css variables and saves you space.

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-nested-ancestors reference any parent/ancestor selector in nested CSS.
postcss-parent-selector adds a parent selector to the beginning of all rules.
postcss-position adds shorthand declarations for position attributes.
postcss-property-lookup allows referencing property values without a variable.
postcss-range-value range value with a max and min value between two screen sizes.
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-add-root-selector] intelligently wraps all rules in a custom selector.
postcss-alter-property-value alters your CSS declarations from a rule based configuration.
postcss-attribute-selector-prefix adds a prefix to attribute selectors
[postcss-auto-rem] compiles pixel units to rem without configuration.
postcss-autoreset automatically adds reset styles.
postcss-bem-to-js creates a JavaScript definition file for BEM-style CSS.
postcss-bom adds a UTF-8 BOM to files.
postcss-blurry-gradient-workaround fixes blurry CSS gradients with too many explicit end-stops.
postcss-camelcaser transforms selectors to CamelCase.
postcss-class-prefix adds a prefix/namespace to class selectors.
postcss-classes-to-mixins converts classes to Sass, Less and Stylus mixins
postcss-currency replaces name of currency with symbols.
postcss-d-ts generates .d.ts declaration for TypeScript import from used CSS classes and ids
postcss-eol replaces EOL of files.
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-flexbox-reset resets Flexbox to avoid issues in responsive layouts.
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-grid-reset resets CSS Grid to avoid issues in responsive layouts.
postcss-hash replaces output file names with hash algorithms for cache busting.
postcss-ie8 strips out unsupported properties and media queries 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-join-transitions joins conflicting transition declarations.
postcss-letter-tracking generates relative, Photoshop-compatible letter tracking for improved letter spacing.
postcss-light-text adds -webkit- antialiasing for light text.
postcss-modules allows to use CSS Modules everywhere.
postcss-momentum-scrolling adding momentum style scrolling behavior (-webkit-overflow-scrolling:touch) for elements with overflow on iOS.
postcss-mq-keyframes moves any animation keyframes in media queries to the end of the file.
postcss-mq-last gives media query rules precedence by moving them to the end of the file.
postcss-node-modules-replacer replaces path than includes node_modules to ~.
postcss-plugin-namespace add a css selector to all rules, so that CSS file don’t affect other element.
postcss-prefix-hover adds a prefixed to any selector containing :hover.
postcss-pseudo-content-insert adds content: '' to :before and :after if it is missing.
postcss-pseudo-element-cases converts .style::BEFORE into .style::before and vice versa.
postcss-pseudo-element-colons converts .style:before into .style::before and vice versa.
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-rtlcss creates left-to-right and right-to-left rules in a single CSS file.
postcss-safe-important adds !important to style declarations safely.
postcss-sanitize remove properties and values using rules.
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-simple-trig calculate trigonometric functions: sin/cos/tan.
postcss-sorting sort rules content with specified order.
postcss-sort-media-queries combine and sort CSS media queries with mobile first or desktop first methods.
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.
postcss-autocorrect corrects typos and notifies in the console.
postcss-px-to-viewport generates viewport units (vw, vh, vmin, vmax) from px units.
postcss-viewport-height-correction solves the popular problem when 100vh doesn’t fit the mobile browser screen.
postcss-unit-processor flexible processing of CSS units.
postcss-rem-to-px converts rem values to px values.
postcss-design-tokens provides a function to retrieve design tokens expressed in JS or JSON, within CSS.
postcss-pixel-to-remvw converting px to both of rem and vw, also one of them
postcss-easy-import inline @import rules content with extra features.
postcss-plugin-ignore-file ignore file with a top-comment /* @ignore */.

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-forced-variables provides warnings and errors when specified properties don’t use variables.
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-aze-stylesheets Azerbaijanian 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-italian-stylesheets Italian 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.
postcss-nope lets you write nope instead of none.
postcss-glitch add glitch effect to your text.
postcss-khaleesi translate CSS values and properties to khaleesi meme language.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!