From f1ed1dcd3417f84077dba502a996b0c86f904a4d Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Tue, 21 May 2024 14:34:09 +0200
Subject: [PATCH 1/2] feat(core): add missing styles warning

---
 .../src/composables/useStylesLoadedWarning.ts   | 17 +++++++++++++++++
 packages/core/src/container/VueFlow/VueFlow.vue |  3 +++
 packages/core/src/utils/errors.ts               |  3 +++
 packages/core/src/utils/log.ts                  |  6 +++++-
 4 files changed, 28 insertions(+), 1 deletion(-)
 create mode 100644 packages/core/src/composables/useStylesLoadedWarning.ts

diff --git a/packages/core/src/composables/useStylesLoadedWarning.ts b/packages/core/src/composables/useStylesLoadedWarning.ts
new file mode 100644
index 000000000..56335dc84
--- /dev/null
+++ b/packages/core/src/composables/useStylesLoadedWarning.ts
@@ -0,0 +1,17 @@
+import { onMounted } from 'vue'
+import { ErrorCode, VueFlowError, isDev } from '../utils'
+import { useVueFlow } from './useVueFlow'
+
+export function useStylesLoadedWarning() {
+  const { emits } = useVueFlow()
+
+  onMounted(() => {
+    if (isDev()) {
+      const pane = document.querySelector('.vue-flow__pane')
+
+      if (pane && !(window.getComputedStyle(pane).zIndex === '1')) {
+        emits.error(new VueFlowError(ErrorCode.MISSING_STYLES))
+      }
+    }
+  })
+}
diff --git a/packages/core/src/container/VueFlow/VueFlow.vue b/packages/core/src/container/VueFlow/VueFlow.vue
index 709451848..097259b8a 100644
--- a/packages/core/src/container/VueFlow/VueFlow.vue
+++ b/packages/core/src/container/VueFlow/VueFlow.vue
@@ -11,6 +11,7 @@ import { useVueFlow } from '../../composables/useVueFlow'
 import { useHooks } from '../../store/hooks'
 import EdgeRenderer from '../EdgeRenderer/EdgeRenderer.vue'
 import NodeRenderer from '../NodeRenderer/NodeRenderer.vue'
+import { useStylesLoadedWarning } from '../../composables/useStylesLoadedWarning'
 
 const props = withDefaults(defineProps<FlowProps>(), {
   snapToGrid: undefined,
@@ -70,6 +71,8 @@ useHooks(emit, hooks)
 
 useOnInitHandler()
 
+useStylesLoadedWarning()
+
 // slots will be passed via provide
 // this is to avoid having to pass them down through all the components
 // as that would require a lot of boilerplate and causes significant performance drops
diff --git a/packages/core/src/utils/errors.ts b/packages/core/src/utils/errors.ts
index 84b2562a7..a40d70633 100644
--- a/packages/core/src/utils/errors.ts
+++ b/packages/core/src/utils/errors.ts
@@ -1,4 +1,5 @@
 export enum ErrorCode {
+  MISSING_STYLES = 'MISSING_STYLES',
   MISSING_VIEWPORT_DIMENSIONS = 'MISSING_VIEWPORT_DIMENSIONS',
   NODE_INVALID = 'NODE_INVALID',
   NODE_NOT_FOUND = 'NODE_NOT_FOUND',
@@ -16,6 +17,8 @@ export enum ErrorCode {
 }
 
 const messages = {
+  [ErrorCode.MISSING_STYLES]: () =>
+    `It seems that you haven't loaded the necessary styles. Please import '@vue-flow/core/dist/style.css' to ensure that the graph is rendered correctly`,
   [ErrorCode.MISSING_VIEWPORT_DIMENSIONS]: () => 'The Vue Flow parent container needs a width and a height to render the graph',
   [ErrorCode.NODE_INVALID]: (id?: string) => `Node is invalid\nNode: ${id}`,
   [ErrorCode.NODE_NOT_FOUND]: (id: string | null) => `Node not found\nNode: ${id}`,
diff --git a/packages/core/src/utils/log.ts b/packages/core/src/utils/log.ts
index baf150a94..4fc5af4e6 100644
--- a/packages/core/src/utils/log.ts
+++ b/packages/core/src/utils/log.ts
@@ -1,7 +1,11 @@
 const productionEnvs = ['production', 'prod']
 
 export function warn(message: string, ...args: any[]) {
-  if (!productionEnvs.includes(__ENV__ || '')) {
+  if (isDev()) {
     console.warn(`[Vue Flow]: ${message}`, ...args)
   }
 }
+
+export function isDev() {
+  return !productionEnvs.includes(__ENV__ || '')
+}

From 365abfdb9a4de9809ce060e102be79a46130a363 Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Tue, 21 May 2024 14:35:17 +0200
Subject: [PATCH 2/2] chore(changeset): add

---
 .changeset/fresh-wolves-melt.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/fresh-wolves-melt.md

diff --git a/.changeset/fresh-wolves-melt.md b/.changeset/fresh-wolves-melt.md
new file mode 100644
index 000000000..bd3903583
--- /dev/null
+++ b/.changeset/fresh-wolves-melt.md
@@ -0,0 +1,5 @@
+---
+"@vue-flow/core": minor
+---
+
+Add warning when style imports are missing.