Skip to content

Commit

Permalink
Update
Browse files Browse the repository at this point in the history
  • Loading branch information
@BenSeage
BenSeage committed Jul 3, 2024
1 parent e301eac commit 33f9cff
Show file tree
Hide file tree
Showing 3 changed files with 32 additions and 27 deletions.
31 changes: 21 additions & 10 deletions packages/core/src/theme-layer.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,35 +22,46 @@ export default class ThemeLayer extends Layer {
} else {
const newRule = new Rule(eachVariableName, this.css)
const addNative = (mode: string, _variable: TypeVariable) => {
let cssRuleText: string
let isDefaultMode = false
let preifxCssRuleText: string
let endCurlyBracketCount = 1
if (mode) {
switch (this.css.config.modes?.[mode]) {
case 'media':
cssRuleText = `@media(prefers-color-scheme:${mode}){:root`
preifxCssRuleText = `@media(prefers-color-scheme:${mode}){:root`
endCurlyBracketCount++
break
case 'host':
cssRuleText = `:host(.${mode})`
preifxCssRuleText = `:host(.${mode})`
if (!variable.value && this.css.config.defaultMode === mode) {
cssRuleText += ',:host'
preifxCssRuleText += ',:host'
isDefaultMode = true
}
break
case 'class':
cssRuleText = `.${mode}`
preifxCssRuleText = `.${mode}`
if (!variable.value && this.css.config.defaultMode === mode) {
cssRuleText += ',:root'
preifxCssRuleText += ',:root'
isDefaultMode = true
}
break
default:
return
}
} else {
cssRuleText = ':root'
preifxCssRuleText = ':root'
}

const cssRuleText = `${preifxCssRuleText}{--${eachVariableName}:${String(_variable.value)}${'}'.repeat(endCurlyBracketCount)}`
if (isDefaultMode) {
newRule.natives.unshift({
text: cssRuleText
})
} else {
newRule.natives.push({
text: cssRuleText
})
}
newRule.natives.push({
text: `${cssRuleText}{--${eachVariableName}:${String(_variable.value)}${'}'.repeat(endCurlyBracketCount)}`
})
}
if (variable.value) {
addNative('', variable as any)
Expand Down
8 changes: 4 additions & 4 deletions packages/runtime/e2e/variables.test.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -71,7 +71,7 @@ test('expects the variable output', async ({ page }) => {
return globalThis.runtimeCSS.text
})
expect(text).toMatch(/\.dark\{[^}]*--second:68 68 68[^}]*\}/)
expect(text).toMatch(/\.light\{[^}]*--second:85 85 85[^}]*\}/)
expect(text).toMatch(/\.light,:root\{[^}]*--second:85 85 85[^}]*\}/)
expect(text).toContain('.bg\\:second{background-color:rgb(var(--second))}')
expect(text).toMatch(/:root\{[^}]*--third:102 102 102[^}]*\}/)
expect(text).toMatch(/\.light\{[^}]*--third:119 119 119[^}]*\}/)
Expand All @@ -80,7 +80,7 @@ test('expects the variable output', async ({ page }) => {
expect(text).toMatch(/\.dark\{[^}]*--fourth:153 153 153[^}]*\}/)
expect(text).toMatch(/\.light\{[^}]*--fourth:0 0 0[^}]*\}/)
expect(text).toMatch(/\.dark\{[^}]*--fifth:2 34 34[^}]*\}/)
expect(text).toMatch(/\.light\{[^}]*--fifth:3 51 51[^}]*\}/)
expect(text).toMatch(/\.light,:root\{[^}]*--fifth:3 51 51[^}]*\}/)
// todo: insertRule throw error
// expect(text).toContain('.\\{outline\\:fourth\\;accent\\:fifth\\}{outline-color:rgb(var(--fourth));accent-color:rgb(var(--fifth))}')
expect(text).toContain('.fg\\:second{color:rgb(var(--second))}')
Expand All @@ -92,7 +92,7 @@ test('expects the variable output', async ({ page }) => {
return globalThis.runtimeCSS.text
})
expect(text).toMatch(/\.dark\{[^}]*--second:68 68 68[^}]*\}/)
expect(text).toMatch(/\.light\{[^}]*--second:85 85 85[^}]*\}/)
expect(text).toMatch(/\.light,:root\{[^}]*--second:85 85 85[^}]*\}/)

text = await page.evaluate(async () => {
document.getElementById('mp')?.classList.remove('b:third')
Expand All @@ -119,7 +119,7 @@ test('expects the variable output', async ({ page }) => {
return globalThis.runtimeCSS.text
})
expect(text).not.toMatch(/\.dark\{[^}]*--second:68 68 68[^}]*\}/)
expect(text).not.toMatch(/\.light\{[^}]*--second:85 85 85[^}]*\}/)
expect(text).not.toMatch(/\.light,:root\{[^}]*--second:85 85 85[^}]*\}/)

text = await page.evaluate(async () => {
document.getElementById('mp')?.classList.remove('bg:first')
Expand Down
20 changes: 7 additions & 13 deletions packages/runtime/src/core.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -277,19 +277,13 @@ export class RuntimeCSS extends MasterCSS {
this.style.id = 'master'
this.container.append(this.style)

this.style.sheet?.insertRule(this.keyframeLayer.text)
this.keyframeLayer.native = this.style.sheet?.cssRules.item(0) as CSSLayerBlockRule

this.style.sheet?.insertRule(this.utilityLayer.text)
this.utilityLayer.native = this.style.sheet?.cssRules.item(0) as CSSLayerBlockRule

this.style.sheet?.insertRule(this.styleLayer.text)
this.styleLayer.native = this.style.sheet?.cssRules.item(0) as CSSLayerBlockRule

this.style.sheet?.insertRule(this.themeLayer.text)
this.themeLayer.native = this.style.sheet?.cssRules.item(0) as CSSLayerBlockRule

this.style.sheet?.insertRule(this.layerStatementRule.text)
for (let i = 0; i < this.sheet.rules.length; i++) {
const rule = this.sheet.rules[i]
this.style.sheet?.insertRule(rule.text, i)
if ('native' in rule) {
rule.native = this.style.sheet?.cssRules.item(i) as CSSLayerBlockRule
}
}
}

const handleClassList = (classList: DOMTokenList) => {
Expand Down

0 comments on commit 33f9cff

Please sign in to comment.