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
Make sure all the CommonJS modules can be required as normal, rather
than needing to be suffixed with `.default` due to being compiled from
ES modules.
ES modules are the default package export. Commonjs modules are exported
from 'dist/cjs'. Modern bundlers like webpack can consume ES modules.
The addition of the `sideEffects:false` to the `package.json` helps
webpack tree-shaking modules.
Don't rewrite import paths for non-existent modules or types. They will
attempt to be imported from the package's main export. This change
currently requires a module map to be generated for the babel-plugin to
use. The map is automatically regenerated for any commit that alters the
entry file of react-native-web.
Fix#822
