Load Config
Autoload Config for PostCSS
Install
npm i -D postcss-load-config
Usage
npm i -S|-D postcss-plugin
Install plugins and save them to your package.json dependencies/devDependencies.
package.json
Create postcss
section in your projects package.json
.
App
|– client
|– public
|
|- package.json
{
"postcss": {
"parser": "sugarss",
"map": false,
"from": "/path/to/src.sss",
"to": "/path/to/dest.css",
"plugins": {
"postcss-plugin": {}
}
}
}
.postcssrc
Create a .postcssrc
file.
App
|– client
|– public
|
|-.postcssrc
|- package.json
{
"parser": "sugarss",
"map": false,
"from": "/path/to/src.sss",
"to": "/path/to/dest.css",
"plugins": {
"postcss-plugin": {}
}
}
postcss.config.js
Create a postcss.config.js
file.
App
|– client
|– public
|
|- postcss.config.js
|- package.json
module.exports = (ctx) => {
parser: ctx.sugar ? 'sugarss' : false,
map: ctx.env === 'development' ? ctx.map : false,
from: ctx.from
to: ctx.to
plugins: {
'postcss-plugin': ctx.plugin
}
}
Plugins can be loaded in either using an {Object}
or an {Array}
.
{Object}
module.exports = (ctx) => {
...options
plugins: {
'postcss-plugin': ctx.plugin
}
}
{Array}
module.exports = (ctx) => {
...options
plugins: [
require('postcss-plugin')(ctx.plugin)
]
}
:warning: When using an Array, make sure to require()
them.
Options
parser
:
'parser': 'sugarss'
syntax
:
'syntax': 'postcss-scss'
stringifier
:
'stringifier': 'midas'
map
:
'map': 'inline'
from
:
from: 'path/to/src.css'
to
:
to: 'path/to/dest.css'
Plugins
Options
{} || null
: Plugin loads with defaults.
'postcss-plugin': {} || null
:warning: {}
must be an empty object
[Object]
: Plugin loads with given options.
'postcss-plugin': { option: '', option: '' }
false
: Plugin will not be loaded.
'postcss-plugin': false
Order
Plugin order is determined by declaration in the plugins section.
{
plugins: {
'postcss-plugin': {},
'postcss-plugin': {},
'postcss-plugin': {}
}
}
Context
When using a function (postcss.config.js)
, it is 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.
Examples
postcss.config.js
module.exports = (ctx) => {
parser: ctx.sugar ? 'sugarss' : false,
map: ctx.env === 'development' ? ctx.map : false,
from: ctx.from
to: ctx.to
plugins: {
postcss-import: null,
postcss-nested: null,
cssnano: ctx.env === 'development' ? false : null
}
}
"scripts": {
"build": "NODE_ENV=production node postcss",
"start": "NODE_ENV=development node postcss"
}
const { readFileSync } = require('fs')
const postcss = require('postcss')
const postcssrc = require('postcss-load-config')
const css = readFileSync('index.sss', 'utf8')
const ctx = { map: 'inline', from: '/index.sss', to: '/index.css' }
postcssrc(ctx).then(({ plugins, options }) => {
postcss(plugins)
.process(css, options)
.then(({ css }) => console.log(css))
})
"scripts": {
"build": "NODE_ENV=production gulp",
"start": "NODE_ENV=development gulp"
}
const { task, src, dest } = require('gulp')
const postcss = require('gulp-postcssrc')
task('css', () => {
src('src/*.css')
.pipe(postcss())
.pipe(dest('dest'))
})
task('default', ['css'])
"scripts": {
"build": "NODE_ENV=production webpack",
"start": "NODE_ENV=development webpack-dev-server"
}
module.exports = (env) => {
module: {
rules: [
{
test: /\.css$/
use: [
'style-loader',
{
loader: 'css-loader',
options: { importLoaders: 1 } }
},
'postcss-loader'
]
}
]
}
}
Maintainers
Contributors