npm - classname-variants - Versions diffs - 1.3.1 → 1.3.3 - Mend

classname-variants 1.3.1 → 1.3.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (10) hide show

package/README.md CHANGED Viewed

@@ -2,7 +2,7 @@
 Stitches-like [variant API](https://stitches.dev/docs/variants) for plain class names.
-The library is framework agnostic and can be used with any kind of CSS flavor.
+The library is framework-agnostic and can be used with any kind of CSS flavor.
 It is especially useful though if used with [Tailwind](https://tailwindcss.com/) or [CSS Modules](https://github.com/css-modules/css-modules) in combination with React, as it provides some [dedicated helpers](#React) and even allows for a _styled-components_ like API, but with [class names instead of styles](#bonus-styled-components-but-with-class-names-)!
@@ -158,14 +158,14 @@ function App() {
 Things can be taken even a step further, resulting in a _styled-components_ like way of defining reusable components. Under the hood, this does basically the same as the example above, but also handles _refs_ correctly:
-```tsx
-import { styled } from "classname-variants/react";
+```ts
+import { styled, tw } from "classname-variants/react";
 const Button = styled("button", {
   variants: {
     size: {
-      small: "text-xs",
-      large: "text-base",
+      small: tw`text-xs`,
+      large: tw`text-base`,
     },
   },
 });
@@ -173,7 +173,7 @@ const Button = styled("button", {
 Again, this is not limited to tailwind, so you could do the same with CSS modules:
-```tsx
+```ts
 import { styled } from "classname-variants/react";
 import styles from "./styles.module.css";
@@ -187,7 +187,21 @@ const Button = styled("button", {
 });
 ```
-**NOTE:** You can also style other custom React components as long as they accept a `className` prop.
+> [!TIP]
+> You can also style other custom React components as long as they accept a `className` prop.
+## Styled components without variants
+You can also use the `styled` function to create styled components without any variants at all:
+```ts
+import { styled } from "classname-variants/react";
+const Button = styled(
+  "button",
+  "border-none rounded px-3 font-sans bg-green-600 text-white hover:bg-green-500"
+);
+```
 ## Polymorphic components with "as"
@@ -216,12 +230,12 @@ function App() {
 # Tailwind IntelliSense
-In order to get auto-completion for the CSS classes themselves, you can use the [Tailwind CSS IntelliSense](https://github.com/tailwindlabs/tailwindcss-intellisense) plugin for VS Code. In order to make it recognize the strings inside your variants config, you have to somehow mark them and configure the plugin accordingly.
+In order to get auto-completion for the CSS classes themselves, you can use the [Tailwind CSS IntelliSense](https://github.com/tailwindlabs/tailwindcss-intellisense) plugin for VS Code. In order to make it recognize the strings inside your variants-config, you have to somehow mark them and configure the plugin accordingly.
 One way of doing so is by using tagged template literals:
 ```ts
-const tw = String.raw;
+import { variants, tw } from "classname-variants";
 const button = variants({
   base: tw`px-5 py-2 text-white`,
@@ -240,7 +254,10 @@ You can then add the following line to your `settings.json`:
 "tailwindCSS.experimental.classRegex": ["tw`(.+?)`"]
 ```
-In order to get type coverage even for your Tailwind classes you can use a tool like [tailwind-ts](https://github.com/mathieutu/tailwind-ts).
+> [!NOTE]
+> The `tw` helper function is just an alias for [`String.raw()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/raw) which has the nice side effect backslashes are not treated as [escape character in JSX](https://tailwindcss.com/docs/adding-custom-styles#handling-whitespace).
+In order to get type coverage even for your Tailwind classes, you can use a tool like [tailwind-ts](https://github.com/mathieutu/tailwind-ts).
 # License

package/index.html CHANGED Viewed

@@ -11,6 +11,6 @@
   </head>
   <body>
     <div id="root"></div>
-    <script type="module" src="./example.tsx"></script>
+    <script type="module" src="./src/example.tsx"></script>
   </body>
 </html>

package/lib/index.d.ts CHANGED Viewed

@@ -12,11 +12,11 @@
  *   }
  * }
  */
-export declare type Variants = Record<string, Record<string, string>>;
+export type Variants = Record<string, Record<string, string>>;
 /**
  * Configuration including defaults and compound variants.
  */
-export interface VariantsConfig<V extends Variants> {
+export interface VariantsConfig<V extends Variants = {}> {
     base?: string;
     variants: V;
     compoundVariants?: CompoundVariant<V>[];
@@ -32,7 +32,7 @@ export interface CompoundVariant<V extends Variants> {
 /**
  * Only the boolean variants, i.e. ones that have "true" or "false" as options.
  */
-declare type BooleanVariants<V extends Variants> = {
+type BooleanVariants<V extends Variants> = {
     [K in keyof V as V[K] extends {
         true: any;
     } | {
@@ -42,13 +42,13 @@ declare type BooleanVariants<V extends Variants> = {
 /**
  * Only the variants for which a default options is set.
  */
-declare type DefaultVariants<C extends VariantsConfig<V>, V extends Variants = C["variants"]> = {
+type DefaultVariants<C extends VariantsConfig<V>, V extends Variants = C["variants"]> = {
     [K in keyof V as K extends keyof C["defaultVariants"] ? K : never]: C["variants"][K];
 };
 /**
  * Names of all optional variants, i.e. booleans or ones with default options.
  */
-declare type OptionalVariantNames<C extends VariantsConfig<V>, V extends Variants = C["variants"]> = keyof BooleanVariants<V> | keyof DefaultVariants<C>;
+type OptionalVariantNames<C extends VariantsConfig<V>, V extends Variants = C["variants"]> = keyof BooleanVariants<V> | keyof DefaultVariants<C>;
 /**
  * Possible options for all the optional variants.
  *
@@ -58,7 +58,7 @@ declare type OptionalVariantNames<C extends VariantsConfig<V>, V extends Variant
  *   rounded?: boolean | undefined
  * }
  */
-declare type OptionalOptions<C extends VariantsConfig<V>, V extends Variants = C["variants"]> = {
+type OptionalOptions<C extends VariantsConfig<V>, V extends Variants = C["variants"]> = {
     [K in keyof V as K extends OptionalVariantNames<C> ? K : never]?: OptionsOf<V>[K];
 };
 /**
@@ -68,7 +68,7 @@ declare type OptionalOptions<C extends VariantsConfig<V>, V extends Variants = C
  *   size: "small" | "large"
  * }
  */
-declare type RequiredOptions<C extends VariantsConfig<V>, V extends Variants = C["variants"]> = {
+type RequiredOptions<C extends VariantsConfig<V>, V extends Variants = C["variants"]> = {
     [K in keyof V as K extends OptionalVariantNames<C> ? never : K]: OptionsOf<V>[K];
 };
 /**
@@ -86,20 +86,26 @@ declare type RequiredOptions<C extends VariantsConfig<V>, V extends Variants = C
  *   rounded: boolean;
  * }
  */
-declare type OptionsOf<V extends Variants> = {
+type OptionsOf<V extends Variants> = {
     [K in keyof V]: keyof V[K] extends "true" | "false" ? boolean : keyof V[K];
 };
 /**
  * Extracts the possible options.
  */
-export declare type VariantOptions<C extends VariantsConfig<V>, V extends Variants = C["variants"]> = RequiredOptions<C> & OptionalOptions<C>;
+export type VariantOptions<C extends VariantsConfig<V>, V extends Variants = C["variants"]> = RequiredOptions<C> & OptionalOptions<C>;
 /**
  * Without this conversion step, defaultVariants and compoundVariants will
  * allow extra keys, i.e. non-existent variants.
  * See https://github.com/sindresorhus/type-fest/blob/main/source/simplify.d.ts
  */
-export declare type Simplify<T> = {
+export type Simplify<T> = {
     [K in keyof T]: T[K];
 };
 export declare function variants<C extends VariantsConfig<V>, V extends Variants = C["variants"]>(config: Simplify<C>): (props: VariantOptions<C>) => string;
+/**
+ * No-op function to mark template literals as tailwind strings.
+ */
+export declare const tw: (template: {
+    raw: readonly string[] | ArrayLike<string>;
+}, ...substitutions: any[]) => string;
 export {};

package/lib/index.js CHANGED Viewed

@@ -25,3 +25,7 @@ export function variants(config) {
         return res.filter(Boolean).join(" ");
     };
 }
+/**
+ * No-op function to mark template literals as tailwind strings.
+ */
+export const tw = String.raw;

package/lib/react.d.ts CHANGED Viewed

@@ -3,21 +3,22 @@ import { Variants, VariantsConfig, VariantOptions, Simplify } from "./index.js";
 /**
  * Utility type to infer the first argument of a variantProps function.
  */
-export declare type VariantPropsOf<T> = T extends (props: infer P) => any ? P : never;
+export type VariantPropsOf<T> = T extends (props: infer P) => any ? P : never;
 /**
  * Type for the variantProps() argument – consists of the VariantOptions and an optional className for chaining.
  */
-declare type VariantProps<C extends VariantsConfig<V>, V extends Variants = C["variants"]> = VariantOptions<C> & {
+type VariantProps<C extends VariantsConfig<V>, V extends Variants = C["variants"]> = VariantOptions<C> & {
     className?: string;
 };
 export declare function variantProps<C extends VariantsConfig<V>, V extends Variants = C["variants"]>(config: Simplify<C>): <P extends VariantProps<C, C["variants"]>>(props: P) => {
     className: string;
 } & Omit<P, keyof C["variants"]>;
-declare type AsProps<T extends ElementType = ElementType> = {
+type VariantsOf<T, V> = T extends VariantsConfig ? V : {};
+type AsProps<T extends ElementType = ElementType> = {
     as?: T;
 };
-declare type PolymorphicComponentProps<T extends ElementType> = AsProps<T> & Omit<ComponentProps<T>, "as">;
-export declare function styled<T extends ElementType, C extends VariantsConfig<V>, V extends Variants = C["variants"]>(type: T, config: string | Simplify<C>): <As extends ElementType<any> = T>(props: AsProps<As> & Omit<ComponentProps<As>, "as"> & (C["variants"] extends infer T_1 extends Variants ? { [K in keyof T_1 as K extends keyof (C["variants"] extends infer T_2 extends Variants ? { [K_1 in keyof T_2 as C["variants"][K_1] extends {
+type PolymorphicComponentProps<T extends ElementType> = AsProps<T> & Omit<ComponentProps<T>, "as">;
+export declare function styled<T extends ElementType, C extends VariantsConfig<V>, V extends Variants = VariantsOf<C, C["variants"]>>(type: T, config: string | Simplify<C>): <As extends ElementType<any> = T>(props: AsProps<As> & Omit<ComponentProps<As>, "as"> & (C["variants"] extends infer T_1 extends Variants ? { [K in keyof T_1 as K extends keyof (C["variants"] extends infer T_2 extends Variants ? { [K_1 in keyof T_2 as C["variants"][K_1] extends {
     true: any;
 } | {
     false: any;
@@ -26,4 +27,10 @@ export declare function styled<T extends ElementType, C extends VariantsConfig<V
 } | {
     false: any;
 } ? K_1 : never]: C["variants"][K_1]; } : never) | keyof (C["variants"] extends infer T_3 extends Variants ? { [K_2 in keyof T_3 as K_2 extends keyof C["defaultVariants"] ? K_2 : never]: C["variants"][K_2]; } : never) ? K_4 : never]?: (C["variants"] extends infer T_4 extends Variants ? { [K_3 in keyof T_4]: keyof C["variants"][K_3] extends "true" | "false" ? boolean : keyof C["variants"][K_3]; } : never)[K_4] | undefined; } : never)) => ReactElement | null;
+/**
+ * No-op function to mark template literals as tailwind strings.
+ */
+export declare const tw: (template: {
+    raw: readonly string[] | ArrayLike<string>;
+}, ...substitutions: any[]) => string;
 export {};

package/lib/react.js CHANGED Viewed

@@ -11,7 +11,7 @@ export function variantProps(config) {
             }
         }
         // Add the optionally passed className prop for chaining
-        result.className = [props.className, variantClassName(props)]
+        result.className = [variantClassName(props), props.className]
             .filter(Boolean)
             .join(" ");
         return result;
@@ -26,3 +26,7 @@ export function styled(type, config) {
     });
     return Component;
 }
+/**
+ * No-op function to mark template literals as tailwind strings.
+ */
+export const tw = String.raw;

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "classname-variants",
-  "version": "1.3.1",
+  "version": "1.3.3",
   "description": "Variant API for plain class names",
   "author": "Felix Gnass <fgnass@gmail.com>",
   "license": "MIT",
@@ -41,9 +41,10 @@
     "react"
   ],
   "devDependencies": {
-    "@types/react": "^17.0.39",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
-    "typescript": "^4.6.4"
+    "@types/react": "^18.0.26",
+    "@types/react-dom": "^18.0.9",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "typescript": "^4.9.4"
   }
 }

package/example.tsx DELETED Viewed

@@ -1,68 +0,0 @@
-import React from "react";
-import ReactDOM from "react-dom";
-import { styled } from "./src/react";
-function CustomComponent({
-  title,
-  ...props
-}: {
-  className?: string;
-  title: string;
-}) {
-  return <div {...props}>{title}</div>;
-}
-const Card = styled("div", "bg-white p-4 border-2 rounded-lg");
-const TitleCard = styled(CustomComponent, "bg-white p-4 border-2 rounded-lg");
-const Button = styled("button", {
-  base: "px-5 py-2 text-white disabled:bg-gray-400 disabled:text-gray-300",
-  variants: {
-    color: {
-      neutral: "bg-slate-500 hover:bg-slate-400",
-      accent: "bg-teal-500 hover:bg-teal-400",
-    },
-    outlined: {
-      true: "border-2",
-    },
-    rounded: {
-      true: "rounded-full",
-      false: "rounded-sm",
-    },
-  },
-  compoundVariants: [
-    {
-      variants: { color: "accent", outlined: true },
-      className: "border-teal-600",
-    },
-  ],
-  defaultVariants: {
-    color: "neutral",
-  },
-});
-function App() {
-  return (
-    <div className="flex justify-center items-center pt-8 gap-4 flex-wrap">
-      <Button onClick={console.log}>Accent</Button>
-      <Button rounded>Neutral + Rounded</Button>
-      <Button color="accent" outlined>
-        Accent + Outlined
-      </Button>
-      <Button color="accent" disabled>
-        Disabled
-      </Button>
-      <TitleCard title="Hello" />
-      <Card>
-        <h1>Hello</h1>
-        <p>world</p>
-      </Card>
-      <Card as="a" href="https://example.com">
-        Link
-      </Card>
-    </div>
-  );
-}
-ReactDOM.render(<App />, document.getElementById("root"));

package/src/index.ts DELETED Viewed

@@ -1,166 +0,0 @@
-/**
- * Definition of the available variants and their options.
- * @example
- * {
- *   color: {
- *     white: "bg-white"
- *     green: "bg-green-500",
- *   },
- *   size: {
- *     small: "text-xs",
- *     large: "text-lg"
- *   }
- * }
- */
-export type Variants = Record<string, Record<string, string>>;
-/**
- * Configuration including defaults and compound variants.
- */
-export interface VariantsConfig<V extends Variants> {
-  base?: string;
-  variants: V;
-  compoundVariants?: CompoundVariant<V>[];
-  defaultVariants?: Partial<OptionsOf<V>>;
-}
-/**
- * Rules for class names that are applied for certain variant combinations.
- */
-export interface CompoundVariant<V extends Variants> {
-  variants: Partial<OptionsOf<V>>;
-  className: string;
-}
-/**
- * Only the boolean variants, i.e. ones that have "true" or "false" as options.
- */
-type BooleanVariants<V extends Variants> = {
-  [K in keyof V as V[K] extends { true: any } | { false: any }
-    ? K
-    : never]: V[K];
-};
-/**
- * Only the variants for which a default options is set.
- */
-type DefaultVariants<
-  C extends VariantsConfig<V>,
-  V extends Variants = C["variants"]
-> = {
-  [K in keyof V as K extends keyof C["defaultVariants"]
-    ? K
-    : never]: C["variants"][K];
-};
-/**
- * Names of all optional variants, i.e. booleans or ones with default options.
- */
-type OptionalVariantNames<
-  C extends VariantsConfig<V>,
-  V extends Variants = C["variants"]
-> = keyof BooleanVariants<V> | keyof DefaultVariants<C>;
-/**
- * Possible options for all the optional variants.
- *
- * @example
- * {
- *   color?: "white" | "green",
- *   rounded?: boolean | undefined
- * }
- */
-type OptionalOptions<
-  C extends VariantsConfig<V>,
-  V extends Variants = C["variants"]
-> = {
-  [K in keyof V as K extends OptionalVariantNames<C>
-    ? K
-    : never]?: OptionsOf<V>[K];
-};
-/**
- * Possible options for all required variants.
- *
- * @example {
- *   size: "small" | "large"
- * }
- */
-type RequiredOptions<
-  C extends VariantsConfig<V>,
-  V extends Variants = C["variants"]
-> = {
-  [K in keyof V as K extends OptionalVariantNames<C>
-    ? never
-    : K]: OptionsOf<V>[K];
-};
-/**
- * Utility type to extract the possible options.
- * Converts "true" | "false" options into booleans.
- *
- * @example
- * OptionsOf<{
- *   size: { small: "text-xs"; large: "text-lg" };
- *   rounded: { true: "rounded-full" }
- * }>
- * ==>
- * {
- *   size: "text-xs" | "text-lg";
- *   rounded: boolean;
- * }
- */
-type OptionsOf<V extends Variants> = {
-  [K in keyof V]: keyof V[K] extends "true" | "false" ? boolean : keyof V[K];
-};
-/**
- * Extracts the possible options.
- */
-export type VariantOptions<
-  C extends VariantsConfig<V>,
-  V extends Variants = C["variants"]
-> = RequiredOptions<C> & OptionalOptions<C>;
-/**
- * Without this conversion step, defaultVariants and compoundVariants will
- * allow extra keys, i.e. non-existent variants.
- * See https://github.com/sindresorhus/type-fest/blob/main/source/simplify.d.ts
- */
-export type Simplify<T> = {
-  [K in keyof T]: T[K];
-};
-export function variants<
-  C extends VariantsConfig<V>,
-  V extends Variants = C["variants"]
->(config: Simplify<C>) {
-  const { base, variants, compoundVariants, defaultVariants } = config;
-  const isBooleanVariant = (name: keyof V) => {
-    const v = variants?.[name];
-    return v && ("false" in v || "true" in v);
-  };
-  return (props: VariantOptions<C>) => {
-    const res = [base];
-    const getSelected = (name: keyof V) =>
-      (props as any)[name] ??
-      defaultVariants?.[name] ??
-      (isBooleanVariant(name) ? false : undefined);
-    for (let name in variants) {
-      const selected = getSelected(name);
-      if (selected !== undefined) res.push(variants[name]?.[selected]);
-    }
-    for (let { variants, className } of compoundVariants ?? []) {
-      const isSelected = (name: string) => getSelected(name) === variants[name];
-      if (Object.keys(variants).every(isSelected)) {
-        res.push(className);
-      }
-    }
-    return res.filter(Boolean).join(" ");
-  };
-}

package/src/react.ts DELETED Viewed

@@ -1,80 +0,0 @@
-import {
-  ComponentProps,
-  createElement,
-  ElementType,
-  forwardRef,
-  ReactElement,
-  Ref,
-} from "react";
-import {
-  Variants,
-  variants,
-  VariantsConfig,
-  VariantOptions,
-  Simplify,
-} from "./index.js";
-/**
- * Utility type to infer the first argument of a variantProps function.
- */
-export type VariantPropsOf<T> = T extends (props: infer P) => any ? P : never;
-/**
- * Type for the variantProps() argument – consists of the VariantOptions and an optional className for chaining.
- */
-type VariantProps<
-  C extends VariantsConfig<V>,
-  V extends Variants = C["variants"]
-> = VariantOptions<C> & { className?: string };
-export function variantProps<
-  C extends VariantsConfig<V>,
-  V extends Variants = C["variants"]
->(config: Simplify<C>) {
-  const variantClassName = variants<C>(config);
-  return <P extends VariantProps<C>>(props: P) => {
-    const result: any = {};
-    // Pass-through all unrelated props
-    for (let prop in props) {
-      if (config.variants && !(prop in config.variants)) {
-        result[prop] = props[prop];
-      }
-    }
-    // Add the optionally passed className prop for chaining
-    result.className = [props.className, variantClassName(props)]
-      .filter(Boolean)
-      .join(" ");
-    return result as { className: string } & Omit<P, keyof C["variants"]>;
-  };
-}
-type AsProps<T extends ElementType = ElementType> = {
-  as?: T;
-};
-type PolymorphicComponentProps<T extends ElementType> = AsProps<T> &
-  Omit<ComponentProps<T>, "as">;
-export function styled<
-  T extends ElementType,
-  C extends VariantsConfig<V>,
-  V extends Variants = C["variants"]
->(type: T, config: string | Simplify<C>) {
-  const styledProps =
-    typeof config === "string"
-      ? variantProps({ base: config, variants: {} })
-      : variantProps(config);
-  const Component: <As extends ElementType = T>(
-    props: PolymorphicComponentProps<As> & VariantOptions<C>
-  ) => ReactElement | null = forwardRef(
-    ({ as, ...props }: AsProps, ref: Ref<Element>) => {
-      return createElement(as ?? type, { ...styledProps(props), ref });
-    }
-  );
-  return Component;
-}