refactor: finish removing CSS modules

8 files changed, 113 insertions, 112 deletions

diff --git a/src/NodeEditor.css b/src/NodeEditor.css
new file mode 100644
index 0000000..449286e
--- /dev/null
+++ b/src/NodeEditor.css
@@ -0,0 +1,18 @@
+@scope (.__NodeEditor) {
+	:scope {
+		--base: #122236;
+		--surface: #242424;
+		--overlay: #484848;
+		--primary: #1c4c87;
+	
+		--data-any: #36c965;
+		--data-float: #a0a0a0;
+		--data-vector: #5e29d9;
+	}
+	
+	.link {
+		fill: none;
+		stroke: var(--data-float);
+		stroke-width: 2;
+	}
+}
\ No newline at end of file
diff --git a/src/NodeEditor.module.css b/src/NodeEditor.module.css
deleted file mode 100644
index 10cedc3..0000000
--- a/src/NodeEditor.module.css
+++ /dev/null
@@ -1,16 +0,0 @@
-:global(:root) {
-	--base: #122236;
-	--surface: #242424;
-	--overlay: #484848;
-	--primary: #1c4c87;
-
-	--data-any: #36c965;
-	--data-float: #a0a0a0;
-	--data-vector: #5e29d9;
-}
-
-.link {
-	fill: none;
-	stroke: var(--data-float);
-	stroke-width: 2;
-}
\ No newline at end of file
diff --git a/src/NodeEditor.tsx b/src/NodeEditor.tsx
index 0c0f106..fcfee2d 100644
--- a/src/NodeEditor.tsx
+++ b/src/NodeEditor.tsx
@@ -5,7 +5,7 @@ import { nodeRegistry } from './nodes';
 import { SocketHandlers, SocketHandler, NodeInfo } from './node.tsx';
 import { InputSocket } from './dataflow.ts';
 import { Toolbar } from './Toolbar.tsx';
-import styles from './NodeEditor.module.css';
+import './NodeEditor.css';
 
 export const nodeFactory = () => {
 	let nextNodeId = 0;
@@ -234,11 +234,8 @@ const NodeEditor = ({ user, project }) => {
 	};
 
 	return (
-		<>
-		<header>
-			<Toolbar nodes={nodeRegistry} onNodeAdded={onNodeAdded} />
-		</header>
-		<main>
+		<div class="__NodeEditor">
+		<Toolbar nodes={nodeRegistry} onNodeAdded={onNodeAdded} />
 		<svg width="100vw" height="100vh" ref={svgRef} onMouseDown={onBgMouseDown} onWheel={onBgWheel}>
 			<pattern
 				id="bg-grid-major"
@@ -266,8 +263,7 @@ const NodeEditor = ({ user, project }) => {
 				</SocketHandlers.Provider>
 			</g>
 		</svg>
-		</main>
-		</>
+		</div>
 	);
 };
 
diff --git a/src/Toolbar.css b/src/Toolbar.css
new file mode 100644
index 0000000..b96e40c
--- /dev/null
+++ b/src/Toolbar.css
@@ -0,0 +1,78 @@
+@scope (.__Toolbar) {
+	.toolbar {
+		background-color: var(--surface);
+		border-bottom: 1px solid var(--overlay);
+		width: 100%;
+		margin: 0;
+		padding: 0;
+		display: flex;
+		flex-direction: row;
+		align-items: center;
+		justify-content: space-between;
+	
+		> * {
+			flex-grow: 1;
+			display: flex;
+			justify-content: center;
+		}
+		:first-child, :last-child { flex-basis: 0 }
+		:first-child { justify-content: flex-start }
+		:last-child { justify-content: flex-end }
+	
+		> menu {
+			margin: 0;
+			padding: 0;
+			list-style: none;
+			display: flex;
+			flex-direction: row;
+		}
+	
+		h1 {
+			font-size: 1.5rem;
+			font-weight: normal;
+			margin: 0;
+		}
+	
+		button {
+			background-color: transparent;
+			border: none;
+			outline: none;
+			padding: 1rem;
+			color: var(--text);
+			font-size: 1em;
+			:hover { background-color: var(--overlay) }
+		}
+	
+		path {
+			fill: var(--text);
+		}
+	}
+	
+	.addMenu:popover-open {
+		background-color: var(--surface);
+		list-style: none;
+		border: none;
+		position: absolute;
+		inset: unset;
+		width: auto;
+		height: auto;
+		left: 140px;
+		top: 52px;
+		margin: 0;
+		padding: 0;
+		display: flex;
+		flex-direction: column;
+		--shadow-color: 0deg 0% 0%;
+		box-shadow:
+			0.1px 0.4px 0.6px hsl(var(--shadow-color) / 0.04),
+			0.5px 3.3px 4.8px -0.2px hsl(var(--shadow-color) / 0.15),
+			1.4px 10.2px 14.7px -0.5px hsl(var(--shadow-color) / 0.27);
+	
+		button {
+			padding: 4px;
+			width: 100%;
+			text-align: left;
+			&:hover { background-color: var(--overlay) }
+		}
+	}
+}
\ No newline at end of file
diff --git a/src/Toolbar.module.css b/src/Toolbar.module.css
deleted file mode 100644
index edea713..0000000
--- a/src/Toolbar.module.css
+++ /dev/null
@@ -1,76 +0,0 @@
-.toolbar {
-	background-color: var(--surface);
-	border-bottom: 1px solid var(--overlay);
-	width: 100%;
-	margin: 0;
-	padding: 0;
-	display: flex;
-	flex-direction: row;
-	align-items: center;
-	justify-content: space-between;
-
-	> * {
-		flex-grow: 1;
-		display: flex;
-		justify-content: center;
-	}
-	:first-child, :last-child { flex-basis: 0 }
-	:first-child { justify-content: flex-start }
-	:last-child { justify-content: flex-end }
-
-	> menu {
-		margin: 0;
-		padding: 0;
-		list-style: none;
-		display: flex;
-		flex-direction: row;
-	}
-
-	h1 {
-		font-size: 1.5rem;
-		font-weight: normal;
-		margin: 0;
-	}
-
-	button {
-		background-color: transparent;
-		border: none;
-		outline: none;
-		padding: 1rem;
-		color: var(--text);
-		font-size: 1em;
-		:hover { background-color: var(--overlay) }
-	}
-
-	path {
-		fill: var(--text);
-	}
-}
-
-.addMenu:popover-open {
-	background-color: var(--surface);
-	list-style: none;
-	border: none;
-	position: absolute;
-	inset: unset;
-	width: auto;
-	height: auto;
-	left: 140px;
-	top: 52px;
-	margin: 0;
-	padding: 0;
-	display: flex;
-	flex-direction: column;
-	--shadow-color: 0deg 0% 0%;
-	box-shadow:
-		0.1px 0.4px 0.6px hsl(var(--shadow-color) / 0.04),
-		0.5px 3.3px 4.8px -0.2px hsl(var(--shadow-color) / 0.15),
-		1.4px 10.2px 14.7px -0.5px hsl(var(--shadow-color) / 0.27);
-
-	button {
-		padding: 4px;
-		width: 100%;
-		text-align: left;
-		&:hover { background-color: var(--overlay) }
-	}
-}
\ No newline at end of file
diff --git a/src/Toolbar.tsx b/src/Toolbar.tsx
index dded98d..32f53ab 100644
--- a/src/Toolbar.tsx
+++ b/src/Toolbar.tsx
@@ -1,6 +1,6 @@
 import { useId } from 'preact/hooks';
 import { NodeInfo } from './node.tsx';
-import styles from './Toolbar.module.css';
+import './Toolbar.css';
 
 export interface ToolbarProps {
 	nodes: Record<string, NodeInfo>;
@@ -10,12 +10,12 @@ export interface ToolbarProps {
 export const Toolbar = ({ nodes, onNodeAdded = _ => {} }: ToolbarProps) => {
 	const id = useId();
 	return (
-		<div class={styles.toolbar}>
+		<div class="__Toolbar">
 			<menu>
 				<li><button>Edit</button></li>
 				<li><button>Select</button></li>
 				<li>
-					<menu id={id} class={styles.addMenu} popover="auto">
+					<menu id={id} class="addMenu" popover="auto">
 						{Object.entries(nodes).map(([name, node]) => (
 							<li><button onClick={() => onNodeAdded(node)}>{name}</button></li>
 						))}
diff --git a/src/node.module.css b/src/node.css
index 2a65c56..4ec7243 100644
--- a/src/node.module.css
+++ b/src/node.css
@@ -1,3 +1,4 @@
+
 .foreignObject {
 	width: 0;
 	height: 0;
diff --git a/src/node.tsx b/src/node.tsx
index 211398e..cb72734 100644
--- a/src/node.tsx
+++ b/src/node.tsx
@@ -3,7 +3,7 @@ import { useContext } from 'preact/hooks';
 import { batch, Signal } from '@preact/signals';
 import { InputSocket } from './dataflow.ts';
 import { cls } from './util.ts';
-import styles from './node.module.css';
+import './node.css';
 
 export type SocketHandler = (nodeId: number, socket: string, event: MouseEvent) => void;
 export interface SocketHandlers {
@@ -74,7 +74,7 @@ export interface InputProps<T> {
 
 export const InputAny = ({ name, label }: Omit<InputProps<any>, 'value'>) => {
 	return (
-		<li class={cls(styles.in)}>
+		<li class="in">
 			<InSocket name={name} />
 			{label}
 		</li>
@@ -83,7 +83,7 @@ export const InputAny = ({ name, label }: Omit<InputProps<any>, 'value'>) => {
 
 export const InputArray = ({ name, label }: Omit<InputProps<any>, 'value'>) => {
 	return (
-		<li class={cls(styles.in, styles.number)}>
+		<li class="in number">
 			<InSocket name={name} />
 			{label}
 		</li>
@@ -95,7 +95,7 @@ const InputNum = (parseFunc: (string) => number) => ({ name, label, value }: Inp
 		value.value = parseFunc((event.target as HTMLInputElement).value);
 	}
 	return (
-		<li class={cls(styles.in, styles.number, value.link.value && styles.linked)}>
+		<li class={'in number' + (value.link.value ? ' linked' : '')}>
 			<InSocket name={name} />
 			<span>{label}</span>
 			<input type="number" value={value.manual.value} onInput={onInput} />
@@ -113,7 +113,7 @@ export const InputVector = ({ name, label, value }: InputProps<[number, number,
 		value.value = newValue;
 	};
 	return (
-		<li class={cls(styles.in, styles.vector, value.link.value && styles.linked)}>
+		<li class={'in vector' + (value.link.value ? ' linked' : '')}>
 			<div>
 				<InSocket name={name} />
 				{label}
@@ -134,7 +134,7 @@ export const InputSelect = ({ name, label, value, options }: InputSelectProps) =
 		value.value = (event.target as HTMLSelectElement).value;
 	}
 	return (
-		<li class={cls(styles.in, styles.select, value.link.value && styles.linked)}>
+		<li class={'in select' + (value.link.value ? ' linked' : '')}>
 			<InSocket name={name} />
 			<select aria-label={label} onChange={onChange}>
 				{Array.isArray(options)
@@ -157,7 +157,7 @@ export interface OutputProps {
 
 const Output = ({ name, label, type }: OutputProps & { type: string }) => {
 	return (
-		<li class={cls(styles.out, styles[type])}>
+		<li class={'out ' + type}>
 			{label}
 			<OutSocket name={name} />
 		</li>
@@ -194,8 +194,8 @@ export const NodeShell = ({ id, name, x, y, children }: NodeShellProps) => {
 	};
 
 	return (
-		<foreignObject x={x} y={y} width="0" height="0" class={styles.foreignObject}>
-			<details open tabindex={0} class={styles.node} onMouseDown={onMouseDown}>
+		<foreignObject x={x} y={y} width="0" height="0" class="__NodeShell">
+			<details open tabindex={0} class="node" onMouseDown={onMouseDown}>
 				<summary><span onClick={e => e.stopPropagation()}>{name}</span></summary>
 				<ul>
 					<NodeId.Provider value={id}>