Refactor: CSS handling (#2344)

* refactor(css): only load base styles, add css task, cleanup exports
* style(base): add edge label bg
* refactor(css): use css-utils
* feat(core): add Panel component
* refactor(background): cleanup
* refactor(css-handling): cleanup

packages/core/src/components/Attribution/index.tsx

@@ -1,11 +1,11 @@
 import React from 'react';
-import cc from 'classcat';
 
-import { AttributionPosition, ProOptions } from '../../types';
+import Panel from '../Panel';
+import { PanelPosition, ProOptions } from '../../types';
 
 type AttributionProps = {
   proOptions?: ProOptions;
-  position?: AttributionPosition;
+  position?: PanelPosition;
 };
 
 function Attribution({ proOptions, position = 'bottom-right' }: AttributionProps) {
@@ -13,17 +13,16 @@ function Attribution({ proOptions, position = 'bottom-right' }: AttributionProps
     return null;
   }
 
-  const positionClasses = `${position}`.split('-');
-
   return (
-    <div
-      className={cc(['react-flow__attribution', ...positionClasses])}
+    <Panel
+      position={position}
+      className="react-flow__attribution"
       data-message="Please only hide this attribution when you are subscribed to React Flow Pro: https://pro.reactflow.dev"
     >
       <a href="https://reactflow.dev" target="_blank" rel="noopener noreferrer" aria-label="React Flow attribution">
         React Flow
       </a>
-    </div>
+    </Panel>
   );
 }
 

packages/core/src/components/ConnectionLine/index.tsx

@@ -113,7 +113,7 @@ export default ({
 
   return (
     <g className="react-flow__connection">
-      <path d={dAttr} className="react-flow__connection-path" style={connectionLineStyle} />
+      <path d={dAttr} fill="none" className="react-flow__connection-path" style={connectionLineStyle} />
     </g>
   );
 };

packages/core/src/components/Edges/BaseEdge.tsx

@@ -32,7 +32,14 @@ export default ({
 
   return (
     <>
-      <path style={style} d={path} className="react-flow__edge-path" markerEnd={markerEnd} markerStart={markerStart} />
+      <path
+        style={style}
+        d={path}
+        fill="none"
+        className="react-flow__edge-path"
+        markerEnd={markerEnd}
+        markerStart={markerStart}
+      />
       {text}
     </>
   );

packages/core/src/components/Panel/index.tsx

@@ -0,0 +1,21 @@
+import React, { HTMLAttributes, ReactNode } from 'react';
+import cc from 'classcat';
+
+import { PanelPosition } from '../../types';
+
+export type PanelProps = HTMLAttributes<HTMLDivElement> & {
+  position: PanelPosition;
+  children: ReactNode;
+};
+
+function Panel({ position, children, className, ...rest }: PanelProps) {
+  const positionClasses = `${position}`.split('-');
+
+  return (
+    <div className={cc(['react-flow__panel', className, ...positionClasses])} {...rest}>
+      {children}
+    </div>
+  );
+}
+
+export default Panel;