Imports basing on tsconfig.json paths about stylable-intelligence

[tomrav]

Thank you for the reproduction case, we've started looking at it to see how it would behave under different solutions, and will update once we have more information.

[Scott-MacD]

I'm currently facing the same issue, but leveraging webpack resolver aliases - something like following:

module.exports = {

    resolve: {
        alias: {
            "@components": path.resolve(__dirname, 'src/components/'),
            "@projects": path.resolve(__dirname, 'src/projects/')
        }
    },

};

It compiles just fine, but intelligence fails. A way to define this in the stylable config would work just fine for us.

[tomrav]

update: we've looked into this, and we think we can make it work for both TS paths and webpack aliases by adding a new resolver configuration to the stylable.config.js file. We're trying to make this as seamless as possible throughout our various integrations, and also add it to the stylable-intelligence extension automatically.

I hope to have more on this in the coming days.

[tomrav]

Thanks for trying out Stylable.

The paths option is a custom TypeScript resolution feature that Stylable is unaware of. In the case of building with webpack, what probably happens is that that the TypeScript integration is shared through webpack with the Stylable webpack-plugin.

As for the Stylable extension, it is not aware of what was defined in the webpack or TypeScript configs, and so the custom paths resolutions are not taken into consideration in the IDE.

A possible solution we may offer, is passing a custom resolver to the Stylable configuration, and having that be picked up by the extension. But this approach would still require integrating some sort of resolver that supports paths from the user side.

If you can provide a small reproduction of your setup, or if the project is publicly accessible, I'd be glad to take a look and investigate further.

[jorge-armando]

The project is private, but I did a example here: https://github.com/jorge-armando/stylable-alias-issue

I understand. I don't know if it's possible, but the intelligence could inherit the paths defined in tsconfig.json or create an extra configuration inside stylable.config.js to insert the paths.

relative paths in large projects can become a headache for using too many "../../../.."

[tomrav]

Exciting news!
We just released new versions of Stylable and the Intelligence plugin that expose the ability to add a stylable.config.js file in the root of the project, and provide it with a defaultConfig that the plugin (and all integrations) can pick up.

Sorry for the delay on this, we ended up solving it a bit more thoroughly than originally thought.

I tested this on your reproduction project (and a webpack alias one) and it seems to work fine locally for me, would love to hear that it works for you as well.

Example stylable.config.js config I used to test this out:

const { createDefaultResolver } = require("@stylable/core");
const { TsconfigPathsPlugin } = require("tsconfig-paths-webpack-plugin");
const { typedConfiguration } = require("@stylable/cli");
// const { join } = require("path");

module.exports = {
  defaultConfig(fs) {
    return {
      resolveModule: createDefaultResolver(fs, {
        // alias: {
        //   "wp-alias": join(__dirname, "src/webpack-alias"),
        // },
        plugins: [
          new TsconfigPathsPlugin({
            configFile: require.resolve("./tsconfig.json"),
            extensions: [".st.css"],
          }),
        ],
      }),
    };
  },
  stcConfig: typedConfiguration({
    options: {
      srcDir: "./src",
      outDir: "./st-types",
      dts: true,
    },
  }),
};

Note: the commented out lines are for using webpack aliasing functionality instead of TypeScript paths.

p.s. you may need to "Restart Extension Hosts" in VSCode, if the Intelligence plugin was already setup before you config your stylable.config.js file.

p.p.s you can see an example configured in one of our test fixture

[tomrav]

Closing as we now offer the ability to configure this behavior for stylable-intelligence, please open an issue if something else doesn't appear to be working.