Files
react-native-web/scripts
Nicolas Gallagher 9f860b8dfc [change] StyleSheet: compile styles directly to CSS
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
2019-03-12 13:00:57 -07:00
..
2019-01-22 18:48:28 -08:00
2018-02-06 16:30:03 -08:00