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

fix: support importing css with ?url #5940

Closed
wants to merge 3 commits into from
Closed

Conversation

matthewp
Copy link
Contributor

@matthewp matthewp commented Dec 2, 2021

Description

This fixes importing a URL of a CSS file:

import url from './styles.css?url';
// Should be /src/styles.css

Additional context

The vite:css plugin should be checking for query params when doing its transforms. This makes it do so.


What is the purpose of this pull request?

  • Bug fix
  • New Feature
  • Documentation update
  • Other

Before submitting the PR, please make sure you do the following

  • Read the Contributing Guidelines.
  • Read the Pull Request Guidelines and follow the Commit Convention.
  • Check that there isn't already a PR that solves the problem the same way to avoid creating a duplicate.
  • Provide a description in this PR that addresses what the PR is solving, or reference the issue that it solves (e.g. fixes #123).
  • Ideally, include relevant tests that fail without this PR but pass with it.

@matthewp
Copy link
Contributor Author

matthewp commented Dec 2, 2021

@Niputi I don't believe this should be labelled as a feature. Currently when you import a CSS file using ?url you get:

export default "export default \"/path/to/styles.css\";";. Which clearly seems like a bug to me.

@Niputi Niputi added p3-minor-bug An edge case that only affects very specific usage (priority) and removed feat: css labels Dec 2, 2021
@Niputi
Copy link
Contributor

Niputi commented Dec 2, 2021

we have been using the feat: *** to show which vite related feature issue /pr would be related to. that's at least how I understand it

@Shinigami92
Copy link
Member

@Niputi is right, this targets packages/vite/src/node/plugins/css.ts and therefore it a fix for the css feature

@@ -161,7 +162,7 @@ export function cssPlugin(config: ResolvedConfig): Plugin {
},

async transform(raw, id) {
if (!isCSSRequest(id) || commonjsProxyRE.test(id)) {
if (!isCSSRequest(id) || commonjsProxyRE.test(id) || isURLRequest(id)) {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Maybe we check using SPECIAL_QUERY_RE instead?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

That would capture things other than ?url

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think the four queries (worker, sharedworker, raw, url) captured by the regex should all be skipped for the css plugin. The former two are handled by the workerPlugin, the latter two are by the assetPlugin. Pretty sure skipping raw would be fine here too, there's not much reason to transform a raw import. It might indirectly fix #5724.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Though if we want to scope the fix to ?url only, I'm fine with the current change too.

@bluwy
Copy link
Member

bluwy commented Dec 23, 2021

Evan's comment here might be relevant as well, and I'm not sure if there's more needed to address that.

@matthewp
Copy link
Contributor Author

Sounds like #5796 is going to cover this, so this pr is not needed.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
feat: css p3-minor-bug An edge case that only affects very specific usage (priority)
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

4 participants