Minor fixes

Close #2264
Close #2275

packages/benchmarks/src/app/Icons.js

@@ -15,16 +15,13 @@ const styles = StyleSheet.create({
 
 const createIcon = (children) => {
   const Icon = (props) =>
-    createElement(
-      'svg',
-      {
-        style: StyleSheet.compose(styles.root, props.style),
-        width: 24,
-        height: 24,
-        viewBox: '0 0 24 24'
-      },
-      children
-    );
+    createElement('svg', {
+      children,
+      style: StyleSheet.compose(styles.root, props.style),
+      width: 24,
+      height: 24,
+      viewBox: '0 0 24 24'
+    });
   return Icon;
 };
 

packages/docs/src/pages/docs/concepts/accessibility.md

@@ -243,7 +243,7 @@ The `focusable` prop determines whether a component is user-focusable and appear
 ```
 
 :::callout
-**Did you know?** Any element (including elements not in the keybaord tab flow) can be programmatically focused via `UIManager.focus(viewRef.current)`.
+**Did you know?** Any element (including elements not in the keyboard tab flow) can be programmatically focused via `UIManager.focus(viewRef.current)`.
 :::
 
 ### Accessible HTML

packages/react-native-web/package.json

@@ -22,7 +22,7 @@
     "normalize-css-color": "^1.0.2",
     "postcss-value-parser": "^4.2.0",
     "prop-types": "^15.6.0",
-    "styleq": "0.0.0-afc6b2c59"
+    "styleq": "0.1.0"
   },
   "peerDependencies": {
     "react": ">=17.0.2",

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/dist/transform-localize-style';
+import { localizeStyle } from 'styleq/transform-localize-style';
 import { preprocess } from './preprocess';
 import { styleq } from 'styleq';
 import { validate } from './validate';
@@ -22,8 +22,8 @@ const sheet = createSheet();
 function customStyleq(styles, isRTL) {
   return styleq.factory({
     transform(style) {
-      if (staticStyleMap.has(style)) {
-        const compiledStyle = staticStyleMap.get(style);
+      const compiledStyle = staticStyleMap.get(style);
+      if (compiledStyle != null) {
         return localizeStyle(compiledStyle, isRTL);
       }
       return style;
@@ -71,7 +71,8 @@ const absoluteFill = create({ x: { ...absoluteFillObject } }).x;
 function create(styles: Object): {| [key: string]: { [key: string]: any } |} {
   Object.keys(styles).forEach((key) => {
     const styleObj = styles[key];
-    if (styleObj != null) {
+    // Only compile at runtime if the style is not already compiled
+    if (styleObj != null && styleObj.$$css !== true) {
       let compiledStyles;
       if (key.indexOf('$raw') > -1) {
         compiledStyles = compileAndInsertReset(styleObj, key.split('$raw')[0]);