How to compile css style rules with component/block etc.?

We could use bem-xjst to create html but how do we get bem like styles given below included with component and compiled?
Bem project stub contains components but i could not find a way to get my own css automatically compiled when project compiled.

So, my purpose here is to write css with below hierarchical syntax and get the correct bem css syntax generated.
https://github.com/bem/project-stub

```
:block(checkbox):mod(theme islands) {
position: relative; /* fix #1538 */

font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;

-webkit-tap-highlight-color: rgba(0, 0, 0, 0);

&:hover {
cursor: pointer;
}

:block(checkbox):elem(control) {
position: absolute;
z-index: -1;

margin: 0;

}
```

The issue points to bem/project-stub, bem-xjst, and a hierarchical CSS example, but names no files or tests. Start by reading the project-stub build configuration and its bem-xjst integration to determine whether CSS compilation is supported. Done would require a documented or implemented path for compiling the shown syntax into BEM CSS.

Written by the indexing model from the issue text.