Comments (7)
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.
from stylable-intelligence.
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.
from stylable-intelligence.
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.
from stylable-intelligence.
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.
from stylable-intelligence.
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 "../../../.."
from stylable-intelligence.
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
from stylable-intelligence.
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.
from stylable-intelligence.
Related Issues (20)
- Refresh diagnostics when moving to file HOT 1
- Add warning/error for unused named imports HOT 2
- Missing error for `unknown var` HOT 1
- Two default imports with same name and source get renamed together
- When searching for element usages, usage in -st-extends does not appear
- References funny behavior when selector includes two states with same name
- "unknown pseudo-state" warning - affected by 2nd selector HOT 1
- Your VS Code extension is affected by a security issue and have been blocked HOT 2
- missing @st-scope support
- [crash] textDocument/definition request throws HOT 1
- fsevents exception crashes extension in vscode-insiders HOT 1
- test issue, please ignore.
- -st-from should auto-complete file paths HOT 1
- Diagnostics should clear for closed files HOT 1
- flaky e2e test: test diagnostics -> should support single file error HOT 1
- [0.5.4] regression: auto-completion is broken HOT 1
- VSCode formatter HOT 2
- Warning is displayed for mixin arguments with commas inside of them HOT 2
- Publish extension to Open VSX
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 stylable-intelligence.