CSS Modules not included with import statment and resolve alias

[hannessolo]

Describe the bug

CSS module imports are not generated correctly (empty string instead of object holding class names) under the following conditions:

• The css module file is imported through a resolve alias, eg import styles from "custom:css"
• The javascript file importing the component is loaded lazily through React.lazy
• The build is done using vite build - under vite dev, this bug does not occur!

Example (also in the reproduction linked below):

import style from 'custom:css';

function App() {
  console.log(style);
  return <div className={style.theClass}></div>;
}

export default App;

const App = lazy(() => import('./App'));

  return (
    <Suspense>
      <App />
    </Suspense>
  );

Generated code:

import{j as a}from"./index.0b3cfb79.js";
var s="";
function o(){return console.log(s),a("div",{className:s.theClass})}export{o as default};

I would expect s here to be something like {"theClass": "hashedClassName"} and not an empty string.

In the reproduction, navigate to dist/assets/App.hash.js to see the faulty output.

Reproduction

https://stackblitz.com/edit/vitejs-vite-sdjzjs?file=vite.config.js

System Info

System:
    OS: macOS 12.2.1
    CPU: (8) arm64 Apple M1
    Memory: 82.41 MB / 16.00 GB
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 16.14.2 - ~/.nvm/versions/node/v16.14.2/bin/node
    Yarn: 1.22.18 - ~/.nvm/versions/node/v16.14.2/bin/yarn
    npm: 8.5.0 - ~/.nvm/versions/node/v16.14.2/bin/npm
  Browsers:
    Chrome: 101.0.4951.64
    Firefox: 100.0.1
    Safari: 15.3
  npmPackages:
    @vitejs/plugin-react: ^1.2.0 => 1.3.1
    vite: ^2.8.4 => 2.9.9

Used Package Manager

npm

Logs

No response

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• 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 https://github.com/vuejs/core instead.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
• The provided reproduction is a minimal reproducible example of the bug.

[sapphi-red]

v2.9.1 works but v2.9.2 does not work.
I feel #7591 is affecting this.

[sapphi-red]

The root cause here is ?used does not get injected if alias is used.

vite/packages/vite/src/node/plugins/importAnalysisBuild.ts

Lines 170 to 190 in 75c3bf6

	// Differentiate CSS imports that use the default export from those that
	// do not by injecting a ?used query - this allows us to avoid including
	// the CSS string when unnecessary (esbuild has trouble tree-shaking
	// them)
	if (
	specifier &&
	isCSSRequest(specifier) &&
	// always inject ?used query when it is a dynamic import
	// because there is no way to check whether the default export is used
	(source.slice(expStart, start).includes('from') || isDynamic) &&
	// already has ?used query (by import.meta.glob)
	!specifier.match(/\?used(&|$)/) &&
	// edge case for package names ending with .css (e.g normalize.css)
	!(bareImportRE.test(specifier) && !specifier.includes('/'))
	) {
	const url = specifier.replace(/\?|$/, (m) => `?used${m ? '&' : ''}`)
	str().overwrite(start, end, isDynamic ? `'${url}'` : url, {
	contentOnly: true
	})
	}
	}

This is another bug with the same root cause I come up with.
https://stackblitz.com/edit/vitejs-vite-dbfcts?file=main.js,vite.config.js&terminal=dev
During dev, with and without alias both has content.
But after build, only without alias has content.

[sapphi-red]

Reopening as #8278 and #8471 was reverted. See #8896 and #8874 for details.
I'll create a PR for v3 later to fix this.