Hashed CSS variables & dependency on SASS

[anthumchris]

Description

Cloudscape currently uses SASS .scss files to build and output CSS files that contain CSS variables. These CSS variables contain random hash strings appended to the end of the name. For example, SASS var $color-red outputs to CSS as--color-red-f921aa).

CSS variables are currently widely supported by all major browser vendors (excluding IE11, which has reached EOL and is not officially supported by Cloudscape). Therefore, SASS is no longer needed to provide developers with variable support for their CSS files. Therefore:

1. Can we remove the SASS dependency to provide developers with direct, native usage of modern CSS variables?
   1. This implicitly removes the auto-generated, randomized 6-digit hex hashes appended to the generated CSS

The randomization of the CSS variable names provides difficulty to developers who wish to use CSS variables natively. Here's an example of the generated CSS variables:

Code of Conduct

• [X] I agree to follow this project's Code of Conduct
• [X] I checked the current issues for duplicate requests

[anthumchris]

If removing the SASS dependency isn't possible, can we simply remove the randomized hash strings from the generated CSS?

[rubencarvalho]

Hello Chris,

thank you for reaching out!

To better understand your use case, could you please share why you'd want to directly access the CSS variables?

If it is for theming reasons, please refer to the Theming documentation.

However, if your goal is to use our design tokens, these are available from a separate package called design-tokens and are intended to be used together with Cloudscape components. All of our tokens are available as SASS variables (e.g. $color-text-body-secondary) but also as JavaScript variables (e.g. colorTextBodySecondary).

Thanks! RC

[anthumchris]

@rubencarvalho Thanks for your fast response. Could we kindly keep this thread focused on the technicality of the 2 aforementioned questions shown below? Let's avoid discussing or focusing on use cases for now, if you don't mind.

1. Can we remove the SASS dependency to provide developers with direct, native usage of modern CSS variables?
2. If removing the SASS dependency isn't possible, can we simply remove the randomized hash strings from the generated CSS?

[SilentImp]

@AnthumChris if I understand correctly the whole idea behind the hash in variables names is to restrict usage of variables that are not "officially" exposed.

Which is questionable approach. Maybe owners can share why exactly it was done like that?

[rubencarvalho]

Hello Chris, We currently don’t allow the SASS dependency to be removed neither the randomising of hashes. We’ve done this in order to guarantee backward compatibility. To accept this as a feature request, we need to gather feedback about possible use cases to help us better understand and prioritise it.

[just-boris]

Closing due to inactivity. Feel free to reopen if there are additional comments

[arunim2405]

Is it reasonable to ask for a config setting which lets us turn on or off hashed variables? If we strictly do not want to follow the Cloudscape Design guidelines but still would like to use the component library? A very trivial usecase- https://github.com/cloudscape-design/components/discussions/408

[just-boris]

What you are asking (changing a color of a button) is exactly the reason why there are hashes. Internal styles is not our public API, and we change them pretty often. Changing a color this way is not future proof and may lead to unexpected issues when doing a patch version upgrade

For the best development experience, it is better not to override our styles.

[arunim2405]

Understood, thanks for the clarification 😊 @just-boris