Wie kann auf die Schriftfamilie zugegriffen werden, die in der geschachtelten Klasse definiert ist?

Question

Wir haben ein Szenario, in dem wir das gesamte Stylesheet mit dem Postscss-Nested-Plugin benennen.

Von:

@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; 
} 

An:

.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; 
} 

Verwendung:

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

Die obige Klasse label konnte nicht my-font zugreifen, wenn verschachtelt. Gibt es eine Möglichkeit, darauf zuzugreifen?

Answer 1

Sprudelnde font-face auf Top-Level-CSS wird behoben und veröffentlichte es in v3.0.0 mit diesem PR

Answer 2

postcss-nested wird nicht den Spezialfall der verschachtelten @font-face behandeln. Die verarbeitete Ausgabe von dem, was Sie oben haben die folgende ungültige CSS sein:

@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 hat auf der obersten Ebene der CSS-Datei sein, so Sie die verschachtelten font-face deklarieren müssen außerhalb von der 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; 
} 

Alternativ, wenn Sie postcss-scss verwenden, können Sie nisten sie zusammen mit @root - die die @font-face auf der obersten Ebene des CSS setzen wird:

.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; 
} 

Der verarbeitete Ausgang wird sein:

@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; 
}