From 7dde1a7765d257c6308f205256da634917bed0d5 Mon Sep 17 00:00:00 2001
From: Jta26 <joel.austinrd@gmail.com>
Date: Mon, 20 Oct 2025 18:38:33 -0700
Subject: [PATCH 1/4] strip !important from fontFamily on native and delegate
 to only first fontFamily

---
 .../src/native/css/processStyle.js            | 15 ++++
 .../__snapshots__/css-test.native.js.snap     | 48 ++++++++++++
 .../react-strict-dom/tests/css-test.native.js | 77 +++++++++++++++++++
 3 files changed, 140 insertions(+)

diff --git a/packages/react-strict-dom/src/native/css/processStyle.js b/packages/react-strict-dom/src/native/css/processStyle.js
index 70078a1c..94418893 100644
--- a/packages/react-strict-dom/src/native/css/processStyle.js
+++ b/packages/react-strict-dom/src/native/css/processStyle.js
@@ -115,6 +115,21 @@ export function processStyle(
         result[propName] = CSSUnparsedValue.parse(propName, styleValue);
         continue;
       }
+      // Process fontFamily: strip !important and extract first font (React Native doesn't support fallbacks)
+      else if (propName === 'fontFamily') {
+        let processedValue = styleValue;
+        // Strip !important suffix
+        if (processedValue.endsWith('!important')) {
+          processedValue = processedValue
+            .replace(/\s*!important\s*$/, '')
+            .trim();
+        }
+        // Extract first font family (before first comma)
+        const firstFont = processedValue.split(',')[0].trim();
+        // Remove surrounding quotes if present
+        result[propName] = firstFont.replace(/^["']|["']$/g, '');
+        continue;
+      }
       // Polyfill support for backgroundImage using experimental API
       else if (propName === 'backgroundImage') {
         result.experimental_backgroundImage = styleValue;
diff --git a/packages/react-strict-dom/tests/__snapshots__/css-test.native.js.snap b/packages/react-strict-dom/tests/__snapshots__/css-test.native.js.snap
index dd2d4ddf..8f7b154b 100644
--- a/packages/react-strict-dom/tests/__snapshots__/css-test.native.js.snap
+++ b/packages/react-strict-dom/tests/__snapshots__/css-test.native.js.snap
@@ -185,6 +185,54 @@ exports[`properties: general filter 1`] = `
 }
 `;
 
+exports[`properties: general fontFamily: normal 1`] = `
+{
+  "style": {
+    "fontFamily": "Arial",
+  },
+}
+`;
+
+exports[`properties: general fontFamily: with !important 1`] = `
+{
+  "style": {
+    "fontFamily": "Arial",
+  },
+}
+`;
+
+exports[`properties: general fontFamily: with fallbacks and !important 1`] = `
+{
+  "style": {
+    "fontFamily": "Roboto",
+  },
+}
+`;
+
+exports[`properties: general fontFamily: with multiple fallbacks 1`] = `
+{
+  "style": {
+    "fontFamily": "Roboto",
+  },
+}
+`;
+
+exports[`properties: general fontFamily: with quoted font name 1`] = `
+{
+  "style": {
+    "fontFamily": "SF Pro Display",
+  },
+}
+`;
+
+exports[`properties: general fontFamily: with single quoted font name 1`] = `
+{
+  "style": {
+    "fontFamily": "Helvetica Neue",
+  },
+}
+`;
+
 exports[`properties: general fontSize: default 1`] = `
 {
   "style": {
diff --git a/packages/react-strict-dom/tests/css-test.native.js b/packages/react-strict-dom/tests/css-test.native.js
index 8df2defe..fdcc91fc 100644
--- a/packages/react-strict-dom/tests/css-test.native.js
+++ b/packages/react-strict-dom/tests/css-test.native.js
@@ -296,6 +296,83 @@ describe('properties: general', () => {
     ).toMatchSnapshot('fontScale:2');
   });
 
+  test('fontFamily', () => {
+    const styles = css.create({
+      root: {
+        fontFamily: 'Arial'
+      }
+    });
+    expect(css.props.call(mockOptions, styles.root)).toMatchSnapshot('normal');
+    expect(css.props.call(mockOptions, styles.root).style.fontFamily).toBe(
+      'Arial'
+    );
+
+    const styles2 = css.create({
+      root: {
+        fontFamily: 'Arial !important'
+      }
+    });
+    expect(css.props.call(mockOptions, styles2.root)).toMatchSnapshot(
+      'with !important'
+    );
+    // Verify that !important is stripped
+    expect(css.props.call(mockOptions, styles2.root).style.fontFamily).toBe(
+      'Arial'
+    );
+
+    const styles3 = css.create({
+      root: {
+        fontFamily: 'Roboto, sans-serif !important'
+      }
+    });
+    expect(css.props.call(mockOptions, styles3.root)).toMatchSnapshot(
+      'with fallbacks and !important'
+    );
+    // Verify that !important is stripped and only first font is used
+    expect(css.props.call(mockOptions, styles3.root).style.fontFamily).toBe(
+      'Roboto'
+    );
+
+    const styles4 = css.create({
+      root: {
+        fontFamily: 'Roboto, Helvetica, Arial, sans-serif'
+      }
+    });
+    expect(css.props.call(mockOptions, styles4.root)).toMatchSnapshot(
+      'with multiple fallbacks'
+    );
+    // Verify that only the first font is used
+    expect(css.props.call(mockOptions, styles4.root).style.fontFamily).toBe(
+      'Roboto'
+    );
+
+    const styles5 = css.create({
+      root: {
+        fontFamily: '"SF Pro Display", -apple-system, sans-serif'
+      }
+    });
+    expect(css.props.call(mockOptions, styles5.root)).toMatchSnapshot(
+      'with quoted font name'
+    );
+    // Verify that quotes are stripped and only first font is used
+    expect(css.props.call(mockOptions, styles5.root).style.fontFamily).toBe(
+      'SF Pro Display'
+    );
+
+    const styles6 = css.create({
+      root: {
+        fontFamily: "'Helvetica Neue', Helvetica, Arial"
+      }
+    });
+    expect(css.props.call(mockOptions, styles6.root)).toMatchSnapshot(
+      'with single quoted font name'
+    );
+    // Verify that single quotes are stripped
+    expect(css.props.call(mockOptions, styles6.root).style.fontFamily).toBe(
+      'Helvetica Neue'
+    );
+  });
+
   test('fontVariant', () => {
     const styles = css.create({
       root: {

From 28a267bacb7a8b4bc2e86f590cce4846832b16cc Mon Sep 17 00:00:00 2001
From: Jta26 <joel.austinrd@gmail.com>
Date: Mon, 20 Oct 2025 20:41:53 -0700
Subject: [PATCH 2/4] comments

---
 packages/react-strict-dom/src/native/css/processStyle.js | 7 ++-----
 1 file changed, 2 insertions(+), 5 deletions(-)

diff --git a/packages/react-strict-dom/src/native/css/processStyle.js b/packages/react-strict-dom/src/native/css/processStyle.js
index 94418893..c043c252 100644
--- a/packages/react-strict-dom/src/native/css/processStyle.js
+++ b/packages/react-strict-dom/src/native/css/processStyle.js
@@ -114,19 +114,16 @@ export function processStyle(
       if (stringContainsVariables(styleValue)) {
         result[propName] = CSSUnparsedValue.parse(propName, styleValue);
         continue;
-      }
-      // Process fontFamily: strip !important and extract first font (React Native doesn't support fallbacks)
-      else if (propName === 'fontFamily') {
+      } else if (propName === 'fontFamily') {
         let processedValue = styleValue;
-        // Strip !important suffix
         if (processedValue.endsWith('!important')) {
           processedValue = processedValue
             .replace(/\s*!important\s*$/, '')
             .trim();
         }
-        // Extract first font family (before first comma)
         const firstFont = processedValue.split(',')[0].trim();
         // Remove surrounding quotes if present
+        // e.g. fontFamily: '"Helvetica Neue"
         result[propName] = firstFont.replace(/^["']|["']$/g, '');
         continue;
       }

From c2a5cd24c7cb2ef411045ac5c189134a47297bc7 Mon Sep 17 00:00:00 2001
From: Jta26 <joel.austinrd@gmail.com>
Date: Tue, 21 Oct 2025 15:13:22 -0700
Subject: [PATCH 3/4] remove !important check

---
 .../src/native/css/processStyle.js            |  10 +-
 .../__snapshots__/css-test.native.js.snap     | 990 +-----------------
 .../react-strict-dom/tests/css-test.native.js |  26 -
 3 files changed, 3 insertions(+), 1023 deletions(-)

diff --git a/packages/react-strict-dom/src/native/css/processStyle.js b/packages/react-strict-dom/src/native/css/processStyle.js
index c043c252..e5602ca3 100644
--- a/packages/react-strict-dom/src/native/css/processStyle.js
+++ b/packages/react-strict-dom/src/native/css/processStyle.js
@@ -115,15 +115,9 @@ export function processStyle(
         result[propName] = CSSUnparsedValue.parse(propName, styleValue);
         continue;
       } else if (propName === 'fontFamily') {
-        let processedValue = styleValue;
-        if (processedValue.endsWith('!important')) {
-          processedValue = processedValue
-            .replace(/\s*!important\s*$/, '')
-            .trim();
-        }
-        const firstFont = processedValue.split(',')[0].trim();
+        const firstFont = styleValue.split(',')[0].trim();
         // Remove surrounding quotes if present
-        // e.g. fontFamily: '"Helvetica Neue"
+        // e.g. fontFamily: '"Helvetica Neue", sans-serif'
         result[propName] = firstFont.replace(/^["']|["']$/g, '');
         continue;
       }
diff --git a/packages/react-strict-dom/tests/__snapshots__/css-test.native.js.snap b/packages/react-strict-dom/tests/__snapshots__/css-test.native.js.snap
index 8f7b154b..d56c7da3 100644
--- a/packages/react-strict-dom/tests/__snapshots__/css-test.native.js.snap
+++ b/packages/react-strict-dom/tests/__snapshots__/css-test.native.js.snap
@@ -1,47 +1,5 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`properties: custom property css.createTheme: css.__customProperties 1`] = `
-{
-  "rootColor__id__1": "red",
-  "rootColor__id__3": "red",
-  "themeAwareColor__id__2": {
-    "@media (prefers-color-scheme: dark)": "green",
-    "default": "blue",
-  },
-}
-`;
-
-exports[`properties: custom property css.createTheme: theme 1`] = `
-{
-  "$$theme": "theme",
-  "rootColor__id__3": "green",
-}
-`;
-
-exports[`properties: custom property css.defineConsts: constants 1`] = `
-{
-  "blueColor": "blue",
-  "redColor": "red",
-}
-`;
-
-exports[`properties: custom property css.defineVars: css.__customProperties 1`] = `
-{
-  "rootColor__id__1": "red",
-  "themeAwareColor__id__2": {
-    "@media (prefers-color-scheme: dark)": "green",
-    "default": "blue",
-  },
-}
-`;
-
-exports[`properties: custom property css.defineVars: tokens 1`] = `
-{
-  "rootColor": "var(--rootColor__id__1)",
-  "themeAwareColor": "var(--themeAwareColor__id__2)",
-}
-`;
-
 exports[`properties: custom property handles undefined variables 1`] = `
 {
   "style": {},
@@ -141,42 +99,6 @@ exports[`properties: general boxSizing: content-box 1`] = `
 }
 `;
 
-exports[`properties: general caretColor: red caret color 1`] = `
-{
-  "cursorColor": "red",
-  "style": {},
-}
-`;
-
-exports[`properties: general caretColor: transparent caret color 1`] = `
-{
-  "caretHidden": true,
-  "style": {},
-}
-`;
-
-exports[`properties: general caretColor: unsupported caret color 1`] = `
-{
-  "style": {},
-}
-`;
-
-exports[`properties: general direction: ltr 1`] = `
-{
-  "style": {
-    "direction": "ltr",
-  },
-}
-`;
-
-exports[`properties: general direction: rtl 1`] = `
-{
-  "style": {
-    "direction": "rtl",
-  },
-}
-`;
-
 exports[`properties: general filter 1`] = `
 {
   "style": {
@@ -193,22 +115,6 @@ exports[`properties: general fontFamily: normal 1`] = `
 }
 `;
 
-exports[`properties: general fontFamily: with !important 1`] = `
-{
-  "style": {
-    "fontFamily": "Arial",
-  },
-}
-`;
-
-exports[`properties: general fontFamily: with fallbacks and !important 1`] = `
-{
-  "style": {
-    "fontFamily": "Roboto",
-  },
-}
-`;
-
 exports[`properties: general fontFamily: with multiple fallbacks 1`] = `
 {
   "style": {
@@ -233,22 +139,6 @@ exports[`properties: general fontFamily: with single quoted font name 1`] = `
 }
 `;
 
-exports[`properties: general fontSize: default 1`] = `
-{
-  "style": {
-    "fontSize": 40,
-  },
-}
-`;
-
-exports[`properties: general fontSize: fontScale:2 1`] = `
-{
-  "style": {
-    "fontSize": 80,
-  },
-}
-`;
-
 exports[`properties: general fontVariant 1`] = `
 {
   "style": {
@@ -288,40 +178,6 @@ exports[`properties: general lineClamp 1`] = `
 }
 `;
 
-exports[`properties: general lineHeight: px 1`] = `
-{
-  "style": {
-    "lineHeight": 24,
-  },
-}
-`;
-
-exports[`properties: general lineHeight: rem 1`] = `
-{
-  "style": {
-    "lineHeight": 24,
-  },
-}
-`;
-
-exports[`properties: general lineHeight: unitless number 1`] = `
-{
-  "style": {
-    "fontSize": 16,
-    "lineHeight": "1.5",
-  },
-}
-`;
-
-exports[`properties: general lineHeight: unitless string 1`] = `
-{
-  "style": {
-    "fontSize": 16,
-    "lineHeight": "1.5",
-  },
-}
-`;
-
 exports[`properties: general margin with multiple values 1`] = `
 {
   "style": {},
@@ -360,46 +216,6 @@ exports[`properties: general mixBlendMode 1`] = `
 }
 `;
 
-exports[`properties: general objectFit: contain 1`] = `
-{
-  "style": {
-    "objectFit": "contain",
-  },
-}
-`;
-
-exports[`properties: general objectFit: contain 2`] = `
-{
-  "style": {
-    "objectFit": "cover",
-  },
-}
-`;
-
-exports[`properties: general objectFit: fill 1`] = `
-{
-  "style": {
-    "objectFit": "fill",
-  },
-}
-`;
-
-exports[`properties: general objectFit: none 1`] = `
-{
-  "style": {
-    "objectFit": "scale-down",
-  },
-}
-`;
-
-exports[`properties: general objectFit: scaleDown 1`] = `
-{
-  "style": {
-    "objectFit": "scale-down",
-  },
-}
-`;
-
 exports[`properties: general opacity string value 1`] = `
 {
   "style": {
@@ -437,51 +253,6 @@ exports[`properties: general paddingVertical 1`] = `
 }
 `;
 
-exports[`properties: general placeContent: center 1`] = `
-{
-  "style": {
-    "alignContent": "center",
-    "justifyContent": "center",
-  },
-}
-`;
-
-exports[`properties: general placeContent: does not override existing long-forms 1`] = `
-{
-  "style": {
-    "alignContent": "flex-start",
-    "justifyContent": "flex-start",
-  },
-}
-`;
-
-exports[`properties: general placeContent: flexStart 1`] = `
-{
-  "style": {
-    "alignContent": "flex-start",
-    "justifyContent": "flex-start",
-  },
-}
-`;
-
-exports[`properties: general placeContent: invalid 1`] = `
-{
-  "style": {},
-}
-`;
-
-exports[`properties: general placeContent: safeCenter 1`] = `
-{
-  "style": {},
-}
-`;
-
-exports[`properties: general placeContent: stretch 1`] = `
-{
-  "style": {},
-}
-`;
-
 exports[`properties: general pointerEvents 1`] = `
 {
   "style": {
@@ -490,46 +261,6 @@ exports[`properties: general pointerEvents 1`] = `
 }
 `;
 
-exports[`properties: general position: absolute 1`] = `
-{
-  "style": {
-    "position": "absolute",
-  },
-}
-`;
-
-exports[`properties: general position: fixed 1`] = `
-{
-  "style": {
-    "position": "absolute",
-  },
-}
-`;
-
-exports[`properties: general position: relative 1`] = `
-{
-  "style": {
-    "position": "relative",
-  },
-}
-`;
-
-exports[`properties: general position: static 1`] = `
-{
-  "style": {
-    "position": "static",
-  },
-}
-`;
-
-exports[`properties: general position: sticky 1`] = `
-{
-  "style": {
-    "position": "relative",
-  },
-}
-`;
-
 exports[`properties: general textShadow 1`] = `
 {
   "style": {
@@ -556,193 +287,6 @@ exports[`properties: general textShadow 2`] = `
 }
 `;
 
-exports[`properties: general transform: matrix 1`] = `
-{
-  "style": {
-    "transform": [
-      {
-        "matrix": [
-          0.1,
-          1,
-          0,
-          0,
-          -0.3,
-          1,
-          0,
-          0,
-          0,
-          0,
-          1,
-          0,
-          0,
-          0,
-          0,
-          1,
-        ],
-      },
-    ],
-  },
-}
-`;
-
-exports[`properties: general transform: mixed 1`] = `
-{
-  "style": {
-    "transform": [
-      {
-        "rotateX": "1deg",
-      },
-      {
-        "rotateY": "2deg",
-      },
-      {
-        "rotateZ": "3deg",
-      },
-      {
-        "scale": 1,
-      },
-      {
-        "scaleX": 2,
-      },
-      {
-        "scaleY": 3,
-      },
-      {
-        "scaleZ": 4,
-      },
-      {
-        "translateX": 1,
-      },
-    ],
-  },
-}
-`;
-
-exports[`properties: general transform: none 1`] = `
-{
-  "style": {
-    "transform": [],
-  },
-}
-`;
-
-exports[`properties: general transform: perspective 1`] = `
-{
-  "style": {
-    "transform": [
-      {
-        "perspective": 10,
-      },
-    ],
-  },
-}
-`;
-
-exports[`properties: general transform: rotate 1`] = `
-{
-  "style": {
-    "transform": [
-      {
-        "rotate": "10deg",
-      },
-      {
-        "rotateX": "20deg",
-      },
-      {
-        "rotateY": "30deg",
-      },
-      {
-        "rotateZ": "40deg",
-      },
-    ],
-  },
-}
-`;
-
-exports[`properties: general transform: rotate 2`] = `
-{
-  "style": {
-    "transform": [
-      {
-        "rotate": "10deg",
-      },
-      {
-        "rotateX": "20deg",
-      },
-      {
-        "rotateY": "30deg",
-      },
-      {
-        "rotateZ": "40deg",
-      },
-    ],
-  },
-}
-`;
-
-exports[`properties: general transform: scale 1`] = `
-{
-  "style": {
-    "transform": [
-      {
-        "scaleX": 1,
-      },
-      {
-        "scaleY": 2,
-      },
-      {
-        "scaleZ": 3,
-      },
-    ],
-  },
-}
-`;
-
-exports[`properties: general transform: skew 1`] = `
-{
-  "style": {
-    "transform": [
-      {
-        "skewX": "20deg",
-      },
-      {
-        "skewY": "30deg",
-      },
-    ],
-  },
-}
-`;
-
-exports[`properties: general transform: translate (percentages) 1`] = `
-{
-  "style": {
-    "transform": [
-      {
-        "translateX": "10%",
-      },
-      {
-        "translateY": "20%",
-      },
-    ],
-  },
-}
-`;
-
-exports[`properties: general transform: translate 1`] = `
-{
-  "style": {
-    "transform": [
-      {
-        "translateX": 11,
-      },
-      {
-        "translateY": 12,
-      },
-    ],
-  },
-}
-`;
-
 exports[`properties: general transitionDelay 1`] = `
 {
   "style": {
@@ -775,545 +319,13 @@ exports[`properties: general userSelect 1`] = `
 }
 `;
 
-exports[`properties: general verticalAlign: middle 1`] = `
-{
-  "style": {
-    "verticalAlign": "middle",
-  },
-}
-`;
-
-exports[`properties: general verticalAlign: top 1`] = `
-{
-  "style": {
-    "verticalAlign": "top",
-  },
-}
-`;
-
-exports[`properties: general visibility: collapse 1`] = `
-{
-  "accessibilityElementsHidden": true,
-  "focusable": false,
-  "importantForAccessibility": "no-hide-descendants",
-  "pointerEvents": "none",
-  "style": {
-    "opacity": 0,
-  },
-}
-`;
-
-exports[`properties: general visibility: hidden 1`] = `
-{
-  "accessibilityElementsHidden": true,
-  "focusable": false,
-  "importantForAccessibility": "no-hide-descendants",
-  "pointerEvents": "none",
-  "style": {
-    "opacity": 0,
-  },
-}
-`;
-
-exports[`properties: general visibility: visible 1`] = `
-{
-  "style": {},
-}
-`;
-
-exports[`properties: general willChange 1`] = `
+exports[`properties: general willChange 1`] = `
 {
   "renderToHardwareTextureAndroid": true,
   "style": {},
 }
 `;
 
-exports[`properties: logical direction blockSize: blockSize 1`] = `
-{
-  "style": {
-    "height": 100,
-  },
-}
-`;
-
-exports[`properties: logical direction blockSize: blockSize after height 1`] = `
-{
-  "style": {
-    "height": 200,
-  },
-}
-`;
-
-exports[`properties: logical direction blockSize: maxBlockSize 1`] = `
-{
-  "style": {
-    "maxHeight": 100,
-  },
-}
-`;
-
-exports[`properties: logical direction blockSize: maxBlockSize after maxHeight 1`] = `
-{
-  "style": {
-    "maxHeight": 200,
-  },
-}
-`;
-
-exports[`properties: logical direction blockSize: minBlockSize 1`] = `
-{
-  "style": {
-    "minHeight": 100,
-  },
-}
-`;
-
-exports[`properties: logical direction blockSize: minBlockSize after minHeight 1`] = `
-{
-  "style": {
-    "minHeight": 200,
-  },
-}
-`;
-
-exports[`properties: logical direction borderBlock: borderBlock 1`] = `
-{
-  "style": {
-    "borderBottomColor": "black",
-    "borderBottomStyle": "solid",
-    "borderBottomWidth": 1,
-    "borderTopColor": "black",
-    "borderTopStyle": "solid",
-    "borderTopWidth": 1,
-  },
-}
-`;
-
-exports[`properties: logical direction borderBlock: borderBlock after borderBlockEnd 1`] = `
-{
-  "style": {
-    "borderBottomColor": "red",
-    "borderBottomStyle": "dotted",
-    "borderBottomWidth": 2,
-    "borderTopColor": "black",
-    "borderTopStyle": "solid",
-    "borderTopWidth": 1,
-  },
-}
-`;
-
-exports[`properties: logical direction borderBlock: borderBlock after borderBlockStart 1`] = `
-{
-  "style": {
-    "borderBottomColor": "black",
-    "borderBottomStyle": "solid",
-    "borderBottomWidth": 1,
-    "borderTopColor": "green",
-    "borderTopStyle": "dashed",
-    "borderTopWidth": 3,
-  },
-}
-`;
-
-exports[`properties: logical direction borderBlock: borderBlockEnd 1`] = `
-{
-  "style": {
-    "borderBottomColor": "red",
-    "borderBottomStyle": "dotted",
-    "borderBottomWidth": 2,
-  },
-}
-`;
-
-exports[`properties: logical direction borderBlock: borderBlockStart 1`] = `
-{
-  "style": {
-    "borderTopColor": "green",
-    "borderTopStyle": "dashed",
-    "borderTopWidth": 3,
-  },
-}
-`;
-
-exports[`properties: logical direction borderInline: borderInline 1`] = `
-{
-  "style": {
-    "borderEndColor": "black",
-    "borderEndStyle": "solid",
-    "borderEndWidth": 1,
-    "borderStartColor": "black",
-    "borderStartStyle": "solid",
-    "borderStartWidth": 1,
-  },
-}
-`;
-
-exports[`properties: logical direction borderInline: borderInline after borderInlineEnd 1`] = `
-{
-  "style": {
-    "borderEndColor": "red",
-    "borderEndStyle": "dotted",
-    "borderEndWidth": 2,
-    "borderStartColor": "black",
-    "borderStartStyle": "solid",
-    "borderStartWidth": 1,
-  },
-}
-`;
-
-exports[`properties: logical direction borderInline: borderInline after borderInlineStart 1`] = `
-{
-  "style": {
-    "borderEndColor": "black",
-    "borderEndStyle": "solid",
-    "borderEndWidth": 1,
-    "borderStartColor": "green",
-    "borderStartStyle": "dashed",
-    "borderStartWidth": 3,
-  },
-}
-`;
-
-exports[`properties: logical direction borderInline: borderInlineEnd 1`] = `
-{
-  "style": {
-    "borderEndColor": "red",
-    "borderEndStyle": "dotted",
-    "borderEndWidth": 2,
-  },
-}
-`;
-
-exports[`properties: logical direction borderInline: borderInlineStart 1`] = `
-{
-  "style": {
-    "borderStartColor": "green",
-    "borderStartStyle": "dashed",
-    "borderStartWidth": 3,
-  },
-}
-`;
-
-exports[`properties: logical direction borderRadius: endend 1`] = `
-{
-  "style": {
-    "borderBottomEndRadius": 10,
-  },
-}
-`;
-
-exports[`properties: logical direction borderRadius: endstart 1`] = `
-{
-  "style": {
-    "borderBottomStartRadius": 10,
-  },
-}
-`;
-
-exports[`properties: logical direction borderRadius: startend 1`] = `
-{
-  "style": {
-    "borderTopEndRadius": 10,
-  },
-}
-`;
-
-exports[`properties: logical direction borderRadius: startstart 1`] = `
-{
-  "style": {
-    "borderTopStartRadius": 10,
-  },
-}
-`;
-
-exports[`properties: logical direction inlineSize: inlineSize 1`] = `
-{
-  "style": {
-    "width": 100,
-  },
-}
-`;
-
-exports[`properties: logical direction inlineSize: inlineSize after width 1`] = `
-{
-  "style": {
-    "width": 200,
-  },
-}
-`;
-
-exports[`properties: logical direction inlineSize: maxInlineSize 1`] = `
-{
-  "style": {
-    "maxWidth": 100,
-  },
-}
-`;
-
-exports[`properties: logical direction inlineSize: maxInlineSize after maxWidth 1`] = `
-{
-  "style": {
-    "maxWidth": 200,
-  },
-}
-`;
-
-exports[`properties: logical direction inlineSize: minInlineSize 1`] = `
-{
-  "style": {
-    "minWidth": 100,
-  },
-}
-`;
-
-exports[`properties: logical direction inlineSize: minInlineSize after minWidth 1`] = `
-{
-  "style": {
-    "minWidth": 200,
-  },
-}
-`;
-
-exports[`properties: logical direction inset: inset 1`] = `
-{
-  "style": {
-    "bottom": 1,
-    "end": 1,
-    "start": 1,
-    "top": 1,
-  },
-}
-`;
-
-exports[`properties: logical direction inset: inset vs top 1`] = `
-{
-  "style": {
-    "bottom": 100,
-    "left": 10,
-    "right": 10,
-    "top": 100,
-  },
-}
-`;
-
-exports[`properties: logical direction inset: insetBlock 1`] = `
-{
-  "style": {
-    "bottom": 2,
-    "top": 2,
-  },
-}
-`;
-
-exports[`properties: logical direction inset: insetBlock vs top 1`] = `
-{
-  "style": {
-    "bottom": 100,
-    "top": 100,
-  },
-}
-`;
-
-exports[`properties: logical direction inset: insetBlockEnd 1`] = `
-{
-  "style": {
-    "bottom": 4,
-  },
-}
-`;
-
-exports[`properties: logical direction inset: insetBlockEnd vs bottom 1`] = `
-{
-  "style": {
-    "bottom": 100,
-  },
-}
-`;
-
-exports[`properties: logical direction inset: insetBlockStart 1`] = `
-{
-  "style": {
-    "top": 3,
-  },
-}
-`;
-
-exports[`properties: logical direction inset: insetBlockStart vs top 1`] = `
-{
-  "style": {
-    "top": 100,
-  },
-}
-`;
-
-exports[`properties: logical direction inset: insetInline 1`] = `
-{
-  "style": {
-    "end": 5,
-    "start": 5,
-  },
-}
-`;
-
-exports[`properties: logical direction inset: insetInlineEnd 1`] = `
-{
-  "style": {
-    "end": 7,
-  },
-}
-`;
-
-exports[`properties: logical direction inset: insetInlineStart 1`] = `
-{
-  "style": {
-    "start": 6,
-  },
-}
-`;
-
-exports[`properties: logical direction margin: marginBlock 1`] = `
-{
-  "style": {
-    "marginVertical": 1,
-  },
-}
-`;
-
-exports[`properties: logical direction margin: marginBlockEnd 1`] = `
-{
-  "style": {
-    "marginBottom": 3,
-  },
-}
-`;
-
-exports[`properties: logical direction margin: marginBlockStart 1`] = `
-{
-  "style": {
-    "marginTop": 2,
-  },
-}
-`;
-
-exports[`properties: logical direction margin: marginInline 1`] = `
-{
-  "style": {
-    "marginHorizontal": 1,
-  },
-}
-`;
-
-exports[`properties: logical direction margin: marginInlineEnd 1`] = `
-{
-  "style": {
-    "marginEnd": 3,
-  },
-}
-`;
-
-exports[`properties: logical direction margin: marginInlineStart 1`] = `
-{
-  "style": {
-    "marginStart": 2,
-  },
-}
-`;
-
-exports[`properties: logical direction padding: paddingBlock 1`] = `
-{
-  "style": {
-    "paddingVertical": 1,
-  },
-}
-`;
-
-exports[`properties: logical direction padding: paddingBlockEnd 1`] = `
-{
-  "style": {
-    "paddingBottom": 3,
-  },
-}
-`;
-
-exports[`properties: logical direction padding: paddingBlockStart 1`] = `
-{
-  "style": {
-    "paddingTop": 2,
-  },
-}
-`;
-
-exports[`properties: logical direction padding: paddingInline 1`] = `
-{
-  "style": {
-    "paddingHorizontal": 1,
-  },
-}
-`;
-
-exports[`properties: logical direction padding: paddingInlineEnd 1`] = `
-{
-  "style": {
-    "paddingEnd": 3,
-  },
-}
-`;
-
-exports[`properties: logical direction padding: paddingInlineStart 1`] = `
-{
-  "style": {
-    "paddingStart": 2,
-  },
-}
-`;
-
-exports[`properties: logical direction textAlign: center 1`] = `
-{
-  "style": {
-    "textAlign": "center",
-  },
-}
-`;
-
-exports[`properties: logical direction textAlign: end 1`] = `
-{
-  "style": {
-    "textAlign": "right",
-  },
-}
-`;
-
-exports[`properties: logical direction textAlign: left 1`] = `
-{
-  "style": {
-    "textAlign": "left",
-  },
-}
-`;
-
-exports[`properties: logical direction textAlign: right 1`] = `
-{
-  "style": {
-    "textAlign": "right",
-  },
-}
-`;
-
-exports[`properties: logical direction textAlign: start 1`] = `
-{
-  "style": {
-    "textAlign": "left",
-  },
-}
-`;
-
-exports[`styles: pseudo-element ::placeholder syntax: placeholderTextColor 1`] = `
-{
-  "placeholderTextColor": "red",
-  "style": {},
-}
-`;
-
 exports[`units: length '0' is resolved to the number 0 1`] = `
 {
   "style": {
diff --git a/packages/react-strict-dom/tests/css-test.native.js b/packages/react-strict-dom/tests/css-test.native.js
index fdcc91fc..f30b9fc6 100644
--- a/packages/react-strict-dom/tests/css-test.native.js
+++ b/packages/react-strict-dom/tests/css-test.native.js
@@ -307,32 +307,6 @@ describe('properties: general', () => {
       'Arial'
     );
 
-    const styles2 = css.create({
-      root: {
-        fontFamily: 'Arial !important'
-      }
-    });
-    expect(css.props.call(mockOptions, styles2.root)).toMatchSnapshot(
-      'with !important'
-    );
-    // Verify that !important is stripped
-    expect(css.props.call(mockOptions, styles2.root).style.fontFamily).toBe(
-      'Arial'
-    );
-
-    const styles3 = css.create({
-      root: {
-        fontFamily: 'Roboto, sans-serif !important'
-      }
-    });
-    expect(css.props.call(mockOptions, styles3.root)).toMatchSnapshot(
-      'with fallbacks and !important'
-    );
-    // Verify that !important is stripped and only first font is used
-    expect(css.props.call(mockOptions, styles3.root).style.fontFamily).toBe(
-      'Roboto'
-    );
-
     const styles4 = css.create({
       root: {
         fontFamily: 'Roboto, Helvetica, Arial, sans-serif'

From 0399c0d80084cf47762e47af6a9db6754eea371c Mon Sep 17 00:00:00 2001
From: Jta26 <joel.austinrd@gmail.com>
Date: Tue, 21 Oct 2025 15:28:36 -0700
Subject: [PATCH 4/4] snapshot tests

---
 .../__snapshots__/css-test.native.js.snap     | 976 +++++++++++++++++-
 1 file changed, 974 insertions(+), 2 deletions(-)

diff --git a/packages/react-strict-dom/tests/__snapshots__/css-test.native.js.snap b/packages/react-strict-dom/tests/__snapshots__/css-test.native.js.snap
index d56c7da3..dfd926de 100644
--- a/packages/react-strict-dom/tests/__snapshots__/css-test.native.js.snap
+++ b/packages/react-strict-dom/tests/__snapshots__/css-test.native.js.snap
@@ -1,5 +1,47 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`properties: custom property css.createTheme: css.__customProperties 1`] = `
+{
+  "rootColor__id__1": "red",
+  "rootColor__id__3": "red",
+  "themeAwareColor__id__2": {
+    "@media (prefers-color-scheme: dark)": "green",
+    "default": "blue",
+  },
+}
+`;
+
+exports[`properties: custom property css.createTheme: theme 1`] = `
+{
+  "$$theme": "theme",
+  "rootColor__id__3": "green",
+}
+`;
+
+exports[`properties: custom property css.defineConsts: constants 1`] = `
+{
+  "blueColor": "blue",
+  "redColor": "red",
+}
+`;
+
+exports[`properties: custom property css.defineVars: css.__customProperties 1`] = `
+{
+  "rootColor__id__1": "red",
+  "themeAwareColor__id__2": {
+    "@media (prefers-color-scheme: dark)": "green",
+    "default": "blue",
+  },
+}
+`;
+
+exports[`properties: custom property css.defineVars: tokens 1`] = `
+{
+  "rootColor": "var(--rootColor__id__1)",
+  "themeAwareColor": "var(--themeAwareColor__id__2)",
+}
+`;
+
 exports[`properties: custom property handles undefined variables 1`] = `
 {
   "style": {},
@@ -99,6 +141,42 @@ exports[`properties: general boxSizing: content-box 1`] = `
 }
 `;
 
+exports[`properties: general caretColor: red caret color 1`] = `
+{
+  "cursorColor": "red",
+  "style": {},
+}
+`;
+
+exports[`properties: general caretColor: transparent caret color 1`] = `
+{
+  "caretHidden": true,
+  "style": {},
+}
+`;
+
+exports[`properties: general caretColor: unsupported caret color 1`] = `
+{
+  "style": {},
+}
+`;
+
+exports[`properties: general direction: ltr 1`] = `
+{
+  "style": {
+    "direction": "ltr",
+  },
+}
+`;
+
+exports[`properties: general direction: rtl 1`] = `
+{
+  "style": {
+    "direction": "rtl",
+  },
+}
+`;
+
 exports[`properties: general filter 1`] = `
 {
   "style": {
@@ -139,6 +217,22 @@ exports[`properties: general fontFamily: with single quoted font name 1`] = `
 }
 `;
 
+exports[`properties: general fontSize: default 1`] = `
+{
+  "style": {
+    "fontSize": 40,
+  },
+}
+`;
+
+exports[`properties: general fontSize: fontScale:2 1`] = `
+{
+  "style": {
+    "fontSize": 80,
+  },
+}
+`;
+
 exports[`properties: general fontVariant 1`] = `
 {
   "style": {
@@ -178,6 +272,40 @@ exports[`properties: general lineClamp 1`] = `
 }
 `;
 
+exports[`properties: general lineHeight: px 1`] = `
+{
+  "style": {
+    "lineHeight": 24,
+  },
+}
+`;
+
+exports[`properties: general lineHeight: rem 1`] = `
+{
+  "style": {
+    "lineHeight": 24,
+  },
+}
+`;
+
+exports[`properties: general lineHeight: unitless number 1`] = `
+{
+  "style": {
+    "fontSize": 16,
+    "lineHeight": "1.5",
+  },
+}
+`;
+
+exports[`properties: general lineHeight: unitless string 1`] = `
+{
+  "style": {
+    "fontSize": 16,
+    "lineHeight": "1.5",
+  },
+}
+`;
+
 exports[`properties: general margin with multiple values 1`] = `
 {
   "style": {},
@@ -216,6 +344,46 @@ exports[`properties: general mixBlendMode 1`] = `
 }
 `;
 
+exports[`properties: general objectFit: contain 1`] = `
+{
+  "style": {
+    "objectFit": "contain",
+  },
+}
+`;
+
+exports[`properties: general objectFit: contain 2`] = `
+{
+  "style": {
+    "objectFit": "cover",
+  },
+}
+`;
+
+exports[`properties: general objectFit: fill 1`] = `
+{
+  "style": {
+    "objectFit": "fill",
+  },
+}
+`;
+
+exports[`properties: general objectFit: none 1`] = `
+{
+  "style": {
+    "objectFit": "scale-down",
+  },
+}
+`;
+
+exports[`properties: general objectFit: scaleDown 1`] = `
+{
+  "style": {
+    "objectFit": "scale-down",
+  },
+}
+`;
+
 exports[`properties: general opacity string value 1`] = `
 {
   "style": {
@@ -253,6 +421,51 @@ exports[`properties: general paddingVertical 1`] = `
 }
 `;
 
+exports[`properties: general placeContent: center 1`] = `
+{
+  "style": {
+    "alignContent": "center",
+    "justifyContent": "center",
+  },
+}
+`;
+
+exports[`properties: general placeContent: does not override existing long-forms 1`] = `
+{
+  "style": {
+    "alignContent": "flex-start",
+    "justifyContent": "flex-start",
+  },
+}
+`;
+
+exports[`properties: general placeContent: flexStart 1`] = `
+{
+  "style": {
+    "alignContent": "flex-start",
+    "justifyContent": "flex-start",
+  },
+}
+`;
+
+exports[`properties: general placeContent: invalid 1`] = `
+{
+  "style": {},
+}
+`;
+
+exports[`properties: general placeContent: safeCenter 1`] = `
+{
+  "style": {},
+}
+`;
+
+exports[`properties: general placeContent: stretch 1`] = `
+{
+  "style": {},
+}
+`;
+
 exports[`properties: general pointerEvents 1`] = `
 {
   "style": {
@@ -261,6 +474,46 @@ exports[`properties: general pointerEvents 1`] = `
 }
 `;
 
+exports[`properties: general position: absolute 1`] = `
+{
+  "style": {
+    "position": "absolute",
+  },
+}
+`;
+
+exports[`properties: general position: fixed 1`] = `
+{
+  "style": {
+    "position": "absolute",
+  },
+}
+`;
+
+exports[`properties: general position: relative 1`] = `
+{
+  "style": {
+    "position": "relative",
+  },
+}
+`;
+
+exports[`properties: general position: static 1`] = `
+{
+  "style": {
+    "position": "static",
+  },
+}
+`;
+
+exports[`properties: general position: sticky 1`] = `
+{
+  "style": {
+    "position": "relative",
+  },
+}
+`;
+
 exports[`properties: general textShadow 1`] = `
 {
   "style": {
@@ -287,6 +540,193 @@ exports[`properties: general textShadow 2`] = `
 }
 `;
 
+exports[`properties: general transform: matrix 1`] = `
+{
+  "style": {
+    "transform": [
+      {
+        "matrix": [
+          0.1,
+          1,
+          0,
+          0,
+          -0.3,
+          1,
+          0,
+          0,
+          0,
+          0,
+          1,
+          0,
+          0,
+          0,
+          0,
+          1,
+        ],
+      },
+    ],
+  },
+}
+`;
+
+exports[`properties: general transform: mixed 1`] = `
+{
+  "style": {
+    "transform": [
+      {
+        "rotateX": "1deg",
+      },
+      {
+        "rotateY": "2deg",
+      },
+      {
+        "rotateZ": "3deg",
+      },
+      {
+        "scale": 1,
+      },
+      {
+        "scaleX": 2,
+      },
+      {
+        "scaleY": 3,
+      },
+      {
+        "scaleZ": 4,
+      },
+      {
+        "translateX": 1,
+      },
+    ],
+  },
+}
+`;
+
+exports[`properties: general transform: none 1`] = `
+{
+  "style": {
+    "transform": [],
+  },
+}
+`;
+
+exports[`properties: general transform: perspective 1`] = `
+{
+  "style": {
+    "transform": [
+      {
+        "perspective": 10,
+      },
+    ],
+  },
+}
+`;
+
+exports[`properties: general transform: rotate 1`] = `
+{
+  "style": {
+    "transform": [
+      {
+        "rotate": "10deg",
+      },
+      {
+        "rotateX": "20deg",
+      },
+      {
+        "rotateY": "30deg",
+      },
+      {
+        "rotateZ": "40deg",
+      },
+    ],
+  },
+}
+`;
+
+exports[`properties: general transform: rotate 2`] = `
+{
+  "style": {
+    "transform": [
+      {
+        "rotate": "10deg",
+      },
+      {
+        "rotateX": "20deg",
+      },
+      {
+        "rotateY": "30deg",
+      },
+      {
+        "rotateZ": "40deg",
+      },
+    ],
+  },
+}
+`;
+
+exports[`properties: general transform: scale 1`] = `
+{
+  "style": {
+    "transform": [
+      {
+        "scaleX": 1,
+      },
+      {
+        "scaleY": 2,
+      },
+      {
+        "scaleZ": 3,
+      },
+    ],
+  },
+}
+`;
+
+exports[`properties: general transform: skew 1`] = `
+{
+  "style": {
+    "transform": [
+      {
+        "skewX": "20deg",
+      },
+      {
+        "skewY": "30deg",
+      },
+    ],
+  },
+}
+`;
+
+exports[`properties: general transform: translate (percentages) 1`] = `
+{
+  "style": {
+    "transform": [
+      {
+        "translateX": "10%",
+      },
+      {
+        "translateY": "20%",
+      },
+    ],
+  },
+}
+`;
+
+exports[`properties: general transform: translate 1`] = `
+{
+  "style": {
+    "transform": [
+      {
+        "translateX": 11,
+      },
+      {
+        "translateY": 12,
+      },
+    ],
+  },
+}
+`;
+
 exports[`properties: general transitionDelay 1`] = `
 {
   "style": {
@@ -319,9 +759,541 @@ exports[`properties: general userSelect 1`] = `
 }
 `;
 
-exports[`properties: general willChange 1`] = `
+exports[`properties: general verticalAlign: middle 1`] = `
 {
-  "renderToHardwareTextureAndroid": true,
+  "style": {
+    "verticalAlign": "middle",
+  },
+}
+`;
+
+exports[`properties: general verticalAlign: top 1`] = `
+{
+  "style": {
+    "verticalAlign": "top",
+  },
+}
+`;
+
+exports[`properties: general visibility: collapse 1`] = `
+{
+  "accessibilityElementsHidden": true,
+  "focusable": false,
+  "importantForAccessibility": "no-hide-descendants",
+  "pointerEvents": "none",
+  "style": {
+    "opacity": 0,
+  },
+}
+`;
+
+exports[`properties: general visibility: hidden 1`] = `
+{
+  "accessibilityElementsHidden": true,
+  "focusable": false,
+  "importantForAccessibility": "no-hide-descendants",
+  "pointerEvents": "none",
+  "style": {
+    "opacity": 0,
+  },
+}
+`;
+
+exports[`properties: general visibility: visible 1`] = `
+{
+  "style": {},
+}
+`;
+
+exports[`properties: general willChange 1`] = `
+{
+  "renderToHardwareTextureAndroid": true,
+  "style": {},
+}
+`;
+
+exports[`properties: logical direction blockSize: blockSize 1`] = `
+{
+  "style": {
+    "height": 100,
+  },
+}
+`;
+
+exports[`properties: logical direction blockSize: blockSize after height 1`] = `
+{
+  "style": {
+    "height": 200,
+  },
+}
+`;
+
+exports[`properties: logical direction blockSize: maxBlockSize 1`] = `
+{
+  "style": {
+    "maxHeight": 100,
+  },
+}
+`;
+
+exports[`properties: logical direction blockSize: maxBlockSize after maxHeight 1`] = `
+{
+  "style": {
+    "maxHeight": 200,
+  },
+}
+`;
+
+exports[`properties: logical direction blockSize: minBlockSize 1`] = `
+{
+  "style": {
+    "minHeight": 100,
+  },
+}
+`;
+
+exports[`properties: logical direction blockSize: minBlockSize after minHeight 1`] = `
+{
+  "style": {
+    "minHeight": 200,
+  },
+}
+`;
+
+exports[`properties: logical direction borderBlock: borderBlock 1`] = `
+{
+  "style": {
+    "borderBottomColor": "black",
+    "borderBottomStyle": "solid",
+    "borderBottomWidth": 1,
+    "borderTopColor": "black",
+    "borderTopStyle": "solid",
+    "borderTopWidth": 1,
+  },
+}
+`;
+
+exports[`properties: logical direction borderBlock: borderBlock after borderBlockEnd 1`] = `
+{
+  "style": {
+    "borderBottomColor": "red",
+    "borderBottomStyle": "dotted",
+    "borderBottomWidth": 2,
+    "borderTopColor": "black",
+    "borderTopStyle": "solid",
+    "borderTopWidth": 1,
+  },
+}
+`;
+
+exports[`properties: logical direction borderBlock: borderBlock after borderBlockStart 1`] = `
+{
+  "style": {
+    "borderBottomColor": "black",
+    "borderBottomStyle": "solid",
+    "borderBottomWidth": 1,
+    "borderTopColor": "green",
+    "borderTopStyle": "dashed",
+    "borderTopWidth": 3,
+  },
+}
+`;
+
+exports[`properties: logical direction borderBlock: borderBlockEnd 1`] = `
+{
+  "style": {
+    "borderBottomColor": "red",
+    "borderBottomStyle": "dotted",
+    "borderBottomWidth": 2,
+  },
+}
+`;
+
+exports[`properties: logical direction borderBlock: borderBlockStart 1`] = `
+{
+  "style": {
+    "borderTopColor": "green",
+    "borderTopStyle": "dashed",
+    "borderTopWidth": 3,
+  },
+}
+`;
+
+exports[`properties: logical direction borderInline: borderInline 1`] = `
+{
+  "style": {
+    "borderEndColor": "black",
+    "borderEndStyle": "solid",
+    "borderEndWidth": 1,
+    "borderStartColor": "black",
+    "borderStartStyle": "solid",
+    "borderStartWidth": 1,
+  },
+}
+`;
+
+exports[`properties: logical direction borderInline: borderInline after borderInlineEnd 1`] = `
+{
+  "style": {
+    "borderEndColor": "red",
+    "borderEndStyle": "dotted",
+    "borderEndWidth": 2,
+    "borderStartColor": "black",
+    "borderStartStyle": "solid",
+    "borderStartWidth": 1,
+  },
+}
+`;
+
+exports[`properties: logical direction borderInline: borderInline after borderInlineStart 1`] = `
+{
+  "style": {
+    "borderEndColor": "black",
+    "borderEndStyle": "solid",
+    "borderEndWidth": 1,
+    "borderStartColor": "green",
+    "borderStartStyle": "dashed",
+    "borderStartWidth": 3,
+  },
+}
+`;
+
+exports[`properties: logical direction borderInline: borderInlineEnd 1`] = `
+{
+  "style": {
+    "borderEndColor": "red",
+    "borderEndStyle": "dotted",
+    "borderEndWidth": 2,
+  },
+}
+`;
+
+exports[`properties: logical direction borderInline: borderInlineStart 1`] = `
+{
+  "style": {
+    "borderStartColor": "green",
+    "borderStartStyle": "dashed",
+    "borderStartWidth": 3,
+  },
+}
+`;
+
+exports[`properties: logical direction borderRadius: endend 1`] = `
+{
+  "style": {
+    "borderBottomEndRadius": 10,
+  },
+}
+`;
+
+exports[`properties: logical direction borderRadius: endstart 1`] = `
+{
+  "style": {
+    "borderBottomStartRadius": 10,
+  },
+}
+`;
+
+exports[`properties: logical direction borderRadius: startend 1`] = `
+{
+  "style": {
+    "borderTopEndRadius": 10,
+  },
+}
+`;
+
+exports[`properties: logical direction borderRadius: startstart 1`] = `
+{
+  "style": {
+    "borderTopStartRadius": 10,
+  },
+}
+`;
+
+exports[`properties: logical direction inlineSize: inlineSize 1`] = `
+{
+  "style": {
+    "width": 100,
+  },
+}
+`;
+
+exports[`properties: logical direction inlineSize: inlineSize after width 1`] = `
+{
+  "style": {
+    "width": 200,
+  },
+}
+`;
+
+exports[`properties: logical direction inlineSize: maxInlineSize 1`] = `
+{
+  "style": {
+    "maxWidth": 100,
+  },
+}
+`;
+
+exports[`properties: logical direction inlineSize: maxInlineSize after maxWidth 1`] = `
+{
+  "style": {
+    "maxWidth": 200,
+  },
+}
+`;
+
+exports[`properties: logical direction inlineSize: minInlineSize 1`] = `
+{
+  "style": {
+    "minWidth": 100,
+  },
+}
+`;
+
+exports[`properties: logical direction inlineSize: minInlineSize after minWidth 1`] = `
+{
+  "style": {
+    "minWidth": 200,
+  },
+}
+`;
+
+exports[`properties: logical direction inset: inset 1`] = `
+{
+  "style": {
+    "bottom": 1,
+    "end": 1,
+    "start": 1,
+    "top": 1,
+  },
+}
+`;
+
+exports[`properties: logical direction inset: inset vs top 1`] = `
+{
+  "style": {
+    "bottom": 100,
+    "left": 10,
+    "right": 10,
+    "top": 100,
+  },
+}
+`;
+
+exports[`properties: logical direction inset: insetBlock 1`] = `
+{
+  "style": {
+    "bottom": 2,
+    "top": 2,
+  },
+}
+`;
+
+exports[`properties: logical direction inset: insetBlock vs top 1`] = `
+{
+  "style": {
+    "bottom": 100,
+    "top": 100,
+  },
+}
+`;
+
+exports[`properties: logical direction inset: insetBlockEnd 1`] = `
+{
+  "style": {
+    "bottom": 4,
+  },
+}
+`;
+
+exports[`properties: logical direction inset: insetBlockEnd vs bottom 1`] = `
+{
+  "style": {
+    "bottom": 100,
+  },
+}
+`;
+
+exports[`properties: logical direction inset: insetBlockStart 1`] = `
+{
+  "style": {
+    "top": 3,
+  },
+}
+`;
+
+exports[`properties: logical direction inset: insetBlockStart vs top 1`] = `
+{
+  "style": {
+    "top": 100,
+  },
+}
+`;
+
+exports[`properties: logical direction inset: insetInline 1`] = `
+{
+  "style": {
+    "end": 5,
+    "start": 5,
+  },
+}
+`;
+
+exports[`properties: logical direction inset: insetInlineEnd 1`] = `
+{
+  "style": {
+    "end": 7,
+  },
+}
+`;
+
+exports[`properties: logical direction inset: insetInlineStart 1`] = `
+{
+  "style": {
+    "start": 6,
+  },
+}
+`;
+
+exports[`properties: logical direction margin: marginBlock 1`] = `
+{
+  "style": {
+    "marginVertical": 1,
+  },
+}
+`;
+
+exports[`properties: logical direction margin: marginBlockEnd 1`] = `
+{
+  "style": {
+    "marginBottom": 3,
+  },
+}
+`;
+
+exports[`properties: logical direction margin: marginBlockStart 1`] = `
+{
+  "style": {
+    "marginTop": 2,
+  },
+}
+`;
+
+exports[`properties: logical direction margin: marginInline 1`] = `
+{
+  "style": {
+    "marginHorizontal": 1,
+  },
+}
+`;
+
+exports[`properties: logical direction margin: marginInlineEnd 1`] = `
+{
+  "style": {
+    "marginEnd": 3,
+  },
+}
+`;
+
+exports[`properties: logical direction margin: marginInlineStart 1`] = `
+{
+  "style": {
+    "marginStart": 2,
+  },
+}
+`;
+
+exports[`properties: logical direction padding: paddingBlock 1`] = `
+{
+  "style": {
+    "paddingVertical": 1,
+  },
+}
+`;
+
+exports[`properties: logical direction padding: paddingBlockEnd 1`] = `
+{
+  "style": {
+    "paddingBottom": 3,
+  },
+}
+`;
+
+exports[`properties: logical direction padding: paddingBlockStart 1`] = `
+{
+  "style": {
+    "paddingTop": 2,
+  },
+}
+`;
+
+exports[`properties: logical direction padding: paddingInline 1`] = `
+{
+  "style": {
+    "paddingHorizontal": 1,
+  },
+}
+`;
+
+exports[`properties: logical direction padding: paddingInlineEnd 1`] = `
+{
+  "style": {
+    "paddingEnd": 3,
+  },
+}
+`;
+
+exports[`properties: logical direction padding: paddingInlineStart 1`] = `
+{
+  "style": {
+    "paddingStart": 2,
+  },
+}
+`;
+
+exports[`properties: logical direction textAlign: center 1`] = `
+{
+  "style": {
+    "textAlign": "center",
+  },
+}
+`;
+
+exports[`properties: logical direction textAlign: end 1`] = `
+{
+  "style": {
+    "textAlign": "right",
+  },
+}
+`;
+
+exports[`properties: logical direction textAlign: left 1`] = `
+{
+  "style": {
+    "textAlign": "left",
+  },
+}
+`;
+
+exports[`properties: logical direction textAlign: right 1`] = `
+{
+  "style": {
+    "textAlign": "right",
+  },
+}
+`;
+
+exports[`properties: logical direction textAlign: start 1`] = `
+{
+  "style": {
+    "textAlign": "left",
+  },
+}
+`;
+
+exports[`styles: pseudo-element ::placeholder syntax: placeholderTextColor 1`] = `
+{
+  "placeholderTextColor": "red",
   "style": {},
 }
 `;