postcss-use allows you to explicitly set PostCSS plugins within CSS and execute them only for the current file. postcss-modules and react-css-modules automatically isolate selectors within components. postcss-autoreset is an alternative to using a global reset that is better for isolatable components. postcss-initial adds all: initial support, which resets all inherited styles. cq-prolyfill adds container query support, allowing styles that respond to the width of the parent.
autoprefixer adds vendor prefixes, using data from Can I Use. postcss-preset-env allows you to use future CSS features today.
postcss-nested unwraps nested rules the way Sass does. postcss-sorting sorts the content of rules and at-rules. postcss-utilities includes the most commonly used shortcuts and helpers. short adds and extends numerous shorthand properties.
postcss-url postcss plugin to rebase url(), inline or copy asset. postcss-sprites generates image sprites. font-magician generates all the @font-face rules needed in CSS. postcss-inline-svg allows you to inline SVG and customize its styles. postcss-write-svg allows you to write simple SVG directly in your CSS. webp-in-css to use WebP image format in CSS background. avif-in-css to use AVIF image format in CSS background.
stylelint is a modular stylesheet linter. stylefmt is a tool that automatically formats CSS according stylelint rules. doiuse lints CSS for browser support, using data from Can I Use. colorguard helps you maintain a consistent color palette.
cssnano is a modular CSS minifier. lost is a feature-rich calc() grid system. rtlcss mirrors styles for right-to-left locales.
sugarss is a indent-based syntax like Sass or Stylus. postcss-syntax switch syntax automatically by file extensions. postcss-html parsing styles in <style> tags of HTML-like files. postcss-markdown parsing styles in code blocks of Markdown files. postcss-styled-syntax parses styles in template literals CSS-in-JS like styled-components. postcss-jsx parsing CSS in template / object literals of source files. postcss-styled parsing CSS in template literals of source files. postcss-scss allows you to work with SCSS (but does not compile SCSS to CSS) . postcss-sass allows you to work with Sass (but does not compile Sass to CSS) . postcss-less allows you to work with Less (but does not compile LESS to CSS) . postcss-less-engine allows you to work with Less (and DOES compile LESS to CSS using true Less.js evaluation) . postcss-js allows you to write styles in JS or transform React Inline Styles, Radium or JSS. postcss-safe-parser finds and fixes CSS syntax errors. midas converts a CSS string to highlighted HTML.
-
Some things you may think about PostCSS… and you might be wrong -
What PostCSS Really Is; What It Really Does -
PostCSS Guides
-
Mastering PostCSS for Web Design by Alex Libby, Packt. (June 2016)
-
Find and add PostCSS extensions for your build tool. -
Select plugins and add them to your PostCSS process.
module . exports = {
module : {
rules : [
{
test : / \.css$ / ,
use : [ 'style-loader' , 'postcss-loader' ] ,
} ,
{
test : / \.jsx?$ / ,
use : [ 'babel-loader' , 'astroturf/loader' ] ,
}
]
}
}
/** @type {import('postcss-load-config').Config} */
const config = {
plugins : [
require ( 'autoprefixer' ) ,
require ( 'postcss-nested' )
]
}
module . exports = config
/** @type {import('postcss-load-config').Config} */
const config = {
plugins : [
require ( 'autoprefixer' ) ,
require ( 'postcss-nested' )
]
}
module . exports = config
Please, be aware of the several issues in Version 1 . Notice, Version 2 may resolve the issues via issue #2157 .
module . exports = {
module : {
rules : [
{
test : / \.css$ / ,
exclude : / node_modules / ,
use : [
{
loader : 'style-loader' ,
} ,
{
loader : 'css-loader' ,
options : {
importLoaders : one ,
}
} ,
{
loader : 'postcss-loader'
}
]
}
]
}
}
/** @type {import('postcss-load-config').Config} */
const config = {
plugins : [
require ( 'autoprefixer' ) ,
require ( 'postcss-nested' )
]
}
module . exports = config
gulp . task ( 'css' , ( ) => {
const postcss = require ( 'gulp-postcss' )
const sourcemaps = require ( 'gulp-sourcemaps' )
return gulp . src ( 'src/**/*.css' )
. pipe ( sourcemaps . init ( ) )
. pipe ( postcss ( [ require ( 'autoprefixer' ) , require ( 'postcss-nested' ) ] ) )
. pipe ( sourcemaps . write ( '.' ) )
. pipe ( gulp . dest ( 'build/' ) )
} )
postcss --use autoprefixer -o main.css css/ * .css
const postcss = require ( 'postcss-js' )
const prefixer = postcss . sync ( [ require ( 'autoprefixer' ) ] )
prefixer ( { display : 'flex' } ) //=> { display: ['-webkit-box', '-webkit-flex', '-ms-flexbox', 'flex'] }
-
Grunt : @lodder/grunt-postcss -
HTML : posthtml-postcss -
Stylus : poststylus -
Rollup : rollup-plugin-postcss -
Brunch : postcss-brunch -
Broccoli : broccoli-postcss -
Meteor : postcss -
ENB : enb-postcss -
Taskr : taskr-postcss -
Start : start-postcss -
Connect/Express : postcss-middleware -
Svelte Preprocessor : svelte-preprocess
const autoprefixer = require ( 'autoprefixer' )
const postcss = require ( 'postcss' )
const postcssNested = require ( 'postcss-nested' )
const fs = require ( 'fs' )
fs . readFile ( 'src/app.css' , ( err , css ) => {
postcss ( [ autoprefixer , postcssNested ] )
. process ( css , { from : 'src/app.css' , to : 'dest/app.css' } )
. then ( result => {
fs . writeFile ( 'dest/app.css' , result . css , ( ) => true )
if ( result . map ) {
fs . writeFile ( 'dest/app.css.map' , result . map . toString ( ) , ( ) => true )
}
} )
} )
-
An array of plugins. -
An object of options.
syntax : an object providing a syntax parser and a stringifier. parser : a special syntax parser (for example, SCSS ). stringifier : a special syntax output generator (for example, Midas ). map : source map options . from : the input file name (most runners set it automatically). to : the output file name (most runners set it automatically).
module . exports = {
plugins : [
require ( 'autoprefixer' ) ,
require ( 'postcss-fail-on-warn' )
]
}
csstools.postcss adds PostCSS support.
Syntax-highlighting-for-PostCSS adds PostCSS highlight.
postcss.vim adds PostCSS highlight.