@tw-classed/core - npm Package Compare versions

Comparing version 1.0.0 to 1.1.0

dist/index.js

 const TW_VARS = Symbol.for("tw-classed.vars");
-const joinClasses = (classNames) => classNames.join(" ");
+const cx = (classNames) => classNames.join(" ");
 const mergeClass = (c1, c2) => {
@@ -18,2 +18,3 @@ if (typeof c2 === "boolean")
   let defaultVariants = {};
+  let compoundVariants = [];
   for (const className of classNames) {
@@ -28,3 +29,5 @@ if (typeof className === "string") {
       Object.assign(defaultVariants, record.defaultVariants);
-      stringClassNames.push(record.className);
+      record.compoundVariants && compoundVariants.push(...record.compoundVariants);
+      record.className && stringClassNames.push(record.className);
+      record.base && stringClassNames.push(record.base);
       continue;
@@ -35,13 +38,20 @@ }
     }
-    if (defaultVariants) {
+    if (className.defaultVariants) {
       Object.assign(defaultVariants, className.defaultVariants);
     }
+    if (className.compoundVariants) {
+      compoundVariants.push(...className.compoundVariants);
+    }
     if (className.className) {
       stringClassNames.push(className.className);
     }
+    if (className.base) {
+      stringClassNames.push(className.base);
+    }
   }
   return {
-    className: joinClasses(stringClassNames),
+    className: cx(stringClassNames),
     variants: variantObj,
-    defaultVariants
+    defaultVariants,
+    compoundVariants
   };
@@ -63,8 +73,7 @@ };
   variants,
-  defaultVariants
-}, props = {}) => {
-  let producedClassName = "";
-  for (const variantKey in variants) {
-    if (!Object.prototype.hasOwnProperty.call(variants, variantKey))
-      continue;
+  defaultVariants,
+  compoundVariants
+}, props = {}, shouldDeleteProps = false) => {
+  const matchedKeys = [];
+  const producedClassName = Object.keys(variants).reduce((acc, variantKey) => {
     const variantSelector = getVariantSelector(variantKey, props, {
@@ -74,15 +83,38 @@ defaultVariants
     if (!variantSelector)
-      continue;
+      return acc;
+    shouldDeleteProps && matchedKeys.push(variantKey);
     const variantClassName = variants[variantKey][variantSelector];
     if (!variantClassName)
-      continue;
-    producedClassName = mergeClass(producedClassName, variantClassName);
-  }
-  return producedClassName;
+      return acc;
+    return mergeClass(acc, variantClassName);
+  }, "");
+  const compoundedClassNames = getCompoundVariantClasses(
+    {
+      props,
+      defaultVariants
+    },
+    compoundVariants
+  );
+  shouldDeleteProps && matchedKeys.forEach((key) => delete props[key]);
+  return mergeClass(producedClassName, compoundedClassNames == null ? void 0 : compoundedClassNames.join(" "));
 };
+function getCompoundVariantClasses({
+  props,
+  defaultVariants
+}, compoundVariants = []) {
+  return compoundVariants == null ? void 0 : compoundVariants.reduce(
+    (acc, { class: cvClass, className: cvClassName, ...compoundVariantOptions }) => Object.entries(compoundVariantOptions).every(
+      ([key, value]) => ({
+        ...defaultVariants,
+        ...props
+      })[key] === value
+    ) ? [...acc, cvClass, cvClassName] : acc,
+    []
+  );
+}
 const classed = (...classNames) => {
-  const { className, variants, defaultVariants } = parseClassNames(classNames);
+  const { className, variants, defaultVariants, compoundVariants } = parseClassNames(classNames);
   const producer = (variantProps) => {
     const variantClassName = mapPropsToVariantClass(
-      { variants, defaultVariants },
+      { variants, defaultVariants, compoundVariants },
       variantProps
@@ -95,3 +127,4 @@ );
     variants,
-    defaultVariants
+    defaultVariants,
+    compoundVariants
   });
@@ -103,2 +136,3 @@ return producer;
   classed,
+  getCompoundVariantClasses,
   getVariantSelector,
@@ -105,0 +139,0 @@ mapPropsToVariantClass,

dist/parser.d.ts

@@ -6,8 +6,14 @@ import { ClassNamesAndVariant, InferVariantProps, VariantConfig, Variants } from "./types";
     defaultVariants: Partial<Partial<{ [K in keyof TVariants]: keyof TVariants[K]; }>>;
+    compoundVariants: Record<string, any>[];
 };
 export declare const getVariantSelector: <TVariants extends Variants>(variantKey: string, props: Partial<InferVariantProps<TVariants>>, { defaultVariants }: Pick<VariantConfig<TVariants>, "defaultVariants">) => string | undefined;
-export declare const mapPropsToVariantClass: <TVariants extends Variants, TRecord extends VariantConfig<TVariants> = VariantConfig<TVariants>>({ variants, defaultVariants, }: {
+export declare const mapPropsToVariantClass: <TVariants extends Variants, TRecord extends VariantConfig<TVariants> = VariantConfig<TVariants>>({ variants, defaultVariants, compoundVariants, }: {
     variants: TVariants;
     defaultVariants: TRecord["defaultVariants"];
-}, props?: Partial<InferVariantProps<TVariants>>) => string;
+    compoundVariants?: Record<string, any>[] | undefined;
+}, props?: Partial<InferVariantProps<TVariants>>, shouldDeleteProps?: boolean) => string;
+export declare function getCompoundVariantClasses({ props, defaultVariants, }: {
+    defaultVariants: VariantConfig<any>["defaultVariants"];
+    props: Record<string, any>;
+}, compoundVariants?: VariantConfig<any>["compoundVariants"]): string[];
 //# sourceMappingURL=parser.d.ts.map

dist/types.d.ts

@@ -8,5 +8,7 @@ import type * as Util from "./util";
     className?: string;
+    base?: string;
     defaultVariants?: Partial<{
         [K in keyof V]: keyof V[K];
     }>;
+    compoundVariants: Record<string, any>[];
 };
@@ -17,2 +19,3 @@ export declare type ClassNamesAndVariant<V extends Variants> = string | VariantConfig<V>;
         className?: string;
+        base?: string;
         variants?: V;
@@ -48,2 +51,3 @@ defaultVariants?: unknown;
     <Composers extends (string | Util.Function | {
+        base?: string;
         variants?: {
@@ -54,6 +58,13 @@ [name: string]: unknown;
         [K in keyof Composers]: string extends Composers[K] ? Composers[K] : Composers[K] extends string | Util.Function ? Composers[K] : {
-            variants: Variants;
+            base?: string;
+            variants?: Variants;
             defaultVariants?: "variants" extends keyof Composers[K] ? {
                 [Name in keyof Composers[K]["variants"]]?: keyof Composers[K]["variants"][Name];
             } : never;
+            compoundVariants?: (("variants" extends keyof Composers[K] ? {
+                [Name in keyof Composers[K]["variants"]]?: Util.Widen<keyof Composers[K]["variants"][Name]> | Util.String;
+            } : never) & {
+                className?: Util.String;
+                class?: Util.String;
+            })[];
         };
@@ -60,0 +71,0 @@ }): ClassedType<ClassedProps<Composers>, ClassedVariants<Composers>>;

dist/util.d.ts

 /** Narrowed function. */
 export type Function = (...args: any[]) => unknown;
+
+/** Returns a widened value from the given value. */
+export type Widen<T> = T extends number
+  ? `${T}` | T
+  : T extends "true"
+  ? boolean | T
+  : T extends "false"
+  ? boolean | T
+  : T extends `${number}`
+  ? number | T
+  : T;
+
+export type String = string & Record<never, never>;

dist/utility/classNames.d.ts

@@ -1,3 +0,3 @@
-export declare const joinClasses: (classNames: string[]) => string;
+export declare const cx: (classNames: string[]) => string;
 export declare const mergeClass: (c1: string, c2: string | null | undefined | boolean) => string;
 //# sourceMappingURL=classNames.d.ts.map

package.json

 {
   "name": "@tw-classed/core",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "description": "A Stitches & Styled-Components inspired library to create reusable Tailwind react components",
@@ -5,0 +5,0 @@ "type": "module",

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

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

21318

increased by26.36%

Lines of code

377

increased by34.16%

No dependency changes