@yak/react 0.0.0-stage → 10.0.0-rc.1

package/runtime/__tests__/cssProp.test.tsx

@@ -0,0 +1,392 @@
+// @ts-nocheck
+import { it, expect, describe, beforeEach, afterEach } from "vitest";
+import { mergeCssProp } from "../internals/mergeCssProp";
+import { css } from "../cssLiteral";
+import { atoms } from "../atoms";
+
+it("forwards foreign props alongside the merged className", async () => {
+  const onClick = () => {};
+  const result = mergeCssProp(css("yakCss1"), {
+    onClick,
+    "aria-label": "Save",
+    disabled: true,
+    className: "btn",
+  });
+  // toEqual (not toMatchObject) also pins that no stray keys leak, e.g. an empty style
+  expect(result).toEqual({
+    onClick,
+    "aria-label": "Save",
+    disabled: true,
+    className: "btn yakCss1",
+  });
+});
+
+it("merge properties when className is set", async () => {
+  expect(
+    mergeCssProp(
+      css("yakCss1", () => ({
+        style: { "--yak-var1": "0.5rem" },
+      })),
+      { className: "btn btn-primary" },
+    ),
+  ).toMatchObject({
+    className: "btn btn-primary yakCss1",
+    style: { "--yak-var1": "0.5rem" },
+  });
+});
+
+it("merge properties when style is set", async () => {
+  expect(
+    mergeCssProp(
+      css(() => ({
+        className: "yakClass1",
+        style: { "--yak-var1": "#ffffff" },
+      })),
+      { style: { padding: "8px", margin: "4px" } },
+    ),
+  ).toMatchObject({
+    className: "yakClass1",
+    style: { padding: "8px", margin: "4px", "--yak-var1": "#ffffff" },
+  });
+});
+
+it("merge properties when spreaded property is set", async () => {
+  expect(
+    mergeCssProp(
+      css(() => ({
+        className: "yakClass1 yakClass2",
+        style: { "--yak-var1": "1200px" },
+      })),
+      { className: "container mx-auto" },
+    ),
+  ).toMatchObject({
+    className: "container mx-auto yakClass1 yakClass2",
+    style: { "--yak-var1": "1200px" },
+  });
+});
+
+it("merge properties when class name and style is set", async () => {
+  expect(
+    mergeCssProp(
+      css(() => ({
+        className: "yakClass1 yakClass2",
+        style: { "--yak-var1": "#1f2937" },
+      })),
+      { className: "text-lg font-semibold", style: { lineHeight: "1.6" } },
+    ),
+  ).toMatchObject({
+    className: "text-lg font-semibold yakClass1 yakClass2",
+    style: { lineHeight: "1.6", "--yak-var1": "#1f2937" },
+  });
+});
+
+it("merge properties when class name, style and spreaded property is set", async () => {
+  expect(
+    mergeCssProp(
+      css(() => ({
+        className: "yakClass1 yakClass2",
+        style: { "--yak-var1": "4rem" },
+      })),
+      { className: "flex items-center", style: { gap: "1rem" } },
+    ),
+  ).toMatchObject({
+    className: "flex items-center yakClass1 yakClass2",
+    style: { gap: "1rem", "--yak-var1": "4rem" },
+  });
+});
+
+it("merge properties with atoms using conditional classes", async () => {
+  expect(
+    mergeCssProp(atoms("p-4 rounded-md", false && "hidden", true && "bg-white shadow-sm"), {
+      className: "w-full",
+    }),
+  ).toMatchObject({
+    className: "w-full p-4 rounded-md bg-white shadow-sm",
+  });
+});
+
+it("merge properties with atoms using callback and conditional classes", async () => {
+  expect(
+    mergeCssProp(
+      atoms(
+        "border border-gray-200",
+        true && "hover:border-gray-300",
+        false && "opacity-50",
+        (_, classNames, style) => {
+          classNames.add("focus:ring-2 focus:ring-blue-500");
+          style["--ring-offset"] = "2px";
+        },
+      ),
+      { className: "relative" },
+    ),
+  ).toMatchObject({
+    className:
+      "relative border border-gray-200 hover:border-gray-300 focus:ring-2 focus:ring-blue-500",
+    style: { "--ring-offset": "2px" },
+  });
+});
+
+it("merge properties with atoms callback only", async () => {
+  expect(
+    mergeCssProp(
+      atoms((_, classNames, style) => {
+        classNames.add("grid-cols-3 gap-4");
+        classNames.add("md:grid-cols-6");
+        style["--grid-gap"] = "1rem";
+      }),
+      { className: "grid" },
+    ),
+  ).toMatchObject({
+    className: "grid grid-cols-3 gap-4 md:grid-cols-6",
+    style: { "--grid-gap": "1rem" },
+  });
+});
+
+it("merge properties with css wrapping atoms", async () => {
+  expect(
+    mergeCssProp(
+      css(
+        "yakClass1",
+        atoms("bg-white rounded-lg shadow-md", (_, classNames, style) => {
+          classNames.add("p-6 hover:shadow-lg");
+          style["--card-transition"] = "all 0.2s ease";
+        }),
+      ),
+      { className: "card" },
+    ),
+  ).toMatchObject({
+    className: "card yakClass1 bg-white rounded-lg shadow-md p-6 hover:shadow-lg",
+    style: { "--card-transition": "all 0.2s ease" },
+  });
+});
+
+it("merge properties with css, atoms, and function combination", async () => {
+  expect(
+    mergeCssProp(
+      css(
+        "yakClass1",
+        atoms("px-4 py-2 rounded-md", true && "text-white bg-blue-600", (_, classNames, style) => {
+          classNames.add("hover:bg-blue-700 focus:outline-none");
+          style["--btn-focus-ring"] = "0 0 0 3px rgba(59, 130, 246, 0.1)";
+        }),
+        () => ({
+          className: "yakClass2 yakClass3",
+          style: { "--yak-var1": "500" },
+        }),
+      ),
+      { className: "btn", style: { cursor: "pointer" } },
+    ),
+  ).toMatchObject({
+    className:
+      "btn yakClass1 px-4 py-2 rounded-md text-white bg-blue-600 hover:bg-blue-700 focus:outline-none yakClass2 yakClass3",
+    style: {
+      cursor: "pointer",
+      "--btn-focus-ring": "0 0 0 3px rgba(59, 130, 246, 0.1)",
+      "--yak-var1": "500",
+    },
+  });
+});
+
+it("merge properties with nested css and atoms removing classes", async () => {
+  expect(
+    mergeCssProp(
+      css(
+        "yakClass1",
+        atoms("border border-gray-300 rounded-md", (_, classNames, style) => {
+          classNames.delete("input");
+          classNames.delete("yakClass1");
+          classNames.add("focus:border-blue-500 focus:ring-1 focus:ring-blue-500");
+          style["--input-padding"] = "0.75rem";
+        }),
+        () => ({ style: { "--yak-var1": "1rem" } }),
+      ),
+      { className: "input base-input" },
+    ),
+  ).toMatchObject({
+    className:
+      "base-input border border-gray-300 rounded-md focus:border-blue-500 focus:ring-1 focus:ring-blue-500",
+    style: {
+      "--input-padding": "0.75rem",
+      "--yak-var1": "1rem",
+    },
+  });
+});
+
+it("merge properties with complex atoms manipulation", async () => {
+  expect(
+    mergeCssProp(
+      atoms(
+        "fixed inset-0 z-50",
+        true && "bg-black bg-opacity-50",
+        false && "hidden",
+        (_, classNames, style) => {
+          classNames.add("flex items-center justify-center");
+          classNames.add("animate-fadeIn");
+          style["--modal-backdrop-blur"] = "blur(4px)";
+          style.backdropFilter = "blur(4px)";
+        },
+      ),
+      { className: "modal" },
+    ),
+  ).toMatchObject({
+    className:
+      "modal fixed inset-0 z-50 bg-black bg-opacity-50 flex items-center justify-center animate-fadeIn",
+    style: {
+      "--modal-backdrop-blur": "blur(4px)",
+      backdropFilter: "blur(4px)",
+    },
+  });
+});
+
+it("merge properties with responsive design classes", async () => {
+  expect(
+    mergeCssProp(
+      atoms(
+        "sm:w-1/2 md:w-1/3 lg:w-1/4",
+        true && "p-4",
+        false && "hidden",
+        (_, classNames, style) => {
+          classNames.add("xl:w-1/5 2xl:w-1/6");
+          style["--responsive-padding"] = "clamp(0.5rem, 2vw, 1rem)";
+        },
+      ),
+      { className: "w-full" },
+    ),
+  ).toMatchObject({
+    className: "w-full sm:w-1/2 md:w-1/3 lg:w-1/4 p-4 xl:w-1/5 2xl:w-1/6",
+    style: { "--responsive-padding": "clamp(0.5rem, 2vw, 1rem)" },
+  });
+});
+
+it("merge properties with form styling", async () => {
+  expect(
+    mergeCssProp(
+      css(
+        "yakClass1",
+        atoms(
+          "w-full px-3 py-2",
+          "border border-gray-300 rounded-md",
+          true && "focus:outline-none focus:ring-2 focus:ring-blue-500",
+          (_, classNames, style) => {
+            classNames.add("placeholder-gray-400 text-gray-900");
+            style["--input-transition"] =
+              "border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out";
+          },
+        ),
+        () => ({ style: { "--yak-var1": "1.5" } }),
+      ),
+      { className: "form-control", style: { minHeight: "40px" } },
+    ),
+  ).toMatchObject({
+    className:
+      "form-control yakClass1 w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 placeholder-gray-400 text-gray-900",
+    style: {
+      minHeight: "40px",
+      "--input-transition": "border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out",
+      "--yak-var1": "1.5",
+    },
+  });
+});
+
+it("merge properties with dark mode and state variants", async () => {
+  expect(
+    mergeCssProp(
+      css(
+        "yakClass1",
+        atoms(
+          "bg-white dark:bg-gray-800",
+          "text-gray-900 dark:text-white",
+          true && "hover:bg-gray-50 dark:hover:bg-gray-700",
+          false && "opacity-50",
+          (_, classNames, style) => {
+            classNames.add("transition-all duration-200");
+            classNames.add("border border-gray-200 dark:border-gray-700");
+            style["--card-shadow"] =
+              "0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)";
+            style["--card-shadow-dark"] =
+              "0 1px 3px 0 rgba(255, 255, 255, 0.1), 0 1px 2px 0 rgba(255, 255, 255, 0.06)";
+          },
+        ),
+      ),
+      { className: "theme-card" },
+    ),
+  ).toMatchObject({
+    className:
+      "theme-card yakClass1 bg-white dark:bg-gray-800 text-gray-900 dark:text-white hover:bg-gray-50 dark:hover:bg-gray-700 transition-all duration-200 border border-gray-200 dark:border-gray-700",
+    style: {
+      "--card-shadow": "0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)",
+      "--card-shadow-dark":
+        "0 1px 3px 0 rgba(255, 255, 255, 0.1), 0 1px 2px 0 rgba(255, 255, 255, 0.06)",
+    },
+  });
+});
+
+// a falsy css prop applies no styles - the swc plugin folds the statically known
+// cases, so these cover the shapes that stay on the runtime path
+it.each([
+  ["false", false],
+  ["null", null],
+  ["undefined", undefined],
+])("applies no styles for a %s css prop", (_label, cssProp) => {
+  expect(mergeCssProp(cssProp, {})).toEqual({});
+});
+
+it("keeps the relevant props when the css prop is falsy", async () => {
+  expect(mergeCssProp(false, { className: "btn", style: { padding: "8px" } })).toMatchObject({
+    className: "btn",
+    style: { padding: "8px" },
+  });
+});
+
+describe("a css prop which can not apply styles", () => {
+  const originalNodeEnv = process.env.NODE_ENV;
+
+  beforeEach(() => {
+    // errors are only thrown in development mode
+    process.env.NODE_ENV = "development";
+  });
+
+  afterEach(() => {
+    process.env.NODE_ENV = originalNodeEnv;
+  });
+
+  it("throws for an array instead of calling it", () => {
+    expect(() => mergeCssProp([css("yakCss1")], {})).toThrowError(/but received an array/);
+  });
+
+  it("throws for an object instead of calling it", () => {
+    expect(() => mergeCssProp({ color: "red" }, {})).toThrowError(
+      /but received a value of type object/,
+    );
+  });
+
+  it("throws for a plain string instead of calling it", () => {
+    expect(() => mergeCssProp("yakCss1", {})).toThrowError(/but received a value of type string/);
+  });
+
+  it("renders unstyled in production instead of taking the page down", () => {
+    process.env.NODE_ENV = "production";
+    expect(mergeCssProp([css("yakCss1")], { className: "btn" })).toEqual({ className: "btn" });
+  });
+});
+
+describe("sources in JSX order", () => {
+  it("lets a later source win and appends the css classes", () => {
+    expect(mergeCssProp(css("yakCss1"), { className: "a" }, { className: "b" })).toEqual({
+      className: "b yakCss1",
+    });
+  });
+
+  it("keeps the order across a spread and forwards its other props", () => {
+    const onClick = () => {};
+    const spread = { className: "b", onClick };
+    expect(mergeCssProp(css("yakCss1"), { className: "a" }, spread, { className: "c" })).toEqual({
+      className: "c yakCss1",
+      onClick,
+    });
+  });
+
+  it("works without any source", () => {
+    expect(mergeCssProp(css("yakCss1"))).toEqual({ className: "yakCss1" });
+  });
+});

package/runtime/__tests__/cssPropTest.tsx

@@ -0,0 +1,227 @@
+/** @jsxImportSource @yak/react */
+// this is only a type check file and should not be executed
+
+import { css, styled } from "@yak/react";
+import { ComponentProps, CSSProperties } from "react";
+
+declare module "@yak/react" {
+  export interface YakTheme {
+    primaryColor: "red" | "blue";
+  }
+}
+
+const ComponentWithCssProp = () => {
+  return <div css={css``} />;
+};
+
+const ComponentWithEmptyCssPropAndClassName = () => {
+  return <div css={css``} className="static" />;
+};
+
+const ComponentWithEmptyCssPropInTernary = () => {
+  const on = Math.random() > 0.5;
+  return (
+    <div
+      css={
+        on
+          ? css``
+          : css`
+              padding: 10px;
+            `
+      }
+    />
+  );
+};
+
+const NestedComponentWithCssProp = () => (
+  <div>
+    <p>
+      <div
+        css={css`
+          padding: 10px;
+        `}
+      >
+        anything
+      </div>
+    </p>
+  </div>
+);
+
+const ComponentThatTakesCssProp = (p: {
+  className?: string;
+  style?: ComponentProps<"div">["style"];
+}) => <div {...p}>anything</div>;
+
+const ComponentThatTakesCssProp2 = (p: { className?: string | string[]; style?: {} }) => (
+  <div {...(p as any)}>anything</div>
+);
+
+const ComponentThatTakesCssProp3 = (p: { className: string; style?: Record<string, unknown> }) => (
+  <div {...p}>anything</div>
+);
+
+const ComponentThatTakesCssProp4 = (p: { className?: unknown; style?: unknown }) => (
+  <div {...(p as any)}>anything</div>
+);
+
+const ComponentWithCssPropAsProp = () => {
+  return (
+    <>
+      <ComponentThatTakesCssProp css={css``} />
+      <ComponentThatTakesCssProp2 css={css``} />
+      <ComponentThatTakesCssProp3 css={css``} className="" />
+      <ComponentThatTakesCssProp4 css={css``} />
+    </>
+  );
+};
+
+const ObjectWithComponent = {
+  ComponentThatTakesCssProp,
+  nested: {
+    ComponentThatTakesCssProp,
+  },
+};
+const ComponentThatUsesObjectWithComponent = () => (
+  <ObjectWithComponent.ComponentThatTakesCssProp
+    css={css`
+      padding: 10px;
+    `}
+  />
+);
+
+const ComponentThatUsesNestedObjectWithComponent = () => (
+  <ObjectWithComponent.nested.ComponentThatTakesCssProp
+    css={css`
+      padding: 10px;
+    `}
+  />
+);
+
+const ComponentWithCSSPropString = () => (
+  <div
+    // @ts-expect-error shouldn't allow strings as css prop
+    css={`
+      padding: 10px;
+    `}
+  >
+    anything
+  </div>
+);
+
+const padding = css`
+  padding: 10px;
+`;
+const ComponentThatReusesCSS = () => <div css={padding} />;
+
+const ComponentWithConditionalCSSProp = () => (
+  <div
+    css={
+      true &&
+      css`
+        padding: 10px;
+      `
+    }
+  >
+    anything
+  </div>
+);
+
+const ComponentWithConditionalCSSProp2 = () => (
+  <div
+    css={
+      true
+        ? padding
+        : css`
+            padding: 20px;
+          `
+    }
+  />
+);
+
+const ComponentWithInterpolatedCSS = () => {
+  const x = Math.random() > 0.5;
+  return (
+    <div
+      // @ts-expect-error shouldn't allow interpolated css prop
+      css={(x) => css`
+        padding: 20px;
+      `}
+    />
+  );
+};
+
+const Text = styled.p`
+  font-size: 20px;
+  font-weight: bold;
+  font-family: "Inter";
+`;
+
+const StyledComponentWithCSSProp = () => {
+  <div>
+    <Text
+      css={css`
+        color: red;
+      `}
+    >
+      test
+    </Text>
+  </div>;
+};
+
+const ComponentWithConditionalCSSButWithoutOwnProps = () => {
+  const x = Math.random() > 0.5;
+  return (
+    <div
+      css={css`
+        ${() =>
+          x &&
+          css`
+            padding: 20px;
+          `}
+      `}
+    />
+  );
+};
+
+const ComponentWithConditionalCSSVarsButWithoutOwnProps = () => {
+  const x = Math.random() > 0.5;
+  return (
+    <div
+      css={css`
+        padding: ${() => x && "20px"};
+      `}
+    />
+  );
+};
+
+const ComponentWithDynamicCSSShouldGenerateTypeError = () => {
+  return (
+    <div
+      // @ts-expect-error - properties not supported
+      css={css<{ $primary: boolean }>`
+        padding: ${({ $primary }) => $primary && "20px"};
+      `}
+    />
+  );
+};
+
+const dynamicMixin = css<{ $primary: boolean }>`
+  ${({ $primary }) =>
+    $primary &&
+    css`
+      font-size: 1.7rem;
+    `}
+`;
+
+const ComponentWithCSSThatUsesDynamicMixinShouldGenerateTypeError = () => {
+  return (
+    <div
+      css={css`
+        ${
+          // @ts-expect-error - properties not supported
+          dynamicMixin
+        }
+      `}
+    />
+  );
+};