title: A Brief Introduction to PostCSS
type: tags
date: 2016-07-23 03:08:20
tags: [frontend, programming, Swift]
categories: [programming, translation]
toc: true#
- Original Article: PostCSS – What It Is And What It Can Do
PostCSS originated in September 2013 and has since been widely used by developers. If you haven't come across PostCSS yet, this article is perfect for you.
PostCSS is a tool that uses JavaScript plugins to transform CSS.
PostCSS itself is small and only includes a CSS parser, an API for manipulating CSS node trees, a resource generator (source map), and a tool for converting node trees to strings. All the magic happens through the use of plugins.
Currently, the PostCSS ecosystem has over 100 plugins. These plugins can do many things, such as linting, adding vendor prefixes, allowing the use of the latest CSS features, providing statistics in your CSS, or allowing the use of CSS preprocessors like Sass, Less, or Stylus.
Let's take a look at ten plugins#
Parses CSS based on user scenarios and adds vendor prefixes.
A PostCSS plugin that adds the selector to every selector using keyboard operations.
A plugin that allows you to use Sass-like syntax in your code.
A powerful and advanced CSS linter that helps maintain consistency in your CSS styles and avoids errors.
A plugin that converts user-defined CSS variables into static styles.
A plugin for fixing flexbox bugs.
A plugin that allows you to use the latest CSS features. It transforms the latest CSS features into compatible features for current browsers, so you don't have to wait for browser support for specific new features.
A plugin that supports cssstats. This plugin returns a cssstats object, which you can use for CSS analysis.
Optimizes inline SVG in PostCSS.
A plugin that automatically generates a style guide. It generates CSS comments in Markdown and displays them in the generated HTML document.
If you want to write your own plugin and contribute it to the community, make sure you read the guidelines and the PostCSS Plugin Boilerplate official documentation.
Using PostCSS in your work#
PostCSS is written in JavaScript, which makes it very convenient to use in popular front-end build tools like Grunt, Gulp, or Webpack.
Here is an example of using the Autoprefixer plugin:
npm install autoprefixer --save-dev
Gulp
If you are using Gulp, you need to install gulp-postcss.
npm install --save-dev gulp-postcss
gulp.task('autoprefixer', function () {
var postcss = require('gulp-postcss');
var autoprefixer = require('autoprefixer');
return gulp.src('./src/*.css')
.pipe(postcss([ autoprefixer({ browsers: ['last 2 versions'] }) ]))
.pipe(gulp.dest('./dest'));
});
Grunt
If you are using Grunt, you need to install grunt-postcss.
npm install grunt-postcss --save-dev
module.exports = function(grunt) {
grunt.loadNpmTasks('grunt-postcss');
grunt.initConfig({
postcss: {
options: {
map: true,
processors: [
require('autoprefixer')({
browsers: ['last 2 versions']
})
]
},
dist: {
src: 'css/*.css'
}
}
});
grunt.registerTask('default', ['postcss:dist']);
};
Webpack
If you are using Webpack, you need to install postcss-loader.
npm install postcss-loader --save-dev
var autoprefixer = require('autoprefixer');
module.exports = {
module: {
loaders: [
{
test: /\.css$/,
loader: "style-loader!css-loader!postcss-loader"
}
]
},
postcss: function () {
return [autoprefixer];
}
}
For help on how to integrate PostCSS, you can refer to the PostCSS repo.
Final Recommendation~#
Sometimes, it is wise to use and observe the development trends of new technologies, tools, and frameworks. PostCSS has now reached a fairly mature stage, and I strongly recommend using it in your work. It is widely used in projects and is not expected to undergo significant changes in the near future.