What is PostCSS, what is it for and how to use it.

Author
By Darío Rivera
Posted On in CSS

PostCSS is a development tool based on JavaScript plugins that automates routine operations in CSS. For example, with PostCSS you can automatically add prefixes to CSS features that are not fully compatible in all browsers.

The use of JavaScript for automatic tasks on CSS should not be confused with things such as adding CSS styles through JavaScript or something similar. In the end, you will have a pure CSS file that the browser will understand, only that we have optimized it or in some way generated it with JavaScript to add prefixes, support mixins, support variables, and other things. You can see the complete list of plugins here.

PostCSS installation

There are several ways to integrate PostCSS, including Parcel, Webpack, Gulp, among others. To test PostCSS we are going to create a project in NPM. You probably already have a project running in Laravel or any other web development framework. It should not be difficult after following these steps to add it to your specific project.

The first thing we are going to do is create an initial project in npm with the following command.

npm init -y

This command will create the package.json file where the configuration of dependencies for our project will be. The next thing will be to install postcss and postcss-cli as development dependencies.

npm i -D postcss postcss-cli

After this, you must create the postcss configuration file called postcss.config.js.

module.exports = {
  plugins: [
  ]
}

Installing plugins in PostCSS

Since postcss is based on plugins, we need to install at least our first plugin. For this, we are going to use the most popular postcss plugin called autoprefixer.

npm i -D autoprefixer

Every time we install a plugin, we need to add it to the configuration file.

module.exports = {
  plugins: [
    require('autoprefixer')
  ]
}

Executing PostCSS

To execute postcss, we are going to create two commands in the scripts area of our package.json file.

"scripts": {
    "build": "postcss src/styles.css --output css/styles.css",
    "watch": "postcss src/styles.css --output css/styles.css --watch"
}

The first command takes what is in the src/styles.css file applies the processing of our plugins and finally generates the css/styles.css file. The second command does exactly the same with the difference that the command will remain running in the terminal so that as we modify our styles, the output is generated automatically.

The next thing will be to create the src/styles.css file with some feature that requires prefixes. For example, you can use the following CSS.

::placeholder {
  color: gray;
}

When running the build command with npm, you will get the CSS with prefixes.

npm run build
::-moz-placeholder {
  color: gray;
}
:-ms-input-placeholder {
  color: gray;
}
::placeholder {
  color: gray;
}

Acerca de Darío Rivera

Author

Application Architect at Elentra Corp . Quality developer and passionate learner with 10+ years of experience in web technologies. Creator of EasyHttp , an standard way to consume HTTP Clients.

LinkedIn Twitter Instagram

Sólo aquellos que han alcanzado el éxito saben que siempre estuvo a un paso del momento en que pensaron renunciar.