refactor(styling): dont inject styles

packages/controls/src/Controls.tsx

@@ -1,13 +1,6 @@
 import { memo, FC, useEffect, useState, PropsWithChildren } from 'react';
 import cc from 'classcat';
-import {
-  useStore,
-  useStoreApi,
-  useReactFlow,
-  ReactFlowState,
-  Panel,
-} from '@react-flow/core';
-import { injectStyle } from '@react-flow/css-utils';
+import { useStore, useStoreApi, useReactFlow, ReactFlowState, Panel } from '@react-flow/core';
 
 import PlusIcon from './Icons/Plus';
 import MinusIcon from './Icons/Minus';
@@ -15,14 +8,10 @@ import FitviewIcon from './Icons/FitView';
 import LockIcon from './Icons/Lock';
 import UnlockIcon from './Icons/Unlock';
 import ControlButton from './ControlButton';
-import baseStyle from './style';
 
 import { ControlProps } from './types';
 
-injectStyle(baseStyle);
-
-const isInteractiveSelector = (s: ReactFlowState) =>
-  s.nodesDraggable && s.nodesConnectable && s.elementsSelectable;
+const isInteractiveSelector = (s: ReactFlowState) => s.nodesDraggable && s.nodesConnectable && s.elementsSelectable;
 
 const Controls: FC<PropsWithChildren<ControlProps>> = ({
   style,
@@ -77,11 +66,7 @@ const Controls: FC<PropsWithChildren<ControlProps>> = ({
   };
 
   return (
-    <Panel
-      className={cc(['react-flow__controls', className])}
-      position={position}
-      style={style}
-    >
+    <Panel className={cc(['react-flow__controls', className])} position={position} style={style}>
       {showZoom && (
         <>
           <ControlButton

packages/controls/src/style.css

@@ -0,0 +1,28 @@
+.react-flow__controls {
+  box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.08);
+
+  &-button {
+    border: none;
+    background: #fefefe;
+    border-bottom: 1px solid #eee;
+    box-sizing: content-box;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 16px;
+    height: 16px;
+    cursor: pointer;
+    user-select: none;
+    padding: 5px;
+
+    &:hover {
+      background: #f4f4f4;
+    }
+
+    svg {
+      width: 100%;
+      max-width: 12px;
+      max-height: 12px;
+    }
+  }
+}

packages/controls/src/style.ts

@@ -1,31 +0,0 @@
-const style = `
-.react-flow__controls {
-  box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.08);
-}
-
-.react-flow__controls-button {
-  border: none;
-  background: #fefefe;
-  border-bottom: 1px solid #eee;
-  box-sizing: content-box;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  width: 16px;
-  height: 16px;
-  cursor: pointer;
-  user-select: none;
-  padding: 5px;
-}
-
-.react-flow__controls-button svg {
-  width: 100%;
-  max-width: 12px;
-  max-height: 12px;
-}
-
-.react-flow__controls-button:hover {
-  background: #f4f4f4;
-}`;
-
-export default style;