[v3.12] SCSS Autoprefixer not working with IE Grid option

[dariobauer]

The CSS autoprefixer does not run when the "Prefix CSS Grid statements for Internet Explorer" option is enabled.

I note that version 3.12 supposedly fixed this issue, however I am still experiencing it after updating.

• Codekit v3.12 (Build 32137) on MacOS 10.14.6.
• I have restarted Codekit and recompiled the project.
• Have tried using Dart Sass and Libsass.
• Using a build folder.
• Using the default target browsers.
• Using scss file that imports other scss files during compiling.
• Have tried to compile a CSS file directly but get the same issue.

Hope that I'm not just being an idiot and that you can replicate this. Happy to pass on my source files if that helps.

[bdkjones]

I just tested here and this is not the behavior I'm seeing. Here is the output from running the example at Autoprefixer's repo:

What's MOST LIKELY happening is that you're not seeing the prefixes you used to see because the caniuse database has been updated and those prefixes are no longer required for the browsers in your targetBrowsers string.

To confirm that, use the code above (from the autoprefixer repo's readme) and try prefixing that.

[bdkjones]

If the issue persists, please create a small demo project showing it and zip that so I can download it. Please include the prefixes you think should be there after compiling and where they should be. Please also verify that those prefixes are required by one or more of the browsers you have the project set to target. Thanks!

[dariobauer]

When I use your scss only it works fine, however the issue seems to appear as soon as certain grid css appears. Maybe I'm just writing bad scss ;(

::placeholder {
	color: gray;
}

.image {
	background-image: url([email protected]);
}
@media (min-resolution: 2dppx) {
	.image {
		background-image: url([email protected]);
	}
}

.container {
	display: grid; //works
	grid-template-columns: repeat(3, fit-content(150px)); //works
	grid-gap: 0.8em; //breaks
	justify-content: center;  //breaks
	justify-items: center;  //breaks
}

[bdkjones]

Ok, well, we’ve narrowed things down a bit.

What happens when you run the same code at https://autoprefixer.github.io?

That online version is a little out of date compared to the one in CodeKit and you need to make sure you set up your browsers in EXACTLY the same way on the online page as the browsersList string is in CodeKit. And you need to make sure the grid option is enabled.

[dariobauer]

The online version doesn't appear to have this issue however it may well be that the newer version of autoprefixer has added an issue which appears to be mainly around the grid-gap tag (and possibly others). I have tried their own code from https://github.com/postcss/autoprefixer#grid-autoplacement-support-in-ie and it appears to work in the outdated online tool but not in Codekit.

After checking autoprefixer git issues it is clear that there are ongoing issues with the IE grid feature and it isn't actively being developed, so I'm just going to disable it and write my own prefixes. Cheers for your help.

[bdkjones]

Fair enough! Sorry it’s been a hassle, but since that prefix is pretty limited to one or only a few spots in your CSS, it should be easy to do manually.

…

-Bryan

On Apr 24, 2020, at 01:13, Dario ***@***.***> wrote:  The online version doesn't appear to have this issue however it may well be that the newer version of autoprefixer has added an issue which appears to be mainly around the grid-gap tag (and possibly others). I have tried their own code from https://github.com/postcss/autoprefixer#grid-autoplacement-support-in-ie and it appears to work in their online tool but not in Codekit. After checking autoprefixer git issues it is clear that there are ongoing issues with the IE grid feature and it isn't actively being developed, so I'm just going to disable it and write my own prefixes. Cheers for your help. — You are receiving this because you modified the open/close state. Reply to this email directly, view it on GitHub, or unsubscribe.

[franco4785]

Hi there!
I had this issue as well, and I narrowed it down almost exactly to certain CSS grid related items that cause the IE prefixer to break.

align-items
justify-items

(when using grid-template-columns)
auto-fit
auto-fill

There might be more, but I only ran into these so far.