432 lines
17 KiB
HTML
432 lines
17 KiB
HTML
|
|
||
|
|
<!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>
|
||
|
|
|