.module.scss.d.ts not generated/updated with "modern" or "modern-compiler" scss api and 'use' statement with alias

[stefanomerotta]

When vite is configured to use modern or modern-compiler scss api from vite.config.ts and the module.scss file has a @use or @import with an alias, the plugin don't resolve it correctly: the outcome is that the module.scss.d.ts is not generated and/or updated.

The issue occurs with these requirements/settings:

• vite is configured with scss api "modern" or "modern-compiler"
• the module.scss file has at least one @use or @import statement
• the @use or @import statement is declared with an alias (the alias is correctly configured and resolved by vite)

Versions:

• vite: 5.4.11
• vite-plugin-sass-dts: 1.3.29

Current workarounds: disable scss api "modern" or "modern-compiler": vite complains about scss deprecation but the plugin starts to work correclty also with alias.

[qeleb]

+1 this has plagued our team for a couple months now. Can this be resolved?

It’s worth noting that this alternative does not have this bug. I’m only avoiding switching because it generates the .dts files with some comments (so adopting it would mean modifying all the css type declaration files in my project at once)

[activeguild]

@stefanomerotta

I tried setting it up with the latest vite and plugin and it did not error. Is it possible to provide a minimum project?

[abstractalgo]

+1

Keeping everything in the configuration the same, except switching to "modern" compiler, makes things work with the legacy API, and not work with the modern API.

The requirements for an issue that were mentioned are correct, and does impact our case where a @use has an alias (I am unable to provide that repro). Considering that this works with no additional changes to the config when using the legacy API, one could consider it a regression in behavior/implementation.

Tested with:

• vite 6.2.2
• sass/sass-embeded 1.85.1
• vite-plugin-sass-dts 1.3.31

[activeguild]

@abstractalgo

Can you provide a sample repository where the bug occurs?

[abstractalgo]

Can you provide a sample repository where the bug occurs?

Here's the sample repo: https://github.com/abstractalgo/vite-scss-repro

Repro instructions:

• yarn install to install deps
• yarn build to build (already with enabledMode: ["production"], but same issue even with "development" config)
• update vite.config.ts's api (https://github.com/abstractalgo/vite-scss-repro/blob/master/vite.config.ts#L9)
• notice that /src/components/bla.module.scss.d.ts gets generated only when NOT using api: "modern"

Thanks for taking a look into it 🙏

EDIT: fix/workaround: adding loadPaths: [resolve(__dirname, 'node_modules')] fixes this case (see here).

[abstractalgo]

@activeguild I was wondering if this is something that you are able to look into straight away, or should my team consider alternatives if you don't have the capacity for it right now and we shouldn't necessarily expect a fix to land soon? thanks 🙏

[activeguild]

@abstractalgo

There is a difference between the vite and the vite, so it would be possible to modify the vite by incorporating that part of the vite. However, it may take some time to fix it because I can't take a lot of time.

https://github.com/vitejs/vite/blob/ecc85ca282c3046f57859dae993879357cc10ea5/packages/vite/src/node/plugins/css.ts#L2577-L2611

[abstractalgo]

There is a difference between the vite and the vite, so it would be possible to modify the vite by incorporating that part of the vite.

I'm not sure what this means. 😕

it may take some time to fix

I understand. Still, thank you for the effort.

[activeguild]

Sorry for the lack of clarity, I think I can fix it by mimicking the part of vite that handles sass.

[simprl]

try to add

loadPaths: [resolve(__dirname, 'node_modules')],

or (for workspaces)

loadPaths: [resolve(__dirname, '../../node_modules')],

this config work for me:

import { resolve } from "path";
import { defineConfig } from "vite";
import sassDts from "vite-plugin-sass-dts";

export default defineConfig({
    plugins: [
        sassDts({
            enabledMode: ["development", "production"],
        }),
    ],
    build: {
        lib: {
            entry: resolve(__dirname, 'src/index.ts'),
            name: 'MyLib',
            fileName: 'my-lib',
        },
        rollupOptions: {

        },
    },
    css: {
        modules: {
            localsConvention: "camelCaseOnly",
        },
        preprocessorOptions: {
            scss: {
                loadPaths: [resolve(__dirname, 'node_modules'), resolve(__dirname, '../../node_modules')],
                api: "modern",
            },
        },
    },

});

but import @use '@primer-io/goat' as goat; work only if "index.scss" is in the root folder of the @primer-io/goat lib

[abstractalgo]

try to add loadPaths: [resolve(__dirname, 'node_modules')],

This indeed fixes the repro case. Thanks @simprl 🙏

but import @use '@primer-io/goat' as goat; work only if index.scss is in the root folder of the @primer-io/goat lib

It is.

[simprl]

btw. it also work: loadPaths: ['node_modules', '../../node_modules'],

look like for modern api in this line need to use loadPaths instead of includePaths:

Note. Just loadPaths: ['node_modules'] don't work for me because I use workspaces. For my case need to define two folders loadPaths: ['node_modules', '../../node_modules'],