Comments (10)
@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])
from webstorm-styled-components.
@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')
from webstorm-styled-components.
I am getting some complains about margin: -5
because it doesn't have the unit ...
from webstorm-styled-components.
It's sad this issue is open from 2017. Hope maintainers pay more attention to styled-components React Native development
from webstorm-styled-components.
Can't reproduce.
from webstorm-styled-components.
@iRoachie please include your plugin/IDE versions
from webstorm-styled-components.
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.
from webstorm-styled-components.
@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"
from webstorm-styled-components.
@iRoachie I blindly forgot about that as I thought the issue was with the styled.View
and not the styling properties itself. 👍
from webstorm-styled-components.
Would be awesome to see this fixed.
from webstorm-styled-components.
Related Issues (20)
- Is there no highlight and prompt when used with tailwind?
- Is there no highlight and prompt when used with tailwind?
- [Feature Request] Show which HTML tag is used
- Problem with media queries HOT 1
- Wrong hex-color format and No auto line-break with Emmet HOT 1
- Indent size is ignored and only works on first line
- Support for xstyled/styled-components
- plugin doesn't work in intellij 2022.3.2 HOT 1
- Feature request: support vars as "value" strings, not just key-value css strings HOT 2
- Selector is never used HOT 5
- \t chapter in copy-pasted code HOT 4
- styled-components-breakpoints support
- [Bug][Typescript] Very slow props suggestions and no value suggestions when when using styled.div syntax
- Pls Fix Webstorm 2020.2 compatibility issue HOT 1
- Re-configure branch protection policy for this repo HOT 2
- String interpolation not being autocompleted
- Issues with parsing & signs HOT 3
- [Feature Request] Refactor to styled component HOT 2
- Webstorm 2020.3 - not working HOT 7
- Highlight var in template string
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from webstorm-styled-components.