From 5be9414281b67efce37889df79a8d8bfdb3cf00e Mon Sep 17 00:00:00 2001
From: John Richard Chipps-Harding <john.chipps-harding@phntms.com>
Date: Tue, 14 Feb 2023 16:42:38 +0000
Subject: [PATCH] Change `domPassthrough` behaviour (now just `passthrough`)
 (#25)

* Change domPassthrough behaviour

* Version bump
---
 README.md           |  6 +++---
 package-lock.json   |  4 ++--
 package.json        |  2 +-
 src/index.ts        |  8 +-------
 src/type.ts         |  2 +-
 test/index.test.tsx | 14 ++++++++++++--
 6 files changed, 20 insertions(+), 16 deletions(-)

diff --git a/README.md b/README.md
index c7e688a..dba193d 100755
--- a/README.md
+++ b/README.md
@@ -216,9 +216,9 @@ const Link = styled(NextLink, {
 });
 ```
 
-### DOM Shielding
+### Passthrough
 
-By default variant values do not end up propagating to the final DOM element. This is to stop React specific runtime errors from occurring. If you do indeed want to pass a variant value to the DOM element, you can use the `domPassthrough` option.
+By default variant values do not end up propagating to the element it is extending and is exclusively used for styling the current component. This is to stop React specific runtime errors from occurring with regards to the DOM. If you do indeed want to pass a variant value to the element you are extending, you can use the `passthrough` option.
 
 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.
 
@@ -233,7 +233,7 @@ const Input = styled("input", {
       true: css.disabledStyle,
     },
   },
-  domPassthrough: ["readOnly"],
+  passthrough: ["readOnly"],
 });
 ```
 
diff --git a/package-lock.json b/package-lock.json
index d8bc42d..6b5c465 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "@phntms/css-components",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "@phntms/css-components",
-      "version": "0.2.0",
+      "version": "0.3.0",
       "license": "MIT",
       "dependencies": {
         "glob": "^8.0.3",
diff --git a/package.json b/package.json
index 29f6c5e..9652d73 100755
--- a/package.json
+++ b/package.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.2.0",
+  "version": "0.3.0",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
   "homepage": "https://github.com/phantomstudios/css-components#readme",
diff --git a/src/index.ts b/src/index.ts
index fbbf3bd..9456517 100755
--- a/src/index.ts
+++ b/src/index.ts
@@ -48,17 +48,11 @@ export const styled = <
           }
         }
 
-        const isDomNode = typeof element === "string";
         const isVariant =
           config?.variants && config.variants.hasOwnProperty(key);
 
         // Only pass through the prop if it's not a variant or been told to pass through
-        if (
-          isDomNode &&
-          isVariant &&
-          !config?.domPassthrough?.includes(key as keyof V)
-        )
-          return;
+        if (isVariant && !config?.passthrough?.includes(key as keyof V)) return;
 
         componentProps[key] = mergedProps[key];
       });
diff --git a/src/type.ts b/src/type.ts
index 411734f..844849a 100644
--- a/src/type.ts
+++ b/src/type.ts
@@ -67,7 +67,7 @@ export interface CSSComponentConfig<V> {
   defaultVariants?: {
     [Property in keyof V]?: BooleanIfStringBoolean<keyof V[Property]>;
   };
-  domPassthrough?: (keyof V)[];
+  passthrough?: (keyof V)[];
 }
 
 /**
diff --git a/test/index.test.tsx b/test/index.test.tsx
index 989be3d..82cbf7b 100644
--- a/test/index.test.tsx
+++ b/test/index.test.tsx
@@ -37,6 +37,15 @@ describe("Basic functionality", () => {
     expect(container.firstChild).toHaveClass("summary");
   });
 
+  it("should pass through classNames for composed css-components", async () => {
+    const BaseParagraph = styled("p", { css: "baseParagraph" });
+    const Paragraph = styled(BaseParagraph, { css: "paragraph" });
+    const { container } = render(<Paragraph>Hello</Paragraph>);
+
+    expect(container.firstChild).toHaveClass("baseParagraph");
+    expect(container.firstChild).toHaveClass("paragraph");
+  });
+
   it("should pass through multiple children", async () => {
     const Article = styled("article");
     const { container } = render(
@@ -328,6 +337,7 @@ describe("supports inheritance", () => {
       variants: {
         big: { true: "checkoutButtonBig" },
       },
+      passthrough: ["big"],
     });
 
     const { container } = render(<CheckoutButton big />);
@@ -416,7 +426,7 @@ describe("supports inheritance", () => {
       variants: {
         type: { text: "textInput" },
       },
-      domPassthrough: ["type"],
+      passthrough: ["type"],
     });
 
     const { container } = render(<Input type="text" />);
@@ -432,7 +442,7 @@ describe("supports inheritance", () => {
       variants: {
         readOnly: { true: "readOnly" },
       },
-      domPassthrough: ["readOnly"],
+      passthrough: ["readOnly"],
     });
 
     const { container } = render(<Input type="text" readOnly />);