Merge pull request #170 from chenyejia/css-logical-plugin

Add plugin for CSS logical properties

Author: robinweser

docs/data/SpecialPlugins.md

@@ -13,6 +13,7 @@ Sometimes it is not enough to just prefix a property, but you also need to prefi
 | flexboxOld | Adds trasformators for the old 2009 flexbox specification used in old Webkit-based browsers. |
 | gradient | Adds support for prefixed `background` and `backgroundImage` values `linear-gradient()`, `radial-gradient()`, `repeating-linear-gradient()` and `repeating-radial-gradient()`. |
 | imagetSet | Adds support for prefixed `imaget-set()` values. |
+| logical | Adds support for prefixed CSS logical properties. |
 | position | Adds support for the prefixed `position` value on `sticky`. |
 | sizing | Adds support for prefixed `maxHeight`, `maxWidth`, `width`, `height`, `columnWidth`,`minWidth`, `minHeight` intrinsic & extrinsic sizing values `min-content`, `max-content`, `fill-available`, `fit-content`, `contain-floats`. |
 | transition | Adds support for prefixed CSS properties on `transition` and `transitionProperty` values. |

modules/__tests__/createPrefixer-test.js

@@ -176,6 +176,19 @@ describe('Static Prefixer', () => {
       expect(prefix(input)).toEqual(output)
     })
 
+    it('should prefix css logical properties', () => {
+      const input = {
+        marginInlineStart: '1px',
+      }
+      const output = {
+        marginInlineStart: '1px',
+        WebkitMarginStart: '1px',
+        MozMarginStart: '1px',
+      }
+      expect(prefix(input)).toEqual(output)
+      expect(prefix(input)).toEqual(output)
+    })
+
     it('should add all flexbox display types', () => {
       const input = { display: 'flex' }
       const output = {

modules/generator/maps/pluginMap.js

@@ -71,6 +71,14 @@ export default {
     and_uc: maximumVersion,
     ios_saf: maximumVersion,
   },
+  logical: {
+    chrome: 68,
+    safari: maximumVersion,
+    opera: maximumVersion,
+    and_chr: 66,
+    ios_saf: maximumVersion,
+    firefox: 40,
+  },
   position: {
     safari: maximumVersion,
     ios_saf: maximumVersion,

modules/index.js

@@ -10,6 +10,7 @@ import flex from './plugins/flex'
 import flexboxOld from './plugins/flexboxOld'
 import gradient from './plugins/gradient'
 import imageSet from './plugins/imageSet'
+import logical from './plugins/logical'
 import position from './plugins/position'
 import sizing from './plugins/sizing'
 import transition from './plugins/transition'
@@ -22,6 +23,7 @@ const plugins = [
   flexboxOld,
   gradient,
   imageSet,
+  logical,
   position,
   sizing,
   transition,

modules/plugins/index.js

@@ -8,6 +8,7 @@ import flexboxIE from './flexboxIE'
 import flexboxOld from './flexboxOld'
 import gradient from './gradient'
 import imageSet from './imageSet'
+import logical from './logical'
 import position from './position'
 import sizing from './sizing'
 import transition from './transition'
@@ -23,6 +24,7 @@ export default [
   flexboxOld,
   gradient,
   imageSet,
+  logical,
   position,
   sizing,
   transition,

modules/plugins/logical.js

@@ -0,0 +1,40 @@
+/* @flow */
+const alternativeProps = {
+  marginBlockStart: ['WebkitMarginBefore'],
+  marginBlockEnd: ['WebkitMarginAfter'],
+  marginInlineStart: ['WebkitMarginStart', 'MozMarginStart'],
+  marginInlineEnd: ['WebkitMarginEnd', 'MozMarginEnd'],
+  paddingBlockStart: ['WebkitPaddingBefore'],
+  paddingBlockEnd: ['WebkitPaddingAfter'],
+  paddingInlineStart: ['WebkitPaddingStart', 'MozPaddingStart'],
+  paddingInlineEnd: ['WebkitPaddingEnd', 'MozPaddingEnd'],
+  borderBlockStart: ['WebkitBorderBefore'],
+  borderBlockStartColor: ['WebkitBorderBeforeColor'],
+  borderBlockStartStyle: ['WebkitBorderBeforeStyle'],
+  borderBlockStartWidth: ['WebkitBorderBeforeWidth'],
+  borderBlockEnd: ['WebkitBorderAfter'],
+  borderBlockEndColor: ['WebkitBorderAfterColor'],
+  borderBlockEndStyle: ['WebkitBorderAfterStyle'],
+  borderBlockEndWidth: ['WebkitBorderAfterWidth'],
+  borderInlineStart: ['WebkitBorderStart', 'MozBorderStart'],
+  borderInlineStartColor: ['WebkitBorderStartColor', 'MozBorderStartColor'],
+  borderInlineStartStyle: ['WebkitBorderStartStyle', 'MozBorderStartStyle'],
+  borderInlineStartWidth: ['WebkitBorderStartWidth', 'MozBorderStartWidth'],
+  borderInlineEnd: ['WebkitBorderEnd', 'MozBorderEnd'],
+  borderInlineEndColor: ['WebkitBorderEndColor', 'MozBorderEndColor'],
+  borderInlineEndStyle: ['WebkitBorderEndStyle', 'MozBorderEndStyle'],
+  borderInlineEndWidth: ['WebkitBorderEndWidth', 'MozBorderEndWidth'],
+}
+
+export default function logical(
+  property: string,
+  value: any,
+  style: Object
+): void {
+  if (Object.prototype.hasOwnProperty.call(alternativeProps, property)) {
+    const alternativePropList = alternativeProps[property]
+    for (let i = 0, len = alternativePropList.length; i < len; ++i) {
+      style[alternativePropList[i]] = value
+    }
+  }
+}