classname-variants 1.0.2 → 1.2.0

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)
 
@@ -138,7 +138,8 @@ const buttonProps = variantProps({
 This way a compontents' props (or part of them) can be directly spread into the target element. All variant-related props are used to construct the `className` property while all other props are passed through verbatim:
 
 ```tsx
-type Props = SX.IntrinsicElements["button"] & VariantProps<typeof buttonProps>;
+type Props = SX.IntrinsicElements["button"] &
+  VariantPropsOf<typeof buttonProps>;
 
 function Button(props: Props) {
   return <button {...buttonProps(props)} />;
@@ -170,6 +171,24 @@ 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
 
 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.

package/example.tsx

@@ -2,6 +2,18 @@ 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(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: {
@@ -39,6 +51,7 @@ function App() {
       <Button color="accent" disabled>
         Disabled
       </Button>
+      <Card title="Hello" />
     </div>
   );
 }

package/lib/react.d.ts

@@ -1,9 +1,18 @@
 import { ComponentProps, ElementType, ForwardRefExoticComponent, PropsWithoutRef } from "react";
-import { Variants, VariantsConfig, VariantOptions, Simplify } from ".";
-export declare type VariantProps<T> = T extends (props: infer VariantSelection) => any ? VariantSelection : never;
-export declare function variantProps<C extends VariantsConfig<V>, V extends Variants = C["variants"]>(config: Simplify<C>): <T extends VariantOptions<C, C["variants"]>>(props: T) => {
+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<T, keyof C["variants"]>;
-declare type StyledComponent<P extends ElementType, C extends VariantsConfig<V>, V extends Variants = C["variants"]> = ForwardRefExoticComponent<PropsWithoutRef<ComponentProps<P> & VariantOptions<C>> & React.RefAttributes<P>>;
-export declare function styled<P extends ElementType, C extends VariantsConfig<V>, V extends Variants = C["variants"]>(type: P, config: Simplify<C>): StyledComponent<P, C>;
+} & 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>>;
+export declare function styled<T extends ElementType, C extends VariantsConfig<V>, V extends Variants = C["variants"]>(type: T, config: string | Simplify<C>): StyledComponent<T, C>;
 export {};

package/lib/react.js

@@ -1,19 +1,25 @@
 import { createElement, forwardRef, } from "react";
-import { variants, } from ".";
+import { variants, } from "./index.js";
 export function variantProps(config) {
-    const mkClass = variants(config);
+    const variantClassName = variants(config);
     return (props) => {
-        const className = mkClass(props);
-        const result = { className };
+        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 = variantProps(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.0.2",
+  "version": "1.2.0",
   "description": "Variant API for plain class names",
   "author": "Felix Gnass <fgnass@gmail.com>",
   "license": "MIT",
@@ -30,7 +30,8 @@
   },
   "scripts": {
     "build": "tsc",
-    "start": "npx vite"
+    "start": "npx vite",
+    "prepublishOnly": "npm run build"
   },
   "keywords": [
     "tailwind",

package/src/react.ts

@@ -13,45 +13,64 @@ import {
   VariantsConfig,
   VariantOptions,
   Simplify,
-} from ".";
+} from "./index.js";
 
-export type VariantProps<T> = T extends (props: infer VariantSelection) => any
-  ? VariantSelection
-  : never;
+/**
+ * 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 mkClass = variants<C>(config);
-  return <T extends VariantOptions<C>>(props: T) => {
-    const className = mkClass(props);
-    const result: any = { className };
+  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];
       }
     }
-    return result as { className: string } & Omit<T, keyof C["variants"]>;
+
+    // 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 StyledComponent<
-  P extends ElementType,
+  T extends ElementType,
   C extends VariantsConfig<V>,
   V extends Variants = C["variants"]
 > = ForwardRefExoticComponent<
-  PropsWithoutRef<ComponentProps<P> & VariantOptions<C>> &
-    React.RefAttributes<P>
+  PropsWithoutRef<ComponentProps<T> & VariantOptions<C>> &
+    React.RefAttributes<T>
 >;
 
 export function styled<
-  P extends ElementType,
+  T extends ElementType,
   C extends VariantsConfig<V>,
   V extends Variants = C["variants"]
->(type: P, config: Simplify<C>): StyledComponent<P, C> {
-  const styledProps = variantProps(config);
-  return forwardRef<P, ComponentProps<P> & VariantOptions<C>>((props, ref) =>
+>(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 })
   );
 }