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/fixture-out.css

@@ -13,2 +13,5 @@ :root {
 
+#hello-world { color: green; }
+#hello-world:hover { color: blue; }
+
 #hello-world h1 {}
@@ -15,0 +18,0 @@ #hello-world h1.title {}

test/fixture.css

@@ -13,2 +13,5 @@ :root {
 
+:host { color: green; }
+:host(:hover) { color: blue; }
+
 h1 {}
@@ -15,0 +18,0 @@ h1.title {}

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()

New alerts

Filesystem access

Supply chain risk

Accesses the file system, and could potentially read sensitive data.

Found 1 instance in 1 package

Fixed alerts

Filesystem access

Supply chain risk

Accesses the file system, and could potentially read sensitive data.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

3117

80.49%

Lines of code

107

69.84%

Worsened metrics

Dependency count

2

100%

Dependency changes

• + Added

  postcss-selector-parser@^1.3.0

• + Added

  flatten@1.0.3
  (transitive)

• + Added

  indexes-of@1.0.1
  (transitive)

• + Added

  postcss-selector-parser@1.3.3
  (transitive)

• + Added

  uniq@1.0.1
  (transitive)