docs/plugins.md
Table of Contents
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;
}
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.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 blockpostcss-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.
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 bugpostcss-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 hackspostcss-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/maxpostcss-spring-easing replaces spring() with a resulting linear()
function and add a --spring-duration css variable.See also oldie plugins pack.
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 rulespostcss-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.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.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 fontspostcss-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 iconspostcss-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 codespostcss-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()spostcss-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.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.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.
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.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 selectorspostcss-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 mixinspostcss-currency replaces name of currency with symbols.postcss-d-ts generates .d.ts declaration for TypeScript import
from used CSS classes and idspostcss-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 thempostcss-easy-import inline @import rules content with extra features.postcss-plugin-ignore-file ignore file with a top-comment /* @ignore */.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.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.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 Sheetspostcss-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.