webstorm-styled-components
webstorm-styled-components copied to clipboard
React native support?
Does this plugin support react native?
export const Shadow = styled.View`
shadowColor: #000;
shadowOpacity: .2;
shadowOffset: 0px -1px;
shadowRadius: 1;
marginBottom: -1px;
`
All show as errors currently
Can't reproduce.
@iRoachie please include your plugin/IDE versions
@iRoachie, Hi!
Could you clarify what you're seeing?
I'm guessing that ios-specific properties are highlighted as unknown.
But could you confirm?
There is nothing in this plugin currently that is aware of react-native props, it just assumes it is plain CSS. As a workaround, you can mark them as custom properties (Alt+Enter, 'Add to custom properties')
If someone wants to contribute proper support for react-native style properties, seems like the way to go would be to implement com.intellij.psi.css.CssElementDescriptorProvider
(some samples here and here) and override getAllPropertyDescriptors
and findPropertyDescriptors
to provide React Native-specific properties.
It could be used to:
- Add React-only props like shadowOffset
- Transform existing css props to their React Native counterparts (e.g. margin-left -> marginLeft). One would need to take care of the fact that many props, e.g top allow different values than their CSS counterparts. ("Ems and other units are not supported").
com.intellij.psi.css.descriptor.value.CssValueDescriptor
are used to configure what strings should be accepted as values (highlighted/available in completion). - Filter out any CSS properties that are not accepted by css-to-react-native.
Seems like the main issue would be to figure out what properties and values should be accepted and where to get that information without hardcoding a list (.d.ts files?).
If anyone wants to try this — I'll be happy to answer questions re: Intellij IDEA APIs.
@daedlock The snippet you posted isn't actually valid react native code. background
isn't a style property on the View
model like you'd expect on the web.
Thanks @undeadcat, I don't have any experience with Java or Kotlin but I guess I could answer any questions you have with react native, that would help.
A roadmap for this so far would look like:
- React native property styles e.g (
flexWrap
instead offlex-wrap
)- Error is
Unknown css property
- Error is
- Support non-unit values e.g (
height: 120
)- Error is
Mismatched property value
- Error is
- Don't enforce semi-colons
const Content = styled.View`
flexDirection: row
marginRight: 24
`
"; expected"
@iRoachie I blindly forgot about that as I thought the issue was with the styled.View
and not the styling properties itself. 👍
I am getting some complains about margin: -5
because it doesn't have the unit ...
@yordis just add px and you are fine. I migrated successfully all my styled to meet requirements. Only one that I can't get around with this plugin is:
const Container = styled.View`
elevation: 10;
`
Error:(95, 14) Mismatched property value (<angle> | below | level | above | higher | lower | [initial | inherit | unset | revert])
It's sad this issue is open from 2017. Hope maintainers pay more attention to styled-components React Native development
Would be awesome to see this fixed.