set type VariantsConfig for config argument in styled function + fix typings

Author: Jackardios

.changeset/rich-eyes-kiss.md

@@ -0,0 +1,5 @@
+---
+'react-tailwind-variants': major
+---
+
+BREAKING CHANGE: set type `VariantsConfig` for `config` argument in `styled` function + fix typings

README.md

@@ -28,7 +28,6 @@ npm install tailwind-merge react-tailwind-variants
 - [Boolean variants](#boolean-variants)
 - [Compound variants](#compound-variants)
 - [Default variants](#default-variants)
-- [Components without variants](#components-without-variants)
 - [Polymorphic components](#polymorphic-components)
 - [Composing components](#composing-components)
 - [Utilities](#utilities)
@@ -216,18 +215,6 @@ const Button = styled('button', {
 
 ---
 
-### Components without variants
-
-If the component does not have any options, you can specify a string with classes instead of a configuration object
-
-```tsx
-import { styled } from 'react-tailwind-variants';
-
-const Button = styled('button', 'bg-blue-500 text-white px-4 py-2');
-```
-
----
-
 ### Polymorphic components
 
 If you want to keep all the variants you have defined for a component but want to render a different HTML tag or a different custom component, you can use the `"asChild"` prop to do so:

src/react.ts

@@ -14,36 +14,43 @@ import {
   type VariantsSchema,
   type VariantOptions,
   variants,
-  Simplify,
 } from './variants';
 
 const StyledComponentConfigKey = '$$tailwindVariantsConfig';
 
-type StyledComponentConfigProp<Config extends VariantsConfig> = {
-  readonly [StyledComponentConfigKey]: Config;
+type StyledComponentConfigProp<
+  C extends VariantsConfig<V>,
+  V extends VariantsSchema = NonNullable<C['variants']>
+> = {
+  readonly [StyledComponentConfigKey]: C;
 };
 
 export type StyledComponent<
   ForwardRefComponent extends ForwardRefExoticComponent<any>,
-  Config extends VariantsConfig
-> = ForwardRefComponent & StyledComponentConfigProp<Config>;
+  C extends VariantsConfig<V>,
+  V extends VariantsSchema = NonNullable<C['variants']>
+> = ForwardRefComponent & StyledComponentConfigProp<C>;
 
 export function variantProps<
   C extends VariantsConfig<V>,
-  V extends VariantsSchema = C['variants']
+  V extends VariantsSchema = NonNullable<C['variants']>
 >(config: C) {
   const variantsHandler = variants(config);
 
   return function <
-    P extends VariantOptions<C> & {
+    P extends VariantOptions<typeof config> & {
       className?: string;
     }
   >(props: P) {
     const result: any = {};
 
     // Pass-through all unrelated props
     for (let prop in props) {
-      if (!config.variants || !(prop in config.variants)) {
+      if (
+        !('variants' in config) ||
+        !config.variants ||
+        !(prop in config.variants)
+      ) {
         result[prop] = props[prop];
       }
     }
@@ -67,14 +74,9 @@ type SlottableProps<
 export function styled<
   T extends ElementType,
   C extends VariantsConfig<V>,
-  V extends VariantsSchema = C extends VariantsConfig ? C['variants'] : {}
->(baseType: T, config: string | Simplify<C>) {
-  const preparedConfig =
-    typeof config === 'string'
-      ? ({ base: config, variants: {} } as Simplify<C>)
-      : config;
-
-  const propsHandler = variantProps(preparedConfig);
+  V extends VariantsSchema = NonNullable<C['variants']>
+>(baseType: T, config: C) {
+  const propsHandler = variantProps(config);
 
   type ConfigVariants = VariantOptions<C>;
   type Props = SlottableProps<
@@ -100,23 +102,25 @@ export function styled<
   });
 
   return Object.assign(component, {
-    [StyledComponentConfigKey]: preparedConfig,
-  }) as StyledComponent<typeof component, typeof preparedConfig>;
+    [StyledComponentConfigKey]: config,
+  }) as StyledComponent<typeof component, typeof config>;
 }
 
 export type VariantsConfigOf<
-  Component extends StyledComponent<ForwardRefExoticComponent<any>, Config>,
-  Config extends VariantsConfig = Component[typeof StyledComponentConfigKey]
-> = Config;
+  Component extends StyledComponent<ForwardRefExoticComponent<any>, C>,
+  C extends VariantsConfig<V> = Component[typeof StyledComponentConfigKey],
+  V extends VariantsSchema = NonNullable<C['variants']>
+> = C;
 
 export type VariantPropsOf<
-  Component extends StyledComponent<ForwardRefExoticComponent<any>, Config>,
-  Config extends VariantsConfig = Component[typeof StyledComponentConfigKey]
-> = VariantOptions<Config>;
+  Component extends StyledComponent<ForwardRefExoticComponent<any>, C>,
+  C extends VariantsConfig<V> = Component[typeof StyledComponentConfigKey],
+  V extends VariantsSchema = NonNullable<C['variants']>
+> = VariantOptions<C>;
 
 export function extractVariantsConfig<
-  Component extends ForwardRefExoticComponent<any>,
-  Config extends VariantsConfig
->(styledComponent: StyledComponent<Component, Config>) {
+  C extends VariantsConfig<V>,
+  V extends VariantsSchema = NonNullable<C['variants']>
+>(styledComponent: StyledComponent<ForwardRefExoticComponent<any>, C>) {
   return styledComponent[StyledComponentConfigKey];
 }

test/react.spec.tsx

@@ -31,10 +31,9 @@ const StyledComponent = styled('button', {
 
 // ============================================
 
-const StyledComponentWithStringConfig = styled(
-  'div',
-  'bg-white p-4 border-2 rounded-lg'
-);
+const StyledComponentWithoutVariants = styled('div', {
+  base: 'bg-white p-4 border-2 rounded-lg',
+});
 
 // ============================================
 
@@ -123,11 +122,35 @@ styled('div', {
   },
   compoundVariants: [
     {
-      //@ts-expect-error
-      variants: { color: 'foobar' },
+      variants: {
+        // @ts-expect-error
+        color: 'foobar',
+      },
       className: '',
     },
   ],
+});
+
+styled('div', {
+  variants: {
+    color: {
+      neutral: 'grey',
+      accent: 'hotpink',
+    },
+  },
+  defaultVariants: {
+    // @ts-expect-error
+    color: 'foobar',
+  },
+});
+
+styled('div', {
+  variants: {
+    color: {
+      neutral: 'grey',
+      accent: 'hotpink',
+    },
+  },
   defaultVariants: {
     // @ts-expect-error
     outlined: true,
@@ -235,10 +258,9 @@ describe('extractVariantsConfig', () => {
     });
   });
 
-  it('extracts variants config from styled component with string configuration', () => {
-    expect(extractVariantsConfig(StyledComponentWithStringConfig)).toEqual({
+  it('extracts variants config from styled component without variants', () => {
+    expect(extractVariantsConfig(StyledComponentWithoutVariants)).toEqual({
       base: 'bg-white p-4 border-2 rounded-lg',
-      variants: {},
     });
   });
 });
@@ -323,12 +345,10 @@ describe('styled', () => {
     });
   });
 
-  describe('styled component with string configuration', () => {
+  describe('styled component without variants', () => {
     test('render without props', () => {
       render(
-        <StyledComponentWithStringConfig>
-          Button
-        </StyledComponentWithStringConfig>
+        <StyledComponentWithoutVariants>Button</StyledComponentWithoutVariants>
       );
 
       expect(screen.getByText('Button')).toMatchInlineSnapshot(`
@@ -342,21 +362,19 @@ describe('styled', () => {
 
     test('render with unrelated props', () => {
       render(
-        <StyledComponentWithStringConfig
-          color="neutral"
+        <StyledComponentWithoutVariants
           data-foo="bar"
           className="py-6 bg-gray-700"
         >
           Button
-        </StyledComponentWithStringConfig>
+        </StyledComponentWithoutVariants>
       );
 
       const button = screen.getByText('Button');
 
       expect(button).toMatchInlineSnapshot(`
         <div
           class="p-4 border-2 rounded-lg py-6 bg-gray-700"
-          color="neutral"
           data-foo="bar"
         >
           Button
@@ -366,24 +384,22 @@ describe('styled', () => {
 
     test('render as child with unrelated props', () => {
       render(
-        <StyledComponentWithStringConfig
+        <StyledComponentWithoutVariants
           asChild
-          color="neutral"
           data-foo="bar"
           className="py-6 bg-gray-700"
         >
           <a href="/some/link" className="py-1 text-gray-200">
             Link
           </a>
-        </StyledComponentWithStringConfig>
+        </StyledComponentWithoutVariants>
       );
 
       const link = screen.getByText('Link');
 
       expect(link).toMatchInlineSnapshot(`
         <a
           class="p-4 border-2 rounded-lg py-6 bg-gray-700 py-1 text-gray-200"
-          color="neutral"
           data-foo="bar"
           href="/some/link"
         >