porsager/bss

`$nest` and `$media` not applying style.

JAForbes opened this issue ยท 3 comments

Hi @porsager ๐Ÿ‘‹

I'm not sure if this a bug or just me misusing the library ๐Ÿ˜Š.

It seems $nest doesn't apply within a $media if there is already a non-empty declaration. See the repro below:

flems

If the $nest is chained without a parent declaration, it works fine:

flems

I am not sure if the generated syntax is correct. But the outputted getSheet shows a comma separated css block. But I think if it's not comma separated, it works fine.

Generated:

@media (min-width: 0px){
    .b69m3411.b69m3411{
        font-family:Helvetica;
    }
    ,.b69m3411 h1{
        color:red;
    }
}

Proposed generation:

@media (min-width: 0px){
    .b69m3411.b69m3411{
        font-family:Helvetica;
    }
    .b69m3411 h1{
        color:red;
    }
}

I hope that's helpful! If I'm doing anything strange please let me know!

Hey @JAForbes ๐Ÿ‘‹

No that's definitely a bug! Interesting :D I'll take a closer look...

Wow.. Haha, I'm amazed you're the first to bump into this one.

Apparently the whole @ rules only worked because of an implicit cast from array to string. Now if that array contained multiple items it would of course join them with a comma. Easy fix by simply adding .join('') in the rule generation ;)

Thanks a lot for the detailed report @JAForbes - I hope you're enjoying bss ;)

I hope you're enjoying bss ;)

It's glorious ๐Ÿ”ฅโ˜€