-
Notifications
You must be signed in to change notification settings - Fork 12k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Autoprefixer support #1512
Comments
...and PostCSS in general. CssNext is awfully tempting, given that we're already knee-deep in transpilation and forward-compatibility here :-) |
|
I would love this too. |
Definitely waiting for this |
I need this too |
👍 |
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... |
Also waiting for this. Last step before we finally switching to the CLI. |
Could this be achieved by altering |
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! |
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 |
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 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. |
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. |
@caroso1222 check @mbeckenbach link (2 post above yours). |
@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. |
@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). |
@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. :-) |
Somebody has this: https://medium.com/@Ai_boy/configure-angular-2-cli-webpack-beta-14-5a7052ce6156#.3m4w3c6j5 working with beta.16? |
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. |
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. |
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 |
If that seems like a reasonable approach I'll try and find time to get a pr together |
@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. |
@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. |
@filipesilva Having some issues running
|
I'm on node 6.8.1 and Mac OS X El Capitan (10.11.6) |
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... |
Hi and then Im running script on build, from package.json which is the same as this command modifies existing dev files but its not such a big problem, PS without scss command look like: |
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. |
@SethDavenport @dimfried I've never gotten that error myself, but I'm on Windows. Seems like 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 |
[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.
[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.
[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
@KornelDylski can you provide me a hint, how can i use this also? |
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? |
Hi @picosam, autoprefixer should work automatically. Check out https://github.com/angular/angular-cli/wiki/stories-autoprefixer for further configuration options. |
@LasTanzen It doesn't seem to work. I'm using SCSS as well, btw. |
Hi @HassanAlthaf autoprefixer works fine for me. If you have issues, you should probably open a bug report with further description. |
@LasTanzen I do not see any output from Autoprefixer when I build. Is it how I verify it works? |
@HassanAlthaf There is no output from autoprefixer. Just try something that would be prefixed like |
You were right! Thanks! |
when using nrwl/nx just declare it in the monorepo package.json!!!! :) @LasTanzen your link is golden |
it not effective |
This issue has been automatically locked due to inactivity. Read more about our automatic conversation locking policy. This action has been performed automatically by a bot. |
Please, can you add support to process CSS files with autoprefixer in webpack configs?
The text was updated successfully, but these errors were encountered: