Update styleq, bring localizeStyle transform locally

babel.config.js

@@ -9,9 +9,8 @@ export default function (api) {
           // files on disk, which Jest's transform cache does not track.
           []
         : // Output is published as "type": "module", which requires fully specified
-          // import paths (e.g. './View/index.js', 'styleq/transform-localize-style.js')
-          // Only list packages without an "exports" field in `includePackages`
-          [['babel-plugin-fully-specified', { includePackages: ['styleq/'] }]])
+          // import paths (e.g. './View/index.js')
+          ['babel-plugin-fully-specified'])
     ],
     presets: [
       ['@babel/preset-react', { useSpread: true }],

flow-typed/npm/styleq.js

@@ -1,5 +1,5 @@
 type CompiledStyle = {
-  $$css: boolean,
+  $$css: boolean | string,
   [key: string]: string,
 };
 
@@ -19,7 +19,7 @@ type StyleqOptions = {
   transform?: (EitherStyle) => EitherStyle,
 };
 
-type StyleqResult = [string, InlineStyle | null];
+type StyleqResult = [string, InlineStyle | null, string];
 type Styleq = (styles: Styles) => StyleqResult;
 
 type IStyleq = {
@@ -32,9 +32,3 @@ declare module "styleq" {
     styleq: IStyleq
   };
 }
-
-declare module "styleq/transform-localize-style" {
-  declare module.exports: {
-    localizeStyle: (style: EitherStyle, isRTL: boolean) => EitherStyle
-  };
-}

packages/benchmarks/package.json

@@ -13,7 +13,8 @@
     "d3-scale-chromatic": "^3.1.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
-    "react-native-web": "0.21.4"
+    "react-native-web": "0.21.4",
+    "styleq": "^0.2.1"
   },
   "devDependencies": {
     "babel-loader": "^10.1.1",

packages/benchmarks/src/impl.js

@@ -1,8 +1,12 @@
 import packageJson from '../package.json';
 
-const context = require.context('./implementations/', true, /index\.js$/);
 const { dependencies } = packageJson;
 
+const context = import.meta.webpackContext('./implementations/', {
+  recursive: true,
+  regExp: /index\.js$/
+});
+
 /**
  * @typedef {Object} ComponentsType
  * @property {React.ComponentType<any>} Box

packages/react-native-web/package.json

@@ -38,7 +38,7 @@
     "memoize-one": "^6.0.0",
     "nullthrows": "^1.1.1",
     "postcss-value-parser": "^4.2.0",
-    "styleq": "^0.1.3"
+    "styleq": "^0.2.1"
   },
   "devDependencies": {
     "del-cli": "^8.0.1"

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

@@ -56,6 +56,7 @@ describe('StyleSheet', () => {
         [
           "r-position-u8s1d",
           null,
+          "",
         ]
       `);
     });
@@ -76,6 +77,7 @@ describe('StyleSheet', () => {
         [
           "r-boxShadow-o3ayyy r-textShadow-1x2q051",
           null,
+          "",
         ]
       `);
     });
@@ -147,18 +149,21 @@ describe('StyleSheet', () => {
         [
           "",
           null,
+          "",
         ]
       `);
       expect(StyleSheet({})).toMatchInlineSnapshot(`
         [
           "",
           null,
+          "",
         ]
       `);
       expect(StyleSheet([])).toMatchInlineSnapshot(`
         [
           "",
           null,
+          "",
         ]
       `);
     });
@@ -177,6 +182,7 @@ describe('StyleSheet', () => {
         [
           "position-absolute opacity-05 width-200",
           null,
+          "",
         ]
       `);
     });
@@ -207,6 +213,7 @@ describe('StyleSheet', () => {
         [
           "borderWidth-0 borderColor-red display-flex position-absolute opacity-05 width-200",
           null,
+          "",
         ]
       `);
     });
@@ -260,6 +267,7 @@ describe('StyleSheet', () => {
             "paddingRight": "40px",
             "paddingTop": "8px",
           },
+          "",
         ]
       `);
 
@@ -274,6 +282,7 @@ describe('StyleSheet', () => {
             "marginRight": "8px",
             "marginTop": "40px",
           },
+          "",
         ]
       `);
     });
@@ -298,6 +307,7 @@ describe('StyleSheet', () => {
             "marginRight": "10px",
             "textAlign": "left",
           },
+          "",
         ]
       `);
       expect(StyleSheet(inlineStyle, { writingDirection }))
@@ -309,6 +319,7 @@ describe('StyleSheet', () => {
             "right": "12.34%",
             "textAlign": "right",
           },
+          "",
         ]
       `);
       expect(
@@ -317,6 +328,7 @@ describe('StyleSheet', () => {
             inlineStyle,
             { marginLeft: 1, marginEnd: 0, marginStart: 0, marginRight: 11 }
           ],
+
           { writingDirection }
         )
       ).toMatchInlineSnapshot(`
@@ -328,6 +340,7 @@ describe('StyleSheet', () => {
             "right": "12.34%",
             "textAlign": "right",
           },
+          "",
         ]
       `);
       expect(
@@ -342,6 +355,7 @@ describe('StyleSheet', () => {
             "right": "12.34%",
             "textAlign": "right",
           },
+          "",
         ]
       `);
 
@@ -351,20 +365,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(
@@ -385,6 +402,7 @@ describe('StyleSheet', () => {
             "marginLeft": "1px",
             "marginRight": "11px",
           },
+          "",
         ]
       `);
       // logical can be nulled
@@ -396,6 +414,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';
@@ -141,7 +141,7 @@ function getSheet(): { id: string, textContent: string } {
 /**
  * resolve
  */
-type StyleProps = [string, { [key: string]: unknown } | null];
+type StyleProps = [string, { [key: string]: unknown } | null, string];
 type Options = {
   shadow?: boolean,
   textShadow?: boolean,

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: Object = {};
+  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;
+}