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

examples/nextjs/pages/CustomNode/ColorSelectorNode.tsx

@@ -1,12 +1,11 @@
 import React, { memo, FC, CSSProperties } from 'react';
-
 import {
   Handle,
   Position,
   NodeProps,
   Connection,
   Edge,
-} from '@react-flow/core';
+} from '@react-flow/renderer';
 
 const targetHandleStyle: CSSProperties = { background: '#555' };
 const sourceHandleStyleA: CSSProperties = { ...targetHandleStyle, top: 10 };
@@ -23,7 +22,7 @@ const ColorSelectorNode: FC<NodeProps> = ({ data, isConnectable }) => {
   return (
     <>
       <Handle
-        type='target'
+        type="target"
         position={Position.Left}
         style={targetHandleStyle}
         onConnect={onConnect}
@@ -32,15 +31,15 @@ const ColorSelectorNode: FC<NodeProps> = ({ data, isConnectable }) => {
         Custom Color Picker Node: <strong>{data.color}</strong>
       </div>
       <input
-        className='nodrag'
-        type='color'
+        className="nodrag"
+        type="color"
         onChange={data.onChange}
         defaultValue={data.color}
       />
       <Handle
-        type='source'
+        type="source"
         position={Position.Right}
-        id='a'
+        id="a"
         style={sourceHandleStyleA}
         isConnectable={isConnectable}
         onMouseDown={(e) => {
@@ -48,9 +47,9 @@ const ColorSelectorNode: FC<NodeProps> = ({ data, isConnectable }) => {
         }}
       />
       <Handle
-        type='source'
+        type="source"
         position={Position.Right}
-        id='b'
+        id="b"
         style={sourceHandleStyleB}
         isConnectable={isConnectable}
       />

examples/nextjs/pages/CustomNode/index.tsx

@@ -1,7 +1,8 @@
-import React, { useState, useEffect, MouseEvent } from 'react';
-import { ChangeEvent } from 'react';
-
-import ReactFlow, {
+import React, { useState, useEffect, MouseEvent, ChangeEvent } from 'react';
+import {
+  ReactFlow,
+  MiniMap,
+  Controls,
   addEdge,
   Node,
   ReactFlowInstance,
@@ -10,10 +11,7 @@ import ReactFlow, {
   Connection,
   useNodesState,
   useEdgesState,
-} from '@react-flow/core';
-
-import MiniMap from '@react-flow/minimap';
-import Controls from '@react-flow/controls';
+} from '@react-flow/renderer';
 
 import ColorSelectorNode from './ColorSelectorNode';