grid-areas-duplicate-complex.out.css

/*******************************\
  COMPLEX DUPLICATE AREAS TEST 1
\*******************************/

#main > #content {
  grid-area: content;
}
#main > .sidebar {
  grid-area: first-sb;
}
#main > .sidebar.second {
  grid-area: second-sb;
}
@media (min-width: 660px) {
  #main {
    display: -ms-grid;
    display: grid;
    -ms-grid-rows: auto;
    -ms-grid-columns: 20% 1em 1fr 20%;
    grid-template: "..... ... content ....."/20% 1em 1fr 20%;
  }
  #main.has-first-sidebar {
    -ms-grid-rows: auto;
    -ms-grid-columns: 20% 1em 300px 30px 1fr 20%;
    grid-template: "..... ... first-sb .... content ....."/20% 1em 300px 30px 1fr 20%;
  }
  #main.has-second-sidebar {
    -ms-grid-rows: auto;
    -ms-grid-columns: 20% 1em 1fr 30px 300px 20%;
    grid-template: "..... ... content .... second-sb ....."/20% 1em 1fr 30px 300px 20%;
  }
  #main.has-first-sidebar.has-second-sidebar {
    -ms-grid-rows: auto;
    -ms-grid-columns: 20% 1em 200px 30px 1fr 30px 200px 20%;
    grid-template: "..... ... first-sb .... content .... second-sb ....."/20% 1em 200px 30px 1fr 30px 200px 20%;
  }
  #main > #content {
    -ms-grid-row: 1;
    -ms-grid-column: 3;
  }
  #main.has-first-sidebar > #content {
    -ms-grid-row: 1;
    -ms-grid-column: 5;
  }
  #main.has-second-sidebar > #content {
    -ms-grid-row: 1;
    -ms-grid-column: 3;
  }
  #main.has-first-sidebar.has-second-sidebar > #content {
    -ms-grid-row: 1;
    -ms-grid-column: 5;
  }
  #main > .sidebar {
    -ms-grid-row: 1;
    -ms-grid-column: 3;
  }
  #main.has-first-sidebar.has-second-sidebar > .sidebar {
    -ms-grid-row: 1;
    -ms-grid-column: 3;
  }
  #main > .sidebar.second {
    -ms-grid-row: 1;
    -ms-grid-column: 5;
  }
  #main.has-first-sidebar.has-second-sidebar > .sidebar.second {
    -ms-grid-row: 1;
    -ms-grid-column: 7;
  }
}
@media (max-width: 1499px) {
  #main {
    -ms-grid-rows: auto;
    -ms-grid-columns: 10% 1em 1fr 10%;
    grid-template: "..... ... content ....."/10% 1em 1fr 10%;
  }
  #main.has-first-sidebar {
    -ms-grid-rows: auto;
    -ms-grid-columns: 10% 1em 250px 30px 1fr 10%;
    grid-template: "..... ... first-sb .... content ....."/10% 1em 250px 30px 1fr 10%;
  }
  #main.has-second-sidebar {
    -ms-grid-rows: auto;
    -ms-grid-columns: 10% 1em 1fr 30px 250px 10%;
    grid-template: "..... ... content .... second-sb ....."/10% 1em 1fr 30px 250px 10%;
  }
  #main.has-first-sidebar.has-second-sidebar {
    -ms-grid-rows: auto;
    -ms-grid-columns: 10% 1em 200px 30px 1fr 30px 200px 10%;
    grid-template: "..... ... first-sb .... content .... second-sb ....."/10% 1em 200px 30px 1fr 30px 200px 10%;
  }
  #main > #content {
    -ms-grid-row: 1;
    -ms-grid-column: 3;
  }
  #main.has-first-sidebar > #content {
    -ms-grid-row: 1;
    -ms-grid-column: 5;
  }
  #main.has-second-sidebar > #content {
    -ms-grid-row: 1;
    -ms-grid-column: 3;
  }
  #main.has-first-sidebar.has-second-sidebar > #content {
    -ms-grid-row: 1;
    -ms-grid-column: 5;
  }
  #main.has-first-sidebar > .sidebar {
    -ms-grid-row: 1;
    -ms-grid-column: 3;
  }
  #main.has-first-sidebar.has-second-sidebar > .sidebar {
    -ms-grid-row: 1;
    -ms-grid-column: 3;
  }
  #main.has-second-sidebar > .sidebar.second {
    -ms-grid-row: 1;
    -ms-grid-column: 5;
  }
  #main.has-first-sidebar.has-second-sidebar > .sidebar.second {
    -ms-grid-row: 1;
    -ms-grid-column: 7;
  }
}
@media (max-width: 959px) {
  #main {
    -ms-grid-rows: auto;
    -ms-grid-columns: 2em 1em 1fr 2em;
    grid-template: "..... ... content ....."/2em 1em 1fr 2em;
  }
  #main.has-first-sidebar {
    -ms-grid-rows: auto;
    -ms-grid-columns: 2em 1em 200px 30px 1fr 2em;
    grid-template: "..... ... first-sb .... content ....."/2em 1em 200px 30px 1fr 2em;
  }
  #main.has-second-sidebar {
    -ms-grid-rows: auto;
    -ms-grid-columns: 2em 1em 1fr 30px 200px 2em;
    grid-template: "..... ... content .... second-sb ....."/2em 1em 1fr 30px 200px 2em;
  }
  #main.has-first-sidebar.has-second-sidebar {
    -ms-grid-rows: auto;
    -ms-grid-columns: 2em 1em 150px 30px 1fr 30px 150px 2em;
    grid-template: "..... ... first-sb .... content .... second-sb ....."/2em 1em 150px 30px 1fr 30px 150px 2em;
  }
  #main > #content {
    -ms-grid-row: 1;
    -ms-grid-column: 3;
  }
  #main.has-first-sidebar > #content {
    -ms-grid-row: 1;
    -ms-grid-column: 5;
  }
  #main.has-second-sidebar > #content {
    -ms-grid-row: 1;
    -ms-grid-column: 3;
  }
  #main.has-first-sidebar.has-second-sidebar > #content {
    -ms-grid-row: 1;
    -ms-grid-column: 5;
  }
  #main.has-first-sidebar > .sidebar {
    -ms-grid-row: 1;
    -ms-grid-column: 3;
  }
  #main.has-first-sidebar.has-second-sidebar > .sidebar {
    -ms-grid-row: 1;
    -ms-grid-column: 3;
  }
  #main.has-second-sidebar > .sidebar.second {
    -ms-grid-row: 1;
    -ms-grid-column: 5;
  }
  #main.has-first-sidebar.has-second-sidebar > .sidebar.second {
    -ms-grid-row: 1;
    -ms-grid-column: 7;
  }
}

/*******************************\
  COMPLEX DUPLICATE AREAS TEST 2
\*******************************/

#main-second {
  display: -ms-grid;
  display: grid;
  -ms-grid-rows: auto;
  -ms-grid-columns: 20% 1em 1fr 20%;
  grid-template: "..... ... content-2 ....."/20% 1em 1fr 20%;
}
#main-second.has-first-sidebar {
  -ms-grid-rows: auto;
  -ms-grid-columns: 20% 1em 300px 30px 1fr 20%;
  grid-template: "..... ... first-sb-2 .... content-2 ....."/20% 1em 300px 30px 1fr 20%;
}
#main-second.has-second-sidebar {
  -ms-grid-rows: auto;
  -ms-grid-columns: 20% 1em 1fr 30px 300px 20%;
  grid-template: "..... ... content-2 .... second-sb-2 ....."/20% 1em 1fr 30px 300px 20%;
}
#main-second.has-first-sidebar.has-second-sidebar {
  -ms-grid-rows: auto;
  -ms-grid-columns: 20% 1em 200px 30px 1fr 30px 200px 20%;
  grid-template: "..... ... first-sb-2 .... content-2 .... second-sb-2 ....."/20% 1em 200px 30px 1fr 30px 200px 20%;
}

@media (max-width: 960px) {
  #main-second {
    -ms-grid-rows: auto;
    -ms-grid-columns: 2em 1em 1fr 2em;
    grid-template: "..... ... content-2 ....."/2em 1em 1fr 2em;
  }
  #main-second.has-first-sidebar {
    -ms-grid-rows: auto;
    -ms-grid-columns: 2em 1em 200px 30px 1fr 2em;
    grid-template: "..... ... first-sb-2 .... content-2 ....."/2em 1em 200px 30px 1fr 2em;
  }
  #main-second.has-second-sidebar {
    -ms-grid-rows: auto;
    -ms-grid-columns: 2em 1em 1fr 30px 200px 2em;
    grid-template: "..... ... content-2 .... second-sb-2 ....."/2em 1em 1fr 30px 200px 2em;
  }
  #main-second.has-first-sidebar.has-second-sidebar {
    -ms-grid-rows: auto;
    -ms-grid-columns: 2em 1em 150px 30px 1fr 30px 150px 2em;
    grid-template: "..... ... first-sb-2 .... content-2 .... second-sb-2 ....."/2em 1em 150px 30px 1fr 30px 150px 2em;
  }
}

.content {
  -ms-grid-row: 1;
  -ms-grid-column: 3;
  grid-area: content-2;
}

#main-second.has-first-sidebar > .content {
  -ms-grid-row: 1;
  -ms-grid-column: 5;
}

#main-second.has-second-sidebar > .content {
  -ms-grid-row: 1;
  -ms-grid-column: 3;
}

#main-second.has-first-sidebar.has-second-sidebar > .content {
  -ms-grid-row: 1;
  -ms-grid-column: 5;
}
.sidebar {
  -ms-grid-row: 1;
  -ms-grid-column: 3;
  grid-area: first-sb-2;
}
#main-second.has-first-sidebar.has-second-sidebar > .sidebar {
  -ms-grid-row: 1;
  -ms-grid-column: 3;
}
.sidebar.second {
  -ms-grid-row: 1;
  -ms-grid-column: 5;
  grid-area: second-sb-2;
}
#main-second.has-first-sidebar.has-second-sidebar > .sidebar.second {
  -ms-grid-row: 1;
  -ms-grid-column: 7;
}
@media (max-width: 960px) {
  .content {
    -ms-grid-row: 1;
    -ms-grid-column: 3;
  }
  #main-second.has-first-sidebar > .content {
    -ms-grid-row: 1;
    -ms-grid-column: 5;
  }
  #main-second.has-second-sidebar > .content {
    -ms-grid-row: 1;
    -ms-grid-column: 3;
  }
  #main-second.has-first-sidebar.has-second-sidebar > .content {
    -ms-grid-row: 1;
    -ms-grid-column: 5;
  }
  .sidebar {
    -ms-grid-row: 1;
    -ms-grid-column: 3;
  }
  #main-second.has-first-sidebar.has-second-sidebar > .sidebar {
    -ms-grid-row: 1;
    -ms-grid-column: 3;
  }
  .sidebar.second {
    -ms-grid-row: 1;
    -ms-grid-column: 5;
  }
  #main-second.has-first-sidebar.has-second-sidebar > .sidebar.second {
    -ms-grid-row: 1;
    -ms-grid-column: 7;
  }
}

/* rule with not found identifier (should not break the compiler) */
.hello {
  grid-area: world;
}