Autoprefixer support #1512

AlexDede · 2016-08-01T19:46:09Z

Please, can you add support to process CSS files with autoprefixer in webpack configs?

wulfsberg · 2016-08-04T20:26:07Z

...and PostCSS in general. CssNext is awfully tempting, given that we're already knee-deep in transpilation and forward-compatibility here :-)

herkulano · 2016-08-28T10:46:45Z

cssnext and cssnano are a must have.
configure custom options for them.

#1656

Kunepro · 2016-08-29T15:23:14Z

I would love this too.

caroso1222 · 2016-09-03T07:55:46Z

Definitely waiting for this

gperdomor · 2016-09-07T20:42:41Z

I need this too

mchambaud · 2016-09-08T19:17:00Z

👍

SethDavenport · 2016-09-14T21:15:36Z

As a cssnext user, the ability to specify postcss plugins would go a long way to solving my use cases for #1656.

Autoprefixer in particular is kind of a must-have...

Tre665 · 2016-09-16T09:52:42Z

Also waiting for this. Last step before we finally switching to the CLI.
Our App uses a flexbox layout which is a nightmare to use without autoprefixer / cssnext.

euangoddard · 2016-09-16T10:03:10Z

Could this be achieved by altering packages/angular-cli/models/webpack-config.ts to optionally merge an arbitrary webpack config that the developer could specify in the root of their project? This would not only solve the postcss processors configuration requirement, but allow for any other tweaks to the webpack configuration.

ptrhvns · 2016-09-22T17:27:03Z

I'm trying to use Foundation Sites as my front end framework, and it requires an autoprefixer. Some way to support one in my build is therefore essential. So, I'd like to request that the priority of this issue be adjusted up. Thanks!

mbeckenbach · 2016-09-28T15:50:03Z

I don't think this is only a "nice to have" as browser prefixing is an issue in allmost every project.

https://medium.com/@Ai_boy/configure-angular-2-cli-webpack-beta-14-5a7052ce6156#.3m4w3c6j5

Seskara · 2016-09-28T16:37:53Z

This is a duplicate of 1656, and angular team already stated that they won't work on this until 2017, or later.

They consider AOT more important, I don't agree, at all.
I feel that being in the condition to work on my project is more important than some performance increase, but apparently angulat-cli team doesn't agree.
The most annoying part is that I always had autoprefixer before they decided to move to webpack.
I welcome webpack, but angular-cli stubbornness to face that they are causing problems to a wide portion of angular-cli community, with people leaving for other seeds is disconcerting.

I don't want to change seed, as I believe that in the long run angular-cli will be the best solution, but I'm unhappy with angular-cli team's priorities.

caroso1222 · 2016-09-28T17:34:36Z

Is there any workaround to get autoprefixer work on angular-cli? I'm not that fluent with webpack but perhaps we can do something about it and implement some unofficial solution. Would it be that hard? Sorry I'm hugely ignorant.

Kunepro · 2016-09-28T17:38:37Z

@caroso1222 check @mbeckenbach link (2 post above yours).

mbeckenbach · 2016-09-29T05:26:59Z

@Seskara both features are important. But i agree with you, performance optimization is not the most important one. Most apps at the moment should be still in development. So the development tools are much more important for now.

wulfsberg · 2016-09-29T09:17:13Z

@Seskara This is not quite a duplicate of #1656. I still have some hope that since this is not about configuring webpack and messing with the entire build system, but configuring a plugin which is already included and running, we can get this before a generic, all-singing, all-dancing webpack override system.

(ETA just to add: I think the focus on AoT compilation is a question of adoption. They need to prove that Angular can easily provide very lean and efficient apps, to convince people to adopt it. Promising that such optimization will come is good enough for us who are already here, believing in the project, but for people evaluating the market, it's just so much handwaving. So I can see why they consider it critical, even though I've been harping on about getting PostCSS support).

mbeckenbach · 2016-09-29T13:58:00Z

@wulfsberg Fair point regarding the AoT compilation. Maybe I don't care that much about it is because bandwidth was never a problem in my projects. :-)

Kunepro · 2016-09-30T10:35:54Z

Somebody has this: https://medium.com/@Ai_boy/configure-angular-2-cli-webpack-beta-14-5a7052ce6156#.3m4w3c6j5 working with beta.16?
I get an error (see comment in the article).

scottwio · 2016-09-30T21:15:05Z

How is autoprefixer a nice to have? Every production project I've seen in the last 4 years has autoprefixing, making a production application without it is barbaric, do we go back to mixins, yuck? ES6 is arguably more of a nice to have at least, writing in ES5 isn't going to break the rendering of your site in certain browsers.

filipesilva · 2016-10-08T23:34:43Z

If anyone wants to take a stab at a PR that adds this functionality, I'll be happy to review it.

Bear in mind that the PR should not aim at offering configurable functionality, but rather base functionality. If it needs to be configured on a project by project basis, then it'll need to wait for the addon system.

SethDavenport · 2016-10-09T11:22:43Z

Hmm. Is it sufficient to add the necessary postcss config in https://github.com/angular/angular-cli/blob/de3c27536d58a9f41418f988b70456d6bbaf24b5/packages/angular-cli/models/webpack-build-common.ts?

In that case it would be a matter of adding the following to the webpack plugins attribute:

 var autoprefixer = require('autoprefixer');

 // ...

 new webpack.LoaderOptionsPlugin({
    test: /\.css$/,
    options: {
      postcss: [ autoprefixer() ]
    },
  }),

At which point anyone can drop a browserslist file (https://github.com/ai/browserslist) in their project and autoprefixer will find it.

SethDavenport · 2016-10-09T13:25:35Z

If that seems like a reasonable approach I'll try and find time to get a pr together

dimfried · 2016-10-10T14:22:56Z

@SethDavenport & @filipesilva , what if we just add autoprefixer and support only the latest 2 browsers for now? so we could at least use flexbox without a hassle. I know this is not the best solution but we'd have some very basic support for now and as far as I see, the effort to achieve this is not big.

filipesilva · 2016-10-10T14:28:27Z

@SethDavenport that sounds like a sensible implementation, and the last two browsers also seems like a sensible default.

Remember that a test is also needed to ensure it's working, see https://github.com/angular/angular-cli/blob/master/tests/e2e/tests/build/styles/css.ts, add something that autoprefixer should prefix, and verify that it did.

SethDavenport · 2016-10-16T22:38:31Z

@filipesilva Having some issues running npm run test:e2e (this is prior to making any code changes). Is this something you've seen before?

Test "setup/100-npm-link" failed...
Running "npm link" returned error code 1...

STDOUT:

> execSync@1.0.2 install /Users/Seth/code/oss/angular-cli/dist/angular-cli/node_modules/angular2-template-loader/node_modules/codecov/node_modules/execSync
> node install.js

[execsync v1.0.2] Attempting to compile native extensions.
[execSync v1.0.2]
    Native code compile failed!!

> node-zopfli@2.0.1 install /Users/Seth/code/oss/angular-cli/dist/angular-cli/node_modules/compression-webpack-plugin/node_modules/node-zopfli
> node-pre-gyp install --fallback-to-build

[node-zopfli] Success: "/Users/Seth/code/oss/angular-cli/dist/angular-cli/node_modules/compression-webpack-plugin/node_modules/node-zopfli/lib/binding/node-v48-darwin-x64/zopfli.node" already installed
Pass --update-binary to reinstall or --build-from-source to recompile

> node-sass@3.10.1 install /Users/Seth/code/oss/angular-cli/dist/angular-cli/node_modules/node-sass
> node scripts/install.js

Start downloading binary at https://github.com/sass/node-sass/releases/download/v3.10.1/darwin-x64-48_binding.node
Binary downloaded and installed at /Users/Seth/code/oss/angular-cli/dist/angular-cli/node_modules/node-sass/vendor/darwin-x64-48/binding.node

> fsevents@1.0.14 install /Users/Seth/code/oss/angular-cli/dist/angular-cli/node_modules/webpack/node_modules/watchpack/node_modules/chokidar/node_modules/fsevents
> node-pre-gyp install --fallback-to-build

[fsevents] Success: "/Users/Seth/code/oss/angular-cli/dist/angular-cli/node_modules/webpack/node_modules/watchpack/node_modules/chokidar/node_modules/fsevents/lib/binding/Release/node-v48-darwin-x64/fse.node" is installed via remote

> node-sass@3.10.1 postinstall /Users/Seth/code/oss/angular-cli/dist/angular-cli/node_modules/node-sass
> node scripts/build.js

"/Users/Seth/code/oss/angular-cli/dist/angular-cli/node_modules/node-sass/vendor/darwin-x64-48/binding.node" exists.
 testing binary.
Binary is fine; exiting.


Error: Running "npm link" returned error code 1...

STDOUT:

> execSync@1.0.2 install /Users/Seth/code/oss/angular-cli/dist/angular-cli/node_modules/angular2-template-loader/node_modules/codecov/node_modules/execSync
> node install.js

[execsync v1.0.2] Attempting to compile native extensions.
[execSync v1.0.2]
    Native code compile failed!!

> node-zopfli@2.0.1 install /Users/Seth/code/oss/angular-cli/dist/angular-cli/node_modules/compression-webpack-plugin/node_modules/node-zopfli
> node-pre-gyp install --fallback-to-build

[node-zopfli] Success: "/Users/Seth/code/oss/angular-cli/dist/angular-cli/node_modules/compression-webpack-plugin/node_modules/node-zopfli/lib/binding/node-v48-darwin-x64/zopfli.node" already installed
Pass --update-binary to reinstall or --build-from-source to recompile

> node-sass@3.10.1 install /Users/Seth/code/oss/angular-cli/dist/angular-cli/node_modules/node-sass
> node scripts/install.js

Start downloading binary at https://github.com/sass/node-sass/releases/download/v3.10.1/darwin-x64-48_binding.node
Binary downloaded and installed at /Users/Seth/code/oss/angular-cli/dist/angular-cli/node_modules/node-sass/vendor/darwin-x64-48/binding.node

> fsevents@1.0.14 install /Users/Seth/code/oss/angular-cli/dist/angular-cli/node_modules/webpack/node_modules/watchpack/node_modules/chokidar/node_modules/fsevents
> node-pre-gyp install --fallback-to-build

[fsevents] Success: "/Users/Seth/code/oss/angular-cli/dist/angular-cli/node_modules/webpack/node_modules/watchpack/node_modules/chokidar/node_modules/fsevents/lib/binding/Release/node-v48-darwin-x64/fse.node" is installed via remote

> node-sass@3.10.1 postinstall /Users/Seth/code/oss/angular-cli/dist/angular-cli/node_modules/node-sass
> node scripts/build.js

"/Users/Seth/code/oss/angular-cli/dist/angular-cli/node_modules/node-sass/vendor/darwin-x64-48/binding.node" exists.
 testing binary.
Binary is fine; exiting.


    at _exec (/Users/Seth/code/oss/angular-cli/tests/e2e/utils/process.ts:47:15)
    at Object.npm (/Users/Seth/code/oss/angular-cli/tests/e2e/utils/process.ts:124:12)
    at /Users/Seth/code/oss/angular-cli/tests/e2e/setup/100-npm-link.ts:30:50

SethDavenport · 2016-10-16T22:39:16Z

I'm on node 6.8.1 and Mac OS X El Capitan (10.11.6)

dimfried · 2016-10-17T08:26:11Z

I have the same issue on my machine. I created the PR last week but as long as tests are failing, I cannot send the PR. I have already wrote in Gitter, but didn't get a answer so far...

KornelDylski · 2016-10-17T16:43:25Z

Hi
I had the same issue, and couldn't wait for angular-cli solution, and I dont want to fork it
so i did just (for scss in my case):
npm install --save-dev postcss postcss-cli postcss-scss autoprefixer
to install postcss-cli

and then Im running script on build, from package.json
"scripts": { ... "prefixcss": "postcss -s postcss-scss -u autoprefixer --autoprefixer.browsers \"last 2 versions\" -r src/**/*.scss" ... }

which is the same as
./node_modules/.bin/postcss -s postcss-scss -u autoprefixer --autoprefixer.browsers "last 2 versions" -r src/app/**/*.scss
caused from command line

this command modifies existing dev files but its not such a big problem,
because last 2 versions of browsers almost do not need vendors

PS without scss command look like:
./node_modules/.bin/postcss -u autoprefixer --autoprefixer.browsers "last 2 versions" -r src/app/**/*.css

SethDavenport · 2016-10-17T21:27:34Z

Hmmm - I'd like to get this in properly - how is CI passing for any PR if the e2e tests are broken? Are they working in Linux perhaps? I can try and spin up a VM.

filipesilva · 2016-10-17T23:53:27Z

@SethDavenport @dimfried I've never gotten that error myself, but I'm on Windows. Seems like npm link failed due to node-gyp trying to compile stuff? I don't use node-gyp myself either... maybe there's a way to deactivate it, or maybe just uninstalling if it's globally installed via npm.

Either way, if you can't run the tests locally you can still submit the PR and the CI will always run the test remotely. It sucks to wait for CI tests, but if you're fairly certain of what you're trying to do it's not that bad.

You can test locally on a project generated with ng new project-name --link-cli as well.

[Autoprefixer](https://github.com/postcss/autoprefixer) is a tool that uses data from caniuse.com to add vendor prefixes for styles that need them. It saves developers from having to manually prefix things, and is widely used these days. Since it's available as a postcss plugin, it makes sense to inlcude it in the angular-cli build step by default. This implementation uses the default browser targeting settings: last two versions, or whatever's in the user's project's [browserslist](https://github.com/ai/browserslist). Closes angular#1512.

[Autoprefixer](https://github.com/postcss/autoprefixer) is a tool that uses data from caniuse.com to add vendor prefixes for styles that need them. It saves developers from having to manually prefix things, and is widely used these days. Since it's available as a postcss plugin, it makes sense to inlcude it in the angular-cli build step by default. This implementation uses the default browser targeting settings: last two versions, or whatever's in the user's project's [browserslist](https://github.com/ai/browserslist). Closes angular#1512. Close angular#2852

kotmatpockuh · 2017-05-18T14:20:48Z

@KornelDylski can you provide me a hint, how can i use this also?
https://github.com/Pavliko/postcss-svg

picosam · 2017-06-08T06:12:16Z

I'm sorry to comment on this, but I'm simply confused with the docs: does autoprefixer automatically works with a standard angular-cli setup or are there configuration steps (not ones to target specific browsers, but just standard) that one should follow?

stefannegele · 2017-06-08T08:44:18Z

Hi @picosam, autoprefixer should work automatically. Check out https://github.com/angular/angular-cli/wiki/stories-autoprefixer for further configuration options.

HassanAlthaf · 2017-06-09T12:29:14Z

@LasTanzen It doesn't seem to work. I'm using SCSS as well, btw.

stefannegele · 2017-06-09T12:39:09Z

Hi @HassanAlthaf autoprefixer works fine for me. If you have issues, you should probably open a bug report with further description.

HassanAlthaf · 2017-06-09T12:40:38Z

@LasTanzen I do not see any output from Autoprefixer when I build. Is it how I verify it works?

stefannegele · 2017-06-09T12:43:44Z

@HassanAlthaf There is no output from autoprefixer. Just try something that would be prefixed like display: flex or trust the tests ;)

HassanAlthaf · 2017-06-09T12:45:21Z

You were right! Thanks!

agalazis · 2018-06-15T05:08:27Z

when using nrwl/nx just declare it in the monorepo package.json!!!! :) @LasTanzen your link is golden
If anybody faces any issues just read ahead and you will find a way to configure it:
https://github.com/angular/angular-cli/wiki/stories-autoprefixer

awesomepeng · 2018-12-26T06:15:09Z

当使用nrwl / nx时，只需在monorepo package.json中声明它！:) @LasTanzen 您的链接是黄金
如果任何人面临任何问题只是提前阅读，你会找到一种方法来配置它：https：
//github.com/angular/angular-cli/wiki/stories-autoprefixer

it not effective

angular-automatic-lock-bot · 2019-09-09T02:41:38Z

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}

filipesilva added feature Issue that requests a new feature P5 The team acknowledges the request but does not plan to address it, it remains open for discussion feature: webpack labels Aug 10, 2016

euangoddard mentioned this issue Aug 18, 2016

How to add the autoprefixer to 1.0.0-beta.11-webpack.2 #1725

Closed

filipesilva mentioned this issue Sep 21, 2016

css autoprefixer #2130

Closed

filipesilva mentioned this issue Oct 9, 2016

Is it possible to integrate postcss? #2420

Closed

SethDavenport mentioned this issue Oct 24, 2016

feat(autoprefixer) Hook up autoprefixer for less, scss, and css. #2852

Closed

filipesilva closed this as completed in 2133abc Oct 28, 2016

Meligy mentioned this issue Nov 13, 2016

autoprefixer not working, although it's required in webpack.common #3123

Closed

mcstepp mentioned this issue Apr 27, 2017

[Question] IE11 - status, roadmap? Teradata/covalent#524

Closed

HassanAlthaf mentioned this issue Jun 9, 2017

angular-cli: use postcss w/ scss #6624

Closed

angular-automatic-lock-bot bot locked and limited conversation to collaborators Sep 9, 2019

Autoprefixer support #1512

Autoprefixer support #1512

Comments

AlexDede commented Aug 1, 2016

wulfsberg commented Aug 4, 2016

herkulano commented Aug 28, 2016

Kunepro commented Aug 29, 2016

caroso1222 commented Sep 3, 2016

gperdomor commented Sep 7, 2016

mchambaud commented Sep 8, 2016

SethDavenport commented Sep 14, 2016

Tre665 commented Sep 16, 2016

euangoddard commented Sep 16, 2016

ptrhvns commented Sep 22, 2016 • edited

mbeckenbach commented Sep 28, 2016 • edited

Seskara commented Sep 28, 2016

caroso1222 commented Sep 28, 2016

Kunepro commented Sep 28, 2016

mbeckenbach commented Sep 29, 2016

wulfsberg commented Sep 29, 2016 • edited

mbeckenbach commented Sep 29, 2016

Kunepro commented Sep 30, 2016

scottwio commented Sep 30, 2016 • edited

filipesilva commented Oct 8, 2016 • edited

SethDavenport commented Oct 9, 2016

SethDavenport commented Oct 9, 2016

dimfried commented Oct 10, 2016

filipesilva commented Oct 10, 2016

SethDavenport commented Oct 16, 2016 • edited

SethDavenport commented Oct 16, 2016

dimfried commented Oct 17, 2016

KornelDylski commented Oct 17, 2016

SethDavenport commented Oct 17, 2016

filipesilva commented Oct 17, 2016

kotmatpockuh commented May 18, 2017

picosam commented Jun 8, 2017

stefannegele commented Jun 8, 2017

HassanAlthaf commented Jun 9, 2017

stefannegele commented Jun 9, 2017

HassanAlthaf commented Jun 9, 2017

stefannegele commented Jun 9, 2017

HassanAlthaf commented Jun 9, 2017

agalazis commented Jun 15, 2018

awesomepeng commented Dec 26, 2018

angular-automatic-lock-bot bot commented Sep 9, 2019

ptrhvns commented Sep 22, 2016 •

edited

mbeckenbach commented Sep 28, 2016 •

edited

wulfsberg commented Sep 29, 2016 •

edited

scottwio commented Sep 30, 2016 •

edited

filipesilva commented Oct 8, 2016 •

edited

SethDavenport commented Oct 16, 2016 •

edited