react-native-unistyles 3.0.0-rc.3 → 3.0.0-rc.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (63) hide show
  1. package/README.md +2 -2
  2. package/cxx/core/UnistylesCommitHook.cpp +8 -1
  3. package/cxx/core/UnistylesMountHook.cpp +1 -3
  4. package/lib/commonjs/reanimated/index.js +13 -0
  5. package/lib/commonjs/reanimated/index.js.map +1 -0
  6. package/lib/commonjs/reanimated/useAnimatedTheme.js +22 -0
  7. package/lib/commonjs/reanimated/useAnimatedTheme.js.map +1 -0
  8. package/lib/commonjs/reanimated/useAnimatedTheme.native.js +24 -0
  9. package/lib/commonjs/reanimated/useAnimatedTheme.native.js.map +1 -0
  10. package/lib/commonjs/web/shadowRegistry.js +7 -1
  11. package/lib/commonjs/web/shadowRegistry.js.map +1 -1
  12. package/lib/commonjs/web/types.js +2 -0
  13. package/lib/commonjs/web/types.js.map +1 -1
  14. package/lib/commonjs/web/utils/unistyle.js +6 -1
  15. package/lib/commonjs/web/utils/unistyle.js.map +1 -1
  16. package/lib/commonjs/web-only/getWebProps.js +19 -0
  17. package/lib/commonjs/web-only/getWebProps.js.map +1 -0
  18. package/lib/commonjs/web-only/index.js +13 -0
  19. package/lib/commonjs/web-only/index.js.map +1 -0
  20. package/lib/module/reanimated/index.js +4 -0
  21. package/lib/module/reanimated/index.js.map +1 -0
  22. package/lib/module/reanimated/useAnimatedTheme.js +17 -0
  23. package/lib/module/reanimated/useAnimatedTheme.js.map +1 -0
  24. package/lib/module/reanimated/useAnimatedTheme.native.js +19 -0
  25. package/lib/module/reanimated/useAnimatedTheme.native.js.map +1 -0
  26. package/lib/module/web/shadowRegistry.js +8 -2
  27. package/lib/module/web/shadowRegistry.js.map +1 -1
  28. package/lib/module/web/types.js +1 -1
  29. package/lib/module/web/types.js.map +1 -1
  30. package/lib/module/web/utils/unistyle.js +4 -0
  31. package/lib/module/web/utils/unistyle.js.map +1 -1
  32. package/lib/module/web-only/getWebProps.js +14 -0
  33. package/lib/module/web-only/getWebProps.js.map +1 -0
  34. package/lib/module/web-only/index.js +4 -0
  35. package/lib/module/web-only/index.js.map +1 -0
  36. package/lib/typescript/src/reanimated/index.d.ts +2 -0
  37. package/lib/typescript/src/reanimated/index.d.ts.map +1 -0
  38. package/lib/typescript/src/reanimated/useAnimatedTheme.d.ts +4 -0
  39. package/lib/typescript/src/reanimated/useAnimatedTheme.d.ts.map +1 -0
  40. package/lib/typescript/src/reanimated/useAnimatedTheme.native.d.ts +4 -0
  41. package/lib/typescript/src/reanimated/useAnimatedTheme.native.d.ts.map +1 -0
  42. package/lib/typescript/src/web/shadowRegistry.d.ts +2 -2
  43. package/lib/typescript/src/web/shadowRegistry.d.ts.map +1 -1
  44. package/lib/typescript/src/web/types.d.ts +3 -0
  45. package/lib/typescript/src/web/types.d.ts.map +1 -1
  46. package/lib/typescript/src/web/utils/unistyle.d.ts +2 -0
  47. package/lib/typescript/src/web/utils/unistyle.d.ts.map +1 -1
  48. package/lib/typescript/src/web-only/getWebProps.d.ts +7 -0
  49. package/lib/typescript/src/web-only/getWebProps.d.ts.map +1 -0
  50. package/lib/typescript/src/web-only/index.d.ts +2 -0
  51. package/lib/typescript/src/web-only/index.d.ts.map +1 -0
  52. package/package.json +26 -3
  53. package/plugin/index.js +93 -94
  54. package/reanimated/package.json +6 -0
  55. package/src/reanimated/index.ts +1 -0
  56. package/src/reanimated/useAnimatedTheme.native.ts +21 -0
  57. package/src/reanimated/useAnimatedTheme.ts +19 -0
  58. package/src/web/shadowRegistry.ts +10 -3
  59. package/src/web/types.ts +9 -4
  60. package/src/web/utils/unistyle.ts +5 -0
  61. package/src/web-only/getWebProps.ts +18 -0
  62. package/src/web-only/index.ts +2 -0
  63. package/web-only/package.json +6 -0
@@ -0,0 +1,2 @@
1
+ export { getWebProps } from './getWebProps';
2
+ //# sourceMappingURL=index.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/web-only/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAA"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "react-native-unistyles",
3
- "version": "3.0.0-rc.3",
3
+ "version": "3.0.0-rc.4",
4
4
  "description": "Level up your React Native StyleSheet",
5
5
  "scripts": {
6
6
  "test": "NODE_ENV=babel-test jest ./plugin",
@@ -51,8 +51,22 @@
51
51
  "types": "./lib/typescript/src/server/index.d.ts",
52
52
  "import": "./lib/module/server/index.js",
53
53
  "browser": "./lib/module/server/index.js",
54
- "react-native": "./src/server.ts",
54
+ "react-native": "./src/server/index.ts",
55
55
  "default": "./lib/commonjs/server/index.js"
56
+ },
57
+ "./web": {
58
+ "types": "./lib/typescript/src/web-only/index.d.ts",
59
+ "import": "./lib/module/web-only/index.js",
60
+ "browser": "./lib/module/web-only/index.js",
61
+ "react-native": "./src/web-only/index.ts",
62
+ "default": "./lib/commonjs/web-only/index.js"
63
+ },
64
+ "./reanimated": {
65
+ "types": "./lib/typescript/src/reanimated/index.d.ts",
66
+ "import": "./lib/module/reanimated/index.js",
67
+ "browser": "./lib/module/reanimated/index.js",
68
+ "react-native": "./src/reanimated/index.ts",
69
+ "default": "./lib/commonjs/reanimated/index.js"
56
70
  }
57
71
  },
58
72
  "files": [
@@ -66,6 +80,8 @@
66
80
  "web",
67
81
  "components",
68
82
  "server",
83
+ "web-only",
84
+ "reanimated",
69
85
  "react-native.config.js",
70
86
  "Unistyles.podspec",
71
87
  "!plugin/__tests__",
@@ -124,6 +140,7 @@
124
140
  "react-native": "0.77.1",
125
141
  "react-native-builder-bob": "0.37.0",
126
142
  "react-native-nitro-modules": "0.25.2",
143
+ "react-native-reanimated": "3.17.5",
127
144
  "react-native-web": "0.19.13",
128
145
  "react-test-renderer": "18.3.1",
129
146
  "release-it": "17.11.0",
@@ -134,7 +151,13 @@
134
151
  "react": "*",
135
152
  "react-native": ">=0.76.0",
136
153
  "react-native-edge-to-edge": "*",
137
- "react-native-nitro-modules": "*"
154
+ "react-native-nitro-modules": "*",
155
+ "react-native-reanimated": "*"
156
+ },
157
+ "peerDependenciesMeta": {
158
+ "react-native-reanimated": {
159
+ "optional": true
160
+ }
138
161
  },
139
162
  "workspaces": [
140
163
  "example",
package/plugin/index.js CHANGED
@@ -83,21 +83,10 @@ var NATIVE_COMPONENTS_PATHS = {
83
83
 
84
84
  // plugin/src/exotic.ts
85
85
  var t = __toESM(require("@babel/types"));
86
-
87
- // plugin/src/paths.ts
88
- var isWindows = process.platform === "win32";
89
- var toWinPath = (pathString) => {
90
- return pathString;
91
- };
92
- var toPlatformPath = (pathString) => {
93
- return isWindows ? toWinPath(pathString) : pathString;
94
- };
95
-
96
- // plugin/src/exotic.ts
97
- function handleExoticImport(path, state, exoticImport) {
98
- const specifiers = path.node.specifiers;
99
- const source = path.node.source;
100
- if (path.node.importKind !== "value") {
86
+ function handleExoticImport(path2, state, exoticImport) {
87
+ const specifiers = path2.node.specifiers;
88
+ const source = path2.node.source;
89
+ if (path2.node.importKind !== "value") {
101
90
  return;
102
91
  }
103
92
  specifiers.forEach((specifier) => {
@@ -112,22 +101,22 @@ function handleExoticImport(path, state, exoticImport) {
112
101
  const newImport = t.importDeclaration(
113
102
  [t.importDefaultSpecifier(t.identifier(specifier.local.name))],
114
103
  t.stringLiteral(
115
- state.opts.isLocal ? state.file.opts.filename?.split("react-native-unistyles").at(0)?.concat(toPlatformPath(`react-native-unistyles/components/native/${rule.mapTo}`)) ?? "" : toPlatformPath(`react-native-unistyles/components/native/${rule.mapTo}`)
104
+ state.opts.isLocal ? state.file.opts.filename?.split("react-native-unistyles").at(0)?.concat(`react-native-unistyles/components/native/${rule.mapTo}`) ?? "" : `react-native-unistyles/components/native/${rule.mapTo}`
116
105
  )
117
106
  );
118
- path.replaceWith(newImport);
107
+ path2.replaceWith(newImport);
119
108
  } else {
120
109
  const newImport = t.importDeclaration(
121
110
  [t.importSpecifier(t.identifier(rule.mapTo), t.identifier(rule.mapTo))],
122
111
  t.stringLiteral(
123
- state.opts.isLocal ? state.file.opts.filename?.split("react-native-unistyles").at(0)?.concat(toPlatformPath(`react-native-unistyles/components/native/${rule.mapTo}`)) ?? "" : toPlatformPath(`react-native-unistyles/components/native/${rule.mapTo}`)
112
+ state.opts.isLocal ? state.file.opts.filename?.split("react-native-unistyles").at(0)?.concat(`react-native-unistyles/components/native/${rule.mapTo}`) ?? "" : `react-native-unistyles/components/native/${rule.mapTo}`
124
113
  )
125
114
  );
126
- path.node.specifiers = specifiers.filter((s) => s !== specifier);
127
- if (path.node.specifiers.length === 0) {
128
- path.replaceWith(newImport);
115
+ path2.node.specifiers = specifiers.filter((s) => s !== specifier);
116
+ if (path2.node.specifiers.length === 0) {
117
+ path2.replaceWith(newImport);
129
118
  } else {
130
- path.insertBefore(newImport);
119
+ path2.insertBefore(newImport);
131
120
  }
132
121
  }
133
122
  return;
@@ -137,12 +126,12 @@ function handleExoticImport(path, state, exoticImport) {
137
126
 
138
127
  // plugin/src/import.ts
139
128
  var t2 = __toESM(require("@babel/types"));
140
- function addUnistylesImport(path, state) {
129
+ function addUnistylesImport(path2, state) {
141
130
  const localNames = Object.keys(state.reactNativeImports);
142
131
  const names = Object.values(state.reactNativeImports);
143
132
  const pairs = Object.entries(state.reactNativeImports);
144
133
  const nodesToRemove = [];
145
- path.node.body.forEach((node) => {
134
+ path2.node.body.forEach((node) => {
146
135
  if (t2.isImportDeclaration(node) && node.source.value === "react-native") {
147
136
  node.specifiers = node.specifiers.filter((specifier) => !localNames.some((name) => name === specifier.local.name));
148
137
  if (node.specifiers.length === 0) {
@@ -151,7 +140,7 @@ function addUnistylesImport(path, state) {
151
140
  }
152
141
  });
153
142
  names.forEach((name) => {
154
- const rnWebImport = path.node.body.find((node) => t2.isImportDeclaration(node) && node.source.value === toPlatformPath(`react-native-web/dist/exports/${name}`));
143
+ const rnWebImport = path2.node.body.find((node) => t2.isImportDeclaration(node) && node.source.value === `react-native-web/dist/exports/${name}`);
155
144
  if (rnWebImport) {
156
145
  rnWebImport.specifiers = [];
157
146
  }
@@ -160,34 +149,44 @@ function addUnistylesImport(path, state) {
160
149
  const newImport = t2.importDeclaration(
161
150
  [t2.importSpecifier(t2.identifier(localName), t2.identifier(name))],
162
151
  t2.stringLiteral(
163
- state.opts.isLocal ? state.file.opts.filename?.split("react-native-unistyles").at(0)?.concat(toPlatformPath(`react-native-unistyles/src/components/native/${name}`)) ?? "" : toPlatformPath(`react-native-unistyles/components/native/${name}`)
152
+ state.opts.isLocal ? state.file.opts.filename?.split("react-native-unistyles").at(0)?.concat(`react-native-unistyles/src/components/native/${name}`) ?? "" : `react-native-unistyles/components/native/${name}`
164
153
  )
165
154
  );
166
- path.node.body.unshift(newImport);
155
+ path2.node.body.unshift(newImport);
167
156
  });
168
- nodesToRemove.forEach((node) => path.node.body.splice(path.node.body.indexOf(node), 1));
157
+ nodesToRemove.forEach((node) => path2.node.body.splice(path2.node.body.indexOf(node), 1));
169
158
  }
170
159
  function isInsideNodeModules(state) {
171
160
  return state.file.opts.filename?.includes("node_modules") && !state.file.replaceWithUnistyles;
172
161
  }
173
- function addUnistylesRequire(path, state) {
162
+ function addUnistylesRequire(path2, state) {
174
163
  Object.entries(state.reactNativeImports).forEach(([componentName, uniqueName]) => {
175
164
  const newRequire = t2.variableDeclaration("const", [
176
165
  t2.variableDeclarator(
177
166
  t2.identifier(uniqueName),
178
167
  t2.callExpression(t2.identifier("require"), [
179
- t2.stringLiteral(toPlatformPath(`react-native-unistyles/src/components/native/${componentName}`))
168
+ t2.stringLiteral(`react-native-unistyles/src/components/native/${componentName}`)
180
169
  ])
181
170
  )
182
171
  ]);
183
- path.node.body.unshift(newRequire);
172
+ path2.node.body.unshift(newRequire);
184
173
  });
185
174
  }
186
175
 
176
+ // plugin/src/paths.ts
177
+ var import_node_path = __toESM(require("node:path"));
178
+ var isWindows = process.platform === "win32";
179
+ var toWinPath = (pathString) => {
180
+ return import_node_path.default.normalize(pathString).replace(/\//g, "\\");
181
+ };
182
+ var toPlatformPath = (pathString) => {
183
+ return isWindows ? toWinPath(pathString) : pathString;
184
+ };
185
+
187
186
  // plugin/src/ref.ts
188
187
  var t3 = __toESM(require("@babel/types"));
189
- function hasStringRef(path) {
190
- return path.node.openingElement.attributes.find(
188
+ function hasStringRef(path2) {
189
+ return path2.node.openingElement.attributes.find(
191
190
  (attr) => t3.isJSXAttribute(attr) && t3.isJSXIdentifier(attr.name, { name: "ref" }) && t3.isStringLiteral(attr.value)
192
191
  );
193
192
  }
@@ -324,8 +323,8 @@ function stringToUniqueId(str) {
324
323
  const absHash = Math.abs(hash);
325
324
  return absHash % 1e9;
326
325
  }
327
- function isUnistylesStyleSheet(path, state) {
328
- const { callee } = path.node;
326
+ function isUnistylesStyleSheet(path2, state) {
327
+ const { callee } = path2.node;
329
328
  if (!t4.isMemberExpression(callee) || !t4.isIdentifier(callee.property)) {
330
329
  return false;
331
330
  }
@@ -333,38 +332,38 @@ function isUnistylesStyleSheet(path, state) {
333
332
  const isRequire = state.file.hasUnistylesImport && callee.property.name === "create" && t4.isMemberExpression(callee.object) && t4.isIdentifier(callee.object.property) && t4.isIdentifier(callee.object.object) && callee.object.object.name === state.file.styleSheetLocalName && callee.object.property.name === "StyleSheet";
334
333
  return isImport || isRequire;
335
334
  }
336
- function isUnistylesCommonJSRequire(path, state) {
337
- const isRequire = t4.isIdentifier(path.node.callee) && path.node.arguments.length > 0 && t4.isStringLiteral(path.node.arguments[0]) && path.node.arguments[0].value === "react-native-unistyles";
338
- if (isRequire && t4.isVariableDeclarator(path.parent) && t4.isIdentifier(path.parent.id)) {
335
+ function isUnistylesCommonJSRequire(path2, state) {
336
+ const isRequire = t4.isIdentifier(path2.node.callee) && path2.node.arguments.length > 0 && t4.isStringLiteral(path2.node.arguments[0]) && path2.node.arguments[0].value === "react-native-unistyles";
337
+ if (isRequire && t4.isVariableDeclarator(path2.parent) && t4.isIdentifier(path2.parent.id)) {
339
338
  state.file.hasUnistylesImport = true;
340
- state.file.styleSheetLocalName = path.parent.id.name;
339
+ state.file.styleSheetLocalName = path2.parent.id.name;
341
340
  }
342
341
  return isRequire;
343
342
  }
344
- function isReactNativeCommonJSRequire(path, state) {
345
- const isRequire = t4.isIdentifier(path.node.callee) && path.node.arguments.length > 0 && path.node.callee.name === "require";
346
- const requireImportName = path.node.arguments.find((node) => t4.isStringLiteral(node));
343
+ function isReactNativeCommonJSRequire(path2, state) {
344
+ const isRequire = t4.isIdentifier(path2.node.callee) && path2.node.arguments.length > 0 && path2.node.callee.name === "require";
345
+ const requireImportName = path2.node.arguments.find((node) => t4.isStringLiteral(node));
347
346
  const isReactNativeRequire = isRequire && requireImportName && (requireImportName.value === "react-native" || requireImportName.value === "react-native-web/dist/index");
348
- if (isReactNativeRequire && t4.isVariableDeclarator(path.parent) && t4.isIdentifier(path.parent.id)) {
349
- state.file.reactNativeCommonJSName = path.parent.id.name;
347
+ if (isReactNativeRequire && t4.isVariableDeclarator(path2.parent) && t4.isIdentifier(path2.parent.id)) {
348
+ state.file.reactNativeCommonJSName = path2.parent.id.name;
350
349
  }
351
350
  return isRequire;
352
351
  }
353
- function isKindOfStyleSheet(path, state) {
352
+ function isKindOfStyleSheet(path2, state) {
354
353
  if (!state.file.forceProcessing && !state.file.hasUnistylesImport) {
355
354
  return false;
356
355
  }
357
- const { callee } = path.node;
356
+ const { callee } = path2.node;
358
357
  return t4.isMemberExpression(callee) && t4.isIdentifier(callee.property) && callee.property.name === "create" && t4.isIdentifier(callee.object);
359
358
  }
360
- function addStyleSheetTag(path, state) {
359
+ function addStyleSheetTag(path2, state) {
361
360
  const str = state.filename?.replace(state.cwd, "") ?? "";
362
361
  const uniqueId = stringToUniqueId(str) + ++state.file.tagNumber;
363
- path.node.arguments.push(t4.numericLiteral(uniqueId));
362
+ path2.node.arguments.push(t4.numericLiteral(uniqueId));
364
363
  }
365
- function getStylesDependenciesFromObject(path) {
364
+ function getStylesDependenciesFromObject(path2) {
366
365
  const detectedStylesWithVariants = /* @__PURE__ */ new Set();
367
- const stylesheet = path.node.arguments[0];
366
+ const stylesheet = path2.node.arguments[0];
368
367
  if (t4.isObjectExpression(stylesheet)) {
369
368
  stylesheet?.properties.forEach((property) => {
370
369
  if (!t4.isObjectProperty(property) || !t4.isIdentifier(property.key)) {
@@ -663,8 +662,8 @@ function addDependencies(state, styleName, unistyle, detectedDependencies) {
663
662
 
664
663
  // plugin/src/variants.ts
665
664
  var t5 = __toESM(require("@babel/types"));
666
- function extractVariants(path, state) {
667
- const maybeVariants = path.node.body.filter((node2) => t5.isExpressionStatement(node2) && t5.isCallExpression(node2.expression) && t5.isMemberExpression(node2.expression.callee));
665
+ function extractVariants(path2, state) {
666
+ const maybeVariants = path2.node.body.filter((node2) => t5.isExpressionStatement(node2) && t5.isCallExpression(node2.expression) && t5.isMemberExpression(node2.expression.callee));
668
667
  if (maybeVariants.length === 0) {
669
668
  return;
670
669
  }
@@ -687,7 +686,7 @@ function extractVariants(path, state) {
687
686
  return;
688
687
  }
689
688
  const calleeName = callee.object.name;
690
- const newUniqueName = path.scope.generateUidIdentifier(calleeName);
689
+ const newUniqueName = path2.scope.generateUidIdentifier(calleeName);
691
690
  const shadowDeclaration = t5.variableDeclaration("const", [
692
691
  t5.variableDeclarator(newUniqueName, t5.identifier(calleeName))
693
692
  ]);
@@ -698,14 +697,14 @@ function extractVariants(path, state) {
698
697
  const finalDeclaration = t5.variableDeclaration("const", [
699
698
  t5.variableDeclarator(t5.identifier(calleeName), newCallExpression)
700
699
  ]);
701
- const pathIndex = path.node.body.findIndex((bodyPath) => bodyPath === targetVariant);
702
- const rest = path.node.body.slice(pathIndex + 1);
700
+ const pathIndex = path2.node.body.findIndex((bodyPath) => bodyPath === targetVariant);
701
+ const rest = path2.node.body.slice(pathIndex + 1);
703
702
  const statement = t5.blockStatement([
704
703
  finalDeclaration,
705
704
  ...rest
706
705
  ]);
707
- path.node.body = [
708
- ...path.node.body.slice(0, pathIndex),
706
+ path2.node.body = [
707
+ ...path2.node.body.slice(0, pathIndex),
709
708
  shadowDeclaration,
710
709
  statement
711
710
  ];
@@ -724,8 +723,8 @@ function index_default() {
724
723
  name: "babel-react-native-unistyles",
725
724
  visitor: {
726
725
  Program: {
727
- enter(path, state) {
728
- state.file.replaceWithUnistyles = REPLACE_WITH_UNISTYLES_PATHS.map(toPlatformPath).concat(state.opts.autoProcessPaths ?? []).some((path2) => state.filename?.includes(path2));
726
+ enter(path2, state) {
727
+ state.file.replaceWithUnistyles = REPLACE_WITH_UNISTYLES_PATHS.map(toPlatformPath).concat(state.opts.autoProcessPaths ?? []).some((path3) => state.filename?.includes(path3));
729
728
  state.file.hasAnyUnistyle = false;
730
729
  state.file.hasUnistylesImport = false;
731
730
  state.file.addUnistylesRequire = false;
@@ -735,7 +734,7 @@ function index_default() {
735
734
  state.file.tagNumber = 0;
736
735
  state.reactNativeImports = {};
737
736
  state.file.forceProcessing = state.opts.autoProcessRoot && state.filename ? state.filename.includes(toPlatformPath(`${state.file.opts.root}/${state.opts.autoProcessRoot}/`)) : false;
738
- path.traverse({
737
+ path2.traverse({
739
738
  BlockStatement(blockPath) {
740
739
  if (isInsideNodeModules(state)) {
741
740
  return;
@@ -744,41 +743,41 @@ function index_default() {
744
743
  }
745
744
  });
746
745
  },
747
- exit(path, state) {
746
+ exit(path2, state) {
748
747
  if (isInsideNodeModules(state)) {
749
748
  return;
750
749
  }
751
750
  if (state.file.addUnistylesRequire) {
752
- return addUnistylesRequire(path, state);
751
+ return addUnistylesRequire(path2, state);
753
752
  }
754
753
  if (state.file.hasAnyUnistyle || state.file.hasVariants || state.file.replaceWithUnistyles || state.file.forceProcessing) {
755
- addUnistylesImport(path, state);
754
+ addUnistylesImport(path2, state);
756
755
  }
757
756
  }
758
757
  },
759
- FunctionDeclaration(path, state) {
758
+ FunctionDeclaration(path2, state) {
760
759
  if (isInsideNodeModules(state)) {
761
760
  return;
762
761
  }
763
- const componentName = path.node.id ? path.node.id.name : null;
762
+ const componentName = path2.node.id ? path2.node.id.name : null;
764
763
  if (componentName) {
765
764
  state.file.hasVariants = false;
766
765
  }
767
766
  },
768
- ClassDeclaration(path, state) {
767
+ ClassDeclaration(path2, state) {
769
768
  if (isInsideNodeModules(state)) {
770
769
  return;
771
770
  }
772
- const componentName = path.node.id ? path.node.id.name : null;
771
+ const componentName = path2.node.id ? path2.node.id.name : null;
773
772
  if (componentName) {
774
773
  state.file.hasVariants = false;
775
774
  }
776
775
  },
777
- VariableDeclaration(path, state) {
776
+ VariableDeclaration(path2, state) {
778
777
  if (isInsideNodeModules(state)) {
779
778
  return;
780
779
  }
781
- path.node.declarations.forEach((declaration) => {
780
+ path2.node.declarations.forEach((declaration) => {
782
781
  if (t6.isArrowFunctionExpression(declaration.init) || t6.isFunctionExpression(declaration.init)) {
783
782
  const componentName = declaration.id && t6.isIdentifier(declaration.id) ? declaration.id.name : null;
784
783
  if (componentName) {
@@ -787,83 +786,83 @@ function index_default() {
787
786
  }
788
787
  });
789
788
  },
790
- ImportDeclaration(path, state) {
789
+ ImportDeclaration(path2, state) {
791
790
  const exoticImport = REPLACE_WITH_UNISTYLES_EXOTIC_PATHS.concat(state.opts.autoRemapImports ?? []).find((exotic) => state.filename?.includes(exotic.path));
792
791
  if (exoticImport) {
793
- return handleExoticImport(path, state, exoticImport);
792
+ return handleExoticImport(path2, state, exoticImport);
794
793
  }
795
794
  if (isInsideNodeModules(state)) {
796
795
  return;
797
796
  }
798
- const importSource = path.node.source.value;
797
+ const importSource = path2.node.source.value;
799
798
  if (importSource.includes("react-native-unistyles")) {
800
799
  state.file.hasUnistylesImport = true;
801
- path.node.specifiers.forEach((specifier) => {
800
+ path2.node.specifiers.forEach((specifier) => {
802
801
  if (t6.isImportSpecifier(specifier) && t6.isIdentifier(specifier.imported) && specifier.imported.name === "StyleSheet") {
803
802
  state.file.styleSheetLocalName = specifier.local.name;
804
803
  }
805
804
  });
806
805
  }
807
806
  if (importSource === "react-native") {
808
- path.node.specifiers.forEach((specifier) => {
807
+ path2.node.specifiers.forEach((specifier) => {
809
808
  if (t6.isImportSpecifier(specifier) && t6.isIdentifier(specifier.imported) && REACT_NATIVE_COMPONENT_NAMES.includes(specifier.imported.name)) {
810
809
  state.reactNativeImports[specifier.local.name] = specifier.imported.name;
811
810
  }
812
811
  });
813
812
  }
814
- if (importSource.includes(toPlatformPath("react-native/Libraries"))) {
815
- handleExoticImport(path, state, NATIVE_COMPONENTS_PATHS);
813
+ if (importSource.includes("react-native/Libraries")) {
814
+ handleExoticImport(path2, state, NATIVE_COMPONENTS_PATHS);
816
815
  }
817
816
  if (!state.file.forceProcessing && Array.isArray(state.opts.autoProcessImports)) {
818
817
  state.file.forceProcessing = state.opts.autoProcessImports.includes(importSource);
819
818
  }
820
819
  },
821
- JSXElement(path, state) {
820
+ JSXElement(path2, state) {
822
821
  if (isInsideNodeModules(state)) {
823
822
  return;
824
823
  }
825
- if (hasStringRef(path)) {
824
+ if (hasStringRef(path2)) {
826
825
  throw new Error("Detected string based ref which is not supported by Unistyles.");
827
826
  }
828
827
  },
829
- MemberExpression(path, state) {
828
+ MemberExpression(path2, state) {
830
829
  if (isInsideNodeModules(state)) {
831
830
  return;
832
831
  }
833
- if (!state.file.reactNativeCommonJSName || !t6.isIdentifier(path.node.object)) {
832
+ if (!state.file.reactNativeCommonJSName || !t6.isIdentifier(path2.node.object)) {
834
833
  return;
835
834
  }
836
- if (path.node.object.name !== state.file.reactNativeCommonJSName || !t6.isIdentifier(path.node.property)) {
835
+ if (path2.node.object.name !== state.file.reactNativeCommonJSName || !t6.isIdentifier(path2.node.property)) {
837
836
  return;
838
837
  }
839
- if (!REACT_NATIVE_COMPONENT_NAMES.includes(path.node.property.name)) {
838
+ if (!REACT_NATIVE_COMPONENT_NAMES.includes(path2.node.property.name)) {
840
839
  return;
841
840
  }
842
- if (!state.reactNativeImports[path.node.property.name]) {
843
- const uniqueId = path.scope.generateUidIdentifier(`reactNativeUnistyles_${path.node.property.name}`);
844
- state.reactNativeImports[path.node.property.name] = uniqueId.name;
841
+ if (!state.reactNativeImports[path2.node.property.name]) {
842
+ const uniqueId = path2.scope.generateUidIdentifier(`reactNativeUnistyles_${path2.node.property.name}`);
843
+ state.reactNativeImports[path2.node.property.name] = uniqueId.name;
845
844
  state.file.addUnistylesRequire = true;
846
845
  }
847
- path.node.object.name = state.reactNativeImports[path.node.property.name];
846
+ path2.node.object.name = state.reactNativeImports[path2.node.property.name];
848
847
  },
849
- CallExpression(path, state) {
848
+ CallExpression(path2, state) {
850
849
  if (isInsideNodeModules(state)) {
851
850
  return;
852
851
  }
853
- if (isUnistylesCommonJSRequire(path, state)) {
852
+ if (isUnistylesCommonJSRequire(path2, state)) {
854
853
  return;
855
854
  }
856
- if (isReactNativeCommonJSRequire(path, state)) {
855
+ if (isReactNativeCommonJSRequire(path2, state)) {
857
856
  return;
858
857
  }
859
- if (!isUnistylesStyleSheet(path, state) && !isKindOfStyleSheet(path, state)) {
858
+ if (!isUnistylesStyleSheet(path2, state) && !isKindOfStyleSheet(path2, state)) {
860
859
  return;
861
860
  }
862
861
  state.file.hasAnyUnistyle = true;
863
- addStyleSheetTag(path, state);
864
- const arg = t6.isAssignmentExpression(path.node.arguments[0]) ? path.node.arguments[0].right : path.node.arguments[0];
862
+ addStyleSheetTag(path2, state);
863
+ const arg = t6.isAssignmentExpression(path2.node.arguments[0]) ? path2.node.arguments[0].right : path2.node.arguments[0];
865
864
  if (t6.isObjectExpression(arg)) {
866
- const detectedDependencies = getStylesDependenciesFromObject(path);
865
+ const detectedDependencies = getStylesDependenciesFromObject(path2);
867
866
  if (detectedDependencies) {
868
867
  if (t6.isObjectExpression(arg)) {
869
868
  arg.properties.forEach((property) => {
@@ -875,7 +874,7 @@ function index_default() {
875
874
  }
876
875
  }
877
876
  if (t6.isArrowFunctionExpression(arg) || t6.isFunctionExpression(arg)) {
878
- const funcPath = t6.isAssignmentExpression(path.node.arguments[0]) ? path.get("arguments.0.right") : path.get("arguments.0");
877
+ const funcPath = t6.isAssignmentExpression(path2.node.arguments[0]) ? path2.get("arguments.0.right") : path2.get("arguments.0");
879
878
  const detectedDependencies = getStylesDependenciesFromFunction(funcPath);
880
879
  if (detectedDependencies) {
881
880
  const body = t6.isBlockStatement(arg.body) ? arg.body.body.find((statement) => t6.isReturnStatement(statement))?.argument : arg.body;
@@ -0,0 +1,6 @@
1
+ {
2
+ "main": "../lib/commonjs/reanimated/index",
3
+ "module": "../lib/module/reanimated/index",
4
+ "react-native": "../src/reanimated/index",
5
+ "types": "../lib/typescript/src/reanimated/index"
6
+ }
@@ -0,0 +1 @@
1
+ export { useAnimatedTheme } from './useAnimatedTheme'
@@ -0,0 +1,21 @@
1
+ import { useEffect } from 'react'
2
+ import { type SharedValue, useSharedValue } from 'react-native-reanimated'
3
+ import { StyleSheet, UnistyleDependency, UnistylesRuntime } from '../specs'
4
+ import type { UnistylesTheme } from '../types'
5
+
6
+ export const useAnimatedTheme = () => {
7
+ const theme = useSharedValue(UnistylesRuntime.getTheme())
8
+
9
+ useEffect(() => {
10
+ // @ts-ignore this is hidden from TS
11
+ const dispose = StyleSheet.addChangeListener(changedDependencies => {
12
+ if (changedDependencies.includes(UnistyleDependency.Theme)) {
13
+ theme.set(UnistylesRuntime.getTheme())
14
+ }
15
+ })
16
+
17
+ return () => dispose()
18
+ }, [])
19
+
20
+ return theme as SharedValue<UnistylesTheme>
21
+ }
@@ -0,0 +1,19 @@
1
+ import { useEffect } from 'react'
2
+ import { type SharedValue, useSharedValue } from 'react-native-reanimated'
3
+ import { UnistyleDependency, UnistylesRuntime } from '../specs'
4
+ import type { UnistylesTheme } from '../types'
5
+ import { services } from '../web/services'
6
+
7
+ export const useAnimatedTheme = () => {
8
+ const theme = useSharedValue(UnistylesRuntime.getTheme())
9
+
10
+ useEffect(() => {
11
+ const dispose = services.listener.addListeners([UnistyleDependency.Theme], () => theme.set(UnistylesRuntime.getTheme()))
12
+
13
+ return () => {
14
+ dispose()
15
+ }
16
+ }, [])
17
+
18
+ return theme as SharedValue<UnistylesTheme>
19
+ }
@@ -1,8 +1,8 @@
1
1
  import { UnistyleDependency } from '../specs/NativePlatform/NativePlatform.nitro'
2
2
  import type { UnistylesTheme, UnistylesValues } from '../types'
3
3
  import { deepMergeObjects } from '../utils'
4
- import type { UnistylesServices } from './types'
5
- import { extractSecrets, extractUnistyleDependencies } from './utils'
4
+ import type { UniGeneratedStyle, UnistylesServices } from './types'
5
+ import { extractSecrets, extractUnistyleDependencies, isGeneratedUnistyle, isServer } from './utils'
6
6
  import { getVariants } from './variants'
7
7
 
8
8
  export class UnistylesShadowRegistry {
@@ -28,6 +28,13 @@ export class UnistylesShadowRegistry {
28
28
  }
29
29
 
30
30
  addStyles = (unistyles: Array<UnistylesValues>, forChild?: boolean) => {
31
+ const [firstStyle] = unistyles
32
+
33
+ // If it is already a generated style, return it
34
+ if (firstStyle && isGeneratedUnistyle(firstStyle)) {
35
+ return firstStyle as UniGeneratedStyle
36
+ }
37
+
31
38
  const getParsedStyles = () => {
32
39
  const allStyles = unistyles.map(unistyle => {
33
40
  const secrets = extractSecrets(unistyle)
@@ -97,7 +104,7 @@ export class UnistylesShadowRegistry {
97
104
  getScopedTheme = () => this.scopedTheme
98
105
 
99
106
  remove = (ref: any, hash?: string) => {
100
- if (!(ref instanceof HTMLElement) || !hash) {
107
+ if (isServer() || !(ref instanceof HTMLElement) || !hash) {
101
108
  return
102
109
  }
103
110
 
package/src/web/types.ts CHANGED
@@ -1,8 +1,8 @@
1
1
  import type { UnistylesListener } from './listener'
2
- import type{ UnistylesRegistry } from './registry'
3
- import type{ UnistylesRuntime } from './runtime'
4
- import type{ UnistylesShadowRegistry } from './shadowRegistry'
5
- import type{ UnistylesState } from './state'
2
+ import type { UnistylesRegistry } from './registry'
3
+ import type { UnistylesRuntime } from './runtime'
4
+ import type { UnistylesShadowRegistry } from './shadowRegistry'
5
+ import type { UnistylesState } from './state'
6
6
 
7
7
  export type UnistylesServices = {
8
8
  runtime: UnistylesRuntime,
@@ -11,3 +11,8 @@ export type UnistylesServices = {
11
11
  state: UnistylesState,
12
12
  listener: UnistylesListener
13
13
  }
14
+
15
+ export const UNI_GENERATED_KEYS = ['$$css', 'hash', 'injectedClassName'] as const
16
+ export type UniGeneratedKey = typeof UNI_GENERATED_KEYS[number]
17
+
18
+ export type UniGeneratedStyle = Record<UniGeneratedKey, string>
@@ -5,6 +5,7 @@ import { ColorScheme, Orientation } from '../../specs/types'
5
5
  import type { StyleSheet, StyleSheetWithSuperPowers, UnistylesValues } from '../../types/stylesheet'
6
6
  import { isUnistylesMq, parseMq } from '../../utils'
7
7
  import * as unistyles from '../services'
8
+ import { UNI_GENERATED_KEYS, type UniGeneratedKey, type UniGeneratedStyle } from '../types'
8
9
  import { keyInObject, reduceObject } from './common'
9
10
 
10
11
  export const schemeToTheme = (scheme: ColorScheme) => {
@@ -139,3 +140,7 @@ export const checkForAnimated = (value: any): boolean => {
139
140
 
140
141
  return false
141
142
  }
143
+
144
+ export const isGeneratedUnistyle = (value: Record<string, any>): value is UniGeneratedStyle => {
145
+ return Object.keys(value).every(key => UNI_GENERATED_KEYS.includes(key as UniGeneratedKey))
146
+ }
@@ -0,0 +1,18 @@
1
+ import type { StyleProp } from 'react-native'
2
+ import { getClassName } from '../core'
3
+ import type { RNStyle, UnistylesValues } from '../types'
4
+ import { createUnistylesRef } from '../web/utils/createUnistylesRef'
5
+
6
+ export const getWebProps = <T>(style: StyleProp<RNStyle>) => {
7
+ const styles = getClassName(style as UnistylesValues)
8
+ const ref = createUnistylesRef<T>(styles)
9
+ const [generatedStyles] = styles ?? []
10
+
11
+ return {
12
+ className: [
13
+ generatedStyles?.hash,
14
+ generatedStyles?.injectedClassName,
15
+ ].filter(Boolean).join(' '),
16
+ ref
17
+ }
18
+ }
@@ -0,0 +1,2 @@
1
+
2
+ export { getWebProps } from './getWebProps'
@@ -0,0 +1,6 @@
1
+ {
2
+ "main": "../lib/commonjs/web-only/index",
3
+ "module": "../lib/module/web-only/index",
4
+ "react-native": "../src/web-only/index",
5
+ "types": "../lib/typescript/src/web-only/index"
6
+ }