From ea010a802d51708cf5b97c9d92188762eb58a917 Mon Sep 17 00:00:00 2001 From: Dayo Olutayo Date: Tue, 9 Jul 2024 10:46:21 +0100 Subject: [PATCH 1/5] RFC to make scoped CSS the default in 'template-tags' Making scoped-CSS the default will improve the developer experience by not having to fight spill CSS that is affecting other components. --- text/xyz-add-glimmer-scoped-css-by-default.md | 117 ++++++++++++++++++ 1 file changed, 117 insertions(+) create mode 100644 text/xyz-add-glimmer-scoped-css-by-default.md diff --git a/text/xyz-add-glimmer-scoped-css-by-default.md b/text/xyz-add-glimmer-scoped-css-by-default.md new file mode 100644 index 0000000000..9e005d0b98 --- /dev/null +++ b/text/xyz-add-glimmer-scoped-css-by-default.md @@ -0,0 +1,117 @@ +--- +stage: accepted +start-date: # In format YYYY-MM-DDT00:00:00.000Z +release-date: # In format YYYY-MM-DDT00:00:00.000Z +release-versions: +teams: # delete teams that aren't relevant + - framework +prs: + accepted: # Fill this in with the URL for the Proposal RFC PR +project-link: +suite: +--- + + + +# Make Scoped CSS the default in 'template-tags' + +## Summary + +A component is defined as a unit of UI with its action and style. + +```gjs + +``` +Based on my observation while using `template-tags` to author +components, the style tag inside `template-tags` is global, which I think +should not be because it may affect other components. Also, libraries or +imported components might have used the same style name, so the issue will become nested +and, therefore won't be easy to trace. Even if one works around this using a +unique class wrapper for each component, the possibility of collision is still +present, and uniqueness is not guaranteed project-wide. + + +## Motivation + +To make `template-tags` fulfil all three things (UI, action, style) that +make an excellent component authoring tool. This will make the authoring of +components with `template-tags` much better and safer. + +Making scoped-CSS the default will improve the developer experience by not having +to fight spill CSS that is affecting other components. + + +## Detailed design + +There is an implementation already. [glimmer scoped-css](https://github.com/cardstack/glimmer-scoped-css) + +> 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 + +## 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. + +## 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. + +## 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. + +## Unresolved questions + +> Optional, but suggested for first drafts. What parts of the design are still +TBD? From fb1fa160c27cbc49114dac441623e1288afc1a1a Mon Sep 17 00:00:00 2001 From: Dayo Olutayo Date: Tue, 9 Jul 2024 11:32:58 +0100 Subject: [PATCH 2/5] Fixed the omission of 'start-date' and 'prs.accepted' requested information --- text/xyz-add-glimmer-scoped-css-by-default.md | 20 +++---------------- 1 file changed, 3 insertions(+), 17 deletions(-) diff --git a/text/xyz-add-glimmer-scoped-css-by-default.md b/text/xyz-add-glimmer-scoped-css-by-default.md index 9e005d0b98..95a0e1e39f 100644 --- a/text/xyz-add-glimmer-scoped-css-by-default.md +++ b/text/xyz-add-glimmer-scoped-css-by-default.md @@ -1,30 +1,16 @@ --- stage: accepted -start-date: # In format YYYY-MM-DDT00:00:00.000Z +start-date: 2024-07-09T00:00:00.000Z release-date: # In format YYYY-MM-DDT00:00:00.000Z release-versions: -teams: # delete teams that aren't relevant +teams: - framework prs: - accepted: # Fill this in with the URL for the Proposal RFC PR + accepted: https://github.com/bitxplora/emberjs-rfcs/blob/master/text/xyz-add-glimmer-scoped-css-by-default.md project-link: suite: --- - - # Make Scoped CSS the default in 'template-tags' ## Summary From 98491f3a9f3fcd9502e122902fb7fbf59d06ad8e Mon Sep 17 00:00:00 2001 From: Dayo Olutayo Date: Tue, 9 Jul 2024 12:00:38 +0100 Subject: [PATCH 3/5] Corrected the wrong url for 'prs.accepted' requested information --- text/xyz-add-glimmer-scoped-css-by-default.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/text/xyz-add-glimmer-scoped-css-by-default.md b/text/xyz-add-glimmer-scoped-css-by-default.md index 95a0e1e39f..8eb2ec914c 100644 --- a/text/xyz-add-glimmer-scoped-css-by-default.md +++ b/text/xyz-add-glimmer-scoped-css-by-default.md @@ -6,7 +6,7 @@ release-versions: teams: - framework prs: - accepted: https://github.com/bitxplora/emberjs-rfcs/blob/master/text/xyz-add-glimmer-scoped-css-by-default.md + accepted: https://github.com/emberjs/rfcs/pull/1037 project-link: suite: --- From 1057f3d1bf624b8d21a0fcd8031fd22b7a1eaa34 Mon Sep 17 00:00:00 2001 From: Dayo Olutayo Date: Tue, 9 Jul 2024 13:28:24 +0100 Subject: [PATCH 4/5] Change 'xyz' to 1037 in the rfc file name. Changed the placeholder, which was 'xyz', for rfc number in the rfc file's name to the actual rfc number which is 1037. --- ...ss-by-default.md => 1037-add-glimmer-scoped-css-by-default.md} | 0 1 file changed, 0 insertions(+), 0 deletions(-) rename text/{xyz-add-glimmer-scoped-css-by-default.md => 1037-add-glimmer-scoped-css-by-default.md} (100%) diff --git a/text/xyz-add-glimmer-scoped-css-by-default.md b/text/1037-add-glimmer-scoped-css-by-default.md similarity index 100% rename from text/xyz-add-glimmer-scoped-css-by-default.md rename to text/1037-add-glimmer-scoped-css-by-default.md From a93d1bf2e63db37633d5c50eab1070221975372e Mon Sep 17 00:00:00 2001 From: Dayo Olutayo Date: Tue, 9 Jul 2024 13:52:16 +0100 Subject: [PATCH 5/5] Clean up of the unrelated text --- .../1037-add-glimmer-scoped-css-by-default.md | 50 ------------------- 1 file changed, 50 deletions(-) diff --git a/text/1037-add-glimmer-scoped-css-by-default.md b/text/1037-add-glimmer-scoped-css-by-default.md index 8eb2ec914c..09a7778836 100644 --- a/text/1037-add-glimmer-scoped-css-by-default.md +++ b/text/1037-add-glimmer-scoped-css-by-default.md @@ -50,54 +50,4 @@ to fight spill CSS that is affecting other components. There is an implementation already. [glimmer scoped-css](https://github.com/cardstack/glimmer-scoped-css) -> 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 - -## 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. - -## 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. - -## 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. - -## Unresolved questions - -> Optional, but suggested for first drafts. What parts of the design are still -TBD?