Plan to split comma separated rules and add new test case

Author: MadLittleMods

index.js

@@ -183,13 +183,23 @@ const cssvariables = postcss.plugin('postcss-css-variables', function(options) {
 
 
 
+
+		// Split comma separated selectors into separate rules
+		// ---------------------------------------------------------
+		// ---------------------------------------------------------
+		// TODO
+
+
+
+
 		// Resolve variable usage everywhere `var(--foo)`
 		// ---------------------------------------------------------
 		// ---------------------------------------------------------
 		css.walkDecls(function(decl) {
 			// Avoid any variable decls, `--foo: var(--bar);`, that may have been preserved
 			if(!RE_VAR_PROP.test(decl.prop)) {
 				const selectorBranches = generateSelectorBranchesFromPostcssNode(decl.parent);
+				console.log('selectorBranches', selectorBranches.map((branch) => branch.selector.toString()));
 
 				const newDeclValue = decl.value.replace(new RegExp(RE_VAR_FUNC.source, 'g'), (match, variableName, fallback) => {
 					debug('usage', variableName);

test/fixtures/comma-separated-variable-nested-usage.css

@@ -0,0 +1,14 @@
+.bar {
+	--color: red;
+}
+.baz {
+	--color: blue;
+}
+
+.foo {
+	.bar, .baz {
+		.qux {
+			color: var(--color);
+		}
+	}
+}

test/fixtures/comma-separated-variable-nested-usage.expected.css

@@ -0,0 +1,15 @@
+.foo {
+	.bar {
+		.qux {
+			color: red;
+		}
+	}
+}
+
+.foo {
+	.baz {
+		.qux {
+			color: blue;
+		}
+	}
+}

test/test.js

@@ -113,7 +113,8 @@ describe('postcss-css-variables', function() {
 	test('should work with variables defined in comma separated selector', 'comma-separated-variable-declaration');
 
 
-	test('should work use the correct variable in comma separated selector', 'comma-separated-variable-usage');
+	test('should use the correct variable in comma separated selector', 'comma-separated-variable-usage');
+	test('should use the correct variable in nested comma separated selector', 'comma-separated-variable-nested-usage');
 
 
 	test('should work with star selector', 'star-selector-scope');