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
|
|
@ -10,7 +10,8 @@
|
||||||
"Bash(npx tsc:*)",
|
"Bash(npx tsc:*)",
|
||||||
"WebFetch(domain:github.com)",
|
"WebFetch(domain:github.com)",
|
||||||
"Bash(npm install:*)",
|
"Bash(npm install:*)",
|
||||||
"WebFetch(domain:raw.githubusercontent.com)"
|
"WebFetch(domain:raw.githubusercontent.com)",
|
||||||
|
"Bash(npm run css:analyze:*)"
|
||||||
],
|
],
|
||||||
"deny": [],
|
"deny": [],
|
||||||
"ask": []
|
"ask": []
|
||||||
|
|
|
||||||
|
|
@ -19,11 +19,11 @@ console.log('📊 Running PurgeCSS analysis...');
|
||||||
async function runPurgeCSS() {
|
async function runPurgeCSS() {
|
||||||
const purgeCSSResults = await new PurgeCSS().purge({
|
const purgeCSSResults = await new PurgeCSS().purge({
|
||||||
content: [
|
content: [
|
||||||
'./src/**/*.ts',
|
'./src/v2/**/*.ts',
|
||||||
'./wwwroot/**/*.html'
|
'./wwwroot/v2.html'
|
||||||
],
|
],
|
||||||
css: [
|
css: [
|
||||||
'./wwwroot/css/*.css'
|
'./wwwroot/css/v2/*.css'
|
||||||
],
|
],
|
||||||
rejected: true,
|
rejected: true,
|
||||||
rejectedCss: true,
|
rejectedCss: true,
|
||||||
|
|
@ -110,13 +110,10 @@ async function runPurgeCSS() {
|
||||||
console.log('\n📊 Running CSS Stats analysis...');
|
console.log('\n📊 Running CSS Stats analysis...');
|
||||||
function runCSSStats() {
|
function runCSSStats() {
|
||||||
const cssFiles = [
|
const cssFiles = [
|
||||||
'./wwwroot/css/calendar-base-css.css',
|
'./wwwroot/css/v2/calendar-v2.css',
|
||||||
'./wwwroot/css/calendar-components-css.css',
|
'./wwwroot/css/v2/calendar-v2-base.css',
|
||||||
'./wwwroot/css/calendar-events-css.css',
|
'./wwwroot/css/v2/calendar-v2-layout.css',
|
||||||
'./wwwroot/css/calendar-layout-css.css',
|
'./wwwroot/css/v2/calendar-v2-events.css'
|
||||||
'./wwwroot/css/calendar-month-css.css',
|
|
||||||
'./wwwroot/css/calendar-popup-css.css',
|
|
||||||
'./wwwroot/css/calendar-sliding-animation.css'
|
|
||||||
];
|
];
|
||||||
|
|
||||||
const stats = {};
|
const stats = {};
|
||||||
|
|
|
||||||
|
|
@ -141,19 +141,19 @@
|
||||||
<div class="summary">
|
<div class="summary">
|
||||||
<div class="stat-card">
|
<div class="stat-card">
|
||||||
<div class="stat-label">Total CSS Size</div>
|
<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>
|
||||||
<div class="stat-card">
|
<div class="stat-card">
|
||||||
<div class="stat-label">CSS Files</div>
|
<div class="stat-label">CSS Files</div>
|
||||||
<div class="stat-value">8</div>
|
<div class="stat-value">4</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="stat-card warning">
|
<div class="stat-card warning">
|
||||||
<div class="stat-label">Unused CSS Rules</div>
|
<div class="stat-label">Unused CSS Rules</div>
|
||||||
<div class="stat-value">71</div>
|
<div class="stat-value">23</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="stat-card success">
|
<div class="stat-card success">
|
||||||
<div class="stat-label">Potential Removal</div>
|
<div class="stat-label">Potential Removal</div>
|
||||||
<div class="stat-value">0.22%</div>
|
<div class="stat-value">0.15%</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
@ -174,73 +174,43 @@
|
||||||
<tbody>
|
<tbody>
|
||||||
|
|
||||||
<tr>
|
<tr>
|
||||||
<td><strong>calendar-base-css.css</strong></td>
|
<td><strong>calendar-v2.css</strong></td>
|
||||||
<td>5.14 KB</td>
|
<td>0.18 KB</td>
|
||||||
<td>242</td>
|
<td>7</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>
|
<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>
|
</tr>
|
||||||
|
|
||||||
</tbody>
|
</tbody>
|
||||||
|
|
@ -251,54 +221,33 @@
|
||||||
<h2>🗑️ Unused CSS by File</h2>
|
<h2>🗑️ Unused CSS by File</h2>
|
||||||
|
|
||||||
<div class="file-detail">
|
<div class="file-detail">
|
||||||
<h3>test-nesting.css</h3>
|
<h3>calendar-v2.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>
|
<p>
|
||||||
<span class="badge badge-success">
|
<span class="badge badge-success">
|
||||||
0 unused rules
|
0 unused rules
|
||||||
</span>
|
</span>
|
||||||
<span style="margin-left: 10px; color: #666;">
|
<span style="margin-left: 10px; color: #666;">
|
||||||
Original: 588 | After purge: 588
|
Original: 186 | After purge: 186
|
||||||
</span>
|
</span>
|
||||||
</p>
|
</p>
|
||||||
<p style="color: #2e7d32; margin-top: 10px;">✅ No unused CSS found!</p>
|
<p style="color: #2e7d32; margin-top: 10px;">✅ No unused CSS found!</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="file-detail">
|
<div class="file-detail">
|
||||||
<h3>calendar-popup-css.css</h3>
|
<h3>calendar-v2-layout.css</h3>
|
||||||
<p>
|
<p>
|
||||||
<span class="badge badge-success">
|
<span class="badge badge-success">
|
||||||
5 unused rules
|
3 unused rules
|
||||||
</span>
|
</span>
|
||||||
<span style="margin-left: 10px; color: #666;">
|
<span style="margin-left: 10px; color: #666;">
|
||||||
Original: 3023 | After purge: 2939
|
Original: 6275 | After purge: 6203
|
||||||
</span>
|
</span>
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<details>
|
<details>
|
||||||
<summary style="cursor: pointer; margin-top: 10px;">Show unused selectors</summary>
|
<summary style="cursor: pointer; margin-top: 10px;">Show unused selectors</summary>
|
||||||
<div class="rejected-list">
|
<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>
|
</div>
|
||||||
</details>
|
</details>
|
||||||
|
|
@ -306,20 +255,21 @@
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="file-detail">
|
<div class="file-detail">
|
||||||
<h3>calendar-month-css.css</h3>
|
<h3>calendar-v2-events.css</h3>
|
||||||
<p>
|
<p>
|
||||||
<span class="badge badge-success">
|
<span class="badge badge-success">
|
||||||
15 unused rules
|
20 unused rules
|
||||||
</span>
|
</span>
|
||||||
<span style="margin-left: 10px; color: #666;">
|
<span style="margin-left: 10px; color: #666;">
|
||||||
Original: 5925 | After purge: 5485
|
Original: 7298 | After purge: 6810
|
||||||
</span>
|
</span>
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<details>
|
<details>
|
||||||
<summary style="cursor: pointer; margin-top: 10px;">Show unused selectors</summary>
|
<summary style="cursor: pointer; margin-top: 10px;">Show unused selectors</summary>
|
||||||
<div class="rejected-list">
|
<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>
|
</div>
|
||||||
</details>
|
</details>
|
||||||
|
|
@ -327,89 +277,16 @@
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="file-detail">
|
<div class="file-detail">
|
||||||
<h3>calendar-layout-css.css</h3>
|
<h3>calendar-v2-base.css</h3>
|
||||||
<p>
|
<p>
|
||||||
<span class="badge badge-success">
|
<span class="badge badge-success">
|
||||||
19 unused rules
|
0 unused rules
|
||||||
</span>
|
</span>
|
||||||
<span style="margin-left: 10px; color: #666;">
|
<span style="margin-left: 10px; color: #666;">
|
||||||
Original: 9940 | After purge: 8956
|
Original: 1701 | After purge: 1701
|
||||||
</span>
|
</span>
|
||||||
</p>
|
</p>
|
||||||
|
<p style="color: #2e7d32; margin-top: 10px;">✅ No unused CSS found!</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>
|
</div>
|
||||||
|
|
||||||
</section>
|
</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>✅ CSS usage is relatively clean.</li>
|
||||||
|
|
||||||
<li>📦 Consider consolidating similar styles to reduce duplication.</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>
|
<li>🔄 Implement a build process to automatically remove unused CSS in production.</li>
|
||||||
</ul>
|
</ul>
|
||||||
</section>
|
</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>
|
</div>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
|
||||||
|
|
@ -1,128 +1,65 @@
|
||||||
{
|
{
|
||||||
"calendar-base-css.css": {
|
"calendar-v2.css": {
|
||||||
"lines": 242,
|
"lines": 7,
|
||||||
"size": "5.14 KB",
|
"size": "0.18 KB",
|
||||||
"sizeBytes": 5267,
|
"sizeBytes": 186,
|
||||||
"rules": 25,
|
"rules": 0,
|
||||||
"selectors": 29,
|
"selectors": 0,
|
||||||
"properties": 107,
|
"properties": 1,
|
||||||
"uniqueColors": 27,
|
"uniqueColors": 0,
|
||||||
|
"colors": [],
|
||||||
|
"mediaQueries": 0
|
||||||
|
},
|
||||||
|
"calendar-v2-base.css": {
|
||||||
|
"lines": 67,
|
||||||
|
"size": "1.66 KB",
|
||||||
|
"sizeBytes": 1701,
|
||||||
|
"rules": 3,
|
||||||
|
"selectors": 3,
|
||||||
|
"properties": 47,
|
||||||
|
"uniqueColors": 32,
|
||||||
"colors": [
|
"colors": [
|
||||||
"#2196f3",
|
|
||||||
"#ff9800",
|
|
||||||
"#4caf50",
|
|
||||||
"#f44336",
|
|
||||||
"#e0e0e0",
|
"#e0e0e0",
|
||||||
"rgba(0, 0, 0, 0.05)",
|
"#fff",
|
||||||
"rgba(0, 0, 0, 0.2)",
|
"#f5f5f5",
|
||||||
"rgba(255, 255, 255, 0.9)",
|
"#f0f0f0",
|
||||||
"#ff0000",
|
"#fafafa",
|
||||||
"#e8f5e8"
|
"#333333",
|
||||||
|
"#666",
|
||||||
|
"#1976d2",
|
||||||
|
"#e3f2fd",
|
||||||
|
"#1565c0"
|
||||||
],
|
],
|
||||||
"mediaQueries": 0
|
"mediaQueries": 0
|
||||||
},
|
},
|
||||||
"calendar-components-css.css": {
|
"calendar-v2-layout.css": {
|
||||||
"lines": 236,
|
|
||||||
"size": "4.28 KB",
|
|
||||||
"sizeBytes": 4381,
|
|
||||||
"rules": 26,
|
|
||||||
"selectors": 36,
|
|
||||||
"properties": 116,
|
|
||||||
"uniqueColors": 4,
|
|
||||||
"colors": [
|
|
||||||
"rgba(0, 0, 0, 0.05)",
|
|
||||||
"rgba(0, 0, 0, 0.1)",
|
|
||||||
"rgba(33, 150, 243, 0.05)",
|
|
||||||
"rgba(33, 150, 243, 0.3)"
|
|
||||||
],
|
|
||||||
"mediaQueries": 0
|
|
||||||
},
|
|
||||||
"calendar-events-css.css": {
|
|
||||||
"lines": 308,
|
"lines": 308,
|
||||||
"size": "6.50 KB",
|
"size": "6.39 KB",
|
||||||
"sizeBytes": 6657,
|
"sizeBytes": 6548,
|
||||||
"rules": 41,
|
"rules": 38,
|
||||||
"selectors": 45,
|
"selectors": 48,
|
||||||
"properties": 139,
|
"properties": 153,
|
||||||
"uniqueColors": 4,
|
"uniqueColors": 1,
|
||||||
"colors": [
|
"colors": [
|
||||||
|
"rgba(0, 0, 0, 0.05)"
|
||||||
|
],
|
||||||
|
"mediaQueries": 0
|
||||||
|
},
|
||||||
|
"calendar-v2-events.css": {
|
||||||
|
"lines": 383,
|
||||||
|
"size": "8.77 KB",
|
||||||
|
"sizeBytes": 8977,
|
||||||
|
"rules": 54,
|
||||||
|
"selectors": 62,
|
||||||
|
"properties": 196,
|
||||||
|
"uniqueColors": 5,
|
||||||
|
"colors": [
|
||||||
|
"rgba(0, 0, 0, 0.15)",
|
||||||
"rgba(255, 255, 255, 0.9)",
|
"rgba(255, 255, 255, 0.9)",
|
||||||
"rgba(0, 0, 0, 0.2)",
|
"rgba(0, 0, 0, 0.2)",
|
||||||
"rgba(33, 150, 243, 0.1)",
|
"rgba(33, 150, 243, 0.1)",
|
||||||
"rgba(0, 0, 0, 0.1)"
|
"rgba(0, 0, 0, 0.1)"
|
||||||
],
|
],
|
||||||
"mediaQueries": 0
|
"mediaQueries": 0
|
||||||
},
|
|
||||||
"calendar-layout-css.css": {
|
|
||||||
"lines": 1,
|
|
||||||
"size": "10.59 KB",
|
|
||||||
"sizeBytes": 10840,
|
|
||||||
"rules": 84,
|
|
||||||
"selectors": 84,
|
|
||||||
"properties": 237,
|
|
||||||
"uniqueColors": 12,
|
|
||||||
"colors": [
|
|
||||||
"#666",
|
|
||||||
"rgba(0,0,0,.05)",
|
|
||||||
"#000",
|
|
||||||
"rgba(33,150,243,.1)",
|
|
||||||
"#08f",
|
|
||||||
"#fff",
|
|
||||||
"#e0e0e0",
|
|
||||||
"#999",
|
|
||||||
"#d0d0d0",
|
|
||||||
"#333"
|
|
||||||
],
|
|
||||||
"mediaQueries": 0
|
|
||||||
},
|
|
||||||
"calendar-month-css.css": {
|
|
||||||
"lines": 315,
|
|
||||||
"size": "6.59 KB",
|
|
||||||
"sizeBytes": 6749,
|
|
||||||
"rules": 51,
|
|
||||||
"selectors": 54,
|
|
||||||
"properties": 155,
|
|
||||||
"uniqueColors": 10,
|
|
||||||
"colors": [
|
|
||||||
"#f0f8ff",
|
|
||||||
"#fafbfc",
|
|
||||||
"#e3f2fd",
|
|
||||||
"#e8f5e8",
|
|
||||||
"#ffebee",
|
|
||||||
"#fff8e1",
|
|
||||||
"#f3e5f5",
|
|
||||||
"#7b1fa2",
|
|
||||||
"#9c27b0",
|
|
||||||
"rgba(33, 150, 243, 0.7)"
|
|
||||||
],
|
|
||||||
"mediaQueries": 1
|
|
||||||
},
|
|
||||||
"calendar-popup-css.css": {
|
|
||||||
"lines": 193,
|
|
||||||
"size": "3.32 KB",
|
|
||||||
"sizeBytes": 3399,
|
|
||||||
"rules": 23,
|
|
||||||
"selectors": 31,
|
|
||||||
"properties": 97,
|
|
||||||
"uniqueColors": 5,
|
|
||||||
"colors": [
|
|
||||||
"#f9f5f0",
|
|
||||||
"rgba(0, 0, 0, 0.1)",
|
|
||||||
"rgba(0, 0, 0, 0.05)",
|
|
||||||
"rgba(255, 255, 255, 0.9)",
|
|
||||||
"#f3f3f3"
|
|
||||||
],
|
|
||||||
"mediaQueries": 1
|
|
||||||
},
|
|
||||||
"calendar-sliding-animation.css": {
|
|
||||||
"lines": 24,
|
|
||||||
"size": "0.57 KB",
|
|
||||||
"sizeBytes": 588,
|
|
||||||
"rules": 3,
|
|
||||||
"selectors": 4,
|
|
||||||
"properties": 9,
|
|
||||||
"uniqueColors": 0,
|
|
||||||
"colors": [],
|
|
||||||
"mediaQueries": 1
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -1,138 +1,61 @@
|
||||||
{
|
{
|
||||||
"summary": {
|
"summary": {
|
||||||
"totalFiles": 8,
|
"totalFiles": 4,
|
||||||
"totalOriginalSize": 32987,
|
"totalOriginalSize": 15460,
|
||||||
"totalPurgedSize": 30540,
|
"totalPurgedSize": 14900,
|
||||||
"totalRejected": 71,
|
"totalRejected": 23,
|
||||||
"percentageRemoved": "0.22%",
|
"percentageRemoved": "0.15%",
|
||||||
"potentialSavings": 2447
|
"potentialSavings": 560
|
||||||
},
|
},
|
||||||
"fileDetails": {
|
"fileDetails": {
|
||||||
"test-nesting.css": {
|
"calendar-v2.css": {
|
||||||
"originalSize": 154,
|
"originalSize": 186,
|
||||||
"purgedSize": 0,
|
"purgedSize": 186,
|
||||||
"rejectedCount": 5,
|
|
||||||
"rejected": [
|
|
||||||
".test-container",
|
|
||||||
".test-container .test-child",
|
|
||||||
":is(.test-container .test-child):hover",
|
|
||||||
".test-container .test-nested",
|
|
||||||
":is(.test-container .test-nested) .deep-nested"
|
|
||||||
]
|
|
||||||
},
|
|
||||||
"calendar-sliding-animation.css": {
|
|
||||||
"originalSize": 588,
|
|
||||||
"purgedSize": 588,
|
|
||||||
"rejectedCount": 0,
|
"rejectedCount": 0,
|
||||||
"rejected": []
|
"rejected": []
|
||||||
},
|
},
|
||||||
"calendar-popup-css.css": {
|
"calendar-v2-layout.css": {
|
||||||
"originalSize": 3023,
|
"originalSize": 6275,
|
||||||
"purgedSize": 2939,
|
"purgedSize": 6203,
|
||||||
"rejectedCount": 5,
|
"rejectedCount": 3,
|
||||||
"rejected": [
|
"rejected": [
|
||||||
"&[data-align=\"right\"]",
|
|
||||||
"&[data-align=\"left\"]",
|
|
||||||
"&:hover",
|
"&:hover",
|
||||||
"&:active",
|
"&[data-levels=\"resource date\"]",
|
||||||
"&[data-action=\"close\"]:hover"
|
"&[data-levels=\"team resource date\"]"
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
"calendar-month-css.css": {
|
"calendar-v2-events.css": {
|
||||||
"originalSize": 5925,
|
"originalSize": 7298,
|
||||||
"purgedSize": 5485,
|
"purgedSize": 6810,
|
||||||
"rejectedCount": 15,
|
"rejectedCount": 20,
|
||||||
"rejected": [
|
"rejected": [
|
||||||
".month-event.category-meeting",
|
"&:hover",
|
||||||
".month-event.category-deadline",
|
|
||||||
".month-event.category-work",
|
|
||||||
".month-event.category-personal",
|
|
||||||
".month-event.duration-30min",
|
|
||||||
".month-event.duration-1h",
|
|
||||||
".month-event.duration-1h30",
|
|
||||||
".month-event.duration-2h",
|
|
||||||
".month-event.duration-3h",
|
|
||||||
".month-event.duration-4h",
|
|
||||||
"swp-calendar[data-view=\"month\"][data-loading=\"true\"] .month-grid",
|
|
||||||
".month-grid.sliding-out-left",
|
|
||||||
".month-grid.sliding-out-right",
|
|
||||||
".month-grid.sliding-in-left",
|
|
||||||
".month-grid.sliding-in-right"
|
|
||||||
]
|
|
||||||
},
|
|
||||||
"calendar-layout-css.css": {
|
|
||||||
"originalSize": 9940,
|
|
||||||
"purgedSize": 8956,
|
|
||||||
"rejectedCount": 19,
|
|
||||||
"rejected": [
|
|
||||||
"-out",
|
|
||||||
"swp-day-header[data-today=true]",
|
|
||||||
"swp-day-header[data-today=true] swp-day-name",
|
|
||||||
"swp-day-header[data-today=true] swp-day-date",
|
|
||||||
"swp-resource-avatar img",
|
|
||||||
"[data-type=meeting]:is(swp-allday-container swp-allday-event)",
|
|
||||||
"[data-type=meal]:is(swp-allday-container swp-allday-event)",
|
|
||||||
"[data-type=milestone]:is(swp-allday-container swp-allday-event)",
|
|
||||||
"[data-type=personal]:is(swp-allday-container swp-allday-event)",
|
|
||||||
"[data-type=deadline]:is(swp-allday-container swp-allday-event)",
|
|
||||||
".highlight[data-type=meeting]:is(swp-allday-container swp-allday-event)",
|
|
||||||
".highlight[data-type=meal]:is(swp-allday-container swp-allday-event)",
|
|
||||||
".highlight[data-type=milestone]:is(swp-allday-container swp-allday-event)",
|
|
||||||
".highlight[data-type=personal]:is(swp-allday-container swp-allday-event)",
|
|
||||||
".highlight[data-type=deadline]:is(swp-allday-container swp-allday-event)",
|
|
||||||
":is(swp-scrollable-content::-webkit-scrollbar-thumb):hover",
|
|
||||||
"swp-day-column[data-work-hours=off]",
|
|
||||||
"swp-day-column[data-work-hours=off]:after",
|
|
||||||
"swp-day-column[data-work-hours=off]:before"
|
|
||||||
]
|
|
||||||
},
|
|
||||||
"calendar-events-css.css": {
|
|
||||||
"originalSize": 4815,
|
|
||||||
"purgedSize": 4344,
|
|
||||||
"rejectedCount": 15,
|
|
||||||
"rejected": [
|
|
||||||
"&[data-type=\"meeting\"]",
|
|
||||||
"&[data-type=\"meal\"]",
|
|
||||||
"&[data-type=\"milestone\"]",
|
|
||||||
"&[data-type=\"personal\"]",
|
|
||||||
"&[data-type=\"deadline\"]",
|
|
||||||
"&.hover[data-type=\"meeting\"]",
|
|
||||||
"&.hover[data-type=\"meal\"]",
|
|
||||||
"&.hover[data-type=\"milestone\"]",
|
|
||||||
"&.hover[data-type=\"personal\"]",
|
|
||||||
"&.hover[data-type=\"deadline\"]",
|
|
||||||
"&[data-continues-before=\"true\"]",
|
"&[data-continues-before=\"true\"]",
|
||||||
"&[data-continues-after=\"true\"]",
|
"&[data-continues-after=\"true\"]",
|
||||||
"&:hover",
|
"swp-events-layer[data-filter-active=\"true\"] swp-event",
|
||||||
|
"swp-events-layer[data-filter-active=\"true\"] swp-event[data-matches=\"true\"]",
|
||||||
"swp-event[data-stack-link]:not([data-stack-link*='\"stackLevel\":0'])",
|
"swp-event[data-stack-link]:not([data-stack-link*='\"stackLevel\":0'])",
|
||||||
"\nswp-event-group[data-stack-link]:not([data-stack-link*='\"stackLevel\":0']) swp-event"
|
"\nswp-event-group[data-stack-link]:not([data-stack-link*='\"stackLevel\":0']) swp-event",
|
||||||
|
".is-pink",
|
||||||
|
".is-magenta",
|
||||||
|
".is-violet",
|
||||||
|
".is-deep-purple",
|
||||||
|
".is-indigo",
|
||||||
|
".is-light-blue",
|
||||||
|
".is-cyan",
|
||||||
|
".is-teal",
|
||||||
|
".is-light-green",
|
||||||
|
".is-lime",
|
||||||
|
".is-yellow",
|
||||||
|
".is-orange",
|
||||||
|
".is-deep-orange"
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
"calendar-components-css.css": {
|
"calendar-v2-base.css": {
|
||||||
"originalSize": 3476,
|
"originalSize": 1701,
|
||||||
"purgedSize": 3340,
|
"purgedSize": 1701,
|
||||||
"rejectedCount": 8,
|
"rejectedCount": 0,
|
||||||
"rejected": [
|
"rejected": []
|
||||||
"&:hover",
|
|
||||||
"&:active",
|
|
||||||
"&:not(:last-child)",
|
|
||||||
"&:hover:not([disabled])",
|
|
||||||
"&[disabled]",
|
|
||||||
"&:focus",
|
|
||||||
"swp-calendar[data-searching=\"true\"]",
|
|
||||||
"&[data-search-match=\"true\"]"
|
|
||||||
]
|
|
||||||
},
|
|
||||||
"calendar-base-css.css": {
|
|
||||||
"originalSize": 5066,
|
|
||||||
"purgedSize": 4888,
|
|
||||||
"rejectedCount": 4,
|
|
||||||
"rejected": [
|
|
||||||
"swp-day-columns swp-event.text-selectable swp-day-columns swp-event-title",
|
|
||||||
"\nswp-day-columns swp-event.text-selectable swp-day-columns swp-event-time",
|
|
||||||
":focus",
|
|
||||||
":focus:not(:focus-visible)"
|
|
||||||
]
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
Loading…
Add table
Add a link
Reference in a new issue