PostCSS has been around since September 2013 and has been part of many developers workflow for a while. For those that haven’t had the time to dig into it and put some time aside to understand what it is and what it can do, this post is for you.
PostCSS is a tool for transforming CSS with JavaScript.
PostCSS itself is very small. It only includes a CSS parser, a CSS node tree API, a source map generator and a node tree stringifier. All the magic happens by the plugins.
At the time of writing the PostCSS ecosystem has over 100 plugins. These plugins can do a large array of things, from linting, adding vendor prefixes, enabling the use of the latest CSS syntax, providing statistics on your CSS or giving you the power to use a preprocessors like Sass, Less or Stylus.
10 Plugins To Look Into
Parse CSS and add vendor prefixes to CSS rules using values from Can I Use data.
PostCSS plugin to add
:focusselector to every:hoverfor keyboard accessibility.
A plugin that allows you to use Sass-like markup in your CSS files.
A mighty, modern CSS linter that helps you enforce consistent conventions and avoid errors in your stylesheets.
A plugin to transform CSS Custom Properties(CSS variables) syntax into a static representation.
A PostCSS plugin that tries to fix all of flexbug’s issues.
A plugin that helps you to use the latest CSS syntax today. It transforms CSS specs into more compatible CSS so you don’t need to wait for browser support.
A PostCSS plugin for cssstats. The plugin returns a cssstats object in the callback which can be used for css analysis.
Optimise inline SVG with PostCSS.
A PostCSS plugin to generate a style guide automatically. CSS comments will be parsed through Markdown and displayed in a generated HTML document.
If you feel like creating your own plugin and contributing back to the PostCSS community, be sure to have a look at these guidelines and the offical PostCSS Plugin Boilerplate.
Intergrating PostCSS Into Your Workflow
PostCSS is written in JavaScript which makes it quite straight forward to add it to common front-end build tools like Grunt, Gulp or Webpack.
For the examples below we are going to use the Autoprefixer plugin.
npm install autoprefixer --save-dev
Gulp
If you are using Gulp you will also need to install the gulp-postcss package.
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 will also need to install the grunt-postcss package.
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 will also need to install the postcss-loader package.
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];
}
}
Further reading about integrating can be found on the PostCSS repo.
Taking The Leap
Sometimes when new technology, new tools and new frameworks get released it is often wise to just observe and see how they evolve. Now that PostCSS has matured and proven its value I would highly recommend taking the leap and making it part of your workflow. It has been around for a while and won’t be going anywhere soon.
The post PostCSS – What It Is And What It Can Do appeared first on Web Design Weekly.
by Jake Bresnehan via Web Design Weekly
