import themeVariablesMapping from '@page-creator/_data/theme-variables.json';
const DEFAULT_THEME = 'extendable';
const esc = (s) => s.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
const buildColorReplacements = (slugs = {}) => {
const out = {};
Object.entries(slugs).forEach(([from, to]) => {
out[`"backgroundColor":"${from}"`] = `"backgroundColor":"${to}"`;
out[`"textColor":"${from}"`] = `"textColor":"${to}"`;
out[`"linkColor":"${from}"`] = `"linkColor":"${to}"`;
out[`has-${from}-background-color`] = `has-${to}-background-color`;
out[`has-${from}-color`] = `has-${to}-color`;
out[`has-${from}-link-color`] = `has-${to}-link-color`;
out[`var:preset|color|${from}`] = `var:preset|color|${to}`;
out[`var(--wp--preset--color--${from})`] =
`var(--wp--preset--color--${to})`;
});
return out;
};
const buildSpacingReplacements = (scale = {}) => {
const out = {};
Object.entries(scale).forEach(([from, to]) => {
const toVar = to.startsWith('min(') ? to : `var:preset|spacing|${to}`;
const toCss = to.startsWith('min(')
? to
: `var(--wp--preset--spacing--${to})`;
out[`var:preset|spacing|${from}`] = toVar;
out[`var(--wp--preset--spacing--${from})`] = toCss;
});
return out;
};
const buildFontSizeReplacements = (scale = {}) => {
const out = {};
Object.entries(scale).forEach(([from, to]) => {
out[`"fontSize":"${from}"`] = `"fontSize":"${to}"`;
out[`has-${from}-font-size`] = `has-${to}-font-size`;
});
return out;
};
export function replaceThemeVariables(code = '', themeSlug = DEFAULT_THEME) {
if (!code || themeSlug === DEFAULT_THEME) return code;
const theme = themeVariablesMapping[themeSlug];
if (!theme) return code;
const map = {
...buildColorReplacements(theme.colorSlugs),
...buildSpacingReplacements(theme.spacingScale),
...buildFontSizeReplacements(theme.fontSizeScale),
};
console.log('map', map);
// Kadence has a different color palette string and slug format and we need to remove the dash from the color variables
if (themeSlug === 'kadence') {
Object.keys(map).forEach((key) => {
if (
(key.startsWith('"backgroundColor":') ||
key.startsWith('"textColor":') ||
key.startsWith('"linkColor":')) &&
map[key].includes('theme-palette-')
) {
map[key] = map[key].replace(/theme-palette-(\d+)/, 'theme-palette$1');
}
});
}
if (!Object.keys(map).length) return code;
const pattern = new RegExp(Object.keys(map).map(esc).join('|'), 'g');
return code.replace(pattern, (m) => map[m] ?? m);
}