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

chore: format

Browse source
This commit is contained in:
CoolElectronics 2024-04-25 12:44:28 -04:00
parent e9ee2fc8ef
commit 8978f5264d
No known key found for this signature in database
GPG key ID: F63593D168636C50
3 changed files with 21 additions and 26 deletions
Download patch file Download diff file Expand all files Collapse all files

1
src/core.js
View file

@ -11,7 +11,6 @@ import {
cssBoundary, cssBoundary,
} from './consts' } from './consts'
// saves a few characters, since document will never change // saves a few characters, since document will never change
let doc = document let doc = document

44
src/css.js
View file

@ -1,40 +1,38 @@
import { cssBoundary } from "./consts" import { cssBoundary } from './consts'
const cssmap = {} const cssmap = {}
/* POLYFILL.SCOPE.START */ /* POLYFILL.SCOPE.START */
let scopeSupported; let scopeSupported
window.addEventListener('load', () => { window.addEventListener('load', () => {
const style = document.createElement('style'); const style = document.createElement('style')
style.textContent = '@scope (.test) { :scope { color: red } }'; style.textContent = '@scope (.test) { :scope { color: red } }'
document.head.appendChild(style); document.head.appendChild(style)
const testElement = document.createElement('div'); const testElement = document.createElement('div')
testElement.className = 'test'; testElement.className = 'test'
document.body.appendChild(testElement); document.body.appendChild(testElement)
const computedColor = getComputedStyle(testElement).color; const computedColor = getComputedStyle(testElement).color
document.head.removeChild(style); document.head.removeChild(style)
document.body.removeChild(testElement); document.body.removeChild(testElement)
scopeSupported = computedColor == 'rgb(255, 0, 0)' scopeSupported = computedColor == 'rgb(255, 0, 0)'
}); })
const depth = 50; const depth = 50
// polyfills @scope for firefox and older browsers, using a :not selector recursively increasing in depth // polyfills @scope for firefox and older browsers, using a :not selector recursively increasing in depth
// depth 50 means that after 50 layers of nesting, switching between an unrelated component and the target component, it will eventually stop applying styles (or let them leak into children) // depth 50 means that after 50 layers of nesting, switching between an unrelated component and the target component, it will eventually stop applying styles (or let them leak into children)
// this is slow. please ask mozilla to implement @scope // this is slow. please ask mozilla to implement @scope
function polyfill_scope(target) { function polyfill_scope(target) {
let boundary = `:not(${target}).${cssBoundary}` let boundary = `:not(${target}).${cssBoundary}`
let g = (str, i) => `${str} *${i > depth ? "" : `:not(${g(str + " " + ((i % 2 == 0) ? target : boundary), i + 1)})`}` let g = (str, i) =>
`${str} *${i > depth ? '' : `:not(${g(str + ' ' + (i % 2 == 0 ? target : boundary), i + 1)})`}`
return `:not(${g(boundary, 0)})` return `:not(${g(boundary, 0)})`
} }
/* POLYFILL.SCOPE.END */ /* POLYFILL.SCOPE.END */
export function genuid() { export function genuid() {
return `dl${Array(5) return `dl${Array(5)
.fill(0) .fill(0)
@ -57,14 +55,13 @@ const csstag = (scoped) =>
export const css = csstag(false) export const css = csstag(false)
export const scope = csstag(true) export const scope = csstag(true)
function parseCombinedCss(str) { function parseCombinedCss(str) {
let newstr = '' let newstr = ''
let selfstr = '' let selfstr = ''
// compat layer for older browsers. when css nesting stablizes this can be removed // compat layer for older browsers. when css nesting stablizes this can be removed
str += '\n' str += '\n'
for (; ;) { for (;;) {
let [first, ...rest] = str.split('\n') let [first, ...rest] = str.split('\n')
if (first.trim().endsWith('{')) break if (first.trim().endsWith('{')) break
@ -80,21 +77,20 @@ function genCss(str, scoped) {
let cached = cssmap[str] let cached = cssmap[str]
if (cached) return cached if (cached) return cached
const uid = genuid(); const uid = genuid()
cssmap[str] = uid cssmap[str] = uid
const styleElement = document.createElement('style') const styleElement = document.createElement('style')
document.head.appendChild(styleElement) document.head.appendChild(styleElement)
if (scoped) { if (scoped) {
/* POLYFILL.SCOPE.START */ /* POLYFILL.SCOPE.START */
if (!scopeSupported) { if (!scopeSupported) {
[newstr, selfstr, str] = parseCombinedCss(str) ;[newstr, selfstr, str] = parseCombinedCss(str)
styleElement.textContent = str styleElement.textContent = str
let scoped = polyfill_scope(`.${uid}`, 50); let scoped = polyfill_scope(`.${uid}`, 50)
for (const rule of styleElement.sheet.cssRules) { for (const rule of styleElement.sheet.cssRules) {
rule.selectorText = `.${uid} ${rule.selectorText}${scoped}` rule.selectorText = `.${uid} ${rule.selectorText}${scoped}`
newstr += rule.cssText + '\n' newstr += rule.cssText + '\n'
@ -107,7 +103,7 @@ function genCss(str, scoped) {
styleElement.textContent = `@scope (.${uid}) to (:not(.${uid}).dl-boundary *) { :scope { ${str} } }` styleElement.textContent = `@scope (.${uid}) to (:not(.${uid}).dl-boundary *) { :scope { ${str} } }`
} else { } else {
[newstr, selfstr, str] = parseCombinedCss(str) ;[newstr, selfstr, str] = parseCombinedCss(str)
styleElement.textContent = str styleElement.textContent = str