Мы хотели бы преобразовать стиль CSS, введенный в виде строки, в объект JS.
Например,
var input = " border:solid 1px; color:red ";
ожидаемый объект JS:
{
border:"solid 1px",
color:"red"
}
Конечно, количество элементов стиля не ограничено, как и имена стилей (граница, цвет, шрифт, z-индекс и т. Д.). Спасибо.
Если Вы хотите теговый шаблонный синтаксис литерала, который работает легко с, Реагируют, Вы могли сделать
const camelCase = str => str.replace(/-(.)/g, (_,p) => p.toUpperCase())
const css2obj = (strings, ...vals) => {
const css = strings.reduce((acc, str, i) => acc + str + (vals[i] || ''), '')
const r = /(?<=^|;)\s*([^:]+)\s*:\s*([^;]+)\s*/g, o = {};
css.replace(r, (m,p,v) => o[camelCase(p)] = v);
return o;
}
const center = 'center'
const reactInlineCSS = css2obj`
align-items: ${center};
justify-content: ${center};
`
console.log(reactInlineCSS)