autoprefixer can not find grid areas when using @media

[zurfyx]

Versions

Angular CLI: 1.7.2
Node: 9.4.0
OS: linux x64
Angular: 5.2.7
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

@angular/cli: 1.7.2
@angular-devkit/build-optimizer: 0.3.2
@angular-devkit/core: 0.3.2
@angular-devkit/schematics: 0.3.2
@ngtools/json-schema: 1.2.0
@ngtools/webpack: 1.10.1
@schematics/angular: 0.3.2
@schematics/package-update: 0.3.2
typescript: 2.5.3
webpack: 3.11.0

Repro steps

Having @media tag prevents it from finding associated grid-area.

✗ The following does output:

WARNING in ./src/app/core/footer/footer.component.scss (Emitted value instead of an instance of Error) autoprefixer: /.../footer.component.scss:28:6: Can not find grid areas: social

footer.component.scss

@media (min-width: 550px) {
  footer {
      grid-template-areas:
        "social ..."
        "...";
    }
}

.social {
  grid-area: social;
}

✓ The following does NOT output any warning:

footer {
    grid-template-areas:
      "social ..."
      "...";
}

.social {
  grid-area: social;
}

Desired behavior

@media should not prevent SCSS from finding grid-area outside its scope.

Other

Related: #9502

[skix123]

I have the same issue.

Node: 6.10.2
OS: darwin x64
Angular: 5.2.4
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

@angular/cli: 1.6.8
@angular-devkit/build-optimizer: 0.0.42
@angular-devkit/core: 0.0.29
@angular-devkit/schematics: 0.0.52
@ngtools/json-schema: 1.1.0
@ngtools/webpack: 1.9.8
@schematics/angular: 0.1.17
typescript: 2.4.2
webpack: 3.10.0

[krodyrobi]

Same here

Angular CLI: 1.6.7
Node: 8.9.4
OS: win32 x64
Angular: 5.2.3
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

@angular/cdk: 5.2.0
@angular/cli: 1.6.7
@angular/material: 5.2.0
@angular-devkit/build-optimizer: 0.0.42
@angular-devkit/core: 0.0.29
@angular-devkit/schematics: 0.0.52
@ngtools/json-schema: 1.1.0
@ngtools/webpack: 1.9.7
@schematics/angular: 0.1.17
typescript: 2.5.3
webpack: 3.10.0

[jmls]

anyone found a solution to this ?

[JesseZomer]

We've been using a combination of the two answers found here as a workaround: https://stackoverflow.com/questions/48588493/angular-5-and-css-grid-cannot-find-grid-areas-warning

[luchillo17]

Same issue here, except i got the grid-template-areas defined inside as well as outside:

.wrapper {
  height: 100%;
  display: grid;
  grid-gap: 0.5rem;
  grid-template-rows: 64px 1fr 1fr;
  grid-template-columns: 1fr 1fr;

  grid-template-areas:
    "header header"
    "board controls"
    "board controls";

  @media screen and (max-width: 700px) {
    grid-template-areas:
      "header header"
      "board board"
      "controls controls";
  }
}

Output:

[krokofant]

Is this related? postcss/autoprefixer#954

Seems to be fixed with autoprefixer 8.3.

[mcblum]

@krokofant interestingly enough I just added 8.6.2 to our project and that didn't seem to fix it. Is it possible the CLI is using a different version than what's in my node_modules?

[krokofant]

@mcblum Try to hack the autoprefixer package that is used by @angular-devkit/build-angular (node_modules@angular-devkit\build-angular). That might show if it works or not.

In my current setup "autoprefixer": "^8.4.1" is used. I think that takes precedence.

[BenRacicot]

I see a lot of issues related to the same warning type but for post-css. Has anyong found out how to supress warnings or specifically autoprefixer warning at this point? Still happing with cli 6.1.5 and autoprefixer 8.6.5