✨ Automatic Merging & Re-arranging of Custom Class Names with Grouped Styles

[HealMah]

Description

According to the Docs,

  Style.extend('classes', {
      btn: 'font:14 h:40 h:32.sm text:center bg:red:hover',
      card: 'p:20 b:1|solid|gray-80 bg:white'
  });

is possible, which is great;

but this will break if it's grouped and further filter(s) is/are added, e.g:

Style.extend('classes', {
    btn: '{font:14;h:40;h:32.sm;text:center;bg:red:hover}@light {some;other;styles}@dark',
});

IT WILL BE A POWERFULL FEATURE, if will there can be some ways to unwind and merge the above with html template styles!
For example,

<div class="btn>button"></div>

OR

<button class="btn:first-child"></button>

etc.

The system will just have to LOGICALLY, break, re-arrange and re-group the style in their respective orders.
Thnaks

[1aron]

@HealMah We've conceived the same proposal as you in the past; it's quite possible that you'll see it in some version of Master CSS 2.X. Good job!

[HealMah]

@HealMah We've conceived the same proposal as you in the past; it's quite possible that you'll see it in some version of Master CSS 2.X. Good job!

Wow, good to hear and that will be really appreciated. Hats off to the team!

[1aron]

Released in https://github.com/master-co/css/releases/tag/v2.0.0-rc.48. Currently only @ rules are supported.