postcss-prefix - npm Package Compare versions

Comparing version 1.0.1 to 1.0.2

index.js

 const postcss = require('postcss')
+const Selector = require('postcss-selector-parser')
 
@@ -10,9 +11,56 @@ module.exports = postcss.plugin('postcss-prefix', postcssPrefix)
     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

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

test/index.js

@@ -11,3 +11,3 @@ const prefix = require('../')
   const out = postcss()
-    .use(prefix('#hello-world '))
+    .use(prefix('#hello-world'))
     .process(css)
@@ -14,0 +14,0 @@ .toString()

No alert changes

Improved metrics

Total package byte prevSize

3117

increased by80.49%

Lines of code

107

increased by69.84%

Worsened metrics

Dependency count

2

increased by100%

Dependency changes

• + Addedpostcss-selector-parser@^1.3.0

• + Addedflatten@1.0.3(transitive)

• + Addedindexes-of@1.0.1(transitive)

• + Addedpostcss-selector-parser@1.3.3(transitive)

• + Addeduniq@1.0.1(transitive)