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: 28 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 (over 3 years ago)
- Default Branch: master
- Last Pushed: 2025-12-26T17:03:52.000Z (5 months ago)
- Last Synced: 2025-12-28T05:24:19.390Z (5 months ago)
- Topics: class, directive, style, svelte, svelte-preprocessor
- Language: TypeScript
- Homepage:
- Size: 142 KB
- Stars: 1
- Watchers: 1
- 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)