A plugin for Master Styles to group up styles and add selectors.
This project may contain bugs and have not being tested at all. Use under your own risk, but feel free to test, make pull request and improve this project.
- Group up master styles
- Add a Selector / Breakpoints / Media Queries, etc. for all styles inside a group in one-line.
- Support for adding selectors in front of style group
- Support nested group
Before starting, make sure you have Master Styles installed.
⚗️ Experimental
npm install master-styles-group
yarn add master-styles-group
<script src="https://unpkg.com/master-styles-group"></script>import "master-styles-group";- Use
{}to group up styles - Use
;_to separate each style - Put a selector at start or end
<div class="{m:2;_p:2;4;_f:red}@xs"></div>
<!-- equals -->
<div class="@xs{m:2;_p:2;4;_f:red}"></div>
<!-- equals -->
<div class="m:2@xs p:2;4@xs f:red@xs"></div><div class="{{m:2;_p:2;4}@dark;_f:red}@xs"></div>
<!-- equals -->
<div class="m:2@xs@dark@xs p:2;4@dark@xs f:red@xs"></div>
<!-- Support auto ordering -->
<div class="{{m:2;_p:2;4}@dark;_f:red}_span"></div>
<!-- equals -->
<div class="m:2_span@dark p:2;4_span@dark f:red_span"></div>
<div class="{m:2@dark;_f:red}_span"></div>
<!-- equals -->
<div class="m:2_span@dark f:red_span"></div>MIT License