search

necolas / react-native-web

Cross-platform React UI packages
https://necolas.github.io/react-native-web
MIT License
21.58k stars 1.78k forks source link

StyleSheet: investigate publishing as separate module #145

Closed tgvashworth closed 6 years ago

tgvashworth commented 8 years ago

The StyleSheet would be very useful on its own, even for those of us not using react-native-web. I have a basic implementation over here but the implementation here is just much better.

I guess the options are:

  1. Extract the StyleSheet API and then wrap it for react-native-web
  2. Extract the utilities around normalizing, deduping and appending to the style element
  3. Copy & paste the useful bits out of this repo

I prefer number 2 as it would allow sharing of best practices (DOM perf, prefixing...) without enforcing an API on either.

necolas commented 8 years ago

Hey, I've been thinking about this too. We should chat at work and figure something out.

giuseppeg commented 8 years ago

I want this too let me know if I can help.

TheUltDev commented 7 years ago

Would http://fela.js.org/ be a viable candidate?

It supports React Native, prefixing (the author created inline-style-prefixer which this project uses), media queries, pseudo selectors, and lots of plugins.

I can work on integrating it if there's any interest.

rtsao commented 7 years ago

@Cavitt I've already basically implemented this here: https://github.com/rtsao/styletron

It's directly inspired by react-native-web stylesheets but is designed to operate both server and client-side, and additionally supports declaration-level de-duping of styles generated at runtime as well. There's the low-level utility and also a higher-level interface that is similar to styled-components.

jwangnz commented 7 years ago

@rtsao Hi, as you mentioned styled-components, what is the pros and cons of styletron vs styled-components ?

rtsao commented 7 years ago

@tsing The two aren't totally analogous, but I can give you a short comparison (and try and frame it in the context of react-native-web so this thread doesn't stray too off topic)

The core of styletron is essentially a utility to generate atomic CSS (like react-native-web StyleSheets, but for both client and server). It's a low level library that could be incorporated into most CSS-in-JS interfaces (e.g. aphrodite, etc.) as a replacement for their CSS generation code.

The pros of styletron is that it's both tiny and super fast (faster than any similar library) and generates the smallest, de-duped CSS. It also supports CSS media queries and psuedo selectors.

styled-components has a really innovative, developer-friendly API, but it ships with a full CSS parser (among other things) and as a result is a rather large library and isn't that fast. IIRC server-side rendering isn't fully fleshed out yet, either.

The styletron version of styled-components instead uses style object literals as opposed to CSS template strings, so there's no need for a CSS parser.

Anyways, styletron is a relatively unopinionated module that offers similar deduping functionality as react-native-web stylesheets. There's no built-in normalization that react-native-web does, but there is an optional helper function to warn if longform and shorthand properties are mixed in the same style object literal.

jwangnz commented 7 years ago

@rtsao Thanks for the actually very detailed comparison. The tiny and super fast and server side support is very attractive for us, we will definitely give it a try.

necolas commented 6 years ago

Going to close this for now because…

  1. It's non-trivial to publish StyleSheet separately at the moment. Even in a monorepo environment it would depend on "internals" of the View, Text, and Image components as well as the I18nManager.

  2. It's currently possible to use and bundle only createElement and StyleSheet using RNW and the Babel plugin. This also lets you upgrade to using the components and APIs as needed.

Still open to doing this in the future if there's enough interest.