[Flex Grid] Media query-based -collapse classnames break after 6.4.1

[chenryhen]

Potentially another issue related to: #10358

When we update from 6.2.4/6.3.1 to 6.4.1 all of our -collapse classes stop working. We've set custom breakpoints:

$breakpoints: (
  xsmall: 0,
  small: 30em,
  medium: 40em,
  large: 64em,
  xlarge: 78.125em,
  xxlarge: 90em,
) !default;

$breakpoint-classes: (xsmall small medium large xlarge xxlarge) !default;

With the older versions, we see the appropriate classes for each breakpoint (xsmall-collase, xsmall-uncollapse, small-collapse, etc.). After updating to 6.4.1 all of the classes at each breakpoint become xsmall-collapse and xsmall-uncollapse. For example:

@media screen and (min-width: 90em) {
  .xsmall-collapse > .column, .xsmall-collapse > .columns {
    padding-right: 0;
    padding-left: 0; }
  .xsmall-uncollapse > .column, .xsmall-uncollapse > .columns {
    padding-right: 0.625rem;
    padding-left: 0.625rem; } 
@media screen and (min-width: 78.125em) {
  .xsmall-collapse > .column, .xsmall-collapse > .columns {
    padding-right: 0;
    padding-left: 0; }
  .xsmall-uncollapse > .column, .xsmall-uncollapse > .columns {
    padding-right: 0.625rem;
    padding-left: 0.625rem; } }

[rykener]

thanks for linking to the issue I opened @chenryhen. Just to clarify, are you able to compile with this in 6.4.1?

$breakpoints: (
  xsmall: 0,
  small: 30em,
  medium: 40em,
  large: 64em,
  xlarge: 78.125em,
  xxlarge: 90em,
) !default;

$breakpoint-classes: (xsmall small medium large xlarge xxlarge) !default;

because, using webpack, I cannot.

[chenryhen]

@shonin yup. We're using webpack as well, and I don't get compilation errors. I haven't done a thorough check, but other media query classnames seem to be working (like medium-12 and others).

[mihail-minkov]

Did you check your _settings.scss when I installed Foundation 6.4 for the first time, I saw that the @includes where changed and the classic grids were commented leaving only the XY Grid available.

[chenryhen]

From what I can tell, it's using the foundation-flex-grid mixin to generate classes. Classes like large-expand and xxlarge-expand are there. It's just this block where $-zf-size doesn't seem to update on each iteration

// Responsive collapsing
    .#{$-zf-size}-collapse {
      > .column { @include grid-col-collapse; }
    }

    .#{$-zf-size}-uncollapse {
      > .column { @include grid-col-gutter($-zf-size); }
    }

[jmplummer-zz]

I actually just tweeted them about this. The issue appears to be in the update to the breakpoint mixin in 6.4.1. At the very bottom of that mixin, they added $-zf-size: $old-zf-size !global; which resets $-zf-size to small at the end of very iteration. Then, in _flex-grid.scss, they call breakpoint immediately before setting up their #{$-zf-size}-collapse classes, leading to every output to be small-collapse, no matter whats in your breakpoint map.

i didn't have time to fill out a bug report, but if you'd like to, hopefully that information helps.

[brettsmason]

@jmplummer you are correct it was to do with that - itd been fixed in a pr which will be included in the 6.4.2 release next week.

[kball]

Closing this as it was fixed in #10491

Will be out early next week.