Update styleq, bring localizeStyle transform locally

packages/react-native-web/package.json

@@ -29,7 +29,7 @@
     "memoize-one": "^6.0.0",
     "nullthrows": "^1.1.1",
     "postcss-value-parser": "^4.2.0",
-    "styleq": "^0.1.3"
+    "styleq": "^0.2.1"
   },
   "peerDependencies": {
     "react": "^18.0.0 || ^19.0.0",

packages/react-native-web/src/exports/StyleSheet/__tests__/index-test.js

@@ -68,6 +68,7 @@ describe('StyleSheet', () => {
         [
           "r-position-u8s1d",
           null,
+          "",
         ]
       `);
     });
@@ -88,6 +89,7 @@ describe('StyleSheet', () => {
         [
           "r-boxShadow-o3ayyy r-textShadow-1x2q051",
           null,
+          "",
         ]
       `);
     });
@@ -159,18 +161,21 @@ describe('StyleSheet', () => {
         [
           "",
           null,
+          "",
         ]
       `);
       expect(StyleSheet({})).toMatchInlineSnapshot(`
         [
           "",
           null,
+          "",
         ]
       `);
       expect(StyleSheet([])).toMatchInlineSnapshot(`
         [
           "",
           null,
+          "",
         ]
       `);
     });
@@ -189,6 +194,7 @@ describe('StyleSheet', () => {
         [
           "position-absolute opacity-05 width-200",
           null,
+          "",
         ]
       `);
     });
@@ -219,6 +225,7 @@ describe('StyleSheet', () => {
         [
           "borderWidth-0 borderColor-red display-flex position-absolute opacity-05 width-200",
           null,
+          "",
         ]
       `);
     });
@@ -272,6 +279,7 @@ describe('StyleSheet', () => {
             "paddingRight": "40px",
             "paddingTop": "8px",
           },
+          "",
         ]
       `);
 
@@ -286,6 +294,7 @@ describe('StyleSheet', () => {
             "marginRight": "8px",
             "marginTop": "40px",
           },
+          "",
         ]
       `);
     });
@@ -310,6 +319,7 @@ describe('StyleSheet', () => {
             "marginRight": "10px",
             "textAlign": "left",
           },
+          "",
         ]
       `);
       expect(StyleSheet(inlineStyle, { writingDirection }))
@@ -321,6 +331,7 @@ describe('StyleSheet', () => {
             "right": "12.34%",
             "textAlign": "right",
           },
+          "",
         ]
       `);
       expect(
@@ -329,6 +340,7 @@ describe('StyleSheet', () => {
             inlineStyle,
             { marginLeft: 1, marginEnd: 0, marginStart: 0, marginRight: 11 }
           ],
+
           { writingDirection }
         )
       ).toMatchInlineSnapshot(`
@@ -340,6 +352,7 @@ describe('StyleSheet', () => {
             "right": "12.34%",
             "textAlign": "right",
           },
+          "",
         ]
       `);
       expect(
@@ -354,6 +367,7 @@ describe('StyleSheet', () => {
             "right": "12.34%",
             "textAlign": "right",
           },
+          "",
         ]
       `);
 
@@ -363,20 +377,23 @@ describe('StyleSheet', () => {
         [
           "r-insetInlineStart-1xn1m1p r-textAlign-fdjqy7 r-marginInlineEnd-1l8l4mf",
           null,
+          "",
         ]
       `);
       expect(StyleSheet(staticStyle, { writingDirection }))
         .toMatchInlineSnapshot(`
         [
           "r-insetInlineStart-1y2vi53 r-textAlign-1ff274t r-marginInlineEnd-t1sew1",
           null,
+          "",
         ]
       `);
       const z = StyleSheet.create({ x: { marginRight: 33 } }).x;
       expect(StyleSheet([staticStyle, z])).toMatchInlineSnapshot(`
         [
           "r-insetInlineStart-1xn1m1p r-textAlign-fdjqy7 r-marginInlineEnd-1l8l4mf r-marginRight-j4vy6k",
           null,
+          "",
         ]
       `);
       expect(
@@ -397,6 +414,7 @@ describe('StyleSheet', () => {
             "marginLeft": "1px",
             "marginRight": "11px",
           },
+          "",
         ]
       `);
       // logical can be nulled
@@ -408,6 +426,7 @@ describe('StyleSheet', () => {
         [
           "r-insetInlineStart-1y2vi53 r-textAlign-1ff274t",
           null,
+          "",
         ]
       `);
     });

packages/react-native-web/src/exports/StyleSheet/index.js

@@ -9,7 +9,7 @@
 
 import { atomic, classic, inline } from './compiler';
 import { createSheet } from './dom';
-import { localizeStyle } from 'styleq/transform-localize-style';
+import { localizeStyle } from './localizeStyle';
 import { preprocess } from './preprocess';
 import { styleq } from 'styleq';
 import { validate } from './validate';

packages/react-native-web/src/exports/StyleSheet/localizeStyle.js

@@ -0,0 +1,62 @@
+/**
+ * Copyright (c) Nicolas Gallagher.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+const cache = new WeakMap<Object, Array<Object>>();
+const markerProp = '$$css$localize';
+
+/**
+ * The compiler polyfills logical properties and values, generating a class
+ * name for both writing directions. The style objects are annotated by
+ * the compiler as needing this runtime transform. The results are memoized.
+ *
+ * { '$$css$localize': true, float: [ 'float-left', 'float-right' ] }
+ * => { float: 'float-left' }
+ */
+
+function compileStyle(style: Object, isRTL: boolean) {
+  // Create a new compiled style for styleq
+  const compiledStyle = {};
+  for (const prop in style) {
+    if (prop !== markerProp) {
+      const value = style[prop];
+      if (Array.isArray(value)) {
+        compiledStyle[prop] = isRTL ? value[1] : value[0];
+      } else {
+        compiledStyle[prop] = value;
+      }
+    }
+  }
+  return compiledStyle;
+}
+
+export function localizeStyle(style: Object, isRTL: boolean): Object {
+  if (style[markerProp] != null) {
+    const compiledStyleIndex = isRTL ? 1 : 0;
+    // Check the cache in case we've already seen this object
+    let cachedStyles = cache.get(style);
+    if (cachedStyles != null) {
+      let compiledStyle = cachedStyles[compiledStyleIndex];
+      if (compiledStyle == null) {
+        // Update the missing cache entry
+        compiledStyle = compileStyle(style, isRTL);
+        cachedStyles[compiledStyleIndex] = compiledStyle;
+        cache.set(style, cachedStyles);
+      }
+      return compiledStyle;
+    }
+
+    // Create a new compiled style for styleq
+    const compiledStyle = compileStyle(style, isRTL);
+    cachedStyles = new Array<Object>(2);
+    cachedStyles[compiledStyleIndex] = compiledStyle;
+    cache.set(style, cachedStyles);
+    return compiledStyle;
+  }
+  return style;
+}