Skip to content

fix(styles): import Tailwind's theme layer so spacing utilities work #740

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
michaelpporter merged 2 commits into from
Jul 25, 2026
Merged

fix(styles): import Tailwind's theme layer so spacing utilities work #740

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
fe4d325
fix(styles): import Tailwind's theme layer so spacing utilities work
michaelpporter Jul 25, 2026
84c3ef8
fix(build): unbreak CI — pin TypeScript to 6.x, drop removed baseUrl
michaelpporter Jul 25, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0

### Fixed

* The tree codeblock's copy button now floats in the top-right corner ([#736](https://github.com/michaelpporter/breadcrumbs/issues/736)). It was rendering over the first row's collapse arrow: the button is positioned with Tailwind utilities, but this plugin imports only Tailwind's utilities layer, so the numeric spacing scale it needs is unavailable and the offsets compiled to nothing — leaving the button at its static top-left position. Its placement (and the row padding that keeps note flair clear of it) is now written as plain CSS against Obsidian's own size variables.
* Restored every missing margin, padding, gap, width and offset across the plugin. The stylesheet imported only Tailwind's utilities layer, but the numeric spacing scale that `p-2`, `gap-1`, `w-48`, `top-2` and friends resolve against lives in its theme layer — so all 39 of those classes, used in 15 files, were silently dropped at build time. Importing the theme layer brings them back. Expect slightly roomier spacing in the settings tab and the side views, and correctly positioned floating buttons in codeblocks. Preflight (Tailwind's browser reset) is deliberately still excluded, so nothing about Obsidian's own styling changes.
* The tree codeblock's copy button now floats in the top-right corner ([#736](https://github.com/michaelpporter/breadcrumbs/issues/736)) instead of rendering on top of the first row's collapse arrow. It was a casualty of the missing spacing scale above: the button was already positioned as floating, but its offsets compiled to nothing, so it fell back to the top-left of the tree.
* Links with a block or heading reference now point at the note itself ([#734](https://github.com/michaelpporter/breadcrumbs/issues/734)). `down:: [[2#^71f2d9]]` in `1.md` used to create an edge to a phantom `2#^71f2d9.md` node, so `1.md`'s tree looked right while `2.md` never showed `1.md` as its parent. The subpath is now stripped before resolving, for both frontmatter and inline fields and in list notes, and regardless of which folders the notes live in. A subpath-only link (`[[#^71f2d9]]`, pointing inside the same note) creates no edge.
* Inline Dataview fields no longer claim links that sit outside them ([#731](https://github.com/michaelpporter/breadcrumbs/issues/731)). `(down:: [[y]]) [[x]]` in `x.md` used to make **both** `[[y]]` and `[[x]]` `down` children — including a self-loop from the note to itself — because the builder attributed every link on a line to whichever field opened that line. Bracketed fields now end at their closing bracket, matching Dataview, so only `[[y]]` becomes an edge and links elsewhere on the line stay ordinary prose. Multiple fields on one line (`(up:: [[p]]) (down:: [[c]])`) are also parsed separately now. Bare line-level fields (`down:: [[y]], [[x]]`) are unchanged — their value is still the rest of the line.

Expand Down
44 changes: 2 additions & 42 deletions bun.lock
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -63,7 +63,7 @@
"svelte-preprocess": "6.0.5",
"tailwindcss": "^4.3.3",
"tslib": "2.8.1",
"typescript": "^7.0.2",
"typescript": "^6.0.3",
"typescript-eslint": "^8.65.0",
"vite-plugin-wasm": "^3.6.0",
"vitest": "4.1.10"
Expand Down
5 changes: 2 additions & 3 deletions src/components/codeblocks/CodeblockMarkmap.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -270,16 +270,15 @@

{#if code}
<div class="relative">
<div class="absolute left-2 top-2 flex" style="z-index: 1;">
<div class="absolute left-2 top-2 z-10 flex">
<CopyToClipboardButton
text={code}
cls="clickable-icon nav-action-button"
/>
</div>
<div
bind:this={toolbar_el}
class="absolute"
style="z-index: 1; bottom: 0.5rem; right: 0.5rem;"
class="absolute bottom-2 right-2 z-10"
></div>
<svg
bind:this={svg_el}
Expand Down
2 changes: 1 addition & 1 deletion src/components/codeblocks/CodeblockMermaid.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -163,7 +163,7 @@

{#if code}
<div class="relative">
<div class="absolute left-2 top-2 flex">
<div class="absolute left-2 top-2 z-10 flex">
<CopyToClipboardButton
text={code}
cls="clickable-icon nav-action-button"
Expand Down
6 changes: 3 additions & 3 deletions src/components/codeblocks/CodeblockTree.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -120,8 +120,8 @@
{/if}

{#if data && !data.is_empty()}
<div class="BC-codeblock-tree-items">
<div class="BC-codeblock-tree-buttons">
<div class="BC-codeblock-tree-items relative">
<div class="absolute top-2 right-2 z-10 flex">
<CopyToClipboardButton
cls="clickable-icon nav-action-button"
text={() =>
Expand All @@ -141,7 +141,7 @@
</div>

<!-- NOTE: Padded so that the flair doesn't interfere with the floating buttons -->
<div class="BC-codeblock-tree-content">
<div class="pr-10">
<NestedEdgeList
{plugin}
{node_stringify_options}
Expand Down
6 changes: 3 additions & 3 deletions src/graph/builders/explicit/typed_link.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,13 +6,13 @@ import { resolve_relative_target_path } from "src/utils/obsidian";
import { GCEdgeData, GCNodeData } from "wasm/pkg/breadcrumbs_graph_wasm";

/** A Dataview inline field found on a line, with the span its value occupies. */
export type InlineField = {
export interface InlineField {
field: string;
/** Column of the first character of the value (inclusive). */
value_start: number;
/** Column just past the last character of the value (exclusive). */
value_end: number;
};
}

// A bare inline field opening a line: "same:: ...", "- same:: ...", "up :: ...".
// Its value runs to the end of the line.
Expand All @@ -28,7 +28,7 @@ const WRAPPED_FIELD_REGEX = /[([]\s*([\w][\w\s-]*)\s*::\s*/g;
* (`[down:: [[X]]]`) and markdown links (`(down:: [X](y))`) close correctly.
*/
const find_close_bracket = (line: string, open_index: number): number => {
const open = line[open_index]!;
const open = line[open_index];
const close = open === "(" ? ")" : "]";

let depth = 0;
Expand Down
28 changes: 6 additions & 22 deletions src/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,12 @@ Outputs to /styles.css, for Obsidian to use.

*/

/* The theme layer defines `--spacing`, which every numeric spacing utility
(p-2, gap-1, top-2, w-10, …) resolves against — without it Tailwind silently
drops them all at build time. Imported deliberately instead of the full
`@import "tailwindcss"` bundle: that also pulls in Preflight, a browser
reset that would fight Obsidian's own app styling. */
@import "tailwindcss/theme" layer(theme);
@import "tailwindcss/utilities";

/* Breadcrumbs */
Expand Down Expand Up @@ -163,28 +169,6 @@ Outputs to /styles.css, for Obsidian to use.
width: 100%;
}

/* Float the tree codeblock's copy button in the top-right corner.
Written by hand rather than with Tailwind's `top-2 right-2`: this repo
imports only `tailwindcss/utilities`, so the numeric spacing scale (which
lives in the theme layer) is unavailable and those utilities compile to
nothing — leaving the button at its static position, over the first row. */
.BC-codeblock-tree-items {
position: relative;
}

.BC-codeblock-tree-buttons {
position: absolute;
top: var(--size-4-2);
right: var(--size-4-2);
z-index: 1;
display: flex;
}

/* Keep tree rows (and their flair) clear of the floating button */
.BC-codeblock-tree-content {
padding-right: var(--size-4-10, 2.5rem);
}

/* markmap node text — inherit Obsidian's theme colour so dark mode is readable */
.BC-codeblock-markmap svg foreignObject div {
color: var(--text-normal);
Expand Down
2 changes: 1 addition & 1 deletion src/utils/obsidian.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,7 @@ export const resolve_relative_target_path = (
// mint a bogus unresolved node ("2#^71f2d9.md") and the real target note
// would never see the reverse edge. `#` is illegal in vault filenames, so
// the first one always starts a subpath.
const linkpath = relative_target_path.split("#")[0]!.trim();
const linkpath = relative_target_path.split("#")[0].trim();

// [[#^block]] / [[#Heading]] point back into the source note — not an edge.
if (!linkpath) return null;
Expand Down
5 changes: 3 additions & 2 deletions tsconfig.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,9 @@

"compilerOptions": {
"types": ["svelte", "node", "obsidian-typings"],
"baseUrl": ".",
"ignoreDeprecations": "6.0",
// Resolves repo-root-relative imports ("src/…", "wasm/pkg/…"). Replaces
// `baseUrl: "."`, which TypeScript 7 removed.
"paths": { "*": ["./*"] },
"inlineSources": true,
"module": "ESNext",
"target": "ES2022",
Expand Down