svelte-preprocess-directives

Svelte preprocessor that allows class and style directives to be used on Svelte components.

Currently, class: and style: directives can only be applied to DOM elements.

<div class:active style:color="red" />

Attempting to use directives on an inline Svelte component will throw a compiling error. This preprocessor transforms markup code to allow class and style directives to be used directly on inline components.

- <Component class:a={true} />
+ <Component class="{true && 'a'}" />

- <Component style:color="red" />
+ <Component style="color: red" />

Installation

# NPM
npm i -D svelte-preprocess-directives

# pnpm
pnpm i -D svelte-preprocess-directives

# Bun
bun i -D svelte-preprocess-directives

# Yarn
yarn add -D svelte-preprocess-directives

Usage

// svelte.config.js
import { componentDirectives } from "svelte-preprocess-directives";

/** @type {import('@sveltejs/kit').Config} */
export default {
  preprocessors: [componentDirectives()],
};

Changelog

CHANGELOG.md

License

MIT