Minor fixes

Close #2264
Close #2275

flow-typed/npm/styleq.js

@@ -10,13 +10,13 @@ type InlineStyle = {
 type EitherStyle = CompiledStyle | InlineStyle;
 
 type StylesArray<+T> = T | $ReadOnlyArray<StylesArray<T>>;
-type Styles = StylesArray<CompiledStyle | InlineStyle | false>;
+type Styles = StylesArray<EitherStyle | false | void>;
 type Style<+T = EitherStyle> = StylesArray<false | ?T>;
 
 type StyleqOptions = {
   disableCache?: boolean,
   disableMix?: boolean,
-  transform?: (CompiledStyle) => CompiledStyle,
+  transform?: (EitherStyle) => EitherStyle,
 };
 
 type StyleqResult = [string, InlineStyle | null];
@@ -32,3 +32,9 @@ declare module "styleq" {
     styleq: IStyleq
   };
 }
+
+declare module "styleq/dist/transform-localize-style" {
+  declare module.exports: {
+    localizeStyle: (style: EitherStyle, isRTL: boolean) => EitherStyle
+  };
+}

package.json

@@ -60,7 +60,6 @@
     "husky": "^4.3.8",
     "inline-style-prefixer": "^6.0.0",
     "jest": "^27.5.1",
-    "jest-canvas-mock": "^2.3.1",
     "lint-staged": "^10.5.4",
     "npm-run-all": "^4.1.3",
     "prettier": "^2.2.1",

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

@@ -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]);

scripts/jest/config.js

@@ -10,7 +10,7 @@ module.exports = {
   ],
   rootDir: process.cwd(),
   roots: ['<rootDir>/packages'],
-  setupFiles: ['jest-canvas-mock', require.resolve('./setupFiles.dom.js')],
+  setupFiles: [require.resolve('./setupFiles.dom.js')],
   snapshotFormat: {
     printBasicPrototype: false
   },

yarn.lock

@@ -2866,7 +2866,7 @@ [email protected]:
   resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.3.tgz#a7d0558bd89c42f795dd42328f740831ca53bc25"
   integrity sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=
 
-color-name@^1.1.4, color-name@~1.1.4:
+color-name@~1.1.4:
   version "1.1.4"
   resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.4.tgz"
   integrity sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==
@@ -3146,11 +3146,6 @@ cssesc@^3.0.0:
   resolved "https://registry.yarnpkg.com/cssesc/-/cssesc-3.0.0.tgz"
   integrity sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==
 
-cssfontparser@^1.2.1:
-  version "1.2.1"
-  resolved "https://registry.yarnpkg.com/cssfontparser/-/cssfontparser-1.2.1.tgz"
-  integrity sha1-9AIvyPlwDGgCnVQghK+69CWj8+M=
-
 csso@^4.2.0:
   version "4.2.0"
   resolved "https://registry.npmjs.org/csso/-/csso-4.2.0.tgz"
@@ -4997,14 +4992,6 @@ jake@^10.6.1:
     filelist "^1.0.1"
     minimatch "^3.0.4"
 
-jest-canvas-mock@^2.3.1:
-  version "2.3.1"
-  resolved "https://registry.yarnpkg.com/jest-canvas-mock/-/jest-canvas-mock-2.3.1.tgz#9535d14bc18ccf1493be36ac37dd349928387826"
-  integrity sha512-5FnSZPrX3Q2ZfsbYNE3wqKR3+XorN8qFzDzB5o0golWgt6EOX1+emBnpOc9IAQ+NXFj8Nzm3h7ZdE/9H0ylBcg==
-  dependencies:
-    cssfontparser "^1.2.1"
-    moo-color "^1.0.2"
-
 jest-changed-files@^27.5.1:
   version "27.5.1"
   resolved "https://registry.yarnpkg.com/jest-changed-files/-/jest-changed-files-27.5.1.tgz#a348aed00ec9bf671cc58a66fcbe7c3dfd6a68f5"
@@ -6041,9 +6028,9 @@ [email protected]:
     kind-of "^6.0.3"
 
 minimist@^1.2.0, minimist@^1.2.5:
-  version "1.2.5"
-  resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.5.tgz#67d66014b66a6a8aaa0c083c5fd58df4e4e97602"
-  integrity sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw==
+  version "1.2.6"
+  resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.6.tgz#8637a5b759ea0d6e98702cfb3a9283323c93af44"
+  integrity sha512-Jsjnk4bw3YJqYzbdyBiNsPWHPfO++UGG749Cxs6peCu5Xg4nrena6OVxOYxrQTqww0Jmwt+Ref8rggumkTLz9Q==
 
 mitt@^1.1.3:
   version "1.2.0"
@@ -6070,13 +6057,6 @@ mkdirp@^1.0.4:
   resolved "https://registry.npmjs.org/mkdirp/-/mkdirp-1.0.4.tgz"
   integrity sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw==
 
-moo-color@^1.0.2:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/moo-color/-/moo-color-1.0.2.tgz#837c40758d2d58763825d1359a84e330531eca64"
-  integrity sha512-5iXz5n9LWQzx/C2WesGFfpE6RLamzdHwsn3KpfzShwbfIqs7stnoEpaNErf/7+3mbxwZ4s8Foq7I0tPxw7BWHg==
-  dependencies:
-    color-name "^1.1.4"
-
 moo@^0.5.1:
   version "0.5.1"
   resolved "https://registry.npmjs.org/moo/-/moo-0.5.1.tgz"
@@ -7929,10 +7909,10 @@ [email protected]:
   resolved "https://registry.yarnpkg.com/styled-jsx/-/styled-jsx-5.0.0.tgz#816b4b92e07b1786c6b7111821750e0ba4d26e77"
   integrity sha512-qUqsWoBquEdERe10EW8vLp3jT25s/ssG1/qX5gZ4wu15OZpmSMFI2v+fWlRhLfykA5rFtlJ1ME8A8pm/peV4WA==
 
-styleq@0.0.0-afc6b2c59:
-  version "0.0.0-afc6b2c59"
-  resolved "https://registry.yarnpkg.com/styleq/-/styleq-0.0.0-afc6b2c59.tgz#d83f1d462ee9be71405bae79a44416350ca216d1"
-  integrity sha512-/DoJ+Moi4+wn14JyLfWaghuub5urI//6bZHa1rCC6QtNMVI3LlpxsHLCaoPuD1POniViJaOPNRrLAesGT+nnow==
+styleq@0.1.0:
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/styleq/-/styleq-0.1.0.tgz#fa7ddd0e8dcd1a5393fc8786a272ce5dfa799443"
+  integrity sha512-3pZrGqJnCkAJK0yIzIxWv/iTFv+cCjBJyw6uB5TOw2JhdNeCgmsuqWwDTSD8hneproiI9MGl9SfSG8OSEv4svw==
 
 supports-color@^2.0.0:
   version "2.0.0"