@dxos/ui-theme 0.8.4-staging.ac66bdf99f → 0.9.1-main.c7dcc2e112
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/LICENSE +102 -5
- package/README.md +1 -1
- package/dist/lib/browser/index.mjs +89 -867
- package/dist/lib/browser/index.mjs.map +4 -4
- package/dist/lib/browser/meta.json +1 -1
- package/dist/lib/node-esm/index.mjs +89 -867
- package/dist/lib/node-esm/index.mjs.map +4 -4
- package/dist/lib/node-esm/meta.json +1 -1
- package/dist/plugin/node-cjs/main.css +279 -120
- package/dist/plugin/node-cjs/main.css.map +3 -3
- package/dist/plugin/node-cjs/meta.json +1 -1
- package/dist/plugin/node-cjs/plugins/ThemePlugin.cjs +82 -10
- package/dist/plugin/node-cjs/plugins/ThemePlugin.cjs.map +3 -3
- package/dist/plugin/node-esm/main.css +279 -120
- package/dist/plugin/node-esm/main.css.map +3 -3
- package/dist/plugin/node-esm/meta.json +1 -1
- package/dist/plugin/node-esm/plugins/ThemePlugin.mjs +84 -12
- package/dist/plugin/node-esm/plugins/ThemePlugin.mjs.map +3 -3
- package/dist/types/src/Theme.stories.d.ts.map +1 -1
- package/dist/types/src/defs.d.ts +1 -1
- package/dist/types/src/defs.d.ts.map +1 -1
- package/dist/types/src/fragments/density.d.ts +2 -2
- package/dist/types/src/fragments/density.d.ts.map +1 -1
- package/dist/types/src/fragments/hover.d.ts +0 -1
- package/dist/types/src/fragments/hover.d.ts.map +1 -1
- package/dist/types/src/index.d.ts +0 -1
- package/dist/types/src/index.d.ts.map +1 -1
- package/dist/types/src/plugins/ThemePlugin.d.ts +3 -2
- package/dist/types/src/plugins/ThemePlugin.d.ts.map +1 -1
- package/dist/types/src/util/hash-styles.d.ts +12 -2
- package/dist/types/src/util/hash-styles.d.ts.map +1 -1
- package/dist/types/src/util/mx.d.ts +0 -36
- package/dist/types/src/util/mx.d.ts.map +1 -1
- package/dist/types/src/util/size.d.ts.map +1 -1
- package/dist/types/src/util/valence.d.ts +8 -2
- package/dist/types/src/util/valence.d.ts.map +1 -1
- package/dist/types/tsconfig.tsbuildinfo +1 -1
- package/package.json +14 -21
- package/src/Theme.stories.tsx +94 -27
- package/src/css/DESIGN_SYSTEM.md +187 -0
- package/src/css/base/base.css +2 -2
- package/src/css/components/button.css +57 -12
- package/src/css/components/card.css +14 -0
- package/src/css/components/checkbox.css +3 -3
- package/src/css/components/focus.css +12 -12
- package/src/css/components/link.css +4 -1
- package/src/css/components/panel.css +45 -45
- package/src/css/components/state.css +76 -0
- package/src/css/components/state.md +101 -0
- package/src/css/components/surface.css +86 -11
- package/src/css/components/tag.css +25 -24
- package/src/css/integrations/codemirror.css +4 -3
- package/src/css/integrations/tldraw.css +1 -1
- package/src/css/layout/main.css +6 -0
- package/src/css/layout/size.css +17 -4
- package/src/css/theme/animation.css +31 -0
- package/src/css/theme/palette.css +34 -0
- package/src/css/theme/semantic.css +190 -68
- package/src/css/theme/spacing.css +30 -13
- package/src/css/theme/styles.css +172 -119
- package/src/css/utilities.css +42 -0
- package/src/defs.ts +3 -1
- package/src/fragments/AUDIT.md +0 -2
- package/src/fragments/density.ts +34 -7
- package/src/fragments/hover.ts +0 -2
- package/src/index.ts +1 -1
- package/src/main.css +68 -9
- package/src/plugins/ThemePlugin.ts +102 -14
- package/src/plugins/main.css +10 -7
- package/src/util/hash-styles.ts +54 -42
- package/src/util/mx.ts +1 -126
- package/src/util/valence.ts +15 -5
- package/dist/types/src/theme/components/avatar.d.ts +0 -21
- package/dist/types/src/theme/components/avatar.d.ts.map +0 -1
- package/dist/types/src/theme/components/breadcrumb.d.ts +0 -9
- package/dist/types/src/theme/components/breadcrumb.d.ts.map +0 -1
- package/dist/types/src/theme/components/button.d.ts +0 -15
- package/dist/types/src/theme/components/button.d.ts.map +0 -1
- package/dist/types/src/theme/components/card.d.ts +0 -12
- package/dist/types/src/theme/components/card.d.ts.map +0 -1
- package/dist/types/src/theme/components/dialog.d.ts +0 -17
- package/dist/types/src/theme/components/dialog.d.ts.map +0 -1
- package/dist/types/src/theme/components/focus.d.ts +0 -6
- package/dist/types/src/theme/components/focus.d.ts.map +0 -1
- package/dist/types/src/theme/components/icon-button.d.ts +0 -8
- package/dist/types/src/theme/components/icon-button.d.ts.map +0 -1
- package/dist/types/src/theme/components/icon.d.ts +0 -10
- package/dist/types/src/theme/components/icon.d.ts.map +0 -1
- package/dist/types/src/theme/components/index.d.ts +0 -27
- package/dist/types/src/theme/components/index.d.ts.map +0 -1
- package/dist/types/src/theme/components/input.d.ts +0 -115
- package/dist/types/src/theme/components/input.d.ts.map +0 -1
- package/dist/types/src/theme/components/link.d.ts +0 -7
- package/dist/types/src/theme/components/link.d.ts.map +0 -1
- package/dist/types/src/theme/components/list.d.ts +0 -14
- package/dist/types/src/theme/components/list.d.ts.map +0 -1
- package/dist/types/src/theme/components/main.d.ts +0 -28
- package/dist/types/src/theme/components/main.d.ts.map +0 -1
- package/dist/types/src/theme/components/menu.d.ts +0 -13
- package/dist/types/src/theme/components/menu.d.ts.map +0 -1
- package/dist/types/src/theme/components/message.d.ts +0 -12
- package/dist/types/src/theme/components/message.d.ts.map +0 -1
- package/dist/types/src/theme/components/popover.d.ts +0 -11
- package/dist/types/src/theme/components/popover.d.ts.map +0 -1
- package/dist/types/src/theme/components/scroll-area.d.ts +0 -32
- package/dist/types/src/theme/components/scroll-area.d.ts.map +0 -1
- package/dist/types/src/theme/components/select.d.ts +0 -13
- package/dist/types/src/theme/components/select.d.ts.map +0 -1
- package/dist/types/src/theme/components/separator.d.ts +0 -8
- package/dist/types/src/theme/components/separator.d.ts.map +0 -1
- package/dist/types/src/theme/components/skeleton.d.ts +0 -7
- package/dist/types/src/theme/components/skeleton.d.ts.map +0 -1
- package/dist/types/src/theme/components/splitter.d.ts +0 -4
- package/dist/types/src/theme/components/splitter.d.ts.map +0 -1
- package/dist/types/src/theme/components/status.d.ts +0 -9
- package/dist/types/src/theme/components/status.d.ts.map +0 -1
- package/dist/types/src/theme/components/tag.d.ts +0 -7
- package/dist/types/src/theme/components/tag.d.ts.map +0 -1
- package/dist/types/src/theme/components/toast.d.ts +0 -12
- package/dist/types/src/theme/components/toast.d.ts.map +0 -1
- package/dist/types/src/theme/components/toolbar.d.ts +0 -11
- package/dist/types/src/theme/components/toolbar.d.ts.map +0 -1
- package/dist/types/src/theme/components/tooltip.d.ts +0 -8
- package/dist/types/src/theme/components/tooltip.d.ts.map +0 -1
- package/dist/types/src/theme/components/treegrid.d.ts +0 -10
- package/dist/types/src/theme/components/treegrid.d.ts.map +0 -1
- package/dist/types/src/theme/index.d.ts +0 -4
- package/dist/types/src/theme/index.d.ts.map +0 -1
- package/dist/types/src/theme/primitives/column.d.ts +0 -29
- package/dist/types/src/theme/primitives/column.d.ts.map +0 -1
- package/dist/types/src/theme/primitives/index.d.ts +0 -3
- package/dist/types/src/theme/primitives/index.d.ts.map +0 -1
- package/dist/types/src/theme/primitives/panel.d.ts +0 -13
- package/dist/types/src/theme/primitives/panel.d.ts.map +0 -1
- package/dist/types/src/theme/theme.d.ts +0 -5
- package/dist/types/src/theme/theme.d.ts.map +0 -1
- package/src/css/components/selected.css +0 -30
- package/src/theme/components/avatar.ts +0 -95
- package/src/theme/components/breadcrumb.ts +0 -29
- package/src/theme/components/button.ts +0 -48
- package/src/theme/components/card.ts +0 -102
- package/src/theme/components/dialog.ts +0 -61
- package/src/theme/components/focus.ts +0 -33
- package/src/theme/components/icon-button.ts +0 -18
- package/src/theme/components/icon.ts +0 -28
- package/src/theme/components/index.ts +0 -30
- package/src/theme/components/input.ts +0 -171
- package/src/theme/components/link.ts +0 -25
- package/src/theme/components/list.ts +0 -46
- package/src/theme/components/main.ts +0 -34
- package/src/theme/components/menu.ts +0 -50
- package/src/theme/components/message.ts +0 -40
- package/src/theme/components/popover.ts +0 -41
- package/src/theme/components/scroll-area.ts +0 -115
- package/src/theme/components/select.ts +0 -52
- package/src/theme/components/separator.ts +0 -24
- package/src/theme/components/skeleton.ts +0 -23
- package/src/theme/components/splitter.ts +0 -20
- package/src/theme/components/status.ts +0 -32
- package/src/theme/components/tag.ts +0 -23
- package/src/theme/components/toast.ts +0 -53
- package/src/theme/components/toolbar.ts +0 -35
- package/src/theme/components/tooltip.ts +0 -27
- package/src/theme/components/treegrid.ts +0 -37
- package/src/theme/index.ts +0 -7
- package/src/theme/primitives/column.ts +0 -71
- package/src/theme/primitives/index.ts +0 -6
- package/src/theme/primitives/panel.ts +0 -43
- package/src/theme/theme.ts +0 -87
|
@@ -1 +1 @@
|
|
|
1
|
-
{"inputs":{"src/plugins/ThemePlugin.ts":{"bytes":
|
|
1
|
+
{"inputs":{"src/plugins/ThemePlugin.ts":{"bytes":28566,"imports":[{"path":"@tailwindcss/postcss","kind":"import-statement","external":true},{"path":"@tailwindcss/vite","kind":"import-statement","external":true},{"path":"autoprefixer","kind":"import-statement","external":true},{"path":"node:fs","kind":"import-statement","external":true},{"path":"node:path","kind":"import-statement","external":true},{"path":"postcss-import","kind":"import-statement","external":true},{"path":"postcss-nesting","kind":"import-statement","external":true}],"format":"esm"},"src/css/theme/animation.css":{"bytes":4993,"imports":[]},"src/css/theme/border.css":{"bytes":623,"imports":[]},"src/css/theme/palette.css":{"bytes":3716,"imports":[]},"src/css/theme/semantic.css":{"bytes":10547,"imports":[]},"src/css/theme/spacing.css":{"bytes":4559,"imports":[]},"src/css/theme/styles.css":{"bytes":8508,"imports":[]},"src/css/theme/text.css":{"bytes":1008,"imports":[]},"src/css/base/base.css":{"bytes":828,"imports":[]},"src/css/base/typography.css":{"bytes":3219,"imports":[{"path":"@fontsource-variable/jetbrains-mono/wght-italic.css","kind":"import-rule","external":true},{"path":"@fontsource-variable/jetbrains-mono/wght.css","kind":"import-rule","external":true},{"path":"@fontsource/poiret-one","kind":"import-rule","external":true}]},"src/css/components/button.css":{"bytes":3895,"imports":[]},"src/css/components/card.css":{"bytes":663,"imports":[]},"src/css/components/checkbox.css":{"bytes":1622,"imports":[]},"src/css/components/dialog.css":{"bytes":1597,"imports":[]},"src/css/components/focus.css":{"bytes":5359,"imports":[]},"src/css/components/icon.css":{"bytes":109,"imports":[]},"src/css/components/panel.css":{"bytes":2965,"imports":[]},"src/css/components/link.css":{"bytes":230,"imports":[]},"src/css/components/scrollbar.css":{"bytes":524,"imports":[]},"src/css/components/state.css":{"bytes":3240,"imports":[]},"src/css/components/surface.css":{"bytes":3446,"imports":[]},"src/css/components/tag.css":{"bytes":2725,"imports":[]},"src/css/components/text.css":{"bytes":1996,"imports":[]},"src/css/layout/main.css":{"bytes":6819,"imports":[]},"src/css/layout/native.css":{"bytes":496,"imports":[]},"src/css/layout/positioning.css":{"bytes":322,"imports":[]},"src/css/layout/size.css":{"bytes":6884,"imports":[]},"src/css/utilities.css":{"bytes":3909,"imports":[]},"src/css/integrations/codemirror.css":{"bytes":1851,"imports":[]},"src/css/integrations/tldraw.css":{"bytes":326,"imports":[]},"src/main.css":{"bytes":6005,"imports":[{"path":"tailwindcss","kind":"import-rule","external":true},{"path":"src/css/theme/animation.css","kind":"import-rule","original":"./css/theme/animation.css"},{"path":"src/css/theme/border.css","kind":"import-rule","original":"./css/theme/border.css"},{"path":"src/css/theme/palette.css","kind":"import-rule","original":"./css/theme/palette.css"},{"path":"src/css/theme/semantic.css","kind":"import-rule","original":"./css/theme/semantic.css"},{"path":"src/css/theme/spacing.css","kind":"import-rule","original":"./css/theme/spacing.css"},{"path":"src/css/theme/styles.css","kind":"import-rule","original":"./css/theme/styles.css"},{"path":"src/css/theme/text.css","kind":"import-rule","original":"./css/theme/text.css"},{"path":"src/css/base/base.css","kind":"import-rule","original":"./css/base/base.css"},{"path":"src/css/base/typography.css","kind":"import-rule","original":"./css/base/typography.css"},{"path":"src/css/components/button.css","kind":"import-rule","original":"./css/components/button.css"},{"path":"src/css/components/card.css","kind":"import-rule","original":"./css/components/card.css"},{"path":"src/css/components/checkbox.css","kind":"import-rule","original":"./css/components/checkbox.css"},{"path":"src/css/components/dialog.css","kind":"import-rule","original":"./css/components/dialog.css"},{"path":"src/css/components/focus.css","kind":"import-rule","original":"./css/components/focus.css"},{"path":"src/css/components/icon.css","kind":"import-rule","original":"./css/components/icon.css"},{"path":"src/css/components/panel.css","kind":"import-rule","original":"./css/components/panel.css"},{"path":"src/css/components/link.css","kind":"import-rule","original":"./css/components/link.css"},{"path":"src/css/components/scrollbar.css","kind":"import-rule","original":"./css/components/scrollbar.css"},{"path":"src/css/components/state.css","kind":"import-rule","original":"./css/components/state.css"},{"path":"src/css/components/surface.css","kind":"import-rule","original":"./css/components/surface.css"},{"path":"src/css/components/tag.css","kind":"import-rule","original":"./css/components/tag.css"},{"path":"src/css/components/text.css","kind":"import-rule","original":"./css/components/text.css"},{"path":"src/css/layout/main.css","kind":"import-rule","original":"./css/layout/main.css"},{"path":"src/css/layout/native.css","kind":"import-rule","original":"./css/layout/native.css"},{"path":"src/css/layout/positioning.css","kind":"import-rule","original":"./css/layout/positioning.css"},{"path":"src/css/layout/size.css","kind":"import-rule","original":"./css/layout/size.css"},{"path":"src/css/utilities.css","kind":"import-rule","original":"./css/utilities.css"},{"path":"src/css/integrations/codemirror.css","kind":"import-rule","original":"./css/integrations/codemirror.css"},{"path":"src/css/integrations/tldraw.css","kind":"import-rule","original":"./css/integrations/tldraw.css"}]}},"outputs":{"dist/plugin/node-cjs/plugins/ThemePlugin.cjs.map":{"imports":[],"exports":[],"inputs":{},"bytes":12557},"dist/plugin/node-cjs/plugins/ThemePlugin.cjs":{"imports":[{"path":"@tailwindcss/postcss","kind":"import-statement","external":true},{"path":"@tailwindcss/vite","kind":"import-statement","external":true},{"path":"autoprefixer","kind":"import-statement","external":true},{"path":"node:fs","kind":"import-statement","external":true},{"path":"node:path","kind":"import-statement","external":true},{"path":"postcss-import","kind":"import-statement","external":true},{"path":"postcss-nesting","kind":"import-statement","external":true}],"exports":["LAYER_ORDER","ThemePlugin"],"entryPoint":"src/plugins/ThemePlugin.ts","inputs":{"src/plugins/ThemePlugin.ts":{"bytesInOutput":6643}},"bytes":6755},"dist/plugin/node-cjs/main.css.map":{"imports":[],"exports":[],"inputs":{},"bytes":139903},"dist/plugin/node-cjs/main.css":{"imports":[{"path":"tailwindcss","kind":"import-rule","external":true},{"path":"@fontsource-variable/jetbrains-mono/wght-italic.css","kind":"import-rule","external":true},{"path":"@fontsource-variable/jetbrains-mono/wght.css","kind":"import-rule","external":true},{"path":"@fontsource/poiret-one","kind":"import-rule","external":true}],"entryPoint":"src/main.css","inputs":{"src/css/theme/animation.css":{"bytesInOutput":3508},"src/css/theme/border.css":{"bytesInOutput":450},"src/css/theme/palette.css":{"bytesInOutput":2713},"src/css/theme/semantic.css":{"bytesInOutput":6077},"src/css/theme/spacing.css":{"bytesInOutput":3635},"src/css/theme/styles.css":{"bytesInOutput":7242},"src/css/theme/text.css":{"bytesInOutput":841},"src/css/base/base.css":{"bytesInOutput":784},"src/css/base/typography.css":{"bytesInOutput":2742},"src/css/components/button.css":{"bytesInOutput":2826},"src/css/components/card.css":{"bytesInOutput":116},"src/css/components/checkbox.css":{"bytesInOutput":1296},"src/css/components/dialog.css":{"bytesInOutput":1550},"src/css/components/focus.css":{"bytesInOutput":5252},"src/css/components/icon.css":{"bytesInOutput":91},"src/css/components/panel.css":{"bytesInOutput":2641},"src/css/components/link.css":{"bytesInOutput":195},"src/css/components/scrollbar.css":{"bytesInOutput":451},"src/css/components/state.css":{"bytesInOutput":1348},"src/css/components/surface.css":{"bytesInOutput":2201},"src/css/components/tag.css":{"bytesInOutput":2456},"src/css/components/text.css":{"bytesInOutput":1794},"src/css/layout/main.css":{"bytesInOutput":6525},"src/css/layout/native.css":{"bytesInOutput":215},"src/css/layout/positioning.css":{"bytesInOutput":297},"src/css/layout/size.css":{"bytesInOutput":5807},"src/css/utilities.css":{"bytesInOutput":1154},"src/css/integrations/codemirror.css":{"bytesInOutput":1382},"src/css/integrations/tldraw.css":{"bytesInOutput":271},"src/main.css":{"bytesInOutput":1522}},"bytes":68765}}}
|
|
@@ -33,6 +33,7 @@ __export(ThemePlugin_exports, {
|
|
|
33
33
|
});
|
|
34
34
|
module.exports = __toCommonJS(ThemePlugin_exports);
|
|
35
35
|
var import_postcss = __toESM(require("@tailwindcss/postcss"));
|
|
36
|
+
var import_vite = __toESM(require("@tailwindcss/vite"));
|
|
36
37
|
var import_autoprefixer = __toESM(require("autoprefixer"));
|
|
37
38
|
var import_node_fs = require("node:fs");
|
|
38
39
|
var import_node_path = require("node:path");
|
|
@@ -60,18 +61,65 @@ var ThemePlugin = (options) => {
|
|
|
60
61
|
const darkModeScriptPath = (0, import_node_path.resolve)(pluginsDir, "dark-mode.ts");
|
|
61
62
|
const mainCssPath = (0, import_node_path.resolve)(pluginsDir, "main.css");
|
|
62
63
|
const config = {
|
|
63
|
-
srcCssPath: isMonorepo ? srcThemePath : distThemePath,
|
|
64
|
-
virtualFileId: "@dxos-theme",
|
|
65
|
-
|
|
64
|
+
srcCssPath: options.srcCssPath ?? (isMonorepo ? srcThemePath : distThemePath),
|
|
65
|
+
virtualFileId: options.virtualFileId ?? "@dxos-theme",
|
|
66
|
+
verbose: options.verbose
|
|
66
67
|
};
|
|
67
|
-
const base = isMonorepo ? (0, import_node_path.resolve)((0, import_node_path.dirname)(srcThemePath), ROOT) : void 0;
|
|
68
68
|
if (process.env.DEBUG || options.verbose) {
|
|
69
69
|
console.log("ThemePlugin:\n", JSON.stringify(config, null, 2));
|
|
70
70
|
}
|
|
71
|
-
|
|
71
|
+
let themeReloadTimer;
|
|
72
|
+
const themePlugin = {
|
|
72
73
|
name: "vite-plugin-dxos-ui-theme",
|
|
73
74
|
config: () => {
|
|
74
75
|
return {
|
|
76
|
+
server: {
|
|
77
|
+
watch: {
|
|
78
|
+
// Stop build outputs from driving HMR — they are the root of the
|
|
79
|
+
// `main.css` HMR storm.
|
|
80
|
+
//
|
|
81
|
+
// Tailwind's `@source` scanning (see `src/main.css`) registers its
|
|
82
|
+
// scanned source files as Vite watch dependencies of the compiled
|
|
83
|
+
// theme CSS. Tailwind's own scanner respects `.gitignore` (and the
|
|
84
|
+
// `@source not` directives), so it never *scans* `dist/`. BUT the
|
|
85
|
+
// scanner hands Vite a coarse `dir-dependency` glob — e.g.
|
|
86
|
+
// `{**/*.html,**/*.ts,**/*.tsx}` — and Vite re-expands that glob
|
|
87
|
+
// itself, ignoring only `node_modules` (not `.gitignore`, not the
|
|
88
|
+
// `@source not` negations). The re-expansion therefore sweeps in
|
|
89
|
+
// every `packages/*/dist/**/*.d.ts` (`.d.ts` matches `**/*.ts`),
|
|
90
|
+
// making each emitted declaration file a watch-dependency of
|
|
91
|
+
// `main.css`. A single package rebuild emits dozens of `.d.ts` in a
|
|
92
|
+
// tight burst, and each write re-invalidates the theme — 40+ HMR
|
|
93
|
+
// pings for `main.css` in one second, repeating on every rebuild.
|
|
94
|
+
//
|
|
95
|
+
// Ignoring build outputs in the watcher is also semantically
|
|
96
|
+
// correct: in dev the workspace resolves `@dxos/*` via the `source`
|
|
97
|
+
// export condition (see `vite-plugin-import-source`), so `dist/`
|
|
98
|
+
// is never consumed at runtime and its churn should never trigger
|
|
99
|
+
// HMR. Vite concatenates these patterns with its built-in ignores
|
|
100
|
+
// (`**/node_modules/**`, `**/.git/**`, …), so this is purely
|
|
101
|
+
// additive.
|
|
102
|
+
//
|
|
103
|
+
// `<root>/.claude/**` covers agent worktrees checked out under the
|
|
104
|
+
// repo root (`.claude/worktrees/<name>/packages/**`): they are full
|
|
105
|
+
// source copies, so the glob re-expansion above sweeps them in and
|
|
106
|
+
// every agent-side edit burst or checkout invalidates the theme in
|
|
107
|
+
// the user's dev server. The pattern is anchored at the resolved
|
|
108
|
+
// repo root (not `**/.claude/**`) because chokidar matches against
|
|
109
|
+
// absolute paths — a bare pattern would match *everything* when the
|
|
110
|
+
// dev server itself runs from inside a worktree whose path contains
|
|
111
|
+
// a `.claude` segment. `*.log` covers runtime log sinks (e.g.
|
|
112
|
+
// vite-plugin-log's `app.log` in the app root), which are appended
|
|
113
|
+
// continuously at runtime and must never feed back into the
|
|
114
|
+
// watcher.
|
|
115
|
+
ignored: [
|
|
116
|
+
"**/dist/**",
|
|
117
|
+
"**/out/**",
|
|
118
|
+
"**/*.log",
|
|
119
|
+
`${(0, import_node_path.resolve)(__dirname, ROOT, ".claude")}/**`
|
|
120
|
+
]
|
|
121
|
+
}
|
|
122
|
+
},
|
|
75
123
|
css: {
|
|
76
124
|
postcss: {
|
|
77
125
|
plugins: [
|
|
@@ -79,11 +127,11 @@ var ThemePlugin = (options) => {
|
|
|
79
127
|
(0, import_postcss_import.default)(),
|
|
80
128
|
// Processes CSS nesting syntax.
|
|
81
129
|
(0, import_postcss_nesting.default)(),
|
|
82
|
-
//
|
|
83
|
-
//
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
130
|
+
// Resolves @reference/@apply in `.pcss` files (e.g. lit-grid, lit-ui), which the
|
|
131
|
+
// @tailwindcss/vite plugin skips — its transform filter only matches `.css`.
|
|
132
|
+
// Theme `.css` files are compiled by @tailwindcss/vite first (enforce: 'pre'),
|
|
133
|
+
// so this plugin's quick-bail check passes them through untouched.
|
|
134
|
+
(0, import_postcss.default)(),
|
|
87
135
|
// Adds vendor prefixes.
|
|
88
136
|
import_autoprefixer.default
|
|
89
137
|
]
|
|
@@ -96,6 +144,26 @@ var ThemePlugin = (options) => {
|
|
|
96
144
|
return config.srcCssPath;
|
|
97
145
|
}
|
|
98
146
|
},
|
|
147
|
+
hotUpdate({ type, file, modules }) {
|
|
148
|
+
if (this.environment.name !== "client" || type !== "update" || file.endsWith(".css")) {
|
|
149
|
+
return;
|
|
150
|
+
}
|
|
151
|
+
const isThemeDep = (mod) => mod.file === config.srcCssPath || mod.id === null && mod.importers.size > 0 && [
|
|
152
|
+
...mod.importers
|
|
153
|
+
].every((importer) => importer.file === config.srcCssPath);
|
|
154
|
+
if (!modules.some(isThemeDep)) {
|
|
155
|
+
return;
|
|
156
|
+
}
|
|
157
|
+
const environment = this.environment;
|
|
158
|
+
clearTimeout(themeReloadTimer);
|
|
159
|
+
themeReloadTimer = setTimeout(() => {
|
|
160
|
+
for (const mod of environment.moduleGraph.getModulesByFile(config.srcCssPath) ?? []) {
|
|
161
|
+
environment.reloadModule(mod).catch(() => {
|
|
162
|
+
});
|
|
163
|
+
}
|
|
164
|
+
}, 300);
|
|
165
|
+
return modules.filter((mod) => !isThemeDep(mod));
|
|
166
|
+
},
|
|
99
167
|
transformIndexHtml: () => {
|
|
100
168
|
const darkModeTag = {
|
|
101
169
|
tag: "script",
|
|
@@ -128,6 +196,10 @@ var ThemePlugin = (options) => {
|
|
|
128
196
|
];
|
|
129
197
|
}
|
|
130
198
|
};
|
|
199
|
+
return [
|
|
200
|
+
...(0, import_vite.default)(),
|
|
201
|
+
themePlugin
|
|
202
|
+
];
|
|
131
203
|
};
|
|
132
204
|
// Annotate the CommonJS export names for ESM import in node:
|
|
133
205
|
0 && (module.exports = {
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/plugins/ThemePlugin.ts"],
|
|
4
|
-
"sourcesContent": ["//\n// Copyright 2022 DXOS.org\n//\n\n/* eslint-disable no-console */\n\nimport
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAMA,
|
|
6
|
-
"names": ["LAYER_ORDER", "ROOT", "ThemePlugin", "options", "srcThemePath", "resolve", "distThemePath", "isMonorepo", "existsSync", "pluginsDir", "darkModeScriptPath", "mainCssPath", "config", "srcCssPath", "virtualFileId", "
|
|
4
|
+
"sourcesContent": ["//\n// Copyright 2022 DXOS.org\n//\n\n/* eslint-disable no-console */\n\nimport tailwindcssPostcss from '@tailwindcss/postcss';\nimport tailwindcssVite from '@tailwindcss/vite';\nimport autoprefixer from 'autoprefixer';\nimport { existsSync, readFileSync } from 'node:fs';\nimport { resolve } from 'node:path';\nimport postcssImport from 'postcss-import';\nimport postcssNesting from 'postcss-nesting';\nimport { type HtmlTagDescriptor, type Plugin, type UserConfig } from 'vite';\n\n/**\n * CSS cascade layer order.\n * Must be established before any stylesheets load so that Tailwind's own @layer declarations don't override our ordering. Exported so consuming\n */\nexport const LAYER_ORDER = [\n 'properties',\n 'theme',\n 'dx-tokens',\n 'user-tokens',\n 'base',\n 'tw-base',\n 'dx-base',\n 'components',\n 'tw-components',\n 'dx-components',\n 'utilities',\n] as const;\n\nconst ROOT = '../../../../';\n\nexport type ThemePluginOptions = {\n srcCssPath?: string;\n virtualFileId?: string;\n verbose?: boolean;\n};\n\n/**\n * Vite plugin to configure theme.\n * Returns the official Tailwind Vite plugin (persistent incremental scanner) alongside the theme plugin.\n */\nexport const ThemePlugin = (options: ThemePluginOptions): Plugin[] => {\n // Prefer source CSS if available (monorepo dev), fall back to dist for installed package.\n const srcThemePath = resolve(import.meta.dirname, ROOT, 'src/main.css');\n const distThemePath = resolve(import.meta.dirname, '../main.css');\n const isMonorepo = existsSync(srcThemePath);\n\n // Static assets shipped via \"files\": [\"src\"] in package.json.\n // Both monorepo and installed package resolve to the same src/plugins/ directory.\n const pluginsDir = resolve(import.meta.dirname, ROOT, 'src/plugins');\n const darkModeScriptPath = resolve(pluginsDir, 'dark-mode.ts');\n const mainCssPath = resolve(pluginsDir, 'main.css');\n\n const config = {\n srcCssPath: options.srcCssPath ?? (isMonorepo ? srcThemePath : distThemePath),\n virtualFileId: options.virtualFileId ?? '@dxos-theme',\n verbose: options.verbose,\n };\n\n if (process.env.DEBUG || options.verbose) {\n console.log('ThemePlugin:\\n', JSON.stringify(config, null, 2));\n }\n\n // Trailing-edge debounce handle for theme CSS reloads (see `handleHotUpdate`).\n let themeReloadTimer: ReturnType<typeof setTimeout> | undefined;\n\n const themePlugin: Plugin = {\n name: 'vite-plugin-dxos-ui-theme',\n config: (): UserConfig => {\n return {\n server: {\n watch: {\n // Stop build outputs from driving HMR — they are the root of the\n // `main.css` HMR storm.\n //\n // Tailwind's `@source` scanning (see `src/main.css`) registers its\n // scanned source files as Vite watch dependencies of the compiled\n // theme CSS. Tailwind's own scanner respects `.gitignore` (and the\n // `@source not` directives), so it never *scans* `dist/`. BUT the\n // scanner hands Vite a coarse `dir-dependency` glob — e.g.\n // `{**/*.html,**/*.ts,**/*.tsx}` — and Vite re-expands that glob\n // itself, ignoring only `node_modules` (not `.gitignore`, not the\n // `@source not` negations). The re-expansion therefore sweeps in\n // every `packages/*/dist/**/*.d.ts` (`.d.ts` matches `**/*.ts`),\n // making each emitted declaration file a watch-dependency of\n // `main.css`. A single package rebuild emits dozens of `.d.ts` in a\n // tight burst, and each write re-invalidates the theme — 40+ HMR\n // pings for `main.css` in one second, repeating on every rebuild.\n //\n // Ignoring build outputs in the watcher is also semantically\n // correct: in dev the workspace resolves `@dxos/*` via the `source`\n // export condition (see `vite-plugin-import-source`), so `dist/`\n // is never consumed at runtime and its churn should never trigger\n // HMR. Vite concatenates these patterns with its built-in ignores\n // (`**/node_modules/**`, `**/.git/**`, …), so this is purely\n // additive.\n //\n // `<root>/.claude/**` covers agent worktrees checked out under the\n // repo root (`.claude/worktrees/<name>/packages/**`): they are full\n // source copies, so the glob re-expansion above sweeps them in and\n // every agent-side edit burst or checkout invalidates the theme in\n // the user's dev server. The pattern is anchored at the resolved\n // repo root (not `**/.claude/**`) because chokidar matches against\n // absolute paths — a bare pattern would match *everything* when the\n // dev server itself runs from inside a worktree whose path contains\n // a `.claude` segment. `*.log` covers runtime log sinks (e.g.\n // vite-plugin-log's `app.log` in the app root), which are appended\n // continuously at runtime and must never feed back into the\n // watcher.\n ignored: ['**/dist/**', '**/out/**', '**/*.log', `${resolve(import.meta.dirname, ROOT, '.claude')}/**`],\n },\n },\n css: {\n postcss: {\n plugins: [\n // Handles @import statements in CSS.\n postcssImport(),\n // Processes CSS nesting syntax.\n postcssNesting(),\n // Resolves @reference/@apply in `.pcss` files (e.g. lit-grid, lit-ui), which the\n // @tailwindcss/vite plugin skips — its transform filter only matches `.css`.\n // Theme `.css` files are compiled by @tailwindcss/vite first (enforce: 'pre'),\n // so this plugin's quick-bail check passes them through untouched.\n tailwindcssPostcss(),\n // Adds vendor prefixes.\n autoprefixer,\n ],\n },\n },\n };\n },\n resolveId: (id) => {\n if (id === config.virtualFileId) {\n return config.srcCssPath;\n }\n },\n hotUpdate({ type, file, modules }) {\n // Direct edits to CSS (the theme source or its imports) keep Vite's\n // default immediate update for instant feedback while authoring styles.\n if (this.environment.name !== 'client' || type !== 'update' || file.endsWith('.css')) {\n return;\n }\n\n // Every content file Tailwind scans is registered as a dependency of the\n // theme CSS — Vite models it as a file-only entry node whose importer is\n // `main.css` — so each source-file save invalidates `main.css` and\n // re-runs the monorepo-wide Tailwind scan. During an edit wave that\n // serializes one full scan per save. Drop the theme-dep entries from the\n // update (the changed module itself still hot-updates immediately) and\n // reload the theme CSS once on the trailing edge of a quiet window, so a\n // wave costs at most one scan.\n const isThemeDep = (mod: (typeof modules)[number]): boolean =>\n mod.file === config.srcCssPath ||\n (mod.id === null &&\n mod.importers.size > 0 &&\n [...mod.importers].every((importer) => importer.file === config.srcCssPath));\n if (!modules.some(isThemeDep)) {\n return;\n }\n\n const environment = this.environment;\n clearTimeout(themeReloadTimer);\n themeReloadTimer = setTimeout(() => {\n for (const mod of environment.moduleGraph.getModulesByFile(config.srcCssPath) ?? []) {\n environment.reloadModule(mod).catch(() => {\n // Server may be mid-restart; the next edit reschedules the reload.\n });\n }\n }, 300);\n\n return modules.filter((mod) => !isThemeDep(mod));\n },\n transformIndexHtml: () => {\n // Apply .dark class to <html> synchronously before any scripts run, so that\n // the critical CSS html.dark rules apply on the very first paint.\n const darkModeTag: HtmlTagDescriptor = {\n tag: 'script',\n attrs: { 'data-dxos-theme': '' },\n injectTo: 'head-prepend',\n children: readFileSync(darkModeScriptPath, 'utf-8'),\n };\n\n // Establish cascade layer order before any stylesheet loads.\n const layersTag: HtmlTagDescriptor = {\n tag: 'style',\n attrs: { 'data-dxos-layers': '' },\n children: `@layer ${LAYER_ORDER.join(', ')};`,\n injectTo: 'head-prepend',\n };\n\n // Critical styles: font sizing, overscroll, color fallbacks.\n // Loaded from critical.css to keep styles maintainable and out of index.html.\n const criticalTag: HtmlTagDescriptor = {\n tag: 'style',\n attrs: { 'data-dxos-critical': '' },\n injectTo: 'head-prepend',\n children: readFileSync(mainCssPath, 'utf-8'),\n };\n\n return [darkModeTag, layersTag, criticalTag];\n },\n };\n\n // The Tailwind Vite plugins are `enforce: 'pre'`, so they compile theme CSS (resolving\n // `@import 'tailwindcss'`, @source, @plugin, @theme) before the postcss chain runs —\n // postcss-import never sees the raw Tailwind directives. Scan roots come from the @source\n // directives in main.css (relative to that file); no project-root base is needed.\n return [...tailwindcssVite(), themePlugin];\n};\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["LAYER_ORDER", "ROOT", "ThemePlugin", "options", "srcThemePath", "resolve", "distThemePath", "isMonorepo", "existsSync", "pluginsDir", "darkModeScriptPath", "mainCssPath", "config", "srcCssPath", "virtualFileId", "verbose", "process", "env", "DEBUG", "console", "log", "JSON", "stringify", "themeReloadTimer", "themePlugin", "name", "server", "watch", "ignored", "css", "postcss", "plugins", "postcssImport", "postcssNesting", "tailwindcssPostcss", "autoprefixer", "resolveId", "id", "hotUpdate", "type", "file", "modules", "environment", "endsWith", "isThemeDep", "mod", "importers", "size", "every", "importer", "some", "clearTimeout", "setTimeout", "moduleGraph", "getModulesByFile", "reloadModule", "catch", "filter", "transformIndexHtml", "darkModeTag", "tag", "attrs", "injectTo", "children", "readFileSync", "layersTag", "join", "criticalTag", "tailwindcssVite"]
|
|
7
7
|
}
|