Allow for URL query string params

.tape.js

@@ -22,5 +22,8 @@ module.exports = {
 		options: {
 			dirs: 'test/sprite-module'
 		}
-	}
+	},
+	'query': {
+		message: 'supports query params'
+	},
 };

README.md

@@ -9,6 +9,9 @@
 ```pcss
 .icon--square {
   content: url("shared-sprites#square" param(--color blue));
+
+  /* Alternative syntax */
+  /* content: url("shared-sprites?--color=blue#square"); */
 }
 
 /* becomes */

src/lib/transpile-decl.js

@@ -3,6 +3,7 @@
 
 // native tooling
 import path from 'path';
+import { URLSearchParams } from 'url';
 
 // external tooling
 import parser from 'postcss-values-parser';
@@ -37,19 +38,25 @@ export default function transpileDecl(result, promises, decl, opts, cache) { //
 			// <url> split by fragment identifier symbol (#)
 			const urlParts = urlNode.value.split('#');
 
-			// <url> src
-			const src = urlParts[0];
+			// <url> src and query string
+			const [src, queryString] = urlParts[0].split('?');
 
 			// <url> fragment identifier
 			const id = urlParts.slice(1).join('#');
 
 			// whether the <url> has a fragment identifier
 			const hasID = urlParts.length > 1;
 
+			// whether the <url> has search params
+			const searchParams = new URLSearchParams(queryString);
+
 			// <url> param()s
-			const params = paramsFromNodes(
-				node.nodes.slice(2, -1)
-			);
+			const params = {
+				...paramsFromSearchParams(searchParams),
+				...paramsFromNodes(
+					node.nodes.slice(2, -1)
+				)
+			};
 
 			node.nodes.slice(2, -1).forEach(childNode => {
 				childNode.remove();
@@ -141,6 +148,20 @@ function paramsFromNodes(nodes) {
 	return params;
 }
 
+// params from URL search params
+function paramsFromSearchParams(searchParams) {
+	// valid params as an object
+	const params = {};
+
+	// for each search param
+	searchParams.forEach((value, key) => {
+		params[key] = value;
+	});
+
+	// return valid params as an object
+	return params;
+}
+
 // whether the node is a filled param()
 function isFilledParam(node) {
 	return node.type === 'func' && node.value === 'param' && node.nodes.length === 4 && node.nodes[1].type === 'word';

test/query.css

@@ -0,0 +1,3 @@
+test-sprite {
+	background-image: url("sprite.svg?--color=blue#camera");
+}