Merge pull request #186 from kevinweber/kw--grid-shorthand-span

Support "span" in CSS Grid shorthand

Author: robinweser

modules/__tests__/createPrefixer-test.js

@@ -526,6 +526,16 @@ describe('Static Prefixer', () => {
           expect(prefix(input)).toEqual(output)
         })
 
+        it('should expand the shorthand column syntax with span', () => {
+          const input = { gridColumn: '3 / span 1' }
+          const output = {
+            gridColumn: '3 / span 1',
+            msGridColumn: 3,
+            msGridColumnSpan: 1,
+          }
+          expect(prefix(input)).toEqual(output)
+        })
+
         it('should expand the shorthand row syntax', () => {
           const input = { gridRow: '2 / 7' }
           const output = {
@@ -536,11 +546,12 @@ describe('Static Prefixer', () => {
           expect(prefix(input)).toEqual(output)
         })
 
-        it('should not expand non-numerical values', () => {
+        it('should expand the shorthand row syntax with span', () => {
           const input = { gridRow: '2 / span 3' }
           const output = {
             gridRow: '2 / span 3',
             msGridRow: 2,
+            msGridRowSpan: 3,
           }
           expect(prefix(input)).toEqual(output)
         })

modules/plugins/grid.js

@@ -22,9 +22,15 @@ const propertyConverters = {
     if (isSimplePositionValue(value)) {
       style.msGridColumn = value
     } else {
-      const [start, end] = value.split('/').map(position => +position)
-      propertyConverters.gridColumnStart(start, style)
-      propertyConverters.gridColumnEnd(end, style)
+      const [start, end] = value.split('/')
+      propertyConverters.gridColumnStart(+start, style)
+
+      const [maybeSpan, maybeNumber] = end.split(/ ?span /)
+      if (maybeSpan === '') {
+        propertyConverters.gridColumnEnd(+start + +maybeNumber, style)
+      } else {
+        propertyConverters.gridColumnEnd(+end, style)
+      }
     }
   },
 
@@ -45,9 +51,15 @@ const propertyConverters = {
     if (isSimplePositionValue(value)) {
       style.msGridRow = value
     } else {
-      const [start, end] = value.split('/').map(position => +position)
-      propertyConverters.gridRowStart(start, style)
-      propertyConverters.gridRowEnd(end, style)
+      const [start, end] = value.split('/')
+      propertyConverters.gridRowStart(+start, style)
+
+      const [maybeSpan, maybeNumber] = end.split(/ ?span /)
+      if (maybeSpan === '') {
+        propertyConverters.gridRowEnd(+start + +maybeNumber, style)
+      } else {
+        propertyConverters.gridRowEnd(+end, style)
+      }
     }
   },