feat(prefix): drop support for non :host prefix

Author: yoshuawuyts

index.js

@@ -6,54 +6,34 @@ module.exports = postcss.plugin('postcss-prefix', postcssPrefix)
 function postcssPrefix (prefix, options) {
   options = options || {}
 
-  return function (root) {
+  return function walk (root) {
     root.walkRules(function (rule) {
-      if (rule.parent && rule.parent.type === 'atrule' &&
-          rule.parent.name.indexOf('keyframes') !== -1) {
-        return
-      }
-
-      const selector = Selector(
-        transformSelectors
-      ).process(rule.selector).result
+      const selector = Selector(transformSelectors)
+        .process(rule.selector).result
 
       rule.selector = selector
     })
   }
 
   function transformSelectors (selectors) {
     selectors.eachInside(function (selector) {
-      if (
-        // if parent is not selector and
-        selector.parent.type !== 'selector' ||
-        // if not first node in container
-        selector.parent.nodes[0] !== selector ||
-        // don't prefix pseudo selector args unless it's `:not`
-        (selector.parent.parent.type === 'pseudo' && selector.parent.parent.value !== ':not')
-      ) return
+      // don't prefix if parent is not selector
+      if (selector.parent.type !== 'selector') return
 
-      const prefixNode = getPrefixNode(prefix)
+      // don't prefix if not first node in container
+      if (selector.parent.nodes[0] !== selector) return
 
-      if (selector.type === 'pseudo') {
-        switch (selector.value) {
-          case ':root':
-            return
-          case ':host':
-            const replacement = Selector.selector()
-            replacement.nodes = [prefixNode].concat(selector.clone().nodes)
-            selector.replaceWith(replacement)
-            return
-        }
+      // don't prefix pseudo selector args unless it's `:not`
+      if (selector.parent.parent.type === 'pseudo' && selector.parent.parent.value !== ':not') {
+        return
       }
 
-      // prefix
-      //
-      // start by prepending a space combinator
-      selector.parent.prepend(Selector.combinator({ value: ' ' }))
-      // then prepend the prefix node, preserving spacing
-      prefixNode.spaces.before = selector.spaces.before
-      selector.spaces.before = ''
-      selector.parent.prepend(prefixNode)
+      if (selector.type === 'pseudo' && selector.value === ':host') {
+        const prefixNode = getPrefixNode(prefix)
+        const replacement = Selector.selector()
+        replacement.nodes = [prefixNode].concat(selector.clone().nodes)
+        selector.replaceWith(replacement)
+      }
     })
   }
 }

test/fixture-out.css

@@ -13,23 +13,26 @@
 #hello-world { color: green; }
 #hello-world:hover { color: blue; }
 
-#hello-world h1 {}
-#hello-world h1.title {}
-#hello-world h2#thing {}
-#hello-world #thing h3 {}
+h1 {}
+h1.title {}
+h2#thing {}
+#thing h3 {}
 
-#hello-world .a, #hello-world .b, #hello-world .c {}
+.a, .b, .c {}
 
 @media screen and (max-width: 42rem) {
-  #hello-world #another .thing > x-here {}
+  #hello-world {
+    .thing > x-here {}
+  }
+  #another .thing > x-here {}
 }
 
-#hello-world .stuff:nth-child(even) {}
+.stuff:nth-child(even) {}
 
-#hello-world .stuff:nth-last-child(even) {}
+.stuff:nth-last-child(even) {}
 
-#hello-world .stuff:nth-of-type(2) {}
+.stuff:nth-of-type(2) {}
 
-#hello-world .stuff:nth-last-of-type(2) {}
+.stuff:nth-last-of-type(2) {}
 
-#hello-world .stuff:not(#hello-world p) {}
+.stuff:not(p) {}

test/fixture.css

@@ -21,6 +21,9 @@ h2#thing {}
 .a, .b, .c {}
 
 @media screen and (max-width: 42rem) {
+  :host {
+    .thing > x-here {}
+  }
   #another .thing > x-here {}
 }