jake/Lumotia
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(tailwind): move ResizeHandles CSS to app.css global sheet

Browse Source 
@tailwindcss/vite:generate:serve threw 'Invalid declaration:
getCurrentWindow' on ResizeHandles.svelte?svelte&type=style&lang.css
even after comment sanitisation. The style block is plain CSS with no
Tailwind directives, but the per-component virtual CSS module route
was hitting a parse bug in the Tailwind v4 + Svelte 5 combination.

Workaround: move the CSS into app.css (class names are already
component-specific, no scoping loss) and drop the component-local
<style> block. This sidesteps the virtual-module route entirely.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Jake
2026-04-19 17:42:20 +01:00
parent ab88dab82a
commit 27d85a0b28
2 changed files with 80 additions and 85 deletions
Download Patch File Download Diff File Expand all files Collapse all files

80
src/app.css
View File

@@ -411,3 +411,83 @@ textarea, input, [data-no-transition] {
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
/* === Window resize handles (see ResizeHandles.svelte) ===
Lives in the global sheet so @tailwindcss/vite does not try to
parse it as a per-component virtual CSS module, which triggers an
"Invalid declaration" error on plain CSS inputs in some Tailwind v4
+ Svelte 5 combinations. */
.kon-rh {
position: fixed;
z-index: 2147483646;
background: transparent;
pointer-events: auto;
touch-action: none;
user-select: none;
-webkit-user-select: none;
}
.kon-rh-nw,
.kon-rh-ne,
.kon-rh-sw,
.kon-rh-se {
z-index: 2147483647;
}
.kon-rh-n {
top: 0;
left: var(--kon-resize-corner);
right: var(--kon-resize-corner);
height: var(--kon-resize-edge);
cursor: n-resize;
}
.kon-rh-s {
bottom: 0;
left: var(--kon-resize-corner);
right: var(--kon-resize-corner);
height: var(--kon-resize-edge);
cursor: s-resize;
}
.kon-rh-w {
top: var(--kon-resize-corner);
bottom: var(--kon-resize-corner);
left: 0;
width: var(--kon-resize-edge);
cursor: w-resize;
}
.kon-rh-e {
top: var(--kon-resize-corner);
bottom: var(--kon-resize-corner);
right: 0;
width: var(--kon-resize-edge);
cursor: e-resize;
}
.kon-rh-nw {
top: 0;
left: 0;
width: var(--kon-resize-corner);
height: var(--kon-resize-corner);
cursor: nw-resize;
}
.kon-rh-ne {
top: 0;
right: 0;
width: var(--kon-resize-corner);
height: var(--kon-resize-corner);
cursor: ne-resize;
}
.kon-rh-sw {
bottom: 0;
left: 0;
width: var(--kon-resize-corner);
height: var(--kon-resize-corner);
cursor: sw-resize;
}
.kon-rh-se {
bottom: 0;
right: 0;
width: var(--kon-resize-corner);
height: var(--kon-resize-corner);
cursor: se-resize;
}