Блоки Stylus s() и +cache игнорируют медиа-запросы

Я заметил, что стилус применяет мой код +cache в неправильном блоке. Стили, которые должны отображаться только в мультимедийных запросах планшета, вместо этого отображаются в некэшированной области.

Похоже, проблема в том, что функция Stylus s() не распознает, находится ли она внутри медиаблока, и просто распечатывает CSS.

// styles
.content
    width 70% // mobile devices

    +media('sm') // tablet devices
        width calc('100% - ' + em($photo-size))

Вот мой кальк миксин

calc()
    if current-property
        for prefix in vendors
            arguments = unquote(arguments)
            add-property(current-property[0], s('-%s-calc(%s)', prefix, arguments))
        s('calc(%s)', arguments)
    else
        error('calc() must be used within a property')

Эта реализация кеша была скопирована с http://kizu.ru/en/issues/new-stylus-features/

// Mixin for caching the blocks with the given conditions
media($condition)
    helper($condition)
        unless $media_cache[$condition]
            $media_cache[$condition] = ()
        push($media_cache[$condition], block)

    +helper($condition)
        {selector() + ''}
            {block}

// Function we would use to call all the cached styles
apply_media_cache()
    for $media, $blocks in $media_cache
        $media = unquote($media_aliases[$media] || $media)
        $media = '(%s)' % $media unless match('\(', $media)
        $media = 'only screen and %s' % $media
        @media $media
            for $block in $blocks
                {$block}

Выведенный CSS выглядит так

.content
    width: 70%;
    width: -webkit-calc(100% - 8.928571428571429em);
    width: -moz-calc(100% - 8.928571428571429em);
    width: -ms-calc(100% - 8.928571428571429em);

Когда это должно быть

@media (…tablet-size…)
    .content
        width: -webkit-calc…
        …

person Maruf    schedule 19.08.2015    source источник


Ответы (2)


Дьюд, просто используйте Rupture для своих медиа-запросов. Я вижу, что между этим миксином и функцией происходит множество замечательных вещей, но я думаю, что то, что вы пытаетесь сделать, уже было решено с помощью разрыва. Удачи!

person Benjamin Gandhi-Shepard    schedule 18.09.2015
comment
Крутая библиотека, к сожалению нет beans :( - person Maruf; 18.09.2015
comment
Извиняюсь. Итак, я устал запускать код с помощью learnboost.github.io/stylus/try.html но он ничего не выводит. Нужно ли что-то еще для запуска кода? - person Benjamin Gandhi-Shepard; 19.09.2015
comment
Спасибо за попытку, но, как оказалось, это уже исправленная проблема, связанная только со Stylus 0.49.x. - person Maruf; 20.09.2015

Это уже исправленная проблема, связанная только со Stylus 0.49.x, который используется в предыдущей версии grunt-contrib-stylus. Обновление стилуса grunt до версии 0.21.0 устранило проблему.

person Maruf    schedule 20.09.2015