stylus / nib

Stylus mixins, utilities, components, and gradient image generation
http://stylus.github.io/nib
MIT License
1.91k stars 249 forks source link

transition mixin breaks surrounding code #330

Open enzy opened 8 years ago

enzy commented 8 years ago

Stylus: 0.54.5 Nib: 1.1.0

Source file:

@import 'nib'

$perRow = 5
$itemRatio = 0.625

.grid
    display block
    opacity 0
    transition opacity 1s ease

    &-item
        position relative
        display block
        width (100% / $perRow)
        height 0
        padding-top (100% * $itemRatio / $perRow)

Result:

.grid {
  display: block;
  opacity: 0;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: alpha(opacity=0);
  .grid td,
  .grid th {
    padding: 0;
  }
  -webkit-transition: ;
  .grid td,
  .grid th {
    padding: 0;
  }
  -moz-transition: ;
  .grid td,
  .grid th {
    padding: 0;
  }
  -o-transition: ;
  .grid td,
  .grid th {
    padding: 0;
  }
  -ms-transition: ;
  .grid td,
  .grid th {
    padding: 0;
  }
  transition: ;
}
.grid-item {
  position: relative;
  display: block;
  width: 20%;
  height: 0;
  padding-top: 12.5%;
}

Correct result when nib is not imported:

.grid {
  display: block;
  opacity: 0;
  transition: opacity 1s ease;
}
.grid-item {
  position: relative;
  display: block;
  width: 20%;
  height: 0;
  padding-top: 12.5%;
}