[change] StyleSheet: support code-splitting / export smaller API

Quick-fix for code-splitting support by updating the rendered style
sheet in place. Reduce the API to `create`, as the rest is now internal
to the framework.

Fix #34
This commit is contained in:
Nicolas Gallagher
2015-12-27 11:37:05 +00:00
parent 69166b1502
commit 8ac84f6da5
7 changed files with 96 additions and 60 deletions
+17 -24
View File
@@ -37,24 +37,10 @@ Use styles:
</View>
```
Render styles on the server or in the browser:
```js
StyleSheet.renderToString()
```
## Methods
**create**(obj: {[key: string]: any})
**destroy**()
Clears all style information.
**renderToString**()
Renders a CSS Style Sheet.
## About
### Strategy
@@ -71,9 +57,9 @@ CSS](https://speakerdeck.com/vjeux/react-css-in-js):
6. Non-deterministic resolution
7. Breaking isolation
The strategy also minimizes the amount of generated CSS, making it more viable
to inline the style sheet when pre-rendering pages on the server. There is one
unique selector per unique style _declaration_.
The strategy minimizes the amount of generated CSS, making it viable to inline
the style sheet when pre-rendering pages on the server. There is one unique
selector per unique style _declaration_.
```js
// definition
@@ -88,7 +74,7 @@ unique selector per unique style _declaration_.
}
}
// css
// css output
//
// .a { color: gray; }
// .b { font-size: 2rem; }
@@ -130,16 +116,17 @@ In production the class names are obfuscated.
(CSS libraries like [Atomic CSS](http://acss.io/),
[Basscss](http://www.basscss.com/), [SUIT CSS](https://suitcss.github.io/), and
[tachyons](http://tachyons.io/) are attempts to limit style scope and limit
style sheet growth in a similar way. But they're CSS utility libraries, each with a
particular set of classes and features to learn. All of them require developers
to manually connect CSS classes for given styles.)
style sheet growth in a similar way. But they're CSS utility libraries, each
with a particular set of classes and features to learn. And all of them require
developers to manually connect CSS classes for given styles.)
### Reset
React Native for Web includes a very small CSS reset taken from
[normalize.css](https://necolas.github.io/normalize.css/). It removes unwanted
User Agent styles from (pseudo-)elements beyond the reach of React (e.g.,
`html`, `body`) or inline styles (e.g., `::-moz-focus-inner`).
[normalize.css](https://necolas.github.io/normalize.css/) **you do not need
to include normalize.css**. It removes unwanted User Agent styles from
(pseudo-)elements beyond the reach of React (e.g., `html`, `body`) or inline
styles (e.g., `::-moz-focus-inner`).
```css
html {
@@ -162,4 +149,10 @@ input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
}
ol,
ul,
li {
list-style:none
}
```