mercuryworkshop-mirror/dreamlandjs
1
0
Fork 0
mirror of https://github.com/MercuryWorkshop/dreamlandjs.git synced 2025-05-15 15:10:02 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

change syntax for scoped css

Browse source
This commit is contained in:
CoolElectronics 2024-04-26 17:08:37 -04:00
parent 592acdc2e3
commit d984e35e35
No known key found for this signature in database
GPG key ID: F63593D168636C50
3 changed files with 19 additions and 12 deletions
Download patch file Download diff file Expand all files Collapse all files

2
src/consts.js
View file

@ -4,4 +4,4 @@ export const DLVERSION = '0.0.9'
export const [USE_MAPFN, TARGET, PROXY, STEPS, LISTENERS, IF, STATEHOOK] =
Array.from(Array(7), Symbol)
export const cssBoundary = 'dl-boundary'
export const cssBoundary = 'dlcomponent'

16
src/core.js
View file

@ -11,6 +11,10 @@ import {
cssBoundary,
} from './consts'
/* FEATURE.CSS.START */
import { cssmap, genCss, genuid } from './css'
/* FEATURE.CSS.END */
// saves a few characters, since document will never change
let doc = document
@ -309,14 +313,18 @@ export function h(type, props, ...children) {
}
let elm = type.apply(newthis)
assert(!elm instanceof Array, 'Functional component cannot return a Fragment');
assert(elm instanceof Node, 'Functional component must return a Node');
assert(
!(elm instanceof Array),
'Functional component cannot return a Fragment'
)
assert(elm instanceof Node, 'Functional component must return a Node')
elm.$ = newthis
newthis.root = elm
/* FEATURE.CSS.START */
let cl = elm.classList
if (newthis.css) {
cl.add(newthis.css)
let css = newthis.css
if (css) {
cl.add(genCss(`${type.name}-${genuid()}`, css, true))
}
cl.add(cssBoundary)
/* FEATURE.CSS.END */

11
src/css.js
View file

@ -1,6 +1,6 @@
import { cssBoundary } from './consts'
const cssmap = {}
export const cssmap = {}
/* POLYFILL.SCOPE.START */
let scopeSupported
@ -34,7 +34,7 @@ function polyfill_scope(target) {
/* POLYFILL.SCOPE.END */
export function genuid() {
return `dl${Array(5)
return `${Array(4)
.fill(0)
.map(() => {
return Math.floor(Math.random() * 36).toString(36)
@ -49,7 +49,7 @@ const csstag = (scoped) =>
str += f + (values.shift() || '')
}
return genCss(str, scoped)
return genCss(genuid(), str, scoped)
}
export const css = csstag(false)
@ -73,11 +73,10 @@ function parseCombinedCss(str) {
return [newstr, selfstr, str]
}
function genCss(str, scoped) {
export function genCss(uid, str, scoped) {
let cached = cssmap[str]
if (cached) return cached
const uid = genuid()
cssmap[str] = uid
const styleElement = document.createElement('style')
@ -102,7 +101,7 @@ function genCss(str, scoped) {
}
/* POLYFILL.SCOPE.END */
styleElement.textContent = `@scope (.${uid}) to (:not(.${uid}).dl-boundary *) { :scope { ${str} } }`
styleElement.textContent = `@scope (.${uid}) to (:not(.${uid}).${cssBoundary} *) { :scope { ${str} } }`
} else {
;[newstr, selfstr, str] = parseCombinedCss(str)