Skip to content
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

fix(plugin-vue): regenerate scoped css in build watch, fix #7980 #7989

Merged
merged 3 commits into from
May 18, 2022

Conversation

sapphi-red
Copy link
Member

Description

fixes #7980

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.

@sapphi-red sapphi-red added plugin: vue p3-minor-bug An edge case that only affects very specific usage (priority) labels May 2, 2022
@patak-dev
Copy link
Member

Would you explain why this works? I tested it and it does fix the issue, but I think there is something odd with the resulting query, that ends up having &scope={hash}&scope=true for scoped style with this PR.

@sapphi-red
Copy link
Member Author

scope query was not used as a value so it worked. But I removed it because I did not intend to duplicate it.
This PR makes the url of scoped style change when the descriptor id changes. This will invalidate cache when descriptor id changes.

@sapphi-red sapphi-red force-pushed the fix/vue-scoped-css-build-watch branch from 8354108 to a71a14f Compare May 11, 2022 11:00
@poyoho
Copy link
Member

poyoho commented May 11, 2022

rebase rebase rebase 👏👏. It should make style / template scoped=true to scoped=${descriptor.id}

@sapphi-red
Copy link
Member Author

@poyoho Shoud I change template scoped=true to scoped=${descriptor.id}? I suppose it is not necessary because __scopeId is injected here and template does not change when descriptor.id changes.

if (hasScoped) {
attachedProps.push([`__scopeId`, JSON.stringify(`data-v-${descriptor.id}`)])
}

@poyoho
Copy link
Member

poyoho commented May 11, 2022

IIUC, template should rerender tag.

when css scopde change will generate

.a [data-v-1234567890] {
  color: red
}

if no change template, template render also keep

<div class="a" data-v-0987654321>

we should make it to

<div class="a" data-v-1234567890>

so we should request scoped=${descriptor.id} ?

@sapphi-red
Copy link
Member Author

Yes I understand the same.
But it somehow works without the change.

Though I added the change in case. 👍

@patak-dev patak-dev changed the title fix(plugin-vue): regenerate scoped css when build watch (fixes #7980) fix(plugin-vue): regenerate scoped css in build watch, fix #7980 May 18, 2022
@patak-dev patak-dev merged commit dc00225 into vitejs:main May 18, 2022
@sapphi-red sapphi-red deleted the fix/vue-scoped-css-build-watch branch May 18, 2022 23:35
# for free to join this conversation on GitHub. Already have an account? # to comment
Labels
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.

vite build --watch is building the component with a new data-v value, but not generating a new css file
3 participants