Search code examples
cssfontsfont-facepostcss

How to access font-family defined in nested class?

We have a scenario where we are namespacing entire stylesheet using postcss-nested plugin.

From:

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

To:

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

Using:

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

The above class label couldn't access my-font when nested. Is there way to access it?

Solution

  • Bubbling font-face to top level css has been fixed and released it in v3.0.0 with this PR