How to auto-prefix and minify CSS?
Tags: webdev, javascript, tutorial, css
Published: 2022-07-01 05:54:38

Writing CSS from scratch along with adding vendor prefixes can be a daunting task if done manually. Vendor-prefixes can be easily added using the autoprefixer plugin of PostCSS.

Also, the size of CSS file matters because CSS files can be render blocking so you need to keep a check on the size of the CSS file. This is where cssnano comes handy.

In this tutorial, you will be able to configure and set up PostCSS, autoprefixer and cssnano to vendor-prefix and minify your CSS.


## Prerequisites

> - Install [nodejs](https://nodejs.org/)


## Installing PostCSS

It is a tool to modify and transform your CSS. There are so many plugins for [PostCSS](https://github.com/postcss/postcss) to perform all kinds of tasks ranging from compressing CSS to using new CSS features right off the bat.

We will be using several postcss plugins to add vendor prefixes and minify CSS. But first, we need to install postcss-cli.

```bash
npm i -g postcss-cli
```

The postcss package can be installed from [npm](https://www.npmjs.com).

```bash
npm i postcss postcss-cli --save-dev
```


## Autoprefixing CSS

[Autoprefixer](https://github.com/postcss/autoprefixer) plugin uses [Can I use](https://caniuse.com) to search for browser support and accordingly add vendor prefixes to CSS properties. You can install autoprefixer from npm.

```bash
npm i autoprefixer --save-dev
```

Now, you can autoprefix your CSS file using this command:

```bash
postcss src/styles/*.css -u autoprefixer --dir src/prefixed --no-map
```

The above command will parse each and every `.css` file inside the `styles` directory and use `-u` autoprefixer to autoprefix files and output them in the `prefixed` directory. The `--no-map` argument is optional. If you want a source map to be generated, then remove the `--no-map` argument.

CSS file before prefixing:

```css
* {
    margin: 0;
    box-sizing: border-box;
    text-size-adjust: auto;
}
```

After prefixing:

```css
* {
    margin: 0;
    box-sizing: border-box;
    -webkit-text-size-adjust: auto;
       -moz-text-size-adjust: auto;
            text-size-adjust: auto;
}
```


## Minifying CSS

The [cssnano](https://cssnano.co/) plugin can minify/compress CSS and make it suitable for production use.
Install cssnano plugin using this command:

```bash
npm i cssnano --save-dev
```

Minify your already vendor-prefixed CSS file using this command:

```bash
postcss src/prefixed/*.css -u cssnano --dir src/minified --no-map
```

It will minify all the files present in the `prefixed` directory and output them to the `minified` directory.

The final result you get is:

```css
*{-webkit-text-size-adjust:auto;-moz-text-size-adjust:auto;text-size-adjust:auto;box-sizing:border-box;margin:0}
```


## Bonus

You can autoprefix as well as minify CSS using one single command:

```bash
postcss src/styles/*.css -u autoprefixer cssnano --dir src/styles/production --no-map
```


## Conclusion

Vendor-prefixing and minifying are some of the important boxes you need to check in order to make your CSS production-ready. Using PostCSS, you can do so much with your CSS. There are a variety of awesome [plugins](https://github.com/postcss/postcss#plugins) available to use in postcss.

> This post was originally published in [Syntackle](https://syntackle.live/blog/how-to-vendor-prefix-and-minify-css-XfWdM2Vxl7G9LZAGkRwG/)