PostCSS

PostCSS processes your css code and outputs it with configurable enhancements.

Usually PostCSS is used with a front end building tool, but here we'll use the command line from postcss-cli.

This example uses the autoprefixer plugin, which automatically adds browser prefixes for css properties when necessary. Reading the documentation is brief and highly recommended.

Introduction

• Create a new project directory
• Create a new node project: npm init
• Install dependencies
  • npm i -D postcss postcss-cli autoprefixer
• Create src/styles.css

  • .style {
        appearance: none;
    }

• Create postcss.config.js

  • import autoprefixer from "autoprefixer";
    
    export default {
      plugins: [
        autoprefixer
      ]
    }

• Set up script in package.json
  • "postcss": "postcss -o styles.css src/*.css"
• Run postcss
  • npm run postcss
• Output

  • .style {
        -webkit-appearance: none;
           -moz-appearance: none;
                appearance: none;
    }

Now you don't need to remember what these are and when to add them.