postcss-load-options's Introduction

Load Options

Autoload Options for PostCSS

Install

npm i -D postcss-load-options

Usage

`package.json`

Create postcss section in your projects package.json.

App
  |– client
  |– public
  |
  |- package.json

{
  "dependencies": {
    "sugarss": "0.2.0"
  },
  "postcss": {
    "parser": "sugarss",
    "map": false,
    "from": "path/to/src/file.css",
    "to": "path/to/dest/file.css"
  }
}

`.postcssrc`

Create a .postcssrc file.

App
  |– client
  |– public
  |
  |-.postcssrc
  |- package.json

{
  "parser": "sugarss",
  "map": false,
  "from": "path/to/src/file.css",
  "to": "path/to/dest/file.css"
}

`postcss.config.js`

Create a postcss.config.js file.

App
  |– client
  |– public
  |
  |- postcss.config.js
  |- package.json

module.exports = (ctx) => {
  return {
    parser: ctx.sugar ? 'sugarss' : false,
    map: ctx.env === 'development' ? ctx.map || false,
    from: 'path/to/src/file.css',
    to: 'path/to/dest/file.css'
  }
}

Options

parser:

'parser': 'sugarss'

syntax:

'syntax': 'postcss-scss'

stringifier:

'stringifier': 'midas'

map:

'map': 'inline'

from:

from: 'path/to/dest/file.css'

to:

to: 'path/to/dest/file.css'

Context

When using a function (postcss.config.js), it is possible to pass context to postcss-load-options, which will be evaluated before loading your options. By default ctx.env (process.env.NODE_ENV) and ctx.cwd (process.cwd()) are available.

Example

const { readFileSync } = require('fs')

const postcss = require('postcss')
const optionsrc = require('postcss-load-options')

const sss =  readFileSync('index.sss', 'utf8')

const ctx = { sugar: true,  map: 'inline' }

optionsrc(ctx).then((options) => {
  postcss()
    .process(sss, options)
    .then(({ css }) => console.log(css))
}))