fix: global css file reduce 5000 lines #7980

alisonailea · 2023-10-11T21:17:25Z

Related Issue: #7325

Summary

calcite-design-tokens currently combines all modes and components into three files (headless, light, dark) which are then all included in the global.scss making the final global calcite.css file bloated.
There are some minor size improvements that can be made by utilizing design token references and removing duplications but the major issue is all of the component specific design tokens which do not need to be included in the global css file.

To remove this bloat the solution is...

update the token-transformer to output better SCSS files which utilize @use and @forward to link related styles
remove component tokens from global output
stop relying on class based mode setting and get/set the mode via a local storage key which may be accessed and set as an attribute per component
pull component tokens directly into the individual component styles

also fixes a few issues with token organization

also exports additional mode file for the Calcite them

consolidate where token names are adjusted and simplify SCSS formatter

required to reduce file size of calcite.css

alisonailea · 2023-10-12T17:03:51Z

packages/calcite-design-tokens/src/$metadata.json

@@ -10,6 +10,8 @@
    "component/fab",


This whole file is outdated and set to be deleted.

alisonailea · 2023-10-12T17:04:18Z

packages/calcite-design-tokens/src/$themes.json

@@ -3,297 +3,28 @@
    "id": "59a65f6d4a3657738c9d46d61315ae0b6fc6e9fd",


This whole file is outdated and set to be deleted.

packages/calcite-design-tokens/support/token-transformer/format/update/indexFile.ts

+  references: /(@\w+ "[\w\d.\/]+";)/g,
+  media: /(@media\s\([\w-]+:\s\w+\)\s*\{(\s*@include [\w.-]+\(\);)+\s*})/g,
+  root: /(:\w+(\(\[[\w-]+="\w+"\]\)){0,1} *\{ *@include [\w.-]+\(\); *\})/g,
+  classes: /(\.[\w\d-]+ \{(\s*@include [\w.-]+\(\); *)+\n*\})/g,


alisonailea · 2023-10-12T17:08:17Z

Some notes on the changes to tokens. You will notice a lot of the file changes are simply converting token references from the "$[token.reference.path]" to "{[token.reference.path]}". The use of the "$" to delineate token references was set in Token Studio by designers because it made their workflow easier within Figma. However, designers are no longer using Token Studio and the default file parser looks for "{}" token references. So, by converting to "{}" we remove the need for a custom parser, improving maintenance and performance.

driskull · 2023-10-19T20:11:47Z

packages/calcite-components/src/components/accordion-item/accordion-item.tsx

+  componentWillLoad(): void {
+    // TODO: check if this attribute is manually set by the user before getting the theme set in local storage.
+    // TODO: make this a part of the generic component setup.
+    this.calciteMode = getMode();


This would likely need to happen on connectedCallback() so a component updates its mode if its moved position in the DOM.

driskull · 2023-10-19T20:23:00Z

stop relying on class based mode setting and get/set the mode via a local storage key which may be accessed and set as an attribute per component

@alisonailea can you elaborate on why we would need to do this one?

I thought we would just be moving the component specific variables to the component files which would get placed into the CSS of the component instead of the global.css file therefore reducing the global.css file for users who are not using every component.

I have concerns with switching from using a CSS class approach to using an attribute. We had originally had a theme attribute but moved away from that because using CSS is a better practice than using an attribute for purely stylistic options. Using an attribute requires implementing our own cascading logic which is something that CSS just already does.

alisonailea · 2023-10-19T22:31:50Z

@driskull

@alisonailea can you elaborate on why we would need to do this one?

We will not be fully taking the approach listed in this draft as we don't currently want to rely on localstore. @jcfranco and I are working on a mutationObserver pattern solution similar to localization.

I thought we would just be moving the component specific variables to the component files

We still need a way to scope applying the mode specific tokens to the component in the CSS.

':host([calcite-mode="light"]): { ...design tokens as CSS custom props go here } '

I have concerns with switching from using a CSS class approach to using an attribute.

Without Container Style Queries (currently only available under a feature flag in chrome), using an attribute to specify the CSS is the only solution unless you want everything in global CSS.

driskull · 2023-10-19T22:42:02Z

We still need a way to scope applying the mode specific tokens to the component in the CSS.

Can you share some example mode specific component tokens? I'd like to take a look at them. Maybe we could just keep these in global if there aren't too many.

github-actions · 2023-10-27T01:43:39Z

This PR has been automatically marked as stale because it has not had recent activity. Please close your PR if it is no longer relevant. Thank you for your contributions.

jcfranco · 2023-12-05T23:03:37Z

This was addressed by #8215. Closing!

alisonailea added 7 commits October 11, 2023 14:42

fix(design-tokens): add tokens and normalize refs

3e7bcb0

also fixes a few issues with token organization

feat: add tokens to theme files

45191ae

also exports additional mode file for the Calcite them

fix(tabs): normalize token references

546f23e

fix(token-transformer): handle compound tokens

86806de

consolidate where token names are adjusted and simplify SCSS formatter

feat: refactor tokentransformer to reduce file size

c9778a7

feat: refactor tokens to reduce file size

aa33ba3

feat: add mode publisher to manage component modes

2772014

required to reduce file size of calcite.css

alisonailea force-pushed the astump/7325-global-css-file-reduce-5000-lines branch from 1c0bef0 to 2772014 Compare October 12, 2023 17:02

github-actions bot added the bug Bug reports for broken functionality. Issues should include a reproduction of the bug. label Oct 12, 2023

github-actions bot assigned alisonailea Oct 12, 2023

alisonailea commented Oct 12, 2023

View reviewed changes

github-advanced-security bot found potential problems Oct 12, 2023

View reviewed changes

driskull reviewed Oct 19, 2023

View reviewed changes

github-actions bot added the Stale Issues or pull requests that have not had recent activity. label Oct 27, 2023

jcfranco closed this Dec 5, 2023

jcfranco deleted the astump/7325-global-css-file-reduce-5000-lines branch December 5, 2023 23:03

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix: global css file reduce 5000 lines #7980

fix: global css file reduce 5000 lines #7980

alisonailea commented Oct 11, 2023

alisonailea Oct 12, 2023

alisonailea Oct 12, 2023

alisonailea commented Oct 12, 2023

driskull Oct 19, 2023

driskull commented Oct 19, 2023

alisonailea commented Oct 19, 2023 •

edited

Loading

driskull commented Oct 19, 2023

github-actions bot commented Oct 27, 2023

jcfranco commented Dec 5, 2023

		@@ -3,297 +3,28 @@
		"id": "59a65f6d4a3657738c9d46d61315ae0b6fc6e9fd",

fix: global css file reduce 5000 lines #7980

fix: global css file reduce 5000 lines #7980

Conversation

alisonailea commented Oct 11, 2023

Summary

alisonailea Oct 12, 2023

Choose a reason for hiding this comment

alisonailea Oct 12, 2023

Choose a reason for hiding this comment

alisonailea commented Oct 12, 2023

driskull Oct 19, 2023

Choose a reason for hiding this comment

driskull commented Oct 19, 2023

alisonailea commented Oct 19, 2023 • edited Loading

driskull commented Oct 19, 2023

github-actions bot commented Oct 27, 2023

jcfranco commented Dec 5, 2023

alisonailea commented Oct 19, 2023 •

edited

Loading