├── .gitattributes ├── .gitignore ├── .travis.yml ├── LICENSE ├── README.md ├── gulpfile.js ├── index.js ├── package.json └── test ├── fixtures ├── android_firefox.css ├── android_firefox_expected.css ├── basic.css ├── basic_expected.css ├── broken.css ├── firefox.css ├── firefox_expected.css ├── nocascade.css └── nocascade_expected.css └── test.js /.gitattributes: -------------------------------------------------------------------------------- 1 | * text=auto -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules/ 2 | build/ 3 | -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | language: node_js 2 | sudo: false 3 | node_js: 4 | - "0.10" 5 | - "iojs" 6 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2014 Pascal Hartig 4 | 5 | Permission is hereby granted, free of charge, to any person 6 | obtaining a copy of this software and associated documentation 7 | files (the "Software"), to deal in the Software without 8 | restriction, including without limitation the rights to use, 9 | copy, modify, merge, publish, distribute, sublicense, and/or sell 10 | copies of the Software, and to permit persons to whom the 11 | Software is furnished to do so, subject to the following 12 | conditions: 13 | 14 | The above copyright notice and this permission notice shall be 15 | included in all copies or substantial portions of the Software. 16 | 17 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, 18 | EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES 19 | OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND 20 | NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT 21 | HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, 22 | WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING 23 | FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR 24 | OTHER DEALINGS IN THE SOFTWARE. 25 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 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 | 3 | An [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 10 | var css = require('!raw!autoprefixer!./file.css'); // Just the CSS 11 | var css = require('!css!autoprefixer!./file.css'); // CSS with processed url(...)s 12 | ``` 13 | 14 | See [css-loader](https://github.com/webpack/css-loader) to see the effect of processed `url(...)`s. 15 | 16 | Or within the webpack config: 17 | 18 | ```js 19 | module: { 20 | loaders: [{ 21 | test: /\.css$/, 22 | loader: 'css-loader!autoprefixer-loader?browsers=last 2 versions' 23 | }] 24 | } 25 | ``` 26 | 27 | Then you can: `var css = require('./file.css');`. 28 | 29 | Use in tandem with the [style-loader](https://github.com/webpack/style-loader) to add the css rules to your `document`: 30 | 31 | ```js 32 | module: { 33 | loaders: [{ 34 | test: /\.css/, 35 | loader: 'style-loader!css-loader!autoprefixer-loader' 36 | }] 37 | } 38 | ``` 39 | 40 | and then `require('./file.css');` will compile and add the CSS to your page. 41 | 42 | ## Options 43 | 44 | ### `browsers` 45 | 46 | Specify a single browser to support. [Read 47 | more](https://github.com/postcss/autoprefixer#browsers) 48 | 49 | ```js 50 | loaders: [{ 51 | loader: 'css-loader!autoprefixer-loader?browsers=last 2 version', 52 | ... 53 | }] 54 | ``` 55 | 56 | For a list of browsers use JSON syntax. 57 | ```js 58 | loaders: [{ 59 | loader: 'css-loader!autoprefixer-loader?{browsers:["last 2 version", "Firefox 15"]}', 60 | ... 61 | }] 62 | ``` 63 | 64 | ### `cascade` 65 | 66 | *Default: true* 67 | 68 | When disabled, autoprefixer creates no visual cascade for the generated 69 | prefixes. 70 | [Read more](https://github.com/postcss/autoprefixer#visual-cascade) 71 | 72 | ```js 73 | loaders: [{ 74 | loader: 'css-loader!autoprefixer-loader?cascade=false', 75 | ... 76 | }] 77 | ``` 78 | 79 | ### `safe` 80 | 81 | *Default: false* 82 | 83 | When enabled, autoprefixer will attempt to parse invalid CSS. [Read 84 | more](https://github.com/postcss/autoprefixer-core#safe-mode) 85 | 86 | ```js 87 | loaders: [{ 88 | loader: 'css-loader!autoprefixer-loader?safe=true', 89 | ... 90 | }] 91 | ``` 92 | 93 | ### `add` 94 | 95 | *Default: true* 96 | 97 | While disabled, autoprefixer will not add any new prefixes to your code. [Read 98 | more](https://github.com/postcss/autoprefixer#usage) 99 | 100 | ```js 101 | loaders: [{ 102 | loader: 'css-loader!autoprefixer-loader?add=false', 103 | ... 104 | }] 105 | ``` 106 | 107 | ### `remove` 108 | 109 | *Default: true* 110 | 111 | Whether or not autoprefixer should automatically remove outdated prefixes. [Read 112 | more](https://github.com/postcss/autoprefixer#usage) 113 | 114 | ```js 115 | loaders: [{ 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 126 | In 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 137 | Licensed under the MIT license. 138 | -------------------------------------------------------------------------------- /gulpfile.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | var gulp = require('gulp'); 3 | var fs = require('fs-extra'); 4 | var path = require('path'); 5 | 6 | gulp.task('clean', function (done) { 7 | fs.remove(path.join(__dirname, '/build'), done); 8 | }); 9 | 10 | gulp.task('build', ['clean'], function () { 11 | var webpack = require('webpack-stream'); 12 | 13 | return gulp.src('') 14 | .pipe(webpack({ 15 | target: 'node', 16 | context: path.join(__dirname, '/test/'), 17 | entry: './test.js', 18 | output: { 19 | path: path.join(__dirname, '/build/'), 20 | filename: 'test.js', 21 | }, 22 | })) 23 | .pipe(gulp.dest('build/')); 24 | }); 25 | 26 | gulp.task('test', ['build'], function () { 27 | var mocha = require('gulp-mocha'); 28 | require('should'); 29 | 30 | return gulp.src('build/*.js', {read: false}) 31 | .pipe(mocha()); 32 | }); 33 | 34 | gulp.task('default', ['test']); 35 | -------------------------------------------------------------------------------- /index.js: -------------------------------------------------------------------------------- 1 | var loaderUtils = require('loader-utils'); 2 | var autoprefixer = require('autoprefixer'); 3 | var postcss = require('postcss'); 4 | var path = require('path'); 5 | var safe = require('postcss-safe-parser'); 6 | 7 | module.exports = function (source, map) { 8 | if (this.cacheable) { 9 | this.cacheable(); 10 | } 11 | 12 | var params = loaderUtils.parseQuery(this.query); 13 | 14 | if (params.browsers && !Array.isArray(params.browsers)) { 15 | params.browsers = params.browsers.split(','); 16 | } 17 | if (params.cascade === 'false') { 18 | params.cascade = false; 19 | } 20 | 21 | var options = {from: path.relative(this.options.context, this.resource)}; 22 | if (params.safe) { 23 | delete params.safe; 24 | options.parser = safe; 25 | } 26 | 27 | var whitelist = { 28 | browsers: true, 29 | cascade: true, 30 | add: true, 31 | remove: true, 32 | }; 33 | var unknownParams = []; 34 | for (var i in params) { 35 | if (!whitelist[i]) { 36 | unknownParams.push(i); 37 | } 38 | } 39 | if (unknownParams.length) { 40 | var warn = unknownParams.length === 1 ? 41 | 'Autoprefixer-loader got this undocumented option: ' : 42 | 'Autoprefixer-loader got these undocumented options: '; 43 | warn += unknownParams.join(', '); 44 | this.emitWarning(warn); 45 | } 46 | 47 | if (map) { 48 | options.map = { 49 | prev: map, 50 | }; 51 | } 52 | 53 | var prefixer = autoprefixer(params); 54 | var processed = postcss([prefixer]).process(source, options); 55 | this.callback(null, processed.css, processed.map); 56 | }; 57 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "autoprefixer-loader", 3 | "version": "3.2.0", 4 | "description": "[deprecated] Autoprefixer loader for webpack", 5 | "main": "index.js", 6 | "author": "Pascal Hartig ", 7 | "license": "MIT", 8 | "repository": { 9 | "type": "git", 10 | "url": "git@github.com:passy/autoprefixer-loader" 11 | }, 12 | "bugs": { 13 | "url": "https://github.com/passy/autoprefixer-loader/issues" 14 | }, 15 | "dependencies": { 16 | "autoprefixer": "^6.0.2", 17 | "loader-utils": "^0.2.11", 18 | "postcss": "^5.0.4", 19 | "postcss-safe-parser": "^1.0.1" 20 | }, 21 | "devDependencies": { 22 | "css-loader": "^0.17.0", 23 | "fs-extra": "^0.24.0", 24 | "gulp": "^3.9.0", 25 | "gulp-mocha": "^2.1.3", 26 | "raw-loader": "^0.5.1", 27 | "should": "^7.1.0", 28 | "webpack-stream": "^2.1.0", 29 | "xo": "^0.8.0" 30 | }, 31 | "keywords": [ 32 | "webpack", 33 | "loader", 34 | "autoprefixer" 35 | ], 36 | "files": [ 37 | "index.js" 38 | ], 39 | "xo": { 40 | "space": 4, 41 | "rules": { 42 | "comma-dangle": [ 43 | 2, 44 | "always-multiline" 45 | ] 46 | }, 47 | "ignores": [ 48 | "build/**" 49 | ] 50 | }, 51 | "scripts": { 52 | "test": "xo && gulp" 53 | } 54 | } 55 | -------------------------------------------------------------------------------- /test/fixtures/android_firefox.css: -------------------------------------------------------------------------------- 1 | a { 2 | transition: all 1s ease-in; 3 | } 4 | -------------------------------------------------------------------------------- /test/fixtures/android_firefox_expected.css: -------------------------------------------------------------------------------- 1 | a { 2 | -webkit-transition: all 1s ease-in; 3 | -moz-transition: all 1s ease-in; 4 | transition: all 1s ease-in; 5 | } 6 | -------------------------------------------------------------------------------- /test/fixtures/basic.css: -------------------------------------------------------------------------------- 1 | a { 2 | -moz-border-radius: 5px; 3 | border-radius: 5px 4 | } 5 | -------------------------------------------------------------------------------- /test/fixtures/basic_expected.css: -------------------------------------------------------------------------------- 1 | a { 2 | border-radius: 5px 3 | } 4 | -------------------------------------------------------------------------------- /test/fixtures/broken.css: -------------------------------------------------------------------------------- 1 | a { wrong } 2 | -------------------------------------------------------------------------------- /test/fixtures/firefox.css: -------------------------------------------------------------------------------- 1 | a { 2 | transition: all 1s ease-in; 3 | } 4 | -------------------------------------------------------------------------------- /test/fixtures/firefox_expected.css: -------------------------------------------------------------------------------- 1 | a { 2 | -moz-transition: all 1s ease-in; 3 | transition: all 1s ease-in; 4 | } 5 | -------------------------------------------------------------------------------- /test/fixtures/nocascade.css: -------------------------------------------------------------------------------- 1 | a { 2 | transition: all 1s; 3 | } 4 | -------------------------------------------------------------------------------- /test/fixtures/nocascade_expected.css: -------------------------------------------------------------------------------- 1 | a { 2 | -moz-transition: all 1s; 3 | transition: all 1s; 4 | } 5 | -------------------------------------------------------------------------------- /test/test.js: -------------------------------------------------------------------------------- 1 | /* eslint-env mocha */ 2 | 3 | describe('basic', function () { 4 | it('should proprocess basic css', function () { 5 | var css = require('!raw-loader!../!./fixtures/basic.css'); 6 | var fix = require('!raw-loader!./fixtures/basic_expected.css'); 7 | 8 | (typeof css).should.be.eql('string'); 9 | css.should.equal(fix); 10 | }); 11 | 12 | it('should import css with the css-loader', function () { 13 | var css = require('!css-loader!../!./fixtures/basic.css'); 14 | var fix = require('!raw-loader!./fixtures/basic_expected.css'); 15 | 16 | (Array.isArray(css)).should.be.eql(true); 17 | (typeof css[0][1]).should.be.eql('string'); 18 | css[0][1].should.equal(fix); 19 | }); 20 | 21 | it('should accept a single browser parameter', function () { 22 | var css = require('!raw-loader!../?browsers=Firefox 15!./fixtures/firefox.css'); 23 | var fix = require('!raw-loader!./fixtures/firefox_expected.css'); 24 | 25 | (typeof css).should.be.eql('string'); 26 | css.should.equal(fix); 27 | }); 28 | 29 | it('should accept JSON syntax for browsers parameter', function () { 30 | var css = require('!raw-loader!../?{browsers:["Firefox 15", "Android 4.3"]}!./fixtures/android_firefox.css'); 31 | var fix = require('!raw-loader!./fixtures/android_firefox_expected.css'); 32 | 33 | (typeof css).should.be.eql('string'); 34 | css.should.equal(fix); 35 | }); 36 | 37 | it('should accept array syntax for browsers parameter', function () { 38 | var css = require('!raw-loader!../?browsers[]=Firefox 15,browsers[]=Android 4.3!./fixtures/android_firefox.css'); 39 | var fix = require('!raw-loader!./fixtures/android_firefox_expected.css'); 40 | 41 | (typeof css).should.be.eql('string'); 42 | css.should.equal(fix); 43 | }); 44 | 45 | it('should accept a cascade parameter', function () { 46 | var css = require('!raw-loader!../?browsers=Firefox 15&cascade=false!./fixtures/nocascade.css'); 47 | var fix = require('!raw-loader!./fixtures/nocascade_expected.css'); 48 | 49 | (typeof css).should.be.eql('string'); 50 | css.should.equal(fix); 51 | }); 52 | 53 | it('should accept a safe parameter', function () { 54 | var css = require('!raw-loader!../?safe=true!./fixtures/broken.css'); 55 | 56 | (typeof css).should.be.eql('string'); 57 | css.should.equal(css); 58 | }); 59 | }); 60 | --------------------------------------------------------------------------------