スタイル付きコンポーネントで@supportsを使用する

Question

私は最近、自分のスタイリングにstyled-componentsを使用するように切り替えました。私はCSSの@supports機能を稼働させようと努力してきましたが、運がありません。

@supports構文は多少のように使用されます。

注：アンパサンド（&）GET

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

スタイル・コンポーネントのドキュメントは、次の行を持っているように今、これは結構ですそのスタイルされたコンポーネントの生成された一意のクラス名に置き換えられます。

しかし、これを使うためにアンパサンドを使うと、うまくいきません。以下のコードを使用している場合、私は、出力されたCSSでアンパサンドを取得

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

Answer 1

これはstyled-componentsに本物のバグのようです！あなたはそれだけでメディアクエリのように動作するはずです、全くそこにアンパサンドを配置する必要はありません。

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

は、これは、しかし今はないので、私はan issue with our parserを開いたし、それがうまくいけばすぐに解決されなければなりません。修正されたらこの回答を更新します！