refactor(styling): dont inject styles

examples/nextjs/package.json

@@ -3,8 +3,8 @@
   "version": "0.1.0",
   "private": true,
   "scripts": {
-    "dev": "yarn run copystyles && next dev",
-    "copystyles": "cp ../../packages/core/src/styles/theme-default.css ./styles/theme-default.css",
+    "dev": "next dev",
+    "copystyles": "cp ../../node_modules/@react-flow/renderer/dist/style.css ./styles/rf-style.css",
     "build": "next build",
     "start": "next start",
     "lint": "next lint"
@@ -27,6 +27,7 @@
     "eslint-config-next": "12.2.2",
     "postcss": "^8.4.16",
     "postcss-flexbugs-fixes": "^5.0.2",
+    "postcss-import": "^14.1.0",
     "postcss-nested": "^5.0.6",
     "postcss-preset-env": "^7.7.2"
   }

examples/nextjs/pages/_app.tsx

@@ -7,7 +7,7 @@ import '../styles/globals.css';
 // import '@react-flow/core/dist/theme-default.css';
 
 // this is a workaround for testing the theme. See explanation above.
-// import '../styles/theme-default.css';
+import '../styles/rf-style.css';
 
 const routes = [
   '/',

examples/nextjs/pages/index.tsx

@@ -1,20 +1,19 @@
 import React, { MouseEvent } from 'react';
 
 import {
+  MiniMap,
   ReactFlow,
+  Background,
+  BackgroundVariant,
+  Controls,
   ReactFlowProvider,
   Node,
   Edge,
   useReactFlow,
-} from '@react-flow/core';
-
-import { MiniMap } from '@react-flow/minimap';
-import { Background, BackgroundVariant } from '@react-flow/background';
-import { Controls } from '@react-flow/controls';
+} from '@react-flow/renderer';
 
 const onNodeDrag = (_: MouseEvent, node: Node) => console.log('drag', node);
-const onNodeDragStop = (_: MouseEvent, node: Node) =>
-  console.log('drag stop', node);
+const onNodeDragStop = (_: MouseEvent, node: Node) => console.log('drag stop', node);
 const onNodeClick = (_: MouseEvent, node: Node) => console.log('click', node);
 
 const initialNodes: Node[] = [

examples/nextjs/pages/theme-default.css

@@ -1,111 +0,0 @@
-.react-flow__edge {
-  &.selected,
-  &:focus,
-  &:focus-visible {
-    outline: none;
-
-    .react-flow__edge-path {
-      stroke: #555;
-    }
-  }
-
-  &.animated path {
-    stroke-dasharray: 5;
-    animation: dashdraw 0.5s linear infinite;
-  }
-
-  &.updating {
-    .react-flow__edge-path {
-      stroke: #777;
-    }
-  }
-}
-
-.react-flow__edge-path {
-  stroke: #b1b1b7;
-  stroke-width: 1;
-}
-
-.react-flow__edge-text {
-  font-size: 10px;
-}
-
-.react-flow__connection-path {
-  stroke: #b1b1b7;
-  stroke-width: 1;
-}
-
-.react-flow__node {
-  cursor: grab;
-}
-
-.react-flow__node-default,
-.react-flow__node-input,
-.react-flow__node-output,
-.react-flow__node-group {
-  padding: 10px;
-  border-radius: 3px;
-  width: 150px;
-  font-size: 12px;
-  color: #222;
-  text-align: center;
-  border-width: 1px;
-  border-style: solid;
-  background: #fff;
-  border-color: #1a192b;
-
-  &.selected,
-  &:focus,
-  &:focus-visible {
-    box-shadow: 0 0 0 0.5px #1a192b;
-    outline: none;
-  }
-
-  .react-flow__handle {
-    background: #1a192b;
-  }
-}
-
-.react-flow__node-default.selectable,
-.react-flow__node-input.selectable,
-.react-flow__node-output.selectable,
-.react-flow__node-group.selectable {
-  &:hover {
-    box-shadow: 0 1px 4px 1px rgba(0, 0, 0, 0.08);
-  }
-
-  &.selected,
-  &:focus,
-  &:focus-visible {
-    outline: none;
-    box-shadow: 0 0 0 0.5px #1a192b;
-  }
-}
-
-.react-flow__node-group {
-  background: rgba(240, 240, 240, 0.25);
-  border-color: #1a192b;
-}
-
-.react-flow__nodesselection-rect,
-.react-flow__selection {
-  background: rgba(0, 89, 220, 0.08);
-  border: 1px dotted rgba(0, 89, 220, 0.8);
-
-  &:focus,
-  &:focus-visible {
-    outline: none;
-  }
-}
-
-.react-flow__handle {
-  width: 6px;
-  height: 6px;
-  background: #555;
-  border: 1px solid white;
-  border-radius: 100%;
-
-  &.connectable {
-    cursor: crosshair;
-  }
-}

examples/nextjs/postcss.config.json

@@ -1,6 +1,7 @@
 {
   "plugins": [
     "postcss-nested",
+    "postcss-import",
     "postcss-flexbugs-fixes",
     [
       "postcss-preset-env",

examples/nextjs/styles/rf-base.css

@@ -1,4 +1,5 @@
-const style = `
+/* these are very simple styles so that it doesnt look broken */
+/* these are the necessary styles for React Flow */
 .react-flow__container {
   position: absolute;
   width: 100%;
@@ -6,221 +7,222 @@ const style = `
   top: 0;
   left: 0;
 }
-
 .react-flow__pane {
   z-index: 1;
 }
-
 .react-flow__viewport {
   transform-origin: 0 0;
   z-index: 2;
   pointer-events: none;
 }
-
 .react-flow__renderer {
   z-index: 4;
 }
-
 .react-flow__selectionpane {
   z-index: 5;
 }
-
-.react-flow__nodesselection-rect,
-.react-flow__selection {
-  background: rgba(150, 150, 180, 0.1);
-  border: 1px dotted rgba(155, 155, 155, 0.8);
-}
-
 .react-flow__nodesselection-rect:focus,
 .react-flow__nodesselection-rect:focus-visible {
   outline: none;
 }
-
 .react-flow .react-flow__edges {
   pointer-events: none;
   overflow: visible;
 }
-
-.react-flow__connection {
-  pointer-events: none;
-}
-
-.react-flow__connection.animated {
-  stroke-dasharray: 5;
-  animation: dashdraw 0.5s linear infinite;
-}
-
-.react-flow .react-flow__connectionline {
-  z-index: 1001;
-}
-
-.react-flow__connectionline path, .react-flow__edge path {
-  fill: none;
-}
-
-.react-flow__edge-path, .react-flow__connection-path {
+.react-flow__edge-path,
+.react-flow__connection-path {
   stroke: #b1b1b7;
   stroke-width: 1;
 }
-
 .react-flow__edge {
   pointer-events: visibleStroke;
 }
-
 .react-flow__edge.animated path {
   stroke-dasharray: 5;
+  -webkit-animation: dashdraw 0.5s linear infinite;
   animation: dashdraw 0.5s linear infinite;
 }
-
 .react-flow__edge.inactive {
   pointer-events: none;
 }
-
-.react-flow__edge.selected, .react-flow__edge:focus, .react-flow__edge:focus-visible {
+.react-flow__edge.selected,
+.react-flow__edge:focus,
+.react-flow__edge:focus-visible {
   outline: none;
 }
-
 .react-flow__edge.selected .react-flow__edge-path,
 .react-flow__edge:focus .react-flow__edge-path,
 .react-flow__edge:focus-visible .react-flow__edge-path {
   stroke: #555;
 }
-
-@keyframes dashdraw {
-  from {
-    stroke-dashoffset: 10;
-  }
-}
-
 .react-flow__edge-textwrapper {
   pointer-events: all;
 }
-
-.react-flow__edge-text {
-  pointer-events: none;
-  user-select: none;
-}
-
 .react-flow__edge-textbg {
   fill: white;
 }
-
+.react-flow__edge .react-flow__edge-text {
+  pointer-events: none;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  user-select: none;
+}
+.react-flow__connection {
+  pointer-events: none;
+}
+.react-flow__connection.animated {
+  stroke-dasharray: 5;
+  -webkit-animation: dashdraw 0.5s linear infinite;
+  animation: dashdraw 0.5s linear infinite;
+}
+.react-flow__connectionline {
+  z-index: 1001;
+}
 .react-flow__nodes {
   pointer-events: none;
   transform-origin: 0 0;
 }
-
 .react-flow__node {
   position: absolute;
+  -webkit-user-select: none;
+  -moz-user-select: none;
   user-select: none;
   pointer-events: all;
   transform-origin: 0 0;
   box-sizing: border-box;
   background-color: white;
+  cursor: -webkit-grab;
   cursor: grab;
-  border: 1px solid #bbb;
 }
-
-.react-flow__node.selected,
-.react-flow__node:focus,
-.react-flow__node:focus-visible  {
-  outline: none;
-  border: 1px solid #555;
-}
-
 .react-flow__nodesselection {
   z-index: 3;
   transform-origin: left top;
   pointer-events: none;
 }
-
 .react-flow__nodesselection-rect {
   position: absolute;
   pointer-events: all;
+  cursor: -webkit-grab;
   cursor: grab;
 }
-
 .react-flow__handle {
   position: absolute;
   pointer-events: none;
   min-width: 5px;
   min-height: 5px;
-  background-color: #333;
 }
-
 .react-flow__handle.connectable {
   pointer-events: all;
 }
-
 .react-flow__handle-bottom {
   top: auto;
   left: 50%;
   bottom: -4px;
   transform: translate(-50%, 0);
 }
-
 .react-flow__handle-top {
   left: 50%;
   top: -4px;
   transform: translate(-50%, 0);
 }
-
 .react-flow__handle-left {
   top: 50%;
   left: -4px;
   transform: translate(0, -50%);
 }
-
 .react-flow__handle-right {
   right: -4px;
   top: 50%;
   transform: translate(0, -50%);
 }
-
 .react-flow__edgeupdater {
   cursor: move;
   pointer-events: all;
 }
-
 .react-flow__panel {
   position: absolute;
   z-index: 1000;
   margin: 15px;
 }
-
 .react-flow__panel.top {
   top: 0;
 }
-
 .react-flow__panel.bottom {
   bottom: 0;
 }
-
 .react-flow__panel.left {
   left: 0;
 }
-
 .react-flow__panel.right {
   right: 0;
 }
-
 .react-flow__panel.center {
   left: 50%;
   transform: translateX(-50%);
 }
-
 .react-flow__attribution {
   font-size: 10px;
   background: rgba(255, 255, 255, 0.5);
   padding: 2px 3px;
-  color: #999;
   margin: 0;
 }
-
 .react-flow__attribution a {
-  color: #555;
   text-decoration: none;
+  color: #999;
+}
+@-webkit-keyframes dashdraw {
+  from {
+    stroke-dashoffset: 10;
+  }
+}
+@keyframes dashdraw {
+  from {
+    stroke-dashoffset: 10;
+  }
+}
+.react-flow__node {
+  border-width: 1px;
+  border-style: solid;
+  border-color: #bbb;
+}
+.react-flow__node.selected,
+.react-flow__node:focus,
+.react-flow__node:focus-visible {
+  outline: none;
+  border: 1px solid #555;
+}
+.react-flow__nodesselection-rect,
+.react-flow__selection {
+  background: rgba(150, 150, 180, 0.1);
+  border: 1px dotted rgba(155, 155, 155, 0.8);
+}
+.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;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  user-select: none;
+  padding: 5px;
+}
+.react-flow__controls-button:hover {
+  background: #f4f4f4;
+}
+.react-flow__controls-button svg {
+  width: 100%;
+  max-width: 12px;
+  max-height: 12px;
+}
+.react-flow__minimap {
+  background-color: #fff;
 }
-`;
-
-export default style;

examples/nextjs/styles/rf-style.css

@@ -0,0 +1,267 @@
+/* these are the necessary styles for React Flow */
+.react-flow__container {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+}
+.react-flow__pane {
+  z-index: 1;
+  cursor: -webkit-grab;
+  cursor: grab;
+}
+.react-flow__pane.dragging {
+    cursor: -webkit-grabbing;
+    cursor: grabbing;
+  }
+.react-flow__viewport {
+  transform-origin: 0 0;
+  z-index: 2;
+  pointer-events: none;
+}
+.react-flow__renderer {
+  z-index: 4;
+}
+.react-flow__selectionpane {
+  z-index: 5;
+}
+.react-flow__nodesselection-rect:focus,
+.react-flow__nodesselection-rect:focus-visible {
+  outline: none;
+}
+.react-flow .react-flow__edges {
+  pointer-events: none;
+  overflow: visible;
+}
+.react-flow__edge-path,
+.react-flow__connection-path {
+  stroke: #b1b1b7;
+  stroke-width: 1;
+}
+.react-flow__edge {
+  pointer-events: visibleStroke;
+  cursor: pointer;
+}
+.react-flow__edge.animated path {
+    stroke-dasharray: 5;
+    -webkit-animation: dashdraw 0.5s linear infinite;
+            animation: dashdraw 0.5s linear infinite;
+  }
+.react-flow__edge.inactive {
+    pointer-events: none;
+  }
+.react-flow__edge.selected,
+  .react-flow__edge:focus,
+  .react-flow__edge:focus-visible {
+    outline: none;
+  }
+.react-flow__edge.selected .react-flow__edge-path,
+  .react-flow__edge:focus .react-flow__edge-path,
+  .react-flow__edge:focus-visible .react-flow__edge-path {
+    stroke: #555;
+  }
+.react-flow__edge-textwrapper {
+    pointer-events: all;
+  }
+.react-flow__edge-textbg {
+    fill: white;
+  }
+.react-flow__edge .react-flow__edge-text {
+    pointer-events: none;
+    -webkit-user-select: none;
+       -moz-user-select: none;
+            user-select: none;
+  }
+.react-flow__connection {
+  pointer-events: none;
+}
+.react-flow__connection.animated {
+    stroke-dasharray: 5;
+    -webkit-animation: dashdraw 0.5s linear infinite;
+            animation: dashdraw 0.5s linear infinite;
+  }
+.react-flow__connectionline {
+  z-index: 1001;
+}
+.react-flow__nodes {
+  pointer-events: none;
+  transform-origin: 0 0;
+}
+.react-flow__node {
+  position: absolute;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
+  pointer-events: all;
+  transform-origin: 0 0;
+  box-sizing: border-box;
+  background-color: white;
+  cursor: -webkit-grab;
+  cursor: grab;
+  padding: 10px;
+  border-radius: 3px;
+  width: 150px;
+  font-size: 12px;
+  color: #222;
+  text-align: center;
+  border-width: 1px;
+  border-style: solid;
+  border-color: #1a192b;
+}
+.react-flow__node.dragging {
+    cursor: -webkit-grabbing;
+    cursor: grabbing;
+  }
+.react-flow__nodesselection {
+  z-index: 3;
+  transform-origin: left top;
+  pointer-events: none;
+}
+.react-flow__nodesselection-rect {
+    position: absolute;
+    pointer-events: all;
+    cursor: -webkit-grab;
+    cursor: grab;
+  }
+.react-flow__handle {
+  position: absolute;
+  pointer-events: none;
+  min-width: 5px;
+  min-height: 5px;
+  width: 6px;
+  height: 6px;
+  background: #1a192b;
+  border: 1px solid white;
+  border-radius: 100%;
+}
+.react-flow__handle.connectable {
+    pointer-events: all;
+    cursor: crosshair;
+  }
+.react-flow__handle-bottom {
+    top: auto;
+    left: 50%;
+    bottom: -4px;
+    transform: translate(-50%, 0);
+  }
+.react-flow__handle-top {
+    left: 50%;
+    top: -4px;
+    transform: translate(-50%, 0);
+  }
+.react-flow__handle-left {
+    top: 50%;
+    left: -4px;
+    transform: translate(0, -50%);
+  }
+.react-flow__handle-right {
+    right: -4px;
+    top: 50%;
+    transform: translate(0, -50%);
+  }
+.react-flow__edgeupdater {
+  cursor: move;
+  pointer-events: all;
+}
+.react-flow__panel {
+  position: absolute;
+  z-index: 1000;
+  margin: 15px;
+}
+.react-flow__panel.top {
+    top: 0;
+  }
+.react-flow__panel.bottom {
+    bottom: 0;
+  }
+.react-flow__panel.left {
+    left: 0;
+  }
+.react-flow__panel.right {
+    right: 0;
+  }
+.react-flow__panel.center {
+    left: 50%;
+    transform: translateX(-50%);
+  }
+.react-flow__attribution {
+  font-size: 10px;
+  background: rgba(255, 255, 255, 0.5);
+  padding: 2px 3px;
+  margin: 0;
+}
+.react-flow__attribution a {
+    text-decoration: none;
+    color: #999;
+  }
+@-webkit-keyframes dashdraw {
+  from {
+    stroke-dashoffset: 10;
+  }
+}
+@keyframes dashdraw {
+  from {
+    stroke-dashoffset: 10;
+  }
+}
+.react-flow__edge.updating .react-flow__edge-path {
+      stroke: #777;
+    }
+.react-flow__edge-text {
+    font-size: 10px;
+  }
+.react-flow__node.selectable:hover {
+      box-shadow: 0 1px 4px 1px rgba(0, 0, 0, 0.08);
+    }
+.react-flow__node.selectable.selected,
+    .react-flow__node.selectable:focus,
+    .react-flow__node.selectable:focus-visible {
+      box-shadow: 0 0 0 0.5px #1a192b;
+      outline: none;
+    }
+.react-flow__node-group {
+    background: rgba(240, 240, 240, 0.25);
+    border-color: #1a192b;
+  }
+.react-flow__nodesselection-rect,
+.react-flow__selection {
+  background: rgba(0, 89, 220, 0.08);
+  border: 1px dotted rgba(0, 89, 220, 0.8);
+}
+.react-flow__nodesselection-rect:focus,
+  .react-flow__nodesselection-rect:focus-visible,
+  .react-flow__selection:focus,
+  .react-flow__selection:focus-visible {
+    outline: none;
+  }
+.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;
+    -webkit-user-select: none;
+       -moz-user-select: none;
+            user-select: none;
+    padding: 5px;
+  }
+.react-flow__controls-button:hover {
+      background: #f4f4f4;
+    }
+.react-flow__controls-button svg {
+      width: 100%;
+      max-width: 12px;
+      max-height: 12px;
+    }
+.react-flow__minimap {
+  background-color: #fff;
+}

examples/nextjs/styles/theme-default.css

@@ -1,83 +0,0 @@
-.react-flow__edge {
-  &.updating {
-    .react-flow__edge-path {
-      stroke: #777;
-    }
-  }
-}
-
-.react-flow__edge-text {
-  font-size: 10px;
-}
-
-.react-flow__node-default,
-.react-flow__node-input,
-.react-flow__node-output,
-.react-flow__node-group {
-  padding: 10px;
-  border-radius: 3px;
-  width: 150px;
-  font-size: 12px;
-  color: #222;
-  text-align: center;
-  border-width: 1px;
-  border-style: solid;
-  border-color: #1a192b;
-
-  &.selected,
-  &:focus,
-  &:focus-visible {
-    border: none;
-    box-shadow: 0 0 0 0.5px #1a192b;
-    outline: none;
-  }
-
-  .react-flow__handle {
-    background: #1a192b;
-  }
-}
-
-.react-flow__node-default.selectable,
-.react-flow__node-input.selectable,
-.react-flow__node-output.selectable,
-.react-flow__node-group.selectable {
-  &:hover {
-    box-shadow: 0 1px 4px 1px rgba(0, 0, 0, 0.08);
-  }
-
-  &.selected,
-  &:focus,
-  &:focus-visible {
-    border: none;
-    box-shadow: 0 0 0 0.5px #1a192b;
-    outline: none;
-  }
-}
-
-.react-flow__node-group {
-  background: rgba(240, 240, 240, 0.25);
-  border-color: #1a192b;
-}
-
-.react-flow__nodesselection-rect,
-.react-flow__selection {
-  background: rgba(0, 89, 220, 0.08);
-  border: 1px dotted rgba(0, 89, 220, 0.8);
-
-  &:focus,
-  &:focus-visible {
-    outline: none;
-  }
-}
-
-.react-flow__handle {
-  width: 6px;
-  height: 6px;
-  background: #555;
-  border: 1px solid white;
-  border-radius: 100%;
-
-  &.connectable {
-    cursor: crosshair;
-  }
-}

package.json

@@ -34,12 +34,14 @@
     "@typescript-eslint/eslint-plugin": "latest",
     "@typescript-eslint/parser": "latest",
     "autoprefixer": "^10.4.8",
+    "cssnano": "^5.1.12",
     "cypress": "^10.3.1",
     "eslint": "^8.21.0",
     "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-prettier": "^4.2.1",
     "eslint-plugin-react": "latest",
     "postcss": "^8.4.16",
+    "postcss-combine-duplicated-selectors": "^10.0.3",
     "postcss-import": "^14.1.0",
     "postcss-nested": "^5.0.6",
     "prettier": "^2.7.1",

packages/background/README.md

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

packages/bundle/README.md

@@ -0,0 +1,16 @@
+# @react-flow/bundle
+
+Bundles:
+
+* @react-flow/core
+* @react-flow/background
+* @react-flow/controls
+* @react-flow/minimap
+
+
+## Installation 
+
+```sh 
+npm install @react-flow/bundle
+```
+

packages/bundle/package.json

@@ -1,9 +1,9 @@
 {
-  "name": "@react-flow/renderer",
+  "name": "@react-flow/bundle",
   "version": "11.0.0",
-  "description": "The main React Flow package that comes with all the essentials.",
-  "main": "dist/react-flow-renderer.cjs.js",
-  "module": "dist/react-flow-renderer.esm.js",
+  "description": "The bundled React Flow package that comes with all the essentials.",
+  "main": "dist/react-flow-bundle.cjs.js",
+  "module": "dist/react-flow-bundle.esm.js",
   "license": "MIT",
   "scripts": {
     "build": "postcss src/*.css --config ../../postcss.config.json --dir dist"
@@ -22,6 +22,7 @@
     "autoprefixer": "^10.4.8",
     "postcss": "^8.4.14",
     "postcss-cli": "^10.0.0",
+    "postcss-combine-duplicated-selectors": "^10.0.3",
     "postcss-import": "^14.1.0",
     "postcss-nested": "^5.0.6"
   }

packages/bundle/src/base.css

@@ -0,0 +1,3 @@
+@import '../../core/src/styles/base.css';
+@import '../../controls/src/style.css';
+@import '../../minimap/src/style.css';

packages/bundle/src/style.css

@@ -0,0 +1,3 @@
+@import '../../core/src/styles/style.css';
+@import '../../controls/src/style.css';
+@import '../../minimap/src/style.css';

packages/controls/README.md

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

packages/controls/package.json

@@ -5,13 +5,23 @@
   "main": "dist/react-flow-controls.cjs.js",
   "module": "dist/react-flow-controls.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"
   },
   "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/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;

packages/core/README.md

@@ -0,0 +1,8 @@
+# @react-flow/core
+
+## Installation 
+
+```sh 
+npm install @react-flow/core
+```
+

packages/core/package.json

@@ -13,11 +13,10 @@
     "url": "https://github.com/wbkd/react-flow.git"
   },
   "scripts": {
-    "build": "postcss src/styles/*.css --config ../../postcss.config.json --dir dist"
+    "build": "postcss src/styles/{base,style}.css --config ../../postcss.config.json --dir dist"
   },
   "dependencies": {
     "@babel/runtime": "^7.18.0",
-    "@react-flow/css-utils": "^11.0.0",
     "classcat": "^5.0.3",
     "d3-drag": "^3.0.0",
     "d3-selection": "^3.0.0",
@@ -38,6 +37,7 @@
     "autoprefixer": "^10.4.8",
     "postcss": "^8.4.14",
     "postcss-cli": "^10.0.0",
+    "postcss-combine-duplicated-selectors": "^10.0.3",
     "postcss-import": "^14.1.0",
     "postcss-nested": "^5.0.6"
   }

packages/core/src/components/Nodes/wrapNode.tsx

@@ -149,6 +149,7 @@ export default (NodeComponent: ComponentType<NodeProps>) => {
             selected,
             selectable: isSelectable,
             parent: isParent,
+            dragging,
           },
         ])}
         ref={nodeRef}

packages/core/src/container/FlowRenderer/Pane.tsx

@@ -0,0 +1,34 @@
+import { MouseEvent } from 'react';
+import cc from 'classcat';
+
+import { useStore } from '../../hooks/useStore';
+import { containerStyle } from '../../styles';
+import type { ReactFlowState } from '../../types';
+import type { FlowRendererProps } from '.';
+
+type PaneProps = Pick<FlowRendererProps, 'onClick' | 'onContextMenu' | 'onWheel'> & {
+  onMouseEnter?: (event: MouseEvent) => void;
+  onMouseMove?: (event: MouseEvent) => void;
+  onMouseLeave?: (event: MouseEvent) => void;
+};
+
+const selector = (s: ReactFlowState) => s.paneDragging;
+
+function Pane({ onClick, onMouseEnter, onMouseMove, onMouseLeave, onContextMenu, onWheel }: PaneProps) {
+  const dragging = useStore(selector);
+
+  return (
+    <div
+      className={cc(['react-flow__pane', { dragging }])}
+      onClick={onClick}
+      onMouseEnter={onMouseEnter}
+      onMouseMove={onMouseMove}
+      onMouseLeave={onMouseLeave}
+      onContextMenu={onContextMenu}
+      onWheel={onWheel}
+      style={containerStyle}
+    />
+  );
+}
+
+export default Pane;

packages/core/src/container/FlowRenderer/index.tsx

@@ -7,9 +7,9 @@ import { GraphViewProps } from '../GraphView';
 import ZoomPane from '../ZoomPane';
 import UserSelection from '../../components/UserSelection';
 import NodesSelection from '../../components/NodesSelection';
+import Pane from './Pane';
 
 import { ReactFlowState } from '../../types';
-import { containerStyle } from '../../styles';
 
 export type FlowRendererProps = Omit<
   GraphViewProps,
@@ -110,15 +110,13 @@ const FlowRenderer = ({
           disableKeyboardA11y={disableKeyboardA11y}
         />
       )}
-      <div
-        className="react-flow__pane"
+      <Pane
         onClick={onClick}
         onMouseEnter={onPaneMouseEnter}
         onMouseMove={onPaneMouseMove}
         onMouseLeave={onPaneMouseLeave}
         onContextMenu={onContextMenu}
         onWheel={onWheel}
-        style={containerStyle}
       />
     </ZoomPane>
   );

packages/core/src/container/ReactFlow/index.tsx

@@ -1,6 +1,5 @@
 import { CSSProperties, forwardRef, useId } from 'react';
 import cc from 'classcat';
-import { injectStyle } from '@react-flow/css-utils';
 
 import Attribution from '../../components/Attribution';
 import { BezierEdge, SmoothStepEdge, StepEdge, StraightEdge, SimpleBezierEdge } from '../../components/Edges';
@@ -9,9 +8,6 @@ import InputNode from '../../components/Nodes/InputNode';
 import OutputNode from '../../components/Nodes/OutputNode';
 import SelectionListener from '../../components/SelectionListener';
 import StoreUpdater from '../../components/StoreUpdater';
-import baseStyle from '../../styles/base';
-
-injectStyle(baseStyle);
 
 import {
   ConnectionLineType,

packages/core/src/container/ZoomPane/index.tsx

@@ -169,7 +169,9 @@ const ZoomPane = ({
     if (d3Zoom) {
       d3Zoom.on('start', (event: D3ZoomEvent<HTMLDivElement, any>) => {
         isZoomingOrPanning.current = true;
-
+        if (event.sourceEvent?.type === 'mousedown') {
+          store.setState({ paneDragging: true });
+        }
         if (onMoveStart) {
           const flowTransform = eventToFlowTransform(event.transform);
           prevTransform.current = flowTransform;
@@ -184,6 +186,7 @@ const ZoomPane = ({
     if (d3Zoom) {
       d3Zoom.on('end', (event: D3ZoomEvent<HTMLDivElement, any>) => {
         isZoomingOrPanning.current = false;
+        store.setState({ paneDragging: false });
 
         if (onMoveEnd && viewChanged(prevTransform.current, event.transform)) {
           const flowTransform = eventToFlowTransform(event.transform);

packages/core/src/store/initialState.ts

@@ -30,6 +30,7 @@ const initialState: ReactFlowStore = {
   connectionPosition: { x: 0, y: 0 },
   connectionMode: ConnectionMode.Strict,
   domNode: null,
+  paneDragging: false,
 
   snapGrid: [15, 15],
   snapToGrid: false,

packages/core/src/styles/base.css

@@ -0,0 +1,25 @@
+/* these are very simple styles so that it doesnt look broken */
+@import './init.css';
+
+.react-flow__handle {
+  background-color: #333;
+}
+
+.react-flow__node {
+  border-width: 1px;
+  border-style: solid;
+  border-color: #bbb;
+
+  &.selected,
+  &:focus,
+  &:focus-visible {
+    outline: none;
+    border: 1px solid #555;
+  }
+}
+
+.react-flow__nodesselection-rect,
+.react-flow__selection {
+  background: rgba(150, 150, 180, 0.1);
+  border: 1px dotted rgba(155, 155, 155, 0.8);
+}

packages/core/src/styles/init.css

@@ -0,0 +1,216 @@
+/* these are the necessary styles for React Flow */
+.react-flow__container {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+}
+
+.react-flow__pane {
+  z-index: 1;
+  cursor: grab;
+
+  &.dragging {
+    cursor: grabbing;
+  }
+}
+
+.react-flow__viewport {
+  transform-origin: 0 0;
+  z-index: 2;
+  pointer-events: none;
+}
+
+.react-flow__renderer {
+  z-index: 4;
+}
+
+.react-flow__selectionpane {
+  z-index: 5;
+}
+
+.react-flow__nodesselection-rect:focus,
+.react-flow__nodesselection-rect:focus-visible {
+  outline: none;
+}
+
+.react-flow .react-flow__edges {
+  pointer-events: none;
+  overflow: visible;
+}
+
+.react-flow__edge-path,
+.react-flow__connection-path {
+  stroke: #b1b1b7;
+  stroke-width: 1;
+}
+
+.react-flow__edge {
+  pointer-events: visibleStroke;
+  cursor: pointer;
+
+  &.animated path {
+    stroke-dasharray: 5;
+    animation: dashdraw 0.5s linear infinite;
+  }
+
+  &.inactive {
+    pointer-events: none;
+  }
+
+  &.selected,
+  &:focus,
+  &:focus-visible {
+    outline: none;
+  }
+
+  &.selected .react-flow__edge-path,
+  &:focus .react-flow__edge-path,
+  &:focus-visible .react-flow__edge-path {
+    stroke: #555;
+  }
+
+  &-textwrapper {
+    pointer-events: all;
+  }
+
+  &-textbg {
+    fill: white;
+  }
+
+  .react-flow__edge-text {
+    pointer-events: none;
+    user-select: none;
+  }
+}
+
+.react-flow__connection {
+  pointer-events: none;
+
+  &.animated {
+    stroke-dasharray: 5;
+    animation: dashdraw 0.5s linear infinite;
+  }
+}
+
+.react-flow__connectionline {
+  z-index: 1001;
+}
+
+.react-flow__nodes {
+  pointer-events: none;
+  transform-origin: 0 0;
+}
+
+.react-flow__node {
+  position: absolute;
+  user-select: none;
+  pointer-events: all;
+  transform-origin: 0 0;
+  box-sizing: border-box;
+  background-color: white;
+  cursor: grab;
+
+  &.dragging {
+    cursor: grabbing;
+  }
+}
+
+.react-flow__nodesselection {
+  z-index: 3;
+  transform-origin: left top;
+  pointer-events: none;
+
+  &-rect {
+    position: absolute;
+    pointer-events: all;
+    cursor: grab;
+  }
+}
+
+.react-flow__handle {
+  position: absolute;
+  pointer-events: none;
+  min-width: 5px;
+  min-height: 5px;
+
+  &.connectable {
+    pointer-events: all;
+  }
+
+  &-bottom {
+    top: auto;
+    left: 50%;
+    bottom: -4px;
+    transform: translate(-50%, 0);
+  }
+
+  &-top {
+    left: 50%;
+    top: -4px;
+    transform: translate(-50%, 0);
+  }
+
+  &-left {
+    top: 50%;
+    left: -4px;
+    transform: translate(0, -50%);
+  }
+
+  &-right {
+    right: -4px;
+    top: 50%;
+    transform: translate(0, -50%);
+  }
+}
+
+.react-flow__edgeupdater {
+  cursor: move;
+  pointer-events: all;
+}
+
+.react-flow__panel {
+  position: absolute;
+  z-index: 1000;
+  margin: 15px;
+
+  &.top {
+    top: 0;
+  }
+
+  &.bottom {
+    bottom: 0;
+  }
+
+  &.left {
+    left: 0;
+  }
+
+  &.right {
+    right: 0;
+  }
+
+  &.center {
+    left: 50%;
+    transform: translateX(-50%);
+  }
+}
+
+.react-flow__attribution {
+  font-size: 10px;
+  background: rgba(255, 255, 255, 0.5);
+  padding: 2px 3px;
+  margin: 0;
+
+  a {
+    text-decoration: none;
+    color: #999;
+  }
+}
+
+@keyframes dashdraw {
+  from {
+    stroke-dashoffset: 10;
+  }
+}

packages/core/src/styles/style.css

@@ -0,0 +1,66 @@
+@import './init.css';
+
+.react-flow__edge {
+  &.updating {
+    .react-flow__edge-path {
+      stroke: #777;
+    }
+  }
+
+  &-text {
+    font-size: 10px;
+  }
+}
+
+.react-flow__node {
+  padding: 10px;
+  border-radius: 3px;
+  width: 150px;
+  font-size: 12px;
+  color: #222;
+  text-align: center;
+  border-width: 1px;
+  border-style: solid;
+  border-color: #1a192b;
+
+  &.selectable {
+    &:hover {
+      box-shadow: 0 1px 4px 1px rgba(0, 0, 0, 0.08);
+    }
+
+    &.selected,
+    &:focus,
+    &:focus-visible {
+      box-shadow: 0 0 0 0.5px #1a192b;
+      outline: none;
+    }
+  }
+
+  &-group {
+    background: rgba(240, 240, 240, 0.25);
+    border-color: #1a192b;
+  }
+}
+
+.react-flow__nodesselection-rect,
+.react-flow__selection {
+  background: rgba(0, 89, 220, 0.08);
+  border: 1px dotted rgba(0, 89, 220, 0.8);
+
+  &:focus,
+  &:focus-visible {
+    outline: none;
+  }
+}
+
+.react-flow__handle {
+  width: 6px;
+  height: 6px;
+  background: #1a192b;
+  border: 1px solid white;
+  border-radius: 100%;
+
+  &.connectable {
+    cursor: crosshair;
+  }
+}

packages/core/src/styles/theme-default.css

@@ -1,83 +0,0 @@
-.react-flow__edge {
-  &.updating {
-    .react-flow__edge-path {
-      stroke: #777;
-    }
-  }
-}
-
-.react-flow__edge-text {
-  font-size: 10px;
-}
-
-.react-flow__node-default,
-.react-flow__node-input,
-.react-flow__node-output,
-.react-flow__node-group {
-  padding: 10px;
-  border-radius: 3px;
-  width: 150px;
-  font-size: 12px;
-  color: #222;
-  text-align: center;
-  border-width: 1px;
-  border-style: solid;
-  border-color: #1a192b;
-
-  &.selected,
-  &:focus,
-  &:focus-visible {
-    border: none;
-    box-shadow: 0 0 0 0.5px #1a192b;
-    outline: none;
-  }
-
-  .react-flow__handle {
-    background: #1a192b;
-  }
-}
-
-.react-flow__node-default.selectable,
-.react-flow__node-input.selectable,
-.react-flow__node-output.selectable,
-.react-flow__node-group.selectable {
-  &:hover {
-    box-shadow: 0 1px 4px 1px rgba(0, 0, 0, 0.08);
-  }
-
-  &.selected,
-  &:focus,
-  &:focus-visible {
-    border: none;
-    box-shadow: 0 0 0 0.5px #1a192b;
-    outline: none;
-  }
-}
-
-.react-flow__node-group {
-  background: rgba(240, 240, 240, 0.25);
-  border-color: #1a192b;
-}
-
-.react-flow__nodesselection-rect,
-.react-flow__selection {
-  background: rgba(0, 89, 220, 0.08);
-  border: 1px dotted rgba(0, 89, 220, 0.8);
-
-  &:focus,
-  &:focus-visible {
-    outline: none;
-  }
-}
-
-.react-flow__handle {
-  width: 6px;
-  height: 6px;
-  background: #555;
-  border: 1px solid white;
-  border-radius: 100%;
-
-  &.connectable {
-    cursor: crosshair;
-  }
-}

packages/core/src/types/general.ts

@@ -137,6 +137,7 @@ export type ReactFlowStore = {
   hasDefaultNodes: boolean;
   hasDefaultEdges: boolean;
   domNode: HTMLDivElement | null;
+  paneDragging: boolean;
 
   d3Zoom: ZoomBehavior<Element, unknown> | null;
   d3Selection: D3Selection<Element, unknown, null, undefined> | null;

packages/css-utils/package.json

@@ -1,8 +0,0 @@
-{
-  "name": "@react-flow/css-utils",
-  "version": "11.0.0",
-  "description": "Utils for handling styles.",
-  "main": "dist/react-flow-css-utils.cjs.js",
-  "module": "dist/react-flow-css-utils.esm.js",
-  "license": "MIT"
-}

packages/css-utils/src/index.ts

@@ -1,10 +0,0 @@
-export function injectStyle(css: string) {
-  if (typeof document === 'undefined') return;
-
-  const head = document.head || document.getElementsByTagName('head')[0];
-  const style = document.createElement('style');
-
-  head.prepend(style);
-
-  style.appendChild(document.createTextNode(css));
-}

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;
+}

packages/renderer/src/theme-default.css

@@ -1 +0,0 @@
-@import '@react-flow/core/dist/theme-default.css';

postcss.config.js

@@ -1,6 +1,7 @@
 module.exports = {
   plugins: [
     require('postcss-nested'),
+    require('postcss-combine-duplicated-selectors'),
     require('autoprefixer'),
     require('postcss-import'),
   ],

yarn.lock

@@ -2187,13 +2187,38 @@ __metadata:
   languageName: unknown
   linkType: soft
 
+"@react-flow/bundle@workspace:packages/bundle":
+  version: 0.0.0-use.local
+  resolution: "@react-flow/bundle@workspace:packages/bundle"
+  dependencies:
+    "@react-flow/background": 11.0.0
+    "@react-flow/controls": 11.0.0
+    "@react-flow/core": 11.0.0
+    "@react-flow/minimap": 11.0.0
+    autoprefixer: ^10.4.8
+    postcss: ^8.4.14
+    postcss-cli: ^10.0.0
+    postcss-combine-duplicated-selectors: ^10.0.3
+    postcss-import: ^14.1.0
+    postcss-nested: ^5.0.6
+  peerDependencies:
+    react: ">=18"
+    react-dom: ">=18"
+  languageName: unknown
+  linkType: soft
+
 "@react-flow/controls@11.0.0, @react-flow/controls@workspace:packages/controls":
   version: 0.0.0-use.local
   resolution: "@react-flow/controls@workspace:packages/controls"
   dependencies:
     "@react-flow/core": ^11.0.0
-    "@react-flow/css-utils": ^11.0.0
+    autoprefixer: ^10.4.8
     classcat: ^5.0.3
+    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
   peerDependencies:
     react: ">=18"
     react-dom: ">=18"
@@ -2205,7 +2230,6 @@ __metadata:
   resolution: "@react-flow/core@workspace:packages/core"
   dependencies:
     "@babel/runtime": ^7.18.0
-    "@react-flow/css-utils": ^11.0.0
     "@types/d3": ^7.4.0
     "@types/react": ^18.0.15
     autoprefixer: ^10.4.8
@@ -2215,6 +2239,7 @@ __metadata:
     d3-zoom: ^3.0.0
     postcss: ^8.4.14
     postcss-cli: ^10.0.0
+    postcss-combine-duplicated-selectors: ^10.0.3
     postcss-import: ^14.1.0
     postcss-nested: ^5.0.6
     zustand: ^4.0.0
@@ -2224,41 +2249,21 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@react-flow/css-utils@^11.0.0, @react-flow/css-utils@workspace:packages/css-utils":
-  version: 0.0.0-use.local
-  resolution: "@react-flow/css-utils@workspace:packages/css-utils"
-  languageName: unknown
-  linkType: soft
-
 "@react-flow/minimap@11.0.0, @react-flow/minimap@workspace:packages/minimap":
   version: 0.0.0-use.local
   resolution: "@react-flow/minimap@workspace:packages/minimap"
   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.1.0
-    react-dom: ">=18"
-  languageName: unknown
-  linkType: soft
-
-"@react-flow/renderer@workspace:packages/renderer":
-  version: 0.0.0-use.local
-  resolution: "@react-flow/renderer@workspace:packages/renderer"
-  dependencies:
-    "@react-flow/background": 11.0.0
-    "@react-flow/controls": 11.0.0
-    "@react-flow/core": 11.0.0
-    "@react-flow/minimap": 11.0.0
     autoprefixer: ^10.4.8
-    postcss: ^8.4.14
+    classcat: ^5.0.3
+    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
+    zustand: ^4.0.0
   peerDependencies:
-    react: ^18.1.0
+    react: ">=18"
     react-dom: ">=18"
   languageName: unknown
   linkType: soft
@@ -2389,6 +2394,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@trysound/sax@npm:0.2.0":
+  version: 0.2.0
+  resolution: "@trysound/sax@npm:0.2.0"
+  checksum: 11226c39b52b391719a2a92e10183e4260d9651f86edced166da1d95f39a0a1eaa470e44d14ac685ccd6d3df7e2002433782872c0feeb260d61e80f21250e65c
+  languageName: node
+  linkType: hard
+
 "@types/d3-array@npm:*":
   version: 3.0.3
   resolution: "@types/d3-array@npm:3.0.3"
@@ -3431,6 +3443,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"boolbase@npm:^1.0.0":
+  version: 1.0.0
+  resolution: "boolbase@npm:1.0.0"
+  checksum: 3e25c80ef626c3a3487c73dbfc70ac322ec830666c9ad915d11b701142fab25ec1e63eff2c450c74347acfd2de854ccde865cd79ef4db1683f7c7b046ea43bb0
+  languageName: node
+  linkType: hard
+
 "brace-expansion@npm:^1.1.7":
   version: 1.1.11
   resolution: "brace-expansion@npm:1.1.11"
@@ -3468,7 +3487,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"browserslist@npm:^4.20.2, browserslist@npm:^4.20.3, browserslist@npm:^4.21.0, browserslist@npm:^4.21.2, browserslist@npm:^4.21.3":
+"browserslist@npm:^4.0.0, browserslist@npm:^4.16.6, browserslist@npm:^4.20.2, browserslist@npm:^4.20.3, browserslist@npm:^4.21.0, browserslist@npm:^4.21.2, browserslist@npm:^4.21.3":
   version: 4.21.3
   resolution: "browserslist@npm:4.21.3"
   dependencies:
@@ -3581,6 +3600,25 @@ __metadata:
   languageName: node
   linkType: hard
 
+"caniuse-api@npm:^3.0.0":
+  version: 3.0.0
+  resolution: "caniuse-api@npm:3.0.0"
+  dependencies:
+    browserslist: ^4.0.0
+    caniuse-lite: ^1.0.0
+    lodash.memoize: ^4.1.2
+    lodash.uniq: ^4.5.0
+  checksum: db2a229383b20d0529b6b589dde99d7b6cb56ba371366f58cbbfa2929c9f42c01f873e2b6ef641d4eda9f0b4118de77dbb2805814670bdad4234bf08e720b0b4
+  languageName: node
+  linkType: hard
+
+"caniuse-lite@npm:^1.0.0":
+  version: 1.0.30001374
+  resolution: "caniuse-lite@npm:1.0.30001374"
+  checksum: a75656e971d7ef2af4d2f3529a4620ae1a45d09460601fbc34b26f6867f31bbca006f71d8840291c471a2f01fc1994044f319a5660241ffaf35a2d84535af442
+  languageName: node
+  linkType: hard
+
 "caniuse-lite@npm:^1.0.30001332, caniuse-lite@npm:^1.0.30001335, caniuse-lite@npm:^1.0.30001370":
   version: 1.0.30001370
   resolution: "caniuse-lite@npm:1.0.30001370"
@@ -3793,6 +3831,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"colord@npm:^2.9.1":
+  version: 2.9.2
+  resolution: "colord@npm:2.9.2"
+  checksum: 2aa6a9b3abbce74ba3c563886cfeb433ea0d7df5ad6f4a560005eddab1ddf7c0fc98f39b09b599767a19c86dd3837b77f66f036e479515d4b17347006dbd6d9f
+  languageName: node
+  linkType: hard
+
 "colorette@npm:^2.0.16":
   version: 2.0.19
   resolution: "colorette@npm:2.0.19"
@@ -3823,6 +3868,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"commander@npm:^7.2.0":
+  version: 7.2.0
+  resolution: "commander@npm:7.2.0"
+  checksum: 53501cbeee61d5157546c0bef0fedb6cdfc763a882136284bed9a07225f09a14b82d2a84e7637edfd1a679fb35ed9502fd58ef1d091e6287f60d790147f68ddc
+  languageName: node
+  linkType: hard
+
 "common-tags@npm:^1.8.0":
   version: 1.8.2
   resolution: "common-tags@npm:1.8.2"
@@ -3919,6 +3971,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"css-declaration-sorter@npm:^6.3.0":
+  version: 6.3.0
+  resolution: "css-declaration-sorter@npm:6.3.0"
+  peerDependencies:
+    postcss: ^8.0.9
+  checksum: 69ce1c2e0e854c043dccbb613f15e2911e2e12dd656d18cdae831baa6a6a8f9ef0d6560c456e3b41d28835e5e013bfdf9114eeba206564b1513ea968a3633c1f
+  languageName: node
+  linkType: hard
+
 "css-has-pseudo@npm:^3.0.4":
   version: 3.0.4
   resolution: "css-has-pseudo@npm:3.0.4"
@@ -3943,6 +4004,36 @@ __metadata:
   languageName: node
   linkType: hard
 
+"css-select@npm:^4.1.3":
+  version: 4.3.0
+  resolution: "css-select@npm:4.3.0"
+  dependencies:
+    boolbase: ^1.0.0
+    css-what: ^6.0.1
+    domhandler: ^4.3.1
+    domutils: ^2.8.0
+    nth-check: ^2.0.1
+  checksum: d6202736839194dd7f910320032e7cfc40372f025e4bf21ca5bf6eb0a33264f322f50ba9c0adc35dadd342d3d6fae5ca244779a4873afbfa76561e343f2058e0
+  languageName: node
+  linkType: hard
+
+"css-tree@npm:^1.1.2, css-tree@npm:^1.1.3":
+  version: 1.1.3
+  resolution: "css-tree@npm:1.1.3"
+  dependencies:
+    mdn-data: 2.0.14
+    source-map: ^0.6.1
+  checksum: 79f9b81803991b6977b7fcb1588799270438274d89066ce08f117f5cdb5e20019b446d766c61506dd772c839df84caa16042d6076f20c97187f5abe3b50e7d1f
+  languageName: node
+  linkType: hard
+
+"css-what@npm:^6.0.1":
+  version: 6.1.0
+  resolution: "css-what@npm:6.1.0"
+  checksum: b975e547e1e90b79625918f84e67db5d33d896e6de846c9b584094e529f0c63e2ab85ee33b9daffd05bff3a146a1916bec664e18bb76dd5f66cbff9fc13b2bbe
+  languageName: node
+  linkType: hard
+
 "cssdb@npm:^6.6.3":
   version: 6.6.3
   resolution: "cssdb@npm:6.6.3"
@@ -3959,6 +4050,76 @@ __metadata:
   languageName: node
   linkType: hard
 
+"cssnano-preset-default@npm:^5.2.12":
+  version: 5.2.12
+  resolution: "cssnano-preset-default@npm:5.2.12"
+  dependencies:
+    css-declaration-sorter: ^6.3.0
+    cssnano-utils: ^3.1.0
+    postcss-calc: ^8.2.3
+    postcss-colormin: ^5.3.0
+    postcss-convert-values: ^5.1.2
+    postcss-discard-comments: ^5.1.2
+    postcss-discard-duplicates: ^5.1.0
+    postcss-discard-empty: ^5.1.1
+    postcss-discard-overridden: ^5.1.0
+    postcss-merge-longhand: ^5.1.6
+    postcss-merge-rules: ^5.1.2
+    postcss-minify-font-values: ^5.1.0
+    postcss-minify-gradients: ^5.1.1
+    postcss-minify-params: ^5.1.3
+    postcss-minify-selectors: ^5.2.1
+    postcss-normalize-charset: ^5.1.0
+    postcss-normalize-display-values: ^5.1.0
+    postcss-normalize-positions: ^5.1.1
+    postcss-normalize-repeat-style: ^5.1.1
+    postcss-normalize-string: ^5.1.0
+    postcss-normalize-timing-functions: ^5.1.0
+    postcss-normalize-unicode: ^5.1.0
+    postcss-normalize-url: ^5.1.0
+    postcss-normalize-whitespace: ^5.1.1
+    postcss-ordered-values: ^5.1.3
+    postcss-reduce-initial: ^5.1.0
+    postcss-reduce-transforms: ^5.1.0
+    postcss-svgo: ^5.1.0
+    postcss-unique-selectors: ^5.1.1
+  peerDependencies:
+    postcss: ^8.2.15
+  checksum: 3d6c05e7719f05c577c3123dc8f823ddc055ec5402ee8184cea1832c209a87ab11aa2aa2cba3e6f4ae6e144c1f3f5122fad1bc7c3086bc3441770f2733e03f58
+  languageName: node
+  linkType: hard
+
+"cssnano-utils@npm:^3.1.0":
+  version: 3.1.0
+  resolution: "cssnano-utils@npm:3.1.0"
+  peerDependencies:
+    postcss: ^8.2.15
+  checksum: 975c84ce9174cf23bb1da1e9faed8421954607e9ea76440cd3bb0c1bea7e17e490d800fca5ae2812d1d9e9d5524eef23ede0a3f52497d7ccc628e5d7321536f2
+  languageName: node
+  linkType: hard
+
+"cssnano@npm:^5.1.12":
+  version: 5.1.12
+  resolution: "cssnano@npm:5.1.12"
+  dependencies:
+    cssnano-preset-default: ^5.2.12
+    lilconfig: ^2.0.3
+    yaml: ^1.10.2
+  peerDependencies:
+    postcss: ^8.2.15
+  checksum: 5bc6a6195e7fe2065fbe6002dd09ce23f125956679232c823d9f28914e4ea7b72714b67c86e3b5369861253eb74c4df3079a9b839b8ddebe60e1f81d2292e224
+  languageName: node
+  linkType: hard
+
+"csso@npm:^4.2.0":
+  version: 4.2.0
+  resolution: "csso@npm:4.2.0"
+  dependencies:
+    css-tree: ^1.1.2
+  checksum: 380ba9663da3bcea58dee358a0d8c4468bb6539be3c439dc266ac41c047217f52fd698fb7e4b6b6ccdfb8cf53ef4ceed8cc8ceccb8dfca2aa628319826b5b998
+  languageName: node
+  linkType: hard
+
 "csstype@npm:^3.0.2":
   version: 3.1.0
   resolution: "csstype@npm:3.1.0"
@@ -4327,6 +4488,44 @@ __metadata:
   languageName: node
   linkType: hard
 
+"dom-serializer@npm:^1.0.1":
+  version: 1.4.1
+  resolution: "dom-serializer@npm:1.4.1"
+  dependencies:
+    domelementtype: ^2.0.1
+    domhandler: ^4.2.0
+    entities: ^2.0.0
+  checksum: fbb0b01f87a8a2d18e6e5a388ad0f7ec4a5c05c06d219377da1abc7bb0f674d804f4a8a94e3f71ff15f6cb7dcfc75704a54b261db672b9b3ab03da6b758b0b22
+  languageName: node
+  linkType: hard
+
+"domelementtype@npm:^2.0.1, domelementtype@npm:^2.2.0":
+  version: 2.3.0
+  resolution: "domelementtype@npm:2.3.0"
+  checksum: ee837a318ff702622f383409d1f5b25dd1024b692ef64d3096ff702e26339f8e345820f29a68bcdcea8cfee3531776b3382651232fbeae95612d6f0a75efb4f6
+  languageName: node
+  linkType: hard
+
+"domhandler@npm:^4.2.0, domhandler@npm:^4.3.1":
+  version: 4.3.1
+  resolution: "domhandler@npm:4.3.1"
+  dependencies:
+    domelementtype: ^2.2.0
+  checksum: 4c665ceed016e1911bf7d1dadc09dc888090b64dee7851cccd2fcf5442747ec39c647bb1cb8c8919f8bbdd0f0c625a6bafeeed4b2d656bbecdbae893f43ffaaa
+  languageName: node
+  linkType: hard
+
+"domutils@npm:^2.8.0":
+  version: 2.8.0
+  resolution: "domutils@npm:2.8.0"
+  dependencies:
+    dom-serializer: ^1.0.1
+    domelementtype: ^2.2.0
+    domhandler: ^4.2.0
+  checksum: abf7434315283e9aadc2a24bac0e00eab07ae4313b40cc239f89d84d7315ebdfd2fb1b5bf750a96bc1b4403d7237c7b2ebf60459be394d625ead4ca89b934391
+  languageName: node
+  linkType: hard
+
 "duplexer@npm:~0.1.1":
   version: 0.1.2
   resolution: "duplexer@npm:0.1.2"
@@ -4392,6 +4591,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"entities@npm:^2.0.0":
+  version: 2.2.0
+  resolution: "entities@npm:2.2.0"
+  checksum: 19010dacaf0912c895ea262b4f6128574f9ccf8d4b3b65c7e8334ad0079b3706376360e28d8843ff50a78aabcb8f08f0a32dbfacdc77e47ed77ca08b713669b3
+  languageName: node
+  linkType: hard
+
 "env-paths@npm:^2.2.0":
   version: 2.2.1
   resolution: "env-paths@npm:2.2.1"
@@ -6343,7 +6549,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"lilconfig@npm:^2.0.5":
+"lilconfig@npm:^2.0.3, lilconfig@npm:^2.0.5":
   version: 2.0.6
   resolution: "lilconfig@npm:2.0.6"
   checksum: 40a3cd72f103b1be5975f2ac1850810b61d4053e20ab09be8d3aeddfe042187e1ba70b4651a7e70f95efa1642e7dc8b2ae395b317b7d7753b241b43cef7c0f7d
@@ -6434,6 +6640,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"lodash.memoize@npm:^4.1.2":
+  version: 4.1.2
+  resolution: "lodash.memoize@npm:4.1.2"
+  checksum: 9ff3942feeccffa4f1fafa88d32f0d24fdc62fd15ded5a74a5f950ff5f0c6f61916157246744c620173dddf38d37095a92327d5fd3861e2063e736a5c207d089
+  languageName: node
+  linkType: hard
+
 "lodash.merge@npm:^4.6.2":
   version: 4.6.2
   resolution: "lodash.merge@npm:4.6.2"
@@ -6455,6 +6668,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"lodash.uniq@npm:^4.5.0":
+  version: 4.5.0
+  resolution: "lodash.uniq@npm:4.5.0"
+  checksum: a4779b57a8d0f3c441af13d9afe7ecff22dd1b8ce1129849f71d9bbc8e8ee4e46dfb4b7c28f7ad3d67481edd6e51126e4e2a6ee276e25906d10f7140187c392d
+  languageName: node
+  linkType: hard
+
 "lodash@npm:^4.17.15, lodash@npm:^4.17.21":
   version: 4.17.21
   resolution: "lodash@npm:4.17.21"
@@ -6575,6 +6795,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"mdn-data@npm:2.0.14":
+  version: 2.0.14
+  resolution: "mdn-data@npm:2.0.14"
+  checksum: 9d0128ed425a89f4cba8f787dca27ad9408b5cb1b220af2d938e2a0629d17d879a34d2cb19318bdb26c3f14c77dd5dfbae67211f5caaf07b61b1f2c5c8c7dc16
+  languageName: node
+  linkType: hard
+
 "meow@npm:^6.0.0":
   version: 6.1.1
   resolution: "meow@npm:6.1.1"
@@ -6966,6 +7193,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"normalize-url@npm:^6.0.1":
+  version: 6.1.0
+  resolution: "normalize-url@npm:6.1.0"
+  checksum: 4a4944631173e7d521d6b80e4c85ccaeceb2870f315584fa30121f505a6dfd86439c5e3fdd8cd9e0e291290c41d0c3599f0cb12ab356722ed242584c30348e50
+  languageName: node
+  linkType: hard
+
 "npm-bundled@npm:^1.1.1":
   version: 1.1.2
   resolution: "npm-bundled@npm:1.1.2"
@@ -7017,6 +7251,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"nth-check@npm:^2.0.1":
+  version: 2.1.1
+  resolution: "nth-check@npm:2.1.1"
+  dependencies:
+    boolbase: ^1.0.0
+  checksum: 5afc3dafcd1573b08877ca8e6148c52abd565f1d06b1eb08caf982e3fa289a82f2cae697ffb55b5021e146d60443f1590a5d6b944844e944714a5b549675bcd3
+  languageName: node
+  linkType: hard
+
 "object-assign@npm:^4.1.1":
   version: 4.1.1
   resolution: "object-assign@npm:4.1.1"
@@ -7392,6 +7635,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"postcss-calc@npm:^8.2.3":
+  version: 8.2.4
+  resolution: "postcss-calc@npm:8.2.4"
+  dependencies:
+    postcss-selector-parser: ^6.0.9
+    postcss-value-parser: ^4.2.0
+  peerDependencies:
+    postcss: ^8.2.2
+  checksum: 314b4cebb0c4ed0cf8356b4bce71eca78f5a7842e6a3942a3bba49db168d5296b2bd93c3f735ae1c616f2651d94719ade33becc03c73d2d79c7394fb7f73eabb
+  languageName: node
+  linkType: hard
+
 "postcss-clamp@npm:^4.1.0":
   version: 4.1.0
   resolution: "postcss-clamp@npm:4.1.0"
@@ -7460,6 +7715,43 @@ __metadata:
   languageName: node
   linkType: hard
 
+"postcss-colormin@npm:^5.3.0":
+  version: 5.3.0
+  resolution: "postcss-colormin@npm:5.3.0"
+  dependencies:
+    browserslist: ^4.16.6
+    caniuse-api: ^3.0.0
+    colord: ^2.9.1
+    postcss-value-parser: ^4.2.0
+  peerDependencies:
+    postcss: ^8.2.15
+  checksum: 3d3e3cc25071407fb73d68541ca1039ebd154fceb649041461a8a3cab0400cc89b42dbb34a4eeaf573be4ba2370ce23af5e01aff5e03a8d72275f40605577212
+  languageName: node
+  linkType: hard
+
+"postcss-combine-duplicated-selectors@npm:^10.0.3":
+  version: 10.0.3
+  resolution: "postcss-combine-duplicated-selectors@npm:10.0.3"
+  dependencies:
+    postcss-selector-parser: ^6.0.4
+  peerDependencies:
+    postcss: ^8.1.0
+  checksum: 45c3dff41d0cddb510752ed92fe8c7fc66e5cf88f4988314655419d3ecdf1dc66f484a25ee73f4f292da5da851a0fdba0ec4d59bdedeee935d05b26d31d997ed
+  languageName: node
+  linkType: hard
+
+"postcss-convert-values@npm:^5.1.2":
+  version: 5.1.2
+  resolution: "postcss-convert-values@npm:5.1.2"
+  dependencies:
+    browserslist: ^4.20.3
+    postcss-value-parser: ^4.2.0
+  peerDependencies:
+    postcss: ^8.2.15
+  checksum: b1615daf12d3425bf4edee9451de402702f41019ccfc85f7883d87438becf533b3061a5a3567865029c534147a6c90e89b4c42ae6741c768c879a68d35aea812
+  languageName: node
+  linkType: hard
+
 "postcss-custom-media@npm:^8.0.2":
   version: 8.0.2
   resolution: "postcss-custom-media@npm:8.0.2"
@@ -7504,6 +7796,42 @@ __metadata:
   languageName: node
   linkType: hard
 
+"postcss-discard-comments@npm:^5.1.2":
+  version: 5.1.2
+  resolution: "postcss-discard-comments@npm:5.1.2"
+  peerDependencies:
+    postcss: ^8.2.15
+  checksum: abfd064ebc27aeaf5037643dd51ffaff74d1fa4db56b0523d073ace4248cbb64ffd9787bd6924b0983a9d0bd0e9bf9f10d73b120e50391dc236e0d26c812fa2a
+  languageName: node
+  linkType: hard
+
+"postcss-discard-duplicates@npm:^5.1.0":
+  version: 5.1.0
+  resolution: "postcss-discard-duplicates@npm:5.1.0"
+  peerDependencies:
+    postcss: ^8.2.15
+  checksum: 88d6964201b1f4ed6bf7a32cefe68e86258bb6e42316ca01d9b32bdb18e7887d02594f89f4a2711d01b51ea6e3fcca8c54be18a59770fe5f4521c61d3eb6ca35
+  languageName: node
+  linkType: hard
+
+"postcss-discard-empty@npm:^5.1.1":
+  version: 5.1.1
+  resolution: "postcss-discard-empty@npm:5.1.1"
+  peerDependencies:
+    postcss: ^8.2.15
+  checksum: 970adb12fae5c214c0768236ad9a821552626e77dedbf24a8213d19cc2c4a531a757cd3b8cdd3fc22fb1742471b8692a1db5efe436a71236dec12b1318ee8ff4
+  languageName: node
+  linkType: hard
+
+"postcss-discard-overridden@npm:^5.1.0":
+  version: 5.1.0
+  resolution: "postcss-discard-overridden@npm:5.1.0"
+  peerDependencies:
+    postcss: ^8.2.15
+  checksum: d64d4a545aa2c81b22542895cfcddc787d24119f294d35d29b0599a1c818b3cc51f4ee80b80f5a0a09db282453dd5ac49f104c2117cc09112d0ac9b40b499a41
+  languageName: node
+  linkType: hard
+
 "postcss-double-position-gradients@npm:^3.1.1":
   version: 3.1.2
   resolution: "postcss-double-position-gradients@npm:3.1.2"
@@ -7657,6 +7985,80 @@ __metadata:
   languageName: node
   linkType: hard
 
+"postcss-merge-longhand@npm:^5.1.6":
+  version: 5.1.6
+  resolution: "postcss-merge-longhand@npm:5.1.6"
+  dependencies:
+    postcss-value-parser: ^4.2.0
+    stylehacks: ^5.1.0
+  peerDependencies:
+    postcss: ^8.2.15
+  checksum: 327b5474d9e84b8d8aed3e24444938cbf1274326d357b551b700203f03f7bcb615381b92b933770ffe35b154677205af08875373413f2c5e625c34730599707b
+  languageName: node
+  linkType: hard
+
+"postcss-merge-rules@npm:^5.1.2":
+  version: 5.1.2
+  resolution: "postcss-merge-rules@npm:5.1.2"
+  dependencies:
+    browserslist: ^4.16.6
+    caniuse-api: ^3.0.0
+    cssnano-utils: ^3.1.0
+    postcss-selector-parser: ^6.0.5
+  peerDependencies:
+    postcss: ^8.2.15
+  checksum: fcbc415999a35248dcce03064a5456123663507b05ff0f1de5c97b6effc68014ab0ffd5f06e71cf08d401f037932e271b7db33124c73260f3630a1441212a0c8
+  languageName: node
+  linkType: hard
+
+"postcss-minify-font-values@npm:^5.1.0":
+  version: 5.1.0
+  resolution: "postcss-minify-font-values@npm:5.1.0"
+  dependencies:
+    postcss-value-parser: ^4.2.0
+  peerDependencies:
+    postcss: ^8.2.15
+  checksum: 35e858fa41efa05acdeb28f1c76579c409fdc7eabb1744c3bd76e895bb9fea341a016746362a67609688ab2471f587202b9a3e14ea28ad677754d663a2777ece
+  languageName: node
+  linkType: hard
+
+"postcss-minify-gradients@npm:^5.1.1":
+  version: 5.1.1
+  resolution: "postcss-minify-gradients@npm:5.1.1"
+  dependencies:
+    colord: ^2.9.1
+    cssnano-utils: ^3.1.0
+    postcss-value-parser: ^4.2.0
+  peerDependencies:
+    postcss: ^8.2.15
+  checksum: 27354072a07c5e6dab36731103b94ca2354d4ed3c5bc6aacfdf2ede5a55fa324679d8fee5450800bc50888dbb5e9ed67569c0012040c2be128143d0cebb36d67
+  languageName: node
+  linkType: hard
+
+"postcss-minify-params@npm:^5.1.3":
+  version: 5.1.3
+  resolution: "postcss-minify-params@npm:5.1.3"
+  dependencies:
+    browserslist: ^4.16.6
+    cssnano-utils: ^3.1.0
+    postcss-value-parser: ^4.2.0
+  peerDependencies:
+    postcss: ^8.2.15
+  checksum: 2d218f6b82474310c866b690210595a5e6a4c695f174f9100b018adb4a171bd67b1adaba26c241b3d41a4ea0f4962e0f5a77cf12ae60d9db76f80b0c7cbd6bcd
+  languageName: node
+  linkType: hard
+
+"postcss-minify-selectors@npm:^5.2.1":
+  version: 5.2.1
+  resolution: "postcss-minify-selectors@npm:5.2.1"
+  dependencies:
+    postcss-selector-parser: ^6.0.5
+  peerDependencies:
+    postcss: ^8.2.15
+  checksum: 6fdbc84f99a60d56b43df8930707da397775e4c36062a106aea2fd2ac81b5e24e584a1892f4baa4469fa495cb87d1422560eaa8f6c9d500f9f0b691a5f95bab5
+  languageName: node
+  linkType: hard
+
 "postcss-nested@npm:^5.0.6":
   version: 5.0.6
   resolution: "postcss-nested@npm:5.0.6"
@@ -7680,6 +8082,105 @@ __metadata:
   languageName: node
   linkType: hard
 
+"postcss-normalize-charset@npm:^5.1.0":
+  version: 5.1.0
+  resolution: "postcss-normalize-charset@npm:5.1.0"
+  peerDependencies:
+    postcss: ^8.2.15
+  checksum: e79d92971fc05b8b3c9b72f3535a574e077d13c69bef68156a0965f397fdf157de670da72b797f57b0e3bac8f38155b5dd1735ecab143b9cc4032d72138193b4
+  languageName: node
+  linkType: hard
+
+"postcss-normalize-display-values@npm:^5.1.0":
+  version: 5.1.0
+  resolution: "postcss-normalize-display-values@npm:5.1.0"
+  dependencies:
+    postcss-value-parser: ^4.2.0
+  peerDependencies:
+    postcss: ^8.2.15
+  checksum: b6eb7b9b02c3bdd62bbc54e01e2b59733d73a1c156905d238e178762962efe0c6f5104544da39f32cade8a4fb40f10ff54b63a8ebfbdff51e8780afb9fbdcf86
+  languageName: node
+  linkType: hard
+
+"postcss-normalize-positions@npm:^5.1.1":
+  version: 5.1.1
+  resolution: "postcss-normalize-positions@npm:5.1.1"
+  dependencies:
+    postcss-value-parser: ^4.2.0
+  peerDependencies:
+    postcss: ^8.2.15
+  checksum: d9afc233729c496463c7b1cdd06732469f401deb387484c3a2422125b46ec10b4af794c101f8c023af56f01970b72b535e88373b9058ecccbbf88db81662b3c4
+  languageName: node
+  linkType: hard
+
+"postcss-normalize-repeat-style@npm:^5.1.1":
+  version: 5.1.1
+  resolution: "postcss-normalize-repeat-style@npm:5.1.1"
+  dependencies:
+    postcss-value-parser: ^4.2.0
+  peerDependencies:
+    postcss: ^8.2.15
+  checksum: 2c6ad2b0ae10a1fda156b948c34f78c8f1e185513593de4d7e2480973586675520edfec427645fa168c337b0a6b3ceca26f92b96149741ca98a9806dad30d534
+  languageName: node
+  linkType: hard
+
+"postcss-normalize-string@npm:^5.1.0":
+  version: 5.1.0
+  resolution: "postcss-normalize-string@npm:5.1.0"
+  dependencies:
+    postcss-value-parser: ^4.2.0
+  peerDependencies:
+    postcss: ^8.2.15
+  checksum: 6e549c6e5b2831e34c7bdd46d8419e2278f6af1d5eef6d26884a37c162844e60339340c57e5e06058cdbe32f27fc6258eef233e811ed2f71168ef2229c236ada
+  languageName: node
+  linkType: hard
+
+"postcss-normalize-timing-functions@npm:^5.1.0":
+  version: 5.1.0
+  resolution: "postcss-normalize-timing-functions@npm:5.1.0"
+  dependencies:
+    postcss-value-parser: ^4.2.0
+  peerDependencies:
+    postcss: ^8.2.15
+  checksum: da550f50e90b0b23e17b67449a7d1efd1aa68288e66d4aa7614ca6f5cc012896be1972b7168eee673d27da36504faccf7b9f835c0f7e81243f966a42c8c030aa
+  languageName: node
+  linkType: hard
+
+"postcss-normalize-unicode@npm:^5.1.0":
+  version: 5.1.0
+  resolution: "postcss-normalize-unicode@npm:5.1.0"
+  dependencies:
+    browserslist: ^4.16.6
+    postcss-value-parser: ^4.2.0
+  peerDependencies:
+    postcss: ^8.2.15
+  checksum: 3570c90050f190811b5dbf7b4cf4f30f0b627c1ba5fbe5ad332e8b0aa7ef14b3d0aa2af1cb1074d0267aec8c9771e28866d867c8a8a0c433b6c34e50445f9c16
+  languageName: node
+  linkType: hard
+
+"postcss-normalize-url@npm:^5.1.0":
+  version: 5.1.0
+  resolution: "postcss-normalize-url@npm:5.1.0"
+  dependencies:
+    normalize-url: ^6.0.1
+    postcss-value-parser: ^4.2.0
+  peerDependencies:
+    postcss: ^8.2.15
+  checksum: 3bd4b3246d6600230bc827d1760b24cb3101827ec97570e3016cbe04dc0dd28f4dbe763245d1b9d476e182c843008fbea80823061f1d2219b96f0d5c724a24c0
+  languageName: node
+  linkType: hard
+
+"postcss-normalize-whitespace@npm:^5.1.1":
+  version: 5.1.1
+  resolution: "postcss-normalize-whitespace@npm:5.1.1"
+  dependencies:
+    postcss-value-parser: ^4.2.0
+  peerDependencies:
+    postcss: ^8.2.15
+  checksum: 12d8fb6d1c1cba208cc08c1830959b7d7ad447c3f5581873f7e185f99a9a4230c43d3af21ca12c818e4690a5085a95b01635b762ad4a7bef69d642609b4c0e19
+  languageName: node
+  linkType: hard
+
 "postcss-opacity-percentage@npm:^1.1.2":
   version: 1.1.2
   resolution: "postcss-opacity-percentage@npm:1.1.2"
@@ -7687,6 +8188,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"postcss-ordered-values@npm:^5.1.3":
+  version: 5.1.3
+  resolution: "postcss-ordered-values@npm:5.1.3"
+  dependencies:
+    cssnano-utils: ^3.1.0
+    postcss-value-parser: ^4.2.0
+  peerDependencies:
+    postcss: ^8.2.15
+  checksum: 6f3ca85b6ceffc68aadaf319d9ee4c5ac16d93195bf8cba2d1559b631555ad61941461cda6d3909faab86e52389846b2b36345cff8f0c3f4eb345b1b8efadcf9
+  languageName: node
+  linkType: hard
+
 "postcss-overflow-shorthand@npm:^3.0.3":
   version: 3.0.4
   resolution: "postcss-overflow-shorthand@npm:3.0.4"
@@ -7786,6 +8299,29 @@ __metadata:
   languageName: node
   linkType: hard
 
+"postcss-reduce-initial@npm:^5.1.0":
+  version: 5.1.0
+  resolution: "postcss-reduce-initial@npm:5.1.0"
+  dependencies:
+    browserslist: ^4.16.6
+    caniuse-api: ^3.0.0
+  peerDependencies:
+    postcss: ^8.2.15
+  checksum: 2cb10fa3fa7d7df9e4376df64d19177debd5cfe6d8fde52327d27de425eb28d5d85fa45c857cf7c0aed35d16455b6f4762b53959480f92a1dfa4b51a1d780a32
+  languageName: node
+  linkType: hard
+
+"postcss-reduce-transforms@npm:^5.1.0":
+  version: 5.1.0
+  resolution: "postcss-reduce-transforms@npm:5.1.0"
+  dependencies:
+    postcss-value-parser: ^4.2.0
+  peerDependencies:
+    postcss: ^8.2.15
+  checksum: 0c6af2cba20e3ff63eb9ad045e634ddfb9c3e5c0e614c020db2a02f3aa20632318c4ede9e0c995f9225d9a101e673de91c0a6e10bb2fa5da6d6c75d15a55882f
+  languageName: node
+  linkType: hard
+
 "postcss-replace-overflow-wrap@npm:^4.0.0":
   version: 4.0.0
   resolution: "postcss-replace-overflow-wrap@npm:4.0.0"
@@ -7818,7 +8354,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"postcss-selector-parser@npm:^6.0.10, postcss-selector-parser@npm:^6.0.4, postcss-selector-parser@npm:^6.0.6, postcss-selector-parser@npm:^6.0.9":
+"postcss-selector-parser@npm:^6.0.10, postcss-selector-parser@npm:^6.0.4, postcss-selector-parser@npm:^6.0.5, postcss-selector-parser@npm:^6.0.6, postcss-selector-parser@npm:^6.0.9":
   version: 6.0.10
   resolution: "postcss-selector-parser@npm:6.0.10"
   dependencies:
@@ -7828,6 +8364,29 @@ __metadata:
   languageName: node
   linkType: hard
 
+"postcss-svgo@npm:^5.1.0":
+  version: 5.1.0
+  resolution: "postcss-svgo@npm:5.1.0"
+  dependencies:
+    postcss-value-parser: ^4.2.0
+    svgo: ^2.7.0
+  peerDependencies:
+    postcss: ^8.2.15
+  checksum: d86eb5213d9f700cf5efe3073799b485fb7cacae0c731db3d7749c9c2b1c9bc85e95e0baeca439d699ff32ea24815fc916c4071b08f67ed8219df229ce1129bd
+  languageName: node
+  linkType: hard
+
+"postcss-unique-selectors@npm:^5.1.1":
+  version: 5.1.1
+  resolution: "postcss-unique-selectors@npm:5.1.1"
+  dependencies:
+    postcss-selector-parser: ^6.0.5
+  peerDependencies:
+    postcss: ^8.2.15
+  checksum: 637e7b786e8558265775c30400c54b6b3b24d4748923f4a39f16a65fd0e394f564ccc9f0a1d3c0e770618a7637a7502ea1d0d79f731d429cb202255253c23278
+  languageName: node
+  linkType: hard
+
 "postcss-value-parser@npm:^4.0.0, postcss-value-parser@npm:^4.2.0":
   version: 4.2.0
   resolution: "postcss-value-parser@npm:4.2.0"
@@ -8062,6 +8621,7 @@ __metadata:
     next: 12.2.2
     postcss: ^8.4.16
     postcss-flexbugs-fixes: ^5.0.2
+    postcss-import: ^14.1.0
     postcss-nested: ^5.0.6
     postcss-preset-env: ^7.7.2
     react: 18.2.0
@@ -8082,12 +8642,14 @@ __metadata:
     "@typescript-eslint/eslint-plugin": latest
     "@typescript-eslint/parser": latest
     autoprefixer: ^10.4.8
+    cssnano: ^5.1.12
     cypress: ^10.3.1
     eslint: ^8.21.0
     eslint-config-prettier: ^8.5.0
     eslint-plugin-prettier: ^4.2.1
     eslint-plugin-react: latest
     postcss: ^8.4.16
+    postcss-combine-duplicated-selectors: ^10.0.3
     postcss-import: ^14.1.0
     postcss-nested: ^5.0.6
     prettier: ^2.7.1
@@ -8655,7 +9217,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"source-map@npm:^0.6.0":
+"source-map@npm:^0.6.0, source-map@npm:^0.6.1":
   version: 0.6.1
   resolution: "source-map@npm:0.6.1"
   checksum: 59ce8640cf3f3124f64ac289012c2b8bd377c238e316fb323ea22fbfe83da07d81e000071d7242cad7a23cd91c7de98e4df8830ec3f133cb6133a5f6e9f67bc2
@@ -8759,6 +9321,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"stable@npm:^0.1.8":
+  version: 0.1.8
+  resolution: "stable@npm:0.1.8"
+  checksum: 2ff482bb100285d16dd75cd8f7c60ab652570e8952c0bfa91828a2b5f646a0ff533f14596ea4eabd48bb7f4aeea408dce8f8515812b975d958a4cc4fa6b9dfeb
+  languageName: node
+  linkType: hard
+
 "start-server-and-test@npm:^1.14.0":
   version: 1.14.0
   resolution: "start-server-and-test@npm:1.14.0"
@@ -8907,6 +9476,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"stylehacks@npm:^5.1.0":
+  version: 5.1.0
+  resolution: "stylehacks@npm:5.1.0"
+  dependencies:
+    browserslist: ^4.16.6
+    postcss-selector-parser: ^6.0.4
+  peerDependencies:
+    postcss: ^8.2.15
+  checksum: 310b3452c11fd443b0d327aa2d5b43ae7479407339204b7ad11cf2e16d33b690c1cbf47a21b737ef112411e53563f0f996c5fa3642d135c896329950a008277f
+  languageName: node
+  linkType: hard
+
 "supports-color@npm:^5.3.0":
   version: 5.5.0
   resolution: "supports-color@npm:5.5.0"
@@ -8941,6 +9522,23 @@ __metadata:
   languageName: node
   linkType: hard
 
+"svgo@npm:^2.7.0":
+  version: 2.8.0
+  resolution: "svgo@npm:2.8.0"
+  dependencies:
+    "@trysound/sax": 0.2.0
+    commander: ^7.2.0
+    css-select: ^4.1.3
+    css-tree: ^1.1.3
+    csso: ^4.2.0
+    picocolors: ^1.0.0
+    stable: ^0.1.8
+  bin:
+    svgo: bin/svgo
+  checksum: b92f71a8541468ffd0b81b8cdb36b1e242eea320bf3c1a9b2c8809945853e9d8c80c19744267eb91cabf06ae9d5fff3592d677df85a31be4ed59ff78534fa420
+  languageName: node
+  linkType: hard
+
 "tar@npm:^6.1.11, tar@npm:^6.1.2":
   version: 6.1.11
   resolution: "tar@npm:6.1.11"
@@ -9505,6 +10103,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"yaml@npm:^1.10.2":
+  version: 1.10.2
+  resolution: "yaml@npm:1.10.2"
+  checksum: ce4ada136e8a78a0b08dc10b4b900936912d15de59905b2bf415b4d33c63df1d555d23acb2a41b23cf9fb5da41c256441afca3d6509de7247daa062fd2c5ea5f
+  languageName: node
+  linkType: hard
+
 "yaml@npm:^2.1.1":
   version: 2.1.1
   resolution: "yaml@npm:2.1.1"