Allow AtRules containing properties to have their variables expanded

index.js

@@ -218,7 +218,10 @@ module.exports = postcss.plugin('postcss-css-variables', function(options) {
 
 		// Collect all the rules that have declarations that use variables
 		var rulesThatHaveDeclarationsWithVariablesList = [];
-		css.walkRules(function(rule) {
+		css.walk(function(rule) {
+			// We're only interested in Containers with children.
+			if (rule.nodes === undefined) return;
+
 			var doesRuleUseVariables = rule.nodes.some(function(node) {
 				if(node.type === 'decl') {
 					var decl = node;
@@ -240,8 +243,8 @@ module.exports = postcss.plugin('postcss-css-variables', function(options) {
 		rulesThatHaveDeclarationsWithVariablesList.forEach(function(rule) {
 			var rulesToWorkOn = [].concat(rule);
 			// Split out the rule into each comma separated selector piece
-			// We only need to split if is actually comma separted(selectors > 1)
-			if(rule.selectors.length > 1) {
+			// We only need to split if it's actually a Rule with multiple selectors
+			if(rule.type == 'rule' && rule.selectors.length > 1) {
 				// Reverse the selectors so that we can cloneAfter in the same comma separated order
 				rulesToWorkOn = rule.selectors.reverse().map(function(selector) {
 					var ruleClone = rule.cloneAfter();

test/fixtures/at-rules-containing-properties.css

@@ -0,0 +1,8 @@
+:root {
+	--font-name: 'my-font-family-name';
+}
+
+@font-face {
+	font-family: var(--font-name);
+	src: url('myfont.woff2') format('woff2');
+}

test/fixtures/at-rules-containing-properties.expected.css

@@ -0,0 +1,4 @@
+@font-face {
+	font-family: 'my-font-family-name';
+	src: url('myfont.woff2') format('woff2');
+}

test/fixtures/nested-at-rules-containing-properties.css

@@ -0,0 +1,13 @@
+:root {
+	--color: red;
+}
+
+/*
+	Prince XML at-rules.
+	https://www.princexml.com/doc/11/at-rules/
+*/
+@page {
+	@footnote {
+		background-color: var(--color);
+	}
+}

test/fixtures/nested-at-rules-containing-properties.expected.css

@@ -0,0 +1,9 @@
+/*
+	Prince XML at-rules.
+	https://www.princexml.com/doc/11/at-rules/
+*/
+@page {
+	@footnote {
+		background-color: red;
+	}
+}

test/test.js

@@ -175,6 +175,15 @@ describe("postcss-css-variables", function() {
       { preserveAtRulesOrder: true }
     );
 
+    test(
+      "should work with at-rules containing properties",
+      "at-rules-containing-properties"
+    );
+    test(
+      "should work with nested at-rules containing properties",
+      "nested-at-rules-containing-properties"
+    );
+
     test("should cascade to nested rules", "cascade-on-nested-rules");
 
     test(