Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[change] StyleSheet compiler and associated style fixes #1278

Closed
wants to merge 8 commits into from
Closed

[change] StyleSheet compiler and associated style fixes #1278

wants to merge 8 commits into from

Conversation

necolas
Copy link
Owner

@necolas necolas commented Mar 8, 2019

No description provided.

@necolas
[change] CSS insertion by OrderedCSSStyleSheet
d00590e 
`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
@necolas
[change] StyleSheet: compile styles directly to CSS
ca79473 
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
@necolas
[change] Use classic CSS in View, Text, etc., implementations
a277d18 
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 #1136
Fix #1044
Fix #1223
Fix #13
@necolas
[change] StyleSheet validation
72f3055 
Stop relying on React internals and propTypes validation.
@necolas
[change] Replace outline with outline{Color,Style,Width} styles
9c2a6f4 
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 #1255
Close #1256
@necolas
[change] Refactor style resolver
ecbb50a 
Minor refactor of the style resolver to convert it to a factory function.
@necolas
[change] CSS class prefix 'rn' -> 'r'
e3d52b1
@necolas
[change] Add className prop deprecation warning
6a5e276 
View and Text will not support the 'className' prop in a future release.

Fix #1146
@necolas necolas added this to the 0.11.0 milestone Mar 11, 2019
necolas
necolas commented Mar 12, 2019
View reviewed changes
Copy link
Owner Author

@necolas necolas left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Make sure the generated CSS doesn't contain whitespace (at least in production builds)

@necolas
Copy link
Owner Author

necolas commented Mar 12, 2019

Merged to master

@necolas necolas closed this Mar 12, 2019
@necolas necolas deleted the 0.11-stylesheet-compiler branch May 24, 2019 16:53
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers
No reviews
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
0.11.0
Development

Successfully merging this pull request may close these issues.

None yet
1 participant
@necolas