Ability to inspect type (#9)

* Ability to inspect type

* remove pants

* Better docs

* Update README.md

Co-authored-by: Guy Purssell <[email protected]>

* linting

Co-authored-by: Guy Purssell <[email protected]>

Author: John Richard Chipps-Harding

README.md

@@ -149,6 +149,8 @@ const StyledButton = styled(
 
 ## Other
 
+### Array of Classes
+
 Wherever you specify a css selector, you can also pass in an array of classes to help composing and reusing styles.
 
 ```tsx
@@ -163,6 +165,21 @@ const Link = styled("a", [shared.link, shared.fontNormal, css.root], {
 });
 ```
 
+### Type Helper
+
+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 css from "./styles.module.css";
+
+const Button = styled("button", css.baseButton, {
+  primary: { true: css.primary },
+});
+
+type ButtonTypes = CSSComponentPropType<typeof Button, "primary">;
+```
+
 [npm-image]: https://img.shields.io/npm/v/@phntms/css-components.svg?style=flat-square&logo=react
 [npm-url]: https://npmjs.org/package/@phntms/css-components
 [npm-downloads-image]: https://img.shields.io/npm/dm/@phntms/css-components.svg

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.0.4",
+  "version": "0.0.5",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
   "homepage": "https://github.com/phantomstudios/css-components#readme",
@@ -55,6 +55,7 @@
     "eslint-plugin-prettier": "^4.2.1",
     "eslint-plugin-react": "^7.31.10",
     "eslint-plugin-react-hooks": "^4.6.0",
+    "expect-type": "^0.15.0",
     "jest": "^29.3.1",
     "jest-environment-jsdom": "^29.3.1",
     "npm-run-all": "^4.1.5",

package.json

@@ -1,4 +1,10 @@
-import { createElement, forwardRef } from "react";
+import { createElement, forwardRef, JSXElementConstructor } from "react";
+
+export type CSSComponentPropType<
+  // 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];
 
 type variantValue = string | number | boolean | string[];
 

src/index.ts

@@ -5,8 +5,9 @@
 import React from "react";
 
 import { render } from "@testing-library/react";
+import { expectTypeOf } from "expect-type";
 
-import { styled } from "../src";
+import { CSSComponentPropType, styled } from "../src";
 
 describe("Basic functionality", () => {
   it("should return the correct type of DOM node", async () => {
@@ -187,4 +188,12 @@ describe("supports more exotic setups", () => {
     expect(container.firstChild?.nodeName).toEqual("BUTTON");
     expect(ref).toBeCalled();
   });
+
+  it("Should be able to inspect the variants", async () => {
+    const Button = styled("button", "test", { primary: { true: "primary" } });
+
+    type bla = CSSComponentPropType<typeof Button, "primary">;
+
+    expectTypeOf<bla>().toMatchTypeOf<boolean | undefined>();
+  });
 });