入れ子になったクラスで定義されたfont-familyにアクセスするには？

Question

私たちは、postcss-nestedプラグインを使用してスタイルシート全体の名前空間を設定するシナリオを持っています。

から：

@font-face { 
    font-family:my-font; 
    src:url('data:application/font-woff;base64,d09GR...') format("woff"); 
} 

.label { 
    font-family: my-font; 
    font-weight:normal; 
    visibility:visible; 
} 

へ：使用

.wrapper { 
    @font-face { 
    font-family:my-font; 
    src:url('data:application/font-woff;base64,d09GR...') format("woff"); 
    } 
} 
.wrapper .label { 
    font-family: my-font; 
    font-weight:normal; 
    visibility:visible; 
} 

：ネストされたとき

postcss([require('postcss-nested')]).process(`.wrapper { ${plainCSS} }`, { parser: safe }); 

上記のクラスlabelmy-fontにアクセスできませんでした。それにアクセスする方法はありますか？

Answer 1

バブリングフォント面は固定と答えるため、このPR

Answer 2

postcss-nestedはネストされた特別なケースを処理しません@font-face。あなたは上記の持っているものの処理された出力は、次の無効なCSSになります。

@font-face { 
    .wrapper { 
     font-family: my-font; 
     src:url('data:application/font-woff;base64,d09GR...') format("woff"); 
    } 
} 

.wrapper .label { 
    font-family: my-font; 
    font-weight:normal; 
    visibility:visible; 
} 

@font-faceは、CSSファイルのトップレベルにある必要があり、そう あなたは外のネストされたフォントフェイスを宣言する必要がありますラッパー：また

@font-face { 
    font-family:my-font; 
    src:url('data:application/font-woff;base64,d09GR...') format("woff"); 
} 

.wrapper .label { 
    font-family: my-font; 
    font-weight:normal; 
    visibility:visible; 
} 

、あなたがpostcss-scssを使用している場合、あなたは@rootと一緒に巣にそれをすることができます - CSSのトップレベルに@font-faceが配置されます：

.wrapper { 
    @at-root { 
     @font-face { 
      font-family:my-font; 
      src:url('data:application/font-woff;base64,d09GR...') format("woff"); 
     } 
    } 
} 
.wrapper .label { 
    font-family: my-font; 
    font-weight:normal; 
    visibility:visible; 
} 

処理された出力は次のようになります。トップレベルのCSSへの

@font-face { 
    font-family: my-font; 
    src: url("data:application/font-woff;base64,d09GR...") format("woff"); 
} 

.wrapper .label { 
    font-family: my-font; 
    font-weight: normal; 
    visibility: visible; 
}