Open andresgutgon opened 8 years ago
My opinions on the subject of inline styles are here. Does that answer your question?
Ok, I get it. So these are your conditions:
I think https://github.com/necolas/react-native-web is not solving points 2 and 3. Maybe I'm wrong
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
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.
@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
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).
@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?
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