streamich / nano-css

Distilled CSS-in-JS for gourmet developers
The Unlicense
426 stars 24 forks source link

Nesting with the "+" selector #194

Closed TheBosZ closed 5 years ago

TheBosZ commented 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!

streamich commented 5 years ago

:tada: This issue has been resolved in version 3.2.0 :tada:

The release is available on:

Your semantic-release bot :package::rocket: