diff --git a/modules/__tests__/createPrefixer-test.js b/modules/__tests__/createPrefixer-test.js index 71e5345..37bac0f 100644 --- a/modules/__tests__/createPrefixer-test.js +++ b/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) }) diff --git a/modules/plugins/grid.js b/modules/plugins/grid.js index 39f39ae..7f34df3 100644 --- a/modules/plugins/grid.js +++ b/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) + } } },