feat(css_shim): implement polyfill-unscoped-next-selector

Author: vsavkin

lib/core_dom/css_shim.dart

@@ -38,14 +38,23 @@ String shimCssText(String css, String tag) =>
  * * `:host(.x)`
  *
  * When the shim is not powerful enough, you can fall back on the polyfill-next-selector
- * directive.
+ * and the polyfill-unscoped-next-selector directives.
  *
  *    polyfill-next-selector {content: 'x > y'}
  *    z {}
  *
  * Becomes:
  *
- *   x[tag] > y[tag]
+ *   x[tag] > y[tag] {}
+ *
+ * And:
+ *
+ *   polyfill-unscoped-next-selector {content: 'x > y'}
+ *   z {}
+ *
+ * Becomes:
+ *
+ *   x > y {}
  *
  * See http://www.polymer-project.org/docs/polymer/styling.html#at-polyfill
  *
@@ -64,6 +73,16 @@ class _CssShim {
       caseSensitive: false,
       multiLine: true
   );
+  static final RegExp POLYFILL_UNSCOPED_NEXT_SELECTOR_DIRECTIVE = new RegExp(
+      r"polyfill-unscoped-next-selector"
+      r"[^}]*"
+      r"content\:[\s]*"
+      r"'([^']*)'"
+      r"[^}]*}"
+      r"([^{]*)",
+      caseSensitive: false,
+      multiLine: true
+  );
   static final int NEXT_SELECTOR_CONTENT = 1;
 
   static final String HOST_TOKEN = '-host-element';
@@ -79,6 +98,8 @@ class _CssShim {
   static final RegExp COLON_HOST = new RegExp('($HOST_TOKEN$PAREN_SUFFIX',
       caseSensitive: false, multiLine: true);
 
+  static final List<String> DO_NOT_SCOPE = ['polyfill-unscoped-next-selector'];
+
   final String tag;
   final String attr;
 
@@ -88,12 +109,16 @@ class _CssShim {
   String shimCssText(String css) {
     final preprocessed = convertColonHost(applyPolyfillNextSelectorDirective(css));
     final rules = cssToRules(preprocessed);
-    return scopeRules(rules);
+    final scoped = scopeRules(rules);
+    return applyPolyfillUnscopedNextSelectorDirective(scoped);
   }
 
   String applyPolyfillNextSelectorDirective(String css) =>
       css.replaceAllMapped(POLYFILL_NEXT_SELECTOR_DIRECTIVE, (m) => m[NEXT_SELECTOR_CONTENT]);
 
+  String applyPolyfillUnscopedNextSelectorDirective(String css) =>
+      css.replaceAllMapped(POLYFILL_UNSCOPED_NEXT_SELECTOR_DIRECTIVE, (m) => m[NEXT_SELECTOR_CONTENT]);
+
   String convertColonHost(String css) {
     css = css.replaceAll(":host", HOST_TOKEN);
 
@@ -174,7 +199,10 @@ class _CssShim {
   }
 
   String insertAttrSuffixIntoSelectorPart(String p) {
-    final shouldInsert = p.isNotEmpty && !SELECTOR_SPLITS.contains(p) && !p.contains(attr);
+    final shouldInsert = p.isNotEmpty &&
+        !SELECTOR_SPLITS.contains(p) &&
+        !p.contains(attr) &&
+        !DO_NOT_SCOPE.contains(p);
     return shouldInsert ? insertAttr(p) : p;
   }
 

test/core_dom/css_shim_spec.dart

@@ -75,9 +75,14 @@ main() {
       expect(s(':host(.x,.y) {}', "a")).toEqual('a.x, a.y {}');
     });
 
-    it("should insert directives", () {
+    it("should support polyfill-next-selector", () {
       var css = s("polyfill-next-selector {content: 'x > y'} z {}", "a");
       expect(css).toEqual('x[a]>y[a] {}');
     });
+
+    it("should support polyfill-unscoped-next-selector", () {
+      var css = s("polyfill-unscoped-next-selector {content: 'x > y'} z {}", "a");
+      expect(css).toEqual('x > y{}');
+    });
   });
 }