如何访问嵌套 class 中定义的字体系列？

Question

我们有一个场景，我们使用 postcss 嵌套插件命名整个样式表。

发件人：

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

上面的classlabel在嵌套时无法访问my-font。有办法访问吗？

Answer 1

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 一起嵌套——这会将 @font-face 放在CSS 的顶层：

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

处理后的输出将是：

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

Answer 2

字体冒泡到顶层 css 已修复并在 v3.0.0 中发布 PR

如何访问嵌套 class 中定义的字体系列？

How to access font-family defined in nested class?

css

fonts

font-face

postcss