PostCSS Config Integration

postcssrc.md

Node API

Context

Name	Description
cwd	process.cwd()
env	process.env.NODE_ENV

Usage

import postcssrc from 'postcss-load-config'

postcssrc(ctx, path)
  .then((config) => console.log(config.plugins, config.options, config.file))
  .catch((err) => console.log(err))

CLI

Context

Name	Description
cwd	process.cwd()
env	process.env.NODE_ENV
file	extname, dirname, basename (vinyl-like)
options	Custom Context

Usage

module.exports = (ctx) => ({
  parser: ctx.file.extname === '.sss' ? 'sugarss' : false
  plugins: {
    'postcss-import': { root: ctx.file.dirname }
    'postcss-assets': ctx.options.assets
    'cssnano': ctx.env === 'production' ? ctx.options.minify : false
  }
})

postcss input.css -o output.css --ctx [options]

TODO

• Add ctx.file
• Add ctx.options

webpack

Context

Name	Description
cwd	process.cwd()
env	process.env.NODE_ENV
file	extname, dirname, basename (vinyl-like)
options	Custom Context

Usage

module.exports = (ctx) => ({
  parser: ctx.file.extname === '.sss' ? 'sugarss' : false
  plugins: {
    'postcss-import': { root: ctx.file.dirname }
    'postcss-assets': ctx.options.assets
    'cssnano': ctx.env === 'production' ? ctx.options.minify : false
  }
})

{
  test: /\.(css|sss}/
  use: [
    'style-loader',
    'css-loader',
    'postcss-loader'
  ]
}

TODO

• Extract non webpack specific (e.g file) form ctx.webpack(webpack-contrib/postcss-loader#158 (comment))
• Allow setting custom context in `webpack.config.js (webpack-contrib/postcss-loader#158 (comment))
• Remove webpack Loader API

Gulp

Usage

module.exports = (ctx) => ({
  parser: ctx.file.extname === '.sss' ? 'sugarss' : false
  plugins: {
    'postcss-import': { root: ctx.file.dirname }
    'postcss-assets': ctx.options.assets
    'cssnano': ctx.env === 'production' ? ctx.options.minify : false
  }
})

gulp.task('css', () => {
  const cxt = {}
  
  gulp.src('*.{css|sss}')
    .pipe(postcss(ctx))
    .pipe(gulp.dest('dest'))
})

Grunt

Context

Usage

TODO