Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP

Loading…

vendor-value() omits @media query #121

Open
buschtoens opened this Issue · 1 comment

2 participants

@buschtoens
.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

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.