Merge pull request #8 from mouse484/develop

Author: mouse484

README.md

@@ -2,6 +2,9 @@
 
 Easy to use inline style system like [Vue.js inline style](https://v3.vuejs.org/guide/class-and-style.html#binding-inline-styles) in Svelte(Use [use:action](https://svelte.dev/docs#use_action))
 
+Try it -> [REPL](https://svelte.dev/repl/04705a80122e4e4ba8ffd3db1cc3f49e?version=3.38.2)
+
+
 # Installation
 
 ```

package.json

@@ -8,7 +8,7 @@
   "license": "MIT",
   "scripts": {
     "build": "tsc",
-    "dev":"yarn build && cd example && yarn && yarn dev"
+    "dev": "yarn build && cd example && yarn && yarn dev"
   },
   "dependencies": {
     "csstype": "^3.0.8"
@@ -22,6 +22,11 @@
   "files": [
     "dist"
   ],
+  "keywords": [
+    "svelte",
+    "css",
+    "inline-css"
+  ],
   "release": {
     "branches": [
       "main"

src/index.ts

@@ -1,11 +1,19 @@
 import type { Properties } from 'csstype';
 
-const style = (node: HTMLElement, parameters: Properties<string | number>) => {
-  Object.entries(parameters).forEach(([key, value]) => {
-    key = key.replace(/[A-Z]/, (substring) => '-' + substring.toLowerCase());
+type Parameters = Properties<string | number>;
 
-    node.style.setProperty(key, value);
-  });
+const style = (node: HTMLElement, parameters: Parameters) => {
+  const setStyle = (parameters: Parameters) => {
+    Object.entries(parameters).forEach(([key, value]) => {
+      key = key.replace(/[A-Z]/, (substring) => '-' + substring.toLowerCase());
+
+      node.style.setProperty(key, value);
+    });
+  };
+
+  setStyle(parameters);
+
+  return { update: setStyle };
 };
 
 export default style;