@colimuca123/nativewind 4.2.2-rc.1

package/dist/test.js

@@ -0,0 +1,161 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.INTERNAL_SET = exports.native = exports.within = exports.fireEvent = exports.screen = exports.createMockComponent = exports.act = void 0;
+exports.renderCurrentTest = renderCurrentTest;
+exports.render = render;
+exports.invalidProperty = invalidProperty;
+exports.invalidValue = invalidValue;
+const react_native_1 = require("react-native");
+const container_queries_1 = __importDefault(require("@tailwindcss/container-queries"));
+const postcss_1 = __importDefault(require("postcss"));
+const test_1 = require("react-native-css-interop/test");
+const tailwindcss_1 = __importDefault(require("tailwindcss"));
+const common_1 = require("./metro/common");
+var test_2 = require("react-native-css-interop/test");
+Object.defineProperty(exports, "act", { enumerable: true, get: function () { return test_2.act; } });
+Object.defineProperty(exports, "createMockComponent", { enumerable: true, get: function () { return test_2.createMockComponent; } });
+Object.defineProperty(exports, "screen", { enumerable: true, get: function () { return test_2.screen; } });
+Object.defineProperty(exports, "fireEvent", { enumerable: true, get: function () { return test_2.fireEvent; } });
+Object.defineProperty(exports, "within", { enumerable: true, get: function () { return test_2.within; } });
+Object.defineProperty(exports, "native", { enumerable: true, get: function () { return test_2.native; } });
+Object.defineProperty(exports, "INTERNAL_SET", { enumerable: true, get: function () { return test_2.INTERNAL_SET; } });
+__exportStar(require("./index"), exports);
+const testID = "nativewind";
+beforeEach(() => {
+    (0, test_1.resetData)();
+    (0, test_1.setupAllComponents)();
+});
+process.env.NATIVEWIND_OS = react_native_1.Platform.OS;
+async function renderCurrentTest({ className = expect.getState().currentTestName?.split(/\s+/).at(-1), ...options } = {}) {
+    if (!className) {
+        throw new Error("unable to detect className, please manually set a className");
+    }
+    await render(<react_native_1.View testID={testID} className={className}/>, options);
+    const component = test_1.screen.getByTestId(testID, { hidden: true });
+    const { testID: _testID, children, ...props } = component.props;
+    const invalid = getInvalid();
+    if (invalid) {
+        return { props, invalid };
+    }
+    else {
+        return { props };
+    }
+}
+renderCurrentTest.debug = (options = {}) => {
+    return renderCurrentTest({ ...options, debugCompiled: true });
+};
+async function render(component, { config, css, layers = {}, debugCompiled = process.env.NODE_OPTIONS?.includes("--inspect"), ...options } = {}) {
+    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`);
+        }
+    }
+    let { css: output } = await (0, postcss_1.default)([
+        (0, tailwindcss_1.default)({
+            theme: {},
+            ...config,
+            presets: [require("./tailwind")],
+            plugins: [container_queries_1.default, ...(config?.plugins || [])],
+            content,
+        }),
+    ]).process(css, { from: undefined });
+    return (0, test_1.render)(component, {
+        ...options,
+        css: output,
+        cssOptions: common_1.cssToReactNativeRuntimeOptions,
+        debugCompiled: debugCompiled,
+    });
+}
+render.debug = (component, options = {}) => {
+    return render(component, { ...options, debugCompiled: true });
+};
+render.noDebug = (component, options = {}) => {
+    return render(component, { ...options, debugCompiled: false });
+};
+function getClassNames(component) {
+    const classNames = [];
+    if (component.props?.className) {
+        classNames.push({ raw: component.props.className });
+    }
+    if (component.props?.children) {
+        const children = Array.isArray(component.props.children)
+            ? component.props.children
+            : [component.props.children];
+        classNames.push(...children.flatMap((c) => getClassNames(c)));
+    }
+    return classNames;
+}
+function getInvalid() {
+    const style = {};
+    const properties = [];
+    let hasStyles = false;
+    for (const warnings of (0, test_1.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":
+            }
+        }
+    }
+    if (properties.length && hasStyles) {
+        return {
+            style,
+            properties,
+        };
+    }
+    else if (properties.length) {
+        return { properties };
+    }
+    else if (hasStyles) {
+        return { style };
+    }
+}
+function invalidProperty(...properties) {
+    return properties.map((property) => ({
+        type: "IncompatibleNativeProperty",
+        property,
+    }));
+}
+function invalidValue(value) {
+    return Object.entries(value).map(([property, value]) => ({
+        type: "IncompatibleNativeValue",
+        property,
+        value,
+    }));
+}
+//# sourceMappingURL=test.js.map

package/dist/test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"test.js","sourceRoot":"","sources":["../src/test.tsx"],"names":[],"mappings":"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"}

package/dist/theme.d.ts

@@ -0,0 +1 @@
+export declare const hairlineWidth: any, platformSelect: any, pixelScaleSelect: any, fontScaleSelect: any, pixelScale: any, fontScale: any, roundToNearestPixel: any, platformColor: any, getPixelSizeForLayoutSize: any;

package/dist/theme.js

@@ -0,0 +1,9 @@
+"use strict";
+var _a;
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getPixelSizeForLayoutSize = exports.platformColor = exports.roundToNearestPixel = exports.fontScale = exports.pixelScale = exports.fontScaleSelect = exports.pixelScaleSelect = exports.platformSelect = exports.hairlineWidth = void 0;
+const isNative = Boolean(process.env.NATIVEWIND_OS);
+_a = isNative
+    ? require("react-native-css-interop/css-to-rn/functions")
+    : require("react-native-css-interop/css-to-rn/functions-web"), exports.hairlineWidth = _a.hairlineWidth, exports.platformSelect = _a.platformSelect, exports.pixelScaleSelect = _a.pixelScaleSelect, exports.fontScaleSelect = _a.fontScaleSelect, exports.pixelScale = _a.pixelScale, exports.fontScale = _a.fontScale, exports.roundToNearestPixel = _a.roundToNearestPixel, exports.platformColor = _a.platformColor, exports.getPixelSizeForLayoutSize = _a.getPixelSizeForLayoutSize;
+//# sourceMappingURL=theme.js.map

package/dist/theme.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme.js","sourceRoot":"","sources":["../src/theme.ts"],"names":[],"mappings":";;;;AAAA,MAAM,QAAQ,GAAG,OAAO,CAAC,OAAO,CAAC,GAAG,CAAC,aAAa,CAAC,CAAC;AAEvC,KAUT,QAAQ;IACV,CAAC,CAAC,OAAO,CAAC,8CAA8C,CAAC;IACzD,CAAC,CAAC,OAAO,CAAC,kDAAkD,CAAC,EAX7D,qBAAa,qBACb,sBAAc,sBACd,wBAAgB,wBAChB,uBAAe,uBACf,kBAAU,kBACV,iBAAS,iBACT,2BAAmB,2BACnB,qBAAa,qBACb,iCAAyB,gCAGqC"}

package/expo-snack.js

@@ -0,0 +1,71 @@
+import { useState, useEffect, Fragment, createElement } from "react";
+import RN, { Platform } from "react-native";
+const { StyleSheet, cssInterop } = require("react-native-css-interop");
+const jsx = require("@nativewind/jsx-runtime");
+const originalJSX = require("react/jsx-runtime");
+
+Object.assign(originalJSX, jsx);
+
+export const View = cssInterop(RN.View, { className: "style" });
+export const Text = cssInterop(RN.Text, { className: "style" });
+
+const isOk = (response) => {
+  return response.ok ? response.json() : Promise.reject(response);
+};
+
+const alreadyProcessed = new Set();
+let fetchUrl = "https://nativewind.dev/api/compile";
+
+function fetchStyle(className) {
+  className = className
+    .split(" ")
+    .filter((c) => !alreadyProcessed.has(c))
+    .join(" ");
+  if (!className) return;
+  fetch(fetchUrl, {
+    method: "POST",
+    headers: {
+      "Content-Type": "application/json",
+    },
+    body: `{"content":"${className}"}`,
+  })
+    .then(isOk)
+    .then((body) => {
+      className.split(" ").forEach((c) => alreadyProcessed.add(c));
+      StyleSheet.registerCompiled(body);
+    })
+    .catch(() => {
+      console.error("Error connecting to NativeWind snack server");
+    });
+}
+
+StyleSheet.unstable_hook_onClassName(fetchStyle);
+
+var tailwindScript;
+let tailwindScriptLoaded = Platform.OS === "web" ? !!window.tailwind : true;
+if (!tailwindScriptLoaded) {
+  tailwindScript = document.createElement("script");
+  tailwindScript.addEventListener("load", () => {
+    tailwindScriptLoaded = true;
+  });
+  tailwindScript.id = "tailwindscript";
+  tailwindScript.setAttribute("src", "https://cdn.tailwindcss.com");
+  document.body.appendChild(tailwindScript);
+}
+
+export function withExpoSnack(
+  Component,
+  apiUrl = "https://nativewind.dev/api/compile",
+) {
+  fetchUrl = apiUrl;
+  return function WithExpoSnackLoader() {
+    const [loaded, setLoaded] = useState(tailwindScriptLoaded);
+    useEffect(() => {
+      return tailwindScript?.addEventListener("load", () => setLoaded(true));
+    }, []);
+
+    return tailwindScriptLoaded
+      ? createElement(Component)
+      : createElement(Fragment);
+  };
+}

package/jsx-dev-runtime/index.d.ts

@@ -0,0 +1 @@
+export type * from "react/jsx-dev-runtime";

package/jsx-dev-runtime/index.js

@@ -0,0 +1 @@
+module.exports = require("react-native-css-interop/jsx-dev-runtime");

package/jsx-runtime/index.d.ts

@@ -0,0 +1 @@
+export type * from "react/jsx-runtime";

package/jsx-runtime/index.js

@@ -0,0 +1 @@
+module.exports = require("react-native-css-interop/jsx-runtime");

package/metro/package.json

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

package/package.json

@@ -0,0 +1,75 @@
+{
+  "version": "4.2.2-rc.1",
+  "name": "@colimuca123/nativewind",
+  "description": "Use Tailwindcss in your cross-platform React Native applications",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "sideEffects": false,
+  "keywords": [
+    "react-native",
+    "react",
+    "native",
+    "tailwind",
+    "tailwindcss",
+    "theme",
+    "style",
+    "harmony"
+  ],
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://gitcode.com/openharmony-sig/rntpc_nativewind.git"
+  },
+  "homepage": "https://gitcode.com/openharmony-sig/rntpc_nativewind",
+  "bugs": {
+    "url": "https://gitcode.com/openharmony-sig/rntpc_nativewind/issues"
+  },
+  "engines": {
+    "node": ">=16"
+  },
+  "scripts": {
+    "test": "jest",
+    "test:watch": "jest --watch",
+    "test:debug": "node --inspect-brk node_modules/.bin/jest --runInBand",
+    "lint": "eslint .",
+    "prepublishOnly": "npm run build",
+    "build": "tsc -p tsconfig.build.json",
+    "build:watch": "tsc -p tsconfig.build.json -w",
+    "dev": "tsc -p tsconfig.build.json --watch --preserveWatchOutput"
+  },
+  "files": [
+    "babel.js",
+    "dist/",
+    "src/",
+    "expo-snack.js",
+    "jsx-dev-runtime/",
+    "jsx-runtime/",
+    "metro/",
+    "preset/",
+    "test/",
+    "theme/",
+    "types.d.ts"
+  ],
+  "dependencies": {
+    "comment-json": "^4.2.5",
+    "debug": "^4.3.7",
+    "react-native-css-interop": "npm:@colimuca123/react-native-css-interop@0.2.2-rc.2"
+  },
+  "devDependencies": {
+    "@tailwindcss/container-queries": "^0.1.1",
+    "@testing-library/react-native": "^12.0.1",
+    "@types/jest": "^29.5.1",
+    "@types/micromatch": "^4.0.4",
+    "jest": "^29.3.1",
+    "jest-expo": "^50.0.1",
+    "prettier": "^3.3.1",
+    "tailwindcss": "3.4.4",
+    "tw-colors": "^3.3.1"
+  },
+  "peerDependencies": {
+    "tailwindcss": ">3.3.0"
+  },
+  "harmony": {
+    "alias": "nativewind"
+  }
+}

package/preset/package.json

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

package/src/__tests__/README.md

@@ -0,0 +1,3 @@
+# NativeWind testing
+
+NativeWind is a smaller wrapper around `react-native-css-interop` and relies on its test suite for functionality and E2E testing. These tests simply assert that components are called with the correct styles, and those styles have the correct metadata attached.

package/src/__tests__/accessibility.tsx

@@ -0,0 +1,41 @@
+import { renderCurrentTest } from "../test";
+
+describe("Accessibility - Screen Readers", () => {
+  test("sr-only", async () => {
+    const { props, invalid } = await renderCurrentTest();
+    expect(props).toStrictEqual({
+      style: {
+        borderWidth: 0,
+        height: 1,
+        margin: -1,
+        overflow: "hidden",
+        padding: 0,
+        position: "absolute",
+        width: 1,
+      },
+    });
+    expect(invalid).toStrictEqual({
+      properties: ["clip", "white-space"],
+    });
+  });
+
+  test("not-sr-only", async () => {
+    expect(await renderCurrentTest()).toStrictEqual({
+      props: {
+        style: {
+          margin: 0,
+          overflow: "visible",
+          padding: 0,
+        },
+      },
+      invalid: {
+        properties: ["clip", "white-space"],
+        style: {
+          position: "static",
+          width: "auto",
+          height: "auto",
+        },
+      },
+    });
+  });
+});

package/src/__tests__/backgrounds.tsx

@@ -0,0 +1,239 @@
+import { renderCurrentTest } from "../test";
+
+describe("Backgrounds - Background Attachment", () => {
+  test("bg-fixed", async () => {
+    expect(await renderCurrentTest()).toStrictEqual({
+      props: {},
+      invalid: { properties: ["background-attachment"] },
+    });
+  });
+  test("bg-local", async () => {
+    expect(await renderCurrentTest()).toStrictEqual({
+      props: {},
+      invalid: { properties: ["background-attachment"] },
+    });
+  });
+  test("bg-scroll", async () => {
+    expect(await renderCurrentTest()).toStrictEqual({
+      props: {},
+      invalid: { properties: ["background-attachment"] },
+    });
+  });
+});
+
+describe("Backgrounds - Background Clip", () => {
+  test("bg-clip-border", async () => {
+    expect(await renderCurrentTest()).toStrictEqual({
+      props: {},
+      invalid: { properties: ["background-clip"] },
+    });
+  });
+  test("bg-clip-padding", async () => {
+    expect(await renderCurrentTest()).toStrictEqual({
+      props: {},
+      invalid: { properties: ["background-clip"] },
+    });
+  });
+  test("bg-clip-content", async () => {
+    expect(await renderCurrentTest()).toStrictEqual({
+      props: {},
+      invalid: { properties: ["background-clip"] },
+    });
+  });
+  test("bg-clip-text", async () => {
+    expect(await renderCurrentTest()).toStrictEqual({
+      props: {},
+      invalid: { properties: ["background-clip"] },
+    });
+  });
+});
+
+describe("Backgrounds - Background Color", () => {
+  test("bg-current", async () => {
+    expect(await renderCurrentTest()).toStrictEqual({
+      props: {},
+      invalid: { style: { "background-color": "currentcolor" } },
+    });
+  });
+
+  test("bg-transparent", async () => {
+    expect(await renderCurrentTest()).toStrictEqual({
+      props: { style: { backgroundColor: "#00000000" } },
+    });
+  });
+
+  test("bg-white", async () => {
+    expect(await renderCurrentTest()).toStrictEqual({
+      props: { style: { backgroundColor: "#ffffff" } },
+    });
+  });
+});
+
+describe("Backgrounds - Background Origin", () => {
+  test("bg-origin-border", async () => {
+    expect(await renderCurrentTest()).toStrictEqual({
+      props: {},
+      invalid: { properties: ["background-origin"] },
+    });
+  });
+  test("bg-origin-padding", async () => {
+    expect(await renderCurrentTest()).toStrictEqual({
+      props: {},
+      invalid: { properties: ["background-origin"] },
+    });
+  });
+  test("bg-origin-content", async () => {
+    expect(await renderCurrentTest()).toStrictEqual({
+      props: {},
+      invalid: { properties: ["background-origin"] },
+    });
+  });
+});
+
+describe("Backgrounds - Background Position", () => {
+  test("bg-bottom", async () => {
+    expect(await renderCurrentTest()).toStrictEqual({
+      props: {},
+      invalid: { properties: ["background-position"] },
+    });
+  });
+  test("bg-center", async () => {
+    expect(await renderCurrentTest()).toStrictEqual({
+      props: {},
+      invalid: { properties: ["background-position"] },
+    });
+  });
+  test("bg-left", async () => {
+    expect(await renderCurrentTest()).toStrictEqual({
+      props: {},
+      invalid: { properties: ["background-position"] },
+    });
+  });
+  test("bg-left-bottom", async () => {
+    expect(await renderCurrentTest()).toStrictEqual({
+      props: {},
+      invalid: { properties: ["background-position"] },
+    });
+  });
+  test("bg-left-top", async () => {
+    expect(await renderCurrentTest()).toStrictEqual({
+      props: {},
+      invalid: { properties: ["background-position"] },
+    });
+  });
+  test("bg-right", async () => {
+    expect(await renderCurrentTest()).toStrictEqual({
+      props: {},
+      invalid: { properties: ["background-position"] },
+    });
+  });
+  test("bg-right-bottom", async () => {
+    expect(await renderCurrentTest()).toStrictEqual({
+      props: {},
+      invalid: { properties: ["background-position"] },
+    });
+  });
+  test("bg-right-top", async () => {
+    expect(await renderCurrentTest()).toStrictEqual({
+      props: {},
+      invalid: { properties: ["background-position"] },
+    });
+  });
+  test("bg-top", async () => {
+    expect(await renderCurrentTest()).toStrictEqual({
+      props: {},
+      invalid: { properties: ["background-position"] },
+    });
+  });
+});
+
+describe("Backgrounds - Background Repeat", () => {
+  test("bg-repeat", async () => {
+    expect(await renderCurrentTest()).toStrictEqual({
+      props: {},
+      invalid: { properties: ["background-repeat"] },
+    });
+  });
+});
+
+describe("Backgrounds - Background Size", () => {
+  test("bg-auto", async () => {
+    expect(await renderCurrentTest()).toStrictEqual({
+      props: {},
+      invalid: { properties: ["background-size"] },
+    });
+  });
+  test("bg-cover", async () => {
+    expect(await renderCurrentTest()).toStrictEqual({
+      props: {},
+      invalid: { properties: ["background-size"] },
+    });
+  });
+  test("bg-contain", async () => {
+    expect(await renderCurrentTest()).toStrictEqual({
+      props: {},
+      invalid: { properties: ["background-size"] },
+    });
+  });
+});
+
+describe("Backgrounds - Background Image", () => {
+  test("bg-none", async () => {
+    expect(await renderCurrentTest()).toStrictEqual({
+      props: {},
+      invalid: { properties: ["background-image"] },
+    });
+  });
+  test("bg-gradient-to-t", async () => {
+    expect(await renderCurrentTest()).toStrictEqual({
+      props: {},
+      invalid: { properties: ["background-image"] },
+    });
+  });
+  test("bg-gradient-to-tr", async () => {
+    expect(await renderCurrentTest()).toStrictEqual({
+      props: {},
+      invalid: { properties: ["background-image"] },
+    });
+  });
+  test("bg-gradient-to-r", async () => {
+    expect(await renderCurrentTest()).toStrictEqual({
+      props: {},
+      invalid: { properties: ["background-image"] },
+    });
+  });
+  test("bg-gradient-to-br", async () => {
+    expect(await renderCurrentTest()).toStrictEqual({
+      props: {},
+      invalid: { properties: ["background-image"] },
+    });
+  });
+  test("bg-gradient-to-b", async () => {
+    expect(await renderCurrentTest()).toStrictEqual({
+      props: {},
+      invalid: { properties: ["background-image"] },
+    });
+  });
+  test("bg-gradient-to-bl", async () => {
+    expect(await renderCurrentTest()).toStrictEqual({
+      props: {},
+      invalid: { properties: ["background-image"] },
+    });
+  });
+  test("bg-gradient-to-l", async () => {
+    expect(await renderCurrentTest()).toStrictEqual({
+      props: {},
+      invalid: { properties: ["background-image"] },
+    });
+  });
+  test("bg-gradient-to-tl", async () => {
+    expect(await renderCurrentTest()).toStrictEqual({
+      props: {},
+      invalid: { properties: ["background-image"] },
+    });
+  });
+});
+
+describe.skip("Backgrounds - Gradient Color Stops", () => {
+  // TODO
+});