Merge pull request #4 from crossjs/master

custom function for adding prefix to selector
vkalinichev · Dec 3, 2016 · 324bd49 · 324bd49
2 parents e332636 + 065bd70
commit 324bd49
Show file tree

Hide file tree

Showing 5 changed files with 53 additions and 11 deletions.
diff --git a/README.md b/README.md
@@ -102,6 +102,28 @@ Just plug it to PostCSS:
 postcss([ require('postcss-rtl') ])
 ```
 
+With Webpack:
+```js
+module.exports = {
+  module: {
+    loaders: [
+      {
+        test: /\.css$/,
+        loader: "style-loader!css-loader!postcss-loader"
+      }
+    ]
+  },
+  postcss: function() {
+    return [require('postcss-rtl')({
+        // Custom function for adding prefix to selector. Optional.
+        addPrefixToSelector (selector, prefix) {
+            return `${prefix} > ${selector}`
+        }
+    })]
+  }
+}
+```
+
 See [PostCSS] docs for examples for your environment.
 
 ## Future

diff --git a/src/index.js b/src/index.js
@@ -4,7 +4,10 @@ const { isKeyframeRule, isKeyframeAlreadyProcessed, isKeyframeSymmetric, rtlifyK
 const { getDirRule, processSrcRule } = require( './rules' )
 const { rtlifyDecl, ltrifyDecl } = require( './decls' )
 
-module.exports = postcss.plugin( 'postcss-rtl', () => css => {
+module.exports = postcss.plugin( 'postcss-rtl', ( options = {} ) => css => {
+
+    // customized function for joining prefix and selector
+    const addPrefixToSelector = options.addPrefixToSelector
 
     // selectors have direction related properties
     // should add [dir] prefix to increase priority
@@ -61,13 +64,13 @@ module.exports = postcss.plugin( 'postcss-rtl', () => css => {
 
         if ( rtlDecls.length ) {
             let ltrDirRule
-            getDirRule( rule, 'rtl' ).append( rtlDecls )
-            ltrDirRule = getDirRule( rule, 'ltr' )
+            getDirRule( rule, 'rtl', addPrefixToSelector ).append( rtlDecls )
+            ltrDirRule = getDirRule( rule, 'ltr', addPrefixToSelector )
             ltrDecls.forEach( _decl => _decl.moveTo( ltrDirRule ) )
         }
 
         if ( dirDecls.length ) {
-            getDirRule( rule, 'dir' ).append( dirDecls )
+            getDirRule( rule, 'dir', addPrefixToSelector ).append( dirDecls )
         }
 
         /* set dir attrs */

diff --git a/src/rules.js b/src/rules.js
@@ -4,11 +4,11 @@ const { isSelectorHasDir, addDirToSelectors } = require( './selectors' )
 const isRuleAlreadyProcessed = rule =>
     !!rule.selector.match( /\[dir(=".+")?\]/ )
 
-const getDirRule = ( rule, dir ) => {
+const getDirRule = ( rule, dir, addPrefixToSelector ) => {
     const next = rule.next()
     let selector = rule.selector
 
-    selector = isSelectorHasDir( selector ) ? selector : addDirToSelectors( selector, dir )
+    selector = isSelectorHasDir( selector ) ? selector : addDirToSelectors( selector, dir, addPrefixToSelector )
 
     if ( rule.selector === selector ) {
         return rule
@@ -19,9 +19,9 @@ const getDirRule = ( rule, dir ) => {
     }
 }
 
-const setRuleDir = ( rule, dir )=> {
+const setRuleDir = ( rule, dir, addPrefixToSelector )=> {
     const { selector } = rule
-    rule.selector = isSelectorHasDir( selector ) ? selector : addDirToSelectors( selector, dir )
+    rule.selector = isSelectorHasDir( selector ) ? selector : addDirToSelectors( selector, dir, addPrefixToSelector )
 }
 
 const rtlifyRule = rule => {

diff --git a/src/selectors.js b/src/selectors.js
@@ -7,7 +7,7 @@ const isHtmlSelector = ( selector = '' ) =>
 const isRootSelector = ( selector = '' ) =>
     !!selector.match( /:root/ )
 
-const addDirToSelectors = ( selectors = '', dir ) => {
+const addDirToSelectors = ( selectors = '', dir, addPrefixToSelector ) => {
     let prefix
 
     switch ( dir ) {
@@ -22,15 +22,21 @@ const addDirToSelectors = ( selectors = '', dir ) => {
             prefix = ''
     }
 
+    if ( !prefix ) {
+        return selectors
+    }
+
     selectors = selectors
         .split( /\s*,\s*/ )
         .map( selector => {
-            if ( isHtmlSelector( selector ) ) {
+            if ( typeof addPrefixToSelector === 'function' ) {
+                selector = addPrefixToSelector( selector, prefix )
+            } else if ( isHtmlSelector( selector ) ) {
                 // only replace `html` at the beginning of selector
                 selector = selector.replace( /^html/ig, `html${ prefix }` )
             } else if ( isRootSelector( selector ) ) {
                 selector = selector.replace( /:root/ig, `${ prefix }:root` )
-            } else if ( prefix ) {
+            } else {
                 // add prefix without html for least change of the priority level
                 selector = `${ prefix } ${ selector }`
             }

diff --git a/test.js b/test.js
@@ -53,3 +53,14 @@ test( 'Removes original rule without symmetric declarations', t => run( t,
     '[dir="ltr"] a { text-align: left } ' +
     '[dir="rtl"] a { text-align: right }'
 ) )
+
+test( 'Use custom `addPrefixToSelector` function', t => run( t,
+    'a { text-align: left }',
+    '[dir="ltr"] > a { text-align: left } ' +
+    '[dir="rtl"] > a { text-align: right }',
+    {
+        addPrefixToSelector ( selector, prefix ) {
+            return `${prefix} > ${selector}`
+        }
+    }
+) )