-
-
Notifications
You must be signed in to change notification settings - Fork 132
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
CSS intellisense not working #118
Comments
Is this still relevant? If so, what is blocking it? Is there anything you can do to help move it forward? This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. |
If you are using TypeScript, you can do the following:
That should give you code completion on the styles. You won't be able to use everything though. See this file for more information: |
TypeScript is kinda amazing. I've played around with it a bit more and I came up with this. It should give you proper intellisense / autocomplete:
@vitalets Would this be something that you can use in the The interesting line is |
The solution above would have some problems if you are trying to set the This one should allow any value, but still give you code completion:
I can improve this a bit more if I find a way to actually merge types (which is different from using the | union operator). |
Is this still relevant? If so, what is blocking it? Is there anything you can do to help move it forward? This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. |
@yvbeek Is there a way to support media query on the style level?
|
Getting closer to a fully working definition:
@AAAstorga @vitalets |
The return type of this one is a bit smarter: [see my latest post in this thread] |
@yvbeek did you get back full EStyleSheet IntelliSense with your types? |
@nexorianus I revisited the styles today and this is the best I could come up with so far: import { ImageStyle, TextStyle, ViewStyle } from "react-native"
import EStyleSheet from "react-native-extended-stylesheet"
type Function<K> = () => K
type Value<T> = T | string & {}
type Variable<T> = Value<T> | Function<Value<T>>
type Extended<T> = { [K in keyof T]: Variable<T[K]> }
type AnyStyle = ImageStyle & TextStyle & ViewStyle
type AnyStyleSet = { [key: string]: AnyStyle }
type EStyleSet<T = any> = { [K in keyof T]:
T[K] extends Variable<number> ? T[K] :
T[K] extends MediaQuery ? T[K] :
Extended<AnyStyle>
}
type StyleSet<T = any> = { [K in keyof T]:
T[K] extends number ? T[K] :
T[K] extends string ? T[K] :
T[K] extends Function<number> ? number :
T[K] extends Function<string> ? string :
T[K] extends MediaQuery ? AnyStyleSet :
AnyStyle
}
export type MediaQuery = { [key: string]: Extended<AnyStyle> }
export const createStyles = <T = EStyleSet>(styles: EStyleSet<T>) => EStyleSheet.create(styles) as StyleSet<T>
export const styleValue = (key: string, prop?: string) => EStyleSheet.value(key, prop) In my project, this code lives in a file: import { createStyles } from "styles"
...
const styles = createStyles({
container: {
backgroundColor: "#fff",
borderRadius: 4,
flexDirection: "row",
alignItems: "center",
paddingLeft: "$gapSM",
zIndex: 1
},
searchIcon: {
color: "$placeholderColor",
fontSize: "$fontSizeMD",
marginRight: "$gapSM",
},
clearIcon: {
color: "$placeholderColor",
fontSize: "$fontSizeMD",
marginHorizontal: "$gapSM",
marginTop: "$gapXS"
},
placeholderText: {
color: "$placeholderColor"
},
// For testing
varColor: "rgba(255, 255, 255, 0.05)",
varNumberFn: () => 10,
varStringFn: () => "#fff",
"@media ios": {
header: { flex: 1 }
} as MediaQuery
}) Updated - 2020/05/05 - 7:48pm
Any feedback / suggestions / improvements are welcome! |
This solution works like a charm. |
@nexorianus I've created the PR. It probably won't be merged because it would break existing code. But for most people this should provide some decent autocomplete. Please try out my fork: package.json: "react-native-extended-stylesheet": "yvbeek/react-native-extended-stylesheet" |
Is this still relevant? If so, what is blocking it? Is there anything you can do to help move it forward? This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. |
@yvbeek Thanks for your work on improving the type definitions, it makes working with this package and TypeScript much more pleasant. I wanted to let you know that the mentioned key augmentation feature has been implemented in the TypeScript 4.1 Beta, maybe that is something that could help with further improvements. |
Thanks a lot for your hard work, @yvbeek! Thanks to you I have very decent CSS auto completion and solid "go to definition" functionality. |
Thank you so much @yvbeek This is a fantastic wrapper that was so easy to implement! Amazing! |
Thank you @yvbeek this helped me a lot |
Is there anyway we can make css intellisense working inside EStyleSheet.create for vscode.
The text was updated successfully, but these errors were encountered: