Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Example of a typical PostCSS config file (cli flavor). I use this for WordPress theme development.
{
"use": [
"postcss-import",
"postcss-mixins",
"postcss-nested",
"postcss-advanced-variables",
"perfectionist",
"stylefmt",
"postcss-cssnext",
"cssnano"
],
"input": "./css-src/main-src.css",
"output": "./schnell/css/main.css",
"watch": true,
"map": "file",
"perfectionist": {
"cascade": false,
"sourcemap": true
},
"cssnano": {
"discardComments": false,
"autoprefixer": false,
"core": false
}
}
@HeikoMamerow

This comment has been minimized.

Copy link
Owner Author

@HeikoMamerow HeikoMamerow commented Dec 28, 2016

This file is a PostCSS "task". You can define so many tasks you need and stack them together like you want in your package.json

@HeikoMamerow

This comment has been minimized.

Copy link
Owner Author

@HeikoMamerow HeikoMamerow commented Dec 28, 2016

  • Line 2: Call all the PostCSS plugins you need for this task in array.
  • Line 12: Path of the input file. This is the file, where you write your css code,
  • Line 13: Path of the output file. This file you use in your theme.
  • Line 14: Option to watch over file changes. If you change (save) the input file, then the task will run.
  • Line 16 ff.: Some options for the perfectionist plugin.
  • Line 29 ff.: Some options for the cssnano plugin

There are some more options for the task. Read the manual: https://github.com/postcss/postcss-cli

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment