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.
Level