From 89e95b3f143682ed9a006991bacf45c9dcba4818 Mon Sep 17 00:00:00 2001 From: ruki Date: Thu, 8 Nov 2018 00:43:05 +0800 Subject: remove node_modules --- node_modules/postcss-loader/README.md | 466 ---------------------------------- 1 file changed, 466 deletions(-) delete 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 deleted file mode 100644 index a3465703..00000000 --- a/node_modules/postcss-loader/README.md +++ /dev/null @@ -1,466 +0,0 @@ -[![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