CSS intellisense not working

[sarifmia]

Is there anyway we can make css intellisense working inside EStyleSheet.create for vscode.

[stale]

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]

If you are using TypeScript, you can do the following:

[see my latest post in this thread]

That should give you code completion on the styles.

You won't be able to use everything though. See this file for more information:
https://github.com/vitalets/react-native-extended-stylesheet/blob/master/types/index.d.ts

[yvbeek]

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:

[see my latest post in this thread]

@vitalets Would this be something that you can use in the .d.ts?

The interesting line is type EComponentStyle = .... That merges the regular styles definition with a copy of the style definition that allows the value of every style item to be of type string.

[yvbeek]

The solution above would have some problems if you are trying to set the textShadowOffset.

This one should allow any value, but still give you code completion:

[see my latest post in this thread]

I can improve this a bit more if I find a way to actually merge types (which is different from using the | union operator).

[stale]

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.

[AAAstorga]

@yvbeek Is there a way to support media query on the style level?

text: {
    fontSize: '$fontSize',
    '@media ios': { // media query on style level
      color: 'green',
    },
    '@media android': {
      color: 'blue',
    },
  },

[yvbeek]

Getting closer to a fully working definition:

[see my latest post in this thread]

@AAAstorga
With this one media queries should work

@vitalets
Last piece of the puzzle would be to fix the return type. I've tried to make the function generic, but as soon as I do that, autocomplete stops working.

[yvbeek]

The return type of this one is a bit smarter:

[see my latest post in this thread]

[nexorianus]

@yvbeek did you get back full EStyleSheet IntelliSense with your types?
And if yes, where did you put it to be recognized?

[yvbeek]

@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: styles/index.ts
This is how I use it:

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

• provides code completion when you create styles
• provides code completion when you use styles
• supports variables and functions
• supports media queries (requires as MediaQuery, semi-completion)

Any feedback / suggestions / improvements are welcome!

[nexorianus]

This solution works like a charm.
Could you open a PR for this, so @vitalets can pull it to the repo?

[yvbeek]

@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"

[stale]

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.

[yfunk]

@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.

[ahmedam55]

Thanks a lot for your hard work, @yvbeek!

Thanks to you I have very decent CSS auto completion and solid "go to definition" functionality.

[ucheNkadiCode]

Thank you so much @yvbeek This is a fantastic wrapper that was so easy to implement! Amazing!

[Sir-Dazzling]

Thank you @yvbeek this helped me a lot