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;
}

85
src/lib/components/ResizeHandles.svelte
View File

@@ -44,98 +44,13 @@
</script>
{#if enabled}
<!-- Edge strips. Inset by corner size so edge and corner zones do not overlap. -->
<div class="kon-rh kon-rh-n" onpointerdown={(e) => startResize(e,"North")}></div>
<div class="kon-rh kon-rh-s" onpointerdown={(e) => startResize(e,"South")}></div>
<div class="kon-rh kon-rh-w" onpointerdown={(e) => startResize(e,"West")}></div>
<div class="kon-rh kon-rh-e" onpointerdown={(e) => startResize(e,"East")}></div>
<!-- Corner hit zones, larger for easier diagonal targeting. -->
<div class="kon-rh kon-rh-nw" onpointerdown={(e) => startResize(e,"NorthWest")}></div>
<div class="kon-rh kon-rh-ne" onpointerdown={(e) => startResize(e,"NorthEast")}></div>
<div class="kon-rh kon-rh-sw" onpointerdown={(e) => startResize(e,"SouthWest")}></div>
<div class="kon-rh kon-rh-se" onpointerdown={(e) => startResize(e,"SouthEast")}></div>
{/if}
<style>
.kon-rh {
position: fixed;
z-index: 2147483646;
background: transparent;
pointer-events: auto;
/* Prevent the browser from consuming the pointerdown for its own
defaults (text selection, drag scroll) before we capture it. */
touch-action: none;
user-select: none;
-webkit-user-select: none;
}
/* Corners stack above edges so, at the 1-2 px of overlap on some
compositors, a corner click is never mistaken for an edge click. */
.kon-rh-nw,
.kon-rh-ne,
.kon-rh-sw,
.kon-rh-se {
z-index: 2147483647;
}
/* Edges */
.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;
}
/* Corners */
.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;
}
</style>