diff --git a/flow-typed/npm/styleq.js b/flow-typed/npm/styleq.js index a77fadf9d..b8b3837a9 100644 --- a/flow-typed/npm/styleq.js +++ b/flow-typed/npm/styleq.js @@ -10,13 +10,13 @@ type InlineStyle = { type EitherStyle = CompiledStyle | InlineStyle; type StylesArray<+T> = T | $ReadOnlyArray>; -type Styles = StylesArray; +type Styles = StylesArray; type Style<+T = EitherStyle> = StylesArray; 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 + }; +} diff --git a/package.json b/package.json index 329088606..785c5e1ea 100644 --- a/package.json +++ b/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", diff --git a/packages/benchmarks/src/app/Icons.js b/packages/benchmarks/src/app/Icons.js index a5fb9e99b..c665a05e7 100644 --- a/packages/benchmarks/src/app/Icons.js +++ b/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; }; diff --git a/packages/docs/src/pages/docs/concepts/accessibility.md b/packages/docs/src/pages/docs/concepts/accessibility.md index ef08ca130..621cb2876 100644 --- a/packages/docs/src/pages/docs/concepts/accessibility.md +++ b/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 diff --git a/packages/react-native-web/package.json b/packages/react-native-web/package.json index 4400c958f..54052de01 100644 --- a/packages/react-native-web/package.json +++ b/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", diff --git a/packages/react-native-web/src/exports/StyleSheet/index.js b/packages/react-native-web/src/exports/StyleSheet/index.js index c95a96e4e..1f06d4ec8 100644 --- a/packages/react-native-web/src/exports/StyleSheet/index.js +++ b/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]); diff --git a/scripts/jest/config.js b/scripts/jest/config.js index 885181d68..aa49a625f 100644 --- a/scripts/jest/config.js +++ b/scripts/jest/config.js @@ -10,7 +10,7 @@ module.exports = { ], rootDir: process.cwd(), roots: ['/packages'], - setupFiles: ['jest-canvas-mock', require.resolve('./setupFiles.dom.js')], + setupFiles: [require.resolve('./setupFiles.dom.js')], snapshotFormat: { printBasicPrototype: false }, diff --git a/yarn.lock b/yarn.lock index 7903e7057..113d9b8f4 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2866,7 +2866,7 @@ color-name@1.1.3: 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 @@ minimist-options@4.1.0: 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 @@ styled-jsx@5.0.0: 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"