Idiot Note: Autoprefixer

In CSS, vendor prefixes, or browser prefixes, are used to make sure that your CSS works in various browsers. It's tedious work, but essential nonetheless. Fortunately, there is a tool that could help you: Autoprefixer.

What is it?

As the name suggests, Autoprefixer automates the process of adding vendor prefixes to your CSS files. With Autoprefixer, you can forget about writing prefixes altogether.

How to use it?

Autoprefixer is implemented as a PostCSS plugin. We can learn about PostCSS in greater details in another post, but now we're only going to look specifically into Autoprefixer.

Autoprefixer is implemented in many tools. Here, we'll try using Webpack.

Here's the step-by-step process:

Install webpack and webpack-cli in your project.

npm install webpack webpack-cli --save-dev

Install style-loader, css-loader and postcss-loader in your project.

npm install style-loader css-loader postcss-loader --save-dev

Install autoprefixer in your project.

npm install autoprefixer --save-dev

Create webpack.config.js file with the following content:

const path = require('path');

module.exports = {
    entry: './src/main.js',
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist')
    },
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [
                    'style-loader','css-loader','postcss-loader'
                ]
            }
        ]
    },
    watch: true
}

Create postcss.config.js file. This file manages all PostCSS plugins that we're using. In this example, we're only using Autoprefixer plugin. Here's the content of our postcss.config.js file:
```
module.exports = {
    plugins: [
        require('autoprefixer')
    ]
};
```

We're going to create a simple web page that consists of a rotated rectangle that moves in a circle. Here's the structure of the project and the content of each files:

.
    ├── dist
    │   ├── index.html                # the main page
    ├── src
    │   ├── main.js                   # main page's script
    │   ├── main.css                  # main page's style
    ├── package.json     
    ├── postcss.config.js
    ├── webpack.config.js

dist/index.html

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Autoprefixer Example</title>
</head>

<body>
    <div id="app"></div>

    <!-- include scripts -->
    <script type="text/javascript" src="./bundle.js"></script>
</body>

</html>

src/main.js

// import CSS style
import './main.css';

function app() {
    let rectangle = document.createElement('div');
    rectangle.classList.add('rectangle');

    return rectangle;
}

document.getElementById('app').appendChild(app());

src/main.css
Notice that, in this file, we use property transform and animation. Normally, we have to use prefixes for these properties. However, when using Autoprefixer, we don't need to do it.

@keyframes moveInCircle {
    0%   {background-color:red; left:0px; top:0px;}
    25%  {background-color:yellow; left:100px; top:0px;}
    50%  {background-color:blue; left:100px; top:100px;}
    75%  {background-color:green; left:0px; top:100px;}
    100% {background-color:red; left:0px; top:0px;}      
}

.rectangle {
    width: 20px;
    height: 20px;
    background: red;
    position: relative;
    transform: rotate(45deg);
    animation: moveInCircle 4s ease 0s infinite;
}

Finally, bundle all the file using this command: npx webpack. Open the index.html file to see the result.

Use Inspect Element to see the CSS on the rectangle like the image below. You'll notice that Autoprefixer had added the prefixes for you.

That's it for now!