diff --git a/data/prefixes.js b/data/prefixes.js index 30db8ad6e..fdede1d94 100644 --- a/data/prefixes.js +++ b/data/prefixes.js @@ -724,7 +724,7 @@ f(grid, browsers => { 'grid-row-start', 'grid-column-start', 'grid-row-end', 'grid-column-end', 'grid-row', 'grid-column', 'grid-area', - 'grid-template', 'grid-template-areas' + 'grid-template', 'grid-template-areas', 'place-self' ], { feature: 'css-grid', browsers diff --git a/lib/hacks/place-self.js b/lib/hacks/place-self.js new file mode 100644 index 000000000..fabbf563d --- /dev/null +++ b/lib/hacks/place-self.js @@ -0,0 +1,32 @@ +let Declaration = require('../declaration') +let utils = require('./grid-utils') + +class PlaceSelf extends Declaration { + static names = ['place-self'] + + /** + * Translate place-self to separate -ms- prefixed properties + */ + insert (decl, prefix, prefixes) { + if (prefix !== '-ms-') return super.insert(decl, prefix, prefixes) + + // prevent doubling of prefixes + if (decl.parent.some(i => i.prop === '-ms-grid-row-align')) { + return undefined + } + + let [[first, second]] = utils.parse(decl) + + if (second) { + utils.insertDecl(decl, 'grid-row-align', first) + utils.insertDecl(decl, 'grid-column-align', second) + } else { + utils.insertDecl(decl, 'grid-row-align', first) + utils.insertDecl(decl, 'grid-column-align', first) + } + + return undefined + } +} + +module.exports = PlaceSelf diff --git a/lib/prefixes.js b/lib/prefixes.js index 3995e3ad0..9f4b4a05e 100644 --- a/lib/prefixes.js +++ b/lib/prefixes.js @@ -53,6 +53,7 @@ Declaration.hack(require('./hacks/overscroll-behavior')) Declaration.hack(require('./hacks/grid-template-areas')) Declaration.hack(require('./hacks/text-emphasis-position')) Declaration.hack(require('./hacks/color-adjust')) +Declaration.hack(require('./hacks/place-self')) Value.hack(require('./hacks/gradient')) Value.hack(require('./hacks/intrinsic')) diff --git a/lib/processor.js b/lib/processor.js index 6ce2e18af..0889879d8 100644 --- a/lib/processor.js +++ b/lib/processor.js @@ -265,6 +265,15 @@ class Processor { return prefixer.process(decl, result) } } + } else if (decl.prop === 'place-self') { + prefixer = this.prefixes.add['place-self'] + if ( + prefixer && + prefixer.prefixes && + this.gridStatus(decl, result) !== false + ) { + return prefixer.process(decl, result) + } } else { // Properties prefixer = this.prefixes.add[decl.prop] diff --git a/test/autoprefixer.test.js b/test/autoprefixer.test.js index 7e82e2f09..b757f1810 100644 --- a/test/autoprefixer.test.js +++ b/test/autoprefixer.test.js @@ -593,7 +593,10 @@ describe('hacks', () => { 'on grid containers. Try using justify-self on child elements ' + 'instead: .warn_ie_justify > * { justify-self: center }', 'autoprefixer: :135:3: IE does not support justify-content ' + - 'on grid containers' + 'on grid containers', + 'autoprefixer: :140:3: IE does not support place-items ' + + 'on grid containers. Try using place-self on child elements ' + + 'instead: .warn_place_items > * { place-self: start end }' ]) }) diff --git a/test/cases/grid.css b/test/cases/grid.css index efcf6a903..4f6fbaa9d 100644 --- a/test/cases/grid.css +++ b/test/cases/grid.css @@ -135,3 +135,16 @@ justify-content: center; display: grid; } + +.warn_place_items { + place-items: start end; + display: grid; +} + +.place-self-a { + place-self: center; +} + +.place-self-b { + place-self: start end; +} diff --git a/test/cases/grid.disabled.css b/test/cases/grid.disabled.css index 7bcf0cc07..93bde184d 100644 --- a/test/cases/grid.disabled.css +++ b/test/cases/grid.disabled.css @@ -139,3 +139,16 @@ justify-content: center; display: grid; } + +.warn_place_items { + place-items: start end; + display: grid; +} + +.place-self-a { + place-self: center; +} + +.place-self-b { + place-self: start end; +} diff --git a/test/cases/grid.out.css b/test/cases/grid.out.css index 8d80e6bd6..9b0b9f941 100644 --- a/test/cases/grid.out.css +++ b/test/cases/grid.out.css @@ -181,3 +181,21 @@ display: -ms-grid; display: grid; } + +.warn_place_items { + place-items: start end; + display: -ms-grid; + display: grid; +} + +.place-self-a { + -ms-grid-row-align: center; + -ms-grid-column-align: center; + place-self: center; +} + +.place-self-b { + -ms-grid-row-align: start; + -ms-grid-column-align: end; + place-self: start end; +}