www.aleph1.co.uk Git - yaffs-website/blob - node_modules/postcss-load-options/README.md

   1 [![npm][npm]][npm-url]
   2 [![node][node]][node-url]
   3 [![deps][deps]][deps-url]
   4 [![tests][tests]][tests-url]
   5 [![coverage][cover]][cover-url]
   6 [![code style][style]][style-url]
   7 [![chat][chat]][chat-url]
   8
   9 <div align="center">
  10   <img width="100" height="100" title="Load Options"
  11     src="https://michael-ciniawsky.github.io/postcss-load-options/logo.svg"
  12   <a href="https://github.com/postcss/postcss">
  13     <img width="110" height="110" title="PostCSS"           src="http://postcss.github.io/postcss/logo.svg" hspace="10">
  14   </a>
  15   <h1>Load Options</h1>
  16 </div>
  17
  18 <h2 align="center">Install</h2>
  19
  20 ```bash
  21 npm i -D postcss-load-options
  22 ```
  23 <h2 align="center">Usage</h2>
  24
  25 ### `package.json`
  26
  27 Create **`postcss`** section in your projects **`package.json`**.
  28
  29 ```
  30 App
  31   |– client
  32   |– public
  33   |
  34   |- package.json
  35 ```
  36
  37 ```json
  38 {
  39   "dependencies": {
  40     "sugarss": "0.2.0"
  41   },
  42   "postcss": {
  43     "parser": "sugarss",
  44     "map": false,
  45     "from": "path/to/src/file.css",
  46     "to": "path/to/dest/file.css"
  47   }
  48 }
  49 ```
  50
  51 ### `.postcssrc`
  52
  53 Create a **`.postcssrc`** file.
  54
  55 ```
  56 App
  57   |– client
  58   |– public
  59   |
  60   |- (.postcssrc|.postcssrc.json|.postcssrc.yaml)
  61   |- package.json
  62 ```
  63
  64 **`JSON`**
  65 ```json
  66 {
  67   "parser": "sugarss",
  68   "map": false,
  69   "from": "path/to/src/file.css",
  70   "to": "path/to/dest/file.css"
  71 }
  72 ```
  73
  74 **`YAML`**
  75 ```yaml
  76 parser: sugarss
  77 map: false
  78 from: "/path/to/src.sss"
  79 to: "/path/to/dest.css"
  80 ```
  81
  82 ### `postcss.config.js` or `.postcssrc.js`
  83
  84 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`**.
  85
  86 ```
  87 App
  88   |– client
  89   |– public
  90   |
  91   |- (postcss.config.js|.postcssrc.js)
  92   |- package.json
  93 ```
  94
  95 ```js
  96 module.exports = (ctx) => {
  97   return {
  98     parser: ctx.sugar ? 'sugarss' : false,
  99     map: ctx.env === 'development' ? ctx.map || false,
 100     from: 'path/to/src/file.css',
 101     to: 'path/to/dest/file.css'
 102   }
 103 }
 104 ```
 105
 106 <h2 align="center">Options</h2>
 107
 108 **`parser`**:
 109
 110 ```js
 111 'parser': 'sugarss'
 112 ```
 113
 114 **`syntax`**:
 115
 116 ```js
 117 'syntax': 'postcss-scss'
 118 ```
 119 **`stringifier`**:
 120
 121 ```js
 122 'stringifier': 'midas'
 123 ```
 124
 125 [**`map`**:](https://github.com/postcss/postcss/blob/master/docs/source-maps.md)
 126
 127 ```js
 128 'map': 'inline'
 129 ```
 130
 131 **`from`**:
 132
 133 ```js
 134 from: 'path/to/dest/file.css'
 135 ```
 136
 137 **`to`**:
 138
 139 ```js
 140 to: 'path/to/dest/file.css'
 141 ```
 142
 143 ### Context
 144
 145 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.
 146
 147 <h2 align="center">Example</h2>
 148
 149 ### <img width="80" height="80" src="https://worldvectorlogo.com/logos/nodejs-icon.svg">
 150
 151 ```js
 152 const { readFileSync } = require('fs')
 153
 154 const postcss = require('postcss')
 155 const optionsrc = require('postcss-load-options')
 156
 157 const sss =  readFileSync('index.sss', 'utf8')
 158
 159 const ctx = { sugar: true,  map: 'inline' }
 160
 161 optionsrc(ctx).then((options) => {
 162   postcss()
 163     .process(sss, options)
 164     .then(({ css }) => console.log(css))
 165 }))
 166 ```
 167
 168 <h2 align="center">Maintainers</h2>
 169
 170 <table>
 171   <tbody>
 172    <tr>
 173     <td align="center">
 174       <img width="150 height="150"
 175       src="https://avatars.githubusercontent.com/u/5419992?v=3&s=150">
 176       <br />
 177       <a href="https://github.com/michael-ciniawsky">Michael Ciniawsky</a>
 178     </td>
 179   </tr>
 180   <tbody>
 181 </table>
 182
 183
 184 [npm]: https://img.shields.io/npm/v/postcss-load-options.svg
 185 [npm-url]: https://npmjs.com/package/postcss-load-options
 186
 187 [node]: https://img.shields.io/node/v/postcss-load-options.svg
 188 [node-url]: https://nodejs.org/
 189
 190 [deps]: https://david-dm.org/michael-ciniawsky/postcss-load-options.svg
 191 [deps-url]: https://david-dm.org/michael-ciniawsky/postcss-load-options
 192
 193 [tests]: http://img.shields.io/travis/michael-ciniawsky/postcss-load-options.svg
 194 [tests-url]: https://travis-ci.org/michael-ciniawsky/postcss-load-options
 195
 196 [cover]: https://coveralls.io/repos/github/michael-ciniawsky/postcss-load-options/badge.svg
 197 [cover-url]: https://coveralls.io/github/michael-ciniawsky/postcss-load-options
 198
 199 [style]: https://img.shields.io/badge/code%20style-standard-yellow.svg
 200 [style-url]: http://standardjs.com/
 201
 202 [chat]: https://img.shields.io/gitter/room/postcss/postcss.svg
 203 [chat-url]: https://gitter.im/postcss/postcss