https://github.com/rozek/svelte-inline-style
set inline styles for svelte components
https://github.com/rozek/svelte-inline-style
inline-styles svelte-action svelte3
Last synced: 4 months ago
JSON representation
set inline styles for svelte components
- Host: GitHub
- URL: https://github.com/rozek/svelte-inline-style
- Owner: rozek
- License: mit
- Created: 2021-05-26T11:47:44.000Z (about 5 years ago)
- Default Branch: main
- Last Pushed: 2022-03-01T05:45:57.000Z (over 4 years ago)
- Last Synced: 2025-10-20T13:48:08.574Z (8 months ago)
- Topics: inline-styles, svelte-action, svelte3
- Language: TypeScript
- Homepage:
- Size: 61.5 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
# svelte-inline-style #
Efficiently apply inline styles to Svelte components.
**NPM users**: please consider the [Github README](https://github.com/rozek/svelte-inline-style/blob/main/README.md) for the latest description of this package (as updating the docs would otherwise always require a new NPM package version)
> Just a small note: if you like this module and plan to use it, consider "starring" this repository (you will find the "Star" button on the top right of this page), so that I know which of my repositories to take most care of.
## Installation ##
```
npm install svelte-inline-style
```
## Usage ##
It is recommended to import the package within a module context:
```html
import style from 'svelte-inline-style'
let styles = {
fontSize:'22px', // use camel-cased CSS property names...
fontWeight:'bold' // ...and start with a small letter
}
...
```
## Try yourself ##
Experiment with `svelte-inline-style` using the [Svelte REPL](https://svelte.dev/repl/38dd68dc0838491bac4472b6229246b7)
## Background Information ##
Sometimes it is necessary to add inline styles to a Svelte component rather than to rely on a stylesheet and just switch classes.
A straightforward approach could be to use `style` attributes:
```html
...
```
but this one would first require to construct a string which would then have to parsed by the browser before the actual changes could be made.
Another solution has been shown by [mouse484](https://github.com/mouse484) in package [svelte-inline-css](https://github.com/mouse484/svelte-inline-css): with the aid of Svelte "actions" inline styles may be directly set on the HTML elements created to represent Svelte components:
```html
import style from 'svelte-inline-css'
export let styles = {
'font-size':'22px',
'font-weight':'bold'
}
...
```
This solution works great, but - again - requires some string processing before the actual style can be applied: `svelte-inline-css` expects kebab-cased CSS property names which first have to be converted to camel-cased identifiers before they may be set.
This implementation therefore suggests a third alternative, which seems "more natural": start with camel-cased CSS property names right away and apply them to HTML elements without prior conversion.
```html
import style from './svelte-inline-style.js'
export let styles = {
fontSize:'22px',
fontWeight:'bold'
}
...
```
## Build Instructions ##
You may easily build this package yourself.
Just install [NPM](https://docs.npmjs.com/) according to the instructions for your platform and follow these steps:
1. either clone this repository using [git](https://git-scm.com/) or [download a ZIP archive](https://github.com/rozek/svelte-inline-style/archive/refs/heads/main.zip) with its contents to your disk and unpack it there
2. open a shell and navigate to the root directory of this repository
3. run `npm install` in order to install the complete build environment
4. execute `npm run build` to create a new build
You may also look into the author's [build-configuration-study](https://github.com/rozek/build-configuration-study) for a general description of his build environment.
## License ##
[MIT License](LICENSE.md)