Add support for CSS4 descendant selector >>

Author: MadLittleMods

.gitignore

@@ -2,6 +2,5 @@ node_modules/
 npm-debug.log
 
 playground/node_modules/
-playground/jspm_packages/github/
-playground/jspm_packages/npm/
+playground/jspm_packages/
 todo.md

README.md

@@ -15,9 +15,16 @@ We strive for the most complete transformation but we/no plugin can achieve true
 
 `npm install postcss-css-variables --save-dev`
 
+# [Code Playground](https://madlittlemods.github.io/postcss-css-variables/playground/)
+
+[Try it](https://madlittlemods.github.io/postcss-css-variables/playground/) before you install it!
+
+Add some PostCSS and it will show you the transformed/compiled CSS.
 
 # Usage
 
+You can try any of these examples on the [code playground](https://madlittlemods.github.io/postcss-css-variables/playground/).
+
 ```
 var postcss = require('postcss');
 var cssvariables = require('postcss-css-variables');

index.js

@@ -66,7 +66,11 @@ function generateScopeList(node, /*optional*/includeSelf) {
 							return false;
 						})
 						.map(function(piece) {
-							return piece.trim();
+							// Trim whitespace which would be a normal descendant selector
+							// and trim off the CSS4 descendant `>>` into a normal descendant selector
+							return piece.trim().replace(/\s*?>>\s*?/, function(match) {
+								return '';
+							});
 						});
 
 					// Add to the front of the array

playground/README.md

@@ -12,10 +12,11 @@ The code playground for `postcss-css-variables` is [available live here](https:/
 
  ## Instructions:
 
-When developing run the following to build:
+Run once to set everything up:
 
-`npm run build-dev`
+`npm run setup`
 
-To bundle for production, run:
+When developing run the following to build:
 
-`npm run build`
+ - `npm run build-dev`: Build
+ - `npm run build`: Build and bundle for production

playground/index.html

@@ -15,8 +15,7 @@
 		if(window.location.host === 'madlittlemods.github.io') {
 			System.baseURL = '/postcss-css-variables/playground/';
 		}
-	</script>
-	<script>
+
 		System.import('build/js/main');
 	</script>
 </body>

test/fixtures/css4-descendant-selector.css

@@ -0,0 +1,21 @@
+.some-foo-group, .some-bar-group {
+	--foo-width: 150px;
+	--bar-width: 300px;
+}
+
+.some-foo-group >> .box-foo {
+	--foo-width: 180px;
+	width: var(--foo-width);
+}
+
+.some-bar-group >> .box-bar {
+	width: var(--bar-width);
+}
+
+.some-foo-group {
+	width: var(--foo-width);
+
+	.box-foo {
+		width: var(--foo-width);
+	}
+}

test/fixtures/css4-descendant-selector.expected.css

@@ -0,0 +1,15 @@
+.some-foo-group >> .box-foo {
+	width: 180px;
+}
+
+.some-bar-group >> .box-bar {
+	width: 300px;
+}
+
+.some-foo-group {
+	width: 150px;
+
+	.box-foo {
+		width: 180px;
+	}
+}

test/test.js

@@ -53,6 +53,10 @@ describe('postcss-css-variables', function() {
 		return testPlugin('./test/fixtures/descendant-selector.css', './test/fixtures/descendant-selector.expected.css');
 	});
 
+	it('should work with css4 descendant selector type "nesting"', function() {
+		return testPlugin('./test/fixtures/css4-descendant-selector.css', './test/fixtures/css4-descendant-selector.expected.css');
+	});
+
 	describe('with @rules', function() {
 		it('should add rule declaration of property in @media', function() {
 			return testPlugin('./test/fixtures/media-query.css', './test/fixtures/media-query.expected.css');