refactor(styling): dont inject styles

packages/minimap/README.md

@@ -0,0 +1,10 @@
+# @react-flow/minimap
+
+Mini map component for React Flow.
+
+## Installation 
+
+```sh 
+npm install @react-flow/minimap
+```
+

packages/minimap/package.json

@@ -5,14 +5,24 @@
   "main": "dist/react-flow-minimap.cjs.js",
   "module": "dist/react-flow-minimap.esm.js",
   "license": "MIT",
+  "scripts": {
+    "build": "postcss src/*.css --config ../../postcss.config.json --dir dist"
+  },
   "dependencies": {
     "@react-flow/core": "^11.0.0",
-    "@react-flow/css-utils": "^11.0.0",
     "classcat": "^5.0.3",
     "zustand": "^4.0.0"
   },
   "peerDependencies": {
     "react": ">=18",
     "react-dom": ">=18"
+  },
+  "devDependencies": {
+    "autoprefixer": "^10.4.8",
+    "postcss": "^8.4.16",
+    "postcss-cli": "^10.0.0",
+    "postcss-combine-duplicated-selectors": "^10.0.3",
+    "postcss-import": "^14.1.0",
+    "postcss-nested": "^5.0.6"
   }
 }

packages/minimap/src/MiniMap.tsx

@@ -2,22 +2,11 @@
 import { memo, useId } from 'react';
 import cc from 'classcat';
 import shallow from 'zustand/shallow';
-import {
-  useStore,
-  getRectOfNodes,
-  ReactFlowState,
-  Rect,
-  Panel,
-  getBoundsOfRects,
-} from '@react-flow/core';
-import { injectStyle } from '@react-flow/css-utils';
+import { useStore, getRectOfNodes, ReactFlowState, Rect, Panel, getBoundsOfRects } from '@react-flow/core';
 
 import MiniMapNode from './MiniMapNode';
-import baseStyle from './style';
 import { MiniMapProps, GetMiniMapNodeAttribute } from './types';
 
-injectStyle(baseStyle);
-
 declare const window: any;
 
 const defaultWidth = 200;
@@ -35,15 +24,11 @@ const selector = (s: ReactFlowState) => {
   return {
     nodes: nodes.filter((node) => !node.hidden && node.width && node.height),
     viewBB,
-    boundingRect:
-      nodes.length > 0
-        ? getBoundsOfRects(getRectOfNodes(nodes), viewBB)
-        : viewBB,
+    boundingRect: nodes.length > 0 ? getBoundsOfRects(getRectOfNodes(nodes), viewBB) : viewBB,
   };
 };
 
-const getAttrFunction = (func: any): GetMiniMapNodeAttribute =>
-  func instanceof Function ? func : () => func;
+const getAttrFunction = (func: any): GetMiniMapNodeAttribute => (func instanceof Function ? func : () => func);
 
 const ARIA_LABEL_KEY = 'react-flow__minimap-desc';
 
@@ -75,18 +60,11 @@ function MiniMap({
   const y = boundingRect.y - (viewHeight - boundingRect.height) / 2 - offset;
   const width = viewWidth + offset * 2;
   const height = viewHeight + offset * 2;
-  const shapeRendering =
-    typeof window === 'undefined' || !!window.chrome
-      ? 'crispEdges'
-      : 'geometricPrecision';
+  const shapeRendering = typeof window === 'undefined' || !!window.chrome ? 'crispEdges' : 'geometricPrecision';
   const labelledBy = `${ARIA_LABEL_KEY}-${minimapId}`;
 
   return (
-    <Panel
-      position={position}
-      style={style}
-      className={cc(['react-flow__minimap', className])}
-    >
+    <Panel position={position} style={style} className={cc(['react-flow__minimap', className])}>
       <svg
         width={elementWidth}
         height={elementHeight}
@@ -115,12 +93,8 @@ function MiniMap({
         })}
         <path
           className="react-flow__minimap-mask"
-          d={`M${x - offset},${y - offset}h${width + offset * 2}v${
-            height + offset * 2
-          }h${-width - offset * 2}z
-        M${viewBB.x},${viewBB.y}h${viewBB.width}v${
-            viewBB.height
-          }h${-viewBB.width}z`}
+          d={`M${x - offset},${y - offset}h${width + offset * 2}v${height + offset * 2}h${-width - offset * 2}z
+        M${viewBB.x},${viewBB.y}h${viewBB.width}v${viewBB.height}h${-viewBB.width}z`}
           fill={maskColor}
           fillRule="evenodd"
         />

packages/minimap/src/style.css

@@ -1,6 +1,3 @@
-const style = `
 .react-flow__minimap {
   background-color: #fff;
-}`;
-
-export default style;
+}