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 import regression in Vite 2.8 #6797

Closed
7 tasks done
Artur- opened this issue Feb 7, 2022 · 6 comments
Closed
7 tasks done

CSS import regression in Vite 2.8 #6797

Artur- opened this issue Feb 7, 2022 · 6 comments
Labels
feat: css pending triage regression The issue only appears after a new release

Comments

@Artur-
Copy link
Contributor

Artur- commented Feb 7, 2022

Describe the bug

When you import CSS using the inline flag, like

import prismCss from 'prismjs/themes/prism-okaidia.css?inline';

the value is available in development mode but becomes an empty string in the built version

Reproduction

https://github.com/Artur-/vite-vaadin-problem6

System Info

System:
    OS: macOS 12.2
    CPU: (10) arm64 Apple M1 Max
    Memory: 1.75 GB / 64.00 GB
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 17.3.0 - ~/.nvm/versions/node/v17.3.0/bin/node
    npm: 8.3.0 - ~/.nvm/versions/node/v17.3.0/bin/npm
  Browsers:
    Chrome: 97.0.4692.99
    Firefox: 95.0.2
    Safari: 15.3
  npmPackages:
    vite: ^2.8.0-beta.6 => 2.8.0-beta.6

Used Package Manager

npm

Logs

No response

Validations

@Niputi Niputi added feat: css regression The issue only appears after a new release labels Feb 7, 2022
@Artur-
Copy link
Contributor Author

Artur- commented Feb 7, 2022

With VIte 2.7.13, the value is available in both development mode and when built for production
Starting from 2.8.0-beta.0 it is only available in development mode

@Artur-
Copy link
Contributor Author

Artur- commented Feb 7, 2022

Bisect says this was introduced by #6233 / 000ba2e

@patak-dev
Copy link
Member

patak-dev commented Feb 7, 2022

I'll send a PR to revert #6233 soon. @egoist we can add better test cases before adding that fix back, we would like to get 2.8 out of the door this week.

Thanks for digging into this issue @Artur-

@bluwy
Copy link
Member

bluwy commented Feb 7, 2022

To be fair, css?inline isn't documented and I'm not sure if it's public API. Does it work like ?raw? There was a similar question over at sveltejs/vite-plugin-svelte#232 before

@Artur-
Copy link
Contributor Author

Artur- commented Feb 7, 2022

Interestingly enough this fails only when importing from node_module, if you import from a file in the project it works as expected also in 2.8. That is why this test still passes:

import inlined from './inlined.css?inline'
text('.inlined-code', inlined)

@patak-dev
Copy link
Member

@bluwy looks like it was never added to the documentation, but ?inline was added here #2148 (comment) to be able to do Web Components IIRC

@github-actions github-actions bot locked and limited conversation to collaborators Feb 22, 2022
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
feat: css pending triage regression The issue only appears after a new release
Projects
None yet
Development

No branches or pull requests

4 participants