https://github.com/metonym/svelte-preprocess-directives

Svelte preprocessor that allows class and style directives to be used on Svelte components.
https://github.com/metonym/svelte-preprocess-directives

class directive style svelte svelte-preprocessor

Last synced: 26 days ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/metonym/svelte-preprocess-directives
• Owner: metonym
• License: mit
• Created: 2023-01-07T22:32:57.000Z (almost 2 years ago)
• Default Branch: master
• Last Pushed: 2024-08-06T00:06:56.000Z (3 months ago)
• Last Synced: 2024-10-11T10:33:05.711Z (28 days ago)
• Topics: class, directive, style, svelte, svelte-preprocessor
• Language: TypeScript
• Homepage:
• Size: 104 KB
• Stars: 1
• Watchers: 2
• Forks: 1
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# 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.

```svelte



```


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.

```diff

- 

+ 

- 

+ 

```

## Installation

```bash

# 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

```js

// svelte.config.js

import { componentDirectives } from "svelte-preprocess-directives";

/** @type {import('@sveltejs/kit').Config} */

export default {

  preprocessors: [componentDirectives()],

};

```

## Changelog

[CHANGELOG.md](CHANGELOG.md)

## License

[MIT](LICENSE)