Recently the default export was removed from react-native-web. In some
scenarios it is possible to still get to this import path which does not work
anymore. Removing the `.default` fixes commonjs imports from index.
Close#1341
Edge browser throws `HierarchyRequestError` while inserting CSS rules into CSS
Media Queries. Therefore, a different mechanism is required to control CSS
order. This patch tracks the starting index of each group of CSS rules in the
DOM style sheet.
Fix#1300Close#1302
Hack something together to get classic CSS going through the same pathway as
the rest of the styles. This gets classic CSS showing up in the SSR CSS output.
Fix#1286
Rather than mix shortform and longform properties, the 'outline' property is
removed in favour of the longform properties. Support for `outlineOffset` is
also included.
Fix#1255Close#1256
The CSS base styles for certain primitives are implemented using classic CSS to
reduce browser layout times and better support 'null' values in
StyleSheet-defined styles. Combined with the previous patch this reduces the
benchmark layout times by about 30%.
Ref #1136Fix#1044Fix#1223Fix#13
Introduces a centralized compiler for "atomic" and "classic" CSS output. The
"classic" compiler is for internal use only and offers no CSS safety
guarantees. The "atomic compiler is used to implement the public-facing
StyleSheet API.
The atomic compiler now maps the React style declarations, rather than CSS
style declarations, to CSS rules. This avoids having to convert React styles to
CSS styles before being able to lookup classNames. And it reduces the number of
CSS rules needed by each DOM element.
Before:
{ paddingHorizontal: 0; }
↓
.paddingLeft-0 { padding-left: 0; }
.paddingRight-0 { padding-right: 0; }
After:
{ paddingHorizontal: 0; }
↓
.paddingHorizontal-0 { padding-left: 0; padding-right: 0 }
Overview of previous StyleSheet resolver:
1. Localise styles
2. Transform to CSS styles
3. Expand short-form properties
4a. Lookup Atomic CSS for each declaration
4b. Compile Atomic CSS for each static declaration
i. Vendor prefix
ii. Insert CSS rules
4c. Create inline style for each dynamic-only declaration
i. Vendor prefix
Overview of new StyleSheet design:
1. Localise styles
2a. Lookup Atomic CSS for each declaration
2b. Compile Atomic CSS for each static declarations
i. Transform to CSS styles
ii. Expand short-form properties
iii. Vendor prefix
iiii. Insert CSS rules
2c. Create inline style for each dynamic-only declaration
i. Transform to CSS styles
ii. Expand short-form properties
iii. Vendor prefix
Ref #1136
`OrderedCSSStyleSheet` can be used to control the order in which CSS rules are
inserted. This feature is necessary to support the combined use of Classic CSS
and Atomic CSS. It also makes it possible to control the order of Atomic CSS
rules, which is necessary to correctly resolve style conflicts (e.g., between
'margin' and 'marginHorizontal') without expanding short-form properties to
long-form properties.
Ref #1136
Creates a {path}/index.js for each module that has no web
implementation. This enables the babel preset to rewrite all paths and
prevent apps from bundling unused modules.
Fix#1281Close#1282
Remove the default export that was provided for compatibility with legacy
imports of React Native CommonJS modules. These patterns are no longer
supported:
```
import ReactNative from 'react-native';
const ReactNative = require('react-native');
```
Fix#1258Close#1277
Browsers treat autoComplete "off" as "on". The fix is to provide the browser
with an unrecognized value so that it doesn't attempt to auto-fill the input.
Fix#1249
Nicolas Gallagher