CSS Modules composes with SASS files

mrequs commented 1 year ago

Environment

Operating System: Darwin
Node Version: v16.15.1
Nuxt Version: 3.0.0
Nitro Version: 1.0.0
Package Manager: yarn@1.22.5
Builder: vite
User Config: css, webpack, vite
Runtime Modules: -
Build Modules: -

Reproduction

File: assets/typo.module.scss

$color: red;

.h1 {
  color: $color;
}

File: pages/index.vue

<template>
   <h1 :class="$style.title">Home page</h1>
</template>

<style lang="scss" module>
.title {
  composes: h1 from '~/assets/typo.module.scss';
  color: yellow;
}
</style>

Describe the bug

The compose in CSS modules doesn't work with SCSS files.

In this case the scss file is loaded as regular css file, it's not compiled from scss to css, when i try use other loader like (what i do in Nuxt2, where it's work):

composes: h1 from 'sass-loader!~/assets/typo.module.scss';

I got error 500 with message: Cannot read properties of undefined (reading 'length')

I tried with different loaders (postcss-loader, etc.) other aliases (@/) and the result always be the same

Additional context

No response

Logs

[[vite-node] [VITE_ERROR] /pages/index.vue?vue&type=style&index=0&lang.module.scss                                                                                        20:25:30
at /pages/index.vue?vue&type=style&index=0&lang.module.scss ] {
  statusCode: 500,
  fatal: false,
  unhandled: false,
  statusMessage: 'Vite Error',
  __nuxt_error: true
}

 ERROR  20:25:30 [vite] Internal server error: Cannot read properties of undefined (reading 'length')                                                                    20:25:30
      at memoizedBinarySearch (file:///UserPath/nuxt3/node_modules/vite/dist/node/chunks/dep-5605cfa4.js:9948:25)
      at traceSegmentInternal (file:///UserPath/nuxt3/node_modules/vite/dist/node/chunks/dep-5605cfa4.js:10055:17)
      at originalPositionFor$1 (file:///UserPath/nuxt3/node_modules/vite/dist/node/chunks/dep-5605cfa4.js:10041:23)
      at formatError (file:///UserPath/nuxt3/node_modules/vite/dist/node/chunks/dep-5605cfa4.js:40343:54)
      at TransformContext.error (file:///UserPath/nuxt3/node_modules/vite/dist/node/chunks/dep-5605cfa4.js:40277:19)
      at Object.transform (file:///UserPath/nuxt3/node_modules/vite/dist/node/chunks/dep-5605cfa4.js:40537:25)
      at async loadAndTransform (file:///UserPath/nuxt3/node_modules/vite/dist/node/chunks/dep-5605cfa4.js:36921:29)

manniL commented 1 year ago

Could you tests if this works as expected in plain Vite + Vue?

mrequs commented 1 year ago

Could you tests if this works as expected in plain Vite + Vue?

looks the same, apparently it's a vite problem itself

manniL commented 1 year ago

Then it'd be great to open an issue there 👍 Feel free to link this one then ☺️

mrequs commented 1 year ago

@manniL looks it's related with https://github.com/vitejs/vite/issues/10340

nuxt / nuxt