Neccessary quotes are removed from CSS Grid Areas syntax

[joestrong]

I'm using the new CSS Grid Layout syntax (now in stable chrome & firefox), and part of it doesn't run well through CSS Clean.

I'm using clean-css-cli v4.0.9 with default options on arch linux

When processing this code:

.grid {
  display: grid;
  grid-template-columns: 1fr 2fr;
  grid-template-rows: 150px auto;
  grid-template-areas: "header header" "nav body";
}

@media (max-width: 640px) {
    .grid {
      grid-template-columns: 1fr;
      grid-template-rows: 150px auto;
      grid-template-areas: "header" "nav" "body";
  }
}

I get this output:

.grid{display:grid;flex:1;max-width:1024px;grid-template-columns:1fr 2fr;grid-template-rows:150px auto;grid-template-areas:"header header" "nav body"}@media (max-width:640px){.grid{grid-template-columns:1fr;grid-template-rows:150px auto;grid-template-areas:header nav body}}.

The important part being:

grid-template-areas:"header header" "nav body"

grid-template-areas:header nav body

Where multiple words are used in quotes for grid-template-areas, the quotes remain, however with single words in quotes, the quote marks are stripped and this causes the CSS property's value to be invalid (quotes are required as they define rows in the CSS Grid).

W3C Docs: https://www.w3.org/TR/css3-grid-layout/#grid-template-areas-property

[jakubpawlowicz]

You are totally right, fix is coming!

[jakubpawlowicz]

It's fixed in 4.0.10.