[Grid] Compiled CSS for child .rows not as expected when wrapped in ID/Class

[coogie]

Hi all.

I have a situation in which I'm trying to encapsulate the Foundation Grid styles behind an ID - we have a product that can be injected into other websites and I'm trying to ensure that any styles we need don't bleed out and interfere with the parent site.

However, I've got small issue when I wrap the Foundation Sites grid in a class or ID in that the output CSS for the child .row classes is not as expected. The wrapper ID/Class is placed in some unexpected places.

How can we reproduce this bug?
Consider the following setup in my-app.scss:

@import 'foundation-sites/scss/util/util';
@import 'foundation-sites/scss/global';
@import 'foundation-sites/scss/grid/grid';

#WRAP {
    @include foundation-flex-grid();
}

What did you expect to happen?
I expected the Foundation Sites grid styles to have the additional specificity of my ID/Class.
E.g.: #WRAP .row .row

#WRAP .row {
  max-width: 75rem;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  flex-flow: row wrap;
}
#WRAP .row .row {
  max-width: none;
  margin-left: -0.625rem;
  margin-right: -0.625rem;
}
@media screen and (min-width: 40em) {
  #WRAP .row .row {
    margin-left: -0.9375rem;
    margin-right: -0.9375rem;
  }
}

[...]

#WRAP .column.row.row, #WRAP .row.row.columns {
  float: none;
  display: block;
}
#WRAP .row .column.row.row, #WRAP .row .row.row.columns {
  padding-left: 0;
  padding-right: 0;
  margin-left: 0;
  margin-right: 0;
}

#WRAP .small-1 {
  flex: 0 0 8.33333%;
  max-width: 8.33333%;
}

[...]

What happened instead?
The parent ID/Class is added in some strange positions in relation to .row.
E.g.: #WRAP .row #WRAP .row

#WRAP .row {
  max-width: 75rem;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  flex-flow: row wrap;
}
#WRAP .row #WRAP .row {
  max-width: none;
  margin-left: -0.625rem;
  margin-right: -0.625rem;
}
@media screen and (min-width: 40em) {
  #WRAP .row #WRAP .row {
    margin-left: -0.9375rem;
    margin-right: -0.9375rem;
  }
}

[...]

#WRAP .column.row.row, #WRAP .row.row.columns {
  float: none;
  display: block;
}
.row #WRAP .column.row.row, .row #WRAP .row.row.columns {
  padding-left: 0;
  padding-right: 0;
  margin-left: 0;
  margin-right: 0;
}
#WRAP .small-1 {
  flex: 0 0 8.33333%;
  max-width: 8.33333%;
}

[...]

[brettsmason]

@coogie Thanks for the report.
I've ran a test myself and I see what you mean. I have identified the .row issue, its this line: https://github.com/zurb/foundation-sites/blob/develop/scss/grid/_flex-grid.scss#L158

Changing & & to & .row solved this particular issue for me.

Were there any other specific issues you found in the generated CSS? If you could let me know and I'll put a PR together to fix this.

[brettsmason]

https://github.com/zurb/foundation-sites/blob/develop/scss/grid/_flex-grid.scss#L242 this also looks like it needs changing to & .row.#{$-zf-size}-unstack {

[coogie]

Thanks @brettsmason,

I can confirm that this is happening on the traditional float-based grid, too, with the following rules:

#WRAP .row #WRAP .row

[…]

#WRAP .row #WRAP .row.collapse 

[…]

.row #WRAP .column.row.row, .row #WRAP .row.row.columns

[…]

#WRAP .large-collapse .row, .expanded.row #WRAP .large-collapse.row

As for whether it's happening with items such as components, I can't say - I'm only using the grid in this way.

Also, from the looks of it, the unstack classes are compiling as expected so that may not actually need to change:

#WRAP .row.large-unstack > .column, #WRAP .row.large-unstack > .columns {
  flex: 0 0 100%;
}
@media screen and (min-width: 64em) {
  #WRAP .row.large-unstack > .column, #WRAP .row.large-unstack > .columns {
    flex: 1 1 0px;
  }
}

[brettsmason]

@kball @andycochran I've been looking at fixing this, but I've noticed some of the CSS/Sass looks a bit odd.
If you take the example above (ignoring #wrap), this doesn't make any sense to me:
.row #WRAP .column.row.row, .row #WRAP .row.row.columns

You wouldn't have 2 .row declarations on the same element. I think there may be a larger issue here but would appreciate a 2nd pair of eyes on it.

Edit: Having re-read the comments in the code it appears this is needed

[brettsmason]

@coogie I have added a PR addressing this.
If possible would could you double check this solves your problems? I have double checked the flex grid and normal grid output and this should now be correct.

[coogie]

@brettsmason it looks as though that has solved the issue!
Thanks for looking into it, and thanks for the speedy resolution. :)