tailwind-styled-components - npm Package Compare versions

Comparing version 2.1.8 to 2.2.0

dist/tailwind.d.ts

@@ -1,37 +0,101 @@
-import React from "react";
+import React, { CSSProperties } from "react";
 declare const isTwElement: unique symbol;
+export declare type IsTwElement = {
+    [isTwElement]: true;
+};
+export declare type FalseyValue = undefined | null | false;
+export declare type FlattenInterpolation<P> = ReadonlyArray<Interpolation<P>>;
+export declare type InterpolationValue = string | number | FalseyValue | TailwindComponentInterpolation;
+export declare type Interpolation<P> = InterpolationValue | InterpolationFunction<P> | FlattenInterpolation<P>;
+export declare type InterpolationFunction<P> = (props: P) => Interpolation<P>;
+declare type TailwindComponentInterpolation = PickU<TailwindComponentBase<any, any>, keyof TailwindComponentBase<any, any>>;
 declare type IntrinsicElementsKeys = keyof JSX.IntrinsicElements;
-export declare const mergeArrays: (template: TemplateStringsArray, templateElements: TemplateElementResult[]) => TemplateElementResult[];
-export declare const cleanTemplate: (template: TemplateElementResult[], inheritedClasses?: string) => string;
-declare type StripCallSignature<T> = {
-    [K in keyof T]: T[K];
+declare type IsAny<T, True, False = never> = True | False extends (T extends never ? True : False) ? True : False;
+export declare const mergeArrays: (template: TemplateStringsArray, templateElements: (string | undefined | null)[]) => string[];
+export declare const cleanTemplate: (template: Array<Interpolation<any>>, inheritedClasses?: string) => string;
+export declare type PickU<T, K extends keyof T> = T extends any ? {
+    [P in K]: T[P];
+} : never;
+export declare type RemoveIndex<T> = {
+    [K in keyof T as string extends K ? never : number extends K ? never : K]: T[K];
 };
-export declare type TailwindComponentProps<E extends React.ComponentType<any> | IntrinsicElementsKeys, K extends object> = K extends any ? React.ComponentPropsWithoutRef<E> & React.RefAttributes<React.ComponentRef<E> | undefined> & K : never;
-declare type TailwindComponentPropsWith$As<E extends React.ComponentType<any> | IntrinsicElementsKeys, K extends object, As extends IntrinsicElementsKeys | React.ComponentType<any> = E> = TailwindComponentProps<E, K> & InnerTailwindComponentAllProps<As> & {
-    $as?: As;
+/**
+ * ForwardRef typings
+ */
+export declare type TailwindExoticComponent<P> = PickU<React.ForwardRefExoticComponent<P>, keyof React.ForwardRefExoticComponent<any>>;
+declare type MergeProps<O extends object, P extends {} = {}> = P extends any ? IsAny<P, RemoveIndex<P> & O, P & O> : never;
+declare type TailwindPropHelper<P, O extends object = {}> = PickU<MergeProps<O, P>, keyof MergeProps<O, P>>;
+declare type TailwindComponentPropsWith$As<P extends object, O extends object, $As extends string | React.ComponentType<any> = React.ComponentType<P>, P2 = $As extends AnyTailwindComponent ? TailwindComponentAllInnerProps<$As> : $As extends IntrinsicElementsKeys | React.ComponentType<any> ? React.ComponentPropsWithRef<$As> : never> = P & O & TailwindPropHelper<P2> & {
+    $as?: $As;
 };
-export declare type TailwindExoticComponent<E extends React.ComponentType<any> | IntrinsicElementsKeys, K extends object> = StripCallSignature<React.ForwardRefExoticComponent<TailwindComponentProps<E, K>>>;
-export interface TailwindComponent<E extends React.ComponentType<any> | IntrinsicElementsKeys, K extends object> extends TailwindExoticComponent<E, K> {
-    (props: TailwindComponentProps<E, K> & {
+/**
+ * An interface represent a component styled by tailwind-styled-components
+ *
+ * @export
+ * @interface TailwindComponent
+ * @template P The base react props
+ * @template O The props added with the template function.
+ */
+export declare type TailwindComponent<P extends object, O extends object = {}> = IsTwElement & TailwindComponentBase<P, O> & WithStyle<P, O>;
+/**
+ * An interface represent a component styled by tailwind-styled-components
+ *
+ * @export
+ * @interface TailwindComponentBase
+ * @extends {TailwindExoticComponent<TailwindPropHelper<P, O>>}
+ * @template P The base react props
+ * @template O The props added with the template function.
+ */
+export interface TailwindComponentBase<P extends object, O extends object = {}> extends TailwindExoticComponent<TailwindPropHelper<P, O>> {
+    (props: TailwindPropHelper<P, O> & {
         $as?: never | undefined;
-    }): React.ReactElement<TailwindComponentProps<E, K>> | null;
-    <As extends IntrinsicElementsKeys | React.ComponentType<any> = E>(props: TailwindComponentPropsWith$As<E, K, As>): React.ReactElement<TailwindComponentPropsWith$As<E, K, As>> | null;
-    [isTwElement]: boolean;
+    }): React.ReactElement<TailwindPropHelper<P, O>>;
+    <$As extends string | React.ComponentType<any> = React.ComponentType<P>>(props: TailwindComponentPropsWith$As<P, O, $As>): React.ReactElement<TailwindComponentPropsWith$As<P, O, $As>>;
 }
-declare type NoInfer<T> = [T][T extends any ? 0 : never];
-declare type TemplateElementResult = string | undefined | null | false;
-export interface TemplateFunction<E extends React.ComponentType<any> | IntrinsicElementsKeys> {
-    <K extends object = {}>(template: TemplateStringsArray, ...templateElements: ((props: NoInfer<React.ComponentPropsWithRef<E>> & K) => TemplateElementResult)[]): TailwindComponent<E, K>;
+/**
+ *  An interface represent withStyle functionality
+ *
+ * @export
+ * @interface WithStyle
+ * @template P
+ * @template O
+ */
+export interface WithStyle<P extends object, O extends object = {}> {
+    withStyle: <S extends object = {}>(styles: CSSProperties | ((p: P & O & S) => CSSProperties)) => TailwindComponent<P, O & S>;
 }
-declare type InnerTailwindComponentAllProps<E extends React.ComponentType<any> | IntrinsicElementsKeys | TailwindComponent<any, any>> = E extends TailwindComponent<infer E2, any> ? React.ComponentPropsWithoutRef<E2> & React.RefAttributes<React.ComponentRef<E2> | undefined> : React.ComponentPropsWithoutRef<E> & React.RefAttributes<React.ComponentRef<E> | undefined>;
-export interface TemplateFunctionFactory {
-    <E extends TailwindComponent<E2, any>, E2 extends IntrinsicElementsKeys>(Element: E): TemplateFunction<E2>;
-    <E extends TailwindComponent<any, any>>(Element: E): TemplateFunction<any>;
-    <E extends IntrinsicElementsKeys>(Element: E): TemplateFunction<E>;
-    <E extends React.ComponentType<any>>(Element: E): TemplateFunction<E>;
+/**
+ * Generice TailwindComponent
+ */
+declare type AnyTailwindComponent = TailwindComponent<any, any>;
+/**
+ * A template function that accepts a template literal of tailwind classes and returns a tailwind-styled-component
+ *
+ * @export
+ * @interface TemplateFunction
+ * @template E
+ */
+export interface TemplateFunction<P extends object, O extends object = {}> {
+    (template: TemplateStringsArray): TailwindComponent<P, O>;
+    (template: TemplateStringsArray | InterpolationFunction<P & O>, ...rest: Array<Interpolation<P & O>>): TailwindComponent<P, O>;
+    <K extends object>(template: TemplateStringsArray | InterpolationFunction<P & O & K>, ...rest: Array<Interpolation<P & O & K>>): TailwindComponent<P, O & K>;
 }
+export declare type TailwindComponentInnerProps<C extends AnyTailwindComponent> = C extends TailwindComponent<infer P, any> ? P : never;
+export declare type TailwindComponentInnerOtherProps<C extends AnyTailwindComponent> = C extends TailwindComponent<any, infer O> ? O : never;
+export declare type TailwindComponentAllInnerProps<C extends AnyTailwindComponent> = TailwindComponentInnerProps<C> & TailwindComponentInnerOtherProps<C>;
 export declare type IntrinsicElementsTemplateFunctionsMap = {
-    [key in IntrinsicElementsKeys]: TemplateFunction<key>;
+    [RTag in keyof JSX.IntrinsicElements]: TemplateFunction<JSX.IntrinsicElements[RTag]>;
 };
-declare const tw: any;
+/**
+ *
+ *
+ * @export
+ * @interface TailwindInterface
+ * @extends {IntrinsicElementsTemplateFunctionsMap}
+ */
+export interface TailwindInterface extends IntrinsicElementsTemplateFunctionsMap {
+    <C extends TailwindComponent<any, any>>(component: C): TemplateFunction<TailwindComponentInnerProps<C>, TailwindComponentInnerOtherProps<C>>;
+    <C extends React.ComponentType<any>>(component: C): TemplateFunction<C extends (P?: never) => any ? {} : React.ComponentPropsWithoutRef<C>>;
+    <C extends keyof JSX.IntrinsicElements>(component: C): TemplateFunction<JSX.IntrinsicElements[C]>;
+}
+declare const tw: TailwindInterface;
 export default tw;

package.json

 {
     "name": "tailwind-styled-components",
-    "version": "2.1.8",
+    "version": "2.2.0",
     "keywords": [
@@ -16,3 +16,4 @@ "react",
     "description": "Create tailwind css react components like styled components with classes name on multiple lines",
-    "main": "dist/index.js",
+    "main": "dist/tailwind-styled-components.cjs.js",
+    "module": "dist/tailwind-styled-components.esm.js",
     "types": "dist/index.d.ts",
@@ -23,7 +24,8 @@ "files": [
     "scripts": {
-        "build": "tsc",
+        "build": "node esbuild.js && tsc -p tsconfig.types.json",
+        "prebuild": "yarn run clean",
         "postbuild": "yarn run test",
-        "dev": "tsc -w",
         "clean": "rimraf dist",
         "pretest": "jest --clearCache",
+        "posttest": "yarn run test:types",
         "test": "jest",
@@ -42,3 +44,3 @@ "test:types": "tsc -p ./src/typing-tests/tsconfig.json",
         "@testing-library/react": "^12.1.2",
-        "@types/jest": "^27.4.0",
+        "@types/jest": "^28.1.4",
         "@types/node": "^17.0.8",
@@ -52,3 +54,4 @@ "@types/react": "^17.0.38",
         "eslint-plugin-prettier": "^4.0.0",
-        "jest": "^27.5.1",
+        "jest": "^28.0.0",
+        "jest-environment-jsdom": "^28.1.2",
         "prettier": "^2.5.1",
@@ -58,3 +61,3 @@ "react": "^17.0.2",
         "rimraf": "^3.0.2",
-        "ts-jest": "^27.1.4",
+        "ts-jest": "^28.0.5",
         "typescript": "^4.5.4"
@@ -67,4 +70,4 @@ },
     "dependencies": {
-        "tailwind-merge": "^1.2.0"
+        "tailwind-merge": "^1.3.0"
     }
 }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Minified code

Quality

This package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

90515

increased by147.8%

Number of package files

12

increased by20%

Worsened metrics

Dev dependency count

19

increased by5.56%

Lines of code

127

decreased by-47.74%

Number of low quality alerts

1

increased byInfinity%

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• Updatedtailwind-merge@^1.3.0