PostCSS is a tool for transforming CSS with JavaScript plugins. These plugins can lint your CSS, support variables and mixins, transpile future CSS syntax, inline images, and more.
Autoprefixing
Automatically adds vendor prefixes to CSS rules using values from Can I Use. It is recommended by Google and used in Twitter and Alibaba.
postcss([ require('autoprefixer') ]).process(css).then(result => { result.warnings().forEach(warn => { console.warn(warn.toString()); }); console.log(result.css); });CSS Variables
Transforms CSS Custom Properties (CSS variables) syntax into a static representation that can be understood by browsers that do not support this feature.
postcss([ require('postcss-custom-properties') ]).process(css).then(result => { console.log(result.css); });CSS Nesting
Allows you to nest one style rule inside another, following the CSS Nesting Module Level 3 specification.
postcss([ require('postcss-nesting') ]).process(css).then(result => { console.log(result.css); });Minification
A modular minifier, built on top of the PostCSS ecosystem. It is used to minimize CSS for better performance.
postcss([ require('cssnano') ]).process(css).then(result => { console.log(result.css); });Future CSS Syntax
Allows you to use future CSS features today. It polyfills CSS features that are not yet fully supported in browsers.
postcss([ require('postcss-preset-env') ]).process(css).then(result => { console.log(result.css); });Sass is a mature, stable, and powerful professional grade CSS extension language. It provides mechanisms such as variables, nesting, and mixins, which are not present in standard CSS. Unlike PostCSS, which uses JavaScript plugins, Sass has its own syntax and compiles to standard CSS.
Less is a backward-compatible language extension for CSS. It also allows variables, mixins, functions and many other techniques that allow you to make CSS more maintainable and extendable. Less is similar to Sass and differs from PostCSS in that it offers a different syntax and set of features.
Stylus is a preprocessor that serves as a more robust and feature-rich alternative to CSS. It supports both an indented syntax and regular CSS style. Stylus provides significant flexibility and feature parity with Sass and Less but with a different syntax and feature set compared to PostCSS.
PostCSS is a tool for transforming styles with JS plugins. These plugins can support variables and mixins, transpile future CSS syntax, inline images, and more.
PostCSS is used by industry leaders including Google, Twitter, Alibaba, and Shopify. The Autoprefixer PostCSS plugin is one of the most popular CSS processors.
PostCSS can do the same work as preprocessors like Sass, Less, and Stylus. But PostCSS is modular, 3-30 times faster, and much more powerful.
Twitter account: @postcss. VK.com page: postcss.
| Examples | Features | Usage | Syntaxes | Plugins | Development | Options |
|---|
PostCSS itself is very small. It includes only a CSS parser, a CSS node tree API, a source map generator, and a node tree stringifier.
All of the style transformations are performed by plugins, which are plain JS functions. Each plugin receives a CSS node tree, transforms it & then returns the modified tree.
You can use the cssnext plugin pack and write future CSS code right now:
:root {
--mainColor: #ffbbaaff;
}
@custom-media --mobile (width <= 640px);
@custom-selector :--heading h1, h2, h3, h4, h5, h6;
.post-article :--heading {
color: color( var(--mainColor) blackness(+20%) );
}
@media (--mobile) {
.post-article :--heading {
margin-top: 0;
}
}
Or if you like the Sass syntax, you could use the PreCSS plugin pack:
@define-mixin social-icon $network $color {
&.is-$network {
background: $color;
}
}
.social-icon {
@mixin social-icon twitter #55acee;
@mixin social-icon facebook #3b5998;
padding: 10px 5px;
@media (max-width: 640px) {
padding: 0;
}
}
Preprocessors are template languages, where you mix styles with code (like PHP does with HTML).
In contrast, in PostCSS you write a custom subset of CSS. All code can only be in JS plugins.
As a result, PostCSS offers three main benefits:
rtlcss,
doiuse or postcss-colorblind are good examples.Start using PostCSS in just two steps:
There are plugins for Grunt, Gulp, webpack, Broccoli, Brunch, ENB, Fly, Stylus and Connect/Express.
gulp.task('css', function () {
var postcss = require('gulp-postcss');
return gulp.src('src/**/*.css')
.pipe( postcss([ require('autoprefixer'), require('cssnano') ]) )
.pipe( gulp.dest('build/') );
});
For other environments, you can use the CLI tool or the JS API:
var postcss = require('postcss');
postcss([ require('autoprefixer'), require('cssnano') ])
.process(css, { from: 'src/app.css', to: 'app.css' })
.then(function (result) {
fs.writeFileSync('app.css', result.css);
if ( result.map ) fs.writeFileSync('app.css.map', result.map);
});
If you want to run PostCSS on node.js 0.10, add Promise polyfill:
require('es6-promise').polyfill();
var postcss = require('postcss');
Read the PostCSS API for more details about the JS API.
PostCSS can transform styles in any syntax, not only in CSS.
There are 3 special arguments in process() method to control syntax.
You can even separately set input parser and output stringifier.
syntax accepts object with parse and stringify functions.parser accepts input parser function.stringifier accepts output stringifier function.var safe = require('postcss-safe-parser');
postcss(plugins).process('a {', { parser: safe }).then(function (result) {
result.css //=> 'a {}'
});
postcss-scss to work with SCSS (but does not compile SCSS to CSS).postcss-safe-parser finds and fix CSS syntax errors.midas converts a CSS string to highlighted HTML.Go to postcss.parts for a searchable catalog of the plugins mentioned below.
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
}
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.precss contains plugins that allow you to use Sass-like CSS.rucksack contains plugins to speed up CSS development
with new features and shortcuts.short adds and extends numerous shorthand properties.stylelint contains plugins that lint your stylesheets.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-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-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 referencesmq4-hover-shim supports the @media (hover) feature.See also cssnext plugins pack to add future CSS syntax by one line of code.
postcss-color-rgba-fallback transforms rgba() to hexadecimal.postcss-epub adds the -epub- prefix to relevant properties.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-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.postcss-round-subpixels plugin that rounds sub-pixel values to the nearest full pixel.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-define-property to define properties shortcut.postcss-each adds @each statement.postcss-for adds @for loops.postcss-functions enables exposure of JavaScript functions.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-nested unwraps nested rules.postcss-nested-props unwraps nested properties.postcss-nested-vars supports nested Sass-style variables.postcss-pseudo-class-enter transforms :enter into :hover and :focus.postcss-quantity-queries enables quantity queries.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.csstyle adds components workflow to your styles.See also precss plugins pack to add them by one line of code.
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-colorblind transforms colors using filters to simulate
colorblindness.postcss-hexrgba adds shorthand hex rgba(hex, alpha) method.postcss-rgb-plz converts 3 or 6 digit hex values to rgb.postcss-assets allows you to simplify URLs, insert image dimensions,
and inline files.postcss-at2x handles retina background images via use of at-2x keyword.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-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-pack simplifies font declarations and validates they match
configured font packs.postcss-fontpath adds font links for different browsers.postcss-responsive-images adds stylesheets for making your images responsivepostcss-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.webpcss adds URLs for WebP images for browsers that support WebP.postcss-grid adds a semantic grid system.postcss-simple-grid create grid with one line.postcss-neat is a semantic and fluid grid framework.lost feature-rich calc() grid system by Jeet author.postcss-calc reduces calc() to values
(when expressions involve the same units).postcss-import inlines the stylesheets referred to by @import rules.postcss-partial-import inlines standard imports and Sass-like partials.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.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-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-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-size adds a size shortcut that sets width and height
with one declaration.postcss-transform-shortcut allows shorthand transform properties in CSS.postcss-triangle creates a triangle.postcss-verthorz adds vertical and horizontal spacing declarations.font-magician generates all the @font-face rules needed in CSS.postcss-autoreset automatically adds reset styles.postcss-class-prefix adds a prefix/namespace to class selectors.postcss-currency replaces name of currency with symbols.postcss-fakeid transforms #foo IDs to attribute selectors [id="foo"].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-increase-specificity increases the specificity of your selectors.postcss-mq-keyframes moves any animation keyframes in media queries
to the end of the file.postcss-pseudo-elements-content adds content: '' to :before-c
and :after-c.postcss-pseudo-content-insert adds content: '' to :before and :after
if it is missing.postcss-pxtorem converts pixel units to rem.postcss-remove-prefixes removes vendor prefixes.postcss-style-guide generates a style guide automatically.postcss-scopify adds a user input scope to each selector.cssfmt formats CSS source code automatically inspired by Gofmt.perfectionist formats poorly written CSS and renders a “pretty” result.rtlcss mirrors styles for right-to-left locales.postcss-bem-linter lints CSS for conformance to SUIT CSS methodology.postcss-cssstats returns an object with CSS statistics.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-reporter logs warnings and other messages from other plugins
in the console.postcss-australian-stylesheets Australian Style Sheets.postcss-canadian-stylesheets Canadian 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 Sheetspostcss-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 has great source maps support. It can read and interpret maps from previous transformation steps, autodetect the format that you expect, and output both external and inline maps.
To ensure that you generate an accurate source map, you must indicate the input
and output CSS file paths — using the options from and to, respectively.
To generate a new source map with the default options, simply set map: true.
This will generate an inline source map that contains the source content.
If you don’t want the map inlined, you can set map.inline: false.
processor
.process(css, {
from: 'app.sass.css',
to: 'app.css',
map: { inline: false },
})
.then(function (result) {
result.map //=> '{ "version":3,
// "file":"app.css",
// "sources":["app.sass"],
// "mappings":"AAAA,KAAI" }'
});
If PostCSS finds source maps from a previous transformation, it will automatically update that source map with the same options.
If you want more control over source map generation, you can define the map
option as an object with the following parameters:
inline boolean: indicates that the source map should be embedded
in the output CSS as a Base64-encoded comment. By default, it is true.
But if all previous maps are external, not inline, PostCSS will not embed
the map even if you do not set this option.
If you have an inline source map, the result.map property will be empty,
as the source map will be contained within the text of result.css.
prev string, object or boolean: source map content from
a previous processing step (for example, Sass compilation).
PostCSS will try to read the previous source map automatically
(based on comments within the source CSS), but you can use this option
to identify it manually. If desired, you can omit the previous map
with prev: false.
sourcesContent boolean: indicates that PostCSS should set the origin
content (for example, Sass source) of the source map. By default,
it is true. But if all previous maps do not contain sources content,
PostCSS will also leave it out even if you do not set this option.
annotation boolean or string: indicates that PostCSS should add annotation
comments to the CSS. By default, PostCSS will always add a comment with a path
to the source map. PostCSS will not add annotations to CSS files that
do not contain any comments.
By default, PostCSS presumes that you want to save the source map as
opts.to + '.map' and will use this path in the annotation comment.
A different path can be set by providing a string value for annotation.
If you have set inline: true, annotation cannot be disabled.
5.0.6
Declaration#value (by Bogdan Chadkin).FAQs
Tool for transforming styles with JS plugins
The npm package postcss receives a total of 29,695,496 weekly downloads. As such, postcss popularity was classified as popular.
We found that postcss demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Research
A malicious npm package disguised as a WhatsApp client is exploiting authentication flows with a remote kill switch to exfiltrate data and destroy files.
Security News
PyPI now supports digital attestations, enhancing security and trust by allowing package maintainers to verify the authenticity of Python packages.
Security News
GitHub removed 27 malicious pull requests attempting to inject harmful code across multiple open source repositories, in another round of low-effort attacks.