import themeVariablesMapping from '@page-creator/_data/theme-variables.json';

[0] Fix | Delete

[1] Fix | Delete

const DEFAULT_THEME = 'extendable';

[2] Fix | Delete

const esc = (s) => s.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');

[3] Fix | Delete

[4] Fix | Delete

const buildColorReplacements = (slugs = {}) => {

[5] Fix | Delete

const out = {};

[6] Fix | Delete

Object.entries(slugs).forEach(([from, to]) => {

[7] Fix | Delete

out[`"backgroundColor":"${from}"`] = `"backgroundColor":"${to}"`;

[8] Fix | Delete

out[`"textColor":"${from}"`] = `"textColor":"${to}"`;

[9] Fix | Delete

out[`"linkColor":"${from}"`] = `"linkColor":"${to}"`;

[10] Fix | Delete

[11] Fix | Delete

out[`has-${from}-background-color`] = `has-${to}-background-color`;

[12] Fix | Delete

out[`has-${from}-color`] = `has-${to}-color`;

[13] Fix | Delete

out[`has-${from}-link-color`] = `has-${to}-link-color`;

[14] Fix | Delete

[15] Fix | Delete

out[`var:preset|color|${from}`] = `var:preset|color|${to}`;

[16] Fix | Delete

out[`var(--wp--preset--color--${from})`] =

[17] Fix | Delete

`var(--wp--preset--color--${to})`;

[18] Fix | Delete

});

[19] Fix | Delete

return out;

[20] Fix | Delete

};

[21] Fix | Delete

[22] Fix | Delete

const buildSpacingReplacements = (scale = {}) => {

[23] Fix | Delete

const out = {};

[24] Fix | Delete

Object.entries(scale).forEach(([from, to]) => {

[25] Fix | Delete

const toVar = to.startsWith('min(') ? to : `var:preset|spacing|${to}`;

[26] Fix | Delete

const toCss = to.startsWith('min(')

[27] Fix | Delete

? to

[28] Fix | Delete

: `var(--wp--preset--spacing--${to})`;

[29] Fix | Delete

out[`var:preset|spacing|${from}`] = toVar;

[30] Fix | Delete

out[`var(--wp--preset--spacing--${from})`] = toCss;

[31] Fix | Delete

});

[32] Fix | Delete

return out;

[33] Fix | Delete

};

[34] Fix | Delete

[35] Fix | Delete

const buildFontSizeReplacements = (scale = {}) => {

[36] Fix | Delete

const out = {};

[37] Fix | Delete

Object.entries(scale).forEach(([from, to]) => {

[38] Fix | Delete

out[`"fontSize":"${from}"`] = `"fontSize":"${to}"`;

[39] Fix | Delete

out[`has-${from}-font-size`] = `has-${to}-font-size`;

[40] Fix | Delete

});

[41] Fix | Delete

return out;

[42] Fix | Delete

};

[43] Fix | Delete

[44] Fix | Delete

export function replaceThemeVariables(code = '', themeSlug = DEFAULT_THEME) {

[45] Fix | Delete

if (!code || themeSlug === DEFAULT_THEME) return code;

[46] Fix | Delete

[47] Fix | Delete

const theme = themeVariablesMapping[themeSlug];

[48] Fix | Delete

if (!theme) return code;

[49] Fix | Delete

[50] Fix | Delete

const map = {

[51] Fix | Delete

...buildColorReplacements(theme.colorSlugs),

[52] Fix | Delete

...buildSpacingReplacements(theme.spacingScale),

[53] Fix | Delete

...buildFontSizeReplacements(theme.fontSizeScale),

[54] Fix | Delete

};

[55] Fix | Delete

[56] Fix | Delete

// Kadence has a different color palette string and slug format and we need to remove the dash from the color variables

[57] Fix | Delete

if (themeSlug === 'kadence') {

[58] Fix | Delete

Object.keys(map).forEach((key) => {

[59] Fix | Delete

if (

[60] Fix | Delete

(key.startsWith('"backgroundColor":') ||

[61] Fix | Delete

key.startsWith('"textColor":') ||

[62] Fix | Delete

key.startsWith('"linkColor":')) &&

[63] Fix | Delete

map[key].includes('theme-palette-')

[64] Fix | Delete

) {

[65] Fix | Delete

map[key] = map[key].replace(/theme-palette-(\d+)/, 'theme-palette$1');

[66] Fix | Delete

}

[67] Fix | Delete

});

[68] Fix | Delete

}

[69] Fix | Delete

[70] Fix | Delete

if (!Object.keys(map).length) return code;

[71] Fix | Delete

[72] Fix | Delete

const pattern = new RegExp(Object.keys(map).map(esc).join('|'), 'g');

[73] Fix | Delete

return code.replace(pattern, (m) => map[m] ?? m);

[74] Fix | Delete

}

[75] Fix | Delete

[76] Fix | Delete