streamline custom styles additions
This commit is contained in:
Henry Jameson
parent
5a6a77bd75
commit
dc531d4ef3
2 changed files with 53 additions and 68 deletions
|
|
@ -11,13 +11,7 @@
|
|||
<link rel="preload" href="/static/pleromatan_apology_fox_small.webp" as="image" />
|
||||
<!-- putting styles here to avoid having to wait for styles to load up -->
|
||||
<link rel="stylesheet" id="splashscreen" href="/static/splash.css" />
|
||||
<link rel="stylesheet" id="pleroma-eager-styles" type="text/css" href="/static/empty.css" />
|
||||
<link rel="stylesheet" id="pleroma-lazy-styles" type="text/css" href="/static/empty.css" />
|
||||
<link rel="stylesheet" id="theme-holder" type="text/css" href="/static/empty.css" />
|
||||
<link rel="stylesheet" id="theme-preview-holder" type="text/css" href="/static/empty.css" />
|
||||
<link rel="stylesheet" id="component-style-holder" type="text/css" href="/static/empty.css" />
|
||||
<link rel="stylesheet" id="editor-overall-holder" type="text/css" href="/static/empty.css" />
|
||||
<link rel="stylesheet" id="old-editor-overall-holder" type="text/css" href="/static/empty.css" />
|
||||
<link rel="stylesheet" id="custom-styles-holder" type="text/css" href="/static/empty.css" />
|
||||
<!--server-generated-meta-->
|
||||
</head>
|
||||
<body>
|
||||
|
|
|
|||
|
|
@ -8,34 +8,45 @@ import localforage from 'localforage'
|
|||
// Otherwise it will return an array
|
||||
const supportsAdoptedStyleSheets = !!document.adoptedStyleSheets
|
||||
|
||||
const stylesheets = {}
|
||||
|
||||
const createStyleSheet = (id) => {
|
||||
const newStyleSheet = {
|
||||
rules: [],
|
||||
ready: false,
|
||||
addRule (rule) {
|
||||
this.rules.push(
|
||||
rule
|
||||
.replace(/backdrop-filter:[^;]+;/g, '') // Remove backdrop-filter
|
||||
.replace(/var\(--shadowFilter\)[^;]*;/g, '') // Remove shadowFilter references
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
stylesheets[id] = newStyleSheet
|
||||
return newStyleSheet
|
||||
}
|
||||
|
||||
|
||||
export const adoptStyleSheets = () => {
|
||||
if (supportsAdoptedStyleSheets) {
|
||||
return {
|
||||
el: null,
|
||||
sheet: new CSSStyleSheet(),
|
||||
rules: []
|
||||
}
|
||||
}
|
||||
document.adoptedStyleSheets = Object
|
||||
.values(stylesheets)
|
||||
.filter(x => x.ready)
|
||||
.map(x => {
|
||||
const css = new CSSStyleSheet()
|
||||
x.rules.forEach(r => css.insertRule(r, css.cssRules.length))
|
||||
return css
|
||||
})
|
||||
} else {
|
||||
const holder = document.getElementById('custom-styles-holder')
|
||||
|
||||
const el = document.getElementById(id)
|
||||
// Clear all rules in it
|
||||
for (let i = el.sheet.cssRules.length - 1; i >= 0; --i) {
|
||||
el.sheet.deleteRule(i)
|
||||
}
|
||||
Object
|
||||
.values(stylesheets)
|
||||
.forEach(sheet => {
|
||||
sheet.rules.forEach(r => holder.sheet.insertRule(r))
|
||||
})
|
||||
|
||||
return {
|
||||
el,
|
||||
sheet: el.sheet,
|
||||
rules: []
|
||||
}
|
||||
}
|
||||
|
||||
const EAGER_STYLE_ID = 'pleroma-eager-styles'
|
||||
const LAZY_STYLE_ID = 'pleroma-lazy-styles'
|
||||
|
||||
const adoptStyleSheets = (styles) => {
|
||||
if (supportsAdoptedStyleSheets) {
|
||||
document.adoptedStyleSheets = styles.map(s => s.sheet)
|
||||
}
|
||||
// Some older browsers do not support document.adoptedStyleSheets.
|
||||
// In this case, we use the <style> elements.
|
||||
|
|
@ -43,6 +54,10 @@ const adoptStyleSheets = (styles) => {
|
|||
// is nothing to do here.
|
||||
}
|
||||
|
||||
|
||||
const EAGER_STYLE_ID = 'pleroma-eager-styles'
|
||||
const LAZY_STYLE_ID = 'pleroma-lazy-styles'
|
||||
|
||||
export const generateTheme = (inputRuleset, callbacks, debug) => {
|
||||
const {
|
||||
onNewRule = () => {},
|
||||
|
|
@ -97,10 +112,13 @@ export const tryLoadCache = async () => {
|
|||
const eagerStyles = createStyleSheet(EAGER_STYLE_ID)
|
||||
const lazyStyles = createStyleSheet(LAZY_STYLE_ID)
|
||||
|
||||
cache.data[0].forEach(rule => eagerStyles.sheet.insertRule(rule, 'index-max'))
|
||||
cache.data[1].forEach(rule => lazyStyles.sheet.insertRule(rule, 'index-max'))
|
||||
cache.data[0].forEach(rule => eagerStyles.addRule(rule, 'index-max'))
|
||||
cache.data[1].forEach(rule => lazyStyles.addRule(rule, 'index-max'))
|
||||
|
||||
adoptStyleSheets([eagerStyles, lazyStyles])
|
||||
eagerStyles.ready = true
|
||||
lazyStyles.ready = true
|
||||
|
||||
adoptStyleSheets()
|
||||
|
||||
console.info(`Loaded theme from cache`)
|
||||
return true
|
||||
|
|
@ -123,54 +141,26 @@ export const applyTheme = (
|
|||
const eagerStyles = createStyleSheet(EAGER_STYLE_ID)
|
||||
const lazyStyles = createStyleSheet(LAZY_STYLE_ID)
|
||||
|
||||
const insertRule = (styles, rule) => {
|
||||
try {
|
||||
// Try to use modern syntax first
|
||||
try {
|
||||
styles.sheet.insertRule(rule, 'index-max')
|
||||
styles.rules.push(rule)
|
||||
} catch {
|
||||
// Fallback for older browsers that don't support 'index-max'
|
||||
styles.sheet.insertRule(rule, styles.sheet.cssRules.length)
|
||||
styles.rules.push(rule)
|
||||
}
|
||||
} catch (e) {
|
||||
console.warn('Can\'t insert rule due to lack of support', e, rule)
|
||||
|
||||
// Try to sanitize the rule for better compatibility
|
||||
try {
|
||||
// Remove any potentially problematic CSS features
|
||||
let sanitizedRule = rule
|
||||
.replace(/backdrop-filter:[^;]+;/g, '') // Remove backdrop-filter
|
||||
.replace(/var\(--shadowFilter\)[^;]*;/g, '') // Remove shadowFilter references
|
||||
|
||||
if (sanitizedRule !== rule) {
|
||||
styles.sheet.insertRule(sanitizedRule, styles.sheet.cssRules.length)
|
||||
styles.rules.push(sanitizedRule)
|
||||
}
|
||||
} catch (e2) {
|
||||
console.error('Failed to insert even sanitized rule', e2)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const { lazyProcessFunc } = generateTheme(
|
||||
input,
|
||||
{
|
||||
onNewRule (rule, isLazy) {
|
||||
if (isLazy) {
|
||||
insertRule(lazyStyles, rule)
|
||||
lazyStyles.addRule(rule)
|
||||
} else {
|
||||
insertRule(eagerStyles, rule)
|
||||
eagerStyles.addRule(rule)
|
||||
}
|
||||
},
|
||||
onEagerFinished () {
|
||||
adoptStyleSheets([eagerStyles])
|
||||
eagerStyles.ready = true
|
||||
adoptStyleSheets()
|
||||
onEagerFinish()
|
||||
console.info('Eager part of theme finished, waiting for lazy part to finish to store cache')
|
||||
},
|
||||
onLazyFinished () {
|
||||
adoptStyleSheets([eagerStyles, lazyStyles])
|
||||
eagerStyles.ready = true
|
||||
adoptStyleSheets()
|
||||
const cache = { engineChecksum: getEngineChecksum(), data: [eagerStyles.rules, lazyStyles.rules] }
|
||||
onFinish(cache)
|
||||
localforage.setItem('pleromafe-theme-cache', cache)
|
||||
|
|
@ -239,17 +229,18 @@ export const applyConfig = (input) => {
|
|||
.filter(([, v]) => v)
|
||||
.map(([k, v]) => `--${k}: ${v}`).join(';')
|
||||
|
||||
const styleEl = document.getElementById('theme-holder')
|
||||
const styleSheet = styleEl.sheet
|
||||
const styleSheet = createStyleSheet('theme-holder')
|
||||
|
||||
styleSheet.insertRule(`:root { ${rules} }`, 'index-max')
|
||||
styleSheet.addRule(`:root { ${rules} }`, 'index-max')
|
||||
|
||||
// TODO find a way to make this not apply to theme previews
|
||||
if (Object.prototype.hasOwnProperty.call(config, 'forcedRoundness')) {
|
||||
styleSheet.insertRule(` *:not(.preview-block) {
|
||||
styleSheet.addRule(` *:not(.preview-block) {
|
||||
--roundness: var(--forcedRoundness) !important;
|
||||
}`, 'index-max')
|
||||
}
|
||||
styleSheet.ready = true
|
||||
adoptStyleSheets()
|
||||
}
|
||||
|
||||
export const getResourcesIndex = async (url, parser = JSON.parse) => {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue