Skip to content

feat: support generated JS imports for external scoped style #196

New issue

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

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

Already on GitHub? # to your account

Merged
merged 5 commits into from
Oct 1, 2023

Conversation

Jinjiang
Copy link
Contributor

@Jinjiang Jinjiang commented Jul 7, 2023

Description

Support importing scoped CSS files in JS in the format: ./external-css-file.css?scoped=true&id=<scope-id>&src=<scope-id>&lang.css.

So with this format, we can pre-compile a .vue file into JavaScript to consume further.

e.g.

<style src="./external-css-file.css" scoped></style>

could be pre-compiled into:

import './external-css-file.css?scoped=true&id=<scope-id>&src=<scope-id>&lang.css';

And then with this PR, the vite-plugin-vue can eventually handle it properly.

Additional context


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.

@haoqunjiang haoqunjiang merged commit bd5055d into vitejs:main Oct 1, 2023
@Jinjiang Jinjiang deleted the external-scoped-style branch October 1, 2023 19:39
# for free to join this conversation on GitHub. Already have an account? # to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants