Table of Contents
- Control
- Packs
- Future CSS Syntax
- Fallbacks
- Language Extensions
- Images and Fonts
- Grids
- Optimizations
- Shortcuts
- Others
- Analysis
- Reporters
- Fun
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 thegray()
function.postcss-color-hex-alpha
supports#rrggbbaa
and#rgba
notation.postcss-color-hsl
: transforms CSS Colors 4hsl()
to more compatiblehsl()
orhsla()
.postcss-color-hwb
transformshwb()
to widely compatiblergb()
.postcss-color-image
supportsimage(<color>)
syntax allowing to use a solid color as an image.postcss-color-rebeccapurple
supports therebeccapurple
color.postcss-color-rgb
: transforms CSS Colors 4rgb()
to more compatiblergb()
orrgba()
.postcss-conic-gradient
supports theconic-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’sformat()
function to widely supported strings.postcss-font-normalize
to normalize font, especiallyfont-family
.postcss-font-variant
transpiles human-readablefont-variant
to more widely supported CSS.postcss-font-family-system-ui
transforms W3C CSSfont-family: system-ui
to a practical font list.postcss-font-display
addfont-display
css rule.postcss-host
makes the Shadow DOM’s:host
selector work properly with pseudo-classes.postcss-initial
supportsinitial
keyword andall: initial
to clean inherit styles.postcss-logical-properties
transformsstart
andend
properties toleft
andright
depending on the writing direction of the document.postcss-media-minmax
adds<=
and=>
statements to media queries.postcss-multi-value-display
transformsinline flex
andblock flow
toinline-flex
andblock
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 CSSdisplay: 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-color-rgba-fallback
transformsrgba()
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
addsfallback
function to avoid duplicate declarations.postcss-filter-gradient
adds gradient filter for the old IE.postcss-flexibility
adds-js-
prefix forFlexibility polyfill
.postcss-gradient-transparency-fix
transformstransparent
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-basedopacity
values to float values.postcss-page-break
addspage-break-
fallback tobreak-
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
replaceoverflow-wrap
withword-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
generatesvm
fallback forvmin
unit in IE9.postcss-will-change
inserts 3D hack beforewill-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 forrem
units.postcss-fixie
adds easy and painless IE hackspostcss-safe-area
adds browser fallbacks forsafe-area-inset
env
variables.webp-in-css
to use WebP background images in CSS.postcss-clamp
transformclamp()
to combination ofmin/max
postcss-spring-easing
replacesspring()
with a resultinglinear()
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-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 forvar()
andcalc()
in@media
rulespostcss-modular-scale
adds a modular scalems()
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 functionmap-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 onfont-size
andline-height
.postcss-vertical-rhythm-function
adds a vertical rhythmvr()
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-likepercentage()
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-ase-colors
replaces color names with values read from an ASE palette file.postcss-brand-colors
inserts company brand colors in thebrand-colors
module.postcss-color-alpha
transforms#hex.a
,black(alpha)
andwhite(alpha)
torgba()
.postcss-color-hcl
transformshcl(H, C, L)
andhcl(H, C, L, alpha)
to#rgb
andrgba()
.postcss-color-hexa
transformshexa(hex, alpha)
intorgba
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 scalecs()
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 hexrgba(hex, alpha)
method.postcss-rgb-plz
converts 3 or 6 digit hex values torgb
.postcss-rgba-hex
convertsrgba
values tohex
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 fromurl()
.postcss-at2x
handles retina background images via use ofat-2x
keyword.postcss-background-image-auto-size
generates CSS ruleswidth
andheight
forbackground-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 relativeurl()
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
addsbackground-image
with first image forimage-set()
.postcss-image-inliner
inlines local and remote images.postcss-instagram
adds Instagram filters tofilter
.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-pack
simplifies font declarations and validates they match configured font packs.postcss-fontsize
generatesrem
unitfont-size
andline-height
withpx
fallbacks.postcss-fontpath
adds font links for different browsers.postcss-font-grabber
it grabs remote fonts in@font-face
, download them and update your CSS.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 inurl()
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 writeunicode-range
descriptors.postcss-url
rebases or inlinesurl()
s.postcss-urlrebase
rebasesurl()
s to a given root URL.postcss-urlrev
adds MD5 hash strings tourl()
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-richcalc()
grid system by Jeet author.
postcss-calc
reducescalc()
to values (when expressions involve the same units).postcss-remove-nested-calc
calc(100vw - calc(20% - 10px))
tocalc(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 positivez-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 inborder
property.postcss-border-shortcut
PostCSS plugin for assign defaultborder
type if not expressed.postcss-button
creates buttons.postcss-center
centers elements.postcss-circle
inserts a circle with color.postcss-clearfix
addsfix
andfix-legacy
properties to theclear
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 withcubic-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
changesfont-size
depends on screen size.postcss-scrib
define your own aliases/shortcuts for properties or values.postcss-short-font-size
extendsfont-size
to define line-height s a second value.postcss-short-position
extendsposition
to define edges as additional values.postcss-short-spacing
extendsmargin
andpadding
to allow or omitted edges.postcss-short-text
adds atext
shortcut property for several text-related properties.postcss-size
adds asize
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 selectors- [
postcss-auto-rem
] compiles pixel units torem
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 TypeScriptimport
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 includesnode_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
addscontent: ''
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
addscontent: ''
to:before-c
and:after-c
.postcss-pxtorem
converts pixel units torem
.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 withstylelint
.postcss-autocorrect
corrects typos and notifies in the console.postcss-px-to-viewport
generates viewport units (vw
,vh
,vmin
,vmax
) frompx
units.postcss-viewport-height-correction
solves the popular problem when100vh
doesn’t fit the mobile browser screen.postcss-unit-processor
flexible processing of CSS units.postcss-rem-to-px
convertsrem
values topx
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
Replacespointer: cursor
withcursor: pointer
.postcss-spiffing
lets you use British English in your CSS.postcss-spanish-stylesheets
Spanish Style Sheets.postcss-nope
lets you writenope
instead ofnone
.postcss-glitch
add glitch effect to your text.postcss-khaleesi
translate CSS values and properties tokhaleesi meme
language.