💖 Create `CSSStyleRule` based on different themes

master-co / css

The CSS Language and Framework

https://css.master.co

MIT License

1.82k stars 41 forks source link

💖 Create `CSSStyleRule` based on different themes #303

Closed 1aron closed 1 year ago

1aron commented 1 year ago

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 }

[x] 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[bot] commented 1 year ago

:tada: This issue has been resolved in version 2.0.0-beta.199 :tada:

The release is available on:

Your semantic-release bot :package::rocket:

github-actions[bot] commented 10 months ago

:tada: This issue has been resolved in version 2.0.0-rc.1 :tada: