postcss-load-options

    1.2.0 • Public • Published

    npm node deps tests coverage code style chat

    Load Options

    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|.postcssrc.json|.postcssrc.yaml)
      |- package.json
    

    JSON

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

    YAML

    parser: sugarss
    map: false
    from: "/path/to/src.sss"
    to: "/path/to/dest.css"

    postcss.config.js or .postcssrc.js

    You may need some JavaScript logic to generate your config. For this case you can use a file named postcss.config.js or .postcssrc.js.

    App
      |– client
      |– public
      |
      |- (postcss.config.js|.postcssrc.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))
    }))

    Maintainers


    Michael Ciniawsky

    Install

    npm i postcss-load-options

    DownloadsWeekly Downloads

    348,505

    Version

    1.2.0

    License

    MIT

    Last publish

    Collaborators

    • ai
    • michael-ciniawsky