svelte-multicssclass

 

before:

<label
  class:text-gray-500="{isValid}"
  class:bg-gray-50="{isValid}"
  class:border-gray-300="{isValid}"
  class:text-red-700="{!isValid}"
  class:bg-red-50="{!isValid}"
  class:border-red-300="{!isValid}"
>
  text
</label>

alter:

<label
  class:text-gray-500;bg-gray-50;border-gray-300;;text-red-700;bg-red-50;border-red-300="{isValid}"
>
  text
</label>

Usage

npm i -D svelte-multicssclass

// vite.config.js

import { sveltekit } from '@sveltejs/kit/vite';
import { multicssclass } from 'svelte-multicssclass';

/** @type {import('vite').UserConfig} */
const config = {
  plugins: [multicssclass(), sveltekit()],
};

export default config;

after:

<label class:text-gray-500;bg-gray-50;border-gray-300="{isValid}">text</label>

<!-- OR -->

<label class:text-gray-500,bg-gray-50,border-gray-300="{isValid}">text</label>

<!-- OR -->

<label class:text-gray-500|bg-gray-50|border-gray-300="{isValid}">text</label>

<!-- 2 separator chars generates NOT Operator -->

<label class:text-green-700;;text-red-700="{isValid}">text</label>

<!-- OR -->

<label class:text-green-700,,text-red-700="{isValid}">text</label>

<!-- OR -->

<label class:text-green-700||text-red-700="{isValid}">text</label>

or with a given separator

// vite.config.js

import { sveltekit } from '@sveltejs/kit/vite';
import { multicssclass } from 'svelte-multicssclass';

/** @type {import('vite').UserConfig} */
const config = {
  plugins: [multicssclass({ sep: '@' }), sveltekit()],
};

export default config;

<label class:text-gray-500@bg-gray-50@border-gray-300="{isValid}">text</label>

<!-- 2 separator chars generates NOT Operator -->

<label class:text-green-700@@text-red-700="{isValid}">text</label>