Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

CSS Modules not included with import statment and resolve alias #8245

Closed
7 tasks done
hannessolo opened this issue May 20, 2022 · 3 comments · Fixed by #8278, #8896 or #8936
Closed
7 tasks done

CSS Modules not included with import statment and resolve alias #8245

hannessolo opened this issue May 20, 2022 · 3 comments · Fixed by #8278, #8896 or #8936
Labels
feat: css p3-minor-bug 🔨 An edge case that only affects very specific usage (priority) possible regression The issue only appears after a new release

Comments

@hannessolo
Copy link

hannessolo commented May 20, 2022

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

@sapphi-red sapphi-red added feat: css p3-minor-bug 🔨 An edge case that only affects very specific usage (priority) possible regression The issue only appears after a new release and removed pending triage labels May 20, 2022
@sapphi-red
Copy link
Member

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

@sapphi-red
Copy link
Member

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

// 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
Copy link
Member

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

@sapphi-red sapphi-red reopened this Jul 3, 2022
@vitejs vitejs unlocked this conversation Jul 3, 2022
pull bot pushed a commit to jango-blockchained/vite that referenced this issue Jul 3, 2022
nvh95 pushed a commit to nvh95/vite that referenced this issue Jul 3, 2022
@github-actions github-actions bot locked and limited conversation to collaborators Jul 21, 2022
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
feat: css p3-minor-bug 🔨 An edge case that only affects very specific usage (priority) possible regression The issue only appears after a new release
Projects
None yet
2 participants