Get extended(?) CSS?

[tizmagik]

I'm not sure if I'm doing something wrong or if this is just expected behavior, but given the following:

const labelBase = csjs`
  .boldBase {
    font-weight: bold;
  }
`;

const styles = csjs`
  .button {
    background-color: yellow;
  }

  .label extends ${labelBase.boldBase} {
    color: blue;
  }
`;

csjs.getCss(styles); returns:

  .button_4oyuOD {
    background-color: yellow;
  }

  .label_4oyuOD {
    color: blue;
  }

Notice the missing value that we otherwise get from csjs.getCss(labelBase);

  .boldBase_3DZseH {
    font-weight: bold;
  }

I would expect csjs.getCss(styles) would return all CSS including those from extended styles. Is there another way to do so, or am I just fundamentally not understanding how getCss is intended to work?

Note that styles.label correctly returns the expected "label_4oyuOD boldBase_3DZseH"

[rtsao]

This is currently expected behavior (similar to this issue: https://github.com/rtsao/csjs/issues/30). getCss is just for getting the new CSS contained in that csjs literal so it can be injected. It is assumed that the extended styles were already injected when that csjs literal was evaluated. This makes it fairly easy to ensure you never duplicate the injection of anything. That said, it would be fairly straightforward to wrap csjs in some instance/singleton that could accumulate all the CSS into a buffer (which you could then flush all at once later).