chore(preconstruct): inline css via babel config, add themes package

packages/core/nocss/package.json

@@ -1,6 +0,0 @@
-{
-  "internal": true,
-  "main": "../dist/nocss/umd/index.js",
-  "module": "../dist/nocss/esm/index.js",
-  "types": "../dist/nocss/esm/index.d.ts"
-}

packages/core/package.json

@@ -21,8 +21,8 @@
     "zustand": "^3.7.2"
   },
   "peerDependencies": {
-    "react": "16 || 17 || 18",
-    "react-dom": "16 || 17 || 18"
+    "react": ">=18",
+    "react-dom": ">=18"
   },
   "files": [
     "dist",

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

@@ -7,8 +7,10 @@ import InputNode from '../../components/Nodes/InputNode';
 import OutputNode from '../../components/Nodes/OutputNode';
 import SelectionListener from '../../components/SelectionListener';
 import StoreUpdater from '../../components/StoreUpdater';
-// import css from '../../style.css';
-// import theme from '../../theme-default.css';
+
+import '../../style.css';
+import '../../theme-default.css';
+
 import {
   ConnectionLineType,
   ConnectionMode,
@@ -26,11 +28,6 @@ import { createNodeTypes } from '../NodeRenderer/utils';
 import { useNodeOrEdgeTypes } from './utils';
 import Wrapper from './Wrapper';
 
-// if (__INJECT_STYLES__) {
-//   injectStyle(css as unknown as string);
-//   injectStyle(theme as unknown as string);
-// }
-
 const defaultNodeTypes: NodeTypes = {
   input: InputNode,
   default: DefaultNode,

packages/themes/dark/package.json

@@ -0,0 +1,4 @@
+{
+  "main": "dist/react-flow-themes-dark.cjs.js",
+  "module": "dist/react-flow-themes-dark.esm.js"
+}

packages/themes/light/package.json

@@ -0,0 +1,4 @@
+{
+  "main": "dist/react-flow-themes-light.cjs.js",
+  "module": "dist/react-flow-themes-light.esm.js"
+}

packages/themes/package.json

@@ -0,0 +1,17 @@
+{
+  "name": "@react-flow/themes",
+  "version": "11.0.0",
+  "description": "Themes for React Flow",
+  "license": "MIT",
+  "scripts": {
+    "build": "yarn build:darktheme && yarn build:lighttheme",
+    "build:darktheme": "mkdir -p ./dark/dist && cp ./src/react-flow-dark.css ./dark/dist/react-flow-dark.css",
+    "build:lighttheme": "mkdir -p ./light/dist && cp ./src/react-flow-light.css ./dark/dist/react-flow-light.css"
+  },
+  "preconstruct": {
+    "entrypoints": [
+      "dark.js",
+      "light.js"
+    ]
+  }
+}

packages/themes/src/dark.js

@@ -0,0 +1 @@
+import './react-flow-dark.css';

packages/themes/src/light.js

@@ -0,0 +1 @@
+import './react-flow-light.css';

packages/themes/src/react-flow-dark.css

@@ -0,0 +1,3 @@
+.react-flow {
+  background-color: black;
+}

packages/themes/src/react-flow-light.css

@@ -0,0 +1,3 @@
+.react-flow {
+  background-color: red;
+}