Как я могу получить доступ к переменным postcss в стилизованных компонентах для медиа-запроса?

Question

Я использую CDN, в котором есть набор определенных переменных pcss, которые я хотел бы использовать в моих стилизованных компонентах.Я смог легко использовать цветовые переменные с помощью var(--color-green).Однако переменные медиа-запросов, похоже, не работают.Кто-нибудь знает, почему это может иметь место?

Это то, что я пробовал, где --media-query-max-small определяется в cdn как max-width: 647px

const comp = styled.div`
  @media (var(--media-query-max-small)) { }
`

Answer 1

Как создатель PostCSS, я рекомендую использовать astroturf .Это решение CSS-in-JS с API стилевых компонентов, но в отличие от стилевого компонента astroturf не имеет времени выполнения (SC имеет время выполнения 15 КБ), анализирует CSS только во время сборки (SC анализирует его каждый раз на клиенте) и поддерживает PostCSS и многие другие инструменты CSS.

В вашем случае просто укажите postcss-loader для CSS и astroturf/loader для файлов JS.Все будет работать.