feat: support deep selectors, closes #22

__tests__/__snapshots__/index.test.js.md

@@ -161,6 +161,113 @@ Generated by [AVA](https://ava.li).
       `,
     ]
 
+## deep-selectors
+
+> Snapshot 1
+
+    [
+      `webpackJsonp([0],{␊
+      ␊
+      /***/ 18:␊
+      /***/ (function(module, exports) {␊
+      ␊
+      module.exports = [{"type":"element","tag":"div","attrs":[{"type":"attribute","name":"class","value":"root"},{"type":"attribute","name":"data-r-2000be7d","value":""}],"children":[{"type":"text","text":"\\n  deep selectors\\n"}]}]␊
+      ␊
+      /***/ }),␊
+      ␊
+      /***/ 19:␊
+      /***/ (function(module, exports, __webpack_require__) {␊
+      ␊
+      "use strict";␊
+      // <template>␊
+      //   <div class="root">␊
+      //     deep selectors␊
+      //   </div>␊
+      // </template>␊
+      //␊
+      // <script>␊
+      // </script>␊
+      //␊
+      // <style scoped>␊
+      // .root {␊
+      //   color: red;␊
+      // }␊
+      //␊
+      // .root .child {␊
+      //   color: yellow;␊
+      // }␊
+      //␊
+      // .root >>> .child {␊
+      //   color: blue;␊
+      // }␊
+      // </style>␊
+      ␊
+      ␊
+      /***/ }),␊
+      ␊
+      /***/ 20:␊
+      /***/ (function(module, exports) {␊
+      ␊
+      // removed by extract-text-webpack-plugin␊
+      ␊
+      /***/ }),␊
+      ␊
+      /***/ 22:␊
+      /***/ (function(module, exports, __webpack_require__) {␊
+      ␊
+      var __regular_script__, __regular_template__;␊
+      __webpack_require__(20)␊
+      __regular_script__ = __webpack_require__(19)␊
+      __regular_template__ = __webpack_require__(18)␊
+      var Regular = __webpack_require__( 21 );␊
+      ␊
+      var __rs__ = __regular_script__ || {};␊
+      if (__rs__.__esModule) __rs__ = __rs__["default"];␊
+      if (Regular.__esModule) Regular = Regular["default"];␊
+      ␊
+      var __Component__, __cps__;␊
+      if( typeof __rs__ === "object" ) {␊
+      	__rs__.template = __regular_template__;␊
+      	__Component__ = Regular.extend(__rs__);␊
+      	__cps__ = __rs__.components || __rs__.component;␊
+      	if( typeof __cps__ === "object" ) {␊
+      		for( var i in __cps__ ) {␊
+      			__Component__.component(i, __cps__[ i ]);␊
+      		}␊
+      	}␊
+      } else if( typeof __rs__ === "function" && ( __rs__.prototype instanceof Regular ) ) {␊
+      	__rs__.prototype.template = __regular_template__;␊
+      	__Component__ = __rs__;␊
+      }␊
+      module.exports = __Component__;␊
+      ␊
+      /***/ })␊
+      ␊
+      },[22]);`,
+      `␊
+      ␊
+      ␊
+      ␊
+      ␊
+      ␊
+      ␊
+      ␊
+      ␊
+      ␊
+      .root[data-r-2000be7d] {␊
+        color: red;␊
+      }␊
+      ␊
+      .root .child[data-r-2000be7d] {␊
+        color: yellow;␊
+      }␊
+      ␊
+      .root[data-r-2000be7d] .child {␊
+        color: blue;␊
+      }␊
+      `,
+    ]
+
 ## multiple-css
 
 > Snapshot 1

__tests__/fixtures/deep-selectors.rgl

@@ -0,0 +1,22 @@
+<template>
+  <div class="root">
+    deep selectors
+  </div>
+</template>
+
+<script>
+</script>
+
+<style scoped>
+.root {
+  color: red;
+}
+
+.root .child {
+  color: yellow;
+}
+
+.root >>> .child {
+  color: blue;
+}
+</style>

__tests__/index.test.js

@@ -27,3 +27,7 @@ test.serial( 'preserve-whitespace', async t => {
 test.serial( 'scoped-css', async t => {
 	t.snapshot( await bundle( 'scoped-css.rgl' ) )
 } )
+
+test.serial( 'deep-selectors', async t => {
+	t.snapshot( await bundle( 'deep-selectors.rgl' ) )
+} )

lib/postcss-plugins/scoped.js

@@ -0,0 +1,95 @@
+const postcss = require( 'postcss' )
+const selectorParser = require( 'postcss-selector-parser' )
+
+module.exports = postcss.plugin( 'add-id', options => root => {
+  const id = options.id
+  const keyframes = Object.create( null )
+
+  root.each( function rewriteSelector( node ) {
+    if ( !node.selector ) {
+      // handle media queries
+      if ( node.type === 'atrule' ) {
+        if ( node.name === 'media' || node.name === 'supports' ) {
+          node.each( rewriteSelector )
+        } else if ( /-?keyframes$/.test( node.name ) ) {
+          // register keyframes
+          keyframes[ node.params ] = node.params = node.params + '-' + id
+        }
+      }
+      return
+    }
+    node.selector = selectorParser( selectors => {
+      selectors.each( selector => {
+        let node = null
+
+        selector.each( n => {
+          // ">>>" combinator
+          if ( n.type === 'combinator' && n.value === '>>>' ) {
+            n.value = ' '
+            n.spaces.before = n.spaces.after = ''
+            return false
+          }
+          // /deep/ alias for >>>, since >>> doesn't work in SASS
+          if ( n.type === 'tag' && n.value === '/deep/' ) {
+            const prev = n.prev()
+            if ( prev && prev.type === 'combinator' && prev.value === ' ' ) {
+              prev.remove()
+            }
+            n.remove()
+            return false
+          }
+          if ( n.type !== 'pseudo' && n.type !== 'combinator' ) {
+            node = n
+          }
+        } )
+
+        if ( node ) {
+          node.spaces.after = ''
+        } else {
+          // For deep selectors & standalone pseudo selectors,
+          // the attribute selectors are prepended rather than appended.
+          // So all leading spaces must be eliminated to avoid problems.
+          selector.first.spaces.before = ''
+        }
+
+        selector.insertAfter(
+          node,
+          selectorParser.attribute( {
+            attribute: id
+          } )
+        )
+      } )
+    } ).processSync( node.selector )
+  } )
+
+  // If keyframes are found in this <style>, find and rewrite animation names
+  // in declarations.
+  // Caveat: this only works for keyframes and animation rules in the same
+  // <style> element.
+  if ( Object.keys( keyframes ).length ) {
+    root.walkDecls( decl => {
+      // individual animation-name declaration
+      if ( /^(-\w+-)?animation-name$/.test( decl.prop ) ) {
+        decl.value = decl.value
+          .split( ',' )
+          .map( v => keyframes[ v.trim() ] || v.trim() )
+          .join( ',' )
+      }
+      // shorthand
+      if ( /^(-\w+-)?animation$/.test( decl.prop ) ) {
+        decl.value = decl.value
+          .split( ',' )
+          .map( v => {
+            const vals = v.trim().split( /\s+/ )
+            const i = vals.findIndex( val => keyframes[ val ] )
+            if ( i !== -1 ) {
+              vals.splice( i, 1, keyframes[ vals[ i ] ] )
+              return vals.join( ' ' )
+            }
+            return v
+          } )
+          .join( ',' )
+      }
+    } )
+  }
+} )

lib/style-rewriter.js

@@ -1,6 +1,6 @@
 const postcss = require( 'postcss' )
 const loaderUtils = require( 'loader-utils' )
-const addScopedId = require( './postcss-plugins/add-scoped-id' )
+const addScopedAttribute = require( './postcss-plugins/scoped' )
 const loadOptions = require( './utils/options-cache' ).loadOptions
 const loadPostcssConfig = require( './load-postcss-config' )
 
@@ -26,7 +26,7 @@ module.exports = function ( content, map ) {
 
       // scoped css
       if ( query.scoped ) {
-        plugins.push( addScopedId( { id: query.id } ) )
+        plugins.push( addScopedAttribute( { id: query.id } ) )
       }
 
       // sourcemap

package.json

@@ -52,9 +52,9 @@
     "loader-utils": "^1.1.0",
     "lru-cache": "^4.0.1",
     "parse5": "^2.1.5",
-    "postcss": "^5.0.21",
+    "postcss": "^6.0.20",
     "postcss-load-config": "^1.2.0",
-    "postcss-selector-parser": "^2.1.0",
+    "postcss-selector-parser": "^3.1.1",
     "resolve": "^1.8.1",
     "source-map": "^0.5.6"
   },