inlines - npm Package Compare versions

Comparing version 0.4.0-alpha.25 to 0.4.0-alpha.26

dist/src/index.d.ts

 import { css, keyframes } from './css.js';
-import type { Props, Style, As, StyledComponent, StyledHtmlComponent, StyledFn } from './types.js';
-declare const styled: {
-    [key: string]: StyledHtmlComponent;
-} & StyledFn;
+import type { Props, Style, As, StyledComponent, StyledHtmlComponent, StyledFn, StyledProxy } from './types.js';
+declare const styled: StyledProxy & StyledFn;
 export type { Props, Style, As, StyledComponent, StyledFn, StyledHtmlComponent };
 export { styled, css, keyframes };

dist/src/index.js

@@ -1,2 +0,2 @@
-import { createElement, forwardRef } from 'react';
+import React, { createElement, forwardRef } from 'react';
 import { css, keyframes } from './css.js';
@@ -28,2 +28,10 @@ import { transform } from './transform.js';
 export { styled, css, keyframes };
+React.createElement(styled.input, {
+    style: {
+        background: 1,
+    },
+    onChange(e) {
+        console.log(e.target.value);
+    },
+});
 //# sourceMappingURL=index.js.map

dist/src/optimize.js

@@ -67,3 +67,3 @@ import ts from 'typescript';
                         remainingProps = true;
-                        if (key[0] === '&' || key[0] === '@') {
+                        if ((key[0] === '@' && key[1] === 'm') || key[0] === '&') {
                             keepStyled = true;
@@ -70,0 +70,0 @@ }

dist/src/types.d.ts

@@ -1,2 +0,2 @@
-import { ComponentClass, CSSProperties, FunctionComponent, HTMLProps, FC, ReactNode } from 'react';
+import { ComponentClass, CSSProperties, FunctionComponent, InputHTMLAttributes, ReactHTML, ReactNode } from 'react';
 export type Style = CSSProperties & {
@@ -14,3 +14,8 @@ [key: `@media${string}`]: Style;
 export type StyledComponent = FunctionComponent<Props>;
-export type StyledHtmlComponent = FC<HTMLProps<any> & Props>;
+export type StyledHtmlComponent<T> = T extends T ? FunctionComponent<InputHTMLAttributes<T>> : never;
 export type StyledFn = (as: As, style: Style) => StyledComponent;
+type Keys = keyof ReactHTML;
+export type StyledProxy = {
+    [Tag in Keys]: StyledHtmlComponent<JSX.IntrinsicElements[Tag]>;
+};
+export {};

package.json

 {
   "name": "inlines",
   "description": "When you just want to use the style prop in React",
-  "version": "0.4.0-alpha.25",
+  "version": "0.4.0-alpha.26",
   "main": "dist/src/index.js",
@@ -6,0 +6,0 @@ "types": "dist/src/index.d.ts",

src/index.ts

@@ -1,2 +0,2 @@
-import { createElement, forwardRef } from 'react'
+import React, { createElement, forwardRef } from 'react'
 import { css, keyframes } from './css.js'
@@ -12,2 +12,3 @@ import { transform } from './transform.js'
   StyledFn,
+  StyledProxy,
 } from './types.js'
@@ -56,5 +57,14 @@
   },
-) as { [key: string]: StyledHtmlComponent } & StyledFn
+) as StyledProxy & StyledFn
 
 export type { Props, Style, As, StyledComponent, StyledFn, StyledHtmlComponent }
 export { styled, css, keyframes }
+
+React.createElement(styled.input, {
+  style: {
+    background: 1,
+  },
+  onChange(e) {
+    console.log(e.target.value)
+  },
+})

src/optimize.ts

@@ -89,3 +89,3 @@ import ts from 'typescript'
             remainingProps = true
-            if (key[0] === '&' || key[0] === '@') {
+            if ((key[0] === '@' && key[1] === 'm') || key[0] === '&') {
               keepStyled = true
@@ -92,0 +92,0 @@ }

src/transform.ts

@@ -19,2 +19,3 @@ import { css, keyframes } from './css.js'
   const s = {} as Style
+
   for (let key in style) {
@@ -21,0 +22,0 @@ // @ts-ignore

src/types.ts

@@ -5,4 +5,4 @@ import {
   FunctionComponent,
-  HTMLProps,
-  FC,
+  InputHTMLAttributes,
+  ReactHTML,
   ReactNode,
@@ -16,6 +16,16 @@ } from 'react'
 }
+
 export type Props = { [key: string]: any; style?: Style; children?: ReactNode }
 export type As = string | FunctionComponent<any> | ComponentClass<any, any>
 export type StyledComponent = FunctionComponent<Props>
-export type StyledHtmlComponent = FC<HTMLProps<any> & Props>
+export type StyledHtmlComponent<T> = T extends T
+  ? FunctionComponent<InputHTMLAttributes<T>>
+  : never
+
 export type StyledFn = (as: As, style: Style) => StyledComponent
+
+type Keys = keyof ReactHTML
+
+export type StyledProxy = {
+  [Tag in Keys]: StyledHtmlComponent<JSX.IntrinsicElements[Tag]>
+}

No alert changes

Worsened metrics

Total package byte prevSize

33071

decreased by-9.5%

Number of package files

36

decreased by-18.18%

Lines of code

879

decreased by-8.63%

No dependency changes