PostCSS

To start using PostCSS we have one last step left, which is to create an npm script to run PostCSS every time you need to process your CSS. You have to put that npm script inside the “package.json” file.

The “package.json” file has a property called “scripts” in which you can place any number of npm scripts you may need in a project. Its form would be like this:

“scripts”: { “build”: “postcss src/css/styles.css –output dist/styles.css” },

In our case we have created a script called “build”, which calls the PostCSS CLI, indicating two pieces of information:

• src/css/styles.css would be the initial path where the CSS file to be processed is located.
• –output dist/styles.css would be the destination path where the CSS will be placed once processed.

Once the npm script is created, you run it with the console, from the root of your project with the command “npm run” followed by the name of the script that you have put.

npm run build

This will do the processing of the source file, applying all the transformations from all the plugins you have configured, and writing the destination file to the given path.

For example, if you had CSS like this:

.myGrid { display: grid; grid-template-columns: 12px 12px 12px; grid-template-rows: 12px 12px 12px; column-gap: 1rem; }

What we would have as output is this:

.myGrid { display: grid; grid-template-columns: 12px 12px 12px; grid-template-rows: 12px 12px 12px; -moz-column-gap: 1rem; column-gap: 1rem; }

Note however that this output can be variable, as autoprefixer takes into account a range of target browsers and as browsers update certain prefixes are no longer needed.

If you want to change the target browsers you can do it in several ways, for example by creating a “. browserslistrc” file in the root of your project. See the documentation for more details.