update JSX types, styled components as

Author: ryansolid

package-lock.json

@@ -33,12 +33,12 @@
     "babel-jest": "^26.3.0",
     "babel-plugin-jsx-dom-expressions": "~0.20.8",
     "coveralls": "^3.1.0",
-    "dom-expressions": "0.20.8",
-    "hyper-dom-expressions": "0.20.8",
+    "dom-expressions": "0.20.10",
+    "hyper-dom-expressions": "0.20.10",
     "jest": "~26.4.2",
     "jest-ts-webcompat-resolver": "^1.0.0",
     "lerna": "^3.22.1",
-    "lit-dom-expressions": "0.20.8",
+    "lit-dom-expressions": "0.20.10",
     "ncp": "2.0.0",
     "npm-run-all": "^4.1.5",
     "rimraf": "^3.0.2",

package.json

@@ -23,7 +23,7 @@
     "test:types": "tsc --project tsconfig.test.json"
   },
   "dependencies": {
-    "csstype": "^2.6.2",
+    "csstype": "^3.0.3",
     "goober": "1.8.0"
   },
   "peerDependencies": {

packages/solid-styled-components/package.json

@@ -1,5 +1,5 @@
 import { css, CSSAttribute } from "goober";
-import { assignProps, createContext, useContext } from "solid-js";
+import { assignProps, splitProps, createContext, useContext } from "solid-js";
 import { spread, createComponent } from "solid-js/dom";
 
 export { css, glob, extractCss } from "goober";
@@ -25,34 +25,33 @@ type StyledTemplateArgs<T> = [
 ];
 
 export function styled<T extends keyof JSX.IntrinsicElements>(tag: T | ((props: any) => any)) {
-  return <P>(...args: StyledTemplateArgs<P & { theme?: any; className?: any }>) => {
+  return <P>(...args: StyledTemplateArgs<P & { theme?: any; as?: keyof JSX.IntrinsicElements; className?: any }>) => {
     return (
-      props: P & JSX.IntrinsicElements[T] & { theme?: any; className?: any }
+      props: P & JSX.IntrinsicElements[T] & { theme?: any; as?: keyof JSX.IntrinsicElements; className?: any }
     ): JSX.Element => {
-      const newProps = assignProps({}, props);
-      props.theme = useContext(ThemeContext);
-      Object.defineProperty(newProps, "className", {
-        get() {
+      const clone = assignProps({}, props, {
+        theme: useContext(ThemeContext),
+        get className(): string {
           const pClassName = props.className,
             append = "className" in props && /^go[0-9]+/.test(pClassName!);
 
           // Call `css` with the append flag and pass the props
           let className = css.apply(
-            { target: this.target, o: append, p: props },
+            { target: (this as any).target, o: append, p: newProps },
             args as [any, ...any[]]
           );
 
           return [pClassName, className].filter(Boolean).join(" ");
-        },
-        configurable: true,
-        enumerable: true
+        }
       });
+      const [local, newProps] = splitProps(clone, ["as"]);
+      const createTag = local.as || tag;
 
       let el;
-      if (typeof tag === "function") {
-        el = tag(newProps);
+      if (typeof createTag === "function") {
+        el = createTag(newProps);
       } else {
-        el = document.createElement(tag);
+        el = document.createElement(createTag as any);
         spread(el, newProps);
       }
 

packages/solid-styled-components/src/index.ts

@@ -7,7 +7,15 @@ declare global {
    */
 
   namespace JSX {
-    type Element = Node | ArrayElement | FunctionElement | string | number | boolean | null | undefined;
+    type Element =
+      | Node
+      | ArrayElement
+      | FunctionElement
+      | string
+      | number
+      | boolean
+      | null
+      | undefined;
 
     interface ArrayElement extends Array<Element> {}
     interface FunctionElement {
@@ -1949,6 +1957,11 @@ declare global {
       itemType?: string;
       itemId?: string;
       itemRef?: string;
+
+      // others
+      align?: "start" | "end" | "center" | "baseline" | "stretch" | "left" | "right";
+      part?: string;
+      exportparts?: string;
     }
 
     // HTML Elements
@@ -2719,7 +2732,7 @@ declare global {
         AnimationAdditionSVGAttributes {
       path?: string;
       keyPoints?: string;
-      rotate?: number | string |"auto" | "auto-reverse";
+      rotate?: number | string | "auto" | "auto-reverse";
       origin?: "default";
     }
 
@@ -3409,4 +3422,4 @@ declare global {
   }
 }
 
-export {};
+export {};