Adjusted tailwind style building to work with class name extraction

2025-07-14 14:40:10 +02:00
parent d88376f2fb
commit 4baa0bbe77
6 changed files with 109 additions and 15 deletions
--- a/Moonlight.Client.Runtime/Styles/extract-classes.js
+++ b/Moonlight.Client.Runtime/Styles/extract-classes.js
@@ -17,11 +17,11 @@ module.exports = (opts = {}) => {
        OnceExit() {
            const classArray = Array.from(classSet).sort();

-            if (!fs.existsSync("./mappings")){
-                fs.mkdirSync("./mappings");
+            if (!fs.existsSync("../../Moonlight.Client/Styles/mappings")){
+                fs.mkdirSync("../../Moonlight.Client/Styles/mappings");
            }
            
-            fs.writeFileSync('./mappings/mooncore.map', classArray.join('\n'));
+            fs.writeFileSync('../../Moonlight.Client/Styles/mappings/classes.map', classArray.join('\n'));
            console.log(`✅ Extracted ${classArray.length} Tailwind classes to tailwind-classes.txt`);
        }
    };
--- a/Moonlight.Client.Runtime/Styles/styles.css
+++ b/Moonlight.Client.Runtime/Styles/styles.css
@@ -1,5 +1,5 @@
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=fallback') layer(base);
-@import url('https://fonts.googleapis.com/css2?family=Source+Code+Pro:ital,wght@0,200..900;1,200..900&display=swap') layer()base;
+@import url('https://fonts.googleapis.com/css2?family=Source+Code+Pro:ital,wght@0,200..900;1,200..900&display=swap') layer(base);
@import url("https://cdn.jsdelivr.net/npm/lucide-static/font/lucide.css") layer(base);

@import "tailwindcss";
@@ -24,6 +24,7 @@
@source "../**/*.razor";
@source "../**/*.cs";
@source "../**/*.html";
+@source "./mappings/*.map";

@source "../../Moonlight.Client/**/*.cs";
@source "../../Moonlight.Client/**/*.html";
--- a/Moonlight.Client/Moonlight.Client.csproj
+++ b/Moonlight.Client/Moonlight.Client.csproj
@@ -54,15 +54,9 @@
  <ItemGroup>
    <ProjectReference Include="..\Moonlight.Shared\Moonlight.Shared.csproj" />
  </ItemGroup>
-  <ItemGroup>
-    <Folder Include="Styles\" />
-  </ItemGroup>
-  <ItemGroup>
-    <_ContentIncludedByDefault Remove="Properties\launchSettings.json" />
-  </ItemGroup>

  <ItemGroup>
-    <None Include="Styles/mappings/*" Pack="true" PackagePath="Styles/mappings/" />
-    <None Include="Moonlight.Client.targets" Pack="true" PackagePath="build\Moonlight.Client.targets" />
+    <None Include="Styles/*" Pack="true" PackagePath="Styles/Moonlight.Client/" />
+    <None Include="Moonlight.Client.targets" Pack="true" PackagePath="build/Moonlight.Client.targets" />
  </ItemGroup>
 </Project>
--- a/Moonlight.Client/Moonlight.Client.targets
+++ b/Moonlight.Client/Moonlight.Client.targets
@@ -3,6 +3,6 @@
    <StylesFilesToCopy Include="$(MSBuildThisFileDirectory)../Styles/**/*.*"/>
  </ItemGroup>
  <Target Name="CopyContent" BeforeTargets="Build">
-    <Copy SourceFiles="@(StylesFilesToCopy)" DestinationFolder="$(ProjectDir)Styles/%(RecursiveDir)" SkipUnchangedFiles="true" />
+    <Copy SourceFiles="@(StylesFilesToCopy)" DestinationFolder="$(ProjectDir)Styles/Moonlight.Client/%(RecursiveDir)" SkipUnchangedFiles="true" />
  </Target>
 </Project>
--- a/Moonlight.Client.Runtime/Styles/mappings/mooncore.map
+++ b/Moonlight.Client.Runtime/Styles/mappings/mooncore.map
@@ -66,24 +66,36 @@ bg-base-300
 bg-base-300/45
 bg-base-300/50
 bg-base-300/60
+bg-clip-text
 bg-error
+bg-gradient-to-r
+bg-gray-800
+bg-gray-900
+bg-indigo-600
 bg-info
 bg-primary
 bg-primary/5
+bg-red-500
 bg-success
 bg-transparent
 bg-warning
+bg-white/5
 block
 blur
 border
 border-0
 border-2
+border-accent
 border-b
 border-base-content
 border-base-content/20
 border-base-content/40
 border-base-content/5
+border-base-content/70
 border-dashed
+border-l-4
+border-primary
+border-success
 border-t
 border-transparent
 bottom-0
@@ -95,6 +107,7 @@ btn-active
 btn-circle
 btn-disabled
 btn-error
+btn-gradient
 btn-info
 btn-outline
 btn-primary
@@ -128,6 +141,8 @@ checkbox
 checkbox-primary
 checkbox-xs
 col-span-1
+col-span-12
+col-span-2
 collapse
 combo-box-selected:block
 combo-box-selected:dropdown-active
@@ -154,6 +169,7 @@ duration-500
 ease-in-out
 ease-linear
 end-3
+error-message
 file-upload-complete:progress-success
 fill-black
 filter
@@ -167,18 +183,26 @@ flex-nowrap
 flex-row
 flex-shrink-0
 flex-wrap
+focus-visible:outline
+focus-visible:outline-2
+focus-visible:outline-indigo-600
 focus-visible:outline-none
+focus-visible:outline-offset-2
 focus-within:border-primary
 focus:border-primary
 focus:outline-1
 focus:outline-none
 focus:outline-primary
 focus:ring-0
+focus:ring-2
+focus:ring-indigo-600
+focus:ring-inset
 font-bold
 font-inter
 font-medium
 font-normal
 font-semibold
+from-violet-400
 gap-0.5
 gap-1
 gap-1.5
@@ -190,15 +214,22 @@ gap-6
 gap-x-1
 gap-x-2
 gap-x-3
+gap-x-6
 gap-y-1
+gap-y-2
 gap-y-3
+gap-y-8
 grid
 grid-cols-1
+grid-cols-12
+grid-cols-2
 grid-flow-col
 grow
 grow-0
 h-12
+h-14
 h-2
+h-3
 h-32
 h-64
 h-8
@@ -207,10 +238,12 @@ h-full
 h-screen
 helper-text
 hidden
+hover:bg-indigo-500
 hover:bg-primary/5
 hover:bg-transparent
 hover:text-base-content
 hover:text-base-content/60
+hover:text-indigo-500
 hover:text-primary
 image-full
 inline
@@ -224,6 +257,7 @@ input-lg
 input-md
 input-sm
 input-xl
+input-xs
 inset-0
 inset-y-0
 inset-y-2
@@ -246,6 +280,8 @@ label-text
 leading-3
 leading-3.5
 leading-6
+leading-9
+leading-[1.1]
 left-0
 lg:bg-base-100/20
 lg:flex
@@ -260,6 +296,7 @@ lg:pb-5
 lg:pl-64
 lg:pr-3.5
 lg:pt-5
+lg:px-8
 lg:ring-1
 lg:ring-base-content/10
 lg:rounded-lg
@@ -281,6 +318,7 @@ max-w-7xl
 max-w-80
 max-w-full
 max-w-lg
+max-w-md
 max-w-sm
 max-w-xl
 mb-0.5
@@ -289,6 +327,11 @@ mb-2
 mb-3
 mb-4
 mb-5
+mb-8
+md:col-span-1
+md:col-span-6
+md:grid-cols-2
+md:min-w-md
 md:table-cell
 md:text-3xl
 me-1
@@ -304,12 +347,15 @@ menu-focus
 menu-horizontal
 menu-title
 min-h-0
+min-h-full
 min-h-svh
 min-w-0
 min-w-28
 min-w-48
 min-w-60
 min-w-[100px]
+min-w-sm
+mix-blend-exclusion
 ml-3
 ml-4
 modal
@@ -317,6 +363,7 @@ modal-content
 modal-dialog
 modal-middle
 modal-title
+mr-2
 mr-4
 ms-1
 ms-2
@@ -330,10 +377,12 @@ mt-2.5
 mt-3
 mt-4
 mt-5
+mt-6
 mt-8
 mx-1
 mx-auto
 my-3
+my-5
 my-auto
 opacity-0
 opacity-100
@@ -357,6 +406,7 @@ p-8
 pin-input
 pin-input-underline
 placeholder-base-content/60
+placeholder:text-gray-600
 pointer-events-auto
 pointer-events-none
 progress
@@ -370,8 +420,10 @@ px-2
 px-3
 px-4
 px-5
+px-6
 py-0.5
 py-1.5
+py-12
 py-2
 py-2.5
 py-6
@@ -381,6 +433,8 @@ relative
 resize
 ring-0
 ring-1
+ring-gray-700
+ring-inset
 ring-white/10
 rounded-box
 rounded-field
@@ -396,10 +450,17 @@ select-disabled:opacity-40
 select-disabled:pointer-events-none
 select-floating
 select-floating-label
+select-lg
+select-md
+select-sm
+select-xl
+select-xs
 selected
 selected:select-active
+shadow
 shadow-base-300/20
 shadow-lg
+shadow-sm
 shadow-xs
 shrink-0
 size-10
@@ -409,37 +470,53 @@ size-8
 skeleton
 skeleton-animated
 sm:auto-cols-max
+sm:col-span-2
 sm:flex
+sm:gap-y-0
+sm:grid-cols-3
+sm:grid-cols-6
 sm:items-center
 sm:items-end
 sm:justify-between
 sm:justify-end
+sm:leading-6
 sm:max-w-2xl
 sm:max-w-3xl
 sm:max-w-4xl
 sm:max-w-5xl
 sm:max-w-6xl
 sm:max-w-7xl
+sm:max-w-[480px]
 sm:max-w-lg
 sm:max-w-md
 sm:max-w-xl
 sm:mb-0
+sm:mr-3
 sm:mt-5
 sm:mt-6
+sm:mx-auto
 sm:p-6
+sm:px-12
+sm:px-6
 sm:py-2
+sm:rounded-lg
+sm:text-sm
 sm:text-sm/5
+sm:w-full
 space-x-1
 space-y-1
 space-y-4
+space-y-6
 sr-only
 static
 status
 status-error
 sticky
+success-message
 switch
 tab
 tab-active
+tab-content
 table
 table-pin-cols
 table-pin-rows
@@ -449,9 +526,11 @@ tabs-lg
 tabs-lifted
 tabs-md
 tabs-sm
+tabs-vertical
 tabs-xl
 tabs-xs
 text-2xl
+text-3xl
 text-4xl
 text-accent
 text-base
@@ -461,35 +540,50 @@ text-base-content/50
 text-base-content/60
 text-base-content/70
 text-base-content/80
+text-base-content/90
 text-base/6
 text-center
 text-error
 text-error-content
+text-gray-100
 text-gray-400
+text-gray-500
+text-indigo-600
 text-info
 text-info-content
 text-left
 text-lg
 text-primary
 text-primary-content
+text-slate-100
 text-sm
 text-sm/5
 text-success
 text-success-content
+text-transparent
 text-warning
 text-warning-content
+text-white
 text-xl
 text-xs
 text-xs/5
 textarea
 textarea-floating
 textarea-floating-label
+textarea-lg
+textarea-md
+textarea-sm
+textarea-xl
+textarea-xs
 theme-controller
+to-purple-400
 tooltip
 tooltip-content
 top-0
 top-1/2
 top-full
+tracking-tight
+tracking-wide
 transform
 transition
 transition-all
@@ -499,15 +593,20 @@ truncate
 underline
 uppercase
 validate
+via-sky-400
 w-0
 w-0.5
 w-12
+w-32
 w-4
 w-56
 w-64
+w-auto
 w-fit
 w-full
 whitespace-nowrap
+xl:grid-cols-3
+xl:grid-cols-4
 z-10
 z-40
 z-50
--- a/Moonlight.Client/UI/Views/Admin/Api/Index.razor
+++ b/Moonlight.Client/UI/Views/Admin/Api/Index.razor
@@ -22,14 +22,14 @@
        </a>
    </div>

-    <div class="col-span-1 card card-body border-l-4 border-tertiary">
+    <div class="col-span-1 card card-body border-l-4 border-accent">
        <p class="font-medium tracking-wide text-base-content">
            Learn about the api usage
        </p>
        <a href="https://help.moonlightpanel.xyz" target="_blank" class="mt-2 flex items-center justify-between text-primary">
            <div class="font-medium">Open</div>
            <div>
-                <i class="bi bi-box-arrow-up-right text-lg text-tertiary"></i>
+                <i class="bi bi-box-arrow-up-right text-lg text-accent"></i>
            </div>
        </a>
    </div>