Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Hashed CSS variables & dependency on SASS

See original GitHub issue

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:

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

I agree to follow this project’s Code of Conduct
I checked the current issues for duplicate requests

Issue Analytics

State:
Created a year ago
Comments:9 (4 by maintainers)

Top GitHub Comments

2reactions

rubencarvalhocommented, Aug 11, 2022

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.

2reactions

SilentImpcommented, Aug 11, 2022

@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?

Top Results From Across the Web

How to use global variables in CSS-Modules? - Stack Overflow

One way could be to use dependencies. For example, // variables.css .primaryColor { color: #f1f1f1 } // heading.css .heading { composes: primaryColor from...

how to use sass files · Issue #136 · PatrickJS/MFE-starter

The sass-loader transformes your scss files into valid css code, ... I'm wondering if i can use sass variables in an agular 2...

sass-loader - webpack - JS.ORG

Loads a Sass/SCSS file and compiles it to CSS. Getting Started. To begin, you'll need to install sass-loader : npm install sass- ...

How to use Sass and CSS Modules with create-react-app

Let's create another Sass file and name it variables.scss under ./src directory. Open this newly created Sass file and copy the following $ ......

How to dynamically update SCSS variables using ReactJS?

Basic knowledge of npm & create-react-app command. Basic knowledge of HTML/CSS. Basic Knowledge of react components & ES6.