diff --git a/modules/__tests__/createPrefixer-test.js b/modules/__tests__/createPrefixer-test.js index e2fb8e8..71e5345 100644 --- a/modules/__tests__/createPrefixer-test.js +++ b/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) + }) + }) + }) }) }) diff --git a/modules/generator/maps/pluginMap.js b/modules/generator/maps/pluginMap.js index 95cc95e..6d18b26 100644 --- a/modules/generator/maps/pluginMap.js +++ b/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, diff --git a/modules/generator/maps/propertyMap.js b/modules/generator/maps/propertyMap.js index 03661a3..0d44626 100644 --- a/modules/generator/maps/propertyMap.js +++ b/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': [ diff --git a/modules/index.js b/modules/index.js index ddd111c..8ce646f 100644 --- a/modules/index.js +++ b/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, diff --git a/modules/plugins/grid.js b/modules/plugins/grid.js new file mode 100644 index 0000000..39f39ae --- /dev/null +++ b/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 { + if (property === 'display' && value in displayValues) { + return displayValues[value] + } + + if (property in propertyConverters) { + const propertyConverter = propertyConverters[property] + propertyConverter(value, style) + } +} diff --git a/modules/plugins/index.js b/modules/plugins/index.js index 30127bc..14ab20c 100644 --- a/modules/plugins/index.js +++ b/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,