mrmckeb/typescript-plugin-css-modules

Using scss additionalData to import results in an error

akhlivnoy opened this issue · 3 comments

akhlivnoy commented

Description

Adding @import .scss common file using Vite defineConfig leads to error "Property 'prop_name' does not exist on type '{}'."

To Reproduce

  1. Add to defineConfig next options (no matter alias, absolute or relative path):
defineConfig({
    ...,
    css: {
      modules: {
        localsConvention: 'camelCaseOnly',
      },
      preprocessorOptions: {
        scss: {
          additionalData: "@import 'src/app/styles/variables';",
        },
      },
    },
  });
  1. Use any variable from imported file in any another scss file.

Expected behavior

image

But got

image

Note that before the variable is used, everything is fine

Also

Using @import 'styles/variables'; manually in file solves the problem, but only using alias path
vite.config.ts

defineConfig({
    ...,
    resolve: {
      alias: {
        styles: path.resolve(__dirname, './src/app/styles'),
      },
    },
  });

tsconfig.json

{
  "compilerOptions": {
    ...,
    "paths": {
      "styles": ["app/styles"],
      "styles/*": ["app/styles/*"],
    },
    "plugins": [
      {
        "name": "typescript-plugin-css-modules",
        "options": {
          "classnameTransform": "camelCaseOnly",
        }
      }
    ]
  }
}
mrmckeb commented

Hi @akhlivnoy,

We do have the ability to pass options through to processors, but it looks like Vite isn't doing that - this is actually a custom Vite feature (also available via some Webpack loaders).

I'll mark this as a feature request, and I think I should be able to deliver it shortly.