fix: css specificity bug is fixed with @layer wrapper#65
Open
atakanbayrak wants to merge 19 commits into
Open
Conversation
added 3 commits
May 8, 2026 14:37
atakanbayrak
commented
May 14, 2026
| .motifIconsDefault { | ||
| font-family: motif-icons-default, serif !important; | ||
| speak: none; | ||
| speak: never; |
Contributor
Author
There was a problem hiding this comment.
I would like to know that this refactor is legit ?
Contributor
There was a problem hiding this comment.
it is legit. none is replaced with never
atakanbayrak
had a problem deploying
to
development
GitHub Actions
Failure
added 2 commits
May 20, 2026 09:46
atakanbayrak
commented
May 20, 2026
| commonjs(), | ||
| json(), | ||
| styles({ | ||
| //mode: ["extract", "dist/bundle.css"], //TODO: Lets keep it like this unless there is problem. |
Contributor
Author
There was a problem hiding this comment.
I will fix this with incoming commit. I am waiting review to fix it for avoiding commit garbage.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
3 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Description
When consumers install this library and try to override component styles, they are forced to use !important on every declaration. This happens because our component styles (injected via rollup-plugin-styler at runtime) load after the consuming app's styles in an unpredictable order, and since both sides write plain CSS with no explicit priority rules, the last one loaded wins. There is no reliable way for consumers to win this specificity battle without !important.
Solution:
We wrap all component styles in a single named CSS @layer called motif-ui directly in the SCSS source files. Each component's selectors are placed inside @layer motif-ui { }, while SCSS compile-time declarations (@use, @forward, $variables, @mixin, @function) remain outside the layer block as required by the SCSS spec.
Type of Change
Screenshots / Preview
Before:
After:
Checklist
How to Test
Tests are completed with @sengulnecmi inside real project. There was no error, complex components are also tested with different css styles. No need for !important after all.
#EDKUI-1363