Jump into the future of CSS with PostCSS - JS - Republic's Blog

Before explaining what PostCSS is, let’s first understand what PostCSS is not.

Essentially, when people first hear about PostCSS, they tend to think of it as a new CSS preprocessor, similar to SASS, LESS, and Stylus.

If you want to use it as a preprocessor, then it will work like a preprocessor. At the same time, it also has post-processors, optimization tools, plug-ins compatible with future syntax... you have all the functions you want.

The main purpose of PostCSS is to enable you to use a variety of tools to meet your needs.

So you should think of PostCSS as a build tool. It allows you to use various JavaScript plug-ins to maintain your CSS. These plugins can be found in postcss.parts here

Since there are so many plugins, we will review the most commonly used and powerful ones through this article.

At the same time, you will also learn how to use Gulp to create a single task to process CSS files.

​Autoprefixer

If you have used a preprocessor before, you will experience how pleasant it is to not have to write prefixes.

For example, you don’t have to write like this

:-webkit-full-screen a {
 display: -webkit-box;
 display: flex
}
:-moz-full-screen a {
 display: flex
}
:-ms-fullscreen a {
 display: -ms-flexbox;
 display: flex
}
:fullscreen a {
 display: -webkit-box;
 display: -ms-flexbox;
 display: flex
}

Just

:fullscreen a {
 display: flex
}

If you want to try it yourself, you can use this interactive demo http://autoprefixer.github.io

Document click here: github.com/postcss/autoprefixer

PreCSS

Even though PostCSS is not a preprocessor like SASS, you can still process Sass-like format files through some plug-ins.

The preferred plug-in is PreCSS, which integrates a large number of PostCSS plug-ins, allowing you to write Sass syntax styles.

I invite you to read the documentation for more details, and also play with the interactive demo to test the possibilities.

CssNext

CSS4, the next generation of CSS, promises to change the way CSS is written and the way selectors are used.

Unfortunately, the specifications for this version are still being developed, and a release date has not yet been announced.

Fortunately, if you want to use some of the features of the next generation of CSS, there is a plug-in called CssNext that can help you.

CSSNext’s official website lists all supported features: cssnext.io/features/

You can also play here: cssnext.io/playground/

CssNano

Last but not least, about optimization. CssNano can compress and optimize your CSS code using different modules.

I recommend that you disable the z-index, as it may mess up your normal z-index.

You can review this list of optimisations: cssnano.co/optimisations/ You can also chat with the creator of CssNano on Gitter: gitter.im/ben-eb/cssnano

Now, let’s see how to use these plugins with Gulp.

Gulp x PostCSS

Gulp

First, install Gulp, Gulp Load Plugins and Gulp PostCSS as dev dependencies. Execute the following command on the console:

npm i -D gulp gulp-load-plugins gulp-postcss

Create a gulpfile.js where you need to use Gulp and add the following code.

var gulp = require('gulp'),

Add the code of Gulp Load PLugins:

$ = require('gulp-load-plugins')();

The Gulp Load Plugins dependency will call the plug-ins you need through $.

PostCSS

Next, you need to install the required PostCSS plug-in in the same way as dev dependency

npm i -D autoprefixer cssnano cssnext precss

After installation, add it to gulpfile.js

// PostCSS Plugins
var autoprefixer = require('autoprefixer'),
cssnext = require('cssnext'),
precss = require('precss'),
cssnano = require('cssnano');

Next, start writing the Gulp CSS task

// Gulp task to process CSS with PostCSS plugins 
gulp.task('css', function() {

 });

In this task, we first use a variable to save the PostCSS plug-in to be used

var processors = [autoprefixer, cssnext, precss, cssnano({zindex: false})];

Set CssNano’s zindex:false to prevent it from resetting our z-index.

In order to process CSS files, we need to retrieve the following files:

return gulp.src('./source/css/style.css')

Then process the CSS file through the PostCSS plug-in in the processors variable.

Use the pipe method to connect the processing process

.pipe($.postcss(processors))

Use the following code to output the processed file

.pipe(gulp.dest('./public/assets/stylesheets'));

All of the above is what you have to do when using the PostCSS plug-in to process CSS.

var gulp = require('gulp'),
$ = require('gulp-load-plugins')();

// PostCSS Plugins
var autoprefixer = require('autoprefixer'),
cssnext = require('cssnext'),
precss = require('precss'),
cssnano = require('cssnano');

// Gulp task to process CSS with PostCSS plugins
gulp.task('css', function() {
var processors = [autoprefixer, cssnext, precss, cssnano({zindex: false})];

return gulp.src('./source/css/style.css')
.pipe($.postcss(processors))
.pipe(gulp.dest('./public/assets/stylesheets'));
});

There is a complete and detailed guide on Tuts+, I highly recommend you read it: webdesign.tutsplus.com/series/postcss-deep-pe–cms-889

I also used these PostCSS plug-ins to create a boilerplate template to help you get started quickly: /github.com/PierrickGT/PCGB

​blog.js-republic.com/jump-into-the-future-of-css-with-postcss/

The above is the detailed content of Jump into the future of CSS with PostCSS - JS - Republic's Blog. For more information, please follow other related articles on the PHP Chinese website!