Grid not working in angular7

[joecollett]

I am trying to get Angular7 working nicely with the Autoprefixer. I'm specifically looking to get support on IE11. I've removed the "not" from "IE 9 - 11" in the browserlist file. I've also added

/* autoprefixer grid: autoplace / / autoprefixer grid: on */

To the top of my _grid.scss file. Problem is grid items are still not getting any prefixes. Flexbox seems to work fine but not CSS grid. Is there any configuration I've missed?

[Dan503]

It sounds like you have done everything right. The only thing a bit off in what you said is how you wrote the control comment.

/* autoprefixer grid: autoplace */

If you have included IE in your browsers list, and added that control comment, and you are using the latest version of Autoprefixer then it should be working for you.

[joecollett]

Tried that as well and its still not working

[ai]

What is Autoprefixer version? You can check it by npm ls | grep autoprefixer.

[joecollett]

[email protected] extraneous

[ai]

Are you have only one Autoprefixer in that list?

[joecollett]

Yea only one on the list but getting this error

npm ERR! extraneous: [email protected] C:\Projects\ClientCommandCentre\node_modules\autoprefixer

[ai]

What is paths for Browserslist config and CSS file?

[joecollett]

C:\Projects\ClientCommandCentre\src\browserslist
C:\Projects\ClientCommandCentre\src\scss\base_grid.scss

[ai]

Can you create a simple scss/test.scss with:

a {
  display: grid
}

Maybe the problem is in mixin?

[joecollett]

[joecollett]

Flexbox seems to work though

[Dan503]

Try this:

/* autoprefixer grid: autoplace */
.test {
  display: grid;
  grid-template-rows: auto;
  grid-template-columns: auto;
}

[Dan503]

If that doesn't work, maybe your compiler is stripping out comments before Autoprefixer has a chance to run.

[joecollett]

So after the scss has been compiled the comments should still be in the css? Looks like the compiled style sheet doesnt have any of the comments.

[Dan503]

Yes. That is your problem.

Don't do this:

// autoprefixer grid: autoplace
.test {
  display: grid;
  grid-template-rows: auto;
  grid-template-columns: auto;
}

Do this:

/* autoprefixer grid: autoplace */
.test {
  display: grid;
  grid-template-rows: auto;
  grid-template-columns: auto;
}

There is a difference.

[joecollett]

Yep thats what I'm doing, just when I'm building the application its optimizing the css so stripping out all the comments. Will give that ago and see if it works!

[Dan503]

You can also try this:

/*! autoprefixer grid: autoplace */
.test {
  display: grid;
  grid-template-rows: auto;
  grid-template-columns: auto;
}

[joecollett]

Still not working

[joecollett]

I've got it working, was some dependency issues ran npm audit fix and sorted the issue.

[Dan503]

Can you close the issue then?

[joecollett]

Thanks for your help

[SerkanSipahi]

@joecollett @Dan503

I also try to activate the autoprefixer for the grid-layout (also for flexboxes) on angular cli v7.3.9 to generate prefixes but unfortunately it doesn't work:

I have an browserlist file in my src folder:

> 1% 
last 2 versions 
IE 11 

In top of my styles.scss which is located under src i add /*! autoprefixer grid: on */:

/*! autoprefixer grid: on */
@import '~normalize.css/normalize.css';
@import 'themes/custom-theme';

The css grid settings grid-* are located in the corresponding components e.g.

:host {
  @include grid-layout-homepage();
  @include grid-layout-result-page();
  @include grid-layout-detail-page();
}

npm audit fix also not help!

Does the angular.json need to have anything added to it?

What im doing wrong?

Related issues:
angular/angular-cli#13344

[ai]

@SerkanSipahi

1. Run npm ls | grep autoprefixer and check all Autoprefixer versions.
2. Start from some simple example without SCSS and mixins. Just index.css with /* autoprefixer grid: on */ body { display: grid }

[SerkanSipahi]

@ai
Now it works and I know what went wrong. By default, Angular has a project src folder with a styles.scss file in it. In this folder I set the autoprefixer directive in the head. I don't know what is happening under the hood (angular-cli) but apparently it has no effect to the angular component style files. In order to create the prefixes you have to use the autoprefixer directive in every component where you use the grid syntax.

The Angular cli generates a separate <style> tag for each component! Does anyone know how to apply an autoprefixer (/* autoprefixer grid: on */) directive globally to all componente style files?

[ai]

@SerkanSipahi you need access to PostCSS config to set option globally. As I know Angular doesn't provide this API.

[SerkanSipahi]

That's really very painful. Even for flexboxes you have to set the autoprefixer directive /* autoprefixer: on */, in each angular component. We use encapsulated components (we have no global styling file). I don't know if you can solve the problem in our situation with encapsulated components.

@ai
I had read somewhere that you can drag the webpack configuration over the angular-cli. I guess I'll have to find out.

[antonsamper]

Both /* autoprefixer grid: on */ and /* autoprefixer grid: autoplace */ are working but i've had to add them to each individual SCSS file

[adamdport]

I ran into the same issue, solely because the angular docs tell us to put it at the top of the global styles file. It didn't work for me in my project, but when I tried to reproduce it in a new project, it worked fine. Not sure what causes it to stop working.

Like the others, putting the autoprefixer comment at the top of an individual component's style sheet works fine.

[Dan503]

That's weird, the documentation says to use:

/* autoprefixer grid: autoplace /

or

/ autoprefixer grid: no-autoplace */

It is meant to be this:

/* autoprefixer grid: autoplace */

Unless if the Angular examples are Angular's way of telling it not to remove the comments when compiling.

[dyingangel666]

Autoprefixer doesn't check your scss code, he's checking the already compiled css code. So you have to mention where to add your autoprefixer comments. And as far as i know, the autoprefixer comments are just used for the whole next css block.