Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

postcss-loader

Package Overview
Dependencies
Maintainers
3
Versions
86
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

postcss-loader - npm Package Compare versions

Comparing version 3.0.0 to 4.0.0

dist/cjs.js
dist/Error.js
dist/index.js
dist/options.json
dist/utils.js
dist/Warning.js

39

CHANGELOG.md

@@ -1,5 +0,42 @@

# Change Log
# Changelog
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.
## [4.0.0](https://github.com/webpack-contrib/postcss-loader/compare/v3.0.0...v4.0.0) (2020-09-07)
### ⚠ BREAKING CHANGES
* minimum supported `Node.js` version is `10.13`
* minimum supported `webpack` version is `4`
* `postcss` was moved to `peerDependencies`, you need to install `postcss`
* `PostCSS` (`plugins`/`syntax`/`parser`/`stringifier`) options was moved to the `postcssOptions` option, please look at [docs](https://github.com/webpack-contrib/postcss-loader#postcssoptions)
* `sourceMap` default value depends on the `compiler.devtool` option
* the `inline` value was removed for the `sourceMap` option, please use `{ map: { inline: true, annotation: false } }` to achieve this
* source maps contain absolute paths in `sources`
* loader output only CSS, so you need to use `css-loader`/`file-loader`/`raw-loader` to inject code inside bundle
* `exec` option was renamed to the `execute` option
* the `config` option doesn't support `Object` type anymore, `config.path` and `config.ctx` options were removed
* argument in the config for `Function` notation (previously `config.ctx`) was changed, now it contains `{ file, mode, webpackLoaderContext }`
* loader context in the config was renamed from `webpack` to `webpackLoaderContext`
### Features
* message API for emit assets ([#443](https://github.com/webpack-contrib/postcss-loader/issues/443)) ([e966ab9](https://github.com/webpack-contrib/postcss-loader/commit/e966ab965132ca812cb50e5eaf7df5fc2ad9c137))
* reuse AST from other loaders ([#468](https://github.com/webpack-contrib/postcss-loader/issues/468)) ([9b75888](https://github.com/webpack-contrib/postcss-loader/commit/9b75888dff4957f2ef1e94eca871e329354a9f6d))
* allows to use config and loader options together, options from the loader takes precedence over the config, the `plugins` option from the config and options are merged ([0eb5aaf](https://github.com/webpack-contrib/postcss-loader/commit/0eb5aaf3d49f6d5e570a3c3fdb6b201487e503c7))
* `postcssOptions` options can be `Function`
### Bug Fixes
* compatibility with webpack@5 ([#437](https://github.com/webpack-contrib/postcss-loader/issues/437)) ([ed50491](https://github.com/webpack-contrib/postcss-loader/commit/ed504910b70b4d8b4d77084c19ad92330676433e))
* `default` export for plugins ([#465](https://github.com/webpack-contrib/postcss-loader/issues/465)) ([3d32c35](https://github.com/webpack-contrib/postcss-loader/commit/3d32c35c5c911d6bd25dc0c4b5b3cd11408632d7))
* avoid mutations of loader options and config ([#470](https://github.com/webpack-contrib/postcss-loader/issues/470)) ([cad6f07](https://github.com/webpack-contrib/postcss-loader/commit/cad6f07c7f4923e8ef69ecb402b10bbd08d09530))
* respect the `map` option from loader options and config ([#458](https://github.com/webpack-contrib/postcss-loader/issues/458)) ([98441ff](https://github.com/webpack-contrib/postcss-loader/commit/98441ff87e51b58e9322d1bebb5eefc5ba417e24))
### Notes
* you don't need `ident` option for loader
* `Object` syntax for the `plugin` option is soft deprecated, please migrate on `Array` syntax (`plugins: ['postcss-present-env', ['cssnano', options]]`)
<a name="3.0.0"></a>

@@ -6,0 +43,0 @@ # [3.0.0](https://github.com/postcss/postcss-loader/compare/v2.1.6...v3.0.0) (2018-08-08)

108

package.json
{
"name": "postcss-loader",
"version": "3.0.0",
"version": "4.0.0",
"description": "PostCSS loader for webpack",
"main": "src/index.js",
"license": "MIT",
"repository": "webpack-contrib/postcss-loader",
"author": "Andrey Sitnik <andrey@sitnik.ru>",
"homepage": "https://github.com/webpack-contrib/postcss-loader",
"bugs": "https://github.com/webpack-contrib/postcss-loader/issues",
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/webpack"
},
"main": "dist/cjs.js",
"engines": {
"node": ">= 10.13.0"
},
"scripts": {
"start": "npm run build -- -w",
"clean": "del-cli dist",
"prebuild": "npm run clean",
"build": "cross-env NODE_ENV=production babel src -d dist --copy-files",
"commitlint": "commitlint --from=master",
"security": "npm audit",
"lint:prettier": "prettier \"{**/*,*}.{js,json,md,yml,css,ts}\" --list-different",
"lint:js": "eslint --cache .",
"lint": "npm-run-all -l -p \"lint:**\"",
"test:only": "cross-env NODE_ENV=test jest",
"test:watch": "npm run test:only -- --watch",
"test:coverage": "npm run test:only -- --collectCoverageFrom=\"src/**/*.js\" --coverage",
"pretest": "npm run lint",
"test": "npm run test:coverage",
"prepare": "npm run build",
"release": "standard-version",
"defaults": "webpack-defaults"
},
"files": [
"src"
"dist"
],
"engines": {
"node": ">= 6"
"peerDependencies": {
"webpack": "^4.0.0 || ^5.0.0",
"postcss": "^7.0.0"
},
"dependencies": {
"loader-utils": "^1.1.0",
"postcss": "^7.0.0",
"postcss-load-config": "^2.0.0",
"schema-utils": "^1.0.0"
"cosmiconfig": "^7.0.0",
"klona": "^2.0.3",
"loader-utils": "^2.0.0",
"schema-utils": "^2.7.1",
"semver": "^7.3.2"
},
"devDependencies": {
"@webpack-utilities/test": "^1.0.0-alpha.0",
"jest": "^23.0.0",
"jsdoc-to-markdown": "^4.0.0",
"postcss-import": "^11.0.0",
"@babel/cli": "^7.11.6",
"@babel/core": "^7.11.6",
"@babel/preset-env": "^7.11.5",
"@commitlint/cli": "^11.0.0",
"@commitlint/config-conventional": "^11.0.0",
"@webpack-contrib/defaults": "^6.3.0",
"@webpack-contrib/eslint-config-webpack": "^3.0.0",
"babel-jest": "^26.2.2",
"cross-env": "^7.0.2",
"cssnano": "^4.1.10",
"del": "^5.1.0",
"del-cli": "^3.0.1",
"eslint": "^7.8.1",
"eslint-config-prettier": "^6.11.0",
"eslint-plugin-import": "^2.22.0",
"husky": "^4.3.0",
"jest": "^26.4.2",
"less": "^3.12.2",
"less-loader": "^7.0.1",
"lint-staged": "^10.3.0",
"memfs": "^3.2.0",
"midas": "^2.0.3",
"npm-run-all": "^4.1.5",
"postcss": "^7.0.32",
"postcss-import": "^12.0.1",
"postcss-js": "^2.0.0",
"standard": "^11.0.0",
"standard-version": "^4.0.0",
"sugarss": "^1.0.0",
"webpack": "^4.0.0"
"postcss-nested": "^4.2.3",
"postcss-rtl": "^1.7.3",
"postcss-short": "^5.0.0",
"prettier": "^2.1.1",
"sass": "^1.26.10",
"sass-loader": "^10.0.2",
"standard-version": "^9.0.0",
"strip-ansi": "^6.0.0",
"sugarss": "^2.0.0",
"webpack": "^4.44.1"
},
"scripts": {
"lint": "standard --env jest",
"test": "jest --env node --verbose --coverage",
"docs": "jsdoc2md src/*.js > docs/LOADER.md",
"clean": "rm -rf coverage test/outputs",
"release": "standard-version"
},
"keywords": [

@@ -42,8 +95,3 @@ "css",

"webpack-loader"
],
"author": "Andrey Sitnik <andrey@sitnik.ru>",
"repository": "https://github.com/postcss/postcss-loader.git",
"bugs": "https://github.com/postcss/postcss-loader/issues",
"homepage": "https://github.com/postcss/postcss-loader#readme",
"license": "MIT"
]
}

1196

README.md

@@ -1,14 +0,13 @@

[![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"
<img
width="180"
height="180"
hspace="10"
alt="PostCSS Logo"
src="https://api.postcss.org/logo.svg">
<a href="https://github.com/webpack/webpack">
<img width="200" height="200" hspace="10"
<img
width="200"
height="200"
hspace="10"
src="https://cdn.rawgit.com/webpack/media/e7485eb2/logo/icon.svg">

@@ -18,36 +17,426 @@ </a>

<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">
<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="https://webpack.js.org/">webpack</a> to process CSS with <a href="https://postcss.org/">PostCSS</a></p>
</div>
<h2 align="center">Install</h2>
[![npm][npm]][npm-url]
[![node][node]][node-url]
[![deps][deps]][deps-url]
[![tests][tests]][tests-url]
[![coverage][cover]][cover-url]
[![size][size]][size-url]
```bash
npm i -D postcss-loader
Webpack chat: [![chat][chat]][chat-url]
PostCSS chat: [![chat-postcss][chat-postcss]][chat-postcss-url]
# postcss-loader
Loader to process CSS with [`PostCSS`](https://github.com/postcss/postcss).
## Getting Started
To begin, you'll need to install `postcss-loader` and `postcss`:
```console
npm install --save-dev postcss-loader postcss
```
<h2 align="center">Usage</h2>
Then add the plugin to your `webpack` config. For example:
### `Configuration`
**file.js**
**`postcss.config.js`**
```js
import css from 'file.css';
```
**webpack.config.js**
```js
module.exports = {
parser: 'sugarss',
plugins: {
'postcss-import': {},
'postcss-preset-env': {},
'cssnano': {}
module: {
rules: [
{
test: /\.css$/i,
use: [
'style-loader',
'css-loader',
{
loader: 'postcss-loader',
options: {
postcssOptions: {
plugins: [
'postcss-present-env',
{
// Options
},
],
},
},
},
],
},
],
},
};
```
Alternative use with [config files](#config):
**postcss.config.js**
```js
module.exports = {
plugins: [
[
'postcss-preset-env',
{
// Options
},
],
],
};
```
The loader **automatically** searches for configuration files.
**webpack.config.js**
```js
module.exports = {
module: {
rules: [
{
test: /\.css$/i,
use: ['style-loader', 'css-loader', 'postcss-loader'],
},
],
},
};
```
And run `webpack` via your preferred method.
## Options
| Name | Type | Default | Description |
| :---------------------------------: | :------------------: | :-----------------------------------: | :------------------------------------------- |
| [`execute`](#execute) | `{Boolean}` | `undefined` | Enable PostCSS Parser support in `CSS-in-JS` |
| [`postcssOptions`](#postcssOptions) | `{Object\/Function}` | `defaults values for Postcss.process` | Set `PostCSS` options and plugins |
| [`sourceMap`](#sourcemap) | `{Boolean}` | `compiler.devtool` | Enables/Disables generation of source maps |
### `execute`
Type: `Boolean`
Default: `undefined`
If you use JS styles the [`postcss-js`](https://github.com/postcss/postcss-js) parser, add the `execute` option.
**webpack.config.js**
```js
module.exports = {
module: {
rules: [
{
test: /\.style.js$/,
use: [
'style-loader',
{
loader: 'css-loader',
},
{
loader: 'postcss-loader',
options: {
postcssOptions: {
parser: 'postcss-js',
},
execute: true,
},
},
],
},
],
},
};
```
### `postcssOptions`
Type: `Object|Function`
Default: `undefined`
Allows to set [`PostCSS options`](http://api.postcss.org/global.html#processOptions) and plugins.
All `PostCSS` options are supported.
There is the special `config` option for config files. How it works and how it can be configured is described below.
We recommend do not specify `from`, `to` and `map` options, because this can lead to wrong path in source maps.
If you need source maps please use the [`sourcemap`](#sourcemap) option.
#### `Object`
Setup `plugins`:
**webpack.config.js** (**recommended**)
```js
const myOtherPostcssPlugin = require('postcss-my-plugin');
module.exports = {
module: {
rules: [
{
test: /\.sss$/i,
loader: 'postcss-loader',
options: {
postcssOptions: {
plugins: [
'postcss-import',
['postcss-short', { prefix: 'x' }],
require.resolve('my-postcss-plugin'),
myOtherPostcssPlugin({ myOption: true }),
// Deprecated and will be removed in the next major release
{ 'postcss-nested': { preserveEmpty: true } },
],
},
},
},
],
},
};
```
**webpack.config.js** (**deprecated**, will be removed in the next major release)
```js
module.exports = {
module: {
rules: [
{
test: /\.sss$/i,
loader: 'postcss-loader',
options: {
postcssOptions: {
plugins: {
'postcss-import': {},
'postcss-short': { prefix: 'x' },
},
},
},
},
],
},
};
```
Setup `syntax`:
**webpack.config.js**
```js
module.exports = {
module: {
rules: [
{
test: /\.sss$/i,
loader: 'postcss-loader',
options: {
postcssOptions: {
// Can be `String`
syntax: 'sugarss',
// Can be `Object`
syntax: require('sugarss'),
},
},
},
],
},
};
```
Setup `parser`:
**webpack.config.js**
```js
module.exports = {
module: {
rules: [
{
test: /\.sss$/i,
loader: 'postcss-loader',
options: {
postcssOptions: {
// Can be `String`
parser: 'sugarss',
// Can be `Object`
parser: require('sugarss'),
// Can be `Function`
parser: require('sugarss').parse,
},
},
},
],
},
};
```
Setup `stringifier`:
**webpack.config.js**
```js
const Midas = require('midas');
const midas = new Midas();
module.exports = {
module: {
rules: [
{
test: /\.sss$/i,
loader: 'postcss-loader',
options: {
postcssOptions: {
// Can be `String`
stringifier: 'sugarss',
// Can be `Object`
stringifier: require('sugarss'),
// Can be `Function`
stringifier: midas.stringifier,
},
},
},
],
},
};
```
#### `Function`
**webpack.config.js**
```js
module.exports = {
module: {
rules: [
{
test: /\.(css|sss)$/i,
loader: 'postcss-loader',
options: {
postcssOptions: (loaderContext) => {
if (/\.sss$/.test(loaderContext.resourcePath)) {
return {
parser: 'sugarss',
plugins: [
['postcss-short', { prefix: 'x' }],
'postcss-present-env',
],
};
}
return {
plugins: [
['postcss-short', { prefix: 'x' }],
'postcss-present-env',
],
};
},
},
},
],
},
};
```
#### `config`
Type: `Boolean|String`
Default: `undefined`
Allows to set options using config files.
Options specified in the config file are combined with options passed to the loader, the loader options overwrite options from config.
##### Config Files
The loader will search up the directory tree for configuration in the following places:
- a `postcss` property in `package.json`
- a `.postcssrc` file in JSON or YAML format
- a `.postcss.json`, `.postcss.yaml`, `.postcss.yml`, `.postcss.js`, or `.postcss.cjs` file
- a `postcss.config.js` or `postcss.config.cjs` CommonJS module exporting an object (**recommended**)
##### Examples of Config Files
Using `Object` notation:
**postcss.config.js** (**recommend**)
```js
module.exports = {
// You can specify any options from http://api.postcss.org/global.html#processOptions here
// parser: 'sugarss',
plugins: [
// Plugins for PostCSS
['postcss-short', { prefix: 'x' }],
'postcss-present-env',
],
};
```
Using `Function` notation:
**postcss.config.js** (**recommend**)
```js
module.exports = (api) => {
// `api.file` - path to the file
// `api.mode` - `mode` value of webpack, please read https://webpack.js.org/configuration/mode/
// `api.webpackLoaderContext` - loader context for complex use cases
if (/\.sss$/.test(api.file)) {
return {
// You can specify any options from http://api.postcss.org/global.html#processOptions here
parser: 'sugarss',
plugins: [
// Plugins for PostCSS
['postcss-short', { prefix: 'x' }],
'postcss-present-env',
],
};
}
}
return {
// You can specify any options from http://api.postcss.org/global.html#processOptions here
plugins: [
// Plugins for PostCSS
['postcss-short', { prefix: 'x' }],
'postcss-present-env',
],
};
};
```
You can read more about common PostCSS Config [here](https://github.com/michael-ciniawsky/postcss-load-config).
**postcss.config.js** (**deprecated**, will be removed in the next major release)
### `Config Cascade`
```js
module.exports = {
// You can specify any options from http://api.postcss.org/global.html#processOptions here
// parser: 'sugarss',
plugins: {
// Plugins for PostCSS
'postcss-short': { prefix: 'x' },
'postcss-present-env': {},
},
};
```
##### Config Cascade
You can use different `postcss.config.js` files in different directories.

@@ -74,5 +463,9 @@ Config lookup starts from `path.dirname(file)` and walks the file tree upwards until a config file is found.

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.
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).
**`webpack.config.js`**
Use it **before** `css-loader` and `style-loader`, but **after** other preprocessor loaders like e.g `sass|less|stylus-loader`, if you use any (since [webpack loaders evaluate right to left/bottom to top](https://webpack.js.org/concepts/loaders/#configuration)).
**webpack.config.js** (**recommended**)
```js

@@ -84,12 +477,24 @@ module.exports = {

test: /\.css$/,
use: [ 'style-loader', 'postcss-loader' ]
}
]
}
}
use: [
'style-loader',
{
loader: 'css-loader',
options: {
importLoaders: 1,
},
},
'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
#### Boolean
**`webpack.config.js` (recommended)**
Enables/Disables autoloading config.
**webpack.config.js**
```js

@@ -100,341 +505,423 @@ module.exports = {

{
test: /\.css$/,
use: [
'style-loader',
{ loader: 'css-loader', options: { importLoaders: 1 } },
'postcss-loader'
]
}
]
}
}
test: /\.css$/i,
loader: 'postcss-loader',
options: {
config: false,
},
},
],
},
};
```
<h2 align="center">Options</h2>
#### String
|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|
Allows to specify the path to the config file.
### `Exec`
**webpack.config.js**
If you use JS styles without the [`postcss-js`][postcss-js] parser, add the `exec` option.
**`webpack.config.js`**
```js
{
test: /\.style.js$/,
use: [
'style-loader',
{ loader: 'css-loader', options: { importLoaders: 1 } },
{ loader: 'postcss-loader', options: { parser: 'sugarss', exec: true } }
]
}
module.exports = {
module: {
rules: [
{
test: /\.css$/i,
loader: 'postcss-loader',
options: {
config: path.resolve(__dirname, 'custom.config.js'),
},
},
],
},
};
```
### `Config`
### `sourceMap`
|Name|Type|Default|Description|
|:--:|:--:|:-----:|:----------|
|[`path`](#path)|`{String}`|`undefined`|PostCSS Config Directory|
|[`context`](#context)|`{Object}`|`undefined`|PostCSS Config Context|
Type: `Boolean`
Default: depends on the `compiler.devtool` value
#### `Path`
By default generation of source maps depends on the [`devtool`](https://webpack.js.org/configuration/devtool/) option.
All values enable source map generation except `eval` and `false` value.
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.
**webpack.config.js**
> ⚠️ Otherwise it is **unnecessary** to set this option and is **not** recommended
```js
module.exports = {
module: {
rules: [
{
test: /\.css$/i,
use: [
{ loader: 'style-loader' },
{ loader: 'css-loader', options: { sourceMap: true } },
{ loader: 'postcss-loader', options: { sourceMap: true } },
{ loader: 'sass-loader', options: { sourceMap: true } },
],
},
],
},
};
```
> ⚠️ Note that you **can't** use a **filename** other than the [supported config formats] (e.g `.postcssrc.js`, `postcss.config.js`), this option only allows you to manually specify the **directory** where config lookup should **start** from
Alternative setup:
**`webpack.config.js`**
**webpack.config.js**
```js
{
loader: 'postcss-loader',
options: {
config: {
path: 'path/to/.config/' ✅
path: 'path/to/.config/css.config.js' ❌
}
}
}
module.exports = {
devtool: 'source-map',
module: {
rules: [
{
test: /\.css$/i,
use: [
{ loader: 'style-loader' },
{ loader: 'css-loader' },
{ loader: 'postcss-loader' },
{ loader: 'sass-loader' },
],
},
],
},
};
```
[supported config formats]: https://github.com/michael-ciniawsky/postcss-load-config#usage
## Examples
#### `Context (ctx)`
### SugarSS
|Name|Type|Default|Description|
|:--:|:--:|:-----:|:----------|
|`env`|`{String}`|`'development'`|`process.env.NODE_ENV`|
|`file`|`{Object}`|`loader.resourcePath`|`extname`, `dirname`, `basename`|
|`options`|`{Object}`|`{}`|Options|
You'll need to install `sugarss`:
`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-preset-env': options['postcss-preset-env'] ? options['postcss-preset-env'] : false,
'cssnano': env === 'production' ? options.cssnano : false
}
})
```console
npm install --save-dev sugarss
```
**`webpack.config.js`**
```js
{
loader: 'postcss-loader',
options: {
config: {
ctx: {
'postcss-preset-env': {...options},
cssnano: {...options},
}
}
}
}
```
Using [`SugarSS`](https://github.com/postcss/sugarss) syntax.
### `Plugins`
**webpack.config.js**
**`webpack.config.js`**
```js
{
loader: 'postcss-loader',
options: {
ident: 'postcss',
plugins: (loader) => [
require('postcss-import')({ root: loader.resourcePath }),
require('postcss-preset-env')(),
require('cssnano')()
]
}
}
module.exports = {
module: {
rules: [
{
test: /\.sss$/i,
use: [
'style-loader',
{
loader: 'css-loader',
options: { importLoaders: 1 },
},
{
loader: 'postcss-loader',
options: {
postcssOptions: {
parser: 'sugarss',
},
},
},
],
},
],
},
};
```
> ⚠️ 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'`)
### Autoprefixer
### `Syntaxes`
You'll need to install `autoprefixer`:
|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|
```console
npm install --save-dev autoprefixer
```
#### `Parser`
Add vendor prefixes to CSS rules using [`autoprefixer`](https://github.com/postcss/autoprefixer).
**`webpack.config.js`**
**webpack.config.js**
```js
{
test: /\.sss$/,
use: [
...,
{ loader: 'postcss-loader', options: { parser: 'sugarss' } }
]
}
module.exports = {
module: {
rules: [
{
test: /\.css$/i,
use: [
'style-loader',
{
loader: 'css-loader',
options: { importLoaders: 1 },
},
{
loader: 'postcss-loader',
options: {
postcssOptions: {
plugins: [
[
'autoprefixer',
{
// Options
},
],
],
},
},
},
],
},
],
},
};
```
#### `Syntax`
> :warning: [`postcss-preset-env`](https://github.com/csstools/postcss-preset-env) includes [`autoprefixer`](https://github.com/postcss/autoprefixer), so adding it separately is not necessary if you already use the preset. More [information](https://github.com/csstools/postcss-preset-env#autoprefixer)
**`webpack.config.js`**
```js
{
test: /\.css$/,
use: [
...,
{ loader: 'postcss-loader', options: { syntax: 'sugarss' } }
]
}
### PostCSS Preset Env
You'll need to install `postcss-preset-env`:
```console
npm install --save-dev postcss-preset-env
```
#### `Stringifier`
**webpack.config.js**
**`webpack.config.js`**
```js
{
test: /\.css$/,
use: [
...,
{ loader: 'postcss-loader', options: { stringifier: 'midas' } }
]
}
module.exports = {
module: {
rules: [
{
test: /\.css$/i,
use: [
'style-loader',
{
loader: 'css-loader',
options: { importLoaders: 1 },
},
{
loader: 'postcss-loader',
options: {
postcssOptions: {
plugins: [
[
'postcss-preset-env',
{
// Options
},
],
],
},
},
},
],
},
],
},
};
```
### `SourceMap`
### CSS Modules
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.
What is `CSS Modules`? Please [read](https://github.com/webpack-contrib/css-loader#modules).
**`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 } }
]
}
```
No additional options required on the `postcss-loader` side.
To make them work properly, either add the `css-loader`’s `importLoaders` option.
#### `'inline'`
**webpack.config.js**
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'
}
}
module.exports = {
module: {
rules: [
{
test: /\.css$/i,
use: [
'style-loader',
{
loader: 'css-loader',
options: {
modules: true,
importLoaders: 1,
},
},
'postcss-loader',
],
},
],
},
};
```
```css
.class { color: red; }
### CSS-in-JS and [`postcss-js`](https://github.com/postcss/postcss-js)
/*# sourceMappingURL=data:application/json;base64, ... */
You'll need to install `postcss-js`:
```console
npm install --save-dev postcss-js
```
<h2 align="center">Examples</h2>
If you want to process styles written in JavaScript, use the [`postcss-js`](https://github.com/postcss/postcss-js) parser.
### `Stylelint`
**webpack.config.js**
**`webpack.config.js`**
```js
{
test: /\.css$/,
use: [
'style-loader',
'css-loader',
{
loader: 'postcss-loader',
options: {
ident: 'postcss',
plugins: [
require('postcss-import')(),
require('stylelint')(),
...,
]
}
}
]
}
module.exports = {
module: {
rules: [
{
test: /\.style.js$/,
use: [
'style-loader',
{
loader: 'css-loader',
options: {
importLoaders: 2,
},
},
{
loader: 'postcss-loader',
options: {
postcssOptions: {
parser: 'postcss-js',
},
execute: true,
},
},
'babel-loader',
],
},
],
},
};
```
### `Autoprefixing`
As result you will be able to write styles in the following way
**`webpack.config.js`**
```js
{
test: /\.css$/,
use: [
'style-loader',
'css-loader',
{
loader: 'postcss-loader',
options: {
ident: 'postcss',
plugins: [
require('autoprefixer')({...options}),
...,
]
}
}
]
}
import colors from './styles/colors';
export default {
'.menu': {
color: colors.main,
height: 25,
'&_link': {
color: 'white',
},
},
};
```
> :warning: [`postcss-preset-env`](https://github.com/csstools/postcss-preset-env) includes [`autoprefixer`](https://github.com/postcss/autoprefixer), so adding it separately is not necessary if you already use the preset.
> :warning: If you are using Babel you need to do the following in order for the setup to work
### `CSS Modules`
> 1. Add [`babel-plugin-add-module-exports`](https://github.com/59naga/babel-plugin-add-module-exports) to your configuration.
> 2. You need to have only one **default** export per style module.
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.
### Extract CSS
**`webpack.config.js`**
Using [`mini-css-extract-plugin`](https://github.com/webpack-contrib/mini-css-extract-plugin).
**webpack.config.js**
```js
{
test: /\.css$/,
use: [
'style-loader',
{ loader: 'css-loader', options: { modules: true, importLoaders: 1 } },
'postcss-loader'
]
}
const isProductionMode = process.env.NODE_ENV === 'production';
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = {
mode: isProductionMode ? 'production' : 'development',
module: {
rules: [
{
test: /\.css$/,
use: [
isProductionMode ? MiniCssExtractPlugin.loader : 'style-loader',
'css-loader',
'postcss-loader',
],
},
],
},
plugins: [
new MiniCssExtractPlugin({
filename: isProductionMode ? '[name].[contenthash].css' : '[name].css',
}),
],
};
```
or use [postcss-modules] instead of `css-loader`.
### Emit assets
[`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/css-modules/postcss-modules
To write a asset from PostCSS plugin to the webpack, need to add a message in `result.messages`.
### `CSS-in-JS`
The message should contain the following fields:
If you want to process styles written in JavaScript, use the [postcss-js] parser.
- `type` = `asset` - Message type (require, should be equal `asset`)
- `file` - file name (require)
- `content` - file content (require)
- `sourceMap` - sourceMap
- `info` - asset info
[postcss-js]: https://github.com/postcss/postcss-js
**webpack.config.js**
**`webpack.config.js`**
```js
{
test: /\.style.js$/,
use: [
'style-loader',
{ loader: 'css-loader', options: { importLoaders: 2 } },
{ loader: 'postcss-loader', options: { parser: 'postcss-js' } },
'babel-loader'
]
}
const customPlugin = () => (css, result) => {
result.messages.push({
type: 'asset',
file: 'sprite.svg',
content: '<svg>...</svg>',
});
};
const postcssPlugin = postcss.plugin('postcss-assets', customPlugin);
module.exports = {
module: {
rules: [
{
test: /\.css$/i,
use: [
'style-loader',
'css-loader',
{
loader: 'postcss-loader',
options: {
postcssOptions: {
plugins: [postcssPlugin()],
},
},
},
],
},
],
},
};
```
As result you will be able to write styles in the following way
### Add dependencies
```js
import colors from './styles/colors'
The dependencies are necessary for webpack to understand when it needs to run recompilation on the changed files.
export default {
'.menu': {
color: colors.main,
height: 25,
'&_link': {
color: 'white'
}
}
}
```
There are two way to add dependencies:
> :warning: If you are using Babel you need to do the following in order for the setup to work
1. (Recommended). The plugin may emit messages in `result.messages`.
> 1. Add [babel-plugin-add-module-exports] to your configuration
> 2. You need to have only one **default** export per style module
The message should contain the following fields:
[babel-plugin-add-module-exports]: https://github.com/59naga/babel-plugin-add-module-exports
- `type` = `dependency` - Message type (require, should be equal `dependency`)
- `file` - absolute file path (require)
### [Extract CSS][ExtractPlugin]
**webpack.config.js**
[ExtractPlugin]: https://github.com/webpack-contrib/mini-css-extract-plugin
**`webpack.config.js`**
```js
const devMode = process.env.NODE_ENV !== 'production'
const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const customPlugin = () => (css, result) => {
result.messages.push({
type: 'dependency',
file: path.resolve(__dirname, 'path', 'to', 'file'),
});
};
const postcssPlugin = postcss.plugin('postcss-assets', customPlugin);
module.exports = {

@@ -444,59 +931,98 @@ module: {

{
test: /\.css$/,
test: /\.css$/i,
use: [
devMode ? 'style-loader' : MiniCssExtractPlugin.loader,
'style-loader',
'css-loader',
'postcss-loader'
]
}
]
{
loader: 'postcss-loader',
options: {
postcssOptions: {
plugins: [postcssPlugin()],
},
},
},
],
},
],
},
};
```
2. Pass `loaderContext` in plugin.
**webpack.config.js**
```js
module.exports = {
module: {
rules: [
{
test: /\.css$/i,
use: [
'style-loader',
'css-loader',
{
loader: 'postcss-loader',
options: {
config: 'path/to/postcss.config.js',
},
},
],
},
],
},
};
```
**postcss.config.js**
```js
module.exports = (api) => ({
plugins: [
new MiniCssExtractPlugin({
filename: devMode ? '[name].css' : '[name].[hash].css'
})
]
}
require('path/to/customPlugin')({
loaderContext: api.webpackLoaderContext,
}),
],
});
```
<h2 align="center">Maintainers</h2>
**customPlugin.js**
<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>
```js
const path = require('path');
const customPlugin = (loaderContext) => (css, result) => {
loaderContext.webpack.addDependency(
path.resolve(__dirname, 'path', 'to', 'file')
);
};
[npm]: https://img.shields.io/npm/v/postcss-loader.svg
[npm-url]: https://npmjs.com/package/postcss-loader
module.exports = postcss.plugin('postcss-assets', customPlugin);
```
[node]: https://img.shields.io/node/v/postcss-loader.svg
[node-url]: https://nodejs.org
## Contributing
[deps]: https://david-dm.org/postcss/postcss-loader.svg
[deps-url]: https://david-dm.org/postcss/postcss-loader
Please take a moment to read our contributing guidelines if you haven't yet done so.
[tests]: https://img.shields.io/travis/postcss/postcss-loader.svg
[tests-url]: https://travis-ci.org/postcss/postcss-loader
[CONTRIBUTING](./.github/CONTRIBUTING.md)
[cover]: https://coveralls.io/repos/github/postcss/postcss-loader/badge.svg
[cover-url]: https://coveralls.io/github/postcss/postcss-loader
## License
[chat]: https://badges.gitter.im/postcss/postcss.svg
[chat-url]: https://gitter.im/postcss/postcss
[MIT](./LICENSE)
[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/webpack-contrib/postcss-loader.svg
[deps-url]: https://david-dm.org/webpack-contrib/postcss-loader
[tests]: https://github.com/webpack-contrib/postcss-loader/workflows/postcss-loader/badge.svg
[tests-url]: https://github.com/webpack-contrib/postcss-loader/actions
[cover]: https://codecov.io/gh/webpack-contrib/postcss-loader/branch/master/graph/badge.svg
[cover-url]: https://codecov.io/gh/webpack-contrib/postcss-loader
[chat]: https://badges.gitter.im/webpack/webpack.svg
[chat-url]: https://gitter.im/webpack/webpack
[chat-postcss]: https://badges.gitter.im/postcss/postcss.svg
[chat-postcss-url]: https://gitter.im/postcss/postcss
[size]: https://packagephobia.now.sh/badge?p=postcss-loader
[size-url]: https://packagephobia.now.sh/result?p=postcss-loader
src/Error.js
src/index.js
src/options.js
src/options.json
src/Warning.js
LICENSE

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc