diff --git a/frontend/src/components/Common/UplotChart.tsx b/frontend/src/components/Common/UplotChart.tsx index d4a9c97..6be1676 100644 --- a/frontend/src/components/Common/UplotChart.tsx +++ b/frontend/src/components/Common/UplotChart.tsx @@ -1,10 +1,9 @@ import { useEffect, useLayoutEffect, useRef, useState } from "react" import uPlot from "uplot" -import "uplot/dist/uPlot.min.css" -// After uPlot's own sheet, and beside this component rather than in the -// dashboard chunk: a chart on Health or Home is styled without a dashboard -// having been visited first. +// Beside this component rather than in the dashboard chunk: a chart on Health +// or Home is styled without a dashboard having been visited first. uPlot's own +// sheet comes in through `vendor.css`. import "./uplot.css" import type { HistoryPoint } from "@/client" diff --git a/frontend/src/components/Dashboard/DashboardEditor.tsx b/frontend/src/components/Dashboard/DashboardEditor.tsx index 28a3d17..58604eb 100644 --- a/frontend/src/components/Dashboard/DashboardEditor.tsx +++ b/frontend/src/components/Dashboard/DashboardEditor.tsx @@ -9,7 +9,6 @@ import { type Position, setTransform, } from "react-grid-layout" -import "react-grid-layout/css/styles.css" import { type ApiError, diff --git a/frontend/src/components/Flow/BrainView.tsx b/frontend/src/components/Flow/BrainView.tsx index 31c61c0..8a7b7db 100644 --- a/frontend/src/components/Flow/BrainView.tsx +++ b/frontend/src/components/Flow/BrainView.tsx @@ -9,7 +9,6 @@ import { ReactFlowProvider, useReactFlow, } from "@xyflow/react" -import "@xyflow/react/dist/style.css" import { forceCollide, forceLink, diff --git a/frontend/src/components/Flow/FlowEditor.tsx b/frontend/src/components/Flow/FlowEditor.tsx index 42a4bf6..8ae0f69 100644 --- a/frontend/src/components/Flow/FlowEditor.tsx +++ b/frontend/src/components/Flow/FlowEditor.tsx @@ -1,3 +1,10 @@ +import { + useMutation, + useQuery, + useQueryClient, + useSuspenseQuery, +} from "@tanstack/react-query" +import { useNavigate } from "@tanstack/react-router" import { Background, BackgroundVariant, @@ -13,14 +20,6 @@ import { useStore, useUpdateNodeInternals, } from "@xyflow/react" -import "@xyflow/react/dist/style.css" -import { - useMutation, - useQuery, - useQueryClient, - useSuspenseQuery, -} from "@tanstack/react-query" -import { useNavigate } from "@tanstack/react-router" import { Workflow } from "lucide-react" import { motion } from "motion/react" import { useCallback, useEffect, useMemo, useRef, useState } from "react" diff --git a/frontend/src/index.css b/frontend/src/index.css index be747f8..4d5b59a 100644 --- a/frontend/src/index.css +++ b/frontend/src/index.css @@ -1,5 +1,6 @@ @import "tailwindcss"; @import "tw-animate-css"; +@import "./vendor.css"; @custom-variant dark (&:is(.dark *)); diff --git a/frontend/src/vendor.css b/frontend/src/vendor.css new file mode 100644 index 0000000..ecd6c4d --- /dev/null +++ b/frontend/src/vendor.css @@ -0,0 +1,10 @@ +/* + * The libraries' own stylesheets, in Tailwind's `base` layer. + * + * Imported from TS they were unlayered, so our overrides beat them only by + * loading later, and lost wherever a lazy chunk brought the library's sheet in + * after ours. In `base` every sheet of ours and every utility wins over them. + */ +@import "@xyflow/react/dist/style.css" layer(base); +@import "uplot/dist/uPlot.min.css" layer(base); +@import "react-grid-layout/css/styles.css" layer(base);