Change domPassthrough behaviour (now just passthrough) (#25)

* Change domPassthrough behaviour

* Version bump

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"],
 });
 ```
 

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",

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];
       });

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)[];
 }
 
 /**

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 />);