Implemented Tailwind CSS class list extraction and integrated it into the build process of the frontend package

.gitea/workflows/publish-nuget.yml

@@ -32,6 +32,10 @@ jobs:
         run: rm -rf ./artifacts
       
       # Publish frontend  
+      - name: Build tailwind styles and extract class list
+        working-directory: Hosts/Moonlight.Frontend.Host/Styles
+        run: npm run build
+      
       - name: Build project
         run: dotnet build Moonlight.Frontend --configuration Debug
 

Hosts/Moonlight.Frontend.Host/Moonlight.Frontend.Host.csproj

@@ -14,11 +14,11 @@
     <ItemGroup>
         <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly" Version="10.0.1"/>
         <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly.DevServer" Version="10.0.1" PrivateAssets="all"/>
-        <PackageReference Include="MoonCore.PluginFramework" Version="1.0.9" />
+        <PackageReference Include="MoonCore.PluginFramework" Version="1.0.9"/>
-        <PackageReference Include="MoonCore.PluginFramework.Generator" Version="1.0.3" />
+        <PackageReference Include="MoonCore.PluginFramework.Generator" Version="1.0.3"/>
     </ItemGroup>
 
     <ItemGroup>
-      <ProjectReference Include="..\..\Moonlight.Frontend\Moonlight.Frontend.csproj" />
+        <ProjectReference Include="..\..\Moonlight.Frontend\Moonlight.Frontend.csproj" />
     </ItemGroup>
 </Project>

Hosts/Moonlight.Frontend.Host/Styles/extract-classes.mjs

@@ -0,0 +1,25 @@
+import fs from 'fs';
+import selectorParser from 'postcss-selector-parser';
+
+export default function extractTailwindClasses(opts = {}) {
+    const classSet = new Set();
+
+    return {
+        postcssPlugin: 'extract-tailwind-classes',
+        Rule(rule) {
+            selectorParser(selectors => {
+                selectors.walkClasses(node => {
+                    classSet.add(node.value);
+                });
+            }).processSync(rule.selector);
+        },
+        OnceExit() {
+            const classArray = Array.from(classSet).sort();
+            fs.mkdirSync('../../../Moonlight.Frontend/Styles', { recursive: true });
+            fs.writeFileSync('../../../Moonlight.Frontend/Styles/Moonlight.Frontend.map', classArray.join('\n'));
+            console.log(`Extracted classes ${classArray.length}`);
+        }
+    };
+}
+
+extractTailwindClasses.postcss = true;

Hosts/Moonlight.Frontend.Host/Styles/package.json

@@ -1,15 +1,20 @@
 {
   "scripts": {
-    "tailwind": "npx postcss styles.css -o ../wwwroot/style.min.css --watch",
+    "dev": "npx postcss styles.css -o ../wwwroot/style.min.css --watch",
-    "tailwind-build": "npx postcss styles.css -o ../wwwroot/style.min.css"
+    "dev-build": "npx postcss styles.css -o ../wwwroot/style.min.css",
+    "build": "cross-env EXTRACT_CLASSES=true npx postcss styles.css -o ../wwwroot/style.min.css"
   },
   "dependencies": {
     "@tailwindcss/postcss": "^4.1.18",
     "cssnano": "^7.1.2",
     "postcss": "^8.5.6",
     "postcss-cli": "^11.0.1",
+    "postcss-selector-parser": "^7.1.1",
     "shadcnblazor": "^1.0.5",
     "tailwindcss": "^4.1.18",
     "tw-animate-css": "^1.4.0"
+  },
+  "devDependencies": {
+    "cross-env": "^10.1.0"
   }
 }

Hosts/Moonlight.Frontend.Host/Styles/postcss.config.mjs

@@ -1,8 +1,18 @@
-export default {
+import tailwindcss from '@tailwindcss/postcss';
-    plugins: {
+import cssnano from 'cssnano';
-        "@tailwindcss/postcss": {},
+import extractTailwindClasses from './extract-classes.mjs';
-        "cssnano":{
+
-            preset: 'default'
+const plugins = [
-        }
+    tailwindcss,
-    }
+    cssnano({
+        preset: 'default'
+    })
+];
+
+if (process.env.EXTRACT_CLASSES === "true") {
+    plugins.push(extractTailwindClasses());
 }
+
+export default {
+    plugins
+};

Moonlight.Frontend/Moonlight.Frontend.csproj

@@ -23,7 +23,6 @@
     <ItemGroup>
         <PackageReference Include="Microsoft.AspNetCore.Components.Authorization" Version="10.0.1"/>
         <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly" Version="10.0.1"/>
-        <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly.DevServer" Version="10.0.1" PrivateAssets="all"/>
         <PackageReference Include="Riok.Mapperly" Version="4.3.1-next.0"/>
         <PackageReference Include="ShadcnBlazor" Version="1.0.5" />
         <PackageReference Include="ShadcnBlazor.Extras" Version="1.0.5" />
@@ -33,4 +32,8 @@
         <ProjectReference Include="..\Moonlight.Shared\Moonlight.Shared.csproj"/>
     </ItemGroup>
     
+    <ItemGroup>
+        <None Include="Styles/*" Pack="true" PackagePath="Styles/" />
+        <None Include="Moonlight.Frontend.targets" Pack="true" PackagePath="build\Moonlight.Frontend.targets" />
+    </ItemGroup>
 </Project>

Moonlight.Frontend/Moonlight.Frontend.targets

@@ -0,0 +1,15 @@
+<Project>
+    <PropertyGroup>
+        <MoonlightCssClassDir Condition="'$(MoonlightCssClassDir)' == ''">
+            $(MSBuildProjectDirectory)\bin\Moonlight.Frontend
+        </MoonlightCssClassDir>
+    </PropertyGroup>
+
+    <Target Name="CopyContents" BeforeTargets="Build">
+        <ItemGroup>
+            <Files Include="$(MSBuildThisFileDirectory)..\Styles\**\*" />
+        </ItemGroup>
+
+        <Copy SourceFiles="@(Files)" DestinationFolder="$(MoonlightCssClassDir)" SkipUnchangedFiles="true" />
+    </Target>
+</Project>

Moonlight.Frontend/Styles/Moonlight.Frontend.map

@@ -0,0 +1 @@
+THIS WILL BE GENERATED ON PACKAGE BUILD