Angular-cli: Autoprefixer support

[AlexDede]

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

[wulfsberg]

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

[herkulano]

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

https://github.com/angular/angular-cli/issues/1656

[Kunepro]

I would love this too.

[caroso1222]

Definitely waiting for this

[gperdomor]

I need this too

[mchambaud]

👍

[SethDavenport]

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]

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]

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.

[Tekhne]

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]

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]

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]

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]

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

[mbeckenbach]

@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]

@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]

@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]

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]

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]

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]

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]

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

[dimfried]

@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]

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

[dimfried]

@SethDavenport do you want to tackle this one ? If you don't have time I could add the prefixer, if you want of course. my company's shipping the first angular 2 app in the next few weeks and we're all happy if we have some basic support for the older browsers.

[SethDavenport]

Hi @dimfried - looking at my calendar I probably won't get to it until the weekend. If you feel you can get to it first, go right ahead.

[mbeckenbach]

@dimfried If you have vs code, I use this extension as long as cli has no built in support for it: https://marketplace.visualstudio.com/items?itemName=mrmlnc.vscode-autoprefixer

[SethDavenport]

Regarding browser versions: autoprefixer uses browserslist, so in theory not specifying anything should give you a default of > 1%, last 2 versions, Firefox ESR.

However if you project has a browserslist file in the top level of the source tree, or if you have a BROWSERSLIST environment variable, autoprefixer should pick it up:

See:

• https://github.com/postcss/autoprefixer#options
• https://github.com/ai/browserslist#queries

[SethDavenport]

@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:

> [email protected] 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!!

> [email protected] 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

> [email protected] 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

> [email protected] 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

> [email protected] 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:

> [email protected] 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!!

> [email protected] 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

> [email protected] 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

> [email protected] 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

> [email protected] 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]

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

[dimfried]

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]

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]

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]

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

[kotmatpockuh]

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

[picosam]

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]

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

[HassanAlthaf]

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

[stefannegele]

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

[HassanAlthaf]

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

[stefannegele]

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

[HassanAlthaf]

You were right! Thanks!

[agalazis]

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]

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

it not effective

[angular-automatic-lock-bot[bot]]

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._}