From 7b61ea1fd035e6fd0ee0c419037dd571d736e127 Mon Sep 17 00:00:00 2001
From: Diego Imbert <diegoimbert@protonmail.com>
Date: Thu, 10 Apr 2025 16:40:53 +0200
Subject: [PATCH] @apply now requires a reference to tailwind css file

---
 frontend/src/lib/components/Editor.svelte       |  2 ++
 frontend/src/lib/components/EditorBar.svelte    |  2 ++
 .../lib/components/FlowBuilderTutorials.svelte  |  2 ++
 frontend/src/lib/components/MapResult.svelte    |  2 ++
 frontend/src/lib/components/SimpleEditor.svelte |  1 +
 frontend/src/lib/components/Summary.svelte      |  1 +
 .../components/inputs/AppQuillEditor.svelte     |  1 +
 .../inputs/currency/CurrencyInput.svelte        |  7 ++++---
 .../apps/editor/AppEditorTutorial.svelte        |  1 +
 .../InlineScriptsPanelList.svelte               |  1 +
 .../lib/components/common/drawer/Drawer.svelte  |  5 ++++-
 .../src/lib/components/graph/FlowGraphV2.svelte | 17 +++++++++--------
 .../components/meltComponents/Popover.svelte    |  1 +
 .../propertyPicker/ObjectViewer.svelte          |  1 +
 14 files changed, 32 insertions(+), 12 deletions(-)

diff --git a/frontend/src/lib/components/Editor.svelte b/frontend/src/lib/components/Editor.svelte
index d42634bbc3..9b1965d8b6 100644
--- a/frontend/src/lib/components/Editor.svelte
+++ b/frontend/src/lib/components/Editor.svelte
@@ -1425,6 +1425,8 @@
 {/if}
 
 <style global lang="postcss">
+	@reference "../assets/app.css";
+
 	.editor {
 		@apply p-0;
 	}
diff --git a/frontend/src/lib/components/EditorBar.svelte b/frontend/src/lib/components/EditorBar.svelte
index 1ee3f964b5..773c9125e3 100644
--- a/frontend/src/lib/components/EditorBar.svelte
+++ b/frontend/src/lib/components/EditorBar.svelte
@@ -805,6 +805,8 @@ JsonNode ${windmillPathToCamelCaseName(path)} = JsonNode.Parse(await client.GetS
 </div>
 
 <style lang="postcss">
+	@reference "../assets/app.css";
+
 	span.green {
 		@apply text-green-600 animate-[pulse_5s_ease-in-out_infinite];
 	}
diff --git a/frontend/src/lib/components/FlowBuilderTutorials.svelte b/frontend/src/lib/components/FlowBuilderTutorials.svelte
index 3f483a4ff9..d383dcb5be 100644
--- a/frontend/src/lib/components/FlowBuilderTutorials.svelte
+++ b/frontend/src/lib/components/FlowBuilderTutorials.svelte
@@ -83,6 +83,8 @@
 </ConfirmationModal>
 
 <style global>
+	@reference "../assets/app.css";
+
 	.driver-popover-title {
 		@apply leading-6 text-primary text-base;
 	}
diff --git a/frontend/src/lib/components/MapResult.svelte b/frontend/src/lib/components/MapResult.svelte
index 60a33c8a66..85b8116427 100644
--- a/frontend/src/lib/components/MapResult.svelte
+++ b/frontend/src/lib/components/MapResult.svelte
@@ -135,6 +135,8 @@
 <div bind:this={mapElement} class="w-full h-[300px]"></div>
 
 <style global lang="postcss">
+	@reference "../assets/app.css";
+
 	.ol-overlaycontainer-stopevent {
 		@apply flex flex-col justify-start items-end;
 	}
diff --git a/frontend/src/lib/components/SimpleEditor.svelte b/frontend/src/lib/components/SimpleEditor.svelte
index 8261e78f95..9a87cd96d5 100644
--- a/frontend/src/lib/components/SimpleEditor.svelte
+++ b/frontend/src/lib/components/SimpleEditor.svelte
@@ -473,6 +473,7 @@
 {/if}
 
 <style lang="postcss">
+	@reference "../assets/app.css";
 	.editor {
 		@apply rounded-lg p-0;
 	}
diff --git a/frontend/src/lib/components/Summary.svelte b/frontend/src/lib/components/Summary.svelte
index 208ed0be4f..f39163c2cc 100644
--- a/frontend/src/lib/components/Summary.svelte
+++ b/frontend/src/lib/components/Summary.svelte
@@ -27,6 +27,7 @@
 </div>
 
 <style lang="postcss" global>
+	@reference "../assets/app.css";
 	.app-title {
 		@apply !block !text-sm !w-full !p-1 !px-2 !rounded !border-0 !font-semibold;
 	}
diff --git a/frontend/src/lib/components/apps/components/inputs/AppQuillEditor.svelte b/frontend/src/lib/components/apps/components/inputs/AppQuillEditor.svelte
index c9e8f57ef4..b2fd890b65 100644
--- a/frontend/src/lib/components/apps/components/inputs/AppQuillEditor.svelte
+++ b/frontend/src/lib/components/apps/components/inputs/AppQuillEditor.svelte
@@ -101,6 +101,7 @@
 {/if}
 
 <style lang="postcss">
+	@reference "../../../../assets/app.css";
 	:global(.ql-toolbar) {
 		@apply rounded-t-md;
 	}
diff --git a/frontend/src/lib/components/apps/components/inputs/currency/CurrencyInput.svelte b/frontend/src/lib/components/apps/components/inputs/currency/CurrencyInput.svelte
index 017b326500..695703c2c7 100644
--- a/frontend/src/lib/components/apps/components/inputs/currency/CurrencyInput.svelte
+++ b/frontend/src/lib/components/apps/components/inputs/currency/CurrencyInput.svelte
@@ -182,11 +182,11 @@
 		class="
 			{inputClasses?.formatted ?? DEFAULT_CLASS_FORMATTED}
 			{isNegativeAllowed && !isZero && !isNegative
-			? inputClasses?.formattedPositive ?? DEFAULT_CLASS_FORMATTED_POSITIVE
+			? (inputClasses?.formattedPositive ?? DEFAULT_CLASS_FORMATTED_POSITIVE)
 			: ''}
-			{isZero ? inputClasses?.formattedZero ?? DEFAULT_CLASS_FORMATTED_ZERO : ''}
+			{isZero ? (inputClasses?.formattedZero ?? DEFAULT_CLASS_FORMATTED_ZERO) : ''}
 			{isNegativeAllowed && isNegative
-			? inputClasses?.formattedNegative ?? DEFAULT_CLASS_FORMATTED_NEGATIVE
+			? (inputClasses?.formattedNegative ?? DEFAULT_CLASS_FORMATTED_NEGATIVE)
 			: ''}
 		"
 		style={style ? style : noColor ? (darkMode ? 'color: white;' : 'color: black;') : ''}
@@ -203,6 +203,7 @@
 </div>
 
 <style lang="postcss">
+	@reference "../../../../../assets/app.css";
 	input.currencyInput__formatted {
 		border: 1px solid #e2e2e2;
 		padding: 10px;
diff --git a/frontend/src/lib/components/apps/editor/AppEditorTutorial.svelte b/frontend/src/lib/components/apps/editor/AppEditorTutorial.svelte
index 3d99aa518e..c6007e4380 100644
--- a/frontend/src/lib/components/apps/editor/AppEditorTutorial.svelte
+++ b/frontend/src/lib/components/apps/editor/AppEditorTutorial.svelte
@@ -121,6 +121,7 @@
 </ConfirmationModal>
 
 <style global>
+	@reference "../../../assets/app.css";
 	.driver-popover-title {
 		@apply leading-6 text-primary text-base;
 	}
diff --git a/frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptsPanelList.svelte b/frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptsPanelList.svelte
index 1d207e6a7a..34cccf480e 100644
--- a/frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptsPanelList.svelte
+++ b/frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptsPanelList.svelte
@@ -252,6 +252,7 @@
 <AppTutorials bind:this={appTutorials} on:reload />
 
 <style lang="postcss">
+	@reference "../../../../assets/app.css";
 	.panel-item {
 		@apply border flex gap-1 truncate font-normal justify-between w-full items-center py-1 px-2 rounded-sm duration-200;
 	}
diff --git a/frontend/src/lib/components/common/drawer/Drawer.svelte b/frontend/src/lib/components/common/drawer/Drawer.svelte
index 08fd1a2e2b..52bf8bed53 100644
--- a/frontend/src/lib/components/common/drawer/Drawer.svelte
+++ b/frontend/src/lib/components/common/drawer/Drawer.svelte
@@ -94,6 +94,7 @@
 </ConditionalPortal>
 
 <style lang="postcss">
+	@reference "../../../assets/app.css";
 	.drawer {
 		position: fixed;
 		top: 0;
@@ -140,7 +141,9 @@
 		width: 100%;
 		@apply bg-surface;
 		z-index: 3;
-		transition: transform var(--duration) ease, max-width var(--duration) ease,
+		transition:
+			transform var(--duration) ease,
+			max-width var(--duration) ease,
 			max-height var(--duration) ease;
 		height: 100%;
 	}
diff --git a/frontend/src/lib/components/graph/FlowGraphV2.svelte b/frontend/src/lib/components/graph/FlowGraphV2.svelte
index dca1971fff..3d0674c002 100644
--- a/frontend/src/lib/components/graph/FlowGraphV2.svelte
+++ b/frontend/src/lib/components/graph/FlowGraphV2.svelte
@@ -117,7 +117,7 @@
 	function onModulesChange(modules: FlowModule[]) {
 		computeSimplifiableFlow(
 			modules,
-			triggerContext?.simplifiedPoll ? get(triggerContext.simplifiedPoll) ?? false : false
+			triggerContext?.simplifiedPoll ? (get(triggerContext.simplifiedPoll) ?? false) : false
 		)
 	}
 
@@ -160,13 +160,13 @@
 			position: {
 				x: des.x
 					? // @ts-ignore
-					  (des.data.data.offset ?? 0) +
-					  // @ts-ignore
-					  des.x +
-					  (fullSize ? fullWidth : width) / 2 -
-					  boxSize.width / 2 -
-					  NODE.width / 2 -
-					  (width - fullWidth) / 2
+						(des.data.data.offset ?? 0) +
+						// @ts-ignore
+						des.x +
+						(fullSize ? fullWidth : width) / 2 -
+						boxSize.width / 2 -
+						NODE.width / 2 -
+						(width - fullWidth) / 2
 					: 0,
 				y: des.y || 0
 			}
@@ -436,6 +436,7 @@
 </div>
 
 <style lang="postcss">
+	@reference "../../assets/app.css";
 	:global(.svelte-flow__handle) {
 		opacity: 0;
 	}
diff --git a/frontend/src/lib/components/meltComponents/Popover.svelte b/frontend/src/lib/components/meltComponents/Popover.svelte
index df01dd838d..0bd802c9a3 100644
--- a/frontend/src/lib/components/meltComponents/Popover.svelte
+++ b/frontend/src/lib/components/meltComponents/Popover.svelte
@@ -177,6 +177,7 @@
 {/if}
 
 <style lang="postcss">
+	@reference "../../assets/app.css";
 	.close {
 		@apply absolute right-1.5 top-1.5 flex h-7 w-7 items-center justify-center rounded-full;
 		@apply text-primary  transition-colors hover:bg-surface-hover;
diff --git a/frontend/src/lib/components/propertyPicker/ObjectViewer.svelte b/frontend/src/lib/components/propertyPicker/ObjectViewer.svelte
index 3cae1962d9..6a05837ec3 100644
--- a/frontend/src/lib/components/propertyPicker/ObjectViewer.svelte
+++ b/frontend/src/lib/components/propertyPicker/ObjectViewer.svelte
@@ -247,6 +247,7 @@
 {/if}
 
 <style lang="postcss">
+	@reference "../../assets/app.css";
 	ul {
 		list-style: none;
 		@apply text-sm;