| 1 |
import themeVariablesMapping from '@page-creator/_data/theme-variables.json'; |
| 2 |
|
| 3 |
const DEFAULT_THEME = 'extendable'; |
| 4 |
const esc = (s) => s.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'); |
| 5 |
|
| 6 |
const buildColorReplacements = (slugs = {}) => { |
| 7 |
const out = {}; |
| 8 |
Object.entries(slugs).forEach(([from, to]) => { |
| 9 |
out[`"backgroundColor":"${from}"`] = `"backgroundColor":"${to}"`; |
| 10 |
out[`"textColor":"${from}"`] = `"textColor":"${to}"`; |
| 11 |
out[`"linkColor":"${from}"`] = `"linkColor":"${to}"`; |
| 12 |
|
| 13 |
out[`has-${from}-background-color`] = `has-${to}-background-color`; |
| 14 |
out[`has-${from}-color`] = `has-${to}-color`; |
| 15 |
out[`has-${from}-link-color`] = `has-${to}-link-color`; |
| 16 |
|
| 17 |
out[`var:preset|color|${from}`] = `var:preset|color|${to}`; |
| 18 |
out[`var(--wp--preset--color--${from})`] = |
| 19 |
`var(--wp--preset--color--${to})`; |
| 20 |
}); |
| 21 |
return out; |
| 22 |
}; |
| 23 |
|
| 24 |
const buildSpacingReplacements = (scale = {}) => { |
| 25 |
const out = {}; |
| 26 |
Object.entries(scale).forEach(([from, to]) => { |
| 27 |
const toVar = to.startsWith('min(') ? to : `var:preset|spacing|${to}`; |
| 28 |
const toCss = to.startsWith('min(') |
| 29 |
? to |
| 30 |
: `var(--wp--preset--spacing--${to})`; |
| 31 |
out[`var:preset|spacing|${from}`] = toVar; |
| 32 |
out[`var(--wp--preset--spacing--${from})`] = toCss; |
| 33 |
}); |
| 34 |
return out; |
| 35 |
}; |
| 36 |
|
| 37 |
const buildFontSizeReplacements = (scale = {}) => { |
| 38 |
const out = {}; |
| 39 |
Object.entries(scale).forEach(([from, to]) => { |
| 40 |
out[`"fontSize":"${from}"`] = `"fontSize":"${to}"`; |
| 41 |
out[`has-${from}-font-size`] = `has-${to}-font-size`; |
| 42 |
}); |
| 43 |
return out; |
| 44 |
}; |
| 45 |
|
| 46 |
export function replaceThemeVariables(code = '', themeSlug = DEFAULT_THEME) { |
| 47 |
if (!code || themeSlug === DEFAULT_THEME) return code; |
| 48 |
|
| 49 |
const theme = themeVariablesMapping[themeSlug]; |
| 50 |
if (!theme) return code; |
| 51 |
|
| 52 |
const map = { |
| 53 |
...buildColorReplacements(theme.colorSlugs), |
| 54 |
...buildSpacingReplacements(theme.spacingScale), |
| 55 |
...buildFontSizeReplacements(theme.fontSizeScale), |
| 56 |
}; |
| 57 |
console.log('map', map); |
| 58 |
|
| 59 |
// Kadence has a different color palette string and slug format and we need to remove the dash from the color variables |
| 60 |
if (themeSlug === 'kadence') { |
| 61 |
Object.keys(map).forEach((key) => { |
| 62 |
if ( |
| 63 |
(key.startsWith('"backgroundColor":') || |
| 64 |
key.startsWith('"textColor":') || |
| 65 |
key.startsWith('"linkColor":')) && |
| 66 |
map[key].includes('theme-palette-') |
| 67 |
) { |
| 68 |
map[key] = map[key].replace(/theme-palette-(\d+)/, 'theme-palette$1'); |
| 69 |
} |
| 70 |
}); |
| 71 |
} |
| 72 |
|
| 73 |
if (!Object.keys(map).length) return code; |
| 74 |
|
| 75 |
const pattern = new RegExp(Object.keys(map).map(esc).join('|'), 'g'); |
| 76 |
return code.replace(pattern, (m) => map[m] ?? m); |
| 77 |
} |
| 78 |
|
