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

[lockedscope]

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;

}