tailwind-variants 0.0.21 → 0.0.23

package/src/__tests__/utils.test.ts

@@ -1,18 +0,0 @@
-import {falsyToString} from "../utils";
-
-describe("falsyToString", () => {
-  test("should return a string when given a boolean", () => {
-    expect(falsyToString(true)).toBe("true");
-    expect(falsyToString(false)).toBe("false");
-  });
-
-  test("should return 0 when given 0", () => {
-    expect(falsyToString(0)).toBe("0");
-  });
-
-  test("should return the original value when given a value other than 0 or a boolean", () => {
-    expect(falsyToString("test")).toBe("test");
-    expect(falsyToString(4)).toBe(4);
-    expect(falsyToString(null)).toBe(null);
-  });
-});

package/src/config.d.ts

@@ -1,16 +0,0 @@
-import type {Config as TwMergeConfig} from "tailwind-merge";
-
-export type TVConfig = {
-  /**
-   * Whether to merge the class names with `tailwind-merge` library.
-   * It's avoid to have duplicate tailwind classes. (Recommended)
-   * @see https://github.com/dcastil/tailwind-merge/blob/v1.8.1/README.md
-   * @default true
-   */
-  twMerge?: boolean;
-  /**
-   * The config object for `tailwind-merge` library.
-   * @see https://github.com/dcastil/tailwind-merge/blob/v1.8.1/docs/configuration.md
-   */
-  twMergeConfig?: TwMergeConfig;
-};

package/src/index.d.ts

@@ -1,83 +0,0 @@
-import {TVConfig} from "./config";
-import {ClassValue, ClassProp, OmitUndefined, StringToBoolean} from "./utils";
-
-type TVBaseName = "base";
-
-type TVScreens = "initial" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl";
-
-type TVSlots = Record<string, ClassValue> | undefined;
-
-type TVSlotsWithBase<S extends TVSlots, B extends ClassValue> = B extends undefined
-  ? keyof S
-  : keyof S | TVBaseName;
-
-type SlotsClassValue<S extends TVSlots, B extends ClassValue> = {
-  [K in TVSlotsWithBase<S, B>]?: ClassValue;
-};
-
-export type TVVariants<S extends TVSlots, B extends ClassValue> = {
-  [key: string]: {
-    [key: string]: S extends TVSlots ? SlotsClassValue<S, B> | ClassValue : ClassValue;
-  };
-};
-
-export type TVCompoundVariants<
-  V extends TVVariants<S>,
-  S extends TVSlots,
-  B extends ClassValue,
-> = Array<
-  {
-    [K in keyof V]?: StringToBoolean<keyof V[K]> | StringToBoolean<keyof V[K]>[];
-  } & ClassProp<SlotsClassValue<S, B> | ClassValue>
->;
-
-export type TVDefaultVariants<V extends TVVariants<S>, S extends TVSlots> = {
-  [K in keyof V]?: StringToBoolean<keyof V[K]>;
-};
-
-export type TVScreenPropsValue<V extends TVVariants<S>, K extends keyof V> = {
-  [K2 in TVScreens]?: StringToBoolean<keyof V[K]>;
-};
-
-export type TVProps<V extends TVVariants<S>, S extends TVSlots> = V extends undefined
-  ? ClassProp<ClassValue>
-  : {
-      [K in keyof V]?: StringToBoolean<keyof V[K]> | TVScreenPropsValue<V, K>;
-    } & ClassProp<ClassValue>;
-
-export type TVVariantKeys<V extends TVVariants<S>, S extends TVSlots> = V extends Object
-  ? Array<keyof V>
-  : undefined;
-
-export type TVReturnType<V extends TVVariants<S>, S extends TVSlots, B extends ClassValue> = {
-  (props?: TVProps<V, S>): S extends undefined
-    ? string
-    : {[K in TVSlotsWithBase<S, B>]: (slotProps?: ClassProp) => string};
-} & Record<"variantkeys", TVVariantKeys<V, S>>;
-
-export type TV = {
-  <
-    V extends TVVariants<S> = undefined,
-    CV extends TVCompoundVariants<V, S, B> = undefined,
-    DV extends TVDefaultVariants<V, S> = undefined,
-    C extends TVConfig,
-    B extends ClassValue = undefined,
-    S extends TVSlots = undefined,
-  >(
-    options: {
-      base?: B;
-      slots?: S;
-      variants?: V;
-      compoundVariants?: CV;
-      defaultVariants?: DV;
-    },
-    config?: C,
-  ): TVReturnType<V, S, B>;
-};
-
-export declare const tv: TV;
-
-export type VariantProps<Component extends (...args: any) => any> = Omit<
-  OmitUndefined<Parameters<Component>[0]>,
-  "class" | "className"
->;

package/src/index.js

@@ -1,207 +0,0 @@
-import {cx, isNotEmptyObject, falsyToString, joinObjects, removeExtraSpaces} from "./utils.js";
-
-export const tv = (
-  options,
-  config = {
-    twMerge: true,
-    twMergeConfig: {},
-  },
-) => {
-  const {
-    slots: slotProps = {},
-    variants = {},
-    compoundVariants = [],
-    defaultVariants = {},
-  } = options;
-
-  const component = (props) => {
-    if (variants == null && !isNotEmptyObject(slotProps)) {
-      return cx(options?.base, props?.class, props?.className)(config);
-    }
-
-    if (compoundVariants && !Array.isArray(compoundVariants)) {
-      throw new TypeError(
-        `The "compoundVariants" prop must be an array. Received: ${typeof compoundVariants}`,
-      );
-    }
-
-    // add "base" to the slots object
-    const slots = {
-      base: options?.base,
-      ...slotProps,
-    };
-
-    const getScreenVariantValues = (screen, screenVariantValue, acc = [], slotKey) => {
-      let result = acc;
-
-      if (typeof screenVariantValue === "string") {
-        result.push(
-          removeExtraSpaces(screenVariantValue)
-            .split(" ")
-            .map((v) => `${screen}:${v}`),
-        );
-      } else if (Array.isArray(screenVariantValue)) {
-        result.push(screenVariantValue.flatMap((v) => `${screen}:${v}`));
-      } else if (typeof screenVariantValue === "object" && typeof slotKey === "string") {
-        const value = screenVariantValue?.[slotKey];
-
-        if (value && typeof value === "string") {
-          const fixedValue = removeExtraSpaces(value);
-
-          result[slotKey] = result[slotKey]
-            ? [...result[slotKey], ...fixedValue.split(" ").map((v) => `${screen}:${v}`)]
-            : fixedValue.split(" ").map((v) => `${screen}:${v}`);
-        } else if (Array.isArray(value) && value.length > 0) {
-          result[slotKey] = value.flatMap((v) => `${screen}:${v}`);
-        }
-      }
-
-      return result;
-    };
-
-    const getVariantValue = (variant, slotKey = null) => {
-      const variantObj = variants?.[variant];
-
-      if (typeof variantObj !== "object" || !isNotEmptyObject(variantObj)) {
-        return null;
-      }
-
-      const variantProp = props?.[variant];
-      let defaultVariantProp = defaultVariants?.[variant];
-      let screenValues = [];
-
-      if (variantProp === null) return null;
-
-      const variantKey = falsyToString(variantProp);
-
-      // responsive variants
-      if (typeof variantKey === "object") {
-        screenValues = Object.keys(variantKey).reduce((acc, screen) => {
-          const screenVariantKey = variantKey[screen];
-          const screenVariantValue = variantObj?.[screenVariantKey];
-
-          if (screen === "initial") {
-            defaultVariantProp = screenVariantKey;
-
-            return acc;
-          }
-
-          return getScreenVariantValues(screen, screenVariantValue, acc, slotKey);
-        }, []);
-      }
-
-      const value = variantObj[variantKey] || variantObj[falsyToString(defaultVariantProp)];
-
-      if (
-        typeof screenValues === "object" &&
-        typeof slotKey === "string" &&
-        screenValues[slotKey]
-      ) {
-        return joinObjects(screenValues, value);
-      }
-
-      return screenValues.length > 0 ? [value, ...screenValues] : value;
-    };
-
-    const getVariantClassNames = variants ? Object.keys(variants).map(getVariantValue) : null;
-
-    const getVariantClassNamesBySlotKey = (slotKey) => {
-      if (!variants || typeof variants !== "object") {
-        return null;
-      }
-
-      return Object.keys(variants)
-        .map((variant) => {
-          const variantValue = getVariantValue(variant, slotKey);
-
-          return slotKey === "base" && typeof variantValue === "string"
-            ? variantValue
-            : variantValue && variantValue[slotKey];
-        })
-        .filter(Boolean);
-    };
-
-    const propsWithoutUndefined =
-      props && Object.fromEntries(Object.entries(props).filter(([, value]) => value !== undefined));
-
-    const getCompoundVariantClassNames = compoundVariants
-      // eslint-disable-next-line @typescript-eslint/no-unused-vars
-      ?.filter(({class: tvClass, className: tvClassName, ...compoundVariantOptions}) =>
-        Object.entries(compoundVariantOptions).every(([key, value]) => {
-          const initialProp = typeof props?.[key] === "object" ? props[key]?.initial : {};
-          const compoundProps = {...defaultVariants, ...initialProp, ...propsWithoutUndefined};
-
-          return Array.isArray(value)
-            ? value.includes(compoundProps[key])
-            : compoundProps[key] === value;
-        }),
-      )
-      .flatMap(({class: tvClass, className: tvClassName}) => [tvClass, tvClassName]);
-
-    const getCompoundVariantClassNamesBySlot = () => {
-      const compoundClassNames = getCompoundVariantClassNames;
-
-      if (!Array.isArray(compoundClassNames)) {
-        return compoundClassNames;
-      }
-
-      return compoundClassNames.reduce((acc, className) => {
-        if (typeof className === "string") {
-          acc.base = cx(acc.base, className)(config);
-        }
-
-        if (typeof className === "object") {
-          Object.entries(className).forEach(([slot, className]) => {
-            acc[slot] = cx(acc[slot], className)(config);
-          });
-        }
-
-        return acc;
-      }, {});
-    };
-
-    // slots variants
-    if (isNotEmptyObject(slotProps)) {
-      const compoundClassNames = getCompoundVariantClassNamesBySlot() ?? [];
-
-      const slotsFns =
-        typeof slots === "object" && isNotEmptyObject(slots)
-          ? Object.keys(slots).reduce((acc, slotKey) => {
-              acc[slotKey] = (slotProps) =>
-                cx(
-                  slots[slotKey],
-                  getVariantClassNamesBySlotKey(slotKey),
-                  compoundClassNames?.[slotKey],
-                  slotProps?.class,
-                  slotProps?.className,
-                )(config);
-
-              return acc;
-            }, {})
-          : {};
-
-      return {
-        ...slotsFns,
-      };
-    }
-
-    // normal variants
-    return cx(
-      options?.base,
-      getVariantClassNames,
-      getCompoundVariantClassNames,
-      props?.class,
-      props?.className,
-    )(config);
-  };
-
-  const getVariantKeys = () => {
-    if (!variants || typeof variants !== "object") return;
-
-    return Object.keys(variants);
-  };
-
-  component.variantkeys = getVariantKeys();
-
-  return component;
-};

package/src/transformer.d.ts

@@ -1,5 +0,0 @@
-export type TVTransformer = {
-  (content: string): string;
-};
-
-export declare const transformer: TVTransformer;

package/src/transformer.js

@@ -1,109 +0,0 @@
-// Ignore the `initial`
-// TODO: should respect tailwind config;
-const screens = ["xs", "sm", "md", "lg", "xl", "2xl"];
-
-const regExp = {
-  tv: new RegExp(/tv\({[\s\S]*?}\)/g),
-  tvContent: new RegExp(/\({[\s\S]*?}\)/g),
-  comment: new RegExp(/\/\*[\s\S]*?\*\/|([^\\:]|^)\/\/.*$/gm),
-  blankLine: new RegExp(/^\s*$(?:\r\n?|\n)/gm),
-};
-
-const isEmpty = (content) => {
-  if (!content) return true;
-  if (Array.isArray(content) && content.length === 0) return true;
-  if (typeof content === "string" && content.length === 0) return true;
-  if (typeof content === "object" && Object.keys(content).length === 0) return true;
-
-  return false;
-};
-
-const getCleanContent = (content) => {
-  const removeComment = content.replace(regExp.comment, "$1").toString();
-  const removeBlankLine = removeComment.replace(regExp.blankLine, "").toString();
-
-  return removeBlankLine.match(regExp.tv);
-};
-
-const getTVObjects = (content) => {
-  const tvStrArray = getCleanContent(content);
-
-  if (isEmpty(tvStrArray)) return;
-
-  return tvStrArray.map((item) => {
-    const str = item.toString();
-    const tv = str.match(regExp.tvContent).toString();
-
-    // TODO: `eval` should be avoided
-    return eval(
-      tv
-        .replaceAll("`", '"')
-        .replaceAll("'", '"')
-        .replaceAll(/\s{2,}/g, " ")
-        .replaceAll(/(\r\n|\n|\r)/gm, "")
-        .trim(),
-    );
-  });
-};
-
-const transformContent = (tv) => {
-  const {variants = {}} = tv;
-
-  if (isEmpty(variants)) return;
-
-  let responsive = {};
-
-  for (const [variantKey, variant] of Object.entries(variants)) {
-    if (isEmpty(variant)) continue;
-
-    responsive[variantKey] = {};
-
-    for (const [variantType, original] of Object.entries(variant)) {
-      if (isEmpty(original)) continue;
-
-      const originalClasses = original.split(" ");
-
-      if (isEmpty(originalClasses)) continue;
-
-      responsive[variantKey][variantType] = {};
-
-      for (const screen of screens.values()) {
-        let responsiveClasses = ``;
-
-        originalClasses.forEach((item) => {
-          responsiveClasses += `${screen}:${item} `;
-        });
-
-        responsive[variantKey][variantType].original = original;
-        responsive[variantKey][variantType][screen] = responsiveClasses.trimEnd();
-      }
-    }
-  }
-
-  return responsive;
-};
-
-export const transformer = (content) => {
-  try {
-    // TODO: support package alias
-    const isIncluded = content.includes("tailwind-variants");
-
-    if (!isIncluded) return content;
-
-    const tvs = getTVObjects(content);
-
-    if (isEmpty(tvs)) return content;
-
-    const transformedContent = tvs.map((tv) => {
-      return transformContent(tv);
-    });
-
-    const concatedContent = content.concat(
-      `\n/*\n\n${JSON.stringify(transformedContent, undefined, 2)}\n\n*/\n`,
-    );
-
-    return concatedContent;
-  } catch (error) {
-    return content;
-  }
-};

package/src/utils.d.ts

@@ -1,29 +0,0 @@
-import {TVConfig} from "./config";
-
-export declare type ClassValue = string | string[] | null | undefined;
-
-export declare type ClassProp<V extends unknown = ClassValue> =
-  | {
-      class: V;
-      className?: never;
-    }
-  | {class?: never; className: V}
-  | {class?: never; className?: never};
-
-export declare type OmitUndefined<T> = T extends undefined ? never : T;
-
-export declare type StringToBoolean<T> = T extends "true" | "false" ? boolean : T;
-
-export type CxOptions = ClassValue[];
-
-export type CxReturn = string;
-
-export declare const cx: <T extends CxOptions>(...classes: T) => (config: TVConfig) => CxReturn;
-
-export declare const falsyToString: <T extends unknown>(value: T) => string | T;
-
-export declare const isNotEmptyObject: (obj: object) => boolean;
-
-export declare const joinObjects: (obj1: object, obj2: object) => object;
-
-export declare const removeExtraSpaces: (str: string) => string;

package/src/utils.js

@@ -1,48 +0,0 @@
-import {twMerge as twMergeBase, extendTailwindMerge} from "tailwind-merge";
-
-export const cxBase = (...classes) => classes.flat(Infinity).filter(Boolean).join(" ");
-
-export const falsyToString = (value) =>
-  typeof value === "boolean" ? `${value}` : value === 0 ? "0" : value;
-
-export const isNotEmptyObject = (obj) => obj && Object.keys(obj).length > 0;
-
-export const cx =
-  (...classes) =>
-  (config = {}) => {
-    if (!config.twMerge) {
-      return cxBase(classes);
-    }
-
-    const twMerge = isNotEmptyObject(config.twMergeConfig)
-      ? extendTailwindMerge(config.twMergeConfig)
-      : twMergeBase;
-
-    return twMerge(cxBase(classes));
-  };
-
-export const joinObjects = (obj1, obj2) => {
-  const result = {};
-
-  if (typeof obj1 !== "object" || typeof obj2 !== "object") {
-    return result;
-  }
-
-  Object.keys(obj1).forEach((key) => {
-    if (obj2[key]) {
-      result[key] = cxBase([obj1[key], obj2[key]]);
-    } else {
-      result[key] = obj1[key];
-    }
-  });
-
-  return result;
-};
-
-export const removeExtraSpaces = (str) => {
-  if (!str || typeof str !== "string") {
-    return str;
-  }
-
-  return str.replace(/\s+/g, " ").trim();
-};

package/tsconfig.json

@@ -1,18 +0,0 @@
-
-{	
-  "$schema": "https://json.schemastore.org/tsconfig",	
-  "include": ["**/*.ts"],
-  "exclude": ["node_modules", "dist"],	
-  "compilerOptions": {	
-    "target": "esnext",	
-    "module": "esnext",	
-    "isolatedModules": true,	
-    "esModuleInterop": true,	
-    "moduleResolution": "node",	
-    "resolveJsonModule": true,	
-    "strict": true,	
-    "declaration": true,	
-    "skipLibCheck": true,	
-    "allowJs": true	
-  }	
-}