Socket
Socket
Sign inDemoInstall

postcss-loader

Package Overview
Dependencies
Maintainers
2
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 1.3.3 to 2.0.0

lib/Error.js
lib/index.js
lib/options.js
lib/options.json

15

CHANGELOG.md

@@ -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).

83

package.json
{
"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
error.js
index.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