Safe postcss values parser

Author: romainmenke

plugins/postcss-image-set-function/.tape.js

@@ -1,9 +1,11 @@
 module.exports = {
 	'basic': {
-		message: 'supports basic usage'
+		message: 'supports basic usage',
+		warnings: 2,
 	},
 	'basic:no-preserve': {
 		message: 'supports { preserve: false } usage',
+		warnings: 2,
 		options: {
 			preserve: false
 		}

plugins/postcss-image-set-function/index.js

@@ -22,7 +22,20 @@ module.exports = function creator(opts) {
 
 				// if a declaration likely uses an image-set() function
 				if (imageSetValueMatchRegExp.test(value)) {
-					const valueAST = parse(value);
+					let valueAST
+
+					try {
+						valueAST = parse(value, { ignoreUnknownWords: true })
+					} catch (error) {
+						decl.warn(
+							helpers.result,
+							`Failed to parse value '${value}' as an image-set function. Leaving the original value intact.`
+						)
+					}
+
+					if (typeof valueAST === 'undefined') {
+						return
+					}
 
 					// process every image-set() function
 					valueAST.walkFuncs(node => {

plugins/postcss-image-set-function/test/basic.css

@@ -103,3 +103,8 @@
 		);
 	}
 }
+
+.test-unparseable-image-set-function {
+	background-image: image-set(url(data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==) 1x, url(img/test-2x.png) 2x);
+	background-image: image-set(data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==, url(img/test-2x.png) 2x);
+}

plugins/postcss-image-set-function/test/basic.expect.css

@@ -285,3 +285,8 @@
 		);
 	}
 }
+
+.test-unparseable-image-set-function {
+	background-image: image-set(url(data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==) 1x, url(img/test-2x.png) 2x);
+	background-image: image-set(data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==, url(img/test-2x.png) 2x);
+}

plugins/postcss-image-set-function/test/basic.no-preserve.expect.css

@@ -230,3 +230,8 @@
 	}
 	}
 }
+
+.test-unparseable-image-set-function {
+	background-image: image-set(url(data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==) 1x, url(img/test-2x.png) 2x);
+	background-image: image-set(data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==, url(img/test-2x.png) 2x);
+}