[jss-vendor-prefixer] CSS Grid and Vendor prefix

Expected behavior: Hello When using CSS Grid with recat-jss I expect that Vendor prefix will kick in i IE and add the -ms prefix to some of the CSS Grid properties.

Describe the bug: Here is an example:

		'& .head-section': {
			display: 'grid',
			gridTemplateColumns: '1fr 1fr 240px',
			gridRow: props => props.notificationSection ? '2' : '1',
			gridColumn: '1 / span 2'
			padding: '0 30px',
		}

This works fine in Chrome or Firefox. In IE 11 however, I see the following css rules in developer tools:

display: -ms-grid;
-ms-grid-colum: 1 / span 2;
grid-template-columns: 1fr 1fr 240px;
grid-row: 2;

Notice that only the display property has correct propertyname and value. The other properties are flagged red in IE dev tools and are not applied.

According to Autoprefix, the other values should be pared like this for IE:

display: -ms-grid;
-ms-grid-colum: 1;
-ms-grid-column-span: 2;
ms-grid-columns: 1fr 1fr 240px;
ms-grid-row: 2;

Is there any reason for this behavior?

Codesandbox link:

Versions (please complete the following information):

• react-jss: 8.6.1
• Browser [e.g. chrome, safari]: IE 11
• OS [e.g. Windows, macOS]: Windows

[fralewsmi]

Any update here?

[liranmery]

I will take care of this issue this week thanks! @AleshaOleg

Is this issue still under progress?