-
-
Notifications
You must be signed in to change notification settings - Fork 408
Deprecate broccoli CSS pipeline for vite app css #1148
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
base: main
Are you sure you want to change the base?
Changes from all commits
87871f9
4ce0d91
713d55e
4b0b984
d4de14c
653a026
2d49d65
533d567
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,91 @@ | ||
| --- | ||
| stage: accepted | ||
| start-date: 2025-10-11T16:34:13.823Z | ||
| release-date: # In format YYYY-MM-DDT00:00:00.000Z | ||
| release-versions: | ||
| teams: # delete teams that aren't relevant | ||
| - cli | ||
| - framework | ||
| prs: | ||
| accepted: https://github.com/emberjs/rfcs/pull/1148 | ||
| project-link: | ||
| suite: | ||
| --- | ||
|
|
||
| <!--- | ||
| Directions for above: | ||
|
|
||
| stage: Leave as is | ||
| start-date: Fill in with today's date, 2032-12-01T00:00:00.000Z | ||
| release-date: Leave as is | ||
| release-versions: Leave as is | ||
| teams: Include only the [team(s)](README.md#relevant-teams) for which this RFC applies | ||
| prs: | ||
| accepted: Fill this in with the URL for the Proposal RFC PR | ||
| project-link: Leave as is | ||
| suite: Leave as is | ||
| --> | ||
|
|
||
| <!-- Replace "RFC title" with the title of your RFC --> | ||
|
|
||
| # Deprecate broccoli CSS pipeline | ||
|
|
||
| ## Summary | ||
|
|
||
| With vite becoming default we should use it's CSS pipeline as the default experience. We can advise in a deprecation guide that `/@embroider/virtual/app.css` exists if they still need to use it but new apps should be using the vite CSS pipeline by default. This would only affect Vite apps, classic build apps will still use the broccoli CSS pipeline, we would not be removing the functionality from ember-cli, just letting vite process application CSS files. | ||
|
|
||
| ## Motivation | ||
|
|
||
| No longer need to maintain ember specific CSS tooling like ember-cli-sass ember-css-modules etc. Vite comes with sane defaults to use postcss, sass, less, stylus etc out of the box. | ||
| We also wont have to keep explaining to people how to opt in to vite's CSS pipeline. | ||
|
|
||
| ## Transition Path | ||
|
|
||
| This can be implemented initially by simply replacing the CSS link tags in our app blueprint to load the file on disk. This would be done in the app index.html and the test index.html. | ||
|
|
||
| ```html | ||
| <!-- replace this --> | ||
| <link integrity="" rel="stylesheet" href="/@embroider/virtual/app.css"> | ||
|
|
||
| <!-- with this --> | ||
| <link integrity="" rel="stylesheet" href="/app/styles/app.css"> | ||
| ``` | ||
|
|
||
| We can output a deprecation warning in the CLI if the virtual file is used. | ||
|
|
||
| We would want to eventually remove the virtual file from our vite compat plugins. | ||
|
|
||
| Deprecation guide wording might be something like this: | ||
|
|
||
| If you are using addons like `ember-cli-sass` and `ember-css-modules` you can update your `index.html` files to point at `/@embroider/virtual/app.css` instead of `/app/styles/app.css` to give you time to migrate to the vite pipeline. | ||
|
|
||
| ```html | ||
| <!-- replace this --> | ||
| <link integrity="" rel="stylesheet" href="/app/styles/app.css"> | ||
|
|
||
| <!-- with this --> | ||
| <link integrity="" rel="stylesheet" href="/@embroider/virtual/app.css"> | ||
| ``` | ||
|
|
||
| We would encourage you to migrate to the vite pipeline by adopting the right tooling as covered by https://vite.dev/guide/features.html#css-pre-processors | ||
|
|
||
| You can see examples of different CSS tooling being used in this repository https://github.com/evoactivity/ember-vite-css-examples/ | ||
|
Contributor
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. |
||
|
|
||
| ## How we teach this | ||
|
|
||
| The guide docs only assume working with plain CSS, this content would be unaffected by this change. | ||
| There is nothing in the API docs that would need updating. | ||
| The change should be transparent for people using plain CSS. | ||
|
|
||
| ## Drawbacks | ||
|
|
||
| None that I can think of. | ||
|
Member
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. I can think potential drawbacks:
Contributor
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. There are so few addon css things tho. I haven't encountered any in years Each compan feature may have a different migration guide... So... Maybe?
Author
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
At the very least I think this one should be done sooner rather than later, this topic keeps coming up in the discord, especially when people are trying to use tailwind. It's the one thing I'm helping people with repeatedly.
Member
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. I'm just pointing out things that should be discussed in the 'Drawbacks' section |
||
|
|
||
| ## Alternatives | ||
|
|
||
| Add a guide to the docs on how to opt in to vite's CSS pipeline. | ||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||

Uh oh!
There was an error while loading. Please reload this page.