Safe postcss values parser (#17)

* Dev dependencies using ranges consistently with other packages

* Ignoring unknown words

* If there's an exception during parsing, do not let it blow up

* Adding tests

Author: Antonio-Laguna

.tape.js

@@ -1,9 +1,11 @@
 module.exports = {
 	'basic': {
-		message: 'supports basic usage'
+		message: 'supports basic usage',
+		warnings: 1
 	},
 	'basic:import': {
 		message: 'supports { importFrom: { environmentVariables: { ... } } } usage',
+		warnings: 1,
 		options: {
 			importFrom: {
 				environmentVariables: {
@@ -15,6 +17,7 @@ module.exports = {
 	},
 	'basic:import-fn': {
 		message: 'supports { importFrom() } usage',
+		warnings: 1,
 		options: {
 			importFrom() {
 				return {
@@ -30,6 +33,7 @@ module.exports = {
 	},
 	'basic:import-fn-promise': {
 		message: 'supports { async importFrom() } usage',
+		warnings: 1,
 		options: {
 			importFrom() {
 				return new Promise(resolve => {
@@ -47,6 +51,7 @@ module.exports = {
 	},
 	'basic:import-json': {
 		message: 'supports { importFrom: "test/import-variables.json" } usage',
+		warnings: 1,
 		options: {
 			importFrom: 'test/import-variables.json'
 		},
@@ -55,6 +60,7 @@ module.exports = {
 	},
 	'basic:import-js': {
 		message: 'supports { importFrom: "test/import-variables.js" } usage',
+		warnings: 1,
 		options: {
 			importFrom: 'test/import-variables.js'
 		},
@@ -63,6 +69,7 @@ module.exports = {
 	},
 	'basic:import-cjs': {
 		message: 'supports { importFrom: "test/import-variables.cjs" } usage',
+		warnings: 1,
 		options: {
 			importFrom: 'test/import-variables.cjs'
 		},
@@ -71,6 +78,7 @@ module.exports = {
 	},
 	'basic:import-js-from': {
 		message: 'supports { importFrom: { from: "test/import-variables.js" } } usage',
+		warnings: 1,
 		options: {
 			importFrom: { from: 'test/import-variables.js' }
 		},
@@ -79,6 +87,7 @@ module.exports = {
 	},
 	'basic:import-js-from-type': {
 		message: 'supports { importFrom: [ { from: "test/import-variables.js", type: "js" } ] } usage',
+		warnings: 1,
 		options: {
 			importFrom: [ { from: 'test/import-variables.js', type: 'js' } ]
 		},
@@ -87,6 +96,7 @@ module.exports = {
 	},
 	'basic:import-is-empty': {
 		message: 'supports { importFrom: {} } usage',
+		warnings: 1,
 		options: {
 			importFrom: {}
 		}

package.json

@@ -32,14 +32,14 @@
     "postcss": "^8.3"
   },
   "devDependencies": {
-    "@babel/core": "7.15.8",
-    "@babel/preset-env": "7.15.8",
-    "@rollup/plugin-babel": "5.3.0",
-    "eslint": "8.1.0",
-    "postcss": "8.3.6",
-    "postcss-tape": "6.0.1",
-    "pre-commit": "1.2.2",
-    "rollup": "2.58.3"
+    "@babel/core": "^7.15.8",
+    "@babel/preset-env": "^7.15.8",
+    "@rollup/plugin-babel": "^5.3.0",
+    "eslint": "^8.1.0",
+    "postcss": "^8.3.6",
+    "postcss-tape": "^6.0.1",
+    "pre-commit": "^1.2.2",
+    "rollup": "^2.58.3"
   },
   "babel": {
     "presets": [

src/index.js

@@ -14,15 +14,41 @@ export default function creator(opts) {
 
 	return {
 		postcssPlugin: 'postcss-env-fn',
-		async AtRule(atRule) {
-			const replacedValue = getReplacedValue(atRule.params, await environmentVariablesPromise)
+		async AtRule(atRule, { result }) {
+			let replacedValue
+
+			try {
+				replacedValue = getReplacedValue(atRule.params, await environmentVariablesPromise)
+			} catch (error) {
+				atRule.warn(
+					result,
+					`Failed to parse params '${atRule.params}' as an environment value. Leaving the original value intact.`
+				)
+			}
+
+			if (typeof replacedValue === 'undefined') {
+				return
+			}
 
 			if (replacedValue !== atRule.params) {
 				atRule.params = replacedValue
 			}
 		},
-		async Declaration(decl) {
-			const replacedValue = getReplacedValue(decl.value, await environmentVariablesPromise)
+		async Declaration(decl, { result }) {
+			let replacedValue
+
+			try {
+				replacedValue = getReplacedValue(decl.value, await environmentVariablesPromise)
+			} catch (error) {
+				decl.warn(
+					result,
+					`Failed to parse value '${decl.value}' as an environment value. Leaving the original value intact.`
+				)
+			}
+
+			if (typeof replacedValue === 'undefined') {
+				return
+			}
 
 			if (replacedValue !== decl.value) {
 				decl.value = replacedValue

src/lib/get-replaced-value.js

@@ -9,7 +9,7 @@ import walkEnvFuncs from './walk-env-funcs'
  */
 export default (originalValue, variables) => {
 	// get the ast of the original value
-	const ast = parse(originalValue)
+	const ast = parse(originalValue, { ignoreUnknownWords: true })
 
 	// walk all of the css env() functions
 	walkEnvFuncs(ast, node => {

src/lib/import-from.js

@@ -14,7 +14,7 @@ function importEnvironmentVariablesFromObject(object) {
 	)
 
 	for (const key in environmentVariables) {
-		environmentVariables[key] = parse(environmentVariables[key]).nodes
+		environmentVariables[key] = parse(environmentVariables[key], { ignoreUnknownWords: true }).nodes
 	}
 
 	return environmentVariables

test/basic.css

@@ -14,3 +14,7 @@ body {
 		order: 3;
 	}
 }
+
+html {
+	background-image: url(data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==);
+}

test/basic.expect.css

@@ -14,3 +14,7 @@ body {
 		order: 3;
 	}
 }
+
+html {
+	background-image: url(data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==);
+}

test/basic.import-is-empty.expect.css

@@ -14,3 +14,7 @@ body {
 		order: 3;
 	}
 }
+
+html {
+	background-image: url(data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==);
+}

test/basic.import.expect.css

@@ -14,3 +14,7 @@ body {
 		order: 3;
 	}
 }
+
+html {
+	background-image: url(data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==);
+}