{"id":18712416,"url":"https://github.com/serkodev/master-styles-group","last_synced_at":"2025-04-12T11:53:50.179Z","repository":{"id":57407463,"uuid":"478290432","full_name":"serkodev/master-styles-group","owner":"serkodev","description":"A plugin for Master Styles to group up styles and add selectors.","archived":false,"fork":false,"pushed_at":"2023-01-10T12:55:51.000Z","size":264,"stargazers_count":5,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-04-11T16:10:59.215Z","etag":null,"topics":["css","group","html","master","plugin","style","ui","virtual"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/serkodev.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2022-04-05T20:28:53.000Z","updated_at":"2022-09-27T07:18:46.000Z","dependencies_parsed_at":"2023-02-08T18:46:12.706Z","dependency_job_id":null,"html_url":"https://github.com/serkodev/master-styles-group","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/serkodev%2Fmaster-styles-group","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/serkodev%2Fmaster-styles-group/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/serkodev%2Fmaster-styles-group/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/serkodev%2Fmaster-styles-group/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/serkodev","download_url":"https://codeload.github.com/serkodev/master-styles-group/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248565044,"owners_count":21125414,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["css","group","html","master","plugin","style","ui","virtual"],"created_at":"2024-11-07T12:42:44.728Z","updated_at":"2025-04-12T11:53:50.150Z","avatar_url":"https://github.com/serkodev.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# master-styles-group\n\nA plugin for [Master Styles](https://github.com/master-co/styles) to group up styles and add selectors.\n\n### THIS PROJECT IS IN BETA\n\nThis 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.\n\n## Features\n\n- Group up master styles\n- Add a [Selector](https://docs.master.co/styles/selectors) / [Breakpoints](https://docs.master.co/styles/breakpoints) / [Media Queries](https://docs.master.co/styles/media-queries), etc. for all styles inside a group in one-line.\n- Support for adding selectors in front of style group\n- Support nested group\n\n## Install\n\nBefore starting, make sure you have [Master Styles](https://docs.master.co/styles/setup) installed.\n\n\u003e ⚗️ **Experimental**\n\n```\nnpm install master-styles-group\n```\n\n```\nyarn add master-styles-group\n```\n\n### CDN\n\n```html\n\u003cscript src=\"https://unpkg.com/master-styles-group\"\u003e\u003c/script\u003e\n```\n\n## Setup\n\n```js\nimport \"master-styles-group\";\n```\n\n## Usage\n\n- Use `{}` to group up styles\n- Use `;_` to separate each style\n- Put a selector at start or end\n\n### Examples\n\n```html\n\u003cdiv class=\"{m:2;_p:2;4;_f:red}@xs\"\u003e\u003c/div\u003e\n\u003c!-- equals --\u003e\n\u003cdiv class=\"@xs{m:2;_p:2;4;_f:red}\"\u003e\u003c/div\u003e\n\u003c!-- equals --\u003e\n\u003cdiv class=\"m:2@xs p:2;4@xs f:red@xs\"\u003e\u003c/div\u003e\n```\n\n#### Nested Group\n\n```html\n\u003cdiv class=\"{{m:2;_p:2;4}@dark;_f:red}@xs\"\u003e\u003c/div\u003e\n\u003c!-- equals --\u003e\n\u003cdiv class=\"m:2@xs@dark@xs p:2;4@dark@xs f:red@xs\"\u003e\u003c/div\u003e\n\n\u003c!-- Support auto ordering --\u003e\n\u003cdiv class=\"{{m:2;_p:2;4}@dark;_f:red}_span\"\u003e\u003c/div\u003e\n\u003c!-- equals --\u003e\n\u003cdiv class=\"m:2_span@dark p:2;4_span@dark f:red_span\"\u003e\u003c/div\u003e\n\n\u003cdiv class=\"{m:2@dark;_f:red}_span\"\u003e\u003c/div\u003e\n\u003c!-- equals --\u003e\n\u003cdiv class=\"m:2_span@dark f:red_span\"\u003e\u003c/div\u003e\n```\n\n## License\n\nMIT License\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fserkodev%2Fmaster-styles-group","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fserkodev%2Fmaster-styles-group","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fserkodev%2Fmaster-styles-group/lists"}