Global CSS file has grown 5000 lines.

[driskull]

Description

1. Can we reduce the file size of the calcite.css style sheet? The CSS file grew from ~300 lines to ~5300 lines. So basically 5000 new lines.

   1.3.0: https://cdn.jsdelivr.net/npm/@esri/[email protected]/dist/calcite/calcite.css
   1.4.0: https://cdn.jsdelivr.net/npm/@esri/[email protected]/dist/calcite/calcite.css

2. Can we move the animation classes into a new file for utility classes that can be used by teams if necessary. We can document this new file and its utility classes. The animation keyframes should also be renamed to be BEM so that they do not have any conflicts.

@keyframes in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

3. Remove the overflow-hidden class only being used by modal. This could change to an inline style where Modal can just set the overflow to hidden on the document instead of using a class.

.overflow-hidden {
  overflow: hidden;
}

4. Remove the following, it should be done in a components CSS not in the global CSS.

host([hidden]) {
  display: none;
}

Proposed Advantages

Reduced file size, no conflicting code, utility classes are separated and documented properly.

Which Component

All

• Refactor utility classes (Matt, Adam)
• Refactor tokens (Ali, Franco)

Relevant Info

No response

Calcite package

• @esri/calcite-components
• @esri/calcite-components-react

[driskull]

cc @jcfranco @alisonailea

[jcfranco]

We could treat the order to also reflect priority/impact too.

1. It looks like the wiring up of tokens caused the increase. @alisonailea Are there any strategies we could apply to strike a balance between token availability/flexibility and global CSS bloat (possibly moving component-specific tokens to the component's styles)? This will increase even more as we add more tokens and components.
2. For the time being, I'd like to focus on generalizing as much animations as possible and moving them to _animations.scss.
3. Your suggestion sounds perfect.
4. Is your concern here the style impacting non-Calcite components? I think this one might still be good to keep in the global styles.

[driskull]

For the time being, I'd like to focus on generalizing as much animations as possible and moving them to _animations.scss.

These animations are already in _animations.scss which gets pulled into the calcite.css. The problem is that the names of them are unspecific. Such as keyframes named "in" and "in-down". We should BEM these if we plan to keep them as utility classes.

Is your concern here the style impacting non-Calcite components? I think this one might still be good to keep in the global styles.

Yes, my concern is impacting other components external to calcite and that this should really be applied within the component and not outside. It also doesn't work correctly in all cases and we had to add this style inside the component anyway.

[driskull]

Maybe we can setup a meeting to discuss the animations because they are really the only utility classes that would remain in this file. Only one component is using one of them. The others are just available for use without any documentation. I would think these would be in a separate external file that is documented somewhere.

[jcfranco]

These animations are already in _animations.scss...

Gotcha and 100% agreed on the animation util renaming. I forgot to add that earlier.

It also doesn't work correctly in all cases and we had to add this style inside the component anyway.

You reminded me that :host doesn't work on a global context, so we should be able to remove that safely. We could also look into enabling a rule that would warn if anything in includes.scss, or referenced by it, generates CSS by default.

Maybe we can setup a meeting to discuss the animations...

👍

[driskull]

Ok. the remainder of items to do are:

• Figure out what to do with the animation classes. Separate stylesheet for these? BEM name them? Do away with them?
• Reduce file size by moving component specific vars into the component CSS only.

[alisonailea]

token transformer and token themes can be updated to significantly reduce the CSS variable bloat

[macandcheese]

• Figure out what to do with the animation classes. Separate stylesheet for these? BEM name them? Do away with them?

One discussed idea was a calcite-css-util package in the monorepo to hold animation classes, css grid, etc.

[alisonailea]

Architecture of proposed design token refactor to reduce global calicte.css file https://www.figma.com/file/FmEJJxV2Ty3506mJ90Tsdk/Breakout-Component-Design-Tokens?type=whiteboard&node-id=0%3A1&t=M977O09URTMZvQsk-1

[github-actions]

Installed and assigned for verification.

[alisonailea]

Previous size of the built calcite.css 346kb
New and improved size of calcite.css 24kb

[geospatialem]

Verified with the rc cdn, css sizing mentioned in Ali's comment above.