[CRITICAL/URGENT] - CSS in Module Conflicts with Core CSS #89
Description
PLEASE READ!
Due to this urgent issue, we have to temporarily suspend all other new features/bug fixes. In short, before this issue is fixed, we are not able to continue.
Before this issue closed, we might not provide fixes especially issues related to LifeForge UI.
This CSS critical bug is discovered while we are working with styling elements in modules. Details are as follow:
To Reproduce
- We define a CSS attributes for a TailwindCSS component (i.e. text-white, we slightly change the white color of it)
- After the module is loaded, you will see that the CSS attribute is appled to ALL components that using text-white class.
tldr: If we modify a tailwincss class in modules, it will overwrite all tailwindcss class attributes including the core one, and breaks the UI.
Why This is Critical?
It sound so exaggerated when a CSS issue can break the entire project. But the truth is, YES.
Why? Our test lacks of covering several system contexts, especially dealing with modules. While we are working with one of our new modules, we realized that while modules modify the TailwindCSS class theming, everything changed together.
This sound not serious, but imagine when you have tons of new modules that define how their own TailwindCSS loads, the LifeForge UI will be completely broken :(
Therefore, that's no reason for us to postpone this fix before more community modules are created.
Our Solution
We are currently discussing a long-term resolution for this issue. Further details will be updated.
update: Refer to #93, which introduced an enhanced version of LifeForge internal UI library.