master-styles-group
A plugin for Master Styles to group up styles and add selectors.
THIS PROJECT IS IN BETA
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.
Features
- 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
Install
Before starting, make sure you have Master Styles installed.
⚗️ Experimental
npm install master-styles-group
yarn add master-styles-group
CDN
<script src="https://unpkg.com/master-styles-group"></script>
Setup
import "master-styles-group";
Usage
- Use
{}to group up styles - Use
;_to separate each style - Put a selector at start or end
Examples
<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>
Nested Group
<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>
License
MIT License
3 May 18, 2022
4 May 3, 2022
14 Jan 3, 2023
680 Dec 16, 2022
2 Jun 8, 2022
2 Mar 22, 2022
8 May 13, 2022
8 Aug 2, 2022
112 Dec 18, 2022
5 Oct 31, 2022