StyleSheet with styleq runtime #2208
Closed
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
|
Size change: -1.53 kB
View unchanged
|
necolas
force-pushed
the
styleq-stylesheet
branch
from
c7cd907 to
32d3e42
Compare
necolas
force-pushed
the
styleq-stylesheet
branch
from
32d3e42 to
8b99195
Compare
|
Just a small piece of input (and not sure if it's already there) but having the object => stylesheet logic in a separate npm package would be nice to have, for tamagui at least. Reading over it perhaps the entirety of StyleSheet would be the better boundary, not sure. |
What's the "object => stylesheet logic"? And why would it be helpful in a separate package? |
natew
reviewed
Jan 31, 2022
| import { styleq } from 'styleq'; | ||
|
|
||
| const Dot = ({ size, x, y, children, color }) => { | ||
| const [className, inlineStyle] = styleq([ |
There was a problem hiding this comment.
This basically is the function that would be useful. Tamagui at build time would use this to pre-generate the style object or className, so would want access to it.
There was a problem hiding this comment.
It's on npm. But StyleSheet wraps this function, so you could call StyleSheet(styles) to get basically the same result plus logic for RTL polyfill. The output of the RNW compiler could be adjusted to match what a build-time compiler would be able to produce for RTL polyfilling, but I don't know if you're supporting that.
There was a problem hiding this comment.
The RN API is not great for extensions, but it could be useful to have something like StyleSheet/runtime that only exports the code needed to merge the "css" objects (assuming a compiler doesn't leave StyleSheet.flatten() calls in the bundle)
This was referenced Jan 31, 2022
Closed
Is this going to be a requirement with React 18? |
Inserting during render can be problematic for initial renders because React 18 will yield back to the browser many times before updating the DOM. If styles are inserted during a render call, the browser might be forced to update layout during the pause. The |
|
At quick glance, this will fully break runtime theming like react-native-stylex and similar approaches (eg, Twitter), since the theme comes through React context and needs to be built at runtime. Are you imagining that the only supported way to do theming will be to apply theme-based style values via the |
|
AFAIK, Twitter's runtime theming works like this to create new objects when the global theme changes. Each render the object getter returns the theme-specific style object. So that should still work fine for runtime, and isn't a regression in terms of ability to extract styles. But future approaches to theming would be better off relying on CSS variables for runtime value changes, rather than creating new style objects. |
|
Mostly looking good, except SSR.
Do you have an example of using Alternatively, are you leaving it up to the community to figure out how to deal with this at build time? Will this be deprecating (or removing?) |
necolas
force-pushed
the
styleq-stylesheet
branch
from
26d06d9 to
88ea341
Compare
|
New build
I was thinking we'll keep |
|
All appears to be working except for an issue with box-shadows:
It seems that possibly it's the |
Good spot. There's a bug producing a different box shadow for each of the RN properties and it isn't caught by the existing unit tests. |
necolas
force-pushed
the
styleq-stylesheet
branch
from
88ea341 to
b096cd2
Compare
|
@paularmstrong Should be fixed in |
necolas
force-pushed
the
styleq-stylesheet
branch
from
b096cd2 to
03d6023
Compare
|
This is exciting! Does this styling system also work for react-native? |
|
Is it possible to extract styles from StyleSheet into |
@necolas (or someone else), can you expand on this, specifically extraction to static CSS? What makes these changes easier to extract Thank you! |
necolas
added a commit
that referenced
this pull request
Mar 2, 2022
* Improves React Native compatibility by making StyleSheet.create the identify function. * Improves React 18 support by inserting styles on eval. * Supports use with multiple windows (i.e., iframes) and shadow roots. * Supports nested LTR/RTL layouts. * Supports 3rd party compilers and extraction to static CSS. * Fixes static and dynamic short/longform deduplication. * Reduces browser support: Safari 10.1+, Chromium Edge, no IE, no legacy Android browsers. * Removes automatic vendor-prefixing of inline styles (for better perf). * Removes focus-visible polyfill as modern browsers no longer show focus rings for mouse interactions. Close #2208 Fix #2138 Fix #2196 Fix #2007 Fix #1517
|
See #2248 for the 0.18 integration branch |
necolas
added a commit
that referenced
this pull request
Mar 2, 2022
* Improves React Native compatibility by making StyleSheet.create the identify function. * Improves React 18 support by inserting styles on eval. * Supports use with multiple windows (i.e., iframes) and shadow roots. * Supports nested LTR/RTL layouts. * Supports 3rd party compilers and extraction to static CSS. * Fixes static and dynamic short/longform deduplication. * Reduces browser support: Safari 10.1+, Chromium Edge, no IE, no legacy Android browsers. * Removes automatic vendor-prefixing of inline styles (for better perf). * Removes focus-visible polyfill as modern browsers no longer show focus rings for mouse interactions. Close #2208 Fix #2138 Fix #2196 Fix #2007 Fix #1517
rnike
pushed a commit
to VeryBuy/react-native-web
that referenced
this pull request
Sep 13, 2022
* Improves React Native compatibility by making StyleSheet.create the identify function. * Improves React 18 support by inserting styles on eval. * Supports use with multiple windows (i.e., iframes) and shadow roots. * Supports nested LTR/RTL layouts. * Supports 3rd party compilers and extraction to static CSS. * Fixes static and dynamic short/longform deduplication. * Reduces browser support: Safari 10.1+, Chromium Edge, no IE, no legacy Android browsers. * Removes automatic vendor-prefixing of inline styles (for better perf). * Removes focus-visible polyfill as modern browsers no longer show focus rings for mouse interactions. Close necolas#2208 Fix necolas#2138 Fix necolas#2196 Fix necolas#2007 Fix necolas#1517
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
StyleSheet refactor
Build:
npm i [email protected]StyleSheet.createthe identify function.StyleSheet.getSheet()after evaling all styled components.I18nManager.swapLeftAndRightInRTL()andI18nManager.doLeftAndRightSwapInRTL.Fix #2138
Fix #2196
Fix #2210
Fix #2007
Fix #1517
Todo
render.