Janus007/Calendar
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

WIP on master

Browse source
This commit is contained in:
Janus C. H. Knudsen 2025-11-03 14:54:57 +01:00
parent b6ab1ff50e
commit 80aaab46f2
25 changed files with 6291 additions and 927 deletions
Download patch file Download diff file Expand all files Collapse all files

432
reports/css-analysis-report.html Normal file
View file

@ -0,0 +1,432 @@
<!DOCTYPE html>
<html lang="da">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Analysis Report - Calendar Plantempus</title>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
line-height: 1.6;
color: #333;
background: #f5f5f5;
padding: 20px;
}
.container {
max-width: 1200px;
margin: 0 auto;
background: white;
padding: 40px;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
h1 {
color: #2196f3;
margin-bottom: 10px;
font-size: 2.5em;
}
.subtitle {
color: #666;
margin-bottom: 30px;
font-size: 1.1em;
}
.summary {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 20px;
margin-bottom: 40px;
}
.stat-card {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
padding: 20px;
border-radius: 8px;
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}
.stat-card.warning {
background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
}
.stat-card.success {
background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
}
.stat-value {
font-size: 2.5em;
font-weight: bold;
margin: 10px 0;
}
.stat-label {
font-size: 0.9em;
opacity: 0.9;
}
section {
margin-bottom: 40px;
}
h2 {
color: #333;
margin-bottom: 20px;
padding-bottom: 10px;
border-bottom: 2px solid #2196f3;
}
table {
width: 100%;
border-collapse: collapse;
margin-top: 20px;
}
th, td {
padding: 12px;
text-align: left;
border-bottom: 1px solid #ddd;
}
th {
background: #f8f9fa;
font-weight: 600;
color: #555;
}
tr:hover {
background: #f8f9fa;
}
.file-detail {
background: #f8f9fa;
padding: 15px;
border-radius: 4px;
margin-bottom: 15px;
}
.rejected-list {
max-height: 200px;
overflow-y: auto;
background: white;
padding: 10px;
border-radius: 4px;
margin-top: 10px;
font-family: 'Courier New', monospace;
font-size: 0.9em;
}
.badge {
display: inline-block;
padding: 4px 8px;
border-radius: 4px;
font-size: 0.85em;
font-weight: 600;
}
.badge-danger { background: #ffebee; color: #c62828; }
.badge-warning { background: #fff3e0; color: #ef6c00; }
.badge-success { background: #e8f5e9; color: #2e7d32; }
.timestamp {
color: #999;
font-size: 0.9em;
margin-top: 30px;
text-align: center;
}
.color-palette {
display: flex;
gap: 5px;
flex-wrap: wrap;
margin-top: 10px;
}
.color-swatch {
width: 30px;
height: 30px;
border-radius: 4px;
border: 1px solid #ddd;
}
</style>
</head>
<body>
<div class="container">
<h1>📊 CSS Analysis Report</h1>
<p class="subtitle">Calendar Plantempus - Production CSS Analysis</p>
<div class="summary">
<div class="stat-card">
<div class="stat-label">Total CSS Size</div>
<div class="stat-value">36.99 KB</div>
</div>
<div class="stat-card">
<div class="stat-label">CSS Files</div>
<div class="stat-value">8</div>
</div>
<div class="stat-card warning">
<div class="stat-label">Unused CSS Rules</div>
<div class="stat-value">71</div>
</div>
<div class="stat-card success">
<div class="stat-label">Potential Removal</div>
<div class="stat-value">0.22%</div>
</div>
</div>
<section>
<h2>📈 CSS Statistics by File</h2>
<table>
<thead>
<tr>
<th>File</th>
<th>Size</th>
<th>Lines</th>
<th>Rules</th>
<th>Selectors</th>
<th>Properties</th>
<th>Colors</th>
</tr>
</thead>
<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>0</td>
</tr>
</tbody>
</table>
</section>
<section>
<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>
<p>
<span class="badge badge-success">
0 unused rules
</span>
<span style="margin-left: 10px; color: #666;">
Original: 588 | After purge: 588
</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>
<p>
<span class="badge badge-success">
5 unused rules
</span>
<span style="margin-left: 10px; color: #666;">
Original: 3023 | After purge: 2939
</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
</div>
</details>
</div>
<div class="file-detail">
<h3>calendar-month-css.css</h3>
<p>
<span class="badge badge-success">
15 unused rules
</span>
<span style="margin-left: 10px; color: #666;">
Original: 5925 | After purge: 5485
</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
</div>
</details>
</div>
<div class="file-detail">
<h3>calendar-layout-css.css</h3>
<p>
<span class="badge badge-success">
19 unused rules
</span>
<span style="margin-left: 10px; color: #666;">
Original: 9940 | After purge: 8956
</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>
</div>
</section>
<section>
<h2>💡 Recommendations</h2>
<ul style="line-height: 2;">
<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>🔄 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>
</div>
</body>
</html>