@colimuca123/nativewind 4.2.2-rc.1

package/src/test.tsx

@@ -0,0 +1,224 @@
+/** @jsxImportSource nativewind */
+import { Platform, View } from "react-native";
+
+import tailwindcssContainerQueries from "@tailwindcss/container-queries";
+import postcss from "postcss";
+import {
+  getWarnings,
+  render as interopRender,
+  RenderOptions as InteropRenderOptions,
+  resetData,
+  screen,
+  setupAllComponents,
+} from "react-native-css-interop/test";
+import tailwind, { Config } from "tailwindcss";
+
+import { cssToReactNativeRuntimeOptions } from "./metro/common";
+
+export {
+  act,
+  createMockComponent,
+  screen,
+  fireEvent,
+  within,
+  native,
+  INTERNAL_SET,
+} from "react-native-css-interop/test";
+
+export * from "./index";
+
+const testID = "nativewind";
+
+beforeEach(() => {
+  resetData();
+  setupAllComponents();
+});
+
+// I don't know why I can't use Omit. It narrows the type too much?
+export type ConfigWithoutContent = {
+  [K in keyof Config as K extends "content" ? never : K]: Config[K];
+};
+
+export interface RenderOptions extends InteropRenderOptions {
+  config?: ConfigWithoutContent;
+  css?: string;
+  layers?: {
+    base?: boolean;
+    components?: boolean;
+    utilities?: boolean;
+  };
+}
+
+export type RenderCurrentTestOptions = RenderOptions & {
+  className?: string;
+};
+
+process.env.NATIVEWIND_OS = Platform.OS;
+
+export async function renderCurrentTest({
+  className = expect.getState().currentTestName?.split(/\s+/).at(-1),
+  ...options
+}: RenderCurrentTestOptions = {}) {
+  if (!className) {
+    throw new Error(
+      "unable to detect className, please manually set a className",
+    );
+  }
+
+  await render(<View testID={testID} className={className} />, options);
+  const component = screen.getByTestId(testID, { hidden: true });
+
+  // Strip the testID and the children
+  const { testID: _testID, children, ...props } = component.props;
+
+  const invalid = getInvalid();
+
+  if (invalid) {
+    return { props, invalid };
+  } else {
+    return { props };
+  }
+}
+
+renderCurrentTest.debug = (options: RenderCurrentTestOptions = {}) => {
+  return renderCurrentTest({ ...options, debugCompiled: true });
+};
+
+export async function render(
+  component: React.ReactElement<any>,
+  {
+    config,
+    css,
+    layers = {},
+    debugCompiled = process.env.NODE_OPTIONS?.includes("--inspect"),
+    ...options
+  }: RenderOptions = {},
+) {
+  // Compile the base CSS, e.g:
+  // @tailwind base
+  // @tailwind components
+  // @tailwind utilities
+  css ??= Object.entries({
+    base: true,
+    components: true,
+    utilities: true,
+    ...layers,
+  }).reduce((acc, [layer, enabled]) => {
+    return enabled ? `${acc}@tailwind ${layer};` : acc;
+  }, "");
+
+  const content = getClassNames(component);
+
+  if (debugCompiled) {
+    const classNames = content.map(({ raw }) => `  ${raw}`);
+    console.log(`Detected classNames:\n${classNames.join("\n")}\n\n`);
+
+    if (config?.safelist) {
+      console.log(`Detected safelist:\n${config.safelist.join("\n")}\n\n`);
+    }
+  }
+
+  // Process the TailwindCSS
+  let { css: output } = await postcss([
+    tailwind({
+      theme: {},
+      ...config,
+      presets: [require("./tailwind")],
+      plugins: [tailwindcssContainerQueries, ...(config?.plugins || [])],
+      content,
+    }),
+  ]).process(css, { from: undefined });
+
+  return interopRender(component, {
+    ...options,
+    css: output,
+    cssOptions: cssToReactNativeRuntimeOptions,
+    debugCompiled: debugCompiled,
+  });
+}
+
+render.debug = (
+  component: React.ReactElement<any>,
+  options: RenderOptions = {},
+) => {
+  return render(component, { ...options, debugCompiled: true });
+};
+
+render.noDebug = (
+  component: React.ReactElement<any>,
+  options: RenderOptions = {},
+) => {
+  return render(component, { ...options, debugCompiled: false });
+};
+
+function getClassNames(
+  component: React.ReactElement<any>,
+): Array<{ raw: string; extension?: string }> {
+  const classNames: Array<{ raw: string; extension?: string }> = [];
+
+  if (component.props?.className) {
+    classNames.push({ raw: component.props.className });
+  }
+
+  if (component.props?.children) {
+    const children: React.ReactElement<any>[] = Array.isArray(
+      component.props.children,
+    )
+      ? component.props.children
+      : [component.props.children];
+
+    classNames.push(...children.flatMap((c) => getClassNames(c)));
+  }
+
+  return classNames;
+}
+
+function getInvalid() {
+  const style: Record<string, any> = {};
+  const properties: string[] = [];
+
+  let hasStyles = false;
+
+  for (const warnings of getWarnings().values()) {
+    for (const warning of warnings) {
+      switch (warning.type) {
+        case "IncompatibleNativeProperty":
+          properties.push(warning.property);
+          break;
+        case "IncompatibleNativeValue": {
+          hasStyles = true;
+          style[warning.property] = warning.value;
+          break;
+        }
+        case "IncompatibleNativeFunctionValue":
+        // TODO
+      }
+    }
+  }
+
+  if (properties.length && hasStyles) {
+    return {
+      style,
+      properties,
+    };
+  } else if (properties.length) {
+    return { properties };
+  } else if (hasStyles) {
+    return { style };
+  }
+}
+
+export function invalidProperty(...properties: string[]) {
+  return properties.map((property) => ({
+    type: "IncompatibleNativeProperty",
+    property,
+  }));
+}
+
+export function invalidValue(value: Record<string, string>) {
+  return Object.entries(value).map(([property, value]) => ({
+    type: "IncompatibleNativeValue",
+    property,
+    value,
+  }));
+}

package/src/theme.ts

@@ -0,0 +1,15 @@
+const isNative = Boolean(process.env.NATIVEWIND_OS);
+
+export const {
+  hairlineWidth,
+  platformSelect,
+  pixelScaleSelect,
+  fontScaleSelect,
+  pixelScale,
+  fontScale,
+  roundToNearestPixel,
+  platformColor,
+  getPixelSizeForLayoutSize,
+} = isNative
+  ? require("react-native-css-interop/css-to-rn/functions")
+  : require("react-native-css-interop/css-to-rn/functions-web");

package/test/package.json

@@ -0,0 +1,4 @@
+{
+  "main": "../dist/test",
+  "types": "../dist/test"
+}

package/theme/package.json

@@ -0,0 +1,3 @@
+{
+  "main": "../dist/theme"
+}

package/types.d.ts

@@ -0,0 +1 @@
+/// <reference types="react-native-css-interop/types" />