Riebeckite
Menu
Color mode

This page is part of Themes in Depth and covers packaging and verification.

Packaging and verification

8. Packaging for distribution

A published theme can use a layout such as:

text
packages/themes/example/
├─ src/
│  └─ index.ts
├─ styles/
│  ├─ theme.css
│  └─ fonts/          # only if needed
├─ package.json
├─ README_ja.md
└─ README.md

Inside the Riebeckite repository, packages/themes/minimal is the template:

text
packages/themes/minimal/
├─ src/index.ts      ← factory that calls defineTheme
├─ styles/theme.css  ← the theme stylesheet
├─ package.json      ← exports ./style.css
├─ README_ja.md
└─ README.md

src/index.ts exposes the theme factory:

ts
import { defineTheme } from "@riebeckite/core";
 
export function exampleTheme() {
  return defineTheme({
    name: "example",
    styles: [
      {
        moduleSpecifier: "@riebeckite/theme-example/style.css",
      },
    ],
  });
}

package.json exports the stylesheet as ./style.css.

A distributed theme depends only on @riebeckite/core and exports its stylesheet as ./style.css. Never reference monorepo paths. For the package surface and current constraints, see "Public packages and import paths" in Framework Reference.

Avoid internal imports such as:

ts
import {
  something,
} from "@riebeckite/core/src/...";

and monorepo-internal paths such as:

text
../../../../packages/core/...

9. Verify

After creating or changing a theme, check in this order:

Diagram source
text
flowchart LR
    Check["check"]
    Inspect["inspect config"]
    Dev["dev"]
    Build["build"]
 
    Check --> Inspect
    Inspect --> Dev
    Dev --> Build
sh
npm exec riebeckite check             # validate config and plugin resolution
npm exec riebeckite inspect config    # inspect the resolved theme
npm exec riebeckite dev               # check the look locally
npm exec riebeckite build             # check the generated output

check / doctor / inspect are read-only. Swapping a theme does not change routes, the manifest, the graph, or client behavior. If the look is wrong, check the cascade order (userCss last) and whether you are targeting rr-* or rb-*.

History

1 changesCollapseExpand
1 + ---
2 + title: Packaging and verification
3 + sidebar:
4 + label: Packaging and verification
5 + order: 60
6 + ---
7 +
8 + This page is part of [Themes in Depth](../theme-system.md) and covers packaging and verification.
9 +
10 + # Packaging and verification
11 +
12 + ## 8. Packaging for distribution
13 +
14 + A published theme can use a layout such as:
15 +
16 + ```text
17 + packages/themes/example/
18 + ├─ src/
19 + │ └─ index.ts
20 + ├─ styles/
21 + │ ├─ theme.css
22 + │ └─ fonts/ # only if needed
23 + ├─ package.json
24 + ├─ README_ja.md
25 + └─ README.md
26 + ```
27 +
28 + Inside the Riebeckite repository, `packages/themes/minimal` is the template:
29 +
30 + ```text
31 + packages/themes/minimal/
32 + ├─ src/index.ts ← factory that calls defineTheme
33 + ├─ styles/theme.css ← the theme stylesheet
34 + ├─ package.json ← exports ./style.css
35 + ├─ README_ja.md
36 + └─ README.md
37 + ```
38 +
39 + `src/index.ts` exposes the theme factory:
40 +
41 + ```ts
42 + import { defineTheme } from "@riebeckite/core";
43 +
44 + export function exampleTheme() {
45 + return defineTheme({
46 + name: "example",
47 + styles: [
48 + {
49 + moduleSpecifier: "@riebeckite/theme-example/style.css",
50 + },
51 + ],
52 + });
53 + }
54 + ```
55 +
56 + `package.json` exports the stylesheet as `./style.css`.
57 +
58 + A distributed theme depends only on `@riebeckite/core` and exports its stylesheet as `./style.css`. Never reference monorepo paths. For the package surface and current constraints, see "Public packages and import paths" in [Framework Reference](../../reference/README.md).
59 +
60 + Avoid internal imports such as:
61 +
62 + ```ts
63 + import {
64 + something,
65 + } from "@riebeckite/core/src/...";
66 + ```
67 +
68 + and monorepo-internal paths such as:
69 +
70 + ```text
71 + ../../../../packages/core/...
72 + ```
73 +
74 + ## 9. Verify
75 +
76 + After creating or changing a theme, check in this order:
77 +
78 + ```mermaid
79 + flowchart LR
80 + Check["check"]
81 + Inspect["inspect config"]
82 + Dev["dev"]
83 + Build["build"]
84 +
85 + Check --> Inspect
86 + Inspect --> Dev
87 + Dev --> Build
88 + ```
89 +
90 + ```sh
91 + npm exec riebeckite check # validate config and plugin resolution
92 + npm exec riebeckite inspect config # inspect the resolved theme
93 + npm exec riebeckite dev # check the look locally
94 + npm exec riebeckite build # check the generated output
95 + ```
96 +
97 + `check` / `doctor` / `inspect` are read-only. Swapping a theme does not change routes, the manifest, the graph, or client behavior. If the look is wrong, check the cascade order (`userCss` last) and whether you are targeting `rr-*` or `rb-*`.
98 +