[css modules]composed scss file is treated as css

Thiry1 commented 2 years ago

Describe the bug

When compose from scss, scss treats as css.

// style.module.scss

.hi {
  composes: foo from "./foo.module.scss"
}

// foo.module.scss

.foo {
  // comment
  background: red;
}

// comment will throws

CssSyntaxError:foo.module.scss:2:8: Unknown word
You tried to parse SCSS with the standard CSS parser; try again with the postcss-scss parser

Reproduction

https://github.com/Thiry1/vite-bug-reprodocution

System Info

System:
    OS: macOS 12.5.1
    CPU: (8) x64 Intel(R) Core(TM) i7-1068NG7 CPU @ 2.30GHz
    Memory: 4.23 GB / 32.00 GB
    Shell: 3.2.57 - /bin/bash
  Binaries:
    Node: 16.13.0 - ~/.nodebrew/current/bin/node
    Yarn: 1.22.15 - ~/.nodebrew/current/bin/yarn
    npm: 8.1.0 - ~/.nodebrew/current/bin/npm
  Browsers:
    Chrome: 105.0.5195.125
    Chrome Canary: 108.0.5338.0
    Firefox: 104.0.1
    Firefox Developer Edition: 90.0
    Safari: 15.6.1
  npmPackages:
    vite: ^3.1.4 => 3.1.4

Used Package Manager

yarn

Logs

Click to expand!

```shell ❯ vite --debug vite:config bundled config file loaded in 109.00ms +0ms vite:esbuild init tsconfck (root: /Users/kei_sakamoto/Documents/GitHub/vite-bug-reprodocutin) +0ms vite:esbuild init tsconfck (root: /Users/kei_sakamoto/Documents/GitHub/vite-bug-reprodocutin) +1ms vite:esbuild init tsconfck end +2ms vite:esbuild init tsconfck end +0ms vite:config using resolved config: { vite:config optimizeDeps: { vite:config disabled: 'build', vite:config force: undefined, vite:config esbuildOptions: { preserveSymlinks: undefined } vite:config }, vite:config server: { vite:config preTransformRequests: true, vite:config middlewareMode: false, vite:config fs: { strict: true, allow: [Array], deny: [Array] } vite:config }, vite:config configFile: '/Users/kei_sakamoto/Documents/GitHub/vite-bug-reprodocutin/vite.config.ts', vite:config configFileDependencies: [ vite:config '/Users/kei_sakamoto/Documents/GitHub/vite-bug-reprodocutin/vite.config.ts' vite:config ], vite:config inlineConfig: { vite:config root: undefined, vite:config base: undefined, vite:config mode: undefined, vite:config configFile: undefined, vite:config logLevel: undefined, vite:config clearScreen: undefined, vite:config optimizeDeps: { force: undefined }, vite:config server: {} vite:config }, vite:config root: '/Users/kei_sakamoto/Documents/GitHub/vite-bug-reprodocutin', vite:config base: '/', vite:config resolve: { alias: [ [Object], [Object] ] }, vite:config publicDir: '/Users/kei_sakamoto/Documents/GitHub/vite-bug-reprodocutin/public', vite:config cacheDir: '/Users/kei_sakamoto/Documents/GitHub/vite-bug-reprodocutin/node_modules/.vite', vite:config command: 'serve', vite:config mode: 'development', vite:config ssr: { vite:config format: 'esm', vite:config target: 'node', vite:config optimizeDeps: { disabled: true, esbuildOptions: [Object] } vite:config }, vite:config isWorker: false, vite:config mainConfig: null, vite:config isProduction: false, vite:config plugins: [ vite:config 'vite:pre-alias', vite:config 'alias', vite:config 'vite:modulepreload-polyfill', vite:config 'vite:optimized-deps', vite:config 'vite:resolve', vite:config 'vite:html-inline-proxy', vite:config 'vite:css', vite:config 'vite:esbuild', vite:config 'vite:json', vite:config 'vite:wasm-helper', vite:config 'vite:worker', vite:config 'vite:asset', vite:config 'vite:wasm-fallback', vite:config 'vite:define', vite:config 'vite:css-post', vite:config 'vite:worker-import-meta-url', vite:config 'vite:dynamic-import-vars', vite:config 'vite:import-glob', vite:config 'vite:client-inject', vite:config 'vite:import-analysis' vite:config ], vite:config build: { vite:config target: [ 'es2020', 'edge88', 'firefox78', 'chrome87', 'safari13' ], vite:config polyfillModulePreload: true, vite:config outDir: 'dist', vite:config assetsDir: 'assets', vite:config assetsInlineLimit: 4096, vite:config cssCodeSplit: true, vite:config cssTarget: [ 'es2020', 'edge88', 'firefox78', 'chrome87', 'safari13' ], vite:config sourcemap: false, vite:config rollupOptions: {}, vite:config minify: 'esbuild', vite:config terserOptions: {}, vite:config write: true, vite:config emptyOutDir: null, vite:config manifest: false, vite:config lib: false, vite:config ssr: false, vite:config ssrManifest: false, vite:config reportCompressedSize: true, vite:config chunkSizeWarningLimit: 500, vite:config watch: null, vite:config commonjsOptions: { include: [Array], extensions: [Array] }, vite:config dynamicImportVarsOptions: { warnOnError: true, exclude: [Array] } vite:config }, vite:config preview: { vite:config port: undefined, vite:config strictPort: undefined, vite:config host: undefined, vite:config https: undefined, vite:config open: undefined, vite:config proxy: undefined, vite:config cors: undefined, vite:config headers: undefined vite:config }, vite:config env: { BASE_URL: '/', MODE: 'development', DEV: true, PROD: false }, vite:config assetsInclude: [Function: assetsInclude], vite:config logger: { vite:config hasWarned: false, vite:config info: [Function: info], vite:config warn: [Function: warn], vite:config warnOnce: [Function: warnOnce], vite:config error: [Function: error], vite:config clearScreen: [Function: clearScreen], vite:config hasErrorLogged: [Function: hasErrorLogged] vite:config }, vite:config packageCache: Map(0) {}, vite:config createResolver: [Function: createResolver], vite:config worker: { vite:config format: 'iife', vite:config plugins: [ vite:config 'vite:pre-alias', vite:config 'alias', vite:config 'vite:modulepreload-polyfill', vite:config 'vite:optimized-deps', vite:config 'vite:resolve', vite:config 'vite:html-inline-proxy', vite:config 'vite:css', vite:config 'vite:esbuild', vite:config 'vite:json', vite:config 'vite:wasm-helper', vite:config 'vite:worker', vite:config 'vite:asset', vite:config 'vite:wasm-fallback', vite:config 'vite:define', vite:config 'vite:css-post', vite:config 'vite:worker-import-meta-url', vite:config 'vite:dynamic-import-vars', vite:config 'vite:import-glob', vite:config 'vite:client-inject', vite:config 'vite:import-analysis' vite:config ], vite:config rollupOptions: {}, vite:config getSortedPlugins: [Function: getSortedPlugins], vite:config getSortedPluginHooks: [Function: getSortedPluginHooks] vite:config }, vite:config appType: 'spa', vite:config experimental: { importGlobRestoreExtension: false, hmrPartialAccept: false }, vite:config getSortedPlugins: [Function: getSortedPlugins], vite:config getSortedPluginHooks: [Function: getSortedPluginHooks] vite:config } +8ms vite:deps Hash is consistent. Skipping. Use --force to override. +0ms VITE v3.1.4 ready in 283 ms ➜ Local: http://localhost:5173/ ➜ Network: use --host to expose vite:spa-fallback Rewriting GET / to /index.html +0ms vite:time 50.51ms /index.html +0ms vite:resolve 5.79ms /@vite/client -> /Users/kei_sakamoto/Documents/GitHub/vite-bug-reprodocutin/node_modules/vite/dist/client/client.mjs +0ms vite:resolve 1.48ms /lib -> /Users/kei_sakamoto/Documents/GitHub/vite-bug-reprodocutin/lib/index.jsx +11ms vite:load 1.88ms [fs] /lib +0ms vite:load 14.64ms [fs] /@vite/client +6ms vite:resolve 6.99ms react -> /Users/kei_sakamoto/Documents/GitHub/vite-bug-reprodocutin/node_modules/.vite/deps/react.js?v=070109ce +42ms vite:resolve 5.28ms /node_modules/.vite/deps/react.js?v=070109ce -> /Users/kei_sakamoto/Documents/GitHub/vite-bug-reprodocutin/node_modules/.vite/deps/react.js?v=070109ce +6ms vite:import-analysis /node_modules/.vite/deps/react.js?v=070109ce needs interop +0ms vite:resolve 0.15ms react-dom -> /Users/kei_sakamoto/Documents/GitHub/vite-bug-reprodocutin/node_modules/.vite/deps/react-dom.js?v=070109ce +47ms vite:resolve 0.08ms /node_modules/.vite/deps/react-dom.js?v=070109ce -> /Users/kei_sakamoto/Documents/GitHub/vite-bug-reprodocutin/node_modules/.vite/deps/react-dom.js?v=070109ce +1ms vite:import-analysis /node_modules/.vite/deps/react-dom.js?v=070109ce needs interop +48ms vite:resolve 0.64ms ./style.module.scss -> /Users/kei_sakamoto/Documents/GitHub/vite-bug-reprodocutin/lib/style.module.scss +2ms vite:resolve 0.31ms /lib/style.module.scss -> /Users/kei_sakamoto/Documents/GitHub/vite-bug-reprodocutin/lib/style.module.scss +1ms vite:import-analysis 69.67ms [3 imports rewritten] lib/index.jsx +6ms vite:transform 97.95ms /lib +0ms vite:time 106.14ms /lib +250ms vite:optimize-deps load /Users/kei_sakamoto/Documents/GitHub/vite-bug-reprodocutin/node_modules/.vite/deps/react.js +0ms vite:optimize-deps load /Users/kei_sakamoto/Documents/GitHub/vite-bug-reprodocutin/node_modules/.vite/deps/react-dom.js +1ms vite:resolve 0.70ms @vite/env -> /Users/kei_sakamoto/Documents/GitHub/vite-bug-reprodocutin/node_modules/vite/dist/client/env.mjs +16ms vite:resolve 0.22ms /node_modules/vite/dist/client/env.mjs -> /Users/kei_sakamoto/Documents/GitHub/vite-bug-reprodocutin/node_modules/vite/dist/client/env.mjs +0ms vite:import-analysis 5.54ms [1 imports rewritten] node_modules/vite/dist/client/client.mjs +14ms vite:transform 95.97ms /@vite/client +13ms vite:time 136.28ms /@vite/client +12ms vite:load 13.76ms [fs] /node_modules/vite/dist/client/env.mjs +122ms vite:load 35.03ms [fs] /lib/style.module.scss +11ms vite:load 41.94ms [plugin] /node_modules/.vite/deps/react.js?v=070109ce +7ms vite:resolve 0.84ms ./chunk-V6FDF5WS.js -> /Users/kei_sakamoto/Documents/GitHub/vite-bug-reprodocutin/node_modules/.vite/deps/chunk-V6FDF5WS.js?v=070109ce +39ms vite:resolve 0.19ms /node_modules/.vite/deps/chunk-V6FDF5WS.js?v=070109ce -> /Users/kei_sakamoto/Documents/GitHub/vite-bug-reprodocutin/node_modules/.vite/deps/chunk-V6FDF5WS.js?v=070109ce +1ms vite:import-analysis 17.56ms [1 imports rewritten] node_modules/.vite/deps/react.js?v=070109ce +51ms vite:transform 18.35ms /node_modules/.vite/deps/react.js?v=070109ce +52ms vite:optimize-deps load /Users/kei_sakamoto/Documents/GitHub/vite-bug-reprodocutin/node_modules/.vite/deps/chunk-V6FDF5WS.js +60ms vite:import-analysis 0.10ms [no imports] node_modules/vite/dist/client/env.mjs +3ms vite:transform 30.36ms /node_modules/vite/dist/client/env.mjs +2ms vite:load 63.62ms [plugin] /node_modules/.vite/deps/react-dom.js?v=070109ce +22ms vite:import-analysis 18.28ms [1 imports rewritten] node_modules/.vite/deps/react-dom.js?v=070109ce +24ms vite:transform 21.82ms /node_modules/.vite/deps/react-dom.js?v=070109ce +24ms vite:load 46.62ms [plugin] /node_modules/.vite/deps/chunk-V6FDF5WS.js?v=070109ce +44ms vite:import-analysis 0.66ms [no imports] node_modules/.vite/deps/chunk-V6FDF5WS.js?v=070109ce +24ms vite:transform 1.56ms /node_modules/.vite/deps/chunk-V6FDF5WS.js?v=070109ce +24ms vite:cache [304] /node_modules/vite/dist/client/env.mjs +0ms vite:time 0.56ms /node_modules/vite/dist/client/env.mjs +522ms vite:resolve 0.29ms ./foo.module.scss -> null +0ms vite:resolve 0.10ms ./foo.module.scss -> null +0ms vite:resolve 0.07ms ./foo.module.scss -> null +0ms CssSyntaxError: /Users/kei_sakamoto/Documents/GitHub/vite-bug-reprodocutin/lib/foo.module.scss:2:8: Unknown word You tried to parse SCSS with the standard CSS parser; try again with the postcss-scss parser at Input.error (/Users/kei_sakamoto/Documents/GitHub/vite-bug-reprodocutin/node_modules/postcss/lib/input.js:148:16) at Parser.unknownWord (/Users/kei_sakamoto/Documents/GitHub/vite-bug-reprodocutin/node_modules/postcss/lib/parser.js:540:22) at Parser.decl (/Users/kei_sakamoto/Documents/GitHub/vite-bug-reprodocutin/node_modules/postcss/lib/parser.js:219:16) at Parser.other (/Users/kei_sakamoto/Documents/GitHub/vite-bug-reprodocutin/node_modules/postcss/lib/parser.js:128:18) at Parser.parse (/Users/kei_sakamoto/Documents/GitHub/vite-bug-reprodocutin/node_modules/postcss/lib/parser.js:72:16) at parse (/Users/kei_sakamoto/Documents/GitHub/vite-bug-reprodocutin/node_modules/postcss/lib/parse.js:11:12) at new LazyResult (/Users/kei_sakamoto/Documents/GitHub/vite-bug-reprodocutin/node_modules/postcss/lib/lazy-result.js:133:16) at Processor.process (/Users/kei_sakamoto/Documents/GitHub/vite-bug-reprodocutin/node_modules/postcss/lib/processor.js:28:14) at Core.load (file:///Users/kei_sakamoto/Documents/GitHub/vite-bug-reprodocutin/node_modules/vite/dist/node/chunks/dep-55b95cd5.js:1547:76) at file:///Users/kei_sakamoto/Documents/GitHub/vite-bug-reprodocutin/node_modules/vite/dist/node/chunks/dep-55b95cd5.js:1621:19 { reason: 'Unknown word', file: '/Users/kei_sakamoto/Documents/GitHub/vite-bug-reprodocutin/lib/foo.module.scss', source: '.foo {\n // foo\n font-weight: bold;\n}\n', line: 2, column: 8, endLine: 2, endColumn: 11, input: { line: 2, column: 8, endLine: 2, endColumn: 11, source: '.foo {\n // foo\n font-weight: bold;\n}\n', url: 'file:///Users/kei_sakamoto/Documents/GitHub/vite-bug-reprodocutin/lib/foo.module.scss', file: '/Users/kei_sakamoto/Documents/GitHub/vite-bug-reprodocutin/lib/foo.module.scss' } } vite:hmr [detected api usage] lib/style.module.scss +0ms vite:import-analysis 0.55ms [0 imports rewritten] lib/style.module.scss +525ms vite:transform 598.49ms /lib/style.module.scss +525ms vite:time 104.61ms /lib/style.module.scss +105ms vite:deps ✨ static imports crawl ended +1m ```

Validations

[X] Follow our Code of Conduct
[X] Read the Contributing Guidelines.
[X] Read the docs.
[X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
[X] Make sure this is a Vite issue and not a framework-specific issue. For example, if it's a Vue SFC related bug, it should likely be reported to vuejs/core instead.
[X] Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
[X] The provided reproduction is a minimal reproducible example of the bug.

Thiry1 commented 1 year ago

@sapphi-red Could you tell us about the current status? If you have any plan for this issue, I can also work on it instead of you.

I think we need to apply preprocessor to composed file and pass to resolve function of postcss-modules. https://github.com/vitejs/vite/blob/060cd66878eb6bee53a55ea3ec0afd724ee9b35c/packages/vite/src/node/plugins/css.ts#L932

sapphi-red commented 1 year ago

I don't have plans to work on this issue at this time. Contributions are welcome.

Thiry1 commented 1 year ago

I did some research. First of all, postcss-modules cannot handle scss, so we need to convert it to css beforehand. If we continue to use postcss-modules, converting to css when a file that requires preprocessing comes to the resolve function of postcss-modules, write it to a file, and returning the path of the file. I think this seems to solve the problem. As you think, this method is not performant and not a smart way. Any other ideas?

nickdandakis commented 1 year ago

FWIW the same issue arises from composes with CSS Modules + CSS (not just SCSS), the composed style is treated as vanilla CSS / not processed

sapphi-red commented 1 year ago

@Thiry1 I guess this Loader option could be used. https://github.com/madyankin/postcss-modules#loading-source-files

Thiry1 commented 1 year ago

@sapphi-red Thank you for the suggestion. I've just created PR(#12076), could you check it please?

MorayM commented 1 year ago

Does anyone know which version introduced this bug? Or has it always been around?

chaishi commented 1 year ago

@MorayM I've tried yesterday, 20230401. it might be every version after code analyzing

MorayM commented 1 year ago

@chaishi interesting, do you know which version introduced code analysing off the top of your head?

MorayM commented 1 year ago

@chaishi interesting, do you know which version introduced code analysing off the top of your head? I'll roll back to that and see what happens.

Thiry1 commented 1 year ago

@sapphi-red Do you have any plan to fix this when you switch to lightning css in vite 5? If not (or if it takes a long time), please consider merging the PR.

iyinchao commented 1 year ago

Having the same issue.

Also, when using the "Exporting values variables" feature like this:

// A.module.scss
.shared {
  // comment (causes error)
  color: red;
}

// B.module.scss
@value shared from './A.module.scss';
.shared {
 background: red;
}

the same error will show up.

@sapphi-red so maybe we can move this PR forward? Thanks alot!

@sapphi-red Do you have any plan to fix this when you switch to lightning css in vite 5? If not (or if it takes a long time), please consider merging the PR.

sapphi-red commented 1 year ago

I just didn't have time to check your PR.

BrendanBerkley commented 1 year ago

Just wanted to chime in to encourage anyone who's working on this. My company uses Sass + modules and we've come up against this issue recently (using Vite for the first time with Storybook). It'd be very helpful if something was done here so that we don't have to alter our workflow too much!

patak-dev commented 1 year ago

@BrendanBerkley if there are some folks in your company with JS knowledge, it may be more effective to put some resources to dig into Vite's code base and help review the PR or propose a solution so you don't need to alter your workflow.

BrendanBerkley commented 1 year ago

@patak-dev There's already a PR, seemed like the issue isn't finding a solution but finding time to review it.

Is it beneficial for someone who's never looked at your code before to kick the tires on a PR? I'm not sure how I'd be helpful. If I'm able to review it would it then be accepted?

Does this project do bounties? I could try to drum up some support for that if that would help.

patak-dev commented 1 year ago

@patak-dev There's already a PR, seemed like the issue isn't finding a solution but finding time to review it.

Is it beneficial for someone who's never looked at your code before to kick the tires on a PR? I'm not sure how I'd be helpful. If I'm able to review it would it then be accepted?

Yes, I think it is always beneficial to dive into the code. You'll learn a lot during the process, so even if you don't end up creating a PR, you can easily justify the time. And you'll be better prepared to help next time. You'll also be able to give better information about the issue to other contributors.

About reviewing the PR, we can't assure you it will be merged after your review. The solution needed may end up being different but your review could help the PR move forward. Exploring the possible solutions helps.

Does this project do bounties? I could try to drum up some support for that if that would help.

We don't do bounties. GitHub sponsors is enabled though, and you could add Vite as part of your Company OSS funding strategy if you think that is a good idea.

jeron-diovis commented 1 year ago

I did a little local testing of the PR above. Hope this can somehow help to bring this issue back to life.

privatenumber commented 9 months ago

I've implemented a fix via https://github.com/privatenumber/vite-css-modules (which is getting integrated into Vite core via https://github.com/vitejs/vite/pull/16018).

Testing and feedback will be appreciated!

vitejs / vite