No OneTemporary
Actions

Authored By

Unknown

Size

29 KB

Referenced Files

None

Subscribers

None

View Options

	diff --git a/changelog.d/theme2-font-cache.fix b/changelog.d/theme2-font-cache.fix
	new file mode 100644
	index 0000000000..d8782b4676
	--- /dev/null
	+++ b/changelog.d/theme2-font-cache.fix
	@@ -0,0 +1 @@
	+Fix Theme 2 fonts falling back to serif after upgrade
	diff --git a/src/services/style_setter/style_setter.js b/src/services/style_setter/style_setter.js
	index 318978264e..d42c5793fa 100644
	--- a/src/services/style_setter/style_setter.js
	+++ b/src/services/style_setter/style_setter.js
	@@ -1,367 +1,373 @@
	import sum from 'hash-sum'
	import localforage from 'localforage'
	import { chunk, throttle } from 'lodash'

	import { getCssRules } from '../theme_data/css_utils.js'
	import { getEngineChecksum, init } from '../theme_data/theme_data_3.service.js'

	import { useMergedConfigStore } from 'src/stores/merged_config.js'
	import { useSyncConfigStore } from 'src/stores/sync_config.js'

	import { promisedRequest } from 'src/api/helpers.js'
	import { ROOT_CONFIG } from 'src/modules/default_config_state.js'

	// On platforms where this is not supported, it will return undefined
	// Otherwise it will return an array
	const supportsAdoptedStyleSheets = !!document.adoptedStyleSheets

	const stylesheets = {}

	export const createStyleSheet = (id, priority = 1000) => {
	if (stylesheets[id]) return stylesheets[id]
	const newStyleSheet = {
	rules: [],
	ready: false,
	priority,
	clear() {
	this.rules = []
	},
	addRule(rule) {
	let newRule = rule
	if (!CSS.supports?.('backdrop-filter', 'blur()')) {
	newRule = newRule.replaceAll(/backdrop-filter:[^;]+;/g, '') // Remove backdrop-filter
	}

	if (newRule.startsWith('::-webkit')) {
	if (typeof CSS.supports !== 'function') return
	// firefox doesn't like invalid selectors
	const fullWebkitScrollbarSupport =
	CSS.supports('selector(::-webkit-scrollbar)') &&
	CSS.supports('selector(::-webkit-scrollbar-button)') &&
	CSS.supports('selector(::-webkit-resizer)') &&
	CSS.supports('selector(::-webkit-scrollbar-thumb)')
	if (!fullWebkitScrollbarSupport) return
	}

	this.rules.push(
	newRule.replaceAll(/var$--shadowFilter$[^;]*;/g, ''), // Remove shadowFilter references
	)
	},
	}

	stylesheets[id] = newStyleSheet
	return newStyleSheet
	}

	export const adoptStyleSheets = throttle(() => {
	if (supportsAdoptedStyleSheets) {
	document.adoptedStyleSheets = Object.values(stylesheets)
	.filter((x) => x.ready)
	.sort((a, b) => a.priority - b.priority)
	.map((sheet) => {
	const css = new CSSStyleSheet()
	sheet.rules.forEach((r) => {
	try {
	css.insertRule(r)
	} catch (e) {
	console.warn('Error inserting rule:', e, r)
	}
	})
	return css
	})
	} else {
	const holder = document.getElementById('custom-styles-holder')

	for (let i = holder.sheet.cssRules.length - 1; i >= 0; --i) {
	holder.sheet.deleteRule(i)
	}

	Object.values(stylesheets)
	.filter((x) => x.ready)
	.sort((a, b) => a.priority - b.priority)
	.forEach((sheet) => {
	sheet.rules.forEach((r) => holder.sheet.insertRule(r))
	})
	}
	// Some older browsers do not support document.adoptedStyleSheets.
	// In this case, we use the <style> elements.
	// Since the <style> elements we need are already in the DOM, there
	// is nothing to do here.
	}, 500)

	const EAGER_STYLE_ID = 'pleroma-eager-styles'
	const LAZY_STYLE_ID = 'pleroma-lazy-styles'

	+export const hasInvalidCachedThemeRules = (data) =>
	+ data
	+ .flat()
	+ .some((rule) => /--(?:mono)?font:\s*\[object Object\](?:;\|$)/i.test(rule))
	+
	const generateTheme = (inputRuleset, callbacks, debug) => {
	const {
	onNewRule = () => {
	/* no-op */
	},
	onLazyFinished = () => {
	/* no-op */
	},
	onEagerFinished = () => {
	/* no-op */
	},
	} = callbacks

	const themes3 = init({
	inputRuleset,
	debug,
	})

	getCssRules(themes3.eager, debug).forEach((rule) => {
	// Hacks to support multiple selectors on same component
	onNewRule(rule, false)
	})
	onEagerFinished()

	// Optimization - instead of processing all lazy rules in one go, process them in small chunks
	// so that UI can do other things and be somewhat responsive while less important rules are being
	// processed
	let counter = 0
	const chunks = chunk(themes3.lazy, 200)
	// let t0 = performance.now()
	const processChunk = () => {
	const chunk = chunks[counter]
	Promise.all(chunk.map((x) => x())).then((result) => {
	getCssRules(result.filter(Boolean), debug).forEach((rule) => {
	onNewRule(rule, true)
	})
	// const t1 = performance.now()
	// console.debug('Chunk ' + counter + ' took ' + (t1 - t0) + 'ms')
	// t0 = t1
	counter += 1
	if (counter < chunks.length) {
	setTimeout(processChunk, 0)
	} else {
	onLazyFinished()
	}
	})
	}

	return { lazyProcessFunc: processChunk }
	}

	export const tryLoadCache = async () => {
	console.info('Trying to load compiled theme data from cache')
	const cache = await localforage.getItem('pleromafe-theme-cache')
	if (!cache) return null
	try {
	if (
	cache.engineChecksum === getEngineChecksum() &&
	cache.checksum !== undefined &&
	- cache.checksum === useMergedConfigStore().mergedConfig.themeChecksum
	+ cache.checksum === useMergedConfigStore().mergedConfig.themeChecksum &&
	+ !hasInvalidCachedThemeRules(cache.data)
	) {
	const eagerStyles = createStyleSheet(EAGER_STYLE_ID, 10)
	const lazyStyles = createStyleSheet(LAZY_STYLE_ID, 20)

	cache.data[0].forEach((rule) => eagerStyles.addRule(rule))
	cache.data[1].forEach((rule) => lazyStyles.addRule(rule))

	eagerStyles.ready = true
	lazyStyles.ready = true

	console.info(`Loaded theme from cache`)
	return true
	} else {
	console.warn("Checksums don't match, cache not usable, clearing")
	localStorage.removeItem('pleroma-fe-theme-cache')
	}
	} catch (e) {
	console.error('Failed to load theme cache:', e)
	return false
	}
	}

	export const applyTheme = (
	input,
	onEagerFinish = () => {
	/* no-op */
	},
	onFinish = () => {
	/* no-op */
	},
	debug,
	) => {
	const eagerStyles = createStyleSheet(EAGER_STYLE_ID, 10)
	const lazyStyles = createStyleSheet(LAZY_STYLE_ID, 20)

	eagerStyles.clear()
	lazyStyles.clear()

	const { lazyProcessFunc } = generateTheme(
	input,
	{
	onNewRule(rule, isLazy) {
	if (isLazy) {
	lazyStyles.addRule(rule)
	} else {
	eagerStyles.addRule(rule)
	}
	},
	onEagerFinished() {
	eagerStyles.ready = true
	adoptStyleSheets()
	onEagerFinish()
	console.info(
	'Eager part of theme finished, waiting for lazy part to finish to store cache',
	)
	},
	onLazyFinished() {
	lazyStyles.ready = true
	adoptStyleSheets()
	const data = [eagerStyles.rules, lazyStyles.rules]
	const checksum = sum(data)
	const cache = {
	checksum,
	engineChecksum: getEngineChecksum(),
	data,
	}
	useSyncConfigStore().setSimplePrefAndSave({
	path: 'themeChecksum',
	value: checksum,
	})
	onFinish(cache)
	localforage.setItem('pleromafe-theme-cache', cache)
	console.info('Theme cache stored')
	},
	},
	debug,
	)

	setTimeout(lazyProcessFunc, 0)
	}

	const extractStyleConfig = ({
	sidebarColumnWidth,
	contentColumnWidth,
	notifsColumnWidth,
	themeEditorMinWidth,
	emojiReactionsScale,
	emojiSize,
	navbarSize,
	panelHeaderSize,
	textSize,
	forcedRoundness,
	}) => {
	const result = {
	sidebarColumnWidth,
	contentColumnWidth,
	notifsColumnWidth,
	themeEditorMinWidth:
	Number.parseInt(themeEditorMinWidth) === 0
	? 'fit-content'
	: themeEditorMinWidth,
	emojiReactionsScale,
	emojiSize,
	navbarSize,
	panelHeaderSize,
	textSize,
	}

	switch (forcedRoundness) {
	case 'disable':
	break
	case '0':
	result.forcedRoundness = '0'
	break
	case '1':
	result.forcedRoundness = '1px'
	break
	case '2':
	result.forcedRoundness = '0.4rem'
	break
	default:
	}

	return result
	}

	const defaultStyleConfig = extractStyleConfig(ROOT_CONFIG)

	export const applyStyleConfig = (input) => {
	const config = extractStyleConfig(input)

	if (config === defaultStyleConfig) {
	return
	}

	const rules = Object.entries(config)
	.filter(([, v]) => v)
	.map(([k, v]) => `--${k}: ${v}`)
	.join(';')

	const styleSheet = createStyleSheet('theme-holder', 30)

	styleSheet.clear()
	styleSheet.addRule(`:root { ${rules} }`)

	// TODO find a way to make this not apply to theme previews
	if (Object.hasOwn(config, 'forcedRoundness')) {
	styleSheet.addRule(` *:not(.preview-block) {
	--roundness: var(--forcedRoundness) !important;
	}`)
	}
	styleSheet.ready = true
	adoptStyleSheets()
	}

	export const getResourcesIndex = async (url, parser = (x) => x) => {
	const cache = 'no-store'
	const customUrl = url.replace(/\.(\w+)$/, '.custom.$1')
	let builtin
	let custom

	const resourceTransform = (resources) => {
	return Object.entries(resources).map(([k, v]) => {
	if (typeof v === 'object') {
	return [k, () => v]
	} else if (typeof v === 'string') {
	return [
	k,
	() =>
	promisedRequest({
	url: v,
	cache,
	})
	.then(({ data: text }) => parser(text))
	.catch((e) => {
	console.error(e)
	return null
	}),
	]
	} else {
	console.error(`Unknown resource format - ${k} is a ${typeof v}`)
	return [k, null]
	}
	})
	}

	try {
	const { data: builtinData } = await promisedRequest({ url, cache })
	builtin = resourceTransform(builtinData)
	} catch {
	builtin = []
	console.warn(`Builtin resources at ${url} unavailable`)
	}

	try {
	const { data: customData } = await promisedRequest({
	url: customUrl,
	cache,
	})
	custom = resourceTransform(customData)
	} catch {
	custom = []
	console.warn(`Custom resources at ${customUrl} unavailable`)
	}

	const total = [...custom, ...builtin]
	if (total.length === 0) {
	throw new Error(
	`Resource at ${url} and ${customUrl} completely unavailable. Panicking`,
	)
	}
	return Object.fromEntries(total)
	}
	diff --git a/src/services/theme_data/theme2_to_theme3.js b/src/services/theme_data/theme2_to_theme3.js
	index 8c3ac6ad2a..48afe4ad92 100644
	--- a/src/services/theme_data/theme2_to_theme3.js
	+++ b/src/services/theme_data/theme2_to_theme3.js
	@@ -1,584 +1,584 @@
	import { convert } from 'chromatism'

	import allKeys from './theme2_keys'

	// keys that are meant to be used globally, i.e. what's the rest of the theme is based upon.
	export const basePaletteKeys = new Set([
	'bg',
	'fg',
	'text',
	'link',
	'accent',

	'cBlue',
	'cRed',
	'cGreen',
	'cOrange',

	'wallpaper',
	])

	export const fontsKeys = new Set(['interface', 'input', 'post', 'postCode'])

	export const opacityKeys = new Set([
	'alert',
	'alertPopup',
	'bg',
	'border',
	'btn',
	'faint',
	'input',
	'panel',
	'popover',
	'profileTint',
	'underlay',
	])

	export const shadowsKeys = new Set([
	'panel',
	'topBar',
	'popup',
	'avatar',
	'avatarStatus',
	'panelHeader',
	'button',
	'buttonHover',
	'buttonPressed',
	'input',
	])

	export const radiiKeys = new Set([
	'btn',
	'input',
	'checkbox',
	'panel',
	'avatar',
	'avatarAlt',
	'tooltip',
	'attachment',
	'chatMessage',
	])

	// Keys that are not available in editor and never meant to be edited
	export const hiddenKeys = new Set(['profileBg', 'profileTint'])

	export const extendedBasePrefixes = [
	'border',
	'icon',
	'highlight',
	'lightText',

	'popover',

	'panel',
	'topBar',
	'tab',
	'btn',
	'input',
	'selectedMenu',

	'alert',
	'alertPopup',
	'badge',

	'post',
	'selectedPost', // wrong nomenclature
	'poll',

	'chatBg',
	'chatMessage',
	]
	export const nonComponentPrefixes = new Set([
	'border',
	'icon',
	'highlight',
	'lightText',
	'chatBg',
	])

	export const extendedBaseKeys = Object.fromEntries(
	extendedBasePrefixes.map((prefix) => [
	prefix,
	allKeys.filter((k) => {
	if (prefix === 'alert') {
	return k.startsWith(prefix) && !k.startsWith('alertPopup')
	}
	return k.startsWith(prefix)
	}),
	]),
	)

	// Keysets that are only really used intermideately, i.e. to generate other colors
	export const temporary = new Set(['', 'highlight'])

	export const temporaryColors = {}

	export const convertTheme2To3 = (data) => {
	data.colors.accent = data.colors.accent \|\| data.colors.link
	data.colors.link = data.colors.link \|\| data.colors.accent
	const generateRoot = () => {
	const directives = {}
	basePaletteKeys.forEach((key) => {
	directives['--' + key] = 'color \| ' + convert(data.colors[key]).hex
	})
	return {
	component: 'Root',
	directives,
	}
	}

	const convertOpacity = () => {
	const newRules = []
	Object.keys(data.opacity \|\| {}).forEach((key) => {
	if (!opacityKeys.has(key) \|\| data.opacity[key] === undefined) return null
	const originalOpacity = data.opacity[key]
	const rule = { source: '2to3' }

	switch (key) {
	case 'alert':
	rule.component = 'Alert'
	break
	case 'alertPopup':
	rule.component = 'Alert'
	rule.parent = { component: 'Popover' }
	break
	case 'bg':
	rule.component = 'Panel'
	break
	case 'border':
	rule.component = 'Border'
	break
	case 'btn':
	rule.component = 'Button'
	break
	case 'faint':
	rule.component = 'Text'
	rule.state = ['faint']
	break
	case 'input':
	rule.component = 'Input'
	break
	case 'panel':
	rule.component = 'PanelHeader'
	break
	case 'popover':
	rule.component = 'Popover'
	break
	case 'profileTint':
	return null
	case 'underlay':
	rule.component = 'Underlay'
	break
	}

	switch (key) {
	case 'alert':
	case 'alertPopup':
	case 'bg':
	case 'btn':
	case 'input':
	case 'panel':
	case 'popover':
	case 'underlay':
	rule.directives = { opacity: originalOpacity }
	break
	case 'faint':
	case 'border':
	rule.directives = { textOpacity: originalOpacity }
	break
	}

	newRules.push(rule)

	if (rule.component === 'Button') {
	newRules.push(
	{ ...rule, component: 'ScrollbarElement' },
	{ ...rule, component: 'Tab' },
	{
	...rule,
	component: 'Tab',
	state: ['active'],
	directives: { opacity: 0 },
	},
	)
	}
	if (rule.component === 'Panel') {
	newRules.push({ ...rule, component: 'Post' })
	}
	})
	return newRules
	}

	const convertRadii = () => {
	const newRules = []
	Object.keys(data.radii \|\| {}).forEach((key) => {
	if (!radiiKeys.has(key) \|\| data.radii[key] === undefined) return null
	const originalRadius = data.radii[key]
	const rule = { source: '2to3' }

	switch (key) {
	case 'btn':
	rule.component = 'Button'
	break
	case 'tab':
	rule.component = 'Tab'
	break
	case 'input':
	rule.component = 'Input'
	break
	case 'checkbox':
	rule.component = 'Input'
	rule.variant = 'checkbox'
	break
	case 'panel':
	rule.component = 'Panel'
	break
	case 'avatar':
	rule.component = 'Avatar'
	break
	case 'avatarAlt':
	rule.component = 'Avatar'
	rule.variant = 'compact'
	break
	case 'tooltip':
	rule.component = 'Popover'
	break
	case 'ChatMessage':
	rule.component = 'Button'
	break
	}
	rule.directives = {
	roundness: originalRadius,
	}
	newRules.push(rule)
	if (rule.component === 'Button') {
	newRules.push(
	{ ...rule, component: 'ScrollbarElement' },
	{ ...rule, component: 'Tab' },
	)
	}
	})
	return newRules
	}

	const convertFonts = () => {
	const newRules = []
	Object.keys(data.fonts \|\| {}).forEach((key) => {
	if (!fontsKeys.has(key)) return
	if (!data.fonts[key]) return
	- const originalFont = data.fonts[key]
	+ const originalFont = data.fonts[key].family
	const rule = { source: '2to3' }

	switch (key) {
	case 'interface':
	case 'postCode':
	rule.component = 'Root'
	break
	case 'input':
	rule.component = 'Input'
	break
	case 'post':
	rule.component = 'RichContent'
	break
	}
	switch (key) {
	case 'interface':
	case 'input':
	case 'post':
	rule.directives = { '--font': 'generic \| ' + originalFont }
	break
	case 'postCode':
	rule.directives = { '--monoFont': 'generic \| ' + originalFont }
	newRules.push({ ...rule, component: 'RichContent' })
	break
	}
	newRules.push(rule)
	})
	return newRules
	}
	const convertShadows = () => {
	const newRules = []
	Object.keys(data.shadows \|\| {}).forEach((key) => {
	if (!shadowsKeys.has(key)) return
	const originalShadow = data.shadows[key]
	const rule = { source: '2to3' }

	switch (key) {
	case 'panel':
	rule.component = 'Panel'
	break
	case 'topBar':
	rule.component = 'TopBar'
	break
	case 'popup':
	rule.component = 'Popover'
	break
	case 'avatar':
	rule.component = 'Avatar'
	break
	case 'avatarStatus':
	rule.component = 'Avatar'
	rule.parent = { component: 'Post' }
	break
	case 'panelHeader':
	rule.component = 'PanelHeader'
	break
	case 'button':
	rule.component = 'Button'
	break
	case 'buttonHover':
	rule.component = 'Button'
	rule.state = ['hover']
	break
	case 'buttonPressed':
	rule.component = 'Button'
	rule.state = ['pressed']
	break
	case 'input':
	rule.component = 'Input'
	break
	}
	rule.directives = {
	shadow: originalShadow,
	}
	newRules.push(rule)
	if (key === 'topBar') {
	newRules.push({
	...rule,
	component: 'PanelHeader',
	parent: { component: 'MobileDrawer' },
	})
	}
	if (key === 'avatarStatus') {
	newRules.push({ ...rule, parent: { component: 'Notification' } })
	}
	if (key === 'buttonPressed') {
	newRules.push(
	{ ...rule, state: ['toggled'] },
	{ ...rule, state: ['toggled', 'focus'] },
	{ ...rule, state: ['pressed', 'focus'] },
	{ ...rule, state: ['toggled', 'focus', 'hover'] },
	{ ...rule, state: ['pressed', 'focus', 'hover'] },
	)
	}

	if (rule.component === 'Button') {
	newRules.push(
	{ ...rule, component: 'ScrollbarElement' },
	{ ...rule, component: 'Tab' },
	)
	}
	})
	return newRules
	}

	const extendedRules = Object.entries(extendedBaseKeys).map(
	([prefix, keys]) => {
	if (nonComponentPrefixes.has(prefix)) return null
	const rule = { source: '2to3' }
	if (prefix === 'alertPopup') {
	rule.component = 'Alert'
	rule.parent = { component: 'Popover' }
	} else if (prefix === 'selectedPost') {
	rule.component = 'Post'
	rule.state = ['selected']
	} else if (prefix === 'selectedMenu') {
	rule.component = 'MenuItem'
	rule.state = ['hover']
	} else if (prefix === 'chatMessageIncoming') {
	rule.component = 'ChatMessage'
	} else if (prefix === 'chatMessageOutgoing') {
	rule.component = 'ChatMessage'
	rule.variant = 'outgoing'
	} else if (prefix === 'panel') {
	rule.component = 'PanelHeader'
	} else if (prefix === 'topBar') {
	rule.component = 'TopBar'
	} else if (prefix === 'chatMessage') {
	rule.component = 'ChatMessage'
	} else if (prefix === 'poll') {
	rule.component = 'PollGraph'
	} else if (prefix === 'btn') {
	rule.component = 'Button'
	} else {
	rule.component = prefix[0].toUpperCase() + prefix.slice(1).toLowerCase()
	}
	return keys.map((key) => {
	if (!data.colors[key]) return null
	const leftoverKey = key.replace(prefix, '')
	const parts = (leftoverKey \|\| 'Bg').match(/[A-Z][a-z]*/g)
	const last = parts.slice(-1)[0]
	let newRule = { source: '2to3', directives: {} }
	let variantArray = []

	switch (last) {
	case 'Text':
	case 'Faint': // typo
	case 'Link':
	case 'Icon':
	case 'Greentext':
	case 'Cyantext':
	case 'Border':
	newRule.parent = rule
	newRule.directives.textColor = data.colors[key]
	variantArray = parts.slice(0, -1)
	break
	default:
	newRule = { ...rule, directives: {} }
	newRule.directives.background = data.colors[key]
	variantArray = parts
	break
	}

	if (last === 'Text' \|\| last === 'Link') {
	const secondLast = parts.slice(-2)[0]
	if (secondLast === 'Light') {
	return null // unsupported
	} else if (secondLast === 'Faint') {
	newRule.state = ['faint']
	variantArray = parts.slice(0, -2)
	}
	}

	switch (last) {
	case 'Text':
	case 'Link':
	case 'Icon':
	case 'Border':
	newRule.component = last
	break
	case 'Greentext':
	case 'Cyantext':
	newRule.component = 'FunText'
	newRule.variant = last.toLowerCase()
	break
	case 'Faint':
	newRule.component = 'Text'
	newRule.state = ['faint']
	break
	}

	variantArray = variantArray.filter((x) => x !== 'Bg')

	if (last === 'Link' && prefix === 'selectedPost') {
	// selectedPost has typo - duplicate 'Post'
	variantArray = variantArray.filter((x) => x !== 'Post')
	}

	if (prefix === 'popover' && variantArray[0] === 'Post') {
	newRule.component = 'Post'
	newRule.parent = { source: '2to3hack', component: 'Popover' }
	variantArray = variantArray.filter((x) => x !== 'Post')
	}

	if (prefix === 'selectedMenu' && variantArray[0] === 'Popover') {
	newRule.parent = { source: '2to3hack', component: 'Popover' }
	variantArray = variantArray.filter((x) => x !== 'Popover')
	}

	switch (prefix) {
	case 'btn':
	case 'input':
	case 'alert': {
	const hasPanel = variantArray.find((x) => x === 'Panel')
	if (hasPanel) {
	newRule.parent = {
	source: '2to3hack',
	component: 'PanelHeader',
	parent: newRule.parent,
	}
	variantArray = variantArray.filter((x) => x !== 'Panel')
	}
	const hasTop = variantArray.find((x) => x === 'Top') // TopBar
	if (hasTop) {
	newRule.parent = {
	source: '2to3hack',
	component: 'TopBar',
	parent: newRule.parent,
	}
	variantArray = variantArray.filter(
	(x) => x !== 'Top' && x !== 'Bar',
	)
	}
	break
	}
	}

	if (variantArray.length > 0) {
	if (prefix === 'btn') {
	newRule.state = variantArray.map((x) => x.toLowerCase())
	} else {
	newRule.variant = variantArray[0].toLowerCase()
	}
	}

	if (newRule.component === 'Panel') {
	return [newRule, { ...newRule, component: 'MobileDrawer' }]
	} else if (newRule.component === 'Button') {
	const rules = [
	newRule,
	{ ...newRule, component: 'Tab' },
	{ ...newRule, component: 'ScrollbarElement' },
	]
	if (newRule.state?.includes('toggled')) {
	rules.push(
	{ ...newRule, state: [...newRule.state, 'focused'] },
	{ ...newRule, state: [...newRule.state, 'hover'] },
	{
	...newRule,
	state: [...newRule.state, 'hover', 'focused'],
	},
	)
	}
	if (newRule.state?.includes('hover')) {
	rules.push({ ...newRule, state: [...newRule.state, 'focused'] })
	}
	return rules
	} else if (newRule.component === 'Badge') {
	if (newRule.variant === 'notification') {
	return [
	newRule,
	{
	component: 'Root',
	directives: {
	'--badgeNotification':
	'color \| ' + newRule.directives.background,
	},
	},
	]
	} else if (newRule.variant === 'neutral') {
	return [{ ...newRule, variant: 'normal' }]
	} else {
	return [newRule]
	}
	} else if (newRule.component === 'TopBar') {
	return [
	newRule,
	{
	...newRule,
	parent: { component: 'MobileDrawer' },
	component: 'PanelHeader',
	},
	]
	} else {
	return [newRule]
	}
	})
	},
	)

	const flatExtRules = extendedRules
	.filter(Boolean)
	.flat()
	.filter(Boolean)
	.flat()

	return [
	generateRoot(),
	...convertShadows(),
	...convertRadii(),
	...convertOpacity(),
	...convertFonts(),
	...flatExtRules,
	]
	}
	diff --git a/test/unit/specs/services/style_setter/style_setter.spec.js b/test/unit/specs/services/style_setter/style_setter.spec.js
	new file mode 100644
	index 0000000000..c1bacdfa13
	--- /dev/null
	+++ b/test/unit/specs/services/style_setter/style_setter.spec.js
	@@ -0,0 +1,24 @@
	+import { hasInvalidCachedThemeRules } from 'src/services/style_setter/style_setter.js'
	+
	+describe('style setter cache', () => {
	+ it('rejects cached rules containing serialized objects', () => {
	+ expect(
	+ hasInvalidCachedThemeRules([
	+ ['html { --font: [object Object]; }'],
	+ ['.post { --font: sans-serif; }'],
	+ ]),
	+ ).to.equal(true)
	+ })
	+
	+ it('accepts cached rules containing valid font families', () => {
	+ expect(
	+ hasInvalidCachedThemeRules([
	+ ['html { --font: sans-serif; }'],
	+ [
	+ '.post { --font: "Atkinson Hyperlegible"; }',
	+ '.post::after { content: "[object Object]"; }',
	+ ],
	+ ]),
	+ ).to.equal(false)
	+ })
	+})
	diff --git a/test/unit/specs/services/theme_data/theme2_to_theme3.spec.js b/test/unit/specs/services/theme_data/theme2_to_theme3.spec.js
	new file mode 100644
	index 0000000000..7165d88db4
	--- /dev/null
	+++ b/test/unit/specs/services/theme_data/theme2_to_theme3.spec.js
	@@ -0,0 +1,42 @@
	+import {
	+ basePaletteKeys,
	+ convertTheme2To3,
	+} from 'src/services/theme_data/theme2_to_theme3.js'
	+
	+describe('Theme 2 to Theme 3 conversion', () => {
	+ it('converts font descriptors to CSS font families', () => {
	+ const colors = Object.fromEntries(
	+ [...basePaletteKeys].map((key) => [key, '#000000']),
	+ )
	+ const rules = convertTheme2To3({
	+ colors,
	+ fonts: {
	+ interface: { family: 'sans-serif' },
	+ input: { family: 'Open Sans' },
	+ post: { family: 'Atkinson Hyperlegible' },
	+ postCode: { family: 'monospace' },
	+ },
	+ })
	+
	+ expect(rules).to.deep.include({
	+ source: '2to3',
	+ component: 'Root',
	+ directives: { '--font': 'generic \| sans-serif' },
	+ })
	+ expect(rules).to.deep.include({
	+ source: '2to3',
	+ component: 'Root',
	+ directives: { '--monoFont': 'generic \| monospace' },
	+ })
	+ expect(rules).to.deep.include({
	+ source: '2to3',
	+ component: 'Input',
	+ directives: { '--font': 'generic \| Open Sans' },
	+ })
	+ expect(rules).to.deep.include({
	+ source: '2to3',
	+ component: 'RichContent',
	+ directives: { '--font': 'generic \| Atkinson Hyperlegible' },
	+ })
	+ })
	+})

File Metadata

Mime Type: text/x-diff
Expires: Sat, Oct 31, 9:03 AM (19 h, 6 m)
Storage Engine: blob
Storage Format: Raw Data
Storage Handle: 1801203
Default Alt Text: (29 KB)

No OneTemporaryActions

View Options

File Metadata

Event Timeline

No OneTemporary
Actions