From 26105034da4fcce7ac883c899d781f016559310d Mon Sep 17 00:00:00 2001 From: ruki Date: Thu, 8 Nov 2018 00:38:48 +0800 Subject: switch to vuepress --- node_modules/postcss-loader/README.md | 466 ++++++++++++++++++++++++++++++++++ 1 file changed, 466 insertions(+) create mode 100644 node_modules/postcss-loader/README.md (limited to 'node_modules/postcss-loader/README.md') 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] + +
+ PostCSS Logo + + + +
+ + Sponsored by Evil Martians + +
+

PostCSS Loader

+

Loader for webpack to process CSS with PostCSS

+
+ +

Install

+ +```bash +npm i -D postcss-loader +``` + +

Usage

+ +### `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' + ] + } + ] + } +} +``` + +

Options

+ +|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, ... */ +``` + +

Examples

+ +### `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') + ] +} +``` + +

Maintainers

+ + + + + + + + +
+ + +
+ Michael Ciniawsky +
+
+ + +
+ Alexander Krasnoyarov +
+
+ + +[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 -- cgit v1.2.3