-
-
Notifications
You must be signed in to change notification settings - Fork 23
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Handle css rules specificity #223
Comments
I think |
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);
};
}; |
Thank you for the suggestion, I will try to create that in my project! |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Hello, I have a problem using nano-css in combination with global pre-existing styles.
For example:
Then I create a button with
jsx
: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 customstylis
instance to the stylis addon, which could also be useful for other reasons.Thank you.
The text was updated successfully, but these errors were encountered: