@tamagui/core 1.5.13 → 1.5.14

package/dist/esm/helpers/ThemeManager.test.mjs

@@ -0,0 +1,464 @@
+import { getDefaultTamaguiConfig } from "@tamagui/config-default-node";
+import { beforeAll, describe, expect, test } from "vitest";
+import { createTamagui } from "../createTamagui";
+import { ThemeManager } from "./ThemeManager";
+const conf = getDefaultTamaguiConfig();
+describe("ThemeManager", () => {
+  beforeAll(() => {
+    createTamagui(conf);
+  });
+  test("Changes theme to dark", () => {
+    const manager = new ThemeManager(
+      {
+        name: "dark"
+      },
+      "root"
+    );
+    expect(manager.state.name).toBe("dark");
+  });
+  test('Given parent theme "dark" and child theme "red" to return theme "dark_red"', () => {
+    const parent = new ThemeManager(
+      {
+        name: "dark"
+      },
+      "root"
+    );
+    const child = new ThemeManager(
+      {
+        name: "red"
+      },
+      parent
+    );
+    expect(parent.state.name).toBe("dark");
+    expect(child.state.name).toBe("dark_red");
+  });
+  test('Given parent theme "dark", child theme "red_alt2" and component "Button" returns "dark_red_alt2_Button"', () => {
+    const parent = new ThemeManager(
+      {
+        name: "dark"
+      },
+      "root"
+    );
+    const child1 = new ThemeManager(
+      {
+        name: "red"
+      },
+      parent
+    );
+    expect(child1.state.name).toBe("dark_red");
+    const child2 = new ThemeManager(
+      {
+        name: "alt2",
+        componentName: "Button"
+      },
+      child1
+    );
+    expect(child2.state.name).toBe("dark_red_alt2_Button");
+  });
+  test('Given parent theme "dark", child theme "red" and component "Button" returns "dark_red_Button"', () => {
+    const parent = new ThemeManager(
+      {
+        name: "dark"
+      },
+      "root"
+    );
+    const child1 = new ThemeManager(
+      {
+        name: "red"
+      },
+      parent
+    );
+    expect(child1.state.name).toBe("dark_red");
+    const child2 = new ThemeManager(
+      {
+        componentName: "Button"
+      },
+      child1
+    );
+    expect(child2.state.name).toBe("dark_red_Button");
+  });
+  test('Given parent theme "dark", child theme "red" and missing component "Card" returns "dark_red"', () => {
+    const parent = new ThemeManager(
+      {
+        name: "dark"
+      },
+      "root"
+    );
+    const child1 = new ThemeManager(
+      {
+        name: "red"
+      },
+      parent
+    );
+    expect(child1.state.name).toBe("dark_red");
+    const child2 = new ThemeManager(
+      {
+        componentName: "Card"
+      },
+      child1
+    );
+    expect(child2.state.name).toBe("dark_red");
+  });
+  test('Changes "light" to "dark"', () => {
+    const parent = new ThemeManager(
+      {
+        name: "light"
+      },
+      "root"
+    );
+    const child = new ThemeManager(
+      {
+        name: "dark"
+      },
+      parent
+    );
+    expect(parent.state.name).toBe("light");
+    expect(child.state.name).toBe("dark");
+  });
+  test('Inverts "light" to "dark"', () => {
+    const parent = new ThemeManager(
+      {
+        name: "light"
+      },
+      "root"
+    );
+    const child1 = new ThemeManager(
+      {
+        inverse: true
+      },
+      parent
+    );
+    expect(child1.state.name).toBe("dark");
+  });
+  test('Inverts "light_red" to "dark_red"', () => {
+    const parent = new ThemeManager(
+      {
+        name: "light"
+      },
+      "root"
+    );
+    const child1 = new ThemeManager(
+      {
+        name: "red",
+        inverse: true
+      },
+      parent
+    );
+    expect(child1.state.name).toBe("dark_red");
+  });
+  test("Updates state", () => {
+    const parent = new ThemeManager(
+      {
+        name: "light"
+      },
+      "root"
+    );
+    const newState = parent.updateState({
+      name: "dark"
+    });
+    expect(newState).toMatchInlineSnapshot(`
+      {
+        "className": "t_dark",
+        "name": "dark",
+        "parentName": "",
+        "theme": {
+          "background": {
+            "isVar": true,
+            "key": "color-2",
+            "name": "background",
+            "val": "#000",
+            "variable": "",
+          },
+          "color": {
+            "isVar": true,
+            "key": "color-1",
+            "name": "color",
+            "val": "#fff",
+            "variable": "",
+          },
+        },
+      }
+    `);
+    expect(parent.state.name).toBe("dark");
+  });
+  test("Returns parent on empty", () => {
+    const parent = new ThemeManager(
+      {
+        name: "light"
+      },
+      "root"
+    );
+    const child = new ThemeManager(
+      {
+        name: null
+      },
+      parent
+    );
+    expect(child).toBe(parent);
+  });
+  test("Resets theme", () => {
+    const parent = new ThemeManager(
+      {
+        name: "light"
+      },
+      "root"
+    );
+    const child = new ThemeManager(
+      {
+        name: "dark"
+      },
+      parent
+    );
+    expect(child.state.name).toBe("dark");
+    expect(child.parentManager).toBe(parent);
+    const child2 = new ThemeManager(
+      {
+        reset: true
+      },
+      child
+    );
+    expect(child2.parentManager).toBe(child);
+    expect(child2.state.name).toBe("light");
+  });
+  test("Nested invert and reset", () => {
+    const parent = new ThemeManager(
+      {
+        name: "light"
+      },
+      "root"
+    );
+    const child = new ThemeManager(
+      {
+        name: "dark"
+      },
+      parent
+    );
+    const child2 = new ThemeManager(
+      {
+        reset: true
+      },
+      child
+    );
+    const child3 = new ThemeManager(
+      {
+        inverse: true
+      },
+      child2
+    );
+    expect(child3.state.name).toBe("dark");
+  });
+  test("Updates from null the new theme nested 3 themes", () => {
+    const a = new ThemeManager(
+      {
+        name: "dark"
+      },
+      "root"
+    );
+    const b = new ThemeManager(
+      {
+        name: "red"
+      },
+      a
+    );
+    expect(b.state.name).toBe("dark_red");
+    const c = new ThemeManager(
+      {
+        name: "alt2"
+      },
+      b
+    );
+    expect(c.state.name).toBe("dark_red_alt2");
+  });
+  test("Ignored dup themes", () => {
+    const a = new ThemeManager(
+      {
+        name: "dark"
+      },
+      "root"
+    );
+    const b = new ThemeManager(
+      {
+        name: "dark"
+      },
+      a
+    );
+    expect(b === a).toBe(true);
+  });
+  test("Nested component themes fallback to grandparents", () => {
+    const parent = new ThemeManager(
+      {
+        name: "dark"
+      },
+      "root"
+    );
+    const child = new ThemeManager(
+      {
+        name: "red",
+        componentName: "Button"
+      },
+      parent
+    );
+    const child2 = new ThemeManager(
+      {
+        name: "blue"
+      },
+      child
+    );
+    expect(child2.state.name).toBe("dark_blue");
+    const child3 = new ThemeManager(
+      {
+        componentName: "Button"
+      },
+      child2
+    );
+    expect(child3.state.name).toBe("dark_blue_Button");
+  });
+  test(`Component theme with sub component that doesn't exist keeps same theme`, () => {
+    const parent = new ThemeManager(
+      {
+        name: "dark"
+      },
+      "root"
+    );
+    const child = new ThemeManager(
+      {
+        name: "red",
+        componentName: "Button"
+      },
+      parent
+    );
+    const child2 = new ThemeManager(
+      {
+        componentName: "Spacer"
+      },
+      child
+    );
+    expect(child2).toBe(child);
+  });
+  test(`Doesn't find invalid parent when only passing component`, () => {
+    expect(!!conf.themes["dark_Card"]).toBeTruthy();
+    const parent = new ThemeManager(
+      {
+        name: "dark_red"
+      },
+      "root"
+    );
+    const child = new ThemeManager(
+      {
+        componentName: "Card"
+      },
+      parent
+    );
+    expect(child.state.name).toBe(parent.state.name);
+  });
+  test(`Finds sub-theme when componentName and name are passed but componentName doesn't exist`, () => {
+    const parent = new ThemeManager(
+      {
+        name: "dark"
+      },
+      "root"
+    );
+    const child = new ThemeManager(
+      {
+        name: "red",
+        componentName: "Missing"
+      },
+      parent
+    );
+    expect(child.state.name).toBe("dark_red");
+  });
+  test("Uses the full className without the light/dark prefix", () => {
+    const parent = new ThemeManager(
+      {
+        name: "dark"
+      },
+      "root"
+    );
+    const child = new ThemeManager(
+      {
+        name: "red_alt2"
+      },
+      parent
+    );
+    expect(child.state.className).toBe("t_red_alt2");
+    const child2 = new ThemeManager(
+      {
+        name: "red"
+      },
+      parent
+    );
+    const child3 = new ThemeManager(
+      {
+        name: "alt2"
+      },
+      child2
+    );
+    expect(child3.state.className).toBe("t_red_alt2");
+  });
+  test("Finds component dark_red + Button", () => {
+    const parent = new ThemeManager(
+      {
+        name: "dark_red"
+      },
+      "root"
+    );
+    const child = new ThemeManager(
+      {
+        name: "dark_red",
+        componentName: "Button"
+      },
+      parent
+    );
+    expect(child.state.className).toBe("t_red_Button");
+    expect(child.state.name).toBe("dark_red_Button");
+  });
+  test("Drops componentName if only regular name found at stronger level", () => {
+    const parent = new ThemeManager(
+      {
+        name: "dark_red"
+      },
+      "root"
+    );
+    const child = new ThemeManager(
+      {
+        name: "alt1",
+        componentName: "Button"
+      },
+      parent
+    );
+    expect(child.state.name).toBe("dark_red_alt1");
+  });
+  test("Component name + theme change when nested already", () => {
+    const parent = new ThemeManager(
+      {
+        name: "dark_red"
+      },
+      "root"
+    );
+    const child = new ThemeManager(
+      {
+        name: "yellow",
+        componentName: "Button"
+      },
+      parent
+    );
+    expect(child.state.name).toBe("dark_yellow_Button");
+  });
+  test("Component name + name finds one up when component name missing", () => {
+    const parent = new ThemeManager(
+      {
+        name: "dark_red_alt1"
+      },
+      "root"
+    );
+    const child = new ThemeManager(
+      {
+        name: "alt2",
+        componentName: "Missing"
+      },
+      parent
+    );
+    expect(child.state.name).toBe("dark_red_alt2");
+  });
+});
+//# sourceMappingURL=ThemeManager.test.mjs.map

package/dist/esm/helpers/ThemeManager.test.mjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/helpers/ThemeManager.test.tsx"],
+  "sourcesContent": ["import { getDefaultTamaguiConfig } from '@tamagui/config-default-node'\nimport { beforeAll, describe, expect, test } from 'vitest'\n\nimport { createTamagui } from '../createTamagui'\nimport { ThemeManager } from './ThemeManager'\n\nconst conf = getDefaultTamaguiConfig()\n\ndescribe('ThemeManager', () => {\n  beforeAll(() => {\n    createTamagui(conf)\n  })\n\n  test('Changes theme to dark', () => {\n    const manager = new ThemeManager(\n      {\n        name: 'dark',\n      },\n      'root'\n    )\n    expect(manager.state.name).toBe('dark')\n  })\n\n  test('Given parent theme \"dark\" and child theme \"red\" to return theme \"dark_red\"', () => {\n    const parent = new ThemeManager(\n      {\n        name: 'dark',\n      },\n      'root'\n    )\n    const child = new ThemeManager(\n      {\n        name: 'red',\n      },\n      parent\n    )\n    expect(parent.state.name).toBe('dark')\n    expect(child.state.name).toBe('dark_red')\n  })\n\n  test('Given parent theme \"dark\", child theme \"red_alt2\" and component \"Button\" returns \"dark_red_alt2_Button\"', () => {\n    const parent = new ThemeManager(\n      {\n        name: 'dark',\n      },\n      'root'\n    )\n    const child1 = new ThemeManager(\n      {\n        name: 'red',\n      },\n      parent\n    )\n    expect(child1.state.name).toBe('dark_red')\n    const child2 = new ThemeManager(\n      {\n        name: 'alt2',\n        componentName: 'Button',\n      },\n      child1\n    )\n    expect(child2.state.name).toBe('dark_red_alt2_Button')\n  })\n\n  test('Given parent theme \"dark\", child theme \"red\" and component \"Button\" returns \"dark_red_Button\"', () => {\n    const parent = new ThemeManager(\n      {\n        name: 'dark',\n      },\n      'root'\n    )\n    const child1 = new ThemeManager(\n      {\n        name: 'red',\n      },\n      parent\n    )\n    expect(child1.state.name).toBe('dark_red')\n    const child2 = new ThemeManager(\n      {\n        componentName: 'Button',\n      },\n      child1\n    )\n    expect(child2.state.name).toBe('dark_red_Button')\n  })\n\n  test('Given parent theme \"dark\", child theme \"red\" and missing component \"Card\" returns \"dark_red\"', () => {\n    const parent = new ThemeManager(\n      {\n        name: 'dark',\n      },\n      'root'\n    )\n    const child1 = new ThemeManager(\n      {\n        name: 'red',\n      },\n      parent\n    )\n    expect(child1.state.name).toBe('dark_red')\n    const child2 = new ThemeManager(\n      {\n        componentName: 'Card',\n      },\n      child1\n    )\n    expect(child2.state.name).toBe('dark_red')\n  })\n\n  test('Changes \"light\" to \"dark\"', () => {\n    const parent = new ThemeManager(\n      {\n        name: 'light',\n      },\n      'root'\n    )\n    const child = new ThemeManager(\n      {\n        name: 'dark',\n      },\n      parent\n    )\n    expect(parent.state.name).toBe('light')\n    expect(child.state.name).toBe('dark')\n  })\n\n  test('Inverts \"light\" to \"dark\"', () => {\n    const parent = new ThemeManager(\n      {\n        name: 'light',\n      },\n      'root'\n    )\n    const child1 = new ThemeManager(\n      {\n        inverse: true,\n      },\n      parent\n    )\n    expect(child1.state.name).toBe('dark')\n  })\n\n  test('Inverts \"light_red\" to \"dark_red\"', () => {\n    const parent = new ThemeManager(\n      {\n        name: 'light',\n      },\n      'root'\n    )\n    const child1 = new ThemeManager(\n      {\n        name: 'red',\n        inverse: true,\n      },\n      parent\n    )\n    expect(child1.state.name).toBe('dark_red')\n  })\n\n  test('Updates state', () => {\n    const parent = new ThemeManager(\n      {\n        name: 'light',\n      },\n      'root'\n    )\n    const newState = parent.updateState({\n      name: 'dark',\n    })\n    expect(newState).toMatchInlineSnapshot(`\n      {\n        \"className\": \"t_dark\",\n        \"name\": \"dark\",\n        \"parentName\": \"\",\n        \"theme\": {\n          \"background\": {\n            \"isVar\": true,\n            \"key\": \"color-2\",\n            \"name\": \"background\",\n            \"val\": \"#000\",\n            \"variable\": \"\",\n          },\n          \"color\": {\n            \"isVar\": true,\n            \"key\": \"color-1\",\n            \"name\": \"color\",\n            \"val\": \"#fff\",\n            \"variable\": \"\",\n          },\n        },\n      }\n    `)\n    expect(parent.state.name).toBe('dark')\n  })\n\n  test('Returns parent on empty', () => {\n    const parent = new ThemeManager(\n      {\n        name: 'light',\n      },\n      'root'\n    )\n    const child = new ThemeManager(\n      {\n        name: null,\n      },\n      parent\n    )\n    expect(child).toBe(parent)\n  })\n\n  test('Resets theme', () => {\n    const parent = new ThemeManager(\n      {\n        name: 'light',\n      },\n      'root'\n    )\n    const child = new ThemeManager(\n      {\n        name: 'dark',\n      },\n      parent\n    )\n    expect(child.state.name).toBe('dark')\n    expect(child.parentManager).toBe(parent)\n    const child2 = new ThemeManager(\n      {\n        reset: true,\n      },\n      child\n    )\n    expect(child2.parentManager).toBe(child)\n    expect(child2.state.name).toBe('light')\n  })\n\n  test('Nested invert and reset', () => {\n    const parent = new ThemeManager(\n      {\n        name: 'light',\n      },\n      'root'\n    )\n    const child = new ThemeManager(\n      {\n        name: 'dark',\n      },\n      parent\n    )\n    const child2 = new ThemeManager(\n      {\n        reset: true,\n      },\n      child\n    )\n    const child3 = new ThemeManager(\n      {\n        inverse: true,\n      },\n      child2\n    )\n    expect(child3.state.name).toBe('dark')\n  })\n\n  test('Updates from null the new theme nested 3 themes', () => {\n    const a = new ThemeManager(\n      {\n        name: 'dark',\n      },\n      'root'\n    )\n    const b = new ThemeManager(\n      {\n        name: 'red',\n      },\n      a\n    )\n    expect(b.state.name).toBe('dark_red')\n    const c = new ThemeManager(\n      {\n        name: 'alt2',\n      },\n      b\n    )\n    expect(c.state.name).toBe('dark_red_alt2')\n  })\n\n  test('Ignored dup themes', () => {\n    const a = new ThemeManager(\n      {\n        name: 'dark',\n      },\n      'root'\n    )\n    const b = new ThemeManager(\n      {\n        name: 'dark',\n      },\n      a\n    )\n    expect(b === a).toBe(true)\n  })\n\n  test('Nested component themes fallback to grandparents', () => {\n    const parent = new ThemeManager(\n      {\n        name: 'dark',\n      },\n      'root'\n    )\n    const child = new ThemeManager(\n      {\n        name: 'red',\n        componentName: 'Button',\n      },\n      parent\n    )\n    const child2 = new ThemeManager(\n      {\n        name: 'blue',\n      },\n      child\n    )\n    expect(child2.state.name).toBe('dark_blue')\n    const child3 = new ThemeManager(\n      {\n        componentName: 'Button',\n      },\n      child2\n    )\n    expect(child3.state.name).toBe('dark_blue_Button')\n  })\n\n  test(`Component theme with sub component that doesn't exist keeps same theme`, () => {\n    const parent = new ThemeManager(\n      {\n        name: 'dark',\n      },\n      'root'\n    )\n    const child = new ThemeManager(\n      {\n        name: 'red',\n        componentName: 'Button',\n      },\n      parent\n    )\n    const child2 = new ThemeManager(\n      {\n        componentName: 'Spacer',\n      },\n      child\n    )\n    expect(child2).toBe(child)\n  })\n\n  test(`Doesn't find invalid parent when only passing component`, () => {\n    expect(!!conf.themes['dark_Card']).toBeTruthy()\n\n    const parent = new ThemeManager(\n      {\n        name: 'dark_red',\n      },\n      'root'\n    )\n\n    const child = new ThemeManager(\n      {\n        componentName: 'Card',\n      },\n      parent\n    )\n\n    // dont find dark_Card because dark_red is highest it should climb\n    expect(child.state.name).toBe(parent.state.name)\n  })\n\n  test(`Finds sub-theme when componentName and name are passed but componentName doesn't exist`, () => {\n    const parent = new ThemeManager(\n      {\n        name: 'dark',\n      },\n      'root'\n    )\n\n    const child = new ThemeManager(\n      {\n        name: 'red',\n        componentName: 'Missing',\n      },\n      parent\n    )\n\n    // dont find dark_Card because dark_red is highest it should climb\n    expect(child.state.name).toBe('dark_red')\n  })\n\n  test('Uses the full className without the light/dark prefix', () => {\n    const parent = new ThemeManager(\n      {\n        name: 'dark',\n      },\n      'root'\n    )\n    const child = new ThemeManager(\n      {\n        name: 'red_alt2',\n      },\n      parent\n    )\n    expect(child.state.className).toBe('t_red_alt2')\n\n    const child2 = new ThemeManager(\n      {\n        name: 'red',\n      },\n      parent\n    )\n    const child3 = new ThemeManager(\n      {\n        name: 'alt2',\n      },\n      child2\n    )\n    expect(child3.state.className).toBe('t_red_alt2')\n  })\n\n  test('Finds component dark_red + Button', () => {\n    const parent = new ThemeManager(\n      {\n        name: 'dark_red',\n      },\n      'root'\n    )\n    const child = new ThemeManager(\n      {\n        name: 'dark_red',\n        componentName: 'Button',\n      },\n      parent\n    )\n    expect(child.state.className).toBe('t_red_Button')\n    expect(child.state.name).toBe('dark_red_Button')\n  })\n\n  test('Drops componentName if only regular name found at stronger level', () => {\n    const parent = new ThemeManager(\n      {\n        name: 'dark_red',\n      },\n      'root'\n    )\n    const child = new ThemeManager(\n      {\n        name: 'alt1',\n        componentName: 'Button',\n      },\n      parent\n    )\n    expect(child.state.name).toBe('dark_red_alt1')\n  })\n\n  test('Component name + theme change when nested already', () => {\n    const parent = new ThemeManager(\n      {\n        name: 'dark_red',\n      },\n      'root'\n    )\n    const child = new ThemeManager(\n      {\n        name: 'yellow',\n        componentName: 'Button',\n      },\n      parent\n    )\n    expect(child.state.name).toBe('dark_yellow_Button')\n  })\n\n  test('Component name + name finds one up when component name missing', () => {\n    const parent = new ThemeManager(\n      {\n        name: 'dark_red_alt1',\n      },\n      'root'\n    )\n    const child = new ThemeManager(\n      {\n        name: 'alt2',\n        componentName: 'Missing',\n      },\n      parent\n    )\n    expect(child.state.name).toBe('dark_red_alt2')\n  })\n})\n"],
+  "mappings": "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",
+  "names": []
+}

package/dist/esm/helpers/expandStyles.js

@@ -1,5 +1,5 @@
 import { isWeb } from "@tamagui/constants";
-import { normalizeCSSColor } from "@tamagui/normalize-css-color";
+import normalizeCSSColor from "@tamagui/normalize-css-color";
 import { getConfig } from "../config";
 import { expandStyle } from "./expandStyle";
 import { normalizeColor, rgba } from "./normalizeColor";

package/dist/esm/helpers/expandStyles.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/helpers/expandStyles.ts"],
-  "sourcesContent": ["import { isWeb } from '@tamagui/constants'\nimport { normalizeCSSColor } from '@tamagui/normalize-css-color'\n\nimport { getConfig } from '../config'\nimport { expandStyle } from './expandStyle'\nimport { normalizeColor, rgba } from './normalizeColor'\nimport { normalizeValueWithProperty } from './normalizeValueWithProperty.js'\nimport { pseudoDescriptors } from './pseudoDescriptors'\n\nlet shorthands: Record<string, string> | null = null\nexport const defaultOffset = { height: 0, width: 0 }\n\n/**\n * This is what you want to run before Object.assign() a style onto another.\n * It does the following:\n *   1. Turns user shorthands into longhands, ie px = paddingHorizontal\n *   2. Normalizes various inconsistent styles to be more consistent\n *   3. Expands react-native shorthands, ie paddingHorizontal => paddingLeft, paddingRight\n */\n\nexport function expandStyles(style: Record<string, any>, config = getConfig()) {\n  const res: Record<string, any> = {}\n\n  for (let key in style) {\n    shorthands = shorthands || (config ? config.shorthands : null)\n    if (shorthands) {\n      key = shorthands[key] || key\n    }\n    if (key in pseudoDescriptors) {\n      res[key] = expandStyles(style[key])\n      continue\n    }\n    const val = normalizeValueWithProperty(style[key], key)\n    // expand react-native shorthands\n    const out = expandStyle(key, val)\n    if (out) {\n      Object.assign(res, Object.fromEntries(out))\n    } else {\n      res[key] = val\n    }\n  }\n\n  fixStyles(res)\n\n  return res\n}\n\nexport function fixStyles(style: Record<string, any>) {\n  if (style.shadowRadius) {\n    Object.assign(style, normalizeShadow(style))\n  }\n\n  // ensure border style set by default to solid\n  for (const key in borderDefaults) {\n    if (style[key] && !style[borderDefaults[key]]) {\n      style[borderDefaults[key]] = 'solid'\n    }\n  }\n}\n\nconst borderDefaults = {\n  borderWidth: 'borderStyle',\n  borderBottomWidth: 'borderBottomStyle',\n  borderTopWidth: 'borderTopStyle',\n  borderLeftWidth: 'borderLeftStyle',\n  borderRightWidth: 'borderRightStyle',\n}\n\nfunction normalizeShadow({\n  shadowColor,\n  shadowOffset,\n  shadowOpacity,\n  shadowRadius,\n}: Record<string, any>) {\n  const { height, width } = shadowOffset || defaultOffset\n  const colorStr = String(shadowColor || 'black')\n  return {\n    shadowOffset: {\n      width: normalizeValueWithProperty(width || 0),\n      height: normalizeValueWithProperty(height || 0),\n    },\n    shadowRadius: normalizeValueWithProperty(shadowRadius || 0),\n    ...(isWeb && {\n      shadowColor: normalizeColor(colorStr, shadowOpacity),\n    }),\n    ...(process.env.TAMAGUI_TARGET === 'native' &&\n      (() => {\n        // on native fix bug - shadows behave better if turned into non-alpha rgb() + shadowOpacity\n        const val = normalizeCSSColor(colorStr)\n        if (!val) {\n          if (process.env.NODE_ENV === 'development') {\n            // eslint-disable-next-line no-console\n            console.warn('No rgba form', colorStr)\n          }\n          return {\n            shadowColor,\n            shadowOpacity,\n          }\n        }\n        const { r, g, b, a } = rgba(val)\n        return {\n          shadowColor: `rgb(${r},${g},${b})`,\n          shadowOpacity: shadowOpacity ?? a,\n        }\n      })()),\n  }\n}\n"],
-  "mappings": "AAAA,SAAS,aAAa;AACtB,SAAS,yBAAyB;AAElC,SAAS,iBAAiB;AAC1B,SAAS,mBAAmB;AAC5B,SAAS,gBAAgB,YAAY;AACrC,SAAS,kCAAkC;AAC3C,SAAS,yBAAyB;AAElC,IAAI,aAA4C;AACzC,MAAM,gBAAgB,EAAE,QAAQ,GAAG,OAAO,EAAE;AAU5C,SAAS,aAAa,OAA4B,SAAS,UAAU,GAAG;AAC7E,QAAM,MAA2B,CAAC;AAElC,WAAS,OAAO,OAAO;AACrB,iBAAa,eAAe,SAAS,OAAO,aAAa;AACzD,QAAI,YAAY;AACd,YAAM,WAAW,GAAG,KAAK;AAAA,IAC3B;AACA,QAAI,OAAO,mBAAmB;AAC5B,UAAI,GAAG,IAAI,aAAa,MAAM,GAAG,CAAC;AAClC;AAAA,IACF;AACA,UAAM,MAAM,2BAA2B,MAAM,GAAG,GAAG,GAAG;AAEtD,UAAM,MAAM,YAAY,KAAK,GAAG;AAChC,QAAI,KAAK;AACP,aAAO,OAAO,KAAK,OAAO,YAAY,GAAG,CAAC;AAAA,IAC5C,OAAO;AACL,UAAI,GAAG,IAAI;AAAA,IACb;AAAA,EACF;AAEA,YAAU,GAAG;AAEb,SAAO;AACT;AAEO,SAAS,UAAU,OAA4B;AACpD,MAAI,MAAM,cAAc;AACtB,WAAO,OAAO,OAAO,gBAAgB,KAAK,CAAC;AAAA,EAC7C;AAGA,aAAW,OAAO,gBAAgB;AAChC,QAAI,MAAM,GAAG,KAAK,CAAC,MAAM,eAAe,GAAG,CAAC,GAAG;AAC7C,YAAM,eAAe,GAAG,CAAC,IAAI;AAAA,IAC/B;AAAA,EACF;AACF;AAEA,MAAM,iBAAiB;AAAA,EACrB,aAAa;AAAA,EACb,mBAAmB;AAAA,EACnB,gBAAgB;AAAA,EAChB,iBAAiB;AAAA,EACjB,kBAAkB;AACpB;AAEA,SAAS,gBAAgB;AAAA,EACvB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAwB;AACtB,QAAM,EAAE,QAAQ,MAAM,IAAI,gBAAgB;AAC1C,QAAM,WAAW,OAAO,eAAe,OAAO;AAC9C,SAAO;AAAA,IACL,cAAc;AAAA,MACZ,OAAO,2BAA2B,SAAS,CAAC;AAAA,MAC5C,QAAQ,2BAA2B,UAAU,CAAC;AAAA,IAChD;AAAA,IACA,cAAc,2BAA2B,gBAAgB,CAAC;AAAA,IAC1D,GAAI,SAAS;AAAA,MACX,aAAa,eAAe,UAAU,aAAa;AAAA,IACrD;AAAA,IACA,GAAI,QAAQ,IAAI,mBAAmB,aAChC,MAAM;AAEL,YAAM,MAAM,kBAAkB,QAAQ;AACtC,UAAI,CAAC,KAAK;AACR,YAAI,QAAQ,IAAI,aAAa,eAAe;AAE1C,kBAAQ,KAAK,gBAAgB,QAAQ;AAAA,QACvC;AACA,eAAO;AAAA,UACL;AAAA,UACA;AAAA,QACF;AAAA,MACF;AACA,YAAM,EAAE,GAAG,GAAG,GAAG,EAAE,IAAI,KAAK,GAAG;AAC/B,aAAO;AAAA,QACL,aAAa,OAAO,KAAK,KAAK;AAAA,QAC9B,eAAe,iBAAiB;AAAA,MAClC;AAAA,IACF,GAAG;AAAA,EACP;AACF;",
+  "sourcesContent": ["import { isWeb } from '@tamagui/constants'\nimport normalizeCSSColor from '@tamagui/normalize-css-color'\n\nimport { getConfig } from '../config'\nimport { expandStyle } from './expandStyle'\nimport { normalizeColor, rgba } from './normalizeColor'\nimport { normalizeValueWithProperty } from './normalizeValueWithProperty.js'\nimport { pseudoDescriptors } from './pseudoDescriptors'\n\nlet shorthands: Record<string, string> | null = null\nexport const defaultOffset = { height: 0, width: 0 }\n\n/**\n * This is what you want to run before Object.assign() a style onto another.\n * It does the following:\n *   1. Turns user shorthands into longhands, ie px = paddingHorizontal\n *   2. Normalizes various inconsistent styles to be more consistent\n *   3. Expands react-native shorthands, ie paddingHorizontal => paddingLeft, paddingRight\n */\n\nexport function expandStyles(style: Record<string, any>, config = getConfig()) {\n  const res: Record<string, any> = {}\n\n  for (let key in style) {\n    shorthands = shorthands || (config ? config.shorthands : null)\n    if (shorthands) {\n      key = shorthands[key] || key\n    }\n    if (key in pseudoDescriptors) {\n      res[key] = expandStyles(style[key])\n      continue\n    }\n    const val = normalizeValueWithProperty(style[key], key)\n    // expand react-native shorthands\n    const out = expandStyle(key, val)\n    if (out) {\n      Object.assign(res, Object.fromEntries(out))\n    } else {\n      res[key] = val\n    }\n  }\n\n  fixStyles(res)\n\n  return res\n}\n\nexport function fixStyles(style: Record<string, any>) {\n  if (style.shadowRadius) {\n    Object.assign(style, normalizeShadow(style))\n  }\n\n  // ensure border style set by default to solid\n  for (const key in borderDefaults) {\n    if (style[key] && !style[borderDefaults[key]]) {\n      style[borderDefaults[key]] = 'solid'\n    }\n  }\n}\n\nconst borderDefaults = {\n  borderWidth: 'borderStyle',\n  borderBottomWidth: 'borderBottomStyle',\n  borderTopWidth: 'borderTopStyle',\n  borderLeftWidth: 'borderLeftStyle',\n  borderRightWidth: 'borderRightStyle',\n}\n\nfunction normalizeShadow({\n  shadowColor,\n  shadowOffset,\n  shadowOpacity,\n  shadowRadius,\n}: Record<string, any>) {\n  const { height, width } = shadowOffset || defaultOffset\n  const colorStr = String(shadowColor || 'black')\n  return {\n    shadowOffset: {\n      width: normalizeValueWithProperty(width || 0),\n      height: normalizeValueWithProperty(height || 0),\n    },\n    shadowRadius: normalizeValueWithProperty(shadowRadius || 0),\n    ...(isWeb && {\n      shadowColor: normalizeColor(colorStr, shadowOpacity),\n    }),\n    ...(process.env.TAMAGUI_TARGET === 'native' &&\n      (() => {\n        // on native fix bug - shadows behave better if turned into non-alpha rgb() + shadowOpacity\n        const val = normalizeCSSColor(colorStr)\n        if (!val) {\n          if (process.env.NODE_ENV === 'development') {\n            // eslint-disable-next-line no-console\n            console.warn('No rgba form', colorStr)\n          }\n          return {\n            shadowColor,\n            shadowOpacity,\n          }\n        }\n        const { r, g, b, a } = rgba(val)\n        return {\n          shadowColor: `rgb(${r},${g},${b})`,\n          shadowOpacity: shadowOpacity ?? a,\n        }\n      })()),\n  }\n}\n"],
+  "mappings": "AAAA,SAAS,aAAa;AACtB,OAAO,uBAAuB;AAE9B,SAAS,iBAAiB;AAC1B,SAAS,mBAAmB;AAC5B,SAAS,gBAAgB,YAAY;AACrC,SAAS,kCAAkC;AAC3C,SAAS,yBAAyB;AAElC,IAAI,aAA4C;AACzC,MAAM,gBAAgB,EAAE,QAAQ,GAAG,OAAO,EAAE;AAU5C,SAAS,aAAa,OAA4B,SAAS,UAAU,GAAG;AAC7E,QAAM,MAA2B,CAAC;AAElC,WAAS,OAAO,OAAO;AACrB,iBAAa,eAAe,SAAS,OAAO,aAAa;AACzD,QAAI,YAAY;AACd,YAAM,WAAW,GAAG,KAAK;AAAA,IAC3B;AACA,QAAI,OAAO,mBAAmB;AAC5B,UAAI,GAAG,IAAI,aAAa,MAAM,GAAG,CAAC;AAClC;AAAA,IACF;AACA,UAAM,MAAM,2BAA2B,MAAM,GAAG,GAAG,GAAG;AAEtD,UAAM,MAAM,YAAY,KAAK,GAAG;AAChC,QAAI,KAAK;AACP,aAAO,OAAO,KAAK,OAAO,YAAY,GAAG,CAAC;AAAA,IAC5C,OAAO;AACL,UAAI,GAAG,IAAI;AAAA,IACb;AAAA,EACF;AAEA,YAAU,GAAG;AAEb,SAAO;AACT;AAEO,SAAS,UAAU,OAA4B;AACpD,MAAI,MAAM,cAAc;AACtB,WAAO,OAAO,OAAO,gBAAgB,KAAK,CAAC;AAAA,EAC7C;AAGA,aAAW,OAAO,gBAAgB;AAChC,QAAI,MAAM,GAAG,KAAK,CAAC,MAAM,eAAe,GAAG,CAAC,GAAG;AAC7C,YAAM,eAAe,GAAG,CAAC,IAAI;AAAA,IAC/B;AAAA,EACF;AACF;AAEA,MAAM,iBAAiB;AAAA,EACrB,aAAa;AAAA,EACb,mBAAmB;AAAA,EACnB,gBAAgB;AAAA,EAChB,iBAAiB;AAAA,EACjB,kBAAkB;AACpB;AAEA,SAAS,gBAAgB;AAAA,EACvB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAwB;AACtB,QAAM,EAAE,QAAQ,MAAM,IAAI,gBAAgB;AAC1C,QAAM,WAAW,OAAO,eAAe,OAAO;AAC9C,SAAO;AAAA,IACL,cAAc;AAAA,MACZ,OAAO,2BAA2B,SAAS,CAAC;AAAA,MAC5C,QAAQ,2BAA2B,UAAU,CAAC;AAAA,IAChD;AAAA,IACA,cAAc,2BAA2B,gBAAgB,CAAC;AAAA,IAC1D,GAAI,SAAS;AAAA,MACX,aAAa,eAAe,UAAU,aAAa;AAAA,IACrD;AAAA,IACA,GAAI,QAAQ,IAAI,mBAAmB,aAChC,MAAM;AAEL,YAAM,MAAM,kBAAkB,QAAQ;AACtC,UAAI,CAAC,KAAK;AACR,YAAI,QAAQ,IAAI,aAAa,eAAe;AAE1C,kBAAQ,KAAK,gBAAgB,QAAQ;AAAA,QACvC;AACA,eAAO;AAAA,UACL;AAAA,UACA;AAAA,QACF;AAAA,MACF;AACA,YAAM,EAAE,GAAG,GAAG,GAAG,EAAE,IAAI,KAAK,GAAG;AAC/B,aAAO;AAAA,QACL,aAAa,OAAO,KAAK,KAAK;AAAA,QAC9B,eAAe,iBAAiB;AAAA,MAClC;AAAA,IACF,GAAG;AAAA,EACP;AACF;",
   "names": []
 }

package/dist/esm/helpers/expandStyles.mjs

@@ -1,5 +1,5 @@
 import { isWeb } from "@tamagui/constants";
-import { normalizeCSSColor } from "@tamagui/normalize-css-color";
+import normalizeCSSColor from "@tamagui/normalize-css-color";
 import { getConfig } from "../config";
 import { expandStyle } from "./expandStyle";
 import { normalizeColor, rgba } from "./normalizeColor";

package/dist/esm/helpers/expandStyles.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/helpers/expandStyles.ts"],
-  "sourcesContent": ["import { isWeb } from '@tamagui/constants'\nimport { normalizeCSSColor } from '@tamagui/normalize-css-color'\n\nimport { getConfig } from '../config'\nimport { expandStyle } from './expandStyle'\nimport { normalizeColor, rgba } from './normalizeColor'\nimport { normalizeValueWithProperty } from './normalizeValueWithProperty.js'\nimport { pseudoDescriptors } from './pseudoDescriptors'\n\nlet shorthands: Record<string, string> | null = null\nexport const defaultOffset = { height: 0, width: 0 }\n\n/**\n * This is what you want to run before Object.assign() a style onto another.\n * It does the following:\n *   1. Turns user shorthands into longhands, ie px = paddingHorizontal\n *   2. Normalizes various inconsistent styles to be more consistent\n *   3. Expands react-native shorthands, ie paddingHorizontal => paddingLeft, paddingRight\n */\n\nexport function expandStyles(style: Record<string, any>, config = getConfig()) {\n  const res: Record<string, any> = {}\n\n  for (let key in style) {\n    shorthands = shorthands || (config ? config.shorthands : null)\n    if (shorthands) {\n      key = shorthands[key] || key\n    }\n    if (key in pseudoDescriptors) {\n      res[key] = expandStyles(style[key])\n      continue\n    }\n    const val = normalizeValueWithProperty(style[key], key)\n    // expand react-native shorthands\n    const out = expandStyle(key, val)\n    if (out) {\n      Object.assign(res, Object.fromEntries(out))\n    } else {\n      res[key] = val\n    }\n  }\n\n  fixStyles(res)\n\n  return res\n}\n\nexport function fixStyles(style: Record<string, any>) {\n  if (style.shadowRadius) {\n    Object.assign(style, normalizeShadow(style))\n  }\n\n  // ensure border style set by default to solid\n  for (const key in borderDefaults) {\n    if (style[key] && !style[borderDefaults[key]]) {\n      style[borderDefaults[key]] = 'solid'\n    }\n  }\n}\n\nconst borderDefaults = {\n  borderWidth: 'borderStyle',\n  borderBottomWidth: 'borderBottomStyle',\n  borderTopWidth: 'borderTopStyle',\n  borderLeftWidth: 'borderLeftStyle',\n  borderRightWidth: 'borderRightStyle',\n}\n\nfunction normalizeShadow({\n  shadowColor,\n  shadowOffset,\n  shadowOpacity,\n  shadowRadius,\n}: Record<string, any>) {\n  const { height, width } = shadowOffset || defaultOffset\n  const colorStr = String(shadowColor || 'black')\n  return {\n    shadowOffset: {\n      width: normalizeValueWithProperty(width || 0),\n      height: normalizeValueWithProperty(height || 0),\n    },\n    shadowRadius: normalizeValueWithProperty(shadowRadius || 0),\n    ...(isWeb && {\n      shadowColor: normalizeColor(colorStr, shadowOpacity),\n    }),\n    ...(process.env.TAMAGUI_TARGET === 'native' &&\n      (() => {\n        // on native fix bug - shadows behave better if turned into non-alpha rgb() + shadowOpacity\n        const val = normalizeCSSColor(colorStr)\n        if (!val) {\n          if (process.env.NODE_ENV === 'development') {\n            // eslint-disable-next-line no-console\n            console.warn('No rgba form', colorStr)\n          }\n          return {\n            shadowColor,\n            shadowOpacity,\n          }\n        }\n        const { r, g, b, a } = rgba(val)\n        return {\n          shadowColor: `rgb(${r},${g},${b})`,\n          shadowOpacity: shadowOpacity ?? a,\n        }\n      })()),\n  }\n}\n"],
-  "mappings": "AAAA,SAAS,aAAa;AACtB,SAAS,yBAAyB;AAElC,SAAS,iBAAiB;AAC1B,SAAS,mBAAmB;AAC5B,SAAS,gBAAgB,YAAY;AACrC,SAAS,kCAAkC;AAC3C,SAAS,yBAAyB;AAElC,IAAI,aAA4C;AACzC,MAAM,gBAAgB,EAAE,QAAQ,GAAG,OAAO,EAAE;AAU5C,SAAS,aAAa,OAA4B,SAAS,UAAU,GAAG;AAC7E,QAAM,MAA2B,CAAC;AAElC,WAAS,OAAO,OAAO;AACrB,iBAAa,eAAe,SAAS,OAAO,aAAa;AACzD,QAAI,YAAY;AACd,YAAM,WAAW,GAAG,KAAK;AAAA,IAC3B;AACA,QAAI,OAAO,mBAAmB;AAC5B,UAAI,GAAG,IAAI,aAAa,MAAM,GAAG,CAAC;AAClC;AAAA,IACF;AACA,UAAM,MAAM,2BAA2B,MAAM,GAAG,GAAG,GAAG;AAEtD,UAAM,MAAM,YAAY,KAAK,GAAG;AAChC,QAAI,KAAK;AACP,aAAO,OAAO,KAAK,OAAO,YAAY,GAAG,CAAC;AAAA,IAC5C,OAAO;AACL,UAAI,GAAG,IAAI;AAAA,IACb;AAAA,EACF;AAEA,YAAU,GAAG;AAEb,SAAO;AACT;AAEO,SAAS,UAAU,OAA4B;AACpD,MAAI,MAAM,cAAc;AACtB,WAAO,OAAO,OAAO,gBAAgB,KAAK,CAAC;AAAA,EAC7C;AAGA,aAAW,OAAO,gBAAgB;AAChC,QAAI,MAAM,GAAG,KAAK,CAAC,MAAM,eAAe,GAAG,CAAC,GAAG;AAC7C,YAAM,eAAe,GAAG,CAAC,IAAI;AAAA,IAC/B;AAAA,EACF;AACF;AAEA,MAAM,iBAAiB;AAAA,EACrB,aAAa;AAAA,EACb,mBAAmB;AAAA,EACnB,gBAAgB;AAAA,EAChB,iBAAiB;AAAA,EACjB,kBAAkB;AACpB;AAEA,SAAS,gBAAgB;AAAA,EACvB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAwB;AACtB,QAAM,EAAE,QAAQ,MAAM,IAAI,gBAAgB;AAC1C,QAAM,WAAW,OAAO,eAAe,OAAO;AAC9C,SAAO;AAAA,IACL,cAAc;AAAA,MACZ,OAAO,2BAA2B,SAAS,CAAC;AAAA,MAC5C,QAAQ,2BAA2B,UAAU,CAAC;AAAA,IAChD;AAAA,IACA,cAAc,2BAA2B,gBAAgB,CAAC;AAAA,IAC1D,GAAI,SAAS;AAAA,MACX,aAAa,eAAe,UAAU,aAAa;AAAA,IACrD;AAAA,IACA,GAAI,QAAQ,IAAI,mBAAmB,aAChC,MAAM;AAEL,YAAM,MAAM,kBAAkB,QAAQ;AACtC,UAAI,CAAC,KAAK;AACR,YAAI,QAAQ,IAAI,aAAa,eAAe;AAE1C,kBAAQ,KAAK,gBAAgB,QAAQ;AAAA,QACvC;AACA,eAAO;AAAA,UACL;AAAA,UACA;AAAA,QACF;AAAA,MACF;AACA,YAAM,EAAE,GAAG,GAAG,GAAG,EAAE,IAAI,KAAK,GAAG;AAC/B,aAAO;AAAA,QACL,aAAa,OAAO,KAAK,KAAK;AAAA,QAC9B,eAAe,iBAAiB;AAAA,MAClC;AAAA,IACF,GAAG;AAAA,EACP;AACF;",
+  "sourcesContent": ["import { isWeb } from '@tamagui/constants'\nimport normalizeCSSColor from '@tamagui/normalize-css-color'\n\nimport { getConfig } from '../config'\nimport { expandStyle } from './expandStyle'\nimport { normalizeColor, rgba } from './normalizeColor'\nimport { normalizeValueWithProperty } from './normalizeValueWithProperty.js'\nimport { pseudoDescriptors } from './pseudoDescriptors'\n\nlet shorthands: Record<string, string> | null = null\nexport const defaultOffset = { height: 0, width: 0 }\n\n/**\n * This is what you want to run before Object.assign() a style onto another.\n * It does the following:\n *   1. Turns user shorthands into longhands, ie px = paddingHorizontal\n *   2. Normalizes various inconsistent styles to be more consistent\n *   3. Expands react-native shorthands, ie paddingHorizontal => paddingLeft, paddingRight\n */\n\nexport function expandStyles(style: Record<string, any>, config = getConfig()) {\n  const res: Record<string, any> = {}\n\n  for (let key in style) {\n    shorthands = shorthands || (config ? config.shorthands : null)\n    if (shorthands) {\n      key = shorthands[key] || key\n    }\n    if (key in pseudoDescriptors) {\n      res[key] = expandStyles(style[key])\n      continue\n    }\n    const val = normalizeValueWithProperty(style[key], key)\n    // expand react-native shorthands\n    const out = expandStyle(key, val)\n    if (out) {\n      Object.assign(res, Object.fromEntries(out))\n    } else {\n      res[key] = val\n    }\n  }\n\n  fixStyles(res)\n\n  return res\n}\n\nexport function fixStyles(style: Record<string, any>) {\n  if (style.shadowRadius) {\n    Object.assign(style, normalizeShadow(style))\n  }\n\n  // ensure border style set by default to solid\n  for (const key in borderDefaults) {\n    if (style[key] && !style[borderDefaults[key]]) {\n      style[borderDefaults[key]] = 'solid'\n    }\n  }\n}\n\nconst borderDefaults = {\n  borderWidth: 'borderStyle',\n  borderBottomWidth: 'borderBottomStyle',\n  borderTopWidth: 'borderTopStyle',\n  borderLeftWidth: 'borderLeftStyle',\n  borderRightWidth: 'borderRightStyle',\n}\n\nfunction normalizeShadow({\n  shadowColor,\n  shadowOffset,\n  shadowOpacity,\n  shadowRadius,\n}: Record<string, any>) {\n  const { height, width } = shadowOffset || defaultOffset\n  const colorStr = String(shadowColor || 'black')\n  return {\n    shadowOffset: {\n      width: normalizeValueWithProperty(width || 0),\n      height: normalizeValueWithProperty(height || 0),\n    },\n    shadowRadius: normalizeValueWithProperty(shadowRadius || 0),\n    ...(isWeb && {\n      shadowColor: normalizeColor(colorStr, shadowOpacity),\n    }),\n    ...(process.env.TAMAGUI_TARGET === 'native' &&\n      (() => {\n        // on native fix bug - shadows behave better if turned into non-alpha rgb() + shadowOpacity\n        const val = normalizeCSSColor(colorStr)\n        if (!val) {\n          if (process.env.NODE_ENV === 'development') {\n            // eslint-disable-next-line no-console\n            console.warn('No rgba form', colorStr)\n          }\n          return {\n            shadowColor,\n            shadowOpacity,\n          }\n        }\n        const { r, g, b, a } = rgba(val)\n        return {\n          shadowColor: `rgb(${r},${g},${b})`,\n          shadowOpacity: shadowOpacity ?? a,\n        }\n      })()),\n  }\n}\n"],
+  "mappings": "AAAA,SAAS,aAAa;AACtB,OAAO,uBAAuB;AAE9B,SAAS,iBAAiB;AAC1B,SAAS,mBAAmB;AAC5B,SAAS,gBAAgB,YAAY;AACrC,SAAS,kCAAkC;AAC3C,SAAS,yBAAyB;AAElC,IAAI,aAA4C;AACzC,MAAM,gBAAgB,EAAE,QAAQ,GAAG,OAAO,EAAE;AAU5C,SAAS,aAAa,OAA4B,SAAS,UAAU,GAAG;AAC7E,QAAM,MAA2B,CAAC;AAElC,WAAS,OAAO,OAAO;AACrB,iBAAa,eAAe,SAAS,OAAO,aAAa;AACzD,QAAI,YAAY;AACd,YAAM,WAAW,GAAG,KAAK;AAAA,IAC3B;AACA,QAAI,OAAO,mBAAmB;AAC5B,UAAI,GAAG,IAAI,aAAa,MAAM,GAAG,CAAC;AAClC;AAAA,IACF;AACA,UAAM,MAAM,2BAA2B,MAAM,GAAG,GAAG,GAAG;AAEtD,UAAM,MAAM,YAAY,KAAK,GAAG;AAChC,QAAI,KAAK;AACP,aAAO,OAAO,KAAK,OAAO,YAAY,GAAG,CAAC;AAAA,IAC5C,OAAO;AACL,UAAI,GAAG,IAAI;AAAA,IACb;AAAA,EACF;AAEA,YAAU,GAAG;AAEb,SAAO;AACT;AAEO,SAAS,UAAU,OAA4B;AACpD,MAAI,MAAM,cAAc;AACtB,WAAO,OAAO,OAAO,gBAAgB,KAAK,CAAC;AAAA,EAC7C;AAGA,aAAW,OAAO,gBAAgB;AAChC,QAAI,MAAM,GAAG,KAAK,CAAC,MAAM,eAAe,GAAG,CAAC,GAAG;AAC7C,YAAM,eAAe,GAAG,CAAC,IAAI;AAAA,IAC/B;AAAA,EACF;AACF;AAEA,MAAM,iBAAiB;AAAA,EACrB,aAAa;AAAA,EACb,mBAAmB;AAAA,EACnB,gBAAgB;AAAA,EAChB,iBAAiB;AAAA,EACjB,kBAAkB;AACpB;AAEA,SAAS,gBAAgB;AAAA,EACvB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAwB;AACtB,QAAM,EAAE,QAAQ,MAAM,IAAI,gBAAgB;AAC1C,QAAM,WAAW,OAAO,eAAe,OAAO;AAC9C,SAAO;AAAA,IACL,cAAc;AAAA,MACZ,OAAO,2BAA2B,SAAS,CAAC;AAAA,MAC5C,QAAQ,2BAA2B,UAAU,CAAC;AAAA,IAChD;AAAA,IACA,cAAc,2BAA2B,gBAAgB,CAAC;AAAA,IAC1D,GAAI,SAAS;AAAA,MACX,aAAa,eAAe,UAAU,aAAa;AAAA,IACrD;AAAA,IACA,GAAI,QAAQ,IAAI,mBAAmB,aAChC,MAAM;AAEL,YAAM,MAAM,kBAAkB,QAAQ;AACtC,UAAI,CAAC,KAAK;AACR,YAAI,QAAQ,IAAI,aAAa,eAAe;AAE1C,kBAAQ,KAAK,gBAAgB,QAAQ;AAAA,QACvC;AACA,eAAO;AAAA,UACL;AAAA,UACA;AAAA,QACF;AAAA,MACF;AACA,YAAM,EAAE,GAAG,GAAG,GAAG,EAAE,IAAI,KAAK,GAAG;AAC/B,aAAO;AAAA,QACL,aAAa,OAAO,KAAK,KAAK;AAAA,QAC9B,eAAe,iBAAiB;AAAA,MAClC;AAAA,IACF,GAAG;AAAA,EACP;AACF;",
   "names": []
 }

package/dist/esm/helpers/getSplitStyles.js

@@ -59,6 +59,8 @@ if (process.env.TAMAGUI_TARGET === "native") {
     wordWrap: true,
     textOverflow: true,
     textDecorationDistance: true,
+    userSelect: true,
+    selectable: true,
     cursor: true,
     contain: true,
     boxSizing: true,
@@ -129,6 +131,9 @@ const getSplitStyles = (props, staticConfig, theme, state, parentSplitStyles, la
   if (cache.has(props)) {
     return cache.get(props);
   }
+  if (props.debug) {
+    console.log("props", props);
+  }
   conf = conf || getConfig();
   const { shorthands } = conf;
   const {
@@ -208,22 +213,16 @@ const getSplitStyles = (props, staticConfig, theme, state, parentSplitStyles, la
     let keyInit = propKeys[i];
     if (keyInit === "className")
       continue;
-    let valInit = props[keyInit];
+    const valInit = props[keyInit];
     if (keyInit in shorthands) {
       keyInit = shorthands[keyInit];
     }
-    if (process.env.TAMAGUI_TARGET === "native") {
-      if (keyInit === "userSelect") {
-        keyInit = "selectable";
-        valInit = valInit === "none" ? false : true;
-      } else if (keyInit.startsWith("data-") || keyInit.startsWith("aria-")) {
-        continue;
-      }
-    }
     if (keyInit in usedKeys)
       continue;
     if (keyInit in skipProps)
       continue;
+    if (!isWeb && keyInit.startsWith("data-"))
+      continue;
     if (typeof valInit === "string" && valInit[0] === "_") {
       if (keyInit in validStyleProps || keyInit.includes("-")) {
         if (shouldDoClasses) {
@@ -241,8 +240,7 @@ const getSplitStyles = (props, staticConfig, theme, state, parentSplitStyles, la
       }
       continue;
     }
-    const isMainStyle = keyInit === "style";
-    if (isMainStyle || keyInit.startsWith("_style")) {
+    if (keyInit === "style" || keyInit.startsWith("_style")) {
       if (!valInit)
         continue;
       const styles = Array.isArray(valInit) ? valInit : [valInit];
@@ -252,9 +250,8 @@ const getSplitStyles = (props, staticConfig, theme, state, parentSplitStyles, la
         if (!cur)
           continue;
         for (const key in cur) {
-          if (!isMainStyle && usedKeys[key]) {
+          if (usedKeys[key])
             continue;
-          }
           usedKeys[key] = 1;
           style[key] = cur[key];
         }
@@ -576,12 +573,10 @@ const getSplitStyles = (props, staticConfig, theme, state, parentSplitStyles, la
         }
         continue;
       }
-      if (process.env.TAMAGUI_TARGET === "native") {
-        if (key === "pointerEvents") {
-          usedKeys[key] = 1;
-          viewProps[key] = val;
-          continue;
-        }
+      if (!isWeb && key === "pointerEvents") {
+        usedKeys[key] = 1;
+        viewProps[key] = val;
+        continue;
       }
       if (key === "fontFamily" && !fontFamily && valInit && val) {
         fontFamily = valInit[0] === "$" ? valInit : val;
@@ -659,7 +654,7 @@ const getSplitStyles = (props, staticConfig, theme, state, parentSplitStyles, la
         for (const atomicStyle of atomic) {
           const key = atomicStyle.property;
           if (props.animateOnly && props.animateOnly.includes(key)) {
-            retainedStyles[key] = atomicStyle.value;
+            retainedStyles[key] = style[key];
           } else {
             addStyleToInsertRules(rulesToInsert, atomicStyle);
             mergeClassName(transforms, classNames, key, atomicStyle.identifier);