chore: refresh lockfile, use htmlnano + pin workflow deps (#28946)

.devcontainer/Dockerfile

@@ -1,4 +1,4 @@
-FROM node:lts
+FROM node:lts@sha256:48db4f6ea21d134be744207225753a1730c4bc1b4cdf836d44511c36bf0e34d7
 
 RUN apt-get update && \
     apt-get install -fy libnss3 libnspr4 libatk1.0-0 libatk-bridge2.0-0 libcups2 libdbus-1-3 libdrm2 libxkbcommon0 libatspi2.0-0 libxcomposite1 libxdamage1 libxfixes3 libxrandr2 libgbm1 libasound2 && \

.github/workflows/cache-cleanup.yml

@@ -22,14 +22,14 @@ jobs:
           gh extension install actions/gh-actions-cache
 
           echo "Fetching list of cache keys"
-          cacheKeysForPR=$(gh actions-cache list -R $REPO -B $BRANCH -L 100 | cut -f 1 )
+          cacheKeysForPR=$(gh actions-cache list -R "$REPO" -B "$BRANCH" -L 100 | cut -f 1 )
 
           ## Setting this to not fail the workflow while deleting cache keys.
           set +e
           echo "Deleting caches..."
           for cacheKey in $cacheKeysForPR
           do
-              gh actions-cache delete $cacheKey -R $REPO -B $BRANCH --confirm
+              gh actions-cache delete "$cacheKey" -R "$REPO" -B "$BRANCH" --confirm
           done
           echo "Done"
         env:

.github/workflows/lint-workflows.yml

@@ -26,6 +26,6 @@ jobs:
       - uses: actions/checkout@692973e3d937129bcbf40652eb9f2f61becf3332 # v4.1.7
       # From https://github.com/rhysd/actionlint/blob/main/docs/usage.md#use-actionlint-on-github-actions
       - name: Check workflow files
-        run: |
-          bash <(curl https://raw.githubusercontent.com/rhysd/actionlint/590d3bd9dde0c91f7a66071d40eb84716526e5a6/scripts/download-actionlint.bash) 1.6.25
-          ./actionlint -color -shellcheck=""
+        uses: docker://rhysd/actionlint:1.7.1
+        with:
+          args: -color

.github/workflows/release-pr.yml

@@ -39,7 +39,7 @@ jobs:
           GH_REPO: ${{ github.repository }}
           COMMENT_AT: ${{ github.event.comment.created_at }}
         run: |
-          pr="$(gh api -H "Accept: application/vnd.github+json" -H "X-GitHub-Api-Version: 2022-11-28" /repos/${GH_REPO}/pulls/${PR_NUMBER})"
+          pr="$(gh api -H "Accept: application/vnd.github+json" -H "X-GitHub-Api-Version: 2022-11-28" /repos/"${GH_REPO}"/pulls/"${PR_NUMBER}")"
           head_sha="$(echo "$pr" | jq -r .head.sha)"
           updated_at="$(echo "$pr" | jq -r .updated_at)"
 
@@ -47,7 +47,7 @@ jobs:
               exit 1
           fi
 
-          echo "head_sha=$head_sha" >> $GITHUB_OUTPUT
+          echo "head_sha=$head_sha" >> "$GITHUB_OUTPUT"
       - uses: actions/checkout@692973e3d937129bcbf40652eb9f2f61becf3332 # v4.1.7
         with:
           ref: ${{ steps.pr.outputs.head_sha }}

.github/workflows/stackblitz-link.yml

@@ -11,7 +11,7 @@ jobs:
   stackblitz:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v4
-      - uses: huang-julien/reproduire-sur-stackblitz@v1.0.2
+      - uses: actions/checkout@692973e3d937129bcbf40652eb9f2f61becf3332 # v4.1.7
+      - uses: huang-julien/reproduire-sur-stackblitz@9ceccbfbb0f2f9a9a8db2d1f0dd909cf5cfe67aa # v1.0.2
         with:
           reproduction-heading: '### Reproduction'

package.json

@@ -48,6 +48,7 @@
     "nuxt": "workspace:*",
     "postcss": "8.4.45",
     "rollup": "4.21.2",
+    "send": ">=0.19.0",
     "typescript": "5.6.2",
     "ufo": "1.5.4",
     "unbuild": "3.0.0-rc.7",

packages/ui-templates/lib/render.ts

@@ -6,7 +6,7 @@ import type { Plugin } from 'vite'
 // @ts-expect-error https://github.com/GoogleChromeLabs/critters/pull/151
 import Critters from 'critters'
 import { genObjectFromRawEntries } from 'knitwork'
-import htmlMinifier from 'html-minifier'
+import htmlnano from 'htmlnano'
 import { glob } from 'tinyglobby'
 import { camelCase } from 'scule'
 
@@ -87,7 +87,7 @@ export const RenderPlugin = () => {
         }
 
         // Minify HTML
-        html = htmlMinifier.minify(html, { collapseWhitespace: true })
+        html = await htmlnano.process(html, { collapseWhitespace: 'aggressive' }).then(r => r.html)
 
         if (!isCompleteHTML) {
           html = html.replace('<html><head></head><body>', '')

packages/ui-templates/package.json

@@ -18,11 +18,10 @@
     "test": "pnpm lint && pnpm build"
   },
   "devDependencies": {
-    "@types/html-minifier": "4.0.5",
     "@unocss/reset": "0.62.3",
     "critters": "0.0.24",
-    "html-minifier": "4.0.0",
     "html-validate": "8.22.0",
+    "htmlnano": "^2.1.1",
     "jiti": "2.0.0-beta.3",
     "knitwork": "1.1.0",
     "pathe": "1.1.2",

packages/ui-templates/test/__snapshots__/templates.spec.ts.snap

@@ -92,10 +92,10 @@ exports[`template > produces correct output for error-404 template 1`] = `
     Arial,
     Noto Sans,
     sans-serif,
-    "Apple Color Emoji",
-    "Segoe UI Emoji",
+    Apple Color Emoji,
+    Segoe UI Emoji,
     Segoe UI Symbol,
-    "Noto Color Emoji";
+    Noto Color Emoji;
 }
 .tabular-nums {
   --un-numeric-spacing: tabular-nums;
@@ -137,37 +137,37 @@ exports[`template > produces correct output for error-404 template 1`] = `
 
 exports[`template > produces correct output for error-404 template 2`] = `
 "*,
-:before,
-:after {
-  box-sizing: border-box;
-  border-width: 0;
-  border-style: solid;
+:after,
+:before {
   border-color: var(--un-default-border-color, #e5e7eb);
+  border-style: solid;
+  border-width: 0;
+  box-sizing: border-box;
 }
-:before,
-:after {
+:after,
+:before {
   --un-content: "";
 }
 html {
   line-height: 1.5;
   -webkit-text-size-adjust: 100%;
-  -moz-tab-size: 4;
-  tab-size: 4;
   font-family:
     ui-sans-serif,
     system-ui,
     sans-serif,
-    "Apple Color Emoji",
-    "Segoe UI Emoji",
+    Apple Color Emoji,
+    Segoe UI Emoji,
     Segoe UI Symbol,
-    "Noto Color Emoji";
+    Noto Color Emoji;
   font-feature-settings: normal;
   font-variation-settings: normal;
+  -moz-tab-size: 4;
+  tab-size: 4;
   -webkit-tap-highlight-color: transparent;
 }
 body {
-  margin: 0;
   line-height: inherit;
+  margin: 0;
 }
 h1,
 h2 {
@@ -184,8 +184,8 @@ p {
   margin: 0;
 }
 *,
-:before,
-:after {
+:after,
+:before {
   --un-rotate: 0;
   --un-rotate-x: 0;
   --un-rotate-y: 0;
@@ -209,15 +209,15 @@ p {
   --un-numeric-fraction: ;
   --un-border-spacing-x: 0;
   --un-border-spacing-y: 0;
-  --un-ring-offset-shadow: 0 0 rgb(0 0 0 / 0);
-  --un-ring-shadow: 0 0 rgb(0 0 0 / 0);
+  --un-ring-offset-shadow: 0 0 transparent;
+  --un-ring-shadow: 0 0 transparent;
   --un-shadow-inset: ;
-  --un-shadow: 0 0 rgb(0 0 0 / 0);
+  --un-shadow: 0 0 transparent;
   --un-ring-inset: ;
   --un-ring-offset-width: 0px;
   --un-ring-offset-color: #fff;
   --un-ring-width: 0px;
-  --un-ring-color: rgb(147 197 253 / 0.5);
+  --un-ring-color: rgba(147, 197, 253, 0.5);
   --un-blur: ;
   --un-brightness: ;
   --un-contrast: ;
@@ -309,10 +309,10 @@ exports[`template > produces correct output for error-500 template 1`] = `
     Arial,
     Noto Sans,
     sans-serif,
-    "Apple Color Emoji",
-    "Segoe UI Emoji",
+    Apple Color Emoji,
+    Segoe UI Emoji,
     Segoe UI Symbol,
-    "Noto Color Emoji";
+    Noto Color Emoji;
 }
 .tabular-nums {
   --un-numeric-spacing: tabular-nums;
@@ -348,37 +348,37 @@ exports[`template > produces correct output for error-500 template 1`] = `
 
 exports[`template > produces correct output for error-500 template 2`] = `
 "*,
-:before,
-:after {
-  box-sizing: border-box;
-  border-width: 0;
-  border-style: solid;
+:after,
+:before {
   border-color: var(--un-default-border-color, #e5e7eb);
+  border-style: solid;
+  border-width: 0;
+  box-sizing: border-box;
 }
-:before,
-:after {
+:after,
+:before {
   --un-content: "";
 }
 html {
   line-height: 1.5;
   -webkit-text-size-adjust: 100%;
-  -moz-tab-size: 4;
-  tab-size: 4;
   font-family:
     ui-sans-serif,
     system-ui,
     sans-serif,
-    "Apple Color Emoji",
-    "Segoe UI Emoji",
+    Apple Color Emoji,
+    Segoe UI Emoji,
     Segoe UI Symbol,
-    "Noto Color Emoji";
+    Noto Color Emoji;
   font-feature-settings: normal;
   font-variation-settings: normal;
+  -moz-tab-size: 4;
+  tab-size: 4;
   -webkit-tap-highlight-color: transparent;
 }
 body {
-  margin: 0;
   line-height: inherit;
+  margin: 0;
 }
 h1,
 h2 {
@@ -391,8 +391,8 @@ p {
   margin: 0;
 }
 *,
-:before,
-:after {
+:after,
+:before {
   --un-rotate: 0;
   --un-rotate-x: 0;
   --un-rotate-y: 0;
@@ -416,15 +416,15 @@ p {
   --un-numeric-fraction: ;
   --un-border-spacing-x: 0;
   --un-border-spacing-y: 0;
-  --un-ring-offset-shadow: 0 0 rgb(0 0 0 / 0);
-  --un-ring-shadow: 0 0 rgb(0 0 0 / 0);
+  --un-ring-offset-shadow: 0 0 transparent;
+  --un-ring-shadow: 0 0 transparent;
   --un-shadow-inset: ;
-  --un-shadow: 0 0 rgb(0 0 0 / 0);
+  --un-shadow: 0 0 transparent;
   --un-ring-inset: ;
   --un-ring-offset-width: 0px;
   --un-ring-offset-color: #fff;
   --un-ring-width: 0px;
-  --un-ring-color: rgb(147 197 253 / 0.5);
+  --un-ring-color: rgba(147, 197, 253, 0.5);
   --un-blur: ;
   --un-brightness: ;
   --un-contrast: ;
@@ -492,7 +492,7 @@ exports[`template > produces correct output for error-dev template 1`] = `
   border-width: 1px;
 }
 .border-b-0 {
-  border-bottom-width: 0px;
+  border-bottom-width: 0;
 }
 .border-black\\/5 {
   border-color: #0000000d;
@@ -559,10 +559,10 @@ exports[`template > produces correct output for error-dev template 1`] = `
     Arial,
     Noto Sans,
     sans-serif,
-    "Apple Color Emoji",
-    "Segoe UI Emoji",
+    Apple Color Emoji,
+    Segoe UI Emoji,
     Segoe UI Symbol,
-    "Noto Color Emoji";
+    Noto Color Emoji;
 }
 .hover\\:underline:hover {
   text-decoration-line: underline;
@@ -608,37 +608,37 @@ exports[`template > produces correct output for error-dev template 1`] = `
 
 exports[`template > produces correct output for error-dev template 2`] = `
 "*,
-:before,
-:after {
-  box-sizing: border-box;
-  border-width: 0;
-  border-style: solid;
+:after,
+:before {
   border-color: var(--un-default-border-color, #e5e7eb);
+  border-style: solid;
+  border-width: 0;
+  box-sizing: border-box;
 }
-:before,
-:after {
+:after,
+:before {
   --un-content: "";
 }
 html {
   line-height: 1.5;
   -webkit-text-size-adjust: 100%;
-  -moz-tab-size: 4;
-  tab-size: 4;
   font-family:
     ui-sans-serif,
     system-ui,
     sans-serif,
-    "Apple Color Emoji",
-    "Segoe UI Emoji",
+    Apple Color Emoji,
+    Segoe UI Emoji,
     Segoe UI Symbol,
-    "Noto Color Emoji";
+    Noto Color Emoji;
   font-feature-settings: normal;
   font-variation-settings: normal;
+  -moz-tab-size: 4;
+  tab-size: 4;
   -webkit-tap-highlight-color: transparent;
 }
 body {
-  margin: 0;
   line-height: inherit;
+  margin: 0;
 }
 h1 {
   font-size: inherit;
@@ -659,8 +659,8 @@ pre {
     Courier New,
     monospace;
   font-feature-settings: normal;
-  font-variation-settings: normal;
   font-size: 1em;
+  font-variation-settings: normal;
 }
 h1,
 p,
@@ -668,8 +668,8 @@ pre {
   margin: 0;
 }
 *,
-:before,
-:after {
+:after,
+:before {
   --un-rotate: 0;
   --un-rotate-x: 0;
   --un-rotate-y: 0;
@@ -693,15 +693,15 @@ pre {
   --un-numeric-fraction: ;
   --un-border-spacing-x: 0;
   --un-border-spacing-y: 0;
-  --un-ring-offset-shadow: 0 0 rgb(0 0 0 / 0);
-  --un-ring-shadow: 0 0 rgb(0 0 0 / 0);
+  --un-ring-offset-shadow: 0 0 transparent;
+  --un-ring-shadow: 0 0 transparent;
   --un-shadow-inset: ;
-  --un-shadow: 0 0 rgb(0 0 0 / 0);
+  --un-shadow: 0 0 transparent;
   --un-ring-inset: ;
   --un-ring-offset-width: 0px;
   --un-ring-offset-color: #fff;
   --un-ring-width: 0px;
-  --un-ring-color: rgb(147 197 253 / 0.5);
+  --un-ring-color: rgba(147, 197, 253, 0.5);
   --un-blur: ;
   --un-brightness: ;
   --un-contrast: ;
@@ -727,11 +727,11 @@ pre {
 exports[`template > produces correct output for loading template 1`] = `
 ".nuxt-loader-bar {
   background: #00dc82;
-  position: fixed;
   bottom: 0;
-  left: 0;
-  right: 0;
   height: 3px;
+  left: 0;
+  position: fixed;
+  right: 0;
 }
 .triangle-loading {
   position: absolute;
@@ -806,8 +806,8 @@ exports[`template > produces correct output for loading template 1`] = `
   padding-right: 0.625rem;
 }
 .py-1\\.5 {
-  padding-top: 0.375rem;
   padding-bottom: 0.375rem;
+  padding-top: 0.375rem;
 }
 .text-center {
   text-align: center;
@@ -815,16 +815,16 @@ exports[`template > produces correct output for loading template 1`] = `
 .text-\\[16px\\] {
   font-size: 16px;
 }
-.text-\\[\\#00DC82\\],
-.group:hover .group-hover\\:text-\\[\\#00DC82\\] {
+.group:hover .group-hover\\:text-\\[\\#00DC82\\],
+.text-\\[\\#00DC82\\] {
   --un-text-opacity: 1;
   color: rgb(0 220 130 / var(--un-text-opacity));
 }
 .text-\\[\\#00DC82\\]\\/80 {
   color: #00dc82cc;
 }
-.text-\\[\\#020420\\],
-.group:hover .group-hover\\:text-\\[\\#020420\\] {
+.group:hover .group-hover\\:text-\\[\\#020420\\],
+.text-\\[\\#020420\\] {
   --un-text-opacity: 1;
   color: rgb(2 4 32 / var(--un-text-opacity));
 }
@@ -860,10 +860,10 @@ exports[`template > produces correct output for loading template 1`] = `
     Arial,
     Noto Sans,
     sans-serif,
-    "Apple Color Emoji",
-    "Segoe UI Emoji",
+    Apple Color Emoji,
+    Segoe UI Emoji,
     Segoe UI Symbol,
-    "Noto Color Emoji";
+    Noto Color Emoji;
 }
 .antialiased {
   -webkit-font-smoothing: antialiased;
@@ -889,49 +889,49 @@ exports[`template > produces correct output for loading template 1`] = `
 
 exports[`template > produces correct output for loading template 2`] = `
 "@keyframes nuxt-loading-move {
-  100% {
+  to {
     stroke-dashoffset: -128;
   }
 }
 @media (prefers-color-scheme: dark) {
-  html,
-  body {
-    color: white;
+  body,
+  html {
+    color: #fff;
     color-scheme: dark;
   }
 }
 *,
-:before,
-:after {
-  box-sizing: border-box;
-  border-width: 0;
-  border-style: solid;
+:after,
+:before {
   border-color: var(--un-default-border-color, #e5e7eb);
+  border-style: solid;
+  border-width: 0;
+  box-sizing: border-box;
 }
-:before,
-:after {
+:after,
+:before {
   --un-content: "";
 }
 html {
   line-height: 1.5;
   -webkit-text-size-adjust: 100%;
-  -moz-tab-size: 4;
-  tab-size: 4;
   font-family:
     ui-sans-serif,
     system-ui,
     sans-serif,
-    "Apple Color Emoji",
-    "Segoe UI Emoji",
+    Apple Color Emoji,
+    Segoe UI Emoji,
     Segoe UI Symbol,
-    "Noto Color Emoji";
+    Noto Color Emoji;
   font-feature-settings: normal;
   font-variation-settings: normal;
+  -moz-tab-size: 4;
+  tab-size: 4;
   -webkit-tap-highlight-color: transparent;
 }
 body {
-  margin: 0;
   line-height: inherit;
+  margin: 0;
 }
 a {
   color: inherit;
@@ -942,8 +942,8 @@ svg {
   vertical-align: middle;
 }
 *,
-:before,
-:after {
+:after,
+:before {
   --un-rotate: 0;
   --un-rotate-x: 0;
   --un-rotate-y: 0;
@@ -967,15 +967,15 @@ svg {
   --un-numeric-fraction: ;
   --un-border-spacing-x: 0;
   --un-border-spacing-y: 0;
-  --un-ring-offset-shadow: 0 0 rgb(0 0 0 / 0);
-  --un-ring-shadow: 0 0 rgb(0 0 0 / 0);
+  --un-ring-offset-shadow: 0 0 transparent;
+  --un-ring-shadow: 0 0 transparent;
   --un-shadow-inset: ;
-  --un-shadow: 0 0 rgb(0 0 0 / 0);
+  --un-shadow: 0 0 transparent;
   --un-ring-inset: ;
   --un-ring-offset-width: 0px;
   --un-ring-offset-color: #fff;
   --un-ring-width: 0px;
-  --un-ring-color: rgb(147 197 253 / 0.5);
+  --un-ring-color: rgba(147, 197, 253, 0.5);
   --un-blur: ;
   --un-brightness: ;
   --un-contrast: ;
@@ -1000,17 +1000,17 @@ svg {
 
 exports[`template > produces correct output for welcome template 1`] = `
 ".sr-only {
-  position: absolute;
-  width: 1px;
   height: 1px;
-  padding: 0;
   margin: -1px;
   overflow: hidden;
+  padding: 0;
+  width: 1px;
   clip: rect(0, 0, 0, 0);
-  white-space: nowrap;
   border-width: 0;
+  white-space: nowrap;
 }
-.absolute {
+.absolute,
+.sr-only {
   position: absolute;
 }
 .relative {
@@ -1048,17 +1048,17 @@ exports[`template > produces correct output for welcome template 1`] = `
   display: inline-block;
 }
 .size-\\[18px\\] {
-  width: 18px;
   height: 18px;
+  width: 18px;
 }
 .size-4 {
-  width: 1rem;
   height: 1rem;
+  width: 1rem;
 }
-.size-5,
-.group:hover .group-hover\\:size-5 {
-  width: 1.25rem;
+.group:hover .group-hover\\:size-5,
+.size-5 {
   height: 1.25rem;
+  width: 1.25rem;
 }
 .h-\\[32px\\] {
   height: 32px;
@@ -1170,8 +1170,8 @@ exports[`template > produces correct output for welcome template 1`] = `
   padding-right: 1rem;
 }
 .py-1 {
-  padding-top: 0.25rem;
   padding-bottom: 0.25rem;
+  padding-top: 0.25rem;
 }
 .text-\\[12px\\] {
   font-size: 12px;
@@ -1184,8 +1184,8 @@ exports[`template > produces correct output for welcome template 1`] = `
   font-size: 0.875rem;
   line-height: 1.25rem;
 }
-.text-\\[\\#00DC82\\],
-.group:hover .group-hover\\:text-\\[\\#00DC82\\] {
+.group:hover .group-hover\\:text-\\[\\#00DC82\\],
+.text-\\[\\#00DC82\\] {
   --un-text-opacity: 1;
   color: rgb(0 220 130 / var(--un-text-opacity));
 }
@@ -1247,9 +1247,9 @@ exports[`template > produces correct output for welcome template 1`] = `
     var(--un-shadow);
 }
 .transition-all {
+  transition-duration: 0.15s;
   transition-property: all;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-  transition-duration: 0.15s;
 }
 @media (prefers-color-scheme: dark) {
   .dark\\:border-\\[\\#00DC82\\]\\/50 {
@@ -1338,8 +1338,8 @@ exports[`template > produces correct output for welcome template 1`] = `
     padding-right: 1.5rem;
   }
   .sm\\:py-1\\.5 {
-    padding-top: 0.375rem;
     padding-bottom: 0.375rem;
+    padding-top: 0.375rem;
   }
   .sm\\:text-\\[14px\\] {
     font-size: 14px;
@@ -1360,37 +1360,37 @@ exports[`template > produces correct output for welcome template 1`] = `
 
 exports[`template > produces correct output for welcome template 2`] = `
 "*,
-:before,
-:after {
-  box-sizing: border-box;
-  border-width: 0;
-  border-style: solid;
+:after,
+:before {
   border-color: var(--un-default-border-color, #e5e7eb);
+  border-style: solid;
+  border-width: 0;
+  box-sizing: border-box;
 }
-:before,
-:after {
+:after,
+:before {
   --un-content: "";
 }
 html {
   line-height: 1.5;
   -webkit-text-size-adjust: 100%;
-  -moz-tab-size: 4;
-  tab-size: 4;
   font-family:
     ui-sans-serif,
     system-ui,
     sans-serif,
-    "Apple Color Emoji",
-    "Segoe UI Emoji",
+    Apple Color Emoji,
+    Segoe UI Emoji,
     Segoe UI Symbol,
-    "Noto Color Emoji";
+    Noto Color Emoji;
   font-feature-settings: normal;
   font-variation-settings: normal;
+  -moz-tab-size: 4;
+  tab-size: 4;
   -webkit-tap-highlight-color: transparent;
 }
 body {
-  margin: 0;
   line-height: inherit;
+  margin: 0;
 }
 h1,
 h2 {
@@ -1403,12 +1403,12 @@ a {
 }
 h1,
 h2,
-p {
+p,
+ul {
   margin: 0;
 }
 ul {
   list-style: none;
-  margin: 0;
   padding: 0;
 }
 svg {
@@ -1416,8 +1416,8 @@ svg {
   vertical-align: middle;
 }
 *,
-:before,
-:after {
+:after,
+:before {
   --un-rotate: 0;
   --un-rotate-x: 0;
   --un-rotate-y: 0;
@@ -1441,15 +1441,15 @@ svg {
   --un-numeric-fraction: ;
   --un-border-spacing-x: 0;
   --un-border-spacing-y: 0;
-  --un-ring-offset-shadow: 0 0 rgb(0 0 0 / 0);
-  --un-ring-shadow: 0 0 rgb(0 0 0 / 0);
+  --un-ring-offset-shadow: 0 0 transparent;
+  --un-ring-shadow: 0 0 transparent;
   --un-shadow-inset: ;
-  --un-shadow: 0 0 rgb(0 0 0 / 0);
+  --un-shadow: 0 0 transparent;
   --un-ring-inset: ;
   --un-ring-offset-width: 0px;
   --un-ring-offset-color: #fff;
   --un-ring-width: 0px;
-  --un-ring-color: rgb(147 197 253 / 0.5);
+  --un-ring-color: rgba(147, 197, 253, 0.5);
   --un-blur: ;
   --un-brightness: ;
   --un-contrast: ;

test/bundle.test.ts

@@ -35,7 +35,7 @@ describe.skipIf(process.env.SKIP_BUNDLE_SIZE === 'true' || process.env.ECOSYSTEM
     expect.soft(roundToKilobytes(serverStats.totalBytes)).toMatchInlineSnapshot(`"206k"`)
 
     const modules = await analyzeSizes(['node_modules/**/*'], serverDir)
-    expect.soft(roundToKilobytes(modules.totalBytes)).toMatchInlineSnapshot(`"1384k"`)
+    expect.soft(roundToKilobytes(modules.totalBytes)).toMatchInlineSnapshot(`"1385k"`)
 
     const packages = modules.files
       .filter(m => m.endsWith('package.json'))