search

stylus / nib

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

vendor-value() omits @media query #121

Open buschtoens opened 12 years ago

buschtoens commented 12 years ago 
.card
    margin 20px
    @media (min-width: 1000px)
        margin-left vendor-value(calc(100% / (2 * 2) \- 270px))
    @media (min-width: 2031px)
        margin-left vendor-value(calc(100% / (3 * 2) \- 270px))

Expected:

.card {
    margin: 20px;
}
@media (min-width: 1000px) {
    .card {
        margin-left: -webkit-calc(25% - 270px);
        margin-left: -moz-calc(25% - 270px);
        // ...
    }
}
@media (min-width: 2031px) {
    .card {
        margin-left: -webkit-calc(16.666666666% - 270px);
        margin-left: -moz-calc(16.666666666% - 270px);
        // ...
    }
}

Produced:

.card {
    margin: 20px;
    margin-left: -webkit-calc(25% - 270px);
    margin-left: -moz-calc(25% - 270px);
    // ...
}
@media (min-width: 1000px) {
    .card {
        margin-left: -webkit-calc(25% - 270px);
        margin-left: -moz-calc(25% - 270px);
        // ...
    }
}
@media (min-width: 2031px) {
    .card {
        margin-left: -webkit-calc(16.666666666% - 270px);
        margin-left: -moz-calc(16.666666666% - 270px);
        // ...
    }
}

NIb bubbles up to the containing element and adds the vendor-properties a second time, which makes the media querie pretty useless. I believe this is a bug in Stylus L851.

tonistiigi commented 11 years ago

This should be fixed now in stylus LearnBoost/stylus#861