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: 8 months 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 3 years ago)
- Default Branch: master
- Last Pushed: 2024-08-06T00:06:56.000Z (over 1 year ago)
- Last Synced: 2025-03-20T00:41:58.674Z (8 months 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)