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

sorting, typo

Browse source
This commit is contained in:
Henry Jameson 2025-07-03 17:11:23 +03:00
commit b2f7309e1e
5 changed files with 19 additions and 17 deletions
Download patch file Download diff file Expand all files Collapse all files

2
src/components/component_preview/component_preview.js
View file

@ -52,7 +52,7 @@ export default {
this.$emit('update:shadow', { axis, value: Number(value) }) this.$emit('update:shadow', { axis, value: Number(value) })
}, },
update () { update () {
const sheet = createStyleSheet('style-component-preview') const sheet = createStyleSheet('style-component-preview', 90)
sheet.clear() sheet.clear()

6
src/components/settings_modal/tabs/appearance_tab.js
View file

@ -412,11 +412,9 @@ const AppearanceTab = {
} }
const sheet = createStyleSheet('appearance-tab-previews') const sheet = createStyleSheet('appearance-tab-previews', 90)
sheet.addRule([ sheet.addRule([
'#theme-preview-', '#theme-preview-', key, ' {\n',
key,
' {\n',
getCssRules(theme3.eager).join('\n'), getCssRules(theme3.eager).join('\n'),
'\n}' '\n}'
].join('')) ].join(''))

2
src/components/settings_modal/tabs/style_tab/style_tab.js
View file

@ -695,7 +695,7 @@ export default {
return return
} }
const sheet = createStyleSheet('style-tab-overall-preview') const sheet = createStyleSheet('style-tab-overall-preview', 90)
sheet.clear() sheet.clear()
sheet.addRule([ sheet.addRule([

2
src/components/settings_modal/tabs/theme_tab/theme_tab.js
View file

@ -697,7 +697,7 @@ export default {
liteMode: true liteMode: true
}) })
const sheet = createStyleSheet('theme-tab-overall-preview') const sheet = createStyleSheet('theme-tab-overall-preview', 90)
const rule = getScopedVersion( const rule = getScopedVersion(
getCssRules(theme3.eager), getCssRules(theme3.eager),
'&' '&'

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

@ -10,11 +10,12 @@ const supportsAdoptedStyleSheets = !!document.adoptedStyleSheets
const stylesheets = {} const stylesheets = {}
export const createStyleSheet = (id) => { export const createStyleSheet = (id, priority) => {
if (stylesheets[id]) return stylesheets[id] if (stylesheets[id]) return stylesheets[id]
const newStyleSheet = { const newStyleSheet = {
rules: [], rules: [],
ready: false, ready: false,
priority,
clear () { clear () {
this.rules = [] this.rules = []
}, },
@ -40,9 +41,10 @@ export const adoptStyleSheets = throttle(() => {
document.adoptedStyleSheets = Object document.adoptedStyleSheets = Object
.values(stylesheets) .values(stylesheets)
.filter(x => x.ready) .filter(x => x.ready)
.map(x => { .sort((a, b) => a.priority - b.priority)
.map(sheet => {
const css = new CSSStyleSheet() const css = new CSSStyleSheet()
x.rules.forEach(r => css.insertRule(r, css.cssRules.length)) sheet.rules.forEach(r => css.insertRule(r, css.cssRules.length))
return css return css
}) })
} else { } else {
@ -50,8 +52,10 @@ export const adoptStyleSheets = throttle(() => {
Object Object
.values(stylesheets) .values(stylesheets)
.filter(x => x.ready)
.sort((a, b) => a.priority - b.priority)
.forEach(sheet => { .forEach(sheet => {
sheet.rules.forEach(r => holder.sheet.insertRule(r)) sheet.rules.forEach(r => holder.sheet.insertRule(r, holder.sheet.cssRules.length))
}) })
} }
// Some older browsers do not support document.adoptedStyleSheets. // Some older browsers do not support document.adoptedStyleSheets.
@ -115,8 +119,8 @@ export const tryLoadCache = async () => {
if (!cache) return null if (!cache) return null
try { try {
if (cache.engineChecksum === getEngineChecksum()) { if (cache.engineChecksum === getEngineChecksum()) {
const eagerStyles = createStyleSheet(EAGER_STYLE_ID) const eagerStyles = createStyleSheet(EAGER_STYLE_ID, 10)
const lazyStyles = createStyleSheet(LAZY_STYLE_ID) const lazyStyles = createStyleSheet(LAZY_STYLE_ID, 20)
cache.data[0].forEach(rule => eagerStyles.addRule(rule)) cache.data[0].forEach(rule => eagerStyles.addRule(rule))
cache.data[1].forEach(rule => lazyStyles.addRule(rule)) cache.data[1].forEach(rule => lazyStyles.addRule(rule))
@ -144,8 +148,8 @@ export const applyTheme = (
onFinish = () => {}, onFinish = () => {},
debug debug
) => { ) => {
const eagerStyles = createStyleSheet(EAGER_STYLE_ID) const eagerStyles = createStyleSheet(EAGER_STYLE_ID, 10)
const lazyStyles = createStyleSheet(LAZY_STYLE_ID) const lazyStyles = createStyleSheet(LAZY_STYLE_ID, 20)
const { lazyProcessFunc } = generateTheme( const { lazyProcessFunc } = generateTheme(
@ -165,7 +169,7 @@ export const applyTheme = (
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 () {
eagerStyles.ready = true lazyStyles.ready = true
adoptStyleSheets() adoptStyleSheets()
const cache = { engineChecksum: getEngineChecksum(), data: [eagerStyles.rules, lazyStyles.rules] } const cache = { engineChecksum: getEngineChecksum(), data: [eagerStyles.rules, lazyStyles.rules] }
onFinish(cache) onFinish(cache)
@ -235,7 +239,7 @@ export const applyConfig = (input) => {
.filter(([, v]) => v) .filter(([, v]) => v)
.map(([k, v]) => `--${k}: ${v}`).join(';') .map(([k, v]) => `--${k}: ${v}`).join(';')
const styleSheet = createStyleSheet('theme-holder') const styleSheet = createStyleSheet('theme-holder', 30)
styleSheet.addRule(`:root { ${rules} }`) styleSheet.addRule(`:root { ${rules} }`)