Closed TheBosZ closed 5 years ago
I'm in the process of converting our project over to using NanoCSS (which we're loving, by the way) and I came across an interesting situation.
We have an element that needs padding between it and any copies of itself.
The sass uses this:
.new-data-field { border: 1px solid $white; border-radius: 2px; padding: 5px; + .new-data-field { margin-top: 5px; } }
Translated into JSON, I have this:
'new-data-field': { border: `1px solid ${Colors.$white}`, 'border-radius': '2px', padding: '5px', '+ &': { 'margin-top': '5px', }, },
That generates incorrect classes:
.__1mqbk4w-new-data-field { border:1px solid #fff !important; border-radius:2px !important; padding:5px !important; } + .__1mqbk4w-new-data-field { margin-top:5px !important; }
If I try to manually set the relationship using '& + &' like this:
'new-data-field': { border: `1px solid ${Colors.$white}`, 'border-radius': '2px', padding: '5px', '& + &': { 'margin-top': '5px', }, },
I get the following, also-incorrect, CSS:
.__1lol306-new-data-field { border:1px solid #fff !important; border-radius:2px !important; padding:5px !important; } .__1lol306-new-data-field + & { margin-top:5px !important; }
Is there something I'm missing here? How can I support this situation?
I know I could make another class for just the elements beyond the first, but I was wondering if there was a way to do it using the "+" selector.
Thanks!
:tada: This issue has been resolved in version 3.2.0 :tada:
The release is available on:
Your semantic-release bot :package::rocket:
I'm in the process of converting our project over to using NanoCSS (which we're loving, by the way) and I came across an interesting situation.
We have an element that needs padding between it and any copies of itself.
The sass uses this:
Translated into JSON, I have this:
That generates incorrect classes:
If I try to manually set the relationship using '& + &' like this:
I get the following, also-incorrect, CSS:
Is there something I'm missing here? How can I support this situation?
I know I could make another class for just the elements beyond the first, but I was wondering if there was a way to do it using the "+" selector.
Thanks!