From 87871f9f7e3c7ad1d2b2a1e4d9135c495090e88a Mon Sep 17 00:00:00 2001 From: Liam Potter Date: Sat, 11 Oct 2025 17:42:50 +0100 Subject: [PATCH 1/8] deprecate broccoli rfc --- text/1133-deprecate-broccoli-css-pipeline.md | 111 +++++++++++++++++++ 1 file changed, 111 insertions(+) create mode 100644 text/1133-deprecate-broccoli-css-pipeline.md diff --git a/text/1133-deprecate-broccoli-css-pipeline.md b/text/1133-deprecate-broccoli-css-pipeline.md new file mode 100644 index 0000000000..a394abe5ee --- /dev/null +++ b/text/1133-deprecate-broccoli-css-pipeline.md @@ -0,0 +1,111 @@ +--- +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: # Fill this in with the URL for the Proposal RFC PR +project-link: +suite: +--- + + + + + +# 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. + +## Motivation + +> Why are we doing this? What use cases does it support? What is the expected +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. + +## Detailed design + +> This is the bulk of the RFC. + +> Explain the design in enough detail for somebody +familiar with the framework to understand, and for somebody familiar with the +implementation to implement. This should get into specifics and corner-cases, +and include examples of how the feature is used. Any new terminology should be +defined here. + +> Please keep in mind any implications within the Ember ecosystem, such as: +> - Lint rules (ember-template-lint, eslint-plugin-ember) that should be added, modified or removed +> - Features that are replaced or made obsolete by this feature and should eventually be deprecated +> - Ember Inspector and debuggability +> - Server-side Rendering +> - Ember Engines +> - The Addon Ecosystem +> - IDE Support +> - Blueprints that should be added or modified + +Replace the CSS import in our app blueprint to the file on disk. + +```html + + + + + +``` + +## How we teach this + +> What names and terminology work best for these concepts and why? How is this +idea best presented? As a continuation of existing Ember patterns, or as a +wholly new one? + +> Would the acceptance of this proposal mean the Ember guides must be +re-organized or altered? Does it change how Ember is taught to new users +at any level? + +> How should this feature be introduced and taught to existing Ember +users? + +> Keep in mind the variety of learning materials: API docs, guides, blog posts, tutorials, etc. + +As part of a deprecation guide explain how to keep using the broccoli pipeline whilst they migrate (using `/@embroider/virtual/app.css`) + +## Drawbacks + +> Why should we *not* do this? Please consider the impact on teaching Ember, +on the integration of this feature with other existing and planned features, +on the impact of the API churn on existing apps, etc. + +> There are tradeoffs to choosing any path, please attempt to identify them here. + +None that I can think of. + +## Alternatives + +> What other designs have been considered? What is the impact of not doing this? + +> This section could also include prior art, that is, how other frameworks in the same domain have solved this problem. + +Add a guide to the docs on how to opt in to vite's CSS pipeline. + +## Unresolved questions + +> Optional, but suggested for first drafts. What parts of the design are still +TBD? From 4ce0d9140bc4d2518e9729d38851af080716bb45 Mon Sep 17 00:00:00 2001 From: Liam Potter Date: Sat, 11 Oct 2025 17:47:17 +0100 Subject: [PATCH 2/8] remove guide comments --- text/1133-deprecate-broccoli-css-pipeline.md | 47 -------------------- 1 file changed, 47 deletions(-) diff --git a/text/1133-deprecate-broccoli-css-pipeline.md b/text/1133-deprecate-broccoli-css-pipeline.md index a394abe5ee..c159de0565 100644 --- a/text/1133-deprecate-broccoli-css-pipeline.md +++ b/text/1133-deprecate-broccoli-css-pipeline.md @@ -36,30 +36,11 @@ With vite becoming default we should use it's CSS pipeline as the default experi ## Motivation -> Why are we doing this? What use cases does it support? What is the expected 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. ## Detailed design -> This is the bulk of the RFC. - -> Explain the design in enough detail for somebody -familiar with the framework to understand, and for somebody familiar with the -implementation to implement. This should get into specifics and corner-cases, -and include examples of how the feature is used. Any new terminology should be -defined here. - -> Please keep in mind any implications within the Ember ecosystem, such as: -> - Lint rules (ember-template-lint, eslint-plugin-ember) that should be added, modified or removed -> - Features that are replaced or made obsolete by this feature and should eventually be deprecated -> - Ember Inspector and debuggability -> - Server-side Rendering -> - Ember Engines -> - The Addon Ecosystem -> - IDE Support -> - Blueprints that should be added or modified - Replace the CSS import in our app blueprint to the file on disk. ```html @@ -72,40 +53,12 @@ Replace the CSS import in our app blueprint to the file on disk. ## How we teach this -> What names and terminology work best for these concepts and why? How is this -idea best presented? As a continuation of existing Ember patterns, or as a -wholly new one? - -> Would the acceptance of this proposal mean the Ember guides must be -re-organized or altered? Does it change how Ember is taught to new users -at any level? - -> How should this feature be introduced and taught to existing Ember -users? - -> Keep in mind the variety of learning materials: API docs, guides, blog posts, tutorials, etc. - As part of a deprecation guide explain how to keep using the broccoli pipeline whilst they migrate (using `/@embroider/virtual/app.css`) ## Drawbacks -> Why should we *not* do this? Please consider the impact on teaching Ember, -on the integration of this feature with other existing and planned features, -on the impact of the API churn on existing apps, etc. - -> There are tradeoffs to choosing any path, please attempt to identify them here. - None that I can think of. ## Alternatives -> What other designs have been considered? What is the impact of not doing this? - -> This section could also include prior art, that is, how other frameworks in the same domain have solved this problem. - Add a guide to the docs on how to opt in to vite's CSS pipeline. - -## Unresolved questions - -> Optional, but suggested for first drafts. What parts of the design are still -TBD? From 713d55eaf537608b84356c00913b011725235204 Mon Sep 17 00:00:00 2001 From: Liam Potter Date: Sat, 11 Oct 2025 17:49:04 +0100 Subject: [PATCH 3/8] add pr link --- text/1133-deprecate-broccoli-css-pipeline.md | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/text/1133-deprecate-broccoli-css-pipeline.md b/text/1133-deprecate-broccoli-css-pipeline.md index c159de0565..2519617319 100644 --- a/text/1133-deprecate-broccoli-css-pipeline.md +++ b/text/1133-deprecate-broccoli-css-pipeline.md @@ -7,7 +7,7 @@ teams: # delete teams that aren't relevant - cli - framework prs: - accepted: # Fill this in with the URL for the Proposal RFC PR + accepted: https://github.com/emberjs/rfcs/pull/1148 project-link: suite: --- @@ -62,3 +62,4 @@ None that I can think of. ## Alternatives Add a guide to the docs on how to opt in to vite's CSS pipeline. + From 4b0b984b7133b591b5bc5708d61577d9c33c3269 Mon Sep 17 00:00:00 2001 From: Liam Potter Date: Sat, 11 Oct 2025 17:50:12 +0100 Subject: [PATCH 4/8] update rfc number --- ...li-css-pipeline.md => 1148-deprecate-broccoli-css-pipeline.md} | 0 1 file changed, 0 insertions(+), 0 deletions(-) rename text/{1133-deprecate-broccoli-css-pipeline.md => 1148-deprecate-broccoli-css-pipeline.md} (100%) diff --git a/text/1133-deprecate-broccoli-css-pipeline.md b/text/1148-deprecate-broccoli-css-pipeline.md similarity index 100% rename from text/1133-deprecate-broccoli-css-pipeline.md rename to text/1148-deprecate-broccoli-css-pipeline.md From d4de14cc64b4073631c3e289d1c206b28854acc6 Mon Sep 17 00:00:00 2001 From: Liam Potter Date: Sat, 11 Oct 2025 17:55:52 +0100 Subject: [PATCH 5/8] typo --- text/1148-deprecate-broccoli-css-pipeline.md | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/text/1148-deprecate-broccoli-css-pipeline.md b/text/1148-deprecate-broccoli-css-pipeline.md index 2519617319..937b8322db 100644 --- a/text/1148-deprecate-broccoli-css-pipeline.md +++ b/text/1148-deprecate-broccoli-css-pipeline.md @@ -37,7 +37,7 @@ With vite becoming default we should use it's CSS pipeline as the default experi ## 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. +We also wont have to keep explaining to people how to opt in to vite's CSS pipeline. ## Detailed design @@ -63,3 +63,4 @@ None that I can think of. Add a guide to the docs on how to opt in to vite's CSS pipeline. + From 653a026cac4ea7b81e529c48cdff63fdc43902b4 Mon Sep 17 00:00:00 2001 From: Liam Potter Date: Sun, 12 Oct 2025 18:36:29 +0100 Subject: [PATCH 6/8] Updated wording and use the deprecation template --- text/1148-deprecate-broccoli-css-pipeline.md | 27 +++++++++++++++++--- 1 file changed, 23 insertions(+), 4 deletions(-) diff --git a/text/1148-deprecate-broccoli-css-pipeline.md b/text/1148-deprecate-broccoli-css-pipeline.md index 937b8322db..c5e295a480 100644 --- a/text/1148-deprecate-broccoli-css-pipeline.md +++ b/text/1148-deprecate-broccoli-css-pipeline.md @@ -32,16 +32,16 @@ suite: Leave as is ## 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. +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. -## Detailed design +## Transition Path -Replace the CSS import in our app blueprint to the file on disk. +This can be implemented initialy bu 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 @@ -51,9 +51,27 @@ Replace the CSS import in our app blueprint to the file on disk. ``` +We can output a warning in the CLI if the virtual file is used. + +We would want to eventually remove the virtual file from our vite compat plugins. + +The people affected by this will be people using V1 addons that alter the css pipeline to run tools like `ember-cli-sass` and `ember-css-modules`. If you are currently using these addons you can update your `index.html` files to point at `/@embroider/virtual/app.css` instead of `/app/styles/app.css`. + +```html + + + + + +``` + +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 + ## How we teach this -As part of a deprecation guide explain how to keep using the broccoli pipeline whilst they migrate (using `/@embroider/virtual/app.css`) +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 @@ -64,3 +82,4 @@ None that I can think of. Add a guide to the docs on how to opt in to vite's CSS pipeline. + From 2d49d65eae611f505c5fc3cf298146dc5d3c2d0f Mon Sep 17 00:00:00 2001 From: Liam Potter Date: Sun, 12 Oct 2025 18:40:07 +0100 Subject: [PATCH 7/8] wording changes --- text/1148-deprecate-broccoli-css-pipeline.md | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/text/1148-deprecate-broccoli-css-pipeline.md b/text/1148-deprecate-broccoli-css-pipeline.md index c5e295a480..667e45bc62 100644 --- a/text/1148-deprecate-broccoli-css-pipeline.md +++ b/text/1148-deprecate-broccoli-css-pipeline.md @@ -41,7 +41,7 @@ We also wont have to keep explaining to people how to opt in to vite's CSS pipel ## Transition Path -This can be implemented initialy bu 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. +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 @@ -51,11 +51,13 @@ This can be implemented initialy bu simply replacing the CSS link tags in our ap ``` -We can output a warning in the CLI if the virtual file is used. +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. -The people affected by this will be people using V1 addons that alter the css pipeline to run tools like `ember-cli-sass` and `ember-css-modules`. If you are currently using these addons you can update your `index.html` files to point at `/@embroider/virtual/app.css` instead of `/app/styles/app.css`. +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 @@ -83,3 +85,4 @@ Add a guide to the docs on how to opt in to vite's CSS pipeline. + From 533d567347644097579ae4c9d9cf721985d3122a Mon Sep 17 00:00:00 2001 From: Liam Potter Date: Sun, 12 Oct 2025 18:49:06 +0100 Subject: [PATCH 8/8] Add link for css examples --- text/1148-deprecate-broccoli-css-pipeline.md | 3 +++ 1 file changed, 3 insertions(+) diff --git a/text/1148-deprecate-broccoli-css-pipeline.md b/text/1148-deprecate-broccoli-css-pipeline.md index 667e45bc62..23ad4c332f 100644 --- a/text/1148-deprecate-broccoli-css-pipeline.md +++ b/text/1148-deprecate-broccoli-css-pipeline.md @@ -69,6 +69,8 @@ If you are using addons like `ember-cli-sass` and `ember-css-modules` you can up 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/ + ## How we teach this The guide docs only assume working with plain CSS, this content would be unaffected by this change. @@ -86,3 +88,4 @@ Add a guide to the docs on how to opt in to vite's CSS pipeline. +