search

erikras / react-redux-universal-hot-example

A starter boilerplate for a universal webapp using express, react, redux, webpack, and react-transform
MIT License
12k stars 2.5k forks source link

Use React Native Web for managing CSS #382

Open andresgutgon opened 8 years ago

andresgutgon commented 8 years ago

What?

Just a quick question. I've seen this project: https://github.com/necolas/react-native-web

I understand this project is using another approach to generate CSS (client/server). It's using javascript to write CSS.

But in this repo we're using https://github.com/halt-hammerzeit/webpack-isomorphic-tools to manage CSS generation.

I like the idea of having real CSS (SCSS) files and not writing css in javascript. But anyway I would like to hear your opinions about https://github.com/necolas/react-native-web

erikras commented 8 years ago

My opinions on the subject of inline styles are here. Does that answer your question?

andresgutgon commented 8 years ago

Ok, I get it. So these are your conditions:

  1. Client side only Solved by https://github.com/necolas/react-native-web
  2. No vendor auto prefixing (requires User-Agent checking on server side)
  3. No server side media queries, resulting in a flicker on load to adjust to client device width

I think https://github.com/necolas/react-native-web is not solving points 2 and 3. Maybe I'm wrong

Question:

Are you solving those points in this repo with current setup? I think yes. The only weird think is the flikering on development for components CSS

Justkant commented 8 years ago

What about Radium ?

I didn't tried it myself because I'm using stylus with my project, but it seems promising for what you want to achieve.

stevoland commented 8 years ago

@andresgutgon

3 No server side media queries, resulting in a flicker on load to adjust to client device width

I've started a project that tries to address this. It's just a proof of concept so far - don't try to use it - but I could do with some feedback on the concept: https://github.com/stevoland/adaptr-connect

necolas commented 8 years ago

2 . No vendor auto prefixing (requires User-Agent checking on server side)

This is pretty straight-forward to add to React Native Web if I'd used inline-style-prefixer better. And it should be easy to adopt any good prefixing solution.

3 . No server side media queries, resulting in a flicker on load to adjust to client device width.

I'm not trying to solve that problem by altering the style API. The library follows React Native in keeping UI state like animations, viewport dimensions (and I'm including hover, focus, and media queries on Web) out of style. Media Queries in JS enables prerendering to a breakpoint, altering the render tree, defining viewport-based code-splits, and changing inline styles (e.g., react-media-queries).

danpalmer commented 8 years ago

@erikras I just noticed this issue (and your thoughts on inline styles), and was wondering if the output of these methods results in 'real' stylesheets (defined through inline component styles), or whether it results in elements literally having inline styles in the DOM?

I ask, because the latter is a security vulnerability, and the web is moving towards banning actual inline styles with content security policies.

Would you be able to comment here and/or in your thoughts document about how this plays with CSP?