Load Config

npm i -D postcss-load-config

npm i -S|-D postcss-plugin

Install all required PostCSS plugins and save them to your package.jsondependencies/devDependencies

Then create a PostCSS config file by choosing one of the following formats

Create a postcss section in your project's package.json

Project (Root) |– client |– public | |- package.json 

{"postcss":{"parser": "sugarss", "map": false, "plugins":{"postcss-plugin":{} } } }

Create a .postcssrc file in JSON or YAML format

ℹ️ It's recommended to use an extension (e.g .postcssrc.json or .postcssrc.yml) instead of .postcssrc

Project (Root) |– client |– public | |- (.postcssrc|.postcssrc.json|.postcssrc.yml) |- package.json 

.postcssrc.json

{"parser": "sugarss", "map": false, "plugins":{"postcss-plugin":{} } }

.postcssrc.yml

parser: sugarssmap: falseplugins: postcss-plugin: {}

You may need some logic within your config. In this case create JS/TS file named:

• .postcssrc.js
• .postcssrc.mjs
• .postcssrc.cjs
• .postcssrc.ts
• .postcssrc.mts
• .postcssrc.cts
• postcss.config.js
• postcss.config.mjs
• postcss.config.cjs
• postcss.config.ts
• postcss.config.mts
• postcss.config.cts

Project (Root) |– client |– public |- (.postcssrc|postcss.config).(js|mjs|cjs|ts|mts|cts) |- package.json 

You can export the config as an {Object}

.postcssrc.js

module.exports={parser: 'sugarss',map: false,plugins: {'postcss-plugin': {}}}

Or export a {Function} that returns the config (more about the ctx param below)

.postcssrc.js

module.exports=(ctx)=>({parser: ctx.parser ? 'sugarss' : false,map: ctx.env==='development' ? ctx.map : false,plugins: {'postcss-plugin': ctx.options.plugin}})

Plugins can be loaded either using an {Object} or an {Array}

.postcssrc.js

module.exports=({ env })=>({ ...options,plugins: {'postcss-plugin': env==='production' ? {} : false}})

ℹ️ When using an {Object}, the key can be a Node.js module name, a path to a JavaScript file that is relative to the directory of the PostCSS config file, or an absolute path to a JavaScript file.

.postcssrc.js

module.exports=({ env })=>({ ...options,plugins: [env==='production' ? require('postcss-plugin')() : false]})

⚠️ When using an {Array}, make sure to require() each plugin

.postcssrc.js

module.exports={parser: 'sugarss'}

.postcssrc.js

module.exports={syntax: 'postcss-scss'}

.postcssrc.js

module.exports={stringifier: 'midas'}

.postcssrc.js

module.exports={map: 'inline'}

⚠️ In most cases options.from && options.to are set by the third-party which integrates this package (CLI, gulp, webpack). It's unlikely one needs to set/use options.from && options.to within a config file. Unless you're a third-party plugin author using this module and its Node API directly dont't set options.from && options.to yourself

module.exports={to: 'path/to/dest.css'}

module.exports={from: 'path/to/src.css'}

The plugin will be loaded with defaults

'postcss-plugin': {}||null

.postcssrc.js

module.exports={plugins: {'postcss-plugin': {}||null}}

⚠️{} must be an empty{Object} literal

The plugin will be loaded with given options

'postcss-plugin': {option: '',option: ''}

.postcssrc.js

module.exports={plugins: {'postcss-plugin': {option: '',option: ''}}}

The plugin will not be loaded

'postcss-plugin': false

.postcssrc.js

module.exports={plugins: {'postcss-plugin': false}}

Plugin execution order is determined by declaration in the plugins section (top-down)

{plugins: {'postcss-plugin': {},// [0]'postcss-plugin': {},// [1]'postcss-plugin': {}// [2]}}

When using a {Function} (postcss.config.js or .postcssrc.js), it's possible to pass context to postcss-load-config, which will be evaluated while loading your config. By default ctx.env (process.env.NODE_ENV) and ctx.cwd (process.cwd()) are available on the ctx{Object}

ℹ️ Most third-party integrations add additional properties to the ctx (e.g postcss-loader). Check the specific module's README for more information about what is available on the respective ctx

postcss.config.js

module.exports=(ctx)=>({parser: ctx.parser ? 'sugarss' : false,map: ctx.env==='development' ? ctx.map : false,plugins: {'postcss-import': {},'postcss-nested': {},cssnano: ctx.env==='production' ? {} : false}})

"scripts":{"build": "NODE_ENV=production node postcss", "start": "NODE_ENV=development node postcss" }

const{ readFileSync }=require('fs')constpostcss=require('postcss')constpostcssrc=require('postcss-load-config')constcss=readFileSync('index.css','utf8')constctx={parser: true,map: 'inline'}postcssrc(ctx).then(({ plugins, options })=>{postcss(plugins).process(css,options).then((result)=>console.log(result.css))})

"scripts":{"build": "NODE_ENV=production gulp", "start": "NODE_ENV=development gulp" }

const{ task, src, dest, series, watch }=require('gulp')constpostcss=require('gulp-postcssrc')constcss=()=>{src('src/*.css').pipe(postcss()).pipe(dest('dest'))})task('watch',()=>{watch(['src/*.css','postcss.config.js'],css)})task('default',series(css,'watch'))

"scripts":{"build": "NODE_ENV=production webpack", "start": "NODE_ENV=development webpack-dev-server" }

webpack.config.js

module.exports=(env)=>({module: {rules: [{test: /\.css$/,use: ['style-loader','css-loader','postcss-loader']}]}})

To report a security vulnerability, please use the Tidelift security contact. Tidelift will coordinate the fix and disclosure.

Michael Ciniawsky

Mateusz Derks

Ryan Dunckel

Patrick Gilday

Dalton Santos

François Wouts