feat(styles): one stylesheet source for react and svelte (#3350)

* feat(styles): create stylesheets for react and svelte based on one source

* refactor(styling): cleanup

* refactor(postcss): share a config

* refactor(postcss): replace env hack with env file

packages/svelte/src/lib/container/EdgeRenderer/EdgeRenderer.svelte

@@ -30,7 +30,5 @@
     position: absolute;
     top: 0;
     left: 0;
-    pointer-events: none;
-    overflow: visible;
   }
 </style>

packages/svelte/src/lib/container/NodeRenderer/NodeRenderer.svelte

@@ -79,7 +79,8 @@
   .svelte-flow__nodes {
     width: 100%;
     height: 100%;
-    pointer-events: none;
-    transform-origin: 0 0;
+    position: absolute;
+    left: 0;
+    top: 0;
   }
 </style>

packages/svelte/src/lib/container/Pane/Pane.svelte

@@ -203,20 +203,10 @@
 
 <style>
   .svelte-flow__pane {
-    cursor: grab;
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
-    z-index: 1;
-  }
-
-  .selection {
-    cursor: pointer;
-  }
-
-  .dragging {
-    cursor: grabbing;
   }
 </style>

packages/svelte/src/lib/container/Panel/Panel.svelte

@@ -16,32 +16,3 @@
 <div class={cc(['svelte-flow__panel', className, ...positionClasses])} {style} {...$$restProps}>
   <slot />
 </div>
-
-<style>
-  .svelte-flow__panel {
-    position: absolute;
-    z-index: 5;
-    margin: 15px;
-  }
-
-  .svelte-flow__panel.top {
-    top: 0;
-  }
-
-  .svelte-flow__panel.bottom {
-    bottom: 0;
-  }
-
-  .svelte-flow__panel.left {
-    left: 0;
-  }
-
-  .svelte-flow__panel.right {
-    right: 0;
-  }
-
-  .svelte-flow__panel.center {
-    left: 50%;
-    transform: translateX(-50%);
-  }
-</style>

packages/svelte/src/lib/container/SvelteFlow/SvelteFlow.svelte

@@ -175,25 +175,10 @@
     background-color: var(--background-color, var(--background-color-default));
   }
 
-  .svelte-flow :global(.svelte-flow__node-default),
-  .svelte-flow :global(.svelte-flow__node-input),
-  .svelte-flow :global(.svelte-flow__node-output) {
-    padding: 10px;
-  }
-
-  .svelte-flow__edgelabel-renderer {
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    pointer-events: none;
-    user-select: none;
-  }
-
   :root {
     --background-color-default: #fff;
     --background-pattern-color-default: #ddd;
 
-    --minimap-background-color-default: #fff;
     --minimap-mask-color-default: rgb(240, 240, 240, 0.6);
     --minimap-mask-stroke-color-default: none;
     --minimap-mask-stroke-width-default: 1;
@@ -203,18 +188,5 @@
     --controls-button-color-default: inherit;
     --controls-button-color-hover-default: inherit;
     --controls-button-border-color-default: #eee;
-
-    --edge-color-default: #cfcfcf;
-    --edge-color-selected-default: #555;
-
-    --node-color-default: inherit;
-    --node-border-color-default: #1a192b;
-    --node-background-color-default: #fff;
-    --node-shadow-color-selected-default: #1a192b;
-
-    --handle-background-color-default: #1a192b;
-    --handle-border-color-default: #fff;
-
-    --connection-line-color-default: #b1b1b7;
   }
 </style>

packages/svelte/src/lib/container/Viewport/Viewport.svelte

@@ -16,10 +16,7 @@
     width: 100%;
     height: 100%;
     position: absolute;
-    transform-origin: 0 0;
     top: 0;
     left: 0;
-    z-index: 2;
-    pointer-events: none;
   }
 </style>