classname-variants 1.1.0 → 1.2.1

package/README.md

@@ -4,7 +4,7 @@ Stitches-like [variant API](https://stitches.dev/docs/variants) for plain class
 
 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/) and 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-)!
+It is especially useful though if used with [Tailwind](https://tailwindcss.com/) or [CSS Modules](https://github.com/css-modules/css-modules) in cobmination 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-)!
 
 [![Edit classname-variants/react](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/classname-variants-react-3bzjl?fontsize=14&hidenavigation=1&theme=dark)
 
@@ -171,6 +171,22 @@ const Button = styled("button", {
 });
 ```
 
+The same can be done with CSS modules:
+
+```tsx
+import { styled } from "classname-variants/react";
+import styles from "./styles.module.css";
+
+const Button = styled("button", {
+  variants: {
+    size: {
+      small: styles.small,
+      large: styles.large,
+    },
+  },
+});
+```
+
 You can also style other custom React components as long as the accept a `className` prop.
 
 # Tailwind IntelliSense

package/example.tsx

@@ -1,15 +1,20 @@
-import React, { createElement } from "react";
+import React from "react";
 import ReactDOM from "react-dom";
 import { styled } from "./src/react";
 
-function CustomComponent(props: { className?: string }) {
-  return <div {...props}>I'm a custom component!</div>;
+function CustomComponent({
+  title,
+  ...props
+}: {
+  className?: string;
+  title: string;
+}) {
+  return <div {...props}>{title}</div>;
 }
 
-const Card = styled(CustomComponent, {
-  base: "bg-white p-4 border-2 rounded-lg",
-  variants: {},
-});
+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",
@@ -48,7 +53,11 @@ function App() {
       <Button color="accent" disabled>
         Disabled
       </Button>
-      <Card />
+      <TitleCard title="Hello" />
+      <Card>
+        <h1>Hello</h1>
+        <p>world</p>
+      </Card>
     </div>
   );
 }

package/lib/example.d.ts

@@ -0,0 +1 @@
+export {};

package/lib/example.js

@@ -0,0 +1,45 @@
+import React from "react";
+import ReactDOM from "react-dom";
+import { styled } from "./src/react";
+function CustomComponent({ title, ...props }) {
+    return React.createElement("div", { ...props }, title);
+}
+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 (React.createElement("div", { className: "flex justify-center items-center pt-8 gap-4 flex-wrap" },
+        React.createElement(Button, { onClick: console.log }, "Accent"),
+        React.createElement(Button, { rounded: true }, "Neutral + Rounded"),
+        React.createElement(Button, { color: "accent", outlined: true }, "Accent + Outlined"),
+        React.createElement(Button, { color: "accent", disabled: true }, "Disabled"),
+        React.createElement(TitleCard, { title: "Hello" }),
+        React.createElement(Card, null,
+            React.createElement("h1", null, "Hello"),
+            React.createElement("p", null, "world"))));
+}
+ReactDOM.render(React.createElement(App, null), document.getElementById("root"));

package/lib/react.d.ts

@@ -1,5 +1,5 @@
 import { ComponentProps, ElementType, ForwardRefExoticComponent, PropsWithoutRef } from "react";
-import { Variants, VariantsConfig, VariantOptions, Simplify } from ".";
+import { Variants, VariantsConfig, VariantOptions, Simplify } from "./index.js";
 /**
  * Utility type to infer the first argument of a variantProps function.
  */
@@ -13,10 +13,7 @@ declare type VariantProps<C extends VariantsConfig<V>, V extends Variants = C["v
 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 StyledComponent<T extends ElementType<{
-    className: string;
-}>, C extends VariantsConfig<V>, V extends Variants = C["variants"]> = ForwardRefExoticComponent<PropsWithoutRef<ComponentProps<T> & VariantOptions<C>> & React.RefAttributes<T>>;
-export declare function styled<T extends ElementType<{
-    className: string;
-}>, C extends VariantsConfig<V>, V extends Variants = C["variants"]>(type: T, config: Simplify<C>): StyledComponent<T, C>;
+declare type StyledComponent<T extends ElementType, C extends VariantsConfig<V>, V extends Variants = C["variants"]> = ForwardRefExoticComponent<PropsWithoutRef<ComponentProps<T> & VariantOptions<C>> & React.RefAttributes<T>>;
+declare type VariantsOf<T> = T extends VariantsConfig<infer V> ? V : {};
+export declare function styled<T extends ElementType, C extends VariantsConfig<V>, V extends Variants = VariantsOf<C>>(type: T, config: string | Simplify<C>): StyledComponent<T, C>;
 export {};

package/lib/react.js

@@ -1,5 +1,5 @@
 import { createElement, forwardRef, } from "react";
-import { variants, } from ".";
+import { variants, } from "./index.js";
 export function variantProps(config) {
     const variantClassName = variants(config);
     return (props) => {
@@ -18,6 +18,8 @@ export function variantProps(config) {
     };
 }
 export function styled(type, config) {
-    const styledProps = variantProps(config);
+    const styledProps = typeof config === "string"
+        ? variantProps({ base: config, variants: {} })
+        : variantProps(config);
     return forwardRef((props, ref) => createElement(type, { ...styledProps(props), ref }));
 }

package/lib/src/index.d.ts

@@ -0,0 +1,105 @@
+/**
+ * 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 declare 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.
+ */
+declare 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.
+ */
+declare 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>;
+/**
+ * Possible options for all the optional variants.
+ *
+ * @example
+ * {
+ *   color?: "white" | "green",
+ *   rounded?: boolean | undefined
+ * }
+ */
+declare 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"
+ * }
+ */
+declare 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;
+ * }
+ */
+declare 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>;
+/**
+ * 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> = {
+    [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;
+export {};

package/lib/src/index.js

@@ -0,0 +1,27 @@
+export function variants(config) {
+    const { base, variants, compoundVariants, defaultVariants } = config;
+    const isBooleanVariant = (name) => {
+        const v = variants === null || variants === void 0 ? void 0 : variants[name];
+        return v && ("false" in v || "true" in v);
+    };
+    return (props) => {
+        var _a;
+        const res = [base];
+        const getSelected = (name) => {
+            var _a, _b;
+            return (_b = (_a = props[name]) !== null && _a !== void 0 ? _a : defaultVariants === null || defaultVariants === void 0 ? void 0 : defaultVariants[name]) !== null && _b !== void 0 ? _b : (isBooleanVariant(name) ? false : undefined);
+        };
+        for (let name in variants) {
+            const selected = getSelected(name);
+            if (selected !== undefined)
+                res.push((_a = variants[name]) === null || _a === void 0 ? void 0 : _a[selected]);
+        }
+        for (let { variants, className } of compoundVariants !== null && compoundVariants !== void 0 ? compoundVariants : []) {
+            const isSelected = (name) => getSelected(name) === variants[name];
+            if (Object.keys(variants).every(isSelected)) {
+                res.push(className);
+            }
+        }
+        return res.filter(Boolean).join(" ");
+    };
+}

package/lib/src/react.d.ts

@@ -0,0 +1,19 @@
+import { ComponentProps, ElementType, ForwardRefExoticComponent, PropsWithoutRef } from "react";
+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;
+/**
+ * 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> & {
+    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 StyledComponent<T extends ElementType, C extends VariantsConfig<V>, V extends Variants = C["variants"]> = ForwardRefExoticComponent<PropsWithoutRef<ComponentProps<T> & VariantOptions<C>> & React.RefAttributes<T>>;
+declare type Vars<T> = T extends VariantsConfig<infer V> ? V : {};
+export declare function styled<T extends ElementType, C extends VariantsConfig<V>, V extends Variants = Vars<C>>(type: T, config: string | Simplify<C>): StyledComponent<T, C>;
+export {};

package/lib/src/react.js

@@ -0,0 +1,25 @@
+import { createElement, forwardRef, } from "react";
+import { variants, } from "./index.js";
+export function variantProps(config) {
+    const variantClassName = variants(config);
+    return (props) => {
+        const result = {};
+        // 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;
+    };
+}
+export function styled(type, config) {
+    const styledProps = typeof config === "string"
+        ? variantProps({ base: config, variants: {} })
+        : variantProps(config);
+    return forwardRef((props, ref) => createElement(type, { ...styledProps(props), ref }));
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "classname-variants",
-  "version": "1.1.0",
+  "version": "1.2.1",
   "description": "Variant API for plain class names",
   "author": "Felix Gnass <fgnass@gmail.com>",
   "license": "MIT",
@@ -44,6 +44,6 @@
     "@types/react": "^17.0.39",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
-    "typescript": "^4.5.5"
+    "typescript": "^4.6.4"
   }
 }

package/src/react.ts

@@ -13,7 +13,7 @@ import {
   VariantsConfig,
   VariantOptions,
   Simplify,
-} from ".";
+} from "./index.js";
 
 /**
  * Utility type to infer the first argument of a variantProps function.
@@ -53,7 +53,7 @@ export function variantProps<
 }
 
 type StyledComponent<
-  T extends ElementType<{ className: string }>,
+  T extends ElementType,
   C extends VariantsConfig<V>,
   V extends Variants = C["variants"]
 > = ForwardRefExoticComponent<
@@ -61,12 +61,17 @@ type StyledComponent<
     React.RefAttributes<T>
 >;
 
+type VariantsOf<T> = T extends VariantsConfig<infer V> ? V : {};
+
 export function styled<
-  T extends ElementType<{ className: string }>,
+  T extends ElementType,
   C extends VariantsConfig<V>,
-  V extends Variants = C["variants"]
->(type: T, config: Simplify<C>): StyledComponent<T, C> {
-  const styledProps = variantProps(config);
+  V extends Variants = VariantsOf<C>
+>(type: T, config: string | Simplify<C>): StyledComponent<T, C> {
+  const styledProps =
+    typeof config === "string"
+      ? variantProps({ base: config, variants: {} })
+      : variantProps(config);
   return forwardRef<T, ComponentProps<T> & VariantOptions<C>>((props, ref) =>
     createElement(type, { ...styledProps(props), ref })
   );