refactor(styling): use css for default styles (#259)

* refactor(minimap): use css for default styles

* refactor(controls): use css for default styles

* refactor(background): use css for default styles

* refactor(edges): add edge type class name

* refactor(nodes): use css for default styles

* refactor(outputnode): add display name

* refactor(wrapnode): cleanup

* refactor(rollup): minimize css for prod build

* refactor(additional-comps): extract css

* test(graphs): adjust for new markup

src/additional-components/Background/index.tsx

@@ -1,10 +1,12 @@
-import React, { memo, HTMLAttributes, CSSProperties } from 'react';
+import React, { memo, HTMLAttributes } from 'react';
 import classnames from 'classnames';
 
 import { useStoreState } from '../../store/hooks';
 import { BackgroundVariant } from '../../types';
 import { createGridLinesPath, createGridDotsPath } from './utils';
 
+import './style.css';
+
 interface BackgroundProps extends HTMLAttributes<SVGElement> {
   variant?: BackgroundVariant;
   gap?: number;
@@ -12,19 +14,13 @@ interface BackgroundProps extends HTMLAttributes<SVGElement> {
   size?: number;
 }
 
-const baseStyles: CSSProperties = {
-  position: 'absolute',
-  top: 0,
-  left: 0,
-};
-
 const defaultColors = {
   [BackgroundVariant.Dots]: '#999',
   [BackgroundVariant.Lines]: '#eee',
 };
 
 const Background = memo(
-  ({ variant = BackgroundVariant.Dots, gap = 24, size = 0.5, color, style = {}, className = '' }: BackgroundProps) => {
+  ({ variant = BackgroundVariant.Dots, gap = 24, size = 0.5, color, style, className }: BackgroundProps) => {
     const width = useStoreState((s) => s.width);
     const height = useStoreState((s) => s.height);
     const [x, y, scale] = useStoreState((s) => s.transform);
@@ -42,7 +38,7 @@ const Background = memo(
     const stroke = isLines ? bgColor : 'none';
 
     return (
-      <svg width={width} height={height} style={{ ...baseStyles, ...style }} className={bgClasses}>
+      <svg width={width} height={height} style={style} className={bgClasses}>
         <path fill={fill} stroke={stroke} strokeWidth={size} d={path} />
       </svg>
     );

src/additional-components/Background/style.css

@@ -0,0 +1,5 @@
+.react-flow__background {
+  position: absolute;
+  top: 0;
+  left: 0;
+}