UNPKG

3.5 kBMarkdownView Raw
1# autoprefixer-loader [![Build Status](https://travis-ci.org/passy/autoprefixer-loader.svg?branch=master)](https://travis-ci.org/passy/autoprefixer-loader) [![Dependency Status](https://gemnasium.com/passy/autoprefixer-loader.png)](https://gemnasium.com/passy/autoprefixer-loader) [![Code Climate](https://codeclimate.com/github/passy/autoprefixer-loader.png)](https://codeclimate.com/github/passy/autoprefixer-loader)
2
3An [autoprefixer](https://github.com/ai/autoprefixer) loader for [webpack](https://github.com/webpack/webpack).
4
5> ### :warning: This module is deprecated. [Autoprefixer official page](https://github.com/postcss/autoprefixer#webpack) recommends using [`postcss-loader`](https://github.com/postcss/postcss-loader) instead.
6
7## Usage
8
9```js
10var css = require('!raw!autoprefixer!./file.css'); // Just the CSS
11var css = require('!css!autoprefixer!./file.css'); // CSS with processed url(...)s
12```
13
14See [css-loader](https://github.com/webpack/css-loader) to see the effect of processed `url(...)`s.
15
16Or within the webpack config:
17
18```js
19module: {
20 loaders: [{
21 test: /\.css$/,
22 loader: 'css-loader!autoprefixer-loader?browsers=last 2 versions'
23 }]
24}
25```
26
27Then you can: `var css = require('./file.css');`.
28
29Use in tandem with the [style-loader](https://github.com/webpack/style-loader) to add the css rules to your `document`:
30
31```js
32module: {
33 loaders: [{
34 test: /\.css/,
35 loader: 'style-loader!css-loader!autoprefixer-loader'
36 }]
37}
38```
39
40and then `require('./file.css');` will compile and add the CSS to your page.
41
42## Options
43
44### `browsers`
45
46Specify a single browser to support. [Read
47 more](https://github.com/postcss/autoprefixer#browsers)
48
49```js
50loaders: [{
51 loader: 'css-loader!autoprefixer-loader?browsers=last 2 version',
52 ...
53}]
54```
55
56For a list of browsers use JSON syntax.
57```js
58loaders: [{
59 loader: 'css-loader!autoprefixer-loader?{browsers:["last 2 version", "Firefox 15"]}',
60 ...
61}]
62```
63
64### `cascade`
65
66*Default: true*
67
68When disabled, autoprefixer creates no visual cascade for the generated
69prefixes.
70[Read more](https://github.com/postcss/autoprefixer#visual-cascade)
71
72```js
73loaders: [{
74 loader: 'css-loader!autoprefixer-loader?cascade=false',
75 ...
76}]
77```
78
79### `safe`
80
81*Default: false*
82
83When enabled, autoprefixer will attempt to parse invalid CSS. [Read
84more](https://github.com/postcss/autoprefixer-core#safe-mode)
85
86```js
87loaders: [{
88 loader: 'css-loader!autoprefixer-loader?safe=true',
89 ...
90}]
91```
92
93### `add`
94
95*Default: true*
96
97While disabled, autoprefixer will not add any new prefixes to your code. [Read
98more](https://github.com/postcss/autoprefixer#usage)
99
100```js
101loaders: [{
102 loader: 'css-loader!autoprefixer-loader?add=false',
103 ...
104}]
105```
106
107### `remove`
108
109*Default: true*
110
111Whether or not autoprefixer should automatically remove outdated prefixes. [Read
112more](https://github.com/postcss/autoprefixer#usage)
113
114```js
115loaders: [{
116 loader: 'css-loader!autoprefixer-loader?remove=false',
117 ...
118}]
119```
120
121## Install
122
123`npm install autoprefixer-loader --save-dev`
124
125## Contributing
126In lieu of a formal styleguide, take care to maintain the existing coding style.
127
128## Release History
129* 3.1.0 - Upgrade dependencies, move to autoprefixer (no longer -core)
130* 3.0.0 - Upgrade to autoprefixer-core 6.0
131* 2.1.0 - Add `add`, `remove` options, bump autoprefixer-core
132* 2.0.0 - Updated autoprefixer + postcss
133* 1.2.0 - Added support for existing sourcemaps from earlier in the chain
134* 0.1.0 - Initial release
135
136## License
137Licensed under the MIT license.