Type Tweaks (#19)

* Type Tweaks

* typo

* another typo

Author: John Richard Chipps-Harding

README.md

@@ -223,7 +223,7 @@ By default variant values do not end up propagating to the final DOM element. Th
 In the following example, `readOnly` is an intrinsic HTML attribute that we both want to style, but also continue to pass through to the DOM element.
 
 ```tsx
-import { CSSComponentPropType } from "@phntms/css-components";
+import { styled } from "@phntms/css-components";
 import css from "./styles.module.css";
 
 const Input = styled("input", {
@@ -242,7 +242,7 @@ const Input = styled("input", {
 We have included a helper that allows you to access the types of the variants you have defined.
 
 ```tsx
-import { CSSComponentPropType } from "@phntms/css-components";
+import { VariantProps } from "@phntms/css-components";
 import css from "./styles.module.css";
 
 const Button = styled("button", {
@@ -252,7 +252,8 @@ const Button = styled("button", {
   },
 });
 
-type ButtonTypes = CSSComponentPropType<typeof Button, "primary">;
+type ButtonVariants = VariantProps<typeof Button>;
+type PrimaryType = ButtonVariants["primary"];
 ```
 
 ## CLI Tool (Experimental)

package-lock.json

@@ -1,7 +1,7 @@
 {
   "name": "@phntms/css-components",
   "description": "At its core, css-components is a simple wrapper around standard CSS. It allows you to write your CSS how you wish then compose them into a component ready to be used in React.",
-  "version": "0.1.3",
+  "version": "0.2.0",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
   "homepage": "https://github.com/phantomstudios/css-components#readme",

package.json

@@ -2,13 +2,13 @@ import { createElement, forwardRef } from "react";
 
 import {
   CSSComponentConfig,
-  cssType,
+  CSS,
   PolymorphicComponent,
   variantsType,
 } from "./type";
 import { findMatchingCompoundVariants, flattenCss } from "./utils";
 
-export { CSSComponentConfig, CSSComponentPropType } from "./type";
+export { CSSComponentConfig, CSS, VariantProps } from "./type";
 
 export const styled = <
   V extends variantsType | object,
@@ -43,7 +43,7 @@ export const styled = <
           if (variant && variant.hasOwnProperty(mergedProps[key])) {
             const selector = variant[
               mergedProps[key] as keyof typeof variant
-            ] as cssType;
+            ] as CSS;
             componentStyles.push(flattenCss(selector));
           }
         }

src/index.ts

@@ -61,7 +61,7 @@ export type PolymorphicComponent<
  * The CSS Component Config type.
  */
 export interface CSSComponentConfig<V> {
-  css?: cssType;
+  css?: CSS;
   variants?: V;
   compoundVariants?: CompoundVariantType<V>[];
   defaultVariants?: {
@@ -73,24 +73,23 @@ export interface CSSComponentConfig<V> {
 /**
  * Allows you to extract a type for variant values.
  */
-export type CSSComponentPropType<
+export type VariantProps<
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  C extends keyof JSX.IntrinsicElements | JSXElementConstructor<any>,
-  P extends keyof React.ComponentProps<C>
-> = React.ComponentProps<C>[P];
+  C extends keyof JSX.IntrinsicElements | JSXElementConstructor<any>
+> = React.ComponentProps<C>;
 
 /**
  * CSS can be passed in as either a string or an array of strings.
  */
-export type cssType = string | string[];
+export type CSS = string | string[];
 
 export type variantValue = string | number | boolean | string[];
 
 /**
  * An object of variants, and how they map to CSS styles
  */
 export type variantsType = Partial<{
-  [key: string]: { [key: string | number]: cssType };
+  [key: string]: { [key: string | number]: CSS };
 }>;
 
 /**
@@ -111,5 +110,5 @@ export type VariantOptions<V> = {
  * Returns a type object for compound variants.
  */
 export type CompoundVariantType<V> = VariantOptions<V> & {
-  css: cssType;
+  css: CSS;
 };

src/type.ts

@@ -1,4 +1,4 @@
-import { cssType, variantValue } from "./type";
+import { CSS, variantValue } from "./type";
 
 export const findMatchingCompoundVariants = (
   compoundVariants: {
@@ -14,5 +14,5 @@ export const findMatchingCompoundVariants = (
     )
   );
 
-export const flattenCss = (css: cssType) =>
+export const flattenCss = (css: CSS) =>
   Array.isArray(css) ? css.join(" ") : css;

src/utils.ts

@@ -7,7 +7,7 @@ import React from "react";
 import { render } from "@testing-library/react";
 import { expectTypeOf } from "expect-type";
 
-import { CSSComponentPropType, styled } from "../src";
+import { VariantProps, styled } from "../src";
 
 describe("Basic functionality", () => {
   it("should return the correct type of DOM node", async () => {
@@ -278,7 +278,7 @@ describe("supports more exotic setups", () => {
       variants: { primary: { true: "primary" } },
     });
 
-    type primaryType = CSSComponentPropType<typeof Button, "primary">;
+    type primaryType = VariantProps<typeof Button>["primary"];
 
     expectTypeOf<primaryType>().toMatchTypeOf<boolean | undefined>();
   });