kaisermann / svelte-css-vars

:sparkles: Ever wanted to have reactive css variables in svelte? What if I told you there's a way?

svelte-css-vars

Ever wanted to have reactive css variables in svelte? What if I told you there's a way?

svelte-css-vars exposes a svelte action which receives an object of properties that should be treated as css custom properties. By defining this object inside a $:{} reactive block, svelte-css-vars can update those css properties on the fly whenever some of its values change.

Usage

import cssVars from 'svelte-css-vars';

After importing the module, just define the reactive object of your custom properties:

let some_state_variable = true;

$: styleVars = {
  titleColor: some_state_variable ? 'red' : 'blue',
};

And then use the action, passing the object, on the desired element:

<style>
  div {
    color: var(--titleColor);
  }
</style>

<div use:cssVars="{styleVars}">
  <!-- anything here will have access to var(--titleColor) -->
</div>

Example

REPL

svelte-css-vars's Issues

Demo

@kaisermann I simply put your demo in a svelte REPL: https://svelte.dev/repl/685251e3c38e443abb47ba8e99171568?version=3.18.2

Could be useful to add to the README?

Add Typescript definitions

Using this module in a TypeScript project with "noImplicitAny": true causes errors as there is no definitions file.
Please add a .d.ts file for this package. Here is my quick attempt at it that seems to resolve the issue:

declare module 'svelte-css-vars'
{
    export function update(new_props: any);
    function apply(node: HTMLElement, props: any);
    export default apply;
}

Missing /dist directory when installing with npm from github

The issue

Hi,

I tired to install this package from github with npm (npm i --save https://github.com/kaisermann/svelte-css-vars), but can't use it in my project. I get the following error:

'Failed to resolve entry for package "svelte-css-vars". The package may have incorrect main/module/exports specified in its package.json'

Looking at the folder inside node-modules, the dist folder is missing.

Proposed solution

After some research, I found that adding the following script in pacakge.json fixes the error.

"prepare": "npm run build"

When this script is added, npm automatically builds the package upon installation.

If you consider this a viable solution, I would gladly open a PR for it.