[Feature Request] Navigate to style key upon middle click

[Efstathios Ntonas]

@jpudysz HI, don't know if this is possible to achieve or not, currently we cannot middle click the style and navigate directly to it on the createStyleSheet method on IntelliJ/Webstorm IDE (it should fail on VSCode is suppose).

With StyleSheet.create this was possible but now that the useStyles intervenes it fails to navigate, IDE won't even colorize the key on styles.whatEver.

Screen.Recording.2023-10-12.at.12.21.56.mov

ps. I think you should enable Discussions on the repo to avoid issue polution

[Jacek Pudysz]

Hey 👋 @efstathiosntonas ,

The issue is that for StyleSheet.create, you've used the object directly:

However, for unistyles, you pass it to the useStyles hook, causing the IDE to lose track:

When you click on stylesheet, it behaves the same as clicking on styles for StyleSheet.create. This is because the IDE can infer the exact matching object within the same file.

Regarding the other issue, my Webstorm highlights the object because I'm returning a TypeScript type to indicate the object's exact shape:

Also, when I click on styles.container, it offers options to identify the source:

This is understandable since the IDE loses track of stylesheet.

I've also tested this in VSC, and it correctly colors the object, hinting at the type:

However, it encounters the same issue: it doesn't recognize styles as it's a new prop in the file's context.

I'm unsure if there's anything I can do about it. 😞

P.S: I've enabled the discussion. Thank you!

[Efstathios Ntonas]

@jpudysz thanks for digging into this, I will check my typings to see if I missed something.

ps. you can edit discussions topics on the left sidebar when inside the discussions page, I think there should be a topic "Feature Request" among the others.

ps2. please move this issue to discussions (and the other open issue which is also a feature request), I cannot do it my self

[Efstathios Ntonas]

It turns out IntelliJ is doing it's shit again when it comes to relative paths setup, this IDE is a pita to setup them properly.

After fixing the paths in jsconfig.json, babel.config.js and tsconfig.json now it works as you showed above.

Leaving this here just in case another poor soul encounters the same issues like me:

import { createStyleSheet, useStyles } from "@styles/index";

jsconfig.json: (needed by IDE to exist in the root folder of the project)

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "*": ["src/*"],
      "@styles/*": ["src/styles/*"]
    },
    "exclude": ["node_modules"]
  }
}

babel.config.js:

const moduleResolver = [
  [
    "module-resolver",
    {
      root: ["./src"],
      extensions: [
        ".ios.ts",
        ".android.ts",
        ".ts",
        ".ios.tsx",
        ".android.tsx",
        ".tsx",
        ".jsx",
        ".js",
        ".json"
      ],
      alias: {
        "@styles": "./src/styles"
      }
    }
  ]
];

module.exports = {
  presets: [
    [
      "@rnx-kit/babel-preset-metro-react-native",
      {
        runtime: "automatic",
        development: process.env.NODE_ENV === "development"
        // importSource: "@welldone-software/why-did-you-render"
      }
    ]
  ],
  plugins:
    process.env.NODE_ENV === "production"
      ? ["transform-remove-console", ...moduleResolver, "react-native-reanimated/plugin"]
      : [...moduleResolver, "react-native-reanimated/plugin"]
};

tsconfig.json:

{
  "compilerOptions": {
    "emitDecoratorMetadata": true,
    "allowJs": true,
    "allowSyntheticDefaultImports": true,
    "baseUrl": ".",
    "experimentalDecorators": true,
    "esModuleInterop": true,
    "importHelpers": true,
    "isolatedModules": true,
    "jsx": "react-native",
    "lib": ["es6", "es2017"],
    "moduleResolution": "node",
    "noEmit": true,
    "paths": {
      "*": ["src/*"],
      "@styles/*": ["src/styles/*"]
    },
    "resolveJsonModule": true,
    "skipLibCheck": true,
    "strict": true,
    "target": "esnext",
    "typeRoots": ["./typings", "node_modules/@types"]
  },
  "exclude": [
    "node_modules",
    "./node_modules/",
    "**/node_modules",
    "ios",
    "android",
    "babel.config.js",
    "metro.config.js"
  ],
  "include": ["src", "__tests__", "typings"]
}