From 80b7b20df9612badd50a0bfb358f451c8c9dcb34 Mon Sep 17 00:00:00 2001
From: GENTILHOMME Thomas <gentilhomme.thomas@gmail.com>
Date: Wed, 8 Jul 2026 20:10:44 +0200
Subject: [PATCH] refactor(documentation-ui): expose styles in package.json
 exports

---
 .changeset/red-peaches-lie.md                 |  6 ++++++
 workspaces/cli/esbuild.common.ts              |  6 +-----
 workspaces/cli/public/main.css                |  1 +
 workspaces/cli/views/index.html               |  5 ++---
 workspaces/documentation-ui/package.json      |  5 +----
 workspaces/documentation-ui/src/nodejs/esm.ts | 10 ----------
 6 files changed, 11 insertions(+), 22 deletions(-)
 create mode 100644 .changeset/red-peaches-lie.md
 delete mode 100644 workspaces/documentation-ui/src/nodejs/esm.ts

diff --git a/.changeset/red-peaches-lie.md b/.changeset/red-peaches-lie.md
new file mode 100644
index 00000000..5900d500
--- /dev/null
+++ b/.changeset/red-peaches-lie.md
@@ -0,0 +1,6 @@
+---
+"@nodesecure/documentation-ui": major
+"@nodesecure/cli": minor
+---
+
+Expose documentation-ui styles from package.json exports and use it in CLI to import .css with an URL. This also simplify the esbuild setup.
diff --git a/workspaces/cli/esbuild.common.ts b/workspaces/cli/esbuild.common.ts
index 0a47240c..54604424 100644
--- a/workspaces/cli/esbuild.common.ts
+++ b/workspaces/cli/esbuild.common.ts
@@ -4,9 +4,6 @@ import fs from "node:fs/promises";
 
 // Import Third-party Dependencies
 import esbuild from "esbuild";
-import {
-  getBuildConfiguration
-} from "@nodesecure/documentation-ui/node";
 
 // CONSTANTS
 export const PUBLIC_DIR = path.join(import.meta.dirname, "public");
@@ -17,8 +14,7 @@ export function getSharedBuildOptions(): esbuild.BuildOptions {
   return {
     entryPoints: [
       path.join(PUBLIC_DIR, "main.js"),
-      path.join(PUBLIC_DIR, "main.css"),
-      ...getBuildConfiguration().entryPoints
+      path.join(PUBLIC_DIR, "main.css")
     ],
     loader: {
       ".jpg": "file",
diff --git a/workspaces/cli/public/main.css b/workspaces/cli/public/main.css
index 15522a6b..1f9c15a6 100644
--- a/workspaces/cli/public/main.css
+++ b/workspaces/cli/public/main.css
@@ -2,6 +2,7 @@
 @import url("./css/light.css");
 @import url("./css/animation.css");
 @import url("highlight.js/styles/github.css");
+@import url("@nodesecure/documentation-ui/styles/main.css");
 @import url("./font/fontello/fontello.css");
 @import url("./font/roboto/roboto.css");
 @import url("./font/mononoki/mononoki.css");
diff --git a/workspaces/cli/views/index.html b/workspaces/cli/views/index.html
index f67cb92c..28d43a03 100644
--- a/workspaces/cli/views/index.html
+++ b/workspaces/cli/views/index.html
@@ -6,11 +6,10 @@
 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 <meta http-equiv="X-UA-Compatible" content="ie=edge" />
 
-<link rel="stylesheet" href="cli/public/main.css" />
-<link rel="stylesheet" href="documentation-ui/dist/css/main.css" />
+<link rel="stylesheet" href="main.css" />
 <script>window.__WS_PORT__ = Number("[[=z.wsPort]]");</script>
 <script src="https://cdn.socket.io/4.7.5/socket.io.min.js"></script>
-<script src="cli/public/main.js" defer></script>
+<script src="main.js" defer></script>
 <title>NodeSecure</title>
 
 <div id="lang" data-lang="[[=z.i18nLangName]]" style="display: none;"></div>
diff --git a/workspaces/documentation-ui/package.json b/workspaces/documentation-ui/package.json
index c01b1e81..61328ad7 100644
--- a/workspaces/documentation-ui/package.json
+++ b/workspaces/documentation-ui/package.json
@@ -27,10 +27,7 @@
       "types": "./dist/index.d.ts",
       "default": "./dist/index.js"
     },
-    "./node": {
-      "types": "./dist/nodejs/esm.d.ts",
-      "default": "./dist/nodejs/esm.js"
-    }
+    "./styles/*": "./dist/css/*"
   },
   "keywords": [
     "nodesecure",
diff --git a/workspaces/documentation-ui/src/nodejs/esm.ts b/workspaces/documentation-ui/src/nodejs/esm.ts
deleted file mode 100644
index e56dceb1..00000000
--- a/workspaces/documentation-ui/src/nodejs/esm.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-// Import Node.js Dependencies
-import path from "node:path";
-
-export function getBuildConfiguration() {
-  return {
-    entryPoints: [
-      path.join(import.meta.dirname, "..", "css", "main.css")
-    ]
-  };
-}