angular-cli: autoprefixer can not find grid areas when using @media

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: https://github.com/angular/angular-cli/issues/9502