implement #2

re-write using postcss-selector-parser

breaking change to API: prefix *must* be a single node, at the
moment either an #id or a .className

Signed-off-by: Yoshua Wuyts <[email protected]>

Closes #3

Author: ahdinosaur

index.js

@@ -1,4 +1,5 @@
 const postcss = require('postcss')
+const Selector = require('postcss-selector-parser')
 
 module.exports = postcss.plugin('postcss-prefix', postcssPrefix)
 
@@ -7,11 +8,58 @@ function postcssPrefix (prefix, options) {
 
   return function (root) {
     root.walkRules(function (rule) {
-      rule.selectors = rule.selectors.map(function (selector) {
-        if (rule.selector.indexOf(':root') === 0) return selector
-        return prefix + selector
-      })
-      rule.selector = rule.selectors.join(', ')
+      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
+      ) return
+
+      const prefixNode = getPrefixNode(prefix)
+
+      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
+        }
+      }
+
+      // 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)
     })
   }
+
+}
+
+function getPrefixNode (prefix) {
+  const sigil = prefix[0]
+  const value = prefix.slice(1)
+
+  switch (sigil) {
+    case '#':
+      return Selector.id({ value })
+    case '.':
+      return Selector.className({ value })
+  }
 }

package.json

@@ -2,7 +2,8 @@
   "name": "postcss-prefix",
   "version": "1.0.1",
   "dependencies": {
-    "postcss": "^5.0.8"
+    "postcss": "^5.0.8",
+    "postcss-selector-parser": "^1.3.0"
   },
   "devDependencies": {
     "tape": "^4.2.1"

test/index.js

@@ -8,7 +8,7 @@ test('postcss-prefix', function (t) {
   const expected = fs.readFileSync(path.join(__dirname, 'fixture-out.css'), 'utf8')
   const css = fs.readFileSync(path.join(__dirname, 'fixture.css'), 'utf8')
   const out = postcss()
-    .use(prefix('#hello-world '))
+    .use(prefix('#hello-world'))
     .process(css)
     .toString()