Merge pull request #4 from jonathanong/upgrade-to-postcss-5

Upgrade to postcss 5

Author: valentin-radulescu-hs

README.md

@@ -11,35 +11,56 @@
 
 Prefix every rule with a selector.
 
-```js
-var css = '.a {} \n.b{}'
+## Installation
+
+```console
+$ npm install postcss-prefix-selector
+```
 
+## Usage
+
+```js
 var prefix = require('postcss-prefix-selector')
 
+// css to be processed
+var css = fs.readFileSync("input.css", "utf8")
+
 var out = postcss().use(prefix({
-  prefix: '.some-selector ' // <--- notice the traililng space!
+  prefix: '.some-selector ', // <--- notice the traililng space!
+  exclude: ['.c']
 })).process(css).css
-
-console.log(out)
 ```
 
-## Options
+Using this `input.css`:
 
-It's possible to avoid prefixing some selectors with the option `exclude` which take an array of selectors in parameter.
+```css
+.a, .b {
+  color: aqua;
+}
 
-```js
-var css = '.a {} \nhtml{} \n.b{}'
+.c {
+  color: coral;
+}
+```
 
-var prefix = require('postcss-prefix-selector')
+you will get:
 
-var out = postcss().use(prefix({
-  prefix: '.some-selector ', // <--- notice the traililng space!
-  exclude: ['html', '.b']
-})).process(css).css
+```css
+.some-selector .a, .some-selector .b {
+  color: aqua;
+}
 
-console.log(out)
+.c {
+  color: coral;
+}
 ```
 
+
+## Options
+
+It's possible to avoid prefixing some selectors by using the `exclude` option which takes an array of selectors as a parameter.
+
+
 [gitter-image]: https://badges.gitter.im/jonathanong/postcss-prefix-selector.png
 [gitter-url]: https://gitter.im/jonathanong/postcss-prefix-selector
 [npm-image]: https://img.shields.io/npm/v/postcss-prefix-selector.svg?style=flat-square

index.js

@@ -7,15 +7,17 @@ module.exports = function (options) {
   assert(prefix)
   if (!/\s+$/.test(prefix)) prefix += ' '
   return function (root) {
-    root.eachRule(function (rule) {
-      // pretty sure this splitting breaks for certain selectors
-      var selectors = rule.selector.split(/\s*,\s*/g)
-      rule.selector = selectors.map(function (selector) {
+    root.walkRules(function (rule) {
+      if (rule.parent && rule.parent.name == 'keyframes') {
+        return
+      }
+
+      rule.selectors = rule.selectors.map(function (selector) {
         if (options.exclude && ~options.exclude.indexOf(selector)) {
-          return selector;
+          return selector
         }
         return prefix + selector
-      }).join(', ')
+      })
     })
   }
 }

package.json

@@ -5,11 +5,12 @@
   "author": "Jonathan Ong <me@jongleberry.com> (http://jongleberry.com)",
   "license": "MIT",
   "repository": "jonathanong/postcss-prefix-selector",
-  "dependencies": {},
+  "dependencies": {
+    "postcss": "^5.0.8"
+  },
   "devDependencies": {
     "istanbul": "0",
-    "mocha": "2",
-    "postcss": "^4.0.3"
+    "mocha": "2"
   },
   "scripts": {
     "test": "mocha",
@@ -19,7 +20,8 @@
   "keywords": [
     "postcss",
     "prefix",
-    "selectors"
+    "selectors",
+    "postcss-plugin"
   ],
   "files": [
     "index.js"

test/test.js

@@ -31,6 +31,15 @@ it('should avoid prefixing excluded selectors', function () {
   assert(~out.indexOf('.hello .a'))
   assert(~out.indexOf('.hello .b'))
   assert(~out.indexOf('.hello .c'))
-  assert(out.indexOf('.hello body'))
-  assert(out.indexOf('.hello .a *:not(.b)'))
+  assert(!~out.indexOf('.hello body'))
+  assert(!~out.indexOf('.hello .a *:not(.b)'))
+})
+
+it('should skip @keyframes selectors', function () {
+  var out = postcss().use(prefix({
+    prefix: '.hello '
+  })).process('@keyframes anim {from {} to {}}').css
+
+  assert(!~out.indexOf('.hello from'))
+  assert(!~out.indexOf('.hello to'))
 })