@dxos/ui-theme 0.8.4-main.bc674ce → 0.8.4-main.c85a9c8dae

package/dist/plugin/node-esm/plugins/ThemePlugin.mjs

@@ -0,0 +1,112 @@
+import { createRequire } from 'node:module';const require = createRequire(import.meta.url);
+
+// src/plugins/ThemePlugin.ts
+import { existsSync, readFileSync } from "node:fs";
+import { dirname, resolve } from "node:path";
+import tailwindcss from "@tailwindcss/postcss";
+import autoprefixer from "autoprefixer";
+import postcssImport from "postcss-import";
+import postcssNesting from "postcss-nesting";
+var LAYER_ORDER = [
+  "properties",
+  "theme",
+  "dx-tokens",
+  "user-tokens",
+  "base",
+  "tw-base",
+  "dx-base",
+  "components",
+  "tw-components",
+  "dx-components",
+  "utilities"
+];
+var ROOT = "../../../../";
+var ThemePlugin = (options) => {
+  const srcThemePath = resolve(import.meta.dirname, ROOT, "src/theme.css");
+  const distThemePath = resolve(import.meta.dirname, "../theme.css");
+  const isMonorepo = existsSync(srcThemePath);
+  const srcDarkModePath = resolve(import.meta.dirname, ROOT, "src/plugins/dark-mode.ts");
+  const distDarkModePath = resolve(import.meta.dirname, ROOT, "src/plugins/dark-mode.ts");
+  const darkModeScriptPath = existsSync(srcDarkModePath) ? srcDarkModePath : distDarkModePath;
+  const config = {
+    srcCssPath: isMonorepo ? srcThemePath : distThemePath,
+    virtualFileId: "@dxos-theme",
+    ...options
+  };
+  const base = isMonorepo ? resolve(dirname(srcThemePath), ROOT) : void 0;
+  if (process.env.DEBUG || options.verbose) {
+    console.log("ThemePlugin:\n", JSON.stringify(config, null, 2));
+  }
+  return {
+    name: "vite-plugin-dxos-ui-theme",
+    config: () => {
+      return {
+        css: {
+          postcss: {
+            plugins: [
+              // Handles @import statements in CSS.
+              postcssImport(),
+              // Processes CSS nesting syntax.
+              postcssNesting(),
+              // Processes Tailwind directives and generates utilities from scanned content.
+              // base points to project root so all packages are scanned (not just ui-theme).
+              tailwindcss(base !== void 0 ? {
+                base
+              } : {}),
+              // Adds vendor prefixes.
+              autoprefixer
+            ]
+          }
+        }
+      };
+    },
+    resolveId: (id) => {
+      if (id === config.virtualFileId) {
+        return config.srcCssPath;
+      }
+    },
+    transformIndexHtml: () => {
+      const darkModeTag = {
+        tag: "script",
+        attrs: {
+          "data-dxos-theme": ""
+        },
+        injectTo: "head-prepend",
+        children: readFileSync(darkModeScriptPath, "utf-8")
+      };
+      const layersTag = {
+        tag: "style",
+        attrs: {
+          "data-dxos-layers": ""
+        },
+        children: `@layer ${LAYER_ORDER.join(", ")};`,
+        injectTo: "head-prepend"
+      };
+      const criticalTag = {
+        tag: "style",
+        attrs: {
+          "data-dxos-critical": ""
+        },
+        injectTo: "head-prepend",
+        children: [
+          ":root { color-scheme: light; }",
+          "html { color: oklch(0.145 0 0); background-color: oklch(0.985 0 0); }",
+          "html.dark { color-scheme: dark; color: oklch(0.985 0 0); background-color: oklch(0.145 0 0); }",
+          "@media (prefers-color-scheme: dark) {",
+          "  html:not(.dark) { color: oklch(0.985 0 0); background-color: oklch(0.145 0 0); }",
+          "}"
+        ].join("\n")
+      };
+      return [
+        darkModeTag,
+        layersTag,
+        criticalTag
+      ];
+    }
+  };
+};
+export {
+  LAYER_ORDER,
+  ThemePlugin
+};
+//# sourceMappingURL=ThemePlugin.mjs.map

package/dist/plugin/node-esm/plugins/ThemePlugin.mjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/plugins/ThemePlugin.ts"],
+  "sourcesContent": ["//\n// Copyright 2022 DXOS.org\n//\n\n/* eslint-disable no-console */\n\nimport { existsSync, readFileSync } from 'node:fs';\nimport { dirname, resolve } from 'node:path';\n\nimport tailwindcss from '@tailwindcss/postcss';\nimport autoprefixer from 'autoprefixer';\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 */\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/theme.css');\n  const distThemePath = resolve(import.meta.dirname, '../theme.css');\n  const isMonorepo = existsSync(srcThemePath);\n\n  // dark-mode.ts is always read from src (ships via \"files\": [\"src\"] in package.json).\n  // In monorepo: import.meta.dirname = src/plugins/, so the file is right here.\n  // In installed package: import.meta.dirname = dist/plugin/{format}/plugins/, so go up 4 levels.\n  const srcDarkModePath = resolve(import.meta.dirname, ROOT, 'src/plugins/dark-mode.ts');\n  const distDarkModePath = resolve(import.meta.dirname, ROOT, 'src/plugins/dark-mode.ts');\n  const darkModeScriptPath = existsSync(srcDarkModePath) ? srcDarkModePath : distDarkModePath;\n\n  const config: ThemePluginOptions = {\n    srcCssPath: isMonorepo ? srcThemePath : distThemePath,\n    virtualFileId: '@dxos-theme',\n    ...options,\n  };\n\n  // Derive project root from the source location so Tailwind scans all packages.\n  const base = isMonorepo ? resolve(dirname(srcThemePath), ROOT) : undefined;\n\n  if (process.env.DEBUG || options.verbose) {\n    console.log('ThemePlugin:\\n', JSON.stringify(config, null, 2));\n  }\n\n  return {\n    name: 'vite-plugin-dxos-ui-theme',\n    config: (): UserConfig => {\n      return {\n        css: {\n          postcss: {\n            plugins: [\n              // Handles @import statements in CSS.\n              postcssImport(),\n              // Processes CSS nesting syntax.\n              postcssNesting(),\n              // Processes Tailwind directives and generates utilities from scanned content.\n              // base points to project root so all packages are scanned (not just ui-theme).\n              tailwindcss(base !== undefined ? { base } : {}),\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    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 pre-CSS fallbacks so text is readable before (and during) Vite HMR.\n      // In dev mode Vite injects CSS via JS; when an HMR update fires the old style tag is\n      // removed before the new one is inserted, briefly leaving all --color-* vars undefined.\n      // These static approximations of neutral-50/950 survive that gap.\n      // Values are intentionally kept in sync with @theme tokens in semantic.css.\n      const criticalTag: HtmlTagDescriptor = {\n        tag: 'style',\n        attrs: { 'data-dxos-critical': '' },\n        injectTo: 'head-prepend',\n        children: [\n          ':root { color-scheme: light; }',\n          'html { color: oklch(0.145 0 0); background-color: oklch(0.985 0 0); }', // ≈ neutral-950 / neutral-50\n          'html.dark { color-scheme: dark; color: oklch(0.985 0 0); background-color: oklch(0.145 0 0); }',\n          '@media (prefers-color-scheme: dark) {',\n          '  html:not(.dark) { color: oklch(0.985 0 0); background-color: oklch(0.145 0 0); }',\n          '}',\n        ].join('\\n'),\n      };\n\n      return [darkModeTag, layersTag, criticalTag];\n    },\n  };\n};\n"],
+  "mappings": ";;;AAMA,SAASA,YAAYC,oBAAoB;AACzC,SAASC,SAASC,eAAe;AAEjC,OAAOC,iBAAiB;AACxB,OAAOC,kBAAkB;AACzB,OAAOC,mBAAmB;AAC1B,OAAOC,oBAAoB;AAOpB,IAAMC,cAAc;EACzB;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF,IAAMC,OAAO;AAWN,IAAMC,cAAc,CAACC,YAAAA;AAE1B,QAAMC,eAAeC,QAAQ,YAAYC,SAASL,MAAM,eAAA;AACxD,QAAMM,gBAAgBF,QAAQ,YAAYC,SAAS,cAAA;AACnD,QAAME,aAAaC,WAAWL,YAAAA;AAK9B,QAAMM,kBAAkBL,QAAQ,YAAYC,SAASL,MAAM,0BAAA;AAC3D,QAAMU,mBAAmBN,QAAQ,YAAYC,SAASL,MAAM,0BAAA;AAC5D,QAAMW,qBAAqBH,WAAWC,eAAAA,IAAmBA,kBAAkBC;AAE3E,QAAME,SAA6B;IACjCC,YAAYN,aAAaJ,eAAeG;IACxCQ,eAAe;IACf,GAAGZ;EACL;AAGA,QAAMa,OAAOR,aAAaH,QAAQC,QAAQF,YAAAA,GAAeH,IAAAA,IAAQgB;AAEjE,MAAIC,QAAQC,IAAIC,SAASjB,QAAQkB,SAAS;AACxCC,YAAQC,IAAI,kBAAkBC,KAAKC,UAAUZ,QAAQ,MAAM,CAAA,CAAA;EAC7D;AAEA,SAAO;IACLa,MAAM;IACNb,QAAQ,MAAA;AACN,aAAO;QACLc,KAAK;UACHC,SAAS;YACPC,SAAS;;cAEPC,cAAAA;;cAEAC,eAAAA;;;cAGAC,YAAYhB,SAASC,SAAY;gBAAED;cAAK,IAAI,CAAC,CAAA;;cAE7CiB;;UAEJ;QACF;MACF;IACF;IACAC,WAAW,CAACC,OAAAA;AACV,UAAIA,OAAOtB,OAAOE,eAAe;AAC/B,eAAOF,OAAOC;MAChB;IACF;IACAsB,oBAAoB,MAAA;AAGlB,YAAMC,cAAiC;QACrCC,KAAK;QACLC,OAAO;UAAE,mBAAmB;QAAG;QAC/BC,UAAU;QACVC,UAAUC,aAAa9B,oBAAoB,OAAA;MAC7C;AAGA,YAAM+B,YAA+B;QACnCL,KAAK;QACLC,OAAO;UAAE,oBAAoB;QAAG;QAChCE,UAAU,UAAUzC,YAAY4C,KAAK,IAAA,CAAA;QACrCJ,UAAU;MACZ;AAOA,YAAMK,cAAiC;QACrCP,KAAK;QACLC,OAAO;UAAE,sBAAsB;QAAG;QAClCC,UAAU;QACVC,UAAU;UACR;UACA;UACA;UACA;UACA;UACA;UACAG,KAAK,IAAA;MACT;AAEA,aAAO;QAACP;QAAaM;QAAWE;;IAClC;EACF;AACF;",
+  "names": ["existsSync", "readFileSync", "dirname", "resolve", "tailwindcss", "autoprefixer", "postcssImport", "postcssNesting", "LAYER_ORDER", "ROOT", "ThemePlugin", "options", "srcThemePath", "resolve", "dirname", "distThemePath", "isMonorepo", "existsSync", "srcDarkModePath", "distDarkModePath", "darkModeScriptPath", "config", "srcCssPath", "virtualFileId", "base", "undefined", "process", "env", "DEBUG", "verbose", "console", "log", "JSON", "stringify", "name", "css", "postcss", "plugins", "postcssImport", "postcssNesting", "tailwindcss", "autoprefixer", "resolveId", "id", "transformIndexHtml", "darkModeTag", "tag", "attrs", "injectTo", "children", "readFileSync", "layersTag", "join", "criticalTag"]
+}