refactor(styles): move styles for additional components into their own packages

packages/controls/src/Controls.tsx

@@ -15,6 +15,8 @@ import UnlockIcon from './Icons/Unlock';
 
 import { ControlProps, ControlButtonProps } from './types';
 
+import './style.css';
+
 export const ControlButton: FC<PropsWithChildren<ControlButtonProps>> = ({
   children,
   className,

packages/controls/src/style.css

@@ -0,0 +1,32 @@
+.react-flow__controls {
+  box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.08);
+  position: absolute;
+  z-index: 5;
+  bottom: 20px;
+  left: 15px;
+
+  &-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;
+
+    svg {
+      width: 100%;
+      max-width: 12px;
+      max-height: 12px;
+    }
+
+    &:hover {
+      background: #f4f4f4;
+    }
+  }
+}

packages/core/src/style.css

@@ -144,32 +144,6 @@
   pointer-events: all;
 }
 
-/* additional components */
-
-.react-flow__controls {
-  position: absolute;
-  z-index: 5;
-  bottom: 20px;
-  left: 15px;
-
-  &-button {
-    width: 24px;
-    height: 24px;
-    border: none;
-
-    svg {
-      width: 100%;
-    }
-  }
-}
-
-.react-flow__minimap {
-  position: absolute;
-  z-index: 5;
-  bottom: 20px;
-  right: 15px;
-}
-
 .react-flow__attribution {
   font-size: 10px;
   position: absolute;

packages/core/src/theme-default.css

@@ -98,34 +98,3 @@
     cursor: crosshair;
   }
 }
-
-.react-flow__minimap {
-  background-color: #fff;
-}
-
-.react-flow__controls {
-  box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.08);
-
-  &-button {
-    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;
-
-    svg {
-      max-width: 12px;
-      max-height: 12px;
-    }
-
-    &:hover {
-      background: #f4f4f4;
-    }
-  }
-}

packages/minimap/src/MiniMap.tsx

@@ -13,6 +13,8 @@ import MiniMapNode from './MiniMapNode';
 import MiniMapDrag from './MiniMapDrag';
 import { MiniMapProps, GetMiniMapNodeAttribute } from './types';
 
+import './style.css';
+
 declare const window: any;
 
 const defaultWidth = 200;

packages/minimap/src/style.css

@@ -0,0 +1,7 @@
+.react-flow__minimap {
+  background-color: #fff;
+  position: absolute;
+  z-index: 5;
+  bottom: 20px;
+  right: 15px;
+}