Skip to content

Commit e2a1874

Browse files
1aron1aron
committed
Fix(Runtime): CSSRuntime initialization for iframe
1 parent 2059cad commit e2a1874

4 files changed

Lines changed: 42 additions & 21 deletions

File tree

‎packages/runtime/playground/index.html‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,19 @@
2525
<body>
2626
<button class="btn">button</button>
2727
<button class="btn@sm">button</button>
28+
29+
<!-- iframe -->
30+
<iframe srcdoc='
31+
<!DOCTYPE html>
32+
<html lang="en">
33+
<head>
34+
<meta charset="UTF-8">
35+
</head>
36+
<body>
37+
<p class="fg:#ff0000">This is an inline HTML document embedded in an iframe.</p>
38+
</body>
39+
</html>
40+
'></iframe>
2841
</body>
2942

3043
</html>

‎packages/runtime/playground/src/main.ts‎

Lines changed: 14 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
1-
import { initCSSRuntime } from '../../src'
1+
import CSSRuntime, { initCSSRuntime } from '../../src'
22

3-
initCSSRuntime({
4-
components: {
5-
btn: 'bg:black'
6-
}
7-
})
3+
// initCSSRuntime({
4+
// components: {
5+
// btn: 'bg:black'
6+
// }
7+
// })
88

99
// const createElement = (name: string) => {
1010
// const el = document.createElement('div')
@@ -27,4 +27,11 @@ initCSSRuntime({
2727
// p1c2.classList.add('p1c2-1')
2828
// p1c3.remove()
2929
// p1c3.classList.add('p1c3-1')
30-
// p1.remove()
30+
// p1.remove()
31+
32+
/* iframe test */
33+
const iframe = document.querySelector('iframe')
34+
if (iframe?.contentDocument) {
35+
new CSSRuntime(iframe.contentDocument)
36+
.observe()
37+
}

‎packages/runtime/src/core.ts‎

Lines changed: 7 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -25,10 +25,12 @@ export default class CSSRuntime extends MasterCSS {
2525
public baseConfig?: Config
2626
) {
2727
super(customConfig, baseConfig)
28-
if (this.root instanceof Document || this.root instanceof HTMLDocument) {
29-
this.root.defaultView!.globalThis.cssRuntime = this
30-
this.container = this.root.head
31-
this.host = this.root.documentElement
28+
// Do not use instanceof here, because it will not work
29+
const rootConstructorName = root?.constructor.name
30+
if (rootConstructorName === 'HTMLDocument' || rootConstructorName === 'Document') {
31+
(this.root as Document).defaultView!.globalThis.cssRuntime = this
32+
this.container = (this.root as Document).head
33+
this.host = (this.root as Document).documentElement
3234
} else {
3335
this.container = this.root as CSSRuntime['container']
3436
this.host = (this.root as ShadowRoot).host
@@ -69,12 +71,7 @@ export default class CSSRuntime extends MasterCSS {
6971
if (!count) connectedNames.add(className)
7072
this.classCounts.set(className, count + 1)
7173
}
72-
73-
const rootEl = this.root instanceof Document || this.root instanceof HTMLDocument
74-
? this.root
75-
: this.container
76-
77-
const elementsWithClass = rootEl.querySelectorAll('[class]')
74+
const elementsWithClass = this.root.querySelectorAll('[class]')
7875
elementsWithClass.forEach(el => {
7976
const clsList = el.classList
8077
if (clsList) {

‎site/app/[locale]/play/templates/latest/config.js‎

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,13 +2,17 @@
22
export default {
33
modes: {
44
light: {
5-
text: {
6-
primary: '$color-yellow-50'
5+
color: {
6+
text: {
7+
primary: '$color-yellow-50'
8+
}
79
}
810
},
911
dark: {
10-
text: {
11-
primary: '$color-amber-20'
12+
color: {
13+
text: {
14+
primary: '$color-amber-20'
15+
}
1216
}
1317
}
1418
}

0 commit comments

Comments
 (0)