Merge pull request #131 from posthtml/feat/safe-parser

lib/index.js

@@ -1,6 +1,7 @@
 'use strict'
 
 const postcss = require('postcss')
+const safe = require('postcss-safe-parser')
 const mergeLonghand = require('postcss-merge-longhand')
 
 module.exports = (options = {}) => tree => {
@@ -14,7 +15,7 @@ module.exports = (options = {}) => tree => {
     }
 
     if (node.attrs && node.attrs.style) {
-      const {css} = postcss().use(mergeLonghand).process(`div { ${node.attrs.style} }`)
+      const {css} = postcss().use(mergeLonghand).process(`div { ${node.attrs.style} }`, {parser: safe})
       node.attrs.style = css.replace(/div {\s|\s}$/gm, '')
     }
 

package.json

@@ -23,13 +23,15 @@
     "postcss",
     "inline-styles",
     "inline-css",
-    "inline-css",
+    "merge-styles",
+    "merge-css",
     "longhand",
     "shorthand"
   ],
   "dependencies": {
     "postcss": "^8.1.10",
     "postcss-merge-longhand": "^6.0.0",
+    "postcss-safe-parser": "^7.0.0",
     "posthtml": "^0.16.4"
   },
   "devDependencies": {

test/expected/parser.html

@@ -0,0 +1 @@
+<div style="margin: 0 auto">margin</div>

test/fixtures/parser.html

@@ -0,0 +1 @@
+<div style="margin-top: 0; margin-bottom: 0 margin-left: auto; margin-right: auto">margin</div>

test/test.js

@@ -27,3 +27,7 @@ test('Preserves other properties', t => {
 test('Works with tags option', t => {
   return process(t, 'tags', {tags: ['div', 'p']})
 })
+
+test('Works with bad CSS', t => {
+  return process(t, 'parser')
+})