Refactor calendar CSS for version 2
Consolidates and optimizes CSS files for calendar v2 Reduces CSS files from 8 to 4, improving project structure Minimizes unused CSS rules and improves overall CSS efficiency Simplifies PurgeCSS configuration and content targeting
This commit is contained in:
Janus C. H. Knudsen
parent
67b59e0993
commit
4e22fbc948
5 changed files with 156 additions and 421 deletions
|
|
@ -141,19 +141,19 @@
|
|||
<div class="summary">
|
||||
<div class="stat-card">
|
||||
<div class="stat-label">Total CSS Size</div>
|
||||
<div class="stat-value">36.99 KB</div>
|
||||
<div class="stat-value">17.00 KB</div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<div class="stat-label">CSS Files</div>
|
||||
<div class="stat-value">8</div>
|
||||
<div class="stat-value">4</div>
|
||||
</div>
|
||||
<div class="stat-card warning">
|
||||
<div class="stat-label">Unused CSS Rules</div>
|
||||
<div class="stat-value">71</div>
|
||||
<div class="stat-value">23</div>
|
||||
</div>
|
||||
<div class="stat-card success">
|
||||
<div class="stat-label">Potential Removal</div>
|
||||
<div class="stat-value">0.22%</div>
|
||||
<div class="stat-value">0.15%</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -174,73 +174,43 @@
|
|||
<tbody>
|
||||
|
||||
<tr>
|
||||
<td><strong>calendar-base-css.css</strong></td>
|
||||
<td>5.14 KB</td>
|
||||
<td>242</td>
|
||||
<td>25</td>
|
||||
<td>29</td>
|
||||
<td>107</td>
|
||||
<td>27</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td><strong>calendar-components-css.css</strong></td>
|
||||
<td>4.28 KB</td>
|
||||
<td>236</td>
|
||||
<td>26</td>
|
||||
<td>36</td>
|
||||
<td>116</td>
|
||||
<td>4</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td><strong>calendar-events-css.css</strong></td>
|
||||
<td>6.50 KB</td>
|
||||
<td>308</td>
|
||||
<td>41</td>
|
||||
<td>45</td>
|
||||
<td>139</td>
|
||||
<td>4</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td><strong>calendar-layout-css.css</strong></td>
|
||||
<td>10.59 KB</td>
|
||||
<td>1</td>
|
||||
<td>84</td>
|
||||
<td>84</td>
|
||||
<td>237</td>
|
||||
<td>12</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td><strong>calendar-month-css.css</strong></td>
|
||||
<td>6.59 KB</td>
|
||||
<td>315</td>
|
||||
<td>51</td>
|
||||
<td>54</td>
|
||||
<td>155</td>
|
||||
<td>10</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td><strong>calendar-popup-css.css</strong></td>
|
||||
<td>3.32 KB</td>
|
||||
<td>193</td>
|
||||
<td>23</td>
|
||||
<td>31</td>
|
||||
<td>97</td>
|
||||
<td>5</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td><strong>calendar-sliding-animation.css</strong></td>
|
||||
<td>0.57 KB</td>
|
||||
<td>24</td>
|
||||
<td>3</td>
|
||||
<td>4</td>
|
||||
<td>9</td>
|
||||
<td><strong>calendar-v2.css</strong></td>
|
||||
<td>0.18 KB</td>
|
||||
<td>7</td>
|
||||
<td>0</td>
|
||||
<td>0</td>
|
||||
<td>1</td>
|
||||
<td>0</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td><strong>calendar-v2-base.css</strong></td>
|
||||
<td>1.66 KB</td>
|
||||
<td>67</td>
|
||||
<td>3</td>
|
||||
<td>3</td>
|
||||
<td>47</td>
|
||||
<td>32</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td><strong>calendar-v2-layout.css</strong></td>
|
||||
<td>6.39 KB</td>
|
||||
<td>308</td>
|
||||
<td>38</td>
|
||||
<td>48</td>
|
||||
<td>153</td>
|
||||
<td>1</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td><strong>calendar-v2-events.css</strong></td>
|
||||
<td>8.77 KB</td>
|
||||
<td>383</td>
|
||||
<td>54</td>
|
||||
<td>62</td>
|
||||
<td>196</td>
|
||||
<td>5</td>
|
||||
</tr>
|
||||
|
||||
</tbody>
|
||||
|
|
@ -251,54 +221,33 @@
|
|||
<h2>🗑️ Unused CSS by File</h2>
|
||||
|
||||
<div class="file-detail">
|
||||
<h3>test-nesting.css</h3>
|
||||
<p>
|
||||
<span class="badge badge-success">
|
||||
5 unused rules
|
||||
</span>
|
||||
<span style="margin-left: 10px; color: #666;">
|
||||
Original: 154 | After purge: 0
|
||||
</span>
|
||||
</p>
|
||||
|
||||
<details>
|
||||
<summary style="cursor: pointer; margin-top: 10px;">Show unused selectors</summary>
|
||||
<div class="rejected-list">
|
||||
.test-container<br>.test-container .test-child<br>:is(.test-container .test-child):hover<br>.test-container .test-nested<br>:is(.test-container .test-nested) .deep-nested
|
||||
|
||||
</div>
|
||||
</details>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="file-detail">
|
||||
<h3>calendar-sliding-animation.css</h3>
|
||||
<h3>calendar-v2.css</h3>
|
||||
<p>
|
||||
<span class="badge badge-success">
|
||||
0 unused rules
|
||||
</span>
|
||||
<span style="margin-left: 10px; color: #666;">
|
||||
Original: 588 | After purge: 588
|
||||
Original: 186 | After purge: 186
|
||||
</span>
|
||||
</p>
|
||||
<p style="color: #2e7d32; margin-top: 10px;">✅ No unused CSS found!</p>
|
||||
</div>
|
||||
|
||||
<div class="file-detail">
|
||||
<h3>calendar-popup-css.css</h3>
|
||||
<h3>calendar-v2-layout.css</h3>
|
||||
<p>
|
||||
<span class="badge badge-success">
|
||||
5 unused rules
|
||||
3 unused rules
|
||||
</span>
|
||||
<span style="margin-left: 10px; color: #666;">
|
||||
Original: 3023 | After purge: 2939
|
||||
Original: 6275 | After purge: 6203
|
||||
</span>
|
||||
</p>
|
||||
|
||||
<details>
|
||||
<summary style="cursor: pointer; margin-top: 10px;">Show unused selectors</summary>
|
||||
<div class="rejected-list">
|
||||
&[data-align="right"]<br>&[data-align="left"]<br>&:hover<br>&:active<br>&[data-action="close"]:hover
|
||||
&:hover<br>&[data-levels="resource date"]<br>&[data-levels="team resource date"]
|
||||
|
||||
</div>
|
||||
</details>
|
||||
|
|
@ -306,20 +255,21 @@
|
|||
</div>
|
||||
|
||||
<div class="file-detail">
|
||||
<h3>calendar-month-css.css</h3>
|
||||
<h3>calendar-v2-events.css</h3>
|
||||
<p>
|
||||
<span class="badge badge-success">
|
||||
15 unused rules
|
||||
20 unused rules
|
||||
</span>
|
||||
<span style="margin-left: 10px; color: #666;">
|
||||
Original: 5925 | After purge: 5485
|
||||
Original: 7298 | After purge: 6810
|
||||
</span>
|
||||
</p>
|
||||
|
||||
<details>
|
||||
<summary style="cursor: pointer; margin-top: 10px;">Show unused selectors</summary>
|
||||
<div class="rejected-list">
|
||||
.month-event.category-meeting<br>.month-event.category-deadline<br>.month-event.category-work<br>.month-event.category-personal<br>.month-event.duration-30min<br>.month-event.duration-1h<br>.month-event.duration-1h30<br>.month-event.duration-2h<br>.month-event.duration-3h<br>.month-event.duration-4h<br>swp-calendar[data-view="month"][data-loading="true"] .month-grid<br>.month-grid.sliding-out-left<br>.month-grid.sliding-out-right<br>.month-grid.sliding-in-left<br>.month-grid.sliding-in-right
|
||||
&:hover<br>&[data-continues-before="true"]<br>&[data-continues-after="true"]<br>swp-events-layer[data-filter-active="true"] swp-event<br>swp-events-layer[data-filter-active="true"] swp-event[data-matches="true"]<br>swp-event[data-stack-link]:not([data-stack-link*='"stackLevel":0'])<br>
|
||||
swp-event-group[data-stack-link]:not([data-stack-link*='"stackLevel":0']) swp-event<br>.is-pink<br>.is-magenta<br>.is-violet<br>.is-deep-purple<br>.is-indigo<br>.is-light-blue<br>.is-cyan<br>.is-teal<br>.is-light-green<br>.is-lime<br>.is-yellow<br>.is-orange<br>.is-deep-orange
|
||||
|
||||
</div>
|
||||
</details>
|
||||
|
|
@ -327,89 +277,16 @@
|
|||
</div>
|
||||
|
||||
<div class="file-detail">
|
||||
<h3>calendar-layout-css.css</h3>
|
||||
<h3>calendar-v2-base.css</h3>
|
||||
<p>
|
||||
<span class="badge badge-success">
|
||||
19 unused rules
|
||||
0 unused rules
|
||||
</span>
|
||||
<span style="margin-left: 10px; color: #666;">
|
||||
Original: 9940 | After purge: 8956
|
||||
Original: 1701 | After purge: 1701
|
||||
</span>
|
||||
</p>
|
||||
|
||||
<details>
|
||||
<summary style="cursor: pointer; margin-top: 10px;">Show unused selectors</summary>
|
||||
<div class="rejected-list">
|
||||
-out<br>swp-day-header[data-today=true]<br>swp-day-header[data-today=true] swp-day-name<br>swp-day-header[data-today=true] swp-day-date<br>swp-resource-avatar img<br>[data-type=meeting]:is(swp-allday-container swp-allday-event)<br>[data-type=meal]:is(swp-allday-container swp-allday-event)<br>[data-type=milestone]:is(swp-allday-container swp-allday-event)<br>[data-type=personal]:is(swp-allday-container swp-allday-event)<br>[data-type=deadline]:is(swp-allday-container swp-allday-event)<br>.highlight[data-type=meeting]:is(swp-allday-container swp-allday-event)<br>.highlight[data-type=meal]:is(swp-allday-container swp-allday-event)<br>.highlight[data-type=milestone]:is(swp-allday-container swp-allday-event)<br>.highlight[data-type=personal]:is(swp-allday-container swp-allday-event)<br>.highlight[data-type=deadline]:is(swp-allday-container swp-allday-event)<br>:is(swp-scrollable-content::-webkit-scrollbar-thumb):hover<br>swp-day-column[data-work-hours=off]<br>swp-day-column[data-work-hours=off]:after<br>swp-day-column[data-work-hours=off]:before
|
||||
|
||||
</div>
|
||||
</details>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="file-detail">
|
||||
<h3>calendar-events-css.css</h3>
|
||||
<p>
|
||||
<span class="badge badge-success">
|
||||
15 unused rules
|
||||
</span>
|
||||
<span style="margin-left: 10px; color: #666;">
|
||||
Original: 4815 | After purge: 4344
|
||||
</span>
|
||||
</p>
|
||||
|
||||
<details>
|
||||
<summary style="cursor: pointer; margin-top: 10px;">Show unused selectors</summary>
|
||||
<div class="rejected-list">
|
||||
&[data-type="meeting"]<br>&[data-type="meal"]<br>&[data-type="milestone"]<br>&[data-type="personal"]<br>&[data-type="deadline"]<br>&.hover[data-type="meeting"]<br>&.hover[data-type="meal"]<br>&.hover[data-type="milestone"]<br>&.hover[data-type="personal"]<br>&.hover[data-type="deadline"]<br>&[data-continues-before="true"]<br>&[data-continues-after="true"]<br>&:hover<br>swp-event[data-stack-link]:not([data-stack-link*='"stackLevel":0'])<br>
|
||||
swp-event-group[data-stack-link]:not([data-stack-link*='"stackLevel":0']) swp-event
|
||||
|
||||
</div>
|
||||
</details>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="file-detail">
|
||||
<h3>calendar-components-css.css</h3>
|
||||
<p>
|
||||
<span class="badge badge-success">
|
||||
8 unused rules
|
||||
</span>
|
||||
<span style="margin-left: 10px; color: #666;">
|
||||
Original: 3476 | After purge: 3340
|
||||
</span>
|
||||
</p>
|
||||
|
||||
<details>
|
||||
<summary style="cursor: pointer; margin-top: 10px;">Show unused selectors</summary>
|
||||
<div class="rejected-list">
|
||||
&:hover<br>&:active<br>&:not(:last-child)<br>&:hover:not([disabled])<br>&[disabled]<br>&:focus<br>swp-calendar[data-searching="true"]<br>&[data-search-match="true"]
|
||||
|
||||
</div>
|
||||
</details>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="file-detail">
|
||||
<h3>calendar-base-css.css</h3>
|
||||
<p>
|
||||
<span class="badge badge-success">
|
||||
4 unused rules
|
||||
</span>
|
||||
<span style="margin-left: 10px; color: #666;">
|
||||
Original: 5066 | After purge: 4888
|
||||
</span>
|
||||
</p>
|
||||
|
||||
<details>
|
||||
<summary style="cursor: pointer; margin-top: 10px;">Show unused selectors</summary>
|
||||
<div class="rejected-list">
|
||||
swp-day-columns swp-event.text-selectable swp-day-columns swp-event-title<br>
|
||||
swp-day-columns swp-event.text-selectable swp-day-columns swp-event-time<br>:focus<br>:focus:not(:focus-visible)
|
||||
|
||||
</div>
|
||||
</details>
|
||||
|
||||
<p style="color: #2e7d32; margin-top: 10px;">✅ No unused CSS found!</p>
|
||||
</div>
|
||||
|
||||
</section>
|
||||
|
|
@ -420,12 +297,12 @@ swp-day-columns swp-event.text-selectable swp-day-columns swp-event-time<br>:foc
|
|||
<li>✅ CSS usage is relatively clean.</li>
|
||||
|
||||
<li>📦 Consider consolidating similar styles to reduce duplication.</li>
|
||||
<li>🎨 Review color palette - found 62 unique colors across all files.</li>
|
||||
<li>🎨 Review color palette - found 38 unique colors across all files.</li>
|
||||
<li>🔄 Implement a build process to automatically remove unused CSS in production.</li>
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<p class="timestamp">Report generated: 1.11.2025, 23.12.02</p>
|
||||
<p class="timestamp">Report generated: 11.12.2025, 00.08.52</p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue