support a transform callback for complex prefixing

README.md

@@ -27,13 +27,26 @@ var css = fs.readFileSync("input.css", "utf8")
 
 var out = postcss().use(prefix({
   prefix: '.some-selector ', // <--- notice the traililng space!
-  exclude: ['.c']
+  exclude: ['.c'],
+
+  // Optional transform callback for case-by-case overrides 
+  transform: function (prefix, selector, prefixAndSelector) {
+    if (selector === 'body') {
+      return 'body.' + prefix;
+    } else {
+      return prefixAndSelector
+    }
+  }
 })).process(css).css
 ```
 
 Using this `input.css`:
 
 ```css
+body {
+  background: red;
+}
+
 .a, .b {
   color: aqua;
 }
@@ -46,6 +59,10 @@ Using this `input.css`:
 you will get:
 
 ```css
+body.some-selector {
+  background: red;
+}
+
 .some-selector .a, .some-selector .b {
   color: aqua;
 }
@@ -60,6 +77,8 @@ you will get:
 
 It's possible to avoid prefixing some selectors by using the `exclude` option which takes an array of selectors as a parameter.
 
+In cases where you may want to use the prefix differently for different selectors, it is also possible to customize prefixing based on the un-prefixed selector by adding the `transform` option. 
+
 
 [npm-image]: https://img.shields.io/npm/v/postcss-prefix-selector.svg?style=flat-square
 [npm-url]: https://npmjs.org/package/postcss-prefix-selector

index.js

@@ -3,9 +3,14 @@ var assert = require('assert')
 
 module.exports = function (options) {
   assert(options)
-  var prefix = options.prefix
+  var prefix = options.prefix 
   assert(prefix)
-  if (!/\s+$/.test(prefix)) prefix += ' '
+
+  var prefixWithSpace = /\s+$/.test(prefix) ? prefix : prefix + ' '
+  var transform = options.transform || function(prefix, selector, both) {
+    return both
+  }
+
   return function (root) {
     root.walkRules(function (rule) {
       if (rule.parent && rule.parent.name == 'keyframes') {
@@ -16,7 +21,7 @@ module.exports = function (options) {
         if (options.exclude && excludeSelector(selector, options.exclude)) {
           return selector
         }
-        return prefix + selector
+        return transform(prefix, selector, prefixWithSpace + selector)
       })
     })
   }
@@ -29,5 +34,5 @@ function excludeSelector(selector, excludeArr) {
     } else {
       return selector === excludeRule
     }
-  });
+  })
 }

test/fixtures/transform.css

@@ -0,0 +1,24 @@
+body {
+  margin: 0;
+  padding: 0;
+}
+
+.a, .b {
+  color: red;
+}
+
+.a *:not(.b) {
+  text-transform: uppercase;
+}
+
+.c {
+  font-size: 10px;
+}
+
+.class-a {
+  color: coral;
+}
+
+.class-b {
+  color: deepskyblue;
+}

test/fixtures/transform.expected.css

@@ -0,0 +1,24 @@
+body.hello {
+  margin: 0;
+  padding: 0;
+}
+
+.hello .a, .hello .b {
+  color: red;
+}
+
+.hello .a *:not(.b) {
+  text-transform: uppercase;
+}
+
+.hello .c {
+  font-size: 10px;
+}
+
+.hello .class-a {
+  color: coral;
+}
+
+.hello .class-b {
+  color: deepskyblue;
+}

test/test.js

@@ -46,6 +46,23 @@ it('should skip @keyframes selectors', function () {
   assert.equal(out, expected)
 })
 
+it('should support an additional callback for prefix transformation', function () {
+  var out = postcss().use(prefix({
+    prefix: '.hello',
+    transform: function (prefix, selector, prefixAndSelector) {
+      if (selector === 'body') {
+        return 'body' + prefix
+      } else {
+        return prefixAndSelector
+      }
+    }
+  })).process(getFixtureContents('transform.css')).css
+
+  var expected = getFixtureContents('transform.expected.css')
+
+  assert.equal(out, expected)
+})
+
 function getFixtureContents(name) {
   return fs.readFileSync('test/fixtures/' + name, 'utf8').trim()
 }