중첩 클래스에 정의 된 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을 처리하지 않습니다. 그래서 당신이 외부 중첩 된 글꼴 얼굴을 선언해야합니다,

@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 파일의 최상위 수준에 있어야한다 : 위 무슨의 처리 된 출력은 다음과 같은 유효하지 않은 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; 
} 

, 당신은 @root과 함께 postcss-scss, 당신이 할 수있는 둥지를 사용하는 경우 - 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; 
}