Использование @supports со стилями-компонентами

Я недавно перешел на использование компонентов стиля для своего стиля, и я был пытается заставить работать функцию @supports CSS, но безуспешно.

Синтаксис @supports используется примерно так:

@supports (display: grid) {
    .Container {
        background-color: orange;
    }
}

Теперь это нормально, так как в документации по стилям-компонентам есть следующая строка:

Примечание: амперсанды (&) заменяются нашим сгенерированным уникальным именем класса для этого стилизованного компонента.

Но когда я пытаюсь использовать амперсанд, это не срабатывает. При использовании приведенного ниже кода я получаю амперсанд в выведенном CSS.

const Container = styled.div`
    @supports (display: block) {
      & {
        background-color: seagreen;
      }
    }
`;

javascript css styled-components
person silverlight513    schedule 22.04.2017    source источник

Ответы (1)


arrow_upward
6
arrow_downward

Похоже, это настоящая ошибка в styled-components! Вам вообще не нужно помещать туда амперсанд, он должен работать так же, как медиа-запросы:

const Container = styled.div`
  @supports (display: block) {
    background-color: seagreen;
  }
`;

Но сейчас это не так, поэтому я открыл проблему с нашим парсером и, будем надеяться, это скоро разрешится. Я обновлю этот ответ, как только он будет исправлен!

person mxstbr    schedule 23.04.2017
comment
Спасибо @maxstbr, я отмечу это как правильный ответ после обновления с исправлением - person silverlight513; 24.04.2017
comment
@maxstbr, я посмотрел на файлы style-components package.json и yarn.lock. Похоже, стили не обновляются до последней версии. Он застрял на 2.0.3. - person silverlight513; 23.05.2017
comment
Примечание для новых читателей: с тех пор стили были обновлены и @supports теперь, ну, хорошо, поддерживается! ???? - person mxstbr; 14.06.2017