-
Notifications
You must be signed in to change notification settings - Fork 1.8k
Shorthand style properties overwriting the more specific properties #2007
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Labels
has: pr
Subject of a pull request
Milestone
Comments
Thanks, this is a good catch! I can handle the fix but if you could submit a PR with a failing test case, that would be great. |
owenjeon
pushed a commit
to zigbang/react-native-web
that referenced
this issue
Sep 4, 2021
owenjeon
pushed a commit
to zigbang/react-native-web
that referenced
this issue
Sep 4, 2021
owenjeon
pushed a commit
to zigbang/react-native-web
that referenced
this issue
Sep 4, 2021
See #2208 for a build that should fix this |
necolas
added a commit
that referenced
this issue
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
Merged
rnike
pushed a commit
to VeryBuy/react-native-web
that referenced
this issue
Sep 13, 2022
Less specific shorthand style properties are being applied instead of the more specific styles if there is another element also with one of the more specific styles. This is due to the common styles being pulled out as class names for de-duplication. Ref necolas#2007 Close necolas#2010
rnike
pushed a commit
to VeryBuy/react-native-web
that referenced
this issue
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
First i'd like to say I really appreciate this project, thanks everyone ❤️
The problem
Less specific shorthand style properties are being applied instead of the more specific styles if there is another element also with one of the more specific styles.
This is due to the common styles being pulled out as class names for de-duplication.
How to reproduce
Simplified test case: https://codesandbox.io/s/dazzling-gould-ihiig
Steps to reproduce:
Note that moving the first View below the second causes the issue to go away.
Expected behavior
I expect the horizontal padding to be 40px as this matches the behaviour in React Native.
Environment (include versions). Did this work in previous versions?
This appears to be an issue in previous versions as well
Additional context
I did some digging and this appears to be caused by the way that styles are de-duplicated. The first View get a class name applied with a
padding-left
&padding-right
of40px
.The second View then applies the same class and removes the horizontal padding in order to de-duplicate the styles. However this just leaves the
padding: 8px
in the style prop which then takes precedence over our de-duplicated padding class name. See here:I believe this is caused by
_resolveStyle
herereact-native-web/packages/react-native-web/src/exports/StyleSheet/createStyleResolver.js
Line 147 in 8fdbbc8
I'm also willing to help out with a PR if someone can give me some pointers on the expected behaviour for how these styles should be applied.
Thanks 🙏
The text was updated successfully, but these errors were encountered: