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/container/FlowRenderer/index.tsx

@@ -9,6 +9,7 @@ import UserSelection from '../../components/UserSelection';
 import NodesSelection from '../../components/NodesSelection';
 
 import { ReactFlowState } from '../../types';
+import { containerStyle } from '../../styles';
 
 export type FlowRendererProps = Omit<
   GraphViewProps,
@@ -104,13 +105,14 @@ const FlowRenderer = ({
         />
       )}
       <div
-        className="react-flow__pane react-flow__container"
+        className="react-flow__pane"
         onClick={onClick}
         onMouseEnter={onPaneMouseEnter}
         onMouseMove={onPaneMouseMove}
         onMouseLeave={onPaneMouseLeave}
         onContextMenu={onContextMenu}
         onWheel={onWheel}
+        style={containerStyle}
       />
     </ZoomPane>
   );

packages/core/src/container/NodeRenderer/index.tsx

@@ -3,6 +3,7 @@ import shallow from 'zustand/shallow';
 
 import useVisibleNodes from '../../hooks/useVisibleNodes';
 import { useStore } from '../../store';
+import { containerStyle } from '../../styles';
 import { NodeMouseHandler, NodeTypesWrapped, Position, ReactFlowState, WrapNodeProps } from '../../types';
 import { internalsSymbol } from '../../utils';
 
@@ -61,7 +62,7 @@ const NodeRenderer = (props: NodeRendererProps) => {
   }, []);
 
   return (
-    <div className="react-flow__nodes react-flow__container">
+    <div className="react-flow__nodes" style={containerStyle}>
       {nodes.map((node) => {
         let nodeType = node.type || 'default';
 

packages/core/src/container/ReactFlow/index.tsx

@@ -1,5 +1,6 @@
-import React, { forwardRef, useId } from 'react';
+import React, { CSSProperties, forwardRef, useId } from 'react';
 import cc from 'classcat';
+import { injectStyle } from '@react-flow/css-utils';
 
 import Attribution from '../../components/Attribution';
 import { BezierEdge, SmoothStepEdge, StepEdge, StraightEdge, SimpleBezierEdge } from '../../components/Edges';
@@ -8,9 +9,9 @@ import InputNode from '../../components/Nodes/InputNode';
 import OutputNode from '../../components/Nodes/OutputNode';
 import SelectionListener from '../../components/SelectionListener';
 import StoreUpdater from '../../components/StoreUpdater';
+import baseStyle from '../../styles/base';
 
-import '../../style.css';
-import '../../theme-default.css';
+injectStyle(baseStyle);
 
 import {
   ConnectionLineType,
@@ -48,6 +49,13 @@ const defaultEdgeTypes: EdgeTypes = {
 const initSnapGrid: [number, number] = [15, 15];
 const initDefaultViewport: Viewport = { x: 0, y: 0, zoom: 1 };
 
+const wrapperStyle: CSSProperties = {
+  width: '100%',
+  height: '100%',
+  position: 'relative',
+  overflow: 'hidden',
+};
+
 const ReactFlow = forwardRef<ReactFlowRefType, ReactFlowProps>(
   (
     {
@@ -143,6 +151,7 @@ const ReactFlow = forwardRef<ReactFlowRefType, ReactFlowProps>(
       defaultEdgeOptions,
       elevateEdgesOnSelect = false,
       disableKeyboardA11y = false,
+      style,
       ...rest
     },
     ref
@@ -152,7 +161,7 @@ const ReactFlow = forwardRef<ReactFlowRefType, ReactFlowProps>(
     const rfId = useId();
 
     return (
-      <div {...rest} ref={ref} className={cc(['react-flow', className])}>
+      <div {...rest} style={{ ...style, ...wrapperStyle }} ref={ref} className={cc(['react-flow', className])}>
         <Wrapper>
           <GraphView
             onInit={onInit}

packages/core/src/container/ZoomPane/index.tsx

@@ -9,6 +9,7 @@ import useResizeHandler from '../../hooks/useResizeHandler';
 import { useStore, useStoreApi } from '../../store';
 import { Viewport, PanOnScrollMode, ReactFlowState } from '../../types';
 import { FlowRendererProps } from '../FlowRenderer';
+import { containerStyle } from '../../styles';
 
 type ZoomPaneProps = Omit<
   FlowRendererProps,
@@ -253,7 +254,7 @@ const ZoomPane = ({
   ]);
 
   return (
-    <div className="react-flow__renderer react-flow__container" ref={zoomPane}>
+    <div className="react-flow__renderer" ref={zoomPane} style={containerStyle}>
       {children}
     </div>
   );