aboutsummaryrefslogtreecommitdiff
path: root/node_modules/postcss-loader/README.md
diff options
context:
space:
mode:
authorruki <waruqi@gmail.com>2018-11-08 00:38:48 +0800
committerruki <waruqi@gmail.com>2018-11-07 21:53:09 +0800
commit26105034da4fcce7ac883c899d781f016559310d (patch)
treec459a5dc4e3aa0972d9919033ece511ce76dd129 /node_modules/postcss-loader/README.md
parent2c77f00f1a7ecb6c8192f9c16d3b2001b254a107 (diff)
downloadxmake-docs-26105034da4fcce7ac883c899d781f016559310d.tar.gz
xmake-docs-26105034da4fcce7ac883c899d781f016559310d.zip
switch to vuepress
Diffstat (limited to 'node_modules/postcss-loader/README.md')
-rw-r--r--node_modules/postcss-loader/README.md466
1 files changed, 466 insertions, 0 deletions
diff --git a/node_modules/postcss-loader/README.md b/node_modules/postcss-loader/README.md
new file mode 100644
index 00000000..a3465703
--- /dev/null
+++ b/node_modules/postcss-loader/README.md
@@ -0,0 +1,466 @@
+[![npm][npm]][npm-url]
+[![node][node]][node-url]
+[![deps][deps]][deps-url]
+[![tests][tests]][tests-url]
+[![coverage][cover]][cover-url]
+[![chat][chat]][chat-url]
+
+<div align="center">
+ <img width="180" height="180" hspace="10"
+ alt="PostCSS Logo"
+ src="http://postcss.github.io/postcss/logo.svg">
+ <a href="https://github.com/webpack/webpack">
+ <img width="200" height="200" hspace="10"
+ src="https://cdn.rawgit.com/webpack/media/e7485eb2/logo/icon.svg">
+ </a>
+ <div align="center">
+ <a href="https://evilmartians.com/?utm_source=postcss">
+ <img src="https://evilmartians.com/badges/sponsored-by-evil-martians.svg"
+ alt="Sponsored by Evil Martians" width="236" height="54" vspace="10">
+ </a>
+ </div>
+ <h1>PostCSS Loader</h1>
+ <p>Loader for <a href="http://webpack.js.org/">webpack</a> to process CSS with <a href="http://postcss.org/">PostCSS</a></p>
+</div>
+
+<h2 align="center">Install</h2>
+
+```bash
+npm i -D postcss-loader
+```
+
+<h2 align="center">Usage</h2>
+
+### `Configuration`
+
+**postcss.config.js**
+```js
+module.exports = {
+ parser: 'sugarss',
+ plugins: {
+ 'postcss-import': {},
+ 'postcss-cssnext': {},
+ 'cssnano': {}
+ }
+}
+```
+
+You can read more about common PostCSS Config [here](https://github.com/michael-ciniawsky/postcss-load-config).
+
+### `Config Cascade`
+
+You can use different `postcss.config.js` files in different directories.
+Config lookup starts from `path.dirname(file)` and walks the file tree upwards until a config file is found.
+
+```
+|– components
+| |– component
+| | |– index.js
+| | |– index.png
+| | |– style.css (1)
+| | |– postcss.config.js (1)
+| |– component
+| | |– index.js
+| | |– image.png
+| | |– style.css (2)
+|
+|– postcss.config.js (1 && 2 (recommended))
+|– webpack.config.js
+|
+|– package.json
+```
+
+After setting up your `postcss.config.js`, add `postcss-loader` to your `webpack.config.js`. You can use it standalone or in conjunction with `css-loader` (recommended). Use it **after** `css-loader` and `style-loader`, but **before** other preprocessor loaders like e.g `sass|less|stylus-loader`, if you use any.
+
+**webpack.config.js**
+```js
+module.exports = {
+ module: {
+ rules: [
+ {
+ test: /\.css$/,
+ use: [ 'style-loader', 'postcss-loader' ]
+ }
+ ]
+ }
+}
+```
+
+> ⚠️ When `postcss-loader` is used standalone (without `css-loader`) don't use `@import` in your CSS, since this can lead to quite bloated bundles
+
+**webpack.config.js (recommended)**
+```js
+module.exports = {
+ module: {
+ rules: [
+ {
+ test: /\.css$/,
+ use: [
+ 'style-loader',
+ { loader: 'css-loader', options: { importLoaders: 1 } },
+ 'postcss-loader'
+ ]
+ }
+ ]
+ }
+}
+```
+
+<h2 align="center">Options</h2>
+
+|Name|Type|Default|Description|
+|:--:|:--:|:-----:|:----------|
+|[`exec`](#exec)|`{Boolean}`|`undefined`|Enable PostCSS Parser support in `CSS-in-JS`|
+|[`parser`](#syntaxes)|`{String\|Object}`|`undefined`|Set PostCSS Parser|
+|[`syntax`](#syntaxes)|`{String\|Object}`|`undefined`|Set PostCSS Syntax|
+|[`stringifier`](#syntaxes)|`{String\|Object}`|`undefined`|Set PostCSS Stringifier|
+|[`config`](#config)|`{Object}`|`undefined`|Set `postcss.config.js` config path && `ctx`|
+|[`plugins`](#plugins)|`{Array\|Function}`|`[]`|Set PostCSS Plugins|
+|[`sourceMap`](#sourcemap)|`{String\|Boolean}`|`false`|Enable Source Maps|
+
+### `Exec`
+
+If you use JS styles without the [`postcss-js`][postcss-js] parser, add the `exec` option.
+
+```js
+{
+ test: /\.style.js$/,
+ use: [
+ 'style-loader',
+ { loader: 'css-loader', options: { importLoaders: 1 } },
+ { loader: 'postcss-loader', options: { parser: 'sugarss', exec: true } }
+ ]
+}
+```
+
+### `Config`
+
+|Name|Type|Default|Description|
+|:--:|:--:|:-----:|:----------|
+|[`path`](#path)|`{String}`|`undefined`|PostCSS Config Path|
+|[`context`](#context)|`{Object}`|`undefined`|PostCSS Config Context|
+
+#### `Path`
+
+You can manually specify the path to search for your config (`postcss.config.js`) with the `config.path` option. This is needed if you store your config in a separate e.g `./config || ./.config` folder.
+
+> ⚠️ Otherwise it is **unnecessary** to set this option and is **not** recommended
+
+**webpack.config.js**
+```js
+{
+ loader: 'postcss-loader',
+ options: {
+ config: {
+ path: 'path/to/postcss.config.js'
+ }
+ }
+}
+```
+
+#### `Context (ctx)`
+
+|Name|Type|Default|Description|
+|:--:|:--:|:-----:|:----------|
+|`env`|`{String}`|`'development'`|`process.env.NODE_ENV`|
+|`file`|`{Object}`|`loader.resourcePath`|`extname`, `dirname`, `basename`|
+|`options`|`{Object}`|`{}`|Options|
+
+`postcss-loader` exposes context `ctx` to the config file, making your `postcss.config.js` dynamic, so can use it to do some real magic ✨
+
+**postcss.config.js**
+```js
+module.exports = ({ file, options, env }) => ({
+ parser: file.extname === '.sss' ? 'sugarss' : false,
+ plugins: {
+ 'postcss-import': { root: file.dirname },
+ 'postcss-cssnext': options.cssnext ? options.cssnext : false,
+ 'autoprefixer': env === 'production' ? options.autoprefixer : false,
+ 'cssnano': env === 'production' ? options.cssnano : false
+ }
+})
+```
+
+**webpack.config.js**
+```js
+{
+ loader: 'postcss-loader',
+ options: {
+ config: {
+ ctx: {
+ cssnext: {...options},
+ cssnano: {...options},
+ autoprefixer: {...options}
+ }
+ }
+ }
+}
+```
+
+### `Plugins`
+
+**webpack.config.js**
+```js
+{
+ loader: 'postcss-loader',
+ options: {
+ ident: 'postcss',
+ plugins: (loader) => [
+ require('postcss-import')({ root: loader.resourcePath }),
+ require('postcss-cssnext')(),
+ require('autoprefixer')(),
+ require('cssnano')()
+ ]
+ }
+}
+```
+
+> ⚠️ webpack requires an identifier (`ident`) in `options` when `{Function}/require` is used (Complex Options). The `ident` can be freely named as long as it is unique. It's recommended to name it (`ident: 'postcss'`)
+
+### `Syntaxes`
+
+|Name|Type|Default|Description|
+|:--:|:--:|:-----:|:----------|
+|[`parser`](#parser)|`{String\|Function}`|`undefined`|Custom PostCSS Parser|
+|[`syntax`](#syntax)|`{String\|Function}`|`undefined`|Custom PostCSS Syntax|
+|[`stringifier`](#stringifier)|`{String\|Function}`|`undefined`|Custom PostCSS Stringifier|
+
+#### `Parser`
+
+**webpack.config.js**
+```js
+{
+ test: /\.sss$/,
+ use: [
+ ...,
+ { loader: 'postcss-loader', options: { parser: 'sugarss' } }
+ ]
+}
+```
+
+#### `Syntax`
+
+**webpack.config.js**
+```js
+{
+ test: /\.css$/,
+ use: [
+ ...,
+ { loader: 'postcss-loader', options: { syntax: 'sugarss' } }
+ ]
+}
+```
+
+#### `Stringifier`
+
+**webpack.config.js**
+```js
+{
+ test: /\.css$/,
+ use: [
+ ...,
+ { loader: 'postcss-loader', options: { stringifier: 'midas' } }
+ ]
+}
+```
+
+### `SourceMap`
+
+Enables source map support, `postcss-loader` will use the previous source map given by other loaders and update it accordingly, if no previous loader is applied before `postcss-loader`, the loader will generate a source map for you.
+
+**webpack.config.js**
+```js
+{
+ test: /\.css/,
+ use: [
+ { loader: 'style-loader', options: { sourceMap: true } },
+ { loader: 'css-loader', options: { sourceMap: true } },
+ { loader: 'postcss-loader', options: { sourceMap: true } },
+ { loader: 'sass-loader', options: { sourceMap: true } }
+ ]
+}
+```
+
+#### `'inline'`
+
+You can set the `sourceMap: 'inline'` option to inline the source map
+within the CSS directly as an annotation comment.
+
+**webpack.config.js**
+```js
+{
+ loader: 'postcss-loader',
+ options: {
+ sourceMap: 'inline'
+ }
+}
+```
+
+```css
+.class { color: red; }
+
+/*# sourceMappingURL=data:application/json;base64, ... */
+```
+
+<h2 align="center">Examples</h2>
+
+### `Stylelint`
+
+**webpack.config.js**
+```js
+{
+ test: /\.css$/,
+ use: [
+ 'style-loader',
+ 'css-loader',
+ {
+ loader: 'postcss-loader',
+ options: {
+ ident: 'postcss',
+ plugins: [
+ require('postcss-import')(),
+ require('stylelint')(),
+ ...,
+ ]
+ }
+ }
+ ]
+}
+```
+
+### `CSS Modules`
+
+This loader [cannot be used] with [CSS Modules] out of the box due
+to the way `css-loader` processes file imports. To make them work properly,
+either add the css-loader’s [`importLoaders`] option.
+
+**webpack.config.js**
+```js
+{
+ test: /\.css$/,
+ use: [
+ 'style-loader',
+ { loader: 'css-loader', options: { modules: true, importLoaders: 1 } },
+ 'postcss-loader'
+ ]
+}
+```
+
+or use [postcss-modules] instead of `css-loader`.
+
+[`importLoaders`]: https://github.com/webpack-contrib/css-loader#importloaders
+[cannot be used]: https://github.com/webpack/css-loader/issues/137
+[CSS Modules]: https://github.com/webpack/css-loader#css-modules
+[postcss-modules]: https://github.com/outpunk/postcss-modules
+
+### `CSS-in-JS`
+
+If you want to process styles written in JavaScript, use the [postcss-js] parser.
+
+[postcss-js]: https://github.com/postcss/postcss-js
+
+```js
+{
+ test: /\.style.js$/,
+ use: [
+ 'style-loader',
+ { loader: 'css-loader', options: { importLoaders: 2 } },
+ { loader: 'postcss-loader', options: { parser: 'postcss-js' } },
+ 'babel-loader'
+ ]
+}
+```
+
+As result you will be able to write styles in the following way
+
+```js
+import colors from './styles/colors'
+
+export default {
+ '.menu': {
+ color: colors.main,
+ height: 25,
+ '&_link': {
+ color: 'white'
+ }
+ }
+}
+```
+
+> :warning: If you are using Babel you need to do the following in order for the setup to work
+
+> 1. Add [babel-plugin-add-module-exports] to your configuration
+> 2. You need to have only one **default** export per style module
+
+[babel-plugin-add-module-exports]: https://github.com/59naga/babel-plugin-add-module-exports
+
+### [Extract CSS][ExtractPlugin]
+
+[ExtractPlugin]: https://github.com/webpack-contrib/extract-text-webpack-plugin
+
+**webpack.config.js**
+```js
+const ExtractTextPlugin = require('extract-text-webpack-plugin')
+
+module.exports = {
+ module: {
+ rules: [
+ {
+ test: /\.css$/,
+ use: ExtractTextPlugin.extract({
+ fallback: 'style-loader',
+ use: [
+ { loader: 'css-loader', options: { importLoaders: 1 } },
+ 'postcss-loader'
+ ]
+ })
+ }
+ ]
+ },
+ plugins: [
+ new ExtractTextPlugin('[name].css')
+ ]
+}
+```
+
+<h2 align="center">Maintainers</h2>
+
+<table>
+ <tbody>
+ <tr>
+ <td align="center">
+ <a href="https://github.com/michael-ciniawsky">
+ <img width="150" height="150" src="https://github.com/michael-ciniawsky.png?v=3&s=150">
+ </br>
+ Michael Ciniawsky
+ </a>
+ </td>
+ <td align="center">
+ <a href="https://github.com/evilebottnawi">
+ <img width="150" height="150" src="https://github.com/evilebottnawi.png?v=3&s=150">
+ </br>
+ Alexander Krasnoyarov
+ </a>
+ </td>
+ </tr>
+ <tbody>
+</table>
+
+
+[npm]: https://img.shields.io/npm/v/postcss-loader.svg
+[npm-url]: https://npmjs.com/package/postcss-loader
+
+[node]: https://img.shields.io/node/v/postcss-loader.svg
+[node-url]: https://nodejs.org
+
+[deps]: https://david-dm.org/postcss/postcss-loader.svg
+[deps-url]: https://david-dm.org/postcss/postcss-loader
+
+[tests]: http://img.shields.io/travis/postcss/postcss-loader.svg
+[tests-url]: https://travis-ci.org/postcss/postcss-loader
+
+[cover]: https://coveralls.io/repos/github/postcss/postcss-loader/badge.svg
+[cover-url]: https://coveralls.io/github/postcss/postcss-loader
+
+[chat]: https://badges.gitter.im/postcss/postcss.svg
+[chat-url]: https://gitter.im/postcss/postcss