@dxos/ui-theme 0.13.0 → 0.14.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/ui-theme",
-  "version": "0.13.0",
+  "version": "0.14.0",
   "description": "A set of design system tokens to use with DXOS UI.",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -38,7 +38,7 @@
     "@fontsource-variable/inter": "5.2.8",
     "@fontsource-variable/jetbrains-mono": "5.0.21",
     "@fontsource-variable/nunito": "5.2.7",
-    "@fontsource/poiret-one": "^5.0.20",
+    "@fontsource/poiret-one": "^5.2.8",
     "@tailwindcss/forms": "^0.5.9",
     "@tailwindcss/postcss": "^4.3.3",
     "@tailwindcss/vite": "^4.3.3",
@@ -50,8 +50,8 @@
     "tailwind-scrollbar": "^4.0.0",
     "tailwind-variants": "^3.2.2",
     "tailwindcss": "^4.3.0",
-    "@dxos/node-std": "0.13.0",
-    "@dxos/ui-types": "0.13.0"
+    "@dxos/node-std": "0.14.0",
+    "@dxos/ui-types": "0.14.0"
   },
   "devDependencies": {
     "@storybook/react-vite": "^10.6.0",

package/src/main.css

@@ -18,8 +18,10 @@
  * Tailwind CSS regeneration, which invalidates `main.css` through its
  * import graph and produces a 3–5-ping HMR storm per icon-sprite write
  * during cold-start (icons land in tight bursts as plugin chunks stream
- * in). Explicit `@source` directives below replace the auto-scan with a
- * stable, source-only set.
+ * in). The entry that imports this file declares the scan paths instead:
+ * `workspace.css` in this repo, or the stylesheet `ThemePlugin` generates for
+ * an installed copy, since paths relative to this file would reach the
+ * consumer's whole `node_modules`.
  */
 @import 'tailwindcss' source(none);
 
@@ -49,45 +51,6 @@
 /* Third-party integrations */
 @import './css/integrations/codemirror.css';
 
-/**
- * With `source(none)` on the Tailwind import above, these are the *only*
- * paths Tailwind scans for utility classes. Cover every workspace source
- * directory so lazy-loaded plugin / UI / SDK chunks don't surface new
- * utilities mid-session, and root-level HTML entrypoints (index.html,
- * internal.html, …) are visible too.
- *
- * Paths are relative to this file (`packages/ui/ui-theme/src/main.css`):
- *   ../../../          → `packages/`
- *   ../../../../tools/ → `tools/`
- *
- * Tailwind ignores `node_modules` and common build/output dirs by default,
- * so a broad workspace glob is safe *for scanning*.
- *
- * NOTE: Tailwind's scanner respects `.gitignore` (so `dist/` is never
- * scanned), but it hands Vite a coarse `dir-dependency` glob and Vite
- * re-expands that itself, ignoring only `node_modules`. That re-expansion
- * sweeps `dist/**` `.d.ts` files into the watch set and causes a `main.css`
- * HMR storm on every package rebuild. Build outputs are excluded from the
- * dev watcher in `plugins/ThemePlugin.ts` (`server.watch.ignored`) rather
- * than here, because `@source not` does NOT propagate to the glob Vite
- * re-expands.
- */
-@source '../../../**/*.{ts,tsx,html}';
-@source '../../../../tools/**/*.{ts,tsx,html}';
-
-/* Plain stylesheets outside this build (Next's theme, plugin overrides): scanning them keeps the theme variables they read (`var(--color-*)`) from being tree-shaken once no utility class names them. */
-@source '../../../**/src/**/*.css';
-
-/**
- * Exclude generated/static data files that have no Tailwind classes but are
- * large enough to dominate scan time. The oxide scanner tokenizes every byte;
- * a single 5MB geo-data file can pin Vite at 100% CPU for tens of seconds on
- * a cold start.
- */
-@source not '../../../ui/react-ui-geo/data/**';
-@source not '../../../ui/solid-ui-geo/data/**';
-@source not '../../../apps/composer-app/src/plugins/welcome/components/Welcome/hero-image.ts';
-
 /**
  * Force-emit CSS variables for the full color palette for all:
  * --color-{hue}-{shade}

package/src/plugins/ThemePlugin.ts

@@ -7,8 +7,8 @@
 import tailwindcssPostcss from '@tailwindcss/postcss';
 import tailwindcssVite from '@tailwindcss/vite';
 import autoprefixer from 'autoprefixer';
-import { existsSync, readFileSync } from 'node:fs';
-import { resolve } from 'node:path';
+import { existsSync, mkdirSync, readFileSync, realpathSync, writeFileSync } from 'node:fs';
+import { dirname, join, resolve, sep } from 'node:path';
 import postcssImport from 'postcss-import';
 import postcssNesting from 'postcss-nesting';
 import { type HtmlTagDescriptor, type Plugin, type UserConfig } from 'vite';
@@ -82,19 +82,61 @@ const skipHotUpdateInBundledDev = (plugin: Plugin): Plugin => {
 
 export type ThemePluginOptions = {
   srcCssPath?: string;
+  /** Extra Tailwind scan globs (absolute, or relative to the Vite root) for a consumer of the published package. */
+  content?: string[];
   virtualFileId?: string;
   verbose?: boolean;
 };
 
+const toCssString = (path: string): string => JSON.stringify(path.split(sep).join('/'));
+
+/**
+ * Writes the theme entry for a consumer of the published package and returns its path.
+ * `workspace.css` cannot serve them: its scan paths are relative to this package, which from inside
+ * `node_modules` reaches every installed package, and Tailwind walks all of it before answering.
+ */
+const writeConsumerTheme = ({
+  packageRoot,
+  root,
+  outPath,
+  content,
+}: {
+  packageRoot: string;
+  root: string;
+  outPath: string;
+  content: string[];
+}): string => {
+  // The scope this package was installed into, and the consumer's own, which differ under pnpm's isolated layout.
+  const scopeDirs = new Set([dirname(packageRoot), resolve(root, 'node_modules/@dxos')]);
+  const sources = [
+    // Tailwind skips `node_modules` below an explicit base, so this covers only the consumer's own files.
+    join(root, '**/*.{ts,tsx,js,jsx,html}'),
+    ...[...scopeDirs].map((scopeDir) => join(scopeDir, '*/dist/lib/**/*.mjs')),
+    ...content.map((glob) => resolve(root, glob)),
+  ];
+  const css = [
+    `@import ${toCssString(join(packageRoot, 'src/main.css'))};`,
+    ...sources.map((source) => `@source ${toCssString(source)};`),
+    '',
+  ].join('\n');
+
+  // Rewriting identical content would bump the mtime, which Tailwind reads as a reason to rebuild.
+  if (!existsSync(outPath) || readFileSync(outPath, 'utf-8') !== css) {
+    mkdirSync(dirname(outPath), { recursive: true });
+    writeFileSync(outPath, css);
+  }
+
+  return outPath;
+};
+
 /**
  * Vite plugin to configure theme.
  * Returns the official Tailwind Vite plugin (persistent incremental scanner) alongside the theme plugin.
  */
 export const ThemePlugin = (options: ThemePluginOptions): Plugin[] => {
-  // Prefer source CSS if available (monorepo dev), fall back to dist for installed package.
-  const srcThemePath = resolve(import.meta.dirname, ROOT, 'src/main.css');
-  const distThemePath = resolve(import.meta.dirname, 'main.css');
-  const isMonorepo = existsSync(srcThemePath);
+  // `src` is published too, so only the location tells a workspace checkout from an installed copy.
+  const packageRoot = realpathSync(resolve(import.meta.dirname, ROOT));
+  const isMonorepo = !packageRoot.split(sep).includes('node_modules');
 
   // Static assets shipped via "files": ["src"] in package.json.
   // Both monorepo and installed package resolve to the same src/plugins/ directory.
@@ -103,15 +145,12 @@ export const ThemePlugin = (options: ThemePluginOptions): Plugin[] => {
   const mainCssPath = resolve(pluginsDir, 'main.css');
 
   const config = {
-    srcCssPath: options.srcCssPath ?? (isMonorepo ? srcThemePath : distThemePath),
+    // Installed copies get theirs from `configResolved`, which knows the consumer's root.
+    srcCssPath: options.srcCssPath ?? (isMonorepo ? resolve(packageRoot, 'src/workspace.css') : ''),
     virtualFileId: options.virtualFileId ?? '@dxos-theme',
     verbose: options.verbose,
   };
 
-  if (process.env.DEBUG || options.verbose) {
-    console.log('ThemePlugin:\n', JSON.stringify(config, null, 2));
-  }
-
   // Set under `vite dev --experimentalBundle`; see the guard in `hotUpdate`.
   let bundledDev = false;
 
@@ -130,6 +169,18 @@ export const ThemePlugin = (options: ThemePluginOptions): Plugin[] => {
     name: 'vite-plugin-dxos-ui-theme',
     configResolved: (resolved) => {
       bundledDev = resolved.experimental.bundledDev === true;
+      if (!config.srcCssPath) {
+        config.srcCssPath = writeConsumerTheme({
+          packageRoot,
+          root: resolved.root,
+          outPath: resolve(resolved.cacheDir, '..', '.dxos-ui-theme.css'),
+          content: options.content ?? [],
+        });
+      }
+
+      if (process.env.DEBUG || options.verbose) {
+        console.log('ThemePlugin:\n', JSON.stringify(config, null, 2));
+      }
     },
     config: (): UserConfig => {
       return {

package/src/workspace.css

@@ -0,0 +1,45 @@
+/**
+ * In-repo theme entry: the theme plus the workspace scan paths.
+ * Installed copies of this package never load it; `ThemePlugin` generates their entry instead.
+ */
+
+@import './main.css';
+
+/**
+ * With `source(none)` on the Tailwind import in `main.css`, these are the *only*
+ * paths Tailwind scans for utility classes. Cover every workspace source
+ * directory so lazy-loaded plugin / UI / SDK chunks don't surface new
+ * utilities mid-session, and root-level HTML entrypoints (index.html,
+ * internal.html, …) are visible too.
+ *
+ * Paths are relative to this file (`packages/ui/ui-theme/src/workspace.css`):
+ *   ../../../          → `packages/`
+ *   ../../../../tools/ → `tools/`
+ *
+ * Tailwind ignores `node_modules` and common build/output dirs by default,
+ * so a broad workspace glob is safe *for scanning*.
+ *
+ * NOTE: Tailwind's scanner respects `.gitignore` (so `dist/` is never
+ * scanned), but it hands Vite a coarse `dir-dependency` glob and Vite
+ * re-expands that itself, ignoring only `node_modules`. That re-expansion
+ * sweeps `dist/**` `.d.ts` files into the watch set and causes a theme
+ * HMR storm on every package rebuild. Build outputs are excluded from the
+ * dev watcher in `plugins/ThemePlugin.ts` (`server.watch.ignored`) rather
+ * than here, because `@source not` does NOT propagate to the glob Vite
+ * re-expands.
+ */
+@source '../../../**/*.{ts,tsx,html}';
+@source '../../../../tools/**/*.{ts,tsx,html}';
+
+/* Plain stylesheets outside this build (Next's theme, plugin overrides): scanning them keeps the theme variables they read (`var(--color-*)`) from being tree-shaken once no utility class names them. */
+@source '../../../**/src/**/*.css';
+
+/**
+ * Exclude generated/static data files that have no Tailwind classes but are
+ * large enough to dominate scan time. The oxide scanner tokenizes every byte;
+ * a single 5MB geo-data file can pin Vite at 100% CPU for tens of seconds on
+ * a cold start.
+ */
+@source not '../../../ui/react-ui-geo/data/**';
+@source not '../../../ui/solid-ui-geo/data/**';
+@source not '../../../apps/composer-app/src/plugins/welcome/components/Welcome/hero-image.ts';