π Create `CSSStyleRule` based on different themes
1aron opened this issue Β· comments
Aron commented
Current
export default {
variables: {
primary: { '@light': '#ffffff', '@dark': '#000000' },
secondary: { '@light': '#000000', '@dark': '#ffffff' }
}
}
<div class="bg:primary fg:secondary">...
Generated CSS
.light { --primary: 255 255 255 }
.light { --secondary: 0 0 0 }
.dark { --primary: 0 0 0 }
.dark { --secondary: 255 255 255 }
Expected
Generated CSS
.light { --primary: 255 255 255; --secondary: 0 0 0 }
.dark { --primary: 0 0 0; --secondary: 255 255 255 }
- We should manipulate the CSSStyleDeclaration to add or remove CSS variables instead of accessing and parsing CSS text.
- Replace
.light
with.\@dark
to make class selectors starting with@
fixed to theme-specific CSSRule.
github-actions commented
π This issue has been resolved in version 2.0.0-beta.199 π
The release is available on:
- GitHub release
- npm package (@beta dist-tag)
- npm package (@beta dist-tag)
- npm package (@beta dist-tag)
- npm package (@beta dist-tag)
- npm package (@beta dist-tag)
- npm package (@beta dist-tag)
- npm package (@beta dist-tag)
- npm package (@beta dist-tag)
- npm package (@beta dist-tag)
- npm package (@beta dist-tag)
- npm package (@beta dist-tag)
- npm package (@beta dist-tag)
- npm package (@beta dist-tag)
- npm package (@beta dist-tag)
- npm package (@beta dist-tag)
- npm package (@beta dist-tag)
- npm package (@beta dist-tag)
- npm package (@beta dist-tag)
- npm package (@beta dist-tag)
Your semantic-release bot π¦π
github-actions commented
π This issue has been resolved in version 2.0.0-rc.1 π
The release is available on:
- GitHub release
- npm package (@rc dist-tag)
- npm package (@rc dist-tag)
- npm package (@rc dist-tag)
- npm package (@rc dist-tag)
- npm package (@rc dist-tag)
- npm package (@rc dist-tag)
- npm package (@rc dist-tag)
- npm package (@rc dist-tag)
- npm package (@rc dist-tag)
- npm package (@rc dist-tag)
- npm package (@rc dist-tag)
- npm package (@rc dist-tag)
- npm package (@rc dist-tag)
- npm package (@rc dist-tag)
- npm package (@rc dist-tag)
- npm package (@rc dist-tag)
- npm package (@rc dist-tag)
- npm package (@rc dist-tag)
- npm package (@rc dist-tag)
- npm package (@rc dist-tag)
Your semantic-release bot π¦π