Security News
ESLint is Now Language-Agnostic: Linting JSON, Markdown, and Beyond
ESLint has added JSON and Markdown linting support with new officially-supported plugins, expanding its versatility beyond JavaScript.
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.
Support / Discussion: gitter.
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, Meteor, Duo 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/') );
});
There is postcss-js to use PostCSS plugins in React Inline Styles, Free Style, Radium and other CSS-in-JS solutions.
To process CSS within the <style>
tags and inline style=
attributes
in your HTML consider using html-postcss and gulp-html-postcss.
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-js
to React Inline Styles, Radium, Free Style and other CSS-in-JS.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.oldie
contains plugins that transform your CSS
for older Internet Explorer compatibility.precss
contains plugins that allow you to use Sass-like CSS.rucksack
contains plugins to speed up CSS development
with new features and shortcuts.level4
contains only plugins that let you write CSS4 without
the IE9 fallbacks.short
adds and extends numerous shorthand properties.stylelint
contains plugins that lint your stylesheets.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-logical-properties
transforms start
and end
properties to left
and right
depending on the writing direction of the document.postcss-media-minmax
adds <=
and =>
statements to media queries.postcss-pseudo-class-any-link
adds :any-link
pseudo-class.postcss-selector-not
transforms CSS4 :not()
to CSS3 :not()
.postcss-selector-matches
transforms CSS4 :matches()
to more compatible CSS.postcss-apply
supports custom properties sets 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-fallback
adds fallback
function to avoid duplicate declarations.postcss-mqwidth-to-class
converts min/max-width media queries to classes.postcss-opacity
adds opacity filter for IE8.postcss-pseudoelements
Convert ::
selectors into :
selectors
for IE 8 compatibility.postcss-round-subpixels
plugin that rounds sub-pixel values to the nearest
full pixel.postcss-unmq
removes media queries while preserving desktop rules for IE≤8.postcss-vmin
generates vm
fallback for vmin
unit in IE9.postcss-will-change
inserts 3D hack before will-change
property.autoprefixer
adds vendor prefixes for you, using data from Can I Use.cssgrace
provides various helpers and transpiles CSS 3 for IE
and other old browsers.pixrem
generates pixel fallbacks for rem
units.See also oldie
plugins pack.
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-at-rules-variables
adds support for custom properties in
@for
, @each
, @if
, etc.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-reverse-media
reverse/Invert media query parameters.postcss-sassy-mixins
enables mixins with Sass keywords.postcss-simple-extend
lightweight extending of silent classes,
like Sass’ @extend
.postcss-simple-vars
supports for Sass-style variables.postcss-strip-units
strips units off of property values.postcss-vertical-rhythm
adds a vertical rhythm unit
based on font-size
and line-height
.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-color-yiq
sets foreground colors using the YIQ color space.postcss-colorblind
transforms colors using filters to simulate
colorblindness.postcss-contrast
checks background-color and gives either white or black.postcss-hexrgba
adds shorthand hex rgba(hex, alpha)
method.postcss-rgb-plz
converts 3 or 6 digit hex values to rgb
.postcss-rgba-hex
converts rgba
values to hex
analogues.postcss-shades-of-gray
helps keeping grayscale colors consistent to a gray palette.colorguard
helps maintain a consistent color palette.postcss-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-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 responsive.postcss-sprites
generates CSS sprites from stylesheets.postcss-svg
insert inline SVG to CSS and allows to manage it colors.postcss-svg-fallback
converts SVG in your CSS to PNG files for IE 8.postcss-svgo
processes inline SVG through SVGO.postcss-url
rebases or inlines url()
s.postcss-urlrev
adds MD5 hash strings to url()
s.postcss-write-svg
write inline SVGs in CSS.postcss-inline-svg
inline SVG images and customize their styles.webpcss
adds URLs for WebP images for browsers that support WebP.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-reference
emulates Less’s [@import (reference)
].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-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-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-select
select rules based off a selector list.postcss-shorthand-expand
expands shorthand properties.postcss-raw
protects nodes inside @raw
at-rules from being touched by other plugins.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.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-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-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-spanish-stylesheets
Spanish Style Sheets.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.12
FAQs
Tool for transforming styles with JS plugins
The npm package postcss receives a total of 70,717,664 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 0 open source maintainers 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
ESLint has added JSON and Markdown linting support with new officially-supported plugins, expanding its versatility beyond JavaScript.
Security News
Members Hub is conducting large-scale campaigns to artificially boost Discord server metrics, undermining community trust and platform integrity.
Security News
NIST has failed to meet its self-imposed deadline of clearing the NVD's backlog by the end of the fiscal year. Meanwhile, CVE's awaiting analysis have increased by 33% since June.