Expand variables in AtRule properties

index.js

@@ -212,7 +212,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;
@@ -234,8 +237,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

@@ -140,6 +140,9 @@ describe('postcss-css-variables', function() {
 		test('should work with nested @media', 'media-query-nested', { preserveAtRulesOrder: false });
 		test('should work with nested @media, preserving rule order', 'media-query-nested-preserver-rule-order', { 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');