Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
postcss-loader
Advanced tools
postcss-loader - npm Package Compare versions
Comparing version 1.3.3 to 2.0.0
@@ -0,1 +1,16 @@ | ||
| # Change Log | ||
| All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines. | ||
| <a name="2.0.0"></a> | ||
| # [2.0.0](https://github.com/postcss/postcss-loader/compare/1.2.2...v2.0.0) (2017-05-08) | ||
| ### Features | ||
| * **index:** add ctx, ctx.file, ctx.options ([0dceb2c](https://github.com/postcss/postcss-loader/commit/0dceb2c)) | ||
| * **index:** add options validation ([2b76df8](https://github.com/postcss/postcss-loader/commit/2b76df8)) | ||
| ## 1.3.3 | ||
@@ -2,0 +17,0 @@ * Remove `postcss-loader-before-processing` warning (by Michael Ciniawsky). |
| { | ||
| "name": "postcss-loader", | ||
| "version": "1.3.3", | ||
| "version": "2.0.0", | ||
| "description": "PostCSS loader for webpack", | ||
| "main": "lib/index.js", | ||
| "engines": { | ||
| "node": ">=0.12" | ||
| "node": ">=4" | ||
| }, | ||
| "keywords": [ | ||
| "webpack", | ||
| "loader", | ||
| "css", | ||
| "postcss", | ||
| "postcss-runner" | ||
| "files": [ | ||
| "lib", | ||
| "index.js" | ||
| ], | ||
| "author": "Andrey Sitnik <andrey@sitnik.ru>", | ||
| "license": "MIT", | ||
| "repository": "postcss/postcss-loader", | ||
| "dependencies": { | ||
| "loader-utils": "^1.0.2", | ||
| "object-assign": "^4.1.1", | ||
| "postcss": "^5.2.15", | ||
| "postcss-load-config": "^1.2.0" | ||
| "loader-utils": "^1.x", | ||
| "postcss": "^6.x", | ||
| "postcss-load-config": "^1.x", | ||
| "schema-utils": "^0.x" | ||
| }, | ||
| "devDependencies": { | ||
| "eslint": "^3.16.1", | ||
| "eslint-config-postcss": "^2.0.2", | ||
| "fs-extra": "^2.0.0", | ||
| "gulp": "^3.9.1", | ||
| "gulp-eslint": "^3.0.1", | ||
| "gulp-jest": "^1.0.0", | ||
| "jest-cli": "^19.0.2", | ||
| "json-loader": "^0.5.4", | ||
| "lint-staged": "^3.3.1", | ||
| "postcss-js": "^0.3.0", | ||
| "postcss-safe-parser": "^2.0.0", | ||
| "pre-commit": "^1.2.2", | ||
| "raw-loader": "^0.5.1", | ||
| "sugarss": "^0.2.0", | ||
| "webpack-stream": "^3.2.0" | ||
| "coveralls": "^2.x", | ||
| "fs-extra": "^3.x", | ||
| "jest": "^20.x", | ||
| "jsdoc-to-markdown": "^3.x", | ||
| "postcss-js": "^0.x", | ||
| "standard": "^10.x", | ||
| "standard-version": "^4.0.0", | ||
| "sugarss": "^1.x", | ||
| "webpack": "^2.x" | ||
| }, | ||
| "scripts": { | ||
| "lint-staged": "lint-staged", | ||
| "test": "gulp" | ||
| "clean": "rm -rf dmd jsdoc-api jest_0 coverage test/builds", | ||
| "lint": "standard", | ||
| "docs": "jsdoc2md lib/index.js > LOADER.md", | ||
| "pretest": "npm run lint && npm run test:build", | ||
| "test": "jest", | ||
| "test:build": "node test/webpack.build.js", | ||
| "posttest": "npm run clean", | ||
| "release": "standard-version" | ||
| }, | ||
| "eslintConfig": { | ||
| "extends": "eslint-config-postcss/es5", | ||
| "standard": { | ||
| "env": { | ||
| "jest": true | ||
| } | ||
| }, | ||
| "ignore": [ | ||
| "*.test.js" | ||
| ] | ||
| }, | ||
| "lint-staged": { | ||
| "*.js": "eslint" | ||
| }, | ||
| "pre-commit": [ | ||
| "lint-staged" | ||
| ] | ||
| "keywords": [ | ||
| "css", | ||
| "postcss", | ||
| "postcss-runner", | ||
| "webpack", | ||
| "webpack-loader" | ||
| ], | ||
| "author": "Andrey Sitnik <andrey@sitnik.ru>", | ||
| "repository": "postcss/postcss-loader", | ||
| "license": "MIT" | ||
| } |
525
README.md
@@ -1,52 +0,79 @@ | ||
| # PostCSS for Webpack [![Build Status][ci-img]][ci] | ||
| [![npm][npm]][npm-url] | ||
| [![node][node]][node-url] | ||
| [![deps][deps]][deps-url] | ||
| [![tests][tests]][tests-url] | ||
| [![chat][chat]][chat-url] | ||
| <img align="right" width="95" height="95" | ||
| title="Philosopher’s stone, logo of PostCSS" | ||
| src="http://postcss.github.io/postcss/logo.svg"> | ||
| <!-- [![coverage][cover]][cover-url] --> | ||
| [PostCSS] loader for [webpack] to postprocesses your CSS with [PostCSS plugins]. | ||
| <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> | ||
| </div> | ||
| <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"> | ||
| </a> | ||
| <!-- <p>Loader for <a href="http://webpack.js.org/">webpack</a> to process CSS with <a href="http://postcss.org/">PostCSS</a></p> --> | ||
| [PostCSS plugins]: https://github.com/postcss/postcss#plugins | ||
| [PostCSS]: https://github.com/postcss/postcss | ||
| [webpack]: http://webpack.github.io/ | ||
| [ci-img]: https://travis-ci.org/postcss/postcss-loader.svg | ||
| [ci]: https://travis-ci.org/postcss/postcss-loader | ||
| <h2 align="center">Install</h2> | ||
| ## Install | ||
| ```sh | ||
| npm install postcss-loader --save-dev | ||
| ```bash | ||
| npm i -D postcss-loader | ||
| ``` | ||
| ## Usage | ||
| <h2 align="center">Usage</h2> | ||
| Create `postcss.config.js`: | ||
| ### `Config` | ||
| **postcss.config.js** | ||
| ```js | ||
| module.exports = { | ||
| plugins: [ | ||
| require('postcss-smart-import')({ /* ...options */ }), | ||
| require('precss')({ /* ...options */ }), | ||
| require('autoprefixer')({ /* ...options */ }) | ||
| ] | ||
| parser: 'sugarss', | ||
| plugins: { | ||
| 'postcss-import': {}, | ||
| 'cssnext': {}, | ||
| 'autoprefixer': {}, | ||
| 'cssnano': {} | ||
| } | ||
| } | ||
| ``` | ||
| You could put different configs in different directories. For example, | ||
| global config in `project/postcss.config.js` and override its plugins | ||
| in `project/src/legacy/postcss.config.js`. | ||
| You can read more about common PostCSS Config [here](https://github.com/michael-ciniawsky/postcss-load-config). | ||
| You can read more about common PostCSS config in | ||
| [postcss-load-config](https://github.com/michael-ciniawsky/postcss-load-config). | ||
| ### `Config Cascade` | ||
| Add PostCSS Loader to `webpack.config.js`. Put it after `css-loader` | ||
| and `style-loader`. But before `sass-loader`, if you use it. | ||
| 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. | ||
| ### Webpack 2 | ||
| ``` | ||
| |– 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 | ||
@@ -58,7 +85,3 @@ module.exports = { | ||
| test: /\.css$/, | ||
| use: [ | ||
| 'style-loader', | ||
| 'css-loader?importLoaders=1', | ||
| 'postcss-loader' | ||
| ] | ||
| use: [ 'style-loader', 'postcss-loader' ] | ||
| } | ||
@@ -70,13 +93,14 @@ ] | ||
| ### Webpack 1 | ||
| > ⚠️ 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: { | ||
| loaders: [ | ||
| rules: [ | ||
| { | ||
| test: /\.css$/, | ||
| loaders: [ | ||
| use: [ | ||
| 'style-loader', | ||
| 'css-loader?importLoaders=1', | ||
| { loader: 'css-loader' options: { importLoaders: 1 } }, | ||
| 'postcss-loader' | ||
@@ -90,33 +114,84 @@ ] | ||
| ## Options | ||
| <h2 align="center">Options</h2> | ||
| ### Plugins | ||
| |Name|Default|Description| | ||
| |:--:|:-----:|:----------| | ||
| |`exec`|`undefined`|Enable PostCSS Parser support in `CSS-in-JS`| | ||
| |`parser`|`undefined`|Set PostCSS Parser| | ||
| |`syntax`|`undefined`|Set PostCSS Syntax| | ||
| |`stringifier`|`undefined`|Set PostCSS Stringifier| | ||
| |`config`|`undefined`|Set `postcss.config.js` config path && `ctx`| | ||
| |`plugins`|`[]`|Set PostCSS Plugins| | ||
| |`sourceMap`|`false`|Enable Source Maps| | ||
| We recommend to use `postcss.config.js`, but also you can specify plugins | ||
| directly in webpack config. | ||
| ### `Exec` | ||
| #### Webpack 2 | ||
| If you use JS styles without the [`postcss-js`][postcss-js] parser, add the `exec` option. | ||
| ```js | ||
| module.exports = { | ||
| module: { | ||
| rules: [ | ||
| { | ||
| test: /\.css/, | ||
| use: [ | ||
| … | ||
| { | ||
| loader: 'postcss-loader', | ||
| options: { | ||
| plugins: function () { | ||
| return [ | ||
| require('precss'), | ||
| require('autoprefixer') | ||
| ]; | ||
| } | ||
| } | ||
| } | ||
| ] | ||
| { | ||
| test: /\.style.js$/, | ||
| use: [ | ||
| 'style-loader', | ||
| { loader: 'css-loader', options: { importLoaders: 1 } }, | ||
| { loader: 'postcss-loader', options: { parser: 'sugarss', exec: true } } | ||
| ] | ||
| } | ||
| ``` | ||
| ### `Config` | ||
| #### `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 }, | ||
| '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} | ||
| } | ||
| ] | ||
| } | ||
| } | ||
@@ -126,22 +201,15 @@ } | ||
| #### Webpack 1 | ||
| ### `Plugins` | ||
| **webpack.config.js** | ||
| ```js | ||
| module.exports = { | ||
| module: { | ||
| loaders: [ | ||
| { | ||
| test: /\.css$/, | ||
| loaders: [ | ||
| … | ||
| 'postcss-loader' | ||
| ] | ||
| } | ||
| { | ||
| loader: 'postcss-loader', | ||
| options: { | ||
| plugins: (loader) => [ | ||
| require('postcss-import')({ root: loader.resourcePath }), | ||
| require('cssnext')(), | ||
| require('autoprefixer')(), | ||
| require('cssnano')() | ||
| ] | ||
| }, | ||
| postcss: () => { | ||
| return [ | ||
| require('precss'), | ||
| require('autoprefixer') | ||
| ]; | ||
| } | ||
@@ -151,24 +219,79 @@ } | ||
| ### Syntaxes | ||
| ### `Syntaxes` | ||
| PostCSS can transforms styles in any syntax, not only in CSS. | ||
| There are 3 parameters to control syntax: | ||
| |Name|Type|Default|Description| | ||
| |:--:|:--:|:-----:|:----------| | ||
| |`syntax`|`{String\|Function}`|`undefined`|Custom PostCSS Syntax| | ||
| |`parser`|`{String\|Function}`|`undefined`|Custom PostCSS Parser| | ||
| |`stringifier`|`{String\|Function}`|`undefined`|Custom PostCSS Stringifier| | ||
| * `syntax` accepts module name with `parse` and `stringify` function. | ||
| * `parser` accepts module name with input parser function. | ||
| * `stringifier` accepts module name with output stringifier function. | ||
| #### `Parser` | ||
| **webpack.config.js** | ||
| ```js | ||
| module.exports = { | ||
| module: { | ||
| loaders: [ | ||
| { | ||
| test: /\.sss/, | ||
| loaders: [ | ||
| 'style-loader', | ||
| 'css-loader?importLoaders=1', | ||
| 'postcss-loader?parser=sugarss' | ||
| ] | ||
| } | ||
| ] | ||
| { | ||
| 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. | ||
| > :warning: If a previous loader like e.g `sass-loader` is applied and it's `sourceMap` option is set, but the `sourceMap` option in `postcss-loader` is omitted, previous source maps will be discarded by `postcss-loader` **enterily**. | ||
| **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' | ||
| } | ||
@@ -178,83 +301,86 @@ } | ||
| ### SourceMaps | ||
| ```css | ||
| .class { color: red; } | ||
| Loader will use source map settings from previous loader. | ||
| /*# sourceMappingURL=data:application/json;base64, ... */ | ||
| ``` | ||
| You can set this `sourceMap` parameter to `inline` value to put source maps | ||
| into CSS annotation comment: | ||
| <h2 align="center">Examples</h2> | ||
| ### `Stylelint` | ||
| **webpack.config.js** | ||
| ```js | ||
| module.exports = { | ||
| module: { | ||
| loaders: [ | ||
| { | ||
| test: '\/.css', | ||
| loaders: [ | ||
| 'style-loader', | ||
| 'css-loader?importLoaders=1', | ||
| 'postcss-loader?sourceMap=inline' | ||
| { | ||
| test: /\.css$/, | ||
| use: [ | ||
| 'style-loader', | ||
| 'css-loader', | ||
| { | ||
| loader: 'postcss-loader', | ||
| options: { | ||
| plugins: [ | ||
| require('postcss-import')(), | ||
| require('stylelint')(), | ||
| ..., | ||
| ] | ||
| } | ||
| ] | ||
| } | ||
| } | ||
| ] | ||
| } | ||
| ``` | ||
| ## Examples | ||
| ### `CSS Modules` | ||
| ### 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 | ||
| either add the css-loader’s [`importLoaders`] option. | ||
| **webpack.config.js** | ||
| ```js | ||
| … | ||
| { | ||
| test: /\.css$/, | ||
| loaders: [ | ||
| 'style-loader', | ||
| 'css-loader?modules&importLoaders=1', | ||
| 'postcss-loader' | ||
| ] | ||
| } | ||
| … | ||
| { | ||
| test: /\.css$/, | ||
| use: [ | ||
| 'style-loader', | ||
| { loader: 'css-loader' options: { modules: true, importLoaders: 1 } }, | ||
| 'postcss-loader' | ||
| ] | ||
| } | ||
| ``` | ||
| or use [postcss-modules] plugin instead of `css-loader`. | ||
| or use [postcss-modules] instead of `css-loader`. | ||
| [`importLoaders`]: https://github.com/webpack/css-loader#importing-and-chained-loaders | ||
| [postcss-modules]: https://github.com/outpunk/postcss-modules | ||
| [`importLoaders`]: https://github.com/webpack-contrib/css-loader#importing-and-chained-loaders | ||
| [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 | ||
| ### JS Styles | ||
| ### `CSS-in-JS` | ||
| If you want to process styles written in JavaScript | ||
| you can use the [postcss-js] parser. | ||
| 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$/, | ||
| loaders: [ | ||
| 'style-loader', | ||
| 'css-loader?modules&importLoaders=1', | ||
| 'postcss-loader?parser=postcss-js', | ||
| 'babel' | ||
| ] | ||
| } | ||
| … | ||
| { | ||
| 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 as: | ||
| As result you will be able to write styles in the following way | ||
| ```js | ||
| import colors from './config/colors' | ||
| import colors from './styles/colors' | ||
| export default { | ||
| '.menu': { | ||
| color: colors.main, | ||
| height: 25, | ||
| '&_link': { | ||
| '.menu': { | ||
| color: colors.main, | ||
| height: 25, | ||
| '&_link': { | ||
| color: 'white' | ||
@@ -266,3 +392,3 @@ } | ||
| > If you are using Babel >= v6 you need to do the following in order for the setup to work | ||
| > :warning: If you are using Babel you need to do the following in order for the setup to work | ||
@@ -272,46 +398,73 @@ > 1. Add [babel-plugin-add-module-exports] to your configuration | ||
| If you use JS styles without `postcss-js` parser, you can add `exec` parameter: | ||
| [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: /\.style.xyz$/, | ||
| loaders: [ | ||
| 'style-loader', | ||
| 'css-loader?modules&importLoaders=1', | ||
| 'postcss-loader?parser=custom-parser&exec' | ||
| ] | ||
| test: /\.css$/, | ||
| use: ExtractTextPlugin.extract({ | ||
| fallback: 'style-loader', | ||
| use: [ | ||
| { loader: 'css-loader' options: { importLoaders: 1 } }, | ||
| 'postcss-loader' | ||
| ] | ||
| }) | ||
| } | ||
| … | ||
| ] | ||
| }, | ||
| plugins: [ | ||
| new ExtractTextPlugin('[name].css') | ||
| ] | ||
| } | ||
| ``` | ||
| [postcss-js]: https://github.com/postcss/postcss-js | ||
| [babel-plugin-add-module-exports]: https://github.com/59naga/babel-plugin-add-module-exports | ||
| <h2 align="center">Maintainers</h2> | ||
| ### Dynamic Config | ||
| <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> | ||
| PostCSS loader sends a loaded instance to PostCSS common config. | ||
| You can use it to do some real magic: | ||
| ```js | ||
| module.exports = function (ctx) { | ||
| if (check(ctx.webpack.resourcePath)) { | ||
| return { plugins: plugins1 }; | ||
| } else { | ||
| return { plugins: plugins2 }; | ||
| } | ||
| } | ||
| ``` | ||
| [npm]: https://img.shields.io/npm/v/postcss-loader.svg | ||
| [npm-url]: https://npmjs.com/package/postcss-loader | ||
| ### Webpack Events | ||
| [node]: https://img.shields.io/node/v/postcss-loader.svg | ||
| [node-url]: https://nodejs.org | ||
| Webpack provides webpack plugin developers a convenient way | ||
| to hook into the build pipeline. The postcss-loader makes use | ||
| of this event system to allow building integrated postcss-webpack tools. | ||
| [deps]: https://david-dm.org/postcss/postcss-loader.svg | ||
| [deps-url]: https://david-dm.org/postcss/postcss-loader | ||
| See the [example] implementation. | ||
| [tests]: http://img.shields.io/travis/postcss/postcss-loader.svg | ||
| [tests-url]: https://travis-ci.org/postcss/postcss-loader | ||
| Event `postcss-loader-before-processing` is fired before processing and allows | ||
| to add or remove postcss plugins. | ||
| [cover]: https://coveralls.io/repos/github/postcss/postcss-loader/badge.svg | ||
| [cover-url]: https://coveralls.io/github/postcss/postcss-loader | ||
| [example]: https://github.com/postcss/postcss-loader/blob/master/test/webpack-plugins/rewrite.js | ||
| [chat]: https://badges.gitter.im/postcss/postcss.svg | ||
| [chat-url]: https://gitter.im/postcss/postcss |
Sorry, the diff of this file is not supported yet
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Major refactor
Supply chain riskPackage has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.
Found 1 instance in 1 package
New author
Supply chain riskA new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.
Found 1 instance in 1 package
Dynamic require
Supply chain riskDynamic require can indicate the package is performing dangerous or unsafe dynamic code execution.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Dynamic require
Supply chain riskDynamic require can indicate the package is performing dangerous or unsafe dynamic code execution.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by33.56%
22125
- Dev dependency count
- decreased by-40%
9
- Number of package files
- increased by33.33%
8
- Lines of code
- increased by43.84%
210
- Number of lines in readme file
- increased by49.03%
462
Worsened metrics
- Number of medium supply chain risk alerts
- increased byInfinity%
2
Dependency changes
+ Addedschema-utils@^0.x
+ Addedajv@6.12.6(transitive)
+ Addedajv-keywords@3.5.2(transitive)
+ Addedansi-styles@3.2.1(transitive)
+ Addedchalk@2.4.2(transitive)
+ Addedcolor-convert@1.9.3(transitive)
+ Addedcolor-name@1.1.3(transitive)
+ Addedfast-deep-equal@3.1.3(transitive)
+ Addedfast-json-stable-stringify@2.1.0(transitive)
+ Addedhas-flag@3.0.0(transitive)
+ Addedjson-schema-traverse@0.4.1(transitive)
+ Addedpostcss@6.0.23(transitive)
+ Addedpunycode@2.3.1(transitive)
+ Addedschema-utils@0.4.7(transitive)
+ Addedsource-map@0.6.1(transitive)
+ Addedsupports-color@5.5.0(transitive)
+ Addeduri-js@4.4.1(transitive)
- Removedobject-assign@^4.1.1
- Removedansi-regex@2.1.1(transitive)
- Removedansi-styles@2.2.1(transitive)
- Removedchalk@1.1.3(transitive)
- Removedhas-ansi@2.0.0(transitive)
- Removedhas-flag@1.0.0(transitive)
- Removedjs-base64@2.6.4(transitive)
- Removedpostcss@5.2.18(transitive)
- Removedsource-map@0.5.7(transitive)
- Removedstrip-ansi@3.0.1(transitive)
- Removedsupports-color@2.0.03.2.3(transitive)
Updatedloader-utils@^1.x
Updatedpostcss@^6.x
Updatedpostcss-load-config@^1.x