[css-grid] place-self can be translated

[Dan503]

I'm kicking myself for not realizing this while we were working on the align/justify-content/items warnings >_<

Input CSS

.grid > * {
  place-self: center;
}

Current Output CSS

.grid > * {
  place-self: center;
}

Expected output CSS

.grid > * {
  -ms-grid-row-align: center;
  -ms-grid-column-align: center;
  place-self: center;
}

[Dan503]

Also be aware of the 2 value syntax

Input CSS

.grid > * {
  place-self: start end;
}

Current Output CSS

.grid > * {
  place-self: start end;
}

Expected output CSS

.grid > * {
  -ms-grid-row-align: start;
  -ms-grid-column-align: end;
  place-self: start end;
}

[Dan503]

Also be aware that if you write this CSS:

.grid {
  display: grid;
  place-items: start end;
}

It will output this warning:

autoprefixer: C:\xxx\autoprefixer\playground\output.css:11:3: IE does not support place-items on grid containers. Try using place-self on child elements instead: .grid > * { place-self: start end }

This warning is misleading to users as using place-self currently does not get translated by Autoprefixer.

[ai]

@bogdan0083 do you want to implement it?

[Dan503]

I tried seeing if I could fix it myself since I need this fixed for the article...

I couldn't figure it out though :(

@bogdan0083 I need your help getting this one fixed so that I can mention this translation in my new article.

[bogdan0083]

Sure! I will try to fix this issue 🙂

[bogdan0083]

@ai How can I not prefix the property if grid feature is disabled? I added place-self to the prefixes.js:

// CSS Grid Layout
let grid = require('caniuse-lite/data/features/css-grid')

f(grid, browsers => {
  prefix(['display-grid', 'inline-grid'], {
    props: ['display'],
    feature: 'css-grid',
    browsers
  })
  prefix([
    'grid-template-columns', 'grid-template-rows',
    'grid-row-start', 'grid-column-start',
    'grid-row-end', 'grid-column-end',
    'grid-row', 'grid-column', 'grid-area',
    'grid-template', 'grid-template-areas', 'place-self' // here
  ], {
    feature: 'css-grid',
    browsers
  })
})

The hack works, but the test case with grid disabled (grid.disabled.css) fails, because it still adds place-self prefixes.

Upd 1: I also didn't find place-self property on Can I Use 🤔

Upd 2: Do I need to send PR to caniuse to add place-(self/items) properties? I'm not sure, because we need place-self only for css grid prefixes.

[ai]

Released in 9.3