less-loader ignores empty rulesets

Question

I'm using less-loader to load less into css. Then I use typings-for-css-modules-loader to get class name constants in TypeScript.

The problem is that I develop raw markup at first. During developing of mark-up I create empty rulesets in LESS to get class name constants and use them in mark-up. But because LESS ignores empty rulesets constants are not generated.

When I add any styles into ruleset constants are generated properly.

For example:

.tooltip { // constant "tooltip" is generated 
    display: none;

    &__name { // constant "tooltipName" is generated
        color: inherit;
    }

    &__id { // constant "tooltipId" is NOT generated

    }
}

I can add some dummy styles into every new ruleset but it would be annoying.

I use WebPack, ReactJS and TypeScript. I'm looking for some config I can use in webpack.config to change this behavior.

score 0 · Answer 1 · answered Jan 05 '19 at 16:35

I figured out that it is behavior of less package not less-loader. There is a feature request to implement possibility of keeping empty rulesets: https://github.com/less/less.js/issues/1006

There is also one more clever way to keep empty rulesets in output. Just add empty (or not) comment inside of it:

.tooltip__id { // constant "tooltipId" IS generated
    /**/
}

less-loader ignores empty rulesets

1 Answers1