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 lint your CSS, 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.
Twitter account: @postcss. VK.com page: postcss. Support / Discussion: Gitter.
Currently, PostCSS has more than 200 plugins. Here are our favorite plugins which best demonstrate PostCSS’ power. You can find all of the plugins in the plugins list or in the searchable catalog.
If you have any new ideas, PostCSS plugin development is really easy.
postcss-use
to explicitly set PostCSS plugins in CSS and execute them
only for the current file.postcss-modules
or react-css-modules
automatically isolates
selectors in components.postcss-autoreset
uses local reset in component, instead of global one.postcss-initial
adds all: initial
support to reset all inherit styles.cq-prolyfill
adds media queries for component size
or parent background.autoprefixer
adds vendor prefixes, using data from Can I Use.cssnext
allows you to use future CSS features today.precss
contains plugins for Sass-like features like nesting or mixins.short
adds and extends numerous shorthand properties.postcss-assets
inserts image dimensions and inlines files.postcss-sprites
generates image sprites.font-magician
generates all the @font-face
rules needed in CSS.postcss-inline-svg
allows to inline SVG and customize its styles.postcss-write-svg
allows to write simple SVG directly in CSS.stylelint
is a modular linter for CSS.doiuse
lints CSS for browser support, using data from Can I Use.colorguard
helps maintain a consistent color palette.lost
is feature-rich calc()
grid system by Jeet author.cssnano
is a modular CSS minifier.rtlcss
mirrors styles for right-to-left locales.PostCSS can transform styles in any syntax, not just CSS.
postcss-scss
to work with SCSS (but does not compile SCSS to CSS).postcss-js
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.You can start using PostCSS in just two steps:
Use gulp-postcss
and gulp-sourcemaps
.
gulp.task('css', function () {
var postcss = require('gulp-postcss');
var sourcemaps = require('gulp-sourcemaps');
return gulp.src('src/**/*.css')
.pipe( sourcemaps.init() )
.pipe( postcss([ require('autoprefixer'), require('precss') ]) )
.pipe( sourcemaps.write('.') )
.pipe( gulp.dest('build/') );
});
Use postcss-loader
:
module.exports = {
module: {
loaders: [
{
test: /\.css$/,
loader: "style-loader!css-loader!postcss-loader"
}
]
},
postcss: function () {
return [require('autoprefixer'), require('precss')];
}
}
For React Inline Styles, JSS, Radium and other CSS-in-JS you can use
postcss-js
to transform one style object to other.
var postcss = require('postcss-js');
var prefixer = postcss.sync([ require('autoprefixer') ]);
prefixer({ display: 'flex' }); //=> { display: ['-webkit-box', '-webkit-flex', '-ms-flexbox', 'flex'] }
postcss-cli
grunt-postcss
posthtml-postcss
poststylus
rollup-plugin-postcss
postcss-brunch
broccoli-postcss
postcss
enb-postcss
fly-postcss
postcss-middleware
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);
});
Read the PostCSS API documentation for more details about the JS API.
All PostCSS JS API users should pass PostCSS Runner Guidelines.
Most PostCSS runners accept two parameters:
Common options:
syntax
: object with syntax parser and stringifier.parser
: other syntax parser (for example, SCSS).stringifier
: other syntax output generator (for example, Midas).map
: source map options.from
: input file name (most runners set it automatically).to
: output file name (most runners set it automatically).If you want to run PostCSS on node.js 0.10, add the Promise polyfill:
require('es6-promise').polyfill();
var postcss = require('postcss');
5.0.14
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.