fix: non-scoped css rules, scoped media rules, falsy attributes

This commit is contained in:
Toshit Chawda 2024-06-21 18:19:52 -07:00
parent bd94e92985
commit f9cc927c60
No known key found for this signature in database
GPG key ID: 91480ED99E2B3D9D
3 changed files with 19 additions and 7 deletions

10
dreamland.d.ts vendored
View file

@ -45,8 +45,8 @@ declare function $store<T>(
options: { options: {
ident: string ident: string
backing: backing:
| 'localstorage' | 'localstorage'
| { read: () => string; write: (value: string) => void } | { read: () => string; write: (value: string) => void }
autosave: 'auto' | 'manual' | 'beforeunload' autosave: 'auto' | 'manual' | 'beforeunload'
} }
): Stateful<T> ): Stateful<T>
@ -77,7 +77,7 @@ interface DLElement<T> extends HTMLElement {
} }
type ComponentElement<T extends (...args: any) => any> = ReturnType<T> type ComponentElement<T extends (...args: any) => any> = ReturnType<T>
type ComponentType<T extends (...args: any) => any> = ReturnType<T>["$"] type ComponentType<T extends (...args: any) => any> = ReturnType<T>['$']
type OuterComponentTypes = { type OuterComponentTypes = {
root: Element root: Element
@ -98,6 +98,6 @@ type Component<Props = {}, Private = {}, Public = {}> = (
Private extends { children: any } ? Private['children'] : never Private extends { children: any } ? Private['children'] : never
> >
} & { } & {
[K in keyof Props as `bind:${Extract<K, string>}`]?: DLPointer<Props[K]> [K in keyof Props as `bind:${Extract<K, string>}`]?: DLPointer<Props[K]>
} }
) => DLElement<Props & Public> ) => DLElement<Props & Public>

View file

@ -575,6 +575,7 @@ function JSXAddChild(child, cb) {
// Where properties are assigned to elements, and where the *non-reactive* syntax sugar goes // Where properties are assigned to elements, and where the *non-reactive* syntax sugar goes
function JSXAddAttributes(elm, name, prop) { function JSXAddAttributes(elm, name, prop) {
if (!prop && elm.hasAttribute(name)) elm.removeAttribute(name)
if (!prop) return if (!prop) return
if (name.startsWith('on:')) { if (name.startsWith('on:')) {

View file

@ -96,7 +96,7 @@ export function genCss(uid, str, scoped) {
let extstr = '' let extstr = ''
for (const rule of styleElement.sheet.cssRules) { for (const rule of styleElement.sheet.cssRules) {
if (!rule.selectorText) { if (!rule.selectorText && !rule.media) {
extstr += rule.cssText extstr += rule.cssText
} else if (rule.selectorText?.startsWith(':')) { } else if (rule.selectorText?.startsWith(':')) {
rule.selectorText = `.${uid}${rule.selectorText}` rule.selectorText = `.${uid}${rule.selectorText}`
@ -109,7 +109,18 @@ export function genCss(uid, str, scoped) {
styleElement.textContent = `.${uid} {${selfstr}} @scope (.${uid}) to (:not(.${uid}).${cssBoundary} *) { ${newstr} } ${extstr}` styleElement.textContent = `.${uid} {${selfstr}} @scope (.${uid}) to (:not(.${uid}).${cssBoundary} *) { ${newstr} } ${extstr}`
} else { } else {
for (const rule of styleElement.sheet.cssRules) { for (const rule of styleElement.sheet.cssRules) {
rule.selectorText = `.${uid} ${rule.selectorText}` if (rule.selectorText)
rule.selectorText = rule.selectorText
.split(',')
.map((x) => {
x = x.trim()
if (x[0] === ':') {
return `.${uid}${x}`
} else {
return `.${uid} ${x}`
}
})
.join(', ')
newstr += rule.cssText newstr += rule.cssText
} }