Merge pull request #174 from etripier/add-basic-grid-prefixes

Add basic support for CSS grid prefixing

Author: robinweser

modules/__tests__/createPrefixer-test.js

@@ -431,5 +431,120 @@ describe('Static Prefixer', () => {
         expect(prefix(input)).toEqual(output)
       })
     })
+
+    describe('grid', () => {
+      it('should prefix display values', () => {
+        const input = { display: 'grid' }
+        const inlineInput = { display: 'inline-grid' }
+        const output = { display: ['-ms-grid', 'grid'] }
+        const inlineOutput = { display: ['-ms-inline-grid', 'inline-grid'] }
+        expect(prefix(input)).toEqual(output)
+        expect(prefix(inlineInput)).toEqual(inlineOutput)
+      })
+
+      it('should prefix basic alignment values', () => {
+        const input = { alignSelf: 'stretch', justifySelf: 'end' }
+        const output = {
+          WebkitAlignSelf: 'stretch',
+          alignSelf: 'stretch',
+          justifySelf: 'end',
+          msFlexItemAlign: 'stretch',
+          msGridColumnAlign: 'end',
+          msGridRowAlign: 'stretch',
+        }
+        expect(prefix(input)).toEqual(output)
+      })
+
+      describe('template', () => {
+        it('should prefix column templating', () => {
+          const input = { gridTemplateColumns: '1fr auto' }
+          const output = {
+            gridTemplateColumns: '1fr auto',
+            msGridColumns: '1fr auto',
+          }
+          expect(prefix(input)).toEqual(output)
+        })
+
+        it('should prefix row templating', () => {
+          const input = { gridTemplateRows: '1fr auto' }
+          const output = {
+            gridTemplateRows: '1fr auto',
+            msGridRows: '1fr auto',
+          }
+          expect(prefix(input)).toEqual(output)
+        })
+
+        it('should prefix templating even with named grid lines', () => {
+          const input = { gridTemplateColumns: '1fr [header content] auto' }
+          const output = {
+            gridTemplateColumns: '1fr [header content] auto',
+            msGridColumns: '1fr [header content] auto',
+          }
+          expect(prefix(input)).toEqual(output)
+        })
+      })
+
+      describe('positions', () => {
+        it('should prefix a cell with numerical start and end column values', () => {
+          const input = { gridColumnStart: 2, gridColumnEnd: 5 }
+          const output = {
+            gridColumnEnd: 5,
+            gridColumnStart: 2,
+            msGridColumn: 2,
+            msGridColumnSpan: 3,
+          }
+          expect(prefix(input)).toEqual(output)
+        })
+
+        it('should prefix a cell with numerical start and end row values', () => {
+          const input = { gridRowStart: 3, gridRowEnd: 7 }
+          const output = {
+            gridRowEnd: 7,
+            gridRowStart: 3,
+            msGridRow: 3,
+            msGridRowSpan: 4,
+          }
+          expect(prefix(input)).toEqual(output)
+        })
+
+        it('should not prefix a cell with non-numerical position values', () => {
+          const input = { gridRowStart: 'span 3', gridRowEnd: 5 }
+          const output = {
+            gridRowEnd: 5,
+            gridRowStart: 'span 3',
+          }
+          expect(prefix(input)).toEqual(output)
+        })
+
+        it('should expand the shorthand column syntax', () => {
+          const input = { gridColumn: '3 / 5' }
+          const output = {
+            gridColumn: '3 / 5',
+            msGridColumn: 3,
+            msGridColumnSpan: 2,
+          }
+          expect(prefix(input)).toEqual(output)
+        })
+
+        it('should expand the shorthand row syntax', () => {
+          const input = { gridRow: '2 / 7' }
+          const output = {
+            gridRow: '2 / 7',
+            msGridRow: 2,
+            msGridRowSpan: 5,
+          }
+          expect(prefix(input)).toEqual(output)
+        })
+
+        it('should not expand non-numerical values', () => {
+          const input = { gridRow: '2 / span 3' }
+          const output = {
+            gridRow: '2 / span 3',
+            msGridRow: 2,
+          }
+          expect(prefix(input)).toEqual(output)
+        })
+      })
+    })
   })
 })

modules/generator/maps/pluginMap.js

@@ -63,6 +63,11 @@ export default {
     android: 4.4,
     and_uc: maximumVersion,
   },
+  grid: {
+    edge: 16,
+    ie: 11,
+    ie_mob: 11,
+  },
   imageSet: {
     chrome: maximumVersion,
     safari: maximumVersion,

modules/generator/maps/propertyMap.js

@@ -123,26 +123,6 @@ export default {
     'breakInside',
     'regionFragment',
   ],
-  'css-grid': [
-    'gridTemplateColumns',
-    'gridTemplateRows',
-    'gridTemplateAreas',
-    'gridTemplate',
-    'gridAutoColumns',
-    'gridAutoRows',
-    'gridAutoFlow',
-    'grid',
-    'gridRowStart',
-    'gridColumnStart',
-    'gridRowEnd',
-    'gridRow',
-    'gridColumn',
-    'gridColumnEnd',
-    'gridColumnGap',
-    'gridRowGap',
-    'gridArea',
-    'gridGap',
-  ],
   'object-fit': ['objectFit', 'objectPosition'],
   'text-overflow': 'textOverflow',
   'background-img-opts': [

modules/index.js

@@ -9,6 +9,7 @@ import filter from './plugins/filter'
 import flex from './plugins/flex'
 import flexboxOld from './plugins/flexboxOld'
 import gradient from './plugins/gradient'
+import grid from './plugins/grid'
 import imageSet from './plugins/imageSet'
 import logical from './plugins/logical'
 import position from './plugins/position'
@@ -22,6 +23,7 @@ const plugins = [
   filter,
   flexboxOld,
   gradient,
+  grid,
   imageSet,
   logical,
   position,

modules/plugins/grid.js

@@ -0,0 +1,95 @@
+/* @flow */
+
+function isSimplePositionValue(value: any) {
+  return typeof value === 'number' && !isNaN(value)
+}
+
+const alignmentValues = ['center', 'end', 'start', 'stretch']
+
+const displayValues = {
+  'inline-grid': ['-ms-inline-grid', 'inline-grid'],
+  grid: ['-ms-grid', 'grid'],
+}
+
+const propertyConverters = {
+  alignSelf: (value: any, style: Object) => {
+    if (alignmentValues.indexOf(value) > -1) {
+      style.msGridRowAlign = value
+    }
+  },
+
+  gridColumn: (value: any, style: Object) => {
+    if (isSimplePositionValue(value)) {
+      style.msGridColumn = value
+    } else {
+      const [start, end] = value.split('/').map(position => +position)
+      propertyConverters.gridColumnStart(start, style)
+      propertyConverters.gridColumnEnd(end, style)
+    }
+  },
+
+  gridColumnEnd: (value: any, style: Object) => {
+    const { msGridColumn } = style
+    if (isSimplePositionValue(value) && isSimplePositionValue(msGridColumn)) {
+      style.msGridColumnSpan = value - msGridColumn
+    }
+  },
+
+  gridColumnStart: (value: any, style: Object) => {
+    if (isSimplePositionValue(value)) {
+      style.msGridColumn = value
+    }
+  },
+
+  gridRow: (value: any, style: Object) => {
+    if (isSimplePositionValue(value)) {
+      style.msGridRow = value
+    } else {
+      const [start, end] = value.split('/').map(position => +position)
+      propertyConverters.gridRowStart(start, style)
+      propertyConverters.gridRowEnd(end, style)
+    }
+  },
+
+  gridRowEnd: (value: any, style: Object) => {
+    const { msGridRow } = style
+    if (isSimplePositionValue(value) && isSimplePositionValue(msGridRow)) {
+      style.msGridRowSpan = value - msGridRow
+    }
+  },
+
+  gridRowStart: (value: any, style: Object) => {
+    if (isSimplePositionValue(value)) {
+      style.msGridRow = value
+    }
+  },
+
+  gridTemplateColumns: (value: any, style: Object) => {
+    style.msGridColumns = value
+  },
+
+  gridTemplateRows: (value: any, style: Object) => {
+    style.msGridRows = value
+  },
+
+  justifySelf: (value: any, style: Object) => {
+    if (alignmentValues.indexOf(value) > -1) {
+      style.msGridColumnAlign = value
+    }
+  },
+}
+
+export default function grid(
+  property: string,
+  value: any,
+  style: Object
+): ?Array<string> {
+  if (property === 'display' && value in displayValues) {
+    return displayValues[value]
+  }
+
+  if (property in propertyConverters) {
+    const propertyConverter = propertyConverters[property]
+    propertyConverter(value, style)
+  }
+}

modules/plugins/index.js

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