Prepared tailwind system for plugin builds and exports via nuget. Removed obsolete old css bundling. Added helper scripts for building. Rewritten build scripts

Moonlight.Client/Moonlight.Client.csproj

@@ -9,6 +9,7 @@
         <DefaultItemExcludes>
             **\bin\**;**\obj\**;**\node_modules\**;**\Styles\*.json
         </DefaultItemExcludes>
+        <StaticWebAssetsEnabled>True</StaticWebAssetsEnabled>
     </PropertyGroup>
 
 
@@ -40,11 +41,6 @@
             <PackagePath>src</PackagePath>
             <CopyToOutputDirectory>Never</CopyToOutputDirectory>
         </None>
-        <None Include="**\*.razor" Exclude="storage\**\*;bin\**\*;obj\**\*">
-            <Pack>true</Pack>
-            <PackagePath>src</PackagePath>
-            <CopyToOutputDirectory>Never</CopyToOutputDirectory>
-        </None>
         <None Include="Styles\**\*" Exclude="storage\**\*;bin\**\*;obj\**\*;Styles\node_modules\**\*">
             <Pack>true</Pack>
             <PackagePath>styles</PackagePath>
@@ -72,10 +68,4 @@
         <ProjectReference Include="..\Moonlight.Shared\Moonlight.Shared.csproj"/>
     </ItemGroup>
 
-    <ItemGroup>
-        <Folder Include="Helpers\"/>
-        <Folder Include="Styles\"/>
-        <Folder Include="wwwroot\css\"/>
-    </ItemGroup>
-
 </Project>

Moonlight.Client/Styles/build.bat

@@ -1 +0,0 @@
-npx tailwindcss -i style.css -o ../wwwroot/css/core.min.css --watch

Moonlight.Client/Styles/build.sh

@@ -1,2 +0,0 @@
-#! /bin/bash
-npx tailwindcss -i style.css -o ../wwwroot/css/core.min.css --watch

Moonlight.Client/Styles/exports.css

@@ -0,0 +1,26 @@
+@import "./additions/fonts.css";
+@import "./additions/theme.css" layer(theme);
+
+/* @import "./additions/theme.white.css"; */
+
+@import "./additions/buttons.css" layer(components);
+@import "./additions/cards.css" layer(components);
+@import "./additions/forms.css" layer(utilities);
+@import "./additions/progress.css" layer(components);
+@import "./additions/scrollbar.css" layer(components);
+@import "./additions/loaders.css" layer(components);
+@import "./additions/tabs.css" layer(components);
+
+@source "./mappings/*.map";
+
+#blazor-error-ui {
+    display: none;
+}
+
+#blazor-loader-label:after {
+    content: var(--blazor-load-percentage-text, "Loading");
+}
+
+#blazor-loader-progress {
+    width: var(--blazor-load-percentage, 0%);
+}

Moonlight.Client/Styles/package-lock.json

@@ -7,7 +7,8 @@
       "dependencies": {
         "@tailwindcss/cli": "^4.1.4",
         "@tailwindcss/forms": "^0.5.10",
-        "tailwindcss": "^4.1.4"
+        "tailwindcss": "^4.1.4",
+        "xml2js": "^0.6.2"
       }
     },
     "node_modules/@parcel/watcher": {
@@ -904,6 +905,11 @@
         "url": "https://github.com/sponsors/jonschlinkert"
       }
     },
+    "node_modules/sax": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/sax/-/sax-1.4.1.tgz",
+      "integrity": "sha512-+aWOz7yVScEGoKNd4PA10LZ8sk0A/z5+nXQG5giUO5rprX9jgYsTdov9qCchZiPIZezbZH+jRut8nPodFAX4Jg=="
+    },
     "node_modules/tailwindcss": {
       "version": "4.1.5",
       "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-4.1.5.tgz",
@@ -927,6 +933,26 @@
       "engines": {
         "node": ">=8.0"
       }
+    },
+    "node_modules/xml2js": {
+      "version": "0.6.2",
+      "resolved": "https://registry.npmjs.org/xml2js/-/xml2js-0.6.2.tgz",
+      "integrity": "sha512-T4rieHaC1EXcES0Kxxj4JWgaUQHDk+qwHcYOCFHfiwKz7tOVPLq7Hjq9dM1WCMhylqMEfP7hMcOIChvotiZegA==",
+      "dependencies": {
+        "sax": ">=0.6.0",
+        "xmlbuilder": "~11.0.0"
+      },
+      "engines": {
+        "node": ">=4.0.0"
+      }
+    },
+    "node_modules/xmlbuilder": {
+      "version": "11.0.1",
+      "resolved": "https://registry.npmjs.org/xmlbuilder/-/xmlbuilder-11.0.1.tgz",
+      "integrity": "sha512-fDlsI/kFEx7gLvbecc0/ohLG50fugQp8ryHzMTuW9vSa1GJ0XYWKnhsUx7oie3G98+r56aTQIUB4kht42R3JvA==",
+      "engines": {
+        "node": ">=4.0"
+      }
     }
   }
 }

Moonlight.Client/Styles/package.json

@@ -2,6 +2,11 @@
   "dependencies": {
     "@tailwindcss/cli": "^4.1.4",
     "@tailwindcss/forms": "^0.5.10",
-    "tailwindcss": "^4.1.4"
+    "tailwindcss": "^4.1.4",
+    "xml2js": "^0.6.2"
+  },
+  "scripts": {
+    "tailwind": "npx tailwindcss -i style.css -o ../wwwroot/css/style.min.css --watch",
+    "pretailwind": "node resolveNuget.js ../Moonlight.Client.csproj"
   }
 }

Moonlight.Client/Styles/preTailwind.css

@@ -0,0 +1 @@
+@import "./additions/fonts.css";

Moonlight.Client/Styles/resolveNuget.js

@@ -0,0 +1,80 @@
+const fs = require('fs');
+const path = require('path');
+const os = require('os');
+const xml2js = require('xml2js');
+
+// Helpers
+function getPackageRefs(csprojPath) {
+    const xml = fs.readFileSync(csprojPath, 'utf8');
+    const parser = new xml2js.Parser();
+
+    return new Promise((resolve, reject) => {
+        parser.parseString(xml, (err, result) => {
+            if (err) return reject(err);
+
+            const itemGroups = result.Project.ItemGroup || [];
+            const refs = [];
+
+            for (const group of itemGroups) {
+                const packages = group.PackageReference || [];
+                for (const pkg of packages) {
+                    const name = pkg.$.Include;
+                    const version = pkg.$.Version || (pkg.Version && pkg.Version[0]);
+                    if (name && version) {
+                        refs.push({ name: name.toLowerCase(), version });
+                    }
+                }
+            }
+            resolve(refs);
+        });
+    });
+}
+
+async function main() {
+    const csprojPath = process.argv[2];
+    if (!csprojPath || !fs.existsSync(csprojPath)) {
+        console.error('Usage: Missing csproj path');
+        process.exit(1);
+    }
+
+    const nugetPath = path.join(os.homedir(), '.nuget', 'packages');
+    const moonlightDir = path.join(__dirname, 'node_modules', 'moonlight');
+    fs.mkdirSync(moonlightDir, { recursive: true });
+
+    const refs = await getPackageRefs(csprojPath);
+
+    var outputCss = "";
+    var preOutputCss = "";
+
+    for (const { name, version } of refs) {
+        const packagePath = path.join(nugetPath, name, version);
+        const exportsFile = path.join(packagePath, 'styles', 'exports.css');
+        const preTailwindFile = path.join(packagePath, 'styles', 'preTailwind.css');
+        const sourceFolder = path.join(packagePath, 'src');
+
+        const rel = (p) => p.replace(/\\/g, '/');
+
+        if (fs.existsSync(exportsFile)) {
+            outputCss += `@import "${rel(exportsFile)}";\n`;
+        }
+
+        if (fs.existsSync(preTailwindFile)) {
+            preOutputCss += `@import "${rel(preTailwindFile)}";\n`;
+        }
+
+        if (fs.existsSync(sourceFolder)) {
+            outputCss += `@source "${rel(path.join(sourceFolder, "**", "*.razor"))}";\n`;
+            outputCss += `@source "${rel(path.join(sourceFolder, "**", "*.cs"))}";\n`;
+            outputCss += `@source "${rel(path.join(sourceFolder, "**", "*.html"))}";\n`;
+        }
+    }
+
+    fs.writeFileSync(path.join(moonlightDir, 'nuget.css'), outputCss);
+    fs.writeFileSync(path.join(moonlightDir, 'preTailwind.nuget.css'), preOutputCss);
+    console.log(`Generated nuget.css in ${moonlightDir}`);
+}
+
+main().catch(err => {
+    console.error(err);
+    process.exit(1);
+});

Moonlight.Client/Styles/style.css

@@ -1,32 +1,14 @@
-@import "./additions/fonts.css";
+@import "./preTailwind.css";
+@import "moonlight/preTailwind.nuget.css";
+
 @import "tailwindcss";
-@import "./additions/theme.css" layer(theme);
 
-/* @import "./additions/theme.white.css"; */
-
-@import "./additions/buttons.css" layer(components);
-@import "./additions/cards.css" layer(components);
-@import "./additions/forms.css" layer(utilities);
-@import "./additions/progress.css" layer(components);
-@import "./additions/scrollbar.css" layer(components);
-@import "./additions/loaders.css" layer(components);
-@import "./additions/tabs.css" layer(components);
+@import "./exports.css";
+@import "moonlight/nuget.css";
 
 @plugin "@tailwindcss/forms";
 
 @source "../**/*.razor";
 @source "../**/*.cs";
 @source "../**/*.html";
-@source "./mappings/*.map";
-
-#blazor-error-ui {
-    display: none;
-}
-
-#blazor-loader-label:after {
-    content: var(--blazor-load-percentage-text, "Loading");
-}
-
-#blazor-loader-progress {
-    width: var(--blazor-load-percentage, 0%);
-}
+@source "./mappings/*.map";

Moonlight.Client/wwwroot/index.html

@@ -6,10 +6,10 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Moonlight.Client</title>
     <base href="/" />
-    <link rel="stylesheet" href="/css/bundle.css" />
+    <link rel="stylesheet" href="/css/style.min.css" />
     <link href="manifest.webmanifest" rel="manifest" />
-    <link rel="apple-touch-icon" sizes="512x512" href="icon-512.png" />
-    <link rel="apple-touch-icon" sizes="192x192" href="icon-192.png" />
+    <link rel="apple-touch-icon" sizes="512x512" href="/img/icon-512.png" />
+    <link rel="apple-touch-icon" sizes="192x192" href="/img/icon-192.png" />
 </head>
 
 <body class="bg-gray-950 text-white font-inter h-full">