Medium and up class prefixes being generated as small

[brettsmason]

Following on from this comment I have discovered that classes prefixed with their breakpoint name eg size-collapse, size-uncollapse and size-unstack are all receiving the prefix small.

I've tracked this down to this commit - if I revert this then classes are generated correctly.

I've done a diff for generated CSS with and without that PR and all it changes is the incorrect prefixes, so looks like thie is indeed the culprit.

@kball Can you confirm?

[brettsmason]

@Luckyfella73 I've set this up as a new issue to stop the other issue being populated with this.

[kball]

@brettsmason do you remember the impetus for that commit? Want to make sure this doesn't break something else

[brettsmason]

@kball I believe it was to do with this: https://github.com/zurb/foundation-sites/blob/develop/scss/xy-grid/_cell.scss#L110

Basically allowing the xy-cell mixin to automatically detect the breakpoint size and output the correct gutters for that breakpoint. However I've tested locally and reversing that change makes no difference when creating my own class with xy-cell within an @include breakpoint call.

[brettsmason]

Actually scratch that... it does impact xy-cell - will post results now

[brettsmason]

Sass:

.my-cell {
    @include xy-cell;

    @include breakpoint(medium) {
        @include xy-cell(4);
    }
}

Current generated CSS:

.my-cell {
  -webkit-flex: 0 0 auto;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  min-height: 0px;
  min-width: 0px;
  width: calc(100% - 1.25rem);
  margin-right: 0.625rem;
  margin-left: 0.625rem; }
  @media print, screen and (min-width: 40em) {
    .my-cell {
      width: calc(33.33333% - 1.875rem);
      margin-right: 0.9375rem;
      margin-left: 0.9375rem; } }

With commit reversed:

.my-cell {
  -webkit-flex: 0 0 auto;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  min-height: 0px;
  min-width: 0px;
  width: calc(100% - 1.875rem); }
  @media print, screen and (min-width: 40em) {
    .my-cell {
      width: calc(33.33333% - 1.875rem); } }

[IamManchanda]

So its just responsive gutters!