activeguild / vite-plugin-sass-dts

This is a plugin that automatically creates a type file when using the CSS module type-safely.
MIT License
120 stars 19 forks source link

Usage with alias SCSS import does not work #66

Closed tal-rofe closed 1 year ago

tal-rofe commented 1 year ago

I have the following scss file:

@use 'sass:map';

@use '@/styles/variables.module.scss';

.title {
    width: 100%;
    padding-bottom: map.get(variables.$sizes, spacing-l);
    margin-bottom: map.get(variables.$sizes, spacing-l);
    font-size: 2.4rem;
    font-weight: normal;
    color: map.get(variables.$colors, greys-onyx);
    border-bottom: 2px solid map.get(variables.$colors, greys-platinum);
}

.instructionText {
    font-size: 1.5rem;
    color: map.get(variables.$colors, greys-independence-grey);
}

.input {
    width: 259px;
    margin-block: map.get(variables.$sizes, spacing-m) map.get(variables.$sizes, spacing-l);
}

I use an alias for a file. I've configured vite.config.ts file:

import path from 'node:path';

import react from '@vitejs/plugin-react';
import { defineConfig } from 'vite';
import eslintPlugin from 'vite-plugin-eslint';
import tsconfigPaths from 'vite-tsconfig-paths';
import sassDts from 'vite-plugin-sass-dts';

export default defineConfig(() => ({
    server: {
        port: 4200,
        open: true,
    },
    base: './',
    build: { outDir: './dist' },
    plugins: [react(), eslintPlugin(), tsconfigPaths(), sassDts()],
    resolve: { alias: { '@/styles': path.resolve(__dirname, 'src', 'styles') } },
}));

However when I run vite to run vite in dev mode, I get an error from the plugin:

      at Object.wrapException (/Users/546456645546/node_modules/.pnpm/sass@1.57.1/node_modules/sass/sass.dart.js:1247:17)
    at _EvaluateVisitor1._evaluate0$_loadStylesheet$4$baseUrl$forImport (/Users/45624564545/node_modules/.pnpm/sass@1.57.1/node_modules/sass/sass.dart.js:81177:19)
    at _EvaluateVisitor1._evaluate0$_loadStylesheet$3$baseUrl (/Users/4256564455/node_modules/.pnpm/sass@1.57.1/node_modules/sass/sass.dart.js:81207:19)
    at _EvaluateVisitor__loadModule_closure4.call$0 (/Users/245645564/node_modules/.pnpm/sass@1.57.1/node_modules/sass/sass.dart.js:82569:21)
    at _EvaluateVisitor1._evaluate0$_withStackFrame$1$3 (/Users/542645645/node_modules/.pnpm/sass@1.57.1/node_modules/sass/sass.dart.js:82191:25)
    at _EvaluateVisitor1._evaluate0$_withStackFrame$3 (/Users/546456545/node_modules/.pnpm/sass@1.57.1/node_modules/sass/sass.dart.js:82197:19)
    at _EvaluateVisitor1._evaluate0$_loadModule$7$baseUrl$configuration$namesInErrors (/Users/34565466/node_modules/.pnpm/sass@1.57.1/node_modules/sass/sass.dart.js:80627:13)
    at _EvaluateVisitor1._evaluate0$_loadModule$5$configuration (/Users/dfgdfgdfdgas/node_modules/.pnpm/sass@1.57.1/node_modules/sass/sass.dart.js:80630:19)
    at _EvaluateVisitor1.visitUseRule$1 (/Users/dfgdfgdfdgas/node_modules/.pnpm/sass@1.57.1/node_modules/sass/sass.dart.js:81468:13)
    at UseRule0.accept$1$1 (/Users/dfgdfgdfdgas/node_modules/.pnpm/sass@1.57.1/node_modules/sass/sass.dart.js:98609:22)
    at UseRule0.accept$1 (/Users/dfgdfgdfdgas/node_modules/.pnpm/sass@1.57.1/node_modules/sass/sass.dart.js:98612:19)
    at _EvaluateVisitor1.visitStylesheet$1 (/Users/dfgdfgdfdgas/node_modules/.pnpm/sass@1.57.1/node_modules/sass/sass.dart.js:80780:16)
    at _EvaluateVisitor__execute_closure1.call$0 (/Users/dfgdfgdfdgas/node_modules/.pnpm/sass@1.57.1/node_modules/sass/sass.dart.js:82662:10)
    at _EvaluateVisitor1._evaluate0$_withEnvironment$1$2 (/Users/dfgdfgdfdgas/node_modules/.pnpm/sass@1.57.1/node_modules/sass/sass.dart.js:82080:25)
    at _EvaluateVisitor1._evaluate0$_withEnvironment$2 (/Users/dfgdfgdfdgas/node_modules/.pnpm/sass@1.57.1/node_modules/sass/sass.dart.js:82085:19)
    at _EvaluateVisitor1._evaluate0$_execute$5$configuration$namesInErrors$nodeWithSpan (/Users/dfgdfgdfdgas/node_modules/.pnpm/sass@1.57.1/node_modules/sass/sass.dart.js:80668:13)
    at _EvaluateVisitor1._evaluate0$_execute$2 (/Users/dfgdfgdfdgas/node_modules/.pnpm/sass@1.57.1/node_modules/sass/sass.dart.js:80679:19)
    at _EvaluateVisitor_run_closure1.call$0 (/Users/dfgdfgdfdgas/node_modules/.pnpm/sass@1.57.1/node_modules/sass/sass.dart.js:82554:67)
    at Object._rootRun (/Users/dfgdfgdfdgas/node_modules/.pnpm/sass@1.57.1/node_modules/sass/sass.dart.js:4103:16)
    at StaticClosure.<anonymous> (/Users/dfgdfgdfdgas/node_modules/.pnpm/sass@1.57.1/node_modules/sass/sass.dart.js:99343:16)
    at _CustomZone.run$1$1 (/Users/dfgdfgdfdgas/node_modules/.pnpm/sass@1.57.1/node_modules/sass/sass.dart.js:29893:39)
    at Object._runZoned (/Users/dfgdfgdfdgas/node_modules/.pnpm/sass@1.57.1/node_modules/sass/sass.dart.js:4196:89)
    at Object.runZoned (/Users/dfgdfgdfdgas/node_modules/.pnpm/sass@1.57.1/node_modules/sass/sass.dart.js:4193:16)
    at _EvaluateVisitor1.run$2 (/Users/dfgdfgdfdgas/node_modules/.pnpm/sass@1.57.1/node_modules/sass/sass.dart.js:80605:16)
    at Object._compileStylesheet1 (/Users/dfgdfgdfdgas/node_modules/.pnpm/sass@1.57.1/node_modules/sass/sass.dart.js:17725:117)
    at Object.compileString (/Users/dfgdfgdfdgas/node_modules/.pnpm/sass@1.57.1/node_modules/sass/sass.dart.js:17719:18)
    at StaticClosure.renderSync (/Users/dfgdfgdfdgas/node_modules/.pnpm/sass@1.57.1/node_modules/sass/sass.dart.js:20250:22)
    at Object.Primitives_applyFunction (/Users/dfgdfgdfdgas/node_modules/.pnpm/sass@1.57.1/node_modules/sass/sass.dart.js:1135:30)
    at Object.Function_apply (/Users/dfgdfgdfdgas/node_modules/.pnpm/sass@1.57.1/node_modules/sass/sass.dart.js:5243:16)
    at _callDartFunctionFast (/Users/dfgdfgdfdgas/node_modules/.pnpm/sass@1.57.1/node_modules/sass/sass.dart.js:23454:16)
    at sass.renderSync (/Users/dfgdfgdfdgas/node_modules/.pnpm/sass@1.57.1/node_modules/sass/sass.dart.js:23432:18)
    at parseCss (/Users/dfgdfgdfdgas/node_modules/.pnpm/vite-plugin-sass-dts@1.2.9_prettier@2.8.1/node_modules/vite-plugin-sass-dts/dist/index.cjs:113:23)
    at async /Users/5624645564/node_modules/.pnpm/vite-plugin-sass-dts@1.2.9_prettier@2.8.1/node_modules/vite-plugin-sass-dts/dist/index.cjs:2
57:85 {
  formatted: "Error: Can't find stylesheet to import.\n" +
    '  ╷\n' +
    "5 │ @use '@/styles/variables.module.scss';\n" +
    '  │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^\n' +
    '  ╵\n' +
    ' rteererwterert.module.scss 5:1  root stylesheet',
  line: 5,
  column: 1,
  file: '/Users/fdggdfgdfdfgdfdfsgf/src/ertertrte.module.scss',
  status: 1
}
e :>>  Error: Can't find stylesheet to import.
  ╷
5 │ @use '@/styles/variables.module.scss';
  │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
activeguild commented 1 year ago

I think this area would be helpful. https://github.com/vitejs/vite/blob/896475dc6c7e5f1168e21d556201a61659552617/packages/vite/src/node/plugins/css.ts#L1652-L1713

activeguild commented 1 year ago

@tal-rofe

Sorry for the delay, but the latest version is now able to resolve alias.