hj/pleroma-fe
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

streamline custom styles additions

Browse source
This commit is contained in:
Henry Jameson 2025-07-02 19:39:25 +03:00
commit dc531d4ef3
2 changed files with 53 additions and 68 deletions
Download patch file Download diff file Expand all files Collapse all files

8
index.html
View file

@ -11,13 +11,7 @@
<link rel="preload" href="/static/pleromatan_apology_fox_small.webp" as="image" /> <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 --> <!-- 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="splashscreen" href="/static/splash.css" />
<link rel="stylesheet" id="pleroma-eager-styles" type="text/css" href="/static/empty.css" /> <link rel="stylesheet" id="custom-styles-holder" 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" />
<!--server-generated-meta--> <!--server-generated-meta-->
</head> </head>
<body> <body>

121
src/services/style_setter/style_setter.js
View file

@ -8,34 +8,45 @@ import localforage from 'localforage'
// Otherwise it will return an array // Otherwise it will return an array
const supportsAdoptedStyleSheets = !!document.adoptedStyleSheets const supportsAdoptedStyleSheets = !!document.adoptedStyleSheets
const stylesheets = {}
const createStyleSheet = (id) => { 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) { if (supportsAdoptedStyleSheets) {
return { document.adoptedStyleSheets = Object
el: null, .values(stylesheets)
sheet: new CSSStyleSheet(), .filter(x => x.ready)
rules: [] .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) Object
// Clear all rules in it .values(stylesheets)
for (let i = el.sheet.cssRules.length - 1; i >= 0; --i) { .forEach(sheet => {
el.sheet.deleteRule(i) 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. // Some older browsers do not support document.adoptedStyleSheets.
// In this case, we use the <style> elements. // In this case, we use the <style> elements.
@ -43,6 +54,10 @@ const adoptStyleSheets = (styles) => {
// is nothing to do here. // 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) => { export const generateTheme = (inputRuleset, callbacks, debug) => {
const { const {
onNewRule = () => {}, onNewRule = () => {},
@ -97,10 +112,13 @@ export const tryLoadCache = async () => {
const eagerStyles = createStyleSheet(EAGER_STYLE_ID) const eagerStyles = createStyleSheet(EAGER_STYLE_ID)
const lazyStyles = createStyleSheet(LAZY_STYLE_ID) const lazyStyles = createStyleSheet(LAZY_STYLE_ID)
cache.data[0].forEach(rule => eagerStyles.sheet.insertRule(rule, 'index-max')) cache.data[0].forEach(rule => eagerStyles.addRule(rule, 'index-max'))
cache.data[1].forEach(rule => lazyStyles.sheet.insertRule(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`) console.info(`Loaded theme from cache`)
return true return true
@ -123,54 +141,26 @@ export const applyTheme = (
const eagerStyles = createStyleSheet(EAGER_STYLE_ID) const eagerStyles = createStyleSheet(EAGER_STYLE_ID)
const lazyStyles = createStyleSheet(LAZY_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( const { lazyProcessFunc } = generateTheme(
input, input,
{ {
onNewRule (rule, isLazy) { onNewRule (rule, isLazy) {
if (isLazy) { if (isLazy) {
insertRule(lazyStyles, rule) lazyStyles.addRule(rule)
} else { } else {
insertRule(eagerStyles, rule) eagerStyles.addRule(rule)
} }
}, },
onEagerFinished () { onEagerFinished () {
adoptStyleSheets([eagerStyles]) eagerStyles.ready = true
adoptStyleSheets()
onEagerFinish() onEagerFinish()
console.info('Eager part of theme finished, waiting for lazy part to finish to store cache') console.info('Eager part of theme finished, waiting for lazy part to finish to store cache')
}, },
onLazyFinished () { onLazyFinished () {
adoptStyleSheets([eagerStyles, lazyStyles]) eagerStyles.ready = true
adoptStyleSheets()
const cache = { engineChecksum: getEngineChecksum(), data: [eagerStyles.rules, lazyStyles.rules] } const cache = { engineChecksum: getEngineChecksum(), data: [eagerStyles.rules, lazyStyles.rules] }
onFinish(cache) onFinish(cache)
localforage.setItem('pleromafe-theme-cache', cache) localforage.setItem('pleromafe-theme-cache', cache)
@ -239,17 +229,18 @@ export const applyConfig = (input) => {
.filter(([, v]) => v) .filter(([, v]) => v)
.map(([k, v]) => `--${k}: ${v}`).join(';') .map(([k, v]) => `--${k}: ${v}`).join(';')
const styleEl = document.getElementById('theme-holder') const styleSheet = createStyleSheet('theme-holder')
const styleSheet = styleEl.sheet
styleSheet.insertRule(`:root { ${rules} }`, 'index-max') styleSheet.addRule(`:root { ${rules} }`, 'index-max')
// TODO find a way to make this not apply to theme previews // TODO find a way to make this not apply to theme previews
if (Object.prototype.hasOwnProperty.call(config, 'forcedRoundness')) { if (Object.prototype.hasOwnProperty.call(config, 'forcedRoundness')) {
styleSheet.insertRule(` *:not(.preview-block) { styleSheet.addRule(` *:not(.preview-block) {
--roundness: var(--forcedRoundness) !important; --roundness: var(--forcedRoundness) !important;
}`, 'index-max') }`, 'index-max')
} }
styleSheet.ready = true
adoptStyleSheets()
} }
export const getResourcesIndex = async (url, parser = JSON.parse) => { export const getResourcesIndex = async (url, parser = JSON.parse) => {