www.aleph1.co.uk Git - yaffs-website/blob - node_modules/postcss-load-plugins/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 Plugins" src="http://michael-ciniawsky.github.io/postcss-load-plugins/logo.svg">
  11   <a href="https://github.com/postcss/postcss">
  12     <img width="110" height="110" title="PostCSS"           src="http://postcss.github.io/postcss/logo.svg" hspace="10">
  13   </a>
  14   <h1>Load Plugins</h1>
  15 </div>
  16
  17 <h2 align="center">Install</h2>
  18
  19 ```bash
  20 npm i -D postcss-load-plugins
  21 ```
  22
  23 <h2 align="center">Usage</h2>
  24
  25 ```
  26 npm i -S|-D postcss-plugin
  27 ```
  28
  29 Install plugins and save them to your ***package.json*** dependencies/devDependencies.
  30
  31 ### `package.json`
  32
  33 Create **`postcss`** section in your projects **`package.json`**.
  34
  35 ```
  36 App
  37   |– client
  38   |– public
  39   |
  40   |- package.json
  41 ```
  42
  43 ```json
  44 {
  45   "postcss": {
  46     "plugins": {
  47       "postcss-plugin": {}
  48     }
  49   }
  50 }
  51 ```
  52
  53 ### `.postcssrc`
  54
  55 Create a **`.postcssrc`** file.
  56
  57 ```
  58 App
  59   |– client
  60   |– public
  61   |
  62   |- (.postcssrc|.postcssrc.json|.postcssrc.yaml)
  63   |- package.json
  64 ```
  65
  66 **`JSON`**
  67 ```json
  68 {
  69   "plugins": {
  70     "postcss-plugin": {}
  71   }
  72 }
  73 ```
  74
  75 **`YAML`**
  76 ```yaml
  77 plugins:
  78   postcss-plugin: {}
  79 ```
  80
  81 ### `postcss.config.js` or `.postcssrc.js`
  82
  83 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`**.
  84
  85 ```
  86 App
  87   |– client
  88   |– public
  89   |
  90   |- (postcss.config.js|.postcssrc.js)
  91   |- package.json
  92 ```
  93
  94 Plugins can be loaded in either using an `{Object}` or an `{Array}`.
  95
  96 ##### `{Object}`
  97
  98 ```js
  99 module.exports = (ctx) => ({
 100   plugins: {
 101     'postcss-plugin': ctx.plugin
 102   }
 103 })
 104 ```
 105
 106 ##### `{Array}`
 107
 108 ```js
 109 module.exports = (ctx) => ({
 110   plugins: [
 111     require('postcss-plugin')(ctx.plugin)
 112   ]
 113 })
 114 ```
 115
 116 <h2 align="center">Options</h2>
 117
 118 Plugin **options** can take the following values.
 119
 120 **`{}`: Plugin loads with defaults**
 121
 122 ```js
 123 'postcss-plugin': {} || null
 124 ```
 125
 126 > :warning: `{}` must be an **empty** object
 127
 128 **`{Object}`: Plugin loads with options**
 129
 130 ```js
 131 'postcss-plugin': { option: '', option: '' }
 132 ```
 133
 134 **`false`: Plugin will not be loaded**
 135
 136 ```js
 137 'postcss-plugin': false
 138 ```
 139
 140 ### Order
 141
 142 Plugin **order** is determined by declaration in the plugins section.
 143
 144 ```js
 145 {
 146   plugins: {
 147     'postcss-plugin': {}, // plugins[0]
 148     'postcss-plugin': {}, // plugins[1]
 149     'postcss-plugin': {}  // plugins[2]
 150   }
 151 }
 152 ```
 153
 154 ### Context
 155
 156 When using a function `(postcss.config.js)`, it is possible to pass context to `postcss-load-plugins`, which will be evaluated before loading your plugins. By default `ctx.env (process.env.NODE_ENV)` and `ctx.cwd (process.cwd())` are available.
 157
 158 <h2 align="center">Examples</h2>
 159
 160 **`postcss.config.js`**
 161
 162 ```js
 163 module.exports = (ctx) => ({
 164   plugins: {
 165     postcss-import: {},
 166     postcss-modules: ctx.modules ? {} : false,
 167     cssnano: ctx.env === 'production' ? {} : false
 168   }
 169 })
 170 ```
 171
 172 ### <img width="80" height="80" src="https://worldvectorlogo.com/logos/nodejs-icon.svg">
 173
 174 ```js
 175 const { readFileSync } = require('fs')
 176
 177 const postcss = require('postcss')
 178 const pluginsrc = require('postcss-load-plugins')
 179
 180 const css = readFileSync('index.css', 'utf8')
 181
 182 const ctx = { modules: true }
 183
 184 pluginsrc(ctx).then((plugins) => {
 185   postcss(plugins)
 186     .process(css)
 187     .then((result) => console.log(result.css))
 188 })
 189 ```
 190
 191 <h2 align="center">Maintainers</h2>
 192
 193 <table>
 194   <tbody>
 195     <tr>
 196       <td align="center">
 197         <img width="150" height="150"
 198         src="https://github.com/michael-ciniawsky.png?v=3&s=150">
 199         <br>
 200         <a href="https://github.com/michael-ciniawsky">Michael Ciniawsky</a>
 201       </td>
 202       <td align="center">
 203         <img width="150" height="150"
 204         src="https://github.com/ertrzyiks.png?v=3&s=150">
 205         <br>
 206         <a href="https://github.com/ertrzyiks">Mateusz Derks</a>
 207       </td>
 208     </tr>
 209   </tbody>
 210 </table>
 211
 212 <h2 align="center">Contributors</h2>
 213
 214 <table>
 215   <tbody>
 216     <tr>
 217       <td align="center">
 218         <img width="150" height="150"
 219         src="https://github.com/Kovensky.png?v=3&s=150">
 220         <br>
 221         <a href="https://github.com/Kovensky">Diogo Franco</a>
 222       </td>
 223     </tr>
 224   </tbody>
 225 </table>
 226
 227
 228 [npm]: https://img.shields.io/npm/v/postcss-load-plugins.svg
 229 [npm-url]: https://npmjs.com/package/postcss-load-plugins
 230
 231 [node]: https://img.shields.io/node/v/postcss-load-plugins.svg
 232 [node-url]: https://nodejs.org/
 233
 234 [deps]: https://david-dm.org/michael-ciniawsky/postcss-load-plugins.svg
 235 [deps-url]: https://david-dm.org/michael-ciniawsky/postcss-load-plugins
 236
 237 [tests]: http://img.shields.io/travis/michael-ciniawsky/postcss-load-plugins.svg
 238 [tests-url]: https://travis-ci.org/michael-ciniawsky/postcss-load-plugins
 239
 240 [cover]: https://coveralls.io/repos/github/michael-ciniawsky/postcss-load-plugins/badge.svg
 241 [cover-url]: https://coveralls.io/github/michael-ciniawsky/postcss-load-plugins
 242
 243 [style]: https://img.shields.io/badge/code%20style-standard-yellow.svg
 244 [style-url]: http://standardjs.com/
 245
 246 [chat]: https://img.shields.io/gitter/room/postcss/postcss.svg
 247 [chat-url]: https://gitter.im/postcss/postcss