Angular-cli: CSS Grid Layout generates compile warnings from autoprefixer

[Stexxen]

Bug Report or Feature Request (mark with an x)

- [ X] bug report -> please search issues before submitting
- [ ] feature request

Versions.

@angular/cli: 1.0.0
node: 7.5.0
os: darwin x64
@angular/animations: 4.0.2
@angular/common: 4.0.2
@angular/compiler: 4.0.2
@angular/compiler-cli: 4.0.2
@angular/core: 4.0.2
@angular/flex-layout: 2.0.0-beta.7
@angular/forms: 4.0.2
@angular/http: 4.0.2
@angular/material: 2.0.0-beta.3
@angular/platform-browser: 4.0.2
@angular/platform-browser-dynamic: 4.0.2
@angular/platform-server: 4.0.2
@angular/router: 4.0.2
@angular/cli: 1.0.0
@angular/language-service: 2.4.10

Repro steps.

Use any current version CSS Grid Layout statement that does not have an equivalent in IE or Edge, and which autoprefixer cannot convert
They use an outdated version of the spec, see point 2 - http://caniuse.com/#feat=css-grid

ie.

.header {
  grid-column-start: 1;
  grid-column-end: 2;
  grid-row-start: 1;
  grid-row-end: 2;
}

The log given by the failure.

WARNING in ./src/app/dashboard/dashboard.component.css
autoprefixer: /opt/dev/angular2/project6/src/app/dashboard/dashboard.component.css:26:3: IE 
supports only grid-row-end with span. You should add grid: false option to Autoprefixer and use
some JS grid polyfill for full spec support
 @ ./src/app/dashboard/dashboard.component.ts 18:17-53
 @ ./src/app/app.module.ts
 @ ./src/main.ts
 @ multi webpack-dev-server/client?http://localhost:5200 ./src/main.ts

Desired functionality.

The error from Autoprefixer mentions setting grid: false in config, but I'm aware through other issues against this repository, that changing any webpack related config is frowned upon and made intentionally difficult. The reasons for this I can fully understand.

But in this case the warnings are seemingly unavoidable as am using CR Level 1 CSS Grid Layout and I have no intention of supporting IE or Edge in their current form. Edge is working towards CR Level 1

I have tried using browserslist with various options....
Example 1

Chrome >= 57
Firefox >=52

Example 2 (Just testing it really)

Chrome >= 50
Firefox >=50
not Explorer <20
not Edge <20

But none of them have any effect on these compiler warnings.

And worth noting you get 1 error for every line of CR Level 1 CSS that does not have an equivalent IE/Edge statement. So a lot of errors

Preferred functionality would be to somehow pass this grid:false command to autoprefixer to stop these warnings.

Mention any other details that might be useful.

This is a useful table on equivalence

[clydin]

You could try to use autoprefixer control comments to disable processing for the rules in question.

The grid setting could also potentially be changed to default to false within the CLI; especially considering it may be the default in the next version of autoprefixer (see here).

[Stexxen]

Excellent suggestion, my lack of knowledge with Autoprefixer, meant I was not aware of this.

To remove the warnings, my CSS is now of the form

.header {
  grid-column-start: 1;
  /* autoprefixer: off */
  grid-column-end: 2;
  grid-row-start: 1;
  /* autoprefixer: off */
  grid-row-end: 2;
}

I'll close this issue.

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}