spectrum-web-components
spectrum-web-components copied to clipboard
Published
20 hours ago •
adobe
adobe
build: process all css with lightningcss
Description
- move from using postCSS to lightning CSS when bundling and minifying CSS for smaller files in package builds and in the docs site
- [ ] remove postCSS infrastructure
- [ ] investigate unused CSS removal as a replacement to
purgeCSS(a postCSS plugin)
How has this been tested?
- [ ] Test case 1
- Go here
- See that we're using 42.5kb of CSS rather than 50.6kb in the current production site
- See that we're using 120kb of JS rather than 130kb
- [ ] Test case 2
- Go here
- On mobile, see that it was mobile first (so the scale is "Large" at load time)
- See that we're using 42.5kb of CSS rather than 50.6kb in the current production site
- See that we're using 53.7kb of JS rather than 59.5kb
Types of changes
- [x] Chore (minor updates related to the tooling or maintenance of the repository, does not impact compiled assets)
Checklist
- [x] I have signed the Adobe Open Source CLA.
- [x] My code follows the code style of this project.
- [x] If my change required a change to the documentation, I have updated the documentation in this pull request.
- [x] I have read the CONTRIBUTING document.
- [ ] I have added tests to cover my changes.
- [x] All new and existing tests passed.
Branch preview
Visual regression test results
When a visual regression test fails (or has previously failed while working on this branch), its results can be found in the following URLs:
- High Contrast Mode | Medium | LTR
- Classic | Lightest | Medium | LTR
- Classic | Lightest | Medium | RTL
- Classic | Lightest | Large | LTR
- Classic | Lightest | Large | RTL
- Classic | Light | Medium | LTR
- Classic | Light | Medium | RTL
- Classic | Light | Large | LTR
- Classic | Light | Large | RTL
- Classic | Dark | Medium | LTR
- Classic | Dark | Medium | RTL
- Classic | Dark | Large | LTR
- Classic | Dark | Large | RTL
- Classic | Darkest | Medium | LTR
- Classic | Darkest | Medium | RTL
- Classic | Darkest | Large | LTR
- Classic | Darkest | Large | RTL
- Express | Lightest | Medium | LTR
- Express | Lightest | Medium | RTL
- Express | Lightest | Large | LTR
- Express | Lightest | Large | RTL
- Express | Light | Medium | LTR
- Express | Light | Medium | RTL
- Express | Light | Large | LTR
- Express | Light | Large | RTL
- Express | Dark | Medium | LTR
- Express | Dark | Medium | RTL
- Express | Dark | Large | LTR
- Express | Dark | Large | RTL
- Express | Darkest | Medium | LTR
- Express | Darkest | Medium | RTL
- Express | Darkest | Large | LTR
- Express | Darkest | Large | RTL
![github-actions[bot] avatar](https://avatars.githubusercontent.com/in/15368?v=4 "Published by a pub.dev verified publisher"){kind=small}
Lighthouse scores
| Category | Latest (report) | Main (report) | Branch (report) |
|---|---|---|---|
| Performance | 0.92 | 0.97 | 0.97 |
| Accessibility | 1 | 1 | 1 |
| Best Practices | 1 | 1 | 1 |
| SEO | 1 | 0.92 | 0.92 |
| PWA | 1 | 1 | 1 |
What is this?
Lighthouse scores comparing the documentation site built from the PR ("Branch") to that of the production documentation site ("Latest") and the build currently on main ("Main"). Higher scores are better, but note that the SEO scores on Netlify URLs are artifically constrained to 0.92.
Transfer Size
| Category | Latest | Main | Branch |
|---|---|---|---|
| Total | 242.548 kB | 229.507 kB | 227.173 kB 🏆 |
| Scripts | 59.664 kB | 53.698 kB 🏆 | 53.854 kB |
| Stylesheet | 50.429 kB | 43.938 kB | 41.465 kB 🏆 |
| Document | 5.743 kB | 5.129 kB | 5.112 kB 🏆 |
| Third Party | 126.712 kB 🏆 | 126.742 kB | 126.742 kB |
Request Count
| Category | Latest | Main | Branch |
|---|---|---|---|
| Total | 42 🏆 | 43 | 43 |
| Scripts | 34 🏆 | 35 | 35 |
| Stylesheet | 5 | 5 | 5 |
| Document | 1 | 1 | 1 |
| Third Party | 2 | 2 | 2 |
Tachometer results
Chrome
accordion permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 420 kB | 161.22ms - 163.94ms | - | unsure 🔍 -0% - +2% -0.22ms - +3.30ms |
| branch | 406 kB | 159.93ms - 162.15ms | unsure 🔍 -2% - +0% -3.30ms - +0.22ms |
- |
action-bar permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 489 kB | 82.96ms - 84.15ms | - | unsure 🔍 -2% - +2% -1.49ms - +1.57ms |
| branch | 474 kB | 82.11ms - 84.93ms | unsure 🔍 -2% - +2% -1.57ms - +1.49ms |
- |
action-button permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 521 kB | 106.90ms - 108.52ms | - | unsure 🔍 -2% - +0% -2.17ms - +0.43ms |
| branch | 503 kB | 107.57ms - 109.59ms | unsure 🔍 -0% - +2% -0.43ms - +2.17ms |
- |
action-group permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 543 kB | 68.97ms - 72.06ms | - | unsure 🔍 -1% - +4% -0.84ms - +2.93ms |
| branch | 524 kB | 68.40ms - 70.55ms | unsure 🔍 -4% - +1% -2.93ms - +0.84ms |
- |
action-menu permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 655 kB | 174.12ms - 177.03ms | - | unsure 🔍 -1% - +2% -1.44ms - +2.75ms |
| branch | 633 kB | 173.41ms - 176.42ms | unsure 🔍 -2% - +1% -2.75ms - +1.44ms |
- |
alert-dialog permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 460 kB | 125.72ms - 126.71ms | - | slower ❌ 0% - 1% 0.24ms - 1.70ms |
| branch | 445 kB | 124.72ms - 125.78ms | faster ✔ 0% - 1% 0.24ms - 1.70ms |
- |
asset permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 364 kB | 12.43ms - 12.55ms | - | slower ❌ 0% - 2% 0.06ms - 0.24ms |
| branch | 351 kB | 12.26ms - 12.41ms | faster ✔ 0% - 2% 0.06ms - 0.24ms |
- |
avatar permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 402 kB | 24.84ms - 25.37ms | - | slower ❌ 0% - 3% 0.10ms - 0.72ms |
| branch | 388 kB | 24.54ms - 24.85ms | faster ✔ 0% - 3% 0.10ms - 0.72ms |
- |
badge permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 401 kB | 33.44ms - 33.87ms | - | unsure 🔍 -0% - +2% -0.01ms - +0.55ms |
| branch | 388 kB | 33.20ms - 33.57ms | unsure 🔍 -2% - +0% -0.55ms - +0.01ms |
- |
banner permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 362 kB | 21.45ms - 21.72ms | - | slower ❌ 0% - 2% 0.10ms - 0.46ms |
| branch | 350 kB | 21.18ms - 21.42ms | faster ✔ 0% - 2% 0.10ms - 0.46ms |
- |
button-group permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 447 kB | 61.90ms - 63.49ms | - | unsure 🔍 -1% - +2% -0.55ms - +1.39ms |
| branch | 432 kB | 61.72ms - 62.83ms | unsure 🔍 -2% - +1% -1.39ms - +0.55ms |
- |
button permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 453 kB | 75.37ms - 76.64ms | - | unsure 🔍 -1% - +1% -0.88ms - +0.98ms |
| branch | 438 kB | 75.28ms - 76.63ms | unsure 🔍 -1% - +1% -0.98ms - +0.88ms |
- |
card permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 510 kB | 61.62ms - 62.44ms | - | unsure 🔍 -0% - +2% -0.15ms - +1.39ms |
| branch | 493 kB | 60.76ms - 62.06ms | unsure 🔍 -2% - +0% -1.39ms - +0.15ms |
- |
checkbox permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 421 kB | 90.23ms - 91.66ms | - | slower ❌ 1% - 4% 1.26ms - 3.18ms |
| branch | 405 kB | 88.08ms - 89.36ms | faster ✔ 1% - 3% 1.26ms - 3.18ms |
- |
coachmark permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 626 kB | 182.29ms - 184.44ms | - | slower ❌ 0% - 2% 0.10ms - 3.01ms |
| branch | 611 kB | 180.83ms - 182.79ms | faster ✔ 0% - 2% 0.10ms - 3.01ms |
- |
color-area permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 457 kB | 142.53ms - 143.76ms | - | unsure 🔍 -0% - +1% -0.20ms - +2.11ms |
| branch | 443 kB | 141.21ms - 143.17ms | unsure 🔍 -1% - +0% -2.11ms - +0.20ms |
- |
Firefox
accordion permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 420 kB | 260.00ms - 272.68ms | - | unsure 🔍 -1% - +4% -2.65ms - +11.49ms |
| branch | 406 kB | 258.80ms - 265.04ms | unsure 🔍 -4% - +1% -11.49ms - +2.65ms |
- |
action-bar permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 489 kB | 142.74ms - 150.10ms | - | unsure 🔍 -2% - +5% -2.28ms - +6.88ms |
| branch | 474 kB | 141.38ms - 146.86ms | unsure 🔍 -5% - +2% -6.88ms - +2.28ms |
- |
action-button permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 521 kB | 221.64ms - 229.48ms | - | unsure 🔍 -2% - +4% -5.50ms - +8.10ms |
| branch | 503 kB | 218.71ms - 229.81ms | unsure 🔍 -4% - +2% -8.10ms - +5.50ms |
- |
action-group permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 543 kB | 158.79ms - 166.45ms | - | unsure 🔍 -2% - +4% -2.81ms - +7.05ms |
| branch | 524 kB | 157.39ms - 163.61ms | unsure 🔍 -4% - +2% -7.05ms - +2.81ms |
- |
action-menu permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 655 kB | 315.94ms - 327.94ms | - | unsure 🔍 -2% - +3% -4.89ms - +10.69ms |
| branch | 633 kB | 314.06ms - 324.02ms | unsure 🔍 -3% - +2% -10.69ms - +4.89ms |
- |
alert-dialog permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 460 kB | 205.19ms - 210.69ms | - | unsure 🔍 -3% - +2% -6.09ms - +3.77ms |
| branch | 445 kB | 205.01ms - 213.19ms | unsure 🔍 -2% - +3% -3.77ms - +6.09ms |
- |
asset permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 364 kB | 26.92ms - 29.72ms | - | unsure 🔍 -8% - +7% -2.21ms - +1.97ms |
| branch | 351 kB | 26.89ms - 29.99ms | unsure 🔍 -7% - +8% -1.97ms - +2.21ms |
- |
avatar permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 402 kB | 52.17ms - 53.91ms | - | unsure 🔍 -2% - +3% -0.90ms - +1.82ms |
| branch | 388 kB | 51.53ms - 53.63ms | unsure 🔍 -3% - +2% -1.82ms - +0.90ms |
- |
badge permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 401 kB | 70.26ms - 74.46ms | - | unsure 🔍 -1% - +7% -0.89ms - +4.69ms |
| branch | 388 kB | 68.62ms - 72.30ms | unsure 🔍 -6% - +1% -4.69ms - +0.89ms |
- |
banner permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 362 kB | 39.58ms - 43.90ms | - | unsure 🔍 -4% - +11% -1.60ms - +4.40ms |
| branch | 350 kB | 38.25ms - 42.43ms | unsure 🔍 -10% - +4% -4.40ms - +1.60ms |
- |
button-group permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 447 kB | 135.57ms - 142.39ms | - | unsure 🔍 -3% - +4% -4.40ms - +6.04ms |
| branch | 432 kB | 134.21ms - 142.11ms | unsure 🔍 -4% - +3% -6.04ms - +4.40ms |
- |
button permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 453 kB | 149.65ms - 158.75ms | - | unsure 🔍 -4% - +5% -6.33ms - +7.33ms |
| branch | 438 kB | 148.60ms - 158.80ms | unsure 🔍 -5% - +4% -7.33ms - +6.33ms |
- |
card permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 510 kB | 104.96ms - 109.12ms | - | unsure 🔍 -4% - +3% -4.58ms - +3.02ms |
| branch | 493 kB | 104.64ms - 111.00ms | unsure 🔍 -3% - +4% -3.02ms - +4.58ms |
- |
checkbox permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 421 kB | 166.96ms - 175.88ms | - | unsure 🔍 -0% - +6% -0.28ms - +10.44ms |
| branch | 405 kB | 163.37ms - 169.31ms | unsure 🔍 -6% - +0% -10.44ms - +0.28ms |
- |
coachmark permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 626 kB | 402.85ms - 414.23ms | - | unsure 🔍 -1% - +3% -4.39ms - +10.55ms |
| branch | 611 kB | 400.62ms - 410.30ms | unsure 🔍 -3% - +1% -10.55ms - +4.39ms |
- |
color-area permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 457 kB | 221.86ms - 230.10ms | - | unsure 🔍 -2% - +3% -3.86ms - +6.90ms |
| branch | 443 kB | 221.00ms - 227.92ms | unsure 🔍 -3% - +2% -6.90ms - +3.86ms |
- |