Gatsby 3 syntax support

Is your feature request related to a problem? Please describe.

Yes. I’m unable to use your solution with Gatsby 3, which supports: import { classOne, classTwo } from './styles.module.scss';

and supports but doesn’t recommend,

import * as styles from './styles.module.scss';

but no longer supports:

import styles from './styles.module.scss';

At best, after installing the plugin, setting up VS Code as recommended and reloading the project, I’ve simply gotten string types to show up by doing export = classes; in the d.ts file, export default classes; fails entirely.

Describe the solution you’d like

Ideally I’d like to use Gatsby 3 with its standard gatsby-plugin-sass and scss modules, and be able to both get type hints in VS Code and ideally be able to jump to the definition of the style in the scss file from the component file.

Even more ideal than even this language plugin would be a way to just make this easier for anyone who wants to use Gatsby and scss modules work with Typescript out of the box in VS Code. For example could someone author a VS Code plugin that would solve this? Should we be petitioning Microsoft to somehow make this easier? It’s frustrating that such a fundamental technology (css/scss modules + import) is so lacking in official support.

Describe alternatives you’ve considered

Currently the only solution that partially works is another 3rd-party lib, gatsby-plugin-scss-typescript, which generates individual d.ts files for each scss file. However, that adds quite a bit of clutter to the project, and clicking through does not jump into the class definition, just into the generated type. That said, it successfully adds code hinting.

Additional context

I’m on a PC running VS Code with remote-WSL. While testing out this solution I upgraded to TS 4.3.2.

[mosesoak]

BTW @mrmckeb you probably saw me mention you here: https://github.com/clinyong/vscode-css-modules/issues/25#issuecomment-857058317

The short of it is this: you’re the only one on the web who’s come this close to solving modules + TS 😄 with the one remaining bug here being the jump-to-definition line. Whatever @clinyong did for his vs code plugin, do that.

The ideal would be a single vscode plugin that wrapped your work here to provide both language-level support and editor functionality!

We’re going to move away from scss modules and try out some of the popular css-in-js libs for a while, but may end up coming back to this down the road - thanks for your help along the way!

[mosesoak]

@mrmckeb Thanks for the updates! I have some pretty good results:

• Both * as styles and destructured imports and code-hinting all work now!
• You were right that a line in my scss file was choking the plugin: @import ‘~/styles/variables’; – it’s the absolute path configuration we use. Changing to a relative import path fixes the error.
• Jump-to-definition does jump to the correct file but does not jump the cursor to the correct class. That’s something that does work perfectly with the vs code css modules plugin, which I had deactivated for this test. If I reactivate it, two definitions are shown, theirs correctly shows the class, yours shows filename.scss:238:13 (the file only has 121 lines).

Anyway good progress, thank you for your quick response.

Sidebar: I’ve been surprised that CSS modules are not really in demand, I sort of thought or hoped that they’d be more embraced as a new standard since I kind of prefer SCSS to css-in-js solutions, which tend to add a new paradigm of their own that just doesn’t feel like it will ever become a real standard way of doing things. The Gatsby team wrote back on my question about this saying there’s just not much demand for CSS modules & typescript out there. Kind of a bummer. We’re continuing to try out different things in our projects, styled-jsx, styled-components, emotion, and frameworks like tailwind. Cool that folks are working on this but I guess styling is just a neverending eddy in the fast-moving world of web dev.