diff --git a/html-to-react/src/utils/convertInlineStyleToMap.ts b/html-to-react/src/utils/convertInlineStyleToMap.ts index 1c3866be8..b4c71c5cd 100644 --- a/html-to-react/src/utils/convertInlineStyleToMap.ts +++ b/html-to-react/src/utils/convertInlineStyleToMap.ts @@ -17,9 +17,34 @@ export function convertInlineStyleToMap( return {} } - return inlineStyle - .split(';') - .reduce>((styleObject, stylePropertyValue) => { + const statements: string[] = [] + let i = -1 + let offset = 0 + do { + i++ + let curr = inlineStyle[i] + let prev = inlineStyle[i - 1] + + if ((curr === "'" || curr === '"') && prev !== '\\') { + const quote = curr + do { + i++ + curr = inlineStyle[i] + prev = inlineStyle[i - 1] + } while (!(curr === quote && prev !== '\\') && i < inlineStyle.length) + continue + } + + if (curr === ';' && prev !== '\\') { + statements.push(inlineStyle.slice(offset, i)) + offset = i + 1 + continue + } + } while (i < inlineStyle.length) + statements.push(inlineStyle.slice(offset, inlineStyle.length)) + + return statements.reduce>( + (styleObject, stylePropertyValue) => { // extract the style property name and value const [property, value] = stylePropertyValue .split(/^([^:]+):/) @@ -45,5 +70,7 @@ export function convertInlineStyleToMap( styleObject[replacedProperty] = value return styleObject - }, {}) + }, + {} + ) }