Unexpected error using @supports and grid-template-areas

[elclanrs]

I'm using angular-cli after upgrading to 1.7.0 which as far as I know has the postcss update for grid.

I use the following:

@supports (grid-template-areas: none) {

But I get this error:

ERROR in ./src/app/my-component/my-component.component.scss
Module build failed: TypeError: Cannot read property 'warn' of undefined
    at Declaration.warn (/Users/elclanrs/Documents/component-library/node_modules/postcss/lib/node.js:153:24)
    at GridTemplateAreas.insert (/Users/elclanrs/Documents/component-library/node_modules/autoprefixer/lib/hacks/grid-template-areas.js:121:18)
    at GridTemplateAreas.add (/Users/elclanrs/Documents/component-library/node_modules/autoprefixer/lib/declaration.js:225:21)
    at GridTemplateAreas.process (/Users/elclanrs/Documents/component-library/node_modules/autoprefixer/lib/prefixer.js:168:22)
    at GridTemplateAreas.process (/Users/elclanrs/Documents/component-library/node_modules/autoprefixer/lib/declaration.js:235:41)
    at Supports.prefixed (/Users/elclanrs/Documents/component-library/node_modules/autoprefixer/lib/supports.js:94:50)
    at /Users/elclanrs/Documents/component-library/node_modules/autoprefixer/lib/supports.js:319:39
    at Array.map (<anonymous>)
    at Supports.add (/Users/elclanrs/Documents/component-library/node_modules/autoprefixer/lib/supports.js:317:22)
    at Supports.process (/Users/elclanrs/Documents/component-library/node_modules/autoprefixer/lib/supports.js:344:20)
    at /Users/elclanrs/Documents/component-library/node_modules/autoprefixer/lib/processor.js:44:37
    at /Users/elclanrs/Documents/component-library/node_modules/postcss/lib/container.js:292:28
    at /Users/elclanrs/Documents/component-library/node_modules/postcss/lib/container.js:144:26
    at Root.each (/Users/elclanrs/Documents/component-library/node_modules/postcss/lib/container.js:110:22)
    at Root.walk (/Users/elclanrs/Documents/component-library/node_modules/postcss/lib/container.js:143:21)
    at Root.walkAtRules (/Users/elclanrs/Documents/component-library/node_modules/postcss/lib/container.js:290:25)

If I use this instead:

@supports (grid-template-areas: "") {

Then I don't get the error, but the styles don't apply anymore...

AFAIK none is a valid value of grid-template-areas. I also tried initial but I got the same error.

Any ideas on what could be causing this error?

[ai]

Thanks for the report. I will look on it on Friday.

[ai]

Error was fixed 2e9c500

[ai]

But it is not the best way to select browsers with Grid support. I recommend @supports (display: grid) { }

[ai]

I will release it when #989 will be closed

[elclanrs]

@ai, thanks, I'll give it a try once it's released!

The reason I check for grid-template-areas is because I want to target only browsers support grid areas (so not IE with the old implementation).

[ai]

Autoprefixer transforms grid-template-areas for IE as well 😉.

It is better to use grid-gap (Autoprefixer doesn't polyfill it and I don't see how to do it).

[ai]

Details about areas support in Autoprefixer https://github.com/postcss/autoprefixer/releases/tag/7.2.0

[ai]

Released in 8.1