mirror of
https://github.com/MercuryWorkshop/dreamlandjs.git
synced 2025-05-15 07:10:00 -04:00
Reapply "(breaking) nuke css dynamic variables and flatten css` and rule
` into the same function"
This reverts commit b8c80905f0
.
This commit is contained in:
parent
b8c80905f0
commit
a60d4fb5c4
1 changed files with 10 additions and 60 deletions
70
src/css.js
70
src/css.js
|
@ -1,28 +1,14 @@
|
|||
Object.assign(window, { css, rule, styled: { new: css, rule: rule } })
|
||||
Object.assign(window, { css, rule: css, styled: { new: css, rule: css } })
|
||||
const cssmap = {}
|
||||
function scopify_css(uid, css) {
|
||||
const virtualDoc = document.implementation.createHTMLDocument('')
|
||||
const virtualStyleElement = document.createElement('style')
|
||||
virtualDoc.body.appendChild(virtualStyleElement)
|
||||
|
||||
let cssParsed = ''
|
||||
|
||||
virtualStyleElement.textContent = css
|
||||
|
||||
//@ts-ignore
|
||||
for (const rule of virtualStyleElement.sheet.cssRules) {
|
||||
rule.selectorText = rule.selectorText.includes('self')
|
||||
? `.${uid}.self${rule.selectorText.replace('self', '')}`
|
||||
: `.${uid} ${rule.selectorText}`
|
||||
cssParsed += `${rule.cssText}\n`
|
||||
export function css(strings, ...values) {
|
||||
let str = ''
|
||||
for (let f of strings) {
|
||||
str += f + (values.shift() || '')
|
||||
}
|
||||
|
||||
return cssParsed
|
||||
}
|
||||
function tagcss(strings, values, isblock) {
|
||||
let cached = cssmap[strings[0]]
|
||||
let cachable = strings.length == 1
|
||||
if (cachable && cached) return cached
|
||||
let cached = cssmap[str]
|
||||
if (cached) return cached
|
||||
|
||||
const uid = `dl${Array(5)
|
||||
.fill(0)
|
||||
.map(() => {
|
||||
|
@ -31,46 +17,10 @@ function tagcss(strings, values, isblock) {
|
|||
.join('')}`
|
||||
|
||||
const styleElement = document.createElement('style')
|
||||
|
||||
document.head.appendChild(styleElement)
|
||||
|
||||
const flattened_template = []
|
||||
for (const i in strings) {
|
||||
flattened_template.push(strings[i])
|
||||
if (values[i]) {
|
||||
const prop = values[i]
|
||||
|
||||
if (isDLPtr(prop)) {
|
||||
const current_i = flattened_template.length
|
||||
let oldparsed
|
||||
handle(prop, (val) => {
|
||||
flattened_template[current_i] = String(val)
|
||||
let parsed = flattened_template.join('')
|
||||
if (parsed != oldparsed)
|
||||
if (isblock)
|
||||
styleElement.textContent = scopify_css(uid, parsed)
|
||||
else styleElement.textContent = `.${uid} { ${parsed}; }`
|
||||
oldparsed = parsed
|
||||
})
|
||||
} else {
|
||||
flattened_template.push(String(prop))
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (isblock) {
|
||||
styleElement.textContent = scopify_css(uid, flattened_template.join(''))
|
||||
} else {
|
||||
styleElement.textContent = `.${uid} { ${flattened_template.join('')}; }`
|
||||
}
|
||||
|
||||
if (cachable) cssmap[strings[0]] = uid
|
||||
styleElement.textContent = `.${uid} { ${str}; }`
|
||||
cssmap[str] = uid
|
||||
|
||||
return uid
|
||||
}
|
||||
function rule(strings, ...values) {
|
||||
return tagcss(strings, values, false)
|
||||
}
|
||||
function css(strings, ...values) {
|
||||
return tagcss(strings, values, true)
|
||||
}
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue