feat: add basic pseudo element selectors (#103)

Author: marklawlor

src/__tests__/vendor/tailwind/states.test.tsx

@@ -0,0 +1,149 @@
+import { fireEvent, screen } from "@testing-library/react-native";
+
+import { Switch, TextInput, View } from "../../../components";
+import { render } from "./_tailwind";
+
+const testID = "component";
+
+test("hover", async () => {
+  await render(<TextInput testID={testID} className="hover:text-white" />);
+
+  const component = screen.getByTestId(testID);
+
+  expect(component).toHaveStyle(undefined);
+
+  fireEvent(component, "hoverIn");
+  expect(component).toHaveStyle({ color: "#fff" });
+
+  fireEvent(component, "hoverOut");
+  expect(component).toHaveStyle(undefined);
+});
+
+test("focus", async () => {
+  await render(<TextInput testID={testID} className="focus:text-white" />);
+
+  const component = screen.getByTestId(testID);
+
+  expect(component).toHaveStyle(undefined);
+
+  fireEvent(component, "focus");
+  expect(component).toHaveStyle({ color: "#fff" });
+
+  fireEvent(component, "blur");
+  expect(component).toHaveStyle(undefined);
+});
+
+test("active", async () => {
+  await render(<TextInput testID={testID} className="active:text-white" />);
+
+  const component = screen.getByTestId(testID);
+
+  expect(component).toHaveStyle(undefined);
+
+  fireEvent(component, "pressIn");
+  expect(component).toHaveStyle({ color: "#fff" });
+
+  fireEvent(component, "pressOut");
+  expect(component).toHaveStyle(undefined);
+});
+
+test("mixed", async () => {
+  await render(
+    <TextInput testID={testID} className="active:hover:focus:text-white" />,
+  );
+
+  const component = screen.getByTestId(testID);
+  expect(component).toHaveStyle(undefined);
+
+  fireEvent(component, "pressIn");
+  expect(component).toHaveStyle(undefined);
+
+  fireEvent(component, "hoverIn");
+  expect(component).toHaveStyle(undefined);
+
+  fireEvent(component, "focus");
+  expect(component).toHaveStyle({ color: "#fff" });
+});
+
+test("selection", async () => {
+  await render(<TextInput testID={testID} className="selection:text-black" />);
+
+  const component = screen.getByTestId(testID);
+  expect(component.props).toEqual({
+    testID,
+    selectionColor: "#000",
+    children: undefined,
+    style: {},
+  });
+});
+
+test("ltr:", async () => {
+  await render(<View testID={testID} className="ltr:text-black" />);
+
+  const component = screen.getByTestId(testID);
+  expect(component).toHaveStyle({
+    color: "#000",
+  });
+});
+
+test("placeholder", async () => {
+  await render(
+    <TextInput testID={testID} className="placeholder:text-black" />,
+  );
+
+  const component = screen.getByTestId(testID);
+  expect(component.props).toEqual({
+    testID,
+    placeholderTextColor: "#000",
+    children: undefined,
+    style: {},
+  });
+});
+
+test("disabled", async () => {
+  const { rerender } = await render(
+    <Switch testID={testID} className="disabled:bg-black" />,
+  );
+
+  const component = screen.getByTestId(testID);
+  expect(component.props).toEqual(
+    expect.objectContaining({
+      testID,
+      style: {
+        height: 31,
+        width: 51,
+      },
+    }),
+  );
+
+  rerender(<Switch testID={testID} disabled className="disabled:bg-black" />);
+
+  expect(component.props).toEqual(
+    expect.objectContaining({
+      testID,
+      style: [
+        {
+          height: 31,
+          width: 51,
+        },
+        {
+          backgroundColor: "#000",
+        },
+      ],
+    }),
+  );
+
+  rerender(
+    <Switch testID={testID} disabled={false} className="disabled:bg-black" />,
+  );
+
+  expect(component.props).toEqual(
+    expect.objectContaining({
+      testID,
+      style: {
+        height: 31,
+        width: 51,
+      },
+    }),
+  );
+});

src/compiler/attributes.test.ts

@@ -177,7 +177,7 @@ export type MediaCondition =
   // Comparison
   | [
       MediaFeatureComparison,
-      MediaFeatureNameFor_MediaFeatureId | MediaFeatureNameFor_MediaFeatureId,
+      MediaFeatureNameFor_MediaFeatureId | "dir",
       StyleDescriptor,
     ]
   // [Start, End]

src/compiler/compiler.types.ts

@@ -0,0 +1,54 @@
+import { isStyleFunction } from "../runtime/utils";
+import type { StyleDeclaration, StyleRule } from "./compiler.types";
+
+export function modifyRuleForSelection(rule: StyleRule): StyleRule | undefined {
+  if (!rule.d) {
+    return;
+  }
+
+  rule.d = rule.d.flatMap((declaration): StyleDeclaration[] => {
+    return modifyStyleDeclaration(declaration, "color", "selectionColor");
+  });
+
+  return rule;
+}
+
+export function modifyRuleForPlaceholder(
+  rule: StyleRule,
+): StyleRule | undefined {
+  if (!rule.d) {
+    return;
+  }
+
+  rule.d = rule.d.flatMap((declaration): StyleDeclaration[] => {
+    return modifyStyleDeclaration(declaration, "color", "placeholderTextColor");
+  });
+
+  return rule;
+}
+
+function modifyStyleDeclaration(
+  declaration: StyleDeclaration,
+  from: string,
+  to: string,
+): StyleDeclaration[] {
+  if (Array.isArray(declaration)) {
+    if (isStyleFunction(declaration) && declaration[2] === from) {
+      declaration = [...declaration] as StyleDeclaration;
+      declaration[2] = [to];
+      return [declaration];
+    } else if (declaration[1] === from) {
+      declaration = [...declaration] as StyleDeclaration;
+      declaration[1] = [to];
+      return [declaration];
+    }
+  } else if (typeof declaration === "object") {
+    const { color: selectionColor, ...rest } = declaration;
+
+    if (selectionColor) {
+      return [rest, [selectionColor, [to]]] as StyleDeclaration[];
+    }
+  }
+
+  return [declaration];
+}