Skip to content

Vite: Process <style> blocks inside Svelte files as a post-processor #15436

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

Merged
philipp-spiess merged 4 commits into from
Jan 9, 2025
Merged

Vite: Process <style> blocks inside Svelte files as a post-processor #15436

Changes from 1 commit
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
110cc9f
Svelte post-processor
philipp-spiess Dec 18, 2024
cf8fde2
Detect warnings in Svelte tests
philipp-spiess Jan 7, 2025
3fc70b7
Add changelog
philipp-spiess Jan 9, 2025
1609e54
Simplify `<style>` gating
philipp-spiess Jan 9, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
Detect warnings in Svelte tests
  • Loading branch information
@philipp-spiess
philipp-spiess committed Jan 9, 2025
commit cf8fde205b3141bbcce89a12be372742919a5504
29 changes: 16 additions & 13 deletions integrations/vite/svelte.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -57,19 +57,19 @@ test(
<h1 class="global local underline">Hello {name}!</h1>

<style>
@import 'tailwindcss' reference;
@import './other.css';
@reference 'tailwindcss';
</style>
`,
'src/other.css': css`
.local {
@apply text-red-500;
animation: 2s ease-in-out 0s infinite localKeyframes;
animation: 2s ease-in-out infinite localKeyframes;
}

:global(.global) {
@apply text-green-500;
animation: 2s ease-in-out 0s infinite globalKeyframes;
animation: 2s ease-in-out infinite globalKeyframes;
}

@keyframes -global-globalKeyframes {
Expand All @@ -93,18 +93,21 @@ test(
},
},
async ({ exec, fs, expect }) => {
await exec('pnpm vite build')
let output = await exec('pnpm vite build')

let files = await fs.glob('dist/**/*.css')
expect(files).toHaveLength(1)

await fs.expectFileToContain(files[0][0], [
candidate`underline`,
'.global{color:var(--color-green-500);animation:2s ease-in-out 0s infinite globalKeyframes}',
/\.local.svelte-.*\{color:var\(--color-red-500\);animation:2s ease-in-out 0s infinite svelte-.*-localKeyframes\}/,
'.global{color:var(--color-green-500);animation:2s ease-in-out infinite globalKeyframes}',
/\.local.svelte-.*\{color:var\(--color-red-500\);animation:2s ease-in-out infinite svelte-.*-localKeyframes\}/,
/@keyframes globalKeyframes\{/,
/@keyframes svelte-.*-localKeyframes\{/,
])

// Should not print any warnings
expect(output).not.toContain('vite-plugin-svelte')
},
)

Expand Down Expand Up @@ -164,20 +167,20 @@ test(
<h1 class="local global underline">Hello {name}!</h1>

<style>
@import 'tailwindcss' reference;
@import './other.css';
@reference 'tailwindcss';
</style>
`,
'src/index.css': css` @import 'tailwindcss'; `,
'src/other.css': css`
.local {
@apply text-red-500;
animation: 2s ease-in-out 0s infinite localKeyframes;
animation: 2s ease-in-out infinite localKeyframes;
}

:global(.global) {
@apply text-green-500;
animation: 2s ease-in-out 0s infinite globalKeyframes;
animation: 2s ease-in-out infinite globalKeyframes;
}

@keyframes -global-globalKeyframes {
Expand Down Expand Up @@ -210,10 +213,10 @@ test(
let [, css] = files[0]
expect(css).toContain(candidate`underline`)
expect(css).toContain(
'.global{color:var(--color-green-500);animation:2s ease-in-out 0s infinite globalKeyframes}',
'.global{color:var(--color-green-500);animation:2s ease-in-out infinite globalKeyframes}',
)
expect(css).toMatch(
/\.local.svelte-.*\{color:var\(--color-red-500\);animation:2s ease-in-out 0s infinite svelte-.*-localKeyframes\}/,
/\.local.svelte-.*\{color:var\(--color-red-500\);animation:2s ease-in-out infinite svelte-.*-localKeyframes\}/,
)
expect(css).toMatch(/@keyframes globalKeyframes\{/)
expect(css).toMatch(/@keyframes svelte-.*-localKeyframes\{/)
Expand All @@ -235,10 +238,10 @@ test(
let [, css] = files[0]
expect(css).toContain(candidate`font-bold`)
expect(css).toContain(
'.global{color:var(--color-green-500);animation:2s ease-in-out 0s infinite globalKeyframes}',
'.global{color:var(--color-green-500);animation:2s ease-in-out infinite globalKeyframes}',
)
expect(css).toMatch(
/\.local.svelte-.*\{color:var\(--color-red-500\);animation:2s ease-in-out 0s infinite svelte-.*-localKeyframes\}/,
/\.local.svelte-.*\{color:var\(--color-red-500\);animation:2s ease-in-out infinite svelte-.*-localKeyframes\}/,
)
expect(css).toMatch(/@keyframes globalKeyframes\{/)
expect(css).toMatch(/@keyframes svelte-.*-localKeyframes\{/)
Expand Down