Fixed some issues with priority of invariant props

Author: vkalinichev

CHANGELOG.md

@@ -4,6 +4,9 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](http://keepachangelog.com/)
 and this project adheres to [Semantic Versioning](http://semver.org/).
 
+## [0.4.1] - 2016-12-12
+- Improved list of potential-affected properties (priority troubles workaround) 
+
 ## [0.4.0] - 2016-12-03
 - Added `addPrefixToSelector` option (thanks to [@crossjs](https://github.com/crossjs))
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "postcss-rtl",
-  "version": "0.4.0",
+  "version": "0.4.1",
   "description": "PostCSS plugin for RTL-optimizations",
   "keywords": [
     "postcss",

src/affected-props.js

@@ -0,0 +1,47 @@
+// selectors have direction related properties
+// should add [dir] prefix to increase priority
+
+module.exports = [
+    'background',
+    'background-attachment',
+    'background-color',
+    'background-clip',
+    'background-image',
+    'background-position',
+    'background-position-x',
+    'background-position-y',
+    'background-repeat',
+    'background-size',
+    'border',
+    'border-bottom',
+    'border-bottom-color',
+    'border-bottom-style',
+    'border-bottom-width',
+    'border-color',
+    'border-style',
+    'border-width',
+    'border-top',
+    'border-top-color',
+    'border-top-style',
+    'border-top-width',
+    'border-radius',
+    'box-shadow',
+    'clear',
+    'cursor',
+    'float',
+    'margin',
+    'margin-top',
+    'margin-bottom',
+    'padding',
+    'padding-top',
+    'padding-bottom',
+    'transform-origin',
+    'transform',
+    'transition-delay',
+    'transition-duration',
+    'transition-property',
+    'transition-timing-function',
+    'text-align',
+    'text-align-last',
+    'text-shadow',
+]

src/index.js

@@ -1,5 +1,6 @@
 const postcss = require( 'postcss' )
 
+const affectedProps = require( './affected-props' )
 const { isKeyframeRule, isKeyframeAlreadyProcessed, isKeyframeSymmetric, rtlifyKeyframe } = require( './keyframes' )
 const { getDirRule, processSrcRule } = require( './rules' )
 const { rtlifyDecl, ltrifyDecl } = require( './decls' )
@@ -9,23 +10,6 @@ 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
-    const dirRegExp = [
-        /direction/im,
-        /left/im,
-        /right/im,
-        /^(margin|padding|border-(color|style|width))$/ig,
-        /border-radius/ig,
-        /shadow/ig,
-        /transform-origin/ig,
-        /^(?!text\-).*?transform$/ig,
-        /transition(-property)?$/i,
-        /background(-position(-x)?|-image)?$/i,
-        /float|clear|text-align/i,
-        /cursor/i
-    ]
-
     let keyframes = []
 
     // collect @keyframes
@@ -56,7 +40,7 @@ module.exports = postcss.plugin( 'postcss-rtl', ( options = {} ) => css => {
                 return
             }
 
-            if ( dirRegExp.some( re => !!decl.prop.match( re ) ) ) {
+            if ( affectedProps.indexOf( decl.prop ) >= 0 ) {
                 dirDecls.push( decl )
                 decl.remove()
             }

test.js

@@ -42,6 +42,14 @@ test( 'Should add [dir] prefix to symmetric rules with direction related declara
     '[dir] a { text-align: center }'
 ) )
 
+test( 'Should add [dir] prefix to symmetric rules with direction related declarations (4)', t => run( t,
+    'a { margin: 0 10px 0 0 } ' +
+    'a { margin-top: 20px }',
+    '[dir="ltr"] a { margin: 0 10px 0 0 } ' +
+    '[dir="rtl"] a { margin: 0 0 0 10px } ' +
+    '[dir] a { margin-top: 20px }'
+) )
+
 test( 'Creates both LTR & RTL rules for asymmetric declarations', t => run( t,
     'a { text-align: left }',
     '[dir="ltr"] a { text-align: left } ' +