Grouping styles with selectors

[serkodev]

Currently, for using multiple styles with the same selector, you will have:

<div class="
    font:12_.foo
    font:blue_.foo
    font:yellow_.foo@dark
    bg:red_.foo
    bg:green_.foo@dark
    p:20_.foo
    m:10_.foo
">

Plugin

So I developed a plugin master-styles-group, after using it you can shorten the code to one line:

<div class="{font:12;_bg:red;_{font:yellow;_bg:green}@dark;_p:20;_m:10}_.foo">

In addition, it also compatible with putting selector before group.

<div class="{font:12;_bg:red}@xm"></div>
<div class="@xm{font:12;_bg:red}"></div>

In the Master Discord, @oberonlai shows his usage with master-styles-group.

<ul class="
    d:flex flex-wrap:wrap
    >li{mr:15}
    >li>a{d:block;_color:white; _t:center;_font:12}
    >li>a>span{w:40;_h:40;_bg:#191919}
    ›li>a>span>svg{abs;_top:50%;_left:50%;_translate(-50%,-50%)}
    >li>a.active{color: #FCB900}
    >li>a>span>svg>path{~stroke;.2s;ease}
    >li>a:hover>span>svg>path{stroke:#FCB900}
    >li>a.active>span>svg{stroke:#FCB900}
">

Master Styles native support grouping

After some discussion, @1aron also agrees that grouping is a useful feature and can reduce the code a lot. Since it may require changes to existing syntax and other breaking changes, it may not be implemented until styles v2.0 publish (#17).

I hope you guys can share some views on it.

[1aron]

The Group feature has been released in @master/[email protected], but the APIs are a bit different.

<div class="p:10|20|30|40:hover@sm text:center:hover@sm font:red-60/.5:hover@sm">without group</div>
<div class="{p:10|20|30|40;text:center;font:red-60/.5}:hover@sm">group</div>

Because selectors have different behavior at the start and at the end, it is not possible to put the current selector in front.

[aileksandar]

What do you think about some alternative syntax for group instead of curly braces {} ?
In JSX and Svelte I constantly need to escape the curly brace and that makes code look a bit ugly 😢 Is there a reason why it can't be regular or angled braces instead?

[aileksandar]

If you like that native feel, you would definitely like Svelte. Until you combine it with group syntax 😄

[1aron]

Alternative 😆

<div class="&#123;text:center;italic&#125;">

rendered as:

<div class="{text:center;italic}">

[1aron]

I've always followed Svelte and liked it! 💖

[aileksandar]

<div class="&#123;text:center;italic&#125;">

This could work if you can make it render non-ugly in the VS Code extension 😄

[1aron]

Great idea, beautifying it seems like a good solution.