Reorganizes and optimizes shared CSS components
Consolidates UI components into a centralized components.css file Removes duplicate styles across multiple CSS files Adds utility classes in a new utilities.css file Reduces overall CSS complexity and improves maintainability Removes quick-stats.css and redistributes its styles Updates layout and stylesheet references accordingly
This commit is contained in:
Janus C. H. Knudsen
parent
15579acba8
commit
2e6207bb0b
33 changed files with 971 additions and 796 deletions
|
|
@ -152,19 +152,19 @@
|
|||
<div class="summary">
|
||||
<div class="stat-card">
|
||||
<div class="stat-label">Total CSS Size</div>
|
||||
<div class="stat-value">132.81 KB</div>
|
||||
<div class="stat-value">134.17 KB</div>
|
||||
</div>
|
||||
<div class="stat-card info">
|
||||
<div class="stat-label">CSS Files</div>
|
||||
<div class="stat-value">21</div>
|
||||
<div class="stat-value">22</div>
|
||||
</div>
|
||||
<div class="stat-card info">
|
||||
<div class="stat-label">Total Lines</div>
|
||||
<div class="stat-value">6.033</div>
|
||||
<div class="stat-value">6.124</div>
|
||||
</div>
|
||||
<div class="stat-card warning">
|
||||
<div class="stat-label">Unused CSS Rules</div>
|
||||
<div class="stat-value">61</div>
|
||||
<div class="stat-value">87</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -186,34 +186,44 @@
|
|||
|
||||
<tr>
|
||||
<td><strong>auth.css</strong></td>
|
||||
<td>23.66 KB</td>
|
||||
<td>1144</td>
|
||||
<td>169</td>
|
||||
<td>173</td>
|
||||
<td>571</td>
|
||||
<td>46</td>
|
||||
<td>20.41 KB</td>
|
||||
<td>994</td>
|
||||
<td>145</td>
|
||||
<td>149</td>
|
||||
<td>488</td>
|
||||
<td>43</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td><strong>cash.css</strong></td>
|
||||
<td>19.38 KB</td>
|
||||
<td>898</td>
|
||||
<td>132</td>
|
||||
<td>135</td>
|
||||
<td>415</td>
|
||||
<td>42</td>
|
||||
<td>16.75 KB</td>
|
||||
<td>782</td>
|
||||
<td>114</td>
|
||||
<td>117</td>
|
||||
<td>359</td>
|
||||
<td>39</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td><strong>employees.css</strong></td>
|
||||
<td>15.55 KB</td>
|
||||
<td>722</td>
|
||||
<td>105</td>
|
||||
<td>108</td>
|
||||
<td>345</td>
|
||||
<td>15.02 KB</td>
|
||||
<td>694</td>
|
||||
<td>100</td>
|
||||
<td>103</td>
|
||||
<td>327</td>
|
||||
<td>37</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td><strong>components.css</strong></td>
|
||||
<td>9.23 KB</td>
|
||||
<td>426</td>
|
||||
<td>63</td>
|
||||
<td>63</td>
|
||||
<td>185</td>
|
||||
<td>39</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td><strong>design-tokens.css</strong></td>
|
||||
<td>9.02 KB</td>
|
||||
|
|
@ -226,12 +236,12 @@
|
|||
|
||||
<tr>
|
||||
<td><strong>account.css</strong></td>
|
||||
<td>8.83 KB</td>
|
||||
<td>402</td>
|
||||
<td>60</td>
|
||||
<td>63</td>
|
||||
<td>173</td>
|
||||
<td>31</td>
|
||||
<td>7.31 KB</td>
|
||||
<td>335</td>
|
||||
<td>47</td>
|
||||
<td>50</td>
|
||||
<td>146</td>
|
||||
<td>30</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
|
|
@ -245,13 +255,13 @@
|
|||
</tr>
|
||||
|
||||
<tr>
|
||||
<td><strong>page.css</strong></td>
|
||||
<td>6.00 KB</td>
|
||||
<td>276</td>
|
||||
<td>38</td>
|
||||
<td>40</td>
|
||||
<td>117</td>
|
||||
<td>35</td>
|
||||
<td><strong>stats.css</strong></td>
|
||||
<td>5.87 KB</td>
|
||||
<td>262</td>
|
||||
<td>34</td>
|
||||
<td>36</td>
|
||||
<td>93</td>
|
||||
<td>30</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
|
|
@ -265,29 +275,29 @@
|
|||
</tr>
|
||||
|
||||
<tr>
|
||||
<td><strong>waitlist.css</strong></td>
|
||||
<td>5.55 KB</td>
|
||||
<td>251</td>
|
||||
<td>30</td>
|
||||
<td>30</td>
|
||||
<td>131</td>
|
||||
<td><strong>page.css</strong></td>
|
||||
<td>5.07 KB</td>
|
||||
<td>231</td>
|
||||
<td>31</td>
|
||||
<td>33</td>
|
||||
<td>92</td>
|
||||
<td>33</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td><strong>stats.css</strong></td>
|
||||
<td>5.18 KB</td>
|
||||
<td>232</td>
|
||||
<td>30</td>
|
||||
<td>32</td>
|
||||
<td>78</td>
|
||||
<td>27</td>
|
||||
<td><strong>waitlist.css</strong></td>
|
||||
<td>4.63 KB</td>
|
||||
<td>211</td>
|
||||
<td>25</td>
|
||||
<td>25</td>
|
||||
<td>101</td>
|
||||
<td>28</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td><strong>bookings.css</strong></td>
|
||||
<td>4.27 KB</td>
|
||||
<td>176</td>
|
||||
<td>4.34 KB</td>
|
||||
<td>177</td>
|
||||
<td>28</td>
|
||||
<td>28</td>
|
||||
<td>75</td>
|
||||
|
|
@ -364,6 +374,16 @@
|
|||
<td>8</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td><strong>utilities.css</strong></td>
|
||||
<td>2.03 KB</td>
|
||||
<td>119</td>
|
||||
<td>24</td>
|
||||
<td>24</td>
|
||||
<td>44</td>
|
||||
<td>9</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td><strong>notifications.css</strong></td>
|
||||
<td>1.67 KB</td>
|
||||
|
|
@ -384,16 +404,6 @@
|
|||
<td>6</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td><strong>quick-stats.css</strong></td>
|
||||
<td>0.88 KB</td>
|
||||
<td>39</td>
|
||||
<td>4</td>
|
||||
<td>4</td>
|
||||
<td>15</td>
|
||||
<td>11</td>
|
||||
</tr>
|
||||
|
||||
</tbody>
|
||||
</table>
|
||||
</section>
|
||||
|
|
@ -422,6 +432,27 @@
|
|||
|
||||
</div>
|
||||
|
||||
<div class="file-detail">
|
||||
<h3>utilities.css</h3>
|
||||
<p>
|
||||
<span class="badge badge-warning">
|
||||
23 unused rules
|
||||
</span>
|
||||
<span style="margin-left: 10px; color: #666;">
|
||||
Original: 1001 | After purge: 784
|
||||
</span>
|
||||
</p>
|
||||
|
||||
<details>
|
||||
<summary>Show unused selectors</summary>
|
||||
<div class="rejected-list">
|
||||
.flex-center<br>.flex-between<br>.flex-start<br>.flex-end<br>.flex-column<br>.flex-1<br>.flex-shrink-0<br>.text-truncate<br>.text-center<br>.text-right<br>.text-secondary<br>.text-muted<br>.text-mono<br>.gap-2<br>.gap-3<br>.gap-4<br>.gap-6<br>.gap-8<br>.mt-auto<br>.mb-0<br>.sr-only<br>.w-full<br>.min-w-0
|
||||
|
||||
</div>
|
||||
</details>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="file-detail">
|
||||
<h3>design-system.css</h3>
|
||||
<p>
|
||||
|
|
@ -443,6 +474,27 @@
|
|||
|
||||
</div>
|
||||
|
||||
<div class="file-detail">
|
||||
<h3>components.css</h3>
|
||||
<p>
|
||||
<span class="badge badge-success">
|
||||
7 unused rules
|
||||
</span>
|
||||
<span style="margin-left: 10px; color: #666;">
|
||||
Original: 8905 | After purge: 8780
|
||||
</span>
|
||||
</p>
|
||||
|
||||
<details>
|
||||
<summary>Show unused selectors</summary>
|
||||
<div class="rejected-list">
|
||||
swp-btn.social<br>swp-btn.social:hover<br>swp-btn.social img<br>swp-plan-badge.free<br>swp-avatar.size-xs<br>swp-avatar.size-sm<br>swp-avatar.size-lg
|
||||
|
||||
</div>
|
||||
</details>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="file-detail">
|
||||
<h3>bookings.css</h3>
|
||||
<p>
|
||||
|
|
@ -450,7 +502,7 @@
|
|||
6 unused rules
|
||||
</span>
|
||||
<span style="margin-left: 10px; color: #666;">
|
||||
Original: 3924 | After purge: 3756
|
||||
Original: 3998 | After purge: 3830
|
||||
</span>
|
||||
</p>
|
||||
|
||||
|
|
@ -507,27 +559,6 @@ swp-booking-status.in-progress
|
|||
|
||||
</div>
|
||||
|
||||
<div class="file-detail">
|
||||
<h3>auth.css</h3>
|
||||
<p>
|
||||
<span class="badge badge-success">
|
||||
4 unused rules
|
||||
</span>
|
||||
<span style="margin-left: 10px; color: #666;">
|
||||
Original: 23887 | After purge: 23816
|
||||
</span>
|
||||
</p>
|
||||
|
||||
<details>
|
||||
<summary>Show unused selectors</summary>
|
||||
<div class="rejected-list">
|
||||
swp-btn.social<br>swp-btn.social:hover<br>swp-btn.social img<br>swp-plan-badge.free
|
||||
|
||||
</div>
|
||||
</details>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="file-detail">
|
||||
<h3>stats.css</h3>
|
||||
<p>
|
||||
|
|
@ -535,7 +566,7 @@ swp-booking-status.in-progress
|
|||
3 unused rules
|
||||
</span>
|
||||
<span style="margin-left: 10px; color: #666;">
|
||||
Original: 5298 | After purge: 5229
|
||||
Original: 6010 | After purge: 5941
|
||||
</span>
|
||||
</p>
|
||||
|
||||
|
|
@ -557,7 +588,7 @@ swp-stat-card.red swp-stat-value
|
|||
2 unused rules
|
||||
</span>
|
||||
<span style="margin-left: 10px; color: #666;">
|
||||
Original: 8829 | After purge: 8777
|
||||
Original: 7277 | After purge: 7225
|
||||
</span>
|
||||
</p>
|
||||
|
||||
|
|
@ -599,7 +630,7 @@ swp-stat-card.red swp-stat-value
|
|||
1 unused rules
|
||||
</span>
|
||||
<span style="margin-left: 10px; color: #666;">
|
||||
Original: 19816 | After purge: 19778
|
||||
Original: 17121 | After purge: 17083
|
||||
</span>
|
||||
</p>
|
||||
|
||||
|
|
@ -620,7 +651,7 @@ swp-stat-card.red swp-stat-value
|
|||
0 unused rules
|
||||
</span>
|
||||
<span style="margin-left: 10px; color: #666;">
|
||||
Original: 5686 | After purge: 5686
|
||||
Original: 4737 | After purge: 4737
|
||||
</span>
|
||||
</p>
|
||||
<p style="color: #2e7d32; margin-top: 10px;">✅ No unused CSS found!</p>
|
||||
|
|
@ -665,19 +696,6 @@ swp-stat-card.red swp-stat-value
|
|||
<p style="color: #2e7d32; margin-top: 10px;">✅ No unused CSS found!</p>
|
||||
</div>
|
||||
|
||||
<div class="file-detail">
|
||||
<h3>quick-stats.css</h3>
|
||||
<p>
|
||||
<span class="badge badge-success">
|
||||
0 unused rules
|
||||
</span>
|
||||
<span style="margin-left: 10px; color: #666;">
|
||||
Original: 899 | After purge: 899
|
||||
</span>
|
||||
</p>
|
||||
<p style="color: #2e7d32; margin-top: 10px;">✅ No unused CSS found!</p>
|
||||
</div>
|
||||
|
||||
<div class="file-detail">
|
||||
<h3>page.css</h3>
|
||||
<p>
|
||||
|
|
@ -685,7 +703,7 @@ swp-stat-card.red swp-stat-value
|
|||
0 unused rules
|
||||
</span>
|
||||
<span style="margin-left: 10px; color: #666;">
|
||||
Original: 6140 | After purge: 6140
|
||||
Original: 5193 | After purge: 5193
|
||||
</span>
|
||||
</p>
|
||||
<p style="color: #2e7d32; margin-top: 10px;">✅ No unused CSS found!</p>
|
||||
|
|
@ -711,7 +729,7 @@ swp-stat-card.red swp-stat-value
|
|||
0 unused rules
|
||||
</span>
|
||||
<span style="margin-left: 10px; color: #666;">
|
||||
Original: 15923 | After purge: 15923
|
||||
Original: 15383 | After purge: 15383
|
||||
</span>
|
||||
</p>
|
||||
<p style="color: #2e7d32; margin-top: 10px;">✅ No unused CSS found!</p>
|
||||
|
|
@ -743,6 +761,19 @@ swp-stat-card.red swp-stat-value
|
|||
<p style="color: #2e7d32; margin-top: 10px;">✅ No unused CSS found!</p>
|
||||
</div>
|
||||
|
||||
<div class="file-detail">
|
||||
<h3>auth.css</h3>
|
||||
<p>
|
||||
<span class="badge badge-success">
|
||||
0 unused rules
|
||||
</span>
|
||||
<span style="margin-left: 10px; color: #666;">
|
||||
Original: 20895 | After purge: 20895
|
||||
</span>
|
||||
</p>
|
||||
<p style="color: #2e7d32; margin-top: 10px;">✅ No unused CSS found!</p>
|
||||
</div>
|
||||
|
||||
<div class="file-detail">
|
||||
<h3>app-layout.css</h3>
|
||||
<p>
|
||||
|
|
@ -769,7 +800,7 @@ swp-stat-card.red swp-stat-value
|
|||
</ul>
|
||||
</section>
|
||||
|
||||
<p class="timestamp">Report generated: 12.1.2026, 21.57.11</p>
|
||||
<p class="timestamp">Report generated: 12.1.2026, 23.25.14</p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue