Skip to content

Commit

Permalink
[change] StyleSheet rewrite
Browse files Browse the repository at this point in the history 
* Improves React Native compatibility by making StyleSheet.create the identify function.
* Improves React 18 support by inserting styles on eval.
* Supports use with multiple windows (i.e., iframes) and shadow roots.
* Supports nested LTR/RTL layouts.
* Supports 3rd party compilers and extraction to static CSS.
* Fixes static and dynamic short/longform deduplication.
* Reduces browser support: Safari 10.1+, Chromium Edge, no IE, no legacy Android browsers.
* Removes automatic vendor-prefixing of inline styles (for better perf).
* Removes focus-visible polyfill as modern browsers no longer show focus rings for mouse interactions.

Close #2208
Fix #2138
Fix #2196
Fix #2007
Fix #1517
  • Loading branch information
@necolas
necolas committed Mar 2, 2022
1 parent 174ebb3 commit b27c982
Show file tree
Hide file tree
Showing 77 changed files with 2,560 additions and 2,884 deletions.
34 changes: 34 additions & 0 deletions flow-typed/npm/styleq.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,34 @@
type CompiledStyle = {
$$css: boolean,
[key: string]: string,
};

type InlineStyle = {
[key: string]: mixed,
};

type EitherStyle = CompiledStyle | InlineStyle;

type StylesArray<+T> = T | $ReadOnlyArray<StylesArray<T>>;
type Styles = StylesArray<CompiledStyle | InlineStyle | false>;
type Style<+T = EitherStyle> = StylesArray<false | ?T>;

type StyleqOptions = {
disableCache?: boolean,
disableMix?: boolean,
transform?: (CompiledStyle) => CompiledStyle,
};

type StyleqResult = [string, InlineStyle | null];
type Styleq = (styles: Styles) => StyleqResult;

type IStyleq = {
(...styles: $ReadOnlyArray<Styles>): StyleqResult,
factory: (options?: StyleqOptions) => Styleq,
};

declare module "styleq" {
declare module.exports: {
styleq: IStyleq
};
}
16 changes: 8 additions & 8 deletions packages/dom-event-testing-library/src/__tests__/index-test.js
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,3 @@
/* eslint-env jasmine, jest */

/**
* Copyright (c) Facebook, Inc. and its affiliates.
*
Expand Down Expand Up @@ -49,7 +47,7 @@ describe('createEventTarget', () => {
const target = createEventTarget(node);
expect(target.node).toEqual(node);
expect(Object.keys(target)).toMatchInlineSnapshot(`
Array [
[
"node",
"blur",
"click",
Expand Down Expand Up @@ -331,9 +329,7 @@ describe('createEventTarget', () => {
});

/**
* Complex event sequences
*
* ...coming soon
* TODO: Complex event sequences
*/

/**
Expand All @@ -343,24 +339,28 @@ describe('createEventTarget', () => {
test('.setBoundingClientRect()', () => {
const target = createEventTarget(node);
expect(node.getBoundingClientRect()).toMatchInlineSnapshot(`
Object {
{
"bottom": 0,
"height": 0,
"left": 0,
"right": 0,
"top": 0,
"width": 0,
"x": 0,
"y": 0,
}
`);
target.setBoundingClientRect({ x: 10, y: 20, width: 100, height: 200 });
expect(node.getBoundingClientRect()).toMatchInlineSnapshot(`
Object {
{
"bottom": 220,
"height": 200,
"left": 10,
"right": 110,
"top": 20,
"width": 100,
"x": 10,
"y": 20,
}
`);
});
Expand Down
48 changes: 24 additions & 24 deletions ...react-native-web/src/exports/ActivityIndicator/__tests__/__snapshots__/index-test.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,11 +5,11 @@ exports[`components/ActivityIndicator prop "accessibilityLabel" value is set 1`]
aria-label="accessibility label"
aria-valuemax="1"
aria-valuemin="0"
class="css-view-1dbjc4n r-alignItems-1awozwy r-justifyContent-1777fci"
class="css-view-175oi2r r-alignItems-1awozwy r-justifyContent-1777fci"
role="progressbar"
>
<div
class="css-view-1dbjc4n r-animationDuration-17bb2tj r-animationIterationCount-1muvv40 r-animationKeyframes-127358a r-animationTimingFunction-1ldzwu0 r-height-z80fyv r-width-19wmn03"
class="css-view-175oi2r r-height-z80fyv r-width-19wmn03 r-animationDuration-17bb2tj r-animationIterationCount-1muvv40 r-animationKeyframes-127358a r-animationTimingFunction-1ldzwu0"
>
<svg
height="100%"
Expand Down Expand Up @@ -42,11 +42,11 @@ exports[`components/ActivityIndicator prop "accessibilityLiveRegion" value is se
aria-live="polite"
aria-valuemax="1"
aria-valuemin="0"
class="css-view-1dbjc4n r-alignItems-1awozwy r-justifyContent-1777fci"
class="css-view-175oi2r r-alignItems-1awozwy r-justifyContent-1777fci"
role="progressbar"
>
<div
class="css-view-1dbjc4n r-animationDuration-17bb2tj r-animationIterationCount-1muvv40 r-animationKeyframes-127358a r-animationTimingFunction-1ldzwu0 r-height-z80fyv r-width-19wmn03"
class="css-view-175oi2r r-height-z80fyv r-width-19wmn03 r-animationDuration-17bb2tj r-animationIterationCount-1muvv40 r-animationKeyframes-127358a r-animationTimingFunction-1ldzwu0"
>
<svg
height="100%"
Expand Down Expand Up @@ -78,11 +78,11 @@ exports[`components/ActivityIndicator prop "animating" is "false" 1`] = `
<div
aria-valuemax="1"
aria-valuemin="0"
class="css-view-1dbjc4n r-alignItems-1awozwy r-justifyContent-1777fci"
class="css-view-175oi2r r-alignItems-1awozwy r-justifyContent-1777fci"
role="progressbar"
>
<div
class="css-view-1dbjc4n r-animationDuration-17bb2tj r-animationIterationCount-1muvv40 r-animationKeyframes-127358a r-animationPlayState-1abnn5w r-animationTimingFunction-1ldzwu0 r-height-z80fyv r-visibility-11j9u27 r-width-19wmn03"
class="css-view-175oi2r r-height-z80fyv r-width-19wmn03 r-animationDuration-17bb2tj r-animationIterationCount-1muvv40 r-animationKeyframes-127358a r-animationTimingFunction-1ldzwu0 r-animationPlayState-1abnn5w r-visibility-11j9u27"
>
<svg
height="100%"
Expand Down Expand Up @@ -114,11 +114,11 @@ exports[`components/ActivityIndicator prop "animating" is "true" 1`] = `
<div
aria-valuemax="1"
aria-valuemin="0"
class="css-view-1dbjc4n r-alignItems-1awozwy r-justifyContent-1777fci"
class="css-view-175oi2r r-alignItems-1awozwy r-justifyContent-1777fci"
role="progressbar"
>
<div
class="css-view-1dbjc4n r-animationDuration-17bb2tj r-animationIterationCount-1muvv40 r-animationKeyframes-127358a r-animationTimingFunction-1ldzwu0 r-height-z80fyv r-width-19wmn03"
class="css-view-175oi2r r-height-z80fyv r-width-19wmn03 r-animationDuration-17bb2tj r-animationIterationCount-1muvv40 r-animationKeyframes-127358a r-animationTimingFunction-1ldzwu0"
>
<svg
height="100%"
Expand Down Expand Up @@ -175,13 +175,13 @@ exports[`components/ActivityIndicator prop "dataSet" value is set 1`] = `
<div
aria-valuemax="1"
aria-valuemin="0"
class="css-view-1dbjc4n r-alignItems-1awozwy r-justifyContent-1777fci"
class="css-view-175oi2r r-alignItems-1awozwy r-justifyContent-1777fci"
data-one="one"
data-two="two"
role="progressbar"
>
<div
class="css-view-1dbjc4n r-animationDuration-17bb2tj r-animationIterationCount-1muvv40 r-animationKeyframes-127358a r-animationTimingFunction-1ldzwu0 r-height-z80fyv r-width-19wmn03"
class="css-view-175oi2r r-height-z80fyv r-width-19wmn03 r-animationDuration-17bb2tj r-animationIterationCount-1muvv40 r-animationKeyframes-127358a r-animationTimingFunction-1ldzwu0"
>
<svg
height="100%"
Expand Down Expand Up @@ -213,11 +213,11 @@ exports[`components/ActivityIndicator prop "hidesWhenStopped" is "false" 1`] = `
<div
aria-valuemax="1"
aria-valuemin="0"
class="css-view-1dbjc4n r-alignItems-1awozwy r-justifyContent-1777fci"
class="css-view-175oi2r r-alignItems-1awozwy r-justifyContent-1777fci"
role="progressbar"
>
<div
class="css-view-1dbjc4n r-animationDuration-17bb2tj r-animationIterationCount-1muvv40 r-animationKeyframes-127358a r-animationPlayState-1abnn5w r-animationTimingFunction-1ldzwu0 r-height-z80fyv r-width-19wmn03"
class="css-view-175oi2r r-height-z80fyv r-width-19wmn03 r-animationDuration-17bb2tj r-animationIterationCount-1muvv40 r-animationKeyframes-127358a r-animationTimingFunction-1ldzwu0 r-animationPlayState-1abnn5w"
>
<svg
height="100%"
Expand Down Expand Up @@ -249,11 +249,11 @@ exports[`components/ActivityIndicator prop "hidesWhenStopped" is "true" 1`] = `
<div
aria-valuemax="1"
aria-valuemin="0"
class="css-view-1dbjc4n r-alignItems-1awozwy r-justifyContent-1777fci"
class="css-view-175oi2r r-alignItems-1awozwy r-justifyContent-1777fci"
role="progressbar"
>
<div
class="css-view-1dbjc4n r-animationDuration-17bb2tj r-animationIterationCount-1muvv40 r-animationKeyframes-127358a r-animationPlayState-1abnn5w r-animationTimingFunction-1ldzwu0 r-height-z80fyv r-visibility-11j9u27 r-width-19wmn03"
class="css-view-175oi2r r-height-z80fyv r-width-19wmn03 r-animationDuration-17bb2tj r-animationIterationCount-1muvv40 r-animationKeyframes-127358a r-animationTimingFunction-1ldzwu0 r-animationPlayState-1abnn5w r-visibility-11j9u27"
>
<svg
height="100%"
Expand Down Expand Up @@ -285,12 +285,12 @@ exports[`components/ActivityIndicator prop "nativeID" value is set 1`] = `
<div
aria-valuemax="1"
aria-valuemin="0"
class="css-view-1dbjc4n r-alignItems-1awozwy r-justifyContent-1777fci"
class="css-view-175oi2r r-alignItems-1awozwy r-justifyContent-1777fci"
id="123"
role="progressbar"
>
<div
class="css-view-1dbjc4n r-animationDuration-17bb2tj r-animationIterationCount-1muvv40 r-animationKeyframes-127358a r-animationTimingFunction-1ldzwu0 r-height-z80fyv r-width-19wmn03"
class="css-view-175oi2r r-height-z80fyv r-width-19wmn03 r-animationDuration-17bb2tj r-animationIterationCount-1muvv40 r-animationKeyframes-127358a r-animationTimingFunction-1ldzwu0"
>
<svg
height="100%"
Expand Down Expand Up @@ -322,11 +322,11 @@ exports[`components/ActivityIndicator prop "size" is "large" 1`] = `
<div
aria-valuemax="1"
aria-valuemin="0"
class="css-view-1dbjc4n r-alignItems-1awozwy r-justifyContent-1777fci"
class="css-view-175oi2r r-alignItems-1awozwy r-justifyContent-1777fci"
role="progressbar"
>
<div
class="css-view-1dbjc4n r-animationDuration-17bb2tj r-animationIterationCount-1muvv40 r-animationKeyframes-127358a r-animationTimingFunction-1ldzwu0 r-height-1r8g8re r-width-1acpoxo"
class="css-view-175oi2r r-height-1r8g8re r-width-1acpoxo r-animationDuration-17bb2tj r-animationIterationCount-1muvv40 r-animationKeyframes-127358a r-animationTimingFunction-1ldzwu0"
>
<svg
height="100%"
Expand Down Expand Up @@ -358,11 +358,11 @@ exports[`components/ActivityIndicator prop "size" is a number 1`] = `
<div
aria-valuemax="1"
aria-valuemin="0"
class="css-view-1dbjc4n r-alignItems-1awozwy r-justifyContent-1777fci"
class="css-view-175oi2r r-alignItems-1awozwy r-justifyContent-1777fci"
role="progressbar"
>
<div
class="css-view-1dbjc4n r-animationDuration-17bb2tj r-animationIterationCount-1muvv40 r-animationKeyframes-127358a r-animationTimingFunction-1ldzwu0"
class="css-view-175oi2r r-animationDuration-17bb2tj r-animationIterationCount-1muvv40 r-animationKeyframes-127358a r-animationTimingFunction-1ldzwu0"
style="height: 30px; width: 30px;"
>
<svg
Expand Down Expand Up @@ -395,12 +395,12 @@ exports[`components/ActivityIndicator prop "style" value is set 1`] = `
<div
aria-valuemax="1"
aria-valuemin="0"
class="css-view-1dbjc4n r-alignItems-1awozwy r-justifyContent-1777fci"
class="css-view-175oi2r r-alignItems-1awozwy r-justifyContent-1777fci"
role="progressbar"
style="border-top-width: 5px; border-right-width: 5px; border-bottom-width: 5px; border-left-width: 5px;"
>
<div
class="css-view-1dbjc4n r-animationDuration-17bb2tj r-animationIterationCount-1muvv40 r-animationKeyframes-127358a r-animationTimingFunction-1ldzwu0 r-height-z80fyv r-width-19wmn03"
class="css-view-175oi2r r-height-z80fyv r-width-19wmn03 r-animationDuration-17bb2tj r-animationIterationCount-1muvv40 r-animationKeyframes-127358a r-animationTimingFunction-1ldzwu0"
>
<svg
height="100%"
Expand Down Expand Up @@ -432,12 +432,12 @@ exports[`components/ActivityIndicator prop "testID" value is set 1`] = `
<div
aria-valuemax="1"
aria-valuemin="0"
class="css-view-1dbjc4n r-alignItems-1awozwy r-justifyContent-1777fci"
class="css-view-175oi2r r-alignItems-1awozwy r-justifyContent-1777fci"
data-testid="123"
role="progressbar"
>
<div
class="css-view-1dbjc4n r-animationDuration-17bb2tj r-animationIterationCount-1muvv40 r-animationKeyframes-127358a r-animationTimingFunction-1ldzwu0 r-height-z80fyv r-width-19wmn03"
class="css-view-175oi2r r-height-z80fyv r-width-19wmn03 r-animationDuration-17bb2tj r-animationIterationCount-1muvv40 r-animationKeyframes-127358a r-animationTimingFunction-1ldzwu0"
>
<svg
height="100%"
Expand Down
36 changes: 0 additions & 36 deletions packages/react-native-web/src/exports/AppRegistry/__tests__/__snapshots__/index-test.js.snap
View file

This file was deleted.

Loading

0 comments on commit b27c982

Please sign in to comment.