passy / autoprefixer-loader Goto Github PK

View Code? Open in Web Editor NEW

217.0 8.0 25.0 35 KB

Webpack loader for autoprefixer

License: MIT License

JavaScript 100.00%

autoprefixer-loader's Introduction

autoprefixer-loader

An autoprefixer loader for webpack.

⚠️ This module is deprecated. Autoprefixer official page recommends using postcss-loader instead.

Usage

var css = require('!raw!autoprefixer!./file.css'); // Just the CSS
var css = require('!css!autoprefixer!./file.css'); // CSS with processed url(...)s

See css-loader to see the effect of processed url(...)s.

Or within the webpack config:

module: {
  loaders: [{
    test: /\.css$/,
    loader: 'css-loader!autoprefixer-loader?browsers=last 2 versions'
  }]
}

Then you can: var css = require('./file.css');.

Use in tandem with the style-loader to add the css rules to your document:

module: {
  loaders: [{
    test: /\.css/,
    loader: 'style-loader!css-loader!autoprefixer-loader'
  }]
}

and then require('./file.css'); will compile and add the CSS to your page.

Options

`browsers`

Specify a single browser to support. Read more

loaders: [{
  loader: 'css-loader!autoprefixer-loader?browsers=last 2 version',
  ...
}]

For a list of browsers use JSON syntax.

loaders: [{
  loader: 'css-loader!autoprefixer-loader?{browsers:["last 2 version", "Firefox 15"]}',
  ...
}]

`cascade`

Default: true

When disabled, autoprefixer creates no visual cascade for the generated prefixes. Read more

loaders: [{
  loader: 'css-loader!autoprefixer-loader?cascade=false',
  ...
}]

`safe`

Default: false

When enabled, autoprefixer will attempt to parse invalid CSS. Read more

loaders: [{
  loader: 'css-loader!autoprefixer-loader?safe=true',
  ...
}]

`add`

Default: true

While disabled, autoprefixer will not add any new prefixes to your code. Read more

loaders: [{
  loader: 'css-loader!autoprefixer-loader?add=false',
  ...
}]

`remove`

Default: true

Whether or not autoprefixer should automatically remove outdated prefixes. Read more

loaders: [{
  loader: 'css-loader!autoprefixer-loader?remove=false',
  ...
}]

Install

npm install autoprefixer-loader --save-dev

Contributing

In lieu of a formal styleguide, take care to maintain the existing coding style.

Release History

3.1.0 - Upgrade dependencies, move to autoprefixer (no longer -core)
3.0.0 - Upgrade to autoprefixer-core 6.0
2.1.0 - Add add, remove options, bump autoprefixer-core
2.0.0 - Updated autoprefixer + postcss
1.2.0 - Added support for existing sourcemaps from earlier in the chain
0.1.0 - Initial release

License

Licensed under the MIT license.

autoprefixer-loader's People

Contributors

Stargazers

Watchers

autoprefixer-loader's Issues

process() method is deprecated

When I use the loader, I get: Autoprefixer's process() method is deprecated and will removed in next major release. Use postcss([autoprefixer]).process() instead.

Deprecate npm package too

I had to debug a strange issue because it was not obvious that this package is not up to date.

Input file name

@passy Can we take somehow input file name from Webpack?

Now on syntax error autoprefixer-loader will print something like without input file name.

<input css>:2:1: Unexpected { in decls

But if we set from option in process(css, opts), PostCSS will add file name.

Update autoprefixer

To get rid of deprecated warnings from PostCSS, and to use autoprefixer instead of autoprefixer-core.

Safari incorrect behaviour in keyframes

Hi, the following snippet did not work on the 100%:

@keyframes glow {
  0% { opacity: 0; }
  50% { opacity: 0.5; }
  100% {
    opacity: 0; 
  }
}

But this works:

@keyframes glow {
  0% { opacity: 0; }
  50% { opacity: 0.5; }
  100% { opacity: 0; }
}

Is it a autoprefixer error?

Comma separated syntax for `browsers` does not work

First, thanks for writing this loader! While testing it in my project I found this:

Specifying the browsers in a query string using comma separation as shown in the README (?browsers=last 2 version, Firefox 15) does not work. Only the first value would be passed to autoprefixer.

This is because the loader-utils parseQuery() interprets a comma as a separator between flags (?+flag1,-flag2 -> { flag1: true, flag2: false }). Hence only the first value will be assigned to browsers while all subsequent values will become flags set to true.

Only the JSON ?{browsers:['last 2 version', 'Firefox 15']} and array ?browsers[]=last 2 version,browsers[]=Firefox 15 syntax would work with parseQuery().

Document safe and cascade options

@ai I'm not really sure what those do. Is there some other doc that describes them?

Release a new version

Given npm's upcoming semver changes, should we call this 1.0?

// @ai

Mistake in readme

https://cl.ly/233P1Q1x1T0z – "last two version" is not correct. Should be "versions"

Add WebPack instruction to Autoprefixer How To

Please, send me PR with WebPack insrtuctions in Autoprefixer’s README.md

Use Autoprefixer 3.0

We need to update Autoprefixer to latest 3.0 version and use autoprefixer-core instead of autoprefixer.

Deprecation warning with Webpack 2+

(node:45058) DeprecationWarning: loaderUtils.parseQuery() received a non-string value which can be problematic, see webpack/loader-utils#56
parseQuery() will be replaced with getOptions() in the next major version of loader-utils.

From this line:

var params = loaderUtils.parseQuery(this.query);

When using a valid object query:

{
    loader: 'autoprefixer-loader',
    options: { browser: 'last 2 version'
}

TypeError: undefined is not a function

"autoprefixer-loader": "2.0.0"

TypeError: undefined is not a function
    at Object.<anonymous> (/node_modules/autoprefixer-loader/node_modules/autoprefixer-core/lib/autoprefixer.js:19:28)
    at Object.<anonymous> (/node_modules/autoprefixer-loader/node_modules/autoprefixer-core/lib/autoprefixer.js:88:4)
    at Module._compile (module.js:460:26)
    at Object.Module._extensions..js (module.js:478:10)
    at Module.load (module.js:355:32)
    at Function.Module._load (module.js:310:12)
    at Module.require (module.js:365:17)
    at require (module.js:384:17)
    at Object.<anonymous> (/node_modules/autoprefixer-loader/index.js:2:24)
    at Module._compile (module.js:460:26)

Shouldn't autoprefixer and postcss be peerDependencies?

Currently your package.json has:

"dependencies": {
    "autoprefixer": "^6.0.2",
    "loader-utils": "^0.2.11",
    "postcss": "^5.0.4",
    "postcss-safe-parser": "^1.0.1"
  },

I think it would be better to put them into peerDependencies, so that autoprefixer-loader users could use any versions they need. Sass-loader does it this way.

Btw, if you have postcss-safe-parser, do you still need postcss dependency? ( postcss-safe-parser depends on postcss, so with npm@2 it gets installed twice.)

Unsupported previous source map format

I noticed the following error happen when running webpack.

ModuleBuildError: Module build failed: Error: Unsupported previous source map format: [object Object]
    at PreviousMap.loadMap (/var/lib/jenkins/node_modules/autoprefixer-loader/node_modules/postcss/lib/previous-map.js:86:23)
    at new PreviousMap (/var/lib/jenkins/node_modules/autoprefixer-loader/node_modules/postcss/lib/previous-map.js:31:25)
    at new Input (/var/lib/jenkins/node_modules/autoprefixer-loader/node_modules/postcss/lib/input.js:39:19)
    at Object.parse [as default] (/var/lib/jenkins/node_modules/autoprefixer-loader/node_modules/postcss/lib/parse.js:17:17)
    at new LazyResult (/var/lib/jenkins/node_modules/autoprefixer-loader/node_modules/postcss/lib/lazy-result.js:54:42)
    at Processor.process (/var/lib/jenkins/node_modules/autoprefixer-loader/node_modules/postcss/lib/processor.js:30:16)
    at Object.module.exports (/var/lib/jenkins/node_modules/autoprefixer-loader/index.js:51:45)
    at DependenciesBlock.onModuleBuildFailed (/var/lib/jenkins/node_modules/webpack/node_modules/webpack-core/lib/NormalModuleMixin.js:315:19)
    at nextLoader (/var/lib/jenkins/node_modules/webpack/node_modules/webpack-core/lib/NormalModuleMixin.js:270:31)
    at /var/lib/jenkins/node_modules/webpack/node_modules/webpack-core/lib/NormalModuleMixin.js:292:15
    at runSyncOrAsync (/var/lib/jenkins/node_modules/webpack/node_modules/webpack-core/lib/NormalModuleMixin.js:173:4)
    at nextLoader (/var/lib/jenkins/node_modules/webpack/node_modules/webpack-core/lib/NormalModuleMixin.js:290:3)
    at /var/lib/jenkins/node_modules/webpack/node_modules/webpack-core/lib/NormalModuleMixin.js:292:15
    at context.callback (/var/lib/jenkins/node_modules/webpack/node_modules/webpack-core/lib/NormalModuleMixin.js:148:14)
    at Object.onRender (/var/lib/jenkins/node_modules/sass-loader/index.js:184:9)
    at /var/lib/jenkins/node_modules/sass-loader/node_modules/async/lib/async.js:862:35
    at _arrayEach (/var/lib/jenkins/node_modules/sass-loader/node_modules/async/lib/async.js:85:13)
    at Object.<anonymous> (/var/lib/jenkins/node_modules/sass-loader/node_modules/async/lib/async.js:861:17)
    at Object.callback (/var/lib/jenkins/node_modules/sass-loader/node_modules/async/lib/async.js:44:16)
    at options.success (/var/lib/jenkins/node_modules/node-sass/lib/index.js:293:32)

The commit that caused it had the following style in it, which might be part of the problem (we are using sass-loader, style-loader, and css-loader as well):

:local(.ctaFooter) {

}

I'm not sure if this is the best place to report this, but I figured I'd start here in case you have any ideas.

Thanks for the loader!

Error when upgrading to 1.2.0

When I upgraded to the latest version I got the following error when building my CSS using autoprefixer-loader:

 Module build failed: Error: "version" is a required argument.

This is the config inside my webpack.config.js file:

{
  test: /\.scss$/,
  loader: ExtractTextPlugin.extract('style-loader', 'css-loader!autoprefixer-loader!sass-loader?' +
  'includePaths[]=' + bourbon + '&' +
  'includePaths[]=' + neat)
}

Is it something that I'm missing with the new version? I tried adding ?browsers= but it made no difference.

Add loader to official list

After release loader with Autoprefixer 3.0 we should add it to official list. Even in Rework loader was there.

Do not override Autoprefixer defaults

You set you own defaults. It is not a best idea. Just set autoprefixer(nil) to get Autoprefixer’s defaults.

passy / autoprefixer-loader Goto Github PK

autoprefixer-loader's Introduction

autoprefixer-loader

⚠️ This module is deprecated. Autoprefixer official page recommends using postcss-loader instead.

Usage

Options

browsers

cascade

safe

add

remove

Install

Contributing

Release History

License

autoprefixer-loader's People

Contributors

Stargazers

Watchers

Forkers

autoprefixer-loader's Issues

Recommend Projects

Recommend Topics

Recommend Org

⚠️ This module is deprecated. Autoprefixer official page recommends using `postcss-loader` instead.

`browsers`

`cascade`

`safe`

`add`

`remove`