{"id":26751001,"url":"https://github.com/fernandolguevara/svelte-multicssclass","last_synced_at":"2025-04-15T00:17:59.900Z","repository":{"id":57750549,"uuid":"525787117","full_name":"fernandolguevara/svelte-multicssclass","owner":"fernandolguevara","description":null,"archived":false,"fork":false,"pushed_at":"2023-04-28T14:22:23.000Z","size":25,"stargazers_count":21,"open_issues_count":1,"forks_count":1,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-15T00:17:47.642Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"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/fernandolguevara.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-08-17T12:44:04.000Z","updated_at":"2024-03-19T06:36:11.000Z","dependencies_parsed_at":"2022-08-26T08:31:39.005Z","dependency_job_id":null,"html_url":"https://github.com/fernandolguevara/svelte-multicssclass","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fernandolguevara%2Fsvelte-multicssclass","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fernandolguevara%2Fsvelte-multicssclass/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fernandolguevara%2Fsvelte-multicssclass/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fernandolguevara%2Fsvelte-multicssclass/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/fernandolguevara","download_url":"https://codeload.github.com/fernandolguevara/svelte-multicssclass/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248981260,"owners_count":21193148,"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":[],"created_at":"2025-03-28T12:16:12.300Z","updated_at":"2025-04-15T00:17:59.875Z","avatar_url":"https://github.com/fernandolguevara.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# svelte-multicssclass\n\n[![npm version](https://badge.fury.io/js/svelte-multicssclass.svg)](https://badge.fury.io/js/svelte-multicssclass)\n\n[![https://nodei.co/npm/svelte-multicssclass.png?downloads=true\u0026downloadRank=true\u0026stars=true](https://nodei.co/npm/svelte-multicssclass.png?downloads=true\u0026downloadRank=true\u0026stars=true)](https://www.npmjs.com/package/svelte-multicssclass)\n\n\u0026nbsp;\n\nBefore:\n\n```html\n\u003clabel\n  class:text-gray-500=\"{isValid}\"\n  class:bg-gray-50=\"{isValid}\"\n  class:border-gray-300=\"{isValid}\"\n  class:text-red-700=\"{!isValid}\"\n  class:bg-red-50=\"{!isValid}\"\n  class:border-red-300=\"{!isValid}\"\n\u003e\n  text\n\u003c/label\u003e\n```\n\nAfter:\n\n```html\n\u003clabel\n  class:text-gray-500;bg-gray-50;border-gray-300;;text-red-700;bg-red-50;border-red-300=\"{isValid}\"\n\u003e\n  text\n\u003c/label\u003e\n```\n\n### Usage\n\n```\n  - choose a separator char ;  ,  | or configure your own multicssclass({ sep: '@' })\n  - write your classes using the sep \n      \u003celement class:class1;class2;class3={condition} /\u003e\n      Custom sep\n      \u003celement class:class1@class2@class3={condition} /\u003e\n  - two separators for toggle \n      \u003celement class:true-class1;true-class2;;false-class1;false-class2={condition} /\u003e\n      Custom sep \n      \u003celement class:true-class1@true-class2@@false-class1@false-class2={condition} /\u003e\n```\n\n```sh\nnpm i -D svelte-multicssclass\n```\n\n```ts\n// vite.config.js\n\nimport { sveltekit } from '@sveltejs/kit/vite';\nimport { multicssclass } from 'svelte-multicssclass';\n\n/** @type {import('vite').UserConfig} */\nconst config = {\n  plugins: [multicssclass(), sveltekit()],\n};\n\nexport default config;\n```\n\nafter:\n\n```html\n\u003clabel class:text-gray-500;bg-gray-50;border-gray-300=\"{isValid}\"\u003etext\u003c/label\u003e\n\n\u003c!-- OR --\u003e\n\n\u003clabel class:text-gray-500,bg-gray-50,border-gray-300=\"{isValid}\"\u003etext\u003c/label\u003e\n\n\u003c!-- OR --\u003e\n\n\u003clabel class:text-gray-500|bg-gray-50|border-gray-300=\"{isValid}\"\u003etext\u003c/label\u003e\n\n\u003c!-- 2 separator chars generates NOT Operator --\u003e\n\n\u003clabel class:text-green-700;;text-red-700=\"{isValid}\"\u003etext\u003c/label\u003e\n\n\u003c!-- OR --\u003e\n\n\u003clabel class:text-green-700,,text-red-700=\"{isValid}\"\u003etext\u003c/label\u003e\n\n\u003c!-- OR --\u003e\n\n\u003clabel class:text-green-700||text-red-700=\"{isValid}\"\u003etext\u003c/label\u003e\n```\n\nor with a given separator\n\n```ts\n// vite.config.js\n\nimport { sveltekit } from '@sveltejs/kit/vite';\nimport { multicssclass } from 'svelte-multicssclass';\n\n/** @type {import('vite').UserConfig} */\nconst config = {\n  plugins: [multicssclass({ sep: '@' }), sveltekit()],\n};\n\nexport default config;\n```\n\n```html\n\u003clabel class:text-gray-500@bg-gray-50@border-gray-300=\"{isValid}\"\u003etext\u003c/label\u003e\n\n\u003c!-- 2 separator chars generates NOT Operator --\u003e\n\n\u003clabel class:text-green-700@@text-red-700=\"{isValid}\"\u003etext\u003c/label\u003e\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffernandolguevara%2Fsvelte-multicssclass","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffernandolguevara%2Fsvelte-multicssclass","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffernandolguevara%2Fsvelte-multicssclass/lists"}