Handle css rules specificity

[ingro]

Hello, I have a problem using nano-css in combination with global pre-existing styles.

For example:

/* style.css */
.myapp button {
  font-size: inherit;
}

Then I create a button with jsx:

const Button = jsx('button', {
  fontSize: '24px'
});

Which generates a random class name for my button component. Problem is, due to css rules specificity the global rule is more specific than the one generated for the component and so the custom font-size is ignored.

Other css-in-js handled that problem with a custom namespace that could be added to every class, like this one for stylis.

It could be possible to implement something like that for nano-css? Maybe it could be enough to just allow to pass a custom stylis instance to the stylis addon, which could also be useful for other reasons.

Thank you.

[streamich]

I think scope addon could be created.

[streamich]

Could be something like this:

// addons/scope.js
'use strict';

exports.addon = function (renderer, scope) {
    scope = scope || '#app';

    var putRaw = renderer.putRaw;
    renderer.putRaw = function (rawCssRule) {
        if (rawCssRule[0] !== '@') {
            rawCssRule = scope + ' ' + rawCssRule;
        }
        return putRaw(rawCssRule);
    };
};

[ingro]

Thank you for the suggestion, I will try to create that in my project!