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/components/Attribution/Attribution.svelte

@@ -24,17 +24,3 @@
     </a>
   </Panel>
 {/if}
-
-<style>
-  :global(.svelte-flow__panel.svelte-flow__attribution) {
-    font-size: 10px;
-    background: rgba(255, 255, 255, 0.5);
-    padding: 2px 3px;
-    margin: 0;
-  }
-
-  :global(.svelte-flow__attribution) a {
-    text-decoration: none;
-    color: #999;
-  }
-</style>

packages/svelte/src/lib/components/BaseEdge/BaseEdge.svelte

@@ -47,30 +47,3 @@
     </div>
   </EdgeLabelRenderer>
 {/if}
-
-<style>
-  .svelte-flow__edge-label {
-    position: absolute;
-    background: white;
-  }
-
-  .svelte-flow__edge-path {
-    stroke: var(--edge-color, var(--edge-color-default));
-    stroke-width: 1;
-  }
-
-  :global(.selected) .svelte-flow__edge-path {
-    stroke: var(--edge-color-selected, var(--edge-color-selected-default));
-  }
-
-  :global(.animated) .svelte-flow__edge-path {
-    stroke-dasharray: 5;
-    animation: dashdraw 0.5s linear infinite;
-  }
-
-  @keyframes dashdraw {
-    from {
-      stroke-dashoffset: 10;
-    }
-  }
-</style>

packages/svelte/src/lib/components/ConnectionLine/ConnectionLine.svelte

@@ -13,27 +13,3 @@
     </g>
   </svg>
 {/if}
-
-<style>
-  .svelte-flow__connectionline {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    pointer-events: none;
-    overflow: visible;
-    z-index: 1001;
-  }
-
-  .svelte-flow__connection {
-    pointer-events: none;
-  }
-
-  .svelte-flow__edge-path,
-  .svelte-flow__connection-path {
-    stroke: var(--connection-line-color, var(--connection-line-color-default));
-    stroke-width: 1;
-    fill: none;
-  }
-</style>

packages/svelte/src/lib/components/EdgeWrapper/EdgeWrapper.svelte

@@ -89,10 +89,3 @@
     markerEnd={markerEndUrl}
   />
 </g>
-
-<style>
-  .svelte-flow__edge {
-    pointer-events: visibleStroke;
-    cursor: pointer;
-  }
-</style>

packages/svelte/src/lib/components/Handle/Handle.svelte

@@ -93,6 +93,7 @@
   class:connectablestart={isConnectableStart}
   class:connectableend={isConnectableEnd}
   class:connectable={isConnectable}
+  class:connectionindicator={isConnectable}
   on:mousedown={onPointerDown}
   on:touchstart={onPointerDown}
   {style}
@@ -101,46 +102,3 @@
 >
   <slot />
 </div>
-
-<style>
-  .svelte-flow__handle {
-    position: absolute;
-    pointer-events: none;
-    min-width: 5px;
-    min-height: 5px;
-    width: 6px;
-    height: 6px;
-    background: var(--handle-background-color, var(--handle-background-color-default));
-    border: 1px solid var(--handle-border-color, var(--handle-border-color-default));
-    border-radius: 100%;
-  }
-
-  .connectable {
-    pointer-events: all;
-    cursor: crosshair;
-  }
-
-  .bottom {
-    top: 100%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-  }
-
-  .top {
-    left: 50%;
-    top: 0;
-    transform: translate(-50%, -50%);
-  }
-
-  .left {
-    top: 50%;
-    left: 0;
-    transform: translate(-50%, -50%);
-  }
-
-  .right {
-    top: 50%;
-    left: 100%;
-    transform: translate(-50%, -50%);
-  }
-</style>

packages/svelte/src/lib/components/NodeWrapper/NodeWrapper.svelte

@@ -75,6 +75,8 @@
 
     dispatchEvent('nodeclick');
   }
+
+  // @todo: add selectable state
 </script>
 
 <!-- svelte-ignore a11y-click-events-have-key-events -->
@@ -95,6 +97,7 @@
   class:selected
   class:draggable
   class:connectable
+  class:selectable
   class:parent={isParent}
   style:z-index={zIndex}
   style:transform="translate({positionOrigin?.x ?? 0}px, {positionOrigin?.y ?? 0}px)"
@@ -123,33 +126,3 @@
     on:connectend
   />
 </div>
-
-<style>
-  .svelte-flow__node {
-    border-radius: 3px;
-    color: var(--node-color, var(--node-color-default));
-    text-align: center;
-    border-width: 1px;
-    border-style: solid;
-    border-color: var(--node-border-color, var(--node-border-color-default));
-    background-color: var(--node-background-color, var(--node-background-color-default));
-    position: absolute;
-    pointer-events: none;
-    user-select: none;
-  }
-
-  .draggable {
-    cursor: grab;
-    pointer-events: all;
-  }
-
-  .selected {
-    outline: none;
-    box-shadow: 0 0 0 0.5px
-      var(--node-shadow-color-selected, var(--node-shadow-color-selected-default));
-  }
-
-  .dragging {
-    cursor: grabbing;
-  }
-</style>

packages/svelte/src/lib/components/Selection/Selection.svelte

@@ -18,13 +18,5 @@
     position: absolute;
     top: 0;
     left: 0;
-    background: rgba(0, 89, 220, 0.08);
-    border: 1px dotted rgba(0, 89, 220, 0.8);
-    z-index: 6;
-  }
-
-  .svelte-flow__selection:focus,
-  .svelte-flow__selection:focus-visible {
-    outline: none;
   }
 </style>