feat: add array syntax

resolve #9

Author: mouse484

example/src/App.svelte

@@ -1,5 +1,21 @@
 <script lang="ts">
   import style from 'svelte-inline-css';
+
+  const fontSize = 30;
+  const styleObject = {
+    color: 'red',
+    fontSize: '13px',
+  };
+  const baseStyles = styleObject;
+  const overridingStyles = {
+    color: 'blue',
+  };
 </script>
 
-<div use:style={{ color: 'red', backgroundColor: 'pink' }}>example</div>
+<!-- https://v3.vuejs.org/guide/class-and-style.html#object-syntax-2 -->
+<div use:style={{ color: 'red', fontSize: fontSize + 'px' }}>Object Syntax</div>
+
+<div use:style={styleObject}>Object directly</div>
+
+<!-- https://v3.vuejs.org/guide/class-and-style.html#array-syntax-2 -->
+<div use:style={[baseStyles, overridingStyles]}>Array Syntax</div>

src/index.ts

@@ -1,10 +1,20 @@
 import type { Properties } from 'csstype';
 
-type Parameters = Properties<string | number>;
+type properties = Properties<string | number>;
+type Parameters = properties | properties[];
 
 const style = (node: HTMLElement, parameters: Parameters) => {
   const setStyle = (parameters: Parameters) => {
-    Object.entries(parameters).forEach(([key, value]) => {
+    let properties: properties = {};
+    if (Array.isArray(parameters)) {
+      parameters.forEach((value) => {
+        properties = { ...properties, ...value };
+      });
+    } else {
+      properties = parameters;
+    }
+
+    Object.entries(properties).forEach(([key, value]) => {
       key = key.replace(/[A-Z]/, (substring) => '-' + substring.toLowerCase());
 
       node.style.setProperty(key, value);