classname-variants 1.1.1 → 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)
 
@@ -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

@@ -12,10 +12,7 @@ function CustomComponent({
   return <div {...props}>{title}</div>;
 }
 
-const Card = styled(CustomComponent, {
-  base: "bg-white p-4 border-2 rounded-lg",
-  variants: {},
-});
+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",

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.
  */
@@ -14,5 +14,5 @@ export declare function variantProps<C extends VariantsConfig<V>, V extends Vari
     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>>;
-export declare function styled<T extends ElementType, C extends VariantsConfig<V>, V extends Variants = C["variants"]>(type: T, config: Simplify<C>): StyledComponent<T, C>;
+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,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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "classname-variants",
-  "version": "1.1.1",
+  "version": "1.2.0",
   "description": "Variant API for plain class names",
   "author": "Felix Gnass <fgnass@gmail.com>",
   "license": "MIT",

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.
@@ -65,8 +65,11 @@ export function styled<
   T extends ElementType,
   C extends VariantsConfig<V>,
   V extends Variants = C["variants"]
->(type: T, config: Simplify<C>): StyledComponent<T, C> {
-  const styledProps = variantProps(config);
+>(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 })
   );