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.

Sign up for GitHub

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

Jump to bottom

fix: reuse the old preprocessor after changing the lang attr #4224

Merged
merged 3 commits into from Jul 20, 2021
Merged

fix: reuse the old preprocessor after changing the lang attr #4224

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
0c276f9
fix(plugin-vue): reuse the old preprocessor after changing the lang attr
y1d7ng Jul 12, 2021
a7ba636
feat(playground): add stylus + change lang test in vue
y1d7ng Jul 16, 2021
24e616f
chore: add eol line break
Shinigami92 Jul 16, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
10 changes: 10 additions & 0 deletions packages/playground/vue/PreProcessors.vue
View file
Open in desktop
Expand Up @@ -6,6 +6,9 @@ p.pug
p.pug-less
| This is rendered from <template lang="pug">
| and styled with <style lang="less">. It should be green.
p.pug-stylus
| This is rendered from <template lang="pug">
| and styled with <style lang="stylus">. It should be orange.
SlotComponent
template(v-slot:test-slot)
div.pug-slot slot content
Expand All @@ -32,3 +35,10 @@ $color: magenta;
color: @color;
}
</style>

<style lang="stylus">
color = orange

.pug-stylus
color: color
</style>
Shinigami92 marked this conversation as resolved.
Show resolved Hide resolved
15 changes: 15 additions & 0 deletions packages/playground/vue/__tests__/vue.spec.ts
View file
Open in desktop
Expand Up @@ -56,6 +56,21 @@ describe('pre-processors', () => {
)
await untilUpdated(() => getColor(el), 'blue')
})

test('stylus + change lang', async () => {
expect(await getColor('p.pug-stylus')).toBe('orange')
editFile('PreProcessors.vue', (code) =>
code
.replace('<style lang="stylus">', '<style lang="scss">')
.replace('color = orange', '$color: yellow;')
.replace('color: color', '{ color: $color; }')
)
await untilUpdated(() => getColor('p.pug-stylus'), 'yellow')
editFile('PreProcessors.vue', (code) =>
code.replace('$color: yellow;', '$color: orange;')
)
await untilUpdated(() => getColor('p.pug-stylus'), 'orange')
})
})

describe('css modules', () => {
Expand Down
6 changes: 5 additions & 1 deletion packages/plugin-vue/src/handleHotUpdate.ts
View file
Open in desktop
Expand Up @@ -88,7 +88,11 @@ export async function handleHotUpdate({
const next = nextStyles[i]
if (!prev || !isEqualBlock(prev, next)) {
didUpdateStyle = true
const mod = modules.find((m) => m.url.includes(`type=style&index=${i}`))
const mod = modules.find(
(m) =>
m.url.includes(`type=style&index=${i}`) &&
m.url.endsWith(`.${next.lang || 'css'}`)
Comment on lines +93 to +94
Copy link
Member

Choose a reason for hiding this comment

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

question:

"[...] changing the lang attribute of the style tag will not cause the preprocessor to be updated. [...]"

Why should this work? You just shrink the condition from includes to includes + endsWith 🤔
Could you explain what is happening here?

Copy link
Contributor Author

@y1d7ng y1d7ng Jul 12, 2021 •
edited

Choose a reason for hiding this comment

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

When the lang is changed, the corresponding module will be found through the following line of code, but the url of the module still contains the previous lang. The css plugin will parse the url of this module to select the preprocessor.

vite/packages/plugin-vue/src/handleHotUpdate.ts

Line 91 in b5ab77d

const mod = modules.find((m) => m.url.includes(`type=style&index=${i}`))

After adding endsWith, a new module will be generated with the new lang in the url.

)
if (mod) {
affectedModules.add(mod)
} else {
Expand Down