Some css improvements

Author: efoken

src/css.js

@@ -1,6 +1,6 @@
 import { $, IS_NON_DIMENSIONAL } from "./render.js";
 import { options } from "./options.js";
-import { isArray, isNumber, isObject, isTagged } from "./utils.js";
+import { isNumber, isObject, isTagged } from "./utils.js";
 
 /**
  * @type {{[id:string]:string}}
@@ -13,32 +13,29 @@ const PROPS = {};
 const hyphenate = (str) =>
     (PROPS[str] =
         PROPS[str] ||
-        (str[0] === "-"
-            ? str
-            : str
-                  .replace(/([A-Z])/g, "-$1")
-                  .toLowerCase()
-                  .replace(/^ms-/, "-ms-")));
+        str
+            .replace(/([A-Z])/g, "-$1")
+            .toLowerCase()
+            .replace(/^ms-/, "-ms-"));
 
 /**
  * @param {object} obj
+ * @returns {string}
  */
 function stringify(obj) {
     return Object.entries(obj)
-        .map(([key, val]) => {
-            if (isObject(val) && !isArray(val)) {
-                return `${key}{${stringify(val)};}`.replace(/;;/g, ";");
+        .map(([key, value]) => {
+            if (isObject(value)) {
+                return `${key}{${stringify(value)};}`.replace(/;;/g, ";");
             }
-            return (isArray(val) ? val : [val])
-                .map(
-                    (v) =>
-                        `${hyphenate(key)}:${
-                            !isNumber(v) || IS_NON_DIMENSIONAL.test(key)
-                                ? v
-                                : `${v}px`
-                        }`
-                )
-                .join(";");
+            if (key[0] === "-") {
+                return `${key}:${value}`;
+            }
+            return `${hyphenate(key)}:${
+                !isNumber(value) || IS_NON_DIMENSIONAL.test(key)
+                    ? value
+                    : `${value}px`
+            }`;
         })
         .join(";")
         .replace(/};/g, "}");

types/css.d.ts

@@ -1,3 +1,5 @@
+import * as CSS from "csstype";
+
 export type Sheet = CSSStyleSheet | HTMLStyleElement;
 
 export type Sheets = Sheet | Sheet[] | Sheets[];
@@ -20,5 +22,5 @@ export type Sheets = Sheet | Sheet[] | Sheets[];
  */
 export function css(strings: TemplateStringsArray, ...values: any[]): Sheet;
 export function css(strings: {
-    [key: string]: Partial<CSSStyleDeclaration>;
+    [key: string]: CSS.Properties<string | number>;
 }): Sheet;

types/dom.d.ts

@@ -20,7 +20,7 @@ type DOMRef<Target> = {
 };
 
 interface DOMGenericProperties {
-    style?: string | Partial<CSS.Properties<string | number>>;
+    style?: string | CSS.Properties<string | number>;
     class?: string;
     id?: string;
     slot?: string;
@@ -142,7 +142,7 @@ type DOMEventTarget<CurrentEvent, CurrentTarget, Target> = {
 type DOMTarget<
     Target,
     CurrentEvent,
-    Targets = Element | Node,
+    Targets = Element | Node
 > = CurrentEvent extends {
     customTarget: infer EventTarget;
 }
@@ -157,7 +157,7 @@ type DOMGetEventBefore<Value, Target> = Value extends DOMEventHandlerValue<
 
 type DOMGetEvent<
     Type extends string,
-    Element extends AtomicoStatic<any>,
+    Element extends AtomicoStatic<any>
 > = Element extends {
     "##props": infer Props;
 }
@@ -168,15 +168,15 @@ type DOMGetEvent<
 
 type DOMEvent<
     Target = HTMLElement,
-    CurrentEvent = Event,
+    CurrentEvent = Event
 > = Target extends string
     ? CurrentEvent extends AtomicoStatic<any>
         ? DOMGetEvent<Target, CurrentEvent>
         : DOMEventType<Target, CurrentEvent>
     : DOMTarget<DOMThis<Target>, CurrentEvent>;
 
 type DOMEventHandler<Target, Handler> = Handler extends (
-    ev: infer CurrentEvent,
+    ev: infer CurrentEvent
 ) => any
     ? CurrentEvent extends Event
         ? (ev: DOMEvent<Target, CurrentEvent>) => any
@@ -232,7 +232,7 @@ export interface DOMCustomTags {
     };
     form: DOMFormElement & {
         onsubmit: (
-            event: SubmitEvent & DOMCustomTarget<DOMFormElements>,
+            event: SubmitEvent & DOMCustomTarget<DOMFormElements>
         ) => any;
         onchange: (event: Event & DOMCustomTarget<DOMFormElements>) => any;
         oninput: (event: Event & DOMCustomTarget<DOMFormElements>) => any;
@@ -257,7 +257,7 @@ export type JSXProxy<Props, This> = {
         ? NonNullable<Props[I]> extends DOMEventHandlerValue<infer CurrentEvent>
             ? Nullable<
                   (
-                      ev: DOMEventTarget<CurrentEvent, This, Element | Node>,
+                      ev: DOMEventTarget<CurrentEvent, This, Element | Node>
                   ) => any
               >
             : Props[I]
@@ -316,10 +316,7 @@ export interface AtomicoStatic<Props> extends HTMLElement {
 
 export interface Atomico<Props, Base> extends AtomicoStatic<Props> {
     new (
-        props?: JSXProxy<
-            DOMTag<DOMThis<Base>, Props>,
-            AtomicoThis<Props, Base>
-        >,
+        props?: JSXProxy<DOMTag<DOMThis<Base>, Props>, AtomicoThis<Props, Base>>
     ): AtomicoThis<Props, Base>;
 }
 
@@ -345,7 +342,7 @@ export type JSXElement<Base extends FillConstructor> =
  */
 export interface JSX<Props = {}, Base = HTMLElement> extends Element {
     new (
-        props?: JSXProxy<DOMTag<DOMThis<Base>, Props>, Base>,
+        props?: JSXProxy<DOMTag<DOMThis<Base>, Props>, Base>
     ): PropsNullable<Props> & DOMThis<Base>;
 }