Merge pull request #1512 from maizzle/fix-preferunitlessvalues

Author: cossssmin

src/transformers/inline.js

@@ -189,30 +189,31 @@ export async function inline(html = '', options = {}) {
 
           // 1. `preferUnitlessValues`
           if (styleAttr) {
-            // Parse the inline styles using postcss
-            const root = postcss.parse(`* { ${styleAttr} }`)
-
-            root.first.each((decl) => {
-              const property = decl.prop
-              let value = decl.value
-
-              if (value && options.preferUnitlessValues) {
-                value = value.replace(
-                  /\b0(px|rem|em|%|vh|vw|vmin|vmax|in|cm|mm|pt|pc|ex|ch)\b/g,
-                  '0'
-                )
-              }
-
-              if (property) {
-                inlineStyles[property] = value
-              }
-            })
-
-            // Update the element's style attribute with the new value
-            $(el).attr(
-              'style',
-              Object.entries(inlineStyles).map(([property, value]) => `${property}: ${value}`).join('; ')
-            )
+            try {
+              const root = postcss.parse(`* { ${styleAttr} }`)
+
+              root.first.each((decl) => {
+                const property = decl.prop
+                let value = decl.value
+
+                if (value && options.preferUnitlessValues) {
+                  value = value.replace(
+                    /\b0(px|rem|em|%|vh|vw|vmin|vmax|in|cm|mm|pt|pc|ex|ch)\b/g,
+                    '0'
+                  )
+                }
+
+                if (property) {
+                  inlineStyles[property] = value
+                }
+              })
+
+              // Update the element's style attribute with the new value
+              $(el).attr(
+                'style',
+                Object.entries(inlineStyles).map(([property, value]) => `${property}: ${value}`).join('; ')
+              )
+            } catch {}
           }
 
           // Get the classes from the element's class attribute

test/transformers/inlineCSS.test.js

@@ -138,6 +138,19 @@ describe.concurrent('Inline CSS', () => {
       <p style="margin: 0px">test</p>`))
   })
 
+  test('`preferUnitlessValues` skips invalid inline CSS', async () => {
+    const result = cleanString(
+      await inlineCSS(`
+        <style>.m-0 {margin: 0px}</style>
+        <p class="m-0" style="color: #{{ $foo->theme }}">test</p>`
+      )
+    )
+
+    expect(result).toBe(cleanString(`
+      <style></style>
+      <p class="m-0" style="margin: 0px; color: #{{ $foo->theme }};">test</p>`))
+  })
+
   test('Works with `excludedProperties` option', async () => {
     expect(
       cleanString(