diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index fca477c08..5ae59e80f 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -27,8 +27,10 @@ jobs:
           - name: Linux
             os: namespace-profile-default
 
+          # Playwright 1.62+ dropped WebKit support for macOS 14, and hangs
+          # instead of failing when launching WebKit on a macos-14 runner.
           - name: macOS
-            os: macos-14
+            os: macos-15
 
         # Exclude windows and macos from being built on feature branches
         run-all:
@@ -47,21 +49,21 @@ jobs:
     name: ${{ matrix.runner.name }}
 
     steps:
-      - uses: actions/checkout@v6
-      - uses: pnpm/action-setup@v4
+      - uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6
+        with:
+          persist-credentials: false
+      - uses: pnpm/action-setup@0ebf47130e4866e96fce0953f49152a61190b271 # v6.0.9
 
       - name: Use Node.js ${{ env.NODE_VERSION }}
-        uses: actions/setup-node@v6
+        uses: actions/setup-node@48b55a011bda9f5d6aeb4c2d9c7362e8dae4041e # v6
         with:
           node-version: ${{ env.NODE_VERSION }}
-          cache: 'pnpm'
 
       # Cargo already skips downloading dependencies if they already exist
       - name: Cache cargo
-        uses: actions/cache@v5
+        uses: actions/cache@27d5ce7f107fe9357f9df03efb73ab90386fccae # v5
         with:
           path: |
-            ~/.cargo/bin/
             ~/.cargo/registry/index/
             ~/.cargo/registry/cache/
             ~/.cargo/git/db/
@@ -70,7 +72,7 @@ jobs:
 
       # Cache the `oxide` Rust build
       - name: Cache oxide build
-        uses: actions/cache@v5
+        uses: actions/cache@27d5ce7f107fe9357f9df03efb73ab90386fccae # v5
         with:
           path: |
             ./crates/node/*.node
@@ -88,7 +90,7 @@ jobs:
         run: rustup target add wasm32-wasip1-threads
 
       - name: Install dependencies
-        run: pnpm install
+        run: pnpm install --frozen-lockfile
 
       - name: Build
         run: pnpm run build
@@ -116,7 +118,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Notify Discord
-        uses: discord-actions/message@v2
+        uses: discord-actions/message@5c7149c81a83146e5d01f142be1bf87a61831c4d # v2
         with:
           webhookUrl: ${{ secrets.DISCORD_WEBHOOK_URL }}
           message: 'The [most recent ${{ github.workflow }} workflow](<${{ github.server_url }}/${{ github.repository }}/actions/runs/${{ github.run_id }}>) on the `main` branch has failed.'
diff --git a/.github/workflows/integration-tests.yml b/.github/workflows/integration-tests.yml
index 3b2cf8f1b..457c38424 100644
--- a/.github/workflows/integration-tests.yml
+++ b/.github/workflows/integration-tests.yml
@@ -55,25 +55,25 @@ jobs:
     name: ${{ matrix.runner.name }} /  ${{ matrix.integration }}
 
     steps:
-      - uses: actions/checkout@v6
-      - uses: pnpm/action-setup@v4
+      - uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6
+        with:
+          persist-credentials: false
+      - uses: pnpm/action-setup@0ebf47130e4866e96fce0953f49152a61190b271 # v6.0.9
 
       - run: |
           git config --global user.name "github-actions[bot]"
           git config --global user.email "41898282+github-actions[bot]@users.noreply.github.com"
 
       - name: Use Node.js ${{ env.NODE_VERSION }}
-        uses: actions/setup-node@v6
+        uses: actions/setup-node@48b55a011bda9f5d6aeb4c2d9c7362e8dae4041e # v6
         with:
           node-version: ${{ env.NODE_VERSION }}
-          cache: 'pnpm'
 
       # Cargo already skips downloading dependencies if they already exist
       - name: Cache cargo
-        uses: actions/cache@v5
+        uses: actions/cache@27d5ce7f107fe9357f9df03efb73ab90386fccae # v5
         with:
           path: |
-            ~/.cargo/bin/
             ~/.cargo/registry/index/
             ~/.cargo/registry/cache/
             ~/.cargo/git/db/
@@ -82,7 +82,7 @@ jobs:
 
       # Cache the `oxide` Rust build
       - name: Cache oxide build
-        uses: actions/cache@v5
+        uses: actions/cache@27d5ce7f107fe9357f9df03efb73ab90386fccae # v5
         with:
           path: |
             ./crates/node/*.node
@@ -119,7 +119,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Notify Discord
-        uses: discord-actions/message@v2
+        uses: discord-actions/message@5c7149c81a83146e5d01f142be1bf87a61831c4d # v2
         with:
           webhookUrl: ${{ secrets.DISCORD_WEBHOOK_URL }}
           message: 'The [most recent ${{ github.workflow }} workflow](<${{ github.server_url }}/${{ github.repository }}/actions/runs/${{ github.run_id }}>) on the `main` branch has failed.'
diff --git a/.github/workflows/prepare-release.yml b/.github/workflows/prepare-release.yml
index d5ad798be..24e829afd 100644
--- a/.github/workflows/prepare-release.yml
+++ b/.github/workflows/prepare-release.yml
@@ -2,6 +2,12 @@ name: Prepare Release
 
 on:
   workflow_dispatch:
+    inputs:
+      dry_run:
+        description: Skip creating the draft GitHub release
+        required: false
+        default: true
+        type: boolean
   push:
     tags:
       - 'v*'
@@ -9,6 +15,7 @@ on:
 env:
   APP_NAME: tailwindcss-oxide
   NODE_VERSION: 24
+  PNPM_VERSION: '11.9.0'
   OXIDE_LOCATION: ./crates/node
 
 permissions:
@@ -47,44 +54,40 @@ jobs:
           - os: ubuntu-latest
             target: x86_64-unknown-linux-gnu
             strip: strip
-            container:
-              image: ghcr.io/napi-rs/napi-rs/nodejs-rust:lts-debian
+            build-flags: --use-napi-cross
           - os: ubuntu-latest
             target: aarch64-unknown-linux-gnu
-            strip: llvm-strip
-            container:
-              image: ghcr.io/napi-rs/napi-rs/nodejs-rust:lts-debian-aarch64
+            strip: aarch64-linux-gnu-strip
+            build-flags: --use-napi-cross
           - os: ubuntu-latest
             target: armv7-unknown-linux-gnueabihf
-            strip: llvm-strip
-            container:
-              image: ghcr.io/napi-rs/napi-rs/nodejs-rust:lts-debian-zig
+            strip: arm-linux-gnueabihf-strip
+            build-flags: --use-napi-cross
           - os: ubuntu-latest
             target: aarch64-unknown-linux-musl
-            strip: aarch64-linux-musl-strip
-            download: true
-            container:
-              image: ghcr.io/napi-rs/napi-rs/nodejs-rust:lts-alpine
+            strip-zig: true
+            build-flags: -x
           - os: ubuntu-latest
             target: x86_64-unknown-linux-musl
             strip: strip
-            download: true
-            container:
-              image: ghcr.io/napi-rs/napi-rs/nodejs-rust:lts-alpine
+            build-flags: -x
 
     name: Build ${{ matrix.target }} (oxide)
     runs-on: ${{ matrix.os }}
-    container: ${{ matrix.container }}
     timeout-minutes: 15
     steps:
-      - uses: actions/checkout@v6
-      - uses: pnpm/action-setup@v4
+      - uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6
+        with:
+          persist-credentials: false
+      - uses: pnpm/action-setup@0ebf47130e4866e96fce0953f49152a61190b271 # v6.0.9
+        with:
+          version: ${{ env.PNPM_VERSION }}
 
       - name: Use Node.js ${{ env.NODE_VERSION }}
-        uses: actions/setup-node@v6
+        uses: actions/setup-node@48b55a011bda9f5d6aeb4c2d9c7362e8dae4041e # v6
         with:
           node-version: ${{ env.NODE_VERSION }}
-          cache: 'pnpm'
+          package-manager-cache: false
 
       - name: Install gcc-arm-linux-gnueabihf
         if: ${{ matrix.target == 'armv7-unknown-linux-gnueabihf' }}
@@ -92,62 +95,56 @@ jobs:
           sudo apt-get update
           sudo apt-get install gcc-arm-linux-gnueabihf g++-arm-linux-gnueabihf -y
 
-      # Cargo already skips downloading dependencies if they already exist
-      - name: Cache cargo
-        uses: actions/cache@v5
-        with:
-          path: |
-            ~/.cargo/bin/
-            ~/.cargo/registry/index/
-            ~/.cargo/registry/cache/
-            ~/.cargo/git/db/
-            target/
-          key: ${{ runner.os }}-${{ matrix.target }}-cargo-${{ hashFiles('**/Cargo.lock') }}
-
-      # Cache the `oxide` Rust build
-      - name: Cache oxide build
-        uses: actions/cache@v5
-        with:
-          path: |
-            ./crates/node/*.node
-            ./crates/node/*.wasm
-            ./crates/node/index.d.ts
-            ./crates/node/index.js
-            ./crates/node/browser.js
-            ./crates/node/tailwindcss-oxide.wasi-browser.js
-            ./crates/node/tailwindcss-oxide.wasi.cjs
-            ./crates/node/wasi-worker-browser.mjs
-            ./crates/node/wasi-worker.mjs
-          key: ${{ runner.os }}-${{ matrix.target }}-oxide-${{ hashFiles('./crates/**/*') }}
-
-      - name: Install Node.JS
-        uses: actions/setup-node@v6
-        with:
-          node-version: ${{ env.NODE_VERSION }}
-
-      - name: Install Rust (Stable)
-        if: ${{ matrix.download }}
+      - name: Install binutils-aarch64-linux-gnu
+        if: ${{ matrix.target == 'aarch64-unknown-linux-gnu' }}
         run: |
-          rustup default stable
+          sudo apt-get update
+          sudo apt-get install binutils-aarch64-linux-gnu -y
+
+      - uses: mlugg/setup-zig@d1434d08867e3ee9daa34448df10607b98908d29 # v2
+        if: ${{ contains(matrix.target, 'musl') }}
+        with:
+          version: 0.14.1
+          use-cache: false
+
+      - name: Install cargo-zigbuild
+        uses: taiki-e/install-action@65851e10cd6c377f11a60e600abc07cb08643468 # v2
+        if: ${{ contains(matrix.target, 'musl') }}
+        env:
+          GITHUB_TOKEN: ${{ github.token }}
+        with:
+          tool: cargo-zigbuild
 
       - name: Setup rust target
         run: rustup target add ${{ matrix.target }}
 
       - name: Install dependencies
-        run: pnpm install --ignore-scripts --filter=!./playgrounds/*
+        run: pnpm install --ignore-scripts --frozen-lockfile --filter=!./playgrounds/*
 
       - name: Build release
-        run: pnpm run --filter ${{ env.OXIDE_LOCATION }} build:platform --target=${{ matrix.target }}
+        run: pnpm run --filter ${{ env.OXIDE_LOCATION }} build:platform --target=${{ matrix.target }} ${{ matrix.build-flags }}
         env:
           RUST_TARGET: ${{ matrix.target }}
           JEMALLOC_SYS_WITH_LG_PAGE: ${{ matrix.page-size }}
 
       - name: Strip debug symbols # https://github.com/rust-lang/rust/issues/46034
-        if: ${{ matrix.strip }}
-        run: ${{ matrix.strip }} ${{ env.OXIDE_LOCATION }}/*.node
+        if: ${{ matrix.strip || matrix.strip-zig }}
+        env:
+          STRIP_COMMAND: ${{ matrix.strip }}
+          STRIP_ZIG: ${{ matrix.strip-zig }}
+        run: |
+          if [ "$STRIP_ZIG" = "true" ]; then
+            for file in ${{ env.OXIDE_LOCATION }}/*.node; do
+              zig objcopy --strip-all "$file" "$file.stripped"
+              mv "$file.stripped" "$file"
+            done
+            exit 0
+          fi
+
+          eval "$STRIP_COMMAND ${{ env.OXIDE_LOCATION }}/*.node"
 
       - name: Upload artifacts
-        uses: actions/upload-artifact@v6
+        uses: actions/upload-artifact@b7c566a772e6b6bfb58ed0dc250532a479d7789f # v6
         with:
           name: bindings-${{ matrix.target }}
           path: ${{ env.OXIDE_LOCATION }}/*.node
@@ -157,9 +154,11 @@ jobs:
     runs-on: ubuntu-latest
     timeout-minutes: 15
     steps:
-      - uses: actions/checkout@v6
+      - uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6
+        with:
+          persist-credentials: false
       - name: Build FreeBSD
-        uses: cross-platform-actions/action@v0.25.0
+        uses: cross-platform-actions/action@cdc9ee69ef84a5f2e59c9058335d9c57bcb4ac86 # v0.25.0
         env:
           DEBUG: napi:*
           RUSTUP_HOME: /usr/local/rustup
@@ -175,12 +174,12 @@ jobs:
           shell: bash
           run: |
             sudo pkg install -y -f curl node libnghttp2 npm
-            sudo npm install -g pnpm@9.6.0 --unsafe-perm=true
+            sudo npm install -g pnpm@${{ env.PNPM_VERSION }} --unsafe-perm=true
             curl -sSf https://static.rust-lang.org/rustup/archive/1.27.1/x86_64-unknown-freebsd/rustup-init --output rustup-init
             chmod +x rustup-init
             ./rustup-init -y --profile minimal
             source "$HOME/.cargo/env"
-            pnpm install --ignore-scripts --filter=!./playgrounds/* || true
+            pnpm install --ignore-scripts --frozen-lockfile --filter=!./playgrounds/* || true
             echo "~~~~ rustc --version ~~~~"
             rustc --version
             echo "~~~~ node -v ~~~~"
@@ -191,7 +190,7 @@ jobs:
             strip -x ${{ env.OXIDE_LOCATION }}/*.node
             ls -la ${{ env.OXIDE_LOCATION }}
       - name: Upload artifacts
-        uses: actions/upload-artifact@v6
+        uses: actions/upload-artifact@b7c566a772e6b6bfb58ed0dc250532a479d7789f # v6
         with:
           name: bindings-x86_64-unknown-freebsd
           path: ${{ env.OXIDE_LOCATION }}/*.node
@@ -202,18 +201,17 @@ jobs:
     name: Build and release Tailwind CSS
 
     permissions:
-      contents: write # for softprops/action-gh-release to create GitHub release
-      # https://docs.npmjs.com/generating-provenance-statements#publishing-packages-with-provenance-via-github-actions
-      id-token: write
+      contents: write # Required for creating releases
 
     needs:
       - build
       - build-freebsd
 
     steps:
-      - uses: actions/checkout@v6
+      - uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6
         with:
           fetch-depth: 20
+          persist-credentials: false
 
       - run: git fetch --tags -f
 
@@ -222,51 +220,25 @@ jobs:
         run: |
           echo "TAG_NAME=$(git describe --tags --abbrev=0)" >> $GITHUB_ENV
 
-      - uses: pnpm/action-setup@v4
+      - uses: pnpm/action-setup@0ebf47130e4866e96fce0953f49152a61190b271 # v6.0.9
+        with:
+          version: ${{ env.PNPM_VERSION }}
 
       - name: Use Node.js ${{ env.NODE_VERSION }}
-        uses: actions/setup-node@v6
+        uses: actions/setup-node@48b55a011bda9f5d6aeb4c2d9c7362e8dae4041e # v6
         with:
           node-version: ${{ env.NODE_VERSION }}
-          cache: 'pnpm'
           registry-url: 'https://registry.npmjs.org'
-
-      # Cargo already skips downloading dependencies if they already exist
-      - name: Cache cargo
-        uses: actions/cache@v5
-        with:
-          path: |
-            ~/.cargo/bin/
-            ~/.cargo/registry/index/
-            ~/.cargo/registry/cache/
-            ~/.cargo/git/db/
-            target/
-          key: ${{ runner.os }}-${{ matrix.target }}-cargo-${{ hashFiles('**/Cargo.lock') }}
-
-      # Cache the `oxide` Rust build
-      - name: Cache oxide build
-        uses: actions/cache@v5
-        with:
-          path: |
-            ./crates/node/*.node
-            ./crates/node/*.wasm
-            ./crates/node/index.d.ts
-            ./crates/node/index.js
-            ./crates/node/browser.js
-            ./crates/node/tailwindcss-oxide.wasi-browser.js
-            ./crates/node/tailwindcss-oxide.wasi.cjs
-            ./crates/node/wasi-worker-browser.mjs
-            ./crates/node/wasi-worker.mjs
-          key: ${{ runner.os }}-${{ matrix.target }}-oxide-${{ hashFiles('./crates/**/*') }}
+          package-manager-cache: false
 
       - name: Setup WASM target
         run: rustup target add wasm32-wasip1-threads
 
       - name: Install dependencies
-        run: pnpm --filter=!./playgrounds/* install
+        run: pnpm --filter=!./playgrounds/* install --frozen-lockfile
 
       - name: Download artifacts
-        uses: actions/download-artifact@v7
+        uses: actions/download-artifact@37930b1c2abaa49bbe596cd826c3c89aef350131 # v7
         with:
           path: ${{ env.OXIDE_LOCATION }}
 
@@ -305,30 +277,31 @@ jobs:
           echo "EOF" >> $GITHUB_ENV
 
       - name: Upload standalone artifacts
-        uses: actions/upload-artifact@v6
+        uses: actions/upload-artifact@b7c566a772e6b6bfb58ed0dc250532a479d7789f # v6
         with:
           name: tailwindcss-standalone
           path: packages/@tailwindcss-standalone/dist/
 
       - name: Upload npm package tarballs
-        uses: actions/upload-artifact@v6
+        uses: actions/upload-artifact@b7c566a772e6b6bfb58ed0dc250532a479d7789f # v6
         with:
           name: npm-package-tarballs
           path: dist/*.tgz
 
       - name: Prepare GitHub Release
-        uses: softprops/action-gh-release@v2
-        with:
-          draft: true
-          tag_name: ${{ env.TAG_NAME }}
-          body: |
-            ${{ env.RELEASE_NOTES }}
-          files: |
-            packages/@tailwindcss-standalone/dist/sha256sums.txt
-            packages/@tailwindcss-standalone/dist/tailwindcss-linux-arm64
-            packages/@tailwindcss-standalone/dist/tailwindcss-linux-arm64-musl
-            packages/@tailwindcss-standalone/dist/tailwindcss-linux-x64
-            packages/@tailwindcss-standalone/dist/tailwindcss-linux-x64-musl
-            packages/@tailwindcss-standalone/dist/tailwindcss-macos-arm64
-            packages/@tailwindcss-standalone/dist/tailwindcss-macos-x64
-            packages/@tailwindcss-standalone/dist/tailwindcss-windows-x64.exe
+        if: ${{ !inputs.dry_run }}
+        env:
+          GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+        run: |
+          gh release create "${TAG_NAME}" \
+              --draft \
+              --title "${TAG_NAME}" \
+              --notes "${RELEASE_NOTES}" \
+              packages/@tailwindcss-standalone/dist/sha256sums.txt \
+              packages/@tailwindcss-standalone/dist/tailwindcss-linux-arm64 \
+              packages/@tailwindcss-standalone/dist/tailwindcss-linux-arm64-musl \
+              packages/@tailwindcss-standalone/dist/tailwindcss-linux-x64 \
+              packages/@tailwindcss-standalone/dist/tailwindcss-linux-x64-musl \
+              packages/@tailwindcss-standalone/dist/tailwindcss-macos-arm64 \
+              packages/@tailwindcss-standalone/dist/tailwindcss-macos-x64 \
+              packages/@tailwindcss-standalone/dist/tailwindcss-windows-x64.exe
diff --git a/.github/workflows/release-insiders.yml b/.github/workflows/release-insiders.yml
deleted file mode 100644
index 4852cce7b..000000000
--- a/.github/workflows/release-insiders.yml
+++ /dev/null
@@ -1,322 +0,0 @@
-name: Release Insiders
-
-on:
-  push:
-    branches: [main]
-
-permissions:
-  contents: read
-
-env:
-  APP_NAME: tailwindcss-oxide
-  NODE_VERSION: 24
-  OXIDE_LOCATION: ./crates/node
-  RELEASE_CHANNEL: insiders
-
-concurrency:
-  group: ${{ github.workflow }}-${{ github.ref }}
-  cancel-in-progress: true
-
-jobs:
-  build:
-    strategy:
-      matrix:
-        include:
-          # Windows
-          - os: windows-latest
-            target: x86_64-pc-windows-msvc
-          - os: windows-latest
-            target: aarch64-pc-windows-msvc
-          # macOS
-          - os: macos-latest
-            target: x86_64-apple-darwin
-            strip: strip -x # Must use -x on macOS. This produces larger results on linux.
-          - os: macos-latest
-            target: aarch64-apple-darwin
-            page-size: 14
-            strip: strip -x # Must use -x on macOS. This produces larger results on linux.
-          # Android
-          - os: ubuntu-latest
-            target: aarch64-linux-android
-            strip: ${ANDROID_NDK_LATEST_HOME}/toolchains/llvm/prebuilt/linux-x86_64/bin/llvm-strip
-          - os: ubuntu-latest
-            target: armv7-linux-androideabi
-            strip: ${ANDROID_NDK_LATEST_HOME}/toolchains/llvm/prebuilt/linux-x86_64/bin/llvm-strip
-          # Linux
-          - os: ubuntu-latest
-            target: x86_64-unknown-linux-gnu
-            strip: strip
-            container:
-              image: ghcr.io/napi-rs/napi-rs/nodejs-rust:lts-debian
-          - os: ubuntu-latest
-            target: aarch64-unknown-linux-gnu
-            strip: llvm-strip
-            container:
-              image: ghcr.io/napi-rs/napi-rs/nodejs-rust:lts-debian-aarch64
-          - os: ubuntu-latest
-            target: armv7-unknown-linux-gnueabihf
-            strip: llvm-strip
-            container:
-              image: ghcr.io/napi-rs/napi-rs/nodejs-rust:lts-debian-zig
-          - os: ubuntu-latest
-            target: aarch64-unknown-linux-musl
-            strip: aarch64-linux-musl-strip
-            download: true
-            container:
-              image: ghcr.io/napi-rs/napi-rs/nodejs-rust:lts-alpine
-          - os: ubuntu-latest
-            target: x86_64-unknown-linux-musl
-            strip: strip
-            download: true
-            container:
-              image: ghcr.io/napi-rs/napi-rs/nodejs-rust:lts-alpine
-
-    name: Build ${{ matrix.target }} (oxide)
-    runs-on: ${{ matrix.os }}
-    container: ${{ matrix.container }}
-    timeout-minutes: 15
-    steps:
-      - uses: actions/checkout@v6
-      - uses: pnpm/action-setup@v4
-
-      - name: Use Node.js ${{ env.NODE_VERSION }}
-        uses: actions/setup-node@v6
-        with:
-          node-version: ${{ env.NODE_VERSION }}
-          cache: 'pnpm'
-
-      - name: Install gcc-arm-linux-gnueabihf
-        if: ${{ matrix.target == 'armv7-unknown-linux-gnueabihf' }}
-        run: |
-          sudo apt-get update
-          sudo apt-get install gcc-arm-linux-gnueabihf g++-arm-linux-gnueabihf -y
-
-      # Cargo already skips downloading dependencies if they already exist
-      - name: Cache cargo
-        uses: actions/cache@v5
-        with:
-          path: |
-            ~/.cargo/bin/
-            ~/.cargo/registry/index/
-            ~/.cargo/registry/cache/
-            ~/.cargo/git/db/
-            target/
-          key: ${{ runner.os }}-${{ matrix.target }}-cargo-${{ hashFiles('**/Cargo.lock') }}
-
-      # Cache the `oxide` Rust build
-      - name: Cache oxide build
-        uses: actions/cache@v5
-        with:
-          path: |
-            ./crates/node/*.node
-            ./crates/node/*.wasm
-            ./crates/node/index.d.ts
-            ./crates/node/index.js
-            ./crates/node/browser.js
-            ./crates/node/tailwindcss-oxide.wasi-browser.js
-            ./crates/node/tailwindcss-oxide.wasi.cjs
-            ./crates/node/wasi-worker-browser.mjs
-            ./crates/node/wasi-worker.mjs
-          key: ${{ runner.os }}-${{ matrix.target }}-oxide-${{ hashFiles('./crates/**/*') }}
-
-      - name: Install Node.JS
-        uses: actions/setup-node@v6
-        with:
-          node-version: ${{ env.NODE_VERSION }}
-
-      - name: Install Rust (Stable)
-        if: ${{ matrix.download }}
-        run: |
-          rustup default stable
-
-      - name: Setup rust target
-        run: rustup target add ${{ matrix.target }}
-
-      - name: Install dependencies
-        run: pnpm install --ignore-scripts --filter=!./playgrounds/*
-
-      - name: Build release
-        run: pnpm run --filter ${{ env.OXIDE_LOCATION }} build:platform --target=${{ matrix.target }}
-        env:
-          RUST_TARGET: ${{ matrix.target }}
-          JEMALLOC_SYS_WITH_LG_PAGE: ${{ matrix.page-size }}
-
-      - name: Strip debug symbols # https://github.com/rust-lang/rust/issues/46034
-        if: ${{ matrix.strip }}
-        run: ${{ matrix.strip }} ${{ env.OXIDE_LOCATION }}/*.node
-
-      - name: Upload artifacts
-        uses: actions/upload-artifact@v6
-        with:
-          name: bindings-${{ matrix.target }}
-          path: ${{ env.OXIDE_LOCATION }}/*.node
-
-  build-freebsd:
-    name: Build x86_64-unknown-freebsd (OXIDE)
-    runs-on: ubuntu-latest
-    timeout-minutes: 15
-    steps:
-      - uses: actions/checkout@v6
-      - name: Build FreeBSD
-        uses: cross-platform-actions/action@v0.25.0
-        env:
-          DEBUG: napi:*
-          RUSTUP_HOME: /usr/local/rustup
-          CARGO_HOME: /usr/local/cargo
-          RUSTUP_IO_THREADS: 1
-          RUST_TARGET: x86_64-unknown-freebsd
-        with:
-          operating_system: freebsd
-          version: '14.0'
-          memory: 13G
-          cpu_count: 3
-          environment_variables: 'DEBUG RUSTUP_IO_THREADS'
-          shell: bash
-          run: |
-            sudo pkg install -y -f curl node libnghttp2 npm
-            sudo npm install -g pnpm@9.6.0 --unsafe-perm=true
-            curl -sSf https://static.rust-lang.org/rustup/archive/1.27.1/x86_64-unknown-freebsd/rustup-init --output rustup-init
-            chmod +x rustup-init
-            ./rustup-init -y --profile minimal
-            source "$HOME/.cargo/env"
-            echo "~~~~ rustc --version ~~~~"
-            rustc --version
-            echo "~~~~ node -v ~~~~"
-            node -v
-            echo "~~~~ pnpm --version ~~~~"
-            pnpm --version
-            pnpm install --ignore-scripts --filter=!./playgrounds/* || true
-            pnpm run --filter ${{ env.OXIDE_LOCATION }} build:platform
-            strip -x ${{ env.OXIDE_LOCATION }}/*.node
-            ls -la ${{ env.OXIDE_LOCATION }}
-      - name: Upload artifacts
-        uses: actions/upload-artifact@v6
-        with:
-          name: bindings-x86_64-unknown-freebsd
-          path: ${{ env.OXIDE_LOCATION }}/*.node
-
-  release:
-    runs-on: macos-14
-    timeout-minutes: 15
-    name: Build and release Tailwind CSS insiders
-
-    permissions:
-      contents: write # for softprops/action-gh-release to create GitHub release
-      # https://docs.npmjs.com/generating-provenance-statements#publishing-packages-with-provenance-via-github-actions
-      id-token: write
-
-    needs:
-      - build
-      - build-freebsd
-
-    steps:
-      - uses: actions/checkout@v6
-        with:
-          fetch-depth: 20
-
-      - name: Resolve version
-        id: vars
-        run: |
-          echo "SHA_SHORT=$(git rev-parse --short HEAD)" >> $GITHUB_ENV
-
-      - uses: pnpm/action-setup@v4
-
-      - name: Use Node.js ${{ env.NODE_VERSION }}
-        uses: actions/setup-node@v6
-        with:
-          node-version: ${{ env.NODE_VERSION }}
-          cache: 'pnpm'
-          registry-url: 'https://registry.npmjs.org'
-
-      # Cargo already skips downloading dependencies if they already exist
-      - name: Cache cargo
-        uses: actions/cache@v5
-        with:
-          path: |
-            ~/.cargo/bin/
-            ~/.cargo/registry/index/
-            ~/.cargo/registry/cache/
-            ~/.cargo/git/db/
-            target/
-          key: ${{ runner.os }}-${{ matrix.target }}-cargo-${{ hashFiles('**/Cargo.lock') }}
-
-      # Cache the `oxide` Rust build
-      - name: Cache oxide build
-        uses: actions/cache@v5
-        with:
-          path: |
-            ./crates/node/*.node
-            ./crates/node/*.wasm
-            ./crates/node/index.d.ts
-            ./crates/node/index.js
-            ./crates/node/browser.js
-            ./crates/node/tailwindcss-oxide.wasi-browser.js
-            ./crates/node/tailwindcss-oxide.wasi.cjs
-            ./crates/node/wasi-worker-browser.mjs
-            ./crates/node/wasi-worker.mjs
-          key: ${{ runner.os }}-${{ matrix.target }}-oxide-${{ hashFiles('./crates/**/*') }}
-
-      - name: Setup WASM target
-        run: rustup target add wasm32-wasip1-threads
-
-      - name: Install dependencies
-        run: pnpm --filter=!./playgrounds/* install
-
-      - name: Download artifacts
-        uses: actions/download-artifact@v7
-        with:
-          path: ${{ env.OXIDE_LOCATION }}
-
-      - name: Move artifacts
-        run: |
-          cd ${{ env.OXIDE_LOCATION }}
-          cp bindings-x86_64-pc-windows-msvc/* ./npm/win32-x64-msvc/
-          cp bindings-aarch64-pc-windows-msvc/* ./npm/win32-arm64-msvc/
-          cp bindings-x86_64-apple-darwin/* ./npm/darwin-x64/
-          cp bindings-aarch64-apple-darwin/* ./npm/darwin-arm64/
-          cp bindings-aarch64-linux-android/* ./npm/android-arm64/
-          cp bindings-armv7-linux-androideabi/* ./npm/android-arm-eabi/
-          cp bindings-aarch64-unknown-linux-gnu/* ./npm/linux-arm64-gnu/
-          cp bindings-aarch64-unknown-linux-musl/* ./npm/linux-arm64-musl/
-          cp bindings-armv7-unknown-linux-gnueabihf/* ./npm/linux-arm-gnueabihf/
-          cp bindings-x86_64-unknown-linux-gnu/* ./npm/linux-x64-gnu/
-          cp bindings-x86_64-unknown-linux-musl/* ./npm/linux-x64-musl/
-          cp bindings-x86_64-unknown-freebsd/* ./npm/freebsd-x64/
-
-      - name: 'Version based on commit: 0.0.0-${{ env.RELEASE_CHANNEL }}.${{ env.SHA_SHORT }}'
-        run: pnpm run version-packages 0.0.0-${{ env.RELEASE_CHANNEL }}.${{ env.SHA_SHORT }}
-
-      - name: Build Tailwind CSS
-        run: pnpm run build
-
-      - name: Run pre-publish optimizations scripts
-        run: node ./scripts/pre-publish-optimizations.mjs
-
-      - name: Lock pre-release versions
-        run: node ./scripts/lock-pre-release-versions.mjs
-
-      - name: Upload npm package tarballs
-        uses: actions/upload-artifact@v6
-        with:
-          name: npm-package-tarballs
-          path: dist/*.tgz
-
-      - name: Publish
-        run: |
-          pnpm --recursive --filter="!@tailwindcss/oxide-wasm32-wasi" publish --tag ${{ env.RELEASE_CHANNEL }} --no-git-checks
-          # The wasm package needs a special npm config that isn't read when pnpm --recursive is used
-          pushd crates/node/npm/wasm32-wasi; pnpm publish --tag ${{ env.RELEASE_CHANNEL }} --no-git-checks; popd;
-        env:
-          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
-
-      - name: Trigger Tailwind Play update
-        uses: actions/github-script@v8
-        with:
-          github-token: ${{ secrets.TAILWIND_PLAY_TOKEN }}
-          script: |
-            await github.rest.actions.createWorkflowDispatch({
-              owner: 'tailwindlabs',
-              repo: 'upgrades',
-              ref: 'main',
-              workflow_id: 'upgrade-tailwindcss.yml'
-            })
diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml
index a872900ff..2c957d3af 100644
--- a/.github/workflows/release.yml
+++ b/.github/workflows/release.yml
@@ -1,9 +1,20 @@
 name: Release
 
 on:
+  push:
+    branches: [main]
   release:
     types: [published]
   workflow_dispatch:
+    inputs:
+      channel:
+        description: Release channel to publish
+        required: true
+        default: insiders
+        type: choice
+        options:
+          - insiders
+          - release
 
 permissions:
   contents: read
@@ -11,8 +22,13 @@ permissions:
 env:
   APP_NAME: tailwindcss-oxide
   NODE_VERSION: 24
+  PNPM_VERSION: '11.9.0'
   OXIDE_LOCATION: ./crates/node
 
+concurrency:
+  group: ${{ github.workflow }}-${{ github.event_name }}-${{ github.ref }}
+  cancel-in-progress: true
+
 jobs:
   build:
     strategy:
@@ -42,44 +58,40 @@ jobs:
           - os: ubuntu-latest
             target: x86_64-unknown-linux-gnu
             strip: strip
-            container:
-              image: ghcr.io/napi-rs/napi-rs/nodejs-rust:lts-debian
+            build-flags: --use-napi-cross
           - os: ubuntu-latest
             target: aarch64-unknown-linux-gnu
-            strip: llvm-strip
-            container:
-              image: ghcr.io/napi-rs/napi-rs/nodejs-rust:lts-debian-aarch64
+            strip: aarch64-linux-gnu-strip
+            build-flags: --use-napi-cross
           - os: ubuntu-latest
             target: armv7-unknown-linux-gnueabihf
-            strip: llvm-strip
-            container:
-              image: ghcr.io/napi-rs/napi-rs/nodejs-rust:lts-debian-zig
+            strip: arm-linux-gnueabihf-strip
+            build-flags: --use-napi-cross
           - os: ubuntu-latest
             target: aarch64-unknown-linux-musl
-            strip: aarch64-linux-musl-strip
-            download: true
-            container:
-              image: ghcr.io/napi-rs/napi-rs/nodejs-rust:lts-alpine
+            strip-zig: true
+            build-flags: -x
           - os: ubuntu-latest
             target: x86_64-unknown-linux-musl
             strip: strip
-            download: true
-            container:
-              image: ghcr.io/napi-rs/napi-rs/nodejs-rust:lts-alpine
+            build-flags: -x
 
     name: Build ${{ matrix.target }} (oxide)
     runs-on: ${{ matrix.os }}
-    container: ${{ matrix.container }}
     timeout-minutes: 15
     steps:
-      - uses: actions/checkout@v6
-      - uses: pnpm/action-setup@v4
+      - uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6
+        with:
+          persist-credentials: false
+      - uses: pnpm/action-setup@0ebf47130e4866e96fce0953f49152a61190b271 # v6.0.9
+        with:
+          version: ${{ env.PNPM_VERSION }}
 
       - name: Use Node.js ${{ env.NODE_VERSION }}
-        uses: actions/setup-node@v6
+        uses: actions/setup-node@48b55a011bda9f5d6aeb4c2d9c7362e8dae4041e # v6
         with:
           node-version: ${{ env.NODE_VERSION }}
-          cache: 'pnpm'
+          package-manager-cache: false
 
       - name: Install gcc-arm-linux-gnueabihf
         if: ${{ matrix.target == 'armv7-unknown-linux-gnueabihf' }}
@@ -87,62 +99,56 @@ jobs:
           sudo apt-get update
           sudo apt-get install gcc-arm-linux-gnueabihf g++-arm-linux-gnueabihf -y
 
-      # Cargo already skips downloading dependencies if they already exist
-      - name: Cache cargo
-        uses: actions/cache@v5
-        with:
-          path: |
-            ~/.cargo/bin/
-            ~/.cargo/registry/index/
-            ~/.cargo/registry/cache/
-            ~/.cargo/git/db/
-            target/
-          key: ${{ runner.os }}-${{ matrix.target }}-cargo-${{ hashFiles('**/Cargo.lock') }}
-
-      # Cache the `oxide` Rust build
-      - name: Cache oxide build
-        uses: actions/cache@v5
-        with:
-          path: |
-            ./crates/node/*.node
-            ./crates/node/*.wasm
-            ./crates/node/index.d.ts
-            ./crates/node/index.js
-            ./crates/node/browser.js
-            ./crates/node/tailwindcss-oxide.wasi-browser.js
-            ./crates/node/tailwindcss-oxide.wasi.cjs
-            ./crates/node/wasi-worker-browser.mjs
-            ./crates/node/wasi-worker.mjs
-          key: ${{ runner.os }}-${{ matrix.target }}-oxide-${{ hashFiles('./crates/**/*') }}
-
-      - name: Install Node.JS
-        uses: actions/setup-node@v6
-        with:
-          node-version: ${{ env.NODE_VERSION }}
-
-      - name: Install Rust (Stable)
-        if: ${{ matrix.download }}
+      - name: Install binutils-aarch64-linux-gnu
+        if: ${{ matrix.target == 'aarch64-unknown-linux-gnu' }}
         run: |
-          rustup default stable
+          sudo apt-get update
+          sudo apt-get install binutils-aarch64-linux-gnu -y
+
+      - uses: mlugg/setup-zig@d1434d08867e3ee9daa34448df10607b98908d29 # v2
+        if: ${{ contains(matrix.target, 'musl') }}
+        with:
+          version: 0.14.1
+          use-cache: false
+
+      - name: Install cargo-zigbuild
+        uses: taiki-e/install-action@65851e10cd6c377f11a60e600abc07cb08643468 # v2
+        if: ${{ contains(matrix.target, 'musl') }}
+        env:
+          GITHUB_TOKEN: ${{ github.token }}
+        with:
+          tool: cargo-zigbuild
 
       - name: Setup rust target
         run: rustup target add ${{ matrix.target }}
 
       - name: Install dependencies
-        run: pnpm install --ignore-scripts --filter=!./playgrounds/*
+        run: pnpm install --ignore-scripts --frozen-lockfile --filter=!./playgrounds/*
 
       - name: Build release
-        run: pnpm run --filter ${{ env.OXIDE_LOCATION }} build:platform --target=${{ matrix.target }}
+        run: pnpm run --filter ${{ env.OXIDE_LOCATION }} build:platform --target=${{ matrix.target }} ${{ matrix.build-flags }}
         env:
           RUST_TARGET: ${{ matrix.target }}
           JEMALLOC_SYS_WITH_LG_PAGE: ${{ matrix.page-size }}
 
       - name: Strip debug symbols # https://github.com/rust-lang/rust/issues/46034
-        if: ${{ matrix.strip }}
-        run: ${{ matrix.strip }} ${{ env.OXIDE_LOCATION }}/*.node
+        if: ${{ matrix.strip || matrix.strip-zig }}
+        env:
+          STRIP_COMMAND: ${{ matrix.strip }}
+          STRIP_ZIG: ${{ matrix.strip-zig }}
+        run: |
+          if [ "$STRIP_ZIG" = "true" ]; then
+            for file in ${{ env.OXIDE_LOCATION }}/*.node; do
+              zig objcopy --strip-all "$file" "$file.stripped"
+              mv "$file.stripped" "$file"
+            done
+            exit 0
+          fi
+
+          eval "$STRIP_COMMAND ${{ env.OXIDE_LOCATION }}/*.node"
 
       - name: Upload artifacts
-        uses: actions/upload-artifact@v6
+        uses: actions/upload-artifact@b7c566a772e6b6bfb58ed0dc250532a479d7789f # v6
         with:
           name: bindings-${{ matrix.target }}
           path: ${{ env.OXIDE_LOCATION }}/*.node
@@ -152,9 +158,11 @@ jobs:
     runs-on: ubuntu-latest
     timeout-minutes: 15
     steps:
-      - uses: actions/checkout@v6
+      - uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6
+        with:
+          persist-credentials: false
       - name: Build FreeBSD
-        uses: cross-platform-actions/action@v0.25.0
+        uses: cross-platform-actions/action@cdc9ee69ef84a5f2e59c9058335d9c57bcb4ac86 # v0.25.0
         env:
           DEBUG: napi:*
           RUSTUP_HOME: /usr/local/rustup
@@ -170,7 +178,7 @@ jobs:
           shell: bash
           run: |
             sudo pkg install -y -f curl node libnghttp2 npm
-            sudo npm install -g pnpm@9.6.0 --unsafe-perm=true
+            sudo npm install -g pnpm@${{ env.PNPM_VERSION }} --unsafe-perm=true
             curl -sSf https://static.rust-lang.org/rustup/archive/1.27.1/x86_64-unknown-freebsd/rustup-init --output rustup-init
             chmod +x rustup-init
             ./rustup-init -y --profile minimal
@@ -181,12 +189,12 @@ jobs:
             node -v
             echo "~~~~ pnpm --version ~~~~"
             pnpm --version
-            pnpm install --ignore-scripts --filter=!./playgrounds/* || true
+            pnpm install --ignore-scripts --frozen-lockfile --filter=!./playgrounds/* || true
             pnpm run --filter ${{ env.OXIDE_LOCATION }} build:platform
             strip -x ${{ env.OXIDE_LOCATION }}/*.node
             ls -la ${{ env.OXIDE_LOCATION }}
       - name: Upload artifacts
-        uses: actions/upload-artifact@v6
+        uses: actions/upload-artifact@b7c566a772e6b6bfb58ed0dc250532a479d7789f # v6
         with:
           name: bindings-x86_64-unknown-freebsd
           path: ${{ env.OXIDE_LOCATION }}/*.node
@@ -194,10 +202,10 @@ jobs:
   release:
     runs-on: macos-14
     timeout-minutes: 15
-    name: Build and release Tailwind CSS
+    name: Build and publish Tailwind CSS
 
     permissions:
-      contents: write # for softprops/action-gh-release to create GitHub release
+      contents: read
       # https://docs.npmjs.com/generating-provenance-statements#publishing-packages-with-provenance-via-github-actions
       id-token: write
 
@@ -206,55 +214,51 @@ jobs:
       - build-freebsd
 
     steps:
-      - uses: actions/checkout@v6
+      - uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6
         with:
           fetch-depth: 20
+          persist-credentials: false
 
-      - uses: pnpm/action-setup@v4
+      - uses: pnpm/action-setup@0ebf47130e4866e96fce0953f49152a61190b271 # v6.0.9
+        with:
+          version: ${{ env.PNPM_VERSION }}
 
       - name: Use Node.js ${{ env.NODE_VERSION }}
-        uses: actions/setup-node@v6
+        uses: actions/setup-node@48b55a011bda9f5d6aeb4c2d9c7362e8dae4041e # v6
         with:
           node-version: ${{ env.NODE_VERSION }}
-          cache: 'pnpm'
           registry-url: 'https://registry.npmjs.org'
+          package-manager-cache: false
 
-      # Cargo already skips downloading dependencies if they already exist
-      - name: Cache cargo
-        uses: actions/cache@v5
-        with:
-          path: |
-            ~/.cargo/bin/
-            ~/.cargo/registry/index/
-            ~/.cargo/registry/cache/
-            ~/.cargo/git/db/
-            target/
-          key: ${{ runner.os }}-${{ matrix.target }}-cargo-${{ hashFiles('**/Cargo.lock') }}
+      # npm trusted publishing validates the caller workflow filename, so all npm publishes live here.
+      # This workflow rebuilds the publish artifacts instead of depending on prepare-release.yml.
+      - name: Resolve release metadata
+        env:
+          INPUT_CHANNEL: ${{ github.event.inputs.channel || '' }}
+        run: |
+          if [[ "${{ github.event_name }}" == "release" || "$INPUT_CHANNEL" == "release" ]]; then
+            release_channel=$(node ./scripts/release-channel.js)
 
-      # Cache the `oxide` Rust build
-      - name: Cache oxide build
-        uses: actions/cache@v5
-        with:
-          path: |
-            ./crates/node/*.node
-            ./crates/node/*.wasm
-            ./crates/node/index.d.ts
-            ./crates/node/index.js
-            ./crates/node/browser.js
-            ./crates/node/tailwindcss-oxide.wasi-browser.js
-            ./crates/node/tailwindcss-oxide.wasi.cjs
-            ./crates/node/wasi-worker-browser.mjs
-            ./crates/node/wasi-worker.mjs
-          key: ${{ runner.os }}-${{ matrix.target }}-oxide-${{ hashFiles('./crates/**/*') }}
+            echo "RELEASE_KIND=release" >> $GITHUB_ENV
+            echo "RELEASE_CHANNEL=$release_channel" >> $GITHUB_ENV
+            echo "FEATURES_ENV=stable" >> $GITHUB_ENV
+          else
+            sha_short=$(git rev-parse --short HEAD)
+
+            echo "RELEASE_KIND=insiders" >> $GITHUB_ENV
+            echo "RELEASE_CHANNEL=insiders" >> $GITHUB_ENV
+            echo "SHA_SHORT=$sha_short" >> $GITHUB_ENV
+            echo "INSIDERS_VERSION=0.0.0-insiders.$sha_short" >> $GITHUB_ENV
+          fi
 
       - name: Setup WASM target
         run: rustup target add wasm32-wasip1-threads
 
       - name: Install dependencies
-        run: pnpm --filter=!./playgrounds/* install
+        run: pnpm --filter=!./playgrounds/* install --frozen-lockfile
 
       - name: Download artifacts
-        uses: actions/download-artifact@v7
+        uses: actions/download-artifact@37930b1c2abaa49bbe596cd826c3c89aef350131 # v7
         with:
           path: ${{ env.OXIDE_LOCATION }}
 
@@ -274,10 +278,19 @@ jobs:
           cp bindings-x86_64-unknown-linux-musl/* ./npm/linux-x64-musl/
           cp bindings-x86_64-unknown-freebsd/* ./npm/freebsd-x64/
 
+      - name: 'Version based on commit: ${{ env.INSIDERS_VERSION }}'
+        if: env.RELEASE_KIND == 'insiders'
+        run: pnpm run version-packages ${INSIDERS_VERSION}
+
       - name: Build Tailwind CSS
+        if: env.RELEASE_KIND == 'insiders'
+        run: pnpm run build
+
+      - name: Build Tailwind CSS
+        if: env.RELEASE_KIND == 'release'
         run: pnpm run build
         env:
-          FEATURES_ENV: stable
+          FEATURES_ENV: ${{ env.FEATURES_ENV }}
 
       - name: Run pre-publish optimizations scripts
         run: node ./scripts/pre-publish-optimizations.mjs
@@ -285,22 +298,20 @@ jobs:
       - name: Lock pre-release versions
         run: node ./scripts/lock-pre-release-versions.mjs
 
-      - name: Calculate environment variables
-        run: |
-          echo "RELEASE_CHANNEL=$(node ./scripts/release-channel.js)" >> $GITHUB_ENV
-          echo "TAILWINDCSS_VERSION=$(node -e 'console.log(require(`./packages/tailwindcss/package.json`).version);')" >> $GITHUB_ENV
+      - name: Upload npm package tarballs
+        uses: actions/upload-artifact@b7c566a772e6b6bfb58ed0dc250532a479d7789f # v6
+        with:
+          name: npm-package-tarballs
+          path: dist/*.tgz
 
       - name: Publish
         run: |
-          pnpm --recursive --filter="!@tailwindcss/oxide-wasm32-wasi" publish --tag ${{ env.RELEASE_CHANNEL }} --no-git-checks
+          pnpm --recursive --filter="!@tailwindcss/oxide-wasm32-wasi" publish --tag ${RELEASE_CHANNEL} --no-git-checks
           # The wasm package needs a special npm config that isn't read when pnpm --recursive is used
-          pushd crates/node/npm/wasm32-wasi; pnpm publish --tag ${{ env.RELEASE_CHANNEL }} --no-git-checks; popd;
-        env:
-          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
+          pushd crates/node/npm/wasm32-wasi; pnpm publish --tag ${RELEASE_CHANNEL} --no-git-checks --config.node-linker=hoisted; popd;
 
       - name: Trigger Tailwind Play update
-        if: env.RELEASE_CHANNEL == 'latest'
-        uses: actions/github-script@v8
+        uses: actions/github-script@ed597411d8f924073f98dfc5c65a23a2325f34cd # v8
         with:
           github-token: ${{ secrets.TAILWIND_PLAY_TOKEN }}
           script: |
@@ -310,3 +321,38 @@ jobs:
               ref: 'main',
               workflow_id: 'upgrade-tailwindcss.yml'
             })
+
+  notify:
+    if: ${{ always() && (needs.build.result == 'failure' || needs.build-freebsd.result == 'failure' || needs.release.result == 'failure') }}
+    needs:
+      - build
+      - build-freebsd
+      - release
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6
+        with:
+          persist-credentials: false
+
+      - name: Resolve release label
+        id: release
+        env:
+          INPUT_CHANNEL: ${{ github.event.inputs.channel || '' }}
+          RELEASE_TAG: ${{ github.event.release.tag_name || '' }}
+        run: |
+          if [[ "${{ github.event_name }}" == "release" ]]; then
+            tag_name="${RELEASE_TAG:-${GITHUB_REF_NAME}}"
+            echo "label=release ${tag_name}" >> $GITHUB_OUTPUT
+          elif [[ "$INPUT_CHANNEL" == "release" ]]; then
+            version=$(node -p "require('./packages/tailwindcss/package.json').version")
+            echo "label=release v${version}" >> $GITHUB_OUTPUT
+          else
+            sha_short=$(git rev-parse --short HEAD)
+            echo "label=insiders release 0.0.0-insiders.${sha_short}" >> $GITHUB_OUTPUT
+          fi
+
+      - name: Notify Discord
+        uses: discord-actions/message@5c7149c81a83146e5d01f142be1bf87a61831c4d # v2
+        with:
+          webhookUrl: ${{ secrets.DISCORD_WEBHOOK_URL }}
+          message: 'The [most recent ${{ github.workflow }} workflow](<${{ github.server_url }}/${{ github.repository }}/actions/runs/${{ github.run_id }}>) for `${{ steps.release.outputs.label }}` has failed.'
diff --git a/CHANGELOG.md b/CHANGELOG.md
index c9c103bc6..e5e6f6f89 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -9,7 +9,169 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Added
 
-- _Experimental_: Add `@container-size` utility ([#18901](https://github.com/tailwindlabs/tailwindcss/pull/18901))
+- Add `@tailwindcss/turbopack` package to run Tailwind CSS with Next.js ([20367](https://github.com/tailwindlabs/tailwindcss/pull/20367))
+
+### Fixed
+
+- Ensure watch mode detects changes to symlinked `@source` files whose real paths aren't otherwise scanned ([#20356](https://github.com/tailwindlabs/tailwindcss/pull/20356))
+- Ensure custom variants using `@scope` wrap the generated utilities instead of nesting inside them ([#20369](https://github.com/tailwindlabs/tailwindcss/pull/20369))
+- Fix flattening of `@scope` at-rules ([#20369](https://github.com/tailwindlabs/tailwindcss/pull/20369))
+- Fix standalone declarations in `@scope`, wrap them in `:where(:scope)` ([#20369](https://github.com/tailwindlabs/tailwindcss/pull/20369))
+- Always emit a space for empty fallback values in CSS variables (e.g. `var(--tw-blur,)` → `var(--tw-blur, )`) ([#20373](https://github.com/tailwindlabs/tailwindcss/pull/20373))
+- Canonicalization: convert arbitrary breakpoint and container query variants to named equivalents (e.g. `max-[64rem]` → `max-lg`) ([#20380](https://github.com/tailwindlabs/tailwindcss/pull/20380))
+- Prevent `@tailwindcss/vite` from crashing on every edit under Vite's experimental `bundledDev` mode ([#20379](https://github.com/tailwindlabs/tailwindcss/pull/20379))
+- Ensure `@tailwindcss/oxide` falls back to WASM on platforms without native bindings ([#20383](https://github.com/tailwindlabs/tailwindcss/pull/20383))
+- Detect classes in Ruby percent literals using angle brackets or custom delimiters (e.g. `%w<flex>`, `%w|flex|`), including in Slim and Haml templates ([#20387](https://github.com/tailwindlabs/tailwindcss/pull/20387))
+- Preserve whitespace in `--default(…)` values in custom functional utilities (e.g. `--default(box alphabetic)` no longer becomes `boxalphabetic`) ([#20392](https://github.com/tailwindlabs/tailwindcss/pull/20392))
+- Don't scan gitignored directories (e.g. `node_modules` and `.git`) when the project uses a safelist-style `.gitignore` (e.g. `/*` followed by `!/…` negations) ([#20397](https://github.com/tailwindlabs/tailwindcss/pull/20397))
+- Ensure root `theme('…')` namespace lookups in JavaScript plugins and config files return the full namespace object instead of the value of its `DEFAULT` key ([#20399](https://github.com/tailwindlabs/tailwindcss/pull/20399))
+- Skip ignored directories entirely when computing watch globs (`scanner.globs`), instead of walking their full contents on every rebuild ([#20408](https://github.com/tailwindlabs/tailwindcss/pull/20408))
+- Oxide: drop invalid UTF-8 candidates ([#20389](https://github.com/tailwindlabs/tailwindcss/pull/20389))
+- `@tailwindcss/vite` no longer forces a full page reload for external files (e.g.: `.php` files) ([#20414](https://github.com/tailwindlabs/tailwindcss/issues/20414))
+- Canonicalization: don't merge utilities that reference different theme variables set to CSS-wide keywords like `unset` ([#20417](https://github.com/tailwindlabs/tailwindcss/pull/20417))
+- Don't generate utilities when a modifier is used that would otherwise be silently ignored (e.g. `rounded-sm/[5]`, `shadow-sm/foo`, `stroke-2/50`) ([#20419](https://github.com/tailwindlabs/tailwindcss/pull/20419))
+- Only normalize top-level `and`, `or`, and `not` keywords in `supports-[…]` variants (e.g. `selector(a: not (.foo))` → `selector(a:not(.foo))`) ([#20420](https://github.com/tailwindlabs/tailwindcss/pull/20420))
+- Don't warn about Angular's `::ng-deep` and `:host-context()` when optimizing CSS ([#20434](https://github.com/tailwindlabs/tailwindcss/pull/20434))
+- Don't generate CSS for candidates containing an empty additional modifier (e.g. `bg-red-500/50/` and `group-hover/foo//bar:flex`) ([#20466](https://github.com/tailwindlabs/tailwindcss/pull/20466))
+- Sort `min-*`, `max-*`, and container query variants with decimal values numerically (e.g. `min-[40.25rem]` before `min-[40.5rem]`) ([#20512](https://github.com/tailwindlabs/tailwindcss/pull/20512))
+- Ensure CSS comments ending with `\*/` are closed correctly instead of swallowing the CSS that follows (e.g. `/* C:\temp\*/`) ([#20508](https://github.com/tailwindlabs/tailwindcss/pull/20508))
+- Improve style invalidation performance of `group-*` and `peer-*` variants ([#20513](https://github.com/tailwindlabs/tailwindcss/pull/20513))
+
+## [4.3.3] - 2026-07-16
+
+### Fixed
+
+- Support `--watch --poll[=ms]` in `@tailwindcss/cli` when filesystem events are unreliable or unavailable ([#20297](https://github.com/tailwindlabs/tailwindcss/pull/20297))
+- Canonicalization: match arbitrary hex colors against theme colors case-insensitively (e.g. `bg-[#fff]` and `bg-[#FFF]` → `bg-white`) ([#20298](https://github.com/tailwindlabs/tailwindcss/pull/20298))
+- Prevent Preflight from overriding Firefox's native `iframe:focus-visible` outline styles ([#20292](https://github.com/tailwindlabs/tailwindcss/pull/20292))
+- Ensure `theme('colors.foo')` in JS plugins resolves correctly when both `--color-foo` and `--color-foo-bar` exist ([#20299](https://github.com/tailwindlabs/tailwindcss/pull/20299))
+- Ensure fractional opacity modifiers work with named shadow sizes like `shadow-sm/12.5`, `text-shadow-sm/12.5`, `drop-shadow-sm/12.5`, and `inset-shadow-sm/12.5` ([#20302](https://github.com/tailwindlabs/tailwindcss/pull/20302))
+- Parse selectors like `[data-foo]div` as two selectors instead of one ([#20303](https://github.com/tailwindlabs/tailwindcss/pull/20303))
+- Ensure `@tailwindcss/postcss` rebuilds when a preprocessor like Sass changes the input CSS without changing the input file on disk ([#20310](https://github.com/tailwindlabs/tailwindcss/pull/20310))
+- Ensure CSS nesting is handled even when Lightning CSS isn't run, such as in `@tailwindcss/browser` and Tailwind Play ([#20124](https://github.com/tailwindlabs/tailwindcss/pull/20124))
+- Prevent achromatic theme colors from shifting hue when mixed in polar color spaces like `oklch` ([#20314](https://github.com/tailwindlabs/tailwindcss/pull/20314))
+- Ensure `--spacing(0)` is optimized to `0px` instead of `0` so it remains a `<length>` when used in `calc(…)` ([#20319](https://github.com/tailwindlabs/tailwindcss/pull/20319))
+- Load `@parcel/watcher` only when needed in `@tailwindcss/cli --watch` mode, so one-off builds and `--watch --poll` work when `@parcel/watcher` can't be loaded ([#20325](https://github.com/tailwindlabs/tailwindcss/pull/20325))
+- Use explicit platform fonts instead of `system-ui` and `ui-sans-serif` so CJK text respects the page's `lang` attribute on Windows ([#20318](https://github.com/tailwindlabs/tailwindcss/pull/20318))
+- Prevent `@tailwindcss/upgrade` from rewriting ignored files when run from a subdirectory ([#20329](https://github.com/tailwindlabs/tailwindcss/pull/20329))
+- Ensure earlier `@source` rules pointing to nested files are scanned when later `@source` rules point to files in parent folders ([#20335](https://github.com/tailwindlabs/tailwindcss/pull/20335))
+- Prevent `@tailwindcss/vite` from triggering full page reloads when scanned files are processed by Vite but haven't been loaded as modules yet ([#20336](https://github.com/tailwindlabs/tailwindcss/pull/20336))
+
+## [4.3.2] - 2026-06-26
+
+### Fixed
+
+- Support bare spacing values for `auto-rows-*` and `auto-cols-*` utilities (e.g. `auto-rows-12` and `auto-cols-16`) ([#20229](https://github.com/tailwindlabs/tailwindcss/pull/20229))
+- Prevent `@tailwindcss/cli` in `--watch` mode from crashing on Windows when `@source` points to a directory that doesn't exist ([#20242](https://github.com/tailwindlabs/tailwindcss/pull/20242))
+- Prevent `@tailwindcss/vite` from crashing in Deno v2.8.x when `context.parentURL` is not a valid URL ([#20245](https://github.com/tailwindlabs/tailwindcss/pull/20245))
+- Ensure `@tailwindcss/cli` in `--watch` mode rebuilds when the input CSS file changes in an ignored directory ([#20246](https://github.com/tailwindlabs/tailwindcss/pull/20246))
+- Allow `@variant` rules used in `addBase(…)` to use custom variants defined later ([#20247](https://github.com/tailwindlabs/tailwindcss/pull/20247))
+- Prevent `@tailwindcss/vite` from crashing during HMR when scanned files or directories are deleted ([#20259](https://github.com/tailwindlabs/tailwindcss/pull/20259))
+- Generate `font-size` instead of `color` declarations for `text-[--spacing(…)]` ([#20260](https://github.com/tailwindlabs/tailwindcss/pull/20260))
+- Prevent `@source` patterns from scanning unrelated sibling files and folders ([#20263](https://github.com/tailwindlabs/tailwindcss/pull/20263))
+- Extract class candidates adjacent to Template Toolkit delimiters like `%]…[%` in `.tt`, `.tt2`, and `.tx` files ([#20269](https://github.com/tailwindlabs/tailwindcss/pull/20269))
+- Extract class candidates from conditional Maud syntax like `p.text-black[condition]` ([#20269](https://github.com/tailwindlabs/tailwindcss/pull/20269))
+- Prevent `@position-try` rules from triggering unknown at-rule warnings when optimizing CSS ([#20277](https://github.com/tailwindlabs/tailwindcss/pull/20277))
+- Support class suggestions for named opacity modifiers from `--opacity` theme values ([#20287](https://github.com/tailwindlabs/tailwindcss/pull/20287))
+- Prevent type errors in `@tailwindcss/postcss` when used with newer PostCSS patch releases ([#20289](https://github.com/tailwindlabs/tailwindcss/pull/20289))
+
+## [4.3.1] - 2026-06-12
+
+### Added
+
+- Add `--silent` option to suppress output in `@tailwindcss/cli` ([#20100](https://github.com/tailwindlabs/tailwindcss/pull/20100))
+
+### Fixed
+
+- Remove deprecation warnings by using `Module#registerHooks` instead of `Module#register` on Node 26+ ([#20028](https://github.com/tailwindlabs/tailwindcss/pull/20028))
+- Canonicalization: don't crash when plugin utilities throw for unsupported values ([#20052](https://github.com/tailwindlabs/tailwindcss/pull/20052))
+- Allow `@apply` to be used with CSS mixins ([#19427](https://github.com/tailwindlabs/tailwindcss/pull/19427))
+- Ensure `not-*` correctly negates `@container` queries, including `style(…)` queries ([#20059](https://github.com/tailwindlabs/tailwindcss/pull/20059))
+- Ensure `drop-shadow-*` color utilities work with custom shadow values containing `calc(…)` ([#20080](https://github.com/tailwindlabs/tailwindcss/pull/20080))
+- Fix 'Sourcemap is likely to be incorrect' warnings when using `@tailwindcss/vite` ([#20103](https://github.com/tailwindlabs/tailwindcss/pull/20103))
+- Ensure `@tailwindcss/webpack` can be installed in Rspack projects without requiring `webpack` as a peer dependency ([#20027](https://github.com/tailwindlabs/tailwindcss/pull/20027))
+- Canonicalization: don't suggest invalid `calc(…)` expressions (e.g. `px-[calc(1rem+0px)]` → `px-[calc(1rem+0)]`) ([#20127](https://github.com/tailwindlabs/tailwindcss/pull/20127))
+- Canonicalization: avoid suggesting large spacing-scale values for arbitrary lengths (e.g. `left-[99999px]` → `left-[99999px]`, not `left-24999.75`) ([#20130](https://github.com/tailwindlabs/tailwindcss/pull/20130))
+- Ensure `@tailwindcss/cli` in `--watch` mode recovers when a tracked dependency is deleted and restored ([#20137](https://github.com/tailwindlabs/tailwindcss/pull/20137))
+- Ensure standalone `@tailwindcss/cli` binaries are ignored when scanning for class candidates ([#20139](https://github.com/tailwindlabs/tailwindcss/pull/20139))
+- Ensure class candidates are extracted from Twig `addClass(…)` and `removeClass(…)` calls ([#20198](https://github.com/tailwindlabs/tailwindcss/pull/20198))
+- Don't crash in the Ruby or Vue preprocessors when scanning files containing invalid UTF-8 bytes ([#19588](https://github.com/tailwindlabs/tailwindcss/pull/19588))
+- Allow `@variant` to be used inside `addBase` ([#19480](https://github.com/tailwindlabs/tailwindcss/pull/19480))
+- Ensure `@source` globs with symlinks are preserved ([#20203](https://github.com/tailwindlabs/tailwindcss/pull/20203))
+- Ensure later `@source` rules can re-include files excluded by earlier `@source not` rules ([#20203](https://github.com/tailwindlabs/tailwindcss/pull/20203))
+- Upgrade: don't migrate empty class rules to invalid `@utility` rules ([#20205](https://github.com/tailwindlabs/tailwindcss/pull/20205))
+- Ensure transitions between `inset-shadow-none` and other inset shadows work correctly ([#20208](https://github.com/tailwindlabs/tailwindcss/pull/20208))
+- Ensure explicitly referenced `@source` directories are scanned even when ignored by git ([#20214](https://github.com/tailwindlabs/tailwindcss/pull/20214))
+- Ensure `@source` globs ending in `**/*` preserve dynamic path segments to avoid scanning too many files ([#20217](https://github.com/tailwindlabs/tailwindcss/pull/20217))
+- Canonicalization: don't fold `calc(…)` divisions when the result would require high precision (e.g. `w-[calc(100%/3.5)]` → `w-[calc(100%/3.5)]`, not `w-[28.571428571428573%]`) ([#20221](https://github.com/tailwindlabs/tailwindcss/pull/20221))
+- Serve ESM type declarations to ESM importers of `@tailwindcss/postcss` ([#20228](https://github.com/tailwindlabs/tailwindcss/pull/20228))
+
+### Changed
+
+- Generate `0` instead of `calc(var(--spacing) * 0)` for spacing utilities like `m-0` and `left-0` ([#20196](https://github.com/tailwindlabs/tailwindcss/pull/20196))
+- Generate `var(--spacing)` instead of `calc(var(--spacing) * 1)` for spacing utilities like `m-1` and `left-1` ([#20196](https://github.com/tailwindlabs/tailwindcss/pull/20196))
+
+## [4.3.0] - 2026-05-08
+
+### Added
+
+- Add `@container-size` utility ([#18901](https://github.com/tailwindlabs/tailwindcss/pull/18901))
+- Add `scrollbar-{auto,thin,none}` utilities for `scrollbar-width`, and `scrollbar-thumb-*` / `scrollbar-track-*` color utilities for `scrollbar-color` ([#19981](https://github.com/tailwindlabs/tailwindcss/pull/19981), [#20019](https://github.com/tailwindlabs/tailwindcss/pull/20019))
+- Add `scrollbar-gutter-*` utilities ([#20018](https://github.com/tailwindlabs/tailwindcss/pull/20018))
+- Add `zoom-*` utilities ([#20020](https://github.com/tailwindlabs/tailwindcss/pull/20020))
+- Add `tab-*` utilities ([#20022](https://github.com/tailwindlabs/tailwindcss/pull/20022))
+- Allow using `@variant` with stacked variants (e.g. `@variant hover:focus { … }`) ([#19996](https://github.com/tailwindlabs/tailwindcss/pull/19996))
+- Allow using `@variant` with compound variants (e.g. `@variant hover, focus { … }`) ([#19996](https://github.com/tailwindlabs/tailwindcss/pull/19996))
+- Support `--default(…)` in `--value(…)` and `--modifier(…)` for functional `@utility` definitions ([#19989](https://github.com/tailwindlabs/tailwindcss/pull/19989))
+
+### Fixed
+
+- Ensure `@plugin` resolves package JavaScript entries instead of browser CSS entries when using `@tailwindcss/vite` ([#19949](https://github.com/tailwindlabs/tailwindcss/pull/19949))
+- Fix relative `@import` and `@plugin` paths resolving from the wrong directory when using `@tailwindcss/vite` ([#19965](https://github.com/tailwindlabs/tailwindcss/pull/19965))
+- Ensure CSS files containing `@variant` are processed by `@tailwindcss/vite` ([#19966](https://github.com/tailwindlabs/tailwindcss/pull/19966))
+- Resolve imports relative to `base` when `result.opts.from` is not provided when using `@tailwindcss/postcss` ([#19980](https://github.com/tailwindlabs/tailwindcss/pull/19980))
+- Canonicalization: preserve significant `_` whitespace in arbitrary values ([#19986](https://github.com/tailwindlabs/tailwindcss/pull/19986))
+- Canonicalization: add parentheses when removing whitespace from arbitrary values would hurt readability (e.g. `w-[calc(100%---spacing(60))]` → `w-[calc(100%-(--spacing(60)))]`) ([#19986](https://github.com/tailwindlabs/tailwindcss/pull/19986))
+- Canonicalization: preserve the original unit in arbitrary values instead of normalizing to base units (e.g. `-mt-[20in]` → `mt-[-20in]`, not `mt-[-1920px]`) ([#19988](https://github.com/tailwindlabs/tailwindcss/pull/19988))
+- Canonicalization: migrate arbitrary `:has()` variants from `[&:has(…)]` to `has-[…]` ([#19991](https://github.com/tailwindlabs/tailwindcss/pull/19991))
+- Upgrade: don’t migrate inline `style` attributes (e.g. `style="flex-grow: 1"` → `style="flex-grow: 1"`, not `style="grow: 1"`) ([#19918](https://github.com/tailwindlabs/tailwindcss/pull/19918))
+- Allow multiple `@utility` definitions with the same name but different value types ([#19777](https://github.com/tailwindlabs/tailwindcss/pull/19777))
+- Export missing `PluginWithConfig` type from `tailwindcss/plugin` to fix errors when inferring plugin config types ([#19707](https://github.com/tailwindlabs/tailwindcss/pull/19707))
+- Ensure `start` and `end` legacy utilities without values do not generate CSS ([#20003](https://github.com/tailwindlabs/tailwindcss/pull/20003))
+- Ensure `--value(…)` is required in functional `@utility` definitions ([#20005](https://github.com/tailwindlabs/tailwindcss/pull/20005))
+- Canonicalization: preserve required whitespace around operators in negated arbitrary values (e.g. `-left-[(var(--a)+var(--b))]`) ([#20011](https://github.com/tailwindlabs/tailwindcss/pull/20011))
+
+## [4.2.4] - 2026-04-21
+
+### Fixed
+
+- Ensure imports in `@import` and `@plugin` still resolve correctly when using Vite aliases in `@tailwindcss/vite` ([#19947](https://github.com/tailwindlabs/tailwindcss/pull/19947))
+
+## [4.2.3] - 2026-04-20
+
+### Fixed
+
+- Canonicalization: improve canonicalization for `tracking-*` utilities by preferring non-negative utilities (e.g. `-tracking-tighter` → `tracking-wider`) ([#19827](https://github.com/tailwindlabs/tailwindcss/pull/19827))
+- Fix crash due to invalid characters in candidate (exceeding valid unicode code point range) ([#19829](https://github.com/tailwindlabs/tailwindcss/pull/19829))
+- Ensure query params in imports are considered unique resources when using `@tailwindcss/webpack` ([#19723](https://github.com/tailwindlabs/tailwindcss/pull/19723))
+- Canonicalization: collapse arbitrary values into shorthand utilities (e.g. `px-[1.2rem] py-[1.2rem]` → `p-[1.2rem]`) ([#19837](https://github.com/tailwindlabs/tailwindcss/pull/19837))
+- Canonicalization: collapse `border-{t,b}-*` into `border-y-*`, `border-{l,r}-*` into `border-x-*`, and `border-{t,r,b,l}-*` into `border-*` ([#19842](https://github.com/tailwindlabs/tailwindcss/pull/19842))
+- Canonicalization: collapse `scroll-m{t,b}-*` into `scroll-my-*`, `scroll-m{l,r}-*` into `scroll-mx-*`, and `scroll-m{t,r,b,l}-*` into `scroll-m-*` ([#19842](https://github.com/tailwindlabs/tailwindcss/pull/19842))
+- Canonicalization: collapse `scroll-p{t,b}-*` into `scroll-py-*`, `scroll-p{l,r}-*` into `scroll-px-*`, and `scroll-p{t,r,b,l}-*` into `scroll-p-*` ([#19842](https://github.com/tailwindlabs/tailwindcss/pull/19842))
+- Canonicalization: collapse `overflow-{x,y}-*` into `overflow-*` ([#19842](https://github.com/tailwindlabs/tailwindcss/pull/19842))
+- Canonicalization: collapse `overscroll-{x,y}-*` into `overscroll-*` ([#19842](https://github.com/tailwindlabs/tailwindcss/pull/19842))
+- Read from `--placeholder-color` instead of `--background-color` for `placeholder-*` utilities ([#19843](https://github.com/tailwindlabs/tailwindcss/pull/19843))
+- Upgrade: ensure files are not emptied out when killing the upgrade process while it's running ([#19846](https://github.com/tailwindlabs/tailwindcss/pull/19846))
+- Upgrade: use `config.content` when migrating from Tailwind CSS v3 to Tailwind CSS v4 ([#19846](https://github.com/tailwindlabs/tailwindcss/pull/19846))
+- Upgrade: never migrate files that are ignored by git ([#19846](https://github.com/tailwindlabs/tailwindcss/pull/19846))
+- Add `.env` and `.env.*` to default ignored content files ([#19846](https://github.com/tailwindlabs/tailwindcss/pull/19846))
+- Canonicalization: migrate `overflow-ellipsis` into `text-ellipsis` ([#19849](https://github.com/tailwindlabs/tailwindcss/pull/19849))
+- Canonicalization: migrate `start-full` → `inset-s-full`, `start-auto` → `inset-s-auto`, `start-px` → `inset-s-px`, and `start-<number>` → `inset-s-<number>` as well as negative versions ([#19849](https://github.com/tailwindlabs/tailwindcss/pull/19849))
+- Canonicalization: migrate `end-full` → `inset-e-full`, `end-auto` → `inset-e-auto`, `end-px` → `inset-e-px`, and `end-<number>` → `inset-e-<number>` as well as negative versions ([#19849](https://github.com/tailwindlabs/tailwindcss/pull/19849))
+- Canonicalization: move the `-` sign inside the arbitrary value `-left-[9rem]` → `left-[-9rem]` ([#19858](https://github.com/tailwindlabs/tailwindcss/pull/19858))
+- Canonicalization: move the `-` sign outside the arbitrary value `ml-[calc(-1*var(--width))]` → `-ml-(--width)` ([#19858](https://github.com/tailwindlabs/tailwindcss/pull/19858))
+- Improve performance when scanning JSONL / NDJSON files ([#19862](https://github.com/tailwindlabs/tailwindcss/pull/19862))
+- Support `NODE_PATH` environment variable in standalone CLI ([#19617](https://github.com/tailwindlabs/tailwindcss/pull/19617))
 
 ## [4.2.2] - 2026-03-18
 
@@ -22,6 +184,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Add support for Vite 8 in `@tailwindcss/vite` ([#19790](https://github.com/tailwindlabs/tailwindcss/pull/19790))
 - Improve canonicalization for bare values exceeding default spacing scale suggestions (e.g. `w-1234 h-1234` → `size-1234`) ([#19809](https://github.com/tailwindlabs/tailwindcss/pull/19809))
 - Fix canonicalization resulting in empty list (e.g. `w-5 h-5 size-5` → `''` instead of `size-5`) ([#19812](https://github.com/tailwindlabs/tailwindcss/pull/19812))
+- Resolve tsconfig paths to allow for `@import '@/path/to/file';` when using `@tailwindcss/vite` ([#19803](https://github.com/tailwindlabs/tailwindcss/pull/19803))
 
 ## [4.2.1] - 2026-02-23
 
@@ -3960,7 +4123,13 @@ No release notes
 
 - Everything!
 
-[unreleased]: https://github.com/tailwindlabs/tailwindcss/compare/v4.2.2...HEAD
+[unreleased]: https://github.com/tailwindlabs/tailwindcss/compare/v4.3.3...HEAD
+[4.3.3]: https://github.com/tailwindlabs/tailwindcss/compare/v4.3.2...v4.3.3
+[4.3.2]: https://github.com/tailwindlabs/tailwindcss/compare/v4.3.1...v4.3.2
+[4.3.1]: https://github.com/tailwindlabs/tailwindcss/compare/v4.3.0...v4.3.1
+[4.3.0]: https://github.com/tailwindlabs/tailwindcss/compare/v4.2.4...v4.3.0
+[4.2.4]: https://github.com/tailwindlabs/tailwindcss/compare/v4.2.3...v4.2.4
+[4.2.3]: https://github.com/tailwindlabs/tailwindcss/compare/v4.2.2...v4.2.3
 [4.2.2]: https://github.com/tailwindlabs/tailwindcss/compare/v4.2.1...v4.2.2
 [4.2.1]: https://github.com/tailwindlabs/tailwindcss/compare/v4.2.0...v4.2.1
 [4.2.0]: https://github.com/tailwindlabs/tailwindcss/compare/v4.1.18...v4.2.0
diff --git a/Cargo.lock b/Cargo.lock
index 162cf37dd..73fd9e995 100644
--- a/Cargo.lock
+++ b/Cargo.lock
@@ -40,7 +40,7 @@ source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "531a9155a481e2ee699d4f98f43c0ca4ff8ee1bfd55c31e9e98fb29d2b176fe0"
 dependencies = [
  "memchr",
- "regex-automata 0.4.8",
+ "regex-automata 0.4.18",
  "serde",
 ]
 
@@ -60,10 +60,21 @@ dependencies = [
 ]
 
 [[package]]
-name = "convert_case"
-version = "0.8.0"
+name = "console"
+version = "0.16.4"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "baaaa0ecca5b51987b9423ccdc971514dd8b0bb7b4060b983d3664dad3f1f89f"
+checksum = "4fe5f465a4f6fee88fad41b85d990f84c835335e85b5d9e6e63e0d06d28cba7c"
+dependencies = [
+ "encode_unicode",
+ "libc",
+ "windows-sys 0.61.2",
+]
+
+[[package]]
+name = "convert_case"
+version = "0.11.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "affbf0190ed2caf063e3def54ff444b449371d55c58e513a95ab98eca50adb49"
 dependencies = [
  "unicode-segmentation",
 ]
@@ -104,19 +115,9 @@ checksum = "22ec99545bb0ed0ea7bb9b8e1e9122ea386ff8a48c0922e43f36d45ab09e0e80"
 
 [[package]]
 name = "ctor"
-version = "0.5.0"
+version = "1.0.12"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "67773048316103656a637612c4a62477603b777d91d9c62ff2290f9cde178fdb"
-dependencies = [
- "ctor-proc-macro",
- "dtor",
-]
-
-[[package]]
-name = "ctor-proc-macro"
-version = "0.0.6"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "e2931af7e13dc045d8e9d26afccc6fa115d64e115c9c84b1166288b46f6782c2"
+checksum = "2d83cb7e7a873830708d6b02a78cd36a592c6fa14bf267b68725103b85c0d77f"
 
 [[package]]
 name = "diff"
@@ -124,21 +125,6 @@ version = "0.1.13"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "56254986775e3233ffa9c4d7d3faaf6d36a2c09d30b20687e9f88bc8bafc16c8"
 
-[[package]]
-name = "dtor"
-version = "0.1.0"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "e58a0764cddb55ab28955347b45be00ade43d4d6f3ba4bf3dc354e4ec9432934"
-dependencies = [
- "dtor-proc-macro",
-]
-
-[[package]]
-name = "dtor-proc-macro"
-version = "0.0.6"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "f678cf4a922c215c63e0de95eb1ff08a958a81d47e485cf9da1e27bf6305cfa5"
-
 [[package]]
 name = "dunce"
 version = "1.0.5"
@@ -151,6 +137,12 @@ version = "1.8.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "7fcaabb2fef8c910e7f4c7ce9f67a1283a1715879a7c230ca9d6d1ae31f16d91"
 
+[[package]]
+name = "encode_unicode"
+version = "1.0.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "34aa73646ffb006b8f5147f3dc182bd4bcb190227ce861fc4a4844bf8e3cb2c0"
+
 [[package]]
 name = "errno"
 version = "0.3.9"
@@ -177,15 +169,103 @@ source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "e8c02a5121d4ea3eb16a80748c74f5549a5665e4c21333c6098f283870fbdea6"
 
 [[package]]
-name = "globset"
-version = "0.4.17"
+name = "futures"
+version = "0.3.32"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "eab69130804d941f8075cfd713bf8848a2c3b3f201a9457a11e6f87e1ab62305"
+checksum = "8b147ee9d1f6d097cef9ce628cd2ee62288d963e16fb287bd9286455b241382d"
+dependencies = [
+ "futures-channel",
+ "futures-core",
+ "futures-executor",
+ "futures-io",
+ "futures-sink",
+ "futures-task",
+ "futures-util",
+]
+
+[[package]]
+name = "futures-channel"
+version = "0.3.32"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "07bbe89c50d7a535e539b8c17bc0b49bdb77747034daa8087407d655f3f7cc1d"
+dependencies = [
+ "futures-core",
+ "futures-sink",
+]
+
+[[package]]
+name = "futures-core"
+version = "0.3.32"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "7e3450815272ef58cec6d564423f6e755e25379b217b0bc688e295ba24df6b1d"
+
+[[package]]
+name = "futures-executor"
+version = "0.3.32"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "baf29c38818342a3b26b5b923639e7b1f4a61fc5e76102d4b1981c6dc7a7579d"
+dependencies = [
+ "futures-core",
+ "futures-task",
+ "futures-util",
+]
+
+[[package]]
+name = "futures-io"
+version = "0.3.32"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "cecba35d7ad927e23624b22ad55235f2239cfa44fd10428eecbeba6d6a717718"
+
+[[package]]
+name = "futures-macro"
+version = "0.3.32"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "e835b70203e41293343137df5c0664546da5745f82ec9b84d40be8336958447b"
+dependencies = [
+ "proc-macro2",
+ "quote",
+ "syn",
+]
+
+[[package]]
+name = "futures-sink"
+version = "0.3.32"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "c39754e157331b013978ec91992bde1ac089843443c49cbc7f46150b0fad0893"
+
+[[package]]
+name = "futures-task"
+version = "0.3.32"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "037711b3d59c33004d3856fbdc83b99d4ff37a24768fa1be9ce3538a1cde4393"
+
+[[package]]
+name = "futures-util"
+version = "0.3.32"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "389ca41296e6190b48053de0321d02a77f32f8a5d2461dd38762c0593805c6d6"
+dependencies = [
+ "futures-channel",
+ "futures-core",
+ "futures-io",
+ "futures-macro",
+ "futures-sink",
+ "futures-task",
+ "memchr",
+ "pin-project-lite",
+ "slab",
+]
+
+[[package]]
+name = "globset"
+version = "0.4.20"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "07c34a9410465b45bd9787443bc7370f37735bad04b0f0cd57ff1a3186c98988"
 dependencies = [
  "aho-corasick",
  "bstr",
  "log",
- "regex-automata 0.4.8",
+ "regex-automata 0.4.18",
  "regex-syntax 0.8.5",
 ]
 
@@ -210,7 +290,7 @@ dependencies = [
  "globset",
  "log",
  "memchr",
- "regex-automata 0.4.8",
+ "regex-automata 0.4.18",
  "same-file",
  "walkdir",
  "winapi-util",
@@ -218,7 +298,7 @@ dependencies = [
 
 [[package]]
 name = "ignore"
-version = "0.4.24"
+version = "0.4.33"
 dependencies = [
  "bstr",
  "crossbeam-channel",
@@ -227,12 +307,24 @@ dependencies = [
  "globset",
  "log",
  "memchr",
- "regex-automata 0.4.8",
+ "regex-automata 0.4.18",
  "same-file",
  "walkdir",
  "winapi-util",
 ]
 
+[[package]]
+name = "insta"
+version = "1.48.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "86f0f8fee8c926415c58d6ae43a08523a26faccb2323f5e6b644fe7dd4ef6b82"
+dependencies = [
+ "console",
+ "once_cell",
+ "similar",
+ "tempfile",
+]
+
 [[package]]
 name = "itertools"
 version = "0.11.0"
@@ -256,12 +348,12 @@ checksum = "561d97a539a36e26a9a5fad1ea11a3039a67714694aaa379433e580854bc3dc5"
 
 [[package]]
 name = "libloading"
-version = "0.8.5"
+version = "0.9.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "4979f22fdb869068da03c9f7528f8297c6fd2606bc3a4affe42e6a823fdb8da4"
+checksum = "754ca22de805bb5744484a5b151a9e1a8e837d5dc232c2d7d8c2e3492edc8b60"
 dependencies = [
  "cfg-if",
- "windows-targets",
+ "windows-link",
 ]
 
 [[package]]
@@ -299,12 +391,13 @@ checksum = "68354c5c6bd36d73ff3feceb05efa59b6acb7626617f4962be322a825e61f79a"
 
 [[package]]
 name = "napi"
-version = "3.3.0"
+version = "3.11.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "f1b74e3dce5230795bb4d2821b941706dee733c7308752507254b0497f39cad7"
+checksum = "de33522036981030a75c231829566bc63414e08101a6f5ff4ac6cef19c8e0941"
 dependencies = [
  "bitflags",
  "ctor",
+ "futures",
  "napi-build",
  "napi-sys",
  "nohash-hasher",
@@ -313,15 +406,15 @@ dependencies = [
 
 [[package]]
 name = "napi-build"
-version = "2.2.3"
+version = "2.3.2"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "dcae8ad5609d14afb3a3b91dee88c757016261b151e9dcecabf1b2a31a6cab14"
+checksum = "c9c366d2c8c60b86fa632df75f745509b52f9128f91a6bad4c796e44abb505e1"
 
 [[package]]
 name = "napi-derive"
-version = "3.2.5"
+version = "3.6.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "7552d5a579b834614bbd496db5109f1b9f1c758f08224b0dee1e408333adf0d0"
+checksum = "a49c513341a61a16a10af6efcce46b30d0822ba2d4fb197d24d33dfc199c78d5"
 dependencies = [
  "convert_case",
  "ctor",
@@ -333,9 +426,9 @@ dependencies = [
 
 [[package]]
 name = "napi-derive-backend"
-version = "2.2.0"
+version = "6.1.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "5f6a81ac7486b70f2532a289603340862c06eea5a1e650c1ffeda2ce1238516a"
+checksum = "d60b5d773ad46c698c8cc2cd9fde0b283d39cbb7f71c04bee633c7bdba4423bd"
 dependencies = [
  "convert_case",
  "proc-macro2",
@@ -346,9 +439,9 @@ dependencies = [
 
 [[package]]
 name = "napi-sys"
-version = "3.0.0"
+version = "3.3.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "3e4e7135a8f97aa0f1509cce21a8a1f9dcec1b50d8dee006b48a5adb69a9d64d"
+checksum = "85fbf1fa9f1babfe396d74bbbf52b3643770243e8f5b0b46715d4caf7f0dfc9a"
 dependencies = [
  "libloading",
 ]
@@ -381,9 +474,9 @@ dependencies = [
 
 [[package]]
 name = "once_cell"
-version = "1.19.0"
+version = "1.21.4"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "3fdb12b2476b595f9358c5161aa467c2438859caa136dec86c26fdd2efe17b92"
+checksum = "9f7c3e4beb33f85d45ae3e3a1792185706c8e16d043238c593331cc7cd313b50"
 
 [[package]]
 name = "overload"
@@ -418,18 +511,18 @@ dependencies = [
 
 [[package]]
 name = "quote"
-version = "1.0.28"
+version = "1.0.45"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "1b9ab9c7eadfd8df19006f1cf1a4aed13540ed5cbc047010ece5826e10825488"
+checksum = "41f2619966050689382d2b44f664f4bc593e129785a36d6ee376ddf37259b924"
 dependencies = [
  "proc-macro2",
 ]
 
 [[package]]
 name = "rayon"
-version = "1.10.0"
+version = "1.12.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "b418a60154510ca1a002a752ca9714984e21e4241e804d32555251faf8b78ffa"
+checksum = "fb39b166781f92d482534ef4b4b1b2568f42613b53e5b6c160e24cfbfa30926d"
 dependencies = [
  "either",
  "rayon-core",
@@ -437,9 +530,9 @@ dependencies = [
 
 [[package]]
 name = "rayon-core"
-version = "1.12.1"
+version = "1.13.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "1465873a3dfdaa8ae7cb14b4383657caab0b3e8a0aa9ae8e04b044854c8dfce2"
+checksum = "22e18b0f0062d30d4230b2e85ff77fdfe4326feb054b9783a3460d8435c8ab91"
 dependencies = [
  "crossbeam-deque",
  "crossbeam-utils",
@@ -453,7 +546,7 @@ checksum = "b544ef1b4eac5dc2db33ea63606ae9ffcfac26c1416a2806ae0bf5f56b201191"
 dependencies = [
  "aho-corasick",
  "memchr",
- "regex-automata 0.4.8",
+ "regex-automata 0.4.18",
  "regex-syntax 0.8.5",
 ]
 
@@ -468,9 +561,9 @@ dependencies = [
 
 [[package]]
 name = "regex-automata"
-version = "0.4.8"
+version = "0.4.18"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "368758f23274712b504848e9d5a6f010445cc8b87a7cdb4d7cbee666c1288da3"
+checksum = "ad8553b9b26413251cbf30e620595c7a41b3887f03da04579c0e6b0d6a06b4b2"
 dependencies = [
  "aho-corasick",
  "memchr",
@@ -538,6 +631,18 @@ dependencies = [
  "lazy_static",
 ]
 
+[[package]]
+name = "similar"
+version = "2.7.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "bbbb5d9659141646ae647b42fe094daf6c6192d1620870b449d9557f748b2daa"
+
+[[package]]
+name = "slab"
+version = "0.4.12"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "0c790de23124f9ab44544d7ac05d60440adc586479ce501c1d6d7da3cd8c9cf5"
+
 [[package]]
 name = "smallvec"
 version = "1.10.0"
@@ -546,9 +651,9 @@ checksum = "a507befe795404456341dfab10cef66ead4c041f62b8b11bbb92bffe5d0953e0"
 
 [[package]]
 name = "syn"
-version = "2.0.18"
+version = "2.0.87"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "32d41677bcbe24c20c52e7c70b0d8db04134c5d1066bf98662e2871ad200ea3e"
+checksum = "25aa4ce346d03a6dcd68dd8b4010bcb74e54e62c90c573f394c46eae99aba32d"
 dependencies = [
  "proc-macro2",
  "quote",
@@ -576,7 +681,8 @@ dependencies = [
  "dunce",
  "fast-glob",
  "globwalk",
- "ignore 0.4.24",
+ "ignore 0.4.33",
+ "insta",
  "log",
  "pretty_assertions",
  "rayon",
@@ -738,6 +844,12 @@ version = "0.4.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "712e227841d057c1ee1cd2fb22fa7e5a5461ae8e48fa2ca79ec42cfc1931183f"
 
+[[package]]
+name = "windows-link"
+version = "0.2.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "f0805222e57f7521d6a62e36fa9163bc891acd422f971defe97d64e70d0a4fe5"
+
 [[package]]
 name = "windows-sys"
 version = "0.52.0"
@@ -756,6 +868,15 @@ dependencies = [
  "windows-targets",
 ]
 
+[[package]]
+name = "windows-sys"
+version = "0.61.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "ae137229bcbd6cdf0f7b80a31df61766145077ddf49416a728b02cb3921ff3fc"
+dependencies = [
+ "windows-link",
+]
+
 [[package]]
 name = "windows-targets"
 version = "0.52.6"
diff --git a/crates/ignore/Cargo.toml b/crates/ignore/Cargo.toml
index bd0352d15..d0af38ba9 100644
--- a/crates/ignore/Cargo.toml
+++ b/crates/ignore/Cargo.toml
@@ -1,6 +1,6 @@
 [package]
 name = "ignore"
-version = "0.4.24"  #:version
+version = "0.4.33"  #:version
 authors = ["Andrew Gallant <jamslam@gmail.com>"]
 description = """
 A fast library for efficiently matching ignore files such as `.gitignore`
@@ -12,7 +12,10 @@ repository = "https://github.com/BurntSushi/ripgrep/tree/master/crates/ignore"
 readme = "README.md"
 keywords = ["glob", "ignore", "gitignore", "pattern", "file"]
 license = "Unlicense OR MIT"
+# CHANGED: Use an explicit edition instead of `edition.workspace = true` since this crate is
+# vendored into the Tailwind CSS workspace.
 edition = "2024"
+rust-version = "1.88"
 
 [lib]
 name = "ignore"
@@ -20,15 +23,17 @@ bench = false
 
 [dependencies]
 crossbeam-deque = "0.8.3"
-globset = "0.4.17"
+# CHANGED: Use the published globset crate instead of a path dependency.
+globset = "0.4.20"
 log = "0.4.20"
 memchr = "2.6.3"
 same-file = "1.0.6"
 walkdir = "2.4.0"
+# CHANGED: Added `dunce` to canonicalize paths without UNC prefixes on Windows.
 dunce = "1.0.5"
 
 [dependencies.regex-automata]
-version = "0.4.0"
+version = "0.4.18"
 default-features = false
 features = ["std", "perf", "syntax", "meta", "nfa", "hybrid", "dfa-onepass"]
 
diff --git a/crates/ignore/examples/walk.rs b/crates/ignore/examples/walk.rs
index 9c627dc3e..c61d0515e 100644
--- a/crates/ignore/examples/walk.rs
+++ b/crates/ignore/examples/walk.rs
@@ -18,9 +18,7 @@ fn main() {
     let stdout_thread = std::thread::spawn(move || {
         let mut stdout = std::io::BufWriter::new(std::io::stdout());
         for dent in rx {
-            stdout
-                .write_all(&Vec::from_path_lossy(dent.path()))
-                .unwrap();
+            stdout.write_all(&Vec::from_path_lossy(dent.path())).unwrap();
             stdout.write_all(b"\n").unwrap();
         }
     });
diff --git a/crates/ignore/src/default_types.rs b/crates/ignore/src/default_types.rs
index 4e060b76a..6b5bba0f0 100644
--- a/crates/ignore/src/default_types.rs
+++ b/crates/ignore/src/default_types.rs
@@ -47,6 +47,7 @@ pub(crate) const DEFAULT_TYPES: &[(&[&str], &[&str])] = &[
     (&["cml"], &["*.cml"]),
     (&["coffeescript"], &["*.coffee"]),
     (&["config"], &["*.cfg", "*.conf", "*.config", "*.ini"]),
+    (&["container"], &["*Containerfile*", "*Dockerfile*"]),
     (&["coq"], &["*.v"]),
     (&["cpp"], &[
         "*.[ChH]", "*.cc", "*.[ch]pp", "*.[ch]xx", "*.hh",  "*.inl",
@@ -109,6 +110,7 @@ pub(crate) const DEFAULT_TYPES: &[(&[&str], &[&str])] = &[
     (&["hbs"], &["*.hbs"]),
     (&["hs"], &["*.hs", "*.lhs"]),
     (&["html"], &["*.htm", "*.html", "*.ejs"]),
+    (&["hurl"], &["*.hurl"]),
     (&["hy"], &["*.hy"]),
     (&["idris"], &["*.idr", "*.lidr"]),
     (&["janet"], &["*.janet"]),
@@ -185,6 +187,7 @@ pub(crate) const DEFAULT_TYPES: &[(&[&str], &[&str])] = &[
     (&["mint"], &["*.mint"]),
     (&["mk"], &["mkfile"]),
     (&["ml"], &["*.ml"]),
+    (&["mojo"], &["*.mojo"]),
     (&["motoko"], &["*.mo"]),
     (&["msbuild"], &[
         "*.csproj", "*.fsproj", "*.vcxproj", "*.proj", "*.props", "*.targets",
@@ -206,11 +209,12 @@ pub(crate) const DEFAULT_TYPES: &[(&[&str], &[&str])] = &[
         "*.php", "*.php3", "*.php4", "*.php5", "*.php7", "*.php8",
         "*.pht", "*.phtml"
     ]),
+    (&["pkgbuild"], &["PKGBUILD"]),
     (&["po"], &["*.po"]),
     (&["pod"], &["*.pod"]),
     (&["postscript"], &["*.eps", "*.ps"]),
     (&["prolog"], &["*.pl", "*.pro", "*.prolog", "*.P"]),
-    (&["protobuf"], &["*.proto"]),
+    (&["proto", "protobuf"], &["*.proto"]),
     (&["ps"], &["*.cdxml", "*.ps1", "*.ps1xml", "*.psd1", "*.psm1"]),
     (&["puppet"], &["*.epp", "*.erb", "*.pp", "*.rb"]),
     (&["purs"], &["*.purs"]),
@@ -231,6 +235,7 @@ pub(crate) const DEFAULT_TYPES: &[(&[&str], &[&str])] = &[
     (&["red"], &["*.r", "*.red", "*.reds"]),
     (&["rescript"], &["*.res", "*.resi"]),
     (&["robot"], &["*.robot"]),
+    (&["rocq"], &["*.v"]),
     (&["rst"], &["*.rst"]),
     (&["ruby"], &[
         // Idiomatic files
@@ -274,6 +279,7 @@ pub(crate) const DEFAULT_TYPES: &[(&[&str], &[&str])] = &[
     (&["spark"], &["*.spark"]),
     (&["spec"], &["*.spec"]),
     (&["sql"], &["*.sql", "*.psql"]),
+    (&["ssa"], &["*.ssa"]),
     (&["stylus"], &["*.styl"]),
     (&["sv"], &["*.v", "*.vg", "*.sv", "*.svh", "*.h"]),
     (&["svelte"], &["*.svelte", "*.svelte.ts"]),
@@ -359,4 +365,14 @@ mod tests {
             previous_name = name;
         }
     }
+
+    #[test]
+    fn default_types_aliases_are_sorted() {
+        for (aliases, _) in DEFAULT_TYPES.iter() {
+            assert!(
+                aliases.is_sorted(),
+                "this alias list is not sorted: {aliases:?}",
+            );
+        }
+    }
 }
diff --git a/crates/ignore/src/dir.rs b/crates/ignore/src/dir.rs
index 11b58f8ca..6bee724c8 100644
--- a/crates/ignore/src/dir.rs
+++ b/crates/ignore/src/dir.rs
@@ -16,7 +16,7 @@
 use std::{
     collections::HashMap,
     ffi::{OsStr, OsString},
-    fs::{File, FileType},
+    fs::{self, File, FileType},
     io::{self, BufRead},
     path::{Path, PathBuf},
     sync::{Arc, RwLock, Weak},
@@ -25,7 +25,7 @@ use std::{
 use crate::{
     gitignore::{self, Gitignore, GitignoreBuilder},
     overrides::{self, Override},
-    pathutil::{is_hidden, strip_prefix},
+    pathutil::{is_hidden_entry, strip_prefix},
     types::{self, Types},
     walk::DirEntry,
     {Error, Match, PartialErrorBuilder},
@@ -91,7 +91,25 @@ struct IgnoreOptions {
 
 /// Ignore is a matcher useful for recursively walking one or more directories.
 #[derive(Clone, Debug)]
-pub(crate) struct Ignore(Arc<IgnoreInner>);
+pub(crate) struct Ignore {
+    inner: Arc<IgnoreInner>,
+    // Parent matchers are cached independently of the path being walked, but
+    // matching them still needs the canonicalized path originally passed to
+    // `add_parents`. For example, when walking `/tmp/project/src`, parent
+    // matchers use `/tmp/project/src` to rewrite `/tmp/project/src/foo.py`
+    // before matching it against ignore files from `/tmp/project` and its
+    // ancestors.
+    //
+    // For ripgrep itself, this means that `rg pat src tests` must rewrite
+    // `src/foo` relative to `.../src`, and not whatever root was prepared
+    // first.
+    //
+    // See: https://github.com/BurntSushi/ripgrep/pull/3420
+    // See: https://github.com/BurntSushi/ripgrep/issues/3376
+    // See: https://github.com/BurntSushi/ripgrep/issues/3419
+    // See: https://github.com/BurntSushi/ripgrep/issues/3320
+    absolute_base: Option<Arc<PathBuf>>,
+}
 
 #[derive(Clone, Debug)]
 struct IgnoreInner {
@@ -112,12 +130,9 @@ struct IgnoreInner {
     ///
     /// If this is the root directory or there are otherwise no more
     /// directories to match, then `parent` is `None`.
-    parent: Option<Ignore>,
+    parent: Option<Arc<IgnoreInner>>,
     /// Whether this is an absolute parent matcher, as added by add_parent.
     is_absolute_parent: bool,
-    /// The absolute base path of this matcher. Populated only if parent
-    /// directories are added.
-    absolute_base: Option<Arc<PathBuf>>,
     /// The directory that gitignores should be interpreted relative to.
     ///
     /// Usually this is the directory containing the gitignore file. But in
@@ -152,34 +167,36 @@ struct IgnoreInner {
 
 impl Ignore {
     /// Return the directory path of this matcher.
+    #[cfg(test)]
     pub(crate) fn path(&self) -> &Path {
-        &self.0.dir
+        &self.inner.dir
     }
 
     /// Return true if this matcher has no parent.
     pub(crate) fn is_root(&self) -> bool {
-        self.0.parent.is_none()
-    }
-
-    /// Returns true if this matcher was added via the `add_parents` method.
-    pub(crate) fn is_absolute_parent(&self) -> bool {
-        self.0.is_absolute_parent
+        self.inner.parent.is_none()
     }
 
     /// Return this matcher's parent, if one exists.
     pub(crate) fn parent(&self) -> Option<Ignore> {
-        self.0.parent.clone()
+        self.inner.parent.as_ref().map(|parent| Ignore {
+            inner: parent.clone(),
+            absolute_base: self.absolute_base.clone(),
+        })
     }
 
     /// Create a new `Ignore` matcher with the parent directories of `dir`.
     ///
     /// Note that this can only be called on an `Ignore` matcher with no
     /// parents (i.e., `is_root` returns `true`). This will panic otherwise.
-    pub(crate) fn add_parents<P: AsRef<Path>>(&self, path: P) -> (Ignore, Option<Error>) {
-        if !self.0.opts.parents
-            && !self.0.opts.git_ignore
-            && !self.0.opts.git_exclude
-            && !self.0.opts.git_global
+    pub(crate) fn add_parents<P: AsRef<Path>>(
+        &self,
+        path: P,
+    ) -> (Ignore, Option<Error>) {
+        if !self.inner.opts.parents
+            && !self.inner.opts.git_ignore
+            && !self.inner.opts.git_exclude
+            && !self.inner.opts.git_global
         {
             // If we never need info from parent directories, then don't do
             // anything.
@@ -209,25 +226,34 @@ impl Ignore {
         let mut errs = PartialErrorBuilder::default();
         let mut ig = self.clone();
         for parent in parents.into_iter().rev() {
-            let mut compiled = self.0.compiled.write().unwrap();
+            let mut compiled = self.inner.compiled.write().unwrap();
             if let Some(weak) = compiled.get(parent.as_os_str()) {
                 if let Some(prebuilt) = weak.upgrade() {
-                    ig = Ignore(prebuilt);
+                    ig = Ignore {
+                        inner: prebuilt,
+                        absolute_base: Some(absolute_base.clone()),
+                    };
                     continue;
                 }
             }
             let (mut igtmp, err) = ig.add_child_path(parent);
             errs.maybe_push(err);
             igtmp.is_absolute_parent = true;
-            igtmp.absolute_base = Some(absolute_base.clone());
-            igtmp.has_git = if self.0.opts.require_git && self.0.opts.git_ignore {
-                parent.join(".git").exists() || parent.join(".jj").exists()
-            } else {
-                false
-            };
+            igtmp.has_git =
+                if self.inner.opts.require_git && self.inner.opts.git_ignore {
+                    parent.join(".git").exists() || parent.join(".jj").exists()
+                } else {
+                    false
+                };
             let ig_arc = Arc::new(igtmp);
-            ig = Ignore(ig_arc.clone());
-            compiled.insert(parent.as_os_str().to_os_string(), Arc::downgrade(&ig_arc));
+            ig = Ignore {
+                inner: ig_arc.clone(),
+                absolute_base: Some(absolute_base.clone()),
+            };
+            compiled.insert(
+                parent.as_os_str().to_os_string(),
+                Arc::downgrade(&ig_arc),
+            );
         }
         (ig, errs.into_error_option())
     }
@@ -240,60 +266,161 @@ impl Ignore {
     /// returned if it exists.
     ///
     /// Note that all I/O errors are completely ignored.
-    pub(crate) fn add_child<P: AsRef<Path>>(&self, dir: P) -> (Ignore, Option<Error>) {
+    pub(crate) fn add_child<P: AsRef<Path>>(
+        &self,
+        dir: P,
+    ) -> (Ignore, Option<Error>) {
         let (ig, err) = self.add_child_path(dir.as_ref());
-        (Ignore(Arc::new(ig)), err)
+        (
+            Ignore {
+                inner: Arc::new(ig),
+                absolute_base: self.absolute_base.clone(),
+            },
+            err,
+        )
+    }
+
+    /// Like add_child, but uses successful read_dir entries to reduce
+    /// probing when discovering ignore files.
+    pub(crate) fn add_child_with_entries<P: AsRef<Path>>(
+        &self,
+        dir: P,
+        entries: &[fs::DirEntry],
+    ) -> (Ignore, Option<Error>) {
+        let files = self.collect_ignore_files(entries);
+        let (ig, err) = self.add_child_path_with_found_ignore_files(
+            dir.as_ref(),
+            Some(&files),
+        );
+        (
+            Ignore {
+                inner: Arc::new(ig),
+                absolute_base: self.absolute_base.clone(),
+            },
+            err,
+        )
     }
 
     /// Like add_child, but takes a full path and returns an IgnoreInner.
     fn add_child_path(&self, dir: &Path) -> (IgnoreInner, Option<Error>) {
-        let git_type =
-            if self.0.opts.require_git && (self.0.opts.git_ignore || self.0.opts.git_exclude) {
-                dir.join(".git").metadata().ok().map(|md| md.file_type())
-            } else {
-                None
-            };
-        let has_git = git_type.is_some() || dir.join(".jj").exists();
+        self.add_child_path_with_found_ignore_files(dir, None)
+    }
+
+    fn collect_ignore_files(
+        &self,
+        entries: &[fs::DirEntry],
+    ) -> IgnoreFilesFound {
+        let custom_ignore_filenames = &self.inner.custom_ignore_filenames;
+        let mut files = IgnoreFilesFound {
+            has_ignore: false,
+            has_git_ignore: false,
+            has_git_dir: false,
+            has_jj_dir: false,
+            custom_ignore_files: vec![false; custom_ignore_filenames.len()],
+        };
+        for entry in entries {
+            let file_name = entry.file_name();
+            if file_name == OsStr::new(".ignore") {
+                files.has_ignore = true;
+            } else if file_name == OsStr::new(".gitignore") {
+                files.has_git_ignore = true;
+            } else if file_name == OsStr::new(".git") {
+                files.has_git_dir = true;
+            } else if file_name == OsStr::new(".jj") {
+                files.has_jj_dir = true;
+            }
+            for (i, name) in custom_ignore_filenames.iter().enumerate() {
+                if file_name == name.as_os_str() {
+                    files.custom_ignore_files[i] = true;
+                }
+            }
+        }
+        files
+    }
+
+    fn add_child_path_with_found_ignore_files(
+        &self,
+        dir: &Path,
+        ignore_files_list: Option<&IgnoreFilesFound>,
+    ) -> (IgnoreInner, Option<Error>) {
+        let check_vcs_dir = self.inner.opts.require_git
+            && (self.inner.opts.git_ignore || self.inner.opts.git_exclude);
+        let git_type = if check_vcs_dir
+            && ignore_files_list.is_none_or(|i| i.has_git_dir)
+        {
+            dir.join(".git").metadata().ok().map(|md| md.file_type())
+        } else {
+            None
+        };
+        let has_jj = check_vcs_dir
+            && ignore_files_list.is_none_or(|i| i.has_jj_dir)
+            && dir.join(".jj").exists();
+        let has_git = check_vcs_dir && (git_type.is_some() || has_jj);
 
         let mut errs = PartialErrorBuilder::default();
-        let custom_ig_matcher = if self.0.custom_ignore_filenames.is_empty() {
+        let custom_ig_matcher = if self
+            .inner
+            .custom_ignore_filenames
+            .is_empty()
+        {
             Gitignore::empty()
         } else {
-            let (m, err) = create_gitignore(
-                &dir,
-                &dir,
-                &self.0.custom_ignore_filenames,
-                self.0.opts.ignore_case_insensitive,
-            );
-            errs.maybe_push(err);
-            m
+            let custom_ignore_names: Vec<&OsString> = match ignore_files_list {
+                None => self.inner.custom_ignore_filenames.iter().collect(),
+                Some(m) => self
+                    .inner
+                    .custom_ignore_filenames
+                    .iter()
+                    .zip(m.custom_ignore_files.iter())
+                    .filter(|&(_, &matched)| matched)
+                    .map(|(name, _)| name)
+                    .collect(),
+            };
+            if custom_ignore_names.is_empty() {
+                Gitignore::empty()
+            } else {
+                let (m, err) = create_gitignore(
+                    &dir,
+                    &dir,
+                    &custom_ignore_names,
+                    self.inner.opts.ignore_case_insensitive,
+                );
+                errs.maybe_push(err);
+                m
+            }
         };
-        let ig_matcher = if !self.0.opts.ignore {
+        let ig_matcher = if !self.inner.opts.ignore
+            || !ignore_files_list.is_none_or(|i| i.has_ignore)
+        {
             Gitignore::empty()
         } else {
             let (m, err) = create_gitignore(
                 &dir,
                 &dir,
                 &[".ignore"],
-                self.0.opts.ignore_case_insensitive,
+                self.inner.opts.ignore_case_insensitive,
             );
             errs.maybe_push(err);
             m
         };
-        let gi_matcher = if !self.0.opts.git_ignore {
+        let gi_matcher = if !self.inner.opts.git_ignore
+            || !ignore_files_list.is_none_or(|i| i.has_git_ignore)
+        {
             Gitignore::empty()
         } else {
             let (m, err) = create_gitignore(
                 &dir,
                 &dir,
                 &[".gitignore"],
-                self.0.opts.ignore_case_insensitive,
+                self.inner.opts.ignore_case_insensitive,
             );
             errs.maybe_push(err);
             m
         };
 
-        let gi_exclude_matcher = if !self.0.opts.git_exclude {
+        let gi_exclude_matcher = if !self.inner.opts.git_exclude
+            || !ignore_files_list.is_none_or(|i| i.has_git_dir)
+        {
             Gitignore::empty()
         } else {
             match resolve_git_commondir(dir, git_type) {
@@ -302,7 +429,7 @@ impl Ignore {
                         &dir,
                         &git_dir,
                         &["info/exclude"],
-                        self.0.opts.ignore_case_insensitive,
+                        self.inner.opts.ignore_case_insensitive,
                     );
                     errs.maybe_push(err);
                     m
@@ -314,32 +441,38 @@ impl Ignore {
             }
         };
         let ig = IgnoreInner {
-            compiled: self.0.compiled.clone(),
+            compiled: self.inner.compiled.clone(),
             dir: dir.to_path_buf(),
-            overrides: self.0.overrides.clone(),
-            types: self.0.types.clone(),
-            parent: Some(self.clone()),
+            overrides: self.inner.overrides.clone(),
+            types: self.inner.types.clone(),
+            parent: Some(self.inner.clone()),
             is_absolute_parent: false,
-            absolute_base: self.0.absolute_base.clone(),
-            global_gitignores_relative_to: self.0.global_gitignores_relative_to.clone(),
-            explicit_ignores: self.0.explicit_ignores.clone(),
-            custom_ignore_filenames: self.0.custom_ignore_filenames.clone(),
+            global_gitignores_relative_to: self
+                .inner
+                .global_gitignores_relative_to
+                .clone(),
+            explicit_ignores: self.inner.explicit_ignores.clone(),
+            custom_ignore_filenames: self
+                .inner
+                .custom_ignore_filenames
+                .clone(),
             custom_ignore_matcher: custom_ig_matcher,
             ignore_matcher: ig_matcher,
-            git_global_matcher: self.0.git_global_matcher.clone(),
+            git_global_matcher: self.inner.git_global_matcher.clone(),
             git_ignore_matcher: gi_matcher,
             git_exclude_matcher: gi_exclude_matcher,
             has_git,
-            opts: self.0.opts,
+            opts: self.inner.opts,
         };
         (ig, errs.into_error_option())
     }
 
     /// Returns true if at least one type of ignore rule should be matched.
     fn has_any_ignore_rules(&self) -> bool {
-        let opts = self.0.opts;
-        let has_custom_ignore_files = !self.0.custom_ignore_filenames.is_empty();
-        let has_explicit_ignores = !self.0.explicit_ignores.is_empty();
+        let opts = self.inner.opts;
+        let has_custom_ignore_files =
+            !self.inner.custom_ignore_filenames.is_empty();
+        let has_explicit_ignores = !self.inner.explicit_ignores.is_empty();
 
         opts.ignore
             || opts.git_global
@@ -350,9 +483,12 @@ impl Ignore {
     }
 
     /// Like `matched`, but works with a directory entry instead.
-    pub(crate) fn matched_dir_entry<'a>(&'a self, dent: &DirEntry) -> Match<IgnoreMatch<'a>> {
+    pub(crate) fn matched_dir_entry<'a>(
+        &'a self,
+        dent: &DirEntry,
+    ) -> Match<IgnoreMatch<'a>> {
         let m = self.matched(dent.path(), dent.is_dir());
-        if m.is_none() && self.0.opts.hidden && is_hidden(dent) {
+        if m.is_none() && self.inner.opts.hidden && is_hidden_entry(dent) {
             return Match::Ignore(IgnoreMatch::hidden());
         }
         m
@@ -362,7 +498,11 @@ impl Ignore {
     /// ignored or not.
     ///
     /// The match contains information about its origin.
-    fn matched<'a, P: AsRef<Path>>(&'a self, path: P, is_dir: bool) -> Match<IgnoreMatch<'a>> {
+    pub(crate) fn matched<'a, P: AsRef<Path>>(
+        &'a self,
+        path: P,
+        is_dir: bool,
+    ) -> Match<IgnoreMatch<'a>> {
         // We need to be careful with our path. If it has a leading ./, then
         // strip it because it causes nothing but trouble.
         let mut path = path.as_ref();
@@ -373,9 +513,9 @@ impl Ignore {
         // regardless of whether it's whitelist/ignore, then we quit and
         // return that result immediately. Overrides have the highest
         // precedence.
-        if !self.0.overrides.is_empty() {
+        if !self.inner.overrides.is_empty() {
             let mat = self
-                .0
+                .inner
                 .overrides
                 .matched(path, is_dir)
                 .map(IgnoreMatch::overrides);
@@ -392,8 +532,9 @@ impl Ignore {
                 whitelisted = mat;
             }
         }
-        if !self.0.types.is_empty() {
-            let mat = self.0.types.matched(path, is_dir).map(IgnoreMatch::types);
+        if !self.inner.types.is_empty() {
+            let mat =
+                self.inner.types.matched(path, is_dir).map(IgnoreMatch::types);
             if mat.is_ignore() {
                 return mat;
             } else if mat.is_whitelist() {
@@ -405,98 +546,143 @@ impl Ignore {
 
     /// Performs matching only on the ignore files for this directory and
     /// all parent directories.
-    fn matched_ignore<'a>(&'a self, path: &Path, is_dir: bool) -> Match<IgnoreMatch<'a>> {
-        let (mut m_custom_ignore, mut m_ignore, mut m_gi, mut m_gi_exclude, mut m_explicit) = (
-            Match::None,
-            Match::None,
-            Match::None,
-            Match::None,
-            Match::None,
-        );
-        let any_git = !self.0.opts.require_git || self.parents().any(|ig| ig.0.has_git);
+    pub(crate) fn matched_ignore<'a>(
+        &'a self,
+        path: &Path,
+        is_dir: bool,
+    ) -> Match<IgnoreMatch<'a>> {
+        let (
+            mut m_custom_ignore,
+            mut m_ignore,
+            mut m_gi,
+            mut m_gi_exclude,
+            mut m_explicit,
+        ) = (Match::None, Match::None, Match::None, Match::None, Match::None);
+        let any_git = !self.inner.opts.require_git
+            || self.parents().any(|ig| ig.inner.has_git);
         let mut saw_git = false;
-        for ig in self.parents().take_while(|ig| !ig.0.is_absolute_parent) {
+        for ig in self.parents().take_while(|ig| !ig.inner.is_absolute_parent)
+        {
             if m_custom_ignore.is_none() {
-                m_custom_ignore =
-                    ig.0.custom_ignore_matcher
-                        .matched(path, is_dir)
-                        .map(IgnoreMatch::gitignore);
+                m_custom_ignore = ig
+                    .inner
+                    .custom_ignore_matcher
+                    .matched(path, is_dir)
+                    .map(IgnoreMatch::gitignore);
             }
             if m_ignore.is_none() {
-                m_ignore =
-                    ig.0.ignore_matcher
-                        .matched(path, is_dir)
-                        .map(IgnoreMatch::gitignore);
+                m_ignore = ig
+                    .inner
+                    .ignore_matcher
+                    .matched(path, is_dir)
+                    .map(IgnoreMatch::gitignore);
             }
             if any_git && !saw_git && m_gi.is_none() {
-                m_gi =
-                    ig.0.git_ignore_matcher
-                        .matched(path, is_dir)
-                        .map(IgnoreMatch::gitignore);
+                m_gi = ig
+                    .inner
+                    .git_ignore_matcher
+                    .matched(path, is_dir)
+                    .map(IgnoreMatch::gitignore);
             }
             if any_git && !saw_git && m_gi_exclude.is_none() {
-                m_gi_exclude =
-                    ig.0.git_exclude_matcher
-                        .matched(path, is_dir)
-                        .map(IgnoreMatch::gitignore);
+                m_gi_exclude = ig
+                    .inner
+                    .git_exclude_matcher
+                    .matched(path, is_dir)
+                    .map(IgnoreMatch::gitignore);
             }
-            saw_git = saw_git || ig.0.has_git;
+            saw_git = saw_git || ig.inner.has_git;
         }
-        if self.0.opts.parents {
-            if let Some(_) = self.absolute_base() {
-                // CHANGED: We removed a code path that rewrote the `path` to be relative to
-                // `self.absolute_base()` because it assumed that the every path is inside the base
-                // which is not the case for us as we use `WalkBuilder#add` to add roots outside of the
-                // base.
-                for ig in self.parents().skip_while(|ig| !ig.0.is_absolute_parent) {
+        if self.inner.opts.parents {
+            if let Some(abs_parent_path) = self.absolute_base() {
+                // What we want to do here is take the absolute base path of
+                // this directory and join it with the path we're searching.
+                // The main issue we want to avoid is accidentally duplicating
+                // directory components, so we try to strip any common prefix
+                // off of `path`. Overall, this seems a little ham-fisted, but
+                // it does fix a nasty bug. It should do fine until we overhaul
+                // this crate.
+                let path = abs_parent_path.join(
+                    self.parents()
+                        .take_while(|ig| !ig.inner.is_absolute_parent)
+                        .last()
+                        .map_or(path, |ig| {
+                            // This is a weird special case when ripgrep users
+                            // search with just a `.`, as some tools do
+                            // automatically (like consult). In this case, if
+                            // we don't bail out now, the code below will strip
+                            // a leading `.` from `path`, which might mangle
+                            // a hidden file name!
+                            if ig.inner.dir.as_path() == Path::new(".") {
+                                return path;
+                            }
+                            let without_dot_slash = strip_if_is_prefix(
+                                "./",
+                                ig.inner.dir.as_path(),
+                            );
+                            let relative_base =
+                                strip_if_is_prefix(without_dot_slash, path);
+                            strip_if_is_prefix("/", relative_base)
+                        }),
+                );
+
+                for ig in self
+                    .parents()
+                    .skip_while(|ig| !ig.inner.is_absolute_parent)
+                {
                     if m_custom_ignore.is_none() {
-                        m_custom_ignore =
-                            ig.0.custom_ignore_matcher
-                                .matched(&path, is_dir)
-                                .map(IgnoreMatch::gitignore);
+                        m_custom_ignore = ig
+                            .inner
+                            .custom_ignore_matcher
+                            .matched(&path, is_dir)
+                            .map(IgnoreMatch::gitignore);
                     }
                     if m_ignore.is_none() {
-                        m_ignore =
-                            ig.0.ignore_matcher
-                                .matched(&path, is_dir)
-                                .map(IgnoreMatch::gitignore);
+                        m_ignore = ig
+                            .inner
+                            .ignore_matcher
+                            .matched(&path, is_dir)
+                            .map(IgnoreMatch::gitignore);
                     }
                     if any_git && !saw_git && m_gi.is_none() {
-                        m_gi =
-                            ig.0.git_ignore_matcher
-                                .matched(&path, is_dir)
-                                .map(IgnoreMatch::gitignore);
+                        m_gi = ig
+                            .inner
+                            .git_ignore_matcher
+                            .matched(&path, is_dir)
+                            .map(IgnoreMatch::gitignore);
                     }
                     if any_git && !saw_git && m_gi_exclude.is_none() {
-                        m_gi_exclude =
-                            ig.0.git_exclude_matcher
-                                .matched(&path, is_dir)
-                                .map(IgnoreMatch::gitignore);
+                        m_gi_exclude = ig
+                            .inner
+                            .git_exclude_matcher
+                            .matched(&path, is_dir)
+                            .map(IgnoreMatch::gitignore);
                     }
-                    saw_git = saw_git || ig.0.has_git;
+                    saw_git = saw_git || ig.inner.has_git;
                 }
             }
         }
-        for gi in self.0.explicit_ignores.iter().rev() {
-            // CHANGED: We need to make sure that the explicit gitignore rules apply to the path
-            //
-            //          path      = Is the current file/folder we are traversing
-            //          gi.path() = Is the path of the custom gitignore file
-            //
-            //  E.g.: If we have a custom rule for `/src/utils` with `**/*`, and we are looking at
-            //        just `/src`, then the `**/*` rules do not apply to this folder, so we can
-            //        ignore the current custom gitignore file.
-            //
-            if !path.starts_with(gi.path()) {
-                continue;
-            }
+        for gi in self.inner.explicit_ignores.iter().rev() {
             if !m_explicit.is_none() {
                 break;
             }
+            // CHANGED: We need to make sure that the explicit gitignore rules
+            // apply to the path
+            //
+            //     path      = Is the current file/folder we are traversing
+            //     gi.path() = Is the path of the custom gitignore file
+            //
+            // E.g.: If we have a custom rule for `/src/utils` with `**/*`, and
+            //       we are looking at just `/src`, then the `**/*` rules do
+            //       not apply to this folder, so we can ignore the current
+            //       custom gitignore file.
+            if !path.starts_with(gi.path()) {
+                continue;
+            }
             m_explicit = gi.matched(&path, is_dir).map(IgnoreMatch::gitignore);
         }
         let m_global = if any_git {
-            self.0
+            self.inner
                 .git_global_matcher
                 .matched(&path, is_dir)
                 .map(IgnoreMatch::gitignore)
@@ -504,59 +690,90 @@ impl Ignore {
             Match::None
         };
 
-        // CHANGED: We added logic to configure an order in which the ignore files are respected and
-        // allowed a whitelist in a later file to overrule a block on an earlier file.
+        // CHANGED: We added logic to configure an order in which the ignore
+        // files are respected. Explicitly added ignores (via
+        // `WalkBuilder::add_gitignore`) take precedence over all ignore files
+        // found on disk, and the first source with a definitive answer wins.
         let order = [
             // Manually added ignores
-            &m_explicit,
+            m_explicit,
             // .custom-ignore
-            &m_custom_ignore,
+            m_custom_ignore,
             // .ignore
-            &m_ignore,
+            m_ignore,
             // .gitignore
-            &m_gi,
+            m_gi,
             // .git/info/exclude
-            &m_gi_exclude,
+            m_gi_exclude,
             // Global gitignore
-            &m_global,
+            m_global,
         ];
-
         for check in order.into_iter() {
-            if check.is_none() {
-                continue;
+            if !check.is_none() {
+                return check;
             }
-
-            return check.clone();
         }
-
-        m_explicit
+        Match::None
     }
 
     /// Returns an iterator over parent ignore matchers, including this one.
     pub(crate) fn parents(&self) -> Parents<'_> {
-        Parents(Some(self))
+        Parents(Some(IgnoreRef { inner: &self.inner }))
     }
 
     /// Returns the first absolute path of the first absolute parent, if
     /// one exists.
     fn absolute_base(&self) -> Option<&Path> {
-        self.0.absolute_base.as_ref().map(|p| &***p)
+        self.absolute_base.as_ref().map(|p| &***p)
+    }
+}
+
+/// State for tracking what kinds of files ripgrep is interested in for a
+/// given directory.
+///
+/// This is computed over the entire set of files in a directory instead of
+/// trying to stat each file individually. If a file is present, it's only then
+/// that we stat it for more information, instead of relying on the stat to
+/// determine its existence.
+#[derive(Debug)]
+struct IgnoreFilesFound {
+    has_ignore: bool,
+    has_git_ignore: bool,
+    has_git_dir: bool,
+    has_jj_dir: bool,
+    custom_ignore_files: Vec<bool>,
+}
+
+#[derive(Clone, Copy)]
+pub(crate) struct IgnoreRef<'a> {
+    inner: &'a IgnoreInner,
+}
+
+impl IgnoreRef<'_> {
+    pub(crate) fn path(&self) -> &Path {
+        &self.inner.dir
+    }
+
+    pub(crate) fn is_absolute_parent(&self) -> bool {
+        self.inner.is_absolute_parent
     }
 }
 
 /// An iterator over all parents of an ignore matcher, including itself.
-///
-/// The lifetime `'a` refers to the lifetime of the initial `Ignore` matcher.
-pub(crate) struct Parents<'a>(Option<&'a Ignore>);
+pub(crate) struct Parents<'a>(Option<IgnoreRef<'a>>);
 
 impl<'a> Iterator for Parents<'a> {
-    type Item = &'a Ignore;
+    type Item = IgnoreRef<'a>;
 
-    fn next(&mut self) -> Option<&'a Ignore> {
+    fn next(&mut self) -> Option<IgnoreRef<'a>> {
         match self.0.take() {
             None => None,
             Some(ig) => {
-                self.0 = ig.0.parent.as_ref();
+                self.0 = ig
+                    .inner
+                    .parent
+                    .as_deref()
+                    .map(|inner| IgnoreRef { inner });
                 Some(ig)
             }
         }
@@ -645,33 +862,42 @@ impl IgnoreBuilder {
             }
             gi
         } else {
-            log::debug!("ignoring global gitignore file because CWD is not known");
+            log::debug!(
+                "ignoring global gitignore file because CWD is not known"
+            );
             Gitignore::empty()
         };
 
-        Ignore(Arc::new(IgnoreInner {
-            compiled: Arc::new(RwLock::new(HashMap::new())),
-            dir: self.dir.clone(),
-            overrides: self.overrides.clone(),
-            types: self.types.clone(),
-            parent: None,
-            is_absolute_parent: true,
+        Ignore {
+            inner: Arc::new(IgnoreInner {
+                compiled: Arc::new(RwLock::new(HashMap::new())),
+                dir: self.dir.clone(),
+                overrides: self.overrides.clone(),
+                types: self.types.clone(),
+                parent: None,
+                is_absolute_parent: true,
+                global_gitignores_relative_to,
+                explicit_ignores: Arc::new(self.explicit_ignores.clone()),
+                custom_ignore_filenames: Arc::new(
+                    self.custom_ignore_filenames.clone(),
+                ),
+                custom_ignore_matcher: Gitignore::empty(),
+                ignore_matcher: Gitignore::empty(),
+                git_global_matcher: Arc::new(git_global_matcher),
+                git_ignore_matcher: Gitignore::empty(),
+                git_exclude_matcher: Gitignore::empty(),
+                has_git: false,
+                opts: self.opts,
+            }),
             absolute_base: None,
-            global_gitignores_relative_to,
-            explicit_ignores: Arc::new(self.explicit_ignores.clone()),
-            custom_ignore_filenames: Arc::new(self.custom_ignore_filenames.clone()),
-            custom_ignore_matcher: Gitignore::empty(),
-            ignore_matcher: Gitignore::empty(),
-            git_global_matcher: Arc::new(git_global_matcher),
-            git_ignore_matcher: Gitignore::empty(),
-            git_exclude_matcher: Gitignore::empty(),
-            has_git: false,
-            opts: self.opts,
-        }))
+        }
     }
 
     /// Set the current directory used for matching global gitignores.
-    pub(crate) fn current_dir(&mut self, cwd: impl Into<PathBuf>) -> &mut IgnoreBuilder {
+    pub(crate) fn current_dir(
+        &mut self,
+        cwd: impl Into<PathBuf>,
+    ) -> &mut IgnoreBuilder {
         self.global_gitignores_relative_to = Some(cwd.into());
         self
     }
@@ -681,7 +907,10 @@ impl IgnoreBuilder {
     /// By default, no override matcher is used.
     ///
     /// This overrides any previous setting.
-    pub(crate) fn overrides(&mut self, overrides: Override) -> &mut IgnoreBuilder {
+    pub(crate) fn overrides(
+        &mut self,
+        overrides: Override,
+    ) -> &mut IgnoreBuilder {
         self.overrides = Arc::new(overrides);
         self
     }
@@ -712,8 +941,7 @@ impl IgnoreBuilder {
         &mut self,
         file_name: S,
     ) -> &mut IgnoreBuilder {
-        self.custom_ignore_filenames
-            .push(file_name.as_ref().to_os_string());
+        self.custom_ignore_filenames.push(file_name.as_ref().to_os_string());
         self
     }
 
@@ -725,6 +953,11 @@ impl IgnoreBuilder {
         self
     }
 
+    /// Whether ignoring hidden files is enabled or not.
+    pub(crate) fn is_hidden(&self) -> bool {
+        self.opts.hidden
+    }
+
     /// Enables reading `.ignore` files.
     ///
     /// `.ignore` files have the same semantics as `gitignore` files and are
@@ -795,7 +1028,10 @@ impl IgnoreBuilder {
     /// Process ignore files case insensitively
     ///
     /// This is disabled by default.
-    pub(crate) fn ignore_case_insensitive(&mut self, yes: bool) -> &mut IgnoreBuilder {
+    pub(crate) fn ignore_case_insensitive(
+        &mut self,
+        yes: bool,
+    ) -> &mut IgnoreBuilder {
         self.opts.ignore_case_insensitive = yes;
         self
     }
@@ -854,7 +1090,10 @@ pub(crate) fn create_gitignore<T: AsRef<OsStr>>(
 /// them when multiple repositories are searched.
 ///
 /// Some I/O errors are ignored.
-fn resolve_git_commondir(dir: &Path, git_type: Option<FileType>) -> Result<PathBuf, Option<Error>> {
+fn resolve_git_commondir(
+    dir: &Path,
+    git_type: Option<FileType>,
+) -> Result<PathBuf, Option<Error>> {
     let git_dir_path = || dir.join(".git");
     let git_dir = git_dir_path();
     if !git_type.map_or(false, |ft| ft.is_file()) {
@@ -899,15 +1138,20 @@ fn resolve_git_commondir(dir: &Path, git_type: Option<FileType>) -> Result<PathB
 
 /// Strips `prefix` from `path` if it's a prefix, otherwise returns `path`
 /// unchanged.
-fn strip_if_is_prefix<'a, P: AsRef<Path> + ?Sized>(prefix: &'a P, path: &'a Path) -> &'a Path {
+fn strip_if_is_prefix<'a, P: AsRef<Path> + ?Sized>(
+    prefix: &'a P,
+    path: &'a Path,
+) -> &'a Path {
     strip_prefix(prefix, path).map_or(path, |p| p)
 }
 
 #[cfg(test)]
 mod tests {
-    use std::{io::Write, path::Path};
+    use std::{io::Write, path::Path, sync::Arc};
 
-    use crate::{Error, dir::IgnoreBuilder, gitignore::Gitignore, tests::TempDir};
+    use crate::{
+        Error, dir::IgnoreBuilder, gitignore::Gitignore, tests::TempDir,
+    };
 
     fn wfile<P: AsRef<Path>>(path: P, contents: &str) {
         let mut file = std::fs::File::create(path).unwrap();
@@ -936,11 +1180,11 @@ mod tests {
 
         let (gi, err) = Gitignore::new(td.path().join("not-an-ignore"));
         assert!(err.is_none());
-        let (ig, err) = IgnoreBuilder::new()
-            .add_ignore(gi)
-            .build()
-            .add_child(td.path());
+        let (ig, err) =
+            IgnoreBuilder::new().add_ignore(gi).build().add_child(td.path());
         assert!(err.is_none());
+        // CHANGED: Explicit ignores only apply to paths inside the directory
+        // of the ignore file, so we have to match against full paths.
         assert!(ig.matched(td.path().join("foo"), false).is_ignore());
         assert!(ig.matched(td.path().join("bar"), false).is_whitelist());
         assert!(ig.matched(td.path().join("baz"), false).is_none());
@@ -1211,15 +1455,152 @@ mod tests {
         let (ig2, err) = ig1.add_child("src");
         assert!(err.is_none());
 
-        // CHANGED: These test cases do not make sense for us as we never call the Ignore with
-        // relative paths.
-        assert!(ig1.matched("llvm", true).is_ignore());
-        assert!(ig2.matched("llvm", true).is_ignore());
+        assert!(ig1.matched("llvm", true).is_none());
+        assert!(ig2.matched("llvm", true).is_none());
         assert!(ig2.matched("src/llvm", true).is_none());
         assert!(ig2.matched("foo", false).is_ignore());
         assert!(ig2.matched("src/foo", false).is_ignore());
     }
 
+    #[test]
+    fn absolute_parent_matchers_are_cached_across_roots() {
+        let td = tmpdir();
+        mkdirp(td.path().join(".git"));
+        mkdirp(td.path().join("src/build"));
+        mkdirp(td.path().join("tests/build"));
+        wfile(td.path().join(".gitignore"), "tests/**/build/\n");
+
+        let ig0 = IgnoreBuilder::new().build();
+        let (src_parents, err) = ig0.add_parents(td.path().join("src"));
+        assert!(err.is_none());
+        let (src, err) = src_parents.add_child(td.path().join("src"));
+        assert!(err.is_none());
+        let (tests_parents, err) = ig0.add_parents(td.path().join("tests"));
+        assert!(err.is_none());
+        let (tests, err) = tests_parents.add_child(td.path().join("tests"));
+        assert!(err.is_none());
+
+        assert!(Arc::ptr_eq(&src_parents.inner, &tests_parents.inner));
+        assert!(src.matched("build", true).is_none());
+        assert!(tests.matched("build", true).is_ignore());
+    }
+
+    /// Parent matchers are shared across search roots, but path rewriting for
+    /// absolute parents must use each root's own base path. Otherwise a rule
+    /// like `src/invalid` is matched against the wrong absolute path when
+    /// `src` is searched before a sibling root (e.g. `tests`).
+    ///
+    /// Paths passed to `matched` use the same relative layout as `Walk` when
+    /// roots are given as relative directory names.
+    ///
+    /// Regression for: https://github.com/BurntSushi/ripgrep/issues/3376
+    /// and https://github.com/BurntSushi/ripgrep/issues/3419
+    #[test]
+    fn multi_root_gitignore_order_independent() {
+        let td = tmpdir();
+        let cwd = std::env::current_dir().unwrap();
+        // Use paths relative to CWD like the CLI walk does for `rg pat src tests`.
+        let root = td.path().strip_prefix(&cwd).unwrap_or(td.path());
+        let src_root = root.join("src");
+        let tests_root = root.join("tests");
+
+        mkdirp(td.path().join(".git"));
+        mkdirp(td.path().join("src"));
+        mkdirp(td.path().join("tests"));
+        wfile(td.path().join(".gitignore"), "src/invalid\n");
+        wfile(td.path().join("src/invalid"), "x");
+        wfile(td.path().join("src/valid"), "x");
+        wfile(td.path().join("tests/valid"), "x");
+
+        let ig0 = IgnoreBuilder::new().build();
+
+        // Historically buggy order: search `src` first, then `tests`.
+        let (src_parents, err) = ig0.add_parents(&src_root);
+        assert!(err.is_none());
+        let (src, err) = src_parents.add_child(&src_root);
+        assert!(err.is_none());
+        let (tests_parents, err) = ig0.add_parents(&tests_root);
+        assert!(err.is_none());
+        let (tests, err) = tests_parents.add_child(&tests_root);
+        assert!(err.is_none());
+
+        assert!(Arc::ptr_eq(&src_parents.inner, &tests_parents.inner));
+        // Each root must carry its own absolute_base even though inners are shared.
+        assert_ne!(
+            src.absolute_base.as_ref().unwrap().as_path(),
+            tests.absolute_base.as_ref().unwrap().as_path()
+        );
+        assert!(
+            src.matched(src_root.join("invalid"), false).is_ignore(),
+            "parent .gitignore must apply for the src root even when \
+             another root was prepared in the same process"
+        );
+        assert!(src.matched(src_root.join("valid"), false).is_none());
+        assert!(tests.matched(tests_root.join("valid"), false).is_none());
+
+        // Reverse order should behave the same way.
+        let ig0 = IgnoreBuilder::new().build();
+        let (tests_parents, err) = ig0.add_parents(&tests_root);
+        assert!(err.is_none());
+        let (tests, err) = tests_parents.add_child(&tests_root);
+        assert!(err.is_none());
+        let (src_parents, err) = ig0.add_parents(&src_root);
+        assert!(err.is_none());
+        let (src, err) = src_parents.add_child(&src_root);
+        assert!(err.is_none());
+
+        assert!(src.matched(src_root.join("invalid"), false).is_ignore());
+        assert!(src.matched(src_root.join("valid"), false).is_none());
+        assert!(tests.matched(tests_root.join("valid"), false).is_none());
+    }
+
+    /// Same multi-root / order issue for non-git ignore files (e.g. `.rgignore`
+    /// via custom ignore names).
+    ///
+    /// Regression for: https://github.com/BurntSushi/ripgrep/issues/3320
+    #[test]
+    fn multi_root_custom_ignore_order_independent() {
+        let td = tmpdir();
+        let cwd = std::env::current_dir().unwrap();
+        let root = td.path().strip_prefix(&cwd).unwrap_or(td.path());
+        let alpha_root = root.join("alpha");
+        let beta_root = root.join("beta");
+
+        mkdirp(td.path().join("alpha"));
+        mkdirp(td.path().join("beta"));
+        wfile(td.path().join(".rgignore"), "beta/**/*.svg\n");
+        wfile(td.path().join("alpha/a.txt"), "x");
+        wfile(td.path().join("beta/x.svg"), "x");
+
+        let ig0 = IgnoreBuilder::new()
+            .add_custom_ignore_filename(".rgignore")
+            .ignore(false)
+            .git_ignore(false)
+            .git_global(false)
+            .git_exclude(false)
+            .build();
+
+        let (alpha_parents, err) = ig0.add_parents(&alpha_root);
+        assert!(err.is_none());
+        let (alpha, err) = alpha_parents.add_child(&alpha_root);
+        assert!(err.is_none());
+        let (beta_parents, err) = ig0.add_parents(&beta_root);
+        assert!(err.is_none());
+        let (beta, err) = beta_parents.add_child(&beta_root);
+        assert!(err.is_none());
+
+        assert_ne!(
+            alpha.absolute_base.as_ref().unwrap().as_path(),
+            beta.absolute_base.as_ref().unwrap().as_path()
+        );
+        assert!(alpha.matched(alpha_root.join("a.txt"), false).is_none());
+        assert!(
+            beta.matched(beta_root.join("x.svg"), false).is_ignore(),
+            "parent .rgignore must apply for the beta root regardless of \
+             which root was set up first"
+        );
+    }
+
     #[test]
     fn git_info_exclude_in_linked_worktree() {
         let td = tmpdir();
@@ -1227,16 +1608,14 @@ mod tests {
         mkdirp(git_dir.join("info"));
         wfile(git_dir.join("info/exclude"), "ignore_me");
         mkdirp(git_dir.join("worktrees/linked-worktree"));
-        let commondir_path = || git_dir.join("worktrees/linked-worktree/commondir");
+        let commondir_path =
+            || git_dir.join("worktrees/linked-worktree/commondir");
         mkdirp(td.path().join("linked-worktree"));
         let worktree_git_dir_abs = format!(
             "gitdir: {}",
             git_dir.join("worktrees/linked-worktree").to_str().unwrap(),
         );
-        wfile(
-            td.path().join("linked-worktree/.git"),
-            &worktree_git_dir_abs,
-        );
+        wfile(td.path().join("linked-worktree/.git"), &worktree_git_dir_abs);
 
         // relative commondir
         wfile(commondir_path(), "../..");
diff --git a/crates/ignore/src/gitignore.rs b/crates/ignore/src/gitignore.rs
index f822d8390..8824139b5 100644
--- a/crates/ignore/src/gitignore.rs
+++ b/crates/ignore/src/gitignore.rs
@@ -102,7 +102,9 @@ impl Gitignore {
     ///
     /// Note that I/O errors are ignored. For more granular control over
     /// errors, use `GitignoreBuilder`.
-    pub fn new<P: AsRef<Path>>(gitignore_path: P) -> (Gitignore, Option<Error>) {
+    pub fn new<P: AsRef<Path>>(
+        gitignore_path: P,
+    ) -> (Gitignore, Option<Error>) {
         let path = gitignore_path.as_ref();
         let parent = path.parent().unwrap_or(Path::new("/"));
         let mut builder = GitignoreBuilder::new(parent);
@@ -123,6 +125,17 @@ impl Gitignore {
     /// The global config file path is specified by git's `core.excludesFile`
     /// config option.
     ///
+    /// # Behavior
+    ///
+    /// This routine does its best to discover any global git exclude files.
+    /// This will try to parse out the `excludesFile` config option in your
+    /// global git configuration, if necessary.
+    ///
+    /// The specific things this routine tries (which are subject to change
+    /// based on how git behaves) are:
+    ///
+    ///
+    ///
     /// Git's config file location is `$HOME/.gitconfig`. If `$HOME/.gitconfig`
     /// does not exist or does not specify `core.excludesFile`, then
     /// `$XDG_CONFIG_HOME/git/ignore` is read. If `$XDG_CONFIG_HOME` is not
@@ -145,7 +158,8 @@ impl Gitignore {
             num_ignores: 0,
             num_whitelists: 0,
             matches: None,
-            // CHANGED: Add a flag to have Gitignore rules that apply only to files.
+            // CHANGED: Add a flag to have Gitignore rules that apply only to
+            // files.
             only_on_files: false,
         }
     }
@@ -190,7 +204,11 @@ impl Gitignore {
     /// determined by a common suffix of the directory containing this
     /// gitignore) is stripped. If there is no common suffix/prefix overlap,
     /// then `path` is assumed to be relative to this matcher.
-    pub fn matched<P: AsRef<Path>>(&self, path: P, is_dir: bool) -> Match<&Glob> {
+    pub fn matched<P: AsRef<Path>>(
+        &self,
+        path: P,
+        is_dir: bool,
+    ) -> Match<&Glob> {
         if self.is_empty() {
             return Match::None;
         }
@@ -243,11 +261,16 @@ impl Gitignore {
     }
 
     /// Like matched, but takes a path that has already been stripped.
-    fn matched_stripped<P: AsRef<Path>>(&self, path: P, is_dir: bool) -> Match<&Glob> {
+    fn matched_stripped<P: AsRef<Path>>(
+        &self,
+        path: P,
+        is_dir: bool,
+    ) -> Match<&Glob> {
         if self.is_empty() {
             return Match::None;
         }
-        // CHANGED: Rules marked as only_on_files can not match against directories.
+        // CHANGED: Rules marked as only_on_files can not match against
+        // directories.
         if self.only_on_files && is_dir {
             return Match::None;
         }
@@ -270,7 +293,10 @@ impl Gitignore {
 
     /// Strips the given path such that it's suitable for matching with this
     /// gitignore matcher.
-    fn strip<'a, P: 'a + AsRef<Path> + ?Sized>(&'a self, path: &'a P) -> &'a Path {
+    fn strip<'a, P: 'a + AsRef<Path> + ?Sized>(
+        &'a self,
+        path: &'a P,
+    ) -> &'a Path {
         let mut path = path.as_ref();
         // A leading ./ is completely superfluous. We also strip it from
         // our gitignore root path, so we need to strip it from our candidate
@@ -326,7 +352,8 @@ impl GitignoreBuilder {
             globs: vec![],
             case_insensitive: false,
             allow_unclosed_class: true,
-            // CHANGED: Add a flag to have Gitignore rules that apply only to files.
+            // CHANGED: Add a flag to have Gitignore rules that apply only to
+            // files.
             only_on_files: false,
         }
     }
@@ -337,18 +364,21 @@ impl GitignoreBuilder {
     pub fn build(&self) -> Result<Gitignore, Error> {
         let nignore = self.globs.iter().filter(|g| !g.is_whitelist()).count();
         let nwhite = self.globs.iter().filter(|g| g.is_whitelist()).count();
-        let set = self.builder.build().map_err(|err| Error::Glob {
-            glob: None,
-            err: err.to_string(),
-        })?;
+        let set = self
+            .builder
+            .build()
+            .map_err(|err| Error::Glob { glob: None, err: err.to_string() })?;
         Ok(Gitignore {
             set,
             root: self.root.clone(),
             globs: self.globs.clone(),
             num_ignores: nignore as u64,
             num_whitelists: nwhite as u64,
-            matches: Some(Arc::new(Pool::new(|| vec![]))),
-            // CHANGED: Add a flag to have Gitignore rules that apply only to files.
+            matches: Some(Arc::new(
+                Pool::with_available_parallelism_capacity(|| vec![]),
+            )),
+            // CHANGED: Add a flag to have Gitignore rules that apply only to
+            // files.
             only_on_files: self.only_on_files,
         })
     }
@@ -411,11 +441,8 @@ impl GitignoreBuilder {
 
             // Match Git's handling of .gitignore files that begin with the Unicode BOM
             const UTF8_BOM: &str = "\u{feff}";
-            let line = if i == 0 {
-                line.trim_start_matches(UTF8_BOM)
-            } else {
-                &line
-            };
+            let line =
+                if i == 0 { line.trim_start_matches(UTF8_BOM) } else { &line };
 
             if let Err(err) = self.add_line(Some(path.to_path_buf()), &line) {
                 errs.push(err.tagged(path, lineno));
@@ -537,7 +564,10 @@ impl GitignoreBuilder {
     /// affected.
     ///
     /// This is disabled by default.
-    pub fn case_insensitive(&mut self, yes: bool) -> Result<&mut GitignoreBuilder, Error> {
+    pub fn case_insensitive(
+        &mut self,
+        yes: bool,
+    ) -> Result<&mut GitignoreBuilder, Error> {
         // TODO: This should not return a `Result`. Fix this in the next semver
         // release.
         self.case_insensitive = yes;
@@ -556,7 +586,10 @@ impl GitignoreBuilder {
     /// modes since the glob parser becomes more permissive. You might want to
     /// enable this when compatibility (e.g., with POSIX glob implementations)
     /// is more important than good error messages.
-    pub fn allow_unclosed_class(&mut self, yes: bool) -> &mut GitignoreBuilder {
+    pub fn allow_unclosed_class(
+        &mut self,
+        yes: bool,
+    ) -> &mut GitignoreBuilder {
         self.allow_unclosed_class = yes;
         self
     }
@@ -576,32 +609,56 @@ impl GitignoreBuilder {
 ///
 /// Note that the file path returned may not exist.
 pub fn gitconfig_excludes_path() -> Option<PathBuf> {
-    // git supports $HOME/.gitconfig and $XDG_CONFIG_HOME/git/config. Notably,
-    // both can be active at the same time, where $HOME/.gitconfig takes
-    // precedent. So if $HOME/.gitconfig defines a `core.excludesFile`, then
-    // we're done.
-    match gitconfig_home_contents().and_then(|x| parse_excludes_file(&x)) {
-        Some(path) => return Some(path),
-        None => {}
+    // When GIT_CONFIG_GLOBAL is set, it replaces both $HOME/.gitconfig and
+    // $XDG_CONFIG_HOME/git/config (per git 2.32+). Otherwise, git supports
+    // $HOME/.gitconfig and $XDG_CONFIG_HOME/git/config simultaneously, where
+    // $HOME/.gitconfig takes precedent.
+    gitconfig_global_env_contents()
+        .and_then(|x| parse_excludes_file(&x))
+        .or_else(|| {
+            gitconfig_home_contents().and_then(|x| parse_excludes_file(&x))
+        })
+        .or_else(|| {
+            gitconfig_xdg_contents().and_then(|x| parse_excludes_file(&x))
+        })
+        // System-level config has the lowest priority for core.excludesFile.
+        // GIT_CONFIG_SYSTEM overrides the default /etc/gitconfig path.
+        .or_else(|| {
+            gitconfig_system_contents().and_then(|x| parse_excludes_file(&x))
+        })
+        .or_else(excludes_file_default)
+}
+
+/// Returns the file contents of git's global config file from the path
+/// specified by the `GIT_CONFIG_GLOBAL` environment variable.
+fn gitconfig_global_env_contents() -> Option<Vec<u8>> {
+    let path = std::env::var_os("GIT_CONFIG_GLOBAL").map(PathBuf::from)?;
+    if path.as_os_str().is_empty() {
+        return None;
     }
-    match gitconfig_xdg_contents().and_then(|x| parse_excludes_file(&x)) {
-        Some(path) => return Some(path),
-        None => {}
-    }
-    excludes_file_default()
+    let mut file = BufReader::new(File::open(path).ok()?);
+    let mut contents = vec![];
+    file.read_to_end(&mut contents).ok().map(|_| contents)
+}
+
+/// Returns the file contents of git's system-level config file.
+///
+/// Checks `GIT_CONFIG_SYSTEM` first, then falls back to `/etc/gitconfig`.
+fn gitconfig_system_contents() -> Option<Vec<u8>> {
+    let path = std::env::var_os("GIT_CONFIG_SYSTEM")
+        .map(PathBuf::from)
+        .filter(|x| !x.as_os_str().is_empty())
+        .unwrap_or_else(|| PathBuf::from("/etc/gitconfig"));
+    let mut file = BufReader::new(File::open(path).ok()?);
+    let mut contents = vec![];
+    file.read_to_end(&mut contents).ok().map(|_| contents)
 }
 
 /// Returns the file contents of git's global config file, if one exists, in
 /// the user's home directory.
 fn gitconfig_home_contents() -> Option<Vec<u8>> {
-    let home = match home_dir() {
-        None => return None,
-        Some(home) => home,
-    };
-    let mut file = match File::open(home.join(".gitconfig")) {
-        Err(_) => return None,
-        Ok(file) => BufReader::new(file),
-    };
+    let home = home_dir()?;
+    let mut file = BufReader::new(File::open(home.join(".gitconfig")).ok()?);
     let mut contents = vec![];
     file.read_to_end(&mut contents).ok().map(|_| contents)
 }
@@ -610,19 +667,11 @@ fn gitconfig_home_contents() -> Option<Vec<u8>> {
 /// the user's XDG_CONFIG_HOME directory.
 fn gitconfig_xdg_contents() -> Option<Vec<u8>> {
     let path = std::env::var_os("XDG_CONFIG_HOME")
-        .and_then(|x| {
-            if x.is_empty() {
-                None
-            } else {
-                Some(PathBuf::from(x))
-            }
-        })
+        .map(PathBuf::from)
+        .filter(|x| !x.as_os_str().is_empty())
         .or_else(|| home_dir().map(|p| p.join(".config")))
-        .map(|x| x.join("git/config"));
-    let mut file = match path.and_then(|p| File::open(p).ok()) {
-        None => return None,
-        Some(file) => BufReader::new(file),
-    };
+        .map(|x| x.join("git/config"))?;
+    let mut file = BufReader::new(File::open(path).ok()?);
     let mut contents = vec![];
     file.read_to_end(&mut contents).ok().map(|_| contents)
 }
@@ -632,13 +681,8 @@ fn gitconfig_xdg_contents() -> Option<Vec<u8>> {
 /// Specifically, this respects XDG_CONFIG_HOME.
 fn excludes_file_default() -> Option<PathBuf> {
     std::env::var_os("XDG_CONFIG_HOME")
-        .and_then(|x| {
-            if x.is_empty() {
-                None
-            } else {
-                Some(PathBuf::from(x))
-            }
-        })
+        .map(PathBuf::from)
+        .filter(|x| !x.as_os_str().is_empty())
         .or_else(|| home_dir().map(|p| p.join(".config")))
         .map(|x| x.join("git/ignore"))
 }
@@ -667,9 +711,7 @@ fn parse_excludes_file(data: &[u8]) -> Option<PathBuf> {
     re.captures(data, &mut caps);
     let span = caps.get_group(1)?;
     let candidate = &data[span];
-    std::str::from_utf8(candidate)
-        .ok()
-        .map(|s| PathBuf::from(expand_tilde(s)))
+    std::str::from_utf8(candidate).ok().map(|s| PathBuf::from(expand_tilde(s)))
 }
 
 /// Expands ~ in file paths to the value of $HOME.
@@ -831,7 +873,10 @@ mod tests {
     fn parse_excludes_file4() {
         let data = bytes("[core]\nexcludesFile = \"~/foo/bar\"");
         let got = super::parse_excludes_file(&data);
-        assert_eq!(path_string(got.unwrap()), super::expand_tilde("~/foo/bar"));
+        assert_eq!(
+            path_string(got.unwrap()),
+            super::expand_tilde("~/foo/bar")
+        );
     }
 
     #[test]
diff --git a/crates/ignore/src/incremental.rs b/crates/ignore/src/incremental.rs
new file mode 100644
index 000000000..5030b0d00
--- /dev/null
+++ b/crates/ignore/src/incremental.rs
@@ -0,0 +1,1286 @@
+use std::{
+    collections::HashMap,
+    path::{Path, PathBuf},
+    sync::OnceLock,
+};
+
+use crate::{
+    Error, Match, PartialErrorBuilder, dir::Ignore, pathutil::is_hidden_path,
+};
+
+/// A cached matcher for checking paths against hierarchical ignore files.
+///
+/// An `IncrementalIgnore` is built from a [`crate::WalkBuilder`]. Unlike a
+/// recursive walk, it can check individual paths while still respecting the
+/// ignore files in every relevant parent directory. Matchers for directories
+/// are compiled on first use and then retained for later queries.
+/// Each matcher corresponds to exactly one root configured on the builder,
+/// and paths passed to it are interpreted relative to that root.
+/// A matcher for the special `-` root representing standard input is inert
+/// and always returns a non-match.
+///
+/// The matcher checks path-based filters in the same precedence order as
+/// a traversal. This includes glob overrides, `.ignore`, `.gitignore`,
+/// `.git/info/exclude`, global and explicitly added ignore files, custom
+/// ignore file names and file type selections. It does not apply filters that
+/// require a directory entry or other traversal state, such as custom entry
+/// predicates. Hidden-file detection, minimum and maximum depth limits and the
+/// maximum file size are applied.
+///
+/// A matcher is a snapshot at directory granularity. Once the ignore files in
+/// a directory have been loaded, edits to those files are not observed. Build
+/// a new matcher to reload them.
+///
+/// # Warning
+///
+/// The incremental path checking here necessarily needs to do a lot more work
+/// per path matched. Callers should _not_ use this to run directory traversal.
+/// This is intended to avoid the work of re-traversing an entire directory
+/// tree when only a few changes are detected. (For example, in response to
+/// file additions or deletions.)
+///
+/// # Example
+///
+/// ```rust,no_run
+/// use ignore::WalkBuilder;
+///
+/// let mut builder = WalkBuilder::new(".");
+/// builder.add_custom_ignore_filename(".rgignore");
+/// let mut matchers = builder.build_matchers();
+/// let matcher = &mut matchers[0];
+///
+/// if matcher.matched("src/generated.rs", false).is_ignore() {
+///     println!("ignored");
+/// }
+/// ```
+#[derive(Clone, Debug)]
+pub struct IncrementalIgnore {
+    /// The root exactly as it was given to `WalkBuilder`.
+    root: PathBuf,
+    /// The normalized root used only by the opt-in normalization routine.
+    normalized_root: OnceLock<Option<PathBuf>>,
+    /// The matcher for the configured root directory, loaded on first use.
+    ignore: RootIgnore,
+    /// Directory paths relative to `root`, excluding the root itself.
+    dirs: HashMap<PathBuf, CachedDir>,
+    /// Options for additional filtering beyond gitignore.
+    options: IncrementalIgnoreOptions,
+}
+
+/// The options for a matcher, mostly meant to duplicate as much as we can from
+/// `WalkParallel`.
+#[derive(Clone, Debug)]
+pub(crate) struct IncrementalIgnoreOptions {
+    pub(crate) min_depth: Option<usize>,
+    pub(crate) max_depth: Option<usize>,
+    pub(crate) max_filesize: Option<u64>,
+    pub(crate) hidden: bool,
+    pub(crate) follow_links: bool,
+}
+
+#[derive(Clone, Debug)]
+enum RootIgnore {
+    Unloaded(Ignore),
+    Loaded(Ignore),
+    NotDirectory,
+    Stdin,
+}
+
+/// Cached traversal state for a directory relative to the configured root.
+///
+/// The presence of an entry means that the directory and every ancestor
+/// between it and the root have already been checked.
+#[derive(Clone, Debug)]
+enum CachedDir {
+    /// The directory may be descended into. The matcher includes the ignore
+    /// rules loaded through this directory and is therefore the matcher to use
+    /// for its children.
+    Allowed(Ignore),
+    /// The directory may not be descended into because it was ignored by a
+    /// path rule or hidden-file filtering. Every descendant is consequently
+    /// ignored, and ignore files inside this directory are not loaded.
+    Ignored,
+}
+
+impl IncrementalIgnore {
+    pub(crate) fn new(
+        root: PathBuf,
+        ignore: Ignore,
+        options: IncrementalIgnoreOptions,
+    ) -> IncrementalIgnore {
+        // File traversal special cases `-` to search stdin, so we recognize
+        // it here for completeness too. In particular, we really want
+        // `WalkBuilder::build_matchers` to return a matcher for every root,
+        // even when it's a simple file (handled automatically) or when it's
+        // stdin (necessarily special cased).
+        //
+        // If callers need to search a file or directory named `-`, then they
+        // can use `./-`. As is the case for file traversal too.
+        let ignore = if root == Path::new("-") {
+            RootIgnore::Stdin
+        } else {
+            RootIgnore::Unloaded(ignore)
+        };
+        IncrementalIgnore {
+            root,
+            normalized_root: OnceLock::new(),
+            ignore,
+            dirs: HashMap::new(),
+            options,
+        }
+    }
+
+    /// Return the root that paths matched by this matcher are relative to.
+    pub fn root(&self) -> &Path {
+        &self.root
+    }
+
+    /// Normalize `path` and return it relative to this matcher's root.
+    ///
+    /// This returns `None` when `path` cannot be made absolute or
+    /// when it is known to be outside this matcher's root. Unlike
+    /// [`IncrementalIgnore::matched`], this performs absolute path conversion,
+    /// lexical normalization and allocation. It is intended as an opt-in
+    /// convenience for callers that do not already have root-relative paths.
+    ///
+    /// Note that `.` is interpreted relative to the process level current
+    /// working directory. It is _not_ interpreted relative to the root of
+    /// this matcher.
+    ///
+    /// Note also that this may reject paths that only differ in casing. For
+    /// example, if the root path for this matcher is `/FOO` but the provided
+    /// path is `/foo/bar`, then this may return `None`. Callers must ensure
+    /// casing is consistent between the path provided and the root path for
+    /// this matcher.
+    pub fn normalize<P: AsRef<Path>>(&self, path: P) -> Option<PathBuf> {
+        if matches!(self.ignore, RootIgnore::Stdin) {
+            return None;
+        }
+        let path = normalize_absolute(path.as_ref())?;
+        let root = self
+            .normalized_root
+            .get_or_init(|| normalize_absolute(&self.root))
+            .as_ref()?;
+        path.strip_prefix(root).ok().map(Path::to_path_buf)
+    }
+
+    /// Match a root-relative path against ignore files in its directory and
+    /// all relevant parent directories.
+    ///
+    /// `is_dir` should be true when `path` should be matched as a directory.
+    ///
+    /// For the return value, use [`IncrementalMatch::is_ignore`],
+    /// [`IncrementalMatch::is_whitelist`] or [`IncrementalMatch::is_none`] to
+    /// inspect it.
+    ///
+    /// Matchers for previously unseen directories are loaded and cached during
+    /// this call. Errors encountered while loading ignore files are logged. To
+    /// receive those errors, use [`IncrementalIgnore::matched_with_errors`].
+    ///
+    /// `path` must be relative to this matcher's root and must not contain a
+    /// parent directory (`..`) component. Behavior is unspecified when these
+    /// preconditions are violated. Callers with an absolute path or with a
+    /// path containing `.` or `..` may use [`IncrementalIgnore::normalize`]
+    /// to get a path satisfying these preconditions. In all cases, a relative
+    /// path is *assumed* to be relative to the root of this ignore matcher.
+    ///
+    /// In general, it is intended that callers doing recursive directory
+    /// traversal on the root of this matcher may provide relative paths to
+    /// this routine *without* calling [`IncrementalIgnore::normalize`].
+    ///
+    /// The empty path represents the explicitly configured root and also
+    /// returns non-match, consistent with recursive traversal where a root is
+    /// always treated as being at depth zero.
+    pub fn matched<P: AsRef<Path>>(
+        &mut self,
+        path: P,
+        is_dir: bool,
+    ) -> IncrementalMatch {
+        let (matched, err) = self.matched_with_errors(path, is_dir);
+        if let Some(err) = err {
+            log::debug!("error while loading ignore files: {err}");
+        }
+        matched
+    }
+
+    /// Match a root-relative path and return errors encountered while loading
+    /// ignore files.
+    ///
+    /// This is equivalent to [`IncrementalIgnore::matched`], except that
+    /// it returns any errors from newly loaded ignore files. Loading can
+    /// partially succeed, so valid rules are always applied to the returned
+    /// match even when an error is present.
+    pub fn matched_with_errors<P: AsRef<Path>>(
+        &mut self,
+        path: P,
+        is_dir: bool,
+    ) -> (IncrementalMatch, Option<Error>) {
+        let mut errs = PartialErrorBuilder::default();
+        let matched =
+            self.matched_with_errors_impl(path.as_ref(), is_dir, &mut errs);
+        (matched, errs.into_error_option())
+    }
+
+    fn matched_with_errors_impl(
+        &mut self,
+        relative: &Path,
+        is_dir: bool,
+        errs: &mut PartialErrorBuilder,
+    ) -> IncrementalMatch {
+        // We short-circuit here when our matcher corresponds to `Stdin` in
+        // order to always return a non-match. This is somewhat redundant with
+        // `root_ignore()` which does this too, but we do it here so that it
+        // always happens, e.g., before depth filtering.
+        if relative.is_absolute() || matches!(self.ignore, RootIgnore::Stdin) {
+            return IncrementalMatch::none(is_dir);
+        }
+
+        let (mut satisfies_min, mut edge_max) = (true, false);
+        if self.options.min_depth.is_some() || self.options.max_depth.is_some()
+        {
+            let depth = relative
+                .components()
+                .filter_map(|component| match component {
+                    std::path::Component::CurDir => None,
+                    component => Some(component),
+                })
+                .count();
+            satisfies_min =
+                self.options.min_depth.is_none_or(|min| depth >= min);
+            let satisfies_max =
+                self.options.max_depth.is_none_or(|max| depth <= max);
+            edge_max = self.options.max_depth.is_some_and(|max| depth == max);
+            // When we have a file that isn't past our min depth, we can give
+            // up right away.
+            if !is_dir && !satisfies_min {
+                return IncrementalMatch::ignore().not_within_depth();
+            }
+            // Same for *anything* that exceeds our max depth.
+            if !satisfies_max {
+                return IncrementalMatch::ignore().not_within_depth();
+            }
+        }
+
+        // When the path is invalid in some way, we bail out early to avoid
+        // potentially doing a stat call below.
+        let (mut mat, valid) = self
+            .matched_with_errors_ignore(relative, is_dir, errs)
+            .map(|mat| (mat, true))
+            .unwrap_or_else(|| (IncrementalMatch::none(is_dir), false));
+
+        if !is_dir
+            && !mat.is_ignore()
+            && valid
+            && let Some(max_filesize) = self.options.max_filesize
+        {
+            let path = self.root().join(relative);
+            let result = if self.options.follow_links {
+                path.metadata()
+            } else {
+                path.symlink_metadata()
+            };
+            match result {
+                Ok(md) if md.len() > max_filesize => {
+                    return IncrementalMatch::ignore();
+                }
+                Ok(_) => {}
+                Err(err) => {
+                    // Record the error but otherwise fall through
+                    let err = Error::from(err);
+                    errs.push(err.with_path(path));
+                }
+            }
+        }
+
+        // We still need to tag our `mat` if it doesn't pass the depth filter,
+        // or if it's a directory on the edge of a depth filter. This can only
+        // happen when the path is reported as a directory. Otherwise regular
+        // files are always handled above.
+        if is_dir {
+            if !satisfies_min {
+                mat = mat.not_within_depth();
+            }
+            if edge_max {
+                mat = mat.no_descent();
+            }
+        }
+        mat
+    }
+
+    fn matched_with_errors_ignore(
+        &mut self,
+        relative: &Path,
+        is_dir: bool,
+        errs: &mut PartialErrorBuilder,
+    ) -> Option<IncrementalMatch> {
+        let mut components = relative
+            .components()
+            .filter_map(|component| match component {
+                std::path::Component::CurDir => None,
+                component => Some(component),
+            })
+            .peekable();
+        components.peek()?;
+
+        // If the exact parent is cached, then all of its ancestors have
+        // already been checked. An allowed cache entry is the matcher to use
+        // for children of that directory, while an ignored cache entry is
+        // terminal for every descendant. In the usual case, this avoids both
+        // walking every component and allocating a relative directory path.
+        //
+        // Only try the fast path when the final component is a normal path
+        // component. Invalid paths are handled by the component walk below.
+        let has_normal_final_component =
+            relative.components().next_back().is_some_and(|component| {
+                matches!(component, std::path::Component::Normal(_))
+            });
+        if has_normal_final_component && let Some(parent) = relative.parent() {
+            match self.dirs.get(parent) {
+                Some(CachedDir::Allowed(ignore)) => {
+                    return Some(self.match_path(ignore, relative, is_dir));
+                }
+                Some(CachedDir::Ignored) => {
+                    return Some(IncrementalMatch::ignore());
+                }
+                None => {}
+            }
+        }
+
+        let mut ignore = self.root_ignore(errs)?;
+        let mut dir = PathBuf::new();
+        while let Some(component) = components.next() {
+            match component {
+                std::path::Component::ParentDir
+                | std::path::Component::RootDir
+                | std::path::Component::Prefix(_) => {
+                    return None;
+                }
+                std::path::Component::CurDir => continue,
+                std::path::Component::Normal(_) => {}
+            }
+            if components.peek().is_none() {
+                break;
+            }
+            dir.push(component.as_os_str());
+            match self.dirs.get(&dir) {
+                Some(CachedDir::Allowed(cached)) => {
+                    ignore = cached.clone();
+                    continue;
+                }
+                Some(CachedDir::Ignored) => {
+                    return Some(IncrementalMatch::ignore());
+                }
+                None => {}
+            }
+
+            let path = self.root.join(&dir);
+            let mat = ignore.matched(&path, true);
+            let is_hidden =
+                self.options.hidden && mat.is_none() && is_hidden_path(&path);
+            if mat.is_ignore() || is_hidden {
+                self.dirs.insert(dir.clone(), CachedDir::Ignored);
+                return Some(IncrementalMatch::ignore());
+            }
+            let (child, err) = ignore.add_child(&path);
+            errs.maybe_push(err);
+            self.dirs.insert(dir.clone(), CachedDir::Allowed(child.clone()));
+            ignore = child;
+        }
+
+        Some(self.match_path(&ignore, relative, is_dir))
+    }
+
+    fn match_path(
+        &self,
+        ignore: &Ignore,
+        relative: &Path,
+        is_dir: bool,
+    ) -> IncrementalMatch {
+        let path = self.root.join(relative);
+        let mut mat = IncrementalMatch::from_match(
+            ignore.matched(&path, is_dir).map(|_| ()),
+            is_dir,
+        );
+        // Whether a file is hidden or not has low precedence in filtering. We
+        // only check it if we haven't matched anything above. This permits
+        // callers to whitelist hidden files or directories.
+        if self.options.hidden && mat.is_none() && is_hidden_path(&path) {
+            mat = IncrementalMatch::ignore();
+        }
+        mat
+    }
+
+    fn root_ignore(
+        &mut self,
+        errs: &mut PartialErrorBuilder,
+    ) -> Option<Ignore> {
+        let ignore = match self.ignore {
+            RootIgnore::Unloaded(ref ignore) => ignore.clone(),
+            RootIgnore::Loaded(ref ignore) => return Some(ignore.clone()),
+            RootIgnore::NotDirectory | RootIgnore::Stdin => return None,
+        };
+        if !self.root.is_dir() {
+            self.ignore = RootIgnore::NotDirectory;
+            return None;
+        }
+
+        let (parents, err) = ignore.add_parents(&self.root);
+        errs.maybe_push(err);
+        let (root, err) = parents.add_child(&self.root);
+        errs.maybe_push(err);
+        self.ignore = RootIgnore::Loaded(root.clone());
+        Some(root)
+    }
+}
+
+/// The result of an incremental match.
+///
+/// This is similar to [`Match`] in that it reports whether a file path should
+/// be ignored, whitelisted or didn't match anything at all. It also has extra
+/// data, such as whether a directory matched but should not be descended into.
+///
+/// Generally speaking, callers that only care about specific files can stick
+/// to the `is_none()`, `is_ignore()` or `is_whitelist()` predicates. Directory
+/// entries are more complicated because we sometimes want to yield directories
+/// to descend into, but not actually visit (e.g., for the minimum depth
+/// filter). Or, we may want to yield a directory to visit but not descend into
+/// (e.g., for the maximum depth filter).
+#[derive(Clone, Debug)]
+pub struct IncrementalMatch {
+    mat: Match<()>,
+    should_descend: bool,
+    is_within_depth: bool,
+}
+
+impl IncrementalMatch {
+    fn none(is_dir: bool) -> IncrementalMatch {
+        IncrementalMatch {
+            mat: Match::None,
+            should_descend: is_dir,
+            is_within_depth: true,
+        }
+    }
+
+    fn ignore() -> IncrementalMatch {
+        IncrementalMatch {
+            mat: Match::Ignore(()),
+            should_descend: false,
+            is_within_depth: true,
+        }
+    }
+
+    fn from_match(mat: Match<()>, is_dir: bool) -> IncrementalMatch {
+        let should_descend = is_dir && !mat.is_ignore();
+        IncrementalMatch { mat, should_descend, is_within_depth: true }
+    }
+
+    fn no_descent(self) -> IncrementalMatch {
+        IncrementalMatch { should_descend: false, ..self }
+    }
+
+    fn not_within_depth(self) -> IncrementalMatch {
+        IncrementalMatch { is_within_depth: false, ..self }
+    }
+
+    /// Returns true if the match result didn't match anything.
+    pub fn is_none(&self) -> bool {
+        self.mat.is_none()
+    }
+
+    /// Returns true if the match result implies the path should be ignored.
+    pub fn is_ignore(&self) -> bool {
+        self.mat.is_ignore()
+    }
+
+    /// Returns true if the match result implies the path should be
+    /// whitelisted.
+    pub fn is_whitelist(&self) -> bool {
+        self.mat.is_whitelist()
+    }
+
+    /// Returns true only when this match corresponds to a directory *and*
+    /// whether the caller should look inside this directory for additional
+    /// results.
+    ///
+    /// It is possible for a match to report `false` for
+    /// [`IncrementalMatch::is_ignore`] _and_ `false` for
+    /// [`IncrementalMatch::should_descend`]. This can occur, for example, when
+    /// a maximum depth setting allows a directory through, but where none of
+    /// its children entries should be visited.
+    ///
+    /// This is always `false` for a file path that does *not* correspond to a
+    /// directory.
+    pub fn should_descend(&self) -> bool {
+        self.should_descend
+    }
+
+    /// Returns true only when this result corresponds to an entry that is
+    /// within the depth filter.
+    ///
+    /// This is `false` when a path corresponds to a directory and is less than
+    /// the minimum depth. In this case, callers should continue looking inside
+    /// that directory.
+    ///
+    /// This is always `true` for a match corresponding to a file path that
+    /// isn't a directory.
+    pub fn is_within_depth(&self) -> bool {
+        self.is_within_depth
+    }
+
+    /// Inverts the match so that `Ignore` becomes `Whitelist` and
+    /// `Whitelist` becomes `Ignore`. A non-match remains the same.
+    pub fn invert(self) -> IncrementalMatch {
+        IncrementalMatch { mat: self.mat.invert(), ..self }
+    }
+}
+
+/// Return a lexically normalized absolute representation of `path`.
+///
+/// This collapses `.` and `..`, but intentionally does not canonicalize or
+/// resolve symlinks. Ignore rules apply to the lexical path, and resolving a
+/// symlink below a root could move the result outside of that root.
+fn normalize_absolute(path: &Path) -> Option<PathBuf> {
+    let absolute = std::path::absolute(path).ok()?;
+    let mut normalized = PathBuf::new();
+    for component in absolute.components() {
+        match component {
+            std::path::Component::CurDir => {}
+            std::path::Component::ParentDir => {
+                normalized.pop();
+            }
+            _ => normalized.push(component.as_os_str()),
+        }
+    }
+    Some(normalized)
+}
+
+#[cfg(test)]
+mod tests {
+    use std::{
+        fs::{self, File},
+        io::Write,
+        path::{Path, PathBuf},
+    };
+
+    use crate::{
+        IncrementalIgnore, IncrementalMatch, WalkBuilder,
+        overrides::OverrideBuilder, tests::TempDir, types::TypesBuilder,
+    };
+
+    use super::CachedDir;
+
+    fn wfile<P: AsRef<Path>>(path: P, contents: &str) {
+        let mut file = File::create(path).unwrap();
+        file.write_all(contents.as_bytes()).unwrap();
+    }
+
+    fn mkdirp<P: AsRef<Path>>(path: P) {
+        fs::create_dir_all(path).unwrap();
+    }
+
+    fn tmpdir() -> TempDir {
+        TempDir::new().unwrap()
+    }
+
+    fn builder<P: AsRef<Path>>(path: P) -> WalkBuilder {
+        let mut builder = WalkBuilder::new(path);
+        builder.git_global(false);
+        builder
+    }
+
+    fn one_matcher(builder: &WalkBuilder) -> IncrementalIgnore {
+        let mut matchers = builder.build_matchers();
+        assert_eq!(matchers.len(), 1);
+        matchers.pop().unwrap()
+    }
+
+    fn builders<I: IntoIterator<Item = P>, P: AsRef<Path>>(
+        paths: I,
+    ) -> WalkBuilder {
+        let mut builder = WalkBuilder::from_iter(paths);
+        builder.git_global(false);
+        builder
+    }
+
+    fn matchers(builder: &WalkBuilder) -> Vec<IncrementalIgnore> {
+        builder.build_matchers()
+    }
+
+    fn matchedf<P: AsRef<Path>>(
+        matcher: &mut IncrementalIgnore,
+        path: P,
+    ) -> IncrementalMatch {
+        let (matched, err) = matcher.matched_with_errors(path, false);
+        assert!(err.is_none(), "unexpected matcher error: {err:?}");
+        matched
+    }
+
+    fn matchedd<P: AsRef<Path>>(
+        matcher: &mut IncrementalIgnore,
+        path: P,
+    ) -> IncrementalMatch {
+        let (matched, err) = matcher.matched_with_errors(path, true);
+        assert!(err.is_none(), "unexpected matcher error: {err:?}");
+        matched
+    }
+
+    // Test that multiple parent ignore files, when nested, are respected.
+    #[test]
+    fn nested_parent_gitignores() {
+        let td = tmpdir();
+        let root = td.path().join("project/work");
+        mkdirp(td.path().join(".git"));
+        mkdirp(root.join("src"));
+        wfile(td.path().join(".gitignore"), "*.tmp\n");
+        wfile(td.path().join("project/.gitignore"), "!keep.tmp\nnested.log\n");
+
+        let mut m = one_matcher(&builder(&root));
+        assert_eq!(m.root(), root);
+        assert!(matchedf(&mut m, "src/drop.tmp").is_ignore());
+        assert!(matchedf(&mut m, "src/keep.tmp").is_whitelist());
+        assert!(matchedf(&mut m, "src/nested.log").is_ignore());
+        assert!(matchedf(&mut m, "src/ok.rs").is_none());
+    }
+
+    // Test that an anchored rule in a child directory is matched relative to
+    // that directory, not relative to the configured root.
+    #[test]
+    fn anchored_child_rule_uses_child_root() {
+        let td = tmpdir();
+        let root = td.path().join("root");
+        mkdirp(root.join("a"));
+        wfile(root.join("a/.ignore"), "/foo\n");
+
+        let mut m = one_matcher(&builder(&root));
+        assert!(matchedf(&mut m, "a/foo").is_ignore());
+        assert!(matchedf(&mut m, "a/b/foo").is_none());
+    }
+
+    // Test that a leading `./` impacts how the rules are matched.
+    #[cfg(not(windows))]
+    #[test]
+    fn leading_dot_slash_impacts_matching() {
+        let td = tmpdir();
+        let root = td.path().join("root");
+        mkdirp(root.join("a"));
+        wfile(root.join(".ignore"), "/foo\n");
+        wfile(root.join("a/.ignore"), "/foo\n");
+
+        let mut m = one_matcher(&builder(&root));
+        assert!(matchedf(&mut m, "foo").is_ignore());
+        assert!(matchedf(&mut m, "./foo").is_none());
+        assert!(matchedf(&mut m, "a/allowed").is_none());
+        assert!(matchedf(&mut m, "a/foo").is_ignore());
+        assert!(matchedf(&mut m, "./a/foo").is_none());
+    }
+
+    // Test that custom ignore files are respected.
+    #[test]
+    fn parent_ignore_and_custom_ignore() {
+        let td = tmpdir();
+        let root = td.path().join("project/work");
+        mkdirp(root.join("src"));
+        wfile(td.path().join(".ignore"), "*.cache\n");
+        wfile(td.path().join(".rgignore"), "*.svg\n");
+        wfile(td.path().join("project/.ignore"), "!keep.cache\n");
+        wfile(td.path().join("project/.rgignore"), "!keep.svg\n");
+
+        let mut builder = builder(&root);
+        builder.add_custom_ignore_filename(".rgignore");
+        let mut m = one_matcher(&builder);
+        assert!(matchedf(&mut m, "src/drop.cache").is_ignore());
+        assert!(matchedf(&mut m, "src/keep.cache").is_whitelist());
+        assert!(matchedf(&mut m, "src/drop.svg").is_ignore());
+        assert!(matchedf(&mut m, "src/keep.svg").is_whitelist());
+    }
+
+    // Test that glob overrides take precedence over ignore files.
+    #[test]
+    fn glob_overrides_are_applied() {
+        let td = tmpdir();
+        wfile(td.path().join(".ignore"), "keep.rs\n!drop.rs\n");
+
+        let mut overrides = OverrideBuilder::new(td.path());
+        overrides.add("keep.rs").unwrap();
+        overrides.add("!drop.rs").unwrap();
+        let mut b = builder(td.path());
+        b.overrides(overrides.build().unwrap());
+        let mut m = one_matcher(&b);
+
+        assert!(matchedf(&mut m, "keep.rs").is_whitelist());
+        assert!(matchedf(&mut m, "drop.rs").is_ignore());
+    }
+
+    // Test that an override-ignored directory prevents matching rules below
+    // it, just as it prevents a traversal from descending into the directory.
+    #[test]
+    fn glob_overrides_apply_to_ancestors() {
+        let td = tmpdir();
+        mkdirp(td.path().join("blocked"));
+        wfile(td.path().join("blocked/.ignore"), "!keep.rs\n");
+
+        let mut overrides = OverrideBuilder::new(td.path());
+        overrides.add("!blocked/").unwrap();
+        let mut b = builder(td.path());
+        b.overrides(overrides.build().unwrap());
+        let mut m = one_matcher(&b);
+
+        assert!(matchedf(&mut m, "blocked/keep.rs").is_ignore());
+    }
+
+    // Test that file type selections are applied to files, but not
+    // directories.
+    #[test]
+    fn file_types_are_applied() {
+        let td = tmpdir();
+        mkdirp(td.path().join("src"));
+
+        let mut types = TypesBuilder::new();
+        types.add("rust", "*.rs").unwrap();
+        types.select("rust");
+        let mut b = builder(td.path());
+        b.types(types.build().unwrap());
+        let mut m = one_matcher(&b);
+
+        assert!(matchedd(&mut m, "src").is_none());
+        assert!(matchedf(&mut m, "src/lib.rs").is_whitelist());
+        assert!(matchedf(&mut m, "README.md").is_ignore());
+    }
+
+    #[test]
+    fn directly_ignored_directory_is_not_descended() {
+        let td = tmpdir();
+        mkdirp(td.path().join(".git"));
+        mkdirp(td.path().join("blocked"));
+        wfile(td.path().join(".gitignore"), "blocked/\n");
+
+        let mut m = one_matcher(&builder(td.path()));
+        let dir = matchedd(&mut m, "blocked");
+        assert!(dir.is_ignore());
+        assert!(!dir.should_descend());
+    }
+
+    // Test that when a directory is ignored, anything below it always ignored
+    // even when there are explicit whitelist rules. This matches directory
+    // traversal semantics.
+    #[test]
+    fn ignored_ancestor_wins() {
+        let td = tmpdir();
+        mkdirp(td.path().join(".git"));
+        mkdirp(td.path().join("blocked"));
+        mkdirp(td.path().join("open"));
+        // This is the key line: since the entire `blocked` directory is
+        // ignored, a proper file traversal won't ever descend into it. So
+        // `blocked/keep.rs` should be ignored even if there are ignore rules
+        // "beneath" it that whitelist it.
+        wfile(td.path().join(".gitignore"), "blocked/\n!blocked/keep.rs\n");
+        wfile(td.path().join("blocked/.gitignore"), "!keep.rs\n");
+
+        let mut m = one_matcher(&builder(td.path()));
+        assert!(matchedf(&mut m, "blocked/keep.rs").is_ignore());
+        assert!(matchedf(&mut m, "blocked/other.rs").is_ignore());
+        assert!(matchedf(&mut m, "open/keep.rs").is_none());
+    }
+
+    // Test that we respect git boundaries. And that we don't respect git
+    // boundaries when not configured to do so.
+    #[test]
+    fn respects_git_repository_boundaries() {
+        let td = tmpdir();
+        let root = td.path().join("repo/src");
+        mkdirp(td.path().join("repo/.git"));
+        mkdirp(&root);
+        wfile(td.path().join(".gitignore"), "outside-rule\n");
+        wfile(td.path().join(".ignore"), "tool-rule\n");
+        wfile(td.path().join("repo/.gitignore"), "inside-rule\n");
+
+        let mut m = one_matcher(&builder(&root));
+        assert!(matchedf(&mut m, "inside-rule").is_ignore());
+        assert!(matchedf(&mut m, "outside-rule").is_none());
+        assert!(matchedf(&mut m, "tool-rule").is_ignore());
+
+        let mut no_git_required = builder(&root);
+        no_git_required.require_git(false);
+        let mut m = one_matcher(&no_git_required);
+        assert!(matchedf(&mut m, "outside-rule").is_ignore());
+    }
+
+    // Test that when a gitignore matcher in a parent directory is created, we
+    // reuse that matcher from memory even if it's changed on disk.
+    #[test]
+    fn compiled_matchers_are_reused() {
+        let td = tmpdir();
+        mkdirp(td.path().join("a"));
+        wfile(td.path().join("a/.ignore"), "*.tmp\n");
+
+        let mut m = one_matcher(&builder(td.path()));
+        assert!(matchedf(&mut m, "a/first.tmp").is_ignore());
+
+        // Below demonstrates that this new ignore file contents
+        // aren't actually picked up because it was already loaded.
+        wfile(td.path().join("a/.ignore"), "!*.tmp\n*.rs\n");
+        assert!(matchedf(&mut m, "a/first.tmp").is_ignore());
+        assert!(matchedf(&mut m, "a/second.tmp").is_ignore());
+        assert!(matchedf(&mut m, "a/keep.rs").is_none());
+        // To get the new ignore file, we need to rebuild the matcher.
+        let mut m = one_matcher(&builder(td.path()));
+        assert!(matchedf(&mut m, "a/first.tmp").is_whitelist());
+        assert!(matchedf(&mut m, "a/second.tmp").is_whitelist());
+        assert!(matchedf(&mut m, "a/keep.rs").is_ignore());
+    }
+
+    #[test]
+    fn cached_allowed_parent_matches_children() {
+        let td = tmpdir();
+        mkdirp(td.path().join("a/b"));
+        wfile(td.path().join("a/b/.ignore"), "ignored\n");
+
+        let mut m = one_matcher(&builder(td.path()));
+        assert!(matchedf(&mut m, "a/b/allowed").is_none());
+        assert!(matches!(
+            m.dirs.get(Path::new("a/b")),
+            Some(CachedDir::Allowed(_))
+        ));
+        assert!(matchedf(&mut m, "a/b/ignored").is_ignore());
+    }
+
+    #[test]
+    fn cached_ignored_parent_matches_children() {
+        let td = tmpdir();
+        mkdirp(td.path().join("blocked"));
+        wfile(td.path().join(".ignore"), "blocked/\n");
+
+        let mut m = one_matcher(&builder(td.path()));
+        assert!(matchedf(&mut m, "blocked/first").is_ignore());
+        assert!(matches!(
+            m.dirs.get(Path::new("blocked")),
+            Some(CachedDir::Ignored)
+        ));
+        assert!(matchedf(&mut m, "blocked/second").is_ignore());
+    }
+
+    #[test]
+    fn cached_parent_matcher_is_used_for_directory() {
+        let td = tmpdir();
+        mkdirp(td.path().join("a/b"));
+        wfile(td.path().join("a/b/.ignore"), "**\n");
+
+        let mut m = one_matcher(&builder(td.path()));
+        assert!(matchedf(&mut m, "a/b/file").is_ignore());
+        assert!(matches!(
+            m.dirs.get(Path::new("a/b")),
+            Some(CachedDir::Allowed(_))
+        ));
+        let dir = matchedd(&mut m, "a/b");
+        assert!(dir.is_none());
+        assert!(dir.should_descend());
+    }
+
+    // Like `compiled_matchers_are_reused`, but with multiple roots.
+    #[test]
+    fn compiled_multi_matchers_are_reused() {
+        let td = tmpdir();
+        mkdirp(td.path().join("a/b/c"));
+
+        wfile(td.path().join("a/.ignore"), "*.tmp\n");
+        let mut mats = matchers(&builders([
+            td.path().join("a/b"),
+            td.path().join("a/b/c"),
+        ]));
+        assert!(matchedf(&mut mats[0], "first.tmp").is_ignore());
+        assert!(matchedf(&mut mats[0], "c/first.tmp").is_ignore());
+
+        // Even though we haven't used the second matcher, it should still
+        // reuse the `a/.ignore` above. If it didn't, then `a/b/c/first.tmp`
+        // below would be whitelisted.
+        wfile(td.path().join("a/.ignore"), "!*.tmp\n");
+        assert!(matchedf(&mut mats[1], "first.tmp").is_ignore());
+    }
+
+    #[test]
+    fn compiled_multi_child_matchers_are_not_reused() {
+        let td = tmpdir();
+        mkdirp(td.path().join("a/b/c/d/e"));
+
+        wfile(td.path().join("a/b/c/d/e/.ignore"), "*.tmp\n");
+        let mut mats = matchers(&builders([
+            td.path().join("a/b"),
+            td.path().join("a/b/c"),
+        ]));
+        // Some sanity checking first.
+        assert!(matchedf(&mut mats[0], "c/first.tmp").is_none());
+        assert!(matchedf(&mut mats[0], "c/d/first.tmp").is_none());
+        assert!(matchedf(&mut mats[0], "c/d/e/first.tmp").is_ignore());
+
+        // Now write a new ignore file at the same location as above
+        // and check that the other matcher still uses the "stale" data.
+        wfile(td.path().join("a/b/c/d/e/.ignore"), "!*.tmp\n");
+        assert!(matchedf(&mut mats[1], "first.tmp").is_none());
+        assert!(matchedf(&mut mats[1], "d/first.tmp").is_none());
+        // This is the punch line: because we didn't load `mats[1]` before
+        // changing the ignore file, it loads it here and thus this path gets
+        // whitelisted.
+        assert!(matchedf(&mut mats[1], "d/e/first.tmp").is_whitelist());
+        // ... but `mats[0]` still uses the stale gitignore matcher cached in
+        // memory!
+        assert!(matchedf(&mut mats[0], "c/d/e/first.tmp").is_ignore());
+
+        // If we rebuilder the matcher... then we force reloading and they're
+        // now consistent with one another.
+        let mut mats = matchers(&builders([
+            td.path().join("a/b"),
+            td.path().join("a/b/c"),
+        ]));
+        assert!(matchedf(&mut mats[0], "c/d/e/first.tmp").is_whitelist());
+        assert!(matchedf(&mut mats[1], "d/e/first.tmp").is_whitelist());
+    }
+
+    // Tests that even when there is an error with a glob pattern, we still
+    // respect other glob patterns that are valid.
+    #[test]
+    fn partial_errors_keep_valid_rules() {
+        let td = tmpdir();
+        let root = td.path().join("work");
+        mkdirp(&root);
+        wfile(td.path().join(".ignore"), "{bad\n*.tmp\n");
+
+        let mut builder = builder(&root);
+        builder.git_ignore(false).git_exclude(false);
+        let mut m = one_matcher(&builder);
+        let (matched, err) = m.matched_with_errors("drop.tmp", false);
+        assert!(err.is_some());
+        assert!(matched.is_ignore());
+    }
+
+    // Tests that parent rules are not respected if the matcher is configured
+    // not to do so.
+    #[test]
+    fn parent_loading_can_be_disabled() {
+        let td = tmpdir();
+        let root = td.path().join("work");
+        mkdirp(&root);
+        wfile(td.path().join(".ignore"), "parent-rule\n");
+        wfile(root.join(".ignore"), "root-rule\n");
+
+        let mut b = builder(&root);
+        b.parents(false);
+        let mut m = one_matcher(&b);
+        assert!(matchedf(&mut m, "parent-rule").is_none());
+        assert!(matchedf(&mut m, "root-rule").is_ignore());
+
+        // Sanity check that without `parents(false)`, the parent rule is
+        // respected.
+        let mut m = one_matcher(&builder(&root));
+        assert!(matchedf(&mut m, "parent-rule").is_ignore());
+        assert!(matchedf(&mut m, "root-rule").is_ignore());
+    }
+
+    // Tests that we can normalize a file path that isn't already in "normal"
+    // relative form, and then use that to match on ignore files.
+    #[test]
+    fn paths_are_relative_to_the_root() {
+        let td = tmpdir();
+        let root = td.path().join("root");
+        let outside = td.path().join("outside");
+        mkdirp(&root);
+        mkdirp(&outside);
+        wfile(root.join(".ignore"), "file\n");
+
+        let mut m = one_matcher(&builder(&root));
+        assert!(matchedd(&mut m, "").is_none());
+        assert!(matchedd(&mut m, ".").is_none());
+        assert!(matchedf(&mut m, "file").is_ignore());
+        // Doesn't work because it isn't relative to the root. It's absolute.
+        assert!(matchedf(&mut m, root.join("file")).is_none());
+        // Also doesn't work because while it's relative, it contains `..`.
+        assert!(matchedf(&mut m, "dir/../file").is_none());
+
+        let norm = m.normalize(root.join("dir/../file")).unwrap();
+        assert_eq!(norm, Path::new("file"));
+        assert!(matchedf(&mut m, "file").is_ignore());
+
+        // Doesn't normalize because its an absolute path outside of our root.
+        assert_eq!(m.normalize(outside.join("file")), None);
+    }
+
+    // Tests that two matchers in two different directories correctly interpret
+    // the same parent gitignore file.
+    #[test]
+    fn multiple_roots_keep_their_own_context() {
+        let td = tmpdir();
+        let root_a = td.path().join("a");
+        let root_b = td.path().join("b");
+        mkdirp(td.path().join(".git"));
+        mkdirp(&root_a);
+        mkdirp(&root_b);
+        wfile(td.path().join(".gitignore"), "/a/*.tmp\n/b/*.log\n");
+
+        let mut builder =
+            builders([root_a.as_path(), Path::new("-"), root_b.as_path()]);
+        builder.git_global(false);
+        let mut ms = matchers(&builder);
+        assert_eq!(ms.len(), 3);
+        assert_eq!(ms[0].root(), root_a);
+        assert_eq!(ms[1].root(), Path::new("-"));
+        assert_eq!(ms[2].root(), root_b);
+        assert!(matchedf(&mut ms[0], "drop.tmp").is_ignore());
+        assert!(matchedf(&mut ms[0], "keep.log").is_none());
+        assert!(matchedf(&mut ms[1], "anything").is_none());
+        assert_eq!(ms[1].normalize("anything"), None);
+        assert!(matchedf(&mut ms[2], "keep.tmp").is_none());
+        assert!(matchedf(&mut ms[2], "drop.log").is_ignore());
+    }
+
+    // Tests that only the exact `-` root represents standard input.
+    #[test]
+    fn dot_dash_root_is_not_stdin() {
+        let m = one_matcher(&builder("./-"));
+        assert_eq!(m.root(), Path::new("./-"));
+        assert_eq!(m.normalize("./-/file"), Some(PathBuf::from("file")));
+    }
+
+    #[test]
+    fn stdin_is_inert_with_depth_limits() {
+        let mut b = builder("-");
+        b.min_depth(Some(2));
+        let mut m = one_matcher(&b);
+        let mat = matchedf(&mut m, "file");
+        assert!(mat.is_none());
+        assert!(mat.is_within_depth());
+
+        let mut b = builder("-");
+        b.max_depth(Some(0));
+        let mut m = one_matcher(&b);
+        let mat = matchedd(&mut m, "dir");
+        assert!(mat.is_none());
+        assert!(mat.is_within_depth());
+        assert!(mat.should_descend());
+    }
+
+    // Tests that ignore matching works lexically, and doesn't accidentally
+    // resolve symbolic links.
+    #[cfg(unix)]
+    #[test]
+    fn symlink_path_stays_under_lexical_root() {
+        use std::os::unix::fs::symlink;
+
+        let td = tmpdir();
+        let root = td.path().join("root");
+        let outside = td.path().join("outside");
+        mkdirp(&root);
+        mkdirp(&outside);
+        wfile(root.join(".ignore"), "link\n");
+        wfile(outside.join("target"), "");
+        symlink(outside.join("target"), root.join("link")).unwrap();
+
+        let mut m = one_matcher(&builder(&root));
+        assert!(matchedf(&mut m, "link").is_ignore());
+    }
+
+    #[test]
+    fn depth_limits() {
+        let td = tmpdir();
+        mkdirp(td.path().join("a/b/c/d"));
+
+        let mut b = builder(td.path());
+        b.min_depth(Some(2)).max_depth(Some(3));
+        let mut m = one_matcher(&b);
+
+        let dir = matchedd(&mut m, "a");
+        assert!(!dir.is_within_depth());
+        assert!(dir.should_descend());
+        assert!(matchedf(&mut m, "file").is_ignore());
+
+        let dir = matchedd(&mut m, "a/b");
+        assert!(dir.is_within_depth());
+        assert!(dir.should_descend());
+        assert!(!matchedf(&mut m, "a/file").is_ignore());
+
+        let dir = matchedd(&mut m, "a/b/c");
+        assert!(dir.is_within_depth());
+        assert!(!dir.should_descend());
+        assert!(!matchedf(&mut m, "a/b/file").is_ignore());
+        assert!(matchedf(&mut m, "a/b/c/file").is_ignore());
+
+        let dir = matchedd(&mut m, "a/b/c/d");
+        assert!(dir.is_ignore());
+        assert!(!dir.is_within_depth());
+        assert!(!dir.should_descend());
+        assert!(matchedf(&mut m, "a/b/c/d/file").is_ignore());
+    }
+
+    #[test]
+    fn depth_limits_apply_to_root() {
+        let td = tmpdir();
+
+        let mut b = builder(td.path());
+        b.min_depth(Some(1));
+        let mut m = one_matcher(&b);
+        for path in ["", "."] {
+            let root = matchedd(&mut m, path);
+            assert!(root.is_none());
+            assert!(!root.is_within_depth());
+            assert!(root.should_descend());
+        }
+
+        let mut b = builder(td.path());
+        b.max_depth(Some(0));
+        let mut m = one_matcher(&b);
+        for path in ["", "."] {
+            let root = matchedd(&mut m, path);
+            assert!(root.is_none());
+            assert!(root.is_within_depth());
+            assert!(!root.should_descend());
+        }
+    }
+
+    #[test]
+    fn max_filesize() {
+        let td = tmpdir();
+        mkdirp(td.path().join("dir"));
+        wfile(td.path().join("empty"), "");
+        wfile(td.path().join("at-limit"), "12345");
+        wfile(td.path().join("over-limit"), "123456");
+
+        let mut b = builder(td.path());
+        b.max_filesize(Some(5));
+        let mut m = one_matcher(&b);
+
+        assert!(matchedf(&mut m, "empty").is_none());
+        assert!(matchedf(&mut m, "at-limit").is_none());
+        assert!(matchedf(&mut m, "over-limit").is_ignore());
+
+        let dir = matchedd(&mut m, "dir");
+        assert!(dir.is_none());
+        assert!(dir.should_descend());
+    }
+
+    #[test]
+    fn max_filesize_does_not_stat_ignored_file() {
+        let td = tmpdir();
+        wfile(td.path().join(".ignore"), "ignored\n");
+
+        let mut b = builder(td.path());
+        b.max_filesize(Some(0));
+        let mut m = one_matcher(&b);
+        let (mat, err) = m.matched_with_errors("ignored", false);
+        assert!(mat.is_ignore());
+        assert!(err.is_none(), "ignored missing file was statted: {err:?}");
+    }
+
+    #[cfg(unix)]
+    #[test]
+    fn max_filesize_respects_follow_links() {
+        use std::os::unix::fs::symlink;
+
+        let td = tmpdir();
+        wfile(
+            td.path().join("target"),
+            "target contents are much longer than the size limit",
+        );
+        symlink("target", td.path().join("link")).unwrap();
+
+        let mut b = builder(td.path());
+        b.max_filesize(Some(10));
+        let mut m = one_matcher(&b);
+        assert!(matchedf(&mut m, "link").is_none());
+
+        b.follow_links(true);
+        let mut m = one_matcher(&b);
+        assert!(matchedf(&mut m, "link").is_ignore());
+    }
+
+    #[test]
+    fn hidden_files_and_directories() {
+        let td = tmpdir();
+        mkdirp(td.path().join(".hidden-dir"));
+        mkdirp(td.path().join("visible-dir"));
+        wfile(td.path().join(".hidden-file"), "");
+        wfile(td.path().join("visible-file"), "");
+
+        let mut m = one_matcher(&builder(td.path()));
+        assert!(matchedf(&mut m, ".hidden-file").is_ignore());
+        let dir = matchedd(&mut m, ".hidden-dir");
+        assert!(dir.is_ignore());
+        assert!(!dir.should_descend());
+        assert!(matchedf(&mut m, "visible-file").is_none());
+        let dir = matchedd(&mut m, "visible-dir");
+        assert!(dir.is_none());
+        assert!(dir.should_descend());
+
+        let mut b = builder(td.path());
+        b.hidden(false);
+        let mut m = one_matcher(&b);
+        assert!(matchedf(&mut m, ".hidden-file").is_none());
+        let dir = matchedd(&mut m, ".hidden-dir");
+        assert!(dir.is_none());
+        assert!(dir.should_descend());
+    }
+
+    #[test]
+    fn gitignore_whitelist_overrides_hidden_filter() {
+        let td = tmpdir();
+        mkdirp(td.path().join(".git"));
+        mkdirp(td.path().join(".hidden-dir"));
+        wfile(td.path().join(".hidden-file"), "");
+        wfile(td.path().join(".gitignore"), "!.hidden-file\n!.hidden-dir/\n");
+
+        let mut m = one_matcher(&builder(td.path()));
+        assert!(matchedf(&mut m, ".hidden-file").is_whitelist());
+        let dir = matchedd(&mut m, ".hidden-dir");
+        assert!(dir.is_whitelist());
+        assert!(dir.should_descend());
+    }
+
+    #[test]
+    fn descendants_of_hidden_directories_are_ignored() {
+        let td = tmpdir();
+        mkdirp(td.path().join(".git"));
+        mkdirp(td.path().join(".hidden/nested"));
+        mkdirp(td.path().join("visible/.hidden"));
+        wfile(td.path().join(".hidden/file"), "");
+        wfile(td.path().join(".hidden/nested/file"), "");
+        wfile(td.path().join("visible/.hidden/file"), "");
+        wfile(td.path().join(".hidden/.gitignore"), "!file\n");
+
+        let mut m = one_matcher(&builder(td.path()));
+        assert!(matchedf(&mut m, ".hidden/file").is_ignore());
+        assert!(matchedf(&mut m, ".hidden/nested/file").is_ignore());
+        assert!(matchedf(&mut m, "visible/.hidden/file").is_ignore());
+    }
+
+    #[test]
+    fn whitelisted_hidden_directory_allows_descendants() {
+        let td = tmpdir();
+        mkdirp(td.path().join(".git"));
+        mkdirp(td.path().join(".hidden"));
+        wfile(td.path().join(".hidden/file"), "");
+        wfile(td.path().join(".gitignore"), "!.hidden/\n");
+
+        let mut m = one_matcher(&builder(td.path()));
+        let dir = matchedd(&mut m, ".hidden");
+        assert!(dir.is_whitelist());
+        assert!(dir.should_descend());
+        assert!(matchedf(&mut m, ".hidden/file").is_none());
+    }
+
+    #[test]
+    fn hidden_directories_outside_depth_limits() {
+        let td = tmpdir();
+        mkdirp(td.path().join("a/.hidden"));
+
+        let mut b = builder(td.path());
+        b.min_depth(Some(3));
+        let mut m = one_matcher(&b);
+        let dir = matchedd(&mut m, "a/.hidden");
+        assert!(dir.is_ignore());
+        assert!(!dir.is_within_depth());
+
+        let mut b = builder(td.path());
+        b.max_depth(Some(1));
+        let mut m = one_matcher(&b);
+        let dir = matchedd(&mut m, "a/.hidden");
+        assert!(dir.is_ignore());
+        assert!(!dir.is_within_depth());
+    }
+}
diff --git a/crates/ignore/src/lib.rs b/crates/ignore/src/lib.rs
index 609004c4e..b9c9a3ece 100644
--- a/crates/ignore/src/lib.rs
+++ b/crates/ignore/src/lib.rs
@@ -48,13 +48,16 @@ See the documentation for `WalkBuilder` for many other options.
 
 use std::path::{Path, PathBuf};
 
+pub use crate::incremental::{IncrementalIgnore, IncrementalMatch};
 pub use crate::walk::{
-    DirEntry, ParallelVisitor, ParallelVisitorBuilder, Walk, WalkBuilder, WalkParallel, WalkState,
+    DirEntry, ParallelVisitor, ParallelVisitorBuilder, Walk, WalkBuilder,
+    WalkParallel, WalkState,
 };
 
 mod default_types;
 mod dir;
 pub mod gitignore;
+mod incremental;
 pub mod overrides;
 mod pathutil;
 pub mod types;
@@ -120,34 +123,31 @@ impl Clone for Error {
     fn clone(&self) -> Error {
         match *self {
             Error::Partial(ref errs) => Error::Partial(errs.clone()),
-            Error::WithLineNumber { line, ref err } => Error::WithLineNumber {
-                line,
-                err: err.clone(),
-            },
-            Error::WithPath { ref path, ref err } => Error::WithPath {
-                path: path.clone(),
-                err: err.clone(),
-            },
-            Error::WithDepth { depth, ref err } => Error::WithDepth {
-                depth,
-                err: err.clone(),
-            },
-            Error::Loop {
-                ref ancestor,
-                ref child,
-            } => Error::Loop {
+            Error::WithLineNumber { line, ref err } => {
+                Error::WithLineNumber { line, err: err.clone() }
+            }
+            Error::WithPath { ref path, ref err } => {
+                Error::WithPath { path: path.clone(), err: err.clone() }
+            }
+            Error::WithDepth { depth, ref err } => {
+                Error::WithDepth { depth, err: err.clone() }
+            }
+            Error::Loop { ref ancestor, ref child } => Error::Loop {
                 ancestor: ancestor.clone(),
                 child: child.clone(),
             },
             Error::Io(ref err) => match err.raw_os_error() {
                 Some(e) => Error::Io(std::io::Error::from_raw_os_error(e)),
-                None => Error::Io(std::io::Error::new(err.kind(), err.to_string())),
+                None => {
+                    Error::Io(std::io::Error::new(err.kind(), err.to_string()))
+                }
             },
-            Error::Glob { ref glob, ref err } => Error::Glob {
-                glob: glob.clone(),
-                err: err.clone(),
-            },
-            Error::UnrecognizedFileType(ref err) => Error::UnrecognizedFileType(err.clone()),
+            Error::Glob { ref glob, ref err } => {
+                Error::Glob { glob: glob.clone(), err: err.clone() }
+            }
+            Error::UnrecognizedFileType(ref err) => {
+                Error::UnrecognizedFileType(err.clone())
+            }
             Error::InvalidDefinition => Error::InvalidDefinition,
         }
     }
@@ -269,19 +269,14 @@ impl Error {
 
     /// Turn an error into a tagged error with the given depth.
     fn with_depth(self, depth: usize) -> Error {
-        Error::WithDepth {
-            depth,
-            err: Box::new(self),
-        }
+        Error::WithDepth { depth, err: Box::new(self) }
     }
 
     /// Turn an error into a tagged error with the given file path and line
     /// number. If path is empty, then it is omitted from the error.
     fn tagged<P: AsRef<Path>>(self, path: P, lineno: u64) -> Error {
-        let errline = Error::WithLineNumber {
-            line: lineno,
-            err: Box::new(self),
-        };
+        let errline =
+            Error::WithLineNumber { line: lineno, err: Box::new(self) };
         if path.as_ref().as_os_str().is_empty() {
             return errline;
         }
@@ -301,12 +296,12 @@ impl Error {
             };
         }
         let path = err.path().map(|p| p.to_path_buf());
-        let mut ig_err = Error::Io(std::io::Error::from(err));
+        let mut ig_err = Error::WithDepth {
+            depth,
+            err: Box::new(Error::Io(std::io::Error::from(err))),
+        };
         if let Some(path) = path {
-            ig_err = Error::WithPath {
-                path,
-                err: Box::new(ig_err),
-            };
+            ig_err = Error::WithPath { path, err: Box::new(ig_err) };
         }
         ig_err
     }
@@ -333,7 +328,8 @@ impl std::fmt::Display for Error {
     fn fmt(&self, f: &mut std::fmt::Formatter<'_>) -> std::fmt::Result {
         match *self {
             Error::Partial(ref errs) => {
-                let msgs: Vec<String> = errs.iter().map(|err| err.to_string()).collect();
+                let msgs: Vec<String> =
+                    errs.iter().map(|err| err.to_string()).collect();
                 write!(f, "{}", msgs.join("\n"))
             }
             Error::WithLineNumber { line, ref err } => {
@@ -343,10 +339,7 @@ impl std::fmt::Display for Error {
                 write!(f, "{}: {}", path.display(), err)
             }
             Error::WithDepth { ref err, .. } => err.fmt(f),
-            Error::Loop {
-                ref ancestor,
-                ref child,
-            } => write!(
+            Error::Loop { ref ancestor, ref child } => write!(
                 f,
                 "File system loop found: \
                            {} points to an ancestor {}",
@@ -354,14 +347,8 @@ impl std::fmt::Display for Error {
                 ancestor.display()
             ),
             Error::Io(ref err) => err.fmt(f),
-            Error::Glob {
-                glob: None,
-                ref err,
-            } => write!(f, "{}", err),
-            Error::Glob {
-                glob: Some(ref glob),
-                ref err,
-            } => {
+            Error::Glob { glob: None, ref err } => write!(f, "{}", err),
+            Error::Glob { glob: Some(ref glob), ref err } => {
                 write!(f, "error parsing glob '{}': {}", glob, err)
             }
             Error::UnrecognizedFileType(ref ty) => {
@@ -507,7 +494,8 @@ mod tests {
     };
 
     /// A convenient result type alias.
-    pub(crate) type Result<T> = std::result::Result<T, Box<dyn std::error::Error + Send + Sync>>;
+    pub(crate) type Result<T> =
+        std::result::Result<T, Box<dyn std::error::Error + Send + Sync>>;
 
     macro_rules! err {
         ($($tt:tt)*) => {
@@ -545,8 +533,9 @@ mod tests {
                 if path.is_dir() {
                     continue;
                 }
-                fs::create_dir_all(&path)
-                    .map_err(|e| err!("failed to create {}: {}", path.display(), e))?;
+                fs::create_dir_all(&path).map_err(|e| {
+                    err!("failed to create {}: {}", path.display(), e)
+                })?;
                 return Ok(TempDir(path));
             }
             Err(err!("failed to create temp dir after {} tries", TRIES))
diff --git a/crates/ignore/src/overrides.rs b/crates/ignore/src/overrides.rs
index afb9f16ce..005cae8f2 100644
--- a/crates/ignore/src/overrides.rs
+++ b/crates/ignore/src/overrides.rs
@@ -94,7 +94,11 @@ impl Override {
     /// given) is stripped. If there is no common suffix/prefix overlap, then
     /// `path` is assumed to reside in the same directory as the root path for
     /// this set of overrides.
-    pub fn matched<'a, P: AsRef<Path>>(&'a self, path: P, is_dir: bool) -> Match<Glob<'a>> {
+    pub fn matched<'a, P: AsRef<Path>>(
+        &'a self,
+        path: P,
+        is_dir: bool,
+    ) -> Match<Glob<'a>> {
         if self.is_empty() {
             return Match::None;
         }
@@ -146,7 +150,10 @@ impl OverrideBuilder {
     /// affected.
     ///
     /// This is disabled by default.
-    pub fn case_insensitive(&mut self, yes: bool) -> Result<&mut OverrideBuilder, Error> {
+    pub fn case_insensitive(
+        &mut self,
+        yes: bool,
+    ) -> Result<&mut OverrideBuilder, Error> {
         // TODO: This should not return a `Result`. Fix this in the next semver
         // release.
         self.builder.case_insensitive(yes)?;
@@ -276,11 +283,8 @@ mod tests {
 
     #[test]
     fn default_case_sensitive() {
-        let ov = OverrideBuilder::new(ROOT)
-            .add("*.html")
-            .unwrap()
-            .build()
-            .unwrap();
+        let ov =
+            OverrideBuilder::new(ROOT).add("*.html").unwrap().build().unwrap();
         assert!(ov.matched("foo.html", false).is_whitelist());
         assert!(ov.matched("foo.HTML", false).is_ignore());
         assert!(ov.matched("foo.htm", false).is_ignore());
diff --git a/crates/ignore/src/pathutil.rs b/crates/ignore/src/pathutil.rs
index 0ceb5a356..5de8c106c 100644
--- a/crates/ignore/src/pathutil.rs
+++ b/crates/ignore/src/pathutil.rs
@@ -2,55 +2,89 @@ use std::{ffi::OsStr, path::Path};
 
 use crate::walk::DirEntry;
 
-/// Returns true if and only if this entry is considered to be hidden.
+/// Returns true if and only if this path is considered to be hidden.
 ///
-/// This only returns true if the base name of the path starts with a `.`.
+/// # Platform behavior
 ///
-/// On Unix, this implements a more optimized check.
-#[cfg(unix)]
-pub(crate) fn is_hidden(dent: &DirEntry) -> bool {
-    use std::os::unix::ffi::OsStrExt;
-
-    if let Some(name) = file_name(dent.path()) {
-        name.as_bytes().get(0) == Some(&b'.')
-    } else {
-        false
-    }
-}
-
-/// Returns true if and only if this entry is considered to be hidden.
+/// ## Windows
 ///
-/// On Windows, this returns true if one of the following is true:
+/// This returns true if one of the following is true:
 ///
 /// * The base name of the path starts with a `.`.
 /// * The file attributes have the `HIDDEN` property set.
-#[cfg(windows)]
-pub(crate) fn is_hidden(dent: &DirEntry) -> bool {
-    use std::os::windows::fs::MetadataExt;
-    use winapi_util::file;
-
-    // This looks like we're doing an extra stat call, but on Windows, the
-    // directory traverser reuses the metadata retrieved from each directory
-    // entry and stores it on the DirEntry itself. So this is "free."
-    if let Ok(md) = dent.metadata() {
-        if file::is_hidden(md.file_attributes() as u64) {
-            return true;
-        }
-    }
-    if let Some(name) = file_name(dent.path()) {
-        name.to_str().map(|s| s.starts_with(".")).unwrap_or(false)
-    } else {
-        false
-    }
-}
-
-/// Returns true if and only if this entry is considered to be hidden.
+///
+/// ## All other platforms
 ///
 /// This only returns true if the base name of the path starts with a `.`.
-#[cfg(not(any(unix, windows)))]
-pub(crate) fn is_hidden(dent: &DirEntry) -> bool {
-    if let Some(name) = file_name(dent.path()) {
-        name.to_str().map(|s| s.starts_with(".")).unwrap_or(false)
+pub(crate) fn is_hidden_path(dent: &Path) -> bool {
+    #[cfg(not(windows))]
+    fn imp(path: &Path) -> bool {
+        is_hidden_path_only(path)
+    }
+
+    #[cfg(windows)]
+    fn imp(path: &Path) -> bool {
+        use std::os::windows::fs::MetadataExt;
+        use winapi_util::file;
+
+        if let Ok(md) = path.metadata() {
+            if file::is_hidden(md.file_attributes() as u64) {
+                return true;
+            }
+        }
+        is_hidden_path_only(path)
+    }
+
+    imp(dent)
+}
+
+/// Returns true if and only if this directory entry is considered to be
+/// hidden.
+///
+/// # Platform behavior
+///
+/// ## Windows
+///
+/// This returns true if one of the following is true:
+///
+/// * The base name of the path starts with a `.`.
+/// * The file attributes have the `HIDDEN` property set.
+///
+/// ## All other platforms
+///
+/// This only returns true if the base name of the path starts with a `.`.
+pub(crate) fn is_hidden_entry(dent: &DirEntry) -> bool {
+    #[cfg(not(windows))]
+    fn imp(dent: &DirEntry) -> bool {
+        is_hidden_path_only(dent.path())
+    }
+
+    #[cfg(windows)]
+    fn imp(dent: &DirEntry) -> bool {
+        use std::os::windows::fs::MetadataExt;
+        use winapi_util::file;
+
+        // This looks like we're doing an extra stat call, but on Windows, the
+        // directory traverser reuses the metadata retrieved from each directory
+        // entry and stores it on the DirEntry itself. So this is "free."
+        if let Ok(md) = dent.metadata() {
+            if file::is_hidden(md.file_attributes() as u64) {
+                return true;
+            }
+        }
+        is_hidden_path_only(dent.path())
+    }
+
+    imp(dent)
+}
+
+/// Returns true if and only if this path is considered to be hidden from only
+/// the path itself.
+///
+/// This has the same behavior on all platforms.
+fn is_hidden_path_only(path: &Path) -> bool {
+    if let Some(name) = file_name(path) {
+        name.as_encoded_bytes().starts_with(b".")
     } else {
         false
     }
@@ -59,83 +93,79 @@ pub(crate) fn is_hidden(dent: &DirEntry) -> bool {
 /// Strip `prefix` from the `path` and return the remainder.
 ///
 /// If `path` doesn't have a prefix `prefix`, then return `None`.
-#[cfg(unix)]
 pub(crate) fn strip_prefix<'a, P: AsRef<Path> + ?Sized>(
     prefix: &'a P,
     path: &'a Path,
 ) -> Option<&'a Path> {
-    use std::os::unix::ffi::OsStrExt;
+    #[cfg(unix)]
+    fn imp<'a>(prefix: &'a Path, path: &'a Path) -> Option<&'a Path> {
+        use std::os::unix::ffi::OsStrExt;
 
-    let prefix = prefix.as_ref().as_os_str().as_bytes();
-    let path = path.as_os_str().as_bytes();
-    if prefix.len() > path.len() || prefix != &path[0..prefix.len()] {
-        None
-    } else {
-        Some(&Path::new(OsStr::from_bytes(&path[prefix.len()..])))
+        let prefix = prefix.as_os_str().as_bytes();
+        let path = path.as_os_str().as_bytes();
+        if prefix.len() > path.len() || prefix != &path[0..prefix.len()] {
+            None
+        } else {
+            Some(&Path::new(OsStr::from_bytes(&path[prefix.len()..])))
+        }
     }
-}
 
-/// Strip `prefix` from the `path` and return the remainder.
-///
-/// If `path` doesn't have a prefix `prefix`, then return `None`.
-#[cfg(not(unix))]
-pub(crate) fn strip_prefix<'a, P: AsRef<Path> + ?Sized>(
-    prefix: &'a P,
-    path: &'a Path,
-) -> Option<&'a Path> {
-    path.strip_prefix(prefix).ok()
+    #[cfg(not(unix))]
+    fn imp<'a>(prefix: &'a Path, path: &'a Path) -> Option<&'a Path> {
+        path.strip_prefix(prefix).ok()
+    }
+
+    imp(prefix.as_ref(), path)
 }
 
 /// Returns true if this file path is just a file name. i.e., Its parent is
 /// the empty string.
-#[cfg(unix)]
 pub(crate) fn is_file_name<P: AsRef<Path>>(path: P) -> bool {
-    use std::os::unix::ffi::OsStrExt;
-
-    use memchr::memchr;
-
-    let path = path.as_ref().as_os_str().as_bytes();
-    memchr(b'/', path).is_none()
-}
-
-/// Returns true if this file path is just a file name. i.e., Its parent is
-/// the empty string.
-#[cfg(not(unix))]
-pub(crate) fn is_file_name<P: AsRef<Path>>(path: P) -> bool {
-    path.as_ref()
-        .parent()
-        .map(|p| p.as_os_str().is_empty())
-        .unwrap_or(false)
-}
-
-/// The final component of the path, if it is a normal file.
-///
-/// If the path terminates in ., .., or consists solely of a root of prefix,
-/// file_name will return None.
-#[cfg(unix)]
-pub(crate) fn file_name<'a, P: AsRef<Path> + ?Sized>(path: &'a P) -> Option<&'a OsStr> {
-    use memchr::memrchr;
-    use std::os::unix::ffi::OsStrExt;
-
-    let path = path.as_ref().as_os_str().as_bytes();
-    if path.is_empty() {
-        return None;
-    } else if path.len() == 1 && path[0] == b'.' {
-        return None;
-    } else if path.last() == Some(&b'.') {
-        return None;
-    } else if path.len() >= 2 && &path[path.len() - 2..] == &b".."[..] {
-        return None;
+    #[cfg(unix)]
+    {
+        memchr::memchr(b'/', path.as_ref().as_os_str().as_encoded_bytes())
+            .is_none()
+    }
+    #[cfg(not(unix))]
+    {
+        path.as_ref()
+            .parent()
+            .map(|p| p.as_os_str().is_empty())
+            .unwrap_or(false)
     }
-    let last_slash = memrchr(b'/', path).map(|i| i + 1).unwrap_or(0);
-    Some(OsStr::from_bytes(&path[last_slash..]))
 }
 
 /// The final component of the path, if it is a normal file.
 ///
-/// If the path terminates in ., .., or consists solely of a root of prefix,
-/// file_name will return None.
-#[cfg(not(unix))]
-pub(crate) fn file_name<'a, P: AsRef<Path> + ?Sized>(path: &'a P) -> Option<&'a OsStr> {
-    path.as_ref().file_name()
+/// If the path terminates in `.`, `..`, or consists solely of a root of
+/// prefix, this will return `None`.
+pub(crate) fn file_name<'a, P: AsRef<Path> + ?Sized>(
+    path: &'a P,
+) -> Option<&'a OsStr> {
+    #[cfg(unix)]
+    fn imp(path: &Path) -> Option<&OsStr> {
+        use std::os::unix::ffi::OsStrExt;
+
+        use memchr::memrchr;
+
+        let path = path.as_os_str().as_bytes();
+        if path.is_empty() {
+            return None;
+        } else if path.len() == 1 && path[0] == b'.' {
+            return None;
+        } else if path.last() == Some(&b'.') {
+            return None;
+        } else if path.len() >= 2 && &path[path.len() - 2..] == &b".."[..] {
+            return None;
+        }
+        let last_slash = memrchr(b'/', path).map(|i| i + 1).unwrap_or(0);
+        Some(OsStr::from_bytes(&path[last_slash..]))
+    }
+
+    #[cfg(not(unix))]
+    fn imp(path: &Path) -> Option<&OsStr> {
+        path.file_name()
+    }
+
+    imp(path.as_ref())
 }
diff --git a/crates/ignore/src/types.rs b/crates/ignore/src/types.rs
index aa23999c0..313cf5c0e 100644
--- a/crates/ignore/src/types.rs
+++ b/crates/ignore/src/types.rs
@@ -204,8 +204,12 @@ impl<T> Selection<T> {
 
     fn map<U, F: FnOnce(T) -> U>(self, f: F) -> Selection<U> {
         match self {
-            Selection::Select(name, inner) => Selection::Select(name, f(inner)),
-            Selection::Negate(name, inner) => Selection::Negate(name, f(inner)),
+            Selection::Select(name, inner) => {
+                Selection::Select(name, f(inner))
+            }
+            Selection::Negate(name, inner) => {
+                Selection::Negate(name, f(inner))
+            }
         }
     }
 
@@ -227,7 +231,9 @@ impl Types {
             has_selected: false,
             glob_to_selection: vec![],
             set: GlobSetBuilder::new().build().unwrap(),
-            matches: Arc::new(Pool::new(|| vec![])),
+            matches: Arc::new(Pool::with_available_parallelism_capacity(
+                || vec![],
+            )),
         }
     }
 
@@ -254,7 +260,11 @@ impl Types {
     /// The path is considered ignored if it matches a negated file type.
     /// If at least one file type is selected and `path` doesn't match, then
     /// the path is also considered ignored.
-    pub fn matched<'a, P: AsRef<Path>>(&'a self, path: P, is_dir: bool) -> Match<Glob<'a>> {
+    pub fn matched<'a, P: AsRef<Path>>(
+        &'a self,
+        path: P,
+        is_dir: bool,
+    ) -> Match<Glob<'a>> {
         // File types don't apply to directories, and we can't do anything
         // if our glob set is empty.
         if is_dir || self.set.is_empty() {
@@ -306,10 +316,7 @@ impl TypesBuilder {
     /// of default type definitions can be added with `add_defaults`, and
     /// additional type definitions can be added with `select` and `negate`.
     pub fn new() -> TypesBuilder {
-        TypesBuilder {
-            types: HashMap::new(),
-            selections: vec![],
-        }
+        TypesBuilder { types: HashMap::new(), selections: vec![] }
     }
 
     /// Build the current set of file type definitions *and* selections into
@@ -343,17 +350,18 @@ impl TypesBuilder {
             }
             selections.push(selection.clone().map(move |_| def));
         }
-        let set = build_set.build().map_err(|err| Error::Glob {
-            glob: None,
-            err: err.to_string(),
-        })?;
+        let set = build_set
+            .build()
+            .map_err(|err| Error::Glob { glob: None, err: err.to_string() })?;
         Ok(Types {
             defs,
             selections,
             has_selected,
             glob_to_selection,
             set,
-            matches: Arc::new(Pool::new(|| vec![])),
+            matches: Arc::new(Pool::with_available_parallelism_capacity(
+                || vec![],
+            )),
         })
     }
 
@@ -377,12 +385,10 @@ impl TypesBuilder {
     pub fn select(&mut self, name: &str) -> &mut TypesBuilder {
         if name == "all" {
             for name in self.types.keys() {
-                self.selections
-                    .push(Selection::Select(name.to_string(), ()));
+                self.selections.push(Selection::Select(name.to_string(), ()));
             }
         } else {
-            self.selections
-                .push(Selection::Select(name.to_string(), ()));
+            self.selections.push(Selection::Select(name.to_string(), ()));
         }
         self
     }
@@ -393,12 +399,10 @@ impl TypesBuilder {
     pub fn negate(&mut self, name: &str) -> &mut TypesBuilder {
         if name == "all" {
             for name in self.types.keys() {
-                self.selections
-                    .push(Selection::Negate(name.to_string(), ()));
+                self.selections.push(Selection::Negate(name.to_string(), ()));
             }
         } else {
-            self.selections
-                .push(Selection::Negate(name.to_string(), ()));
+            self.selections.push(Selection::Negate(name.to_string(), ()));
         }
         self
     }
@@ -453,7 +457,10 @@ impl TypesBuilder {
             3 => {
                 let name = parts[0];
                 let types_string = parts[2];
-                if name.is_empty() || parts[1] != "include" || types_string.is_empty() {
+                if name.is_empty()
+                    || parts[1] != "include"
+                    || types_string.is_empty()
+                {
                     return Err(Error::InvalidDefinition);
                 }
                 let types = types_string.split(',');
@@ -463,7 +470,8 @@ impl TypesBuilder {
                     return Err(Error::InvalidDefinition);
                 }
                 for type_name in types {
-                    let globs = self.types.get(type_name).unwrap().globs.clone();
+                    let globs =
+                        self.types.get(type_name).unwrap().globs.clone();
                     for glob in globs {
                         self.add(name, &glob)?;
                     }
@@ -549,30 +557,9 @@ mod tests {
 
     matched!(not, matchnot1, types(), vec!["rust"], vec![], "index.html");
     matched!(not, matchnot2, types(), vec![], vec!["rust"], "main.rs");
-    matched!(
-        not,
-        matchnot3,
-        types(),
-        vec!["foo"],
-        vec!["rust"],
-        "main.rs"
-    );
-    matched!(
-        not,
-        matchnot4,
-        types(),
-        vec!["rust"],
-        vec!["foo"],
-        "main.rs"
-    );
-    matched!(
-        not,
-        matchnot5,
-        types(),
-        vec!["rust"],
-        vec!["foo"],
-        "main.foo"
-    );
+    matched!(not, matchnot3, types(), vec!["foo"], vec!["rust"], "main.rs");
+    matched!(not, matchnot4, types(), vec!["rust"], vec!["foo"], "main.rs");
+    matched!(not, matchnot5, types(), vec!["rust"], vec!["foo"], "main.foo");
     matched!(not, matchnot6, types(), vec!["combo"], vec![], "leftpad.js");
     matched!(not, matchnot7, types(), vec!["py"], vec![], "index.html");
     matched!(not, matchnot8, types(), vec!["python"], vec![], "doc.md");
diff --git a/crates/ignore/src/walk.rs b/crates/ignore/src/walk.rs
index ebf20947a..2dff78852 100644
--- a/crates/ignore/src/walk.rs
+++ b/crates/ignore/src/walk.rs
@@ -17,7 +17,9 @@ use {
 use crate::{
     Error, PartialErrorBuilder,
     dir::{Ignore, IgnoreBuilder},
+    // CHANGED: Also import `Gitignore` for `WalkBuilder::add_gitignore`.
     gitignore::{Gitignore, GitignoreBuilder},
+    incremental::{IncrementalIgnore, IncrementalIgnoreOptions},
     overrides::Override,
     types::Types,
 };
@@ -104,24 +106,15 @@ impl DirEntry {
     }
 
     fn new_stdin() -> DirEntry {
-        DirEntry {
-            dent: DirEntryInner::Stdin,
-            err: None,
-        }
+        DirEntry { dent: DirEntryInner::Stdin, err: None }
     }
 
     fn new_walkdir(dent: walkdir::DirEntry, err: Option<Error>) -> DirEntry {
-        DirEntry {
-            dent: DirEntryInner::Walkdir(dent),
-            err,
-        }
+        DirEntry { dent: DirEntryInner::Walkdir(dent), err }
     }
 
     fn new_raw(dent: DirEntryRaw, err: Option<Error>) -> DirEntry {
-        DirEntry {
-            dent: DirEntryInner::Raw(dent),
-            err,
-        }
+        DirEntry { dent: DirEntryInner::Raw(dent), err }
     }
 }
 
@@ -187,9 +180,11 @@ impl DirEntryInner {
                 ));
                 Err(err.with_path("<stdin>"))
             }
-            Walkdir(ref x) => x
-                .metadata()
-                .map_err(|err| Error::Io(io::Error::from(err)).with_path(x.path())),
+            Walkdir(ref x) => x.metadata().map_err(|err| {
+                Error::Io(io::Error::from(err))
+                    .with_depth(x.depth())
+                    .with_path(x.path())
+            }),
             Raw(ref x) => x.metadata(),
         }
     }
@@ -308,7 +303,9 @@ impl DirEntryRaw {
         } else {
             fs::symlink_metadata(&self.path)
         }
-        .map_err(|err| Error::Io(io::Error::from(err)).with_path(&self.path))
+        .map_err(|err| {
+            Error::Io(err).with_depth(self.depth).with_path(&self.path)
+        })
     }
 
     fn file_type(&self) -> FileType {
@@ -316,9 +313,7 @@ impl DirEntryRaw {
     }
 
     fn file_name(&self) -> &OsStr {
-        self.path
-            .file_name()
-            .unwrap_or_else(|| self.path.as_os_str())
+        self.path.file_name().unwrap_or_else(|| self.path.as_os_str())
     }
 
     fn depth(&self) -> usize {
@@ -330,13 +325,13 @@ impl DirEntryRaw {
         self.ino
     }
 
-    fn from_entry(depth: usize, ent: &fs::DirEntry) -> Result<DirEntryRaw, Error> {
+    fn from_entry(
+        depth: usize,
+        ent: &fs::DirEntry,
+    ) -> Result<DirEntryRaw, Error> {
         let ty = ent.file_type().map_err(|err| {
-            let err = Error::Io(io::Error::from(err)).with_path(ent.path());
-            Error::WithDepth {
-                depth,
-                err: Box::new(err),
-            }
+            let err = Error::Io(err).with_depth(depth).with_path(ent.path());
+            Error::WithDepth { depth, err: Box::new(err) }
         })?;
         DirEntryRaw::from_entry_os(depth, ent, ty)
     }
@@ -348,11 +343,8 @@ impl DirEntryRaw {
         ty: fs::FileType,
     ) -> Result<DirEntryRaw, Error> {
         let md = ent.metadata().map_err(|err| {
-            let err = Error::Io(io::Error::from(err)).with_path(ent.path());
-            Error::WithDepth {
-                depth,
-                err: Box::new(err),
-            }
+            let err = Error::Io(err).with_depth(depth).with_path(ent.path());
+            Error::WithDepth { depth, err: Box::new(err) }
         })?;
         Ok(DirEntryRaw {
             path: ent.path(),
@@ -395,8 +387,13 @@ impl DirEntryRaw {
     }
 
     #[cfg(windows)]
-    fn from_path(depth: usize, pb: PathBuf, link: bool) -> Result<DirEntryRaw, Error> {
-        let md = fs::metadata(&pb).map_err(|err| Error::Io(err).with_path(&pb))?;
+    fn from_path(
+        depth: usize,
+        pb: PathBuf,
+        link: bool,
+    ) -> Result<DirEntryRaw, Error> {
+        let md = fs::metadata(&pb)
+            .map_err(|err| Error::Io(err).with_depth(depth).with_path(&pb))?;
         Ok(DirEntryRaw {
             path: pb,
             ty: md.file_type(),
@@ -407,10 +404,15 @@ impl DirEntryRaw {
     }
 
     #[cfg(unix)]
-    fn from_path(depth: usize, pb: PathBuf, link: bool) -> Result<DirEntryRaw, Error> {
+    fn from_path(
+        depth: usize,
+        pb: PathBuf,
+        link: bool,
+    ) -> Result<DirEntryRaw, Error> {
         use std::os::unix::fs::MetadataExt;
 
-        let md = fs::metadata(&pb).map_err(|err| Error::Io(err).with_path(&pb))?;
+        let md = fs::metadata(&pb)
+            .map_err(|err| Error::Io(err).with_depth(depth).with_path(&pb))?;
         Ok(DirEntryRaw {
             path: pb,
             ty: md.file_type(),
@@ -423,7 +425,11 @@ impl DirEntryRaw {
     // Placeholder implementation to allow compiling on non-standard platforms
     // (e.g. wasm32).
     #[cfg(not(any(windows, unix)))]
-    fn from_path(depth: usize, pb: PathBuf, link: bool) -> Result<DirEntryRaw, Error> {
+    fn from_path(
+        depth: usize,
+        pb: PathBuf,
+        link: bool,
+    ) -> Result<DirEntryRaw, Error> {
         Err(Error::Io(io::Error::new(
             io::ErrorKind::Other,
             "unsupported platform",
@@ -502,7 +508,8 @@ pub struct WalkBuilder {
     ///
     /// When `None`, the CWD is fetched from `std::env::current_dir()`. If
     /// that fails, then global gitignores are ignored (an error is logged).
-    global_gitignores_relative_to: OnceLock<Result<PathBuf, Arc<std::io::Error>>>,
+    global_gitignores_relative_to:
+        OnceLock<Result<PathBuf, Arc<std::io::Error>>>,
 }
 
 #[derive(Clone)]
@@ -544,8 +551,16 @@ impl WalkBuilder {
     /// is better to call `add` on this builder than to create multiple
     /// `Walk` values.
     pub fn new<P: AsRef<Path>>(path: P) -> WalkBuilder {
+        WalkBuilder::from_iter([path])
+    }
+
+    /// Create an empty builder to which paths can be added.
+    ///
+    /// Note that if you call `build` on this instance before calling `add`
+    /// on it, it will return exactly zero items during iteration.
+    pub fn empty() -> WalkBuilder {
         WalkBuilder {
-            paths: vec![path.as_ref().to_path_buf()],
+            paths: vec![],
             ig_builder: IgnoreBuilder::new(),
             max_depth: None,
             min_depth: None,
@@ -560,6 +575,21 @@ impl WalkBuilder {
         }
     }
 
+    /// Create a new builder for a recursive directory iterator from the
+    /// sequence of paths.
+    ///
+    /// Note that if the iterator is empty, this is the same as
+    /// `WalkBuilder::empty`.
+    pub fn from_iter<P: AsRef<Path>, I: IntoIterator<Item = P>>(
+        paths: I,
+    ) -> WalkBuilder {
+        let mut builder = WalkBuilder::empty();
+        for path in paths.into_iter() {
+            builder.add(path);
+        }
+        builder
+    }
+
     /// Build a new `Walk` iterator.
     pub fn build(&self) -> Walk {
         let follow_links = self.follow_links;
@@ -585,10 +615,14 @@ impl WalkBuilder {
                     if let Some(ref sorter) = sorter {
                         match sorter.clone() {
                             Sorter::ByName(cmp) => {
-                                wd = wd.sort_by(move |a, b| cmp(a.file_name(), b.file_name()));
+                                wd = wd.sort_by(move |a, b| {
+                                    cmp(a.file_name(), b.file_name())
+                                });
                             }
                             Sorter::ByPath(cmp) => {
-                                wd = wd.sort_by(move |a, b| cmp(a.path(), b.path()));
+                                wd = wd.sort_by(move |a, b| {
+                                    cmp(a.path(), b.path())
+                                });
                             }
                         }
                     }
@@ -597,31 +631,76 @@ impl WalkBuilder {
             })
             .collect::<Vec<_>>()
             .into_iter();
-        let ig_root = self
-            .get_or_set_current_dir()
-            .map(|cwd| self.ig_builder.build_with_cwd(Some(cwd.to_path_buf())))
-            .unwrap_or_else(|| self.ig_builder.build());
+        let ig_root = self.build_ignore();
         Walk {
             its,
             it: None,
             ig_root: ig_root.clone(),
             ig: ig_root.clone(),
+            max_depth: self.max_depth,
             max_filesize: self.max_filesize,
             skip: self.skip.clone(),
             filter: self.filter.clone(),
         }
     }
 
+    /// Build matchers for checking paths against ignore files without
+    /// recursively walking the configured roots.
+    ///
+    /// The returned matchers use the path-based filtering configuration
+    /// on this builder, including glob overrides, file type selections,
+    /// parent ignore files, `.ignore`, `.gitignore`, global Git
+    /// ignore files, explicitly added ignore files and custom ignore
+    /// file names. For example, ripgrep configures `.rgignore` via
+    /// [`WalkBuilder::add_custom_ignore_filename`]. Minimum and maximum depth
+    /// limits, maximum file size and hidden-file filtering are also applied.
+    /// Other options that only control traversal or require a directory entry,
+    /// such as custom entry predicates, are not applied.
+    ///
+    /// One matcher is returned for each configured path, in the same order as
+    /// the paths were added to this builder. Each matcher accepts paths
+    /// relative to its own [`IncrementalIgnore::root`]. The matcher for the
+    /// special `-` path representing standard input always returns a non-match
+    /// for all inputs.
+    ///
+    /// Ignore matchers are loaded lazily and cached by directory.
+    /// Thus, the first query may read ignore files from the root and
+    /// its parents, while later queries reuse the compiled matchers.
+    /// Errors encountered while loading ignore files are returned by
+    /// [`IncrementalIgnore::matched_with_errors`]. Once an ignore file has
+    /// been loaded, changes to it are not observed. Build new matchers to
+    /// reload changed ignore files.
+    ///
+    /// Matchers built together share the builder's base ignore configuration
+    /// and compiled parent matchers.
+    pub fn build_matchers(&self) -> Vec<IncrementalIgnore> {
+        let ignore = self.build_ignore();
+        let options = IncrementalIgnoreOptions {
+            min_depth: self.min_depth,
+            max_depth: self.max_depth,
+            max_filesize: self.max_filesize,
+            hidden: self.ig_builder.is_hidden(),
+            follow_links: self.follow_links,
+        };
+        self.paths
+            .iter()
+            .map(move |path| {
+                IncrementalIgnore::new(
+                    path.clone(),
+                    ignore.clone(),
+                    options.clone(),
+                )
+            })
+            .collect()
+    }
+
     /// Build a new `WalkParallel` iterator.
     ///
     /// Note that this *doesn't* return something that implements `Iterator`.
     /// Instead, the returned value must be run with a closure. e.g.,
     /// `builder.build_parallel().run(|| |path| { println!("{path:?}"); WalkState::Continue })`.
     pub fn build_parallel(&self) -> WalkParallel {
-        let ig_root = self
-            .get_or_set_current_dir()
-            .map(|cwd| self.ig_builder.build_with_cwd(Some(cwd.to_path_buf())))
-            .unwrap_or_else(|| self.ig_builder.build());
+        let ig_root = self.build_ignore();
         WalkParallel {
             paths: self.paths.clone().into_iter(),
             ig_root,
@@ -651,7 +730,10 @@ impl WalkBuilder {
     /// The default, `None`, imposes no depth restriction.
     pub fn max_depth(&mut self, depth: Option<usize>) -> &mut WalkBuilder {
         self.max_depth = depth;
-        if self.min_depth.is_some() && self.max_depth.is_some() && self.max_depth < self.min_depth {
+        if self.min_depth.is_some()
+            && self.max_depth.is_some()
+            && self.max_depth < self.min_depth
+        {
             self.max_depth = self.min_depth;
         }
         self
@@ -662,7 +744,10 @@ impl WalkBuilder {
     /// The default, `None`, imposes no minimum depth restriction.
     pub fn min_depth(&mut self, depth: Option<usize>) -> &mut WalkBuilder {
         self.min_depth = depth;
-        if self.max_depth.is_some() && self.min_depth.is_some() && self.min_depth > self.max_depth {
+        if self.max_depth.is_some()
+            && self.min_depth.is_some()
+            && self.min_depth > self.max_depth
+        {
             self.min_depth = self.max_depth;
         }
         self
@@ -705,7 +790,12 @@ impl WalkBuilder {
     /// An error will also occur if this walker could not get the current
     /// working directory (and `WalkBuilder::current_dir` isn't set).
     pub fn add_ignore<P: AsRef<Path>>(&mut self, path: P) -> Option<Error> {
-        // CHANGED: Dropped this code
+        // CHANGED: Root the ignore file at `""` instead of the current working
+        // directory. Explicit ignores are scoped to the directory of the
+        // ignore file (see `matched_ignore`), and a root of `""` makes the
+        // rules apply to every walked path regardless of the walk root. This
+        // also avoids depending on the current working directory entirely.
+        //
         // let path = path.as_ref();
         // let Some(cwd) = self.get_or_set_current_dir() else {
         //     let err = std::io::Error::other(format!(
@@ -729,7 +819,11 @@ impl WalkBuilder {
         errs.into_error_option()
     }
 
-    /// CHANGED: Add a Gitignore to the builder.
+    /// CHANGED: Add a prebuilt Gitignore to the builder.
+    ///
+    /// Like the ignore file added via `add_ignore`, these rules are matched
+    /// against the full path of each walked entry, scoped to the `Gitignore`'s
+    /// root path.
     pub fn add_gitignore(&mut self, gi: Gitignore) {
         self.ig_builder.add_ignore(gi);
     }
@@ -982,7 +1076,10 @@ impl WalkBuilder {
     ///
     /// Global gitignore files come from things like a user's git configuration
     /// or from gitignore files added via [`WalkBuilder::add_ignore`].
-    pub fn current_dir(&mut self, cwd: impl Into<PathBuf>) -> &mut WalkBuilder {
+    pub fn current_dir(
+        &mut self,
+        cwd: impl Into<PathBuf>,
+    ) -> &mut WalkBuilder {
         let cwd = cwd.into();
         self.ig_builder.current_dir(cwd.clone());
         if let Err(cwd) = self.global_gitignores_relative_to.set(Ok(cwd)) {
@@ -1002,7 +1099,10 @@ impl WalkBuilder {
             let result = std::env::current_dir().map_err(Arc::new);
             match result {
                 Ok(ref path) => {
-                    log::trace!("automatically discovered CWD: {}", path.display());
+                    log::trace!(
+                        "automatically discovered CWD: {}",
+                        path.display()
+                    );
                 }
                 Err(ref err) => {
                     log::debug!(
@@ -1016,6 +1116,13 @@ impl WalkBuilder {
         });
         result.as_ref().ok().map(|path| &**path)
     }
+
+    /// Build the root ignore matcher shared by all consumers of this builder.
+    fn build_ignore(&self) -> Ignore {
+        self.get_or_set_current_dir()
+            .map(|cwd| self.ig_builder.build_with_cwd(Some(cwd.to_path_buf())))
+            .unwrap_or_else(|| self.ig_builder.build())
+    }
 }
 
 /// Walk is a recursive directory iterator over file paths in one or more
@@ -1029,6 +1136,7 @@ pub struct Walk {
     it: Option<WalkEventIter>,
     ig_root: Ignore,
     ig: Ignore,
+    max_depth: Option<usize>,
     max_filesize: Option<u64>,
     skip: Option<Arc<Handle>>,
     filter: Option<Filter>,
@@ -1044,6 +1152,17 @@ impl Walk {
         WalkBuilder::new(path).build()
     }
 
+    /// Create a new recursive directory iterator from the sequence of paths
+    /// given.
+    ///
+    /// Note that if the provided iterator is empty, then `Walk` is guaranteed
+    /// to yield zero entries.
+    pub fn from_iter<P: AsRef<Path>, I: IntoIterator<Item = P>>(
+        paths: I,
+    ) -> Walk {
+        WalkBuilder::from_iter(paths).build()
+    }
+
     fn skip_entry(&self, ent: &DirEntry) -> Result<bool, Error> {
         if ent.depth() == 0 {
             return Ok(false);
@@ -1128,12 +1247,17 @@ impl Iterator for Walk {
                         self.it.as_mut().unwrap().it.skip_current_dir();
                         // Still need to push this on the stack because
                         // we'll get a WalkEvent::Exit event for this dir.
-                        // We don't care if it errors though.
-                        let (igtmp, _) = self.ig.add_child(ent.path());
+                        // Its ignore files cannot apply to any visited entry.
+                        let (igtmp, _) =
+                            self.ig.add_child_with_entries(ent.path(), &[]);
                         self.ig = igtmp;
                         continue;
                     }
-                    let (igtmp, err) = self.ig.add_child(ent.path());
+                    let (igtmp, err) = if self.max_depth == Some(ent.depth()) {
+                        self.ig.add_child_with_entries(ent.path(), &[])
+                    } else {
+                        self.ig.add_child(ent.path())
+                    };
                     self.ig = igtmp;
                     ent.err = err;
                     return Some(Ok(ent));
@@ -1175,11 +1299,7 @@ enum WalkEvent {
 
 impl From<WalkDir> for WalkEventIter {
     fn from(it: WalkDir) -> WalkEventIter {
-        WalkEventIter {
-            depth: 0,
-            it: it.into_iter(),
-            next: None,
-        }
+        WalkEventIter { depth: 0, it: it.into_iter(), next: None }
     }
 }
 
@@ -1252,7 +1372,9 @@ pub trait ParallelVisitorBuilder<'s> {
     fn build(&mut self) -> Box<dyn ParallelVisitor + 's>;
 }
 
-impl<'a, 's, P: ParallelVisitorBuilder<'s>> ParallelVisitorBuilder<'s> for &'a mut P {
+impl<'a, 's, P: ParallelVisitorBuilder<'s>> ParallelVisitorBuilder<'s>
+    for &'a mut P
+{
     fn build(&mut self) -> Box<dyn ParallelVisitor + 's> {
         (**self).build()
     }
@@ -1273,14 +1395,17 @@ struct FnBuilder<F> {
     builder: F,
 }
 
-impl<'s, F: FnMut() -> FnVisitor<'s>> ParallelVisitorBuilder<'s> for FnBuilder<F> {
+impl<'s, F: FnMut() -> FnVisitor<'s>> ParallelVisitorBuilder<'s>
+    for FnBuilder<F>
+{
     fn build(&mut self) -> Box<dyn ParallelVisitor + 's> {
         let visitor = (self.builder)();
         Box::new(FnVisitorImp { visitor })
     }
 }
 
-type FnVisitor<'s> = Box<dyn FnMut(Result<DirEntry, Error>) -> WalkState + Send + 's>;
+type FnVisitor<'s> =
+    Box<dyn FnMut(Result<DirEntry, Error>) -> WalkState + Send + 's>;
 
 struct FnVisitorImp<'s> {
     visitor: FnVisitor<'s>,
@@ -1370,7 +1495,9 @@ impl WalkParallel {
                         }
                     };
                     match DirEntryRaw::from_path(0, path, false) {
-                        Ok(dent) => (DirEntry::new_raw(dent, None), root_device),
+                        Ok(dent) => {
+                            (DirEntry::new_raw(dent, None), root_device)
+                        }
                         Err(err) => {
                             if visitor.visit(Err(err)).is_quit() {
                                 return;
@@ -1394,21 +1521,28 @@ impl WalkParallel {
         let quit_now = Arc::new(AtomicBool::new(false));
         let active_workers = Arc::new(AtomicUsize::new(threads));
         let stacks = Stack::new_for_each_thread(threads, stack);
+        // Collect all of the workers first. In the case that
+        // `builder.build()` panics, we want that to happen and
+        // propagate before we actually start to run any of the
+        // workers.
+        let workers: Vec<_> = stacks
+            .into_iter()
+            .map(|stack| Worker {
+                visitor: builder.build(),
+                stack,
+                quit_now: quit_now.clone(),
+                active_workers: active_workers.clone(),
+                max_depth: self.max_depth,
+                min_depth: self.min_depth,
+                max_filesize: self.max_filesize,
+                follow_links: self.follow_links,
+                skip: self.skip.clone(),
+                filter: self.filter.clone(),
+            })
+            .collect();
         std::thread::scope(|s| {
-            let handles: Vec<_> = stacks
+            let handles: Vec<_> = workers
                 .into_iter()
-                .map(|stack| Worker {
-                    visitor: builder.build(),
-                    stack,
-                    quit_now: quit_now.clone(),
-                    active_workers: active_workers.clone(),
-                    max_depth: self.max_depth,
-                    min_depth: self.min_depth,
-                    max_filesize: self.max_filesize,
-                    follow_links: self.follow_links,
-                    skip: self.skip.clone(),
-                    filter: self.filter.clone(),
-                })
                 .map(|worker| s.spawn(|| worker.run()))
                 .collect();
             for handle in handles {
@@ -1419,9 +1553,7 @@ impl WalkParallel {
 
     fn threads(&self) -> usize {
         if self.threads == 0 {
-            std::thread::available_parallelism()
-                .map_or(1, |n| n.get())
-                .min(12)
+            std::thread::available_parallelism().map_or(1, |n| n.get()).min(12)
         } else {
             self.threads
         }
@@ -1452,6 +1584,12 @@ struct Work {
     root_device: Option<u64>,
 }
 
+#[derive(Default)]
+struct ReadDirResult {
+    entries: Vec<fs::DirEntry>,
+    errors: Vec<Error>,
+}
+
 impl Work {
     /// Returns true if and only if this work item is a directory.
     fn is_dir(&self) -> bool {
@@ -1478,6 +1616,13 @@ impl Work {
         err
     }
 
+    /// Adds ignore rules for this directory without reading its contents.
+    fn add_ignore(&mut self) {
+        let (ig, err) = self.ignore.add_child(self.dent.path());
+        self.ignore = ig;
+        self.dent.err = err;
+    }
+
     /// Reads the directory contents of this work item and adds ignore
     /// rules for this directory.
     ///
@@ -1485,7 +1630,7 @@ impl Work {
     /// an error is returned. If there was a problem reading the ignore
     /// rules for this directory, then the error is attached to this
     /// work item's directory entry.
-    fn read_dir(&mut self) -> Result<fs::ReadDir, Error> {
+    fn read_dir(&mut self) -> Result<ReadDirResult, Error> {
         let readdir = match fs::read_dir(self.dent.path()) {
             Ok(readdir) => readdir,
             Err(err) => {
@@ -1495,10 +1640,24 @@ impl Work {
                 return Err(err);
             }
         };
-        let (ig, err) = self.ignore.add_child(self.dent.path());
+        // Actually descend into the directory and read its contents
+        let mut result = ReadDirResult::default();
+        for entry in readdir {
+            match entry {
+                Ok(entry) => result.entries.push(entry),
+                Err(err) => result.errors.push(
+                    Error::from(err)
+                        .with_path(self.dent.path())
+                        .with_depth(self.dent.depth() + 1),
+                ),
+            }
+        }
+        let (ig, err) = self
+            .ignore
+            .add_child_with_entries(self.dent.path(), &result.entries);
         self.ignore = ig;
         self.dent.err = err;
-        Ok(readdir)
+        Ok(result)
     }
 }
 
@@ -1522,11 +1681,11 @@ impl Stack {
         // breadth-first. We do depth-first because a breadth first traversal
         // on wide directories with a lot of gitignores is disastrous (for
         // example, searching a directory tree containing all of crates.io).
-        let deques: Vec<Deque<Message>> = std::iter::repeat_with(Deque::new_lifo)
-            .take(threads)
-            .collect();
-        let stealers =
-            Arc::<[Stealer<Message>]>::from(deques.iter().map(Deque::stealer).collect::<Vec<_>>());
+        let deques: Vec<Deque<Message>> =
+            std::iter::repeat_with(Deque::new_lifo).take(threads).collect();
+        let stealers = Arc::<[Stealer<Message>]>::from(
+            deques.iter().map(Deque::stealer).collect::<Vec<_>>(),
+        );
         let stacks: Vec<Stack> = deques
             .into_iter()
             .enumerate()
@@ -1668,8 +1827,13 @@ impl<'s> Worker<'s> {
         // have sufficient read permissions to list the directory.
         // In that case we still want to provide the closure with a valid
         // entry before passing the error value.
-        let readdir = work.read_dir();
         let depth = work.dent.depth();
+        let readdir = if descend && self.max_depth.is_none_or(|m| depth < m) {
+            Some(work.read_dir())
+        } else {
+            work.add_ignore();
+            None
+        };
         if should_visit {
             let state = self.visitor.visit(Ok(work.dent));
             if !state.is_continue() {
@@ -1680,6 +1844,10 @@ impl<'s> Worker<'s> {
             return WalkState::Skip;
         }
 
+        let readdir = match readdir {
+            Some(readdir) => readdir,
+            None => return WalkState::Skip,
+        };
         let readdir = match readdir {
             Ok(readdir) => readdir,
             Err(err) => {
@@ -1687,11 +1855,19 @@ impl<'s> Worker<'s> {
             }
         };
 
-        if self.max_depth.map_or(false, |max| depth >= max) {
-            return WalkState::Skip;
+        for result in readdir.entries {
+            let state = self.generate_work(
+                &work.ignore,
+                depth + 1,
+                work.root_device,
+                result,
+            );
+            if state.is_quit() {
+                return state;
+            }
         }
-        for result in readdir {
-            let state = self.generate_work(&work.ignore, depth + 1, work.root_device, result);
+        for err in readdir.errors {
+            let state = self.visitor.visit(Err(err));
             if state.is_quit() {
                 return state;
             }
@@ -1717,14 +1893,8 @@ impl<'s> Worker<'s> {
         ig: &Ignore,
         depth: usize,
         root_device: Option<u64>,
-        result: Result<fs::DirEntry, io::Error>,
+        fs_dent: fs::DirEntry,
     ) -> WalkState {
-        let fs_dent = match result {
-            Ok(fs_dent) => fs_dent,
-            Err(err) => {
-                return self.visitor.visit(Err(Error::from(err).with_depth(depth)));
-            }
-        };
         let mut dent = match DirEntryRaw::from_entry(depth, &fs_dent) {
             Ok(dent) => DirEntry::new_raw(dent, None),
             Err(err) => {
@@ -1760,26 +1930,24 @@ impl<'s> Worker<'s> {
                 return WalkState::Continue;
             }
         }
-        let should_skip_filesize = if self.max_filesize.is_some() && !dent.is_dir() {
-            skip_filesize(
-                self.max_filesize.unwrap(),
-                dent.path(),
-                &dent.metadata().ok(),
-            )
-        } else {
-            false
-        };
-        let should_skip_filtered = if let Some(Filter(predicate)) = &self.filter {
-            !predicate(&dent)
-        } else {
-            false
-        };
+        let should_skip_filesize =
+            if self.max_filesize.is_some() && !dent.is_dir() {
+                skip_filesize(
+                    self.max_filesize.unwrap(),
+                    dent.path(),
+                    &dent.metadata().ok(),
+                )
+            } else {
+                false
+            };
+        let should_skip_filtered =
+            if let Some(Filter(predicate)) = &self.filter {
+                !predicate(&dent)
+            } else {
+                false
+            };
         if !should_skip_filesize && !should_skip_filtered {
-            self.send(Work {
-                dent,
-                ignore: ig.clone(),
-                root_device,
-            });
+            self.send(Work { dent, ignore: ig.clone(), root_device });
         }
         WalkState::Continue
     }
@@ -1820,6 +1988,9 @@ impl<'s> Worker<'s> {
                     }
                     // Wait for next `Work` or `Quit` message.
                     loop {
+                        if self.is_quit_now() {
+                            return None;
+                        }
                         if let Some(v) = self.recv() {
                             self.activate_worker();
                             value = Some(v);
@@ -1873,24 +2044,25 @@ impl<'s> Worker<'s> {
     }
 }
 
+impl<'s> Drop for Worker<'s> {
+    fn drop(&mut self) {
+        if std::thread::panicking() {
+            self.quit_now();
+        }
+    }
+}
+
 fn check_symlink_loop(
     ig_parent: &Ignore,
     child_path: &Path,
     child_depth: usize,
 ) -> Result<(), Error> {
     let hchild = Handle::from_path(child_path).map_err(|err| {
-        Error::from(err)
-            .with_path(child_path)
-            .with_depth(child_depth)
+        Error::from(err).with_path(child_path).with_depth(child_depth)
     })?;
-    for ig in ig_parent
-        .parents()
-        .take_while(|ig| !ig.is_absolute_parent())
-    {
+    for ig in ig_parent.parents().take_while(|ig| !ig.is_absolute_parent()) {
         let h = Handle::from_path(ig.path()).map_err(|err| {
-            Error::from(err)
-                .with_path(child_path)
-                .with_depth(child_depth)
+            Error::from(err).with_path(child_path).with_depth(child_depth)
         })?;
         if hchild == h {
             return Err(Error::Loop {
@@ -1905,7 +2077,11 @@ fn check_symlink_loop(
 
 // Before calling this function, make sure that you ensure that is really
 // necessary as the arguments imply a file stat.
-fn skip_filesize(max_filesize: u64, path: &Path, ent: &Option<Metadata>) -> bool {
+fn skip_filesize(
+    max_filesize: u64,
+    path: &Path,
+    ent: &Option<Metadata>,
+) -> bool {
     let filesize = match *ent {
         Some(ref md) => Some(md.len()),
         None => None,
@@ -1977,9 +2153,9 @@ fn path_equals(dent: &DirEntry, handle: &Handle) -> Result<bool, Error> {
     if dent.is_stdin() || never_equal(dent, handle) {
         return Ok(false);
     }
-    Handle::from_path(dent.path())
-        .map(|h| &h == handle)
-        .map_err(|err| Error::Io(err).with_path(dent.path()))
+    Handle::from_path(dent.path()).map(|h| &h == handle).map_err(|err| {
+        Error::Io(err).with_depth(dent.depth()).with_path(dent.path())
+    })
 }
 
 /// Returns true if the given walkdir entry corresponds to a directory.
@@ -1997,16 +2173,14 @@ fn walkdir_is_dir(dent: &walkdir::DirEntry) -> bool {
     if !dent.file_type().is_symlink() || dent.depth() > 0 {
         return false;
     }
-    dent.path()
-        .metadata()
-        .ok()
-        .map_or(false, |md| md.file_type().is_dir())
+    dent.path().metadata().ok().map_or(false, |md| md.file_type().is_dir())
 }
 
 /// Returns true if and only if the given path is on the same device as the
 /// given root device.
 fn is_same_file_system(root_device: u64, path: &Path) -> Result<bool, Error> {
-    let dent_device = device_num(path).map_err(|err| Error::Io(err).with_path(path))?;
+    let dent_device =
+        device_num(path).map_err(|err| Error::Io(err).with_path(path))?;
     Ok(root_device == dent_device)
 }
 
@@ -2065,11 +2239,7 @@ mod tests {
     }
 
     fn normal_path(unix: &str) -> String {
-        if cfg!(windows) {
-            unix.replace("\\", "/")
-        } else {
-            unix.to_string()
-        }
+        if cfg!(windows) { unix.replace("\\", "/") } else { unix.to_string() }
     }
 
     fn walk_collect(prefix: &Path, builder: &WalkBuilder) -> Vec<String> {
@@ -2089,7 +2259,10 @@ mod tests {
         paths
     }
 
-    fn walk_collect_parallel(prefix: &Path, builder: &WalkBuilder) -> Vec<String> {
+    fn walk_collect_parallel(
+        prefix: &Path,
+        builder: &WalkBuilder,
+    ) -> Vec<String> {
         let mut paths = vec![];
         for dent in walk_collect_entries_parallel(builder) {
             let path = dent.path().strip_prefix(prefix).unwrap();
@@ -2278,6 +2451,27 @@ mod tests {
         );
     }
 
+    #[test]
+    fn max_depth_does_not_load_unreachable_ignore_files() {
+        let td = tmpdir();
+        let leaf = td.path().join("leaf");
+        mkdirp(&leaf);
+        wfile(leaf.join(".ignore"), "{invalid\n");
+
+        let mut builder = WalkBuilder::new(td.path());
+        builder.max_depth(Some(1));
+        let entry = builder
+            .build()
+            .find_map(|result| {
+                let entry = result.unwrap();
+                (entry.path() == leaf).then_some(entry)
+            })
+            .unwrap();
+
+        assert!(entry.error().is_none());
+        assert_paths(td.path(), &builder, &["leaf"]);
+    }
+
     #[test]
     fn min_depth() {
         let td = tmpdir();
@@ -2388,7 +2582,9 @@ mod tests {
         assert_eq!(1, dents.len());
         assert!(!dents[0].path_is_symlink());
 
-        let dents = walk_collect_entries_parallel(&WalkBuilder::new(td.path().join("foo")));
+        let dents = walk_collect_entries_parallel(&WalkBuilder::new(
+            td.path().join("foo"),
+        ));
         assert_eq!(1, dents.len());
         assert!(!dents[0].path_is_symlink());
     }
@@ -2474,8 +2670,88 @@ mod tests {
 
         assert_paths(
             td.path(),
-            &WalkBuilder::new(td.path()).filter_entry(|entry| entry.file_name() != OsStr::new("a")),
+            &WalkBuilder::new(td.path())
+                .filter_entry(|entry| entry.file_name() != OsStr::new("a")),
             &["x", "x/y", "x/y/foo"],
         );
     }
+
+    #[test]
+    fn empty() {
+        let td = tmpdir();
+        assert_paths(td.path(), &WalkBuilder::empty(), &[]);
+
+        let empty_paths: Vec<&OsStr> = Vec::new();
+        assert_paths(td.path(), &WalkBuilder::from_iter(empty_paths), &[]);
+    }
+
+    #[test]
+    fn from_iter() {
+        let td = tmpdir();
+        mkdirp(td.path().join("a/b/c"));
+        mkdirp(td.path().join("d/e/f"));
+        mkdirp(td.path().join("x/y"));
+        wfile(td.path().join("a/b/foo"), "");
+        wfile(td.path().join("d/e/f/foo"), "");
+        wfile(td.path().join("x/y/foo"), "");
+
+        let paths = vec![
+            td.path().join("a"),
+            td.path().join("d"),
+            td.path().join("x"),
+        ];
+
+        assert_paths(
+            td.path(),
+            &WalkBuilder::from_iter(paths),
+            &[
+                "x",
+                "x/y",
+                "x/y/foo",
+                "d",
+                "d/e",
+                "d/e/f",
+                "d/e/f/foo",
+                "a",
+                "a/b",
+                "a/b/foo",
+                "a/b/c",
+            ],
+        );
+    }
+
+    // This should always panic and never hang.
+    //
+    // Ref: https://github.com/BurntSushi/ripgrep/issues/3009
+    #[test]
+    #[should_panic]
+    fn panic_in_parallel() {
+        let td = tmpdir();
+        wfile(td.path().join("foo.txt"), "");
+
+        WalkBuilder::new(td.path())
+            .threads(40)
+            .build_parallel()
+            .run(|| Box::new(|_| panic!("oops!")));
+    }
+
+    // This should always panic and never hang. The first call to the visitor
+    // builder is used while processing the root paths. Previously, a panic on
+    // the third call occurred after the first worker had already been spawned,
+    // leaving it waiting indefinitely for workers that were never created.
+    #[test]
+    #[should_panic(expected = "builder panic")]
+    fn panic_in_parallel_builder() {
+        let td = tmpdir();
+        wfile(td.path().join("foo.txt"), "");
+
+        let mut builds = 0;
+        WalkBuilder::new(td.path()).threads(2).build_parallel().run(|| {
+            builds += 1;
+            if builds == 3 {
+                panic!("builder panic");
+            }
+            Box::new(|_| WalkState::Continue)
+        });
+    }
 }
diff --git a/crates/ignore/tests/gitignore_matched_path_or_any_parents_tests.rs b/crates/ignore/tests/gitignore_matched_path_or_any_parents_tests.rs
index b7b7c6f95..ecb7b47e3 100644
--- a/crates/ignore/tests/gitignore_matched_path_or_any_parents_tests.rs
+++ b/crates/ignore/tests/gitignore_matched_path_or_any_parents_tests.rs
@@ -2,7 +2,8 @@ use std::path::Path;
 
 use ignore::gitignore::{Gitignore, GitignoreBuilder};
 
-const IGNORE_FILE: &'static str = "tests/gitignore_matched_path_or_any_parents_tests.gitignore";
+const IGNORE_FILE: &'static str =
+    "tests/gitignore_matched_path_or_any_parents_tests.gitignore";
 
 fn get_gitignore() -> Gitignore {
     let mut builder = GitignoreBuilder::new("ROOT");
@@ -23,7 +24,9 @@ fn test_path_should_be_under_root() {
 #[test]
 fn test_files_in_root() {
     let gitignore = get_gitignore();
-    let m = |path: &str| gitignore.matched_path_or_any_parents(Path::new(path), false);
+    let m = |path: &str| {
+        gitignore.matched_path_or_any_parents(Path::new(path), false)
+    };
 
     // 0x
     assert!(m("ROOT/file_root_00").is_ignore());
@@ -53,7 +56,9 @@ fn test_files_in_root() {
 #[test]
 fn test_files_in_deep() {
     let gitignore = get_gitignore();
-    let m = |path: &str| gitignore.matched_path_or_any_parents(Path::new(path), false);
+    let m = |path: &str| {
+        gitignore.matched_path_or_any_parents(Path::new(path), false)
+    };
 
     // 0x
     assert!(m("ROOT/parent_dir/file_deep_00").is_ignore());
@@ -83,8 +88,9 @@ fn test_files_in_deep() {
 #[test]
 fn test_dirs_in_root() {
     let gitignore = get_gitignore();
-    let m =
-        |path: &str, is_dir: bool| gitignore.matched_path_or_any_parents(Path::new(path), is_dir);
+    let m = |path: &str, is_dir: bool| {
+        gitignore.matched_path_or_any_parents(Path::new(path), is_dir)
+    };
 
     // 00
     assert!(m("ROOT/dir_root_00", true).is_ignore());
@@ -186,20 +192,25 @@ fn test_dirs_in_root() {
 #[test]
 fn test_dirs_in_deep() {
     let gitignore = get_gitignore();
-    let m =
-        |path: &str, is_dir: bool| gitignore.matched_path_or_any_parents(Path::new(path), is_dir);
+    let m = |path: &str, is_dir: bool| {
+        gitignore.matched_path_or_any_parents(Path::new(path), is_dir)
+    };
 
     // 00
     assert!(m("ROOT/parent_dir/dir_deep_00", true).is_ignore());
     assert!(m("ROOT/parent_dir/dir_deep_00/file", false).is_ignore());
     assert!(m("ROOT/parent_dir/dir_deep_00/child_dir", true).is_ignore());
-    assert!(m("ROOT/parent_dir/dir_deep_00/child_dir/file", false).is_ignore());
+    assert!(
+        m("ROOT/parent_dir/dir_deep_00/child_dir/file", false).is_ignore()
+    );
 
     // 01
     assert!(m("ROOT/parent_dir/dir_deep_01", true).is_ignore());
     assert!(m("ROOT/parent_dir/dir_deep_01/file", false).is_ignore());
     assert!(m("ROOT/parent_dir/dir_deep_01/child_dir", true).is_ignore());
-    assert!(m("ROOT/parent_dir/dir_deep_01/child_dir/file", false).is_ignore());
+    assert!(
+        m("ROOT/parent_dir/dir_deep_01/child_dir/file", false).is_ignore()
+    );
 
     // 02
     assert!(m("ROOT/parent_dir/dir_deep_02", true).is_none());
@@ -241,51 +252,67 @@ fn test_dirs_in_deep() {
     assert!(m("ROOT/parent_dir/dir_deep_20", true).is_ignore());
     assert!(m("ROOT/parent_dir/dir_deep_20/file", false).is_ignore());
     assert!(m("ROOT/parent_dir/dir_deep_20/child_dir", true).is_ignore());
-    assert!(m("ROOT/parent_dir/dir_deep_20/child_dir/file", false).is_ignore());
+    assert!(
+        m("ROOT/parent_dir/dir_deep_20/child_dir/file", false).is_ignore()
+    );
 
     // 21
     assert!(m("ROOT/parent_dir/dir_deep_21", true).is_ignore());
     assert!(m("ROOT/parent_dir/dir_deep_21/file", false).is_ignore());
     assert!(m("ROOT/parent_dir/dir_deep_21/child_dir", true).is_ignore());
-    assert!(m("ROOT/parent_dir/dir_deep_21/child_dir/file", false).is_ignore());
+    assert!(
+        m("ROOT/parent_dir/dir_deep_21/child_dir/file", false).is_ignore()
+    );
 
     // 22
     // dir itself doesn't match
     assert!(m("ROOT/parent_dir/dir_deep_22", true).is_none());
     assert!(m("ROOT/parent_dir/dir_deep_22/file", false).is_ignore());
     assert!(m("ROOT/parent_dir/dir_deep_22/child_dir", true).is_ignore());
-    assert!(m("ROOT/parent_dir/dir_deep_22/child_dir/file", false).is_ignore());
+    assert!(
+        m("ROOT/parent_dir/dir_deep_22/child_dir/file", false).is_ignore()
+    );
 
     // 23
     // dir itself doesn't match
     assert!(m("ROOT/parent_dir/dir_deep_23", true).is_none());
     assert!(m("ROOT/parent_dir/dir_deep_23/file", false).is_ignore());
     assert!(m("ROOT/parent_dir/dir_deep_23/child_dir", true).is_ignore());
-    assert!(m("ROOT/parent_dir/dir_deep_23/child_dir/file", false).is_ignore());
+    assert!(
+        m("ROOT/parent_dir/dir_deep_23/child_dir/file", false).is_ignore()
+    );
 
     // 30
     assert!(m("ROOT/parent_dir/dir_deep_30", true).is_ignore());
     assert!(m("ROOT/parent_dir/dir_deep_30/file", false).is_ignore());
     assert!(m("ROOT/parent_dir/dir_deep_30/child_dir", true).is_ignore());
-    assert!(m("ROOT/parent_dir/dir_deep_30/child_dir/file", false).is_ignore());
+    assert!(
+        m("ROOT/parent_dir/dir_deep_30/child_dir/file", false).is_ignore()
+    );
 
     // 31
     assert!(m("ROOT/parent_dir/dir_deep_31", true).is_ignore());
     assert!(m("ROOT/parent_dir/dir_deep_31/file", false).is_ignore());
     assert!(m("ROOT/parent_dir/dir_deep_31/child_dir", true).is_ignore());
-    assert!(m("ROOT/parent_dir/dir_deep_31/child_dir/file", false).is_ignore());
+    assert!(
+        m("ROOT/parent_dir/dir_deep_31/child_dir/file", false).is_ignore()
+    );
 
     // 32
     // dir itself doesn't match
     assert!(m("ROOT/parent_dir/dir_deep_32", true).is_none());
     assert!(m("ROOT/parent_dir/dir_deep_32/file", false).is_ignore());
     assert!(m("ROOT/parent_dir/dir_deep_32/child_dir", true).is_ignore());
-    assert!(m("ROOT/parent_dir/dir_deep_32/child_dir/file", false).is_ignore());
+    assert!(
+        m("ROOT/parent_dir/dir_deep_32/child_dir/file", false).is_ignore()
+    );
 
     // 33
     // dir itself doesn't match
     assert!(m("ROOT/parent_dir/dir_deep_33", true).is_none());
     assert!(m("ROOT/parent_dir/dir_deep_33/file", false).is_ignore());
     assert!(m("ROOT/parent_dir/dir_deep_33/child_dir", true).is_ignore());
-    assert!(m("ROOT/parent_dir/dir_deep_33/child_dir/file", false).is_ignore());
+    assert!(
+        m("ROOT/parent_dir/dir_deep_33/child_dir/file", false).is_ignore()
+    );
 }
diff --git a/crates/node/.gitignore b/crates/node/.gitignore
index d2200a62e..c3f2ec696 100644
--- a/crates/node/.gitignore
+++ b/crates/node/.gitignore
@@ -202,5 +202,6 @@ index.js
 browser.js
 tailwindcss-oxide.wasi-browser.js
 tailwindcss-oxide.wasi.cjs
+tailwindcss-oxide.wasi.d.cts
 wasi-worker-browser.mjs
 wasi-worker.mjs
diff --git a/crates/node/Cargo.toml b/crates/node/Cargo.toml
index d4ddcdfd1..a3df7b813 100644
--- a/crates/node/Cargo.toml
+++ b/crates/node/Cargo.toml
@@ -8,10 +8,10 @@ crate-type = ["cdylib"]
 
 [dependencies]
 # Default enable napi4 feature, see https://nodejs.org/api/n-api.html#node-api-version-matrix
-napi = { version = "3.3.0", default-features = false, features = ["napi4"] }
-napi-derive = "3.2.5"
+napi = { version = "3.11.0", default-features = false, features = ["napi4"] }
+napi-derive = "3.6.0"
 tailwindcss-oxide = { path = "../oxide" }
-rayon = "1.10.0"
+rayon = "1.12.0"
 
 [build-dependencies]
-napi-build = "2.2.3"
+napi-build = "2.3.2"
diff --git a/crates/node/npm/android-arm-eabi/package.json b/crates/node/npm/android-arm-eabi/package.json
index d087f75c3..d46ceb237 100644
--- a/crates/node/npm/android-arm-eabi/package.json
+++ b/crates/node/npm/android-arm-eabi/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@tailwindcss/oxide-android-arm-eabi",
-  "version": "4.2.2",
+  "version": "4.3.3",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/tailwindlabs/tailwindcss.git",
diff --git a/crates/node/npm/android-arm64/package.json b/crates/node/npm/android-arm64/package.json
index 014c9e308..e6e9d577d 100644
--- a/crates/node/npm/android-arm64/package.json
+++ b/crates/node/npm/android-arm64/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@tailwindcss/oxide-android-arm64",
-  "version": "4.2.2",
+  "version": "4.3.3",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/tailwindlabs/tailwindcss.git",
diff --git a/crates/node/npm/darwin-arm64/package.json b/crates/node/npm/darwin-arm64/package.json
index e0b5e0bfd..1cb737c2e 100644
--- a/crates/node/npm/darwin-arm64/package.json
+++ b/crates/node/npm/darwin-arm64/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@tailwindcss/oxide-darwin-arm64",
-  "version": "4.2.2",
+  "version": "4.3.3",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/tailwindlabs/tailwindcss.git",
diff --git a/crates/node/npm/darwin-x64/package.json b/crates/node/npm/darwin-x64/package.json
index d13fabfff..ffd75e54b 100644
--- a/crates/node/npm/darwin-x64/package.json
+++ b/crates/node/npm/darwin-x64/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@tailwindcss/oxide-darwin-x64",
-  "version": "4.2.2",
+  "version": "4.3.3",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/tailwindlabs/tailwindcss.git",
diff --git a/crates/node/npm/freebsd-x64/package.json b/crates/node/npm/freebsd-x64/package.json
index dc9b3b102..e248f39d1 100644
--- a/crates/node/npm/freebsd-x64/package.json
+++ b/crates/node/npm/freebsd-x64/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@tailwindcss/oxide-freebsd-x64",
-  "version": "4.2.2",
+  "version": "4.3.3",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/tailwindlabs/tailwindcss.git",
diff --git a/crates/node/npm/linux-arm-gnueabihf/package.json b/crates/node/npm/linux-arm-gnueabihf/package.json
index 22b890a65..50d2aef73 100644
--- a/crates/node/npm/linux-arm-gnueabihf/package.json
+++ b/crates/node/npm/linux-arm-gnueabihf/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@tailwindcss/oxide-linux-arm-gnueabihf",
-  "version": "4.2.2",
+  "version": "4.3.3",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/tailwindlabs/tailwindcss.git",
diff --git a/crates/node/npm/linux-arm64-gnu/package.json b/crates/node/npm/linux-arm64-gnu/package.json
index b8d4676d8..5875213f8 100644
--- a/crates/node/npm/linux-arm64-gnu/package.json
+++ b/crates/node/npm/linux-arm64-gnu/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@tailwindcss/oxide-linux-arm64-gnu",
-  "version": "4.2.2",
+  "version": "4.3.3",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/tailwindlabs/tailwindcss.git",
diff --git a/crates/node/npm/linux-arm64-musl/package.json b/crates/node/npm/linux-arm64-musl/package.json
index 16fe2dd70..9da37f3fd 100644
--- a/crates/node/npm/linux-arm64-musl/package.json
+++ b/crates/node/npm/linux-arm64-musl/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@tailwindcss/oxide-linux-arm64-musl",
-  "version": "4.2.2",
+  "version": "4.3.3",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/tailwindlabs/tailwindcss.git",
diff --git a/crates/node/npm/linux-x64-gnu/package.json b/crates/node/npm/linux-x64-gnu/package.json
index 864db19ff..d409743fa 100644
--- a/crates/node/npm/linux-x64-gnu/package.json
+++ b/crates/node/npm/linux-x64-gnu/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@tailwindcss/oxide-linux-x64-gnu",
-  "version": "4.2.2",
+  "version": "4.3.3",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/tailwindlabs/tailwindcss.git",
diff --git a/crates/node/npm/linux-x64-musl/package.json b/crates/node/npm/linux-x64-musl/package.json
index 9ff4f1714..5b404fd70 100644
--- a/crates/node/npm/linux-x64-musl/package.json
+++ b/crates/node/npm/linux-x64-musl/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@tailwindcss/oxide-linux-x64-musl",
-  "version": "4.2.2",
+  "version": "4.3.3",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/tailwindlabs/tailwindcss.git",
diff --git a/crates/node/npm/wasm32-wasi/.npmrc b/crates/node/npm/wasm32-wasi/.npmrc
deleted file mode 100644
index d67f37488..000000000
--- a/crates/node/npm/wasm32-wasi/.npmrc
+++ /dev/null
@@ -1 +0,0 @@
-node-linker=hoisted
diff --git a/crates/node/npm/wasm32-wasi/README.md b/crates/node/npm/wasm32-wasi/README.md
index 9ec3a7b3f..2a5368149 100644
--- a/crates/node/npm/wasm32-wasi/README.md
+++ b/crates/node/npm/wasm32-wasi/README.md
@@ -1,3 +1,3 @@
 # `@tailwindcss/oxide-wasm32-wasi`
 
-This is the **wasm32-wasip1-threads** binary for `@tailwindcss/oxide`
+This is the **wasm32-wasip1-threads** build of `@tailwindcss/oxide`
diff --git a/crates/node/npm/wasm32-wasi/package.json b/crates/node/npm/wasm32-wasi/package.json
index fafb106ce..cee9fb05a 100644
--- a/crates/node/npm/wasm32-wasi/package.json
+++ b/crates/node/npm/wasm32-wasi/package.json
@@ -1,9 +1,6 @@
 {
   "name": "@tailwindcss/oxide-wasm32-wasi",
-  "version": "4.2.2",
-  "cpu": [
-    "wasm32"
-  ],
+  "version": "4.3.3",
   "main": "tailwindcss-oxide.wasi.cjs",
   "files": [
     "tailwindcss-oxide.wasm32-wasi.wasm",
@@ -14,7 +11,7 @@
   ],
   "license": "MIT",
   "engines": {
-    "node": ">=14.0.0"
+    "node": "^20.19.0 || ^22.13.0 || >=23.5.0"
   },
   "publishConfig": {
     "provenance": true,
@@ -27,11 +24,11 @@
   },
   "browser": "tailwindcss-oxide.wasi-browser.js",
   "dependencies": {
-    "@napi-rs/wasm-runtime": "^1.1.1",
-    "@emnapi/core": "^1.8.1",
-    "@emnapi/runtime": "^1.8.1",
-    "@tybys/wasm-util": "^0.10.1",
-    "@emnapi/wasi-threads": "^1.1.0",
+    "@napi-rs/wasm-runtime": "^1.2.2",
+    "@emnapi/core": "^1.11.3",
+    "@emnapi/runtime": "^1.11.3",
+    "@tybys/wasm-util": "^0.10.3",
+    "@emnapi/wasi-threads": "^1.2.3",
     "tslib": "^2.8.1"
   },
   "bundledDependencies": [
diff --git a/crates/node/npm/wasm32-wasi/pnpm-lock.yaml b/crates/node/npm/wasm32-wasi/pnpm-lock.yaml
deleted file mode 100644
index 5cd70ea37..000000000
--- a/crates/node/npm/wasm32-wasi/pnpm-lock.yaml
+++ /dev/null
@@ -1,75 +0,0 @@
-lockfileVersion: '9.0'
-
-settings:
-  autoInstallPeers: true
-  excludeLinksFromLockfile: false
-
-importers:
-
-  .:
-    dependencies:
-      '@emnapi/core':
-        specifier: ^1.5.0
-        version: 1.5.0
-      '@emnapi/runtime':
-        specifier: ^1.5.0
-        version: 1.5.0
-      '@emnapi/wasi-threads':
-        specifier: ^1.1.0
-        version: 1.1.0
-      '@napi-rs/wasm-runtime':
-        specifier: ^1.0.5
-        version: 1.0.5
-      '@tybys/wasm-util':
-        specifier: ^0.10.1
-        version: 0.10.1
-      tslib:
-        specifier: ^2.4.0
-        version: 2.8.1
-
-packages:
-
-  '@emnapi/core@1.5.0':
-    resolution: {integrity: sha512-sbP8GzB1WDzacS8fgNPpHlp6C9VZe+SJP3F90W9rLemaQj2PzIuTEl1qDOYQf58YIpyjViI24y9aPWCjEzY2cg==}
-
-  '@emnapi/runtime@1.5.0':
-    resolution: {integrity: sha512-97/BJ3iXHww3djw6hYIfErCZFee7qCtrneuLa20UXFCOTCfBM2cvQHjWJ2EG0s0MtdNwInarqCTz35i4wWXHsQ==}
-
-  '@emnapi/wasi-threads@1.1.0':
-    resolution: {integrity: sha512-WI0DdZ8xFSbgMjR1sFsKABJ/C5OnRrjT06JXbZKexJGrDuPTzZdDYfFlsgcCXCyf+suG5QU2e/y1Wo2V/OapLQ==}
-
-  '@napi-rs/wasm-runtime@1.0.5':
-    resolution: {integrity: sha512-TBr9Cf9onSAS2LQ2+QHx6XcC6h9+RIzJgbqG3++9TUZSH204AwEy5jg3BTQ0VATsyoGj4ee49tN/y6rvaOOtcg==}
-
-  '@tybys/wasm-util@0.10.1':
-    resolution: {integrity: sha512-9tTaPJLSiejZKx+Bmog4uSubteqTvFrVrURwkmHixBo0G4seD0zUxp98E1DzUBJxLQ3NPwXrGKDiVjwx/DpPsg==}
-
-  tslib@2.8.1:
-    resolution: {integrity: sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==}
-
-snapshots:
-
-  '@emnapi/core@1.5.0':
-    dependencies:
-      '@emnapi/wasi-threads': 1.1.0
-      tslib: 2.8.1
-
-  '@emnapi/runtime@1.5.0':
-    dependencies:
-      tslib: 2.8.1
-
-  '@emnapi/wasi-threads@1.1.0':
-    dependencies:
-      tslib: 2.8.1
-
-  '@napi-rs/wasm-runtime@1.0.5':
-    dependencies:
-      '@emnapi/core': 1.5.0
-      '@emnapi/runtime': 1.5.0
-      '@tybys/wasm-util': 0.10.1
-
-  '@tybys/wasm-util@0.10.1':
-    dependencies:
-      tslib: 2.8.1
-
-  tslib@2.8.1: {}
diff --git a/crates/node/npm/win32-arm64-msvc/package.json b/crates/node/npm/win32-arm64-msvc/package.json
index edb84aeca..991727a32 100644
--- a/crates/node/npm/win32-arm64-msvc/package.json
+++ b/crates/node/npm/win32-arm64-msvc/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@tailwindcss/oxide-win32-arm64-msvc",
-  "version": "4.2.2",
+  "version": "4.3.3",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/tailwindlabs/tailwindcss.git",
diff --git a/crates/node/npm/win32-x64-msvc/package.json b/crates/node/npm/win32-x64-msvc/package.json
index fcb93d429..82d75c300 100644
--- a/crates/node/npm/win32-x64-msvc/package.json
+++ b/crates/node/npm/win32-x64-msvc/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@tailwindcss/oxide-win32-x64-msvc",
-  "version": "4.2.2",
+  "version": "4.3.3",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/tailwindlabs/tailwindcss.git",
diff --git a/crates/node/package.json b/crates/node/package.json
index 346d3e66c..be09427fb 100644
--- a/crates/node/package.json
+++ b/crates/node/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@tailwindcss/oxide",
-  "version": "4.2.2",
+  "version": "4.3.3",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/tailwindlabs/tailwindcss.git",
@@ -33,9 +33,11 @@
   },
   "license": "MIT",
   "devDependencies": {
-    "@napi-rs/cli": "3.4.1",
-    "@napi-rs/wasm-runtime": "^1.1.1",
-    "emnapi": "1.8.1"
+    "@emnapi/core": "1.11.3",
+    "@emnapi/runtime": "1.11.3",
+    "@napi-rs/cli": "3.7.4",
+    "@napi-rs/wasm-runtime": "^1.2.2",
+    "emnapi": "1.11.3"
   },
   "engines": {
     "node": ">= 20"
diff --git a/crates/node/src/lib.rs b/crates/node/src/lib.rs
index 11ff25b0a..fb32a818c 100644
--- a/crates/node/src/lib.rs
+++ b/crates/node/src/lib.rs
@@ -165,6 +165,11 @@ impl Scanner {
     self.scanner.get_files()
   }
 
+  #[napi(getter)]
+  pub fn scanned_files(&self) -> Vec<String> {
+    self.scanner.get_scanned_files()
+  }
+
   #[napi(getter)]
   pub fn globs(&mut self) -> Vec<GlobEntry> {
     self
diff --git a/crates/oxide/Cargo.toml b/crates/oxide/Cargo.toml
index 0965320c9..f8a5f6137 100644
--- a/crates/oxide/Cargo.toml
+++ b/crates/oxide/Cargo.toml
@@ -20,6 +20,7 @@ ignore = { path = "../ignore" }
 regex = "1.11.1"
 
 [dev-dependencies]
+insta = "1.48.0"
 tempfile = "3.13.0"
 pretty_assertions = "1.4.1"
 unicode-width = "0.2.0"
diff --git a/crates/oxide/src/extractor/bracket_stack.rs b/crates/oxide/src/extractor/bracket_stack.rs
index f34e56ed3..2b8d3a13f 100644
--- a/crates/oxide/src/extractor/bracket_stack.rs
+++ b/crates/oxide/src/extractor/bracket_stack.rs
@@ -25,6 +25,7 @@ impl BracketStack {
                 b'(' => b')',
                 b'[' => b']',
                 b'{' => b'}',
+                b'<' => b'>',
                 _ => std::hint::unreachable_unchecked(),
             };
         }
diff --git a/crates/oxide/src/extractor/mod.rs b/crates/oxide/src/extractor/mod.rs
index a37d6a0a4..a3d806a27 100644
--- a/crates/oxide/src/extractor/mod.rs
+++ b/crates/oxide/src/extractor/mod.rs
@@ -908,6 +908,18 @@ mod tests {
         );
     }
 
+    // https://github.com/tailwindlabs/tailwindcss/issues/20233
+    #[test]
+    fn test_template_toolkit_syntax() {
+        assert_extract_candidates_contains(
+            &pre_process_input(
+                r#"<div class="[% IF $is_open %]bg-white/40[% ELSE %]bg-white/10[% END %]"></div>"#,
+                "tx",
+            ),
+            vec!["bg-white/40", "bg-white/10"],
+        );
+    }
+
     // https://github.com/tailwindlabs/tailwindcss/issues/17050
     #[test]
     fn test_haml_syntax() {
diff --git a/crates/oxide/src/extractor/pre_processors/haml.rs b/crates/oxide/src/extractor/pre_processors/haml.rs
index 99b7bd052..ec8be0817 100644
--- a/crates/oxide/src/extractor/pre_processors/haml.rs
+++ b/crates/oxide/src/extractor/pre_processors/haml.rs
@@ -203,6 +203,81 @@ impl PreProcessor for Haml {
                     }
                 }
 
+                // Handle Ruby syntax with `%w[]` arrays embedded in Haml attribute hashes. E.g.:
+                //
+                // ```haml
+                // %div{class: %w[bg-blue-500 w-10 h-10]}
+                // ```
+                //
+                // A `%` that follows a value is not a percent literal. E.g.: the `50%w` in
+                // `hit rate 50%w.`
+                b'%' if matches!(cursor.next(), b'w' | b'W')
+                    && !cursor.prev().is_ascii_alphanumeric()
+                    && !matches!(cursor.prev(), b'_' | b')' | b']' | b'}') =>
+                {
+                    // Boundary characters
+                    let (open, close) = match cursor.input.get(cursor.pos + 2) {
+                        Some(b'[') => (b'[', b']'),
+                        Some(b'(') => (b'(', b')'),
+                        Some(b'{') => (b'{', b'}'),
+                        Some(b'<') => (b'<', b'>'),
+
+                        // Any other ASCII punctuation can be used as a custom delimiter
+                        Some(&c) if c.is_ascii_punctuation() => (c, c),
+
+                        // Everything else is not a valid delimiter
+                        _ => {
+                            cursor.advance();
+                            continue;
+                        }
+                    };
+
+                    result[cursor.pos] = b' '; // Replace `%`
+                    cursor.advance();
+                    result[cursor.pos] = b' '; // Replace `w`
+                    cursor.advance();
+                    result[cursor.pos] = b' '; // Replace the opening delimiter
+                    cursor.advance();
+
+                    // Paired delimiters can be nested as long as they are balanced. E.g.:
+                    // `%w[foo[bar]baz]` produces a flat array.
+                    let mut depth = 1_usize;
+
+                    while cursor.pos < len {
+                        match cursor.curr() {
+                            // Skip escaped characters, unless the backslash is the delimiter
+                            // itself
+                            b'\\' if close != b'\\' => {
+                                // Use backslash to embed spaces in the strings.
+                                if cursor.next() == b' ' {
+                                    result[cursor.pos] = b' ';
+                                }
+
+                                cursor.advance();
+                            }
+
+                            // Start of a nested delimiter pair
+                            c if c == open && open != close => depth += 1,
+
+                            // Closing delimiter
+                            c if c == close => {
+                                depth -= 1;
+
+                                // End of the literal, replace the closing delimiter with a space
+                                if depth == 0 {
+                                    result[cursor.pos] = b' ';
+                                    break;
+                                }
+                            }
+
+                            // Everything else is valid content
+                            _ => {}
+                        }
+
+                        cursor.advance();
+                    }
+                }
+
                 // Replace following characters with spaces if they are not inside of brackets
                 b'#' | b'=' if bracket_stack.is_empty() => {
                     result[cursor.pos] = b' ';
@@ -424,6 +499,81 @@ mod tests {
         );
     }
 
+    // https://github.com/tailwindlabs/tailwindcss/issues/20386
+    #[test]
+    fn test_embedded_ruby_percent_w_delimiters() {
+        for (input, expected) in [
+            // %w[…] in an attribute hash
+            (
+                "%div{class: %w[flex px-2.5]}",
+                "%div class:    flex px-2.5  ",
+            ),
+            // %w<…>
+            (
+                "%div{class: %w<flex px-2.5>}",
+                "%div class:    flex px-2.5  ",
+            ),
+            // Nested `<…>` does not end the literal
+            (
+                "%div{class: %w<flex <nested> px-2.5>}",
+                "%div class:    flex <nested> px-2.5  ",
+            ),
+            // Custom delimiters
+            (
+                "%div{class: %w|flex px-2.5|}",
+                "%div class:    flex px-2.5  ",
+            ),
+            (
+                "%div{class: %W!flex px-2.5!}",
+                "%div class:    flex px-2.5  ",
+            ),
+            (
+                "%div{class: %w#text-sm leading-6#}",
+                "%div class:    text-sm leading-6  ",
+            ),
+            (
+                "%div{class: %w=italic tracking-wide=}",
+                "%div class:    italic tracking-wide  ",
+            ),
+            // Nested paired delimiters stay balanced inside the literal
+            (
+                "%div{class: %w[content-['[hello]'] p-4]}",
+                "%div class:    content-['[hello]'] p-4  ",
+            ),
+            // Escaped spaces embed a space in a single array element
+            (
+                r#"%div{class: %w[foo\ bar baz-1]}"#,
+                r#"%div class:    foo  bar baz-1  "#,
+            ),
+            // A `%` that follows a value is not a percent literal
+            ("%p hit rate 50%w.", "%p hit rate 50%w "),
+        ] {
+            Haml::test(input, expected);
+        }
+
+        let input = r#"
+            %div{class: %w[bg-blue-500 w-10 h-10]}
+            %div{class: %w<flex px-2.5>}
+            %div{class: %w|underline font-bold|}
+            - classes = %w<mt-4 grid>
+        "#;
+
+        Haml::test_extract_contains(
+            input,
+            vec![
+                "bg-blue-500",
+                "w-10",
+                "h-10",
+                "flex",
+                "px-2.5",
+                "underline",
+                "font-bold",
+                "mt-4",
+                "grid",
+            ],
+        );
+    }
+
     // https://github.com/tailwindlabs/tailwindcss/pull/17051#issuecomment-2711181352
     #[test]
     fn test_haml_full_file_17051() {
diff --git a/crates/oxide/src/extractor/pre_processors/mod.rs b/crates/oxide/src/extractor/pre_processors/mod.rs
index efcbc53d8..1a04af5c9 100644
--- a/crates/oxide/src/extractor/pre_processors/mod.rs
+++ b/crates/oxide/src/extractor/pre_processors/mod.rs
@@ -10,6 +10,8 @@ pub mod ruby;
 pub mod rust;
 pub mod slim;
 pub mod svelte;
+pub mod template_toolkit;
+pub mod twig;
 pub mod vue;
 
 pub use clojure::*;
@@ -24,4 +26,6 @@ pub use ruby::*;
 pub use rust::*;
 pub use slim::*;
 pub use svelte::*;
+pub use template_toolkit::*;
+pub use twig::*;
 pub use vue::*;
diff --git a/crates/oxide/src/extractor/pre_processors/ruby.rs b/crates/oxide/src/extractor/pre_processors/ruby.rs
index 5a3a0fabb..d9a57ab77 100644
--- a/crates/oxide/src/extractor/pre_processors/ruby.rs
+++ b/crates/oxide/src/extractor/pre_processors/ruby.rs
@@ -34,45 +34,47 @@ impl PreProcessor for Ruby {
 
         // Extract embedded template languages
         // https://viewcomponent.org/guide/templates.html#interpolations
-        let content_as_str = std::str::from_utf8(content).unwrap();
+        // Only process if content is valid UTF-8, otherwise skip HEREDOC extraction
+        // but still perform the byte-level Ruby processing below
+        if let Ok(content_as_str) = std::str::from_utf8(content) {
+            let starts = TEMPLATE_START_REGEX
+                .captures_iter(content_as_str)
+                .collect::<Vec<_>>();
+            let ends = TEMPLATE_END_REGEX
+                .captures_iter(content_as_str)
+                .collect::<Vec<_>>();
 
-        let starts = TEMPLATE_START_REGEX
-            .captures_iter(content_as_str)
-            .collect::<Vec<_>>();
-        let ends = TEMPLATE_END_REGEX
-            .captures_iter(content_as_str)
-            .collect::<Vec<_>>();
+            for start in starts.iter() {
+                // The language for this block
+                let lang = start.get(1).unwrap().as_str();
 
-        for start in starts.iter() {
-            // The language for this block
-            let lang = start.get(1).unwrap().as_str();
+                // The HEREDOC delimiter
+                let delimiter_start = start.get(2).unwrap().as_str();
 
-            // The HEREDOC delimiter
-            let delimiter_start = start.get(2).unwrap().as_str();
+                // Where the "body" starts for the HEREDOC block
+                let body_start = start.get(0).unwrap().end();
 
-            // Where the "body" starts for the HEREDOC block
-            let body_start = start.get(0).unwrap().end();
+                // Look through all of the ends to find a matching language
+                for end in ends.iter() {
+                    // 1. This must appear after the start
+                    let body_end = end.get(0).unwrap().start();
+                    if body_end < body_start {
+                        continue;
+                    }
 
-            // Look through all of the ends to find a matching language
-            for end in ends.iter() {
-                // 1. This must appear after the start
-                let body_end = end.get(0).unwrap().start();
-                if body_end < body_start {
-                    continue;
+                    // The languages must match otherwise we haven't found the end
+                    let delimiter_end = end.get(1).unwrap().as_str();
+                    if delimiter_end != delimiter_start {
+                        continue;
+                    }
+
+                    let body = &content_as_str[body_start..body_end];
+                    let replaced =
+                        pre_process_input(body.as_bytes().to_vec(), &lang.to_ascii_lowercase());
+
+                    result.replace_range(body_start..body_end, replaced);
+                    break;
                 }
-
-                // The languages must match otherwise we haven't found the end
-                let delimiter_end = end.get(1).unwrap().as_str();
-                if delimiter_end != delimiter_start {
-                    continue;
-                }
-
-                let body = &content_as_str[body_start..body_end];
-                let replaced =
-                    pre_process_input(body.as_bytes().to_vec(), &lang.to_ascii_lowercase());
-
-                result.replace_range(body_start..body_end, replaced);
-                break;
             }
         }
 
@@ -156,6 +158,15 @@ impl PreProcessor for Ruby {
                 continue;
             }
 
+            // A `%` that follows a value is a modulo operation, not a percent literal. E.g.: the
+            // `50%w` in `hit rate 50%w.`
+            if cursor.prev().is_ascii_alphanumeric()
+                || matches!(cursor.prev(), b'_' | b')' | b']' | b'}')
+            {
+                cursor.advance();
+                continue;
+            }
+
             cursor.advance_twice();
 
             // Boundary character
@@ -163,8 +174,13 @@ impl PreProcessor for Ruby {
                 b'[' => b']',
                 b'(' => b')',
                 b'{' => b'}',
-                b'#' => b'#',
+                b'<' => b'>',
                 b' ' => b'\n',
+
+                // Any other ASCII punctuation can be used as a custom delimiter
+                c if c.is_ascii_punctuation() => c,
+
+                // Everything else is not a valid delimiter
                 _ => {
                     cursor.advance();
                     continue;
@@ -181,8 +197,8 @@ impl PreProcessor for Ruby {
 
             while cursor.pos < len {
                 match cursor.curr() {
-                    // Skip escaped characters
-                    b'\\' => {
+                    // Skip escaped characters, unless the backslash is the delimiter itself
+                    b'\\' if boundary != b'\\' => {
                         // Use backslash to embed spaces in the strings.
                         if cursor.next() == b' ' {
                             result[cursor.pos] = b' ';
@@ -196,6 +212,11 @@ impl PreProcessor for Ruby {
                         bracket_stack.push(cursor.curr());
                     }
 
+                    // Start of a nested `<…>`, which Ruby allows inside a `%w<…>` literal
+                    b'<' if boundary == b'>' => {
+                        bracket_stack.push(cursor.curr());
+                    }
+
                     // End of a nested bracket
                     b']' | b')' | b'}' if !bracket_stack.is_empty() => {
                         if !bracket_stack.pop(cursor.curr()) {
@@ -204,6 +225,14 @@ impl PreProcessor for Ruby {
                         }
                     }
 
+                    // End of a nested `<…>`
+                    b'>' if boundary == b'>' && !bracket_stack.is_empty() => {
+                        if !bracket_stack.pop(cursor.curr()) {
+                            // Unbalanced
+                            cursor.advance();
+                        }
+                    }
+
                     // End of the pattern, replace the boundary character with a space
                     _ if cursor.curr() == boundary => {
                         if boundary != b'\n' {
@@ -251,6 +280,24 @@ mod tests {
                 "%w(flex data-[state=pending]:bg-(--my-color) flex-col)",
                 "%w flex data-[state=pending]:bg-(--my-color) flex-col ",
             ),
+            // %w<…>
+            ("%w<flex px-2.5>", "%w flex px-2.5 "),
+            (
+                "%w<flex data-[state=pending]:bg-(--my-color) flex-col>",
+                "%w flex data-[state=pending]:bg-(--my-color) flex-col ",
+            ),
+            // Nested `<…>` does not end the literal
+            ("%w<flex <nested> px-2.5>", "%w flex <nested> px-2.5 "),
+            // %w|…|, %w:…:, %w!…!
+            ("%w|flex px-2.5|", "%w flex px-2.5 "),
+            ("%w:flex px-2.5:", "%w flex px-2.5 "),
+            ("%w!flex px-2.5!", "%w flex px-2.5 "),
+            (r#"%w\flex px-2.5\"#, r#"%w flex px-2.5 "#),
+            // A `%` that follows a value is a modulo operation, not a percent literal
+            (
+                "hit rate 50%w.\n%w[flex px-2.5]",
+                "hit rate 50%w.\n%w flex px-2.5 ",
+            ),
 
             // %w …\n
             ("%w flex px-2.5\n", "%w flex px-2.5\n"),
@@ -328,6 +375,20 @@ mod tests {
                 "%w(flex data-[state=pending]:bg-(--my-color) flex-col)",
                 vec!["flex", "data-[state=pending]:bg-(--my-color)", "flex-col"],
             ),
+            // %w<…>
+            ("%w<flex px-2.5>", vec!["flex", "px-2.5"]),
+            ("%w<px-2.5 flex>", vec!["flex", "px-2.5"]),
+            ("%w<2xl:flex>", vec!["2xl:flex"]),
+            (
+                "%w<flex data-[state=pending]:bg-(--my-color) flex-col>",
+                vec!["flex", "data-[state=pending]:bg-(--my-color)", "flex-col"],
+            ),
+            // Nested `<…>` does not end the literal
+            ("%w<flex <nested> px-2.5>", vec!["flex", "px-2.5"]),
+            // %w|…|, %w:…:, %w!…!
+            ("%w|flex px-2.5|", vec!["flex", "px-2.5"]),
+            ("%w:flex px-2.5:", vec!["flex", "px-2.5"]),
+            ("%w!flex px-2.5!", vec!["flex", "px-2.5"]),
 
             (
               "# test\n# test\n# {ActiveRecord::Base#save!}[rdoc-ref:Persistence#save!]\n%w[flex px-2.5]",
@@ -444,4 +505,24 @@ mod tests {
             vec!["text-amber-600", "text-sky-500", "text-green-500"],
         );
     }
+
+    #[test]
+    fn test_invalid_utf8_does_not_panic() {
+        // Invalid UTF-8 sequence: 0x80 is a continuation byte without a leading byte
+        let invalid_utf8: &[u8] = &[0x80, 0x81, 0x82];
+
+        let processor = Ruby::default();
+
+        // Should not panic, just return the input unchanged
+        let result = processor.process(invalid_utf8);
+        assert_eq!(result, invalid_utf8);
+    }
+
+    #[test]
+    fn test_valid_utf8_with_multibyte_chars() {
+        // Test that valid UTF-8 with multi-byte characters (like em-dashes) works
+        let input = "# Comment with em—dash\n%w[flex px-2.5]";
+
+        Ruby::test_extract_contains(input, vec!["flex", "px-2.5"]);
+    }
 }
diff --git a/crates/oxide/src/extractor/pre_processors/rust.rs b/crates/oxide/src/extractor/pre_processors/rust.rs
index 34c9e0c91..4fa53f793 100644
--- a/crates/oxide/src/extractor/pre_processors/rust.rs
+++ b/crates/oxide/src/extractor/pre_processors/rust.rs
@@ -104,6 +104,12 @@ impl Rust {
 
                 b'[' => {
                     bracket_stack.push(cursor.curr());
+
+                    // Handle `p.flex[condition]`. If there is a `-` before it, it will likely be an
+                    // arbitrary value e.g. `text-[red]`
+                    if !matches!(cursor.prev(), b'-') {
+                        result[cursor.pos] = b' ';
+                    }
                 }
 
                 b']' if !bracket_stack.is_empty() => {
@@ -213,4 +219,20 @@ mod tests {
         let input = r#"html! { \x.px-4.text-black {  } }"#;
         Rust::test(input, r#"html! { \x px-4 text-black {  } }"#);
     }
+
+    // https://github.com/tailwindlabs/tailwindcss/issues/20233
+    #[test]
+    fn test_maud_template_extraction_with_conditional_classes() {
+        let input = r#"
+            use maud::{html, Markup};
+
+            pub fn main() -> Markup {
+                html! {
+                    p.text-black[cuteness > 50] { "Squee!" }
+                }
+            }
+        "#;
+
+        Rust::test_extract_contains(input, vec!["text-black"]);
+    }
 }
diff --git a/crates/oxide/src/extractor/pre_processors/slim.rs b/crates/oxide/src/extractor/pre_processors/slim.rs
index eacfb55ee..5683858d5 100644
--- a/crates/oxide/src/extractor/pre_processors/slim.rs
+++ b/crates/oxide/src/extractor/pre_processors/slim.rs
@@ -65,17 +65,74 @@ impl PreProcessor for Slim {
                 //   class=%w[bg-blue-500 w-10 h-10]
                 // ]
                 // ```
+                //
+                // A `%` that follows a value is not a percent literal. E.g.: the `50%w` in
+                // `hit rate 50%w.`
                 b'%' if matches!(cursor.next(), b'w' | b'W')
-                    && matches!(cursor.input.get(cursor.pos + 2), Some(b'[' | b'(' | b'{')) =>
+                    && !cursor.prev().is_ascii_alphanumeric()
+                    && !matches!(cursor.prev(), b'_' | b')' | b']' | b'}') =>
                 {
+                    // Boundary characters
+                    let (open, close) = match cursor.input.get(cursor.pos + 2) {
+                        Some(b'[') => (b'[', b']'),
+                        Some(b'(') => (b'(', b')'),
+                        Some(b'{') => (b'{', b'}'),
+                        Some(b'<') => (b'<', b'>'),
+
+                        // Any other ASCII punctuation can be used as a custom delimiter
+                        Some(&c) if c.is_ascii_punctuation() => (c, c),
+
+                        // Everything else is not a valid delimiter
+                        _ => {
+                            cursor.advance();
+                            continue;
+                        }
+                    };
+
                     result[cursor.pos] = b' '; // Replace `%`
                     cursor.advance();
                     result[cursor.pos] = b' '; // Replace `w`
                     cursor.advance();
-                    result[cursor.pos] = b' '; // Replace `[` or `(` or `{`
-                    bracket_stack.push(cursor.curr());
-                    cursor.advance(); // Move past the bracket
-                    continue;
+                    result[cursor.pos] = b' '; // Replace the opening delimiter
+                    cursor.advance();
+
+                    // Paired delimiters can be nested as long as they are balanced. E.g.:
+                    // `%w[foo[bar]baz]` produces a flat array.
+                    let mut depth = 1_usize;
+
+                    while cursor.pos < len {
+                        match cursor.curr() {
+                            // Skip escaped characters, unless the backslash is the delimiter
+                            // itself
+                            b'\\' if close != b'\\' => {
+                                // Use backslash to embed spaces in the strings.
+                                if cursor.next() == b' ' {
+                                    result[cursor.pos] = b' ';
+                                }
+
+                                cursor.advance();
+                            }
+
+                            // Start of a nested delimiter pair
+                            c if c == open && open != close => depth += 1,
+
+                            // Closing delimiter
+                            c if c == close => {
+                                depth -= 1;
+
+                                // End of the literal, replace the closing delimiter with a space
+                                if depth == 0 {
+                                    result[cursor.pos] = b' ';
+                                    break;
+                                }
+                            }
+
+                            // Everything else is valid content
+                            _ => {}
+                        }
+
+                        cursor.advance();
+                    }
                 }
 
                 // Any `[` preceded by an alphanumeric value will not be part of a candidate.
@@ -316,16 +373,77 @@ mod tests {
             ]
         "#;
 
-        let expected = r#"
-            div 
-              class=   bg-blue-500 w-10 h-10]
-            ]
-            div 
-              class=   w-10 bg-green-500 h-10]
-            ]
-        "#;
+        let expected = "
+            div \n              class=   bg-blue-500 w-10 h-10 \n            ]
+            div \n              class=   w-10 bg-green-500 h-10 \n            ]
+        ";
 
         Slim::test(input, expected);
         Slim::test_extract_contains(input, vec!["bg-blue-500", "bg-green-500", "w-10", "h-10"]);
     }
+
+    // https://github.com/tailwindlabs/tailwindcss/issues/20386
+    #[test]
+    fn test_embedded_ruby_percent_w_delimiters() {
+        for (input, expected) in [
+            // %w<…>, Slim only counts `[({` nesting in attribute values, so the code must be
+            // wrapped in parentheses to contain spaces
+            (
+                "div class=(%w<bg-blue-500 w-10 h-10>)",
+                "div class=    bg-blue-500 w-10 h-10 )",
+            ),
+            // Nested `<…>` does not end the literal
+            (
+                "div class=(%w<flex <nested> px-2.5>)",
+                "div class=    flex <nested> px-2.5 )",
+            ),
+            // Custom delimiters
+            ("div class=(%w|flex px-2.5|)", "div class=    flex px-2.5 )"),
+            ("div class=(%W!flex px-2.5!)", "div class=    flex px-2.5 )"),
+            (
+                "div class=(%w#text-sm leading-6#)",
+                "div class=    text-sm leading-6 )",
+            ),
+            (
+                "div class=(%w=italic tracking-wide=)",
+                "div class=    italic tracking-wide )",
+            ),
+            // Nested paired delimiters stay balanced inside the literal
+            (
+                "div class=(%w[content-['[hello]'] p-4])",
+                "div class=    content-['[hello]'] p-4 )",
+            ),
+            // Escaped spaces embed a space in a single array element
+            (
+                r#"div class=(%w[foo\ bar baz-1])"#,
+                r#"div class=    foo  bar baz-1 )"#,
+            ),
+            // Ruby control line, which is plain Ruby code
+            ("- classes = %w<mt-4 flex>", "- classes =    mt-4 flex "),
+            // A `%` that follows a value is not a percent literal
+            ("| hit rate 50%w.", "| hit rate 50%w "),
+        ] {
+            Slim::test(input, expected);
+        }
+
+        let input = r#"
+            div[
+              class=(%w<bg-blue-500 w-10 h-10>)
+            ]
+            - classes = %w|w-10 bg-green-500 h-10|
+            = tag.div class: %W!px-2.5 flex!
+        "#;
+
+        Slim::test_extract_contains(
+            input,
+            vec![
+                "bg-blue-500",
+                "bg-green-500",
+                "w-10",
+                "h-10",
+                "px-2.5",
+                "flex",
+            ],
+        );
+    }
 }
diff --git a/crates/oxide/src/extractor/pre_processors/template_toolkit.rs b/crates/oxide/src/extractor/pre_processors/template_toolkit.rs
new file mode 100644
index 000000000..6456a2694
--- /dev/null
+++ b/crates/oxide/src/extractor/pre_processors/template_toolkit.rs
@@ -0,0 +1,52 @@
+use crate::cursor;
+use crate::extractor::pre_processors::pre_processor::PreProcessor;
+
+#[derive(Debug, Default)]
+pub struct TemplateToolkit;
+
+impl PreProcessor for TemplateToolkit {
+    fn process(&self, content: &[u8]) -> Vec<u8> {
+        let len = content.len();
+        let mut result = content.to_vec();
+        let mut cursor = cursor::Cursor::new(content);
+
+        while cursor.pos < len {
+            match (cursor.curr(), cursor.next()) {
+                (b'[', b'%') => result[cursor.pos] = b' ',
+                (b'%', b']') => result[cursor.pos + 1] = b' ',
+                _ => {}
+            }
+
+            cursor.advance();
+        }
+
+        result
+    }
+}
+
+#[cfg(test)]
+mod tests {
+    use super::TemplateToolkit;
+    use crate::extractor::pre_processors::pre_processor::PreProcessor;
+
+    #[test]
+    fn test_template_toolkit_pre_processor() {
+        for (input, expected) in [
+            (
+                "[% IF $is_open %]bg-white/40[% ELSE %]bg-white/10[% END %]",
+                " % IF $is_open % bg-white/40 % ELSE % bg-white/10 % END % ",
+            ),
+            ("[% WRAPPER %]flex[% END %]", " % WRAPPER % flex % END % "),
+        ] {
+            TemplateToolkit::test(input, expected);
+        }
+    }
+
+    #[test]
+    fn test_extraction_between_template_tags_works() {
+        TemplateToolkit::test_extract_contains(
+            r#"<div class="[% IF $is_open %]bg-white/40[% ELSE %]bg-white/10[% END %]"></div>"#,
+            vec!["bg-white/40", "bg-white/10"],
+        );
+    }
+}
diff --git a/crates/oxide/src/extractor/pre_processors/test-fixtures/haml/dst-17051.haml b/crates/oxide/src/extractor/pre_processors/test-fixtures/haml/dst-17051.haml
index 4a3543379..56a38cbe3 100644
--- a/crates/oxide/src/extractor/pre_processors/test-fixtures/haml/dst-17051.haml
+++ b/crates/oxide/src/extractor/pre_processors/test-fixtures/haml/dst-17051.haml
@@ -74,8 +74,8 @@
             ^^^^^^^^^^                                            ^^^^^^
           libraries, our components are designed to be fast, flexible, and easy to
                      ^^^ ^^^^^^^^^^ ^^^ ^^^^^^^^ ^^ ^^                 ^^^ ^^^^ ^^
-          use <i>directy</i> in Ruby on Rails!
-          ^^^    ^^^^^^^     ^^      ^^
+          use <i>directly</i> in Ruby on Rails!
+          ^^^    ^^^^^^^^     ^^      ^^
 
       = doc_example(css: "mt-8 lg:mt-0 lg:basis-3/5 h-44") do
                     ^^^   ^^^^ ^^^^^^^ ^^^^^^^^^^^^ ^^^^   ^^
@@ -101,7 +101,7 @@
 
         %p.mt-2
            ^^^^
-          Utlize
+          Utilize
           = daisy_link("HAML", "https://haml.info/", target: "_blank")
                                                      ^^^^^^
           so your views are simple, concise, and easy to understand.
@@ -119,8 +119,8 @@
         %p.mt-2
            ^^^^
           :markdown
-            **PLUS!** You can utlize filters like _Markdown_, CoffeeScript,
-                          ^^^ ^^^^^^ ^^^^^^^ ^^^^
+            **PLUS!** You can utilize filters like _Markdown_, CoffeeScript,
+                          ^^^ ^^^^^^^ ^^^^^^^ ^^^^
             Textile, and many more!
                      ^^^ ^^^^ ^^^^^
 
diff --git a/crates/oxide/src/extractor/pre_processors/test-fixtures/haml/src-17051.haml b/crates/oxide/src/extractor/pre_processors/test-fixtures/haml/src-17051.haml
index 38e17b134..8f9b61941 100644
--- a/crates/oxide/src/extractor/pre_processors/test-fixtures/haml/src-17051.haml
+++ b/crates/oxide/src/extractor/pre_processors/test-fixtures/haml/src-17051.haml
@@ -42,7 +42,7 @@
             = daisy_link "DaisyUI", "https://daisyui.com/", target: "_blank"
           = daisy_link "TailwindCSS", "https://tailwindcss.com/", target: "_blank"
           libraries, our components are designed to be fast, flexible, and easy to
-          use <i>directy</i> in Ruby on Rails!
+          use <i>directly</i> in Ruby on Rails!
 
       = doc_example(css: "mt-8 lg:mt-0 lg:basis-3/5 h-44") do
         .flex.flex-col.sm:flex-row.items-center.gap-4
@@ -58,7 +58,7 @@
           Simple, Concise Views
 
         %p.mt-2
-          Utlize
+          Utilize
           = daisy_link("HAML", "https://haml.info/", target: "_blank")
           so your views are simple, concise, and easy to understand.
 
@@ -69,7 +69,7 @@
 
         %p.mt-2
           :markdown
-            **PLUS!** You can utlize filters like _Markdown_, CoffeeScript,
+            **PLUS!** You can utilize filters like _Markdown_, CoffeeScript,
             Textile, and many more!
 
       .mt-8.xl:mt-0
diff --git a/crates/oxide/src/extractor/pre_processors/twig.rs b/crates/oxide/src/extractor/pre_processors/twig.rs
new file mode 100644
index 000000000..b6f4a3319
--- /dev/null
+++ b/crates/oxide/src/extractor/pre_processors/twig.rs
@@ -0,0 +1,179 @@
+use crate::cursor;
+use crate::extractor::pre_processors::pre_processor::PreProcessor;
+
+#[derive(Debug, Default)]
+pub struct Twig;
+
+impl PreProcessor for Twig {
+    fn process(&self, content: &[u8]) -> Vec<u8> {
+        let len = content.len();
+        let mut result = content.to_vec();
+        let mut cursor = cursor::Cursor::new(content);
+        let mut bracket_stack = vec![];
+
+        const ADD_CLASS: &[u8] = b"addClass";
+        const REMOVE_CLASS: &[u8] = b"removeClass";
+
+        while cursor.pos < len {
+            match (!bracket_stack.is_empty(), cursor.curr()) {
+                // addClass(
+                //         ^
+                (false, b'(')
+                    if cursor.pos >= ADD_CLASS.len()
+                        && matches!(
+                            &content[cursor.pos - ADD_CLASS.len()..cursor.pos],
+                            ADD_CLASS
+                        ) =>
+                {
+                    bracket_stack.push(cursor.curr());
+                    result[cursor.pos] = b' ';
+                }
+
+                // removeClass(
+                //            ^
+                (false, b'(')
+                    if cursor.pos >= REMOVE_CLASS.len()
+                        && matches!(
+                            &content[cursor.pos - REMOVE_CLASS.len()..cursor.pos],
+                            REMOVE_CLASS
+                        ) =>
+                {
+                    bracket_stack.push(cursor.curr());
+                    result[cursor.pos] = b' ';
+                }
+
+                (true, b'(') => {
+                    bracket_stack.push(cursor.curr());
+                }
+
+                (true, b')') => {
+                    bracket_stack.pop();
+
+                    if bracket_stack.is_empty() {
+                        result[cursor.pos] = b' ';
+                    }
+                }
+
+                _ => {}
+            }
+
+            cursor.advance();
+        }
+
+        result
+    }
+}
+
+#[cfg(test)]
+mod tests {
+    use super::Twig;
+    use crate::extractor::pre_processors::pre_processor::PreProcessor;
+
+    #[test]
+    fn test_twig_pre_processor() {
+        for (input, expected) in [
+            (
+                // Ensure we don't crash when we encounter an `(`
+                "(p-(--value))",
+                "(p-(--value))",
+            ),
+            (
+                // addClass with single argument
+                "addClass(p-(--value))",
+                "addClass p-(--value) ",
+            ),
+            (
+                // addClass with single argument
+                "addClass(m-4 p-8 w-full)",
+                "addClass m-4 p-8 w-full ",
+            ),
+            (
+                // removeClass with single argument
+                "removeClass(p-(--value))",
+                "removeClass p-(--value) ",
+            ),
+            (
+                // removeClass with single argument
+                "removeClass(m-4 p-8 w-full)",
+                "removeClass m-4 p-8 w-full ",
+            ),
+            (
+                // Combined with single arguments
+                "addClass(m-(--value))|removeClass(p-(--value))",
+                "addClass m-(--value) |removeClass p-(--value) ",
+            ),
+        ] {
+            Twig::test(input, expected);
+        }
+    }
+
+    // https://github.com/tailwindlabs/tailwindcss/issues/19458
+    #[test]
+    fn test_extraction_in_add_class_and_remove_class_works() {
+        // Inside normal HTML
+        let input = r#"
+          <div data-loading="addClass(opacity-50)">
+            <!-- -->
+          </div>
+        "#;
+
+        let expected = r#"
+          <div data-loading="addClass opacity-50 ">
+            <!-- -->
+          </div>
+        "#;
+
+        Twig::test(input, expected);
+        Twig::test_extract_contains(input, vec!["opacity-50"]);
+
+        // Inside a component
+        let input = r#"
+            <twig:d:Card
+              {{ ...attributes.defaults({
+                  as: "a",
+                  class: "cursor-pointer bg-base-200 card-sm md:card-md lg:card-lg",
+                  role: "button",
+                  tabindex: "0",
+                  "data-action": "live#$render",
+                  "data-loading": "addAttribute(disabled)",
+                  "data-poll": "delay(60000)|$render",
+                  "data-loading": "addClass(border border-red-500 opacity-75)",
+                 })
+              }}
+            >
+        "#;
+
+        let expected = r#"
+            <twig:d:Card
+              {{ ...attributes.defaults({
+                  as: "a",
+                  class: "cursor-pointer bg-base-200 card-sm md:card-md lg:card-lg",
+                  role: "button",
+                  tabindex: "0",
+                  "data-action": "live#$render",
+                  "data-loading": "addAttribute(disabled)",
+                  "data-poll": "delay(60000)|$render",
+                  "data-loading": "addClass border border-red-500 opacity-75 ",
+                 })
+              }}
+            >
+        "#;
+
+        Twig::test(input, expected);
+        Twig::test_extract_contains(
+            input,
+            vec![
+                // class
+                "cursor-pointer",
+                "bg-base-200",
+                "card-sm",
+                "md:card-md",
+                "lg:card-lg",
+                // data-loading
+                "border",
+                "border-red-500",
+                "opacity-75",
+            ],
+        );
+    }
+}
diff --git a/crates/oxide/src/extractor/pre_processors/vue.rs b/crates/oxide/src/extractor/pre_processors/vue.rs
index 1b9bf1668..ae037435c 100644
--- a/crates/oxide/src/extractor/pre_processors/vue.rs
+++ b/crates/oxide/src/extractor/pre_processors/vue.rs
@@ -14,13 +14,16 @@ pub struct Vue;
 impl PreProcessor for Vue {
     fn process(&self, content: &[u8]) -> Vec<u8> {
         let mut result = content.to_vec();
-        let content_as_str = std::str::from_utf8(content).unwrap();
-        for (_, [lang, body]) in TEMPLATE_REGEX
-            .captures_iter(content_as_str)
-            .map(|c| c.extract())
-        {
-            let replaced = pre_process_input(body.as_bytes().to_vec(), lang);
-            result = result.replace(body, replaced);
+
+        // Only process template tags if content is valid UTF-8
+        if let Ok(content_as_str) = std::str::from_utf8(content) {
+            for (_, [lang, body]) in TEMPLATE_REGEX
+                .captures_iter(content_as_str)
+                .map(|c| c.extract())
+            {
+                let replaced = pre_process_input(body.as_bytes().to_vec(), lang);
+                result = result.replace(body, replaced);
+            }
         }
 
         result
@@ -42,4 +45,16 @@ mod tests {
 
         Vue::test_extract_contains(input, vec!["bg-neutral-900", "text-red-500"]);
     }
+
+    #[test]
+    fn test_invalid_utf8_does_not_panic() {
+        // Invalid UTF-8 sequence: 0x80 is a continuation byte without a leading byte
+        let invalid_utf8: &[u8] = &[0x80, 0x81, 0x82];
+
+        let processor = Vue::default();
+
+        // Should not panic, just return the input unchanged
+        let result = processor.process(invalid_utf8);
+        assert_eq!(result, invalid_utf8);
+    }
 }
diff --git a/crates/oxide/src/scanner/detect_sources.rs b/crates/oxide/src/scanner/detect_sources.rs
index c519cd00d..6cfdd49cc 100644
--- a/crates/oxide/src/scanner/detect_sources.rs
+++ b/crates/oxide/src/scanner/detect_sources.rs
@@ -112,6 +112,7 @@ pub fn resolve_globs(
         }
 
         if !dirs.contains(path) {
+            it.skip_current_dir();
             continue;
         }
 
diff --git a/crates/oxide/src/scanner/fixtures/ignored-files.txt b/crates/oxide/src/scanner/fixtures/ignored-files.txt
index d2d231ec7..1e8f1029f 100644
--- a/crates/oxide/src/scanner/fixtures/ignored-files.txt
+++ b/crates/oxide/src/scanner/fixtures/ignored-files.txt
@@ -2,3 +2,5 @@ package-lock.json
 pnpm-lock.yaml
 bun.lockb
 .gitignore
+.env
+.env.*
diff --git a/crates/oxide/src/scanner/init_tracing.rs b/crates/oxide/src/scanner/init_tracing.rs
index 2a570ff20..dd4c1d071 100644
--- a/crates/oxide/src/scanner/init_tracing.rs
+++ b/crates/oxide/src/scanner/init_tracing.rs
@@ -37,20 +37,52 @@ pub fn init_tracing() {
         return;
     }
 
-    let file_path = format!("tailwindcss-{}.log", std::process::id());
-    let file = OpenOptions::new()
+    let root = Path::new(".tailwindcss");
+    let logs_dir = root.join("logs");
+    if let Err(err) = std::fs::create_dir_all(&logs_dir) {
+        eprintln!(
+            "{} Failed to create {}, skipping debug logs ({err})",
+            dim("[DEBUG]"),
+            highlight(&logs_dir.display().to_string())
+        );
+        return;
+    }
+
+    // Ensure everything inside `.tailwindcss/` is ignored by git. The file is only created if it
+    // doesn't exist yet, an existing `.gitignore` is left untouched.
+    if let Ok(mut file) = std::fs::File::create_new(root.join(".gitignore")) {
+        _ = file.write_all(b"*\n");
+    }
+
+    let file_path = logs_dir.join(format!(
+        "scanner-{}-{}.log",
+        std::time::SystemTime::now()
+            .duration_since(std::time::UNIX_EPOCH)
+            .map(|d| d.as_millis())
+            .unwrap_or(0),
+        std::process::id()
+    ));
+    let file = match OpenOptions::new()
         .create(true)
         .append(true)
         .open(&file_path)
-        .unwrap_or_else(|_| panic!("Failed to open {file_path}"));
+    {
+        Ok(file) => file,
+        Err(err) => {
+            eprintln!(
+                "{} Failed to create {}, skipping debug logs ({err})",
+                dim("[DEBUG]"),
+                highlight(&file_path.display().to_string())
+            );
+            return;
+        }
+    };
 
-    let file_path = Path::new(&file_path);
-    let absolute_file_path = dunce::canonicalize(file_path)
-        .unwrap_or_else(|_| panic!("Failed to canonicalize {file_path:?}"));
+    let absolute_file_path = dunce::canonicalize(&file_path).unwrap_or_else(|_| file_path.clone());
     eprintln!(
         "{} Writing debug info to: {}\n",
         dim("[DEBUG]"),
-        highlight(absolute_file_path.as_path().to_str().unwrap())
+        highlight(&absolute_file_path.display().to_string())
     );
 
     let file = Arc::new(Mutex::new(file));
diff --git a/crates/oxide/src/scanner/mod.rs b/crates/oxide/src/scanner/mod.rs
index 6d6cabc2a..b7da9aa17 100644
--- a/crates/oxide/src/scanner/mod.rs
+++ b/crates/oxide/src/scanner/mod.rs
@@ -17,7 +17,6 @@ use fxhash::{FxHashMap, FxHashSet};
 use ignore::{gitignore::GitignoreBuilder, WalkBuilder};
 use init_tracing::{init_tracing, SHOULD_TRACE};
 use rayon::prelude::*;
-use std::collections::{BTreeMap, BTreeSet};
 use std::path::{Path, PathBuf};
 use std::sync::{Arc, Mutex};
 use std::time::SystemTime;
@@ -79,11 +78,12 @@ pub struct Scanner {
     /// Track unique set of candidates
     candidates: FxHashSet<String>,
 
-    /// Track mtimes for files so re-scans can skip unchanged files.
-    /// Only populated after the first scan completes (to avoid unnecessary
-    /// metadata calls on initial build).
+    /// Track mtimes for files so incremental scans can skip unchanged files.
     mtimes: FxHashMap<PathBuf, SystemTime>,
 
+    /// Files that were scanned during the last `scan()` call.
+    scanned_files: Vec<String>,
+
     /// Whether we've completed at least one full scan. When false, we skip
     /// mtime tracking entirely so the initial build stays fast.
     has_scanned_once: bool,
@@ -123,9 +123,10 @@ impl Scanner {
     pub fn scan(&mut self) -> Vec<String> {
         self.sources_scanned = false;
 
-        let (scanned_blobs, css_files) = self.discover_sources();
+        let (scanned_blobs, css_files, files) = self.discover_sources();
 
         self.extract_candidates(scanned_blobs, css_files);
+        self.scanned_files = files;
 
         // Return all candidates sorted
         let mut result = self.candidates.iter().cloned().collect::<Vec<_>>();
@@ -180,6 +181,11 @@ impl Scanner {
                         continue;
                     }
 
+                    // The walked path can contain symlinks, while the changed files have already
+                    // been canonicalized. Lazily canonicalize the walked path so we can compare
+                    // the real paths as well.
+                    let mut canonical_path: Option<PathBuf> = None;
+
                     let mut drop_file_indexes = vec![];
                     for (idx, changed_file) in new_unknown_files.iter().enumerate().rev() {
                         let ChangedContent::File(file, _) = changed_file else {
@@ -188,7 +194,15 @@ impl Scanner {
 
                         // When the file is found on disk it means that all the rules pass. We can
                         // extract the current file and remove it from the list of passed in files.
-                        if file == path {
+                        let matches = file == path
+                            || (file.file_name() == path.file_name() && {
+                                if canonical_path.is_none() {
+                                    canonical_path = dunce::canonicalize(path).ok();
+                                }
+                                canonical_path.as_deref() == Some(file.as_path())
+                            });
+
+                        if matches {
                             self.files.insert(path.to_path_buf()); // Track for future use
                             content_to_scan.push(changed_file.clone()); // Track for parsing
                             drop_file_indexes.push(idx);
@@ -257,6 +271,11 @@ impl Scanner {
             .collect()
     }
 
+    #[tracing::instrument(skip_all)]
+    pub fn get_scanned_files(&self) -> Vec<String> {
+        self.scanned_files.clone()
+    }
+
     #[tracing::instrument(skip_all)]
     pub fn get_globs(&mut self) -> Vec<GlobEntry> {
         if let Some(globs) = &self.globs {
@@ -337,15 +356,14 @@ impl Scanner {
                     let i = s.as_ptr() as usize - offset;
                     let original = &original_content[i..i + s.len()];
                     if original.contains_str("-[]") {
-                        return Some(unsafe {
-                            (String::from_utf8_unchecked(original.to_vec()), i)
-                        });
+                        return String::from_utf8(original.to_vec())
+                            .ok()
+                            .map(|candidate| (candidate, i));
                     }
 
-                    // SAFETY: When we parsed the candidates, we already guaranteed that the byte
-                    // slices are valid, therefore we don't have to re-check here when we want to
-                    // convert it back to a string.
-                    Some(unsafe { (String::from_utf8_unchecked(s.to_vec()), i) })
+                    String::from_utf8(s.to_vec())
+                        .ok()
+                        .map(|candidate| (candidate, i))
                 }
 
                 _ => None,
@@ -354,14 +372,14 @@ impl Scanner {
     }
 
     #[tracing::instrument(skip_all)]
-    fn discover_sources(&mut self) -> (Vec<Vec<u8>>, Vec<PathBuf>) {
+    fn discover_sources(&mut self) -> (Vec<Vec<u8>>, Vec<PathBuf>, Vec<String>) {
         if self.sources_scanned {
-            return (vec![], vec![]);
+            return (vec![], vec![], vec![]);
         }
         self.sources_scanned = true;
 
         let Some(walker) = &mut self.walker else {
-            return (vec![], vec![]);
+            return (vec![], vec![], vec![]);
         };
 
         // Use synchronous walk for the initial build (lower overhead) and parallel
@@ -373,57 +391,109 @@ impl Scanner {
         };
 
         let mut css_files: Vec<PathBuf> = vec![];
-        let mut content_paths: Vec<(PathBuf, String)> = Vec::new();
-        let mut seen_files: FxHashSet<PathBuf> = FxHashSet::default();
+        let mut content_paths: Vec<(PathBuf, String)> = vec![];
+        let mut changed_files = vec![];
 
-        for (path, is_dir, extension) in all_entries {
-            if is_dir {
-                self.dirs.insert(path);
-            } else {
-                // Deduplicate: parallel walk can visit the same file from multiple threads
-                if !seen_files.insert(path.clone()) {
-                    continue;
+        // Fresh state
+        self.files.clear();
+        self.dirs.clear();
+        self.extensions.clear();
+        self.globs = None;
+
+        // Cache canonicalized folders in case a file itself is not symlinked, but any of the parent
+        // folders are symlinked.
+        let mut cached_canonical_dirs: FxHashMap<PathBuf, PathBuf> = FxHashMap::default();
+
+        for entry in all_entries {
+            match entry {
+                WalkEntry::Dir(path) => {
+                    self.dirs.insert(path);
                 }
-
-                // On re-scans, check mtime to skip unchanged files.
-                // On the first scan we skip this entirely to avoid extra
-                // metadata syscalls.
-                let changed = if self.has_scanned_once {
-                    let current_mtime = std::fs::metadata(&path)
-                        .ok()
-                        .and_then(|m| m.modified().ok());
-
-                    match current_mtime {
-                        Some(mtime) => {
-                            let prev = self.mtimes.insert(path.clone(), mtime);
-                            prev.is_none_or(|prev| prev != mtime)
-                        }
-                        None => true,
+                WalkEntry::File {
+                    path,
+                    mtime,
+                    is_symlink,
+                } => {
+                    // Deduplicate: parallel walk can visit the same file from multiple threads
+                    if !self.files.insert(path.clone()) {
+                        continue;
                     }
-                } else {
-                    true
-                };
 
-                match extension.as_str() {
-                    // Special handing for CSS files, we don't want to extract candidates from
-                    // these files, but we do want to extract used CSS variables.
-                    "css" => {
-                        if changed {
-                            css_files.push(path.clone());
+                    // Track canonicalized paths in addition to potentially symlinked file paths
+                    let canonical = if is_symlink {
+                        dunce::canonicalize(&path).ok()
+                    } else {
+                        path.parent().and_then(|parent| {
+                            // Perf: cache the canonicalized parent path such that sibling files don't
+                            // have to canonicalize over and over again.
+                            let canonical_parent = cached_canonical_dirs
+                                .entry(parent.to_path_buf())
+                                .or_insert_with(|| {
+                                    dunce::canonicalize(parent)
+                                        .unwrap_or_else(|_| parent.to_path_buf())
+                                });
+
+                            if canonical_parent.as_path() != parent {
+                                path.file_name()
+                                    .map(|file_name| canonical_parent.join(file_name))
+                            } else {
+                                None
+                            }
+                        })
+                    };
+
+                    if let Some(canonical) = canonical {
+                        if canonical != path {
+                            self.files.insert(canonical);
                         }
                     }
-                    _ => {
-                        if changed {
-                            content_paths.push((path.clone(), extension.clone()));
+                    let extension = path
+                        .extension()
+                        .and_then(|x| x.to_str())
+                        .unwrap_or_default()
+                        .to_owned();
+
+                    self.extensions.insert(extension.to_owned());
+
+                    // On incremental scans, check mtime to skip unchanged files.
+                    // On the first scan, track mtimes while still scanning every file.
+                    let changed = if self.has_scanned_once {
+                        match mtime {
+                            Some(mtime) => {
+                                let prev = self.mtimes.insert(path.clone(), mtime);
+                                prev.is_none_or(|prev| prev != mtime)
+                            }
+                            None => true,
                         }
+                    } else {
+                        if let Some(mtime) = mtime {
+                            self.mtimes.insert(path.clone(), mtime);
+                        }
+
+                        true
+                    };
+
+                    if !changed {
+                        continue;
+                    }
+
+                    if let Ok(file) = path.clone().into_os_string().into_string() {
+                        changed_files.push(file);
+                    }
+
+                    match extension.as_str() {
+                        // Special handing for CSS files, we don't want to extract candidates from
+                        // these files, but we do want to extract used CSS variables.
+                        "css" => css_files.push(path),
+                        _ => content_paths.push((path, extension)),
                     }
                 }
-
-                self.extensions.insert(extension);
-                self.files.insert(path);
             }
         }
 
+        // Ensure `mtimes` don't include stale files
+        self.mtimes.retain(|path, _| self.files.contains(path));
+
         // Read + preprocess all discovered files in parallel
         let scanned_blobs: Vec<Vec<u8>> = content_paths
             .into_par_iter()
@@ -443,7 +513,9 @@ impl Scanner {
             self.has_scanned_once = true;
         }
 
-        (scanned_blobs, css_files)
+        changed_files.par_sort_unstable();
+
+        (scanned_blobs, css_files, changed_files)
     }
 }
 
@@ -474,13 +546,15 @@ pub fn pre_process_input(content: Vec<u8>, extension: &str) -> Vec<u8> {
         "heex" | "eex" | "ex" | "exs" => Elixir.process(&content),
         "cshtml" | "razor" => Razor.process(&content),
         "haml" => Haml.process(&content),
-        "json" => Json.process(&content),
+        "json" | "jsonl" | "ndjson" => Json.process(&content),
         "md" | "mdx" => Markdown.process(&content),
         "pug" => Pug.process(&content),
         "rb" | "erb" => Ruby.process(&content),
         "slim" | "slang" => Slim.process(&content),
         "svelte" => Svelte.process(&content),
         "rs" => Rust.process(&content),
+        "tt" | "tt2" | "tx" => TemplateToolkit.process(&content),
+        "twig" => Twig.process(&content),
         "vue" => Vue.process(&content),
         _ => content,
     }
@@ -542,35 +616,50 @@ where
             a
         })
         .into_iter()
-        .map(|s| unsafe { String::from_utf8_unchecked(s.to_vec()) })
+        .filter_map(|s| String::from_utf8(s.to_vec()).ok())
         .collect()
 }
 
-type WalkEntry = (PathBuf, bool, String);
+#[derive(Debug)]
+enum WalkEntry {
+    Dir(PathBuf),
+    File {
+        path: PathBuf,
+        mtime: Option<SystemTime>,
+
+        /// Whether the path itself is a symlink
+        is_symlink: bool,
+    },
+}
+
+impl From<ignore::DirEntry> for WalkEntry {
+    fn from(entry: ignore::DirEntry) -> Self {
+        let is_dir = entry.file_type().map(|ft| ft.is_dir()).unwrap_or(false);
+        let is_symlink = entry.path_is_symlink();
+        let path = entry.into_path();
+
+        if is_dir {
+            WalkEntry::Dir(path)
+        } else {
+            let mtime = path.metadata().ok().and_then(|m| m.modified().ok());
+            WalkEntry::File {
+                path,
+                mtime,
+                is_symlink,
+            }
+        }
+    }
+}
 
 /// Walk the file system synchronously. Used for the initial build where the overhead of spawning
 /// parallel walker threads is not worth it.
 #[tracing::instrument(skip_all)]
 fn walk_synchronous(walker: &mut WalkBuilder) -> Vec<WalkEntry> {
-    let mut entries = Vec::new();
-
-    for entry in walker.build().filter_map(Result::ok) {
-        let is_dir = entry.file_type().map(|ft| ft.is_dir()).unwrap_or(false);
-        let path = entry.into_path();
-
-        if is_dir {
-            entries.push((path, true, String::new()));
-        } else {
-            let ext = path
-                .extension()
-                .and_then(|x| x.to_str())
-                .unwrap_or_default()
-                .to_owned();
-            entries.push((path, false, ext));
-        }
-    }
-
-    entries
+    walker
+        .build()
+        .filter_map(Result::ok)
+        .map(WalkEntry::from)
+        .collect()
 }
 
 /// Walk the file system in parallel. Used in watch mode where the parallel walker overhead is
@@ -590,7 +679,7 @@ fn walk_parallel(walker: &mut WalkBuilder) -> Vec<WalkEntry> {
         }
     }
 
-    let collected: Arc<Mutex<Vec<WalkEntry>>> = Arc::new(Mutex::new(Vec::new()));
+    let collected: Arc<Mutex<Vec<WalkEntry>>> = Arc::new(Mutex::new(vec![]));
 
     walker.build_parallel().run(|| {
         let mut buf = FlushOnDrop {
@@ -603,19 +692,7 @@ fn walk_parallel(walker: &mut WalkBuilder) -> Vec<WalkEntry> {
                 return ignore::WalkState::Continue;
             };
 
-            let is_dir = entry.file_type().map(|ft| ft.is_dir()).unwrap_or(false);
-            let path = entry.into_path();
-
-            if is_dir {
-                buf.local.push((path, true, String::new()));
-            } else {
-                let ext = path
-                    .extension()
-                    .and_then(|x| x.to_str())
-                    .unwrap_or_default()
-                    .to_owned();
-                buf.local.push((path, false, ext));
-            }
+            buf.local.push(WalkEntry::from(entry));
 
             if buf.local.len() >= 256 {
                 buf.shared.lock().unwrap().append(&mut buf.local);
@@ -636,7 +713,16 @@ fn walk_parallel(walker: &mut WalkBuilder) -> Vec<WalkEntry> {
 fn create_walker(sources: &Sources) -> Option<WalkBuilder> {
     let mut other_roots: FxHashSet<&PathBuf> = FxHashSet::default();
     let mut first_root: Option<&PathBuf> = None;
-    let mut ignores: BTreeMap<&PathBuf, BTreeSet<String>> = Default::default();
+
+    let mut ignores: Vec<(&PathBuf, Vec<String>)> = Default::default();
+    let mut emit = |base, pattern| match ignores.last_mut() {
+        Some((prev_base, patterns)) if *prev_base == base => {
+            patterns.push(pattern);
+        }
+        _ => {
+            ignores.push((base, vec![pattern]));
+        }
+    };
 
     for source in sources.iter() {
         match source {
@@ -648,7 +734,7 @@ fn create_walker(sources: &Sources) -> Option<WalkBuilder> {
                 }
             }
             SourceEntry::Pattern { base, pattern } => {
-                let mut pattern = pattern.to_string();
+                let pattern = pattern.to_owned();
 
                 if first_root.is_none() {
                     first_root = Some(base);
@@ -657,35 +743,19 @@ fn create_walker(sources: &Sources) -> Option<WalkBuilder> {
                 }
 
                 if !pattern.contains("**") {
-                    // Ensure that the pattern is pinned to the base path.
-                    if !pattern.starts_with("/") {
-                        pattern = format!("/{pattern}");
-                    }
-
                     // Specific patterns should take precedence even over git-ignored files:
-                    ignores
-                        .entry(base)
-                        .or_default()
-                        .insert(format!("!{}", pattern));
+                    emit(base, format!("!{}", pattern));
                 } else {
                     // Assumption: the pattern we receive will already be brace expanded. So
                     // `*.{html,jsx}` will result in two separate patterns: `*.html` and `*.jsx`.
                     if let Some(extension) = Path::new(&pattern).extension() {
                         // Extend auto source detection to include the extension
-                        ignores
-                            .entry(base)
-                            .or_default()
-                            .insert(format!("!*.{}", extension.to_string_lossy()));
+                        emit(base, format!("!*.{}", extension.to_string_lossy()));
                     }
                 }
             }
             SourceEntry::Ignored { base, pattern } => {
-                let mut pattern = pattern.to_string();
-                // Ensure that the pattern is pinned to the base path.
-                if !pattern.starts_with("/") {
-                    pattern = format!("/{pattern}");
-                }
-                ignores.entry(base).or_default().insert(pattern);
+                emit(base, pattern.to_owned());
             }
             SourceEntry::External { base } => {
                 if first_root.is_none() {
@@ -695,16 +765,10 @@ fn create_walker(sources: &Sources) -> Option<WalkBuilder> {
                 }
 
                 // External sources should take precedence even over git-ignored files:
-                ignores
-                    .entry(base)
-                    .or_default()
-                    .insert(format!("!{}", "/**/*"));
+                emit(base, "!/**/*".to_owned());
 
                 // External sources should still disallow binary extensions:
-                ignores
-                    .entry(base)
-                    .or_default()
-                    .insert(BINARY_EXTENSIONS_GLOB.clone());
+                emit(base, BINARY_EXTENSIONS_GLOB.clone());
             }
         }
     }
@@ -793,14 +857,7 @@ fn create_walker(sources: &Sources) -> Option<WalkBuilder> {
     let pattern_sources: Vec<(PathBuf, String)> = sources
         .iter()
         .filter_map(|source| match source {
-            SourceEntry::Pattern { base, pattern } => {
-                let normalized = if pattern.starts_with("/") {
-                    pattern.to_string()
-                } else {
-                    format!("/{pattern}")
-                };
-                Some((base.clone(), normalized))
-            }
+            SourceEntry::Pattern { base, pattern } => Some((base.into(), pattern.into())),
             _ => None,
         })
         .collect();
diff --git a/crates/oxide/src/scanner/sources.rs b/crates/oxide/src/scanner/sources.rs
index f28b16a49..53c09387f 100644
--- a/crates/oxide/src/scanner/sources.rs
+++ b/crates/oxide/src/scanner/sources.rs
@@ -1,7 +1,8 @@
-use crate::glob::split_pattern;
 use crate::GlobEntry;
 use bexpand::Expression;
-use std::path::PathBuf;
+use fxhash::{FxHashMap, FxHashSet};
+use ignore::gitignore::Gitignore;
+use std::path::{Component, Path, PathBuf};
 use tracing::{event, Level};
 
 use super::auto_source_detection::IGNORED_CONTENT_DIRS;
@@ -49,13 +50,14 @@ pub enum SourceEntry {
     /// ```
     Ignored { base: PathBuf, pattern: String },
 
-    /// External sources are sources outside of your git root which should not
-    /// follow gitignore rules.
+    /// External sources are directories that are ignored (by us or .gitignore rules), but should be
+    /// included bypassing the default ignore rules.
     ///
     /// Represented by:
     ///
     /// ```css
     /// @source "../node_modules/my-lib";`
+    /// @source "../node_modules/my-lib/**/*";`
     /// ```
     External { base: PathBuf },
 }
@@ -75,6 +77,164 @@ impl Sources {
     }
 }
 
+/// When dealing with a pattern, then it could be that we end up with:
+///
+/// ```json
+/// { base: '/some/folder', pattern: 'foo.ts' }
+/// ```
+///
+/// If we just emit `!foo.ts` for the `/some/folder` path, then _everything_ else in that folder
+/// would still be walked (but the result will be ignored).
+///
+/// Instead, we have to ensure that we ignore everything in that folder _except_ for the `foo.ts`
+/// pattern.
+///
+/// This should be equivalent to:
+/// ```gitignore
+/// *
+/// !foo.ts
+/// ```
+///
+/// However, we have to be careful that we don't start ignoring files/folders that already exist.
+/// ```css
+/// @source "./some/folder/foo.ts";
+/// @source "./some/folder/bar.ts";
+/// ```
+/// Would result in:
+/// ```json
+/// { base: '/some/folder', pattern: 'foo.ts' }
+/// { base: '/some/folder', pattern: 'bar.ts' }
+/// ```
+///
+/// If we were to blindly emit `*` for each pattern, then the `.gitignore` equivalent would look like
+/// this:
+/// ```gitignore
+/// *
+/// !foo.ts
+/// *
+/// !bar.ts
+/// ```
+///
+/// This would result in ignoring the `foo.ts` file as well. Therefore we only want to insert
+/// this `*` pattern when nothing else exists yet.
+///
+/// There is another problem that we need to solve. Let's say you have a pattern that contains a `*`
+/// in the pattern:
+/// ```css
+/// @source './src/ba*/*.html';
+/// ```
+///
+/// This would result in
+/// ```json
+/// { base: '/src', pattern: '/ba*/*.html' }
+/// ```
+///
+/// If we now inject the `*` pattern for the `/src` folder, then we wouldn't scan any `ba*` folders
+/// (e.g. `bar` or `baz`). For this, we have to make sure that we add inverse patterns for these
+/// folders. This would essentially result in:
+/// ```gitignore
+/// *                     ← ignore everything
+/// !/ba*/                ← except for the `ba*/` pattern, so we scan these folders
+/// !/ba*/*.html          ← then ensure we scan the `*.html` files in it as well
+/// ```
+///
+fn expand_restricted_patterns(sources: Vec<SourceEntry>) -> Vec<SourceEntry> {
+    let unrestricted_roots = sources
+        .iter()
+        .filter_map(|source| match source {
+            SourceEntry::Auto { base } | SourceEntry::External { base } => Some(base.clone()),
+            SourceEntry::Pattern { base, pattern } if pattern.contains("**") => Some(base.clone()),
+            _ => None,
+        })
+        .collect::<Vec<_>>();
+
+    // Bases of restricted patterns. Each of these becomes its own walk root with its own
+    // `*` + `!<pattern>` rules, so an ancestor base must not ignore them recursively.
+    let pattern_roots = sources
+        .iter()
+        .filter_map(|source| match source {
+            SourceEntry::Pattern { base, .. } => Some(base.clone()),
+            _ => None,
+        })
+        .collect::<Vec<_>>();
+
+    let mut restricted_roots: FxHashSet<PathBuf> = FxHashSet::default();
+    let mut expanded = vec![];
+
+    for source in sources {
+        let SourceEntry::Pattern { base, pattern } = &source else {
+            expanded.push(source);
+            continue;
+        };
+
+        // `base` is already included by another `@source` that we know should be walked. This
+        // includes the case where `base` is _nested_ inside such a root, because everything under
+        // an unrestricted root is walked already. Restricting it would incorrectly hide siblings
+        // that the broader source is supposed to pick up.
+        if unrestricted_roots.iter().any(|root| base.starts_with(root)) {
+            expanded.push(source);
+            continue;
+        }
+
+        // Ignore everything in the directory. We will later add the specific patterns we are
+        // interested in.
+        if restricted_roots.insert(base.clone()) {
+            // When another source root is nested inside this base — an unrestricted root, or the
+            // base of another restricted pattern (which is walked from its own root with its own
+            // rules) — only ignore direct children so the nested root can still be walked.
+            let has_nested_root = unrestricted_roots.iter().any(|root| root.starts_with(base))
+                || pattern_roots
+                    .iter()
+                    .any(|root| root != base && root.starts_with(base));
+
+            let pattern = if has_nested_root { "/*" } else { "*" };
+
+            expanded.push(SourceEntry::Ignored {
+                base: base.clone(),
+                pattern: pattern.to_owned(),
+            });
+        }
+
+        // Ensure to _include_ parent paths, otherwise the `*` from above would block walking the
+        // folders that need to be walked.
+        //
+        // ```css
+        // @source './src/ba*/*.html';
+        // ```
+        //
+        // ```gitignore
+        // *                     ← added by the above rule
+        // !/ba*/                ← this is what we're focusing on in this block
+        // !/ba*/*.html          ← this is added later
+        // ```
+        {
+            let mut dir = PathBuf::new();
+            let mut components = Path::new(pattern).components().peekable();
+
+            while let Some(component) = components.next() {
+                if components.peek().is_none() {
+                    break;
+                }
+
+                match component {
+                    Component::Prefix(_) | Component::RootDir | Component::CurDir => continue,
+                    Component::ParentDir | Component::Normal(_) => dir.push(component),
+                }
+
+                expanded.push(SourceEntry::Ignored {
+                    base: base.clone(),
+                    pattern: format!("!/{}/", path_to_posix_string(&dir).trim_start_matches('/')),
+                });
+            }
+        }
+
+        // Track the original source
+        expanded.push(source);
+    }
+
+    expanded
+}
+
 impl PublicSourceEntry {
     /// Optimize the PublicSourceEntry by trying to move all the static parts of the pattern to the
     /// base of the PublicSourceEntry.
@@ -102,72 +262,456 @@ impl PublicSourceEntry {
     /// resolved path.
     pub fn optimize(&mut self) {
         // Resolve base path immediately
-        let Ok(base) = dunce::canonicalize(&self.base) else {
+        let Ok(mut base) = dunce::canonicalize(&self.base) else {
             event!(Level::ERROR, "Failed to resolve base: {:?}", self.base);
             return;
         };
-        self.base = base.to_string_lossy().to_string();
 
-        // No dynamic part, figure out if we are dealing with a file or a directory.
-        if !self.pattern.contains('*') {
-            let combined_path = if self.pattern.starts_with("/") {
-                PathBuf::from(&self.pattern)
-            } else {
-                PathBuf::from(&self.base).join(&self.pattern)
-            };
-
-            match dunce::canonicalize(combined_path) {
-                Ok(resolved_path) if resolved_path.is_dir() => {
-                    self.base = resolved_path.to_string_lossy().to_string();
-                    self.pattern = "**/*".to_owned();
-                }
-                Ok(resolved_path) if resolved_path.is_file() => {
-                    self.base = resolved_path
-                        .parent()
-                        .unwrap()
-                        .to_string_lossy()
-                        .to_string();
-                    // Ensure leading slash, otherwise it will match against all files in all folders/
-                    self.pattern =
-                        format!("/{}", resolved_path.file_name().unwrap().to_string_lossy());
-                }
-                _ => {}
-            }
-            return;
+        let mut new_pattern = PathBuf::new();
+        enum ComponentStage {
+            Base,
+            Pattern,
         }
+        let mut stage = ComponentStage::Base;
 
-        // Contains dynamic part
-        let (static_part, dynamic_part) = split_pattern(&self.pattern);
+        let mut components = Path::new(&self.pattern).components().peekable();
+        while let Some(component) = components.next() {
+            match stage {
+                ComponentStage::Base => {
+                    match component {
+                        // Ignore the current dir, e.g. `.`
+                        Component::CurDir => {}
 
-        let base: PathBuf = self.base.clone().into();
-        let base = match static_part {
-            Some(static_part) => {
-                // TODO: If the base does not exist on disk, try removing the last slash and try
-                // again.
-                match dunce::canonicalize(base.join(static_part)) {
-                    Ok(base) => base,
-                    Err(err) => {
-                        event!(tracing::Level::ERROR, "Failed to resolve glob: {:?}", err);
-                        return;
+                        // Go up a directory, e.g. `..`
+                        Component::ParentDir => {
+                            base.pop();
+                        }
+
+                        // Once we hit a component that contains a wildcard character, then we
+                        // can't change the base anymore and we must move to the pattern part.
+                        Component::Normal(part) if part.to_string_lossy().contains("*") => {
+                            new_pattern.push(component);
+                            stage = ComponentStage::Pattern;
+                        }
+
+                        // File or folder, but not the last component
+                        Component::Normal(part) if components.peek().is_some() => {
+                            base.push(part);
+                        }
+
+                        // Last file or folder. If it's a folder, we move it to the base,
+                        // otherwise we move it to the pattern.
+                        Component::Normal(part) => {
+                            let full_path = base.join(part);
+                            if full_path.is_dir() {
+                                base.push(part);
+                            } else {
+                                new_pattern.push(part);
+                            }
+                        }
+
+                        // When we're dealing with an absolute path, then we have to bypass the
+                        // `base` entirely.
+                        Component::Prefix(_) => {
+                            base.clear();
+                            base.push(component);
+                        }
+                        Component::RootDir => {
+                            #[cfg(not(windows))]
+                            base.clear();
+                            base.push(component);
+                        }
                     }
                 }
-            }
-            None => base,
-        };
-
-        let pattern = match dynamic_part {
-            Some(dynamic_part) => dynamic_part,
-            None => {
-                if base.is_dir() {
-                    "**/*".to_owned()
-                } else {
-                    "".to_owned()
+                ComponentStage::Pattern => {
+                    new_pattern.push(component);
                 }
             }
-        };
+        }
 
         self.base = base.to_string_lossy().to_string();
-        self.pattern = pattern;
+        self.pattern = path_to_posix_string(&new_pattern);
+
+        // Ensure we have `**/*` when the base is a folder and we don't have a pattern at all
+        if self.pattern == "" {
+            self.pattern = "/**/*".to_owned();
+        }
+        // Ensure that the pattern is pinned to the base path.
+        else if !self.pattern.starts_with("/") {
+            self.pattern = format!("/{}", self.pattern);
+        }
+    }
+}
+
+fn path_to_posix_string(path: &Path) -> String {
+    let mut parts = Vec::new();
+    let mut is_rooted = false;
+
+    for component in path.components() {
+        match component {
+            Component::Prefix(prefix) => {
+                parts.push(prefix.as_os_str().to_string_lossy().to_string());
+            }
+            Component::RootDir => {
+                is_rooted = true;
+                if parts.is_empty() {
+                    parts.push(String::new());
+                }
+            }
+            Component::CurDir => {
+                parts.push(".".to_string());
+            }
+            Component::ParentDir => {
+                parts.push("..".to_string());
+            }
+            Component::Normal(part) => {
+                parts.push(part.to_string_lossy().to_string());
+            }
+        }
+    }
+
+    let result = parts.join("/");
+    if result.is_empty() && is_rooted {
+        "/".to_string()
+    } else {
+        result
+    }
+}
+
+#[cfg(test)]
+mod tests {
+    use super::*;
+    use pretty_assertions::assert_eq;
+    use std::fs;
+    use tempfile::tempdir;
+
+    #[test]
+    fn path_to_posix_string_serializes_relative_paths() {
+        let path = PathBuf::from("src").join("**").join("*.html");
+
+        assert_eq!(path_to_posix_string(&path), "src/**/*.html");
+    }
+
+    #[test]
+    fn path_to_posix_string_serializes_rooted_paths() {
+        let path = PathBuf::from(std::path::MAIN_SEPARATOR.to_string())
+            .join("src")
+            .join("**")
+            .join("*.html");
+
+        assert_eq!(path_to_posix_string(&path), "/src/**/*.html");
+    }
+
+    #[test]
+    fn path_to_posix_string_serializes_empty_paths() {
+        assert_eq!(path_to_posix_string(&PathBuf::new()), "");
+    }
+
+    #[test]
+    fn optimize_hoists_static_directories_and_keeps_files_in_the_pattern() {
+        let dir = tempdir().unwrap();
+        fs::create_dir_all(dir.path().join("src").join("examples")).unwrap();
+
+        let mut source = PublicSourceEntry {
+            base: dir.path().to_string_lossy().to_string(),
+            pattern: "src/examples/index.html".to_string(),
+            negated: false,
+        };
+
+        source.optimize();
+
+        assert_eq!(
+            source.base,
+            dunce::canonicalize(dir.path().join("src").join("examples"))
+                .unwrap()
+                .to_string_lossy()
+        );
+        assert_eq!(source.pattern, "/index.html");
+    }
+
+    #[test]
+    fn optimize_hoists_folder_patterns() {
+        let dir = tempdir().unwrap();
+        fs::create_dir_all(dir.path().join("src").join("examples")).unwrap();
+
+        let mut source = PublicSourceEntry {
+            base: dir.path().to_string_lossy().to_string(),
+            pattern: "src/examples".to_string(),
+            negated: false,
+        };
+
+        source.optimize();
+
+        assert_eq!(
+            source.base,
+            dunce::canonicalize(dir.path().join("src").join("examples"))
+                .unwrap()
+                .to_string_lossy()
+        );
+        assert_eq!(source.pattern, "/**/*");
+    }
+
+    #[test]
+    fn optimize_keeps_wildcards_in_the_pattern() {
+        let dir = tempdir().unwrap();
+        fs::create_dir_all(dir.path().join("src")).unwrap();
+
+        let mut source = PublicSourceEntry {
+            base: dir.path().to_string_lossy().to_string(),
+            pattern: "src/**/*.html".to_string(),
+            negated: false,
+        };
+
+        source.optimize();
+
+        assert_eq!(
+            source.base,
+            dunce::canonicalize(dir.path().join("src"))
+                .unwrap()
+                .to_string_lossy()
+        );
+        assert_eq!(source.pattern, "/**/*.html");
+    }
+
+    #[test]
+    fn concrete_patterns_are_expanded_to_restrict_their_base() {
+        let dir = tempdir().unwrap();
+        fs::create_dir_all(dir.path().join("src")).unwrap();
+        let base = dunce::canonicalize(dir.path().join("src")).unwrap();
+
+        let sources = public_source_entries_to_private_source_entries(vec![PublicSourceEntry {
+            base: dir.path().to_string_lossy().to_string(),
+            pattern: "src/foo.html".to_string(),
+            negated: false,
+        }]);
+
+        assert_eq!(
+            sources,
+            vec![
+                SourceEntry::Ignored {
+                    base: base.clone(),
+                    pattern: "*".to_string(),
+                },
+                SourceEntry::Pattern {
+                    base,
+                    pattern: "/foo.html".to_string(),
+                },
+            ]
+        );
+    }
+
+    #[test]
+    fn restricted_patterns_include_parent_directory_allow_rules() {
+        let dir = tempdir().unwrap();
+        fs::create_dir_all(dir.path().join("src")).unwrap();
+        let base = dunce::canonicalize(dir.path().join("src")).unwrap();
+
+        let sources = public_source_entries_to_private_source_entries(vec![PublicSourceEntry {
+            base: dir.path().to_string_lossy().to_string(),
+            pattern: "src/ef*/*.html".to_string(),
+            negated: false,
+        }]);
+
+        assert_eq!(
+            sources,
+            vec![
+                SourceEntry::Ignored {
+                    base: base.clone(),
+                    pattern: "*".to_string(),
+                },
+                SourceEntry::Ignored {
+                    base: base.clone(),
+                    pattern: "!/ef*/".to_string(),
+                },
+                SourceEntry::Pattern {
+                    base,
+                    pattern: "/ef*/*.html".to_string(),
+                },
+            ]
+        );
+    }
+
+    #[test]
+    fn unrestricted_sources_do_not_expand_patterns_for_the_same_base() {
+        let dir = tempdir().unwrap();
+        fs::create_dir_all(dir.path().join("src")).unwrap();
+        let base = dunce::canonicalize(dir.path().join("src")).unwrap();
+
+        let sources = public_source_entries_to_private_source_entries(vec![
+            PublicSourceEntry {
+                base: dir.path().to_string_lossy().to_string(),
+                pattern: "src".to_string(),
+                negated: false,
+            },
+            PublicSourceEntry {
+                base: dir.path().to_string_lossy().to_string(),
+                pattern: "src/foo.html".to_string(),
+                negated: false,
+            },
+        ]);
+
+        assert_eq!(
+            sources,
+            vec![
+                SourceEntry::Auto { base: base.clone() },
+                SourceEntry::Pattern {
+                    base,
+                    pattern: "/foo.html".to_string(),
+                },
+            ]
+        );
+    }
+
+    #[test]
+    fn restricted_parent_bases_do_not_open_unrelated_siblings() {
+        let dir = tempdir().unwrap();
+        let project = dir.path().join("Users").join("robin").join("docus-test");
+        fs::create_dir_all(&project).unwrap();
+
+        let users = dunce::canonicalize(dir.path().join("Users")).unwrap();
+        let project = dunce::canonicalize(project).unwrap();
+
+        let sources = public_source_entries_to_private_source_entries(vec![
+            PublicSourceEntry {
+                base: project.to_string_lossy().to_string(),
+                pattern: "**/*".to_string(),
+                negated: false,
+            },
+            PublicSourceEntry {
+                base: project.to_string_lossy().to_string(),
+                pattern: "../../app.config.ts".to_string(),
+                negated: false,
+            },
+        ]);
+
+        assert_eq!(
+            sources,
+            vec![
+                SourceEntry::Auto {
+                    base: project.clone(),
+                },
+                SourceEntry::Ignored {
+                    base: users.clone(),
+                    pattern: "/*".to_string(),
+                },
+                SourceEntry::Pattern {
+                    base: users,
+                    pattern: "/app.config.ts".to_string(),
+                },
+            ]
+        );
+    }
+
+    #[test]
+    fn restricted_patterns_preserve_source_order() {
+        let dir = tempdir().unwrap();
+        fs::create_dir_all(dir.path().join("src")).unwrap();
+        let base = dunce::canonicalize(dir.path().join("src")).unwrap();
+
+        let sources = public_source_entries_to_private_source_entries(vec![
+            PublicSourceEntry {
+                base: dir.path().to_string_lossy().to_string(),
+                pattern: "src/foo.html".to_string(),
+                negated: false,
+            },
+            PublicSourceEntry {
+                base: dir.path().to_string_lossy().to_string(),
+                pattern: "src/foo.html".to_string(),
+                negated: true,
+            },
+        ]);
+
+        assert_eq!(
+            sources,
+            vec![
+                SourceEntry::Ignored {
+                    base: base.clone(),
+                    pattern: "*".to_string(),
+                },
+                SourceEntry::Pattern {
+                    base: base.clone(),
+                    pattern: "/foo.html".to_string(),
+                },
+                SourceEntry::Ignored {
+                    base,
+                    pattern: "/foo.html".to_string(),
+                },
+            ]
+        );
+    }
+
+    /// Run the public-to-private conversion for an auto-detected source pointing at `base` and
+    /// return the resulting entry.
+    fn auto_source_entry(base: &Path) -> SourceEntry {
+        public_source_entries_to_private_source_entries(vec![PublicSourceEntry {
+            base: base.to_string_lossy().to_string(),
+            pattern: "**/*".to_string(),
+            negated: false,
+        }])
+        .into_iter()
+        .next()
+        .unwrap()
+    }
+
+    #[test]
+    fn auto_detected_folders_become_auto_sources() {
+        let dir = tempdir().unwrap();
+        let base = dir.path().join("src");
+        fs::create_dir_all(&base).unwrap();
+        let base = dunce::canonicalize(&base).unwrap();
+
+        assert_eq!(auto_source_entry(&base), SourceEntry::Auto { base });
+    }
+
+    #[test]
+    fn folders_ignored_by_default_become_external_sources() {
+        let dir = tempdir().unwrap();
+        let base = dir.path().join("node_modules").join("my-lib");
+        fs::create_dir_all(&base).unwrap();
+        let base = dunce::canonicalize(&base).unwrap();
+
+        assert_eq!(auto_source_entry(&base), SourceEntry::External { base });
+    }
+
+    #[test]
+    fn folders_ignored_by_gitignore_become_external_sources() {
+        let dir = tempdir().unwrap();
+        // Pretend this is a git repository so the `.gitignore` search is bounded to it.
+        fs::create_dir_all(dir.path().join(".git")).unwrap();
+        fs::write(dir.path().join(".gitignore"), "dist/\n").unwrap();
+
+        let base = dir.path().join("dist");
+        fs::create_dir_all(&base).unwrap();
+        let base = dunce::canonicalize(&base).unwrap();
+
+        assert_eq!(auto_source_entry(&base), SourceEntry::External { base });
+    }
+
+    #[test]
+    fn folders_ignored_by_a_parent_gitignore_become_external_sources() {
+        let dir = tempdir().unwrap();
+        fs::create_dir_all(dir.path().join(".git")).unwrap();
+        // A `.gitignore` higher up in the tree should still apply to nested directories.
+        fs::write(dir.path().join(".gitignore"), "generated/\n").unwrap();
+
+        let base = dir.path().join("packages").join("app").join("generated");
+        fs::create_dir_all(&base).unwrap();
+        let base = dunce::canonicalize(&base).unwrap();
+
+        assert_eq!(auto_source_entry(&base), SourceEntry::External { base });
+    }
+
+    #[test]
+    fn folders_not_ignored_by_gitignore_stay_auto_sources() {
+        let dir = tempdir().unwrap();
+        fs::create_dir_all(dir.path().join(".git")).unwrap();
+        fs::write(dir.path().join(".gitignore"), "dist/\n").unwrap();
+
+        let base = dir.path().join("src");
+        fs::create_dir_all(&base).unwrap();
+        let base = dunce::canonicalize(&base).unwrap();
+
+        assert_eq!(auto_source_entry(&base), SourceEntry::Auto { base });
     }
 }
 
@@ -218,18 +762,111 @@ pub fn public_source_entries_to_private_source_entries(
         })
         .collect::<Vec<_>>();
 
+    // Compiled `.gitignore` matchers are cached per directory so we read and parse each
+    // `.gitignore` file at most once, even though entries commonly share ancestor directories (e.g.
+    // the repository root). A cached `None` means the directory has no `.gitignore` file.
+    let mut gitignores: FxHashMap<PathBuf, Option<Gitignore>> = FxHashMap::default();
+
+    // Boundary for the `.gitignore` walk when a source is not inside a git repository (see below).
+    let cwd = std::env::current_dir()
+        .map(|cwd| dunce::canonicalize(&cwd).unwrap_or(cwd))
+        .ok();
+
     // Convert from public SourceEntry to private SourceEntry
-    expanded_globs
+    let sources = expanded_globs
         .into_iter()
-        .map(Into::into)
-        .collect::<Vec<_>>()
+        .map(|public_source| {
+            let mut source: SourceEntry = public_source.into();
+
+            // Promote auto-sources to external sources if they were gitignored
+            if let SourceEntry::Auto { ref base } = source {
+                let inside_git_repo = base.ancestors().any(|dir| dir.join(".git").exists());
+
+                // Walk up from the folder, applying each `.gitignore` relative to the directory
+                // that contains it (matching git), and stop at the git repository root so
+                // `.gitignore` files outside of the repo are not considered.
+                for dir in base.ancestors() {
+                    let gitignore = gitignores.entry(dir.to_path_buf()).or_insert_with(|| {
+                        let path = dir.join(".gitignore");
+
+                        // `Gitignore::new` roots the matcher at the directory containing the file,
+                        // so patterns match relative to it.
+                        path.is_file().then(|| Gitignore::new(&path).0)
+                    });
+
+                    // Only `.gitignore` files in ancestors of `base` can ignore `base` itself.
+                    // Patterns in `base`'s own `.gitignore` only match paths _inside_ `base`, never
+                    // `base` itself (the file walker still applies them to `base`'s contents).
+                    //
+                    // Skipping `base`'s own `.gitignore` also prevents a false positive for
+                    // whitelist style `.gitignore` files, because relativizing `base` against
+                    // itself yields the empty path, which incorrectly matches `/*`.
+                    //
+                    // E.g.:
+                    //
+                    // ```gitignore
+                    // /*
+                    // !/.gitignore
+                    // !/app
+                    // !/public
+                    // ```
+                    //
+                    // Everything inside `base` except `.gitignore`, `app` and `public` is ignored,
+                    // but `base` itself is not.
+                    if dir != base {
+                        if let Some(gitignore) = gitignore {
+                            if gitignore
+                                .matched_path_or_any_parents(&base, true)
+                                .is_ignore()
+                            {
+                                source = SourceEntry::External { base: base.into() };
+                                break;
+                            }
+                        }
+                    }
+
+                    // Stop at the git repository root.
+                    if dir.join(".git").exists() {
+                        break;
+                    }
+
+                    // Without a git repository there is no repository root to stop at. Stop once
+                    // the directory contains the current working directory instead, so `.gitignore`
+                    // files outside of the project (e.g. in the user's home directory) can never
+                    // promote a source to an external source. Note that the file walker still
+                    // applies those `.gitignore` files when deciding which files to scan.
+                    if !inside_git_repo && cwd.as_ref().is_some_and(|cwd| cwd.starts_with(dir)) {
+                        break;
+                    }
+                }
+            }
+
+            source
+        })
+        .collect::<Vec<SourceEntry>>();
+
+    expand_restricted_patterns(sources)
 }
 
 /// Convert a public source entry to a source entry
 impl From<PublicSourceEntry> for SourceEntry {
     fn from(value: PublicSourceEntry) -> Self {
-        let auto = value.pattern.ends_with("**/*")
-            || PathBuf::from(&value.base).join(&value.pattern).is_dir();
+        if value.negated {
+            return SourceEntry::Ignored {
+                base: value.base.into(),
+                pattern: value.pattern,
+            };
+        }
+
+        let auto =
+            value.pattern == "/**/*" || PathBuf::from(&value.base).join(&value.pattern).is_dir();
+
+        if !auto {
+            return SourceEntry::Pattern {
+                base: value.base.into(),
+                pattern: value.pattern,
+            };
+        }
 
         let inside_ignored_content_dir = IGNORED_CONTENT_DIRS.iter().any(|dir| {
             value.base.contains(&format!(
@@ -239,24 +876,16 @@ impl From<PublicSourceEntry> for SourceEntry {
                 std::path::MAIN_SEPARATOR
             )) || value
                 .base
-                .ends_with(&format!("{}{}", std::path::MAIN_SEPARATOR, dir,))
+                .ends_with(&format!("{}{}", std::path::MAIN_SEPARATOR, dir))
         });
 
-        match (value.negated, auto, inside_ignored_content_dir) {
-            (false, true, false) => SourceEntry::Auto {
+        match inside_ignored_content_dir {
+            false => SourceEntry::Auto {
                 base: value.base.into(),
             },
-            (false, true, true) => SourceEntry::External {
+            true => SourceEntry::External {
                 base: value.base.into(),
             },
-            (false, false, _) => SourceEntry::Pattern {
-                base: value.base.into(),
-                pattern: value.pattern,
-            },
-            (true, _, _) => SourceEntry::Ignored {
-                base: value.base.into(),
-                pattern: value.pattern,
-            },
         }
     }
 }
diff --git a/crates/oxide/tests/scanner.rs b/crates/oxide/tests/scanner.rs
index 4003ff253..fb5354a87 100644
--- a/crates/oxide/tests/scanner.rs
+++ b/crates/oxide/tests/scanner.rs
@@ -1,5 +1,6 @@
 #[cfg(test)]
 mod scanner {
+    use insta::assert_snapshot;
     use pretty_assertions::assert_eq;
     use std::path::{Path, PathBuf};
     use std::process::Command;
@@ -20,6 +21,16 @@ mod scanner {
         result
     }
 
+    fn symlink_file<P: AsRef<Path>, Q: AsRef<Path>>(original: P, link: Q) -> std::io::Result<()> {
+        #[cfg(not(windows))]
+        let result = std::os::unix::fs::symlink(original, link);
+
+        #[cfg(windows)]
+        let result = std::os::windows::fs::symlink_file(original, link);
+
+        result
+    }
+
     fn public_source_entry_from_pattern(dir: PathBuf, pattern: &str) -> PublicSourceEntry {
         let mut parts = pattern.split_whitespace();
         let _ = parts.next().unwrap_or_default();
@@ -45,6 +56,157 @@ mod scanner {
         globs: Vec<String>,
         normalized_sources: Vec<String>,
         candidates: Vec<String>,
+        tree: String,
+    }
+
+    /// Renders the directory as a tree, annotating every file and folder with an indicator that
+    /// shows whether the scanner picked it up:
+    ///
+    /// - `✓` — scanned
+    /// - `✗` — ignored / skipped
+    ///
+    /// Symlinks are rendered as `link → target`, where the target is shown relative to the folder
+    /// containing the symlink. The contents of every `.gitignore` file are printed right below the
+    /// file itself.
+    ///
+    /// Folders that are a git repository root (they contain a `.git` folder) are marked with
+    /// `(git)`, because ignore rules behave differently inside and outside of a repository.
+    fn fs_tree(root: &Path, scanned: &[String]) -> String {
+        /// Computes the relative path from `parent` to `target`, where both are relative to the
+        /// same root, e.g.: `b/c` seen from `b` is `c`, and the root itself seen from `b` is `..`.
+        fn relative_to(target: &Path, parent: &Path) -> String {
+            let target = target.components().collect::<Vec<_>>();
+            let parent = parent.components().collect::<Vec<_>>();
+
+            let common = target
+                .iter()
+                .zip(&parent)
+                .take_while(|(a, b)| **a == **b)
+                .count();
+
+            let mut parts = vec![".."; parent.len() - common];
+            parts.extend(
+                target[common..]
+                    .iter()
+                    .map(|component| component.as_os_str().to_str().unwrap()),
+            );
+
+            if parts.is_empty() {
+                // The symlink points to its own parent folder
+                ".".into()
+            } else {
+                parts.join("/")
+            }
+        }
+
+        fn walk(
+            dir: &Path,
+            root: &Path,
+            prefix: &str,
+            scanned: &[String],
+            visited: &mut Vec<PathBuf>,
+            out: &mut String,
+        ) {
+            let mut entries = fs::read_dir(dir)
+                .unwrap()
+                .filter_map(Result::ok)
+                .filter(|entry| entry.file_name() != ".git")
+                .collect::<Vec<_>>();
+            entries.sort_by_key(|entry| entry.file_name());
+
+            for (i, entry) in entries.iter().enumerate() {
+                let last = i == entries.len() - 1;
+                let connector = if last { "└── " } else { "├── " };
+                let child_prefix = if last { "    " } else { "│   " };
+
+                let path = entry.path();
+                let name = entry.file_name().to_string_lossy().to_string();
+                let rel = path
+                    .strip_prefix(root)
+                    .unwrap()
+                    .to_string_lossy()
+                    .replace('\\', "/");
+
+                let file_type = entry.file_type().unwrap();
+
+                // a file is scanned when it shows up in the scanned files list. a folder is
+                // considered scanned when any scanned file lives inside of it. paths that go
+                // through a symlink count towards the symlink, not towards the target directory.
+                let dir_prefix = format!("{rel}/");
+                let is_scanned = scanned
+                    .iter()
+                    .any(|file| file == &rel || file.starts_with(&dir_prefix));
+                let indicator = if is_scanned { "✓" } else { "✗" };
+
+                let mut display_name = name.clone();
+                if path.join(".git").exists() {
+                    display_name = format!("{display_name} (git)");
+                }
+                if file_type.is_symlink() {
+                    if let Ok(target) = fs::read_link(&path) {
+                        // Show the target relative to the folder containing the symlink, or as-is
+                        // when it points outside of the tree.
+                        let target = match (target.strip_prefix(root), dir.strip_prefix(root)) {
+                            (Ok(target), Ok(parent)) => relative_to(target, parent),
+                            _ => target.to_string_lossy().replace('\\', "/"),
+                        };
+                        display_name = format!("{name} → {target}");
+
+                        // The symlink points to a target that doesn't exist
+                        if path.metadata().is_err() {
+                            display_name = format!("{display_name} (broken)");
+                        }
+                    }
+                }
+
+                out.push_str(&format!("{prefix}{connector}{indicator} {display_name}\n"));
+
+                // Print the contents of `.gitignore` files below the file itself, so the ignore
+                // rules are visible in the same output.
+                if name == ".gitignore" {
+                    if let Ok(contents) = fs::read_to_string(&path) {
+                        for line in contents.lines() {
+                            let line = format!("{prefix}{child_prefix}    {line}");
+                            out.push_str(line.trim_end());
+                            out.push('\n');
+                        }
+                    }
+                }
+
+                // Descend into directories, including symlinked ones. The paths inside a symlinked
+                // directory are computed through the symlink, so the indicators show what the
+                // scanner saw via that route. A visited stack prevents symlink cycles from
+                // recursing forever.
+                if path.metadata().map(|meta| meta.is_dir()).unwrap_or(false) {
+                    let Ok(canonical) = dunce::canonicalize(&path) else {
+                        continue;
+                    };
+                    if visited.contains(&canonical) {
+                        continue;
+                    }
+
+                    visited.push(canonical);
+                    walk(
+                        &path,
+                        root,
+                        &format!("{prefix}{child_prefix}"),
+                        scanned,
+                        visited,
+                        out,
+                    );
+                    visited.pop();
+                }
+            }
+        }
+
+        let mut visited = vec![dunce::canonicalize(root).unwrap()];
+        let mut out = if root.join(".git").exists() {
+            String::from(". (git)\n")
+        } else {
+            String::from(".\n")
+        };
+        walk(root, root, "", scanned, &mut visited, &mut out);
+        out
     }
 
     fn create_files_in(dir: &path::Path, paths: &[(&str, &str)]) {
@@ -61,6 +223,53 @@ mod scanner {
         }
     }
 
+    fn scanned_files(scanner: &mut Scanner, base: &Path) -> Vec<String> {
+        let base_dir =
+            format!("{}{}", dunce::canonicalize(base).unwrap().display(), "/").replace('\\', "/");
+
+        let mut files = scanner
+            .get_files()
+            .iter()
+            // Normalize paths to use unix style separators
+            .map(|file| file.replace('\\', "/").replace(&base_dir, ""))
+            .collect::<Vec<_>>();
+        files.sort();
+        files
+    }
+
+    fn scanned_globs(scanner: &mut Scanner, base: &Path) -> Vec<String> {
+        let base_dir =
+            format!("{}{}", dunce::canonicalize(base).unwrap().display(), "/").replace('\\', "/");
+
+        let mut globs = scanner
+            .get_globs()
+            .iter()
+            .map(|glob| {
+                if glob.pattern.starts_with('/') {
+                    format!("{}{}", glob.base, glob.pattern)
+                } else {
+                    format!("{}/{}", glob.base, glob.pattern)
+                }
+            })
+            // Normalize paths to use unix style separators
+            .map(|file| file.replace('\\', "/").replace(&base_dir, ""))
+            .collect::<Vec<_>>();
+        globs.sort();
+        globs
+    }
+
+    fn normalize_files(files: Vec<String>, base: &Path) -> Vec<String> {
+        let base_dir =
+            format!("{}{}", dunce::canonicalize(base).unwrap().display(), "/").replace('\\', "/");
+
+        let mut files = files
+            .iter()
+            .map(|file| file.replace('\\', "/").replace(&base_dir, ""))
+            .collect::<Vec<_>>();
+        files.sort();
+        files
+    }
+
     fn scan_with_globs(
         paths_with_content: &[(&str, &str)],
         source_directives: Vec<&str>,
@@ -85,34 +294,14 @@ mod scanner {
         let mut scanner = Scanner::new(sources);
 
         let candidates = scanner.scan();
-
         let base_dir =
             format!("{}{}", dunce::canonicalize(&base).unwrap().display(), "/").replace('\\', "/");
 
         // Get all scanned files as strings relative to the base directory
-        let mut files = scanner
-            .get_files()
-            .iter()
-            // Normalize paths to use unix style separators
-            .map(|file| file.replace('\\', "/").replace(&base_dir, ""))
-            .collect::<Vec<_>>();
-        files.sort();
+        let files = scanned_files(&mut scanner, Path::new(&base));
 
         // Get all scanned globs as strings relative to the base directory
-        let mut globs = scanner
-            .get_globs()
-            .iter()
-            .map(|glob| {
-                if glob.pattern.starts_with('/') {
-                    format!("{}{}", glob.base, glob.pattern)
-                } else {
-                    format!("{}/{}", glob.base, glob.pattern)
-                }
-            })
-            // Normalize paths to use unix style separators
-            .map(|file| file.replace('\\', "/").replace(&base_dir, ""))
-            .collect::<Vec<_>>();
-        globs.sort();
+        let globs = scanned_globs(&mut scanner, Path::new(&base));
 
         // Get all normalized sources as strings relative to the base directory
         let mut normalized_sources = scanner
@@ -130,11 +319,14 @@ mod scanner {
             .collect::<Vec<_>>();
         normalized_sources.sort();
 
+        let tree = fs_tree(&dir, &files);
+
         ScanResult {
             files,
             globs,
             normalized_sources,
             candidates,
+            tree,
         }
     }
 
@@ -148,6 +340,7 @@ mod scanner {
             files,
             globs,
             normalized_sources,
+            tree,
             ..
         } = scan(&[
             ("index.html", ""),
@@ -155,6 +348,14 @@ mod scanner {
             ("b.html", ""),
             ("c.html", ""),
         ]);
+
+        assert_snapshot!(tree, @"
+        . (git)
+        ├── ✓ a.html
+        ├── ✓ b.html
+        ├── ✓ c.html
+        └── ✓ index.html
+        ");
         assert_eq!(files, vec!["a.html", "b.html", "c.html", "index.html"]);
         assert_eq!(globs, vec!["*"]);
         assert_eq!(normalized_sources, vec!["**/*"]);
@@ -166,6 +367,7 @@ mod scanner {
             files,
             globs,
             normalized_sources,
+            tree,
             ..
         } = scan(&[
             (".gitignore", "b.html"),
@@ -174,6 +376,17 @@ mod scanner {
             ("b.html", ""),
             ("c.html", ""),
         ]);
+
+        assert_snapshot!(tree, @"
+        . (git)
+        ├── ✗ .gitignore
+        │       b.html
+        ├── ✓ a.html
+        ├── ✗ b.html
+        ├── ✓ c.html
+        └── ✓ index.html
+        ");
+
         assert_eq!(files, vec!["a.html", "c.html", "index.html"]);
         assert_eq!(globs, vec!["*"]);
         assert_eq!(normalized_sources, vec!["**/*"]);
@@ -185,6 +398,7 @@ mod scanner {
             files,
             globs,
             normalized_sources,
+            tree,
             ..
         } = scan(&[
             ("index.html", ""),
@@ -195,6 +409,20 @@ mod scanner {
             ("public/deeply/nested/c.html", ""),
         ]);
 
+        assert_snapshot!(tree, @"
+        . (git)
+        ├── ✓ index.html
+        └── ✓ public
+            ├── ✓ a.html
+            ├── ✓ b.html
+            ├── ✓ c.html
+            ├── ✓ deeply
+            │   └── ✓ nested
+            │       └── ✓ c.html
+            └── ✓ nested
+                └── ✓ c.html
+        ");
+
         assert_eq!(
             files,
             vec![
@@ -216,6 +444,7 @@ mod scanner {
             files,
             globs,
             normalized_sources,
+            tree,
             ..
         } = scan(&[
             ("index.html", ""),
@@ -229,6 +458,25 @@ mod scanner {
             ("public/very/deeply/nested/a.html", ""),
         ]);
 
+        assert_snapshot!(tree, @"
+        . (git)
+        ├── ✓ index.html
+        └── ✓ public
+            ├── ✓ a.html
+            ├── ✓ b.html
+            ├── ✓ c.html
+            ├── ✓ nested
+            │   ├── ✓ a.html
+            │   ├── ✓ again
+            │   │   └── ✓ a.html
+            │   ├── ✓ b.html
+            │   └── ✓ c.html
+            └── ✓ very
+                └── ✓ deeply
+                    └── ✓ nested
+                        └── ✓ a.html
+        ");
+
         assert_eq!(
             files,
             vec![
@@ -253,6 +501,7 @@ mod scanner {
             files,
             globs,
             normalized_sources,
+            tree,
             ..
         } = scan(&[
             (".gitignore", "public/b.html\na.html"),
@@ -262,6 +511,18 @@ mod scanner {
             ("public/c.html", ""),
         ]);
 
+        assert_snapshot!(tree, @"
+        . (git)
+        ├── ✗ .gitignore
+        │       public/b.html
+        │       a.html
+        ├── ✓ index.html
+        └── ✓ public
+            ├── ✗ a.html
+            ├── ✗ b.html
+            └── ✓ c.html
+        ");
+
         assert_eq!(files, vec!["index.html", "public/c.html",]);
         assert_eq!(globs, vec!["*"]);
         assert_eq!(normalized_sources, vec!["**/*"]);
@@ -273,6 +534,7 @@ mod scanner {
             files,
             globs,
             normalized_sources,
+            tree,
             ..
         } = scan(&[
             ("index.html", ""),
@@ -281,6 +543,15 @@ mod scanner {
             ("src/c.html", ""),
         ]);
 
+        assert_snapshot!(tree, @"
+        . (git)
+        ├── ✓ index.html
+        └── ✓ src
+            ├── ✓ a.html
+            ├── ✓ b.html
+            └── ✓ c.html
+        ");
+
         assert_eq!(
             files,
             vec!["index.html", "src/a.html", "src/b.html", "src/c.html"]
@@ -298,6 +569,7 @@ mod scanner {
             files,
             globs,
             normalized_sources,
+            tree,
             ..
         } = scan(&[
             ("index.html", ""),
@@ -306,6 +578,14 @@ mod scanner {
             ("c.lock", ""),
         ]);
 
+        assert_snapshot!(tree, @"
+        . (git)
+        ├── ✗ a.mp4
+        ├── ✗ b.png
+        ├── ✗ c.lock
+        └── ✓ index.html
+        ");
+
         assert_eq!(files, vec!["index.html"]);
         assert_eq!(globs, vec!["*"]);
         assert_eq!(normalized_sources, vec!["**/*"]);
@@ -318,6 +598,7 @@ mod scanner {
             files,
             globs,
             normalized_sources,
+            tree,
             ..
         } = scan(&[
             // Looks like `.pages` binary extension, but it's a folder
@@ -331,6 +612,16 @@ mod scanner {
             ),
         ]);
 
+        assert_snapshot!(tree, @"
+        . (git)
+        ├── ✗ .gitignore
+        │       other.pages
+        ├── ✗ other.pages
+        │   └── ✗ index.html
+        └── ✓ some.pages
+            └── ✓ index.html
+        ");
+
         assert_eq!(files, vec!["some.pages/index.html"]);
         assert_eq!(globs, vec!["*", "some.pages/**/*.{aspx,astro,cjs,cts,eex,erb,gjs,gts,haml,handlebars,hbs,heex,html,jade,js,jsx,liquid,md,mdx,mjs,mts,mustache,njk,nunjucks,php,pug,py,razor,rb,rhtml,rs,slim,svelte,tpl,ts,tsx,twig,vue}"]);
         assert_eq!(normalized_sources, vec!["**/*"]);
@@ -342,6 +633,7 @@ mod scanner {
             files,
             globs,
             normalized_sources,
+            tree,
             ..
         } = scan(&[
             ("index.html", ""),
@@ -350,6 +642,14 @@ mod scanner {
             ("c.less", ""),
         ]);
 
+        assert_snapshot!(tree, @"
+        . (git)
+        ├── ✓ a.css
+        ├── ✗ b.sass
+        ├── ✗ c.less
+        └── ✓ index.html
+        ");
+
         assert_eq!(files, vec!["a.css", "index.html"]);
         assert_eq!(globs, vec!["*"]);
         assert_eq!(normalized_sources, vec!["**/*"]);
@@ -361,9 +661,16 @@ mod scanner {
             files,
             globs,
             normalized_sources,
+            tree,
             ..
         } = scan(&[("src/index.my-extension", "")]);
 
+        assert_snapshot!(tree, @"
+        . (git)
+        └── ✓ src
+            └── ✓ index.my-extension
+        ");
+
         assert_eq!(files, vec!["src/index.my-extension"]);
         assert_eq!(globs, vec!["*", "src/**/*.{aspx,astro,cjs,cts,eex,erb,gjs,gts,haml,handlebars,hbs,heex,html,jade,js,jsx,liquid,md,mdx,mjs,mts,mustache,my-extension,njk,nunjucks,php,pug,py,razor,rb,rhtml,rs,slim,svelte,tpl,ts,tsx,twig,vue}"]);
         assert_eq!(normalized_sources, vec!["**/*"]);
@@ -375,6 +682,7 @@ mod scanner {
             files,
             globs,
             normalized_sources,
+            tree,
             ..
         } = scan(&[
             ("index.html", ""),
@@ -382,6 +690,13 @@ mod scanner {
             ("yarn.lock", ""),
         ]);
 
+        assert_snapshot!(tree, @"
+        . (git)
+        ├── ✓ index.html
+        ├── ✗ package-lock.json
+        └── ✗ yarn.lock
+        ");
+
         assert_eq!(files, vec!["index.html"]);
         assert_eq!(globs, vec!["*"]);
         assert_eq!(normalized_sources, vec!["**/*"]);
@@ -393,6 +708,7 @@ mod scanner {
             files,
             globs,
             normalized_sources,
+            tree,
             ..
         } = scan(&[
             // Explicitly listed root files
@@ -437,6 +753,58 @@ mod scanner {
             ("nested-d/very/deeply/nested/directory/again/foo.html", ""),
         ]);
 
+        assert_snapshot!(tree, @"
+        . (git)
+        ├── ✓ bar.html
+        ├── ✓ baz.html
+        ├── ✓ foo.html
+        ├── ✓ nested-a
+        │   ├── ✓ bar.html
+        │   ├── ✓ baz.html
+        │   └── ✓ foo.html
+        ├── ✓ nested-b
+        │   └── ✓ deeply-nested
+        │       ├── ✓ bar.html
+        │       ├── ✓ baz.html
+        │       └── ✓ foo.html
+        ├── ✓ nested-c
+        │   ├── ✗ .gitignore
+        │   │       ignored-folder/
+        │   ├── ✓ bar.html
+        │   ├── ✓ baz.html
+        │   ├── ✓ foo.html
+        │   ├── ✗ ignored-folder
+        │   │   ├── ✗ bar.html
+        │   │   ├── ✗ baz.html
+        │   │   └── ✗ foo.html
+        │   └── ✓ sibling-folder
+        │       ├── ✓ bar.html
+        │       ├── ✓ baz.html
+        │       └── ✓ foo.html
+        └── ✓ nested-d
+            ├── ✗ .gitignore
+            │       deep/
+            ├── ✓ bar.html
+            ├── ✓ baz.html
+            ├── ✓ foo.html
+            └── ✓ very
+                └── ✓ deeply
+                    └── ✓ nested
+                        ├── ✓ bar.html
+                        ├── ✓ baz.html
+                        ├── ✗ deep
+                        │   ├── ✗ bar.html
+                        │   ├── ✗ baz.html
+                        │   └── ✗ foo.html
+                        ├── ✓ directory
+                        │   ├── ✓ again
+                        │   │   └── ✓ foo.html
+                        │   ├── ✓ bar.html
+                        │   ├── ✓ baz.html
+                        │   └── ✓ foo.html
+                        └── ✓ foo.html
+        ");
+
         assert_eq!(
             files,
             vec![
@@ -491,6 +859,7 @@ mod scanner {
         let ScanResult {
             candidates,
             normalized_sources,
+            tree,
             ..
         } = scan(&[
             // The gitignore file is used to filter out files but not scanned for candidates
@@ -513,6 +882,21 @@ mod scanner {
             ("index4.svelte", "<div\nclass:px-7='condition'></div>"),
         ]);
 
+        assert_snapshot!(tree, @"
+        . (git)
+        ├── ✗ .gitignore
+        │       # md:font-bold
+        │       foo.html
+        ├── ✗ foo.html
+        ├── ✗ foo.jpg
+        ├── ✓ index.angular.html
+        ├── ✓ index.html
+        ├── ✓ index.svelte
+        ├── ✓ index2.svelte
+        ├── ✓ index3.svelte
+        └── ✓ index4.svelte
+        ");
+
         assert_eq!(
             candidates,
             vec![
@@ -536,28 +920,86 @@ mod scanner {
         let ScanResult {
             candidates,
             normalized_sources,
+            tree,
             ..
         } = scan_with_globs(
             &[("foo/bar/baz/foo.html", "content-['foo.html']")],
             vec!["@source '**/*'", "@source './foo/bar/baz/..'"],
         );
 
+        assert_snapshot!(tree, @"
+        . (git)
+        └── ✓ foo
+            └── ✓ bar
+                └── ✓ baz
+                    └── ✓ foo.html
+        ");
+
         assert_eq!(candidates, vec!["content-['foo.html']"]);
         assert_eq!(normalized_sources, vec!["**/*", "foo/bar/**/*"]);
     }
 
+    #[test]
+    fn it_should_preserve_source_order_when_referencing_a_sibling_project() {
+        // Create a temporary working directory
+        let dir = tempdir().unwrap().into_path();
+
+        // Create files
+        create_files_in(
+            &dir,
+            &[
+                ("project-a/src/index.css", ""),
+                ("project-b/keep/keep.html", "content-['GOOD-1']"),
+                ("project-b/ignored/ignored.html", "content-['BAD-1']"),
+                ("project-b/ignored/except.html", "content-['GOOD-2']"),
+            ],
+        );
+
+        let base = dir.join("project-a/src");
+        let mut scanner = Scanner::new(vec![
+            public_source_entry_from_pattern(base.clone(), "@source '../../project-b'"),
+            public_source_entry_from_pattern(base.clone(), "@source not '../../project-b/ignored'"),
+            public_source_entry_from_pattern(
+                base.clone(),
+                "@source '../../project-b/ignored/except.html'",
+            ),
+        ]);
+        let candidates = scanner.scan();
+
+        assert_snapshot!(fs_tree(&dir, &scanned_files(&mut scanner, &dir)), @"
+        .
+        ├── ✗ project-a
+        │   └── ✗ src
+        │       └── ✗ index.css
+        └── ✓ project-b
+            ├── ✓ ignored
+            │   ├── ✓ except.html
+            │   └── ✗ ignored.html
+            └── ✓ keep
+                └── ✓ keep.html
+        ");
+
+        assert_eq!(candidates, vec!["content-['GOOD-1']", "content-['GOOD-2']"]);
+    }
+
     #[test]
     fn it_should_scan_files_without_extensions() {
         // These look like folders, but they are files
         let ScanResult {
             candidates,
             normalized_sources,
+            tree,
             ..
         } = scan_with_globs(
             &[("my-file", "content-['my-file']")],
             vec!["@source '**/*'", "@source './my-file'"],
         );
 
+        assert_snapshot!(tree, @"
+        . (git)
+        └── ✓ my-file
+        ");
+
         assert_eq!(candidates, vec!["content-['my-file']"]);
         assert_eq!(normalized_sources, vec!["**/*", "my-file"]);
     }
@@ -568,6 +1010,7 @@ mod scanner {
         let ScanResult {
             candidates,
             normalized_sources,
+            tree,
             ..
         } = scan_with_globs(
             &[
@@ -587,6 +1030,14 @@ mod scanner {
             ],
         );
 
+        assert_snapshot!(tree, @"
+        . (git)
+        ├── ✓ my-folder.bin
+        │   └── ✓ foo.html
+        └── ✓ my-folder.templates
+            └── ✓ foo.html
+        ");
+
         assert_eq!(
             candidates,
             vec![
@@ -605,6 +1056,7 @@ mod scanner {
         let ScanResult {
             candidates,
             normalized_sources,
+            tree,
             ..
         } = scan_with_globs(
             &[
@@ -615,15 +1067,161 @@ mod scanner {
             vec!["@source '**/*'", "@source '*.styl'"],
         );
 
+        assert_snapshot!(tree, @"
+        . (git)
+        └── ✓ foo.styl
+        ");
+
         assert_eq!(candidates, vec!["content-['foo.styl']"]);
         assert_eq!(normalized_sources, vec!["**/*", "*.styl"]);
     }
 
+    #[test]
+    fn it_should_drop_invalid_utf8_candidates() {
+        let dir = tempdir().unwrap();
+        fs::write(dir.path().join("index.html"), b"flex bg-[\x80] block").unwrap();
+
+        let mut scanner = Scanner::new(vec![public_source_entry_from_pattern(
+            dir.path().to_path_buf(),
+            "@source '*.html'",
+        )]);
+
+        let candidates = scanner
+            .scan()
+            .into_iter()
+            .map(String::into_bytes)
+            .collect::<Vec<_>>();
+
+        assert_eq!(candidates, vec![b"block".to_vec(), b"flex".to_vec()]);
+    }
+
+    #[test]
+    fn it_should_not_store_invalid_utf8_candidates_during_incremental_scans() {
+        let dir = tempdir().unwrap();
+        let file = dir.path().join("index.html");
+        fs::write(&file, b"flex bg-[\x80]").unwrap();
+
+        let mut scanner = Scanner::new(vec![public_source_entry_from_pattern(
+            dir.path().to_path_buf(),
+            "@source '*.html'",
+        )]);
+
+        let candidates = scanner
+            .scan_content(vec![ChangedContent::File(file, "html".into())])
+            .into_iter()
+            .map(String::into_bytes)
+            .collect::<Vec<_>>();
+        assert_eq!(candidates, vec![b"flex".to_vec()]);
+
+        let candidates =
+            scanner.scan_content(vec![ChangedContent::Content("block".into(), "html".into())]);
+        assert_eq!(candidates, vec!["block"]);
+
+        let candidates = scanner
+            .scan()
+            .into_iter()
+            .map(String::into_bytes)
+            .collect::<Vec<_>>();
+        assert_eq!(candidates, vec![b"block".to_vec(), b"flex".to_vec()]);
+    }
+
+    #[test]
+    fn it_should_drop_invalid_utf8_candidates_with_positions() {
+        let dir = tempdir().unwrap();
+        let file = dir.path().join("index.html");
+        fs::write(
+            &file,
+            b"flex bg-[\x80] group-[]:block group-[]:bg-[\x80] grid",
+        )
+        .unwrap();
+
+        let mut scanner = Scanner::new(vec![]);
+        let candidates = scanner
+            .get_candidates_with_positions(ChangedContent::File(file, "html".into()))
+            .into_iter()
+            .map(|(candidate, position)| (candidate.into_bytes(), position))
+            .collect::<Vec<_>>();
+
+        assert_eq!(
+            candidates,
+            vec![
+                (b"flex".to_vec(), 0),
+                (b"group-[]:block".to_vec(), 12),
+                (b"grid".to_vec(), 43),
+            ]
+        );
+    }
+
+    #[test]
+    fn it_should_preserve_valid_utf8_candidates() {
+        let dir = tempdir().unwrap();
+        fs::write(
+            dir.path().join("index.html"),
+            "before:content-['💩'] bg-[é] font-[中文]".as_bytes(),
+        )
+        .unwrap();
+
+        let mut scanner = Scanner::new(vec![public_source_entry_from_pattern(
+            dir.path().to_path_buf(),
+            "@source '*.html'",
+        )]);
+
+        assert_eq!(
+            scanner.scan(),
+            vec!["before:content-['💩']", "bg-[é]", "font-[中文]"]
+        );
+    }
+
+    #[test]
+    fn it_should_preserve_paths_for_sources_ending_in_a_deep_glob() {
+        let ScanResult {
+            candidates,
+            files,
+            globs,
+            normalized_sources,
+            tree,
+            ..
+        } = scan_with_globs(
+            &[
+                (
+                    "blog/2024/foo/bar/baz/index.html",
+                    "content-['blog/2024/foo/bar/baz/index.html']",
+                ),
+                (
+                    "blog/2024/foo/bar/qux/index.html",
+                    "content-['blog/2024/foo/bar/qux/index.html']",
+                ),
+            ],
+            vec!["@source './blog/*/foo/bar/baz/**/*'"],
+        );
+
+        assert_snapshot!(tree, @"
+        . (git)
+        └── ✓ blog
+            └── ✓ 2024
+                └── ✓ foo
+                    └── ✓ bar
+                        ├── ✓ baz
+                        │   └── ✓ index.html
+                        └── ✗ qux
+                            └── ✗ index.html
+        ");
+
+        assert_eq!(
+            candidates,
+            vec!["content-['blog/2024/foo/bar/baz/index.html']"]
+        );
+        assert_eq!(files, vec!["blog/2024/foo/bar/baz/index.html"]);
+        assert_eq!(globs, vec!["blog/*/foo/bar/baz/**/*"]);
+        assert_eq!(normalized_sources, vec!["blog/*/foo/bar/baz/**/*"]);
+    }
+
     #[test]
     fn it_should_scan_next_dynamic_folders() {
         let ScanResult {
             candidates,
             normalized_sources,
+            tree,
             ..
         } = scan_with_globs(
             &[
@@ -637,6 +1235,19 @@ mod scanner {
             vec!["@source '**/*'", "@source './**/*.{styl}'"],
         );
 
+        assert_snapshot!(tree, @"
+        . (git)
+        └── ✓ app
+            ├── ✓ (theme)
+            │   └── ✓ page.styl
+            ├── ✓ [...slug]
+            │   └── ✓ page.styl
+            ├── ✓ [[...slug]]
+            │   └── ✓ page.styl
+            └── ✓ [slug]
+                └── ✓ page.styl
+        ");
+
         assert_eq!(
             candidates,
             vec![
@@ -678,6 +1289,14 @@ mod scanner {
         let mut scanner = Scanner::new(sources);
         let candidates = scanner.scan();
 
+        assert_snapshot!(fs_tree(&dir, &scanned_files(&mut scanner, &dir)), @"
+        . (git)
+        ├── ✓ project-a
+        │   └── ✓ index.html
+        └── ✓ project-b
+            └── ✓ index.html
+        ");
+
         // We've done the initial scan and found the files
         assert_eq!(
             candidates,
@@ -693,6 +1312,7 @@ mod scanner {
         let ScanResult {
             candidates,
             normalized_sources,
+            tree,
             ..
         } = scan_with_globs(
             &[
@@ -705,6 +1325,13 @@ mod scanner {
             vec!["@source '**/*'", "@source 'foo.styl'"],
         );
 
+        assert_snapshot!(tree, @"
+        . (git)
+        ├── ✗ .gitignore
+        │       foo.styl
+        └── ✓ foo.styl
+        ");
+
         assert_eq!(candidates, vec!["content-['foo.styl']"]);
         assert_eq!(normalized_sources, vec!["**/*", "foo.styl"]);
     }
@@ -734,6 +1361,14 @@ mod scanner {
         let mut scanner = Scanner::new(sources);
         let candidates = scanner.scan();
 
+        assert_snapshot!(fs_tree(&dir, &scanned_files(&mut scanner, &dir)), @"
+        . (git)
+        ├── ✓ project-a
+        │   └── ✓ index.html
+        └── ✓ project-b
+            └── ✓ index.html
+        ");
+
         // We've done the initial scan and found the files
         assert_eq!(
             candidates,
@@ -838,6 +1473,238 @@ mod scanner {
                 "content-['project-b/sub1/sub2/new.html']"
             ]
         );
+
+        assert_snapshot!(fs_tree(&dir, &scanned_files(&mut scanner, &dir)), @"
+        . (git)
+        ├── ✓ project-a
+        │   ├── ✓ index.html
+        │   ├── ✓ new.html
+        │   └── ✓ sub1
+        │       └── ✓ sub2
+        │           ├── ✓ index.html
+        │           └── ✓ new.html
+        └── ✓ project-b
+            ├── ✓ index.html
+            ├── ✓ new.html
+            └── ✓ sub1
+                └── ✓ sub2
+                    ├── ✓ index.html
+                    └── ✓ new.html
+        ");
+    }
+
+    #[test]
+    fn it_should_remove_deleted_files_from_scanned_files() {
+        // Create a temporary working directory
+        let dir = tempdir().unwrap().into_path();
+
+        // Initialize this directory as a git repository
+        let _ = Command::new("git").arg("init").current_dir(&dir).output();
+
+        // Create files
+        create_files_in(
+            &dir,
+            &[
+                ("src/index.html", "content-['src/index.html']"),
+                ("src/keep.html", "content-['src/keep.html']"),
+                ("src/remove.html", "content-['src/remove.html']"),
+            ],
+        );
+
+        let mut scanner = Scanner::new(vec![public_source_entry_from_pattern(
+            dir.clone(),
+            "@source '**/*'",
+        )]);
+
+        scanner.scan();
+        assert_eq!(
+            scanned_files(&mut scanner, &dir),
+            vec!["src/index.html", "src/keep.html", "src/remove.html"]
+        );
+
+        assert_snapshot!(fs_tree(&dir, &scanned_files(&mut scanner, &dir)), @"
+        . (git)
+        └── ✓ src
+            ├── ✓ index.html
+            ├── ✓ keep.html
+            └── ✓ remove.html
+        ");
+
+        fs::remove_file(dir.join("src/remove.html")).unwrap();
+
+        scanner.scan();
+        assert_eq!(
+            scanned_files(&mut scanner, &dir),
+            vec!["src/index.html", "src/keep.html"]
+        );
+
+        assert_snapshot!(fs_tree(&dir, &scanned_files(&mut scanner, &dir)), @"
+        . (git)
+        └── ✓ src
+            ├── ✓ index.html
+            └── ✓ keep.html
+        ");
+    }
+
+    #[test]
+    fn it_should_remove_deleted_directories_from_scanned_files() {
+        // Create a temporary working directory
+        let dir = tempdir().unwrap().into_path();
+
+        // Initialize this directory as a git repository
+        let _ = Command::new("git").arg("init").current_dir(&dir).output();
+
+        // Create files
+        create_files_in(
+            &dir,
+            &[
+                ("src/index.html", "content-['src/index.html']"),
+                ("src/keep/index.html", "content-['src/keep/index.html']"),
+                ("src/remove/index.html", "content-['src/remove/index.html']"),
+                (
+                    "src/remove/nested/index.html",
+                    "content-['src/remove/nested/index.html']",
+                ),
+            ],
+        );
+
+        let mut scanner = Scanner::new(vec![public_source_entry_from_pattern(
+            dir.clone(),
+            "@source '**/*'",
+        )]);
+
+        scanner.scan();
+        assert_eq!(
+            scanned_files(&mut scanner, &dir),
+            vec![
+                "src/index.html",
+                "src/keep/index.html",
+                "src/remove/index.html",
+                "src/remove/nested/index.html",
+            ]
+        );
+
+        assert_snapshot!(fs_tree(&dir, &scanned_files(&mut scanner, &dir)), @"
+        . (git)
+        └── ✓ src
+            ├── ✓ index.html
+            ├── ✓ keep
+            │   └── ✓ index.html
+            └── ✓ remove
+                ├── ✓ index.html
+                └── ✓ nested
+                    └── ✓ index.html
+        ");
+
+        fs::remove_dir_all(dir.join("src/remove")).unwrap();
+
+        scanner.scan();
+        assert_eq!(
+            scanned_files(&mut scanner, &dir),
+            vec!["src/index.html", "src/keep/index.html"]
+        );
+
+        assert_snapshot!(fs_tree(&dir, &scanned_files(&mut scanner, &dir)), @"
+        . (git)
+        └── ✓ src
+            ├── ✓ index.html
+            └── ✓ keep
+                └── ✓ index.html
+        ");
+    }
+
+    #[test]
+    fn it_should_remove_deleted_directories_from_scanned_globs() {
+        // Create a temporary working directory
+        let dir = tempdir().unwrap().into_path();
+
+        // Initialize this directory as a git repository
+        let _ = Command::new("git").arg("init").current_dir(&dir).output();
+
+        // Create files
+        create_files_in(
+            &dir,
+            &[
+                ("index.html", "content-['index.html']"),
+                ("src/index.html", "content-['src/index.html']"),
+            ],
+        );
+
+        let mut scanner = Scanner::new(vec![public_source_entry_from_pattern(
+            dir.clone(),
+            "@source '**/*'",
+        )]);
+
+        scanner.scan();
+
+        assert_snapshot!(fs_tree(&dir, &scanned_files(&mut scanner, &dir)), @"
+        . (git)
+        ├── ✓ index.html
+        └── ✓ src
+            └── ✓ index.html
+        ");
+
+        let globs = scanned_globs(&mut scanner, &dir);
+        assert!(globs.iter().any(|glob| glob.starts_with("src/**/*")));
+
+        fs::remove_dir_all(dir.join("src")).unwrap();
+
+        scanner.scan();
+
+        assert_snapshot!(fs_tree(&dir, &scanned_files(&mut scanner, &dir)), @"
+        . (git)
+        └── ✓ index.html
+        ");
+
+        let globs = scanned_globs(&mut scanner, &dir);
+        assert!(!globs.iter().any(|glob| glob.starts_with("src/**/*")));
+    }
+
+    #[test]
+    fn it_should_track_files_scanned_by_the_last_scan() {
+        let dir = tempdir().unwrap().into_path();
+
+        let _ = Command::new("git").arg("init").current_dir(&dir).output();
+
+        create_files_in(
+            &dir,
+            &[
+                ("src/index.html", "content-['src/index.html']"),
+                ("src/keep.html", "content-['src/keep.html']"),
+            ],
+        );
+
+        let mut scanner = Scanner::new(vec![public_source_entry_from_pattern(
+            dir.clone(),
+            "@source '**/*'",
+        )]);
+
+        assert_eq!(
+            scanner.scan(),
+            vec!["content-['src/index.html']", "content-['src/keep.html']"]
+        );
+
+        assert_eq!(
+            scanner.scan(),
+            vec!["content-['src/index.html']", "content-['src/keep.html']"]
+        );
+        assert_eq!(scanner.get_scanned_files(), Vec::<String>::new());
+
+        sleep(Duration::from_millis(10));
+        fs::write(dir.join("src/index.html"), "content-['src/changed.html']").unwrap();
+
+        assert_eq!(
+            scanner.scan(),
+            vec![
+                "content-['src/changed.html']",
+                "content-['src/index.html']",
+                "content-['src/keep.html']",
+            ]
+        );
+        assert_eq!(
+            normalize_files(scanner.get_scanned_files(), &dir),
+            vec!["src/index.html"]
+        );
     }
 
     #[test]
@@ -847,6 +1714,8 @@ mod scanner {
             files,
             globs,
             normalized_sources,
+            tree,
+            ..
         } = scan_with_globs(
             &[
                 ("src/index.ts", "content-['src/index.ts']"),
@@ -874,6 +1743,25 @@ mod scanner {
             ],
         );
 
+        assert_snapshot!(tree, @"
+        . (git)
+        └── ✓ src
+            ├── ✓ admin
+            │   └── ✓ foo
+            │       └── ✓ template.html
+            ├── ✗ colors
+            │   ├── ✗ blue.tsx
+            │   ├── ✗ green.tsx
+            │   └── ✗ red.jsx
+            ├── ✗ index.ts
+            ├── ✓ templates
+            │   └── ✓ index.html
+            └── ✗ utils
+                ├── ✗ date.ts
+                ├── ✗ file.ts
+                └── ✗ string.ts
+        ");
+
         assert_eq!(
             candidates,
             vec![
@@ -919,6 +1807,8 @@ mod scanner {
             files,
             globs,
             normalized_sources,
+            tree,
+            ..
         } = scan_with_globs(
             // Typically skipped
             &[
@@ -930,6 +1820,15 @@ mod scanner {
             vec!["@source '**/*'", "@source 'src/**/*.{exe,bin}'"],
         );
 
+        assert_snapshot!(tree, @"
+        . (git)
+        ├── ✗ out
+        │   └── ✗ out.exe
+        └── ✓ src
+            ├── ✓ index.bin
+            └── ✓ index.exe
+        ");
+
         assert_eq!(
             candidates,
             vec!["content-['src/index.bin']", "content-['src/index.exe']",]
@@ -957,6 +1856,8 @@ mod scanner {
             files,
             globs,
             normalized_sources,
+            tree,
+            ..
         } = scan_with_globs(
             &[
                 ("index.html", "content-['index.html']"),
@@ -981,6 +1882,21 @@ mod scanner {
             ],
         );
 
+        assert_snapshot!(tree, @"
+        . (git)
+        ├── ✗ index.html
+        └── ✓ src
+            ├── ✓ admin
+            │   ├── ✗ ignore.html
+            │   └── ✓ index.html
+            ├── ✓ dashboard
+            │   ├── ✗ ignore.html
+            │   └── ✓ index.html
+            ├── ✗ ignore.html
+            ├── ✗ index.html
+            └── ✗ lib.ts
+        ");
+
         assert_eq!(
             candidates,
             vec![
@@ -997,6 +1913,409 @@ mod scanner {
         assert_eq!(normalized_sources, vec!["src/**/*.html"]);
     }
 
+    #[test]
+    fn it_should_restrict_explicit_file_sources_to_the_matching_file() {
+        let ScanResult {
+            candidates,
+            files,
+            tree,
+            ..
+        } = scan_with_globs(
+            &[
+                ("src/foo.html", "content-['src/foo.html']"),
+                ("src/bar.html", "content-['src/bar.html']"),
+            ],
+            vec!["@source './src/foo.html'"],
+        );
+
+        assert_snapshot!(tree, @"
+        . (git)
+        └── ✓ src
+            ├── ✗ bar.html
+            └── ✓ foo.html
+        ");
+
+        assert_eq!(candidates, vec!["content-['src/foo.html']"]);
+        assert_eq!(files, vec!["src/foo.html"]);
+    }
+
+    #[test]
+    fn it_should_combine_multiple_restricted_sources_for_the_same_base() {
+        let ScanResult {
+            candidates,
+            files,
+            tree,
+            ..
+        } = scan_with_globs(
+            &[
+                ("src/foo.html", "content-['src/foo.html']"),
+                ("src/bar.html", "content-['src/bar.html']"),
+                ("src/baz.html", "content-['src/baz.html']"),
+            ],
+            vec!["@source './src/foo.html'", "@source './src/bar.html'"],
+        );
+
+        assert_snapshot!(tree, @"
+        . (git)
+        └── ✓ src
+            ├── ✓ bar.html
+            ├── ✗ baz.html
+            └── ✓ foo.html
+        ");
+
+        assert_eq!(
+            candidates,
+            vec!["content-['src/bar.html']", "content-['src/foo.html']"]
+        );
+        assert_eq!(files, vec!["src/bar.html", "src/foo.html"]);
+    }
+
+    // https://github.com/tailwindlabs/tailwindcss/issues/20333
+    #[test]
+    fn it_should_combine_nested_and_root_restricted_sources() {
+        // The restriction (`*`) added for the root-level file must not prevent walking into the
+        // `nested` folder that another explicit source points into. At the same time, relaxing
+        // that restriction to `/*` must not accidentally open up sibling folders (`ignore-me`)
+        // or files that no explicit source points at.
+        let paths_with_content = &[
+            ("nested/component.html", "content-['nested/component.html']"),
+            ("nested/ignore-me.html", "content-['nested/ignore-me.html']"),
+            ("ignore-me/component.html", "content-['ignore-me']"),
+            ("component-sources.classes.txt", "content-['classes.txt']"),
+            ("ignore-me.txt", "content-['ignore-me.txt']"),
+        ];
+
+        let ScanResult {
+            candidates,
+            files,
+            tree,
+            ..
+        } = scan_with_globs(
+            paths_with_content,
+            vec![
+                "@source './nested/component.html'",
+                "@source './component-sources.classes.txt'",
+            ],
+        );
+
+        assert_snapshot!(tree, @"
+        . (git)
+        ├── ✓ component-sources.classes.txt
+        ├── ✗ ignore-me
+        │   └── ✗ component.html
+        ├── ✗ ignore-me.txt
+        └── ✓ nested
+            ├── ✓ component.html
+            └── ✗ ignore-me.html
+        ");
+
+        assert_eq!(
+            candidates,
+            vec![
+                "content-['classes.txt']",
+                "content-['nested/component.html']"
+            ]
+        );
+        assert_eq!(
+            files,
+            vec!["component-sources.classes.txt", "nested/component.html"]
+        );
+
+        // Same setup, but with the root-level source declared first
+        let ScanResult {
+            candidates,
+            files,
+            tree,
+            ..
+        } = scan_with_globs(
+            paths_with_content,
+            vec![
+                "@source './component-sources.classes.txt'",
+                "@source './nested/component.html'",
+            ],
+        );
+
+        assert_snapshot!(tree, @"
+        . (git)
+        ├── ✓ component-sources.classes.txt
+        ├── ✗ ignore-me
+        │   └── ✗ component.html
+        ├── ✗ ignore-me.txt
+        └── ✓ nested
+            ├── ✓ component.html
+            └── ✗ ignore-me.html
+        ");
+
+        assert_eq!(
+            candidates,
+            vec![
+                "content-['classes.txt']",
+                "content-['nested/component.html']"
+            ]
+        );
+        assert_eq!(
+            files,
+            vec!["component-sources.classes.txt", "nested/component.html"]
+        );
+    }
+
+    #[test]
+    fn it_should_allow_later_ignores_to_override_restricted_sources() {
+        let ScanResult {
+            candidates,
+            files,
+            tree,
+            ..
+        } = scan_with_globs(
+            &[("src/foo.html", "content-['src/foo.html']")],
+            vec!["@source './src/foo.html'", "@source not './src/foo.html'"],
+        );
+
+        assert_snapshot!(tree, @"
+        . (git)
+        └── ✗ src
+            └── ✗ foo.html
+        ");
+
+        assert!(candidates.is_empty());
+        assert!(files.is_empty());
+    }
+
+    #[test]
+    fn it_should_handle_sources_with_parent_patterns() {
+        {
+            let ScanResult {
+                candidates,
+                files,
+                tree,
+                ..
+            } = scan_with_globs(
+                &[
+                    ("src/foo.html", "content-['src/foo.html']"),
+                    ("src/bar/index.html", "content-['src/bar/index.html']"),
+                    ("src/bar/ignore.html", "content-['src/bar/ignore.html']"),
+                ],
+                vec!["@source './src/ba*/*.html'"],
+            );
+
+            assert_snapshot!(tree, @"
+            . (git)
+            └── ✓ src
+                ├── ✓ bar
+                │   ├── ✓ ignore.html
+                │   └── ✓ index.html
+                └── ✗ foo.html
+            ");
+
+            assert_eq!(
+                candidates,
+                vec![
+                    "content-['src/bar/ignore.html']",
+                    "content-['src/bar/index.html']"
+                ]
+            );
+            assert_eq!(files, vec!["src/bar/ignore.html", "src/bar/index.html"]);
+        }
+
+        {
+            let ScanResult {
+                candidates,
+                files,
+                tree,
+                ..
+            } = scan_with_globs(
+                &[
+                    ("src/foo.html", "content-['src/foo.html']"),
+                    ("src/bar/index.html", "content-['src/bar/index.html']"),
+                    ("src/bar/ignore.html", "content-['src/bar/ignore.html']"),
+                ],
+                vec![
+                    "@source './src/ba*/*.html'",
+                    "@source not './src/bar/ignore.html'", // Ignore the ignore.html
+                ],
+            );
+
+            assert_snapshot!(tree, @"
+            . (git)
+            └── ✓ src
+                ├── ✓ bar
+                │   ├── ✗ ignore.html
+                │   └── ✓ index.html
+                └── ✗ foo.html
+            ");
+
+            assert_eq!(candidates, vec!["content-['src/bar/index.html']"]);
+            assert_eq!(files, vec!["src/bar/index.html"]);
+        }
+
+        {
+            let ScanResult {
+                candidates,
+                files,
+                tree,
+                ..
+            } = scan_with_globs(
+                &[
+                    ("src/foo.html", "content-['src/foo.html']"),
+                    ("src/bar/index.html", "content-['src/bar/index.html']"),
+                    ("src/bar/ignore.html", "content-['src/bar/ignore.html']"),
+                ],
+                vec!["@source '**/*'", "@source not './src/ba*/*.html'"],
+            );
+
+            assert_snapshot!(tree, @"
+            . (git)
+            └── ✓ src
+                ├── ✗ bar
+                │   ├── ✗ ignore.html
+                │   └── ✗ index.html
+                └── ✓ foo.html
+            ");
+
+            assert_eq!(candidates, vec!["content-['src/foo.html']"]);
+            assert_eq!(files, vec!["src/foo.html"]);
+        }
+
+        {
+            let ScanResult {
+                candidates,
+                files,
+                tree,
+                ..
+            } = scan_with_globs(
+                &[
+                    ("src/foo.html", "content-['src/foo.html']"),
+                    ("src/bar/index.html", "content-['src/bar/index.html']"),
+                    ("src/bar/ignore.html", "content-['src/bar/ignore.html']"),
+                ],
+                vec![
+                    "@source '**/*'",
+                    "@source not './src/ba*/*.html'",
+                    "@source './src/bar/index.html'", //
+                ],
+            );
+
+            assert_snapshot!(tree, @"
+            . (git)
+            └── ✓ src
+                ├── ✓ bar
+                │   ├── ✗ ignore.html
+                │   └── ✓ index.html
+                └── ✓ foo.html
+            ");
+
+            assert_eq!(
+                candidates,
+                vec!["content-['src/bar/index.html']", "content-['src/foo.html']"]
+            );
+            assert_eq!(files, vec!["src/bar/index.html", "src/foo.html"]);
+        }
+    }
+
+    #[test]
+    fn nested_explicit_source_should_not_suppress_siblings_of_broad_source() {
+        // A broad `**/*` source should keep auto-detecting every file, even when a more
+        // specific `@source` points at a single file inside a subdirectory. The restriction
+        // added for the explicit file must not hide its siblings from the broad source.
+        let ScanResult {
+            candidates,
+            files,
+            tree,
+            ..
+        } = scan_with_globs(
+            &[
+                ("src/components/button.html", "content-['button']"),
+                ("src/components/card.html", "content-['card']"),
+            ],
+            vec!["@source '**/*'", "@source './src/components/button.html'"],
+        );
+
+        assert_snapshot!(tree, @"
+        . (git)
+        └── ✓ src
+            └── ✓ components
+                ├── ✓ button.html
+                └── ✓ card.html
+        ");
+
+        assert_eq!(candidates, vec!["content-['button']", "content-['card']"]);
+        assert_eq!(
+            files,
+            vec!["src/components/button.html", "src/components/card.html"]
+        );
+    }
+
+    #[test]
+    fn nested_explicit_source_should_not_suppress_siblings_of_auto_source() {
+        // Same as above, but the broad source is an auto-detected directory (`@source "src"`)
+        // and the explicit file lives in a nested subdirectory of it.
+        let ScanResult {
+            candidates,
+            files,
+            tree,
+            ..
+        } = scan_with_globs(
+            &[
+                ("src/components/button.html", "content-['button']"),
+                ("src/components/card.html", "content-['card']"),
+            ],
+            vec!["@source 'src'", "@source './src/components/button.html'"],
+        );
+
+        assert_snapshot!(tree, @"
+        . (git)
+        └── ✓ src
+            └── ✓ components
+                ├── ✓ button.html
+                └── ✓ card.html
+        ");
+
+        assert_eq!(candidates, vec!["content-['button']", "content-['card']"]);
+        assert_eq!(
+            files,
+            vec!["src/components/button.html", "src/components/card.html"]
+        );
+    }
+
+    #[test]
+    fn root_file_source_should_not_suppress_sibling_source_roots() {
+        let ScanResult {
+            candidates, tree, ..
+        } = scan_with_globs(
+            &[
+                ("index.css", ""),
+                ("src/index.html", "content-['src/index.html']"),
+                ("pages/foo.html", "content-['pages/foo.html']"),
+                ("pages/nested/foo.html", "content-['pages/nested/foo.html']"),
+            ],
+            vec![
+                "@source './src'",
+                "@source './pages/**/*.html'",
+                "@source './index.css'",
+            ],
+        );
+
+        assert_snapshot!(tree, @"
+        . (git)
+        ├── ✓ index.css
+        ├── ✓ pages
+        │   ├── ✓ foo.html
+        │   └── ✓ nested
+        │       └── ✓ foo.html
+        └── ✓ src
+            └── ✓ index.html
+        ");
+
+        assert_eq!(
+            candidates,
+            vec![
+                "content-['pages/foo.html']",
+                "content-['pages/nested/foo.html']",
+                "content-['src/index.html']",
+            ]
+        );
+    }
+
     #[test]
     fn it_respects_gitignore_in_workspace_root() {
         let ScanResult {
@@ -1004,6 +2323,8 @@ mod scanner {
             files,
             globs,
             normalized_sources,
+            tree,
+            ..
         } = scan_with_globs(
             &[
                 (".gitignore", "ignore-1.html\nweb/ignore-2.html"),
@@ -1015,6 +2336,19 @@ mod scanner {
             vec!["@source './src'", "@source './web'"],
         );
 
+        assert_snapshot!(tree, @"
+        . (git)
+        ├── ✗ .gitignore
+        │       ignore-1.html
+        │       web/ignore-2.html
+        ├── ✓ src
+        │   └── ✓ index.html
+        └── ✓ web
+            ├── ✗ ignore-1.html
+            ├── ✗ ignore-2.html
+            └── ✓ index.html
+        ");
+
         assert_eq!(
             candidates,
             vec!["content-['src/index.html']", "content-['web/index.html']",]
@@ -1032,6 +2366,8 @@ mod scanner {
             files,
             globs,
             normalized_sources,
+            tree,
+            ..
         } = scan_with_globs(
             &[
                 ("src/logo.jpg", "content-['/src/logo.jpg']"),
@@ -1040,6 +2376,13 @@ mod scanner {
             vec!["@source './src/logo.{jpg,png}'"],
         );
 
+        assert_snapshot!(tree, @"
+        . (git)
+        └── ✓ src
+            ├── ✓ logo.jpg
+            └── ✓ logo.png
+        ");
+
         assert_eq!(
             candidates,
             vec!["content-['/src/logo.jpg']", "content-['/src/logo.png']"]
@@ -1056,6 +2399,8 @@ mod scanner {
             files,
             globs,
             normalized_sources,
+            tree,
+            ..
         } = scan_with_globs(
             &[
                 (".gitignore", "ignore-1.html\n/web/ignore-2.html"),
@@ -1065,6 +2410,17 @@ mod scanner {
             ],
             vec!["@source './web'", "@source './web/ignore-1.html'"],
         );
+
+        assert_snapshot!(tree, @"
+        . (git)
+        ├── ✗ .gitignore
+        │       ignore-1.html
+        │       /web/ignore-2.html
+        └── ✓ web
+            ├── ✓ ignore-1.html
+            ├── ✗ ignore-2.html
+            └── ✓ index.html
+        ");
         assert_eq!(
             candidates,
             vec![
@@ -1078,6 +2434,201 @@ mod scanner {
         assert_eq!(normalized_sources, vec!["web/**/*", "web/ignore-1.html"]);
     }
 
+    #[test]
+    fn it_respects_gitignore_files_with_whitelist_patterns() {
+        // https://github.com/tailwindlabs/tailwindcss/discussions/20382
+        //
+        // A `.gitignore` that ignores everything (`/*`) and then whitelists specific
+        // directories and files using negated patterns.
+        let ScanResult {
+            files,
+            candidates,
+            tree,
+            ..
+        } = scan(&[
+            (
+                ".gitignore",
+                "/*\n!/app\n!/public\n!/package.json\n!/.gitignore\n",
+            ),
+            ("app/index.html", "content-['app/index.html']"),
+            ("public/index.html", "content-['public/index.html']"),
+            ("package.json", ""),
+            // These are all ignored by the `/*` rule because they are not whitelisted
+            ("build/generated.html", "content-['build/generated.html']"),
+            ("logs/dev.log", "content-['logs/dev.log']"),
+            (
+                "node_modules/my-ui-lib/index.html",
+                "content-['node_modules/my-ui-lib/index.html']",
+            ),
+        ]);
+
+        assert_snapshot!(tree, @"
+        . (git)
+        ├── ✗ .gitignore
+        │       /*
+        │       !/app
+        │       !/public
+        │       !/package.json
+        │       !/.gitignore
+        ├── ✓ app
+        │   └── ✓ index.html
+        ├── ✗ build
+        │   └── ✗ generated.html
+        ├── ✗ logs
+        │   └── ✗ dev.log
+        ├── ✗ node_modules
+        │   └── ✗ my-ui-lib
+        │       └── ✗ index.html
+        ├── ✓ package.json
+        └── ✓ public
+            └── ✓ index.html
+        ");
+
+        assert_eq!(
+            files,
+            vec!["app/index.html", "package.json", "public/index.html"]
+        );
+        assert_eq!(
+            candidates,
+            vec![
+                "content-['app/index.html']",
+                "content-['public/index.html']"
+            ]
+        );
+    }
+
+    #[test]
+    fn it_respects_gitignore_files_with_nested_whitelist_patterns() {
+        // Example from the official `.gitignore` documentation:
+        //
+        // ```gitignore
+        // # exclude everything except directory foo/bar
+        // /*
+        // !/foo
+        // /foo/*
+        // !/foo/bar
+        // ```
+        let ScanResult {
+            files,
+            candidates,
+            tree,
+            ..
+        } = scan(&[
+            (
+                ".gitignore",
+                "# exclude everything except directory foo/bar\n/*\n!/foo\n/foo/*\n!/foo/bar\n",
+            ),
+            ("foo/bar/index.html", "content-['foo/bar/index.html']"),
+            (
+                "foo/bar/nested/index.html",
+                "content-['foo/bar/nested/index.html']",
+            ),
+            // These are all ignored because they are not inside `foo/bar`
+            ("index.html", "content-['index.html']"),
+            ("foo/index.html", "content-['foo/index.html']"),
+            ("foo/baz/index.html", "content-['foo/baz/index.html']"),
+        ]);
+
+        assert_snapshot!(tree, @"
+        . (git)
+        ├── ✗ .gitignore
+        │       # exclude everything except directory foo/bar
+        │       /*
+        │       !/foo
+        │       /foo/*
+        │       !/foo/bar
+        ├── ✓ foo
+        │   ├── ✓ bar
+        │   │   ├── ✓ index.html
+        │   │   └── ✓ nested
+        │   │       └── ✓ index.html
+        │   ├── ✗ baz
+        │   │   └── ✗ index.html
+        │   └── ✗ index.html
+        └── ✗ index.html
+        ");
+
+        assert_eq!(
+            files,
+            vec!["foo/bar/index.html", "foo/bar/nested/index.html"]
+        );
+        assert_eq!(
+            candidates,
+            vec![
+                "content-['foo/bar/index.html']",
+                "content-['foo/bar/nested/index.html']"
+            ]
+        );
+    }
+
+    #[test]
+    fn explicit_source_directories_respect_their_own_gitignore() {
+        // A directory referenced via `@source` behaves like an auto source detection
+        // root. The `.gitignore` file _inside_ that directory still applies to its
+        // contents. Only when the directory itself is ignored (by an ancestor
+        // `.gitignore`, see the tests above) do we bypass the ignore rules.
+        let ScanResult {
+            files,
+            candidates,
+            tree,
+            ..
+        } = scan_with_globs(
+            &[
+                ("vendor/.gitignore", "ignored.html"),
+                ("vendor/index.html", "content-['vendor/index.html']"),
+                ("vendor/ignored.html", "content-['vendor/ignored.html']"),
+            ],
+            vec!["@source 'vendor'"],
+        );
+
+        assert_snapshot!(tree, @"
+        . (git)
+        └── ✓ vendor
+            ├── ✗ .gitignore
+            │       ignored.html
+            ├── ✗ ignored.html
+            └── ✓ index.html
+        ");
+
+        assert_eq!(files, vec!["vendor/index.html"]);
+        assert_eq!(candidates, vec!["content-['vendor/index.html']"]);
+    }
+
+    #[test]
+    fn explicit_sources_can_include_files_inside_gitignored_parent_directories() {
+        let ScanResult {
+            candidates,
+            files,
+            globs,
+            tree,
+            ..
+        } = scan_with_globs(
+            &[
+                (".gitignore", "src/efgh/"),
+                ("src/efgh/index.html", "content-['src/efgh/index.html']"),
+                ("src/efgh/ignore.js", "content-['src/efgh/ignore.js']"),
+                ("src/abcd/index.html", "content-['src/abcd/index.html']"),
+            ],
+            vec!["@source './src/ef*/*.html'"],
+        );
+
+        assert_snapshot!(tree, @"
+        . (git)
+        ├── ✗ .gitignore
+        │       src/efgh/
+        └── ✓ src
+            ├── ✗ abcd
+            │   └── ✗ index.html
+            └── ✓ efgh
+                ├── ✗ ignore.js
+                └── ✓ index.html
+        ");
+
+        assert_eq!(candidates, vec!["content-['src/efgh/index.html']"]);
+        assert_eq!(files, vec!["src/efgh/index.html"]);
+        assert_eq!(globs, vec!["src/ef*/*.html"]);
+    }
+
     #[test]
     fn skips_ignore_files_outside_of_a_repo() {
         // Create a temporary working directory
@@ -1148,7 +2699,33 @@ mod scanner {
             ),
         ];
 
-        let candidates = Scanner::new(sources.clone()).scan();
+        let mut scanner = Scanner::new(sources.clone());
+        let candidates = scanner.scan();
+
+        assert_snapshot!(fs_tree(&dir, &scanned_files(&mut scanner, &dir)), @"
+        .
+        └── ✓ home
+            ├── ✗ .gitignore
+            │       ignore-home.html
+            └── ✓ project
+                ├── ✗ .gitignore
+                │       ignore-project.html
+                └── ✓ apps
+                    ├── ✗ .gitignore
+                    │       ignore-apps.html
+                    ├── ✓ admin
+                    │   └── ✓ index.html
+                    ├── ✓ dashboard
+                    │   └── ✓ index.html
+                    └── ✓ web
+                        ├── ✗ .gitignore
+                        │       ignore-web.html
+                        ├── ✗ ignore-apps.html
+                        ├── ✗ ignore-home.html
+                        ├── ✗ ignore-project.html
+                        ├── ✗ ignore-web.html
+                        └── ✓ index.html
+        ");
 
         // All ignore files are applied because there's no git repo
         assert_eq!(
@@ -1166,7 +2743,33 @@ mod scanner {
             .arg("init")
             .current_dir(dir.join("home"))
             .output();
-        let candidates = Scanner::new(sources.clone()).scan();
+        let mut scanner = Scanner::new(sources.clone());
+        let candidates = scanner.scan();
+
+        assert_snapshot!(fs_tree(&dir, &scanned_files(&mut scanner, &dir)), @"
+        .
+        └── ✓ home (git)
+            ├── ✗ .gitignore
+            │       ignore-home.html
+            └── ✓ project
+                ├── ✗ .gitignore
+                │       ignore-project.html
+                └── ✓ apps
+                    ├── ✗ .gitignore
+                    │       ignore-apps.html
+                    ├── ✓ admin
+                    │   └── ✓ index.html
+                    ├── ✓ dashboard
+                    │   └── ✓ index.html
+                    └── ✓ web
+                        ├── ✗ .gitignore
+                        │       ignore-web.html
+                        ├── ✗ ignore-apps.html
+                        ├── ✗ ignore-home.html
+                        ├── ✗ ignore-project.html
+                        ├── ✗ ignore-web.html
+                        └── ✓ index.html
+        ");
 
         assert_eq!(
             candidates,
@@ -1185,7 +2788,33 @@ mod scanner {
             .arg("init")
             .current_dir(dir.join("home/project"))
             .output();
-        let candidates = Scanner::new(sources.clone()).scan();
+        let mut scanner = Scanner::new(sources.clone());
+        let candidates = scanner.scan();
+
+        assert_snapshot!(fs_tree(&dir, &scanned_files(&mut scanner, &dir)), @"
+        .
+        └── ✓ home
+            ├── ✗ .gitignore
+            │       ignore-home.html
+            └── ✓ project (git)
+                ├── ✗ .gitignore
+                │       ignore-project.html
+                └── ✓ apps
+                    ├── ✗ .gitignore
+                    │       ignore-apps.html
+                    ├── ✓ admin
+                    │   └── ✓ index.html
+                    ├── ✓ dashboard
+                    │   └── ✓ index.html
+                    └── ✓ web
+                        ├── ✗ .gitignore
+                        │       ignore-web.html
+                        ├── ✗ ignore-apps.html
+                        ├── ✓ ignore-home.html
+                        ├── ✗ ignore-project.html
+                        ├── ✗ ignore-web.html
+                        └── ✓ index.html
+        ");
 
         assert_eq!(
             candidates,
@@ -1205,7 +2834,33 @@ mod scanner {
             .arg("init")
             .current_dir(dir.join("home/project/apps"))
             .output();
-        let candidates = Scanner::new(sources.clone()).scan();
+        let mut scanner = Scanner::new(sources.clone());
+        let candidates = scanner.scan();
+
+        assert_snapshot!(fs_tree(&dir, &scanned_files(&mut scanner, &dir)), @"
+        .
+        └── ✓ home
+            ├── ✗ .gitignore
+            │       ignore-home.html
+            └── ✓ project
+                ├── ✗ .gitignore
+                │       ignore-project.html
+                └── ✓ apps (git)
+                    ├── ✗ .gitignore
+                    │       ignore-apps.html
+                    ├── ✓ admin
+                    │   └── ✓ index.html
+                    ├── ✓ dashboard
+                    │   └── ✓ index.html
+                    └── ✓ web
+                        ├── ✗ .gitignore
+                        │       ignore-web.html
+                        ├── ✗ ignore-apps.html
+                        ├── ✓ ignore-home.html
+                        ├── ✓ ignore-project.html
+                        ├── ✗ ignore-web.html
+                        └── ✓ index.html
+        ");
 
         assert_eq!(
             candidates,
@@ -1227,7 +2882,33 @@ mod scanner {
             .current_dir(dir.join("home/project/apps/web"))
             .output();
 
-        let candidates = Scanner::new(sources.clone()).scan();
+        let mut scanner = Scanner::new(sources.clone());
+        let candidates = scanner.scan();
+
+        assert_snapshot!(fs_tree(&dir, &scanned_files(&mut scanner, &dir)), @"
+        .
+        └── ✓ home
+            ├── ✗ .gitignore
+            │       ignore-home.html
+            └── ✓ project
+                ├── ✗ .gitignore
+                │       ignore-project.html
+                └── ✓ apps
+                    ├── ✗ .gitignore
+                    │       ignore-apps.html
+                    ├── ✓ admin
+                    │   └── ✓ index.html
+                    ├── ✓ dashboard
+                    │   └── ✓ index.html
+                    └── ✓ web (git)
+                        ├── ✗ .gitignore
+                        │       ignore-web.html
+                        ├── ✓ ignore-apps.html
+                        ├── ✓ ignore-home.html
+                        ├── ✓ ignore-project.html
+                        ├── ✗ ignore-web.html
+                        └── ✓ index.html
+        ");
 
         assert_eq!(
             candidates,
@@ -1261,7 +2942,15 @@ mod scanner {
             public_source_entry_from_pattern(dir.clone(), "@source not 'src/ignore-me.html'"),
         ];
 
-        let candidates = Scanner::new(sources.clone()).scan();
+        let mut scanner = Scanner::new(sources.clone());
+        let candidates = scanner.scan();
+
+        assert_snapshot!(fs_tree(&dir, &scanned_files(&mut scanner, &dir)), @"
+        .
+        └── ✓ src
+            ├── ✗ ignore-me.html
+            └── ✓ keep-me.html
+        ");
 
         assert_eq!(candidates, vec!["content-['keep-me.html']"]);
     }
@@ -1288,7 +2977,17 @@ mod scanner {
             ),
         ];
 
-        let candidates = Scanner::new(sources.clone()).scan();
+        let mut scanner = Scanner::new(sources.clone());
+        let candidates = scanner.scan();
+
+        assert_snapshot!(fs_tree(&dir, &scanned_files(&mut scanner, &dir)), @"
+        .
+        └── ✓ src
+            └── ✓ app
+                └── ✓ [foo]
+                    ├── ✗ ignore-me.html
+                    └── ✓ keep-me.html
+        ");
 
         assert_eq!(candidates, vec!["content-['keep-me.html']"]);
     }
@@ -1315,6 +3014,12 @@ mod scanner {
         let candidates = scanner.scan();
         assert_eq!(candidates, vec!["content-['src/keep-me.html']"]);
 
+        assert_snapshot!(fs_tree(&dir, &scanned_files(&mut scanner, &dir)), @"
+        .
+        └── ✓ src
+            └── ✓ keep-me.html
+        ");
+
         // Create new files that should definitely be ignored
         create_files_in(
             &dir,
@@ -1342,6 +3047,18 @@ mod scanner {
 
         let candidates = scanner.scan();
 
+        assert_snapshot!(fs_tree(&dir, &scanned_files(&mut scanner, &dir)), @"
+        .
+        ├── ✗ .gitignore
+        │       src/ignored-by-gitignore.html
+        └── ✓ src
+            ├── ✗ ignore-by-extension.bin
+            ├── ✓ ignored-by-gitignore.html
+            ├── ✗ ignored-by-source-not.html
+            ├── ✓ keep-me.html
+            └── ✓ new-file.html
+        ");
+
         assert_eq!(
             candidates,
             vec![
@@ -1371,6 +3088,11 @@ mod scanner {
         let candidates = scanner.scan();
         assert!(candidates.is_empty());
 
+        assert_snapshot!(fs_tree(&dir, &scanned_files(&mut scanner, &dir)), @"
+        .
+        └── ✗ foo.styl
+        ");
+
         // Explicitly allow `.styl` files
         let mut scanner = Scanner::new(vec![
             public_source_entry_from_pattern(dir.clone(), "@source '**/*'"),
@@ -1379,6 +3101,11 @@ mod scanner {
 
         let candidates = scanner.scan();
         assert_eq!(candidates, vec!["content-['foo.styl']"]);
+
+        assert_snapshot!(fs_tree(&dir, &scanned_files(&mut scanner, &dir)), @"
+        .
+        └── ✓ foo.styl
+        ");
     }
 
     #[test]
@@ -1403,6 +3130,13 @@ mod scanner {
         let candidates = scanner.scan();
         assert!(candidates.is_empty());
 
+        assert_snapshot!(fs_tree(&dir, &scanned_files(&mut scanner, &dir)), @"
+        .
+        ├── ✗ .gitignore
+        │       index.html
+        └── ✗ index.html
+        ");
+
         let mut scanner = Scanner::new(vec![
             public_source_entry_from_pattern(dir.clone(), "@source '**/*'"),
             public_source_entry_from_pattern(dir.clone(), "@source './*.html'"),
@@ -1410,6 +3144,13 @@ mod scanner {
 
         let candidates = scanner.scan();
         assert_eq!(candidates, vec!["content-['index.html']"]);
+
+        assert_snapshot!(fs_tree(&dir, &scanned_files(&mut scanner, &dir)), @"
+        .
+        ├── ✗ .gitignore
+        │       index.html
+        └── ✓ index.html
+        ");
     }
 
     #[test]
@@ -1444,6 +3185,17 @@ mod scanner {
         let candidates = scanner.scan();
         assert_eq!(candidates, vec!["content-['src/index.html']"]);
 
+        assert_snapshot!(fs_tree(&dir, &scanned_files(&mut scanner, &dir)), @"
+        .
+        ├── ✗ .gitignore
+        │       node_modules
+        ├── ✗ node_modules
+        │   └── ✗ my-ui-lib
+        │       └── ✗ index.html
+        └── ✓ src
+            └── ✓ index.html
+        ");
+
         // Explicitly listing all `*.html` files, should not include `node_modules` because it's
         // ignored
         let sources = vec![public_source_entry_from_pattern(
@@ -1455,6 +3207,17 @@ mod scanner {
         let candidates = scanner.scan();
         assert_eq!(candidates, vec!["content-['src/index.html']"]);
 
+        assert_snapshot!(fs_tree(&dir, &scanned_files(&mut scanner, &dir)), @"
+        .
+        ├── ✗ .gitignore
+        │       node_modules
+        ├── ✗ node_modules
+        │   └── ✗ my-ui-lib
+        │       └── ✗ index.html
+        └── ✓ src
+            └── ✓ index.html
+        ");
+
         // Explicitly listing all `*.html` files
         // Explicitly list the `node_modules/my-ui-lib`
         //
@@ -1472,6 +3235,64 @@ mod scanner {
                 "content-['src/index.html']"
             ]
         );
+
+        assert_snapshot!(fs_tree(&dir, &scanned_files(&mut scanner, &dir)), @"
+        .
+        ├── ✗ .gitignore
+        │       node_modules
+        ├── ✓ node_modules
+        │   └── ✓ my-ui-lib
+        │       └── ✓ index.html
+        └── ✓ src
+            └── ✓ index.html
+        ");
+    }
+
+    // https://github.com/tailwindlabs/tailwindcss/issues/19844
+    #[test]
+    fn test_allow_explicit_sources_ignored_by_allow_list_gitignore() {
+        let ScanResult {
+            candidates, tree, ..
+        } = scan_with_globs(
+            &[
+                (".gitignore", "*\n!/app\n!/app/design\n!/app/design/**\n"),
+                (
+                    "app/design/frontend/theme/templates/component.phtml",
+                    "content-['app/design/frontend/theme/templates/component.phtml']",
+                ),
+                (
+                    "vendor/acme/theme/module/templates/component.phtml",
+                    "content-['vendor/acme/theme/module/templates/component.phtml']",
+                ),
+            ],
+            vec!["@source 'vendor/acme/theme'"],
+        );
+
+        assert_snapshot!(tree, @"
+        . (git)
+        ├── ✗ .gitignore
+        │       *
+        │       !/app
+        │       !/app/design
+        │       !/app/design/**
+        ├── ✗ app
+        │   └── ✗ design
+        │       └── ✗ frontend
+        │           └── ✗ theme
+        │               └── ✗ templates
+        │                   └── ✗ component.phtml
+        └── ✓ vendor
+            └── ✓ acme
+                └── ✓ theme
+                    └── ✓ module
+                        └── ✓ templates
+                            └── ✓ component.phtml
+        ");
+
+        assert_eq!(
+            candidates,
+            vec!["content-['vendor/acme/theme/module/templates/component.phtml']"]
+        );
     }
 
     #[test]
@@ -1481,6 +3302,8 @@ mod scanner {
             files,
             globs,
             normalized_sources,
+            tree,
+            ..
         } = scan_with_globs(
             &[
                 (
@@ -1499,6 +3322,17 @@ mod scanner {
             vec!["@source '**/*'"],
         );
 
+        assert_snapshot!(tree, @"
+        . (git)
+        ├── ✗ node_modules
+        │   └── ✗ index.html
+        └── ✓ packages
+            └── ✓ web
+                ├── ✓ index.html
+                └── ✗ node_modules
+                    └── ✗ index.html
+        ");
+
         assert_eq!(candidates, vec!["content-['packages/web/index.html']"]);
 
         assert_eq!(files, vec!["packages/web/index.html",]);
@@ -1513,6 +3347,8 @@ mod scanner {
             files,
             globs,
             normalized_sources,
+            tree,
+            ..
         } = scan_with_globs(
             &[
                 (".gitignore", "node_modules\ndist"),
@@ -1528,6 +3364,18 @@ mod scanner {
             vec!["@source 'node_modules/my-ui-lib'"],
         );
 
+        assert_snapshot!(tree, @"
+        . (git)
+        ├── ✗ .gitignore
+        │       node_modules
+        │       dist
+        └── ✓ node_modules
+            └── ✓ my-ui-lib
+                ├── ✓ dist
+                │   └── ✓ index.html
+                └── ✗ node.exe
+        ");
+
         assert_eq!(
             candidates,
             vec!["content-['node_modules/my-ui-lib/dist/index.html']"]
@@ -1569,6 +3417,17 @@ mod scanner {
         let candidates = scanner.scan();
         assert_eq!(candidates, vec!["content-['src/components/button.tsx']"]);
 
+        assert_snapshot!(fs_tree(&dir, &scanned_files(&mut scanner, &dir)), @"
+        .
+        ├── ✗ .gitignore
+        │       *.jsx
+        │       generated/
+        └── ✓ src
+            └── ✓ components
+                ├── ✗ button.jsx
+                └── ✓ button.tsx
+        ");
+
         // Create 2 new files, one "good" and one "bad" file, and manually scan them. This should
         // only return the "good" file because the "bad" one is ignored by a `.gitignore` file.
         create_files_in(
@@ -1629,6 +3488,8 @@ mod scanner {
             files,
             globs,
             normalized_sources,
+            tree,
+            ..
         } = scan_with_globs(
             &[
                 ("src/💩.js", "content-['src/💩.js']"),
@@ -1638,6 +3499,15 @@ mod scanner {
             vec!["@source '**/*'", "@source not 'src/🤦‍♂️'"],
         );
 
+        assert_snapshot!(tree, @"
+        . (git)
+        └── ✓ src
+            ├── ✓ 💩.js
+            ├── ✗ 🤦‍♂️
+            │   └── ✗ foo.tsx
+            └── ✓ 🤦‍♂️.tsx
+        ");
+
         assert_eq!(
             candidates,
             vec!["content-['src/💩.js']", "content-['src/🤦‍♂️.tsx']"]
@@ -1674,6 +3544,23 @@ mod scanner {
         )]);
         let candidates = scanner.scan();
 
+        assert_snapshot!(fs_tree(&dir, &scanned_files(&mut scanner, &dir)), @"
+        .
+        ├── ✗ .gitignore
+        │       node_modules
+        │       dist
+        └── ✓ node_modules
+            ├── ✓ .pnpm
+            │   └── ✓ @org+my-ui-library
+            │       └── ✓ dist
+            │           └── ✓ index.ts
+            └── ✓ @org
+                ├── ✓ .gitkeep
+                └── ✓ my-ui-library → ../.pnpm/@org+my-ui-library
+                    └── ✓ dist
+                        └── ✓ index.ts
+        ");
+
         assert_eq!(
             candidates,
             vec!["content-['node_modules/.pnpm/@org+my-ui-library/dist/index.ts']"]
@@ -1685,6 +3572,23 @@ mod scanner {
         )]);
         let candidates = scanner.scan();
 
+        assert_snapshot!(fs_tree(&dir, &scanned_files(&mut scanner, &dir)), @"
+        .
+        ├── ✗ .gitignore
+        │       node_modules
+        │       dist
+        └── ✓ node_modules
+            ├── ✓ .pnpm
+            │   └── ✓ @org+my-ui-library
+            │       └── ✓ dist
+            │           └── ✓ index.ts
+            └── ✓ @org
+                ├── ✗ .gitkeep
+                └── ✓ my-ui-library → ../.pnpm/@org+my-ui-library
+                    └── ✓ dist
+                        └── ✓ index.ts
+        ");
+
         assert_eq!(
             candidates,
             vec!["content-['node_modules/.pnpm/@org+my-ui-library/dist/index.ts']"]
@@ -1696,6 +3600,23 @@ mod scanner {
         )]);
         let candidates = scanner.scan();
 
+        assert_snapshot!(fs_tree(&dir, &scanned_files(&mut scanner, &dir)), @"
+        .
+        ├── ✗ .gitignore
+        │       node_modules
+        │       dist
+        └── ✓ node_modules
+            ├── ✓ .pnpm
+            │   └── ✓ @org+my-ui-library
+            │       └── ✓ dist
+            │           └── ✓ index.ts
+            └── ✓ @org
+                ├── ✓ .gitkeep
+                └── ✓ my-ui-library → ../.pnpm/@org+my-ui-library
+                    └── ✓ dist
+                        └── ✓ index.ts
+        ");
+
         assert_eq!(
             candidates,
             vec!["content-['node_modules/.pnpm/@org+my-ui-library/dist/index.ts']"]
@@ -1713,11 +3634,14 @@ mod scanner {
             ],
         );
 
-        // Create recursive symlinks
-        let _ = symlink(dir.join("a"), dir.join("b"));
-        let _ = symlink(dir.join("b/c"), dir.join("c"));
-        let _ = symlink(dir.join("b/root"), &dir);
-        let _ = symlink(dir.join("c"), dir.join("a"));
+        // Create recursive symlinks:
+        //
+        // - `a → b`, `b/c → c`, `c → a` form a cycle
+        // - `b/root → .` points back at the root directory
+        let _ = symlink(dir.join("b"), dir.join("a"));
+        let _ = symlink(dir.join("c"), dir.join("b/c"));
+        let _ = symlink(&dir, dir.join("b/root"));
+        let _ = symlink(dir.join("a"), dir.join("c"));
 
         let mut scanner = Scanner::new(vec![public_source_entry_from_pattern(
             dir.clone(),
@@ -1725,6 +3649,24 @@ mod scanner {
         )]);
         let candidates = scanner.scan();
 
+        assert_snapshot!(fs_tree(&dir, &scanned_files(&mut scanner, &dir)), @"
+        .
+        ├── ✓ a → b
+        │   ├── ✗ c → ../c
+        │   ├── ✓ index.html
+        │   └── ✗ root → ..
+        ├── ✓ b
+        │   ├── ✗ c → ../c
+        │   ├── ✓ index.html
+        │   └── ✗ root → ..
+        ├── ✓ c → a
+        │   ├── ✗ c → .
+        │   ├── ✓ index.html
+        │   └── ✗ root → ..
+        └── ✓ z
+            └── ✓ index.html
+        ");
+
         assert_eq!(
             candidates,
             vec!["content-['b/index.html']", "content-['z/index.html']"]
@@ -1749,6 +3691,14 @@ mod scanner {
         )]);
         let candidates = scanner.scan();
 
+        assert_snapshot!(fs_tree(&dir, &scanned_files(&mut scanner, &dir)), @"
+        .
+        ├── ✓ abcd
+        │   └── ✓ xyz.html
+        └── ✓ efgh → abcd
+            └── ✓ xyz.html
+        ");
+
         assert_eq!(candidates, vec!["content-['abcd/xyz.html']"]);
 
         // Partially referencing the symlinked folder with a glob, should find the file
@@ -1761,6 +3711,333 @@ mod scanner {
         assert_eq!(candidates, vec!["content-['abcd/xyz.html']"]);
     }
 
+    #[test]
+    fn test_symlinked_sources_within_the_scanned_tree_can_be_ignored() {
+        let dir = tempdir().unwrap().into_path();
+        create_files_in(
+            &dir,
+            &[
+                ("src/keep.html", "content-['src/keep.html']"),
+                (
+                    "actual-dir/ignore.html",
+                    "content-['actual-dir/ignore.html']",
+                ),
+                ("actual-file.html", "content-['actual-file.html']"),
+            ],
+        );
+
+        let _ = symlink(dir.join("actual-dir"), dir.join("linked-dir"));
+        let _ = symlink_file(dir.join("actual-file.html"), dir.join("linked-file.html"));
+
+        let base = dir.join("src");
+        let mut scanner = Scanner::new(vec![
+            public_source_entry_from_pattern(base.clone(), "@source '../**/*'"),
+            public_source_entry_from_pattern(base.clone(), "@source not '../actual-dir'"),
+            public_source_entry_from_pattern(base.clone(), "@source not '../linked-dir'"),
+            public_source_entry_from_pattern(base.clone(), "@source not '../actual-file.html'"),
+            public_source_entry_from_pattern(base.clone(), "@source not '../linked-file.html'"),
+        ]);
+        let candidates = scanner.scan();
+
+        assert_snapshot!(fs_tree(&dir, &scanned_files(&mut scanner, &dir)), @"
+        .
+        ├── ✗ actual-dir
+        │   └── ✗ ignore.html
+        ├── ✗ actual-file.html
+        ├── ✗ linked-dir → actual-dir
+        │   └── ✗ ignore.html
+        ├── ✗ linked-file.html → actual-file.html
+        └── ✓ src
+            └── ✓ keep.html
+        ");
+
+        assert_eq!(candidates, vec!["content-['src/keep.html']"]);
+
+        let mut scanner = Scanner::new(vec![
+            public_source_entry_from_pattern(base.clone(), "@source '../**/*'"),
+            public_source_entry_from_pattern(base.clone(), "@source not '../actual-dir/**/*.html'"),
+            public_source_entry_from_pattern(base.clone(), "@source not '../linked-dir/**/*.html'"),
+            public_source_entry_from_pattern(base.clone(), "@source not '../actual-file.html'"),
+            public_source_entry_from_pattern(base.clone(), "@source not '../linked-file.html'"),
+        ]);
+        let candidates = scanner.scan();
+
+        assert_eq!(candidates, vec!["content-['src/keep.html']"]);
+    }
+
+    #[test]
+    fn test_symlinked_sources_outside_the_scanned_tree_can_be_ignored() {
+        let dir = tempdir().unwrap().into_path();
+        create_files_in(
+            &dir,
+            &[
+                (
+                    "actual-dir/ignore.html",
+                    "content-['actual-dir/ignore.html']",
+                ),
+                ("project/keep.html", "content-['project/keep.html']"),
+            ],
+        );
+
+        let _ = symlink(dir.join("actual-dir"), dir.join("project/linked-dir"));
+
+        let base = dir.join("project");
+        let mut scanner = Scanner::new(vec![public_source_entry_from_pattern(
+            base.clone(),
+            "@source '**/*'",
+        )]);
+        let candidates = scanner.scan();
+
+        assert_snapshot!(fs_tree(&dir, &scanned_files(&mut scanner, &dir)), @"
+        .
+        ├── ✓ actual-dir
+        │   └── ✓ ignore.html
+        └── ✓ project
+            ├── ✓ keep.html
+            └── ✓ linked-dir → ../actual-dir
+                └── ✓ ignore.html
+        ");
+
+        assert_eq!(
+            candidates,
+            vec![
+                "content-['actual-dir/ignore.html']",
+                "content-['project/keep.html']",
+            ]
+        );
+
+        let mut scanner = Scanner::new(vec![
+            public_source_entry_from_pattern(base.clone(), "@source '**/*'"),
+            public_source_entry_from_pattern(base.clone(), "@source not 'linked-dir'"),
+        ]);
+        let candidates = scanner.scan();
+
+        assert_snapshot!(fs_tree(&dir, &scanned_files(&mut scanner, &dir)), @"
+        .
+        ├── ✗ actual-dir
+        │   └── ✗ ignore.html
+        └── ✓ project
+            ├── ✓ keep.html
+            └── ✗ linked-dir → ../actual-dir
+                └── ✗ ignore.html
+        ");
+
+        assert_eq!(candidates, vec!["content-['project/keep.html']"]);
+    }
+
+    #[test]
+    fn test_files_behind_symlinks_are_tracked_with_their_canonical_paths() {
+        let dir = tempdir().unwrap().into_path();
+        create_files_in(
+            &dir,
+            &[
+                (
+                    "packages/repro/source.html",
+                    "content-['packages/repro/source.html']",
+                ),
+                (
+                    "packages/repro/nested/deep.html",
+                    "content-['packages/repro/nested/deep.html']",
+                ),
+                (
+                    "packages/other/index.html",
+                    "content-['packages/other/index.html']",
+                ),
+            ],
+        );
+
+        // Mimic a pnpm workspace where `node_modules` contains a symlink to the actual package
+        fs::create_dir_all(dir.join("node_modules")).unwrap();
+        let _ = symlink(dir.join("packages/repro"), dir.join("node_modules/repro"));
+
+        // A directly symlinked file
+        let _ = symlink_file(
+            dir.join("packages/other/index.html"),
+            dir.join("linked.html"),
+        );
+
+        let mut scanner = Scanner::new(vec![
+            public_source_entry_from_pattern(
+                dir.clone(),
+                "@source 'node_modules/repro/source.html'",
+            ),
+            // The symlink sits multiple levels up from the file
+            public_source_entry_from_pattern(
+                dir.clone(),
+                "@source 'node_modules/repro/nested/deep.html'",
+            ),
+            public_source_entry_from_pattern(dir.clone(), "@source 'linked.html'"),
+        ]);
+
+        let candidates = scanner.scan();
+        assert_eq!(
+            candidates,
+            vec![
+                "content-['packages/other/index.html']",
+                "content-['packages/repro/nested/deep.html']",
+                "content-['packages/repro/source.html']",
+            ]
+        );
+
+        assert_snapshot!(fs_tree(&dir, &scanned_files(&mut scanner, &dir)), @"
+        .
+        ├── ✓ linked.html → packages/other/index.html
+        ├── ✓ node_modules
+        │   └── ✓ repro → ../packages/repro
+        │       ├── ✓ nested
+        │       │   └── ✓ deep.html
+        │       └── ✓ source.html
+        └── ✓ packages
+            ├── ✓ other
+            │   └── ✓ index.html
+            └── ✓ repro
+                ├── ✓ nested
+                │   └── ✓ deep.html
+                └── ✓ source.html
+        ");
+
+        // Both the symlinked paths and the canonical paths should be tracked, such that file
+        // watchers watching the returned files also watch the real files on disk.
+        let files = scanned_files(&mut scanner, &dir);
+        assert_eq!(
+            files,
+            vec![
+                "linked.html",
+                "node_modules/repro/nested/deep.html",
+                "node_modules/repro/source.html",
+                "packages/other/index.html",
+                "packages/repro/nested/deep.html",
+                "packages/repro/source.html",
+            ]
+        );
+    }
+
+    #[test]
+    fn test_changes_to_the_canonical_path_of_a_symlinked_file_are_detected() {
+        let dir = tempdir().unwrap().into_path();
+        create_files_in(&dir, &[("packages/repro/source.html", "content-['v1']")]);
+
+        // Mimic a pnpm workspace where `node_modules` contains a symlink to the actual package
+        fs::create_dir_all(dir.join("node_modules")).unwrap();
+        let _ = symlink(dir.join("packages/repro"), dir.join("node_modules/repro"));
+
+        let mut scanner = Scanner::new(vec![public_source_entry_from_pattern(
+            dir.clone(),
+            "@source 'node_modules/repro/source.html'",
+        )]);
+
+        let candidates = scanner.scan();
+        assert_eq!(candidates, vec!["content-['v1']"]);
+
+        assert_snapshot!(fs_tree(&dir, &scanned_files(&mut scanner, &dir)), @"
+        .
+        ├── ✓ node_modules
+        │   └── ✓ repro → ../packages/repro
+        │       └── ✓ source.html
+        └── ✓ packages
+            └── ✓ repro
+                └── ✓ source.html
+        ");
+
+        // Update the real file on disk. This is the path file watchers will report changes for.
+        create_files_in(&dir, &[("packages/repro/source.html", "content-['v2']")]);
+
+        let candidates = scanner.scan_content(vec![ChangedContent::File(
+            dir.join("packages/repro/source.html"),
+            "html".into(),
+        )]);
+        assert_eq!(candidates, vec!["content-['v2']"]);
+    }
+
+    #[test]
+    fn test_new_files_behind_symlinks_are_detected_at_their_canonical_path() {
+        let dir = tempdir().unwrap().into_path();
+        create_files_in(&dir, &[("packages/repro/a.html", "content-['a']")]);
+
+        // Mimic a pnpm workspace where `node_modules` contains a symlink to the actual package
+        fs::create_dir_all(dir.join("node_modules")).unwrap();
+        let _ = symlink(dir.join("packages/repro"), dir.join("node_modules/repro"));
+
+        let mut scanner = Scanner::new(vec![public_source_entry_from_pattern(
+            dir.clone(),
+            "@source 'node_modules/repro/*.html'",
+        )]);
+
+        let candidates = scanner.scan();
+        assert_eq!(candidates, vec!["content-['a']"]);
+
+        assert_snapshot!(fs_tree(&dir, &scanned_files(&mut scanner, &dir)), @"
+        .
+        ├── ✓ node_modules
+        │   └── ✓ repro → ../packages/repro
+        │       └── ✓ a.html
+        └── ✓ packages
+            └── ✓ repro
+                └── ✓ a.html
+        ");
+
+        // Create a new file in the real directory. File watchers watching the real directory
+        // will report the new file with its canonical path.
+        create_files_in(&dir, &[("packages/repro/b.html", "content-['b']")]);
+
+        let candidates = scanner.scan_content(vec![ChangedContent::File(
+            dir.join("packages/repro/b.html"),
+            "html".into(),
+        )]);
+        assert_eq!(candidates, vec!["content-['b']"]);
+
+        assert_snapshot!(fs_tree(&dir, &scanned_files(&mut scanner, &dir)), @"
+        .
+        ├── ✓ node_modules
+        │   └── ✓ repro → ../packages/repro
+        │       ├── ✓ a.html
+        │       └── ✓ b.html
+        └── ✓ packages
+            └── ✓ repro
+                ├── ✓ a.html
+                └── ✗ b.html
+        ");
+    }
+
+    // https://github.com/tailwindlabs/tailwindcss/pull/20408
+    #[test]
+    fn test_resolving_globs_does_not_traverse_gitignored_directories() {
+        let ScanResult {
+            files, globs, tree, ..
+        } = scan_with_globs(
+            &[
+                (".gitignore", "/vendor\n"),
+                ("vendor/pkg/canary/index.html", ""),
+                ("src/index.html", ""),
+            ],
+            vec!["@source '**/*'", "@source './vendor/pkg/canary'"],
+        );
+
+        assert_snapshot!(tree, @"
+        . (git)
+        ├── ✗ .gitignore
+        │       /vendor
+        ├── ✓ src
+        │   └── ✓ index.html
+        └── ✓ vendor
+            └── ✓ pkg
+                └── ✓ canary
+                    └── ✓ index.html
+        ");
+
+        assert_eq!(
+            files,
+            vec!["src/index.html", "vendor/pkg/canary/index.html"]
+        );
+        assert_eq!(globs, vec![
+            "*",
+            "src/**/*.{aspx,astro,cjs,cts,eex,erb,gjs,gts,haml,handlebars,hbs,heex,html,jade,js,jsx,liquid,md,mdx,mjs,mts,mustache,njk,nunjucks,php,pug,py,razor,rb,rhtml,rs,slim,svelte,tpl,ts,tsx,twig,vue}",
+
+            // This should not include `**` or `**.*.{aspx,...}` otherwise this might be scanned recursively.
+            "vendor/pkg/canary/*",
+        ]);
+    }
+
     #[test]
     fn test_extract_used_css_variables_from_css() {
         let dir = tempdir().unwrap().into_path();
@@ -1786,6 +4063,11 @@ mod scanner {
                 ("src/defined-at-start.css", "--color-defined-at-start: red;"),
             ],
         );
+        fs::write(
+            dir.join("src/invalid.css"),
+            b".button { color: var(--color-\x80); }",
+        )
+        .unwrap();
 
         let mut scanner = Scanner::new(vec![public_source_entry_from_pattern(
             dir.clone(),
diff --git a/integrations/cli/config.test.ts b/integrations/cli/config.test.ts
index dd93ade64..dda70814b 100644
--- a/integrations/cli/config.test.ts
+++ b/integrations/cli/config.test.ts
@@ -126,6 +126,72 @@ test(
   },
 )
 
+// https://github.com/tailwindlabs/tailwindcss/issues/19706
+test(
+  'Config files (TS, valid types)',
+  {
+    fs: {
+      'package.json': json`
+        {
+          "type": "module",
+          "dependencies": {
+            "tailwindcss": "workspace:^",
+            "@tailwindcss/cli": "workspace:^"
+          },
+          "devDependencies": {
+            "typescript": "^5.9.3"
+          }
+        }
+      `,
+      'tsconfig.json': json`
+        {
+          "compilerOptions": {
+            "target": "ES2022",
+            "module": "NodeNext",
+            "moduleResolution": "NodeNext",
+            "declaration": true,
+            "composite": true,
+            "outDir": "./.build",
+            "skipLibCheck": true
+          },
+          "include": ["tailwind.config.ts"]
+        }
+      `,
+      'index.html': html`
+        <div class="text-primary"></div>
+      `,
+      'tailwind.config.ts': ts`
+        import type { Config } from 'tailwindcss'
+
+        function defineConfig(config: Config): Config {
+          return config
+        }
+
+        export default defineConfig({
+          theme: {
+            extend: {
+              colors: {
+                primary: 'blue',
+              },
+            },
+          },
+        })
+      `,
+      'src/index.css': css`
+        @import 'tailwindcss';
+        @config '../tailwind.config.ts';
+      `,
+    },
+  },
+  async ({ fs, exec }) => {
+    // We expect that these commands don't crash:
+    await exec('pnpm tsc -b')
+    await exec('pnpm tailwindcss --input src/index.css --output dist/out.css')
+
+    await fs.expectFileToContain('dist/out.css', [candidate`text-primary`])
+  },
+)
+
 test(
   'Config files (CJS, watch mode)',
   {
diff --git a/integrations/cli/index.test.ts b/integrations/cli/index.test.ts
index 409a9de7c..07f8bcb68 100644
--- a/integrations/cli/index.test.ts
+++ b/integrations/cli/index.test.ts
@@ -375,6 +375,120 @@ describe.each([
     },
   )
 
+  test(
+    'watch mode with polling',
+    {
+      fs: {
+        'package.json': json`
+          {
+            "dependencies": {
+              "tailwindcss": "workspace:^",
+              "@tailwindcss/cli": "workspace:^"
+            }
+          }
+        `,
+        'src/index.css': css`@import 'tailwindcss/utilities';`,
+        'src/index.html': html`
+          <div class="underline"></div>
+        `,
+      },
+    },
+    async ({ fs, spawn }) => {
+      let process = await spawn(
+        `${command} --input src/index.css --output dist/out.css --watch --poll=50`,
+      )
+      await process.onStderr((m) => m.includes('Done in'))
+
+      await fs.expectFileToContain('dist/out.css', [candidate`underline`])
+
+      await fs.write('src/index.html', html`
+          <div class="underline flex"></div>
+        `)
+
+      await fs.expectFileToContain('dist/out.css', [candidate`flex`])
+    },
+  )
+
+  test(
+    "watch mode with unknown @source paths shouldn't crash on Windows",
+    {
+      fs: {
+        'package.json': json`
+          {
+            "dependencies": {
+              "tailwindcss": "workspace:^",
+              "@tailwindcss/cli": "workspace:^"
+            }
+          }
+        `,
+        'index.html': html`
+          <div class="underline"></div>
+        `,
+        'src/index.css': css`
+          @import 'tailwindcss';
+          @source "unknown-folder/**/*";
+        `,
+      },
+    },
+    async ({ fs, spawn }) => {
+      let process = await spawn(`${command} --input src/index.css --output dist/out.css --watch`)
+      await process.onStderr((m) => m.includes('Done in'))
+
+      await fs.expectFileToContain('dist/out.css', [candidate`underline`])
+    },
+  )
+
+  // https://github.com/tailwindlabs/tailwindcss/issues/17632
+  test(
+    'watch mode rebuilds when the input file is in an ignored folder',
+    {
+      fs: {
+        'package.json': json`
+          {
+            "dependencies": {
+              "tailwindcss": "workspace:^",
+              "@tailwindcss/cli": "workspace:^"
+            }
+          }
+        `,
+        'assets/tailwind.config.js': js`
+          module.exports = {
+            content: {
+              relative: true,
+              files: ['html/*.html'],
+            },
+          }
+        `,
+        'assets/html/index.html': html`
+          <div class="underline"></div>
+        `,
+        'assets/css/index.css': css`
+          @import 'tailwindcss' source(none);
+          @config '../tailwind.config.js';
+        `,
+      },
+    },
+    async ({ fs, spawn }) => {
+      let process = await spawn(
+        `${command} --input assets/css/index.css --output dist/out.css --watch`,
+      )
+      await process.onStderr((m) => m.includes('Done in'))
+
+      await fs.expectFileToContain('dist/out.css', [candidate`underline`])
+
+      await fs.write(
+        'assets/css/index.css',
+        css`
+          @import 'tailwindcss' source(none);
+          @config '../tailwind.config.js';
+          @source inline("flex");
+        `,
+      )
+
+      await fs.expectFileToContain('dist/out.css', [candidate`flex`])
+    },
+  )
+
   test(
     'production build (stdin)',
     {
@@ -559,6 +673,15 @@ describe.each([
     'git ignore files outside of a repo are not considered',
     {
       fs: {
+        // Make the test root a pnpm workspace that includes `home/project` so
+        // the install below resolves the transitive dependency overrides that
+        // the test harness injects into this `pnpm-workspace.yaml`.
+        'pnpm-workspace.yaml': yaml`
+          #
+          packages:
+            - home/project
+        `,
+
         // Ignore everything in the "home" directory
         'home/.gitignore': '*',
 
@@ -596,7 +719,7 @@ describe.each([
       installDependencies: false,
     },
     async ({ fs, root, exec }) => {
-      await exec(`pnpm install --ignore-workspace`, {
+      await exec(`pnpm install`, {
         cwd: path.join(root, 'home/project'),
       })
 
@@ -644,7 +767,7 @@ describe.each([
             }
           }
         `,
-        'ssrc/index.html': html`
+        'src/index.html': html`
           <div class="flex"></div>
         `,
         'src/index.css': css`
@@ -705,7 +828,7 @@ describe.each([
             }
           }
         `,
-        'ssrc/index.html': html`
+        'src/index.html': html`
           <div class="flex"></div>
         `,
         'src/index.css': css`
@@ -771,7 +894,7 @@ describe.each([
             }
           }
         `,
-        'ssrc/index.html': html`
+        'src/index.html': html`
           <div class="flex"></div>
         `,
         'src/index.css': css`
@@ -832,7 +955,7 @@ describe.each([
             }
           }
         `,
-        'ssrc/index.html': html`
+        'src/index.html': html`
           <div class="flex"></div>
         `,
         'src/index.css': css`
@@ -1065,7 +1188,7 @@ describe.each([
             }
           }
         `,
-        'ssrc/index.html': html`
+        'src/index.html': html`
           <div class="flex"></div>
         `,
         'src/index.css': css`
@@ -1294,6 +1417,86 @@ describe.each([
       })
     },
   )
+
+  test(
+    'watch mode should trigger a full rebuild when a dependency is removed',
+    {
+      fs: {
+        'package.json': json`
+          {
+            "dependencies": {
+              "tailwindcss": "workspace:^",
+              "@tailwindcss/cli": "workspace:^"
+            }
+          }
+        `,
+        'src/index.html': html`
+          <div class="flex text-primary"></div>
+        `,
+        'src/index.css': css`
+          @import 'tailwindcss/utilities';
+          @config '../tailwind.config.js';
+        `,
+        'tailwind.config.js': js`
+          const myColor = require('./my-color')
+
+          module.exports = {
+            theme: {
+              extend: {
+                colors: {
+                  primary: myColor,
+                },
+              },
+            },
+          }
+        `,
+        'my-color.js': js`
+          //
+          module.exports = 'blue'
+        `,
+      },
+    },
+    async ({ spawn, fs, expect }) => {
+      let process = await spawn(`${command} --input src/index.css --output dist/out.css --watch`)
+      await process.onStderr((m) => m.includes('Done in'))
+
+      expect(await fs.dumpFiles('dist/*.css')).toMatchInlineSnapshot(`
+        "
+        --- dist/out.css ---
+        .flex {
+          display: flex;
+        }
+        .text-primary {
+          color: blue;
+        }
+        "
+      `)
+
+      // Remove the dependency of the tailwind.config.js file
+      await fs.delete('my-color.js')
+
+      // We expect an error
+      await process.onStderr((m) => m.includes('Error'))
+      await process.onStderr((m) => m.includes('Done in'))
+
+      // Re-create the file to resolve the issue
+      await fs.write('my-color.js', js`module.exports = 'red'`)
+      await process.onStderr((m) => m.includes('Done in'))
+
+      // Expect a full rebuild
+      expect(await fs.dumpFiles('dist/*.css')).toMatchInlineSnapshot(`
+        "
+        --- dist/out.css ---
+        .flex {
+          display: flex;
+        }
+        .text-primary {
+          color: red;
+        }
+        "
+      `)
+    },
+  )
 })
 
 test(
@@ -1858,7 +2061,7 @@ test(
       `,
     },
   },
-  async ({ fs, exec, spawn, root, expect }) => {
+  async ({ fs, exec, root, expect }) => {
     await exec('pnpm tailwindcss --input ./index.css --output dist/out.css', { cwd: root })
 
     let content = await fs.dumpFiles('./dist/*.css')
@@ -1869,6 +2072,335 @@ test(
   },
 )
 
+test(
+  '@source order is important (referencing sibling project)',
+  {
+    fs: {
+      'package.json': json`{}`,
+      'pnpm-workspace.yaml': yaml`
+        #
+        packages:
+          - project-a
+      `,
+      'project-a/package.json': json`
+        {
+          "dependencies": {
+            "tailwindcss": "workspace:^",
+            "@tailwindcss/cli": "workspace:^"
+          }
+        }
+      `,
+      'project-a/src/index.css': css`
+        @import 'tailwindcss/utilities' source(none);
+
+        @source '../../project-b';
+        @source not '../../project-b/ignored';
+        @source '../../project-b/ignored/except.html';
+      `,
+
+      'project-b/keep/keep.html': html`<div class="content-['GOOD-1']"></div>`,
+      'project-b/ignored/ignored.html': html`<div class="content-['BAD-1']"></div>`,
+      'project-b/ignored/except.html': html`<div class="content-['GOOD-2']"></div>`,
+    },
+  },
+  async ({ fs, root, exec, expect }) => {
+    await exec('pnpm tailwindcss --input src/index.css --output dist/out.css', {
+      cwd: path.join(root, 'project-a'),
+    })
+
+    expect(await fs.dumpFiles('./project-a/dist/*.css')).toMatchInlineSnapshot(`
+      "
+      --- ./project-a/dist/out.css ---
+      @layer properties;
+      .content-\\[\\'GOOD-1\\'\\] {
+        --tw-content: 'GOOD-1';
+        content: var(--tw-content);
+      }
+      .content-\\[\\'GOOD-2\\'\\] {
+        --tw-content: 'GOOD-2';
+        content: var(--tw-content);
+      }
+      @property --tw-content {
+        syntax: "*";
+        inherits: false;
+        initial-value: "";
+      }
+      @layer properties {
+        @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
+          *, ::before, ::after, ::backdrop {
+            --tw-content: "";
+          }
+        }
+      }
+      "
+    `)
+  },
+)
+
+test(
+  '@source works with symlinks (referencing sibling project)',
+  {
+    fs: {
+      'package.json': json`{}`,
+      'pnpm-workspace.yaml': yaml`
+        #
+        packages:
+          - project-a
+      `,
+      'project-a/package.json': json`
+        {
+          "dependencies": {
+            "tailwindcss": "workspace:^",
+            "@tailwindcss/cli": "workspace:^"
+          }
+        }
+      `,
+      'project-a/src/index.css': css`
+        @import 'tailwindcss/utilities' source(none);
+
+        /* Same as the previous test, but using symlinks instead */
+        @source '../../project-b';
+        @source not '../../project-b/ignored';
+        @source '../../project-b/ignored/except.html';
+      `,
+
+      'project-b/keep/keep.html': html`<div class="content-['GOOD-1']"></div>`,
+      'project-c/ignored/ignored.html': html`<div class="content-['BAD-1']"></div>`,
+      'project-c/ignored/except.html': html`<div class="content-['GOOD-2']"></div>`,
+
+      // Symlink the ignored folder to another project
+      'project-b/ignored': 'symlink:../../project-c/ignored/',
+    },
+  },
+  async ({ fs, root, exec, expect }) => {
+    await exec('pnpm tailwindcss --input src/index.css --output dist/out.css', {
+      cwd: path.join(root, 'project-a'),
+    })
+
+    expect(await fs.dumpFiles('./project-a/dist/*.css')).toMatchInlineSnapshot(`
+      "
+      --- ./project-a/dist/out.css ---
+      @layer properties;
+      .content-\\[\\'GOOD-1\\'\\] {
+        --tw-content: 'GOOD-1';
+        content: var(--tw-content);
+      }
+      .content-\\[\\'GOOD-2\\'\\] {
+        --tw-content: 'GOOD-2';
+        content: var(--tw-content);
+      }
+      @property --tw-content {
+        syntax: "*";
+        inherits: false;
+        initial-value: "";
+      }
+      @layer properties {
+        @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
+          *, ::before, ::after, ::backdrop {
+            --tw-content: "";
+          }
+        }
+      }
+      "
+    `)
+  },
+)
+
+// https://github.com/tailwindlabs/tailwindcss/issues/19844
+test(
+  '@source scans directories ignored by allow-list .gitignore files',
+  {
+    fs: {
+      'package.json': json`
+        {
+          "dependencies": {
+            "tailwindcss": "workspace:^",
+            "@tailwindcss/cli": "workspace:^"
+          }
+        }
+      `,
+      '.gitignore': txt`
+        *
+        !/app
+        !/app/design
+        !/app/design/**
+      `,
+      'src/index.css': css`
+        @import 'tailwindcss/utilities' source(none);
+        @source '../vendor/acme/theme';
+      `,
+      // 1. Ignored by the `*` in `.gitignore`
+      // 2. Included by the `!` pattern in `.gitignore`
+      // 3. Ignored by `source(none)`
+      //
+      // → Should be ignored
+      'app/design/frontend/theme/templates/component.phtml': html`
+        <div
+          class="content-['app/design/frontend/theme/templates/component.phtml']"
+        ></div>
+      `,
+      // 1. Ignored by the `*` in `.gitignore`
+      // 2. Included by the `!` pattern in `.gitignore`
+      // 3. Ignored by `source(none)`
+      // 4. Included by the `@source` directive
+      //
+      // → Should be included
+      'vendor/acme/theme/module/templates/component.phtml': html`
+        <div
+          class="content-['vendor/acme/theme/module/templates/component.phtml']"
+        ></div>
+      `,
+    },
+  },
+  async ({ fs, exec }) => {
+    await exec('pnpm tailwindcss --input src/index.css --output dist/out.css')
+
+    // 1. Ignored by the `*` in `.gitignore`
+    // 2. Included by the `!` pattern in `.gitignore`
+    // 3. Ignored by `source(none)`
+    //
+    // → Should be ignored
+    await fs.expectFileNotToContain('dist/out.css', [
+      candidate`content-['app/design/frontend/theme/templates/component.phtml']`,
+    ])
+
+    // 1. Ignored by the `*` in `.gitignore`
+    // 2. Included by the `!` pattern in `.gitignore`
+    // 3. Ignored by `source(none)`
+    // 4. Included by the `@source` directive
+    //
+    // → Should be included
+    await fs.expectFileToContain('dist/out.css', [
+      candidate`content-['vendor/acme/theme/module/templates/component.phtml']`,
+    ])
+  },
+)
+
+// https://github.com/tailwindlabs/tailwindcss/discussions/20382
+test(
+  'auto source detection respects allow-list .gitignore files',
+  {
+    fs: {
+      'package.json': json`
+        {
+          "dependencies": {
+            "tailwindcss": "workspace:^",
+            "@tailwindcss/cli": "workspace:^"
+          }
+        }
+      `,
+      '.gitignore': txt`
+        /*
+        !/.gitignore
+        !/app
+        !/public
+        !/package.json
+      `,
+      'app/root.css': css` @import 'tailwindcss/utilities'; `,
+      // Included by the `!/app` pattern in `.gitignore`
+      //
+      // → Should be included
+      'app/index.html': html`
+        <div class="content-['app/index.html']"></div>
+      `,
+      // Included by the `!/public` pattern in `.gitignore`
+      //
+      // → Should be included
+      'public/index.html': html`
+        <div class="content-['public/index.html']"></div>
+      `,
+      // Ignored by the `/*` in `.gitignore`
+      //
+      // → Should be ignored
+      'build/index.html': html`
+        <div class="content-['build/index.html']"></div>
+      `,
+      // Ignored by the `/*` in `.gitignore` and the default `node_modules` rules
+      //
+      // → Should be ignored
+      'node_modules/my-ui-lib/index.html': html`
+        <div
+          class="content-['node_modules/my-ui-lib/index.html']"
+        ></div>
+      `,
+    },
+  },
+  async ({ fs, exec }) => {
+    await exec('pnpm tailwindcss --input app/root.css --output dist/out.css')
+
+    await fs.expectFileToContain('dist/out.css', [
+      candidate`content-['app/index.html']`,
+      candidate`content-['public/index.html']`,
+    ])
+
+    await fs.expectFileNotToContain('dist/out.css', [
+      candidate`content-['build/index.html']`,
+      candidate`content-['node_modules/my-ui-lib/index.html']`,
+    ])
+  },
+)
+
+test(
+  '@source works with symlinks (referencing folder in current folder)',
+  {
+    fs: {
+      'package.json': json`
+        {
+          "dependencies": {
+            "tailwindcss": "workspace:^",
+            "@tailwindcss/cli": "workspace:^"
+          }
+        }
+      `,
+      'src/index.css': css`
+        @import 'tailwindcss/utilities' source(none);
+
+        /* Same as the previous test, but using symlinks instead */
+        @source '../lib';
+        @source not '../lib/ignored';
+        @source '../lib/ignored/except.html';
+      `,
+
+      'lib/keep/keep.html': html`<div class="content-['GOOD-1']"></div>`,
+      'vendor/ignored/ignored.html': html`<div class="content-['BAD-1']"></div>`,
+      'vendor/ignored/except.html': html`<div class="content-['GOOD-2']"></div>`,
+
+      // Symlink the ignored folder to another folder
+      'lib/ignored': 'symlink:../../vendor/ignored/',
+    },
+  },
+  async ({ fs, exec, expect }) => {
+    await exec('pnpm tailwindcss --input src/index.css --output dist/out.css')
+
+    expect(await fs.dumpFiles('./dist/*.css')).toMatchInlineSnapshot(`
+      "
+      --- ./dist/out.css ---
+      @layer properties;
+      .content-\\[\\'GOOD-1\\'\\] {
+        --tw-content: 'GOOD-1';
+        content: var(--tw-content);
+      }
+      .content-\\[\\'GOOD-2\\'\\] {
+        --tw-content: 'GOOD-2';
+        content: var(--tw-content);
+      }
+      @property --tw-content {
+        syntax: "*";
+        inherits: false;
+        initial-value: "";
+      }
+      @layer properties {
+        @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
+          *, ::before, ::after, ::backdrop {
+            --tw-content: "";
+          }
+        }
+      }
+      "
+    `)
+  },
+)
+
 test(
   'auto source detection disabled',
   {
@@ -2217,6 +2749,49 @@ test(
   },
 )
 
+test(
+  'suppress output by using the --silent flag',
+  {
+    fs: {
+      'package.json': json`
+        {
+          "dependencies": {
+            "tailwindcss": "workspace:^",
+            "@tailwindcss/cli": "workspace:^"
+          }
+        }
+      `,
+      'index.css': css` @import 'tailwindcss/utilities';`,
+      'index.html': html`<div class="flex"></div>`,
+    },
+  },
+  async ({ fs, exec, expect }) => {
+    let output = await exec('pnpm tailwindcss --input index.css --output dist/loud.css')
+    expect(output).toContain('Done in')
+
+    let silentOutput = await exec(
+      'pnpm tailwindcss --input index.css --output dist/silent.css --silent',
+    )
+    expect(silentOutput).not.toContain('Done in')
+    expect(silentOutput).not.toContain('tailwindcss v')
+
+    expect(await fs.dumpFiles('./dist/*.css')).toMatchInlineSnapshot(`
+      "
+      --- ./dist/loud.css ---
+      .flex {
+        display: flex;
+      }
+
+
+      --- ./dist/silent.css ---
+      .flex {
+        display: flex;
+      }
+      "
+    `)
+  },
+)
+
 test(
   'changes to CSS files should pick up new CSS variables (if any)',
   {
@@ -2320,8 +2895,8 @@ test(
       @layer theme, base, components, utilities;
       @layer theme {
         :root, :host {
-          --font-sans: ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
-          'Noto Color Emoji';
+          --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', 'Noto Sans', Arial,
+          sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
           --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New',
           monospace;
           --color-red-500: oklch(63.7% 0.237 25.331);
@@ -2340,7 +2915,7 @@ test(
           line-height: 1.5;
           -webkit-text-size-adjust: 100%;
           tab-size: 4;
-          font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji');
+          font-family: var(--default-font-family, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', 'Noto Sans', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji');
           font-feature-settings: var(--default-font-feature-settings, normal);
           font-variation-settings: var(--default-font-variation-settings, normal);
           -webkit-tap-highlight-color: transparent;
@@ -2392,7 +2967,7 @@ test(
           border-color: inherit;
           border-collapse: collapse;
         }
-        :-moz-focusring {
+        :-moz-focusring:where(:not(iframe)) {
           outline: auto;
         }
         progress {
diff --git a/integrations/cli/plugins.test.ts b/integrations/cli/plugins.test.ts
index c0f7c39c3..0b810c538 100644
--- a/integrations/cli/plugins.test.ts
+++ b/integrations/cli/plugins.test.ts
@@ -1,4 +1,4 @@
-import { candidate, css, html, json, test } from '../utils'
+import { candidate, css, html, json, test, ts } from '../utils'
 
 test(
   'builds the `@tailwindcss/typography` plugin utilities',
@@ -42,12 +42,86 @@ test(
 
     await fs.expectFileToContain('dist/out.css', [
       candidate`prose`,
-      ':where(h1):not(:where([class~="not-prose"],[class~="not-prose"] *))',
-      ':where(tbody td, tfoot td):not(:where([class~="not-prose"],[class~="not-prose"] *))',
+      ':where(h1):not(:where([class~="not-prose"], [class~="not-prose"] *))',
+      ':where(tbody td, tfoot td):not(:where([class~="not-prose"], [class~="not-prose"] *))',
     ])
   },
 )
 
+test(
+  'builds the `@tailwindcss/typography` plugin utilities with `@variant` usages',
+  {
+    fs: {
+      'package.json': json`
+        {
+          "dependencies": {
+            "@tailwindcss/typography": "^0.5.14",
+            "tailwindcss": "workspace:^",
+            "@tailwindcss/cli": "workspace:^"
+          }
+        }
+      `,
+      'index.html': html`
+        <div className="prose prose-custom">
+          <h1>Headline</h1>
+          <p>
+            Until now, trying to style an article, document, or blog post with Tailwind has been a
+            tedious task that required a keen eye for typography and a lot of complex custom CSS.
+          </p>
+        </div>
+      `,
+      'src/index.css': css`
+        @import 'tailwindcss/utilities';
+        @theme {
+          --breakpoint-sm: 640px;
+        }
+        @plugin '@tailwindcss/typography';
+        @config '../tailwind.config.js';
+        @custom-variant custom (&.custom);
+      `,
+      'tailwind.config.js': ts`
+        module.exports = {
+          theme: {
+            typography: ({ theme }) => ({
+              custom: {
+                css: {
+                  hr: {
+                    '--x': '1',
+                    '@variant sm:custom': {
+                      '--x': '2',
+                    },
+                  },
+                },
+              },
+            }),
+          },
+        }
+      `,
+    },
+  },
+  async ({ fs, exec, expect }) => {
+    await exec('pnpm tailwindcss --input src/index.css --output dist/out.css')
+
+    // We don't want to see `@variant` in the output
+    let contents = await fs.read('dist/out.css')
+    expect(contents).not.toContain('@variant')
+
+    expect(await fs.dumpFiles('dist/out.css')).toMatchInlineSnapshot(`
+      "
+      --- dist/out.css ---
+      .prose-custom :where(hr):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
+        --x: 1;
+        @media (width >= 640px) {
+          &.custom {
+            --x: 2;
+          }
+        }
+      }
+      "
+    `)
+  },
+)
+
 test(
   'builds the `@tailwindcss/forms` plugin utilities',
   {
@@ -207,3 +281,88 @@ test(
     ])
   },
 )
+
+// https://github.com/tailwindlabs/tailwindcss/issues/15844
+test(
+  'builds CSS with a custom plugin compiled from TypeScript',
+  {
+    fs: {
+      'package.json': json`
+        {
+          "type": "module",
+          "dependencies": {
+            "tailwindcss": "workspace:^",
+            "@tailwindcss/cli": "workspace:^"
+          },
+          "devDependencies": {
+            "typescript": "^5.7.2"
+          }
+        }
+      `,
+      'tsconfig.json': json`
+        {
+          "compilerOptions": {
+            "target": "ES2022",
+            "module": "NodeNext",
+            "moduleResolution": "NodeNext",
+            "declaration": true,
+            "composite": true,
+            "rootDir": "./src",
+            "outDir": "./.build",
+            "skipLibCheck": true
+          },
+          "include": ["src/**/*.ts"]
+        }
+      `,
+      'index.html': html`
+        <div class="test-red"></div>
+      `,
+      'src/index.css': css`
+        @import 'tailwindcss';
+        @plugin '../.build/plugin.js';
+      `,
+      'src/plugin.ts': ts`
+        import plugin from 'tailwindcss/plugin'
+
+        export const typedPlugin = plugin(() => {
+          return ({ matchComponents }) => {
+            matchComponents(
+              {
+                test: (content: string) => ({
+                  color: content,
+                }),
+              },
+              {
+                values: {
+                  red: 'red',
+                },
+              },
+            )
+          }
+        })
+
+        export default plugin(({ matchComponents }) => {
+          matchComponents(
+            {
+              test: (content: string) => ({
+                color: content,
+              }),
+            },
+            {
+              values: {
+                red: 'red',
+              },
+            },
+          )
+        })
+      `,
+    },
+  },
+  async ({ fs, exec }) => {
+    // We expect that these commands don't crash:
+    await exec('pnpm tsc -b')
+    await exec('pnpm tailwindcss --input src/index.css --output dist/out.css')
+
+    await fs.expectFileToContain('dist/out.css', [candidate`test-red`])
+  },
+)
diff --git a/integrations/cli/standalone.test.ts b/integrations/cli/standalone.test.ts
index b378535c0..f84bf4511 100644
--- a/integrations/cli/standalone.test.ts
+++ b/integrations/cli/standalone.test.ts
@@ -1,6 +1,7 @@
+import nodeFs from 'node:fs/promises'
 import os from 'node:os'
 import path from 'node:path'
-import { candidate, css, html, js, json, test, ts } from '../utils'
+import { candidate, css, html, IS_WINDOWS, js, json, test, ts } from '../utils'
 
 const STANDALONE_BINARY = (() => {
   switch (os.platform()) {
@@ -15,6 +16,41 @@ const STANDALONE_BINARY = (() => {
   }
 })()
 
+test(
+  'does not scan itself for candidates',
+  {
+    fs: {
+      'package.json': json`
+        {
+          "dependencies": {}
+        }
+      `,
+      'src/index.css': css` @import 'tailwindcss'; `,
+    },
+  },
+  async ({ root, fs, exec }) => {
+    let sourceBinary = path.resolve(
+      __dirname,
+      `../../packages/@tailwindcss-standalone/dist/${STANDALONE_BINARY}`,
+    )
+    let binary = IS_WINDOWS ? 'tailwindcss.exe' : 'tailwindcss'
+    let localBinary = path.join(root, binary)
+    await nodeFs.copyFile(sourceBinary, localBinary)
+
+    if (!IS_WINDOWS) {
+      await nodeFs.chmod(localBinary, 0o755)
+    }
+
+    await exec(`${IS_WINDOWS ? binary : `./${binary}`} --input src/index.css --output dist/out.css`)
+
+    await fs.expectFileNotToContain('dist/out.css', [
+      candidate`flex`,
+      candidate`grid`,
+      candidate`underline`,
+    ])
+  },
+)
+
 test(
   'includes first-party plugins',
   {
diff --git a/integrations/oxide/wasm.test.ts b/integrations/oxide/wasm.test.ts
index ac2231672..2d63c707a 100644
--- a/integrations/oxide/wasm.test.ts
+++ b/integrations/oxide/wasm.test.ts
@@ -1,4 +1,4 @@
-import { css, js, json, test } from '../utils'
+import { css, js, json, test, yaml } from '../utils'
 
 // This test runs the wasm build using the `node:wasi` runtime.
 //
@@ -57,3 +57,187 @@ testFn(
     `)
   },
 )
+
+testFn(
+  '`@tailwindcss/oxide` falls back to the wasm build when no native binding is available',
+  {
+    fs: {
+      'package.json': json`
+        {
+          "dependencies": {
+            "@tailwindcss/oxide": "workspace:^"
+          }
+        }
+      `,
+      'pnpm-workspace.yaml': yaml`
+        # Trick pnpm in only supporting an architecture that @tailwindcss/oxide
+        # doesn't support, and therefore should fallback to the wasm version.
+        supportedArchitectures:
+          os:
+            - openbsd
+          cpu:
+            - x64
+      `,
+      'src/index.js': js`
+        const className = "content-['src/index.js']"
+        module.exports = { className }
+      `,
+      'index.mjs': js`
+        import { createRequire } from 'node:module'
+        import { join } from 'node:path'
+
+        let require = createRequire(import.meta.url)
+        let { Scanner } = require('@tailwindcss/oxide')
+
+        let loaded = Object.keys(require.cache)
+
+        let scanner = new Scanner({
+          sources: [
+            {
+              base: join(process.cwd(), 'src'),
+              pattern: '**/*',
+              negated: false,
+            },
+          ],
+        })
+
+        console.log(
+          JSON.stringify({
+            native: loaded.filter((file) => file.endsWith('.node')),
+            wasi: loaded.some((file) => file.endsWith('tailwindcss-oxide.wasi.cjs')),
+            candidates: scanner.scan(),
+          }),
+        )
+        process.exit()
+      `,
+    },
+  },
+  async ({ expect, exec }) => {
+    // Since vitest runs under `pnpm run`, pnpm's bin shims export a NODE_PATH
+    // that includes the repository's hidden hoist directory
+    // (`node_modules/.pnpm/node_modules`), which links every workspace package,
+    // including all native `@tailwindcss/oxide-*` bindings.
+    //
+    // Node uses `NODE_PATH` exactly when the local `node_modules` lookup fails,
+    // which would defeat the simulated unsupported platform, so clear it.
+    let output = await exec(`node index.mjs`, { env: { NODE_PATH: '' } })
+    let { native, wasi, candidates } = JSON.parse(output)
+
+    // No native binding was installed or loaded, ...
+    expect(native).toEqual([])
+
+    // ... the wasm32-wasi binding is what actually loaded, ...
+    expect(wasi).toBe(true)
+
+    // ... and scanning real files on disk works through it.
+    expect(candidates).toMatchInlineSnapshot(`
+      [
+        "className",
+        "const",
+        "content-['src/index.js']",
+        "exports",
+      ]
+    `)
+  },
+)
+
+testFn(
+  'the wasm build loads even when preopening the filesystem root is denied',
+  {
+    fs: {
+      'package.json': json`
+        {
+          "dependencies": {
+            "@tailwindcss/oxide": "workspace:^"
+          }
+        }
+      `,
+      'pnpm-workspace.yaml': yaml`
+        # Trick pnpm in only supporting an architecture that @tailwindcss/oxide
+        # doesn't support, and therefore should fallback to the wasm version.
+        supportedArchitectures:
+          os:
+            - openbsd
+          cpu:
+            - x64
+      `,
+      // The wasm bindings generated by `@napi-rs/cli` preopen the filesystem
+      // root, which sandboxed platforms (e.g. OpenHarmony, Android) deny with
+      // `UVWASI_EACCES`, making the wasm fallback fail to load on exactly the
+      // platforms that need it.
+      //
+      // We patch `@napi-rs/cli`'s templates to retry with narrower preopens
+      // (see `patches/@napi-rs__cli@3.7.4.patch`). Simulate such a sandbox by
+      // denying `/` preopens.
+      'preload.cjs': js`
+        const wasi = require('node:wasi')
+        const RealWASI = wasi.WASI
+
+        wasi.WASI = class WASI extends RealWASI {
+          constructor(options) {
+            if (options?.preopens?.['/'] !== undefined) {
+              const error = new Error('UVWASI_EACCES, uvwasi_init')
+              error.code = 'UVWASI_EACCES'
+              error.syscall = 'uvwasi_init'
+              throw error
+            }
+            super(options)
+          }
+        }
+      `,
+      'src/index.js': js`
+        const className = "content-['src/index.js']"
+        module.exports = { className }
+      `,
+      'index.mjs': js`
+        import { createRequire } from 'node:module'
+        import { join } from 'node:path'
+
+        let require = createRequire(import.meta.url)
+        let { Scanner } = require('@tailwindcss/oxide')
+
+        let loaded = Object.keys(require.cache)
+
+        let scanner = new Scanner({
+          sources: [
+            {
+              base: join(process.cwd(), 'src'),
+              pattern: '**/*',
+              negated: false,
+            },
+          ],
+        })
+
+        console.log(
+          JSON.stringify({
+            wasi: loaded.some((file) => file.endsWith('tailwindcss-oxide.wasi.cjs')),
+            candidates: scanner.scan(),
+          }),
+        )
+        process.exit()
+      `,
+    },
+  },
+  async ({ expect, exec }) => {
+    // See the note about NODE_PATH in the test above.
+    let output = await exec(`node --require ./preload.cjs index.mjs`, { env: { NODE_PATH: '' } })
+
+    // Only parse the first line, because Node prints an `ExperimentalWarning`
+    // about WASI to stderr, which `exec` appends to the output.
+    let { wasi, candidates } = JSON.parse(output.trim().split('\n')[0])
+
+    // The wasm32-wasi binding loaded despite `/` being denied, ...
+    expect(wasi).toBe(true)
+
+    // ... and scanning files under the current working directory still works
+    // through the narrower preopen.
+    expect(candidates).toMatchInlineSnapshot(`
+      [
+        "className",
+        "const",
+        "content-['src/index.js']",
+        "exports",
+      ]
+    `)
+  },
+)
diff --git a/integrations/package.json b/integrations/package.json
index 8c0d83543..ae337b5e4 100644
--- a/integrations/package.json
+++ b/integrations/package.json
@@ -3,8 +3,9 @@
   "version": "0.0.0",
   "private": true,
   "devDependencies": {
-    "dedent": "1.7.1",
+    "dedent": "catalog:",
     "fast-glob": "^3.3.3",
-    "source-map-js": "^1.2.1"
+    "source-map-js": "^1.2.1",
+    "yaml": "^2.9.0"
   }
 }
diff --git a/integrations/postcss/core-as-postcss-plugin.test.ts b/integrations/postcss/core-as-postcss-plugin.test.ts
index 0856210fe..839c80e7b 100644
--- a/integrations/postcss/core-as-postcss-plugin.test.ts
+++ b/integrations/postcss/core-as-postcss-plugin.test.ts
@@ -50,7 +50,7 @@ describe.each(Object.keys(variantConfig))('%s', (variant) => {
     async ({ exec, expect }) => {
       await expect(
         exec('pnpm postcss src/index.css --output dist/out.css', undefined, { ignoreStdErr: true }),
-      ).rejects.toThrowError(
+      ).rejects.toThrow(
         `It looks like you're trying to use \`tailwindcss\` directly as a PostCSS plugin. The PostCSS plugin has moved to a separate package, so to continue using Tailwind CSS with PostCSS you'll need to install \`@tailwindcss/postcss\` and update your PostCSS configuration.`,
       )
     },
diff --git a/integrations/turbopack/loader.test.ts b/integrations/turbopack/loader.test.ts
new file mode 100644
index 000000000..755cd60df
--- /dev/null
+++ b/integrations/turbopack/loader.test.ts
@@ -0,0 +1,83 @@
+import { candidate, css, fetchStyles, js, json, jsx, retryAssertion, test } from '../utils'
+
+test(
+  '@tailwindcss/turbopack loader (dev)',
+  {
+    timeout: 120_000,
+    fs: {
+      'package.json': json`
+        {
+          "dependencies": {
+            "next": "^16.2.7",
+            "react": "^19.2.7",
+            "react-dom": "^19.2.7",
+            "tailwindcss": "workspace:^",
+            "@tailwindcss/turbopack": "workspace:^"
+          }
+        }
+      `,
+      'next.config.mjs': js`
+        export default {
+          turbopack: {
+            rules: {
+              '*.css': {
+                loaders: ['@tailwindcss/turbopack'],
+                as: '*.css',
+              },
+            },
+          },
+        }
+      `,
+      'app/layout.js': jsx`
+        import './globals.css'
+
+        export default function RootLayout({ children }) {
+          return (
+            <html>
+              <body>{children}</body>
+            </html>
+          )
+        }
+      `,
+      'app/page.js': jsx`
+        export default function Page() {
+          return <div className="flex">Hello, Next.js!</div>
+        }
+      `,
+      'app/globals.css': css` @import 'tailwindcss'; `,
+    },
+  },
+  async ({ fs, spawn, expect }) => {
+    let process = await spawn('pnpm next dev')
+
+    let url = ''
+    await process.onStdout((message) => {
+      let match = /Local:\s*(http.*)/.exec(message)
+      if (match) url = match[1]
+      return Boolean(url)
+    })
+
+    await process.onStdout((message) => message.includes('Ready in'))
+
+    await retryAssertion(async () => {
+      let styles = await fetchStyles(url)
+      expect(styles).toContain(candidate`flex`)
+      expect(styles).not.toContain(candidate`underline`)
+    })
+
+    await fs.write(
+      'app/page.js',
+      jsx`
+        export default function Page() {
+          return <div className="flex underline">Hello, Next.js!</div>
+        }
+      `,
+    )
+
+    await retryAssertion(async () => {
+      let styles = await fetchStyles(url)
+      expect(styles).toContain(candidate`flex`)
+      expect(styles).toContain(candidate`underline`)
+    })
+  },
+)
diff --git a/integrations/upgrade/index.test.ts b/integrations/upgrade/index.test.ts
index 46b657694..efac411db 100644
--- a/integrations/upgrade/index.test.ts
+++ b/integrations/upgrade/index.test.ts
@@ -1,6 +1,6 @@
 import path from 'node:path'
 import { isRepoDirty } from '../../packages/@tailwindcss-upgrade/src/utils/git'
-import { candidate, css, html, js, json, test, ts, yaml } from '../utils'
+import { candidate, css, html, js, json, test, ts, txt, yaml } from '../utils'
 
 test(
   'error when no CSS file with @tailwind is used',
@@ -28,7 +28,7 @@ test(
     },
   },
   async ({ fs, exec, expect }) => {
-    let output = await exec('npx @tailwindcss/upgrade')
+    let output = await exec('pnpm exec upgrade')
     expect(output).toContain('Cannot find any CSS files that reference Tailwind CSS.')
 
     // Files should not be modified
@@ -100,7 +100,7 @@ test(
     },
   },
   async ({ exec, fs, expect }) => {
-    await exec('npx @tailwindcss/upgrade')
+    await exec('pnpm exec upgrade')
 
     expect(await fs.dumpFiles('./src/**/*.{css,html}')).toMatchInlineSnapshot(`
       "
@@ -158,7 +158,7 @@ test(
     })
 
     // Ensure the v4 project compiles correctly
-    await exec('npx tailwindcss --input src/input.css --output dist/out.css')
+    await exec('pnpm exec tailwindcss --input src/input.css --output dist/out.css')
 
     await fs.expectFileToContain('dist/out.css', [
       candidate`flex!`,
@@ -171,6 +171,57 @@ test(
   },
 )
 
+test(
+  'only migrates files matched by `config.content` when upgrading from v3 to v4',
+  {
+    fs: {
+      'package.json': json`
+        {
+          "dependencies": {
+            "tailwindcss": "^3",
+            "@tailwindcss/upgrade": "workspace:^"
+          }
+        }
+      `,
+      'tailwind.config.js': js`
+        /** @type {import('tailwindcss').Config} */
+        module.exports = {
+          content: ['./src/**/*.html'],
+        }
+      `,
+      'src/index.html': html`
+        <div class="order-[0] bg-[--my-red]"></div>
+      `,
+      'src/input.css': css`
+        @tailwind base;
+        @tailwind components;
+        @tailwind utilities;
+      `,
+      'templates/email.php': html`
+        <div class="order-[0] bg-[--my-red]"></div>
+      `,
+      'notes/unrelated.txt': `order-[0] bg-[--my-red]`,
+    },
+    retry: 0,
+  },
+  async ({ exec, fs, expect }) => {
+    await exec('pnpm exec upgrade')
+
+    expect(await fs.dumpFiles('./**/*.{html,php,txt}')).toMatchInlineSnapshot(`
+      "
+      --- notes/unrelated.txt ---
+      order-[0] bg-[--my-red]
+
+      --- src/index.html ---
+      <div class="order-0 bg-(--my-red)"></div>
+
+      --- templates/email.php ---
+      <div class="order-[0] bg-[--my-red]"></div>
+      "
+    `)
+  },
+)
+
 test(
   `upgrades a v3 project with prefixes to v4`,
   {
@@ -212,7 +263,7 @@ test(
     },
   },
   async ({ exec, fs, expect }) => {
-    await exec('npx @tailwindcss/upgrade')
+    await exec('pnpm exec upgrade')
 
     expect(await fs.dumpFiles('./src/**/*.{css,html}')).toMatchInlineSnapshot(`
       "
@@ -284,7 +335,7 @@ test(
     },
   },
   async ({ exec, fs, expect }) => {
-    await exec('npx @tailwindcss/upgrade')
+    await exec('pnpm exec upgrade')
 
     expect(await fs.dumpFiles('./src/**/*.css')).toMatchInlineSnapshot(`
       "
@@ -356,7 +407,7 @@ test(
     },
   },
   async ({ exec, fs, expect }) => {
-    await exec('npx @tailwindcss/upgrade')
+    await exec('pnpm exec upgrade')
 
     expect(await fs.dumpFiles('./src/**/*.css')).toMatchInlineSnapshot(`
       "
@@ -433,7 +484,7 @@ test(
     },
   },
   async ({ exec, fs, expect }) => {
-    await exec('npx @tailwindcss/upgrade')
+    await exec('pnpm exec upgrade')
 
     expect(await fs.dumpFiles('./src/**/*.css')).toMatchInlineSnapshot(`
       "
@@ -536,7 +587,7 @@ test(
     },
   },
   async ({ exec, fs, expect }) => {
-    await exec('npx @tailwindcss/upgrade')
+    await exec('pnpm exec upgrade')
 
     expect(await fs.dumpFiles('./src/**/*.css')).toMatchInlineSnapshot(`
       "
@@ -644,7 +695,7 @@ test(
     },
   },
   async ({ exec, fs, expect }) => {
-    await exec('npx @tailwindcss/upgrade')
+    await exec('pnpm exec upgrade')
 
     await fs.expectFileToContain(
       'postcss.config.js',
@@ -715,7 +766,7 @@ test(
     },
   },
   async ({ exec, fs, expect }) => {
-    await exec('npx @tailwindcss/upgrade')
+    await exec('pnpm exec upgrade')
 
     let packageJsonContent = await fs.read('package.json')
     let packageJson = JSON.parse(packageJsonContent)
@@ -762,7 +813,7 @@ test(
     },
   },
   async ({ exec, fs, expect }) => {
-    await exec('npx @tailwindcss/upgrade')
+    await exec('pnpm exec upgrade')
 
     let packageJsonContent = await fs.read('package.json')
     let packageJson = JSON.parse(packageJsonContent)
@@ -814,7 +865,7 @@ test(
     },
   },
   async ({ exec, fs, expect }) => {
-    await exec('npx @tailwindcss/upgrade')
+    await exec('pnpm exec upgrade')
 
     await fs.expectFileToContain('src/index.css', css`@import 'tailwindcss';`)
     await fs.expectFileToContain(
@@ -890,7 +941,7 @@ test(
     },
   },
   async ({ exec, fs, expect }) => {
-    await exec('npx @tailwindcss/upgrade')
+    await exec('pnpm exec upgrade')
 
     await fs.expectFileToContain('src/index.css', css`@import 'tailwindcss';`)
     await fs.expectFileToContain(
@@ -957,7 +1008,7 @@ test(
     },
   },
   async ({ exec, fs, expect }) => {
-    await exec('npx @tailwindcss/upgrade')
+    await exec('pnpm exec upgrade')
 
     expect(await fs.dumpFiles('./src/**/*.html')).toMatchInlineSnapshot(`
       "
@@ -1004,7 +1055,7 @@ test(
     },
   },
   async ({ exec, fs, expect }) => {
-    await exec('npx @tailwindcss/upgrade')
+    await exec('pnpm exec upgrade')
 
     expect(await fs.dumpFiles('./src/**/*.html')).toMatchInlineSnapshot(`
       "
@@ -1048,7 +1099,7 @@ test(
     },
   },
   async ({ exec, fs, expect }) => {
-    await exec('npx @tailwindcss/upgrade --force')
+    await exec('pnpm exec upgrade --force')
 
     expect(await fs.dumpFiles('./src/**/*.css')).toMatchInlineSnapshot(`
       "
@@ -1118,9 +1169,10 @@ test(
         }
       `,
     },
+    retry: 0,
   },
   async ({ exec, fs, expect }) => {
-    await exec('npx @tailwindcss/upgrade --force')
+    await exec('pnpm exec upgrade --force')
 
     expect(await fs.dumpFiles('./src/**/*.css')).toMatchInlineSnapshot(`
       "
@@ -1229,9 +1281,10 @@ test(
         }
       `,
     },
+    retry: 0,
   },
   async ({ exec, fs, expect }) => {
-    await exec('npx @tailwindcss/upgrade --force')
+    await exec('pnpm exec upgrade --force')
 
     expect(await fs.dumpFiles('./src/**/*.css')).toMatchInlineSnapshot(`
       "
@@ -1364,7 +1417,7 @@ test(
     },
   },
   async ({ exec, fs, expect }) => {
-    let output = await exec('npx @tailwindcss/upgrade --force')
+    let output = await exec('pnpm exec upgrade --force')
 
     expect(output).toMatch(
       /You have one or more stylesheets that are imported into a utility layer and non-utility layer./,
@@ -1488,7 +1541,7 @@ test(
     },
   },
   async ({ exec, fs, expect }) => {
-    await exec('npx @tailwindcss/upgrade --force')
+    await exec('pnpm exec upgrade --force')
 
     expect(await fs.dumpFiles('./src/**/*.{html,css}')).toMatchInlineSnapshot(`
       "
@@ -1713,8 +1766,8 @@ test(
     },
   },
   async ({ exec, expect }) => {
-    let output = await exec('npx @tailwindcss/upgrade --force', {}, { ignoreStdErr: true }).catch(
-      (e) => e.toString(),
+    let output = await exec('pnpm exec upgrade --force', {}, { ignoreStdErr: true }).catch((e) =>
+      e.toString(),
     )
 
     expect(output).toMatch('Could not determine configuration file for:')
@@ -1785,7 +1838,7 @@ test(
     },
   },
   async ({ exec, fs, expect }) => {
-    await exec('npx @tailwindcss/upgrade --force')
+    await exec('pnpm exec upgrade --force')
 
     expect(await fs.dumpFiles('./src/**/*.{html,css}')).toMatchInlineSnapshot(`
       "
@@ -1921,7 +1974,7 @@ test(
     },
   },
   async ({ exec, fs, expect }) => {
-    await exec('npx @tailwindcss/upgrade --force')
+    await exec('pnpm exec upgrade --force')
 
     expect(await fs.dumpFiles('./src/**/*.{html,css}')).toMatchInlineSnapshot(`
       "
@@ -2041,7 +2094,7 @@ test(
     },
   },
   async ({ exec, fs, expect }) => {
-    await exec('npx @tailwindcss/upgrade --force')
+    await exec('pnpm exec upgrade --force')
 
     expect(await fs.dumpFiles('./src/**/*.{html,css}')).toMatchInlineSnapshot(`
       "
@@ -2121,7 +2174,7 @@ test(
     },
   },
   async ({ exec, fs, expect }) => {
-    await exec('npx @tailwindcss/upgrade --force')
+    await exec('pnpm exec upgrade --force')
 
     expect(await fs.dumpFiles('./src/**/*.css')).toMatchInlineSnapshot(`
       "
@@ -2203,9 +2256,10 @@ test(
         }
       `,
     },
+    retry: 0,
   },
   async ({ exec, fs, expect }) => {
-    await exec('npx @tailwindcss/upgrade --force')
+    await exec('pnpm exec upgrade --force')
 
     expect(await fs.dumpFiles('./src/**/*.css')).toMatchInlineSnapshot(`
       "
@@ -2259,7 +2313,7 @@ test(
     },
   },
   async ({ exec, fs, expect }) => {
-    await exec('npx @tailwindcss/upgrade --force')
+    await exec('pnpm exec upgrade --force')
 
     let pkg = JSON.parse(await fs.read('package.json'))
 
@@ -2338,7 +2392,7 @@ test(
     },
   },
   async ({ exec, fs, expect }) => {
-    await exec('npx @tailwindcss/upgrade --force')
+    await exec('pnpm exec upgrade --force')
 
     // Files should not be modified
     expect(await fs.dumpFiles('./*.{js,css,html}')).toMatchInlineSnapshot(`
@@ -2436,7 +2490,7 @@ test(
     },
   },
   async ({ exec, fs, expect }) => {
-    await exec('npx @tailwindcss/upgrade --force')
+    await exec('pnpm exec upgrade --force')
 
     // Files should not be modified
     expect(await fs.dumpFiles('./*.{js,css,html,tsx}')).toMatchInlineSnapshot(`
@@ -2503,7 +2557,7 @@ test(
         @import './utilities.css';
         @import './generated/ignore-me.css';
       `,
-      'src/generated/.gitignore': `
+      'src/generated/.gitignore': txt`
         *
         !.gitignore
       `,
@@ -2543,7 +2597,7 @@ test(
     },
   },
   async ({ exec, fs, expect }) => {
-    await exec('npx @tailwindcss/upgrade ./src/index.css')
+    await exec('pnpm exec upgrade ./src/index.css')
 
     expect(await fs.dumpFiles('./src/**/*.{css,html}')).toMatchInlineSnapshot(`
       "
@@ -2669,7 +2723,7 @@ test(
     },
   },
   async ({ exec, fs, expect }) => {
-    await exec('npx @tailwindcss/upgrade')
+    await exec('pnpm exec upgrade')
 
     expect(await fs.dumpFiles('./src/**/*.{css,html}')).toMatchInlineSnapshot(`
       "
@@ -2682,8 +2736,8 @@ test(
           text-red-500/10
           text-red-500/semitransparent
           text-red-500/transparent
-          text-red-500/50
-          text-red-500/50.5
+          text-red-500/semitransparent
+          text-red-500/50.50
           text-red-500/50.50
           text-red-500/50%
           text-red-500/100%"
@@ -2755,7 +2809,7 @@ test(
     },
   },
   async ({ exec, fs, expect }) => {
-    await exec('npx @tailwindcss/upgrade')
+    await exec('pnpm exec upgrade')
 
     expect(await fs.dumpFiles('./src/**/*.{css,html}')).toMatchInlineSnapshot(`
       "
@@ -2763,7 +2817,7 @@ test(
       <div class="ring-3"></div>
 
       --- ./src/input.css ---
-      @import 'tailwindcss';
+      @import 'tailwindcss';
 
       /*
         The default border color has changed to \`currentcolor\` in Tailwind CSS v4,
@@ -2823,7 +2877,7 @@ test(
     },
   },
   async ({ exec, root, fs, expect }) => {
-    await exec('npx @tailwindcss/upgrade')
+    await exec('pnpm exec upgrade')
 
     let before = await fs.dumpFiles('./src/**/*.{css,html}')
     expect(before).toMatchInlineSnapshot(`
@@ -2865,7 +2919,7 @@ test(
     }
 
     // Run the upgrade again
-    let output = await exec('npx @tailwindcss/upgrade')
+    let output = await exec('pnpm exec upgrade')
     expect(output).toContain('No changes were made to your repository')
 
     let after = await fs.dumpFiles('./src/**/*.{css,html}')
@@ -2944,7 +2998,7 @@ test(
     },
   },
   async ({ exec, fs, expect }) => {
-    await exec('npx @tailwindcss/upgrade')
+    await exec('pnpm exec upgrade')
 
     expect(await fs.dumpFiles('./src/**/*.{css,html}')).toMatchInlineSnapshot(`
       "
@@ -2972,6 +3026,202 @@ test(
   },
 )
 
+test(
+  'v4 ignores .env files during template migration',
+  {
+    fs: {
+      'package.json': json`
+        {
+          "dependencies": {
+            "tailwindcss": "^4",
+            "@tailwindcss/upgrade": "workspace:^"
+          }
+        }
+      `,
+      'src/app.css': css`@import 'tailwindcss';`,
+      'src/index.html': html`
+        <div class="order-[0]"></div>
+      `,
+      'src/.env': `TW_TEST_CLASS=order-[0]`,
+      'src/.env.production': `TW_TEST_CLASS=order-[0]`,
+    },
+  },
+  async ({ exec, fs, expect }) => {
+    await exec('pnpm exec upgrade')
+
+    expect(await fs.dumpFiles('./src/**/{*,.env,.env.*}')).toMatchInlineSnapshot(`
+      "
+      --- ./src/index.html ---
+      <div class="order-0"></div>
+
+      --- ./src/.env ---
+      TW_TEST_CLASS=order-[0]
+
+      --- ./src/.env.production ---
+      TW_TEST_CLASS=order-[0]
+
+      --- ./src/app.css ---
+      @import 'tailwindcss';
+      "
+    `)
+  },
+)
+
+test(
+  'v4 linked configs respect `content` and still ignore gitignored files',
+  {
+    fs: {
+      'package.json': json`
+        {
+          "dependencies": {
+            "tailwindcss": "^4",
+            "@tailwindcss/upgrade": "workspace:^"
+          }
+        }
+      `,
+      'tailwind.config.js': js`
+        /** @type {import('tailwindcss').Config} */
+        module.exports = {
+          content: ['./src/*.html', './src/*.less'],
+        }
+      `,
+      'src/app.css': css`
+        @import 'tailwindcss';
+        @config '../tailwind.config.js';
+      `,
+
+      // Ignore all .html files
+      'src/.gitignore': txt`
+        *.html
+      `,
+
+      // HTML files are in .gitignore, even though they are explicitly mentioned
+      // in the `content` array. Still ignore them
+      'src/do-not-migrate-me.html': html`
+        <div class="order-[0]"></div>
+      `,
+
+      // Should be picked up by auto-content detection
+      'templates/migrate-me.php': html`
+        <div class="order-[0]"></div>
+      `,
+
+      // Does not get picked up by auto content detection (because it's a less
+      // file), but was explicitly listed in the `content` array.
+      //
+      // A bit of a hacky way, I admit, but it allows us to differentiate
+      // between git ignored files, auto content detection and explicitly listed
+      // files.
+      'src/migrate-me.less': html`
+        <div class="order-[0]"></div>
+      `,
+    },
+  },
+  async ({ exec, fs, expect }) => {
+    await exec('pnpm exec upgrade')
+
+    expect(await fs.dumpFiles('./{src,templates}/**/*')).toMatchInlineSnapshot(`
+      "
+      --- ./src/app.css ---
+      @import 'tailwindcss';
+      @config '../tailwind.config.js';
+
+      --- ./src/do-not-migrate-me.html ---
+      <div class="order-[0]"></div>
+
+      --- ./src/migrate-me.less ---
+      <div class="order-0"></div>
+
+      --- ./templates/migrate-me.php ---
+      <div class="order-0"></div>
+      "
+    `)
+  },
+)
+
+test(
+  'interrupting template migration does not truncate files',
+  {
+    timeout: 180_000,
+    fs: {
+      'package.json': json`
+        {
+          "dependencies": {
+            "tailwindcss": "^4",
+            "@tailwindcss/upgrade": "workspace:^"
+          }
+        }
+      `,
+      'src/app.css': css` @import 'tailwindcss'; `,
+      'src/index.html': html`
+        <div class="order-[0]"></div>
+      `,
+      'hook.cjs': js`
+        let fs = require('node:fs/promises')
+        let path = require('node:path')
+        let originalWriteFile = fs.writeFile.bind(fs)
+
+        fs.writeFile = async (file, contents, ...rest) => {
+          // Mimic a bad write
+          await originalWriteFile(file, '') // As-if we truncated first
+          console.error('__TRUNCATED_TARGET__')
+          await new Promise((r) => setTimeout(r, 50)) // Wait 50ms to allow us to kill the process
+          await originalWriteFile(file, contents, ...rest) // Write the actual contents
+        }
+      `,
+      'src/keep.php': `
+        <?php
+
+        return [
+          'keep' => 'this file should never be truncated',
+        ];
+      `,
+    },
+  },
+  async ({ spawn, fs, expect }) => {
+    let repeatedCandidates = Array.from(
+      { length: 250 },
+      () => '<div class="order-[0]"></div>',
+    ).join('\n')
+
+    for (let i = 0; i < 100; i++) {
+      await fs.write(
+        `src/templates/template-${i}.php`,
+        `<?php\n\n${repeatedCandidates}\n\nreturn ['template' => ${i}];\n`,
+      )
+    }
+
+    let originalKeepFile = await fs.read('src/keep.php')
+    let originalTemplate = await fs.read('src/templates/template-0.php')
+
+    // NOTE: This test intentionally keeps `npx` instead of `pnpm exec`. It uses
+    // a `NODE_OPTIONS` hook that overrides `fs.writeFile` to simulate a bad
+    // write, and `pnpm exec` may write a bin shim on startup which would trip
+    // that hook before template migration begins.
+    let process = await spawn('npx @tailwindcss/upgrade --force', {
+      env: {
+        NODE_OPTIONS: '--require=./hook.cjs',
+      },
+    })
+
+    // We're only interested once we start migrating the templates
+    await process.onStderr((message) => message.includes('Migrating templates'))
+
+    // Wait for the trigger that we are mid-write
+    await process.onStderr((message) => message === '__TRUNCATED_TARGET__')
+
+    // Kill the process
+    await process.dispose()
+
+    expect(await fs.read('src/keep.php')).toBe(originalKeepFile)
+    expect(await fs.read('src/templates/template-0.php')).toBe(originalTemplate)
+
+    for (let [file, contents] of await fs.glob('src/**/*.{html,php,css}')) {
+      expect(contents.trim(), `${file} should not be empty after interruption`).not.toBe('')
+    }
+  },
+)
+
 test(
   'upgrades can run in a pnpm workspace',
   {
@@ -3015,7 +3265,7 @@ test(
     },
   },
   async ({ root, exec, fs, expect }) => {
-    let stdout = await exec('npx @tailwindcss/upgrade', {
+    let stdout = await exec('pnpm exec upgrade', {
       cwd: path.join(root, 'project-a'),
     })
 
@@ -3089,7 +3339,7 @@ test(
     },
   },
   async ({ exec, fs, expect }) => {
-    let stdout = await exec('npx @tailwindcss/upgrade')
+    let stdout = await exec('pnpm exec upgrade')
 
     expect(stdout).not.toContain(
       'Running this command will add the dependency to the workspace root',
@@ -3121,6 +3371,61 @@ test(
   },
 )
 
+// https://github.com/tailwindlabs/tailwindcss/issues/20328
+test(
+  'ignored files should not be touched when upgrading from a nested directory',
+  {
+    fs: {
+      'pnpm-workspace.yaml': yaml`
+        #
+        packages:
+          - packages/*
+      `,
+      'package.json': json`
+        {
+          "name": "root",
+          "private": true
+        }
+      `,
+      'packages/css/package.json': json`
+        {
+          "name": "css-pkg",
+          "private": true,
+          "devDependencies": {
+            "tailwindcss": "^4",
+            "@tailwindcss/upgrade": "workspace:^"
+          }
+        }
+      `,
+      'packages/css/src/input.css': css`
+        @import 'tailwindcss/utilities.css' layer(utilities) source(none);
+      `,
+      'packages/css/src/index.html': html`<div class="flex text-red-500">Hi</div>`,
+
+      // Ensure files/folders ignored by a `.gitignore` in the root take effect
+      // when executing the upgrade tool from a sub-package.
+      '.gitignore': txt`
+        node_modules/
+      `,
+    },
+  },
+  async ({ root, exec, fs, expect }) => {
+    await exec('git init', { cwd: root })
+
+    await exec('pnpm exec upgrade --force', {
+      cwd: path.join(root, 'packages/css'),
+    })
+
+    expect(await fs.dumpFiles('packages/css/node_modules/tailwindcss/utilities.css'))
+      .toMatchInlineSnapshot(`
+        "
+        --- packages/css/node_modules/tailwindcss/utilities.css ---
+        @tailwind utilities;
+        "
+    `)
+  },
+)
+
 test(
   'upgrade <style> blocks carefully',
   {
@@ -3165,7 +3470,7 @@ test(
     },
   },
   async ({ exec, fs, expect }) => {
-    await exec('npx @tailwindcss/upgrade')
+    await exec('pnpm exec upgrade')
 
     expect(await fs.dumpFiles('./src/**/*.{css,vue}')).toMatchInlineSnapshot(`
       "
diff --git a/integrations/upgrade/js-config.test.ts b/integrations/upgrade/js-config.test.ts
index 450d8254c..cab0d3d62 100644
--- a/integrations/upgrade/js-config.test.ts
+++ b/integrations/upgrade/js-config.test.ts
@@ -1,6 +1,6 @@
 import path from 'node:path'
 import { describe } from 'vitest'
-import { css, html, json, test, ts } from '../utils'
+import { css, html, json, test, ts, txt } from '../utils'
 
 test(
   `upgrade JS config files with flat theme values, darkMode, and content fields`,
@@ -164,7 +164,7 @@ test(
     },
   },
   async ({ exec, fs, expect }) => {
-    await exec('npx @tailwindcss/upgrade')
+    await exec('pnpm exec upgrade')
 
     expect(await fs.dumpFiles('src/**/*.{css,js,html}')).toMatchInlineSnapshot(`
       "
@@ -322,6 +322,105 @@ test(
   },
 )
 
+test(
+  'skips gitignored template files even when they are explicitly referenced in `content`',
+  {
+    fs: {
+      'package.json': json`
+        {
+          "dependencies": {
+            "tailwindcss": "^3",
+            "@tailwindcss/upgrade": "workspace:^"
+          }
+        }
+      `,
+      '.gitignore': txt`
+        node_modules
+        src/ignored
+      `,
+      'tailwind.config.ts': ts`
+        import { type Config } from 'tailwindcss'
+
+        module.exports = {
+          content: [
+            './src/migrate-me.html',
+            './src/ignored/do-not-migrate-me.html',
+            './node_modules/my-external-lib/template.html',
+          ],
+          theme: {},
+          plugins: [],
+        } satisfies Config
+      `,
+      'src/input.css': css`
+        @tailwind base;
+        @tailwind components;
+        @tailwind utilities;
+      `,
+      'src/migrate-me.html': html`
+        <div class="order-[0]"></div>
+      `,
+      'src/ignored/do-not-migrate-me.html': html`
+        <div class="order-[0]"></div>
+      `,
+      'node_modules/my-external-lib/template.html': html`
+        <div
+          class="order-[0]"
+        ></div>
+      `,
+    },
+  },
+  async ({ exec, fs, expect }) => {
+    await exec('pnpm exec upgrade')
+
+    expect(
+      await fs.dumpFiles(
+        '{src/**/*.{css,html},node_modules/my-external-lib/template.html,.gitignore}',
+      ),
+    ).toMatchInlineSnapshot(`
+      "
+      --- .gitignore ---
+      node_modules
+      src/ignored
+
+      --- src/input.css ---
+      @import 'tailwindcss';
+
+      @source './ignored/do-not-migrate-me.html';
+      @source '../node_modules/my-external-lib/template.html';
+
+      /*
+        The default border color has changed to \`currentcolor\` in Tailwind CSS v4,
+        so we've added these compatibility styles to make sure everything still
+        looks the same as it did with Tailwind CSS v3.
+
+        If we ever want to remove these styles, we need to add an explicit border
+        color utility to any element that depends on these defaults.
+      */
+      @layer base {
+        *,
+        ::after,
+        ::before,
+        ::backdrop,
+        ::file-selector-button {
+          border-color: var(--color-gray-200, currentcolor);
+        }
+      }
+
+      --- src/migrate-me.html ---
+      <div class="order-0"></div>
+
+      --- node_modules/my-external-lib/template.html ---
+      <div
+        class="order-[0]"
+      ></div>
+
+      --- src/ignored/do-not-migrate-me.html ---
+      <div class="order-[0]"></div>
+      "
+    `)
+  },
+)
+
 test(
   'upgrades JS config files with plugins',
   {
@@ -385,7 +484,7 @@ test(
     },
   },
   async ({ exec, fs, expect }) => {
-    await exec('npx @tailwindcss/upgrade')
+    await exec('pnpm exec upgrade')
 
     expect(await fs.dumpFiles('src/**/*.css')).toMatchInlineSnapshot(`
       "
@@ -487,7 +586,7 @@ test(
     },
   },
   async ({ exec, fs, expect }) => {
-    await exec('npx @tailwindcss/upgrade')
+    await exec('pnpm exec upgrade')
 
     expect(await fs.dumpFiles('src/**/*.{css,ts}')).toMatchInlineSnapshot(`
       "
@@ -495,17 +594,17 @@ test(
       @import 'tailwindcss';
 
       @theme {
-        --color-gray-50: oklch(98.5% 0 0);
-        --color-gray-100: oklch(97% 0 0);
-        --color-gray-200: oklch(92.2% 0 0);
-        --color-gray-300: oklch(87% 0 0);
-        --color-gray-400: oklch(70.8% 0 0);
-        --color-gray-500: oklch(55.6% 0 0);
-        --color-gray-600: oklch(43.9% 0 0);
-        --color-gray-700: oklch(37.1% 0 0);
-        --color-gray-800: oklch(26.9% 0 0);
-        --color-gray-900: oklch(20.5% 0 0);
-        --color-gray-950: oklch(14.5% 0 0);
+        --color-gray-50: oklch(98.5% 0 none);
+        --color-gray-100: oklch(97% 0 none);
+        --color-gray-200: oklch(92.2% 0 none);
+        --color-gray-300: oklch(87% 0 none);
+        --color-gray-400: oklch(70.8% 0 none);
+        --color-gray-500: oklch(55.6% 0 none);
+        --color-gray-600: oklch(43.9% 0 none);
+        --color-gray-700: oklch(37.1% 0 none);
+        --color-gray-800: oklch(26.9% 0 none);
+        --color-gray-900: oklch(20.5% 0 none);
+        --color-gray-950: oklch(14.5% 0 none);
       }
 
       /*
@@ -573,7 +672,7 @@ test(
     },
   },
   async ({ exec, fs, expect }) => {
-    await exec('npx @tailwindcss/upgrade')
+    await exec('pnpm exec upgrade')
 
     expect(await fs.dumpFiles('src/**/*.css')).toMatchInlineSnapshot(`
       "
@@ -651,7 +750,7 @@ test(
     },
   },
   async ({ exec, fs, expect }) => {
-    await exec('npx @tailwindcss/upgrade')
+    await exec('pnpm exec upgrade')
 
     expect(await fs.dumpFiles('src/**/*.css')).toMatchInlineSnapshot(`
       "
@@ -725,7 +824,7 @@ test(
     },
   },
   async ({ exec, fs, expect }) => {
-    await exec('npx @tailwindcss/upgrade')
+    await exec('pnpm exec upgrade')
 
     expect(await fs.dumpFiles('src/**/*.css')).toMatchInlineSnapshot(`
       "
@@ -835,7 +934,7 @@ test(
     },
   },
   async ({ exec, fs, expect }) => {
-    await exec('npx @tailwindcss/upgrade')
+    await exec('pnpm exec upgrade')
 
     expect(await fs.dumpFiles('project-{a,b}/**/*.{css,ts}')).toMatchInlineSnapshot(`
       "
@@ -933,7 +1032,7 @@ test(
     },
   },
   async ({ root, exec, fs, expect }) => {
-    await exec('npx @tailwindcss/upgrade', {
+    await exec('pnpm exec upgrade', {
       cwd: path.join(root, 'frontend'),
     })
 
@@ -1020,7 +1119,7 @@ test(
     },
   },
   async ({ exec, fs, expect }) => {
-    await exec('npx @tailwindcss/upgrade')
+    await exec('pnpm exec upgrade')
 
     expect(await fs.dumpFiles('src/*.css')).toMatchInlineSnapshot(`
       "
@@ -1095,7 +1194,7 @@ test(
     },
   },
   async ({ exec, fs, expect }) => {
-    await exec('npx @tailwindcss/upgrade')
+    await exec('pnpm exec upgrade')
 
     expect(await fs.dumpFiles('src/*.css')).toMatchInlineSnapshot(`
       "
@@ -1171,7 +1270,7 @@ test(
     },
   },
   async ({ exec, fs, expect }) => {
-    await exec('npx @tailwindcss/upgrade')
+    await exec('pnpm exec upgrade')
 
     expect(await fs.dumpFiles('src/*.css')).toMatchInlineSnapshot(`
       "
@@ -1247,7 +1346,7 @@ describe('border compatibility', () => {
       },
     },
     async ({ exec, fs, expect }) => {
-      await exec('npx @tailwindcss/upgrade')
+      await exec('pnpm exec upgrade')
 
       expect(await fs.dumpFiles('src/**/*.css')).toMatchInlineSnapshot(`
         "
@@ -1309,7 +1408,7 @@ describe('border compatibility', () => {
       },
     },
     async ({ exec, fs, expect }) => {
-      await exec('npx @tailwindcss/upgrade')
+      await exec('pnpm exec upgrade')
 
       expect(await fs.dumpFiles('src/**/*.css')).toMatchInlineSnapshot(`
         "
@@ -1371,7 +1470,7 @@ describe('border compatibility', () => {
       },
     },
     async ({ exec, fs, expect }) => {
-      await exec('npx @tailwindcss/upgrade')
+      await exec('pnpm exec upgrade')
 
       expect(await fs.dumpFiles('src/**/*.css')).toMatchInlineSnapshot(`
         "
@@ -1410,7 +1509,7 @@ describe('border compatibility', () => {
       },
     },
     async ({ exec, fs, expect }) => {
-      await exec('npx @tailwindcss/upgrade')
+      await exec('pnpm exec upgrade')
 
       expect(await fs.dumpFiles('src/**/*.css')).toMatchInlineSnapshot(`
         "
@@ -1481,7 +1580,7 @@ describe('border compatibility', () => {
       },
     },
     async ({ exec, fs, expect }) => {
-      await exec('npx @tailwindcss/upgrade')
+      await exec('pnpm exec upgrade')
 
       expect(await fs.dumpFiles('src/**/*.css')).toMatchInlineSnapshot(`
         "
@@ -1584,7 +1683,7 @@ describe('border compatibility', () => {
       },
     },
     async ({ exec, fs, expect }) => {
-      await exec('npx @tailwindcss/upgrade')
+      await exec('pnpm exec upgrade')
 
       expect(await fs.dumpFiles('src/**/*.{css,html}')).toMatchInlineSnapshot(`
         "
@@ -1694,7 +1793,7 @@ describe('border compatibility', () => {
       },
     },
     async ({ exec, fs, expect }) => {
-      await exec('npx @tailwindcss/upgrade')
+      await exec('pnpm exec upgrade')
 
       expect(await fs.dumpFiles('src/**/*.{css,html}')).toMatchInlineSnapshot(`
         "
@@ -1796,7 +1895,7 @@ describe('border compatibility', () => {
       },
     },
     async ({ exec, fs, expect }) => {
-      await exec('npx @tailwindcss/upgrade')
+      await exec('pnpm exec upgrade')
 
       expect(await fs.dumpFiles('src/**/*.{css,html}')).toMatchInlineSnapshot(`
         "
@@ -1894,7 +1993,7 @@ test(
     },
   },
   async ({ exec, fs, expect }) => {
-    await exec('npx @tailwindcss/upgrade')
+    await exec('pnpm exec upgrade')
 
     expect(await fs.dumpFiles('src/**/*.css')).toMatchInlineSnapshot(`
       "
@@ -1965,7 +2064,7 @@ test(
     },
   },
   async ({ exec, fs, expect }) => {
-    await exec('npx @tailwindcss/upgrade')
+    await exec('pnpm exec upgrade')
 
     expect(await fs.dumpFiles('src/**/*.css')).toMatchInlineSnapshot(`
       "
@@ -2042,7 +2141,7 @@ test(
     },
   },
   async ({ exec, fs, expect }) => {
-    await exec('npx @tailwindcss/upgrade')
+    await exec('pnpm exec upgrade')
 
     expect(await fs.dumpFiles('src/**/*.css')).toMatchInlineSnapshot(`
       "
diff --git a/integrations/upgrade/upgrade-errors.test.ts b/integrations/upgrade/upgrade-errors.test.ts
index 6733801e0..fdc60828e 100644
--- a/integrations/upgrade/upgrade-errors.test.ts
+++ b/integrations/upgrade/upgrade-errors.test.ts
@@ -31,6 +31,7 @@ test(
         @tailwind utilities;
       `,
     },
+    retry: 0,
   },
   async ({ exec, expect }) => {
     // Ensure we are in a git repo
@@ -39,7 +40,7 @@ test(
     await exec('git commit -m "before migration"')
 
     // Fully upgrade to v4
-    await exec('npx @tailwindcss/upgrade')
+    await exec('pnpm exec upgrade')
 
     // Undo all changes to the current repo. This will bring the repo back to a
     // v3 state, but the `node_modules` will now have v4 installed.
@@ -47,7 +48,7 @@ test(
 
     // Re-running the upgrade should result in an error
     return expect(() => {
-      return exec('npx @tailwindcss/upgrade', {}, { ignoreStdErr: true }).catch((e) => {
+      return exec('pnpm exec upgrade', {}, { ignoreStdErr: true }).catch((e) => {
         // Replacing the current version with a hardcoded `v4` to make it stable
         // when we release new minor/patch versions.
         return Promise.reject(
@@ -55,7 +56,7 @@ test(
         )
       })
     }).rejects.toThrowErrorMatchingInlineSnapshot(`
-      "Command failed: npx @tailwindcss/upgrade
+      "Command failed: pnpm exec upgrade
       ≈ tailwindcss v4.0.0
 
       │ ↳ Upgrading from Tailwind CSS \`v4.0.0\` 
@@ -105,6 +106,7 @@ test(
         @tailwind utilities;
       `,
     },
+    retry: 0,
   },
   async ({ exec, expect }) => {
     // Use `bun` to install dependencies
@@ -192,6 +194,7 @@ test(
         @tailwind utilities;
       `,
     },
+    retry: 0,
   },
   async ({ exec, expect }) => {
     // Use `npm` to install dependencies
diff --git a/integrations/utils.ts b/integrations/utils.ts
index f9638b857..9863918d1 100644
--- a/integrations/utils.ts
+++ b/integrations/utils.ts
@@ -1,22 +1,27 @@
 import dedent from 'dedent'
 import fastGlob from 'fast-glob'
-import { exec, spawn } from 'node:child_process'
+import { exec, execFile, spawn, type ChildProcess } from 'node:child_process'
 import fs from 'node:fs/promises'
+import { createServer } from 'node:net'
 import { platform, tmpdir } from 'node:os'
 import path from 'node:path'
-import { stripVTControlCharacters } from 'node:util'
+import { promisify, stripVTControlCharacters } from 'node:util'
 import { RawSourceMap, SourceMapConsumer } from 'source-map-js'
 import { test as defaultTest, type ExpectStatic } from 'vitest'
+import * as Yaml from 'yaml'
 import { createLineTable } from '../packages/tailwindcss/src/source-maps/line-table'
 import { escape } from '../packages/tailwindcss/src/utils/escape'
 
 const REPO_ROOT = path.join(__dirname, '..')
+const ROOT_PNPM_WORKSPACE = Yaml.parse(
+  await fs.readFile(path.join(REPO_ROOT, 'pnpm-workspace.yaml'), 'utf8'),
+)
 const PUBLIC_PACKAGES = (await fs.readdir(path.join(REPO_ROOT, 'dist'))).map((name) =>
   name.replace('tailwindcss-', '@tailwindcss/').replace('.tgz', ''),
 )
 
 interface SpawnedProcess {
-  dispose: () => void
+  dispose: () => Promise<void>
   flush: () => void
   onStdout: (predicate: (message: string) => boolean) => Promise<void>
   onStderr: (predicate: (message: string) => boolean) => Promise<void>
@@ -39,6 +44,7 @@ interface TestConfig {
 
   timeout?: number
   installDependencies?: boolean
+  retry?: number
 }
 interface TestContext {
   root: string
@@ -48,15 +54,17 @@ interface TestContext {
   parseSourceMap(opts: string | SourceMapOptions): SourceMap
   fs: {
     write(filePath: string, content: string, encoding?: BufferEncoding): Promise<void>
+    symlink(dst: string, src: string): Promise<void>
     create(filePaths: string[]): Promise<void>
     read(filePath: string): Promise<string>
+    delete(filePath: string): Promise<void>
     glob(pattern: string): Promise<[string, string][]>
     dumpFiles(pattern: string): Promise<string>
     expectFileToContain(
       filePath: string,
       contents: string | RegExp | (string | RegExp)[],
     ): Promise<void>
-    expectFileNotToContain(filePath: string, contents: string | string[]): Promise<void>
+    expectFileNotToContain(filePath: string, contents: string[]): Promise<void>
   }
 }
 type TestCallback = (context: TestContext) => Promise<void> | void
@@ -64,12 +72,15 @@ interface TestFlags {
   only?: boolean
   skip?: boolean
   debug?: boolean
+  concurrent?: boolean
 }
 
 type SpawnActor = { predicate: (message: string) => boolean; resolve: () => void }
 
 export const IS_WINDOWS = platform() === 'win32'
 
+const execFileAsync = promisify(execFile)
+
 const TEST_TIMEOUT = IS_WINDOWS ? 120000 : 60000
 const ASSERTION_TIMEOUT = IS_WINDOWS ? 10000 : 5000
 
@@ -82,16 +93,16 @@ export function test(
   name: string,
   config: TestConfig,
   testCallback: TestCallback,
-  { only = false, skip = false, debug = false }: TestFlags = {},
+  { only = false, skip = false, debug = false, concurrent = false }: TestFlags = {},
 ) {
   return defaultTest(
     name,
     {
       timeout: config.timeout ?? TEST_TIMEOUT,
-      retry: process.env.CI ? 2 : 0,
+      retry: config.retry ?? (process.env.CI ? 2 : 0),
       only: only || (!process.env.CI && debug),
       skip,
-      concurrent: true,
+      concurrent,
     },
     async (options) => {
       let rootDir = debug ? path.join(REPO_ROOT, '.debug') : TMP_ROOT
@@ -115,6 +126,39 @@ export function test(
           execOptions: ExecOptions = {},
         ) {
           let cwd = childProcessOptions.cwd ?? root
+          let originalCommand = command
+
+          // Avoid `pnpm exec upgrade` on Windows because the upgrader runs
+          // `pnpm add`, which rewrites Windows `.cmd` shims while the current
+          // shim is still executing.
+          //
+          // Pretty sure this is a pnpm v11 bug on Windows.
+          if (IS_WINDOWS && command.includes('pnpm exec upgrade')) {
+            for (let base = cwd; ; base = path.dirname(base)) {
+              let upgradeBin = path.join(
+                base,
+                'node_modules',
+                '@tailwindcss',
+                'upgrade',
+                'dist',
+                'index.mjs',
+              )
+
+              try {
+                await fs.access(upgradeBin)
+                command = command.replace('pnpm exec upgrade', `node "${upgradeBin}"`)
+                break
+              } catch (error: any) {
+                if (error?.code !== 'ENOENT') throw error
+              }
+
+              let parent = path.dirname(base)
+              if (parent === base) {
+                throw new Error(`Unable to resolve @tailwindcss/upgrade from ${cwd}`)
+              }
+            }
+          }
+
           if (debug && cwd !== root) {
             let relative = path.relative(root, cwd)
             if (relative[0] !== '.') relative = `./${relative}`
@@ -134,6 +178,11 @@ export function test(
               },
               (error, stdout, stderr) => {
                 if (error) {
+                  if (command !== originalCommand) {
+                    error.message = error.message.replace(command, originalCommand)
+                    let mappedError = error as any
+                    mappedError.cmd = originalCommand
+                  }
                   if (execOptions.ignoreStdErr !== true) console.error(stderr)
                   if (only || debug) {
                     console.error(stdout)
@@ -170,6 +219,7 @@ export function test(
           if (debug) console.log(`>& ${command}`)
           let child = spawn(command, {
             cwd,
+            detached: !IS_WINDOWS,
             shell: true,
             ...childProcessOptions,
             env: {
@@ -178,22 +228,26 @@ export function test(
             },
           })
 
-          function dispose() {
-            if (!child.kill()) {
-              child.kill('SIGKILL')
-            }
+          let disposed = false
 
-            let timer = setTimeout(
-              () =>
-                rejectDisposal?.(new Error(`spawned process (${command}) did not exit in time`)),
-              ASSERTION_TIMEOUT,
+          async function dispose() {
+            if (disposed) return disposePromise
+            disposed = true
+
+            await killProcessTree(child)
+
+            let timer = setTimeout(() => {
+              forceKillProcessTree(child)
+              rejectDisposal?.(new Error(`spawned process (${command}) did not exit in time`))
+            }, ASSERTION_TIMEOUT)
+            disposePromise.then(
+              () => clearTimeout(timer),
+              () => clearTimeout(timer),
             )
-            disposePromise.finally(() => {
-              clearTimeout(timer)
-            })
             return disposePromise
           }
           disposables.push(dispose)
+
           function onExit() {
             resolveDisposal?.()
           }
@@ -284,11 +338,7 @@ export function test(
           }
         },
         fs: {
-          async write(
-            filename: string,
-            content: string | Uint8Array,
-            encoding: BufferEncoding = 'utf8',
-          ): Promise<void> {
+          async write(filename, content, encoding = 'utf8') {
             let full = path.join(root, filename)
             let dir = path.dirname(full)
             await fs.mkdir(dir, { recursive: true })
@@ -299,6 +349,8 @@ export function test(
 
             if (filename.endsWith('package.json')) {
               content = await overwriteVersionsInPackageJson(content)
+            } else if (filename.endsWith('pnpm-workspace.yaml')) {
+              content = overwriteVersionsInPnpmWorkspace(content)
             }
 
             // Ensure that files written on Windows use \r\n line ending
@@ -309,7 +361,19 @@ export function test(
             await fs.writeFile(full, content, encoding)
           },
 
-          async create(filenames: string[]): Promise<void> {
+          async symlink(target, src) {
+            let targetAbsolute = path.join(root, target)
+            let targetParent = path.dirname(targetAbsolute)
+            await fs.mkdir(targetParent, { recursive: true })
+
+            let srcAbsolute = path.join(root, src)
+            let srcParent = path.dirname(srcAbsolute)
+            await fs.mkdir(srcParent, { recursive: true })
+
+            await fs.symlink(targetAbsolute, srcAbsolute)
+          },
+
+          async create(filenames) {
             for (let filename of filenames) {
               let full = path.join(root, filename)
 
@@ -319,7 +383,11 @@ export function test(
             }
           },
 
-          async read(filePath: string) {
+          async delete(filename) {
+            await fs.unlink(path.join(root, filename))
+          },
+
+          async read(filePath) {
             let content = await fs.readFile(path.resolve(root, filePath), 'utf8')
 
             // Ensure that files read on Windows have \r\n line endings removed
@@ -329,7 +397,7 @@ export function test(
 
             return content
           },
-          async glob(pattern: string) {
+          async glob(pattern) {
             let files = await fastGlob(pattern, { cwd: root })
             return Promise.all(
               files.map(async (file) => {
@@ -342,7 +410,7 @@ export function test(
               }),
             )
           },
-          async dumpFiles(pattern: string) {
+          async dumpFiles(pattern) {
             let files = await context.fs.glob(pattern)
             return `\n${files
               .slice()
@@ -401,21 +469,44 @@ export function test(
         node_modules/
       `
 
+      // Disable Git's automatic line ending conversion in these throwaway test
+      // repositories. Tools like pnpm write files (e.g. `pnpm-lock.yaml`) with
+      // LF endings, which on Windows (where `core.autocrlf=true` is common)
+      // makes Git emit noisy "LF will be replaced by CRLF" warnings when it
+      // touches those files.
+      config.fs['.gitattributes'] ??= txt`
+        * -text
+      `
+
+      // Ensure there is always a root `pnpm-workspace.yaml` so that transitive
+      // dependency overrides (and the build allow list) are injected into it.
+      // As of pnpm v10, these can no longer live in the `pnpm.overrides` field
+      // of `package.json`.
+      config.fs['pnpm-workspace.yaml'] ??= ''
+
       for (let [filename, content] of Object.entries(config.fs)) {
-        await context.fs.write(filename, content)
+        if (content.toString().startsWith('symlink:')) {
+          // The symlink path is relative to the target destination's path
+          let target = path.join(
+            filename,
+            content.toString().slice('symlink:'.length), // Relative path
+          )
+
+          await context.fs.symlink(target, filename)
+        } else {
+          await context.fs.write(filename, content)
+        }
       }
 
       let shouldInstallDependencies = config.installDependencies ?? true
 
       try {
-        // In debug mode, the directory is going to be inside the pnpm workspace
-        // of the tailwindcss package. This means that `pnpm install` will run
-        // pnpm install on the workspace instead (expect if the root dir defines
-        // a separate workspace). We work around this by using the
-        // `--ignore-workspace` flag.
+        // Every test project gets its own root `pnpm-workspace.yaml` (see
+        // above). This makes the test directory its own workspace root, so even
+        // in debug mode — where the directory lives inside this repository's
+        // pnpm workspace — `pnpm install` won't attach to the parent workspace.
         if (shouldInstallDependencies) {
-          let ignoreWorkspace = debug && !config.fs['pnpm-workspace.yaml']
-          await context.exec(`pnpm install${ignoreWorkspace ? ' --ignore-workspace' : ''}`)
+          await context.exec(`pnpm install`)
         }
       } catch (error: any) {
         console.error(error)
@@ -427,11 +518,18 @@ export function test(
       let disposables: (() => Promise<void>)[] = []
 
       async function dispose() {
-        await Promise.all(disposables.map((dispose) => dispose()))
+        let results = await Promise.allSettled(disposables.map((dispose) => dispose()))
 
         if (!debug) {
           await gracefullyRemove(root)
         }
+
+        let errors = results.flatMap((result) =>
+          result.status === 'rejected' ? [result.reason] : [],
+        )
+        if (errors.length > 0) {
+          throw new AggregateError(errors, 'Failed to clean up spawned processes')
+        }
       }
 
       options.onTestFinished(dispose)
@@ -441,7 +539,7 @@ export function test(
         try {
           await context.exec('git init', { cwd: root })
           await context.exec('git add --all', { cwd: root })
-          await context.exec('git commit -m "before migration"', { cwd: root })
+          await context.exec('git commit -m "before migration" --allow-empty', { cwd: root })
         } catch (error: any) {
           console.error(error)
           console.error(error.stdout?.toString())
@@ -460,6 +558,9 @@ test.only = (name: string, config: TestConfig, testCallback: TestCallback) => {
 test.skip = (name: string, config: TestConfig, testCallback: TestCallback) => {
   return test(name, config, testCallback, { skip: true })
 }
+test.concurrent = (name: string, config: TestConfig, testCallback: TestCallback) => {
+  return test(name, config, testCallback, { concurrent: true })
+}
 test.debug = (name: string, config: TestConfig, testCallback: TestCallback) => {
   return test(name, config, testCallback, { debug: true })
 }
@@ -483,28 +584,43 @@ async function overwriteVersionsInPackageJson(content: string): Promise<string>
     }
   }
 
+  return JSON.stringify(json, null, 2)
+}
+
+function overwriteVersionsInPnpmWorkspace(content: string): string {
+  let workspace = content.trim() === '' ? {} : Yaml.parse(content)
+
+  // Inherit information from the root workspace
+  workspace.allowBuilds = {
+    ...ROOT_PNPM_WORKSPACE.allowBuilds,
+    ...workspace.allowBuilds,
+  }
+
   // Inject transitive dependency overwrite. This is necessary because
   // @tailwindcss/vite internally depends on a specific version of
   // @tailwindcss/oxide and we instead want to resolve it to the locally built
   // version.
-  json.pnpm ||= {}
-  json.pnpm.overrides ||= {}
+  //
+  // As of pnpm v10, the `pnpm.overrides` field in `package.json` is no longer
+  // read. Overrides have to be defined in `pnpm-workspace.yaml` instead.
+  workspace.overrides ||= {}
   for (let pkg of PUBLIC_PACKAGES) {
     if (pkg === 'tailwindcss') {
       // We want to be explicit about the `tailwindcss` package so our tests can
       // also import v3 without conflicting v4 tarballs.
-      json.pnpm.overrides['@tailwindcss/node>tailwindcss'] = resolveVersion(pkg)
-      json.pnpm.overrides['@tailwindcss/upgrade>tailwindcss'] = resolveVersion(pkg)
-      json.pnpm.overrides['@tailwindcss/cli>tailwindcss'] = resolveVersion(pkg)
-      json.pnpm.overrides['@tailwindcss/postcss>tailwindcss'] = resolveVersion(pkg)
-      json.pnpm.overrides['@tailwindcss/vite>tailwindcss'] = resolveVersion(pkg)
-      json.pnpm.overrides['@tailwindcss/webpack>tailwindcss'] = resolveVersion(pkg)
+      workspace.overrides['@tailwindcss/node>tailwindcss'] = resolveVersion(pkg)
+      workspace.overrides['@tailwindcss/upgrade>tailwindcss'] = resolveVersion(pkg)
+      workspace.overrides['@tailwindcss/cli>tailwindcss'] = resolveVersion(pkg)
+      workspace.overrides['@tailwindcss/postcss>tailwindcss'] = resolveVersion(pkg)
+      workspace.overrides['@tailwindcss/turbopack>tailwindcss'] = resolveVersion(pkg)
+      workspace.overrides['@tailwindcss/vite>tailwindcss'] = resolveVersion(pkg)
+      workspace.overrides['@tailwindcss/webpack>tailwindcss'] = resolveVersion(pkg)
     } else {
-      json.pnpm.overrides[pkg] = resolveVersion(pkg)
+      workspace.overrides[pkg] = resolveVersion(pkg)
     }
   }
 
-  return JSON.stringify(json, null, 2)
+  return Yaml.stringify(workspace)
 }
 
 function resolveVersion(dependency: string) {
@@ -554,6 +670,7 @@ export async function retryAssertion<T>(
     try {
       return await fn()
     } catch (err) {
+      Error.captureStackTrace(err, retryAssertion)
       error = err
       await new Promise((resolve) => setTimeout(resolve, delay))
     }
@@ -606,6 +723,65 @@ export async function fetchStyles(base: string, path = '/'): Promise<string> {
   }, '')
 }
 
+export async function getRandomPort() {
+  return new Promise<number>((resolve, reject) => {
+    let server = createServer()
+    server.unref()
+    server.on('error', reject)
+    server.listen(0, '127.0.0.1', () => {
+      let address = server.address()
+      server.close(() => {
+        if (address && typeof address === 'object') {
+          resolve(address.port)
+        } else {
+          reject(new Error('Unable to allocate random port'))
+        }
+      })
+    })
+  })
+}
+
+async function killProcessTree(child: ChildProcess) {
+  if (child.exitCode !== null || child.signalCode !== null || child.pid === undefined) {
+    return
+  }
+
+  if (IS_WINDOWS) {
+    await execFileAsync('taskkill', ['/pid', String(child.pid), '/T', '/F'], {
+      timeout: ASSERTION_TIMEOUT,
+      windowsHide: true,
+    }).catch(() => {})
+    return
+  }
+
+  try {
+    process.kill(-child.pid, 'SIGTERM')
+  } catch (error: any) {
+    if (error?.code !== 'ESRCH') {
+      child.kill()
+    }
+  }
+}
+
+function forceKillProcessTree(child: ChildProcess) {
+  if (child.exitCode !== null || child.signalCode !== null || child.pid === undefined) {
+    return
+  }
+
+  if (IS_WINDOWS) {
+    execFile('taskkill', ['/pid', String(child.pid), '/T', '/F'], { windowsHide: true }, () => {})
+    return
+  }
+
+  try {
+    process.kill(-child.pid, 'SIGKILL')
+  } catch (error: any) {
+    if (error?.code !== 'ESRCH') {
+      child.kill('SIGKILL')
+    }
+  }
+}
+
 async function gracefullyRemove(dir: string) {
   // Skip removing the directory in CI because it can stall on Windows
   if (!process.env.CI) {
diff --git a/integrations/vite/bundled-dev.test.ts b/integrations/vite/bundled-dev.test.ts
new file mode 100644
index 000000000..8ba1b6b73
--- /dev/null
+++ b/integrations/vite/bundled-dev.test.ts
@@ -0,0 +1,193 @@
+import path from 'node:path'
+import { candidate, css, html, json, retryAssertion, test, ts, txt, yaml } from '../utils'
+
+// Vite's experimental `bundledDev` mode invokes the `hotUpdate` hook without a
+// `server`, which used to crash the plugin on every file edit.
+//
+// - https://github.com/tailwindlabs/tailwindcss/issues/20378
+// - https://vite.dev/blog/announcing-vite8-1#experimental-bundled-dev-mode
+test(
+  'dev mode (experimental `bundledDev`)',
+  {
+    fs: {
+      'package.json': json`{}`,
+      'pnpm-workspace.yaml': yaml`
+        #
+        packages:
+          - project-a
+      `,
+      'project-a/package.json': txt`
+        {
+          "type": "module",
+          "dependencies": {
+            "@tailwindcss/vite": "workspace:^",
+            "tailwindcss": "workspace:^"
+          },
+          "devDependencies": {
+            "vite": "^8.1"
+          }
+        }
+      `,
+      'project-a/vite.config.ts': ts`
+        import tailwindcss from '@tailwindcss/vite'
+        import { defineConfig } from 'vite'
+
+        export default defineConfig({
+          experimental: {
+            bundledDev: true,
+          },
+          plugins: [tailwindcss()],
+        })
+      `,
+      'project-a/index.html': html`
+        <head>
+          <link rel="stylesheet" href="./src/index.css" />
+        </head>
+        <body>
+          <div class="underline">Hello, world!</div>
+        </body>
+      `,
+      'project-a/src/index.css': css`
+        @reference 'tailwindcss/theme';
+        @import 'tailwindcss/utilities';
+        @source '../../project-b/src/**/*.html';
+      `,
+      'project-b/src/index.html': html`
+        <div class="flex" />
+      `,
+    },
+  },
+  async ({ root, spawn, fs, expect }) => {
+    let process = await spawn('pnpm vite dev', {
+      cwd: path.join(root, 'project-a'),
+      env: {
+        // Some CI machines have an upstream rolldown bug where its file watcher
+        // never delivers a single event. The debug output is the only way to
+        // tell that apart from a real regression (see below).
+        DEBUG: 'vite:full-bundle-mode',
+      },
+    })
+
+    // Any debug output beyond the "INITIAL:" startup lines proves rolldown's
+    // watcher delivered at least one file event.
+    let watcherAlive = false
+
+    // `hotUpdate` errors don't kill the dev server, they are only printed to
+    // stderr. Track them explicitly so a crash fails the test even if the
+    // rebuild happens to succeed anyway.
+    let pluginErrors: string[] = []
+    process.onStderr((message) => {
+      if (message.includes('vite:full-bundle-mode')) {
+        if (!message.includes('INITIAL:')) watcherAlive = true
+      } else if (message.includes('@tailwindcss/vite')) {
+        pluginErrors.push(message)
+      }
+      return false
+    })
+
+    let url = ''
+    await process.onStdout((m) => {
+      let match = /Local:\s*(http.*)\//.exec(m)
+      if (match) url = match[1]
+      return Boolean(url)
+    })
+
+    // In `bundledDev` mode the stylesheet is not served separately. Instead the
+    // generated CSS is embedded in the bundled JS and injected at runtime, so
+    // extract the bundle from the served HTML. While the bundle is being built,
+    // Vite serves a temporary fallback page instead.
+    //
+    // The bundle can be split into multiple chunks (e.g. the HMR client runtime
+    // and the app itself), and the chunk containing the CSS is not always the
+    // first one, so fetch every referenced script and stylesheet.
+    async function fetchBundledStyles(): Promise<string> {
+      let index = await fetch(`${url}/`)
+      let html = await index.text()
+      if (html.includes('__vite_is_fallback_page__')) {
+        throw new Error('Bundling still in progress')
+      }
+
+      let sources = [
+        ...html.matchAll(/<script[^>]*\ssrc="([^"]+)"/g),
+        ...html.matchAll(/<link[^>]*\srel="stylesheet"[^>]*\shref="([^"]+)"/g),
+      ].map((match) => match[1])
+      if (sources.length === 0) throw new Error(`No scripts or stylesheets found in:\n\n${html}`)
+
+      let contents = await Promise.all(
+        sources.map(async (src) => {
+          let response = await fetch(new URL(src, `${url}/`))
+          return await response.text()
+        }),
+      )
+      return contents.join('\n')
+    }
+
+    await retryAssertion(
+      async () => {
+        let styles = await fetchBundledStyles()
+        expect(styles).toContain(candidate`underline`)
+        expect(styles).toContain(candidate`flex`)
+      },
+      { timeout: 10_000, delay: 100 },
+    )
+
+    // Edit a module file and a manually `@source`d file. Without a connected
+    // HMR websocket client (this test only uses HTTP fetches), a file change
+    // does not trigger an eager rebuild — it only marks the bundle as stale,
+    // and the next fetch kicks off the rebuild. So poll with fetches without
+    // touching the files again: rewriting would re-mark the bundle stale right
+    // before each fetch and the rebuild could never be observed.
+    await fs.write(
+      'project-a/index.html',
+      html`
+        <head>
+          <link rel="stylesheet" href="./src/index.css" />
+        </head>
+        <body>
+          <div class="underline m-2">Hello, world!</div>
+        </body>
+      `,
+    )
+
+    await fs.write('project-b/src/index.html', html`
+      <div class="flex font-bold" />
+    `)
+
+    try {
+      await retryAssertion(
+        async () => {
+          let styles = await fetchBundledStyles()
+          expect(styles).toContain(candidate`underline`)
+          expect(styles).toContain(candidate`flex`)
+          expect(styles).toContain(candidate`m-2`)
+          expect(styles).toContain(candidate`font-bold`)
+        },
+        { timeout: 15_000, delay: 100 },
+      )
+    } catch (error) {
+      // If rolldown's watcher delivered any file event, the updates were
+      // genuinely dropped somewhere along the way — a real failure.
+      if (watcherAlive) throw error
+
+      // Otherwise the watcher never delivered a single event, so the updates
+      // can never be observed no matter how long we wait — an upstream
+      // rolldown bug on some CI machines, not a plugin regression. The crash
+      // regression this test guards is still covered: `hotUpdate` is driven
+      // by Vite's own (working) chokidar watcher and asserted via
+      // `pluginErrors` below.
+      //
+      // Skipping is only sound while the server still healthily serves the
+      // original bundle. If it stopped serving (crashed, or wedged on the
+      // fallback page), that's real breakage a silent watcher must not mask.
+      console.log(error)
+      let styles = await fetchBundledStyles()
+      expect(styles).toContain(candidate`underline`)
+      expect(styles).toContain(candidate`flex`)
+      console.warn(
+        'Skipping update assertions: rolldown’s file watcher delivered no events on this machine.',
+      )
+    }
+
+    expect(pluginErrors).toEqual([])
+  },
+)
diff --git a/integrations/vite/index.test.ts b/integrations/vite/index.test.ts
index 28c218b81..c346f8e37 100644
--- a/integrations/vite/index.test.ts
+++ b/integrations/vite/index.test.ts
@@ -294,6 +294,113 @@ describe.each(['postcss', 'lightningcss'])('%s', (transformer) => {
     },
   )
 
+  // https://github.com/tailwindlabs/tailwindcss/issues/20346
+  test(
+    'dev mode + symlinked `@source` files pick up changes to the real file',
+    {
+      fs: {
+        'package.json': json`{}`,
+        'pnpm-workspace.yaml': yaml`
+          #
+          packages:
+            - project-a
+            - packages/*
+        `,
+        'project-a/package.json': txt`
+          {
+            "type": "module",
+            "dependencies": {
+              "@tailwindcss/vite": "workspace:^",
+              "repro-package": "workspace:*",
+              "tailwindcss": "workspace:^"
+            },
+            "devDependencies": {
+              ${transformer === 'lightningcss' ? `"lightningcss": "^1",` : ''}
+              "vite": "^7"
+            }
+          }
+        `,
+        'project-a/vite.config.ts': ts`
+          import tailwindcss from '@tailwindcss/vite'
+          import { defineConfig } from 'vite'
+
+          export default defineConfig({
+            css: ${transformer === 'postcss' ? '{}' : "{ transformer: 'lightningcss' }"},
+            build: { cssMinify: false },
+            plugins: [tailwindcss()],
+          })
+        `,
+        'project-a/index.html': html`
+          <head>
+            <link rel="stylesheet" href="./src/index.css" />
+          </head>
+          <body>
+            <div class="underline">Hello, world!</div>
+          </body>
+        `,
+
+        // The `@source` points through the `node_modules` symlink that pnpm
+        // creates for the workspace package. Vite's file watcher ignores
+        // `node_modules` by default, so the symlinked path can not be watched.
+        // The real file (in `packages/repro-package`) has to be watched
+        // instead.
+        'project-a/src/index.css': css`
+          @reference 'tailwindcss/theme';
+          @import 'tailwindcss/utilities';
+          @source '../node_modules/repro-package/source.html';
+        `,
+        'packages/repro-package/package.json': json`
+          {
+            "name": "repro-package",
+            "private": true,
+            "version": "1.0.0"
+          }
+        `,
+        'packages/repro-package/source.html': html`
+          <div class="content-['v1']">
+            Hello, world!
+          </div>
+        `,
+      },
+    },
+    async ({ root, spawn, fs, expect }) => {
+      let process = await spawn('pnpm vite dev', {
+        cwd: path.join(root, 'project-a'),
+      })
+      await process.onStdout((m) => m.includes('ready in'))
+
+      let url = ''
+      await process.onStdout((m) => {
+        let match = /Local:\s*(http.*)\//.exec(m)
+        if (match) url = match[1]
+        return Boolean(url)
+      })
+
+      await retryAssertion(async () => {
+        let styles = await fetchStyles(url, '/index.html')
+        expect(styles).toContain(candidate`underline`)
+        expect(styles).toContain(candidate`content-['v1']`)
+      })
+
+      await retryAssertion(async () => {
+        // Changes to the real file (behind the symlink) should be picked up
+        await fs.write(
+          'packages/repro-package/source.html',
+          html`
+            <div class="content-['v1'] content-['v2']">
+              Hello, world!
+            </div>
+          `,
+        )
+
+        let styles = await fetchStyles(url)
+        expect(styles).toContain(candidate`underline`)
+        expect(styles).toContain(candidate`content-['v1']`)
+        expect(styles).toContain(candidate`content-['v2']`)
+      })
+    },
+  )
+
   test(
     'watch mode',
     {
@@ -473,11 +580,11 @@ describe.each(['postcss', 'lightningcss'])('%s', (transformer) => {
     },
   )
 
-  describe.sequential.each([['^6'], ['7.0.8'], ['7.1.12'], ['7.3.1'], ['8.0.0']])(
+  describe.each([['^6'], ['7.0.8'], ['7.1.12'], ['7.3.1'], ['8.0.0']])(
     'Using Vite %s',
     (version) => {
       test(
-        'external source file changes trigger a full reload',
+        'external source file changes update the CSS',
         {
           fs: {
             'package.json': json`{}`,
@@ -554,26 +661,33 @@ describe.each(['postcss', 'lightningcss'])('%s', (transformer) => {
             expect(styles).toContain(candidate`content-['project-b/src/index.php']`)
           })
 
-          // Flush all messages so that we can be sure the next messages are from
-          // the file changes we're about to make
+          // Flush all messages so that we can be sure the next messages are
+          // from the file changes we're about to make
           process.flush()
 
-          // Changing an external .php file should trigger a full reload
+          // Changing an external .php file hot-updates the generated CSS
           {
             await fs.write(
               'project-b/src/index.php',
               txt`<div class="content-['updated:project-b/src/index.php']"></div>`,
             )
 
-            // Ensure the page reloaded
+            // On Vite < 7.1, Vite itself hard-invalidates watched files that
+            // aren't part of the module graph and reloads the page.
+            //
+            // On newer versions nothing reloads the page: the CSS hot-updates
+            // through the regular pipeline because the changed file is a
+            // watch dependency of the CSS root.
+            //
+            // Reloading the page for external template changes is the
+            // responsibility of the backend integration (e.g. `laravel-vite-plugin`'s `refresh` option, or `vite-plugin-full-reload`).
+            //
+            // https://github.com/tailwindlabs/tailwindcss/issues/20411
             if (version === '^6' || version === '7.0.8') {
               await process.onStdout((m) => m.includes('page reload') && m.includes('index.php'))
             } else {
-              await process.onStderr(
-                (m) => m.includes('vite:hmr (client)') && m.includes('index.php'),
-              )
+              await process.onStdout((m) => m.includes('hmr update') && m.includes('index.css'))
             }
-            await process.onStderr((m) => m.includes('vite:hmr (ssr)') && m.includes('index.php'))
 
             // Ensure the styles were regenerated with the new content
             let styles = await fetchStyles(url, '/index.html')
@@ -584,6 +698,234 @@ describe.each(['postcss', 'lightningcss'])('%s', (transformer) => {
     },
   )
 
+  // https://github.com/tailwindlabs/tailwindcss/issues/20320
+  // https://github.com/tailwindlabs/tailwindcss/issues/19903
+  test(
+    'editing scanned files that Vite can process as modules does not trigger a full reload',
+    {
+      fs: {
+        'package.json': json`{}`,
+        'pnpm-workspace.yaml': yaml`
+          #
+          packages:
+            - project-a
+        `,
+        'project-a/package.json': json`
+          {
+            "type": "module",
+            "dependencies": {
+              "@tailwindcss/vite": "workspace:^",
+              "tailwindcss": "workspace:^"
+            },
+            "devDependencies": {
+              ${transformer === 'lightningcss' ? `"lightningcss": "^1",` : ''}
+              "vite": "^8"
+            }
+          }
+        `,
+        'project-a/vite.config.ts': ts`
+          import fs from 'node:fs'
+          import path from 'node:path'
+          import tailwindcss from '@tailwindcss/vite'
+          import { defineConfig } from 'vite'
+
+          export default defineConfig({
+            css: ${transformer === 'postcss' ? '{}' : "{ transformer: 'lightningcss' }"},
+            build: { cssMinify: false },
+            plugins: [
+              tailwindcss(),
+              {
+                // A plugin that processes a custom file type into a JS
+                // module, similar to e.g. \`.vue\` or \`.svelte\` files
+                name: 'custom-file-type',
+                transform(code, id) {
+                  if (id.endsWith('.custom')) {
+                    return { code: 'export default ' + JSON.stringify(code), map: null }
+                  }
+                },
+              },
+              {
+                // Log all HMR payloads to a file so the test can assert on
+                // them
+                name: 'hmr-wiretap',
+                configureServer(server) {
+                  let logFile = path.resolve('hmr.log')
+                  fs.writeFileSync(logFile, '')
+                  for (let environment of Object.values(server.environments)) {
+                    let send = environment.hot.send.bind(environment.hot)
+                    environment.hot.send = (payload) => {
+                      fs.appendFileSync(logFile, JSON.stringify(payload) + '\\n')
+                      return send(payload)
+                    }
+                  }
+                },
+              },
+            ],
+          })
+        `,
+        'project-a/index.html': html`
+          <html>
+            <head>
+              <link rel="stylesheet" href="./src/index.css" />
+            </head>
+            <body>
+              <div id="app"></div>
+              <script type="module" src="./src/main.ts"></script>
+            </body>
+          </html>
+        `,
+        'project-a/src/main.ts': ts`
+          import compA from './comp-a.custom'
+          import snippet from './snippet.php?raw'
+          console.log(compA, snippet)
+        `,
+        'project-a/src/snippet.php': html`
+          <div
+            class="content-['src/snippet.php']"
+          ></div>
+        `,
+        'project-a/src/comp-a.custom': html`
+          <div
+            class="content-['src/comp-a.custom']"
+          ></div>
+        `,
+        'project-a/src/comp-b.custom': html`
+          <div
+            class="content-['src/comp-b.custom']"
+          ></div>
+        `,
+        'project-a/src/lazy.tsx': jsx`
+          export default function Lazy() {
+            return <div className="content-['src/lazy.tsx']" />
+          }
+        `,
+        'project-a/src/unimported.css': css`
+          .unimported {
+            color: red;
+          }
+        `,
+        'project-a/src/index.css': css`
+          @import 'tailwindcss';
+          @source '../../project-b/**/*.php';
+        `,
+        'project-b/src/index.php': html`
+          <div
+            class="content-['project-b/src/index.php']"
+          ></div>
+        `,
+      },
+    },
+    async ({ root, spawn, fs, expect }) => {
+      let process = await spawn('pnpm vite dev', {
+        cwd: path.join(root, 'project-a'),
+      })
+      await process.onStdout((m) => m.includes('ready in'))
+
+      let url = ''
+      await process.onStdout((m) => {
+        let match = /Local:\s*(http.*)\//.exec(m)
+        if (match) url = match[1]
+        return Boolean(url)
+      })
+
+      await retryAssertion(async () => {
+        let styles = await fetchStyles(url, '/index.html')
+        expect(styles).toContain(candidate`content-['src/lazy.tsx']`)
+        expect(styles).toContain(candidate`content-['src/comp-b.custom']`)
+        expect(styles).toContain(candidate`content-['project-b/src/index.php']`)
+      })
+
+      // Load `main.ts`, `comp-a.custom`, and `snippet.php?raw` as real
+      // modules, like a browser visiting the page would
+      await fetch(`${url}/src/main.ts`)
+      await fetch(`${url}/src/comp-a.custom?import`)
+      await fetch(`${url}/src/snippet.php?raw`)
+
+      // Changing a scanned `.tsx` file that is not part of the module graph
+      // (e.g. a lazily-loaded route that hasn't been visited yet) should not
+      // trigger a full reload, but new classes should still apply
+      //
+      // https://github.com/tailwindlabs/tailwindcss/issues/20320
+      {
+        await fs.write(
+          'project-a/src/lazy.tsx',
+          jsx`
+            export default function Lazy() {
+              return <div className="content-['updated:src/lazy.tsx']" />
+            }
+          `,
+        )
+
+        await retryAssertion(async () => {
+          let styles = await fetchStyles(url, '/index.html')
+          expect(styles).toContain(candidate`content-['updated:src/lazy.tsx']`)
+        })
+      }
+
+      // The same holds for a custom file type as long as some file of the
+      // same type was processed as a module before
+      {
+        await fs.write(
+          'project-a/src/comp-b.custom',
+          html`<div class="content-['updated:src/comp-b.custom']"></div>`,
+        )
+
+        await retryAssertion(async () => {
+          let styles = await fetchStyles(url, '/index.html')
+          expect(styles).toContain(candidate`content-['updated:src/comp-b.custom']`)
+        })
+      }
+
+      // Changing a scanned stylesheet that is not part of the module graph
+      // (e.g. a component stylesheet that a framework plugin compiles into
+      // the component) should not trigger a full reload either
+      //
+      // https://github.com/tailwindlabs/tailwindcss/issues/19903
+      {
+        let updates = (await fs.read('project-a/hmr.log')).split('"type":"update"').length
+
+        await fs.write(
+          'project-a/src/unimported.css',
+          css`
+            .unimported {
+              color: blue;
+            }
+          `,
+        )
+
+        // Wait until the change was handled and an update was pushed
+        await retryAssertion(async () => {
+          let log = await fs.read('project-a/hmr.log')
+          expect(log.split('"type":"update"').length).toBeGreaterThan(updates)
+        })
+      }
+
+      // Changing an external file (e.g. a PHP template) hot-updates the
+      // generated CSS but does not trigger a full reload either. Reloading the
+      // page for external template changes is the responsibility of the backend
+      // integration (e.g. `laravel-vite-plugin`'s `refresh` option, or
+      // `vite-plugin-full-reload`).
+      //
+      // https://github.com/tailwindlabs/tailwindcss/issues/20411
+      {
+        let updates = (await fs.read('project-a/hmr.log')).split('"type":"update"').length
+
+        await fs.write(
+          'project-b/src/index.php',
+          html`<div class="content-['updated:project-b/src/index.php']"></div>`,
+        )
+
+        await retryAssertion(async () => {
+          let log = await fs.read('project-a/hmr.log')
+          expect(log.split('"type":"update"').length).toBeGreaterThan(updates)
+        })
+
+        let styles = await fetchStyles(url, '/index.html')
+        expect(styles).toContain(candidate`content-['updated:project-b/src/index.php']`)
+      }
+    },
+  )
+
   test(
     `source(none) disables looking at the module graph`,
     {
@@ -836,7 +1178,7 @@ describe.each(['postcss', 'lightningcss'])('%s', (transformer) => {
     async ({ root, fs, exec, expect }) => {
       await expect(() =>
         exec('pnpm vite build', { cwd: path.join(root, 'project-a') }, { ignoreStdErr: true }),
-      ).rejects.toThrowError('The `source(../i-do-not-exist)` does not exist')
+      ).rejects.toThrow('The `source(../i-do-not-exist)` does not exist')
 
       let files = await fs.glob('project-a/dist/**/*.css')
       expect(files).toHaveLength(0)
@@ -1090,6 +1432,14 @@ test(
         </head>
       `,
       'src/index.js': js`import Plotly from 'plotly.js/lib/core'`,
+
+      // `plotly.js` pulls in `es5-ext`, which has a build script. As of pnpm
+      // v10, build scripts only run when explicitly allowed.
+      'pnpm-workspace.yaml': yaml`
+        #
+        allowBuilds:
+          es5-ext: true
+      `,
     },
   },
   async ({ exec, expect, fs }) => {
@@ -1137,7 +1487,7 @@ test(
           <link rel="stylesheet" href="./src/index.css" />
         </head>
         <body>
-          <div class="hover:flex">Hello, world!</div>
+          <div class="focus:text-[black]">Hello, world!</div>
         </body>
       `,
       'src/index.css': css`
@@ -1149,16 +1499,16 @@ test(
   async ({ exec, expect, fs }) => {
     await exec('pnpm vite build')
 
-    let files = await fs.glob('dist/**/*.css')
-    expect(files).toHaveLength(1)
-    let [filename] = files[0]
-
     // Should not be minified when optimize is disabled
-    let content = await fs.read(filename)
-    expect(content).toContain('.hover\\:flex {')
-    expect(content).toContain('&:hover {')
-    expect(content).toContain('@media (hover: hover) {')
-    expect(content).toContain('display: flex;')
+    expect((await fs.dumpFiles('dist/**/*.css')).replace(/-([-_a-zA-Z0-9]*?)\.css/g, '-<hash>.css'))
+      .toMatchInlineSnapshot(`
+        "
+        --- dist/assets/index-<hash>.css ---
+        .focus\\:text-\\[black\\]:focus {
+          color: black;
+        }
+        "
+      `)
   },
 )
 
@@ -1192,7 +1542,7 @@ test(
           <link rel="stylesheet" href="./src/index.css" />
         </head>
         <body>
-          <div class="hover:flex">Hello, world!</div>
+          <div class="hover:text-[black]">Hello, world!</div>
         </body>
       `,
       'src/index.css': css`
@@ -1204,15 +1554,17 @@ test(
   async ({ exec, expect, fs }) => {
     await exec('pnpm vite build')
 
-    let files = await fs.glob('dist/**/*.css')
-    expect(files).toHaveLength(1)
-    let [filename] = files[0]
-
-    // Should be optimized but not minified
-    let content = await fs.read(filename)
-    expect(content).toContain('@media (hover: hover) {')
-    expect(content).toContain('.hover\\:flex:hover {')
-    expect(content).toContain('display: flex;')
+    expect((await fs.dumpFiles('dist/**/*.css')).replace(/-([-_a-zA-Z0-9]*?)\.css/g, '-<hash>.css'))
+      .toMatchInlineSnapshot(`
+      "
+      --- dist/assets/index-<hash>.css ---
+      @media (hover: hover) {
+        .hover\\:text-\\[black\\]:hover {
+          color: #000;
+        }
+      }
+      "
+    `)
   },
 )
 
@@ -1275,3 +1627,100 @@ test(
     await fs.expectFileToContain(filename, [candidate`content-['index.html']`])
   },
 )
+
+// https://github.com/tailwindlabs/tailwindcss/issues/17532
+test(
+  'deleting a file should not crash Vite',
+  {
+    fs: {
+      'package.json': json`
+        {
+          "type": "module",
+          "dependencies": {
+            "@tailwindcss/vite": "workspace:^",
+            "tailwindcss": "workspace:^"
+          },
+          "devDependencies": {
+            "vite": "6.2.5"
+          }
+        }
+      `,
+      'vite.config.ts': ts`
+        import tailwindcss from '@tailwindcss/vite'
+        import { defineConfig } from 'vite'
+
+        export default defineConfig({
+          plugins: [tailwindcss()],
+        })
+      `,
+      'index.html': html`
+        <body>
+          <div id="app" class="underline"></div>
+          <script type="module" src="./src/main.js"></script>
+        </body>
+      `,
+      'src/index.css': css`@import 'tailwindcss';`,
+      'src/main.js': js`
+        import iconUrl from './assets/icon.svg?url'
+        import './index.css'
+
+        document.querySelector('#app').innerHTML = iconUrl
+      `,
+      'src/assets/icon.svg': html`
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1 1">
+          <rect class="fill-red-500" width="1" height="1" />
+        </svg>
+       `,
+    },
+  },
+  async ({ fs, spawn, expect }) => {
+    let process = await spawn('pnpm vite dev')
+    await process.onStdout((m) => m.includes('ready in'))
+
+    let url = ''
+    await process.onStdout((m) => {
+      let match = /Local:\s*(http.*)\//.exec(m)
+      if (match) url = match[1]
+      return Boolean(url)
+    })
+
+    await retryAssertion(async () => {
+      let [main, css] = await Promise.all([
+        fetch(`${url}/src/main.js`).then((r) => r.text()),
+        fetch(`${url}/src/index.css`).then((r) => r.text()),
+      ])
+
+      expect(main).toContain('/src/assets/icon.svg?import&url')
+      expect(main).toContain('/src/index.css')
+      expect(css).toContain('.fill-red-500')
+    })
+
+    process.flush()
+
+    let unexpectedError = process.onStderr((m) => {
+      return /error|crash|panic/i.test(m)
+    })
+
+    await fs.write(
+      'src/main.js',
+      js`
+        import './index.css'
+        document.querySelector('#app').innerHTML = 'Hello World'
+      `,
+    )
+
+    await fs.delete('src/assets/icon.svg')
+
+    let result = await Promise.race([
+      unexpectedError.then(() => 'stderr'),
+      new Promise((resolve) => setTimeout(() => resolve('timeout'), 500)),
+    ])
+
+    expect(result).toBe('timeout')
+
+    await retryAssertion(async () => {
+      let response = await fetch(`${url}/src/index.css?t=${Date.now()}`)
+      expect(response.status).toBe(200)
+    })
+  },
+)
diff --git a/integrations/vite/nuxt.test.ts b/integrations/vite/nuxt.test.ts
index a803a89da..20f367020 100644
--- a/integrations/vite/nuxt.test.ts
+++ b/integrations/vite/nuxt.test.ts
@@ -1,4 +1,15 @@
-import { candidate, css, fetchStyles, html, json, retryAssertion, test, ts } from '../utils'
+import {
+  candidate,
+  css,
+  fetchStyles,
+  getRandomPort,
+  html,
+  json,
+  retryAssertion,
+  test,
+  ts,
+  yaml,
+} from '../utils'
 
 const SETUP = {
   fs: {
@@ -11,14 +22,14 @@ const SETUP = {
           "nitropack": "2.11.0",
           "tailwindcss": "workspace:^",
           "vue": "latest"
-        },
-        "pnpm": {
-          "overrides": {
-            "nuxi": "3.28.0"
-          }
         }
       }
     `,
+    'pnpm-workspace.yaml': yaml`
+      #
+      overrides:
+        nuxi: 3.28.0
+    `,
     'nuxt.config.ts': ts`
       import tailwindcss from '@tailwindcss/vite'
 
@@ -84,7 +95,8 @@ test('build', SETUP, async ({ spawn, exec, expect }) => {
   await exec('pnpm nuxt build')
   // The Nuxt preview server does not automatically assign a free port if 3000
   // is taken, so we use a random port instead.
-  let process = await spawn(`pnpm nuxt preview --port 8724`, {
+  let port = await getRandomPort()
+  let process = await spawn(`pnpm nuxt preview --port ${port}`, {
     env: {
       TEST: 'false',
       NODE_ENV: 'development',
diff --git a/integrations/vite/preact.test.ts b/integrations/vite/preact.test.ts
new file mode 100644
index 000000000..8e4deec2b
--- /dev/null
+++ b/integrations/vite/preact.test.ts
@@ -0,0 +1,165 @@
+import { candidate, css, fetchStyles, html, json, retryAssertion, test, ts, txt } from '../utils'
+
+test(
+  'dev mode',
+  {
+    fs: {
+      'package.json': json`
+        {
+          "type": "module",
+          "dependencies": {
+            "preact": "^10"
+          },
+          "devDependencies": {
+            "@preact/preset-vite": "^2",
+            "@tailwindcss/vite": "workspace:^",
+            "tailwindcss": "workspace:^",
+            "vite": "^8"
+          }
+        }
+      `,
+      'vite.config.ts': ts`
+        import fs from 'node:fs'
+        import path from 'node:path'
+        import preact from '@preact/preset-vite'
+        import tailwindcss from '@tailwindcss/vite'
+        import { defineConfig } from 'vite'
+
+        export default defineConfig({
+          plugins: [
+            tailwindcss(),
+            preact(),
+            {
+              // Log all HMR payloads to a file so the test can assert on them
+              name: 'hmr-wiretap',
+              configureServer(server) {
+                let logFile = path.resolve('hmr.log')
+                fs.writeFileSync(logFile, '')
+                for (let environment of Object.values(server.environments)) {
+                  let send = environment.hot.send.bind(environment.hot)
+                  environment.hot.send = (payload) => {
+                    fs.appendFileSync(logFile, JSON.stringify(payload) + '\\n')
+                    return send(payload)
+                  }
+                }
+              },
+            },
+          ],
+        })
+      `,
+      'index.html': html`
+        <html>
+          <head>
+            <link rel="stylesheet" href="./src/index.css" />
+          </head>
+          <body>
+            <div id="app"></div>
+            <script type="module" src="./src/main.tsx"></script>
+          </body>
+        </html>
+      `,
+      'src/main.tsx': ts`
+        import { render } from 'preact'
+        import { App } from './app'
+
+        render(<App />, document.getElementById('app')!)
+      `,
+      'src/app.tsx': ts`
+        import { useState } from 'preact/hooks'
+
+        export function App() {
+          const [count, setCount] = useState(0)
+          return (
+            <button className="underline" onClick={() => setCount((c) => c + 1)}>
+              Count: {count}
+            </button>
+          )
+        }
+      `,
+      'src/index.css': css`@import 'tailwindcss';`,
+    },
+  },
+  async ({ fs, spawn, expect }) => {
+    let process = await spawn('pnpm vite dev')
+    await process.onStdout((m) => m.includes('ready in'))
+
+    let url = ''
+    await process.onStdout((m) => {
+      let match = /Local:\s*(http.*)\//.exec(m)
+      if (match) url = match[1]
+      return Boolean(url)
+    })
+
+    await retryAssertion(async () => {
+      let styles = await fetchStyles(url)
+      expect(styles).toContain(candidate`underline`)
+    })
+
+    // Load the component modules, like a browser visiting the page would
+    await fetch(`${url}/src/main.tsx`)
+    await fetch(`${url}/src/app.tsx`)
+
+    // Editing a component keeps HMR intact: new classes are delivered through
+    // a regular update, not a full page reload (which would lose all state)
+    {
+      await fs.write(
+        'src/app.tsx',
+        ts`
+          import { useState } from 'preact/hooks'
+
+          export function App() {
+            const [count, setCount] = useState(0)
+            return (
+              <button className="underline flex" onClick={() => setCount((c) => c + 1)}>
+                Count: {count}
+              </button>
+            )
+          }
+        `,
+      )
+
+      await retryAssertion(async () => {
+        let styles = await fetchStyles(url)
+        expect(styles).toContain(candidate`underline`)
+        expect(styles).toContain(candidate`flex`)
+      })
+      expect(await fs.read('hmr.log')).toContain('"type":"update"')
+      expect(await fs.read('hmr.log')).not.toContain('full-reload')
+    }
+
+    // Changing a scanned file that is not part of the module graph (e.g.
+    // `package.json`, which package managers and other tooling write to while
+    // the dev server is running) should not trigger a full reload either —
+    // that would destroy client state. New candidates should still be picked
+    // up because the file is a watch dependency of the CSS root, so the CSS
+    // hot-updates through Vite's regular pipeline.
+    //
+    // https://github.com/tailwindlabs/tailwindcss/issues/20411
+    {
+      await fs.write(
+        'package.json',
+        txt`
+          {
+            "type": "module",
+            "description": "content-['package.json']",
+            "dependencies": {
+              "preact": "^10"
+            },
+            "devDependencies": {
+              "@preact/preset-vite": "^2",
+              "@tailwindcss/vite": "workspace:^",
+              "tailwindcss": "workspace:^",
+              "vite": "^8"
+            }
+          }
+        `,
+      )
+
+      await retryAssertion(async () => {
+        let styles = await fetchStyles(url)
+        expect(styles).toContain(candidate`content-['package.json']`)
+      })
+      expect(await fs.read('hmr.log')).not.toContain('full-reload')
+    }
+  },
+)
diff --git a/integrations/vite/resolvers.test.ts b/integrations/vite/resolvers.test.ts
index f8e389a7e..fc9aca5c7 100644
--- a/integrations/vite/resolvers.test.ts
+++ b/integrations/vite/resolvers.test.ts
@@ -1,5 +1,661 @@
 import { describe } from 'vitest'
-import { candidate, css, fetchStyles, html, js, retryAssertion, test, ts, txt } from '../utils'
+import {
+  candidate,
+  css,
+  fetchStyles,
+  html,
+  js,
+  json,
+  retryAssertion,
+  test,
+  ts,
+  txt,
+  yaml,
+} from '../utils'
+
+test(
+  'resolves tsconfig paths in production build',
+  {
+    fs: {
+      'package.json': json`
+        {
+          "type": "module",
+          "dependencies": {
+            "@tailwindcss/vite": "workspace:^",
+            "tailwindcss": "workspace:^"
+          },
+          "devDependencies": {
+            "vite": "^8"
+          }
+        }
+      `,
+      'tsconfig.json': json`
+        {
+          "compilerOptions": {
+            "baseUrl": ".",
+            "paths": {
+              "@/*": ["./src/*"]
+            }
+          }
+        }
+      `,
+      'vite.config.ts': ts`
+        import tailwindcss from '@tailwindcss/vite'
+        import { defineConfig } from 'vite'
+
+        export default defineConfig({
+          build: { cssMinify: false },
+          plugins: [tailwindcss()],
+          resolve: {
+            tsconfigPaths: true,
+          },
+        })
+      `,
+      'index.html': html`
+        <head>
+          <link rel="stylesheet" href="./src/index.css" />
+        </head>
+        <body>
+          <div class="underline custom-underline">Hello, world!</div>
+        </body>
+      `,
+      'src/index.css': css`
+        @import '@/styles/base.css';
+        @plugin '@/plugin.js';
+      `,
+      'src/styles/base.css': css`
+        @reference 'tailwindcss/theme';
+        @import 'tailwindcss/utilities';
+      `,
+      'src/plugin.js': js`
+        export default function ({ addUtilities }) {
+          addUtilities({ '.custom-underline': { 'border-bottom': '1px solid green' } })
+        }
+      `,
+    },
+  },
+  async ({ fs, exec, expect }) => {
+    await exec('pnpm vite build')
+
+    let files = await fs.glob('dist/**/*.css')
+    expect(files).toHaveLength(1)
+    let [filename] = files[0]
+
+    await fs.expectFileToContain(filename, [candidate`underline`, candidate`custom-underline`])
+  },
+)
+
+test(
+  'resolves tsconfig paths in dev mode',
+  {
+    fs: {
+      'package.json': json`
+        {
+          "type": "module",
+          "dependencies": {
+            "@tailwindcss/vite": "workspace:^",
+            "tailwindcss": "workspace:^"
+          },
+          "devDependencies": {
+            "vite": "^8"
+          }
+        }
+      `,
+      'tsconfig.json': json`
+        {
+          "compilerOptions": {
+            "baseUrl": ".",
+            "paths": {
+              "@/*": ["./src/*"]
+            }
+          }
+        }
+      `,
+      'vite.config.ts': ts`
+        import tailwindcss from '@tailwindcss/vite'
+        import { defineConfig } from 'vite'
+
+        export default defineConfig({
+          build: { cssMinify: false },
+          plugins: [tailwindcss()],
+          resolve: {
+            tsconfigPaths: true,
+          },
+        })
+      `,
+      'index.html': html`
+        <head>
+          <link rel="stylesheet" href="./src/index.css" />
+        </head>
+        <body>
+          <div class="underline custom-underline">Hello, world!</div>
+        </body>
+      `,
+      'src/index.css': css`
+        @import '@/styles/base.css';
+        @plugin '@/plugin.js';
+      `,
+      'src/styles/base.css': css`
+        @reference 'tailwindcss/theme';
+        @import 'tailwindcss/utilities';
+      `,
+      'src/plugin.js': js`
+        export default function ({ addUtilities }) {
+          addUtilities({ '.custom-underline': { 'border-bottom': '1px solid green' } })
+        }
+      `,
+    },
+  },
+  async ({ spawn, expect }) => {
+    let process = await spawn('pnpm vite dev')
+    await process.onStdout((m) => m.includes('ready in'))
+
+    let url = ''
+    await process.onStdout((m) => {
+      let match = /Local:\s*(http.*)\//.exec(m)
+      if (match) url = match[1]
+      return Boolean(url)
+    })
+
+    await retryAssertion(async () => {
+      let styles = await fetchStyles(url, '/index.html')
+      expect(styles).toContain(candidate`underline`)
+      expect(styles).toContain(candidate`custom-underline`)
+    })
+  },
+)
+
+test(
+  'resolves at-sign aliases in production build',
+  {
+    fs: {
+      'package.json': json`
+        {
+          "type": "module",
+          "dependencies": {
+            "@tailwindcss/vite": "workspace:^",
+            "tailwindcss": "workspace:^"
+          },
+          "devDependencies": {
+            "vite": "^8"
+          }
+        }
+      `,
+      'vite.config.ts': ts`
+        import tailwindcss from '@tailwindcss/vite'
+        import { defineConfig } from 'vite'
+        import { fileURLToPath } from 'node:url'
+
+        export default defineConfig({
+          build: { cssMinify: false },
+          plugins: [tailwindcss()],
+          resolve: {
+            alias: [{ find: '@', replacement: fileURLToPath(new URL('.', import.meta.url)) }],
+          },
+        })
+      `,
+      'index.html': html`
+        <head>
+          <link rel="stylesheet" href="./src/index.css" />
+        </head>
+        <body>
+          <div class="underline custom-underline">Hello, world!</div>
+        </body>
+      `,
+      'src/index.css': css`
+        @import '@/src/styles/base.css';
+        @plugin '@/src/plugin.js';
+      `,
+      'src/styles/base.css': css`
+        @reference 'tailwindcss/theme';
+        @import 'tailwindcss/utilities';
+      `,
+      'src/plugin.js': js`
+        export default function ({ addUtilities }) {
+          addUtilities({ '.custom-underline': { 'border-bottom': '1px solid green' } })
+        }
+      `,
+    },
+  },
+  async ({ fs, exec, expect }) => {
+    await exec('pnpm vite build')
+
+    let files = await fs.glob('dist/**/*.css')
+    expect(files).toHaveLength(1)
+    let [filename] = files[0]
+
+    await fs.expectFileToContain(filename, [candidate`underline`, candidate`custom-underline`])
+  },
+)
+
+test(
+  'resolves package plugins in production build with at-sign aliases',
+  {
+    fs: {
+      'package.json': json`
+        {
+          "type": "module",
+          "dependencies": {
+            "@tailwindcss/vite": "workspace:^",
+            "tailwindcss": "workspace:^"
+          },
+          "devDependencies": {
+            "tailwind-scrollbar": "^4.0.2",
+            "tailwindcss-motion": "^1.1.1",
+            "vite": "^8"
+          }
+        }
+      `,
+      'vite.config.ts': ts`
+        import tailwindcss from '@tailwindcss/vite'
+        import { defineConfig } from 'vite'
+        import { fileURLToPath } from 'node:url'
+
+        export default defineConfig({
+          build: { cssMinify: false },
+          plugins: [tailwindcss()],
+          resolve: {
+            alias: [{ find: '@', replacement: fileURLToPath(new URL('.', import.meta.url)) }],
+          },
+        })
+      `,
+      'index.html': html`
+        <head>
+          <link rel="stylesheet" href="./src/index.css" />
+        </head>
+        <body>
+          <div class="scrollbar scrollbar-thumb-red-500 motion-preset-fade">Hello, world!</div>
+        </body>
+      `,
+      'src/index.css': css`
+        @import 'tailwindcss';
+        @plugin 'tailwind-scrollbar';
+        @plugin 'tailwindcss-motion';
+      `,
+    },
+  },
+  async ({ fs, exec, expect }) => {
+    await exec('pnpm vite build')
+
+    let files = await fs.glob('dist/**/*.css')
+    expect(files).toHaveLength(1)
+    let [filename] = files[0]
+
+    await fs.expectFileToContain(filename, [
+      candidate`scrollbar`,
+      candidate`scrollbar-thumb-red-500`,
+      candidate`motion-preset-fade`,
+    ])
+  },
+)
+
+test(
+  'resolves package plugins to JS entries in production build when browser points to CSS',
+  {
+    fs: {
+      'package.json': json`
+        {
+          "type": "module",
+          "dependencies": {
+            "@tailwindcss/vite": "workspace:^",
+            "plugin-browser-css": "workspace:*",
+            "tailwindcss": "workspace:^"
+          },
+          "devDependencies": {
+            "vite": "^8"
+          }
+        }
+      `,
+      'pnpm-workspace.yaml': yaml`
+        #
+        packages:
+          - packages/*
+      `,
+      'packages/plugin-browser-css/package.json': json`
+        {
+          "name": "plugin-browser-css",
+          "version": "1.0.0",
+          "type": "module",
+          "main": "./index.js",
+          "module": "./index.js",
+          "browser": "./browser.css"
+        }
+      `,
+      'packages/plugin-browser-css/index.js': js`
+        export default function ({ addUtilities }) {
+          addUtilities({ '.browser-css-plugin': { 'border-bottom': '1px solid green' } })
+        }
+      `,
+      'packages/plugin-browser-css/browser.css': css`
+        .should-not-be-loaded-as-a-plugin {
+          display: none;
+        }
+      `,
+      'vite.config.ts': ts`
+        import tailwindcss from '@tailwindcss/vite'
+        import { defineConfig } from 'vite'
+
+        export default defineConfig({
+          build: { cssMinify: false },
+          plugins: [tailwindcss()],
+        })
+      `,
+      'index.html': html`
+        <html>
+          <head>
+            <link rel="stylesheet" href="./src/index.css" />
+          </head>
+          <body>
+            <div class="browser-css-plugin">Hello, world!</div>
+          </body>
+        </html>
+      `,
+      'src/index.css': css`
+        @import 'tailwindcss';
+        @plugin 'plugin-browser-css';
+      `,
+    },
+  },
+  async ({ fs, exec, expect }) => {
+    await exec('pnpm vite build')
+
+    let files = await fs.glob('dist/**/*.css')
+    expect(files).toHaveLength(1)
+    let [filename] = files[0]
+
+    await fs.expectFileToContain(filename, [candidate`browser-css-plugin`])
+  },
+)
+
+test(
+  'resolves package plugins to JS entries in dev mode when browser points to CSS',
+  {
+    fs: {
+      'package.json': json`
+        {
+          "type": "module",
+          "dependencies": {
+            "@tailwindcss/vite": "workspace:^",
+            "plugin-browser-css": "workspace:*",
+            "tailwindcss": "workspace:^"
+          },
+          "devDependencies": {
+            "vite": "^8"
+          }
+        }
+      `,
+      'pnpm-workspace.yaml': yaml`
+        #
+        packages:
+          - packages/*
+      `,
+      'packages/plugin-browser-css/package.json': json`
+        {
+          "name": "plugin-browser-css",
+          "version": "1.0.0",
+          "type": "module",
+          "main": "./index.js",
+          "module": "./index.js",
+          "browser": "./browser.css"
+        }
+      `,
+      'packages/plugin-browser-css/index.js': js`
+        export default function ({ addUtilities }) {
+          addUtilities({ '.browser-css-plugin': { 'border-bottom': '1px solid green' } })
+        }
+      `,
+      'packages/plugin-browser-css/browser.css': css`
+        .should-not-be-loaded-as-a-plugin {
+          display: none;
+        }
+      `,
+      'vite.config.ts': ts`
+        import tailwindcss from '@tailwindcss/vite'
+        import { defineConfig } from 'vite'
+
+        export default defineConfig({
+          build: { cssMinify: false },
+          plugins: [tailwindcss()],
+        })
+      `,
+      'index.html': html`
+        <html>
+          <head>
+            <link rel="stylesheet" href="./src/index.css" />
+          </head>
+          <body>
+            <div class="browser-css-plugin">Hello, world!</div>
+          </body>
+        </html>
+      `,
+      'src/index.css': css`
+        @import 'tailwindcss';
+        @plugin 'plugin-browser-css';
+      `,
+    },
+  },
+  async ({ spawn, expect }) => {
+    let process = await spawn('pnpm vite dev')
+    await process.onStdout((m) => m.includes('ready in'))
+
+    let url = ''
+    await process.onStdout((m) => {
+      let match = /Local:\s*(http.*)\//.exec(m)
+      if (match) url = match[1]
+      return Boolean(url)
+    })
+
+    await retryAssertion(async () => {
+      let styles = await fetchStyles(url, '/index.html')
+      expect(styles).toContain(candidate`browser-css-plugin`)
+    })
+  },
+)
+
+test(
+  'resolves package plugins in dev mode when package exports CSS files',
+  {
+    fs: {
+      'package.json': json`
+        {
+          "type": "module",
+          "dependencies": {
+            "@tailwindcss/vite": "workspace:^",
+            "daisyui": "^5",
+            "tailwindcss": "workspace:^"
+          },
+          "devDependencies": {
+            "vite": "^8"
+          }
+        }
+      `,
+      'vite.config.ts': ts`
+        import tailwindcss from '@tailwindcss/vite'
+        import { defineConfig } from 'vite'
+
+        export default defineConfig({
+          build: { cssMinify: false },
+          plugins: [tailwindcss()],
+        })
+      `,
+      'index.html': html`
+        <html>
+          <head>
+            <link rel="stylesheet" href="./src/index.css" />
+          </head>
+          <body>
+            <button class="btn btn-primary">Hello, world!</button>
+          </body>
+        </html>
+      `,
+      'src/index.css': css`
+        @import 'tailwindcss';
+        @plugin 'daisyui';
+      `,
+    },
+  },
+  async ({ spawn, expect }) => {
+    let process = await spawn('pnpm vite dev')
+    await process.onStdout((m) => m.includes('ready in'))
+
+    let url = ''
+    await process.onStdout((m) => {
+      let match = /Local:\s*(http.*)\//.exec(m)
+      if (match) url = match[1]
+      return Boolean(url)
+    })
+
+    await retryAssertion(async () => {
+      let styles = await fetchStyles(url, '/index.html')
+      expect(styles).toContain('.btn')
+      expect(styles).toContain('.btn-primary')
+    })
+  },
+)
+
+test(
+  'resolve relative CSS files correctly',
+  {
+    fs: {
+      'package.json': json`
+        {
+          "type": "module",
+          "dependencies": {
+            "@tailwindcss/vite": "workspace:^",
+            "tailwindcss": "workspace:^"
+          },
+          "devDependencies": {
+            "vite": "^8"
+          }
+        }
+      `,
+      'vite.config.ts': ts`
+        import tailwindcss from '@tailwindcss/vite'
+        import { defineConfig } from 'vite'
+
+        export default defineConfig({
+          build: { cssMinify: false },
+          plugins: [tailwindcss()],
+        })
+      `,
+      'index.html': html`
+        <html>
+          <head>
+            <link rel="stylesheet" href="./src/index.css" />
+          </head>
+          <body></body>
+        </html>
+      `,
+      'src/index.css': css`
+        @reference 'tailwindcss/theme';
+        @import 'tailwindcss/utilities';
+        @import './themes/glow.css';
+      `,
+      // References a file in the current folder, which names happens to match a
+      // file in the parent folder as well.
+      'src/themes/glow.css': css`@import './entry.css';`,
+      'src/themes/entry.css': css`
+        .do-include-me {
+          color: green;
+        }
+      `,
+
+      // Never rerefenced, so should not be included
+      'src/entry.css': css`
+        .do-not-include-me {
+          color: red;
+        }
+      `,
+    },
+  },
+  async ({ exec, fs, expect }) => {
+    await exec('pnpm vite build')
+
+    expect(
+      (await fs.dumpFiles('./dist/**/*.css')).replace(/-([-_a-zA-Z0-9]*?)\.css/g, '-<hash>.css'),
+    ).toMatchInlineSnapshot(`
+      "
+      --- ./dist/assets/index-<hash>.css ---
+      .do-include-me {
+        color: green;
+      }
+      "
+    `)
+  },
+)
+
+test(
+  'resolve relative JS files correctly',
+  {
+    fs: {
+      'package.json': json`
+        {
+          "type": "module",
+          "dependencies": {
+            "@tailwindcss/vite": "workspace:^",
+            "tailwindcss": "workspace:^"
+          },
+          "devDependencies": {
+            "vite": "^8"
+          }
+        }
+      `,
+      'vite.config.ts': ts`
+        import tailwindcss from '@tailwindcss/vite'
+        import { defineConfig } from 'vite'
+
+        export default defineConfig({
+          build: { cssMinify: false },
+          plugins: [tailwindcss()],
+        })
+      `,
+      'index.html': html`
+        <html>
+          <head>
+            <link rel="stylesheet" href="./src/index.css" />
+          </head>
+          <body></body>
+        </html>
+      `,
+      'src/index.css': css`
+        @reference 'tailwindcss/theme';
+        @import 'tailwindcss/utilities';
+        @import './themes/glow.css';
+      `,
+      // References a file in the current folder, which names happens to match a
+      // file in the parent folder as well.
+      'src/themes/glow.css': css`@plugin "./my-plugin.js";`,
+      'src/themes/my-plugin.js': ts`
+        export default function ({ addBase }) {
+          addBase({ '.do-include-me': { color: 'green' } })
+        }
+      `,
+
+      // Never rerefenced, so should not be included
+      'src/my-plugin.js': css`
+        export default function ({ addBase }) {
+          addBase({ '.do-not-include-me': { 'color': 'red' } })
+        }
+      `,
+    },
+  },
+  async ({ exec, fs, expect }) => {
+    await exec('pnpm vite build')
+
+    expect(
+      (await fs.dumpFiles('./dist/**/*.css')).replace(/-([-_a-zA-Z0-9]*?)\.css/g, '-<hash>.css'),
+    ).toMatchInlineSnapshot(`
+        "
+        --- ./dist/assets/index-<hash>.css ---
+        @layer base {
+          .do-include-me {
+            color: green;
+          }
+        }
+        "
+      `)
+  },
+)
 
 describe.each(['postcss', 'lightningcss'])('%s', (transformer) => {
   test(
diff --git a/integrations/vite/source-maps.test.ts b/integrations/vite/source-maps.test.ts
index 0e2594690..fe26d9a7c 100644
--- a/integrations/vite/source-maps.test.ts
+++ b/integrations/vite/source-maps.test.ts
@@ -91,3 +91,67 @@ test(
     })
   },
 )
+
+// https://github.com/tailwindlabs/tailwindcss/issues/19930
+test(
+  'production build without Tailwind roots should not result in source map warnings',
+  {
+    fs: {
+      'package.json': json`
+        {
+          "type": "module",
+          "dependencies": {
+            "@tailwindcss/vite": "workspace:^",
+            "tailwindcss": "workspace:^"
+          },
+          "devDependencies": {
+            "vite": "^7"
+          }
+        }
+      `,
+      'vite.config.ts': ts`
+        import { defineConfig } from 'vite'
+        import tailwindcss from '@tailwindcss/vite'
+
+        export default defineConfig({
+          plugins: [
+            tailwindcss(),
+            {
+              name: 'inspect-source-map-chain',
+              enforce: 'pre',
+              transform(_, id) {
+                if (id.includes('.css')) {
+                  // Force Rollup to collapse the sourcemap chain during this build.
+                  this.getCombinedSourcemap()
+                }
+              },
+            },
+          ],
+          css: {
+            devSourcemap: true,
+          },
+          build: {
+            sourcemap: true,
+          },
+        })
+      `,
+      'index.html': html`
+        <body>
+          <script type="module" src="./src/index.js"></script>
+          <div>Hello, world!</div>
+        </body>
+      `,
+      'src/index.js': ts` import './index.css' `,
+      'src/index.css': css`
+        body {
+          color: red;
+        }
+      `,
+    },
+  },
+  async ({ exec, expect }) => {
+    let output = await exec('pnpm vite build')
+
+    expect(output).not.toContain('Sourcemap is likely to be incorrect')
+  },
+)
diff --git a/integrations/vite/sveltekit.test.ts b/integrations/vite/sveltekit.test.ts
new file mode 100644
index 000000000..92e855da9
--- /dev/null
+++ b/integrations/vite/sveltekit.test.ts
@@ -0,0 +1,80 @@
+import { candidate, css, html, js, json, test, ts } from '../utils'
+
+test(
+  'sveltekit build resolves package plugins',
+  {
+    fs: {
+      'package.json': json`
+        {
+          "type": "module",
+          "scripts": {
+            "prepare": "svelte-kit sync || echo ''"
+          },
+          "dependencies": {
+            "svelte": "^5",
+            "tailwindcss": "workspace:^"
+          },
+          "devDependencies": {
+            "@sveltejs/adapter-auto": "^6",
+            "@sveltejs/kit": "^2",
+            "@tailwindcss/forms": "^0.5.11",
+            "@tailwindcss/vite": "workspace:^",
+            "vite": "^8"
+          }
+        }
+      `,
+      'svelte.config.js': js`
+        import adapter from '@sveltejs/adapter-auto'
+
+        export default {
+          kit: {
+            adapter: adapter(),
+          },
+        }
+      `,
+      'vite.config.ts': ts`
+        import tailwindcss from '@tailwindcss/vite'
+        import { sveltekit } from '@sveltejs/kit/vite'
+        import { defineConfig } from 'vite'
+
+        export default defineConfig({
+          build: { cssMinify: false },
+          plugins: [tailwindcss(), sveltekit()],
+        })
+      `,
+      'src/app.html': html`
+        <!doctype html>
+        <html lang="en">
+          <head>
+            %sveltekit.head%
+          </head>
+          <body data-sveltekit-preload-data="hover">
+            <div style="display: contents">%sveltekit.body%</div>
+          </body>
+        </html>
+      `,
+      'src/routes/+layout.svelte': html`
+        <script>
+          import '../app.css'
+        </script>
+
+        <slot />
+      `,
+      'src/routes/+page.svelte': html`
+        <div class="form-input">Hello, world!</div>
+      `,
+      'src/app.css': css`
+        @import 'tailwindcss';
+        @plugin '@tailwindcss/forms';
+      `,
+    },
+  },
+  async ({ exec, fs, expect }) => {
+    await exec('pnpm vite build')
+
+    let files = await fs.glob('.svelte-kit/output/client/**/*.css')
+    expect(files.length).toBeGreaterThan(0)
+
+    await fs.expectFileToContain(files[0][0], [candidate`form-input`])
+  },
+)
diff --git a/integrations/vite/vue.test.ts b/integrations/vite/vue.test.ts
index 3fea0db9a..b04f57c6b 100644
--- a/integrations/vite/vue.test.ts
+++ b/integrations/vite/vue.test.ts
@@ -1,5 +1,5 @@
 import { stripVTControlCharacters } from 'node:util'
-import { candidate, html, json, test, ts } from '../utils'
+import { candidate, css, fetchStyles, html, json, retryAssertion, test, ts } from '../utils'
 
 test(
   'production build',
@@ -73,6 +73,110 @@ test(
   },
 )
 
+{
+  const VUE_COMPONENT_COUNT = 1_000
+
+  let vueComponentsWithReferences = Object.fromEntries(
+    Array.from({ length: VUE_COMPONENT_COUNT }, (_, idx) => [
+      `src/components/Component${idx}.vue`,
+      html`
+        <template>
+          <div class="content-['component-${idx}']">Component ${idx}</div>
+        </template>
+
+        <style>
+          @reference '../main.css';
+
+          .component-${idx} {
+            @apply text-red-500;
+          }
+        </style>
+      `,
+    ]),
+  )
+
+  let vueComponentImports = Array.from(
+    { length: VUE_COMPONENT_COUNT },
+    (_, idx) => `import Component${idx} from './components/Component${idx}.vue'`,
+  ).join('\n')
+
+  let vueComponentUsages = Array.from(
+    { length: VUE_COMPONENT_COUNT },
+    (_, idx) => `<Component${idx} class="component-${idx}" />`,
+  ).join('\n')
+
+  test(
+    'production build with many Vue style blocks referencing the main stylesheet',
+    {
+      fs: {
+        'package.json': json`
+          {
+            "type": "module",
+            "dependencies": {
+              "vue": "^3.4.37",
+              "tailwindcss": "workspace:^"
+            },
+            "devDependencies": {
+              "@vitejs/plugin-vue": "^5.1.2",
+              "@tailwindcss/vite": "workspace:^",
+              "vite": "^7"
+            }
+          }
+        `,
+        'vite.config.ts': ts`
+          import { defineConfig } from 'vite'
+          import vue from '@vitejs/plugin-vue'
+          import tailwindcss from '@tailwindcss/vite'
+
+          export default defineConfig({
+            plugins: [vue(), tailwindcss()],
+          })
+        `,
+        'index.html': html`
+          <!doctype html>
+          <html>
+            <body>
+              <div id="app"></div>
+              <script type="module" src="./src/main.ts"></script>
+            </body>
+          </html>
+        `,
+        'src/main.css': css`@import 'tailwindcss';`,
+        'src/main.ts': ts`
+          import { createApp } from 'vue'
+          import './main.css'
+          import App from './App.vue'
+
+          createApp(App).mount('#app')
+        `,
+        'src/App.vue': html`
+          <script setup>
+            ${vueComponentImports}
+          </script>
+
+          <template>${vueComponentUsages}</template>
+        `,
+        ...vueComponentsWithReferences,
+      },
+    },
+    async ({ fs, exec, expect }) => {
+      await exec('pnpm vite build')
+
+      let files = await fs.glob('dist/**/*.css')
+      expect(files).toHaveLength(1)
+
+      await fs.expectFileToContain(files[0][0], [
+        candidate`content-['component-0']`,
+        candidate`component-0`,
+        candidate`content-['component-99']`,
+        candidate`component-99`,
+        candidate`content-['component-999']`,
+        candidate`component-999`,
+      ])
+    },
+  )
+}
+
 test(
   'error when using `@apply` without `@reference`',
   {
@@ -132,7 +236,7 @@ test(
     expect.assertions(1)
 
     try {
-      await exec('pnpm vite build')
+      await exec('pnpm vite build', {}, { ignoreStdErr: true })
     } catch (error) {
       let [, message] =
         /error during build:([\s\S]*?)file:/g.exec(
@@ -144,3 +248,133 @@ test(
     }
   },
 )
+
+// https://github.com/tailwindlabs/tailwindcss/issues/20320
+test(
+  'editing a scanned `.vue` file that is not loaded as a module does not trigger a full reload',
+  {
+    fs: {
+      'package.json': json`
+        {
+          "type": "module",
+          "dependencies": {
+            "vue": "^3.4.37",
+            "tailwindcss": "workspace:^"
+          },
+          "devDependencies": {
+            "@vitejs/plugin-vue": "^6",
+            "@tailwindcss/vite": "workspace:^",
+            "vite": "^8"
+          }
+        }
+      `,
+      'vite.config.ts': ts`
+        import fs from 'node:fs'
+        import path from 'node:path'
+        import { defineConfig } from 'vite'
+        import vue from '@vitejs/plugin-vue'
+        import tailwindcss from '@tailwindcss/vite'
+
+        export default defineConfig({
+          plugins: [
+            vue(),
+            tailwindcss(),
+            {
+              // Log update and full-reload HMR payloads to a file so the
+              // test can assert on them. Custom events are not logged
+              // because \`@vitejs/plugin-vue\` sends a \`file-changed\` event
+              // for every file change, including changes to the log file
+              // itself, which would cause an infinite feedback loop.
+              name: 'hmr-wiretap',
+              configureServer(server) {
+                let logFile = path.resolve('hmr.log')
+                fs.writeFileSync(logFile, '')
+                for (let environment of Object.values(server.environments)) {
+                  let send = environment.hot.send.bind(environment.hot)
+                  environment.hot.send = (payload) => {
+                    if (payload.type === 'update' || payload.type === 'full-reload') {
+                      fs.appendFileSync(logFile, JSON.stringify(payload) + '\\n')
+                    }
+                    return send(payload)
+                  }
+                }
+              },
+            },
+          ],
+        })
+      `,
+      'index.html': html`
+        <!doctype html>
+        <html>
+          <head>
+            <link rel="stylesheet" href="./src/index.css" />
+          </head>
+          <body>
+            <div id="app"></div>
+            <script type="module" src="./src/main.ts"></script>
+          </body>
+        </html>
+      `,
+      'src/index.css': css`@import 'tailwindcss';`,
+      'src/main.ts': ts`
+        import { createApp } from 'vue'
+        import App from './App.vue'
+
+        createApp(App).mount('#app')
+      `,
+      'src/App.vue': html`
+        <template>
+          <div class="content-['src/App.vue']">Hello Vue!</div>
+        </template>
+      `,
+
+      // This file is scanned by Tailwind but never imported, so it is not
+      // part of the loaded module graph (e.g. a lazy route that hasn't been
+      // visited yet)
+      'src/LazyRoute.vue': html`
+        <template>
+          <div class="content-['src/LazyRoute.vue']">Lazy</div>
+        </template>
+      `,
+    },
+  },
+  async ({ spawn, fs, expect }) => {
+    let process = await spawn('pnpm vite dev')
+    await process.onStdout((m) => m.includes('ready in'))
+
+    let url = ''
+    await process.onStdout((m) => {
+      let match = /Local:\s*(http.*)\//.exec(m)
+      if (match) url = match[1]
+      return Boolean(url)
+    })
+
+    await retryAssertion(async () => {
+      let styles = await fetchStyles(url, '/index.html')
+      expect(styles).toContain(candidate`content-['src/App.vue']`)
+      expect(styles).toContain(candidate`content-['src/LazyRoute.vue']`)
+    })
+
+    // Load `main.ts` and `App.vue` as real modules, like a browser visiting
+    // the page would
+    await fetch(`${url}/src/main.ts`)
+    await fetch(`${url}/src/App.vue`)
+
+    // Changing the scanned but unloaded `.vue` file should not trigger a
+    // full reload, but new classes should still apply
+    await fs.write(
+      'src/LazyRoute.vue',
+      html`
+        <template>
+          <div class="content-['updated:src/LazyRoute.vue']">Lazy</div>
+        </template>
+      `,
+    )
+
+    await retryAssertion(async () => {
+      let styles = await fetchStyles(url, '/index.html')
+      expect(styles).toContain(candidate`content-['updated:src/LazyRoute.vue']`)
+    })
+    expect(await fs.read('hmr.log')).not.toContain('full-reload')
+  },
+)
diff --git a/integrations/vitest.config.ts b/integrations/vitest.config.mts
similarity index 100%
rename from integrations/vitest.config.ts
rename to integrations/vitest.config.mts
diff --git a/integrations/webpack/loader.test.ts b/integrations/webpack/loader.test.ts
index 3a3782c0d..9c3d870af 100644
--- a/integrations/webpack/loader.test.ts
+++ b/integrations/webpack/loader.test.ts
@@ -418,3 +418,78 @@ test(
     `)
   },
 )
+
+test(
+  '@tailwindcss/webpack loader isolates cache by resource including query',
+  {
+    fs: {
+      'package.json': json`
+        {
+          "main": "./src/index.js",
+          "browser": "./src/index.js",
+          "dependencies": {
+            "css-loader": "^6",
+            "webpack": "^5",
+            "webpack-cli": "^5",
+            "mini-css-extract-plugin": "^2",
+            "tailwindcss": "workspace:^",
+            "@tailwindcss/webpack": "workspace:^"
+          }
+        }
+      `,
+      'webpack.config.js': js`
+        let MiniCssExtractPlugin = require('mini-css-extract-plugin')
+        let path = require('node:path')
+
+        module.exports = {
+          mode: 'development',
+          entry: {
+            a: './src/a.js',
+            b: './src/b.js',
+          },
+          output: {
+            clean: true,
+          },
+          plugins: [new MiniCssExtractPlugin()],
+          module: {
+            rules: [
+              {
+                test: /.css$/i,
+                use: [
+                  MiniCssExtractPlugin.loader,
+                  'css-loader',
+                  '@tailwindcss/webpack',
+                  path.resolve(__dirname, 'query-loader.js'),
+                ],
+              },
+            ],
+          },
+        }
+      `,
+      'query-loader.js': js`
+        module.exports = function (source) {
+          if (this.resourceQuery.includes('a')) {
+            return '@import "tailwindcss/utilities"; @utility only-a {color: var(--color-red-500);}'
+          }
+
+          if (this.resourceQuery.includes('b')) {
+            return '@import "tailwindcss/utilities"; @utility only-b {color: var(--color-blue-500);}'
+          }
+
+          return source
+        }
+      `,
+      'src/a.js': js`import './index.css?a'`,
+      'src/b.js': js`import './index.css?b'`,
+      'src/index.css': css``,
+    },
+  },
+  async ({ fs, exec }) => {
+    await exec('pnpm webpack --mode=development')
+
+    await fs.expectFileToContain('dist/a.css', ['only-a', '--color-red-500'])
+    await fs.expectFileToContain('dist/b.css', ['only-b', '--color-blue-500'])
+    await fs.expectFileNotToContain('dist/a.css', ['only-b', '--color-blue-500'])
+    await fs.expectFileNotToContain('dist/b.css', ['only-a', '--color-red-500'])
+  },
+)
diff --git a/package.json b/package.json
index c06e7c606..7d41a469e 100644
--- a/package.json
+++ b/package.json
@@ -48,23 +48,17 @@
   },
   "license": "MIT",
   "devDependencies": {
-    "@playwright/test": "^1.58.0",
+    "@playwright/test": "^1.62.1",
     "@types/node": "catalog:",
-    "postcss": "8.5.6",
+    "postcss": "catalog:",
     "postcss-import": "^16.1.1",
     "prettier": "catalog:",
     "prettier-plugin-embed": "^0.5.1",
     "prettier-plugin-organize-imports": "^4.3.0",
     "tsup": "^8.5.1",
-    "turbo": "^2.7.6",
-    "typescript": "^5.5.4",
-    "vitest": "^4.0.18"
+    "turbo": "^2.10.8",
+    "typescript": "^5.9.3",
+    "vitest": "^4.1.10"
   },
-  "packageManager": "pnpm@9.6.0",
-  "pnpm": {
-    "patchedDependencies": {
-      "@parcel/watcher@2.5.1": "patches/@parcel__watcher@2.5.1.patch",
-      "lightningcss@1.32.0": "patches/lightningcss@1.32.0.patch"
-    }
-  }
+  "packageManager": "pnpm@11.9.0"
 }
diff --git a/packages/@tailwindcss-browser/package.json b/packages/@tailwindcss-browser/package.json
index a5a7287e7..70af78c1e 100644
--- a/packages/@tailwindcss-browser/package.json
+++ b/packages/@tailwindcss-browser/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@tailwindcss/browser",
-  "version": "4.2.2",
+  "version": "4.3.3",
   "description": "A utility-first CSS framework for rapidly building custom user interfaces.",
   "license": "MIT",
   "main": "./dist/index.global.js",
@@ -30,8 +30,8 @@
     "access": "public"
   },
   "devDependencies": {
-    "h3": "^1.15.5",
-    "listhen": "^1.9.0",
+    "h3": "^1.15.11",
+    "listhen": "^1.10.1",
     "tailwindcss": "workspace:*"
   }
 }
diff --git a/packages/@tailwindcss-browser/playwright.config.ts b/packages/@tailwindcss-browser/playwright.config.ts
index c3ad05b91..c6059dd82 100644
--- a/packages/@tailwindcss-browser/playwright.config.ts
+++ b/packages/@tailwindcss-browser/playwright.config.ts
@@ -14,7 +14,7 @@ export default defineConfig({
   /* Opt out of parallel tests on CI. */
   workers: process.env.CI ? 1 : undefined,
   /* Reporter to use. See https://playwright.dev/docs/test-reporters */
-  reporter: 'html',
+  reporter: [['html', { open: 'never' }]],
   /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
   use: {
     /* Base URL to use in actions like `await page.goto('/')`. */
@@ -30,10 +30,11 @@ export default defineConfig({
       name: 'chromium',
       use: { ...devices['Desktop Chrome'] },
     },
-    {
-      name: 'webkit',
-      use: { ...devices['Desktop Safari'] },
-    },
+    // Playwright 1.60's Windows WebKit worker hangs on shutdown after all tests
+    // pass, causing CI to fail with a worker force-kill error.
+    ...(process.platform === 'win32'
+      ? []
+      : [{ name: 'webkit', use: { ...devices['Desktop Safari'] } }]),
     {
       name: 'firefox',
       use: {
diff --git a/packages/@tailwindcss-browser/tests/ui.spec.ts b/packages/@tailwindcss-browser/tests/ui.spec.ts
index 0b4484c6f..241322daa 100644
--- a/packages/@tailwindcss-browser/tests/ui.spec.ts
+++ b/packages/@tailwindcss-browser/tests/ui.spec.ts
@@ -9,6 +9,10 @@ test.beforeAll(async ({}, info) => {
   server = await createServer()
 })
 
+test.afterAll(async () => {
+  await server.close()
+})
+
 test('basic', async ({ page }) => {
   await server.render({
     page,
@@ -166,6 +170,7 @@ async function createServer() {
   return {
     app,
     url: listener.url,
+    close: listener.close,
     render,
   }
 }
diff --git a/packages/@tailwindcss-browser/vitest.config.ts b/packages/@tailwindcss-browser/vitest.config.mts
similarity index 100%
rename from packages/@tailwindcss-browser/vitest.config.ts
rename to packages/@tailwindcss-browser/vitest.config.mts
diff --git a/packages/@tailwindcss-cli/package.json b/packages/@tailwindcss-cli/package.json
index 01e7b28d7..7fa5b5500 100644
--- a/packages/@tailwindcss-cli/package.json
+++ b/packages/@tailwindcss-cli/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@tailwindcss/cli",
-  "version": "4.2.2",
+  "version": "4.3.3",
   "description": "A utility-first CSS framework for rapidly building custom user interfaces.",
   "license": "MIT",
   "repository": {
@@ -29,10 +29,10 @@
     "access": "public"
   },
   "dependencies": {
-    "@parcel/watcher": "^2.5.1",
+    "@parcel/watcher": "catalog:",
     "@tailwindcss/node": "workspace:*",
     "@tailwindcss/oxide": "workspace:*",
-    "enhanced-resolve": "^5.19.0",
+    "enhanced-resolve": "catalog:",
     "mri": "^1.2.0",
     "picocolors": "^1.1.1",
     "tailwindcss": "workspace:*"
diff --git a/packages/@tailwindcss-cli/src/commands/build/index.ts b/packages/@tailwindcss-cli/src/commands/build/index.ts
index eabd2a1de..ffef2ae8b 100644
--- a/packages/@tailwindcss-cli/src/commands/build/index.ts
+++ b/packages/@tailwindcss-cli/src/commands/build/index.ts
@@ -1,4 +1,3 @@
-import watcher from '@parcel/watcher'
 import {
   compile,
   env,
@@ -21,11 +20,13 @@ import {
   highlight,
   println,
   relative,
+  wordWrap,
 } from '../../utils/renderer'
 import { drainStdin, outputFile } from './utils'
 
 const css = String.raw
 const DEBUG = env.DEBUG
+const DEFAULT_POLL_INTERVAL_MS = 250
 
 export function options() {
   return {
@@ -47,6 +48,12 @@ export function options() {
       alias: '-w',
       values: ['always'],
     },
+    '--poll': {
+      type: 'boolean | number',
+      description: 'Use polling instead of filesystem events when watching',
+      default: false,
+      values: ['ms'],
+    },
     '--minify': {
       type: 'boolean',
       description: 'Optimize and minify the output',
@@ -66,23 +73,58 @@ export function options() {
       description: 'Generate a source map',
       default: false,
     },
+    '--silent': {
+      type: 'boolean',
+      description: 'Suppress non-error output',
+    },
   } satisfies Arg
 }
 
+function formatError(error: unknown): string {
+  let seen = new Set() // Track seen errors to prevent circular errors
+  function render(err: unknown, depth: number): string[] {
+    let indent = '  '.repeat(depth)
+    let width = (process.stderr.columns ?? Infinity) - 2 * (depth + 1)
+
+    let output = [
+      `${indent}${red(depth === 0 ? 'Error:' : 'Caused by:')}`,
+      `${indent}${dim('\u250C')}`,
+    ]
+
+    for (let line of `${err}`.split('\n')) {
+      let wrapped = wordWrap(line, width)
+      if (wrapped.length === 0) wrapped = ['']
+      for (let chunk of wrapped) {
+        output.push(`${indent}${dim('\u2502')} ${chunk}`)
+      }
+    }
+
+    output.push(`${indent}${dim('\u2514')}`)
+
+    if (typeof err === 'object' && err !== null && 'cause' in err && err.cause != null) {
+      if (!seen.add(err).has(err.cause)) {
+        output.push(...render(err.cause, depth + 1))
+      }
+    }
+
+    return output
+  }
+
+  return render(error, 0).join('\n')
+}
+
 async function handleError<T>(fn: () => T): Promise<T> {
   try {
     return await fn()
   } catch (err) {
-    if (err instanceof Error) {
-      eprintln(err.toString())
-    }
+    eprintln(formatError(err))
     process.exit(1)
   }
 }
 
 export async function handle(args: Result<ReturnType<typeof options>>) {
-  eprintln(header())
-  eprintln()
+  if (!args['--silent']) eprintln(header())
+  if (!args['--silent']) eprintln()
 
   using I = new Instrumentation()
   DEBUG && I.start('[@tailwindcss/cli] (initial build)')
@@ -121,7 +163,17 @@ export async function handle(args: Result<ReturnType<typeof options>>) {
   // If the user passes `{bin} build --map -` then this likely means they want to output the map inline
   // this is the default behavior of `{bin build} --map` to inform the user of that
   if (args['--map'] === '-') {
-    eprintln(`Use --map without a value to inline the source map`)
+    eprintln(`Use --map without a value to inline the source map.`)
+    process.exit(1)
+  }
+
+  if (args['--poll'] === undefined) {
+    eprintln(`Use --poll with a non-zero value in milliseconds.`)
+    process.exit(1)
+  }
+  let pollInterval = args['--poll'] === true ? DEFAULT_POLL_INTERVAL_MS : args['--poll']
+  if (pollInterval !== false && pollInterval <= 0) {
+    eprintln(`Specified polling interval must be a positive number.`)
     process.exit(1)
   }
 
@@ -144,6 +196,7 @@ export async function handle(args: Result<ReturnType<typeof options>>) {
   let previous = {
     css: '',
     optimizedCss: '',
+    output: null as string | null,
   }
 
   async function write(
@@ -200,13 +253,18 @@ export async function handle(args: Result<ReturnType<typeof options>>) {
       }
     }
 
+    let didChange = output !== previous.output
+
     DEBUG && I.start('Write output')
     if (args['--output'] && args['--output'] !== '-') {
       await outputFile(args['--output'], output)
-    } else {
+    } else if (didChange) {
       println(output)
     }
     DEBUG && I.end('Write output')
+
+    previous.output = output
+    return didChange
   }
 
   let inputFilePath =
@@ -215,6 +273,7 @@ export async function handle(args: Result<ReturnType<typeof options>>) {
   let inputBasePath = inputFilePath ? path.dirname(inputFilePath) : process.cwd()
 
   let fullRebuildPaths: string[] = inputFilePath ? [inputFilePath] : []
+  let backupRebuildPaths = fullRebuildPaths
 
   async function createCompiler(css: string, I: Instrumentation) {
     DEBUG && I.start('Setup compiler')
@@ -241,6 +300,24 @@ export async function handle(args: Result<ReturnType<typeof options>>) {
       return [{ ...compiler.root, negated: false }]
     })().concat(compiler.sources)
 
+    // Do not scan the current executable. Otherwise when using the standalone
+    // CLI, if the CLI lives in the current repo we would be scanning that file.
+    //
+    // This is also immune against renames of the executable file.
+    sources.push({
+      base: path.dirname(process.execPath),
+      pattern: path.basename(process.execPath),
+      negated: true,
+    })
+
+    if (inputFilePath !== null) {
+      sources.push({
+        base: path.dirname(inputFilePath),
+        pattern: path.basename(inputFilePath),
+        negated: false,
+      })
+    }
+
     let scanner = new Scanner({ sources })
     DEBUG && I.end('Setup compiler')
 
@@ -248,12 +325,16 @@ export async function handle(args: Result<ReturnType<typeof options>>) {
   }
 
   let [compiler, scanner] = await handleError(() => createCompiler(input, I))
+  let cleanupWatchers: (() => Promise<void>)[] = []
 
   // Watch for changes
-  if (args['--watch']) {
-    let cleanupWatchers: (() => Promise<void>)[] = []
+  if (args['--watch'] && pollInterval === false) {
+    // Ensure the file watcher can be loaded before setting up any watchers,
+    // such that we can present a helpful error message if needed.
+    await handleError(() => loadWatcher())
+
     cleanupWatchers.push(
-      await createWatchers(watchDirectories(scanner), async function handle(files) {
+      await createWatchers(await watchDirectories(scanner), async function handle(files) {
         try {
           // If the only change happened to the output file, then we don't want to
           // trigger a rebuild because that will result in an infinite loop.
@@ -265,36 +346,15 @@ export async function handle(args: Result<ReturnType<typeof options>>) {
           // Re-compile the input
           let start = process.hrtime.bigint()
 
-          let changedFiles: ChangedContent[] = []
-          let rebuildStrategy: 'incremental' | 'full' = 'incremental'
-
           let resolvedFullRebuildPaths = fullRebuildPaths
-
-          for (let file of files) {
-            // If one of the changed files is related to the input CSS or JS
-            // config/plugin files, then we need to do a full rebuild because
-            // the theme might have changed.
-            if (resolvedFullRebuildPaths.includes(file)) {
-              rebuildStrategy = 'full'
-
-              // No need to check the rest of the events, because we already know we
-              // need to do a full rebuild.
-              break
-            }
-
-            // Track new and updated files for incremental rebuilds.
-            changedFiles.push({
-              file,
-              extension: path.extname(file).slice(1),
-            } satisfies ChangedContent)
-          }
+          let rebuildStrategy = getRebuildStrategy(files, resolvedFullRebuildPaths)
 
           // Track the compiled CSS
           let compiledCss = ''
           let compiledMap: SourceMap | null = null
 
           // Scan the entire `base` directory for full rebuilds.
-          if (rebuildStrategy === 'full') {
+          if (rebuildStrategy.kind === 'full') {
             // Read the new `input`.
             let input = args['--input']
               ? args['--input'] === '-'
@@ -304,11 +364,23 @@ export async function handle(args: Result<ReturnType<typeof options>>) {
                   @import 'tailwindcss';
                 `
             clearRequireCache(resolvedFullRebuildPaths)
+
+            // Track current rebuild paths in case something goes wrong when
+            // performing a full rebuild.
+            backupRebuildPaths = fullRebuildPaths.slice()
+
+            // The `inputFilePath`, if provided, will be the only known full
+            // rebuild path before the compiler is re-created.
             fullRebuildPaths = inputFilePath ? [inputFilePath] : []
 
             // Create a new compiler, given the new `input`
             ;[compiler, scanner] = await createCompiler(input, I)
 
+            // Successfully created a new compiler, so the `fullRebuildPaths`
+            // will be updated. If other errors occur, we should be able to
+            // restore the paths unconditionally.
+            backupRebuildPaths = fullRebuildPaths.slice()
+
             // Scan the directory for candidates
             DEBUG && I.start('Scan for candidates')
             let candidates = scanner.scan()
@@ -316,7 +388,7 @@ export async function handle(args: Result<ReturnType<typeof options>>) {
 
             // Setup new watchers
             DEBUG && I.start('Setup new watchers')
-            let newCleanupFunction = await createWatchers(watchDirectories(scanner), handle)
+            let newCleanupFunction = await createWatchers(await watchDirectories(scanner), handle)
             DEBUG && I.end('Setup new watchers')
 
             // Clear old watchers
@@ -339,16 +411,16 @@ export async function handle(args: Result<ReturnType<typeof options>>) {
           }
 
           // Scan changed files only for incremental rebuilds.
-          else if (rebuildStrategy === 'incremental') {
+          else if (rebuildStrategy.kind === 'incremental') {
             DEBUG && I.start('Scan for candidates')
-            let newCandidates = scanner.scanFiles(changedFiles)
+            let newCandidates = scanner.scanFiles(rebuildStrategy.changedFiles)
             DEBUG && I.end('Scan for candidates')
 
             // No new candidates found which means we don't need to write to
             // disk, and can return early.
             if (newCandidates.length <= 0) {
               let end = process.hrtime.bigint()
-              eprintln(`Done in ${formatDuration(end - start)}`)
+              if (!args['--silent']) eprintln(`Done in ${formatDuration(end - start)}`)
               return
             }
 
@@ -366,13 +438,48 @@ export async function handle(args: Result<ReturnType<typeof options>>) {
           await write(compiledCss, compiledMap, args, I)
 
           let end = process.hrtime.bigint()
-          eprintln(`Done in ${formatDuration(end - start)}`)
+          if (!args['--silent']) eprintln(`Done in ${formatDuration(end - start)}`)
         } catch (err) {
+          // It's important that we perform a full rebuild when any of the
+          // dependencies tracked in `fullRebuildPaths` has been changed.
+          //
+          // If we remove one of those files, then a subsequent build will be
+          // triggered, but it will fail because the dependency is gone. The
+          // compiler itself will be in a broken state and won't be able to
+          // register any dependencies therefore we want to restore all the
+          // dependencies from before. If we don't do that, then we won't be
+          // able to recover from a bug in a transitive dependency.
+          //
+          // E.g.:
+          // ```css
+          // /* input.css — known full rebuild path */
+          // @import 'tailwindcss';
+          // @config "./tailwind.config.js";
+          // ```
+          //
+          // ```js
+          // // tailwind.config.js
+          // const theme = require('./my-theme.js');
+          //
+          // module.exports = {
+          //   theme
+          // }
+          // ```
+          // In this case `my-theme.js` is a transitive dependency of
+          // `input.css` via `tailwind.config.js`. Removing `my-theme.js` will
+          // result in an error, restoring `my-theme.js` should trigger a
+          // fresh build even though the compiler didn't restore.
+          //
+          // Once the build error is fixed, a fresh full rebuild will happen
+          // which in turn will fixup the full rebuild paths.
+          fullRebuildPaths = backupRebuildPaths
+
           // Catch any errors and print them to stderr, but don't exit the process
           // and keep watching.
-          if (err instanceof Error) {
-            eprintln(err.toString())
-          }
+          eprintln(formatError(err))
+
+          let end = process.hrtime.bigint()
+          if (!args['--silent']) eprintln(`Done in ${formatDuration(end - start)}`)
         }
       }),
     )
@@ -410,10 +517,185 @@ export async function handle(args: Result<ReturnType<typeof options>>) {
   await write(output, map, args, I)
 
   let end = process.hrtime.bigint()
-  eprintln(`Done in ${formatDuration(end - start)}`)
+  if (!args['--silent']) eprintln(`Done in ${formatDuration(end - start)}`)
+
+  // Watch for changes, using polling
+  if (args['--watch'] && pollInterval !== false) {
+    let cleanupPollingIndicator = () => {}
+
+    function logPollingMessage(message: string) {
+      if (!args['--silent']) {
+        process.stderr.write('\r\x1B[2K')
+      }
+
+      eprintln(message)
+
+      if (!args['--silent']) {
+        process.stderr.write(`\r\x1B[2K${dim(`Polling for changes…`)}`)
+      }
+    }
+
+    async function fullRebuild(I: Instrumentation) {
+      clearRequireCache(fullRebuildPaths)
+      backupRebuildPaths = fullRebuildPaths.slice()
+      fullRebuildPaths = inputFilePath ? [inputFilePath] : []
+
+      let input = args['--input']
+        ? args['--input'] === '-'
+          ? await drainStdin()
+          : await fs.readFile(args['--input'], 'utf-8')
+        : css`
+            @import 'tailwindcss';
+          `
+
+      ;[compiler, scanner] = await createCompiler(input, I)
+      backupRebuildPaths = fullRebuildPaths.slice()
+
+      DEBUG && I.start('Scan for candidates')
+      let candidates = scanner.scan()
+      DEBUG && I.end('Scan for candidates')
+
+      DEBUG && I.start('Build CSS')
+      let output = compiler.build(candidates)
+      DEBUG && I.end('Build CSS')
+
+      let map: SourceMap | null = null
+
+      if (args['--map']) {
+        DEBUG && I.start('Build Source Map')
+        map = toSourceMap(compiler.buildSourceMap())
+        DEBUG && I.end('Build Source Map')
+      }
+
+      await write(output, map, args, I)
+    }
+
+    if (!args['--silent']) {
+      let restored = false
+
+      function restoreCursor() {
+        if (restored) return
+        restored = true
+        process.stderr.write('\r\x1B[2K\x1B[?25h')
+        process.off('exit', restoreCursor)
+        process.off('SIGINT', onSigint)
+        process.off('SIGTERM', onSigterm)
+      }
+
+      function onSigint() {
+        restoreCursor()
+        process.exit(130)
+      }
+
+      function onSigterm() {
+        restoreCursor()
+        process.exit(143)
+      }
+
+      process.stderr.write('\x1B[?25l')
+      process.on('exit', restoreCursor)
+      process.on('SIGINT', onSigint)
+      process.on('SIGTERM', onSigterm)
+
+      cleanupPollingIndicator = restoreCursor
+      cleanupWatchers.push(async () => cleanupPollingIndicator())
+    }
+
+    cleanupWatchers.push(
+      createPollingWatcher(async () => {
+        using I = new Instrumentation()
+
+        DEBUG && I.start('Scan for candidates')
+        let candidates = scanner.scan()
+        DEBUG && I.end('Scan for candidates')
+
+        let files = scanner.scannedFiles.filter(
+          (file) => file !== args['--output'] && file !== args['--map'],
+        )
+
+        if (files.length <= 0) return
+
+        let start = process.hrtime.bigint()
+
+        let strategy = getRebuildStrategy(files, fullRebuildPaths)
+
+        if (strategy.kind === 'full') {
+          try {
+            await fullRebuild(I)
+          } catch (err) {
+            fullRebuildPaths = backupRebuildPaths
+
+            logPollingMessage(formatError(err))
+          }
+
+          if (!args['--silent']) {
+            logPollingMessage(`Done in ${formatDuration(process.hrtime.bigint() - start)}`)
+          }
+          return
+        }
+
+        // No candidates found which means we don't need to write to disk, and
+        // can return early.
+        if (candidates.length <= 0) {
+          if (!args['--silent']) {
+            logPollingMessage(`Done in ${formatDuration(process.hrtime.bigint() - start)}`)
+          }
+          return
+        }
+
+        DEBUG && I.start('Build CSS')
+        let output = compiler.build(candidates)
+        DEBUG && I.end('Build CSS')
+
+        let map: SourceMap | null = null
+
+        if (args['--map']) {
+          DEBUG && I.start('Build Source Map')
+          map = toSourceMap(compiler.buildSourceMap())
+          DEBUG && I.end('Build Source Map')
+        }
+
+        await write(output, map, args, I)
+
+        if (!args['--silent']) {
+          logPollingMessage(`Done in ${formatDuration(process.hrtime.bigint() - start)}`)
+        }
+      }, pollInterval),
+    )
+
+    if (args['--watch'] !== 'always') {
+      process.stdin.on('end', () => {
+        Promise.all(cleanupWatchers.map((fn) => fn())).then(
+          () => process.exit(0),
+          () => process.exit(1),
+        )
+      })
+    }
+
+    process.stdin.resume()
+    if (!args['--silent']) {
+      process.stderr.write(`\r\x1B[2K${dim(`Polling for changes…`)}`)
+    }
+  }
+}
+
+// Load `@parcel/watcher` lazily so a missing or broken native binding only
+// affects `--watch` (without `--poll`), instead of crashing one-off builds and
+// polling mode as well.
+async function loadWatcher(): Promise<typeof import('@parcel/watcher')> {
+  try {
+    return (await import('@parcel/watcher')).default
+  } catch (err) {
+    throw new Error(
+      `Failed to load the file watcher. Your platform may not be supported by \`@parcel/watcher\`. As a workaround, you can use polling instead by passing the \`--watch --poll\` flags.`,
+      { cause: err },
+    )
+  }
 }
 
 async function createWatchers(dirs: string[], cb: (files: string[]) => void) {
+  let watcher = await loadWatcher()
+
   // Remove any directories that are children of an already watched directory.
   // If we don't we may not get notified of certain filesystem events regardless
   // of whether or not they are for the directory that is duplicated.
@@ -475,10 +757,16 @@ async function createWatchers(dirs: string[], cb: (files: string[]) => void) {
 
       await Promise.all(
         events.map(async (event) => {
-          // We currently don't handle deleted files because it doesn't influence
-          // the CSS output. This is because we currently keep all scanned
-          // candidates in a cache for performance reasons.
-          if (event.type === 'delete') return
+          // When a file is deleted, a rebuild should be triggered such that we
+          // can figure out whether this file must trigger a fresh build or not.
+          //
+          // If it must trigger a fresh build, then we will temporarily end up
+          // in a broken state, but an error will be shown to the user. Once the
+          // user resolves the issue, the CLI will recover.
+          if (event.type === 'delete') {
+            files.add(event.path)
+            return
+          }
 
           // Ignore directory changes. We only care about file changes
           let stats: Stats | null = null
@@ -509,6 +797,78 @@ async function createWatchers(dirs: string[], cb: (files: string[]) => void) {
   }
 }
 
-function watchDirectories(scanner: Scanner) {
-  return [...new Set(scanner.normalizedSources.flatMap((globEntry) => globEntry.base))]
+function getRebuildStrategy(
+  files: string[],
+  fullRebuildPaths: string[],
+): { kind: 'incremental'; changedFiles: ChangedContent[] } | { kind: 'full' } {
+  let changedFiles: ChangedContent[] = []
+
+  for (let file of files) {
+    // If one of the changed files is related to the input CSS or JS
+    // config/plugin files, then we need to do a full rebuild because
+    // the theme might have changed.
+    if (fullRebuildPaths.includes(file)) {
+      return { kind: 'full' }
+    }
+
+    // Track new and updated files for incremental rebuilds.
+    changedFiles.push({
+      file,
+      extension: path.extname(file).slice(1),
+    } satisfies ChangedContent)
+  }
+
+  return { kind: 'incremental', changedFiles }
+}
+
+function createPollingWatcher(cb: () => Promise<void>, pollInterval: number) {
+  let disposed = false
+  let timer: ReturnType<typeof setTimeout> | null = null
+
+  async function poll() {
+    if (disposed) return
+
+    try {
+      await cb()
+    } catch (err) {
+      console.error(err)
+    } finally {
+      if (!disposed) {
+        timer = setTimeout(poll, pollInterval)
+      }
+    }
+  }
+
+  timer = setTimeout(poll, pollInterval)
+
+  return async () => {
+    disposed = true
+    if (timer) clearTimeout(timer)
+  }
+}
+
+async function watchDirectories(scanner: Scanner) {
+  let directories = (
+    await Promise.all(
+      scanner.normalizedSources.map(async (globEntry) => {
+        let resolvedPath = path.resolve(globEntry.base)
+        let realPath = await fs.realpath(resolvedPath).catch(() => resolvedPath)
+
+        return fs
+          .stat(realPath)
+          .then((stat) => (stat.isDirectory() ? [realPath] : []))
+          .catch(() => [])
+      }),
+    )
+  ).flat(1)
+
+  return Array.from(new Set(directories))
+}
+
+function dim(str: string) {
+  return `\x1B[2m${str}\x1B[22m`
+}
+
+function red(str: string) {
+  return `\x1B[31m${str}\x1B[39m`
 }
diff --git a/packages/@tailwindcss-cli/src/index.ts b/packages/@tailwindcss-cli/src/index.ts
index 4b308e694..1543f7d13 100644
--- a/packages/@tailwindcss-cli/src/index.ts
+++ b/packages/@tailwindcss-cli/src/index.ts
@@ -11,7 +11,7 @@ const sharedOptions = {
 } satisfies Arg
 
 function buildUsage(command = 'tailwindcss') {
-  return `${command} [--input input.css] [--output output.css] [--watch] [options…]`
+  return `${command} [--input input.css] [--output output.css] [--watch] [--poll=ms] [options…]`
 }
 
 function rootHelp({ invalid }: { invalid?: string } = {}) {
diff --git a/packages/@tailwindcss-cli/src/utils/args.test.ts b/packages/@tailwindcss-cli/src/utils/args.test.ts
index 4ac2e8778..249fb23eb 100644
--- a/packages/@tailwindcss-cli/src/utils/args.test.ts
+++ b/packages/@tailwindcss-cli/src/utils/args.test.ts
@@ -153,3 +153,34 @@ it('should be possible to provide multiple types, and convert the value to that
     }
   `)
 })
+
+it('should be possible to provide boolean or number arguments', () => {
+  let options = {
+    '--poll': {
+      type: 'boolean | number',
+      description: 'Use polling instead of filesystem events when watching',
+      default: false,
+    },
+  } satisfies Arg
+
+  expect(args(options, ['--poll'])).toMatchInlineSnapshot(`
+    {
+      "--poll": true,
+      "_": [],
+    }
+  `)
+
+  expect(args(options, ['--poll=50'])).toMatchInlineSnapshot(`
+    {
+      "--poll": 50,
+      "_": [],
+    }
+  `)
+
+  expect(args(options, ['--poll=foo'])).toMatchInlineSnapshot(`
+    {
+      "--poll": undefined,
+      "_": [],
+    }
+  `)
+})
diff --git a/packages/@tailwindcss-cli/src/utils/renderer.ts b/packages/@tailwindcss-cli/src/utils/renderer.ts
index 6b0098586..da817dda7 100644
--- a/packages/@tailwindcss-cli/src/utils/renderer.ts
+++ b/packages/@tailwindcss-cli/src/utils/renderer.ts
@@ -49,7 +49,9 @@ export function wordWrap(text: string, width: number) {
   for (let word of words) {
     let wordLength = stripVTControlCharacters(word).length
 
-    if (lineLength + wordLength + 1 > width) {
+    // A word longer than `width` is kept on its own line rather than
+    // introducing an empty line before it.
+    if (lineLength > 0 && lineLength + wordLength + 1 > width) {
       lines.push(line)
       line = ''
       lineLength = 0
diff --git a/packages/@tailwindcss-node/package.json b/packages/@tailwindcss-node/package.json
index a8763e934..0eced7366 100644
--- a/packages/@tailwindcss-node/package.json
+++ b/packages/@tailwindcss-node/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@tailwindcss/node",
-  "version": "4.2.2",
+  "version": "4.3.3",
   "description": "A utility-first CSS framework for rapidly building custom user interfaces.",
   "license": "MIT",
   "repository": {
@@ -19,29 +19,45 @@
   ],
   "publishConfig": {
     "provenance": true,
-    "access": "public"
+    "access": "public",
+    "exports": {
+      ".": {
+        "types": "./dist/index.d.ts",
+        "import": "./dist/index.mjs",
+        "require": "./dist/index.js"
+      },
+      "./require-cache": {
+        "types": "./dist/require-cache.d.ts",
+        "default": "./dist/require-cache.js"
+      },
+      "./esm-cache-loader": {
+        "types": "./dist/esm-cache.loader.d.mts",
+        "default": "./dist/esm-cache.loader.mjs"
+      }
+    }
   },
   "exports": {
     ".": {
-      "types": "./dist/index.d.ts",
-      "import": "./dist/index.mjs",
-      "require": "./dist/index.js"
+      "types": "./src/index.ts",
+      "import": "./src/index.ts",
+      "require": "./src/index.cts"
     },
     "./require-cache": {
-      "types": "./dist/require-cache.d.ts",
-      "default": "./dist/require-cache.js"
+      "types": "./src/require-cache.ts",
+      "import": "./src/require-cache.ts",
+      "require": "./src/require-cache.cts"
     },
     "./esm-cache-loader": {
-      "types": "./dist/esm-cache.loader.d.mts",
-      "default": "./dist/esm-cache.loader.mjs"
+      "types": "./src/esm-cache.loader.mts",
+      "default": "./src/esm-cache.loader.mts"
     }
   },
   "dependencies": {
     "@jridgewell/remapping": "^2.3.5",
-    "enhanced-resolve": "^5.19.0",
-    "jiti": "^2.6.1",
+    "enhanced-resolve": "catalog:",
+    "jiti": "^2.7.0",
     "lightningcss": "catalog:",
-    "magic-string": "^0.30.21",
+    "magic-string": "^1.1.0",
     "source-map-js": "^1.2.1",
     "tailwindcss": "workspace:*"
   }
diff --git a/packages/@tailwindcss-node/src/compile.ts b/packages/@tailwindcss-node/src/compile.ts
index 7eb959d3b..e5f8782c8 100644
--- a/packages/@tailwindcss-node/src/compile.ts
+++ b/packages/@tailwindcss-node/src/compile.ts
@@ -194,7 +194,10 @@ async function importModule(path: string): Promise<any> {
   }
 }
 
-const modules = ['node_modules', ...(process.env.NODE_PATH ? [process.env.NODE_PATH] : [])]
+const modules = [
+  'node_modules',
+  ...(process.env.NODE_PATH ? [...process.env.NODE_PATH.split(path.delimiter)] : []),
+]
 
 const cssResolver = EnhancedResolve.ResolverFactory.createResolver({
   fileSystem: new EnhancedResolve.CachedInputFileSystem(fs, 4000),
diff --git a/packages/@tailwindcss-node/src/esm-cache.loader.mts b/packages/@tailwindcss-node/src/esm-cache.loader.mts
index edcfc8d77..96d297a29 100644
--- a/packages/@tailwindcss-node/src/esm-cache.loader.mts
+++ b/packages/@tailwindcss-node/src/esm-cache.loader.mts
@@ -1,22 +1,40 @@
-import { isBuiltin, type ResolveHook } from 'node:module'
+import {
+  isBuiltin,
+  type ResolveFnOutput,
+  type ResolveHook,
+  type ResolveHookContext,
+  type ResolveHookSync,
+} from 'node:module'
 
 export let resolve: ResolveHook = async (specifier, context, nextResolve) => {
   let result = await nextResolve(specifier, context)
+  return processResolve(context, result)
+}
 
-  if (result.url === import.meta.url) return result
-  if (isBuiltin(result.url)) return result
-  if (!context.parentURL) return result
+export let resolveSync: ResolveHookSync = (specifier, context, nextResolve) => {
+  let result = nextResolve(specifier, context)
+  return processResolve(context, result)
+}
 
-  let parent = new URL(context.parentURL)
+function processResolve(context: ResolveHookContext, result: ResolveFnOutput) {
+  try {
+    if (result.url === import.meta.url) return result
+    if (isBuiltin(result.url)) return result
+    if (!context.parentURL) return result
 
-  let id = parent.searchParams.get('id')
-  if (id === null) return result
+    let parent = new URL(context.parentURL)
 
-  let url = new URL(result.url)
-  url.searchParams.set('id', id)
+    let id = parent.searchParams.get('id')
+    if (id === null) return result
 
-  return {
-    ...result,
-    url: `${url}`,
+    let url = new URL(result.url)
+    url.searchParams.set('id', id)
+
+    return {
+      ...result,
+      url: `${url}`,
+    }
+  } catch {
+    return result
   }
 }
diff --git a/packages/@tailwindcss-node/src/index.cts b/packages/@tailwindcss-node/src/index.cts
index 4bca0a5e1..9f2788933 100644
--- a/packages/@tailwindcss-node/src/index.cts
+++ b/packages/@tailwindcss-node/src/index.cts
@@ -1,6 +1,7 @@
 import * as Module from 'node:module'
 import { pathToFileURL } from 'node:url'
 import * as env from './env'
+import { resolveSync } from './esm-cache.loader.mjs'
 export * from './compile'
 export * from './instrumentation'
 export * from './normalize-path'
@@ -12,8 +13,14 @@ export { env }
 // not necessary.
 if (!process.versions.bun) {
   // `Module#register` was added in Node v18.19.0 and v20.6.0
+  // `Module#registerHooks` was added in Node v22.15.0 and v23.5.0 and is the preferred API since v25.9.0,
+  // runtime-deprecating `Module#register` since v26
   //
   // Not calling it means that while ESM dependencies don't get reloaded, the
   // actual included files will because they cache bust directly via `?id=…`
-  Module.register?.(pathToFileURL(require.resolve('@tailwindcss/node/esm-cache-loader')))
+  if (Module.registerHooks) {
+    Module.registerHooks({ resolve: resolveSync })
+  } else {
+    Module.register?.(pathToFileURL(require.resolve('@tailwindcss/node/esm-cache-loader')))
+  }
 }
diff --git a/packages/@tailwindcss-node/src/index.ts b/packages/@tailwindcss-node/src/index.ts
index a5e7bf5b4..8eff1466a 100644
--- a/packages/@tailwindcss-node/src/index.ts
+++ b/packages/@tailwindcss-node/src/index.ts
@@ -1,6 +1,7 @@
 import * as Module from 'node:module'
 import { pathToFileURL } from 'node:url'
 import * as env from './env'
+import { resolveSync } from './esm-cache.loader.mjs'
 export * from './compile'
 export * from './instrumentation'
 export * from './normalize-path'
@@ -11,11 +12,16 @@ export { env }
 // In Bun, ESM modules will also populate `require.cache`, so the module hook is
 // not necessary.
 if (!process.versions.bun) {
-  let localRequire = Module.createRequire(import.meta.url)
-
   // `Module#register` was added in Node v18.19.0 and v20.6.0
+  // `Module#registerHooks` was added in Node v22.15.0 and v23.5.0 and is the preferred API since v25.9.0,
+  // runtime-deprecating `Module#register` since v26
   //
   // Not calling it means that while ESM dependencies don't get reloaded, the
   // actual included files will because they cache bust directly via `?id=…`
-  Module.register?.(pathToFileURL(localRequire.resolve('@tailwindcss/node/esm-cache-loader')))
+  if (Module.registerHooks) {
+    Module.registerHooks({ resolve: resolveSync })
+  } else {
+    let localRequire = Module.createRequire(import.meta.url)
+    Module.register?.(pathToFileURL(localRequire.resolve('@tailwindcss/node/esm-cache-loader')))
+  }
 }
diff --git a/packages/@tailwindcss-node/src/instrumentation.test.ts b/packages/@tailwindcss-node/src/instrumentation.test.ts
index 1f06796fd..102c7ed8e 100644
--- a/packages/@tailwindcss-node/src/instrumentation.test.ts
+++ b/packages/@tailwindcss-node/src/instrumentation.test.ts
@@ -2,7 +2,7 @@ import { stripVTControlCharacters } from 'util'
 import { expect, it } from 'vitest'
 import { Instrumentation } from './instrumentation'
 
-it('should add instrumentation', () => {
+it('should add instrumentation using start/end markers', () => {
   let I = new Instrumentation()
 
   I.start('Foo')
@@ -35,6 +35,83 @@ it('should add instrumentation', () => {
   })
 })
 
+it('should measure callbacks via the `span` api', () => {
+  let I = new Instrumentation()
+
+  I.span('Foo', () => {
+    let x = 1
+    for (let i = 0; i < 100; i++) {
+      I.span('Bar', () => {
+        x **= 2
+      })
+    }
+  })
+
+  expect.assertions(1)
+
+  I.report((output) => {
+    expect(stripVTControlCharacters(output).replace(/\[.*\]/g, '[0.xxms]')).toMatchInlineSnapshot(`
+      "
+      [0.xxms] Foo
+      [0.xxms]   ↳ Bar × 100
+      "
+    `)
+  })
+})
+
+it('should measure async callbacks via the `span` api', async () => {
+  let I = new Instrumentation()
+
+  await I.span('Foo', async () => {
+    let x = 1
+    for (let i = 0; i < 100; i++) {
+      I.span('Bar', () => {
+        x **= 2
+      })
+    }
+    await new Promise((r) => setTimeout(r, 500))
+  })
+
+  expect.assertions(2)
+
+  I.report((output) => {
+    expect(stripVTControlCharacters(output).replace(/\[.*\]/g, '[0.xxms]')).toMatchInlineSnapshot(`
+      "
+      [0.xxms] Foo
+      [0.xxms]   ↳ Bar × 100
+      "
+    `)
+
+    let [, duration] = stripVTControlCharacters(output).match(/\[(.*)\]/)!
+    expect(parseFloat(duration)).toBeGreaterThanOrEqual(500 - 2 /* Margin of error */)
+  })
+})
+
+it('should measure blocks until they go out of scope via `using`', () => {
+  let I = new Instrumentation()
+
+  {
+    using _ = I.track('Foo')
+
+    let x = 1
+    for (let i = 0; i < 100; i++) {
+      using _ = I.track('Bar')
+      x **= 2
+    }
+  }
+
+  expect.assertions(1)
+
+  I.report((output) => {
+    expect(stripVTControlCharacters(output).replace(/\[.*\]/g, '[0.xxms]')).toMatchInlineSnapshot(`
+      "
+      [0.xxms] Foo
+      [0.xxms]   ↳ Bar × 100
+      "
+    `)
+  })
+})
+
 it('should auto end pending timers when reporting', () => {
   let I = new Instrumentation()
 
diff --git a/packages/@tailwindcss-node/src/instrumentation.ts b/packages/@tailwindcss-node/src/instrumentation.ts
index d27858d88..e454e6744 100644
--- a/packages/@tailwindcss-node/src/instrumentation.ts
+++ b/packages/@tailwindcss-node/src/instrumentation.ts
@@ -13,6 +13,7 @@ export class Instrumentation implements Disposable {
   #timerStack: { id: string; label: string; namespace: string; value: bigint }[] = []
 
   constructor(
+    private shouldReport = env.DEBUG,
     private defaultFlush = (message: string) => void process.stderr.write(`${message}\n`),
   ) {}
 
@@ -48,6 +49,41 @@ export class Instrumentation implements Disposable {
     this.#timers.get(parent.id).value += elapsed
   }
 
+  track(label: string) {
+    this.start(label)
+    let done = false
+
+    return {
+      [Symbol.dispose]: () => {
+        if (!done) {
+          this.end(label)
+          done = true
+        }
+      },
+      [Symbol.asyncDispose]: () => {
+        if (!done) {
+          this.end(label)
+          done = true
+        }
+      },
+    }
+  }
+
+  span<T>(label: string, fn: () => T): T {
+    this.start(label)
+    let isPromise = false
+    try {
+      let result = fn()
+
+      isPromise = result && typeof (result as any).then === 'function'
+
+      // @ts-expect-error — TS can't infer that result is a Promise here
+      return isPromise ? result.finally(() => this.end(label)) : result
+    } finally {
+      if (!isPromise) this.end(label)
+    }
+  }
+
   reset() {
     this.#hits.clear()
     this.#timers.clear()
@@ -100,7 +136,7 @@ export class Instrumentation implements Disposable {
   }
 
   [Symbol.dispose]() {
-    env.DEBUG && this.report()
+    this.shouldReport && this.report()
   }
 }
 
diff --git a/packages/@tailwindcss-node/src/optimize.ts b/packages/@tailwindcss-node/src/optimize.ts
index 6e60f8b87..2f0d39589 100644
--- a/packages/@tailwindcss-node/src/optimize.ts
+++ b/packages/@tailwindcss-node/src/optimize.ts
@@ -61,10 +61,14 @@ export function optimize(
   map = result.map?.toString()
 
   result.warnings = result.warnings.filter((warning) => {
-    // Ignore warnings about unknown pseudo-classes as they are likely caused
-    // by the use of `:deep()`, `:slotted()`, and `:global()` which are not
-    // standard CSS but are commonly used in frameworks like Vue.
-    if (/'(deep|slotted|global)' is not recognized as a valid pseudo-/.test(warning.message)) {
+    // Ignore warnings about unknown pseudo-classes that are used in frameworks
+    // such as Vue or Angular and are handled by their own compilers, before
+    // reaching the browser.
+    if (
+      /'(deep|slotted|global|ng-deep|host-context)' is not recognized as a valid pseudo-/.test(
+        warning.message,
+      )
+    ) {
       return false
     }
 
diff --git a/packages/@tailwindcss-node/src/require-cache.ts b/packages/@tailwindcss-node/src/require-cache.ts
new file mode 100644
index 000000000..ea0562019
--- /dev/null
+++ b/packages/@tailwindcss-node/src/require-cache.ts
@@ -0,0 +1,5 @@
+export function clearRequireCache(files: string[]) {
+  for (let key of files) {
+    delete require.cache[key]
+  }
+}
diff --git a/packages/@tailwindcss-node/tsconfig.json b/packages/@tailwindcss-node/tsconfig.json
index 6ae022f65..d2131cbeb 100644
--- a/packages/@tailwindcss-node/tsconfig.json
+++ b/packages/@tailwindcss-node/tsconfig.json
@@ -1,3 +1,6 @@
 {
   "extends": "../tsconfig.base.json",
+  "compilerOptions": {
+    "verbatimModuleSyntax": false,
+  },
 }
diff --git a/packages/@tailwindcss-postcss/README.md b/packages/@tailwindcss-postcss/README.md
index 6aec3fe25..3facf2887 100644
--- a/packages/@tailwindcss-postcss/README.md
+++ b/packages/@tailwindcss-postcss/README.md
@@ -109,18 +109,3 @@ export default {
   ],
 }
 ```
-
-You may also pass options to `optimize` to enable Lighting CSS but prevent minification:
-
-```js
-import tailwindcss from '@tailwindcss/postcss'
-
-export default {
-  plugins: [
-    tailwindcss({
-      // Enables Lightning CSS but disables minification
-      optimize: { minify: false },
-    }),
-  ],
-}
-```
diff --git a/packages/@tailwindcss-postcss/package.json b/packages/@tailwindcss-postcss/package.json
index 922857a90..891578509 100644
--- a/packages/@tailwindcss-postcss/package.json
+++ b/packages/@tailwindcss-postcss/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@tailwindcss/postcss",
-  "version": "4.2.2",
+  "version": "4.3.3",
   "description": "PostCSS plugin for Tailwind CSS, a utility-first CSS framework for rapidly building custom user interfaces",
   "license": "MIT",
   "repository": {
@@ -24,22 +24,27 @@
   },
   "exports": {
     ".": {
-      "types": "./dist/index.d.ts",
-      "import": "./dist/index.mjs",
-      "require": "./dist/index.js"
+      "import": {
+        "types": "./dist/index.d.mts",
+        "default": "./dist/index.mjs"
+      },
+      "require": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.js"
+      }
     }
   },
   "dependencies": {
     "@alloc/quick-lru": "^5.2.0",
     "@tailwindcss/node": "workspace:*",
     "@tailwindcss/oxide": "workspace:*",
-    "postcss": "^8.5.6",
+    "postcss": "catalog:",
     "tailwindcss": "workspace:*"
   },
   "devDependencies": {
     "@types/node": "catalog:",
     "@types/postcss-import": "14.0.3",
-    "dedent": "1.7.1",
+    "dedent": "catalog:",
     "internal-example-plugin": "workspace:*",
     "postcss-import": "^16.1.1"
   }
diff --git a/packages/@tailwindcss-postcss/src/__snapshots__/index.test.ts.snap b/packages/@tailwindcss-postcss/src/__snapshots__/index.test.ts.snap
index fd6db912c..05087fa39 100644
--- a/packages/@tailwindcss-postcss/src/__snapshots__/index.test.ts.snap
+++ b/packages/@tailwindcss-postcss/src/__snapshots__/index.test.ts.snap
@@ -1,7 +1,8 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`\`@import 'tailwindcss'\` is replaced with the generated CSS 1`] = `
-"@layer properties {
+"
+@layer properties {
   @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
     *, :before, :after, ::backdrop {
       --tw-font-weight: initial;
@@ -11,8 +12,8 @@ exports[`\`@import 'tailwindcss'\` is replaced with the generated CSS 1`] = `
 
 @layer theme {
   :root, :host {
-    --font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
-    "Noto Color Emoji";
+    --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial,
+    sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
     --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New",
     monospace;
     --color-black: #000;
@@ -43,7 +44,7 @@ exports[`\`@import 'tailwindcss'\` is replaced with the generated CSS 1`] = `
     -webkit-text-size-adjust: 100%;
     tab-size: 4;
     line-height: 1.5;
-    font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
+    font-family: var(--default-font-family, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
     font-feature-settings: var(--default-font-feature-settings, normal);
     font-variation-settings: var(--default-font-variation-settings, normal);
     -webkit-tap-highlight-color: transparent;
@@ -109,7 +110,7 @@ exports[`\`@import 'tailwindcss'\` is replaced with the generated CSS 1`] = `
     border-collapse: collapse;
   }
 
-  :-moz-focusring {
+  :-moz-focusring:where(:not(iframe)) {
     outline: auto;
   }
 
@@ -304,5 +305,6 @@ exports[`\`@import 'tailwindcss'\` is replaced with the generated CSS 1`] = `
 @property --tw-font-weight {
   syntax: "*";
   inherits: false
-}"
+}
+"
 `;
diff --git a/packages/@tailwindcss-postcss/src/index.test.ts b/packages/@tailwindcss-postcss/src/index.test.ts
index ff12e09ef..b393cc382 100644
--- a/packages/@tailwindcss-postcss/src/index.test.ts
+++ b/packages/@tailwindcss-postcss/src/index.test.ts
@@ -4,6 +4,7 @@ import { tmpdir } from 'node:os'
 import path from 'path'
 import postcss from 'postcss'
 import { afterEach, beforeEach, describe, expect, test, vi } from 'vitest'
+import { pretty } from '../../tailwindcss/src/test-utils/run'
 import tailwindcss from './index'
 
 // We give this file path to PostCSS for processing.
@@ -19,6 +20,16 @@ function inputCssFilePath() {
 
 const css = dedent
 
+async function run(plugin: any, from: string, input: string): Promise<string> {
+  let ast = postcss.parse(input)
+  for (let runner of plugin.plugins) {
+    if (runner.Once) {
+      await runner.Once(ast, { postcss, result: { opts: { from }, messages: [] } })
+    }
+  }
+  return ast.toString()
+}
+
 test("`@import 'tailwindcss'` is replaced with the generated CSS", async () => {
   let processor = postcss([
     tailwindcss({ base: `${__dirname}/fixtures/example-project`, optimize: { minify: false } }),
@@ -26,7 +37,7 @@ test("`@import 'tailwindcss'` is replaced with the generated CSS", async () => {
 
   let result = await processor.process(`@import 'tailwindcss'`, { from: inputCssFilePath() })
 
-  expect(result.css.trim()).toMatchSnapshot()
+  expect(pretty(result.css)).toMatchSnapshot()
 
   // Check for dependency messages
   expect(result.messages).toContainEqual({
@@ -72,8 +83,9 @@ test('output is optimized by Lightning CSS', async () => {
     { from: inputCssFilePath() },
   )
 
-  expect(result.css.trim()).toMatchInlineSnapshot(`
-    "@layer utilities {
+  expect(pretty(result.css)).toMatchInlineSnapshot(`
+    "
+    @layer utilities {
       .foo {
         color: #000;
       }
@@ -81,7 +93,8 @@ test('output is optimized by Lightning CSS', async () => {
       .bar {
         color: red;
       }
-    }"
+    }
+    "
   `)
 })
 
@@ -100,10 +113,12 @@ test('@apply can be used without emitting the theme in the CSS file', async () =
     { from: inputCssFilePath() },
   )
 
-  expect(result.css.trim()).toMatchInlineSnapshot(`
-    ".foo {
+  expect(pretty(result.css)).toMatchInlineSnapshot(`
+    "
+    .foo {
       color: var(--color-red-500, oklch(63.7% .237 25.331));
-    }"
+    }
+    "
   `)
 })
 
@@ -120,7 +135,7 @@ describe('processing without specifying a base path', () => {
   afterEach(() => unlink(filepath))
 
   test('the current working directory is used by default', async () => {
-    const spy = vi.spyOn(process, 'cwd')
+    using spy = vi.spyOn(process, 'cwd')
     spy.mockReturnValue(dir)
 
     let processor = postcss([tailwindcss({ optimize: { minify: false } })])
@@ -140,6 +155,18 @@ describe('processing without specifying a base path', () => {
   })
 })
 
+test('fallback to `base` directory when `result.opts.from` is not provided', async () => {
+  using _ = vi.spyOn(console, 'warn').mockImplementation(() => {})
+
+  let processor = postcss([
+    tailwindcss({ base: `${__dirname}/fixtures/example-project`, optimize: { minify: false } }),
+  ])
+
+  let result = await processor.process(`@import 'tailwindcss'`)
+
+  expect(result.css.length).toBeGreaterThan(0)
+})
+
 describe('plugins', () => {
   test('local CJS plugin', async () => {
     let processor = postcss([
@@ -154,8 +181,9 @@ describe('plugins', () => {
       { from: inputCssFilePath() },
     )
 
-    expect(result.css.trim()).toMatchInlineSnapshot(`
-      ".underline {
+    expect(pretty(result.css)).toMatchInlineSnapshot(`
+      "
+      .underline {
         text-decoration-line: underline;
       }
 
@@ -167,7 +195,8 @@ describe('plugins', () => {
 
       .hocus\\:underline:focus, .hocus\\:underline:hover {
         text-decoration-line: underline;
-      }"
+      }
+      "
     `)
   })
 
@@ -184,8 +213,9 @@ describe('plugins', () => {
       { from: `${__dirname}/fixtures/another-project/input.css` },
     )
 
-    expect(result.css.trim()).toMatchInlineSnapshot(`
-      ".underline {
+    expect(pretty(result.css)).toMatchInlineSnapshot(`
+      "
+      .underline {
         text-decoration-line: underline;
       }
 
@@ -197,7 +227,8 @@ describe('plugins', () => {
 
       .hocus\\:underline:focus, .hocus\\:underline:hover {
         text-decoration-line: underline;
-      }"
+      }
+      "
     `)
   })
 
@@ -214,8 +245,9 @@ describe('plugins', () => {
       { from: inputCssFilePath() },
     )
 
-    expect(result.css.trim()).toMatchInlineSnapshot(`
-      ".underline {
+    expect(pretty(result.css)).toMatchInlineSnapshot(`
+      "
+      .underline {
         text-decoration-line: underline;
       }
 
@@ -227,7 +259,8 @@ describe('plugins', () => {
 
       .hocus\\:underline:focus, .hocus\\:underline:hover {
         text-decoration-line: underline;
-      }"
+      }
+      "
     `)
   })
 })
@@ -250,10 +283,12 @@ test('bail early when Tailwind is not used', async () => {
   // didn't use `@tailwind utilities` we didn't scan for utilities.
   expect(result.css).not.toContain('.underline {')
 
-  expect(result.css.trim()).toMatchInlineSnapshot(`
-    ".custom-css {
+  expect(pretty(result.css)).toMatchInlineSnapshot(`
+    "
+    .custom-css {
       color: red;
-    }"
+    }
+    "
   `)
 })
 
@@ -275,12 +310,14 @@ test('handle CSS when only using a `@reference` (we should not bail early)', asy
     { from: inputCssFilePath() },
   )
 
-  expect(result.css.trim()).toMatchInlineSnapshot(`
-    "@media (min-width: 48rem) {
+  expect(pretty(result.css)).toMatchInlineSnapshot(`
+    "
+    @media (min-width: 48rem) {
       .foo {
         bar: baz;
       }
-    }"
+    }
+    "
   `)
 })
 
@@ -300,10 +337,12 @@ test('handle CSS when using a `@variant` using variants that do not rely on the
     { from: inputCssFilePath() },
   )
 
-  expect(result.css.trim()).toMatchInlineSnapshot(`
-    ".foo[data-is-hoverable] {
+  expect(pretty(result.css)).toMatchInlineSnapshot(`
+    "
+    .foo[data-is-hoverable] {
       bar: baz;
-    }"
+    }
+    "
   `)
 })
 
@@ -338,23 +377,29 @@ test('runs `Once` plugins in the right order', async () => {
     { from: inputCssFilePath() },
   )
 
-  expect(result.css.trim()).toMatchInlineSnapshot(`
-    ".custom-css {
+  expect(pretty(result.css)).toMatchInlineSnapshot(`
+    "
+    .custom-css {
       color: red;
-    }"
+    }
+    "
   `)
-  expect(before).toMatchInlineSnapshot(`
-    "@theme {
+  expect(pretty(before)).toMatchInlineSnapshot(`
+    "
+    @theme {
       --color-red-500: red;
     }
     .custom-css {
       color: theme(--color-red-500);
-    }"
+    }
+    "
   `)
-  expect(after).toMatchInlineSnapshot(`
-    ".custom-css {
+  expect(pretty(after)).toMatchInlineSnapshot(`
+    "
+    .custom-css {
       color: red;
-    }"
+    }
+    "
   `)
 })
 
@@ -379,7 +424,7 @@ describe('concurrent builds', () => {
   afterEach(() => rm(dir, { recursive: true, force: true }))
 
   test('does experience a race-condition when calling the plugin two times for the same change', async () => {
-    const spy = vi.spyOn(process, 'cwd')
+    using spy = vi.spyOn(process, 'cwd')
     spy.mockReturnValue(dir)
 
     let from = path.join(dir, 'index.css')
@@ -387,17 +432,7 @@ describe('concurrent builds', () => {
 
     let plugin = tailwindcss({ optimize: { minify: false } })
 
-    async function run(input: string): Promise<string> {
-      let ast = postcss.parse(input)
-      for (let runner of (plugin as any).plugins) {
-        if (runner.Once) {
-          await runner.Once(ast, { postcss, result: { opts: { from }, messages: [] } })
-        }
-      }
-      return ast.toString()
-    }
-
-    let result = await run(input)
+    let result = await run(plugin, from, input)
 
     expect(result).toContain('.underline')
 
@@ -413,14 +448,51 @@ describe('concurrent builds', () => {
       `,
     )
 
-    let promise1 = run(input)
-    let promise2 = run(input)
+    let promise1 = run(plugin, from, input)
+    let promise2 = run(plugin, from, input)
 
     expect(await promise1).toContain('.red')
     expect(await promise2).toContain('.red')
   })
 })
 
+test('rebuilds when the input CSS changes even if the `from` file on disk did not', async () => {
+  let dir = await mkdtemp(path.join(tmpdir(), 'tw-postcss'))
+  // The `from` file exists on disk with a stable mtime. The input CSS is handed
+  // to the plugin directly (as a preprocessor like Sass would produce it), so it
+  // can change without `from`'s mtime ever changing.
+  await writeFile(path.join(dir, 'index.css'), '')
+
+  let from = path.join(dir, 'index.css')
+  let plugin = tailwindcss({ base: dir, optimize: { minify: false } })
+
+  let first = await run(
+    plugin,
+    from,
+    css`
+      @tailwind utilities;
+      .first {
+        @apply underline;
+      }
+    `,
+  )
+  let second = await run(
+    plugin,
+    from,
+    css`
+      @tailwind utilities;
+      .second {
+        @apply line-through;
+      }
+    `,
+  )
+
+  expect(first).toContain('.first')
+  expect(second).toContain('.second')
+
+  await rm(dir, { recursive: true, force: true })
+})
+
 test('does not register the input file as a dependency, even if it is passed in as relative path', async () => {
   let processor = postcss([
     tailwindcss({ base: `${__dirname}/fixtures/example-project`, optimize: { minify: false } }),
@@ -428,10 +500,12 @@ test('does not register the input file as a dependency, even if it is passed in
 
   let result = await processor.process(`@tailwind utilities`, { from: './input.css' })
 
-  expect(result.css.trim()).toMatchInlineSnapshot(`
-    ".underline {
+  expect(pretty(result.css)).toMatchInlineSnapshot(`
+    "
+    .underline {
       text-decoration-line: underline;
-    }"
+    }
+    "
   `)
 
   // Check for dependency messages
diff --git a/packages/@tailwindcss-postcss/src/index.ts b/packages/@tailwindcss-postcss/src/index.ts
index 2ff4405b6..a4a8d9326 100644
--- a/packages/@tailwindcss-postcss/src/index.ts
+++ b/packages/@tailwindcss-postcss/src/index.ts
@@ -20,6 +20,7 @@ const DEBUG = env.DEBUG
 
 interface CacheEntry {
   mtimes: Map<string, number>
+  inputCss: string
   compiler: null | ReturnType<typeof compileAst>
   scanner: null | Scanner
   tailwindCssAst: AstNode[]
@@ -34,6 +35,7 @@ function getContextFromCache(postcss: Postcss, inputFile: string, opts: PluginOp
   if (cache.has(key)) return cache.get(key)!
   let entry = {
     mtimes: new Map<string, number>(),
+    inputCss: '',
     compiler: null,
     scanner: null,
 
@@ -115,7 +117,7 @@ function tailwindcss(opts: PluginOptions = {}): AcceptedPlugin {
           }
 
           let context = getContextFromCache(postcss, inputFile, opts)
-          let inputBasePath = path.dirname(path.resolve(inputFile))
+          let inputBasePath = inputFile ? path.dirname(path.resolve(inputFile)) : base
 
           // Whether this is the first build or not, if it is, then we can
           // optimize the build by not creating the compiler until we need it.
@@ -194,12 +196,22 @@ function tailwindcss(opts: PluginOptions = {}): AcceptedPlugin {
                 rebuildStrategy = 'full'
                 context.mtimes.set(file, changedTime)
               }
+
+              // The mtimes above only track files on disk. When the input CSS is
+              // generated by another tool (e.g. Sass) and passed to `process()`,
+              // it can change without any tracked file's mtime changing, so also
+              // rebuild when the input CSS itself differs from the last build.
+              let inputCss = root.source?.input.css ?? root.toString()
+              if (context.inputCss !== inputCss) {
+                rebuildStrategy = 'full'
+                context.inputCss = inputCss
+              }
             }
             DEBUG && I.end('Register full rebuild paths')
 
             if (
               rebuildStrategy === 'full' &&
-              // We can re-use the compiler if it was created during the
+              // We can reuse the compiler if it was created during the
               // initial build. If it wasn't, we need to create a new one.
               !isInitialBuild
             ) {
diff --git a/packages/@tailwindcss-postcss/src/postcss-fix-relative-paths/index.test.ts b/packages/@tailwindcss-postcss/src/postcss-fix-relative-paths/index.test.ts
index d2f72f664..fd90c483e 100644
--- a/packages/@tailwindcss-postcss/src/postcss-fix-relative-paths/index.test.ts
+++ b/packages/@tailwindcss-postcss/src/postcss-fix-relative-paths/index.test.ts
@@ -4,6 +4,7 @@ import postcss from 'postcss'
 import atImport from 'postcss-import'
 import { describe, expect, test } from 'vitest'
 import fixRelativePathsPlugin from '.'
+import { pretty } from '../../../tailwindcss/src/test-utils/run'
 
 describe('fixRelativePathsPlugin', () => {
   test('rewrites @source and @plugin to be relative to the initial css file', async () => {
@@ -14,11 +15,13 @@ describe('fixRelativePathsPlugin', () => {
 
     let result = await processor.process(css, { from: cssPath })
 
-    expect(result.css.trim()).toMatchInlineSnapshot(`
-      "@source "../../example-project/src/**/*.ts";
+    expect(pretty(result.css)).toMatchInlineSnapshot(`
+      "
+      @source "../../example-project/src/**/*.ts";
       @source "!../../example-project/src/**/*.ts";
       @plugin "../../example-project/src/plugin.js";
-      @plugin "../../example-project/src/what\\"s-this.js";"
+      @plugin "../../example-project/src/what\\"s-this.js";
+      "
     `)
   })
 
@@ -30,11 +33,13 @@ describe('fixRelativePathsPlugin', () => {
 
     let result = await processor.process(css, { from: cssPath })
 
-    expect(result.css.trim()).toMatchInlineSnapshot(`
-      "@plugin "/absolute/paths";
+    expect(pretty(result.css)).toMatchInlineSnapshot(`
+      "
+      @plugin "/absolute/paths";
       @plugin "C:\\Program Files\\HAL 9000";
       @plugin "\\\\Media\\Pictures\\Worth\\1000 words";
-      @plugin "some-node-dep";"
+      @plugin "some-node-dep";
+      "
     `)
   })
 
@@ -46,13 +51,16 @@ describe('fixRelativePathsPlugin', () => {
 
     let result = await processor.process(css, { from: cssPath })
 
-    expect(result.css.trim()).toMatchInlineSnapshot(`
-      "@plugin './plugin-in-sibling.ts';
+    expect(pretty(result.css)).toMatchInlineSnapshot(`
+      "
+      @plugin './plugin-in-sibling.ts';
       @plugin '../plugin-in-sibling.ts';
       @plugin 'plugin-in-sibling';
+
       @plugin './plugin-in-root.ts';
       @plugin '../plugin-in-root.ts';
-      @plugin 'plugin-in-root';"
+      @plugin 'plugin-in-root';
+      "
     `)
   })
 })
diff --git a/packages/@tailwindcss-postcss/tsconfig.json b/packages/@tailwindcss-postcss/tsconfig.json
index 6ae022f65..d2131cbeb 100644
--- a/packages/@tailwindcss-postcss/tsconfig.json
+++ b/packages/@tailwindcss-postcss/tsconfig.json
@@ -1,3 +1,6 @@
 {
   "extends": "../tsconfig.base.json",
+  "compilerOptions": {
+    "verbatimModuleSyntax": false,
+  },
 }
diff --git a/packages/@tailwindcss-standalone/package.json b/packages/@tailwindcss-standalone/package.json
index 4372188d2..24f8c93c7 100644
--- a/packages/@tailwindcss-standalone/package.json
+++ b/packages/@tailwindcss-standalone/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@tailwindcss/standalone",
-  "version": "4.2.2",
+  "version": "4.3.3",
   "private": true,
   "description": "Standalone CLI for Tailwind CSS",
   "license": "MIT",
@@ -28,22 +28,22 @@
     "@tailwindcss/aspect-ratio": "^0.4.2",
     "@tailwindcss/cli": "workspace:*",
     "@tailwindcss/forms": "^0.5.11",
-    "@tailwindcss/typography": "^0.5.19",
+    "@tailwindcss/typography": "^0.5.20",
     "detect-libc": "1.0.3",
-    "enhanced-resolve": "^5.19.0",
+    "enhanced-resolve": "catalog:",
     "tailwindcss": "workspace:*"
   },
   "__notes": "These binary packages must be included so Bun can build the CLI for all supported platforms. We also rely on Lightning CSS and Parcel being patched so Bun can statically analyze the executables.",
   "devDependencies": {
-    "@parcel/watcher-darwin-arm64": "^2.5.6",
-    "@parcel/watcher-darwin-x64": "^2.5.6",
-    "@parcel/watcher-linux-arm64-glibc": "^2.5.6",
-    "@parcel/watcher-linux-arm64-musl": "^2.5.6",
-    "@parcel/watcher-linux-x64-glibc": "^2.5.6",
-    "@parcel/watcher-linux-x64-musl": "^2.5.6",
-    "@parcel/watcher-win32-x64": "^2.5.6",
-    "@types/bun": "^1.3.9",
-    "bun": "^1.3.9",
+    "@parcel/watcher-darwin-arm64": "catalog:",
+    "@parcel/watcher-darwin-x64": "catalog:",
+    "@parcel/watcher-linux-arm64-glibc": "catalog:",
+    "@parcel/watcher-linux-arm64-musl": "catalog:",
+    "@parcel/watcher-linux-x64-glibc": "catalog:",
+    "@parcel/watcher-linux-x64-musl": "catalog:",
+    "@parcel/watcher-win32-x64": "catalog:",
+    "@types/bun": "^1.3.14",
+    "bun": "^1.3.14",
     "lightningcss-darwin-arm64": "catalog:",
     "lightningcss-darwin-x64": "catalog:",
     "lightningcss-linux-arm64-gnu": "catalog:",
diff --git a/packages/@tailwindcss-standalone/scripts/build.ts b/packages/@tailwindcss-standalone/scripts/build.ts
index 7ff572d3b..0aee26435 100644
--- a/packages/@tailwindcss-standalone/scripts/build.ts
+++ b/packages/@tailwindcss-standalone/scripts/build.ts
@@ -60,9 +60,6 @@ for (let { target, name } of builds) {
 
       // This simplifies the Oxide loading code a small amount
       'process.env.NAPI_RS_NATIVE_LIBRARY_PATH': JSON.stringify(''),
-
-      // No need to support additional NODE_PATHs in the standalone build
-      'process.env.NODE_PATH': JSON.stringify(''),
     },
 
     compile: {
diff --git a/packages/@tailwindcss-standalone/src/types.d.ts b/packages/@tailwindcss-standalone/src/types.d.ts
index 3212ac5b6..0b5deb6ea 100644
--- a/packages/@tailwindcss-standalone/src/types.d.ts
+++ b/packages/@tailwindcss-standalone/src/types.d.ts
@@ -6,6 +6,5 @@ declare module '*.css' {
 declare var __tw_version: string | undefined
 declare var __tw_resolve: undefined | ((id: string, base?: string) => string | false)
 declare var __tw_readFile:
-  | undefined
-  | ((path: string, encoding: BufferEncoding) => Promise<string | undefined>)
+  undefined | ((path: string, encoding: BufferEncoding) => Promise<string | undefined>)
 declare var __tw_load: undefined | ((path: string) => Promise<object | undefined>)
diff --git a/packages/@tailwindcss-turbopack/README.md b/packages/@tailwindcss-turbopack/README.md
new file mode 100644
index 000000000..ee54b4d03
--- /dev/null
+++ b/packages/@tailwindcss-turbopack/README.md
@@ -0,0 +1,99 @@
+<p align="center">
+  <a href="https://tailwindcss.com" target="_blank">
+    <picture>
+      <source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/tailwindlabs/tailwindcss/HEAD/.github/logo-dark.svg">
+      <source media="(prefers-color-scheme: light)" srcset="https://raw.githubusercontent.com/tailwindlabs/tailwindcss/HEAD/.github/logo-light.svg">
+      <img alt="Tailwind CSS" src="https://raw.githubusercontent.com/tailwindlabs/tailwindcss/HEAD/.github/logo-light.svg" width="350" height="70" style="max-width: 100%;">
+    </picture>
+  </a>
+</p>
+
+<p align="center">
+  A utility-first CSS framework for rapidly building custom user interfaces.
+</p>
+
+<p align="center">
+    <a href="https://github.com/tailwindlabs/tailwindcss/actions"><img src="https://img.shields.io/github/actions/workflow/status/tailwindlabs/tailwindcss/ci.yml?branch=main" alt="Build Status"></a>
+    <a href="https://www.npmjs.com/package/tailwindcss"><img src="https://img.shields.io/npm/dt/tailwindcss.svg" alt="Total Downloads"></a>
+    <a href="https://github.com/tailwindlabs/tailwindcss/releases"><img src="https://img.shields.io/npm/v/tailwindcss.svg" alt="Latest Release"></a>
+    <a href="https://github.com/tailwindlabs/tailwindcss/blob/main/LICENSE"><img src="https://img.shields.io/npm/l/tailwindcss.svg" alt="License"></a>
+</p>
+
+---
+
+## Documentation
+
+For full documentation, visit [tailwindcss.com](https://tailwindcss.com).
+
+## Community
+
+For help, discussion about best practices, or feature ideas:
+
+[Discuss Tailwind CSS on GitHub](https://github.com/tailwindlabs/tailwindcss/discussions)
+
+## Contributing
+
+If you're interested in contributing to Tailwind CSS, please read our [contributing docs](https://github.com/tailwindlabs/tailwindcss/blob/main/.github/CONTRIBUTING.md) **before submitting a pull request**.
+
+---
+
+## @tailwindcss/turbopack
+
+A Turbopack loader for Tailwind CSS v4.
+
+## Installation
+
+```sh
+npm install @tailwindcss/turbopack
+```
+
+### Usage
+
+```javascript
+// next.config.js
+module.exports = {
+  turbopack: {
+    rules: {
+      '*.css': {
+        loaders: ['@tailwindcss/turbopack'],
+        as: '*.css',
+      },
+    },
+  },
+}
+```
+
+Then create a CSS file that imports Tailwind:
+
+```css
+/* src/index.css */
+@import 'tailwindcss';
+```
+
+### Options
+
+#### `base`
+
+The base directory to scan for class candidates. Defaults to the current working directory.
+
+```javascript
+{
+  loader: '@tailwindcss/turbopack',
+  options: {
+    base: process.cwd(),
+  },
+}
+```
+
+#### `optimize`
+
+Whether to optimize and minify the output CSS. Defaults to `true` in production mode.
+
+```javascript
+{
+  loader: '@tailwindcss/turbopack',
+  options: {
+    optimize: true, // or { minify: true }
+  },
+}
+```
diff --git a/packages/@tailwindcss-turbopack/package.json b/packages/@tailwindcss-turbopack/package.json
new file mode 100644
index 000000000..abdbbe90e
--- /dev/null
+++ b/packages/@tailwindcss-turbopack/package.json
@@ -0,0 +1,43 @@
+{
+  "name": "@tailwindcss/turbopack",
+  "version": "4.3.3",
+  "description": "A Turbopack loader for Tailwind CSS v4.",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/tailwindlabs/tailwindcss.git",
+    "directory": "packages/@tailwindcss-turbopack"
+  },
+  "bugs": "https://github.com/tailwindlabs/tailwindcss/issues",
+  "homepage": "https://tailwindcss.com",
+  "scripts": {
+    "build": "tsup-node",
+    "dev": "pnpm run build -- --watch"
+  },
+  "files": [
+    "dist/"
+  ],
+  "publishConfig": {
+    "provenance": true,
+    "access": "public"
+  },
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js"
+    }
+  },
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "dependencies": {
+    "@alloc/quick-lru": "^5.2.0",
+    "@tailwindcss/node": "workspace:*",
+    "@tailwindcss/oxide": "workspace:*",
+    "tailwindcss": "workspace:*"
+  },
+  "devDependencies": {
+    "@types/node": "catalog:",
+    "webpack": "catalog:"
+  }
+}
diff --git a/packages/@tailwindcss-turbopack/src/index.cts b/packages/@tailwindcss-turbopack/src/index.cts
new file mode 100644
index 000000000..dbdded748
--- /dev/null
+++ b/packages/@tailwindcss-turbopack/src/index.cts
@@ -0,0 +1,5 @@
+import tailwindLoader from './index.ts'
+
+// CommonJS export for webpack loaders - must be the function directly
+// @ts-ignore
+export = tailwindLoader
diff --git a/packages/@tailwindcss-turbopack/src/index.ts b/packages/@tailwindcss-turbopack/src/index.ts
new file mode 100644
index 000000000..a70f28871
--- /dev/null
+++ b/packages/@tailwindcss-turbopack/src/index.ts
@@ -0,0 +1,287 @@
+import QuickLRU from '@alloc/quick-lru'
+import {
+  compile,
+  env,
+  Features,
+  Instrumentation,
+  normalizePath,
+  optimize,
+  Polyfills,
+} from '@tailwindcss/node'
+import { clearRequireCache } from '@tailwindcss/node/require-cache'
+import { Scanner } from '@tailwindcss/oxide'
+import fs from 'node:fs'
+import path from 'node:path'
+import type { LoaderContext } from 'webpack'
+
+const DEBUG = env.DEBUG
+
+export interface LoaderOptions {
+  /**
+   * The base directory to scan for class candidates.
+   *
+   * Defaults to the current working directory.
+   */
+  base?: string
+
+  /**
+   * Optimize and minify the output CSS.
+   */
+  optimize?: boolean | { minify?: boolean }
+}
+
+interface CacheEntry {
+  mtimes: Map<string, number>
+  compiler: null | Awaited<ReturnType<typeof compile>>
+  scanner: null | Scanner
+  candidates: Set<string>
+  fullRebuildPaths: string[]
+}
+
+const cache = new QuickLRU<string, CacheEntry>({ maxSize: 50 })
+
+function getCacheKey(resourceId: string, opts: LoaderOptions): string {
+  return `${resourceId}:${opts.base ?? ''}:${JSON.stringify(opts.optimize)}`
+}
+
+function getContextFromCache(resourceId: string, opts: LoaderOptions): CacheEntry {
+  let key = getCacheKey(resourceId, opts)
+  if (cache.has(key)) return cache.get(key)!
+  let entry: CacheEntry = {
+    mtimes: new Map<string, number>(),
+    compiler: null,
+    scanner: null,
+    candidates: new Set<string>(),
+    fullRebuildPaths: [],
+  }
+  cache.set(key, entry)
+  return entry
+}
+
+export default async function tailwindLoader(
+  this: LoaderContext<LoaderOptions>,
+  source: string,
+): Promise<void> {
+  let callback = this.async()
+  let options = this.getOptions() ?? {}
+  let inputFile = this.resourcePath
+  let resourceId = this.resource
+  let base = options.base ?? process.cwd()
+  let shouldOptimize = options.optimize ?? process.env.NODE_ENV === 'production'
+  let isCSSModuleFile = inputFile.endsWith('.module.css')
+
+  using I = new Instrumentation()
+
+  DEBUG && I.start(`[@tailwindcss/turbopack] ${path.relative(base, inputFile)}`)
+
+  // Bail out early if this is guaranteed to be a non-Tailwind CSS file.
+  {
+    DEBUG && I.start('Quick bail check')
+    let canBail = !/@(import|reference|theme|variant|config|plugin|apply|tailwind)\b/.test(source)
+    if (canBail) {
+      DEBUG && I.end('Quick bail check')
+      DEBUG && I.end(`[@tailwindcss/turbopack] ${path.relative(base, inputFile)}`)
+      callback(null, source)
+      return
+    }
+    DEBUG && I.end('Quick bail check')
+  }
+
+  try {
+    let context = getContextFromCache(resourceId, options)
+    let inputBasePath = path.dirname(path.resolve(inputFile))
+
+    // Whether this is the first build or not
+    let isInitialBuild = context.compiler === null
+
+    async function createCompiler() {
+      DEBUG && I.start('Setup compiler')
+      if (context.fullRebuildPaths.length > 0 && !isInitialBuild) {
+        clearRequireCache(context.fullRebuildPaths)
+      }
+
+      context.fullRebuildPaths = []
+
+      DEBUG && I.start('Create compiler')
+      let compiler = await compile(source, {
+        from: inputFile,
+        base: inputBasePath,
+        shouldRewriteUrls: true,
+        onDependency: (depPath) => context.fullRebuildPaths.push(depPath),
+        // In CSS Module files, we have to disable the `@property` polyfill since these will
+        // emit global `*` rules which are considered to be non-pure and will cause builds
+        // to fail.
+        polyfills: isCSSModuleFile ? Polyfills.All ^ Polyfills.AtProperty : Polyfills.All,
+      })
+      DEBUG && I.end('Create compiler')
+
+      DEBUG && I.end('Setup compiler')
+      return compiler
+    }
+
+    // Setup the compiler if it doesn't exist yet
+    context.compiler ??= await createCompiler()
+
+    // Early exit if no Tailwind features are used
+    if (context.compiler.features === Features.None) {
+      DEBUG && I.end(`[@tailwindcss/turbopack] ${path.relative(base, inputFile)}`)
+      callback(null, source)
+      return
+    }
+
+    let rebuildStrategy: 'full' | 'incremental' = 'incremental'
+
+    // Track file modification times to CSS files
+    DEBUG && I.start('Register full rebuild paths')
+    {
+      // Report dependencies for config files, plugins, etc.
+      for (let file of context.fullRebuildPaths) {
+        this.addDependency(path.resolve(file))
+      }
+
+      let files = [...context.fullRebuildPaths, inputFile]
+
+      for (let file of files) {
+        let changedTime: number | null = null
+        try {
+          changedTime = fs.statSync(file)?.mtimeMs ?? null
+        } catch {
+          // File might not exist
+        }
+
+        if (changedTime === null) {
+          if (file === inputFile) {
+            rebuildStrategy = 'full'
+          }
+          continue
+        }
+
+        let prevTime = context.mtimes.get(file)
+        if (prevTime === changedTime) continue
+
+        rebuildStrategy = 'full'
+        context.mtimes.set(file, changedTime)
+      }
+    }
+    DEBUG && I.end('Register full rebuild paths')
+
+    if (rebuildStrategy === 'full' && !isInitialBuild) {
+      context.compiler = await createCompiler()
+    }
+
+    let compiler = context.compiler
+
+    // Check if we need to process this file at all
+    if (
+      !(
+        compiler.features &
+        (Features.AtApply | Features.JsPluginCompat | Features.ThemeFunction | Features.Utilities)
+      )
+    ) {
+      DEBUG && I.end(`[@tailwindcss/turbopack] ${path.relative(base, inputFile)}`)
+      callback(null, source)
+      return
+    }
+
+    // Setup or update scanner if needed
+    if (context.scanner === null || rebuildStrategy === 'full') {
+      DEBUG && I.start('Setup scanner')
+      let sources = (() => {
+        // Disable auto source detection
+        if (compiler.root === 'none') {
+          return []
+        }
+
+        // No root specified, use the base directory
+        if (compiler.root === null) {
+          return [{ base, pattern: '**/*', negated: false }]
+        }
+
+        // Use the specified root
+        return [{ ...compiler.root, negated: false }]
+      })().concat(compiler.sources)
+
+      context.scanner = new Scanner({ sources })
+      DEBUG && I.end('Setup scanner')
+    }
+
+    // Scan for candidates if utilities are used
+    if (compiler.features & Features.Utilities) {
+      DEBUG && I.start('Scan for candidates')
+      for (let candidate of context.scanner.scan()) {
+        context.candidates.add(candidate)
+      }
+      DEBUG && I.end('Scan for candidates')
+
+      DEBUG && I.start('Register dependency messages')
+      // Add all found files as direct dependencies
+      let resolvedInputFile = path.resolve(base, inputFile)
+      for (let file of context.scanner.files) {
+        let absolutePath = path.resolve(file)
+        // The CSS file cannot be a dependency of itself
+        if (absolutePath === resolvedInputFile) {
+          continue
+        }
+        this.addDependency(absolutePath)
+      }
+
+      // Register context dependencies for glob patterns
+      for (let glob of context.scanner.globs) {
+        // Skip negated patterns
+        if (glob.pattern[0] === '!') continue
+
+        // Avoid adding a dependency on the base directory itself
+        if (glob.pattern === '*' && base === glob.base) {
+          continue
+        }
+
+        this.addContextDependency(path.resolve(glob.base))
+      }
+
+      // Validate that source(...) paths are directories
+      let root = compiler.root
+      if (root !== 'none' && root !== null) {
+        let basePath = normalizePath(path.resolve(root.base, root.pattern))
+        try {
+          let stats = fs.statSync(basePath)
+          if (!stats.isDirectory()) {
+            throw new Error(
+              `The path given to \`source(…)\` must be a directory but got \`source(${basePath})\` instead.`,
+            )
+          }
+        } catch (err) {
+          if ((err as NodeJS.ErrnoException).code !== 'ENOENT') {
+            throw err
+          }
+          // Directory doesn't exist yet, which is fine
+        }
+      }
+      DEBUG && I.end('Register dependency messages')
+    }
+
+    DEBUG && I.start('Build utilities')
+    let css = compiler.build([...context.candidates])
+    DEBUG && I.end('Build utilities')
+
+    // Optionally optimize the output
+    let result = css
+    if (shouldOptimize) {
+      DEBUG && I.start('Optimization')
+      let optimized = optimize(css, {
+        minify: typeof shouldOptimize === 'object' ? shouldOptimize.minify : true,
+      })
+      result = optimized.code
+      DEBUG && I.end('Optimization')
+    }
+
+    DEBUG && I.end(`[@tailwindcss/turbopack] ${path.relative(base, inputFile)}`)
+    callback(null, result)
+  } catch (error) {
+    // Clear the cache entry on error to force a full rebuild next time
+    let key = getCacheKey(resourceId, options)
+    cache.delete(key)
+
+    DEBUG && I.end(`[@tailwindcss/turbopack] ${path.relative(base, inputFile)}`)
+    callback(error as Error)
+  }
+}
diff --git a/packages/@tailwindcss-turbopack/tsconfig.json b/packages/@tailwindcss-turbopack/tsconfig.json
new file mode 100644
index 000000000..d2131cbeb
--- /dev/null
+++ b/packages/@tailwindcss-turbopack/tsconfig.json
@@ -0,0 +1,6 @@
+{
+  "extends": "../tsconfig.base.json",
+  "compilerOptions": {
+    "verbatimModuleSyntax": false,
+  },
+}
diff --git a/packages/@tailwindcss-turbopack/tsup.config.ts b/packages/@tailwindcss-turbopack/tsup.config.ts
new file mode 100644
index 000000000..998eebe4f
--- /dev/null
+++ b/packages/@tailwindcss-turbopack/tsup.config.ts
@@ -0,0 +1,19 @@
+import { defineConfig } from 'tsup'
+
+export default defineConfig([
+  {
+    format: ['esm'],
+    clean: true,
+    minify: true,
+    cjsInterop: true,
+    dts: true,
+    entry: ['src/index.ts'],
+  },
+  {
+    format: ['cjs'],
+    minify: true,
+    cjsInterop: true,
+    dts: true,
+    entry: ['src/index.cts'],
+  },
+])
diff --git a/packages/@tailwindcss-upgrade/package.json b/packages/@tailwindcss-upgrade/package.json
index 8f6bbb127..e960d7677 100644
--- a/packages/@tailwindcss-upgrade/package.json
+++ b/packages/@tailwindcss-upgrade/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@tailwindcss/upgrade",
-  "version": "4.2.2",
+  "version": "4.3.3",
   "description": "A utility-first CSS framework for rapidly building custom user interfaces.",
   "license": "MIT",
   "repository": {
@@ -29,24 +29,24 @@
   "dependencies": {
     "@tailwindcss/node": "workspace:*",
     "@tailwindcss/oxide": "workspace:*",
-    "dedent": "1.7.1",
-    "enhanced-resolve": "^5.19.0",
-    "globby": "^15.0.0",
-    "jiti": "^2.0.0-beta.3",
+    "dedent": "catalog:",
+    "enhanced-resolve": "catalog:",
+    "globby": "^16.2.2",
+    "jiti": "^2.7.0",
     "mri": "^1.2.0",
     "picocolors": "^1.1.1",
-    "postcss": "^8.5.6",
+    "postcss": "catalog:",
     "postcss-import": "^16.1.1",
-    "postcss-selector-parser": "^7.1.1",
+    "postcss-selector-parser": "^7.1.4",
     "prettier": "catalog:",
-    "semver": "^7.7.4",
+    "semver": "^7.8.5",
     "tailwindcss": "workspace:*",
-    "tree-sitter": "^0.22.4",
+    "tree-sitter": "^0.25.1",
     "tree-sitter-typescript": "^0.23.2"
   },
   "devDependencies": {
     "@types/node": "catalog:",
     "@types/postcss-import": "^14.0.3",
-    "@types/semver": "^7.7.1"
+    "@types/semver": "^7.8.0"
   }
 }
diff --git a/packages/@tailwindcss-upgrade/src/codemods/config/migrate-postcss.ts b/packages/@tailwindcss-upgrade/src/codemods/config/migrate-postcss.ts
index 512f3df59..e16f52287 100644
--- a/packages/@tailwindcss-upgrade/src/codemods/config/migrate-postcss.ts
+++ b/packages/@tailwindcss-upgrade/src/codemods/config/migrate-postcss.ts
@@ -2,6 +2,7 @@ import fs from 'node:fs/promises'
 import path from 'node:path'
 import { pkg } from '../../utils/packages'
 import { highlight, info, relative, success, warn } from '../../utils/renderer'
+import { writeFileSafely } from '../../utils/write-file-safely'
 
 // Migrates simple PostCSS setups. This is to cover non-dynamic config files
 // similar to the ones we have all over our docs:
@@ -50,7 +51,7 @@ export async function migratePostCSSConfig(base: string) {
       ranMigration = true
 
       if (result) {
-        await fs.writeFile(
+        await writeFileSafely(
           packageJsonPath,
           JSON.stringify({ ...packageJson, postcss: result?.json }, null, 2),
         )
@@ -76,7 +77,7 @@ export async function migratePostCSSConfig(base: string) {
         ranMigration = true
 
         if (result) {
-          await fs.writeFile(jsonConfigPath, JSON.stringify(result.json, null, 2))
+          await writeFileSafely(jsonConfigPath, JSON.stringify(result.json, null, 2))
 
           didMigrate = true
           didAddPostcssClient = result.didAddPostcssClient
@@ -206,7 +207,7 @@ async function migratePostCSSJSConfig(configPath: string): Promise<{
       newLines.push(line)
     }
   }
-  await fs.writeFile(configPath, newLines.join('\n'))
+  await writeFileSafely(configPath, newLines.join('\n'))
 
   return { didAddPostcssClient, didRemoveAutoprefixer, didRemovePostCSSImport }
 }
diff --git a/packages/@tailwindcss-upgrade/src/codemods/css/analyze.ts b/packages/@tailwindcss-upgrade/src/codemods/css/analyze.ts
index c9af6a7a3..c7058df54 100644
--- a/packages/@tailwindcss-upgrade/src/codemods/css/analyze.ts
+++ b/packages/@tailwindcss-upgrade/src/codemods/css/analyze.ts
@@ -4,11 +4,14 @@ import postcss, { type Result } from 'postcss'
 import { DefaultMap } from '../../../../tailwindcss/src/utils/default-map'
 import { segment } from '../../../../tailwindcss/src/utils/segment'
 import { Stylesheet, type StylesheetConnection } from '../../stylesheet'
+import { gitRoot } from '../../utils/git'
 import { error, highlight, relative } from '../../utils/renderer'
 import { resolveCssId } from '../../utils/resolve'
 
-export async function analyze(stylesheets: Stylesheet[]) {
-  let isIgnored = await isGitIgnored()
+export async function analyze(stylesheets: Stylesheet[], { base }: { base: string }) {
+  // Use the project's git root, instead of the `base` to ensure all
+  // `.gitignore` rules are being used.
+  let isIgnored = await isGitIgnored({ cwd: gitRoot(base) ?? base })
   let processingQueue: (() => Promise<Result>)[] = []
   let stylesheetsByFile = new DefaultMap<string, Stylesheet | null>((file) => {
     // We don't want to process ignored files (like node_modules)
diff --git a/packages/@tailwindcss-upgrade/src/codemods/css/migrate-at-apply.test.ts b/packages/@tailwindcss-upgrade/src/codemods/css/migrate-at-apply.test.ts
index b8b309e54..9f6a92008 100644
--- a/packages/@tailwindcss-upgrade/src/codemods/css/migrate-at-apply.test.ts
+++ b/packages/@tailwindcss-upgrade/src/codemods/css/migrate-at-apply.test.ts
@@ -61,21 +61,6 @@ it('should append `!` to each utility, when using `!important`', async () => {
   `)
 })
 
-// TODO: Handle SCSS syntax
-it.skip('should append `!` to each utility, when using `#{!important}`', async () => {
-  expect(
-    await migrate(css`
-      .foo {
-        @apply flex flex-col #{!important};
-      }
-    `),
-  ).toMatchInlineSnapshot(`
-    ".foo {
-      @apply flex! flex-col!;
-    }"
-  `)
-})
-
 it('should move the legacy `!` prefix, to the new `!` postfix notation', async () => {
   expect(
     await migrate(css`
diff --git a/packages/@tailwindcss-upgrade/src/codemods/css/migrate-at-layer-utilities.test.ts b/packages/@tailwindcss-upgrade/src/codemods/css/migrate-at-layer-utilities.test.ts
index ba1d06947..e115951d3 100644
--- a/packages/@tailwindcss-upgrade/src/codemods/css/migrate-at-layer-utilities.test.ts
+++ b/packages/@tailwindcss-upgrade/src/codemods/css/migrate-at-layer-utilities.test.ts
@@ -39,7 +39,7 @@ async function migrate(
     .use(sortBuckets())
     .use(formatNodes())
     .process(stylesheet.root!, { from: expect.getState().testPath })
-    .then((result) => result.css)
+    .then((result) => `\n${result.css.trim()}\n`)
 }
 
 it('should migrate simple `@layer utilities` to `@utility`', async () => {
@@ -52,9 +52,11 @@ it('should migrate simple `@layer utilities` to `@utility`', async () => {
       }
     `),
   ).toMatchInlineSnapshot(`
-    "@utility foo {
+    "
+    @utility foo {
       color: red;
-    }"
+    }
+    "
   `)
 })
 
@@ -69,13 +71,15 @@ it('should split multiple selectors in separate utilities', async () => {
       }
     `),
   ).toMatchInlineSnapshot(`
-    "@utility foo {
+    "
+    @utility foo {
       color: red;
     }
 
     @utility bar {
       color: red;
-    }"
+    }
+    "
   `)
 })
 
@@ -99,14 +103,16 @@ it('should merge `@utility` with the same name', async () => {
       }
     `),
   ).toMatchInlineSnapshot(`
-    "@utility foo {
+    "
+    @utility foo {
       color: red;
       font-weight: bold;
     }
 
     .bar {
       color: blue;
-    }"
+    }
+    "
   `)
 })
 
@@ -149,7 +155,8 @@ it('should leave non-class utilities alone', async () => {
       }
     `),
   ).toMatchInlineSnapshot(`
-    "@utility foo {
+    "
+    @utility foo {
       /* 2. */
       /* 2.1. */
       color: red;
@@ -182,7 +189,58 @@ it('should leave non-class utilities alone', async () => {
           font-weight: bold;
         }
       }
-    }"
+    }
+    "
+  `)
+})
+
+it('should not convert empty classes into `@utility` since that would make them invalid', async () => {
+  expect(
+    await migrate(css`
+      @layer utilities {
+        .good {
+          color: red;
+        }
+
+        .bad-empty {
+        }
+
+        /* Comment above */
+        .bad-with-comment-above {
+        }
+
+        .bad-with-comment-inside {
+          /* Comment inside */
+        }
+
+        .bad-with-comment-below {
+        }
+        /* Comment below */
+      }
+    `),
+  ).toMatchInlineSnapshot(`
+    "
+    @utility good {
+      color: red;
+    }
+
+    @layer utilities {
+      .bad-empty {
+      }
+
+      /* Comment above */
+      .bad-with-comment-above {
+      }
+
+      .bad-with-comment-inside {
+        /* Comment inside */
+      }
+
+      .bad-with-comment-below {
+      }
+      /* Comment below */
+    }
+    "
   `)
 })
 
@@ -204,7 +262,8 @@ it('should migrate simple `@layer utilities` with nesting to `@utility`', async
       }
     `),
   ).toMatchInlineSnapshot(`
-    "@utility foo {
+    "
+    @utility foo {
       color: red;
 
       &:hover {
@@ -214,7 +273,8 @@ it('should migrate simple `@layer utilities` with nesting to `@utility`', async
       &:focus {
         color: green;
       }
-    }"
+    }
+    "
   `)
 })
 
@@ -232,13 +292,15 @@ it('should migrate multiple simple `@layer utilities` to `@utility`', async () =
       }
     `),
   ).toMatchInlineSnapshot(`
-    "@utility foo {
+    "
+    @utility foo {
       color: red;
     }
 
     @utility bar {
       color: blue;
-    }"
+    }
+    "
   `)
 })
 
@@ -260,7 +322,8 @@ it('should not migrate Rules inside of Rules to a `@utility`', async () => {
       }
     `),
   ).toMatchInlineSnapshot(`
-    "@utility foo {
+    "
+    @utility foo {
       color: red;
     }
 
@@ -270,7 +333,8 @@ it('should not migrate Rules inside of Rules to a `@utility`', async () => {
       .baz {
         color: green;
       }
-    }"
+    }
+    "
   `)
 })
 
@@ -286,11 +350,13 @@ it('should invert at-rules to make them migrate-able', async () => {
       }
     `),
   ).toMatchInlineSnapshot(`
-    "@utility foo {
+    "
+    @utility foo {
       @media (min-width: 640px) {
         color: red;
       }
-    }"
+    }
+    "
   `)
 })
 
@@ -314,7 +380,8 @@ it('should migrate at-rules with multiple utilities and invert them', async () =
       }
     `),
   ).toMatchInlineSnapshot(`
-    "@utility foo {
+    "
+    @utility foo {
       @media (min-width: 640px) {
         color: red;
       }
@@ -324,7 +391,8 @@ it('should migrate at-rules with multiple utilities and invert them', async () =
       @media (min-width: 640px) {
         color: blue;
       }
-    }"
+    }
+    "
   `)
 })
 
@@ -356,7 +424,8 @@ it('should migrate deeply nested at-rules with multiple utilities and invert the
       }
     `),
   ).toMatchInlineSnapshot(`
-    "@utility foo {
+    "
+    @utility foo {
       @media (min-width: 640px) {
         color: red;
       }
@@ -384,7 +453,8 @@ it('should migrate deeply nested at-rules with multiple utilities and invert the
           }
         }
       }
-    }"
+    }
+    "
   `)
 })
 
@@ -398,11 +468,13 @@ it('should migrate classes with pseudo elements', async () => {
       }
     `),
   ).toMatchInlineSnapshot(`
-    "@utility no-scrollbar {
+    "
+    @utility no-scrollbar {
       &::-webkit-scrollbar {
         display: none;
       }
-    }"
+    }
+    "
   `)
 })
 
@@ -416,11 +488,13 @@ it('should migrate classes with attribute selectors', async () => {
       }
     `),
   ).toMatchInlineSnapshot(`
-    "@utility no-scrollbar {
+    "
+    @utility no-scrollbar {
       &[data-checked=''] {
         display: none;
       }
-    }"
+    }
+    "
   `)
 })
 
@@ -434,11 +508,13 @@ it('should migrate classes with element selectors', async () => {
       }
     `),
   ).toMatchInlineSnapshot(`
-    "@utility no-scrollbar {
+    "
+    @utility no-scrollbar {
       & main {
         display: none;
       }
-    }"
+    }
+    "
   `)
 })
 
@@ -452,11 +528,13 @@ it('should migrate classes attached to an element selector', async () => {
       }
     `),
   ).toMatchInlineSnapshot(`
-    "@utility no-scrollbar {
+    "
+    @utility no-scrollbar {
       &main {
         display: none;
       }
-    }"
+    }
+    "
   `)
 })
 
@@ -470,11 +548,13 @@ it('should migrate classes with id selectors', async () => {
       }
     `),
   ).toMatchInlineSnapshot(`
-    "@utility no-scrollbar {
+    "
+    @utility no-scrollbar {
       &#main {
         display: none;
       }
-    }"
+    }
+    "
   `)
 })
 
@@ -488,7 +568,8 @@ it('should migrate classes with another attached class', async () => {
       }
     `),
   ).toMatchInlineSnapshot(`
-    "@utility no-scrollbar {
+    "
+    @utility no-scrollbar {
       &.main {
         display: none;
       }
@@ -498,7 +579,8 @@ it('should migrate classes with another attached class', async () => {
       &.no-scrollbar {
         display: none;
       }
-    }"
+    }
+    "
   `)
 })
 
@@ -512,7 +594,8 @@ it('should migrate a selector with multiple classes to multiple @utility definit
       }
     `),
   ).toMatchInlineSnapshot(`
-    "@utility foo {
+    "
+    @utility foo {
       & .bar:hover .baz:focus {
         display: none;
       }
@@ -528,7 +611,8 @@ it('should migrate a selector with multiple classes to multiple @utility definit
       .foo .bar:hover &:focus {
         display: none;
       }
-    }"
+    }
+    "
   `)
 })
 
@@ -548,7 +632,8 @@ it('should merge `@utility` definitions with the same name', async () => {
       }
     `),
   ).toMatchInlineSnapshot(`
-    "@utility step {
+    "
+    @utility step {
       counter-increment: step;
 
       &:before {
@@ -556,7 +641,8 @@ it('should merge `@utility` definitions with the same name', async () => {
         @apply ml-[-41px];
         content: counter(step);
       }
-    }"
+    }
+    "
   `)
 })
 
@@ -570,7 +656,8 @@ it('should not migrate nested classes inside a `:not(…)`', async () => {
       }
     `),
   ).toMatchInlineSnapshot(`
-    "@utility foo {
+    "
+    @utility foo {
       & .bar:not(.qux):has(.baz) {
         display: none;
       }
@@ -586,7 +673,8 @@ it('should not migrate nested classes inside a `:not(…)`', async () => {
       .foo .bar:not(.qux):has(&) {
         display: none;
       }
-    }"
+    }
+    "
   `)
 })
 
@@ -620,7 +708,8 @@ it('should migrate advanced combinations', async () => {
       }
     `),
   ).toMatchInlineSnapshot(`
-    "@utility foo {
+    "
+    @utility foo {
       @media (width >= 100px) {
         @supports (display: none) {
           & .bar:not(.qux):has(.baz) {
@@ -659,7 +748,8 @@ it('should migrate advanced combinations', async () => {
           }
         }
       }
-    }"
+    }
+    "
   `)
 })
 
@@ -677,12 +767,15 @@ describe('comments', () => {
         }
       `),
     ).toMatchInlineSnapshot(`
-      "/* Start of utilities: */
+      "
+      /* Start of utilities: */
+
       @utility foo {
         /* Utility #1 */
         /* Declarations: */
         color: red;
-      }"
+      }
+      "
     `)
   })
 
@@ -699,7 +792,9 @@ describe('comments', () => {
         }
       `),
     ).toMatchInlineSnapshot(`
-      "/* Start of utilities: */
+      "
+      /* Start of utilities: */
+
       @utility foo {
         /* Foo & Bar */
         & .bar {
@@ -707,13 +802,15 @@ describe('comments', () => {
           color: red;
         }
       }
+
       @utility bar {
         /* Foo & Bar */
         .foo & {
           /* Declarations: */
           color: red;
         }
-      }"
+      }
+      "
     `)
   })
 
@@ -733,7 +830,9 @@ describe('comments', () => {
         }
       `),
     ).toMatchInlineSnapshot(`
-      "/* Start of utilities: */
+      "
+      /* Start of utilities: */
+
       @utility foo {
         /* Mobile only */
         @media (width <= 640px) {
@@ -741,7 +840,8 @@ describe('comments', () => {
           /* Declarations: */
           color: red;
         }
-      }"
+      }
+      "
     `)
   })
 
@@ -780,7 +880,9 @@ describe('comments', () => {
         /* After */
       `),
     ).toMatchInlineSnapshot(`
-      "/* Tailwind Utilities: */
+      "
+      /* Tailwind Utilities: */
+
       @utility no-scrollbar {
         /* Chrome, Safari and Opera */
         /* Second comment */
@@ -807,7 +909,8 @@ describe('comments', () => {
       .after {
         /* Inside */
       }
-      /* After */"
+      /* After */
+      "
     `)
   })
 })
@@ -832,7 +935,8 @@ it('should not lose attribute selectors', async () => {
       }
     `),
   ).toMatchInlineSnapshot(`
-    "@layer components {
+    "
+    @layer components {
       #TableOfContents {
         .toc a {
           @apply block max-w-full truncate py-1 pl-2 hover:font-medium hover:no-underline;
@@ -845,7 +949,8 @@ it('should not lose attribute selectors', async () => {
           }
         }
       }
-    }"
+    }
+    "
   `)
 })
 
@@ -863,11 +968,13 @@ describe('layered stylesheets', () => {
         layers: ['utilities'],
       }),
     ).toMatchInlineSnapshot(`
-      "@utility foo {
+      "
+      @utility foo {
         /* Utility #1 */
         /* Declarations: */
         color: red;
-      }"
+      }
+      "
     `)
   })
 
@@ -884,11 +991,13 @@ describe('layered stylesheets', () => {
         layers: ['components'],
       }),
     ).toMatchInlineSnapshot(`
-      "@utility foo {
+      "
+      @utility foo {
         /* Utility #1 */
         /* Declarations: */
         color: red;
-      }"
+      }
+      "
     `)
   })
 
@@ -905,11 +1014,13 @@ describe('layered stylesheets', () => {
         layers: ['foo'],
       }),
     ).toMatchInlineSnapshot(`
-      "/* Utility #1 */
+      "
+      /* Utility #1 */
       .foo {
         /* Declarations: */
         color: red;
-      }"
+      }
+      "
     `)
   })
 
@@ -929,7 +1040,8 @@ describe('layered stylesheets', () => {
         layers: ['utilities'],
       }),
     ).toMatchInlineSnapshot(`
-      "@utility foo {
+      "
+      @utility foo {
         /* Utility #1 */
         /* Declarations: */
         color: red;
@@ -937,7 +1049,8 @@ describe('layered stylesheets', () => {
 
       #main {
         color: red;
-      }"
+      }
+      "
     `)
   })
 
@@ -978,7 +1091,8 @@ describe('layered stylesheets', () => {
         layers: ['utilities'],
       }),
     ).toMatchInlineSnapshot(`
-      "@utility foo {
+      "
+      @utility foo {
         @layer utilities {
           @layer utilities {
             /* Utility #1 */
@@ -1011,7 +1125,8 @@ describe('layered stylesheets', () => {
 
       #secondary {
         color: red;
-      }"
+      }
+      "
     `)
   })
 
@@ -1028,11 +1143,13 @@ describe('layered stylesheets', () => {
         layers: ['utilities'],
       }),
     ).toMatchInlineSnapshot(`
-      "@import 'thing';
+      "
+      @import 'thing';
 
       @utility foo {
         color: red;
-      }"
+      }
+      "
     `)
   })
 
@@ -1049,11 +1166,13 @@ describe('layered stylesheets', () => {
         layers: ['utilities'],
       }),
     ).toMatchInlineSnapshot(`
-      "@charset "utf-8";
+      "
+      @charset "utf-8";
 
       @utility foo {
         color: red;
-      }"
+      }
+      "
     `)
   })
 })
diff --git a/packages/@tailwindcss-upgrade/src/codemods/css/migrate-at-layer-utilities.ts b/packages/@tailwindcss-upgrade/src/codemods/css/migrate-at-layer-utilities.ts
index 9b03e9d16..6bcb72d47 100644
--- a/packages/@tailwindcss-upgrade/src/codemods/css/migrate-at-layer-utilities.ts
+++ b/packages/@tailwindcss-upgrade/src/codemods/css/migrate-at-layer-utilities.ts
@@ -1,4 +1,4 @@
-import { type AtRule, type Comment, type Plugin, type Rule } from 'postcss'
+import { type AtRule, type Comment, type Container, type Plugin, type Rule } from 'postcss'
 import SelectorParser from 'postcss-selector-parser'
 import { segment } from '../../../../tailwindcss/src/utils/segment'
 import { Stylesheet } from '../../stylesheet'
@@ -43,6 +43,7 @@ export function migrateAtLayerUtilities(stylesheet: Stylesheet): Plugin {
 
     walk(atRule, (node) => {
       if (node.type !== 'rule') return
+      if (isEmpty(node)) return
 
       // Find all the classes in the selector
       SelectorParser((selectors) => {
@@ -184,6 +185,18 @@ export function migrateAtLayerUtilities(stylesheet: Stylesheet): Plugin {
                 toRemove.push(node.parent?.nodes.at(i) as Comment)
               }
             }
+
+            let commentsAfter: Comment[] = []
+            for (let i = idx + 1; i < (node.parent?.nodes.length ?? 0); i++) {
+              if (node.parent?.nodes.at(i)?.type === 'rule') {
+                commentsAfter = []
+                break
+              }
+              if (node.parent?.nodes.at(i)?.type === 'comment') {
+                commentsAfter.push(node.parent?.nodes.at(i) as Comment)
+              }
+            }
+            toRemove.push(...commentsAfter)
           }
           for (let node of toRemove) {
             node.remove()
@@ -231,8 +244,12 @@ export function migrateAtLayerUtilities(stylesheet: Stylesheet): Plugin {
           }
         }
 
-        // Remove empty rules
-        if ((node.type === 'rule' || node.type === 'atrule') && node.nodes?.length === 0) {
+        // Remove empty rules from `@utility` clones and empty wrapper at-rules
+        // from the default `@layer` clone.
+        if (
+          (node.type === 'atrule' && node.nodes?.length === 0) ||
+          (clone !== defaultsAtRule && node.type === 'rule' && node.nodes?.length === 0)
+        ) {
           node.remove()
         }
 
@@ -261,6 +278,11 @@ export function migrateAtLayerUtilities(stylesheet: Stylesheet): Plugin {
       // Remove empty clones entirely
       if (clone.nodes?.length === 0) {
         clones.splice(idx, 1)
+      } else if (clone === defaultsAtRule) {
+        let first = clone.nodes?.[0]
+        if (first) {
+          first.raws.before = first.raws.before?.replace(/\n\s*\n/g, '\n')
+        }
       }
     }
 
@@ -316,3 +338,17 @@ export function migrateAtLayerUtilities(stylesheet: Stylesheet): Plugin {
     },
   }
 }
+
+function isEmpty(node: Container): boolean {
+  // We have no body
+  if (node.nodes === undefined) return false
+
+  // We have a body, but no nodes
+  if (node.nodes.length === 0) return true
+
+  // We have nodes, but they are only comments which we consider empty
+  if (node.nodes.every((child) => child.type === 'comment')) return true
+
+  // Not empty
+  return false
+}
diff --git a/packages/@tailwindcss-upgrade/src/codemods/template/is-safe-migration.test.ts b/packages/@tailwindcss-upgrade/src/codemods/template/is-safe-migration.test.ts
index ff12fc114..7cfb16c75 100644
--- a/packages/@tailwindcss-upgrade/src/codemods/template/is-safe-migration.test.ts
+++ b/packages/@tailwindcss-upgrade/src/codemods/template/is-safe-migration.test.ts
@@ -48,6 +48,10 @@ describe('is-safe-migration', async () => {
     [`<div v-show="shadow"></div>\n`, 'shadow'],
     [`<div x-if="shadow"></div>\n`, 'shadow'],
     [`<div style={{filter: 'drop-shadow(30px 10px 4px #4444dd)'}}/>\n`, 'shadow'],
+    [`<div style="flex-grow: 1"></div>\n`, 'flex-grow'],
+    [`<div style='flex-shrink: 0'></div>\n`, 'flex-shrink'],
+    [`<div style="  flex-shrink: 0"></div>\n`, 'flex-shrink'],
+    [`<div style="\nflex-shrink: 0\n"></div>\n`, 'flex-shrink'],
 
     // Next.js Image placeholder cases
     [`<Image placeholder="blur" src="/image.jpg" />`, 'blur'],
diff --git a/packages/@tailwindcss-upgrade/src/codemods/template/is-safe-migration.ts b/packages/@tailwindcss-upgrade/src/codemods/template/is-safe-migration.ts
index fa7ee7f4a..2c09f299f 100644
--- a/packages/@tailwindcss-upgrade/src/codemods/template/is-safe-migration.ts
+++ b/packages/@tailwindcss-upgrade/src/codemods/template/is-safe-migration.ts
@@ -66,6 +66,38 @@ export function isSafeMigration(
     }
   }
 
+  let currentLineBeforeCandidate = ''
+  for (let i = location.start - 1; i >= 0; i--) {
+    let char = location.contents.at(i)!
+    if (char === '\n') {
+      break
+    }
+    currentLineBeforeCandidate = char + currentLineBeforeCandidate
+  }
+  let currentLineAfterCandidate = ''
+  for (let i = location.end; i < location.contents.length; i++) {
+    let char = location.contents.at(i)!
+    if (char === '\n') {
+      break
+    }
+    currentLineAfterCandidate += char
+  }
+
+  // Inline `style="..."` attributes can contain CSS property names that look
+  // like valid utility candidates, such as `flex-grow`.
+  {
+    let ranges = inlineStyleAttributeValueRanges.get(location.contents)
+
+    for (let i = 0; i < ranges.length; i += 2) {
+      let start = ranges[i]
+      let end = ranges[i + 1]
+
+      if (location.start >= start && location.end <= end) {
+        return false
+      }
+    }
+  }
+
   let [candidate] = parseCandidate(rawCandidate, designSystem)
 
   // If we can't parse the candidate, then it's not a candidate at all. However,
@@ -123,23 +155,6 @@ export function isSafeMigration(
     }
   }
 
-  let currentLineBeforeCandidate = ''
-  for (let i = location.start - 1; i >= 0; i--) {
-    let char = location.contents.at(i)!
-    if (char === '\n') {
-      break
-    }
-    currentLineBeforeCandidate = char + currentLineBeforeCandidate
-  }
-  let currentLineAfterCandidate = ''
-  for (let i = location.end; i < location.contents.length; i++) {
-    let char = location.contents.at(i)!
-    if (char === '\n') {
-      break
-    }
-    currentLineAfterCandidate += char
-  }
-
   // Heuristic: Require the candidate to be inside quotes
   let isQuoteBeforeCandidate = isMiddleOfString(currentLineBeforeCandidate)
   let isQuoteAfterCandidate = isMiddleOfString(currentLineAfterCandidate)
@@ -218,6 +233,14 @@ const BACKSLASH = 0x5c
 const DOUBLE_QUOTE = 0x22
 const SINGLE_QUOTE = 0x27
 const BACKTICK = 0x60
+const TAB = 0x09
+const NEWLINE = 0x0a
+const FORM_FEED = 0x0c
+const CARRIAGE_RETURN = 0x0d
+const SPACE = 0x20
+const SLASH = 0x2f
+const EQUALS = 0x3d
+const GREATER_THAN = 0x3e
 
 function isMiddleOfString(line: string): boolean {
   let currentQuote: number | null = null
@@ -248,3 +271,97 @@ function isMiddleOfString(line: string): boolean {
 
   return currentQuote !== null
 }
+
+const inlineStyleAttributeValueRanges = new DefaultMap((source: string) => {
+  let ranges: number[] = []
+  let offset = 0
+
+  while (true) {
+    let tagStart = source.indexOf('<', offset)
+    if (tagStart === -1) return ranges
+
+    let tagEnd = source.indexOf('>', tagStart + 1)
+    if (tagEnd === -1) return ranges
+
+    offset = tagEnd + 1
+
+    for (let i = tagStart + 1; i < tagEnd; i++) {
+      let char = source.charCodeAt(i)
+
+      if (
+        char === SPACE ||
+        char === TAB ||
+        char === NEWLINE ||
+        char === CARRIAGE_RETURN ||
+        char === FORM_FEED
+      ) {
+        continue
+      }
+
+      let start = i
+      while (i < tagEnd) {
+        let char = source.charCodeAt(i)
+        if (
+          char === SPACE ||
+          char === TAB ||
+          char === NEWLINE ||
+          char === CARRIAGE_RETURN ||
+          char === FORM_FEED ||
+          char === EQUALS ||
+          char === GREATER_THAN ||
+          char === SLASH
+        ) {
+          break
+        }
+
+        i++
+      }
+
+      let attribute = source.slice(start, i).toLowerCase()
+      if (attribute !== 'style' && attribute !== ':style') continue
+
+      while (i < tagEnd) {
+        let char = source.charCodeAt(i)
+        if (
+          char !== SPACE &&
+          char !== TAB &&
+          char !== NEWLINE &&
+          char !== CARRIAGE_RETURN &&
+          char !== FORM_FEED
+        ) {
+          break
+        }
+
+        i++
+      }
+
+      if (source[i] !== '=') continue
+
+      i++
+      while (i < tagEnd) {
+        let char = source.charCodeAt(i)
+        if (
+          char !== SPACE &&
+          char !== TAB &&
+          char !== NEWLINE &&
+          char !== CARRIAGE_RETURN &&
+          char !== FORM_FEED
+        ) {
+          break
+        }
+
+        i++
+      }
+
+      let quote = source[i]
+      if (quote !== '"' && quote !== "'") continue
+
+      let valueStart = i + 1
+      let valueEnd = source.indexOf(quote, valueStart)
+      if (valueEnd === -1 || valueEnd > tagEnd) break
+
+      ranges.push(valueStart, valueEnd)
+      i = valueEnd
+    }
+  }
+})
diff --git a/packages/@tailwindcss-upgrade/src/codemods/template/migrate-arbitrary-variants.ts b/packages/@tailwindcss-upgrade/src/codemods/template/migrate-arbitrary-variants.ts
index 58efb0421..258ba1b33 100644
--- a/packages/@tailwindcss-upgrade/src/codemods/template/migrate-arbitrary-variants.ts
+++ b/packages/@tailwindcss-upgrade/src/codemods/template/migrate-arbitrary-variants.ts
@@ -16,8 +16,8 @@ export function migrateArbitraryVariants(
   rawCandidate: string,
 ): string {
   let designSystem = prepareDesignSystemStorage(baseDesignSystem)
-  let signatures = designSystem.storage[VARIANT_SIGNATURE_KEY]
-  let variants = designSystem.storage[PRE_COMPUTED_VARIANTS_KEY]
+  let signatures = designSystem.storage[VARIANT_SIGNATURE_KEY].get(null)
+  let variants = designSystem.storage[PRE_COMPUTED_VARIANTS_KEY].get(null)
 
   for (let readonlyCandidate of designSystem.parseCandidate(rawCandidate)) {
     // We are only interested in the variants
@@ -35,7 +35,11 @@ export function migrateArbitraryVariants(
       if (typeof targetSignature !== 'string') continue
 
       let foundVariants = variants.get(targetSignature)
-      if (foundVariants.length !== 1) continue
+      if (foundVariants.length === 0) continue
+
+      // The variant is already in a canonical form, e.g.: `min-lg` and `lg`
+      // produce the same CSS, but both are valid so we keep them as-is.
+      if (foundVariants.includes(targetString)) continue
 
       let foundVariant = foundVariants[0]
       let parsedVariant = designSystem.parseVariant(foundVariant)
diff --git a/packages/@tailwindcss-upgrade/src/codemods/template/migrate-theme-to-var.ts b/packages/@tailwindcss-upgrade/src/codemods/template/migrate-theme-to-var.ts
index a80aa75e0..e566e7d6e 100644
--- a/packages/@tailwindcss-upgrade/src/codemods/template/migrate-theme-to-var.ts
+++ b/packages/@tailwindcss-upgrade/src/codemods/template/migrate-theme-to-var.ts
@@ -211,10 +211,10 @@ function substituteFunctionsInValue(
         fallbackValues.length > 0 ? handle(path, ValueParser.toCss(fallbackValues)) : handle(path)
       if (replacement === null) return
 
-      if (ctx.parent) {
-        let idx = ctx.parent.nodes.indexOf(node) - 1
+      {
+        let idx = ctx.index - 1
         while (idx !== -1) {
-          let previous = ctx.parent.nodes[idx]
+          let previous = ctx.siblings[idx]
           // Skip the space separator
           if (previous.kind === 'separator' && previous.value.trim() === '') {
             idx -= 1
diff --git a/packages/@tailwindcss-upgrade/src/codemods/template/migrate.ts b/packages/@tailwindcss-upgrade/src/codemods/template/migrate.ts
index 2b39094d4..976c63a83 100644
--- a/packages/@tailwindcss-upgrade/src/codemods/template/migrate.ts
+++ b/packages/@tailwindcss-upgrade/src/codemods/template/migrate.ts
@@ -9,6 +9,7 @@ import type { Config } from '../../../../tailwindcss/src/compat/plugin-api'
 import type { DesignSystem } from '../../../../tailwindcss/src/design-system'
 import { DefaultMap } from '../../../../tailwindcss/src/utils/default-map'
 import { spliceChangesIntoString, type StringChange } from '../../utils/splice-changes-into-string'
+import { writeFileSafely } from '../../utils/write-file-safely'
 import { extractRawCandidates } from './candidates'
 import { isSafeMigration } from './is-safe-migration'
 import { migrateAutomaticVarInjection } from './migrate-automatic-var-injection'
@@ -119,12 +120,18 @@ export default async function migrateContents(
   return spliceChangesIntoString(contents, changes)
 }
 
-export async function migrate(designSystem: DesignSystem, userConfig: Config | null, file: string) {
+export async function migrate(
+  designSystem: DesignSystem,
+  userConfig: Config | null,
+  file: string,
+): Promise<boolean> {
   let fullPath = path.isAbsolute(file) ? file : path.resolve(process.cwd(), file)
   let contents = await fs.readFile(fullPath, 'utf-8')
 
-  await fs.writeFile(
-    fullPath,
-    await migrateContents(designSystem, userConfig, contents, extname(file)),
-  )
+  let migrated = await migrateContents(designSystem, userConfig, contents, extname(file))
+  if (migrated === contents) return false // Nothing changed
+  if (migrated.trim() === '') return false // Emptied out, something went horribly wrong
+
+  await writeFileSafely(fullPath, migrated)
+  return true
 }
diff --git a/packages/@tailwindcss-upgrade/src/index.ts b/packages/@tailwindcss-upgrade/src/index.ts
index 2cfbab371..d304bbe1f 100644
--- a/packages/@tailwindcss-upgrade/src/index.ts
+++ b/packages/@tailwindcss-upgrade/src/index.ts
@@ -1,7 +1,7 @@
 #!/usr/bin/env node
 
 import { Scanner } from '@tailwindcss/oxide'
-import { globby } from 'globby'
+import { globby, isGitIgnored } from 'globby'
 import fs from 'node:fs/promises'
 import path from 'node:path'
 import pc from 'picocolors'
@@ -19,10 +19,11 @@ import { prepareConfig } from './codemods/template/prepare-config'
 import { help } from './commands/help'
 import { Stylesheet } from './stylesheet'
 import { args, type Arg } from './utils/args'
-import { isRepoDirty } from './utils/git'
+import { gitRoot, isRepoDirty } from './utils/git'
 import { pkg } from './utils/packages'
 import { eprintln, error, header, highlight, info, relative, success } from './utils/renderer'
 import * as version from './utils/version'
+import { writeFileSafely } from './utils/write-file-safely'
 
 const options = {
   '--config': { type: 'string', description: 'Path to the configuration file', alias: '-c' },
@@ -42,6 +43,9 @@ if (flags['--help']) {
 
 async function run() {
   let base = process.cwd()
+  // Use the project's git root, instead of the `base` to ensure all
+  // `.gitignore` rules are being used.
+  let isIgnored = await isGitIgnored({ cwd: gitRoot(base) ?? base })
 
   eprintln(header())
   eprintln()
@@ -95,6 +99,7 @@ async function run() {
       info('Searching for CSS files in the current directory and its subdirectories…')
 
       files = await globby(['**/*.css'], {
+        cwd: base,
         absolute: true,
         gitignore: true,
         // gitignore: true will first search for all .gitignore including node_modules folders, this makes the initial search much faster
@@ -122,7 +127,7 @@ async function run() {
 
     // Analyze the stylesheets
     try {
-      await analyzeStylesheets(stylesheets)
+      await analyzeStylesheets(stylesheets, { base })
     } catch (e: any) {
       error(`${e?.message ?? e}`, { prefix: '↳ ' })
     }
@@ -196,6 +201,13 @@ async function run() {
             }
           }
 
+          // Prime the compiler/designSystem cache against the pre-migration AST
+          // so the later template-migration phase sees the same v4 state. After
+          // this point, `sheet.root` may be mutated by `migrateStylesheet`.
+          if (!version.isMajor(3) && sheet.isTailwindRoot) {
+            await Promise.all([sheet.compiler(), sheet.designSystem()])
+          }
+
           await migrateStylesheet(sheet, {
             newPrefix: config?.newPrefix ?? null,
             designSystem: config?.designSystem ?? (await sheet.designSystem()),
@@ -250,7 +262,7 @@ async function run() {
     for (let sheet of stylesheets) {
       if (!sheet.file) continue
 
-      await fs.writeFile(sheet.file, sheet.root.toString())
+      await writeFileSafely(sheet.file, sheet.root.toString())
 
       if (sheet.isTailwindRoot) {
         success(`Migrated stylesheet: ${highlight(relative(sheet.file, base))}`, { prefix: '↳ ' })
@@ -293,6 +305,8 @@ async function run() {
         let designSystem = await sheet.designSystem()
         if (!designSystem) continue
 
+        let config = configBySheet.get(sheet)
+
         // Figure out the source files to migrate
         let sources = (() => {
           // Disable auto source detection
@@ -300,43 +314,123 @@ async function run() {
             return []
           }
 
-          // No root specified, use the base directory
+          // No root specified
           if (compiler.root === null) {
+            // When coming from Tailwind CSS v3, we have to use the
+            // `config.sources` (which came from `config.content` originally)
+            if (version.isMajor(3)) {
+              if (config?.sources) {
+                return config.sources.map((source) => ({ ...source, negated: false }))
+              }
+
+              // When we don't have any sources, then we have to fallback to no
+              // sources at all. We cannot fallback to the `**/*` pattern.
+              return []
+            }
+
+            // When we are upgrading a Tailwind CSS v4 and up version, we use
+            // the default `**/*` pattern. All custom `@source` directives will
+            // be attached later as sources.
             return [{ base, pattern: '**/*', negated: false }]
           }
 
           // Use the specified root
           return [{ ...compiler.root, negated: false }]
         })().concat(compiler.sources)
-
-        let config = configBySheet.get(sheet)
         let scanner = new Scanner({ sources })
         let filesToMigrate = []
+
+        let ignoredPaths = new Set<string>()
+
         for (let file of scanner.files) {
+          file = await fs.realpath(file).catch(() => file) // Ensure we are dealing with the real path, not symlinks
           if (file.endsWith('.css')) continue
+
+          // When a file is git ignored, then we don't want to migrate it even
+          // if it was listed in the `config.content` array or part of any
+          // `@source` directives.
+          //
+          // We can make this an option later to explicitly allow this, but
+          // this should be the default. This guarantees that:
+          //
+          // 1. Files coming from node_modules aren't touched
+          // 2. Generated files aren't changed (the source should update, not the target)
+          // 3. You can see all the changes that happened
+          try {
+            if (isIgnored(file)) {
+              let culprit = file
+
+              // To prevent print all ignored files, we can also walk up the
+              // parent tree and log those instead _if_ they are:
+              //
+              // 1. Also git ignored
+              // 2. Are not going outside of the current repo
+              let parent = path.dirname(file)
+              do {
+                try {
+                  if (isIgnored(parent)) {
+                    culprit = parent
+                  }
+                } catch {
+                  // Escaping the current repo
+                  break
+                }
+
+                let nextParent = path.dirname(parent)
+                if (nextParent === parent) break
+                parent = nextParent
+              } while (parent)
+
+              if (ignoredPaths.has(culprit)) continue // Already logged, skip
+              ignoredPaths.add(culprit)
+
+              if (culprit === file) {
+                info(`Git ignored, skipping: ${highlight(relative(culprit, base))}`, {
+                  prefix: '↳ ',
+                })
+              } else {
+                info(`Git ignored folder, skipping: ${highlight(relative(culprit, base))}`, {
+                  prefix: '↳ ',
+                })
+              }
+
+              continue
+            }
+          } catch (err) {
+            info(`Outside repository, skipping: ${highlight(relative(file, base))}`, {
+              prefix: '↳ ',
+            })
+            // Skip this file when we run into errors. E.g.: when the current
+            // file is not part of the current git repo it will throw an error.
+            continue
+          }
+
           if (seenFiles.has(file)) continue
           seenFiles.add(file)
           filesToMigrate.push(file)
         }
 
         // Migrate each file
+        let changes = 0
         await Promise.allSettled(
-          filesToMigrate.map((file) =>
-            migrateTemplate(designSystem, config?.userConfig ?? null, file),
-          ),
+          filesToMigrate.map(async (file) => {
+            let changed = await migrateTemplate(designSystem, config?.userConfig ?? null, file)
+            if (changed) {
+              changes++
+              info(`Migrated ${highlight(relative(file, base))}`, { prefix: '↳ ' })
+            }
+          }),
         )
 
         if (config?.configFilePath) {
           success(
-            `Migrated templates for configuration file: ${highlight(relative(config.configFilePath, base))}`,
+            `Migrated templates for configuration file: ${highlight(relative(config.configFilePath, base))} (${changes} file${changes === 1 ? '' : 's'} changed)`,
             { prefix: '↳ ' },
           )
         } else {
           success(
-            `Migrated templates for: ${highlight(relative(sheet.file ?? '<unknown>', base))}`,
-            {
-              prefix: '↳ ',
-            },
+            `Migrated templates for: ${highlight(relative(sheet.file ?? '<unknown>', base))} (${changes} file${changes === 1 ? '' : 's'} changed)`,
+            { prefix: '↳ ' },
           )
         }
       }
diff --git a/packages/@tailwindcss-upgrade/src/stylesheet.ts b/packages/@tailwindcss-upgrade/src/stylesheet.ts
index 42cd1f3c6..573413262 100644
--- a/packages/@tailwindcss-upgrade/src/stylesheet.ts
+++ b/packages/@tailwindcss-upgrade/src/stylesheet.ts
@@ -265,23 +265,26 @@ export class Stylesheet {
     return false
   }
 
+  #compiler?: Promise<Awaited<ReturnType<typeof compileAst>> | null>
+  #designSystem?: Promise<Awaited<ReturnType<typeof __unstable__loadDesignSystem>> | null>
+
   async compiler(): Promise<Awaited<ReturnType<typeof compileAst>> | null> {
     if (!this.isTailwindRoot) return null
     if (!this.file) return null
 
-    return compileAst(postCssAstToCssAst(this.root), {
+    return (this.#compiler ??= compileAst(postCssAstToCssAst(this.root), {
       base: path.dirname(this.file),
       onDependency() {},
-    })
+    }))
   }
 
   async designSystem(): Promise<Awaited<ReturnType<typeof __unstable__loadDesignSystem>> | null> {
     if (!this.isTailwindRoot) return null
     if (!this.file) return null
 
-    return __unstable__loadDesignSystem(this.root.toString(), {
+    return (this.#designSystem ??= __unstable__loadDesignSystem(this.root.toString(), {
       base: path.dirname(this.file),
-    })
+    }))
   }
 
   [util.inspect.custom]() {
diff --git a/packages/@tailwindcss-upgrade/src/utils/git.ts b/packages/@tailwindcss-upgrade/src/utils/git.ts
index 75f64b1c1..38edf21cb 100644
--- a/packages/@tailwindcss-upgrade/src/utils/git.ts
+++ b/packages/@tailwindcss-upgrade/src/utils/git.ts
@@ -1,5 +1,17 @@
 import { execSync } from 'node:child_process'
 
+export function gitRoot(cwd?: string): string | null {
+  try {
+    return execSync('git rev-parse --show-toplevel', {
+      encoding: 'utf-8',
+      cwd,
+      stdio: ['ignore', 'pipe', 'ignore'],
+    }).trim()
+  } catch {
+    return null
+  }
+}
+
 export function isRepoDirty(cwd?: string) {
   try {
     let stdout = execSync('git status --porcelain', { encoding: 'utf-8', cwd })
diff --git a/packages/@tailwindcss-upgrade/src/utils/write-file-safely.ts b/packages/@tailwindcss-upgrade/src/utils/write-file-safely.ts
new file mode 100644
index 000000000..2ff99f9e7
--- /dev/null
+++ b/packages/@tailwindcss-upgrade/src/utils/write-file-safely.ts
@@ -0,0 +1,49 @@
+import { randomUUID } from 'node:crypto'
+import fs from 'node:fs/promises'
+import path from 'node:path'
+
+export async function writeFileSafely(file: string, contents: string) {
+  // Resolve symlinks so the rename replaces the actual target file rather than
+  // replacing the symlink itself with a regular file.
+  let realFile = await fs.realpath(file).catch(() => file)
+
+  // Start by creating a new file in the current directory that is guaranteed to
+  // be unique (via `uuid`). We can embed the `process.id` in case we need to
+  // debug things later.
+  //
+  // While we can write this to a more global `/tmp` folder, I want to be 100%
+  // sure that we are on the same file system (same drive) so the rename
+  // operation is atomic. Once the file is written, we will rename the file. If
+  // this fails, the old file is still intact, if it works we have an updated
+  // file.
+  //
+  // If this still causes problems (but it will slow things down):
+  // 1. We could make sure that we inherit the file permissions
+  // 2. Use an explicit fsync to force a flush to disk
+  let temporaryFile = path.join(
+    path.dirname(realFile),
+    `.${path.basename(realFile)}.tailwind-upgrade.${process.pid}.${randomUUID()}.tmp`,
+  )
+
+  // Write file uses the `w` flag by default, which is defined as:
+  // > Open file for writing. The file is created (if it does not exist) or truncated (if it exists).
+  // > https://nodejs.org/api/fs.html#file-system-flags
+  //
+  // Which means that if this function is actively running, and you cancel the
+  // process at the wrong time, then the truncated files are present. Since all
+  // these migrations happen in parallel, multiple files are open and available
+  // to be written to, it could mean in multiple truncated files.
+  //
+  // Writing to a temp file first means that if the process is cancelled at this
+  // point, that the old original file is still correct.
+  //
+  // The rename part should be atomic (especially because we guarantee it to be
+  // on the same file system) so this either succeeds or doesn't happen.
+  try {
+    await fs.writeFile(temporaryFile, contents, 'utf8')
+    await fs.rename(temporaryFile, realFile)
+  } catch (error) {
+    await fs.unlink(temporaryFile).catch(() => {})
+    throw error
+  }
+}
diff --git a/packages/@tailwindcss-vite/package.json b/packages/@tailwindcss-vite/package.json
index 4c3e3cc6c..821704a1d 100644
--- a/packages/@tailwindcss-vite/package.json
+++ b/packages/@tailwindcss-vite/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@tailwindcss/vite",
-  "version": "4.2.2",
+  "version": "4.3.3",
   "description": "A utility-first CSS framework for rapidly building custom user interfaces.",
   "license": "MIT",
   "repository": {
diff --git a/packages/@tailwindcss-vite/src/index.ts b/packages/@tailwindcss-vite/src/index.ts
index cd0249680..8fc660eaa 100644
--- a/packages/@tailwindcss-vite/src/index.ts
+++ b/packages/@tailwindcss-vite/src/index.ts
@@ -9,16 +9,9 @@ import {
 } from '@tailwindcss/node'
 import { clearRequireCache } from '@tailwindcss/node/require-cache'
 import { Scanner } from '@tailwindcss/oxide'
-import { realpathSync } from 'node:fs'
 import fs from 'node:fs/promises'
 import path from 'node:path'
-import type {
-  Environment,
-  InternalResolveOptions,
-  Plugin,
-  ResolvedConfig,
-  ViteDevServer,
-} from 'vite'
+import type { Environment, InternalResolveOptions, Plugin, ResolvedConfig } from 'vite'
 import * as vite from 'vite'
 
 const DEBUG = env.DEBUG
@@ -33,8 +26,45 @@ export type PluginOptions = {
   optimize?: boolean | { minify?: boolean }
 }
 
+function createCustomResolver(
+  resolvers: ((id: string, importer: string) => Promise<string | undefined>)[],
+  filter = (_path: string) => true,
+) {
+  return async (id: string, base: string) => {
+    // The resolver expects an `importer` file. We don't really know where the
+    // current `id` was imported from, but Vite will essentially do a
+    // `path.dirname(importer)` so it doesn't really matter.
+    //
+    // It does matter that this is a file, otherwise we would go up a directory,
+    // which means that we would be resolving files from a parent folder first,
+    // instead of the current folder we are in.
+    let importer = path.resolve(base, '__placeholder__.ts')
+
+    for (let resolver of resolvers) {
+      let resolved = await resolver(id, importer)
+
+      // If we didn't resolve, we don't have to bail immediately, but we can try
+      // the next resolver
+      if (!resolved) continue
+
+      if (resolved === id) continue
+
+      // Looks like a relative file, let's resolve it to an absolute path
+      if (resolved[0] === '.') resolved = path.resolve(base, resolved)
+
+      // Must adhere to additional filters (e.g.: must be a .css file)
+      if (!filter(resolved)) continue
+
+      // If it's not an absolute path, then we don't really know how to read
+      // the file from disk.
+      if (!path.isAbsolute(resolved)) continue
+
+      return resolved
+    }
+  }
+}
+
 export default function tailwindcss(opts: PluginOptions = {}): Plugin[] {
-  let servers: ViteDevServer[] = []
   let config: ResolvedConfig | null = null
   let rootsByEnv = new DefaultMap<string, Map<string, Root>>((env: string) => new Map())
 
@@ -62,8 +92,20 @@ export default function tailwindcss(opts: PluginOptions = {}): Plugin[] {
 
       let jsResolver = config!.createResolver(config!.resolve)
 
-      customCssResolver = (id: string, base: string) => cssResolver(id, base, true, isSSR)
-      customJsResolver = (id: string, base: string) => jsResolver(id, base, true, isSSR)
+      customCssResolver = createCustomResolver(
+        [
+          (id, importer) => cssResolver(id, importer, true, isSSR),
+          (id, importer) => cssResolver(id, importer, false, isSSR),
+        ],
+        (path) => path.endsWith('.css'),
+      )
+      customJsResolver = createCustomResolver(
+        [
+          (id, importer) => jsResolver(id, importer, true, isSSR),
+          (id, importer) => jsResolver(id, importer, false, isSSR),
+        ],
+        (path) => !path.endsWith('.css'),
+      )
     } else {
       type ResolveIdFn = (
         environment: Environment,
@@ -73,7 +115,7 @@ export default function tailwindcss(opts: PluginOptions = {}): Plugin[] {
       ) => Promise<string | undefined>
 
       // There are cases where Environment API is available,
-      // but `createResolver` is still overriden (for example astro v5)
+      // but `createResolver` is still overridden (for example astro v5)
       //
       // Copied as-is from vite, because this function is not a part of public API
       //
@@ -105,8 +147,20 @@ export default function tailwindcss(opts: PluginOptions = {}): Plugin[] {
 
       let jsResolver = createBackCompatIdResolver(env.config, env.config.resolve)
 
-      customCssResolver = (id: string, base: string) => cssResolver(env, id, base, true)
-      customJsResolver = (id: string, base: string) => jsResolver(env, id, base, true)
+      customCssResolver = createCustomResolver(
+        [
+          (id, importer) => cssResolver(env, id, importer, true),
+          (id, importer) => cssResolver(env, id, importer, false),
+        ],
+        (path) => path.endsWith('.css'),
+      )
+      customJsResolver = createCustomResolver(
+        [
+          (id, importer) => jsResolver(env, id, importer, true),
+          (id, importer) => jsResolver(env, id, importer, false),
+        ],
+        (path) => !path.endsWith('.css'),
+      )
     }
 
     return new Root(
@@ -126,10 +180,6 @@ export default function tailwindcss(opts: PluginOptions = {}): Plugin[] {
       name: '@tailwindcss/vite:scan',
       enforce: 'pre',
 
-      configureServer(server) {
-        servers.push(server)
-      },
-
       async configResolved(_config) {
         config = _config
         isSSR = config.build.ssr !== false && config.build.ssr !== undefined
@@ -179,92 +229,13 @@ export default function tailwindcss(opts: PluginOptions = {}): Plugin[] {
           let result = await root.generate(src, (file) => this.addWatchFile(file), I)
           if (!result) {
             roots.delete(id)
-            return src
+            return
           }
 
           DEBUG && I.end('[@tailwindcss/vite] Generate CSS (serve)')
           return result
         },
       },
-
-      hotUpdate({ file, modules, timestamp, server }) {
-        // Ensure full-reloads are triggered for files that are being watched by
-        // Tailwind but aren't part of the module graph (like PHP or HTML
-        // files). If we don't do this, then changes to those files won't
-        // trigger a reload at all since Vite doesn't know about them.
-        {
-          // It's a little bit confusing, because due to the `addWatchFile`
-          // calls, it _is_ part of the module graph but nothing is really
-          // handling those files. These modules typically have an id of
-          // undefined and/or have a type of 'asset'.
-          //
-          // If we call `addWatchFile` on a file that is part of the actual
-          // module graph, then we will see a module for it with a type of `js`
-          // and a type of `asset`. We are only interested if _all_ of them are
-          // missing an id and/or have a type of 'asset', which is a strong
-          // signal that the changed file is not being handled by Vite or any of
-          // the plugins.
-          //
-          // Note: in Vite v7.0.6 the modules here will have a type of `js`, not
-          // 'asset'. But it will also have a `HARD_INVALIDATED` state and will
-          // do a full page reload already.
-          //
-          // Empty modules can be skipped since it means it's not `addWatchFile`d and thus irrelevant to Tailwind.
-          let isExternalFile =
-            modules.length > 0 &&
-            modules.every((mod) => mod.type === 'asset' || mod.id === undefined)
-          if (!isExternalFile) return
-
-          // Skip if the module exists in other environments. SSR framework has
-          // its own server side hmr/reload mechanism when handling server
-          // only modules. See https://v6.vite.dev/guide/migration.html
-          // > Updates to an SSR-only module no longer triggers a full page reload in the client. ...
-          for (let environment of Object.values(server.environments)) {
-            if (environment.name === this.environment.name) continue
-
-            let modules = environment.moduleGraph.getModulesByFile(file)
-            if (modules) {
-              for (let module of modules) {
-                if (module.type !== 'asset') {
-                  return
-                }
-              }
-            }
-          }
-
-          for (let env of new Set([this.environment.name, 'client'])) {
-            let roots = rootsByEnv.get(env)
-            if (roots.size === 0) continue
-
-            // If the file is not being watched by any of the roots, then we can
-            // skip the reload since it's not relevant to Tailwind CSS.
-            if (!isScannedFile(file, modules, roots)) {
-              continue
-            }
-
-            // https://vite.dev/changes/hotupdate-hook#migration-guide
-            let invalidatedModules = new Set<vite.EnvironmentModuleNode>()
-            for (let mod of modules) {
-              this.environment.moduleGraph.invalidateModule(
-                mod,
-                invalidatedModules,
-                timestamp,
-                true,
-              )
-            }
-
-            if (env === this.environment.name) {
-              this.environment.hot.send({ type: 'full-reload' })
-            } else if (server.hot.send) {
-              server.hot.send({ type: 'full-reload' })
-            } else if (server.ws.send) {
-              server.ws.send({ type: 'full-reload' })
-            }
-
-            return []
-          }
-        }
-      },
     },
 
     {
@@ -295,7 +266,7 @@ export default function tailwindcss(opts: PluginOptions = {}): Plugin[] {
           let result = await root.generate(src, (file) => this.addWatchFile(file), I)
           if (!result) {
             roots.delete(id)
-            return src
+            return
           }
           DEBUG && I.end('[@tailwindcss/vite] Generate CSS (build)')
 
@@ -385,10 +356,6 @@ class Root {
     private customJsResolver: (id: string, base: string) => Promise<string | false | undefined>,
   ) {}
 
-  get scannedFiles() {
-    return this.scanner?.files ?? []
-  }
-
   // Generate the CSS for the root file. This can return false if the file is
   // not considered a Tailwind root. When this happened, the root can be GCed.
   public async generate(
@@ -475,7 +442,11 @@ class Root {
     if (
       !(
         this.compiler.features &
-        (Features.AtApply | Features.JsPluginCompat | Features.ThemeFunction | Features.Utilities)
+        (Features.AtApply |
+          Features.JsPluginCompat |
+          Features.ThemeFunction |
+          Features.Utilities |
+          Features.Variants)
       )
     ) {
       return false
@@ -570,54 +541,3 @@ class Root {
     return false
   }
 }
-
-function isScannedFile(
-  file: string,
-  modules: vite.EnvironmentModuleNode[],
-  roots: Map<string, Root>,
-) {
-  let seen = new Set()
-  let q = [...modules]
-  let checks = {
-    file,
-    get realpath() {
-      try {
-        let realpath = realpathSync(file)
-        Object.defineProperty(checks, 'realpath', { value: realpath })
-        return realpath
-      } catch {
-        return null
-      }
-    },
-  }
-
-  while (q.length > 0) {
-    let module = q.shift()!
-    if (seen.has(module)) continue
-    seen.add(module)
-
-    if (module.id) {
-      let root = roots.get(module.id)
-
-      if (root) {
-        // If the file is part of the scanned files for this root, then we know
-        // for sure that it's being watched by any of the Tailwind CSS roots. It
-        // doesn't matter which root it is since it's only used to know whether
-        // we should trigger a full reload or not.
-        if (
-          root.scannedFiles.includes(checks.file) ||
-          (checks.realpath && root.scannedFiles.includes(checks.realpath))
-        ) {
-          return true
-        }
-      }
-    }
-
-    // Keep walking up the tree until we find a root.
-    for (let importer of module.importers) {
-      q.push(importer)
-    }
-  }
-
-  return false
-}
diff --git a/packages/@tailwindcss-webpack/package.json b/packages/@tailwindcss-webpack/package.json
index 8388c82f0..dce09429d 100644
--- a/packages/@tailwindcss-webpack/package.json
+++ b/packages/@tailwindcss-webpack/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@tailwindcss/webpack",
-  "version": "4.2.2",
+  "version": "4.3.3",
   "description": "A webpack loader for Tailwind CSS v4.",
   "license": "MIT",
   "repository": {
@@ -41,6 +41,15 @@
     "webpack": "catalog:"
   },
   "peerDependencies": {
-    "webpack": "^5"
+    "@rspack/core": "^1.0.0 || ^2.0.0",
+    "webpack": "^5.0.0"
+  },
+  "peerDependenciesMeta": {
+    "@rspack/core": {
+      "optional": true
+    },
+    "webpack": {
+      "optional": true
+    }
   }
 }
diff --git a/packages/@tailwindcss-webpack/src/index.ts b/packages/@tailwindcss-webpack/src/index.ts
index 2c78a552b..6d02f1f0b 100644
--- a/packages/@tailwindcss-webpack/src/index.ts
+++ b/packages/@tailwindcss-webpack/src/index.ts
@@ -40,8 +40,12 @@ interface CacheEntry {
 
 const cache = new QuickLRU<string, CacheEntry>({ maxSize: 50 })
 
-function getContextFromCache(inputFile: string, opts: LoaderOptions): CacheEntry {
-  let key = `${inputFile}:${opts.base ?? ''}:${JSON.stringify(opts.optimize)}`
+function getCacheKey(resourceId: string, opts: LoaderOptions): string {
+  return `${resourceId}:${opts.base ?? ''}:${JSON.stringify(opts.optimize)}`
+}
+
+function getContextFromCache(resourceId: string, opts: LoaderOptions): CacheEntry {
+  let key = getCacheKey(resourceId, opts)
   if (cache.has(key)) return cache.get(key)!
   let entry: CacheEntry = {
     mtimes: new Map<string, number>(),
@@ -61,6 +65,7 @@ export default async function tailwindLoader(
   let callback = this.async()
   let options = this.getOptions() ?? {}
   let inputFile = this.resourcePath
+  let resourceId = this.resource
   let base = options.base ?? process.cwd()
   let shouldOptimize = options.optimize ?? process.env.NODE_ENV === 'production'
   let isCSSModuleFile = inputFile.endsWith('.module.css')
@@ -83,7 +88,7 @@ export default async function tailwindLoader(
   }
 
   try {
-    let context = getContextFromCache(inputFile, options)
+    let context = getContextFromCache(resourceId, options)
     let inputBasePath = path.dirname(path.resolve(inputFile))
 
     // Whether this is the first build or not
@@ -273,7 +278,7 @@ export default async function tailwindLoader(
     callback(null, result)
   } catch (error) {
     // Clear the cache entry on error to force a full rebuild next time
-    let key = `${inputFile}:${options.base ?? ''}:${JSON.stringify(options.optimize)}`
+    let key = getCacheKey(resourceId, options)
     cache.delete(key)
 
     DEBUG && I.end(`[@tailwindcss/webpack] ${path.relative(base, inputFile)}`)
diff --git a/packages/@tailwindcss-webpack/tsconfig.json b/packages/@tailwindcss-webpack/tsconfig.json
index 6ae022f65..d2131cbeb 100644
--- a/packages/@tailwindcss-webpack/tsconfig.json
+++ b/packages/@tailwindcss-webpack/tsconfig.json
@@ -1,3 +1,6 @@
 {
   "extends": "../tsconfig.base.json",
+  "compilerOptions": {
+    "verbatimModuleSyntax": false,
+  },
 }
diff --git a/packages/tailwindcss/package.json b/packages/tailwindcss/package.json
index 6d6c67c7f..d1288d6fa 100644
--- a/packages/tailwindcss/package.json
+++ b/packages/tailwindcss/package.json
@@ -1,6 +1,6 @@
 {
   "name": "tailwindcss",
-  "version": "4.2.2",
+  "version": "4.3.3",
   "description": "A utility-first CSS framework for rapidly building custom user interfaces.",
   "license": "MIT",
   "repository": {
@@ -130,9 +130,9 @@
     "@jridgewell/remapping": "^2.3.5",
     "@tailwindcss/oxide": "workspace:^",
     "@types/node": "catalog:",
-    "dedent": "1.7.1",
+    "dedent": "catalog:",
     "lightningcss": "catalog:",
-    "magic-string": "^0.30.21",
+    "magic-string": "^1.1.0",
     "source-map-js": "^1.2.1"
   }
 }
diff --git a/packages/tailwindcss/playwright.config.ts b/packages/tailwindcss/playwright.config.ts
index c0a123abf..ba8f95d70 100644
--- a/packages/tailwindcss/playwright.config.ts
+++ b/packages/tailwindcss/playwright.config.ts
@@ -20,7 +20,7 @@ export default defineConfig({
   /* Opt out of parallel tests on CI. */
   workers: process.env.CI ? 1 : undefined,
   /* Reporter to use. See https://playwright.dev/docs/test-reporters */
-  reporter: 'html',
+  reporter: [['html', { open: 'never' }]],
   /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
   use: {
     /* Base URL to use in actions like `await page.goto('/')`. */
@@ -36,10 +36,11 @@ export default defineConfig({
       name: 'chromium',
       use: { ...devices['Desktop Chrome'] },
     },
-    {
-      name: 'webkit',
-      use: { ...devices['Desktop Safari'] },
-    },
+    // Playwright 1.60's Windows WebKit worker hangs on shutdown after all tests
+    // pass, causing CI to fail with a worker force-kill error.
+    ...(process.platform === 'win32'
+      ? []
+      : [{ name: 'webkit', use: { ...devices['Desktop Safari'] } }]),
     {
       name: 'firefox',
       use: {
diff --git a/packages/tailwindcss/preflight.css b/packages/tailwindcss/preflight.css
index 753e79ef0..04e87905c 100644
--- a/packages/tailwindcss/preflight.css
+++ b/packages/tailwindcss/preflight.css
@@ -32,8 +32,13 @@ html,
   tab-size: 4; /* 3 */
   font-family: --theme(
     --default-font-family,
-    ui-sans-serif,
-    system-ui,
+    -apple-system,
+    BlinkMacSystemFont,
+    'Segoe UI',
+    Roboto,
+    'Helvetica Neue',
+    'Noto Sans',
+    Arial,
     sans-serif,
     'Apple Color Emoji',
     'Segoe UI Emoji',
@@ -170,7 +175,7 @@ table {
   Use the modern Firefox focus style for all focusable elements.
 */
 
-:-moz-focusring {
+:-moz-focusring:where(:not(iframe)) {
   outline: auto;
 }
 
diff --git a/packages/tailwindcss/src/__snapshots__/index.test.ts.snap b/packages/tailwindcss/src/__snapshots__/index.test.ts.snap
index 88365b1ce..9921709d7 100644
--- a/packages/tailwindcss/src/__snapshots__/index.test.ts.snap
+++ b/packages/tailwindcss/src/__snapshots__/index.test.ts.snap
@@ -1,7 +1,8 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`compiling CSS > \`@tailwind utilities\` is replaced by utilities using the default theme 1`] = `
-"@layer properties {
+"
+@layer properties {
   @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
     *, :before, :after, ::backdrop {
       --tw-shadow: 0 0 #0000;
@@ -123,14 +124,16 @@ exports[`compiling CSS > \`@tailwind utilities\` is replaced by utilities using
   syntax: "*";
   inherits: false;
   initial-value: 0 0 #0000;
-}"
+}
+"
 `;
 
 exports[`compiling CSS > prefix all CSS variables inside preflight 1`] = `
-"@layer theme {
+"
+@layer theme {
   :root, :host {
-    --tw-font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
-    "Noto Color Emoji";
+    --tw-font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial,
+    sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
     --tw-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New",
     monospace;
     --tw-default-font-family: var(--tw-font-sans);
@@ -157,7 +160,7 @@ exports[`compiling CSS > prefix all CSS variables inside preflight 1`] = `
     -webkit-text-size-adjust: 100%;
     tab-size: 4;
     line-height: 1.5;
-    font-family: var(--tw-default-font-family, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
+    font-family: var(--tw-default-font-family, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
     font-feature-settings: var(--tw-default-font-feature-settings, normal);
     font-variation-settings: var(--tw-default-font-variation-settings, normal);
     -webkit-tap-highlight-color: transparent;
@@ -223,7 +226,7 @@ exports[`compiling CSS > prefix all CSS variables inside preflight 1`] = `
     border-collapse: collapse;
   }
 
-  :-moz-focusring {
+  :-moz-focusring:where(:not(iframe)) {
     outline: auto;
   }
 
@@ -385,5 +388,6 @@ exports[`compiling CSS > prefix all CSS variables inside preflight 1`] = `
   }
 }
 
-@layer components, utilities;"
+@layer components, utilities;
+"
 `;
diff --git a/packages/tailwindcss/src/__snapshots__/intellisense.test.ts.snap b/packages/tailwindcss/src/__snapshots__/intellisense.test.ts.snap
index 3bf790540..d595e8c01 100644
--- a/packages/tailwindcss/src/__snapshots__/intellisense.test.ts.snap
+++ b/packages/tailwindcss/src/__snapshots__/intellisense.test.ts.snap
@@ -2222,6 +2222,7 @@ exports[`getClassList 1`] = `
   "accent-current/90",
   "accent-current/95",
   "accent-current/100",
+  "accent-current/background",
   "accent-inherit",
   "accent-inherit/0",
   "accent-inherit/5",
@@ -2244,6 +2245,7 @@ exports[`getClassList 1`] = `
   "accent-inherit/90",
   "accent-inherit/95",
   "accent-inherit/100",
+  "accent-inherit/background",
   "accent-transparent",
   "accent-transparent/0",
   "accent-transparent/5",
@@ -2266,6 +2268,7 @@ exports[`getClassList 1`] = `
   "accent-transparent/90",
   "accent-transparent/95",
   "accent-transparent/100",
+  "accent-transparent/background",
   "align-baseline",
   "align-bottom",
   "align-middle",
@@ -2590,6 +2593,7 @@ exports[`getClassList 1`] = `
   "bg-current/90",
   "bg-current/95",
   "bg-current/100",
+  "bg-current/background",
   "bg-fixed",
   "bg-inherit",
   "bg-inherit/0",
@@ -2613,6 +2617,7 @@ exports[`getClassList 1`] = `
   "bg-inherit/90",
   "bg-inherit/95",
   "bg-inherit/100",
+  "bg-inherit/background",
   "bg-left",
   "bg-linear-0",
   "bg-linear-0/oklab",
@@ -2841,6 +2846,7 @@ exports[`getClassList 1`] = `
   "bg-transparent/90",
   "bg-transparent/95",
   "bg-transparent/100",
+  "bg-transparent/background",
   "block",
   "block-0",
   "block-0.5",
@@ -2936,6 +2942,7 @@ exports[`getClassList 1`] = `
   "border/90",
   "border/95",
   "border/100",
+  "border/background",
   "border-0",
   "border-2",
   "border-4",
@@ -2962,6 +2969,7 @@ exports[`getClassList 1`] = `
   "border-b/90",
   "border-b/95",
   "border-b/100",
+  "border-b/background",
   "border-b-0",
   "border-b-2",
   "border-b-4",
@@ -2988,6 +2996,7 @@ exports[`getClassList 1`] = `
   "border-b-current/90",
   "border-b-current/95",
   "border-b-current/100",
+  "border-b-current/background",
   "border-b-inherit",
   "border-b-inherit/0",
   "border-b-inherit/5",
@@ -3010,6 +3019,7 @@ exports[`getClassList 1`] = `
   "border-b-inherit/90",
   "border-b-inherit/95",
   "border-b-inherit/100",
+  "border-b-inherit/background",
   "border-b-transparent",
   "border-b-transparent/0",
   "border-b-transparent/5",
@@ -3032,6 +3042,7 @@ exports[`getClassList 1`] = `
   "border-b-transparent/90",
   "border-b-transparent/95",
   "border-b-transparent/100",
+  "border-b-transparent/background",
   "border-be",
   "border-be/0",
   "border-be/5",
@@ -3054,6 +3065,7 @@ exports[`getClassList 1`] = `
   "border-be/90",
   "border-be/95",
   "border-be/100",
+  "border-be/background",
   "border-be-0",
   "border-be-2",
   "border-be-4",
@@ -3080,6 +3092,7 @@ exports[`getClassList 1`] = `
   "border-be-current/90",
   "border-be-current/95",
   "border-be-current/100",
+  "border-be-current/background",
   "border-be-inherit",
   "border-be-inherit/0",
   "border-be-inherit/5",
@@ -3102,6 +3115,7 @@ exports[`getClassList 1`] = `
   "border-be-inherit/90",
   "border-be-inherit/95",
   "border-be-inherit/100",
+  "border-be-inherit/background",
   "border-be-transparent",
   "border-be-transparent/0",
   "border-be-transparent/5",
@@ -3124,6 +3138,7 @@ exports[`getClassList 1`] = `
   "border-be-transparent/90",
   "border-be-transparent/95",
   "border-be-transparent/100",
+  "border-be-transparent/background",
   "border-bs",
   "border-bs/0",
   "border-bs/5",
@@ -3146,6 +3161,7 @@ exports[`getClassList 1`] = `
   "border-bs/90",
   "border-bs/95",
   "border-bs/100",
+  "border-bs/background",
   "border-bs-0",
   "border-bs-2",
   "border-bs-4",
@@ -3172,6 +3188,7 @@ exports[`getClassList 1`] = `
   "border-bs-current/90",
   "border-bs-current/95",
   "border-bs-current/100",
+  "border-bs-current/background",
   "border-bs-inherit",
   "border-bs-inherit/0",
   "border-bs-inherit/5",
@@ -3194,6 +3211,7 @@ exports[`getClassList 1`] = `
   "border-bs-inherit/90",
   "border-bs-inherit/95",
   "border-bs-inherit/100",
+  "border-bs-inherit/background",
   "border-bs-transparent",
   "border-bs-transparent/0",
   "border-bs-transparent/5",
@@ -3216,6 +3234,7 @@ exports[`getClassList 1`] = `
   "border-bs-transparent/90",
   "border-bs-transparent/95",
   "border-bs-transparent/100",
+  "border-bs-transparent/background",
   "border-collapse",
   "border-current",
   "border-current/0",
@@ -3239,6 +3258,7 @@ exports[`getClassList 1`] = `
   "border-current/90",
   "border-current/95",
   "border-current/100",
+  "border-current/background",
   "border-dashed",
   "border-dotted",
   "border-double",
@@ -3264,6 +3284,7 @@ exports[`getClassList 1`] = `
   "border-e/90",
   "border-e/95",
   "border-e/100",
+  "border-e/background",
   "border-e-0",
   "border-e-2",
   "border-e-4",
@@ -3290,6 +3311,7 @@ exports[`getClassList 1`] = `
   "border-e-current/90",
   "border-e-current/95",
   "border-e-current/100",
+  "border-e-current/background",
   "border-e-inherit",
   "border-e-inherit/0",
   "border-e-inherit/5",
@@ -3312,6 +3334,7 @@ exports[`getClassList 1`] = `
   "border-e-inherit/90",
   "border-e-inherit/95",
   "border-e-inherit/100",
+  "border-e-inherit/background",
   "border-e-transparent",
   "border-e-transparent/0",
   "border-e-transparent/5",
@@ -3334,6 +3357,7 @@ exports[`getClassList 1`] = `
   "border-e-transparent/90",
   "border-e-transparent/95",
   "border-e-transparent/100",
+  "border-e-transparent/background",
   "border-hidden",
   "border-inherit",
   "border-inherit/0",
@@ -3357,6 +3381,7 @@ exports[`getClassList 1`] = `
   "border-inherit/90",
   "border-inherit/95",
   "border-inherit/100",
+  "border-inherit/background",
   "border-l",
   "border-l/0",
   "border-l/5",
@@ -3379,6 +3404,7 @@ exports[`getClassList 1`] = `
   "border-l/90",
   "border-l/95",
   "border-l/100",
+  "border-l/background",
   "border-l-0",
   "border-l-2",
   "border-l-4",
@@ -3405,6 +3431,7 @@ exports[`getClassList 1`] = `
   "border-l-current/90",
   "border-l-current/95",
   "border-l-current/100",
+  "border-l-current/background",
   "border-l-inherit",
   "border-l-inherit/0",
   "border-l-inherit/5",
@@ -3427,6 +3454,7 @@ exports[`getClassList 1`] = `
   "border-l-inherit/90",
   "border-l-inherit/95",
   "border-l-inherit/100",
+  "border-l-inherit/background",
   "border-l-transparent",
   "border-l-transparent/0",
   "border-l-transparent/5",
@@ -3449,6 +3477,7 @@ exports[`getClassList 1`] = `
   "border-l-transparent/90",
   "border-l-transparent/95",
   "border-l-transparent/100",
+  "border-l-transparent/background",
   "border-none",
   "border-r",
   "border-r/0",
@@ -3472,6 +3501,7 @@ exports[`getClassList 1`] = `
   "border-r/90",
   "border-r/95",
   "border-r/100",
+  "border-r/background",
   "border-r-0",
   "border-r-2",
   "border-r-4",
@@ -3498,6 +3528,7 @@ exports[`getClassList 1`] = `
   "border-r-current/90",
   "border-r-current/95",
   "border-r-current/100",
+  "border-r-current/background",
   "border-r-inherit",
   "border-r-inherit/0",
   "border-r-inherit/5",
@@ -3520,6 +3551,7 @@ exports[`getClassList 1`] = `
   "border-r-inherit/90",
   "border-r-inherit/95",
   "border-r-inherit/100",
+  "border-r-inherit/background",
   "border-r-transparent",
   "border-r-transparent/0",
   "border-r-transparent/5",
@@ -3542,6 +3574,7 @@ exports[`getClassList 1`] = `
   "border-r-transparent/90",
   "border-r-transparent/95",
   "border-r-transparent/100",
+  "border-r-transparent/background",
   "border-s",
   "border-s/0",
   "border-s/5",
@@ -3564,6 +3597,7 @@ exports[`getClassList 1`] = `
   "border-s/90",
   "border-s/95",
   "border-s/100",
+  "border-s/background",
   "border-s-0",
   "border-s-2",
   "border-s-4",
@@ -3590,6 +3624,7 @@ exports[`getClassList 1`] = `
   "border-s-current/90",
   "border-s-current/95",
   "border-s-current/100",
+  "border-s-current/background",
   "border-s-inherit",
   "border-s-inherit/0",
   "border-s-inherit/5",
@@ -3612,6 +3647,7 @@ exports[`getClassList 1`] = `
   "border-s-inherit/90",
   "border-s-inherit/95",
   "border-s-inherit/100",
+  "border-s-inherit/background",
   "border-s-transparent",
   "border-s-transparent/0",
   "border-s-transparent/5",
@@ -3634,6 +3670,7 @@ exports[`getClassList 1`] = `
   "border-s-transparent/90",
   "border-s-transparent/95",
   "border-s-transparent/100",
+  "border-s-transparent/background",
   "border-separate",
   "border-solid",
   "border-spacing-0",
@@ -3763,6 +3800,7 @@ exports[`getClassList 1`] = `
   "border-t/90",
   "border-t/95",
   "border-t/100",
+  "border-t/background",
   "border-t-0",
   "border-t-2",
   "border-t-4",
@@ -3789,6 +3827,7 @@ exports[`getClassList 1`] = `
   "border-t-current/90",
   "border-t-current/95",
   "border-t-current/100",
+  "border-t-current/background",
   "border-t-inherit",
   "border-t-inherit/0",
   "border-t-inherit/5",
@@ -3811,6 +3850,7 @@ exports[`getClassList 1`] = `
   "border-t-inherit/90",
   "border-t-inherit/95",
   "border-t-inherit/100",
+  "border-t-inherit/background",
   "border-t-transparent",
   "border-t-transparent/0",
   "border-t-transparent/5",
@@ -3833,6 +3873,7 @@ exports[`getClassList 1`] = `
   "border-t-transparent/90",
   "border-t-transparent/95",
   "border-t-transparent/100",
+  "border-t-transparent/background",
   "border-transparent",
   "border-transparent/0",
   "border-transparent/5",
@@ -3855,6 +3896,7 @@ exports[`getClassList 1`] = `
   "border-transparent/90",
   "border-transparent/95",
   "border-transparent/100",
+  "border-transparent/background",
   "border-x",
   "border-x/0",
   "border-x/5",
@@ -3877,6 +3919,7 @@ exports[`getClassList 1`] = `
   "border-x/90",
   "border-x/95",
   "border-x/100",
+  "border-x/background",
   "border-x-0",
   "border-x-2",
   "border-x-4",
@@ -3903,6 +3946,7 @@ exports[`getClassList 1`] = `
   "border-x-current/90",
   "border-x-current/95",
   "border-x-current/100",
+  "border-x-current/background",
   "border-x-inherit",
   "border-x-inherit/0",
   "border-x-inherit/5",
@@ -3925,6 +3969,7 @@ exports[`getClassList 1`] = `
   "border-x-inherit/90",
   "border-x-inherit/95",
   "border-x-inherit/100",
+  "border-x-inherit/background",
   "border-x-transparent",
   "border-x-transparent/0",
   "border-x-transparent/5",
@@ -3947,6 +3992,7 @@ exports[`getClassList 1`] = `
   "border-x-transparent/90",
   "border-x-transparent/95",
   "border-x-transparent/100",
+  "border-x-transparent/background",
   "border-y",
   "border-y/0",
   "border-y/5",
@@ -3969,6 +4015,7 @@ exports[`getClassList 1`] = `
   "border-y/90",
   "border-y/95",
   "border-y/100",
+  "border-y/background",
   "border-y-0",
   "border-y-2",
   "border-y-4",
@@ -3995,6 +4042,7 @@ exports[`getClassList 1`] = `
   "border-y-current/90",
   "border-y-current/95",
   "border-y-current/100",
+  "border-y-current/background",
   "border-y-inherit",
   "border-y-inherit/0",
   "border-y-inherit/5",
@@ -4017,6 +4065,7 @@ exports[`getClassList 1`] = `
   "border-y-inherit/90",
   "border-y-inherit/95",
   "border-y-inherit/100",
+  "border-y-inherit/background",
   "border-y-transparent",
   "border-y-transparent/0",
   "border-y-transparent/5",
@@ -4039,6 +4088,7 @@ exports[`getClassList 1`] = `
   "border-y-transparent/90",
   "border-y-transparent/95",
   "border-y-transparent/100",
+  "border-y-transparent/background",
   "bottom-0",
   "bottom-0.5",
   "bottom-1",
@@ -4165,6 +4215,7 @@ exports[`getClassList 1`] = `
   "caret-current/90",
   "caret-current/95",
   "caret-current/100",
+  "caret-current/background",
   "caret-inherit",
   "caret-inherit/0",
   "caret-inherit/5",
@@ -4187,6 +4238,7 @@ exports[`getClassList 1`] = `
   "caret-inherit/90",
   "caret-inherit/95",
   "caret-inherit/100",
+  "caret-inherit/background",
   "caret-transparent",
   "caret-transparent/0",
   "caret-transparent/5",
@@ -4209,6 +4261,7 @@ exports[`getClassList 1`] = `
   "caret-transparent/90",
   "caret-transparent/95",
   "caret-transparent/100",
+  "caret-transparent/background",
   "clear-both",
   "clear-end",
   "clear-left",
@@ -4364,6 +4417,7 @@ exports[`getClassList 1`] = `
   "decoration-current/90",
   "decoration-current/95",
   "decoration-current/100",
+  "decoration-current/background",
   "decoration-dashed",
   "decoration-dotted",
   "decoration-double",
@@ -4390,6 +4444,7 @@ exports[`getClassList 1`] = `
   "decoration-inherit/90",
   "decoration-inherit/95",
   "decoration-inherit/100",
+  "decoration-inherit/background",
   "decoration-solid",
   "decoration-transparent",
   "decoration-transparent/0",
@@ -4413,6 +4468,7 @@ exports[`getClassList 1`] = `
   "decoration-transparent/90",
   "decoration-transparent/95",
   "decoration-transparent/100",
+  "decoration-transparent/background",
   "decoration-wavy",
   "delay-75",
   "delay-100",
@@ -4445,6 +4501,7 @@ exports[`getClassList 1`] = `
   "divide-current/90",
   "divide-current/95",
   "divide-current/100",
+  "divide-current/background",
   "divide-dashed",
   "divide-dotted",
   "divide-double",
@@ -4470,6 +4527,7 @@ exports[`getClassList 1`] = `
   "divide-inherit/90",
   "divide-inherit/95",
   "divide-inherit/100",
+  "divide-inherit/background",
   "divide-none",
   "divide-solid",
   "divide-transparent",
@@ -4494,6 +4552,7 @@ exports[`getClassList 1`] = `
   "divide-transparent/90",
   "divide-transparent/95",
   "divide-transparent/100",
+  "divide-transparent/background",
   "divide-x",
   "divide-x-0",
   "divide-x-2",
@@ -4528,6 +4587,7 @@ exports[`getClassList 1`] = `
   "drop-shadow-current/90",
   "drop-shadow-current/95",
   "drop-shadow-current/100",
+  "drop-shadow-current/background",
   "drop-shadow-inherit",
   "drop-shadow-inherit/0",
   "drop-shadow-inherit/5",
@@ -4550,6 +4610,7 @@ exports[`getClassList 1`] = `
   "drop-shadow-inherit/90",
   "drop-shadow-inherit/95",
   "drop-shadow-inherit/100",
+  "drop-shadow-inherit/background",
   "drop-shadow-none",
   "drop-shadow-sm",
   "drop-shadow-transparent",
@@ -4574,6 +4635,7 @@ exports[`getClassList 1`] = `
   "drop-shadow-transparent/90",
   "drop-shadow-transparent/95",
   "drop-shadow-transparent/100",
+  "drop-shadow-transparent/background",
   "duration-75",
   "duration-100",
   "duration-150",
@@ -4612,6 +4674,7 @@ exports[`getClassList 1`] = `
   "fill-current/90",
   "fill-current/95",
   "fill-current/100",
+  "fill-current/background",
   "fill-inherit",
   "fill-inherit/0",
   "fill-inherit/5",
@@ -4634,6 +4697,7 @@ exports[`getClassList 1`] = `
   "fill-inherit/90",
   "fill-inherit/95",
   "fill-inherit/100",
+  "fill-inherit/background",
   "fill-none",
   "fill-transparent",
   "fill-transparent/0",
@@ -4657,6 +4721,7 @@ exports[`getClassList 1`] = `
   "fill-transparent/90",
   "fill-transparent/95",
   "fill-transparent/100",
+  "fill-transparent/background",
   "fixed",
   "flex",
   "flex-1",
@@ -4780,6 +4845,7 @@ exports[`getClassList 1`] = `
   "from-current/90",
   "from-current/95",
   "from-current/100",
+  "from-current/background",
   "from-inherit",
   "from-inherit/0",
   "from-inherit/5",
@@ -4802,6 +4868,7 @@ exports[`getClassList 1`] = `
   "from-inherit/90",
   "from-inherit/95",
   "from-inherit/100",
+  "from-inherit/background",
   "from-transparent",
   "from-transparent/0",
   "from-transparent/5",
@@ -4824,6 +4891,7 @@ exports[`getClassList 1`] = `
   "from-transparent/90",
   "from-transparent/95",
   "from-transparent/100",
+  "from-transparent/background",
   "gap-0",
   "gap-0.5",
   "gap-1",
@@ -5447,6 +5515,7 @@ exports[`getClassList 1`] = `
   "inset-ring-current/90",
   "inset-ring-current/95",
   "inset-ring-current/100",
+  "inset-ring-current/background",
   "inset-ring-inherit",
   "inset-ring-inherit/0",
   "inset-ring-inherit/5",
@@ -5469,6 +5538,7 @@ exports[`getClassList 1`] = `
   "inset-ring-inherit/90",
   "inset-ring-inherit/95",
   "inset-ring-inherit/100",
+  "inset-ring-inherit/background",
   "inset-ring-transparent",
   "inset-ring-transparent/0",
   "inset-ring-transparent/5",
@@ -5491,6 +5561,7 @@ exports[`getClassList 1`] = `
   "inset-ring-transparent/90",
   "inset-ring-transparent/95",
   "inset-ring-transparent/100",
+  "inset-ring-transparent/background",
   "inset-s-0",
   "inset-s-0.5",
   "inset-s-1",
@@ -5576,6 +5647,7 @@ exports[`getClassList 1`] = `
   "inset-shadow-current/90",
   "inset-shadow-current/95",
   "inset-shadow-current/100",
+  "inset-shadow-current/background",
   "inset-shadow-inherit",
   "inset-shadow-inherit/0",
   "inset-shadow-inherit/5",
@@ -5598,6 +5670,7 @@ exports[`getClassList 1`] = `
   "inset-shadow-inherit/90",
   "inset-shadow-inherit/95",
   "inset-shadow-inherit/100",
+  "inset-shadow-inherit/background",
   "inset-shadow-initial",
   "inset-shadow-none",
   "inset-shadow-sm",
@@ -5644,6 +5717,7 @@ exports[`getClassList 1`] = `
   "inset-shadow-transparent/90",
   "inset-shadow-transparent/95",
   "inset-shadow-transparent/100",
+  "inset-shadow-transparent/background",
   "inset-x-0",
   "inset-x-0.5",
   "inset-x-1",
@@ -6045,6 +6119,7 @@ exports[`getClassList 1`] = `
   "mask-b-from-current/90",
   "mask-b-from-current/95",
   "mask-b-from-current/100",
+  "mask-b-from-current/background",
   "mask-b-from-inherit",
   "mask-b-from-inherit/0",
   "mask-b-from-inherit/5",
@@ -6067,6 +6142,7 @@ exports[`getClassList 1`] = `
   "mask-b-from-inherit/90",
   "mask-b-from-inherit/95",
   "mask-b-from-inherit/100",
+  "mask-b-from-inherit/background",
   "mask-b-from-transparent",
   "mask-b-from-transparent/0",
   "mask-b-from-transparent/5",
@@ -6089,6 +6165,7 @@ exports[`getClassList 1`] = `
   "mask-b-from-transparent/90",
   "mask-b-from-transparent/95",
   "mask-b-from-transparent/100",
+  "mask-b-from-transparent/background",
   "mask-b-to-0",
   "mask-b-to-0%",
   "mask-b-to-0.5",
@@ -6166,6 +6243,7 @@ exports[`getClassList 1`] = `
   "mask-b-to-current/90",
   "mask-b-to-current/95",
   "mask-b-to-current/100",
+  "mask-b-to-current/background",
   "mask-b-to-inherit",
   "mask-b-to-inherit/0",
   "mask-b-to-inherit/5",
@@ -6188,6 +6266,7 @@ exports[`getClassList 1`] = `
   "mask-b-to-inherit/90",
   "mask-b-to-inherit/95",
   "mask-b-to-inherit/100",
+  "mask-b-to-inherit/background",
   "mask-b-to-transparent",
   "mask-b-to-transparent/0",
   "mask-b-to-transparent/5",
@@ -6210,6 +6289,7 @@ exports[`getClassList 1`] = `
   "mask-b-to-transparent/90",
   "mask-b-to-transparent/95",
   "mask-b-to-transparent/100",
+  "mask-b-to-transparent/background",
   "mask-bottom",
   "mask-bottom-left",
   "mask-bottom-right",
@@ -6307,6 +6387,7 @@ exports[`getClassList 1`] = `
   "mask-conic-from-current/90",
   "mask-conic-from-current/95",
   "mask-conic-from-current/100",
+  "mask-conic-from-current/background",
   "mask-conic-from-inherit",
   "mask-conic-from-inherit/0",
   "mask-conic-from-inherit/5",
@@ -6329,6 +6410,7 @@ exports[`getClassList 1`] = `
   "mask-conic-from-inherit/90",
   "mask-conic-from-inherit/95",
   "mask-conic-from-inherit/100",
+  "mask-conic-from-inherit/background",
   "mask-conic-from-transparent",
   "mask-conic-from-transparent/0",
   "mask-conic-from-transparent/5",
@@ -6351,6 +6433,7 @@ exports[`getClassList 1`] = `
   "mask-conic-from-transparent/90",
   "mask-conic-from-transparent/95",
   "mask-conic-from-transparent/100",
+  "mask-conic-from-transparent/background",
   "mask-conic-to-0",
   "mask-conic-to-0%",
   "mask-conic-to-0.5",
@@ -6428,6 +6511,7 @@ exports[`getClassList 1`] = `
   "mask-conic-to-current/90",
   "mask-conic-to-current/95",
   "mask-conic-to-current/100",
+  "mask-conic-to-current/background",
   "mask-conic-to-inherit",
   "mask-conic-to-inherit/0",
   "mask-conic-to-inherit/5",
@@ -6450,6 +6534,7 @@ exports[`getClassList 1`] = `
   "mask-conic-to-inherit/90",
   "mask-conic-to-inherit/95",
   "mask-conic-to-inherit/100",
+  "mask-conic-to-inherit/background",
   "mask-conic-to-transparent",
   "mask-conic-to-transparent/0",
   "mask-conic-to-transparent/5",
@@ -6472,6 +6557,7 @@ exports[`getClassList 1`] = `
   "mask-conic-to-transparent/90",
   "mask-conic-to-transparent/95",
   "mask-conic-to-transparent/100",
+  "mask-conic-to-transparent/background",
   "mask-contain",
   "mask-cover",
   "mask-ellipse",
@@ -6554,6 +6640,7 @@ exports[`getClassList 1`] = `
   "mask-l-from-current/90",
   "mask-l-from-current/95",
   "mask-l-from-current/100",
+  "mask-l-from-current/background",
   "mask-l-from-inherit",
   "mask-l-from-inherit/0",
   "mask-l-from-inherit/5",
@@ -6576,6 +6663,7 @@ exports[`getClassList 1`] = `
   "mask-l-from-inherit/90",
   "mask-l-from-inherit/95",
   "mask-l-from-inherit/100",
+  "mask-l-from-inherit/background",
   "mask-l-from-transparent",
   "mask-l-from-transparent/0",
   "mask-l-from-transparent/5",
@@ -6598,6 +6686,7 @@ exports[`getClassList 1`] = `
   "mask-l-from-transparent/90",
   "mask-l-from-transparent/95",
   "mask-l-from-transparent/100",
+  "mask-l-from-transparent/background",
   "mask-l-to-0",
   "mask-l-to-0%",
   "mask-l-to-0.5",
@@ -6675,6 +6764,7 @@ exports[`getClassList 1`] = `
   "mask-l-to-current/90",
   "mask-l-to-current/95",
   "mask-l-to-current/100",
+  "mask-l-to-current/background",
   "mask-l-to-inherit",
   "mask-l-to-inherit/0",
   "mask-l-to-inherit/5",
@@ -6697,6 +6787,7 @@ exports[`getClassList 1`] = `
   "mask-l-to-inherit/90",
   "mask-l-to-inherit/95",
   "mask-l-to-inherit/100",
+  "mask-l-to-inherit/background",
   "mask-l-to-transparent",
   "mask-l-to-transparent/0",
   "mask-l-to-transparent/5",
@@ -6719,6 +6810,7 @@ exports[`getClassList 1`] = `
   "mask-l-to-transparent/90",
   "mask-l-to-transparent/95",
   "mask-l-to-transparent/100",
+  "mask-l-to-transparent/background",
   "mask-left",
   "mask-linear-0",
   "mask-linear-1",
@@ -6806,6 +6898,7 @@ exports[`getClassList 1`] = `
   "mask-linear-from-current/90",
   "mask-linear-from-current/95",
   "mask-linear-from-current/100",
+  "mask-linear-from-current/background",
   "mask-linear-from-inherit",
   "mask-linear-from-inherit/0",
   "mask-linear-from-inherit/5",
@@ -6828,6 +6921,7 @@ exports[`getClassList 1`] = `
   "mask-linear-from-inherit/90",
   "mask-linear-from-inherit/95",
   "mask-linear-from-inherit/100",
+  "mask-linear-from-inherit/background",
   "mask-linear-from-transparent",
   "mask-linear-from-transparent/0",
   "mask-linear-from-transparent/5",
@@ -6850,6 +6944,7 @@ exports[`getClassList 1`] = `
   "mask-linear-from-transparent/90",
   "mask-linear-from-transparent/95",
   "mask-linear-from-transparent/100",
+  "mask-linear-from-transparent/background",
   "mask-linear-to-0",
   "mask-linear-to-0%",
   "mask-linear-to-0.5",
@@ -6927,6 +7022,7 @@ exports[`getClassList 1`] = `
   "mask-linear-to-current/90",
   "mask-linear-to-current/95",
   "mask-linear-to-current/100",
+  "mask-linear-to-current/background",
   "mask-linear-to-inherit",
   "mask-linear-to-inherit/0",
   "mask-linear-to-inherit/5",
@@ -6949,6 +7045,7 @@ exports[`getClassList 1`] = `
   "mask-linear-to-inherit/90",
   "mask-linear-to-inherit/95",
   "mask-linear-to-inherit/100",
+  "mask-linear-to-inherit/background",
   "mask-linear-to-transparent",
   "mask-linear-to-transparent/0",
   "mask-linear-to-transparent/5",
@@ -6971,6 +7068,7 @@ exports[`getClassList 1`] = `
   "mask-linear-to-transparent/90",
   "mask-linear-to-transparent/95",
   "mask-linear-to-transparent/100",
+  "mask-linear-to-transparent/background",
   "mask-luminance",
   "mask-match",
   "mask-no-clip",
@@ -7059,6 +7157,7 @@ exports[`getClassList 1`] = `
   "mask-r-from-current/90",
   "mask-r-from-current/95",
   "mask-r-from-current/100",
+  "mask-r-from-current/background",
   "mask-r-from-inherit",
   "mask-r-from-inherit/0",
   "mask-r-from-inherit/5",
@@ -7081,6 +7180,7 @@ exports[`getClassList 1`] = `
   "mask-r-from-inherit/90",
   "mask-r-from-inherit/95",
   "mask-r-from-inherit/100",
+  "mask-r-from-inherit/background",
   "mask-r-from-transparent",
   "mask-r-from-transparent/0",
   "mask-r-from-transparent/5",
@@ -7103,6 +7203,7 @@ exports[`getClassList 1`] = `
   "mask-r-from-transparent/90",
   "mask-r-from-transparent/95",
   "mask-r-from-transparent/100",
+  "mask-r-from-transparent/background",
   "mask-r-to-0",
   "mask-r-to-0%",
   "mask-r-to-0.5",
@@ -7180,6 +7281,7 @@ exports[`getClassList 1`] = `
   "mask-r-to-current/90",
   "mask-r-to-current/95",
   "mask-r-to-current/100",
+  "mask-r-to-current/background",
   "mask-r-to-inherit",
   "mask-r-to-inherit/0",
   "mask-r-to-inherit/5",
@@ -7202,6 +7304,7 @@ exports[`getClassList 1`] = `
   "mask-r-to-inherit/90",
   "mask-r-to-inherit/95",
   "mask-r-to-inherit/100",
+  "mask-r-to-inherit/background",
   "mask-r-to-transparent",
   "mask-r-to-transparent/0",
   "mask-r-to-transparent/5",
@@ -7224,6 +7327,7 @@ exports[`getClassList 1`] = `
   "mask-r-to-transparent/90",
   "mask-r-to-transparent/95",
   "mask-r-to-transparent/100",
+  "mask-r-to-transparent/background",
   "mask-radial-at-bottom",
   "mask-radial-at-bottom-left",
   "mask-radial-at-bottom-right",
@@ -7314,6 +7418,7 @@ exports[`getClassList 1`] = `
   "mask-radial-from-current/90",
   "mask-radial-from-current/95",
   "mask-radial-from-current/100",
+  "mask-radial-from-current/background",
   "mask-radial-from-inherit",
   "mask-radial-from-inherit/0",
   "mask-radial-from-inherit/5",
@@ -7336,6 +7441,7 @@ exports[`getClassList 1`] = `
   "mask-radial-from-inherit/90",
   "mask-radial-from-inherit/95",
   "mask-radial-from-inherit/100",
+  "mask-radial-from-inherit/background",
   "mask-radial-from-transparent",
   "mask-radial-from-transparent/0",
   "mask-radial-from-transparent/5",
@@ -7358,6 +7464,7 @@ exports[`getClassList 1`] = `
   "mask-radial-from-transparent/90",
   "mask-radial-from-transparent/95",
   "mask-radial-from-transparent/100",
+  "mask-radial-from-transparent/background",
   "mask-radial-to-0",
   "mask-radial-to-0%",
   "mask-radial-to-0.5",
@@ -7435,6 +7542,7 @@ exports[`getClassList 1`] = `
   "mask-radial-to-current/90",
   "mask-radial-to-current/95",
   "mask-radial-to-current/100",
+  "mask-radial-to-current/background",
   "mask-radial-to-inherit",
   "mask-radial-to-inherit/0",
   "mask-radial-to-inherit/5",
@@ -7457,6 +7565,7 @@ exports[`getClassList 1`] = `
   "mask-radial-to-inherit/90",
   "mask-radial-to-inherit/95",
   "mask-radial-to-inherit/100",
+  "mask-radial-to-inherit/background",
   "mask-radial-to-transparent",
   "mask-radial-to-transparent/0",
   "mask-radial-to-transparent/5",
@@ -7479,6 +7588,7 @@ exports[`getClassList 1`] = `
   "mask-radial-to-transparent/90",
   "mask-radial-to-transparent/95",
   "mask-radial-to-transparent/100",
+  "mask-radial-to-transparent/background",
   "mask-repeat",
   "mask-repeat-round",
   "mask-repeat-space",
@@ -7563,6 +7673,7 @@ exports[`getClassList 1`] = `
   "mask-t-from-current/90",
   "mask-t-from-current/95",
   "mask-t-from-current/100",
+  "mask-t-from-current/background",
   "mask-t-from-inherit",
   "mask-t-from-inherit/0",
   "mask-t-from-inherit/5",
@@ -7585,6 +7696,7 @@ exports[`getClassList 1`] = `
   "mask-t-from-inherit/90",
   "mask-t-from-inherit/95",
   "mask-t-from-inherit/100",
+  "mask-t-from-inherit/background",
   "mask-t-from-transparent",
   "mask-t-from-transparent/0",
   "mask-t-from-transparent/5",
@@ -7607,6 +7719,7 @@ exports[`getClassList 1`] = `
   "mask-t-from-transparent/90",
   "mask-t-from-transparent/95",
   "mask-t-from-transparent/100",
+  "mask-t-from-transparent/background",
   "mask-t-to-0",
   "mask-t-to-0%",
   "mask-t-to-0.5",
@@ -7684,6 +7797,7 @@ exports[`getClassList 1`] = `
   "mask-t-to-current/90",
   "mask-t-to-current/95",
   "mask-t-to-current/100",
+  "mask-t-to-current/background",
   "mask-t-to-inherit",
   "mask-t-to-inherit/0",
   "mask-t-to-inherit/5",
@@ -7706,6 +7820,7 @@ exports[`getClassList 1`] = `
   "mask-t-to-inherit/90",
   "mask-t-to-inherit/95",
   "mask-t-to-inherit/100",
+  "mask-t-to-inherit/background",
   "mask-t-to-transparent",
   "mask-t-to-transparent/0",
   "mask-t-to-transparent/5",
@@ -7728,6 +7843,7 @@ exports[`getClassList 1`] = `
   "mask-t-to-transparent/90",
   "mask-t-to-transparent/95",
   "mask-t-to-transparent/100",
+  "mask-t-to-transparent/background",
   "mask-top",
   "mask-top-left",
   "mask-top-right",
@@ -7810,6 +7926,7 @@ exports[`getClassList 1`] = `
   "mask-x-from-current/90",
   "mask-x-from-current/95",
   "mask-x-from-current/100",
+  "mask-x-from-current/background",
   "mask-x-from-inherit",
   "mask-x-from-inherit/0",
   "mask-x-from-inherit/5",
@@ -7832,6 +7949,7 @@ exports[`getClassList 1`] = `
   "mask-x-from-inherit/90",
   "mask-x-from-inherit/95",
   "mask-x-from-inherit/100",
+  "mask-x-from-inherit/background",
   "mask-x-from-transparent",
   "mask-x-from-transparent/0",
   "mask-x-from-transparent/5",
@@ -7854,6 +7972,7 @@ exports[`getClassList 1`] = `
   "mask-x-from-transparent/90",
   "mask-x-from-transparent/95",
   "mask-x-from-transparent/100",
+  "mask-x-from-transparent/background",
   "mask-x-to-0",
   "mask-x-to-0%",
   "mask-x-to-0.5",
@@ -7931,6 +8050,7 @@ exports[`getClassList 1`] = `
   "mask-x-to-current/90",
   "mask-x-to-current/95",
   "mask-x-to-current/100",
+  "mask-x-to-current/background",
   "mask-x-to-inherit",
   "mask-x-to-inherit/0",
   "mask-x-to-inherit/5",
@@ -7953,6 +8073,7 @@ exports[`getClassList 1`] = `
   "mask-x-to-inherit/90",
   "mask-x-to-inherit/95",
   "mask-x-to-inherit/100",
+  "mask-x-to-inherit/background",
   "mask-x-to-transparent",
   "mask-x-to-transparent/0",
   "mask-x-to-transparent/5",
@@ -7975,6 +8096,7 @@ exports[`getClassList 1`] = `
   "mask-x-to-transparent/90",
   "mask-x-to-transparent/95",
   "mask-x-to-transparent/100",
+  "mask-x-to-transparent/background",
   "mask-y-from-0",
   "mask-y-from-0%",
   "mask-y-from-0.5",
@@ -8052,6 +8174,7 @@ exports[`getClassList 1`] = `
   "mask-y-from-current/90",
   "mask-y-from-current/95",
   "mask-y-from-current/100",
+  "mask-y-from-current/background",
   "mask-y-from-inherit",
   "mask-y-from-inherit/0",
   "mask-y-from-inherit/5",
@@ -8074,6 +8197,7 @@ exports[`getClassList 1`] = `
   "mask-y-from-inherit/90",
   "mask-y-from-inherit/95",
   "mask-y-from-inherit/100",
+  "mask-y-from-inherit/background",
   "mask-y-from-transparent",
   "mask-y-from-transparent/0",
   "mask-y-from-transparent/5",
@@ -8096,6 +8220,7 @@ exports[`getClassList 1`] = `
   "mask-y-from-transparent/90",
   "mask-y-from-transparent/95",
   "mask-y-from-transparent/100",
+  "mask-y-from-transparent/background",
   "mask-y-to-0",
   "mask-y-to-0%",
   "mask-y-to-0.5",
@@ -8173,6 +8298,7 @@ exports[`getClassList 1`] = `
   "mask-y-to-current/90",
   "mask-y-to-current/95",
   "mask-y-to-current/100",
+  "mask-y-to-current/background",
   "mask-y-to-inherit",
   "mask-y-to-inherit/0",
   "mask-y-to-inherit/5",
@@ -8195,6 +8321,7 @@ exports[`getClassList 1`] = `
   "mask-y-to-inherit/90",
   "mask-y-to-inherit/95",
   "mask-y-to-inherit/100",
+  "mask-y-to-inherit/background",
   "mask-y-to-transparent",
   "mask-y-to-transparent/0",
   "mask-y-to-transparent/5",
@@ -8217,6 +8344,7 @@ exports[`getClassList 1`] = `
   "mask-y-to-transparent/90",
   "mask-y-to-transparent/95",
   "mask-y-to-transparent/100",
+  "mask-y-to-transparent/background",
   "max-block-0",
   "max-block-0.5",
   "max-block-1",
@@ -9266,6 +9394,7 @@ exports[`getClassList 1`] = `
   "outline/90",
   "outline/95",
   "outline/100",
+  "outline/background",
   "outline-0",
   "outline-1",
   "outline-2",
@@ -9293,6 +9422,7 @@ exports[`getClassList 1`] = `
   "outline-current/90",
   "outline-current/95",
   "outline-current/100",
+  "outline-current/background",
   "outline-dashed",
   "outline-dotted",
   "outline-double",
@@ -9319,6 +9449,7 @@ exports[`getClassList 1`] = `
   "outline-inherit/90",
   "outline-inherit/95",
   "outline-inherit/100",
+  "outline-inherit/background",
   "outline-none",
   "outline-offset-0",
   "outline-offset-1",
@@ -9348,6 +9479,7 @@ exports[`getClassList 1`] = `
   "outline-transparent/90",
   "outline-transparent/95",
   "outline-transparent/100",
+  "outline-transparent/background",
   "overflow-auto",
   "overflow-clip",
   "overflow-hidden",
@@ -9641,6 +9773,7 @@ exports[`getClassList 1`] = `
   "placeholder-current/90",
   "placeholder-current/95",
   "placeholder-current/100",
+  "placeholder-current/background",
   "placeholder-inherit",
   "placeholder-inherit/0",
   "placeholder-inherit/5",
@@ -9663,6 +9796,7 @@ exports[`getClassList 1`] = `
   "placeholder-inherit/90",
   "placeholder-inherit/95",
   "placeholder-inherit/100",
+  "placeholder-inherit/background",
   "placeholder-transparent",
   "placeholder-transparent/0",
   "placeholder-transparent/5",
@@ -9685,6 +9819,7 @@ exports[`getClassList 1`] = `
   "placeholder-transparent/90",
   "placeholder-transparent/95",
   "placeholder-transparent/100",
+  "placeholder-transparent/background",
   "pointer-events-auto",
   "pointer-events-none",
   "pr-0",
@@ -9959,6 +10094,7 @@ exports[`getClassList 1`] = `
   "ring-current/90",
   "ring-current/95",
   "ring-current/100",
+  "ring-current/background",
   "ring-inherit",
   "ring-inherit/0",
   "ring-inherit/5",
@@ -9981,6 +10117,7 @@ exports[`getClassList 1`] = `
   "ring-inherit/90",
   "ring-inherit/95",
   "ring-inherit/100",
+  "ring-inherit/background",
   "ring-inset",
   "ring-offset-0",
   "ring-offset-1",
@@ -10009,6 +10146,7 @@ exports[`getClassList 1`] = `
   "ring-offset-current/90",
   "ring-offset-current/95",
   "ring-offset-current/100",
+  "ring-offset-current/background",
   "ring-offset-inherit",
   "ring-offset-inherit/0",
   "ring-offset-inherit/5",
@@ -10031,6 +10169,7 @@ exports[`getClassList 1`] = `
   "ring-offset-inherit/90",
   "ring-offset-inherit/95",
   "ring-offset-inherit/100",
+  "ring-offset-inherit/background",
   "ring-offset-transparent",
   "ring-offset-transparent/0",
   "ring-offset-transparent/5",
@@ -10053,6 +10192,7 @@ exports[`getClassList 1`] = `
   "ring-offset-transparent/90",
   "ring-offset-transparent/95",
   "ring-offset-transparent/100",
+  "ring-offset-transparent/background",
   "ring-transparent",
   "ring-transparent/0",
   "ring-transparent/5",
@@ -10075,6 +10215,7 @@ exports[`getClassList 1`] = `
   "ring-transparent/90",
   "ring-transparent/95",
   "ring-transparent/100",
+  "ring-transparent/background",
   "rotate-0",
   "rotate-1",
   "rotate-2",
@@ -11013,6 +11154,150 @@ exports[`getClassList 1`] = `
   "scroll-py-96",
   "scroll-py-px",
   "scroll-smooth",
+  "scrollbar-auto",
+  "scrollbar-gutter-auto",
+  "scrollbar-gutter-both",
+  "scrollbar-gutter-stable",
+  "scrollbar-none",
+  "scrollbar-thin",
+  "scrollbar-thumb-current",
+  "scrollbar-thumb-current/0",
+  "scrollbar-thumb-current/5",
+  "scrollbar-thumb-current/10",
+  "scrollbar-thumb-current/15",
+  "scrollbar-thumb-current/20",
+  "scrollbar-thumb-current/25",
+  "scrollbar-thumb-current/30",
+  "scrollbar-thumb-current/35",
+  "scrollbar-thumb-current/40",
+  "scrollbar-thumb-current/45",
+  "scrollbar-thumb-current/50",
+  "scrollbar-thumb-current/55",
+  "scrollbar-thumb-current/60",
+  "scrollbar-thumb-current/65",
+  "scrollbar-thumb-current/70",
+  "scrollbar-thumb-current/75",
+  "scrollbar-thumb-current/80",
+  "scrollbar-thumb-current/85",
+  "scrollbar-thumb-current/90",
+  "scrollbar-thumb-current/95",
+  "scrollbar-thumb-current/100",
+  "scrollbar-thumb-current/background",
+  "scrollbar-thumb-inherit",
+  "scrollbar-thumb-inherit/0",
+  "scrollbar-thumb-inherit/5",
+  "scrollbar-thumb-inherit/10",
+  "scrollbar-thumb-inherit/15",
+  "scrollbar-thumb-inherit/20",
+  "scrollbar-thumb-inherit/25",
+  "scrollbar-thumb-inherit/30",
+  "scrollbar-thumb-inherit/35",
+  "scrollbar-thumb-inherit/40",
+  "scrollbar-thumb-inherit/45",
+  "scrollbar-thumb-inherit/50",
+  "scrollbar-thumb-inherit/55",
+  "scrollbar-thumb-inherit/60",
+  "scrollbar-thumb-inherit/65",
+  "scrollbar-thumb-inherit/70",
+  "scrollbar-thumb-inherit/75",
+  "scrollbar-thumb-inherit/80",
+  "scrollbar-thumb-inherit/85",
+  "scrollbar-thumb-inherit/90",
+  "scrollbar-thumb-inherit/95",
+  "scrollbar-thumb-inherit/100",
+  "scrollbar-thumb-inherit/background",
+  "scrollbar-thumb-transparent",
+  "scrollbar-thumb-transparent/0",
+  "scrollbar-thumb-transparent/5",
+  "scrollbar-thumb-transparent/10",
+  "scrollbar-thumb-transparent/15",
+  "scrollbar-thumb-transparent/20",
+  "scrollbar-thumb-transparent/25",
+  "scrollbar-thumb-transparent/30",
+  "scrollbar-thumb-transparent/35",
+  "scrollbar-thumb-transparent/40",
+  "scrollbar-thumb-transparent/45",
+  "scrollbar-thumb-transparent/50",
+  "scrollbar-thumb-transparent/55",
+  "scrollbar-thumb-transparent/60",
+  "scrollbar-thumb-transparent/65",
+  "scrollbar-thumb-transparent/70",
+  "scrollbar-thumb-transparent/75",
+  "scrollbar-thumb-transparent/80",
+  "scrollbar-thumb-transparent/85",
+  "scrollbar-thumb-transparent/90",
+  "scrollbar-thumb-transparent/95",
+  "scrollbar-thumb-transparent/100",
+  "scrollbar-thumb-transparent/background",
+  "scrollbar-track-current",
+  "scrollbar-track-current/0",
+  "scrollbar-track-current/5",
+  "scrollbar-track-current/10",
+  "scrollbar-track-current/15",
+  "scrollbar-track-current/20",
+  "scrollbar-track-current/25",
+  "scrollbar-track-current/30",
+  "scrollbar-track-current/35",
+  "scrollbar-track-current/40",
+  "scrollbar-track-current/45",
+  "scrollbar-track-current/50",
+  "scrollbar-track-current/55",
+  "scrollbar-track-current/60",
+  "scrollbar-track-current/65",
+  "scrollbar-track-current/70",
+  "scrollbar-track-current/75",
+  "scrollbar-track-current/80",
+  "scrollbar-track-current/85",
+  "scrollbar-track-current/90",
+  "scrollbar-track-current/95",
+  "scrollbar-track-current/100",
+  "scrollbar-track-current/background",
+  "scrollbar-track-inherit",
+  "scrollbar-track-inherit/0",
+  "scrollbar-track-inherit/5",
+  "scrollbar-track-inherit/10",
+  "scrollbar-track-inherit/15",
+  "scrollbar-track-inherit/20",
+  "scrollbar-track-inherit/25",
+  "scrollbar-track-inherit/30",
+  "scrollbar-track-inherit/35",
+  "scrollbar-track-inherit/40",
+  "scrollbar-track-inherit/45",
+  "scrollbar-track-inherit/50",
+  "scrollbar-track-inherit/55",
+  "scrollbar-track-inherit/60",
+  "scrollbar-track-inherit/65",
+  "scrollbar-track-inherit/70",
+  "scrollbar-track-inherit/75",
+  "scrollbar-track-inherit/80",
+  "scrollbar-track-inherit/85",
+  "scrollbar-track-inherit/90",
+  "scrollbar-track-inherit/95",
+  "scrollbar-track-inherit/100",
+  "scrollbar-track-inherit/background",
+  "scrollbar-track-transparent",
+  "scrollbar-track-transparent/0",
+  "scrollbar-track-transparent/5",
+  "scrollbar-track-transparent/10",
+  "scrollbar-track-transparent/15",
+  "scrollbar-track-transparent/20",
+  "scrollbar-track-transparent/25",
+  "scrollbar-track-transparent/30",
+  "scrollbar-track-transparent/35",
+  "scrollbar-track-transparent/40",
+  "scrollbar-track-transparent/45",
+  "scrollbar-track-transparent/50",
+  "scrollbar-track-transparent/55",
+  "scrollbar-track-transparent/60",
+  "scrollbar-track-transparent/65",
+  "scrollbar-track-transparent/70",
+  "scrollbar-track-transparent/75",
+  "scrollbar-track-transparent/80",
+  "scrollbar-track-transparent/85",
+  "scrollbar-track-transparent/90",
+  "scrollbar-track-transparent/95",
+  "scrollbar-track-transparent/100",
+  "scrollbar-track-transparent/background",
   "select-all",
   "select-auto",
   "select-none",
@@ -11052,6 +11337,7 @@ exports[`getClassList 1`] = `
   "shadow-current/90",
   "shadow-current/95",
   "shadow-current/100",
+  "shadow-current/background",
   "shadow-inherit",
   "shadow-inherit/0",
   "shadow-inherit/5",
@@ -11074,6 +11360,7 @@ exports[`getClassList 1`] = `
   "shadow-inherit/90",
   "shadow-inherit/95",
   "shadow-inherit/100",
+  "shadow-inherit/background",
   "shadow-initial",
   "shadow-none",
   "shadow-transparent",
@@ -11098,6 +11385,7 @@ exports[`getClassList 1`] = `
   "shadow-transparent/90",
   "shadow-transparent/95",
   "shadow-transparent/100",
+  "shadow-transparent/background",
   "shrink",
   "shrink-0",
   "size-0",
@@ -11308,6 +11596,7 @@ exports[`getClassList 1`] = `
   "stroke-current/90",
   "stroke-current/95",
   "stroke-current/100",
+  "stroke-current/background",
   "stroke-inherit",
   "stroke-inherit/0",
   "stroke-inherit/5",
@@ -11330,6 +11619,7 @@ exports[`getClassList 1`] = `
   "stroke-inherit/90",
   "stroke-inherit/95",
   "stroke-inherit/100",
+  "stroke-inherit/background",
   "stroke-none",
   "stroke-transparent",
   "stroke-transparent/0",
@@ -11353,7 +11643,11 @@ exports[`getClassList 1`] = `
   "stroke-transparent/90",
   "stroke-transparent/95",
   "stroke-transparent/100",
+  "stroke-transparent/background",
   "subpixel-antialiased",
+  "tab-2",
+  "tab-4",
+  "tab-8",
   "table",
   "table-auto",
   "table-caption",
@@ -11391,6 +11685,7 @@ exports[`getClassList 1`] = `
   "text-current/90",
   "text-current/95",
   "text-current/100",
+  "text-current/background",
   "text-ellipsis",
   "text-end",
   "text-inherit",
@@ -11415,6 +11710,7 @@ exports[`getClassList 1`] = `
   "text-inherit/90",
   "text-inherit/95",
   "text-inherit/100",
+  "text-inherit/background",
   "text-justify",
   "text-left",
   "text-nowrap",
@@ -11442,6 +11738,7 @@ exports[`getClassList 1`] = `
   "text-shadow-current/90",
   "text-shadow-current/95",
   "text-shadow-current/100",
+  "text-shadow-current/background",
   "text-shadow-inherit",
   "text-shadow-inherit/0",
   "text-shadow-inherit/5",
@@ -11464,6 +11761,7 @@ exports[`getClassList 1`] = `
   "text-shadow-inherit/90",
   "text-shadow-inherit/95",
   "text-shadow-inherit/100",
+  "text-shadow-inherit/background",
   "text-shadow-initial",
   "text-shadow-none",
   "text-shadow-transparent",
@@ -11488,6 +11786,7 @@ exports[`getClassList 1`] = `
   "text-shadow-transparent/90",
   "text-shadow-transparent/95",
   "text-shadow-transparent/100",
+  "text-shadow-transparent/background",
   "text-start",
   "text-transparent",
   "text-transparent/0",
@@ -11511,6 +11810,7 @@ exports[`getClassList 1`] = `
   "text-transparent/90",
   "text-transparent/95",
   "text-transparent/100",
+  "text-transparent/background",
   "text-wrap",
   "text-xs",
   "to-0%",
@@ -11556,6 +11856,7 @@ exports[`getClassList 1`] = `
   "to-current/90",
   "to-current/95",
   "to-current/100",
+  "to-current/background",
   "to-inherit",
   "to-inherit/0",
   "to-inherit/5",
@@ -11578,6 +11879,7 @@ exports[`getClassList 1`] = `
   "to-inherit/90",
   "to-inherit/95",
   "to-inherit/100",
+  "to-inherit/background",
   "to-transparent",
   "to-transparent/0",
   "to-transparent/5",
@@ -11600,6 +11902,7 @@ exports[`getClassList 1`] = `
   "to-transparent/90",
   "to-transparent/95",
   "to-transparent/100",
+  "to-transparent/background",
   "top-0",
   "top-0.5",
   "top-1",
@@ -11968,6 +12271,7 @@ exports[`getClassList 1`] = `
   "via-current/90",
   "via-current/95",
   "via-current/100",
+  "via-current/background",
   "via-inherit",
   "via-inherit/0",
   "via-inherit/5",
@@ -11990,6 +12294,7 @@ exports[`getClassList 1`] = `
   "via-inherit/90",
   "via-inherit/95",
   "via-inherit/100",
+  "via-inherit/background",
   "via-none",
   "via-transparent",
   "via-transparent/0",
@@ -12013,6 +12318,7 @@ exports[`getClassList 1`] = `
   "via-transparent/90",
   "via-transparent/95",
   "via-transparent/100",
+  "via-transparent/background",
   "visible",
   "w-0",
   "w-0.5",
@@ -12109,6 +12415,16 @@ exports[`getClassList 1`] = `
   "z-40",
   "z-50",
   "z-auto",
+  "zoom-50",
+  "zoom-75",
+  "zoom-90",
+  "zoom-95",
+  "zoom-100",
+  "zoom-105",
+  "zoom-110",
+  "zoom-125",
+  "zoom-150",
+  "zoom-200",
 ]
 `;
 
diff --git a/packages/tailwindcss/src/__snapshots__/utilities.test.ts.snap b/packages/tailwindcss/src/__snapshots__/utilities.test.ts.snap
index 12bf1312a..43e8fdf6f 100644
--- a/packages/tailwindcss/src/__snapshots__/utilities.test.ts.snap
+++ b/packages/tailwindcss/src/__snapshots__/utilities.test.ts.snap
@@ -1,7 +1,8 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`border-* 1`] = `
-"@layer properties {
+"
+@layer properties {
   @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
     *, :before, :after, ::backdrop {
       --tw-border-style: solid;
@@ -182,11 +183,13 @@ exports[`border-* 1`] = `
   syntax: "*";
   inherits: false;
   initial-value: solid;
-}"
+}
+"
 `;
 
 exports[`border-b-* 1`] = `
-"@layer properties {
+"
+@layer properties {
   @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
     *, :before, :after, ::backdrop {
       --tw-border-style: solid;
@@ -367,11 +370,13 @@ exports[`border-b-* 1`] = `
   syntax: "*";
   inherits: false;
   initial-value: solid;
-}"
+}
+"
 `;
 
 exports[`border-be-* 1`] = `
-"@layer properties {
+"
+@layer properties {
   @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
     *, :before, :after, ::backdrop {
       --tw-border-style: solid;
@@ -552,11 +557,13 @@ exports[`border-be-* 1`] = `
   syntax: "*";
   inherits: false;
   initial-value: solid;
-}"
+}
+"
 `;
 
 exports[`border-bs-* 1`] = `
-"@layer properties {
+"
+@layer properties {
   @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
     *, :before, :after, ::backdrop {
       --tw-border-style: solid;
@@ -737,11 +744,13 @@ exports[`border-bs-* 1`] = `
   syntax: "*";
   inherits: false;
   initial-value: solid;
-}"
+}
+"
 `;
 
 exports[`border-e-* 1`] = `
-"@layer properties {
+"
+@layer properties {
   @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
     *, :before, :after, ::backdrop {
       --tw-border-style: solid;
@@ -922,11 +931,13 @@ exports[`border-e-* 1`] = `
   syntax: "*";
   inherits: false;
   initial-value: solid;
-}"
+}
+"
 `;
 
 exports[`border-l-* 1`] = `
-"@layer properties {
+"
+@layer properties {
   @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
     *, :before, :after, ::backdrop {
       --tw-border-style: solid;
@@ -1107,11 +1118,13 @@ exports[`border-l-* 1`] = `
   syntax: "*";
   inherits: false;
   initial-value: solid;
-}"
+}
+"
 `;
 
 exports[`border-r-* 1`] = `
-"@layer properties {
+"
+@layer properties {
   @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
     *, :before, :after, ::backdrop {
       --tw-border-style: solid;
@@ -1292,11 +1305,13 @@ exports[`border-r-* 1`] = `
   syntax: "*";
   inherits: false;
   initial-value: solid;
-}"
+}
+"
 `;
 
 exports[`border-s-* 1`] = `
-"@layer properties {
+"
+@layer properties {
   @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
     *, :before, :after, ::backdrop {
       --tw-border-style: solid;
@@ -1477,11 +1492,13 @@ exports[`border-s-* 1`] = `
   syntax: "*";
   inherits: false;
   initial-value: solid;
-}"
+}
+"
 `;
 
 exports[`border-t-* 1`] = `
-"@layer properties {
+"
+@layer properties {
   @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
     *, :before, :after, ::backdrop {
       --tw-border-style: solid;
@@ -1662,11 +1679,13 @@ exports[`border-t-* 1`] = `
   syntax: "*";
   inherits: false;
   initial-value: solid;
-}"
+}
+"
 `;
 
 exports[`border-x-* 1`] = `
-"@layer properties {
+"
+@layer properties {
   @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
     *, :before, :after, ::backdrop {
       --tw-border-style: solid;
@@ -1847,11 +1866,13 @@ exports[`border-x-* 1`] = `
   syntax: "*";
   inherits: false;
   initial-value: solid;
-}"
+}
+"
 `;
 
 exports[`border-y-* 1`] = `
-"@layer properties {
+"
+@layer properties {
   @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
     *, :before, :after, ::backdrop {
       --tw-border-style: solid;
@@ -2032,5 +2053,6 @@ exports[`border-y-* 1`] = `
   syntax: "*";
   inherits: false;
   initial-value: solid;
-}"
+}
+"
 `;
diff --git a/packages/tailwindcss/src/apply.ts b/packages/tailwindcss/src/apply.ts
index c7bcc5e28..2d5e5b847 100644
--- a/packages/tailwindcss/src/apply.ts
+++ b/packages/tailwindcss/src/apply.ts
@@ -163,13 +163,52 @@ export function substituteAtApply(ast: AstNode[], designSystem: DesignSystem) {
 
       let parts = child.params.split(/(\s+)/g)
       let candidateOffsets: Record<string, number> = {}
+      let normalIdents: string[] = []
+      let dashedIdents: string[] = []
 
       let offset = 0
       for (let [idx, part] of parts.entries()) {
-        if (idx % 2 === 0) candidateOffsets[part] = offset
+        if (idx % 2 === 0) {
+          if (part[0] === '-' && part[1] === '-') {
+            dashedIdents.push(part)
+          } else {
+            normalIdents.push(part)
+          }
+
+          candidateOffsets[part] = offset
+        }
+
         offset += part.length
       }
 
+      if (dashedIdents.length) {
+        // If we have an `@apply` that only consists of dashed idents then the
+        // user is intending to use a CSS mixin:
+        // https://drafts.csswg.org/css-mixins-1/#apply-rule
+        //
+        // These are not considered utilities and need to be emitted literally.
+        if (normalIdents.length === 0) return WalkAction.Skip
+
+        // If we find a dashed ident *here* it means that someone is trying
+        // to use mixins and our `@apply` behavior together.
+        //
+        // This is invalid and the rules must be written separately. Let the
+        // user know they need to move them into a separate rule.
+        let list = dashedIdents.join(' ')
+
+        throw new Error(
+          `You cannot use \`@apply\` with both mixins and utilities. Please move \`@apply ${list}\` into a separate rule.`,
+        )
+      }
+
+      let hasBody = child.nodes.length > 0
+
+      if (hasBody && normalIdents.length) {
+        let list = normalIdents.join(' ')
+
+        throw new Error(`The rule \`@apply ${list}\` must not have a body.`)
+      }
+
       // Replace the `@apply` rule with the actual utility classes
       {
         // Parse the candidates to an AST that we can replace the `@apply` rule
diff --git a/packages/tailwindcss/src/ast.test.ts b/packages/tailwindcss/src/ast.test.ts
index 24f31f7bb..14092c9f5 100644
--- a/packages/tailwindcss/src/ast.test.ts
+++ b/packages/tailwindcss/src/ast.test.ts
@@ -1,16 +1,18 @@
-import { expect, it } from 'vitest'
+import { describe, expect, it, test } from 'vitest'
 import {
-  atRule,
   context,
   cssContext,
   decl,
+  handleNesting,
   optimizeAst,
+  rule,
   styleRule,
   toCss,
   type AstNode,
 } from './ast'
 import * as CSS from './css-parser'
 import { buildDesignSystem } from './design-system'
+import { pretty } from './test-utils/run'
 import { Theme } from './theme'
 import { walk, WalkAction } from './walk'
 
@@ -18,9 +20,9 @@ const css = String.raw
 const defaultDesignSystem = buildDesignSystem(new Theme())
 
 it('should pretty print an AST', () => {
-  expect(toCss(optimizeAst(CSS.parse('.foo{color:red;&:hover{color:blue;}}'), defaultDesignSystem)))
-    .toMatchInlineSnapshot(`
-    ".foo {
+  expect(pretty(toCss(CSS.parse('.foo{color:red;&:hover{color:blue;}}')))).toMatchInlineSnapshot(`
+    "
+    .foo {
       color: red;
       &:hover {
         color: blue;
@@ -68,8 +70,9 @@ it('allows the placement of context nodes', () => {
   expect(blueContext).toEqual({ context: 'a' })
   expect(greenContext).toEqual({ context: 'b' })
 
-  expect(toCss(optimizeAst(ast, defaultDesignSystem))).toMatchInlineSnapshot(`
-    ".foo {
+  expect(pretty(toCss(optimizeAst(ast, defaultDesignSystem)))).toMatchInlineSnapshot(`
+    "
+    .foo {
       color: red;
     }
     .bar {
@@ -82,36 +85,6 @@ it('allows the placement of context nodes', () => {
   `)
 })
 
-it('should stop walking when returning `WalkAction.Stop`', () => {
-  let ast = [
-    styleRule('.foo', [styleRule('.nested', [styleRule('.bail', [decl('color', 'red')])])]),
-    styleRule('.bar'),
-    styleRule('.baz'),
-    styleRule('.qux'),
-  ]
-
-  let seen = new Set()
-
-  walk(ast, (node) => {
-    if (node.kind === 'rule') {
-      seen.add(node.selector)
-    }
-
-    if (node.kind === 'rule' && node.selector === '.bail') {
-      return WalkAction.Stop
-    }
-  })
-
-  // We do not want to see `.bar`, `.baz`, or `.qux` because we bailed early
-  expect(seen).toMatchInlineSnapshot(`
-    Set {
-      ".foo",
-      ".nested",
-      ".bail",
-    }
-  `)
-})
-
 it('should not emit empty rules once optimized', () => {
   let ast = CSS.parse(css`
     /* Empty rule */
@@ -154,13 +127,15 @@ it('should not emit empty rules once optimized', () => {
     /* Exceptions: */
     @charset "UTF-8";
     @layer foo, bar, baz;
+    @layer foo, bar, baz; /* Will be deduped */
     @custom-media --modern (color), (hover);
     @namespace 'http://www.w3.org/1999/xhtml';
     @import url('https://fonts.googleapis.com/css2?family=Cedarville+Cursive&display=swap');
   `)
 
-  expect(toCss(ast)).toMatchInlineSnapshot(`
-    ".foo {
+  expect(pretty(toCss(ast))).toMatchInlineSnapshot(`
+    "
+    .foo {
     }
     .foo {
       .bar {
@@ -187,14 +162,16 @@ it('should not emit empty rules once optimized', () => {
     }
     @charset "UTF-8";
     @layer foo, bar, baz;
+    @layer foo, bar, baz;
     @custom-media --modern (color), (hover);
     @namespace 'http://www.w3.org/1999/xhtml';
     @import url('https://fonts.googleapis.com/css2?family=Cedarville+Cursive&display=swap');
     "
   `)
 
-  expect(toCss(optimizeAst(ast, defaultDesignSystem))).toMatchInlineSnapshot(`
-    "@charset "UTF-8";
+  expect(pretty(toCss(optimizeAst(ast, defaultDesignSystem)))).toMatchInlineSnapshot(`
+    "
+    @charset "UTF-8";
     @layer foo, bar, baz;
     @custom-media --modern (color), (hover);
     @namespace 'http://www.w3.org/1999/xhtml';
@@ -235,8 +212,9 @@ it('should not emit exact duplicate declarations in the same rule', () => {
     }
   `)
 
-  expect(toCss(ast)).toMatchInlineSnapshot(`
-    ".foo {
+  expect(pretty(toCss(ast))).toMatchInlineSnapshot(`
+    "
+    .foo {
       color: red;
       .bar {
         color: green;
@@ -267,20 +245,27 @@ it('should not emit exact duplicate declarations in the same rule', () => {
     "
   `)
 
-  expect(toCss(optimizeAst(ast, defaultDesignSystem))).toMatchInlineSnapshot(`
-    ".foo {
+  expect(pretty(toCss(optimizeAst(ast, defaultDesignSystem)))).toMatchInlineSnapshot(`
+    "
+    .foo {
       .bar {
+        color: green;
         color: blue;
         color: green;
       }
       color: red;
-    }
-    .foo {
-      color: green;
-      color: blue;
-      color: red;
+      & {
+        color: green;
+        & {
+          color: red;
+          color: green;
+          color: blue;
+        }
+        color: red;
+      }
       background: blue;
       .bar {
+        color: green;
         color: blue;
         color: green;
       }
@@ -307,8 +292,9 @@ it('should not emit color-mix() fallbacks inside @keyframes', () => {
 
   let design = buildDesignSystem(theme)
 
-  expect(toCss(optimizeAst(ast, design))).toMatchInlineSnapshot(`
-    "@keyframes my-animation {
+  expect(pretty(toCss(optimizeAst(ast, design)))).toMatchInlineSnapshot(`
+    "
+    @keyframes my-animation {
       0% {
         color: color-mix(in oklab, var(--color-emerald-600) 0%, transparent);
       }
@@ -320,303 +306,1359 @@ it('should not emit color-mix() fallbacks inside @keyframes', () => {
   `)
 })
 
-it('should only visit children once when calling `replaceWith` with single element array', () => {
-  let visited = new Set()
+describe('optimization', () => {
+  function optimize(input: string) {
+    let ast = CSS.parse(input)
+    walk(ast, {
+      exit(node) {
+        // Depending on where we use `@scope`, it's handled slightly differently:
+        //
+        // 1. In user authored CSS, we perform the normal CSS nesting and
+        //    hoisting of `@scope` rules
+        // 2. In a `@custom-variant` definition, we need to swap the `@scope`
+        //    with the parent definition. Otherwise you'll never get the
+        //    expected "sandwich" effect.
+        //
+        // This little `@in-variant` hack is just a different way of
+        // differentiating between both cases for these tests.
+        if (node.kind === 'at-rule' && node.name === '@in-variant') {
+          return WalkAction.Replace(context({ source: 'variant' }, node.nodes))
+        }
+      },
+    })
+    return pretty(toCss(handleNesting(ast)))
+  }
 
-  let ast: AstNode[] = [
-    atRule('@media', '', [styleRule('.foo', [decl('color', 'blue')])]),
-    styleRule('.bar', [decl('color', 'blue')]),
-  ]
+  // See: https://drafts.csswg.org/css-nesting-1/
+  describe('CSS Nesting Module Level 1', () => {
+    it('uses the descendant combinator by default', async () => {
+      expect(
+        optimize(css`
+          .a {
+            element {
+              --x: 1;
+            }
+            .class {
+              --x: 2;
+            }
+            #id {
+              --x: 3;
+            }
+            :pseudo-class {
+              --x: 4;
+            }
+            ::pseudo-element {
+              --x: 5;
+            }
+            [attribute] {
+              --x: 6;
+            }
+            * {
+              --x: 7;
+            }
+          }
+        `),
+      ).toMatchInlineSnapshot(`
+        "
+        .a element {
+          --x: 1;
+        }
+        .a .class {
+          --x: 2;
+        }
+        .a #id {
+          --x: 3;
+        }
+        .a :pseudo-class {
+          --x: 4;
+        }
+        .a ::pseudo-element {
+          --x: 5;
+        }
+        .a [attribute] {
+          --x: 6;
+        }
+        .a * {
+          --x: 7;
+        }
+        "
+      `)
+    })
 
-  walk(ast, (node) => {
-    if (visited.has(node)) {
-      throw new Error('Visited node twice')
-    }
-    visited.add(node)
+    it('should be possible to change the combinator', async () => {
+      expect(
+        optimize(css`
+          .a {
+            + .b {
+              --x: 1;
+            }
+            > .c {
+              --x: 2;
+            }
+            ~ .d {
+              --x: 3;
+            }
+          }
+        `),
+      ).toMatchInlineSnapshot(`
+        "
+        .a + .b {
+          --x: 1;
+        }
+        .a > .c {
+          --x: 2;
+        }
+        .a ~ .d {
+          --x: 3;
+        }
+        "
+      `)
+    })
 
-    if (node.kind === 'at-rule') return WalkAction.Replace(node.nodes)
+    it('should replace the first rule, that contains `&` with `:scope`', async () => {
+      expect(
+        optimize(css`
+          /* Standalone */
+          & {
+            --x: 1;
+          }
+
+          /* In an at-rule */
+          @supports (--y: 1) {
+            & {
+              --x: 2;
+            }
+          }
+
+          /* With :is(…) */
+          :is(&) {
+            --x: 3;
+          }
+
+          /* In an at-rule, with :is(…) */
+          @supports (--y: 2) {
+            :is(&) {
+              --x: 4;
+            }
+          }
+
+          /* With multiple selectors */
+          &,
+          .a {
+            --x: 5;
+          }
+
+          /* With multiple selectors + :is(…) */
+          :is(&),
+          .b {
+            --x: 6;
+          }
+
+          /* With multiple selectors in an at-rule */
+          @supports (--y: 3) {
+            &,
+            .c {
+              --x: 7;
+            }
+          }
+
+          /* With multiple selectors in an at-rule + :is(…) */
+          @supports (--y: 4) {
+            :is(&),
+            .d {
+              --x: 8;
+            }
+          }
+        `),
+      ).toMatchInlineSnapshot(`
+        "
+        :scope {
+          --x: 1;
+        }
+        @supports (--y: 1) {
+          :scope {
+            --x: 2;
+          }
+        }
+        :is(:scope) {
+          --x: 3;
+        }
+        @supports (--y: 2) {
+          :is(:scope) {
+            --x: 4;
+          }
+        }
+        :scope, .a {
+          --x: 5;
+        }
+        :is(:scope), .b {
+          --x: 6;
+        }
+        @supports (--y: 3) {
+          :scope, .c {
+            --x: 7;
+          }
+        }
+        @supports (--y: 4) {
+          :is(:scope), .d {
+            --x: 8;
+          }
+        }
+        "
+      `)
+    })
+
+    it('should be possible to use `&` to explicitly match the parent', async () => {
+      expect(
+        optimize(css`
+          .a {
+            & + .b {
+              --x: 1;
+            }
+            & > .c {
+              --x: 2;
+            }
+            & ~ .d {
+              --x: 3;
+            }
+          }
+        `),
+      ).toMatchInlineSnapshot(`
+        "
+        .a + .b {
+          --x: 1;
+        }
+        .a > .c {
+          --x: 2;
+        }
+        .a ~ .d {
+          --x: 3;
+        }
+        "
+      `)
+    })
+
+    it('should be possible to use `&` in a different location', async () => {
+      expect(
+        optimize(css`
+          .a {
+            .b & {
+              --x: 1;
+            }
+            .c + & {
+              --x: 2;
+            }
+            .d > & {
+              --x: 3;
+            }
+            .e ~ & {
+              --x: 4;
+            }
+          }
+        `),
+      ).toMatchInlineSnapshot(`
+        "
+        .b .a {
+          --x: 1;
+        }
+        .c + .a {
+          --x: 2;
+        }
+        .d > .a {
+          --x: 3;
+        }
+        .e ~ .a {
+          --x: 4;
+        }
+        "
+      `)
+    })
+
+    it('should be possible to use `&` on its own', async () => {
+      expect(
+        optimize(css`
+          .a {
+            & {
+              --x: 1;
+            }
+          }
+        `),
+      ).toMatchInlineSnapshot(`
+        "
+        .a {
+          --x: 1;
+        }
+        "
+      `)
+    })
+
+    it('should be possible to use `&` nested in `:is(…)`', async () => {
+      expect(
+        optimize(css`
+          .a {
+            :is(&) {
+              --x: 1;
+            }
+            :is(:is(:is(&))) {
+              --x: 2;
+            }
+          }
+        `),
+      ).toMatchInlineSnapshot(`
+        "
+        :is(.a) {
+          --x: 1;
+        }
+        :is(:is(:is(.a))) {
+          --x: 2;
+        }
+        "
+      `)
+    })
+
+    it('should be possible to handle nesting with a parent selector list', async () => {
+      expect(
+        optimize(css`
+          .a,
+          .b {
+            .c,
+            .d & {
+              --x: 1;
+              &:hover {
+                --x: 2;
+              }
+            }
+          }
+        `),
+      ).toMatchInlineSnapshot(`
+        "
+        :is(.a, .b) .c, .d :is(.a, .b) {
+          --x: 1;
+          &:hover {
+            --x: 2;
+          }
+        }
+        "
+      `)
+    })
+
+    it('should not replace `\&`', () => {
+      expect(
+        optimize(css`
+          .a {
+            .b-\& {
+              --x: 1;
+            }
+          }
+        `),
+      ).toMatchInlineSnapshot(`
+        "
+        .a .b-\\& {
+          --x: 1;
+        }
+        "
+      `)
+    })
+
+    it('should not replace `&` as part of a string', () => {
+      expect(
+        optimize(css`
+          .a {
+            [data-b='c&d'] {
+              --x: 1;
+            }
+          }
+        `),
+      ).toMatchInlineSnapshot(`
+        "
+        .a [data-b='c&d'] {
+          --x: 1;
+        }
+        "
+      `)
+    })
+
+    it.each([
+      ['element', '&element', ':is(element)element'], // Invalid CSS
+      ['element', 'element&', 'element:is(element)'],
+      ['element', '&.class', 'element.class'],
+      ['element', '.class&', '.class:is(element)'], // Optimization: element.class
+      ['element', '&#id', 'element#id'],
+      ['element', '#id&', '#id:is(element)'], // Optimization: element#id
+      ['element', '&:hover', 'element:hover'],
+      ['element', ':hover&', ':hover:is(element)'],
+      ['element', '&::before', 'element::before'],
+      ['element', '::before&', '::before:is(element)'], // Invalid CSS
+      ['element', '&:not(.x)', 'element:not(.x)'],
+      ['element', ':not(.x)&', ':not(.x):is(element)'], // Optimization: element:not(.x)
+      ['element', '&[attribute]', 'element[attribute]'],
+      ['element', '[attribute]&', '[attribute]:is(element)'], // Optimization: element[attribute]
+      ['element', '&*', ':is(element)*'], // Invalid CSS
+      ['element', '*&', 'element'],
+
+      ['.class', '&element', ':is(.class)element'], // Invalid CSS
+      ['.class', 'element&', 'element.class'],
+      ['.class', '&.class', '.class.class'],
+      ['.class', '.class&', '.class.class'],
+      ['.class', '&#id', '.class#id'],
+      ['.class', '#id&', '#id.class'],
+      ['.class', '&:hover', '.class:hover'],
+      ['.class', ':hover&', ':hover.class'],
+      ['.class', '&::before', '.class::before'],
+      ['.class', '::before&', '::before.class'], // Invalid CSS
+      ['.class', '&:not(.x)', '.class:not(.x)'],
+      ['.class', ':not(.x)&', ':not(.x).class'],
+      ['.class', '&[attribute]', '.class[attribute]'],
+      ['.class', '[attribute]&', '[attribute].class'],
+      ['.class', '&*', ':is(.class)*'], // Invalid CSS
+      ['.class', '*&', '.class'],
+
+      ['#id', '&element', ':is(#id)element'], // Invalid CSS
+      ['#id', 'element&', 'element#id'],
+      ['#id', '&.class', '#id.class'],
+      ['#id', '.class&', '.class#id'],
+      ['#id', '&#id', '#id#id'],
+      ['#id', '#id&', '#id#id'],
+      ['#id', '&:hover', '#id:hover'],
+      ['#id', ':hover&', ':hover#id'],
+      ['#id', '&::before', '#id::before'],
+      ['#id', '::before&', '::before#id'], // Invalid CSS
+      ['#id', '&:not(.x)', '#id:not(.x)'],
+      ['#id', ':not(.x)&', ':not(.x)#id'],
+      ['#id', '&[attribute]', '#id[attribute]'],
+      ['#id', '[attribute]&', '[attribute]#id'],
+      ['#id', '&*', ':is(#id)*'], // Invalid CSS
+      ['#id', '*&', '#id'],
+
+      [':hover', '&element', ':is(:hover)element'], // Invalid CSS
+      [':hover', 'element&', 'element:hover'],
+      [':hover', '&.class', ':hover.class'],
+      [':hover', '.class&', '.class:hover'],
+      [':hover', '&#id', ':hover#id'],
+      [':hover', '#id&', '#id:hover'],
+      [':hover', '&:hover', ':hover:hover'],
+      [':hover', ':hover&', ':hover:hover'],
+      [':hover', '&::before', ':hover::before'],
+      [':hover', '::before&', '::before:hover'],
+      [':hover', '&:not(.x)', ':hover:not(.x)'],
+      [':hover', ':not(.x)&', ':not(.x):hover'],
+      [':hover', '&[attribute]', ':hover[attribute]'],
+      [':hover', '[attribute]&', '[attribute]:hover'],
+      [':hover', '&*', ':is(:hover)*'], // Invalid CSS
+      [':hover', '*&', ':hover'],
+
+      ['::before', '&element', ':is(::before)element'], // Invalid CSS
+      ['::before', 'element&', 'element::before'],
+      ['::before', '&.class', '::before.class'],
+      ['::before', '.class&', '.class::before'],
+      ['::before', '&#id', '::before#id'],
+      ['::before', '#id&', '#id::before'],
+      ['::before', '&:hover', '::before:hover'],
+      ['::before', ':hover&', ':hover::before'],
+      ['::before', '&::before', '::before::before'],
+      ['::before', '::before&', '::before::before'],
+      ['::before', '&:not(.x)', '::before:not(.x)'],
+      ['::before', ':not(.x)&', ':not(.x)::before'],
+      ['::before', '&[attribute]', '::before[attribute]'],
+      ['::before', '[attribute]&', '[attribute]::before'],
+      ['::before', '&*', ':is(::before)*'], // Invalid CSS
+      ['::before', '*&', '::before'],
+
+      [':not(.x)', '&element', ':is(:not(.x))element'], // Invalid CSS
+      [':not(.x)', 'element&', 'element:not(.x)'],
+      [':not(.x)', '&.class', ':not(.x).class'],
+      [':not(.x)', '.class&', '.class:not(.x)'],
+      [':not(.x)', '&#id', ':not(.x)#id'],
+      [':not(.x)', '#id&', '#id:not(.x)'],
+      [':not(.x)', '&:hover', ':not(.x):hover'],
+      [':not(.x)', ':hover&', ':hover:not(.x)'],
+      [':not(.x)', '&::before', ':not(.x)::before'],
+      [':not(.x)', '::before&', '::before:not(.x)'],
+      [':not(.x)', '&:not(.x)', ':not(.x):not(.x)'],
+      [':not(.x)', ':not(.x)&', ':not(.x):not(.x)'],
+      [':not(.x)', '&[attribute]', ':not(.x)[attribute]'],
+      [':not(.x)', '[attribute]&', '[attribute]:not(.x)'],
+      [':not(.x)', '&*', ':is(:not(.x))*'], // Invalid CSS
+      [':not(.x)', '*&', ':not(.x)'],
+
+      ['[attribute]', '&element', ':is([attribute])element'], // Invalid CSS
+      ['[attribute]', 'element&', 'element[attribute]'],
+      ['[attribute]', '&.class', '[attribute].class'],
+      ['[attribute]', '.class&', '.class[attribute]'],
+      ['[attribute]', '&#id', '[attribute]#id'],
+      ['[attribute]', '#id&', '#id[attribute]'],
+      ['[attribute]', '&:hover', '[attribute]:hover'],
+      ['[attribute]', ':hover&', ':hover[attribute]'],
+      ['[attribute]', '&::before', '[attribute]::before'],
+      ['[attribute]', '::before&', '::before[attribute]'],
+      ['[attribute]', '&:not(.x)', '[attribute]:not(.x)'],
+      ['[attribute]', ':not(.x)&', ':not(.x)[attribute]'],
+      ['[attribute]', '&[attribute]', '[attribute][attribute]'],
+      ['[attribute]', '[attribute]&', '[attribute][attribute]'],
+      ['[attribute]', '&*', ':is([attribute])*'], // Invalid CSS
+      ['[attribute]', '*&', '[attribute]'],
+
+      ['*', '&element', ':is(*)element'], // Invalid CSS
+      ['*', 'element&', 'element:is(*)'],
+      ['*', '&.class', '.class'],
+      ['*', '.class&', '.class:is(*)'], // Optimization: *.class → .class
+      ['*', '&#id', '#id'],
+      ['*', '#id&', '#id:is(*)'], // Optimization: *#id → #id
+      ['*', '&:hover', ':hover'],
+      ['*', ':hover&', ':hover:is(*)'],
+      ['*', '&::before', '::before'],
+      ['*', '::before&', '::before:is(*)'], // Invalid CSS
+      ['*', '&:not(.x)', ':not(.x)'],
+      ['*', ':not(.x)&', ':not(.x):is(*)'], // Optimization: *:not(.x) → :not(.x)
+      ['*', '&[attribute]', '[attribute]'],
+      ['*', '[attribute]&', '[attribute]:is(*)'], // Optimization: *[attribute] → [attribute]
+      ['*', '&*', ':is(*)*'], // Invalid CSS
+      ['*', '*&', '*'],
+
+      ['&', '&element', ':is(:scope)element'], // Invalid CSS
+      ['&', 'element&', 'element:scope'],
+      ['&', '&.class', ':scope.class'],
+      ['&', '.class&', '.class:scope'],
+      ['&', '&#id', ':scope#id'],
+      ['&', '#id&', '#id:scope'],
+      ['&', '&:hover', ':scope:hover'],
+      ['&', ':hover&', ':hover:scope'],
+      ['&', '&::before', ':scope::before'],
+      ['&', '::before&', '::before:scope'],
+      ['&', '&:not(.x)', ':scope:not(.x)'],
+      ['&', ':not(.x)&', ':not(.x):scope'],
+      ['&', '&[attribute]', ':scope[attribute]'],
+      ['&', '[attribute]&', '[attribute]:scope'],
+      ['&', '&*', ':is(:scope)*'], // Invalid CSS
+      ['&', '*&', ':scope'],
+    ])(`'%s { %s }' → '%s' (%#)`, async (root, nested, expected) => {
+      let optimized = optimize(toCss([rule(root, [rule(nested, [decl('--x', '0')])])]))
+      let ast = CSS.parse(optimized)
+
+      let count = 0
+      walk(ast, () => void count++)
+
+      // 1 rule, 1 declaration
+      expect(count).toBe(2)
+
+      if (ast[0].kind !== 'rule') throw new Error('expected a rule')
+      expect(ast[0].selector).toEqual(expected)
+    })
+
+    it('should not remove the `*` namespace from namespaced selectors', () => {
+      expect(
+        optimize(css`
+          .a {
+            & *|div {
+              color: red;
+            }
+          }
+        `),
+      ).toMatchInlineSnapshot(`
+        "
+        .a *|div {
+          color: red;
+        }
+        "
+      `)
+    })
+
+    test('multiple selectors in the list are relative to the parent', async () => {
+      expect(
+        optimize(css`
+          .a,
+          .b {
+            --x: 1;
+            + .c {
+              --x: 2;
+            }
+            &.d {
+              --x: 3;
+            }
+          }
+        `),
+      ).toMatchInlineSnapshot(`
+        "
+        .a, .b {
+          --x: 1;
+          + .c {
+            --x: 2;
+          }
+          &.d {
+            --x: 3;
+          }
+        }
+        "
+      `)
+    })
+
+    it('should be possible to use `&` multiple times', async () => {
+      expect(
+        optimize(css`
+          .a {
+            & .b & .c & .d {
+              --x: 1;
+            }
+          }
+        `),
+      ).toMatchInlineSnapshot(`
+        "
+        .a .b .a .c .a .d {
+          --x: 1;
+        }
+        "
+      `)
+    })
+
+    it('should be possible to use `&` multiple times in a row', async () => {
+      expect(
+        optimize(css`
+          .a {
+            &&& {
+              --x: 1;
+            }
+          }
+        `),
+      ).toMatchInlineSnapshot(`
+        "
+        .a.a.a {
+          --x: 1;
+        }
+        "
+      `)
+    })
+
+    it('should be possible to use `&` inside a selector', async () => {
+      expect(
+        optimize(css`
+          .a {
+            :not(&) {
+              --x: 1;
+            }
+          }
+        `),
+      ).toMatchInlineSnapshot(`
+        "
+        :not(.a) {
+          --x: 1;
+        }
+        "
+      `)
+    })
+
+    it('should be possible to use deeply nested CSS', async () => {
+      expect(
+        optimize(css`
+          .a,
+          .b {
+            --x: 1;
+
+            .c & {
+              --x: 2;
+
+              &:hover,
+              &:focus {
+                --x: 3;
+                .d {
+                  --x: 4;
+                }
+              }
+            }
+          }
+        `),
+      ).toMatchInlineSnapshot(`
+        "
+        .a, .b {
+          --x: 1;
+          .c & {
+            --x: 2;
+            &:hover, &:focus {
+              --x: 3;
+              .d {
+                --x: 4;
+              }
+            }
+          }
+        }
+        "
+      `)
+    })
+
+    it('should properly split rules to guarantee specificity', async () => {
+      expect(
+        optimize(css`
+          .a {
+            --before: 1;
+            &:hover {
+              --inside: 1;
+            }
+            --after: 1;
+          }
+        `),
+      ).toMatchInlineSnapshot(`
+        "
+        .a {
+          --before: 1;
+          &:hover {
+            --inside: 1;
+          }
+          --after: 1;
+        }
+        "
+      `)
+    })
+
+    it.each([
+      ['div', '&', 'div'],
+      ['div', '[before]&', '[before]:is(div)'],
+      ['div', '&[after]', 'div[after]'],
+      ['div', '[before]&[after]', '[before]:is(div)[after]'],
+      ['div', '[before] &', '[before] div'],
+      ['div', '& [after]', 'div [after]'],
+      ['div', '[before] & [after]', '[before] div [after]'],
+
+      ['.parent', '&', '.parent'],
+      ['.parent', '[before]&', '[before].parent'],
+      ['.parent', '&[after]', '.parent[after]'],
+      ['.parent', '[before]&[after]', '[before].parent[after]'],
+      ['.parent', '[before] &', '[before] .parent'],
+      ['.parent', '& [after]', '.parent [after]'],
+      ['.parent', '[before] & [after]', '[before] .parent [after]'],
+
+      ['.a > .b', '&', '.a > .b'],
+      ['.a > .b', '[before]&', '[before]:is(.a > .b)'],
+      ['.a > .b', '&[after]', '.a > .b[after]'],
+      ['.a > .b', '[before]&[after]', '[before]:is(.a > .b)[after]'],
+      ['.a > .b', '[before] &', '[before] :is(.a > .b)'],
+      ['.a > .b', '& [after]', '.a > .b [after]'],
+      ['.a > .b', '[before] & [after]', '[before] :is(.a > .b) [after]'],
+    ])(`should optimize '%s { %s }' → '%s' (%#)`, async (root, nested, expected) => {
+      let optimized = optimize(toCss([rule(root, [rule(nested, [decl('--x', '0')])])]))
+      let ast = CSS.parse(optimized)
+
+      let count = 0
+      walk(ast, () => void count++)
+
+      // 1 rule, 1 declaration
+      expect(count).toBe(2)
+
+      if (ast[0].kind !== 'rule') throw new Error('expected a rule')
+      expect(ast[0].selector).toEqual(expected)
+    })
+
+    it('should hoist at-rules', async () => {
+      expect(
+        optimize(css`
+          @layer utilities {
+            .a,
+            .b {
+              @media (print) {
+                --x: 1;
+                .c {
+                  @media (min-width: 123px) {
+                    --x: 2;
+                  }
+                }
+              }
+            }
+            .d {
+              @media (print) {
+                @media (min-width: 123px) {
+                  --x: 3;
+                }
+              }
+            }
+          }
+          @property --foo {
+            syntax: '*';
+          }
+          @layer utilities {
+            .e {
+              @media (print) {
+                --x: 4;
+              }
+            }
+          }
+        `),
+      ).toMatchInlineSnapshot(`
+        "
+        @layer utilities {
+          @media (print) {
+            .a, .b {
+              --x: 1;
+            }
+            @media (min-width: 123px) {
+              :is(.a, .b) .c {
+                --x: 2;
+              }
+              .d {
+                --x: 3;
+              }
+            }
+          }
+        }
+        @property --foo {
+          syntax: '*';
+        }
+        @layer utilities {
+          @media (print) {
+            .e {
+              --x: 4;
+            }
+          }
+        }
+        "
+      `)
+    })
+
+    it('should hoist `@scope` at-rules', async () => {
+      expect(
+        optimize(css`
+          @layer utilities {
+            .parent {
+              @in-variant {
+                @scope (.from) to (.to) {
+                  --x: 1;
+                }
+              }
+            }
+          }
+        `),
+      ).toMatchInlineSnapshot(`
+        "
+        @layer utilities {
+          @scope (.from) to (.to) {
+            .parent {
+              --x: 1;
+            }
+          }
+        }
+        "
+      `)
+    })
+
+    // We have an optimization where the moment we see a declaration that we
+    // stop handling the nesting and emit everything as-is. This won't work when
+    // we're dealing with `@scope` and we still want to hoist that out.
+    it('should hoist `@scope` at-rules, even when sibling declarations are present', async () => {
+      expect(
+        optimize(css`
+          @layer utilities {
+            .parent {
+              --x: 1;
+              @in-variant {
+                @scope (.from) {
+                  .inside {
+                    --y: 2;
+                  }
+                }
+              }
+            }
+          }
+        `),
+      ).toMatchInlineSnapshot(`
+        "
+        @layer utilities {
+          .parent {
+            --x: 1;
+          }
+          @scope (.from) {
+            .parent .inside {
+              --y: 2;
+            }
+          }
+        }
+        "
+      `)
+    })
+
+    it('should resolve `&` in the `@scope` prelude when hoisting', async () => {
+      // `&` in the `<scope-start>` selector refers to the elements matched by
+      // the nearest ancestor style rule, while `&` in the `<scope-end>`
+      // selector refers to the scoping root.
+      //
+      // See: https://drafts.csswg.org/css-nesting-1/#nesting-at-scope
+      expect(
+        optimize(css`
+          .parent {
+            @scope (& > .scope) to (& .limit) {
+              .content {
+                --x: 1;
+              }
+            }
+          }
+        `),
+      ).toMatchInlineSnapshot(`
+        "
+        @scope (.parent > .scope) to (:where(:scope) .limit) {
+          .content {
+            --x: 1;
+          }
+        }
+        "
+      `)
+
+      // Selector lists need `:is(…)` to keep their meaning
+      expect(
+        optimize(css`
+          .parent-a,
+          .parent-b {
+            @scope (& > .from) {
+              .inside {
+                --x: 1;
+              }
+            }
+          }
+        `),
+      ).toMatchInlineSnapshot(`
+        "
+        @scope (:is(.parent-a, .parent-b) > .from) {
+          .inside {
+            --x: 1;
+          }
+        }
+        "
+      `)
+
+      // The `<scope-start>` selector is optional, so the first group in the
+      // prelude is not necessarily the `<scope-start>` selector.
+      expect(
+        optimize(css`
+          .parent {
+            @scope to (& .to) {
+              .inside {
+                --x: 1;
+              }
+            }
+          }
+        `),
+      ).toMatchInlineSnapshot(`
+        "
+        @scope to (:where(:scope) .to) {
+          .parent .inside {
+            --x: 1;
+          }
+        }
+        "
+      `)
+
+      // The parent selector is substituted with the same logic as the nesting
+      // selector in regular style rules: `:is(…)` is used when substituting the
+      // parent as-is would change the meaning (e.g. a type selector cannot
+      // appear after a class selector in a compound selector), …
+      expect(
+        optimize(css`
+          main {
+            @scope (.card&) {
+              .inside {
+                --x: 1;
+              }
+            }
+          }
+        `),
+      ).toMatchInlineSnapshot(`
+        "
+        @scope (.card:is(main)) {
+          .inside {
+            --x: 1;
+          }
+        }
+        "
+      `)
+
+      // … and dropped when the substitution is provably equivalent, even for
+      // complex parent selectors
+      expect(
+        optimize(css`
+          .a .b {
+            @scope (& > .from) {
+              .inside {
+                --x: 1;
+              }
+            }
+          }
+        `),
+      ).toMatchInlineSnapshot(`
+        "
+        @scope (.a .b > .from) {
+          .inside {
+            --x: 1;
+          }
+        }
+        "
+      `)
+    })
+
+    it('should wrap bare declarations inside `@scope` in a `&` rule', async () => {
+      // A bug in Lightning CSS causes an error when there are declarations
+      // directly in the `@scope`. To fix this we will ensure a rule with
+      // `:where(:scope)` is available.
+      expect(
+        optimize(css`
+          @scope (.from) to (.to) {
+            --x: 1;
+          }
+        `),
+      ).toMatchInlineSnapshot(`
+        "
+        @scope (.from) to (.to) {
+          :where(:scope) {
+            --x: 1;
+          }
+        }
+        "
+      `)
+
+      // When generated by a variant, the declarations resolve against the
+      // parent rule: the `@scope` rule scopes _where the utility applies_
+      // (like nesting `@media` does, and like variants do).
+      //
+      // Note: this deviates from native CSS nesting, where the `<scope-start>`
+      // selector would be relative to `.parent` and the declarations would
+      // apply to the scoping root. User-authored `@scope` rules (without the
+      // `@in-variant` marker) keep those native semantics.
+      expect(
+        optimize(css`
+          .parent {
+            @in-variant {
+              @scope (.from) {
+                --x: 1;
+              }
+            }
+          }
+        `),
+      ).toMatchInlineSnapshot(`
+        "
+        @scope (.from) {
+          .parent {
+            --x: 1;
+          }
+        }
+        "
+      `)
+    })
+
+    it('should replace `&` with `:where(:scope)` for rules directly inside `@scope`', async () => {
+      // Inside an `@scope` rule, the nesting selector behaves like
+      // `:where(:scope)` and matches the scoping root with zero specificity.
+      expect(
+        optimize(css`
+          @scope (.from) {
+            & > p {
+              --x: 1;
+            }
+          }
+        `),
+      ).toMatchInlineSnapshot(`
+        "
+        @scope (.from) {
+          :where(:scope) > p {
+            --x: 1;
+          }
+        }
+        "
+      `)
+    })
+
+    it('should handle `&` deeply nested in `@scope` as normal references to a parent', async () => {
+      expect(
+        optimize(css`
+          @scope (.from) {
+            &,
+            .inside {
+              --x: 1;
+
+              &:hover {
+                --x: 2;
+              }
+
+              &:focus {
+                --x: 3;
+              }
+            }
+          }
+        `),
+      ).toMatchInlineSnapshot(`
+        "
+        @scope (.from) {
+          :where(:scope), .inside {
+            --x: 1;
+            &:hover {
+              --x: 2;
+            }
+            &:focus {
+              --x: 3;
+            }
+          }
+        }
+        "
+      `)
+    })
+
+    it('should compile user-authored `@scope` rules with their native CSS nesting semantics', async () => {
+      // The `<scope-start>` selector is relative to the parent rule (like
+      // nested style rule selectors are), the rules inside are relative to
+      // the scoping root, and `&` refers to the scoping root
+      expect(
+        optimize(css`
+          .parent {
+            @scope (.from) to (.to) {
+              .inside {
+                --x: 1;
+              }
+
+              & > .child {
+                --x: 2;
+              }
+            }
+          }
+        `),
+      ).toMatchInlineSnapshot(`
+        "
+        @scope (.parent .from) to (.to) {
+          .inside {
+            --x: 1;
+          }
+          :where(:scope) > .child {
+            --x: 2;
+          }
+        }
+        "
+      `)
+
+      // A trailing `&` makes the parent rule the scoping root: the scoping
+      // roots are `.parent` elements inside `.from` elements
+      expect(
+        optimize(css`
+          .parent {
+            @scope (.from &) to (.to) {
+              .inside {
+                --x: 1;
+              }
+            }
+          }
+        `),
+      ).toMatchInlineSnapshot(`
+        "
+        @scope (.from .parent) to (.to) {
+          .inside {
+            --x: 1;
+          }
+        }
+        "
+      `)
+
+      // Bare declarations apply to the scoping root. They are wrapped in a
+      // `:where(:scope)` rule, which is the spec's exact equivalent, because
+      // Lightning CSS drops bare declarations inside `@scope` entirely.
+      expect(
+        optimize(css`
+          .parent {
+            @scope (.from) {
+              --x: 1;
+            }
+          }
+        `),
+      ).toMatchInlineSnapshot(`
+        "
+        @scope (.parent .from) {
+          :where(:scope) {
+            --x: 1;
+          }
+        }
+        "
+      `)
+
+      // Also at the top level
+      expect(
+        optimize(css`
+          @scope (.from) to (.to) {
+            --x: 1;
+
+            .inside {
+              --x: 2;
+            }
+          }
+        `),
+      ).toMatchInlineSnapshot(`
+        "
+        @scope (.from) to (.to) {
+          :where(:scope) {
+            --x: 1;
+          }
+          .inside {
+            --x: 2;
+          }
+        }
+        "
+      `)
+
+      // Every selector in a `<scope-start>` selector list is relative to the
+      // parent rule, whether it uses `&` or not
+      expect(
+        optimize(css`
+          .parent {
+            @scope (.a, & > .b) {
+              .inside {
+                --x: 1;
+              }
+            }
+          }
+        `),
+      ).toMatchInlineSnapshot(`
+        "
+        @scope (.parent .a, .parent > .b) {
+          .inside {
+            --x: 1;
+          }
+        }
+        "
+      `)
+    })
+
+    it('should leave `@property` and `@apply` alone', async () => {
+      expect(
+        optimize(css`
+          .foo {
+            .bar {
+              @apply text-red-500 hover:text-red-600;
+            }
+          }
+
+          .baz {
+            @property --tw-content {
+              syntax: '*';
+              initial-value: '';
+              inherits: false;
+            }
+
+            @property --tw-border-spacing-x {
+              syntax: '<length>';
+              inherits: false;
+              initial-value: 0;
+            }
+          }
+        `),
+      ).toMatchInlineSnapshot(`
+        "
+        .foo .bar {
+          @apply text-red-500 hover:text-red-600;
+        }
+        .baz {
+          @property --tw-content {
+            syntax: '*';
+            initial-value: '';
+            inherits: false;
+          }
+          @property --tw-border-spacing-x {
+            syntax: '<length>';
+            inherits: false;
+            initial-value: 0;
+          }
+        }
+        "
+      `)
+    })
+
+    it('should merge a body-less @layer with an @layer with the same name that has a body', async () => {
+      expect(
+        optimize(css`
+          @layer a;
+
+          @layer a {
+            @layer b {
+              .x {
+                color: red;
+              }
+            }
+          }
+        `),
+      ).toMatchInlineSnapshot(`
+        "
+        @layer a {
+          @layer b {
+            .x {
+              color: red;
+            }
+          }
+        }
+        "
+      `)
+    })
+
+    it('should not get rid of `:is(…)` when the compound selector is part of a complex selector', async () => {
+      expect(
+        optimize(css`
+          .foo .bar {
+            .system &:focus {
+              --x: 1;
+            }
+          }
+          .foo:hover {
+            .system &:focus {
+              --x: 2;
+            }
+          }
+        `),
+      ).toMatchInlineSnapshot(`
+        "
+        .system :is(.foo .bar):focus {
+          --x: 1;
+        }
+        .system .foo:hover:focus {
+          --x: 2;
+        }
+        "
+      `)
+    })
+
+    it('should not dedupe adjacent at-rules with the same prelude but different bodies', async () => {
+      expect(
+        optimize(css`
+          @font-face {
+            font-family: 'A';
+            src: url('/fonts/a.woff2');
+          }
+
+          @font-face {
+            font-family: 'B';
+            src: url('/fonts/b.woff2');
+          }
+
+          @keyframes spin {
+            to {
+              transform: rotate(360deg);
+            }
+          }
+
+          @keyframes spin {
+            to {
+              transform: rotate(-360deg);
+            }
+          }
+        `),
+      ).toMatchInlineSnapshot(`
+        "
+        @font-face {
+          font-family: 'A';
+          src: url('/fonts/a.woff2');
+        }
+        @font-face {
+          font-family: 'B';
+          src: url('/fonts/b.woff2');
+        }
+        @keyframes spin {
+          to {
+            transform: rotate(360deg);
+          }
+        }
+        @keyframes spin {
+          to {
+            transform: rotate(-360deg);
+          }
+        }
+        "
+      `)
+    })
   })
 })
-
-it('should only visit children once when calling `replaceWith` with multi-element array', () => {
-  let visited = new Set()
-
-  let ast: AstNode[] = [
-    atRule('@media', '', [
-      context({}, [
-        styleRule('.foo', [decl('color', 'red')]),
-        styleRule('.baz', [decl('color', 'blue')]),
-      ]),
-    ]),
-    styleRule('.bar', [decl('color', 'green')]),
-  ]
-
-  walk(ast, (node) => {
-    let key = id(node)
-    if (visited.has(key)) {
-      throw new Error('Visited node twice')
-    }
-    visited.add(key)
-
-    if (node.kind === 'at-rule') return WalkAction.Replace(node.nodes)
-  })
-
-  expect(visited).toMatchInlineSnapshot(`
-    Set {
-      "@media ",
-      "<context>",
-      ".foo",
-      "color: red",
-      ".baz",
-      "color: blue",
-      ".bar",
-      "color: green",
-    }
-  `)
-})
-
-it('should never visit children when calling `replaceWith` with `WalkAction.Skip`', () => {
-  let visited = new Set()
-
-  let inner = styleRule('.foo', [decl('color', 'blue')])
-
-  let ast: AstNode[] = [atRule('@media', '', [inner]), styleRule('.bar', [decl('color', 'blue')])]
-
-  walk(ast, (node) => {
-    visited.add(node)
-
-    if (node.kind === 'at-rule') {
-      return WalkAction.ReplaceSkip(node.nodes)
-    }
-  })
-
-  expect(visited).not.toContain(inner)
-  expect(visited).toMatchInlineSnapshot(`
-    Set {
-      {
-        "kind": "at-rule",
-        "name": "@media",
-        "nodes": [
-          {
-            "kind": "rule",
-            "nodes": [
-              {
-                "important": false,
-                "kind": "declaration",
-                "property": "color",
-                "value": "blue",
-              },
-            ],
-            "selector": ".foo",
-          },
-        ],
-        "params": "",
-      },
-      {
-        "kind": "rule",
-        "nodes": [
-          {
-            "important": false,
-            "kind": "declaration",
-            "property": "color",
-            "value": "blue",
-          },
-        ],
-        "selector": ".bar",
-      },
-      {
-        "important": false,
-        "kind": "declaration",
-        "property": "color",
-        "value": "blue",
-      },
-    }
-  `)
-})
-
-it('should skip the correct number of children based on the replaced children nodes', () => {
-  {
-    let ast = [
-      decl('--index', '0'),
-      decl('--index', '1'),
-      decl('--index', '2'),
-      decl('--index', '3'),
-      decl('--index', '4'),
-    ]
-    let visited: string[] = []
-    walk(ast, (node) => {
-      visited.push(id(node))
-      if (node.kind === 'declaration' && node.value === '2') {
-        return WalkAction.ReplaceSkip([])
-      }
-    })
-
-    expect(visited).toMatchInlineSnapshot(`
-      [
-        "--index: 0",
-        "--index: 1",
-        "--index: 2",
-        "--index: 3",
-        "--index: 4",
-      ]
-    `)
-  }
-
-  {
-    let ast = [
-      decl('--index', '0'),
-      decl('--index', '1'),
-      decl('--index', '2'),
-      decl('--index', '3'),
-      decl('--index', '4'),
-    ]
-    let visited: string[] = []
-    walk(ast, (node) => {
-      visited.push(id(node))
-      if (node.kind === 'declaration' && node.value === '2') {
-        return WalkAction.Replace([])
-      }
-    })
-
-    expect(visited).toMatchInlineSnapshot(`
-      [
-        "--index: 0",
-        "--index: 1",
-        "--index: 2",
-        "--index: 3",
-        "--index: 4",
-      ]
-    `)
-  }
-
-  {
-    let ast = [
-      decl('--index', '0'),
-      decl('--index', '1'),
-      decl('--index', '2'),
-      decl('--index', '3'),
-      decl('--index', '4'),
-    ]
-    let visited: string[] = []
-    walk(ast, (node) => {
-      visited.push(id(node))
-      if (node.kind === 'declaration' && node.value === '2') {
-        return WalkAction.ReplaceSkip([decl('--index', '2.1')])
-      }
-    })
-
-    expect(visited).toMatchInlineSnapshot(`
-      [
-        "--index: 0",
-        "--index: 1",
-        "--index: 2",
-        "--index: 3",
-        "--index: 4",
-      ]
-    `)
-  }
-
-  {
-    let ast = [
-      decl('--index', '0'),
-      decl('--index', '1'),
-      decl('--index', '2'),
-      decl('--index', '3'),
-      decl('--index', '4'),
-    ]
-    let visited: string[] = []
-    walk(ast, (node) => {
-      visited.push(id(node))
-      if (node.kind === 'declaration' && node.value === '2') {
-        return WalkAction.Replace([decl('--index', '2.1')])
-      }
-    })
-
-    expect(visited).toMatchInlineSnapshot(`
-      [
-        "--index: 0",
-        "--index: 1",
-        "--index: 2",
-        "--index: 2.1",
-        "--index: 3",
-        "--index: 4",
-      ]
-    `)
-  }
-
-  {
-    let ast = [
-      decl('--index', '0'),
-      decl('--index', '1'),
-      decl('--index', '2'),
-      decl('--index', '3'),
-      decl('--index', '4'),
-    ]
-    let visited: string[] = []
-    walk(ast, (node) => {
-      visited.push(id(node))
-      if (node.kind === 'declaration' && node.value === '2') {
-        return WalkAction.ReplaceSkip([decl('--index', '2.1'), decl('--index', '2.2')])
-      }
-    })
-
-    expect(visited).toMatchInlineSnapshot(`
-      [
-        "--index: 0",
-        "--index: 1",
-        "--index: 2",
-        "--index: 3",
-        "--index: 4",
-      ]
-    `)
-  }
-
-  {
-    let ast = [
-      decl('--index', '0'),
-      decl('--index', '1'),
-      decl('--index', '2'),
-      decl('--index', '3'),
-      decl('--index', '4'),
-    ]
-    let visited: string[] = []
-    walk(ast, (node) => {
-      visited.push(id(node))
-      if (node.kind === 'declaration' && node.value === '2') {
-        return WalkAction.Replace([decl('--index', '2.1'), decl('--index', '2.2')])
-      }
-    })
-
-    expect(visited).toMatchInlineSnapshot(`
-      [
-        "--index: 0",
-        "--index: 1",
-        "--index: 2",
-        "--index: 2.1",
-        "--index: 2.2",
-        "--index: 3",
-        "--index: 4",
-      ]
-    `)
-  }
-})
-
-function id(node: AstNode) {
-  switch (node.kind) {
-    case 'at-rule':
-      return `${node.name} ${node.params}`
-    case 'rule':
-      return node.selector
-    case 'context':
-      return '<context>'
-    case 'at-root':
-      return '<at-root>'
-    case 'declaration':
-      return `${node.property}: ${node.value}`
-    case 'comment':
-      return `// ${node.value}`
-    default:
-      node satisfies never
-      throw new Error('Unknown node kind')
-  }
-}
diff --git a/packages/tailwindcss/src/ast.ts b/packages/tailwindcss/src/ast.ts
index 77fa742e9..09c3ea051 100644
--- a/packages/tailwindcss/src/ast.ts
+++ b/packages/tailwindcss/src/ast.ts
@@ -1,14 +1,17 @@
 import { Polyfills } from '.'
+import * as SelectorParser from '../src/selector-parser'
 import { parseAtRule } from './css-parser'
 import type { DesignSystem } from './design-system'
 import type { Source, SourceLocation } from './source-maps/source'
 import { Theme, ThemeOptions } from './theme'
 import { DefaultMap } from './utils/default-map'
+import { segment } from './utils/segment'
 import { extractUsedVariables } from './utils/variables'
 import * as ValueParser from './value-parser'
 import { walk, WalkAction, type VisitContext } from './walk'
 
 const AT_SIGN = 0x40
+const PIPE = 0x7c
 
 export type StyleRule = {
   kind: 'rule'
@@ -190,6 +193,8 @@ export function cssContext(
 ): VisitContext<AstNode> & { context: Record<string, string | boolean> } {
   return {
     depth: ctx.depth,
+    index: ctx.index,
+    siblings: ctx.siblings,
     get context() {
       let context: Record<string, string | boolean> = {}
       for (let child of ctx.path()) {
@@ -284,9 +289,9 @@ export function optimizeAst(
       // found in the theme config.
       if (
         polyfills & Polyfills.ColorMix &&
-        node.value.includes('color-mix(') &&
         !context.supportsColorMix &&
-        !context.keyframes
+        !context.keyframes &&
+        node.value.includes('color-mix(')
       ) {
         colorMixDeclarations.get(parent).add(node)
       }
@@ -302,37 +307,7 @@ export function optimizeAst(
         transform(child, nodes, context, depth + 1)
       }
 
-      // Keep the last decl when there are exact duplicates. Keeping the *first* one might
-      // not be correct when given nested rules where a rule sits between declarations.
-      let seen: Record<string, AstNode[]> = {}
-      let toRemove = new Set<AstNode>()
-
-      // Keep track of all nodes that produce a given declaration
-      for (let child of nodes) {
-        if (child.kind !== 'declaration') continue
-
-        let key = `${child.property}:${child.value}:${child.important}`
-        seen[key] ??= []
-        seen[key].push(child)
-      }
-
-      // And remove all but the last of each
-      for (let key in seen) {
-        for (let i = 0; i < seen[key].length - 1; ++i) {
-          toRemove.add(seen[key][i])
-        }
-      }
-
-      if (toRemove.size > 0) {
-        nodes = nodes.filter((node) => !toRemove.has(node))
-      }
-
-      if (nodes.length === 0) return
-
-      // Rules with `&` as the selector should be flattened
-      if (node.selector === '&') {
-        parent.push(...nodes)
-      } else {
+      if (nodes.length > 0) {
         parent.push({ ...node, nodes })
       }
     }
@@ -403,7 +378,8 @@ export function optimizeAst(
         copy.name === '@charset' ||
         copy.name === '@custom-media' ||
         copy.name === '@namespace' ||
-        copy.name === '@import'
+        copy.name === '@import' ||
+        copy.name === '@apply'
       ) {
         parent.push(copy)
       }
@@ -425,6 +401,21 @@ export function optimizeAst(
       // Remove reference imports from printing
       if (node.context.reference) {
         return
+      }
+
+      // Preserve context nodes that track the source of their subtree (variant
+      // bodies and the user content slotted into them), so `handleNesting`
+      // knows whether to compose `@scope` rules with the variant semantics or
+      // their native CSS nesting semantics
+      else if (node.context.source) {
+        let copy = { ...node, nodes: [] as AstNode[] }
+        for (let child of node.nodes) {
+          transform(child, copy.nodes, { ...context, ...node.context }, depth)
+        }
+
+        if (copy.nodes.length > 0) {
+          parent.push(copy)
+        }
       } else {
         for (let child of node.nodes) {
           transform(child, parent, { ...context, ...node.context }, depth)
@@ -676,9 +667,975 @@ export function optimizeAst(
     }
   }
 
-  return newAst
+  return handleNesting(newAst)
 }
 
+export function handleNesting(ast: AstNode[]): AstNode[] {
+  let parseSelectorCache = new DefaultMap(SelectorParser.parse)
+
+  // Nodes with an `@scope` rule somewhere in their subtree. These cannot use
+  // the "emit as-is" fast path for rules containing declarations, because
+  // `@scope` rules change meaning when they stay nested inside a style rule and
+  // must go through the hoisting machinery instead.
+  let containsAtScope = new Set<AstNode>()
+  {
+    function scan(nodes: AstNode[]): boolean {
+      let found = false
+      for (let node of nodes) {
+        if (node.kind === 'declaration' || node.kind === 'comment') continue
+
+        if (scan(node.nodes) || (node.kind === 'at-rule' && node.name === '@scope')) {
+          containsAtScope.add(node)
+          found = true
+        }
+      }
+      return found
+    }
+    scan(ast)
+  }
+
+  // Track `rule` selectors as we go
+  let selectorStack: [
+    selector: string,
+    src: SourceLocation | undefined,
+    dst: SourceLocation | undefined,
+  ][] = []
+
+  // Track `at-rule` information as we go. Tracking this separately from the
+  // selector stack for rules such that we can hoist this above all the rules.
+  let atRuleStack: [
+    name: string,
+    params: string,
+    src: SourceLocation | undefined,
+    dst: SourceLocation | undefined,
+  ][] = []
+
+  // The current "nodes" we can push to
+  let nodes = null as AstNode[] | null
+
+  // Optimization: Track the declaration properties we've seen in the current
+  // nodes.
+  let seenDeclarationProperties = new Set<string>()
+
+  // Track nodes lists where we want to dedupe declarations
+  let dedupeDeclarationsInNodes = new Set<AstNode[]>()
+
+  // The final, new AST
+  let result: AstNode[] = []
+
+  // Track whether we should skip a node in the `exit` phase
+  let skipExit = new Set<AstNode>()
+
+  // Track the source of the subtree we are currently in. Variant bodies are
+  // wrapped in a `context` node with `source: 'variant'`, and the user content
+  // slotted into them is wrapped in `source: 'user'`. `@scope` rules whose
+  // nearest source is a variant are hoisted with the variant semantics, all
+  // other `@scope` rules use their native CSS nesting semantics.
+  let sourceStack: (string | boolean)[] = []
+
+  // Selector stacks that are masked while inside an `@scope` rule whose
+  // `<scope-start>` selector consumed the parent selector via `&`.
+  //
+  // Once the parent selector is part of the `<scope-start>` selector, the rules
+  // inside the `@scope` are relative to the scoping root, not to the parent
+  // rule. Selectors in scoped style rules only match elements in scope, and the
+  // parent matches ancestors of the scoping root, so prefixing the rules with
+  // the parent selector would make them match nothing at all.
+  //
+  // E.g.:
+  //
+  // ```css
+  // .parent {
+  //   @scope (& > .scope) {
+  //     .content {
+  //       color: red;
+  //     }
+  //   }
+  // }
+  // ```
+  //
+  // becomes:
+  //
+  // ```css
+  // @scope (.parent > .scope) {
+  //   .content { /* ← not `.parent .content` */
+  //     color: red;
+  //   }
+  // }
+  // ```
+  let maskedSelectorStacks = new Map<AstNode, typeof selectorStack>()
+
+  walk(ast, {
+    enter(node) {
+      switch (node.kind) {
+        case 'rule': {
+          nodes = null // Start a new level
+
+          // First time we see a rule
+          if (selectorStack.length === 0) {
+            // A rule with a selector containing `&` should replace the `&` with
+            // `:scope` if there is no parent rule.
+            //
+            // Note: there could be false positives when the `&` is escaped or
+            // part of a string inside an attribute selector. But the
+            // SelectorParser will take care of that.
+            if (node.selector.includes('&')) {
+              // Inside an `@scope` rule, the nesting selector behaves like
+              // `:where(:scope)` and matches the scoping root with zero
+              // specificity. E.g.:
+              //
+              // ```css
+              // @scope (.checkout) {
+              //   & > p {
+              //     color: red;
+              //   }
+              // }
+              // ```
+              //
+              // becomes:
+              //
+              // ```css
+              // @scope (.checkout) {
+              //   :where(:scope) > p {
+              //     color: red;
+              //   }
+              // }
+              // ```
+              //
+              // See: https://drafts.csswg.org/css-nesting-1/#nesting-at-scope
+              let replacement = atRuleStack.some(([name]) => name === '@scope')
+                ? ':where(:scope)'
+                : ':scope'
+
+              let ast = SelectorParser.parse(node.selector)
+              let changed = false
+
+              walk(ast, (node) => {
+                if (node.kind === 'selector' && node.value === '&') {
+                  changed = true
+                  node.value = replacement
+                }
+              })
+
+              if (changed) {
+                selectorStack.push([SelectorParser.toCss(ast), node.src, node.dst])
+              } else {
+                selectorStack.push([node.selector, node.src, node.dst])
+              }
+            }
+
+            // No nesting markers, track as-is
+            else {
+              selectorStack.push([node.selector, node.src, node.dst])
+            }
+          }
+
+          // Nested rule, ensure `&` is present in each selector. Then track the
+          // selector.
+          else {
+            // A rule with just `&` can be replaced by its children. Let's
+            // ignore this node and keep walking its children.
+            if (node.selector === '&') {
+              skipExit.add(node)
+              return
+            }
+
+            let lastSelector = selectorStack[selectorStack.length - 1][0]
+            let selector = segment(node.selector, ',')
+              .map((selector) => substituteNestingSelector(selector, lastSelector))
+              .join(', ')
+            selectorStack.push([selector, node.src, node.dst])
+          }
+
+          // Once we hit a rule that has at least one declaration, then we can
+          // stop handling the nested selectors.
+          //
+          // This ensures that browser devtools can at least show _something_
+          // for a given rule. This also means that we can leverage CSS nesting
+          // which is better for gzip results due to increased repetition.
+          //
+          // E.g.:
+          //
+          // ```css
+          // .a {
+          //   &[b] {
+          //     color: red;
+          //     &:hover {
+          //       color: blue;
+          //     }
+          //   }
+          // }
+          // ```
+          //
+          // ↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓
+          //
+          // ```css
+          // .a[b] {          /* ← flattened */
+          //   color: red;    /* ← saw a declaration, therefore */
+          //   &:hover {      /* ← we keep this nested syntax */
+          //     color: blue;
+          //   }
+          // }
+          // ```
+          //
+          // The exception is when the rule contains an `@scope` rule somewhere,
+          // because it must go through the normal hoisting machinery instead.
+          // See `containsAtScope` for more details.
+          if (
+            node.nodes.some((child) => child.kind === 'declaration') &&
+            !containsAtScope.has(node)
+          ) {
+            // Emitting each child instead of the node itself because we do want
+            // to flatten the current node and its selector that is already
+            // pushed to the stack.
+            for (let child of node.nodes) emit(child)
+            return WalkAction.Skip
+          }
+          break
+        }
+
+        case 'at-rule': {
+          nodes = null // Start a new level
+
+          // `@layer` is hoistable, but when it's empty then we have to make
+          // sure that we still emit it because this might influence the layer
+          // order. We can't just get rid of it.
+          if (node.nodes.length === 0 && !DROPPABLE_IF_EMPTY_AT_RULES.has(node.name)) {
+            emit(node)
+            skipExit.add(node)
+            return WalkAction.Skip
+          }
+
+          // Hoist at-rules
+          else if (HOISTABLE_AT_RULES.has(node.name)) {
+            let params = node.params
+
+            // `@scope` is the only hoistable at-rule with selectors in its
+            // prelude, and the only one that changes meaning when it stays
+            // nested inside a style rule. Resolve the prelude and its contents
+            // before hoisting, using one of two composition modes:
+            //
+            // 1. Variant-generated `@scope` rules attach the parent selector
+            //    (the utility) to the rules _inside_ the scope:
+            //
+            //    ```css
+            //    .scoped\:underline {
+            //      @scope (.from) to (.to) {
+            //        text-decoration-line: underline;
+            //      }
+            //    }
+            //    ```
+            //
+            //    becomes:
+            //
+            //    ```css
+            //    @scope (.from) to (.to) {
+            //      .scoped\:underline {
+            //        text-decoration-line: underline;
+            //      }
+            //    }
+            //    ```
+            //    This way the utility is properly sandwiched between the
+            //    `.from` and `.to` boundaries.
+            //
+            // 2. User-authored `@scope` rules keep their native CSS nesting
+            //    semantics: the `<scope-start>` selector is relative to the parent
+            //    rule, and the rules inside are relative to the scoping root:
+            //
+            //    ```css
+            //    .parent {
+            //      @scope (.from) {
+            //        color: red;
+            //      }
+            //    }
+            //    ```
+            //
+            //    becomes:
+            //
+            //    ```css
+            //    @scope (.parent .from) {
+            //      :where(:scope) {
+            //        color: red;
+            //      }
+            //    }
+            //    ```
+            //
+            //    In a perfect world we leave this alone, but Lightning CSS
+            //    seems to incorrectly transform this into a version where the
+            //    `.parent` class is gone entirely:
+            //
+            //    ```css
+            //    @scope (.from) {
+            //      color: red;
+            //    }
+            //    ```
+            //
+            // See: https://drafts.csswg.org/css-nesting-1/#nesting-at-scope
+            if (node.name === '@scope') {
+              let isVariant = sourceStack[sourceStack.length - 1] === 'variant'
+              let hasParent = selectorStack.length > 0
+
+              // Lightning CSS bug: This snippet will error
+              //
+              // ```css
+              // @scope {
+              //   --x: 1;
+              // }
+              // ```
+              //
+              // We will wrap these bare-declarations in a `&` rule to fix the crash:
+              // ```css
+              // @scope {
+              //   & {
+              //     --x: 1;
+              //   }
+              // }
+              // ```
+              {
+                let queue: (AtRule | Context)[] = [node]
+
+                for (let parent of queue) {
+                  let newNodes: AstNode[] = []
+                  let group: AstNode[] | null = null
+
+                  for (let child of parent.nodes) {
+                    if (child.kind === 'context') queue.push(child)
+
+                    if (child.kind === 'declaration' || child.kind === 'comment') {
+                      if (group === null) {
+                        group = []
+                        newNodes.push(styleRule('&', group))
+                      }
+                      group.push(child)
+                    } else {
+                      group = null
+                      newNodes.push(child)
+                    }
+                  }
+
+                  parent.nodes = newNodes
+                }
+              }
+
+              if (params.includes('&') || (!isVariant && hasParent)) {
+                // The selector to substitute for `&` in the `<scope-start>`
+                // selector: the elements matched by the nearest ancestor style
+                // rule, or `:scope` when there is none.
+                let parentSelector = hasParent ? selectorStack[selectorStack.length - 1][0] : null
+
+                let paramsAst = ValueParser.parse(params)
+
+                // Whether the current `(…)` group is a `<scope-end>` selector.
+                //
+                // ```css
+                // @scope (.from) to (.to)
+                //        ^^^^^^^           scope-start (optional)
+                //                   ^^^^^  scope-end
+                //
+                // @scope to (.to)
+                //           ^^^^^          scope-end
+                // ```
+                let isScopeEnd = false
+
+                // Whether the `<scope-start>` selector consumed the parent
+                // selector
+                let consumedParent = false
+
+                for (let paramNode of paramsAst) {
+                  if (paramNode.kind === 'word' && paramNode.value === 'to') {
+                    isScopeEnd = true
+                    continue
+                  }
+
+                  // A `(…)` group parses as a function call without a name
+                  if (paramNode.kind !== 'function' || paramNode.value !== '') continue
+
+                  let selector = ValueParser.toCss(paramNode.nodes)
+
+                  // A user-authored `<scope-start>` selector is relative to the
+                  // parent rule, and resolves exactly like nested style rule
+                  // selectors do: `&` refers to the elements matched by the
+                  // parent rule, and selectors without `&` are prefixed with
+                  // it.
+                  if (!isScopeEnd && !isVariant && parentSelector !== null) {
+                    paramNode.nodes = [
+                      ValueParser.word(
+                        segment(selector, ',')
+                          .map((part) => substituteNestingSelector(part.trim(), parentSelector))
+                          .join(', '),
+                      ),
+                    ]
+                    consumedParent = true
+                  }
+
+                  // Otherwise, only an explicit `&` is resolved. In the
+                  // `<scope-start>` selector, `&` refers to the elements
+                  // matched by the nearest ancestor style rule (or `:scope`
+                  // when there is none). In the `<scope-end>` selector, `&`
+                  // refers to the scoping root and behaves like
+                  // `:where(:scope)`.
+                  else if (selector.includes('&')) {
+                    let replacement = isScopeEnd ? ':where(:scope)' : (parentSelector ?? ':scope')
+
+                    paramNode.nodes = [
+                      ValueParser.word(substituteNestingSelector(selector, replacement)),
+                    ]
+                    if (!isScopeEnd && hasParent) consumedParent = true
+                  }
+                }
+
+                params = ValueParser.toCss(paramsAst)
+
+                // Mask the selector stack for the `@scope` rule's subtree, so
+                // its rules resolve like top-level rules within the scope (and
+                // `&` resolves to `:where(:scope)`). The stack is restored in
+                // the exit phase. See `maskedSelectorStacks` for more details.
+                if (consumedParent) {
+                  maskedSelectorStacks.set(node, selectorStack)
+                  selectorStack = []
+                }
+              }
+            }
+
+            atRuleStack.push([node.name, params, node.src, node.dst])
+          }
+
+          // If we can't hoist them, emit them immediately as-is
+          else {
+            emit(node)
+            skipExit.add(node)
+            return WalkAction.Skip
+          }
+          break
+        }
+
+        case 'declaration':
+        case 'comment': {
+          emit(node)
+          break
+        }
+
+        case 'context':
+          if (node.context.source) sourceStack.push(node.context.source)
+          break
+
+        case 'at-root':
+          break
+
+        default:
+          node satisfies never
+          break
+      }
+    },
+    exit(node) {
+      if (skipExit.delete(node)) return
+
+      switch (node.kind) {
+        case 'rule': {
+          nodes = null
+          selectorStack.pop()
+          break
+        }
+
+        case 'at-rule': {
+          nodes = null
+          atRuleStack.pop()
+
+          // Restore the selector stack that was masked by this `@scope` rule
+          let maskedSelectorStack = maskedSelectorStacks.get(node)
+          if (maskedSelectorStack) {
+            selectorStack = maskedSelectorStack
+            maskedSelectorStacks.delete(node)
+          }
+          break
+        }
+
+        case 'context':
+          if (node.context.source) sourceStack.pop()
+          break
+
+        case 'declaration':
+        case 'comment':
+        case 'at-root':
+          break
+
+        default:
+          node satisfies never
+          break
+      }
+    },
+  })
+
+  // Dedupe declarations that we've already seen before if they match the
+  // `property`, `value` and `important` information.
+  {
+    for (let nodes of dedupeDeclarationsInNodes) {
+      let seen = new Set()
+      for (let i = nodes.length - 1; i >= 0; --i) {
+        let node = nodes[i]
+        if (node.kind !== 'declaration') continue
+
+        let id = `${node.property}\0${node.value}\0${node.important}`
+
+        if (seen.has(id)) nodes.splice(i, 1)
+        else seen.add(id)
+      }
+    }
+  }
+
+  return result
+
+  function emit(node: AstNode) {
+    // Existing nodes are available, emit into those nodes
+    if (nodes) {
+      // Optimization: track used declarations in the current node.
+      if (node.kind === 'declaration') {
+        if (seenDeclarationProperties.has(node.property)) {
+          dedupeDeclarationsInNodes.add(nodes)
+        } else {
+          seenDeclarationProperties.add(node.property)
+        }
+      }
+
+      nodes.push(node)
+      return
+    }
+
+    // Nothing available, setup a fresh node
+    {
+      // There are no parent rules or at-rules available, which means that we
+      // can emit the node as-is.
+      if (selectorStack.length === 0 && atRuleStack.length === 0) {
+        let target = result
+        let lastNode = target[target.length - 1]
+
+        // Optimization: when the current and last node are the same, ignore the
+        // new node entirely otherwise we will get unnecessary duplicate
+        // results.
+        //
+        // We only care about at-rules with no body because some of them (such
+        // as `@charset` or `@layer`) need to be emitted. A normal rule that's
+        // empty doesn't need to be emitted. At-rules _with_ a body (such as
+        // `@font-face` or `@keyframes`) can share the same prelude while
+        // containing different bodies, so they must all be emitted.
+        if (
+          lastNode &&
+          lastNode.kind === 'at-rule' &&
+          node.kind === 'at-rule' &&
+          lastNode.nodes.length === 0 &&
+          node.nodes.length === 0 &&
+          lastNode.name === node.name &&
+          lastNode.params === node.params
+        ) {
+          return
+        }
+
+        result.push(node)
+        return
+      }
+
+      // Track the new "parent" nodes
+      {
+        nodes = [node]
+
+        // Clear out seen declarations from the previous work in progress nodes
+        seenDeclarationProperties.clear()
+
+        // Track new declaration
+        if (node.kind === 'declaration') {
+          seenDeclarationProperties.add(node.property)
+        }
+      }
+
+      // Track the new root node that we build up to store in the final AST
+      let root = null as AstNode | null
+
+      let target = result
+      let atRuleOffset = 0
+
+      // Optimization: merge adjacent at-rules
+      //
+      // Figure out whether we can push our new node into a previous node that
+      // was already emitted.
+      //
+      // We have to make sure that the order stays the same, so therefore we
+      // only ever have to look at the last node that was emitted.
+      {
+        let lastNode = target[target.length - 1]
+        if (lastNode && lastNode.kind === 'at-rule') {
+          for (let i = 0; i < atRuleStack.length; i++) {
+            let atRule = atRuleStack[i]
+            if (!lastNode) break
+            if (lastNode.kind !== 'at-rule') break
+            if (lastNode.name !== atRule[0]) break
+            if (lastNode.params !== atRule[1]) break
+
+            atRuleOffset++
+            target = lastNode.nodes
+            lastNode = lastNode.nodes[lastNode.nodes.length - 1]
+          }
+        }
+      }
+
+      // Build up the rule
+      if (selectorStack.length > 0) {
+        let [selector, src, dst] = selectorStack[selectorStack.length - 1]
+
+        // Optimization: merge adjacent rules with the same selector
+        //
+        // Figure out whether we can push into an existing rule.
+        //
+        // If we have some at-rules that we have to keep into account, then we
+        // definitely can't.
+        if (atRuleStack.length - atRuleOffset <= 0) {
+          let lastNode = target[target.length - 1]
+          if (lastNode && lastNode.kind === 'rule' && lastNode.selector === selector) {
+            lastNode.nodes.push(...nodes)
+
+            // Ensure that our current nodes points to the nodes of the
+            // `lastNode`, otherwise we will lose information.
+            nodes = lastNode.nodes
+
+            // We appended a group that could contain declarations already in the
+            // existing rule, so let the final dedupe pass handle it once.
+            //
+            // Note: we could loop over _all_ previous nodes to figure out if we
+            // really want to dedupe this. But this could result in a bunch of
+            // duplicate work if we have `n` nodes that we want to merge
+            // together.
+            dedupeDeclarationsInNodes.add(nodes)
+
+            // We know that we don't have to handle any more at-rules, so we can
+            // bail early since we just merged the nodes with the same selector.
+            return
+          }
+        }
+
+        // Can't push into existing node, create a new node
+        root = rule(selector, nodes)
+        if (src || dst) Object.assign(root, { src, dst })
+      }
+
+      // Wrap in at-rules, if we can push into an existing node then we can
+      // ignore `offset` amount of nodes since the `root`/`nodes` will already
+      // point to a nested node.
+      for (let i = atRuleStack.length - 1; i >= atRuleOffset; --i) {
+        let [name, params, src, dst] = atRuleStack[i]
+
+        root = atRule(name, params, root ? [root] : nodes)
+        if (src || dst) Object.assign(root, { src, dst })
+      }
+
+      // Track the root node in the AST
+      if (root) {
+        target.push(root)
+      }
+
+      // We didn't build up any new root, so we can move our node directly into
+      // the target. This can happen when we emit a node that is not a
+      // declaration or a comment.
+      else {
+        target.push(...nodes)
+      }
+    }
+  }
+
+  // Substitutes the `&` selector with the parent selector with `:is(…)` semantics.
+  //
+  // If the `&` is not found, we will prepend it using a descendant combinator.
+  // E.g.: `& ${selector}` → `${parentSelector} ${selector}`
+  //
+  // In some situations we can get rid of the `:is(…)` wrapper, but only if it's safe to do so.
+  function substituteNestingSelector(selector: string, parentSelector: string): string {
+    // Slow path: we need to replace the `&` with the parent selector. A simple
+    // `replaceAll(…)` won't work because a `&` could be escaped, or could be
+    // part of an attribute selector.
+    //
+    // Much safer to parse the selector and replace the `&` that way
+    if (selector.includes('&')) {
+      let ast = SelectorParser.parse(selector)
+      let changed = false
+      walk(ast, {
+        enter(node, ctx) {
+          if (node.kind !== 'selector' || node.value !== '&') return
+
+          changed = true
+
+          // Safest option: use `is(…)` semantics when substituting `&` for the
+          // parent selector.
+          node.value = `:is(${parentSelector})`
+
+          // We should always have a parent, so this shouldn't happen
+          if (ctx.parent === null) return
+
+          // Optimizations:
+          let parentAst = parseSelectorCache.get(parentSelector)
+
+          // 1. If we're dealing with multiple selectors, then we know that the
+          //    `:is(…)` needs to stay. Nothing to optimize.
+          if (parentAst.length === 1 && parentAst[0].kind === 'list') {
+            return // Keep `:is(…)` semantics
+          }
+
+          // 2. We know that `&` is standalone when it's inside of a complex
+          //    selector. E.g. `[before] & [after]`
+          if (ctx.parent.kind === 'complex') {
+            // `& [after]`
+            //
+            // `:is(…)` semantics are not required, because these are equivalent:
+            //
+            // - `:is(div) [after]`       → `div [after]`
+            // - `:is(.x) [after]`        → `.x [after]`
+            // - `:is([before]) [after]`  → `[before] [after]`
+            // - `:is(.a > .b) [after]`   → `.a > .b [after]`
+            if (ctx.index === 0) {
+              node.value = parentSelector
+              return
+            }
+
+            // `[before] &`
+            //
+            // `:is(…)` semantics are required if we're dealing with a complex
+            // parent selector. Otherwise the meaning of the selector could
+            // change:
+            //
+            // - `[before] :is(div)`      → `[before] div`
+            // - `[before] :is(.x)`       → `[before] .x`
+            // - `[before] :is([after])`  → `[before] [after]`
+            // - `[before] :is(.a > .b)`  → `[before] :is(.a > .b)` (!)
+            else if (ctx.index === ctx.siblings.length - 1) {
+              if (parentAst[0].kind === 'complex') {
+                return // Keep `:is(…)` semantics
+              }
+
+              node.value = parentSelector
+              return
+            }
+
+            // `[before] & [after]`
+            //
+            // `:is(…)` semantics are required if we're dealing with a complex
+            // parent selector. Otherwise the meaning of the selector could
+            // change:
+            //
+            // - `[before] :is(div) [after]`      → `[before] div [after]`
+            // - `[before] :is(.x) [after]`       → `[before] .x [after]`
+            // - `[before] :is(.a > .b) [after]`  → `[before] :is(.a > .b) [after]` (!)
+            else {
+              if (parentAst[0].kind === 'complex') {
+                return // Keep `:is(…)` semantics
+              }
+
+              node.value = parentSelector
+              return
+            }
+          }
+
+          // 3. We know that `&` is attached to some other selector when it's
+          //    inside of a compound selector.
+          //
+          //    E.g. `[before]&[after]`
+          //
+          //    We have to be careful that our parent, when it's part of a complex
+          //    selector, that the same rules apply
+          //
+          //    E.g.: `[before] &[after]`
+          //                    ^          current node
+          //                    ^^^^^^^^   compound selector
+          //           ^^^^^^^^^^^^^^^^^   complex selector
+          //
+          else if (ctx.parent.kind === 'compound') {
+            if (parentAst[0].kind === 'complex') {
+              let path = ctx.path()
+              let grandParent = path[path.length - 2]
+
+              // When our compound parent is part of a complex selector, and it's
+              // not the very first node, then we can't safely get rid of the
+              // `:is(…)` if the last selector is a complex selector as well,
+              // unless the `&` maps to a single selector or compound selector.
+              //
+              // ```css
+              // .foo .bar {            /* Complex selector */
+              //   .system &:focus {    /* Complex selector + compound selecto*/
+              //     --x: 1;
+              //   }
+              // }
+              // .foo:hover {           /* Compound selector */
+              //   .system &:focus {    /* Complex selector + compound selector */
+              //     --x: 2;
+              //   }
+              // }
+              // ```
+              //
+              // ↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓
+              //
+              // ```css
+              // .system :is(.foo .bar):focus { /* Cannot drop the `:is(…)`, otherwise `.system` and `.foo` can be swapped in the DOM */
+              //   --x: 1;
+              // }
+              // .system .foo:hover:focus {
+              //   --x: 2;
+              // }
+              // ```
+              if (
+                grandParent &&
+                grandParent.kind === 'complex' &&
+                grandParent.nodes[0] !== ctx.parent
+              ) {
+                return // Keep `:is(…)` semantics
+              }
+            }
+
+            // `&*` and `&div` are invalid CSS so these should stay invalid. They
+            // should be written as `*&` and `div&` instead.
+            if (
+              ctx.siblings
+                .slice(ctx.index + 1)
+                .some(
+                  (sibling) =>
+                    SelectorParser.isUniversalSelector(sibling) ||
+                    SelectorParser.isTypeSelector(sibling),
+                )
+            ) {
+              return // Keep `:is(…)` semantics
+            }
+
+            // `&[after]`
+            //
+            // `:is(…)` semantics are not required, because these are equivalent:
+            //
+            // - `:is(div)[after]`       → `div[after]`
+            // - `:is(.x)[after]`        → `.x[after]`
+            // - `:is([before])[after]`  → `[before][after]`
+            // - `:is(.a > .b)[after]`   → `.a > .b[after]`
+            if (ctx.index === 0) {
+              node.value = parentSelector
+              return
+            }
+
+            // `[before]&`
+            //
+            // `:is(…)` semantics are required if we're dealing with a
+            //
+            // - complex parent selector, to prevent changing the meaning of the selector
+            // - a universal selector, because `*` needs to be first
+            // - a type selector, because `div` needs to be first
+            //
+            // - `[before]:is(div)`      → `[before]:is(div)` (!)
+            // - `[before]:is(*)`        → `[before]:is(*)` (!)
+            // - `[before]:is(.a > .b)`  → `[before]:is(.a > .b)` (!)
+            // - `[before]:is(.x)`       → `[before].x`
+            else if (ctx.index === ctx.siblings.length - 1) {
+              if (
+                parentAst[0].kind === 'complex' ||
+                SelectorParser.isUniversalSelector(parentAst[0]) ||
+                SelectorParser.isTypeSelector(parentAst[0])
+              ) {
+                return // Keep `:is(…)` semantics
+              }
+
+              node.value = parentSelector
+              return
+            }
+
+            // `[before]&[after]`
+            //
+            // `:is(…)` semantics are required if we're dealing with a
+            //
+            // - complex parent selector, to prevent changing the meaning of the selector
+            // - a universal selector, because `*` needs to be first
+            // - a type selector, because `div` needs to be first
+            //
+            // - `[before]:is(div)[after]`      → `[before]:is(div)[after]` (!)
+            // - `[before]:is(*)[after]`        → `[before]:is(*)[after]` (!)
+            // - `[before]:is(.a > .b)[after]`  → `[before]:is(.a > .b)[after]` (!)
+            // - `[before]:is(.x)[after]`       → `[before].x[after]`
+            else {
+              if (
+                parentAst[0].kind === 'complex' ||
+                SelectorParser.isUniversalSelector(parentAst[0]) ||
+                SelectorParser.isTypeSelector(parentAst[0])
+              ) {
+                return // Keep `:is(…)` semantics
+              }
+
+              node.value = parentSelector
+              return
+            }
+          }
+
+          // 4. When the current node is a function argument (e.g. `:not(&))`,
+          //    then we can drop the `:is(…)` entirely.
+          //
+          //    The only exception is when the parent has multiple selectors
+          //    because then we would introduce multiple arguments. Multiple
+          //    selectors are already handled.
+          else if (ctx.parent.kind === 'function') {
+            node.value = parentSelector
+            return
+          }
+        },
+        exit(node, ctx) {
+          // Optimization: We can remove the universal selector `*` if they are
+          // part of a compound selector. E.g.:
+          //
+          // - `*:hover` → `:hover`
+          // - `*[attribute]` → `[attribute]`
+          //
+          // Except when the `*` is a namespace, e.g.: `*|div`, because `*|div`
+          // (any namespace) and `|div` (no namespace) have different meanings.
+          if (
+            ctx.index === 0 &&
+            ctx.siblings.length > 1 &&
+            ctx.parent?.kind === 'compound' &&
+            SelectorParser.isUniversalSelector(node)
+          ) {
+            let next = ctx.siblings[1]
+            if (next.kind === 'selector' && next.value.charCodeAt(0) === PIPE) {
+              return
+            }
+            return WalkAction.ReplaceSkip([])
+          }
+        },
+      })
+
+      if (changed) return SelectorParser.toCss(ast)
+    }
+
+    // Fast path: we know there isn't an `&` so we can prepend the parent
+    // selector immediately.
+    let parentAst = parseSelectorCache.get(parentSelector)
+    return `${parentAst.length === 1 && parentAst[0].kind === 'list' ? `:is(${parentSelector})` : parentSelector} ${selector}`
+  }
+}
+
+// A set of at-rules that can be hoisted to the top without any repercussions.
+// Typically at-rules that rely on the environment, not parent information and
+// contain other rules/declarations.
+const HOISTABLE_AT_RULES = new Set([
+  '@container',
+  '@layer',
+  '@media',
+  '@page',
+  '@scope',
+  '@starting-style',
+  '@supports',
+  '@view-transition',
+])
+
+// A set of at-rules that can be dropped if they don't contain any nodes. We
+// don't have the distinction between an at-rule with no body, or an at-rule
+// with a body that is empty right now.
+const DROPPABLE_IF_EMPTY_AT_RULES = new Set([
+  '@container',
+  '@media',
+  '@page',
+  '@scope',
+  '@starting-style',
+  '@supports',
+  '@view-transition',
+])
+
 export function toCss(ast: AstNode[], track?: boolean) {
   let pos = 0
 
diff --git a/packages/tailwindcss/src/at-import.test.ts b/packages/tailwindcss/src/at-import.test.ts
index 49fbbc043..a19123105 100644
--- a/packages/tailwindcss/src/at-import.test.ts
+++ b/packages/tailwindcss/src/at-import.test.ts
@@ -1,40 +1,13 @@
 import dedent from 'dedent'
 import { expect, test, vi } from 'vitest'
-import type { Plugin } from './compat/plugin-api'
 import { compile, type Config } from './index'
 import plugin from './plugin'
-import { optimizeCss } from './test-utils/run'
+import { compileCss, run } from './test-utils/run'
 
 const css = dedent
 
-async function run(
-  css: string,
-  {
-    loadStylesheet = () => Promise.reject(new Error('Unexpected stylesheet')),
-    loadModule = () => Promise.reject(new Error('Unexpected module')),
-    candidates = [],
-    optimize = true,
-  }: {
-    loadStylesheet?: (
-      id: string,
-      base: string,
-    ) => Promise<{ content: string; base: string; path: string }>
-    loadModule?: (
-      id: string,
-      base: string,
-      resourceHint: 'plugin' | 'config',
-    ) => Promise<{ module: Config | Plugin; base: string; path: string }>
-    candidates?: string[]
-    optimize?: boolean
-  },
-) {
-  let compiler = await compile(css, { base: '/root', loadStylesheet, loadModule })
-  let result = compiler.build(candidates)
-  return optimize ? optimizeCss(result) : result
-}
-
 test('can resolve relative @imports', async () => {
-  let loadStylesheet = async (id: string, base: string) => {
+  async function loadStylesheet(id: string, base: string) {
     expect(base).toBe('/root')
     expect(id).toBe('./foo/bar.css')
     return {
@@ -48,15 +21,16 @@ test('can resolve relative @imports', async () => {
     }
   }
 
-  await expect(
-    run(
+  expect(
+    await compileCss(
       css`
         @import './foo/bar.css';
       `,
-      { loadStylesheet },
+      { base: '/root', loadStylesheet },
     ),
-  ).resolves.toMatchInlineSnapshot(`
-    ".foo {
+  ).toMatchInlineSnapshot(`
+    "
+    .foo {
       color: red;
     }
     "
@@ -64,7 +38,7 @@ test('can resolve relative @imports', async () => {
 })
 
 test('can recursively resolve relative @imports', async () => {
-  let loadStylesheet = async (id: string, base: string) => {
+  async function loadStylesheet(id: string, base: string) {
     if (base === '/root' && id === './foo/bar.css') {
       return {
         content: css`
@@ -88,15 +62,16 @@ test('can recursively resolve relative @imports', async () => {
     throw new Error(`Unexpected import: ${id}`)
   }
 
-  await expect(
-    run(
+  expect(
+    await compileCss(
       css`
         @import './foo/bar.css';
       `,
-      { loadStylesheet },
+      { base: '/root', loadStylesheet },
     ),
-  ).resolves.toMatchInlineSnapshot(`
-    ".baz {
+  ).toMatchInlineSnapshot(`
+    "
+    .baz {
       color: #00f;
     }
     "
@@ -108,7 +83,7 @@ let exampleCSS = css`
     color: red;
   }
 `
-let loadStylesheet = async (id: string) => {
+async function loadStylesheet(id: string) {
   if (!id.endsWith('example.css')) throw new Error('Unexpected import: ' + id)
   return {
     content: exampleCSS,
@@ -118,43 +93,46 @@ let loadStylesheet = async (id: string) => {
 }
 
 test('extracts path from @import nodes', async () => {
-  await expect(
-    run(
+  expect(
+    await compileCss(
       css`
         @import 'example.css';
       `,
-      { loadStylesheet },
+      { base: '/root', loadStylesheet },
     ),
-  ).resolves.toMatchInlineSnapshot(`
-    "a {
+  ).toMatchInlineSnapshot(`
+    "
+    a {
       color: red;
     }
     "
   `)
 
-  await expect(
-    run(
+  expect(
+    await compileCss(
       css`
         @import './example.css';
       `,
-      { loadStylesheet },
+      { base: '/root', loadStylesheet },
     ),
-  ).resolves.toMatchInlineSnapshot(`
-    "a {
+  ).toMatchInlineSnapshot(`
+    "
+    a {
       color: red;
     }
     "
   `)
 
-  await expect(
-    run(
+  expect(
+    await compileCss(
       css`
         @import '/example.css';
       `,
-      { loadStylesheet },
+      { base: '/root', loadStylesheet },
     ),
-  ).resolves.toMatchInlineSnapshot(`
-    "a {
+  ).toMatchInlineSnapshot(`
+    "
+    a {
       color: red;
     }
     "
@@ -162,71 +140,96 @@ test('extracts path from @import nodes', async () => {
 })
 
 test('url() imports are passed-through', async () => {
-  await expect(
-    run(
+  expect(
+    await compileCss(
       css`
         @import url('example.css');
       `,
-      { loadStylesheet: () => Promise.reject(new Error('Unexpected stylesheet')), optimize: false },
+      { base: '/root', loadStylesheet: () => Promise.reject(new Error('Unexpected stylesheet')) },
     ),
-  ).resolves.toMatchInlineSnapshot(`"@import url('example.css');"`)
+  ).toMatchInlineSnapshot(`
+    "
+    @import "example.css";
+    "
+  `)
 
-  await expect(
-    run(
+  expect(
+    await compileCss(
       css`
         @import url('./example.css');
       `,
-      { loadStylesheet: () => Promise.reject(new Error('Unexpected stylesheet')), optimize: false },
+      { base: '/root', loadStylesheet: () => Promise.reject(new Error('Unexpected stylesheet')) },
     ),
-  ).resolves.toMatchInlineSnapshot(`"@import url('./example.css');"`)
+  ).toMatchInlineSnapshot(`
+    "
+    @import "./example.css";
+    "
+  `)
 
-  await expect(
-    run(
+  expect(
+    await compileCss(
       css`
         @import url('/example.css');
       `,
-      { loadStylesheet: () => Promise.reject(new Error('Unexpected stylesheet')), optimize: false },
+      { base: '/root', loadStylesheet: () => Promise.reject(new Error('Unexpected stylesheet')) },
     ),
-  ).resolves.toMatchInlineSnapshot(`"@import url('/example.css');"`)
+  ).toMatchInlineSnapshot(`
+    "
+    @import "/example.css";
+    "
+  `)
 
-  await expect(
-    run(
+  expect(
+    await compileCss(
       css`
         @import url(example.css);
       `,
-      { loadStylesheet: () => Promise.reject(new Error('Unexpected stylesheet')), optimize: false },
+      { base: '/root', loadStylesheet: () => Promise.reject(new Error('Unexpected stylesheet')) },
     ),
-  ).resolves.toMatchInlineSnapshot(`"@import url(example.css);"`)
+  ).toMatchInlineSnapshot(`
+    "
+    @import "example.css";
+    "
+  `)
 
-  await expect(
-    run(
+  expect(
+    await compileCss(
       css`
         @import url(./example.css);
       `,
-      { loadStylesheet: () => Promise.reject(new Error('Unexpected stylesheet')), optimize: false },
+      { base: '/root', loadStylesheet: () => Promise.reject(new Error('Unexpected stylesheet')) },
     ),
-  ).resolves.toMatchInlineSnapshot(`"@import url(./example.css);"`)
+  ).toMatchInlineSnapshot(`
+    "
+    @import "./example.css";
+    "
+  `)
 
-  await expect(
-    run(
+  expect(
+    await compileCss(
       css`
         @import url(/example.css);
       `,
-      { loadStylesheet: () => Promise.reject(new Error('Unexpected stylesheet')), optimize: false },
+      { base: '/root', loadStylesheet: () => Promise.reject(new Error('Unexpected stylesheet')) },
     ),
-  ).resolves.toMatchInlineSnapshot(`"@import url(/example.css);"`)
+  ).toMatchInlineSnapshot(`
+    "
+    @import "/example.css";
+    "
+  `)
 })
 
 test('handles case-insensitive @import directive', async () => {
-  await expect(
-    run(
+  expect(
+    await compileCss(
       css`
         @import 'example.css';
       `,
-      { loadStylesheet },
+      { base: '/root', loadStylesheet },
     ),
-  ).resolves.toMatchInlineSnapshot(`
-    "a {
+  ).toMatchInlineSnapshot(`
+    "
+    a {
       color: red;
     }
     "
@@ -234,15 +237,16 @@ test('handles case-insensitive @import directive', async () => {
 })
 
 test('@media', async () => {
-  await expect(
-    run(
+  expect(
+    await compileCss(
       css`
         @import 'example.css' print;
       `,
-      { loadStylesheet },
+      { base: '/root', loadStylesheet },
     ),
-  ).resolves.toMatchInlineSnapshot(`
-    "@media print {
+  ).toMatchInlineSnapshot(`
+    "
+    @media print {
       a {
         color: red;
       }
@@ -250,15 +254,16 @@ test('@media', async () => {
     "
   `)
 
-  await expect(
-    run(
+  expect(
+    await compileCss(
       css`
         @import 'example.css' print, screen;
       `,
-      { loadStylesheet },
+      { base: '/root', loadStylesheet },
     ),
-  ).resolves.toMatchInlineSnapshot(`
-    "@media print, screen {
+  ).toMatchInlineSnapshot(`
+    "
+    @media print, screen {
       a {
         color: red;
       }
@@ -266,15 +271,16 @@ test('@media', async () => {
     "
   `)
 
-  await expect(
-    run(
+  expect(
+    await compileCss(
       css`
         @import 'example.css' screen and (orientation: landscape);
       `,
-      { loadStylesheet },
+      { base: '/root', loadStylesheet },
     ),
-  ).resolves.toMatchInlineSnapshot(`
-    "@media screen and (orientation: landscape) {
+  ).toMatchInlineSnapshot(`
+    "
+    @media screen and (orientation: landscape) {
       a {
         color: red;
       }
@@ -282,15 +288,16 @@ test('@media', async () => {
     "
   `)
 
-  await expect(
-    run(
+  expect(
+    await compileCss(
       css`
         @import 'example.css' foo(bar);
       `,
-      { loadStylesheet, optimize: false },
+      { base: '/root', loadStylesheet },
     ),
-  ).resolves.toMatchInlineSnapshot(`
-    "@media foo(bar) {
+  ).toMatchInlineSnapshot(`
+    "
+    @media foo(bar) {
       a {
         color: red;
       }
@@ -300,15 +307,16 @@ test('@media', async () => {
 })
 
 test('@supports', async () => {
-  await expect(
-    run(
+  expect(
+    await compileCss(
       css`
         @import 'example.css' supports(display: grid);
       `,
-      { loadStylesheet },
+      { base: '/root', loadStylesheet },
     ),
-  ).resolves.toMatchInlineSnapshot(`
-    "@supports (display: grid) {
+  ).toMatchInlineSnapshot(`
+    "
+    @supports (display: grid) {
       a {
         color: red;
       }
@@ -316,15 +324,16 @@ test('@supports', async () => {
     "
   `)
 
-  await expect(
-    run(
+  expect(
+    await compileCss(
       css`
         @import 'example.css' supports(display: grid) screen and (max-width: 400px);
       `,
-      { loadStylesheet },
+      { base: '/root', loadStylesheet },
     ),
-  ).resolves.toMatchInlineSnapshot(`
-    "@supports (display: grid) {
+  ).toMatchInlineSnapshot(`
+    "
+    @supports (display: grid) {
       @media screen and (max-width: 400px) {
         a {
           color: red;
@@ -334,16 +343,17 @@ test('@supports', async () => {
     "
   `)
 
-  await expect(
-    run(
+  expect(
+    await compileCss(
       css`
         @import 'example.css' supports((not (display: grid)) and (display: flex)) screen and
           (max-width: 400px);
       `,
-      { loadStylesheet },
+      { base: '/root', loadStylesheet },
     ),
-  ).resolves.toMatchInlineSnapshot(`
-    "@supports (not (display: grid)) and (display: flex) {
+  ).toMatchInlineSnapshot(`
+    "
+    @supports (not (display: grid)) and (display: flex) {
       @media screen and (max-width: 400px) {
         a {
           color: red;
@@ -353,17 +363,18 @@ test('@supports', async () => {
     "
   `)
 
-  await expect(
-    run(
+  expect(
+    await compileCss(
       // prettier-ignore
       css`
         @import 'example.css'
         supports((selector(h2 > p)) and (font-tech(color-COLRv1)));
       `,
-      { loadStylesheet },
+      { base: '/root', loadStylesheet },
     ),
-  ).resolves.toMatchInlineSnapshot(`
-    "@supports selector(h2 > p) and font-tech(color-COLRv1) {
+  ).toMatchInlineSnapshot(`
+    "
+    @supports selector(h2 > p) and font-tech(color-COLRv1) {
       a {
         color: red;
       }
@@ -373,15 +384,16 @@ test('@supports', async () => {
 })
 
 test('@layer', async () => {
-  await expect(
-    run(
+  expect(
+    await compileCss(
       css`
         @import 'example.css' layer(utilities);
       `,
-      { loadStylesheet },
+      { base: '/root', loadStylesheet },
     ),
-  ).resolves.toMatchInlineSnapshot(`
-    "@layer utilities {
+  ).toMatchInlineSnapshot(`
+    "
+    @layer utilities {
       a {
         color: red;
       }
@@ -389,15 +401,16 @@ test('@layer', async () => {
     "
   `)
 
-  await expect(
-    run(
+  expect(
+    await compileCss(
       css`
         @import 'example.css' layer();
       `,
-      { loadStylesheet },
+      { base: '/root', loadStylesheet },
     ),
-  ).resolves.toMatchInlineSnapshot(`
-    "@layer {
+  ).toMatchInlineSnapshot(`
+    "
+    @layer {
       a {
         color: red;
       }
@@ -407,13 +420,15 @@ test('@layer', async () => {
 })
 
 test('supports theme(reference) imports', async () => {
-  await expect(
-    run(
+  expect(
+    await run(
+      ['text-red-500'],
       css`
         @tailwind utilities;
         @import 'example.css' theme(reference);
       `,
       {
+        base: '/root',
         loadStylesheet: () =>
           Promise.resolve({
             content: css`
@@ -424,11 +439,11 @@ test('supports theme(reference) imports', async () => {
             base: '',
             path: '',
           }),
-        candidates: ['text-red-500'],
       },
     ),
-  ).resolves.toMatchInlineSnapshot(`
-    ".text-red-500 {
+  ).toMatchInlineSnapshot(`
+    "
+    .text-red-500 {
       color: var(--color-red-500, red);
     }
     "
@@ -436,28 +451,27 @@ test('supports theme(reference) imports', async () => {
 })
 
 test('updates the base when loading modules inside nested files', async () => {
-  let loadStylesheet = () =>
-    Promise.resolve({
+  async function loadStylesheet() {
+    return {
       content: css`
         @config './nested-config.js';
         @plugin './nested-plugin.js';
       `,
       base: '/root/foo',
       path: '',
-    })
-  let loadModule = vi.fn().mockResolvedValue({ base: '', path: '', module: () => {} })
+    }
+  }
+  using loadModule = vi.fn().mockResolvedValue({ base: '', path: '', module: () => {} })
 
   expect(
-    (
-      await run(
-        css`
-          @import './foo/bar.css';
-          @config './root-config.js';
-          @plugin './root-plugin.js';
-        `,
-        { loadStylesheet, loadModule },
-      )
-    ).trim(),
+    await compileCss(
+      css`
+        @import './foo/bar.css';
+        @config './root-config.js';
+        @plugin './root-plugin.js';
+      `,
+      { base: '/root', loadStylesheet, loadModule },
+    ),
   ).toBe('')
 
   expect(loadModule).toHaveBeenNthCalledWith(1, './nested-config.js', '/root/foo', 'config')
@@ -467,14 +481,15 @@ test('updates the base when loading modules inside nested files', async () => {
 })
 
 test('emits the right base for @source directives inside nested files', async () => {
-  let loadStylesheet = () =>
-    Promise.resolve({
+  async function loadStylesheet() {
+    return {
       content: css`
         @source './nested/**/*.css';
       `,
       base: '/root/foo',
       path: '',
-    })
+    }
+  }
 
   let compiler = await compile(
     css`
@@ -491,16 +506,18 @@ test('emits the right base for @source directives inside nested files', async ()
 })
 
 test('emits the right base for @source found inside JS configs and plugins from nested imports', async () => {
-  let loadStylesheet = () =>
-    Promise.resolve({
+  async function loadStylesheet() {
+    return {
       content: css`
         @config './nested-config.js';
         @plugin './nested-plugin.js';
       `,
       base: '/root/foo',
       path: '',
-    })
-  let loadModule = vi.fn().mockImplementation((id: string) => {
+    }
+  }
+
+  using loadModule = vi.fn().mockImplementation((id: string) => {
     let base = id.includes('nested') ? '/root/foo' : '/root'
     if (id.includes('config')) {
       let glob = id.includes('nested') ? './nested-config/*.html' : './root-config/*.html'
@@ -547,29 +564,25 @@ test('emits the right base for @source found inside JS configs and plugins from
 })
 
 test('it crashes when inside a cycle', async () => {
-  let loadStylesheet = () =>
-    Promise.resolve({
-      content: css`
-        @import 'foo.css';
-      `,
+  let input = css`
+    @import 'foo.css';
+  `
+
+  async function loadStylesheet() {
+    return {
+      content: input,
       base: '/root',
       path: '',
-    })
+    }
+  }
 
-  await expect(
-    run(
-      css`
-        @import 'foo.css';
-      `,
-      { loadStylesheet },
-    ),
-  ).rejects.toMatchInlineSnapshot(
+  await expect(compileCss(input, { base: '/root', loadStylesheet })).rejects.toMatchInlineSnapshot(
     `[Error: Exceeded maximum recursion depth while resolving \`foo.css\` in \`/root\`)]`,
   )
 })
 
 test('resolves @reference as `@import "…" reference`', async () => {
-  let loadStylesheet = async (id: string, base: string) => {
+  async function loadStylesheet(id: string, base: string) {
     expect(base).toBe('/root')
     expect(id).toBe('./foo/bar.css')
     return {
@@ -586,16 +599,18 @@ test('resolves @reference as `@import "…" reference`', async () => {
     }
   }
 
-  await expect(
-    run(
+  expect(
+    await run(
+      ['text-red-500'],
       css`
         @reference './foo/bar.css';
         @tailwind utilities;
       `,
-      { loadStylesheet, candidates: ['text-red-500'] },
+      { base: '/root', loadStylesheet },
     ),
-  ).resolves.toMatchInlineSnapshot(`
-    ".text-red-500 {
+  ).toMatchInlineSnapshot(`
+    "
+    .text-red-500 {
       color: var(--color-red-500, red);
     }
     "
@@ -603,7 +618,7 @@ test('resolves @reference as `@import "…" reference`', async () => {
 })
 
 test('resolves `@variant` used as `@custom-variant` inside `@reference`', async () => {
-  let loadStylesheet = async (id: string, base: string) => {
+  async function loadStylesheet(id: string, base: string) {
     expect(base).toBe('/root')
     expect(id).toBe('./foo/bar.css')
     return {
@@ -619,16 +634,18 @@ test('resolves `@variant` used as `@custom-variant` inside `@reference`', async
     }
   }
 
-  await expect(
-    run(
+  expect(
+    await run(
+      ['dark:flex'],
       css`
         @reference './foo/bar.css';
         @tailwind utilities;
       `,
-      { loadStylesheet, candidates: ['dark:flex'] },
+      { base: '/root', loadStylesheet },
     ),
-  ).resolves.toMatchInlineSnapshot(`
-    ".dark\\:flex:where([data-theme="dark"] *) {
+  ).toMatchInlineSnapshot(`
+    "
+    .dark\\:flex:where([data-theme="dark"] *) {
       display: flex;
     }
     "
diff --git a/packages/tailwindcss/src/attribute-selector-parser.test.ts b/packages/tailwindcss/src/attribute-selector-parser.test.ts
index 140336ab0..87f5f3013 100644
--- a/packages/tailwindcss/src/attribute-selector-parser.test.ts
+++ b/packages/tailwindcss/src/attribute-selector-parser.test.ts
@@ -28,6 +28,11 @@ describe('parse', () => {
       '[ data-foo ]',
       { attribute: 'data-foo', operator: null, quote: null, value: null, sensitivity: null },
     ],
+    [
+      // Non-ASCII code points are valid in a CSS ident
+      '[data-état]',
+      { attribute: 'data-état', operator: null, quote: null, value: null, sensitivity: null },
+    ],
     [
       '[data-state=expanded]',
       { attribute: 'data-state', operator: '=', quote: null, value: 'expanded', sensitivity: null },
diff --git a/packages/tailwindcss/src/attribute-selector-parser.ts b/packages/tailwindcss/src/attribute-selector-parser.ts
index e732b2979..624043d59 100644
--- a/packages/tailwindcss/src/attribute-selector-parser.ts
+++ b/packages/tailwindcss/src/attribute-selector-parser.ts
@@ -23,6 +23,7 @@ const ZERO = 48
 const NINE = 57
 const DASH = 45
 const UNDERSCORE = 95
+const NON_ASCII = 128
 
 interface AttributeSelector {
   attribute: string
@@ -61,6 +62,8 @@ export function parse(input: string): AttributeSelector | null {
       if (currentChar >= LOWER_A && currentChar <= LOWER_Z) continue
       if (currentChar >= ZERO && currentChar <= NINE) continue
       if (currentChar === DASH || currentChar === UNDERSCORE) continue
+      // Non-ASCII code points are valid in a CSS ident, e.g.: `[data-état]`
+      if (currentChar >= NON_ASCII) continue
       break
     }
 
diff --git a/packages/tailwindcss/src/candidate.test.ts b/packages/tailwindcss/src/candidate.test.ts
index d66bfcd66..b8f914e1b 100644
--- a/packages/tailwindcss/src/candidate.test.ts
+++ b/packages/tailwindcss/src/candidate.test.ts
@@ -516,6 +516,8 @@ it('should not parse functional utilities with multiple modifiers', () => {
   utilities.functional('bg', () => [])
 
   expect(run('bg-red-1/2/3', { utilities })).toMatchInlineSnapshot(`[]`)
+  expect(run('bg-red-500/50/', { utilities })).toMatchInlineSnapshot(`[]`)
+  expect(run('bg-red-500/50//foo', { utilities })).toMatchInlineSnapshot(`[]`)
 })
 
 it('should parse a utility with an arbitrary value', () => {
@@ -1416,6 +1418,19 @@ it('should parse a functional variant with a modifier', () => {
   `)
 })
 
+it('should not parse variants with multiple modifiers', () => {
+  let utilities = new Utilities()
+  utilities.static('flex', () => [])
+
+  let variants = new Variants()
+  variants.static('hover', () => {})
+  variants.compound('group', Compounds.StyleRules, () => {})
+
+  expect(run('group-hover/foo:flex', { utilities, variants })).toHaveLength(1)
+  expect(run('group-hover/foo/:flex', { utilities, variants })).toEqual([])
+  expect(run('group-hover/foo//bar:flex', { utilities, variants })).toEqual([])
+})
+
 it('should parse a functional variant starting with @', () => {
   let utilities = new Utilities()
   utilities.static('flex', () => [])
diff --git a/packages/tailwindcss/src/candidate.ts b/packages/tailwindcss/src/candidate.ts
index 4e79b818e..a389af365 100644
--- a/packages/tailwindcss/src/candidate.ts
+++ b/packages/tailwindcss/src/candidate.ts
@@ -3,6 +3,7 @@ import { decodeArbitraryValue } from './utils/decode-arbitrary-value'
 import { DefaultMap } from './utils/default-map'
 import { isValidArbitrary } from './utils/is-valid-arbitrary'
 import { segment } from './utils/segment'
+import type { ValueFunctionNode } from './value-parser'
 import * as ValueParser from './value-parser'
 import { walk, WalkAction } from './walk'
 
@@ -371,6 +372,14 @@ export function* parseCandidate(input: string, designSystem: DesignSystem): Iter
     }
   }
 
+  // If there's more than one modifier, the utility is invalid.
+  //
+  // E.g.:
+  //
+  // - `bg-red-500/50/50`
+  let parts = segment(base, '/')
+  if (parts.length > 2) return
+
   // Figure out the new base and the modifier segment if present.
   //
   // E.g.:
@@ -380,14 +389,7 @@ export function* parseCandidate(input: string, designSystem: DesignSystem): Iter
   // ^^^^^^^^^^    -> Base without modifier
   //            ^^ -> Modifier segment
   // ```
-  let [baseWithoutModifier, modifierSegment = null, additionalModifier] = segment(base, '/')
-
-  // If there's more than one modifier, the utility is invalid.
-  //
-  // E.g.:
-  //
-  // - `bg-red-500/50/50`
-  if (additionalModifier) return
+  let [baseWithoutModifier, modifierSegment = null] = parts
 
   let parsedModifier = modifierSegment === null ? null : parseModifier(modifierSegment)
 
@@ -706,17 +708,18 @@ export function parseVariant(variant: string, designSystem: DesignSystem): Varia
 
   // Static, functional and compound variants
   {
-    // group-hover/group-name
-    // ^^^^^^^^^^^            -> Variant without modifier
-    //             ^^^^^^^^^^ -> Modifier
-    let [variantWithoutModifier, modifier = null, additionalModifier] = segment(variant, '/')
-
     // If there's more than one modifier, the variant is invalid.
     //
     // E.g.:
     //
     // - `group-hover/foo/bar`
-    if (additionalModifier) return null
+    let parts = segment(variant, '/')
+    if (parts.length > 2) return null
+
+    // group-hover/group-name
+    // ^^^^^^^^^^^            -> Variant without modifier
+    //             ^^^^^^^^^^ -> Modifier
+    let [variantWithoutModifier, modifier = null] = parts
 
     let roots = findRoots(variantWithoutModifier, (root) => {
       return designSystem.variants.has(root)
@@ -1035,33 +1038,56 @@ const printArbitraryValueCache = new DefaultMap<string, string>((input) => {
 
   let drop = new Set<ValueParser.ValueAstNode>()
 
-  walk(ast, (node, ctx) => {
-    let parentArray = ctx.parent === null ? ast : (ctx.parent.nodes ?? [])
+  let symbols = new Set([
+    // Selectors
+    '~', // Subsequent sibling combinator
+    '>', // Child combinator
 
+    // Math operators
+    '+', // or next sibling combinator
+    '-',
+    '*', // or universal selector
+    '/',
+  ])
+  walk(ast, (node, ctx) => {
     // Handle operators (e.g.: inside of `calc(…)`)
-    if (
-      node.kind === 'word' &&
-      // Operators
-      (node.value === '+' || node.value === '-' || node.value === '*' || node.value === '/')
-    ) {
-      let idx = parentArray.indexOf(node) ?? -1
+    if (node.kind === 'word' && symbols.has(node.value)) {
+      let idx = ctx.index
 
       // This should not be possible
       if (idx === -1) return
 
-      let previous = parentArray[idx - 1]
+      // a + b
+      //   ^ node
+      //  ^ previous (whitespace)
+      let previous = ctx.siblings[idx - 1]
       if (previous?.kind !== 'separator' || previous.value !== ' ') return
 
-      let next = parentArray[idx + 1]
+      // a + b
+      //   ^ node
+      //    ^ next (whitespace)
+      let next = ctx.siblings[idx + 1]
       if (next?.kind !== 'separator' || next.value !== ' ') return
 
+      // a + b
+      //   ^ node
+      // ^ previous (node)
+      let previousPrevious = ctx.siblings[idx - 2]
+      if (previousPrevious && symbols.has(previousPrevious.value)) return
+
+      // a + b
+      //   ^ node
+      //     ^ next (node)
+      let nextNext = ctx.siblings[idx + 2]
+      if (nextNext && symbols.has(nextNext.value)) return
+
       drop.add(previous)
       drop.add(next)
     }
 
     // Leading and trailing whitespace
     else if (node.kind === 'separator' && node.value.length > 0 && node.value.trim() === '') {
-      if (parentArray[0] === node || parentArray[parentArray.length - 1] === node) {
+      if (ctx.siblings[0] === node || ctx.siblings[ctx.siblings.length - 1] === node) {
         drop.add(node)
       }
     }
@@ -1071,6 +1097,41 @@ const printArbitraryValueCache = new DefaultMap<string, string>((input) => {
     else if (node.kind === 'separator' && node.value.trim() === ',') {
       node.value = ','
     }
+
+    // Wrap custom functions starting with `--`, in parentheses if preceded by
+    // a symbol. E.g.: `calc(100%---spacing(2))` → `calc(100%-(--spacing(2)))`
+    else if (node.kind === 'function' && node.value.startsWith('--')) {
+      let idx = ctx.index
+
+      // When it's the first argument, then we don't have to wrap it in `(…)`
+      //
+      // E.g.: `--spacing(…)`, no need to wrap
+      //       `calc(100%---spacing(…))`, we want to wrap
+      //
+      if (idx <= 0) return
+
+      // When it's not the first argument, we likely want to wrap it. However,
+      // when it's separated by a `,` then it's readable enough.
+      //
+      // E.g.: `min(100%,--spacing(2))` is readable, in fact
+      //       `min(100%,(--spacing(2)))` would make it worse
+      let previous = ctx.siblings[idx - 1]
+      if (previous?.kind === 'separator' && previous.value === ',') return
+
+      // When it's part of a bigger list, aka no special symbols were used, then
+      // we don't have to wrap it either.
+      //
+      // E.g.: `shadow-[inset_0px_1px_--theme(--color-white/15%)]`, wrapping would look unnecessary:
+      //       `shadow-[inset_0px_1px_(--theme(--color-white/15%))]`
+      let previousPrevious = ctx.siblings[idx - 2]
+      if (previousPrevious && !symbols.has(previousPrevious.value)) return
+
+      return WalkAction.ReplaceSkip({
+        kind: 'function',
+        value: '', // Unnamed, so will result in `(…)`
+        nodes: [node],
+      } satisfies ValueFunctionNode)
+    }
   })
 
   if (drop.size > 0) {
diff --git a/packages/tailwindcss/src/canonicalize-calc-expressions.test.ts b/packages/tailwindcss/src/canonicalize-calc-expressions.test.ts
new file mode 100644
index 000000000..f612e5f7b
--- /dev/null
+++ b/packages/tailwindcss/src/canonicalize-calc-expressions.test.ts
@@ -0,0 +1,24 @@
+import { expect, it } from 'vitest'
+import { canonicalizeCalcExpressions } from './canonicalize-calc-expressions'
+
+it.each([
+  ['calc(-1 * var(--foo))', 'calc(var(--foo) * -1)'],
+  ['calc(1rem + var(--foo))', 'calc(var(--foo) + 1rem)'],
+  ['calc(2rem * calc(3px * var(--foo)))', 'calc(calc(var(--foo) * 3px) * 2rem)'],
+  ['calc(var(--b) + var(--a))', 'calc(var(--a) + var(--b))'],
+  ['calc(3px * 2rem)', 'calc(2rem * 3px)'],
+  ['calc(5px * 3px)', 'calc(3px * 5px)'],
+  ['calc(1 * 1rem)', 'calc(1rem * 1)'],
+  ['calc(10 + 2)', 'calc(2 + 10)'],
+])('`%s` → `%s` (%#)', (input, expected) => {
+  expect(canonicalizeCalcExpressions(input)).toBe(expected)
+})
+
+it.each([
+  ['calc(1rem - var(--foo))'],
+  ['calc(1rem / 2)'],
+  ['calc(var(--a) + 1rem)'],
+  ['calc(2rem * 3px)'],
+])('should keep `%s` (%#)', (input) => {
+  expect(canonicalizeCalcExpressions(input)).toBe(input)
+})
diff --git a/packages/tailwindcss/src/canonicalize-calc-expressions.ts b/packages/tailwindcss/src/canonicalize-calc-expressions.ts
new file mode 100644
index 000000000..7e08f8622
--- /dev/null
+++ b/packages/tailwindcss/src/canonicalize-calc-expressions.ts
@@ -0,0 +1,82 @@
+import { dimensions } from './utils/dimensions'
+import * as ValueParser from './value-parser'
+import { walk, WalkAction } from './walk'
+
+// Assumption: We already assume that we receive somewhat valid `calc()`
+// expressions. So we will see `calc(1 + 1)` and not `calc(1+1)`
+export function canonicalizeCalcExpressions(input: string): string {
+  let [canonicalized, valueAst] = canonicalizeCalcExpressionsAst(ValueParser.parse(input))
+
+  return canonicalized ? ValueParser.toCss(valueAst) : input
+}
+
+export function canonicalizeCalcExpressionsAst(
+  ast: ValueParser.ValueAstNode[],
+): [canonicalized: boolean, ast: ValueParser.ValueAstNode[]] {
+  let canonicalized = false
+
+  walk(ast, {
+    exit(valueNode) {
+      // We are only interested in binary expressions in `calc(…)` and `(…)`,
+      // and only with the `*` or `+` operators.
+      if (valueNode.kind !== 'function') return
+      if (valueNode.value !== 'calc' && valueNode.value !== '') return
+      if (valueNode.nodes.length !== 5) return
+      if (valueNode.nodes[2].kind !== 'word') return
+      if (valueNode.nodes[2].value !== '*' && valueNode.nodes[2].value !== '+') return
+
+      let lhs = valueNode.nodes[0]
+      let rhs = valueNode.nodes[4]
+
+      if (shouldSwap(lhs, rhs)) {
+        canonicalized = true
+
+        let replacement: ValueParser.ValueFunctionNode = {
+          kind: 'function',
+          value: valueNode.value,
+          nodes: [
+            rhs, // Now lhs
+            valueNode.nodes[1], // Separator
+            valueNode.nodes[2], // Operator
+            valueNode.nodes[3], // Separator
+            lhs, // Now rhs
+          ],
+        }
+
+        return WalkAction.ReplaceSkip(replacement)
+      }
+    },
+  })
+
+  return [canonicalized, ast]
+}
+
+function shouldSwap(lhs: ValueParser.ValueAstNode, rhs: ValueParser.ValueAstNode): boolean {
+  let lhsDimension = lhs.kind === 'word' ? dimensions.get(lhs.value) : null
+  let rhsDimension = rhs.kind === 'word' ? dimensions.get(rhs.value) : null
+
+  if (lhsDimension !== null && rhsDimension === null) return true
+  if (lhsDimension === null && rhsDimension !== null) return false
+
+  if (lhsDimension !== null && rhsDimension !== null) {
+    let [lhsValue, lhsUnit] = lhsDimension
+    let [rhsValue, rhsUnit] = rhsDimension
+
+    // Within dimensions, keep unit-bearing values ahead of unitless numbers so
+    // `1rem` sorts before `1`.
+    if (lhsUnit === null && rhsUnit !== null) return true
+    if (lhsUnit !== null && rhsUnit === null) return false
+
+    // Then sort dimensions numerically, and finally by unit for ties.
+    if (lhsValue !== rhsValue) {
+      return lhsValue - rhsValue > 0
+    }
+
+    if (lhsUnit !== rhsUnit) {
+      return (lhsUnit ?? '').localeCompare(rhsUnit ?? '') > 0
+    }
+  }
+
+  // Both nodes are unknown values (not dimensions), sort them as strings
+  return ValueParser.toCss([lhs]).localeCompare(ValueParser.toCss([rhs])) > 0
+}
diff --git a/packages/tailwindcss/src/canonicalize-candidates.test.ts b/packages/tailwindcss/src/canonicalize-candidates.test.ts
index 4b6ecbfd6..567f0ad0d 100644
--- a/packages/tailwindcss/src/canonicalize-candidates.test.ts
+++ b/packages/tailwindcss/src/canonicalize-candidates.test.ts
@@ -1,9 +1,11 @@
+import { randomUUID } from 'node:crypto'
 import fs from 'node:fs'
 import path from 'node:path'
 import { describe, expect, test } from 'vitest'
 import { __unstable__loadDesignSystem } from '.'
 import { cartesian } from './cartesian'
 import type { CanonicalizeOptions } from './intellisense'
+import plugin from './plugin'
 import { DefaultMap } from './utils/default-map'
 
 const css = String.raw
@@ -92,30 +94,6 @@ describe.each([['default'], ['with-variant'], ['important'], ['prefix']])('%s',
   }
 
   async function expectCanonicalization(
-    input: string,
-    candidate: string,
-    expected: string,
-    options: CanonicalizeOptions = DEFAULT_CANONICALIZATION_OPTIONS,
-  ) {
-    candidate = prepare(candidate)
-    expected = prepare(expected)
-
-    if (strategy === 'prefix') {
-      input = input.replace("@import 'tailwindcss';", "@import 'tailwindcss' prefix(tw);")
-    }
-
-    let designSystem = await designSystems.get(__dirname).get(input)
-    let [actual] = designSystem.canonicalizeCandidates([candidate], options)
-
-    try {
-      expect(actual).toBe(expected)
-    } catch (err) {
-      if (err instanceof Error) Error.captureStackTrace(err, expectCanonicalization)
-      throw err
-    }
-  }
-
-  async function expectCombinedCanonicalization(
     input: string,
     candidates: string,
     expected: string,
@@ -134,179 +112,196 @@ describe.each([['default'], ['with-variant'], ['important'], ['prefix']])('%s',
     try {
       expect(actual).toEqual(preparedExpected)
     } catch (err) {
-      if (err instanceof Error) Error.captureStackTrace(err, expectCombinedCanonicalization)
+      if (err instanceof Error) Error.captureStackTrace(err, expectCanonicalization)
       throw err
     }
   }
 
   /// ----------------------------------
 
-  test.each([
-    /// Legacy bg-gradient-* → bg-linear-*
-    ['bg-gradient-to-t', 'bg-linear-to-t'],
-    ['bg-gradient-to-tr', 'bg-linear-to-tr'],
-    ['bg-gradient-to-r', 'bg-linear-to-r'],
-    ['bg-gradient-to-br', 'bg-linear-to-br'],
-    ['bg-gradient-to-b', 'bg-linear-to-b'],
-    ['bg-gradient-to-bl', 'bg-linear-to-bl'],
-    ['bg-gradient-to-l', 'bg-linear-to-l'],
-    ['bg-gradient-to-tl', 'bg-linear-to-tl'],
-
-    /// theme(…) to `var(…)`
-    // Keep candidates that don't contain `theme(…)` or `theme(…, …)`
-    ['[color:red]', 'text-[red]'],
-
-    // Handle special cases around `.1` in the `theme(…)`
-    ['[--value:theme(spacing.1)]', '[--value:--spacing(1)]'],
-    ['[--value:theme(fontSize.xs.1.lineHeight)]', '[--value:var(--text-xs--line-height)]'],
-    ['[--value:theme(spacing[1.25])]', '[--value:--spacing(1.25)]'],
-
-    // Should not convert invalid spacing values to calc
-    ['[--value:theme(spacing[1.1])]', '[--value:theme(spacing[1.1])]'],
-
-    // Convert to `var(…)` if we can resolve the path
-    ['[color:theme(colors.red.500)]', 'text-red-500'], // Arbitrary property
-    ['[color:theme(colors.red.500)]/50', 'text-red-500/50'], // Arbitrary property + modifier
-    ['bg-[theme(colors.red.500)]', 'bg-red-500'], // Arbitrary value
-    ['bg-[size:theme(spacing.4)]', 'bg-size-[--spacing(4)]'], // Arbitrary value + data type hint
-
-    // Pretty print CSS functions preceded by an operator to prevent consecutive
-    // operator characters.
-    ['w-[calc(100dvh-theme(spacing.2))]', 'w-[calc(100dvh-(--spacing(2)))]'],
-    ['w-[calc(100dvh+theme(spacing.2))]', 'w-[calc(100dvh+(--spacing(2)))]'],
-    ['w-[calc(100dvh/theme(spacing.2))]', 'w-[calc(100dvh/(--spacing(2)))]'],
-    ['w-[calc(100dvh*theme(spacing.2))]', 'w-[calc(100dvh*(--spacing(2)))]'],
-
-    // Convert to `var(…)` if we can resolve the path, but keep fallback values
-    ['bg-[theme(colors.red.500,red)]', 'bg-(--color-red-500,red)'],
-
-    // Keep `theme(…)` if we can't resolve the path
-    ['bg-[theme(colors.foo.1000)]', 'bg-[theme(colors.foo.1000)]'],
-
-    // Keep `theme(…)` if we can't resolve the path, but still try to convert the
-    // fallback value.
-    ['bg-[theme(colors.foo.1000,theme(colors.red.500))]', 'bg-red-500'],
-
-    // Use `theme(…)` (deeply nested) inside of a `calc(…)` function
-    ['text-[calc(theme(fontSize.xs)*2)]', 'text-[calc(var(--text-xs)*2)]'],
-
-    // Multiple `theme(… / …)` calls should result in modern syntax of `theme(…)`
-    // - Can't convert to `var(…)` because that would lose the modifier.
-    // - Can't convert to a candidate modifier because there are multiple
-    //   `theme(…)` calls.
-    //
-    //   If we really want to, we can make a fancy migration that tries to move it
-    //   to a candidate modifier _if_ all `theme(…)` calls use the same modifier.
-    [
-      '[color:theme(colors.red.500/50,theme(colors.blue.500/50))]',
-      'text-[--theme(--color-red-500/50,--theme(--color-blue-500/50))]',
-    ],
-    [
-      '[color:theme(colors.red.500/50,theme(colors.blue.500/50))]/50',
-      'text-[--theme(--color-red-500/50,--theme(--color-blue-500/50))]/50',
-    ],
-
-    // Convert the `theme(…)`, but try to move the inline modifier (e.g. `50%`),
-    // to a candidate modifier.
-    // Arbitrary property, with simple percentage modifier
-    ['[color:theme(colors.red.500/75%)]', 'text-red-500/75'],
-
-    // Arbitrary property, with numbers (0-1) without a unit
-    ['[color:theme(colors.red.500/.12)]', 'text-red-500/12'],
-    ['[color:theme(colors.red.500/0.12)]', 'text-red-500/12'],
-
-    // Arbitrary property, with more complex modifier (we only allow whole numbers
-    // as bare modifiers). Convert the complex numbers to arbitrary values instead.
-    ['[color:theme(colors.red.500/12.34%)]', 'text-red-500/[12.34%]'],
-    ['[color:theme(colors.red.500/var(--opacity))]', 'text-red-500/(--opacity)'],
-    ['[color:theme(colors.red.500/.12345)]', 'text-red-500/1234.5'],
-    ['[color:theme(colors.red.500/50.25%)]', 'text-red-500/50.25'],
-
-    // Arbitrary value
-    ['bg-[theme(colors.red.500/75%)]', 'bg-red-500/75'],
-    ['bg-[theme(colors.red.500/12.34%)]', 'bg-red-500/[12.34%]'],
-
-    // Arbitrary property that already contains a modifier
-    ['[color:theme(colors.red.500/50%)]/50', 'text-[--theme(--color-red-500/50%)]/50'],
-
-    // Values that don't contain only `theme(…)` calls should not be converted to
-    // use a modifier since the color is not the whole value.
-    [
-      'shadow-[shadow:inset_0px_1px_theme(colors.white/15%)]',
-      'shadow-[inset_0px_1px_--theme(--color-white/15%)]',
-    ],
-
-    // Arbitrary value, where the candidate already contains a modifier
-    // This should still migrate the `theme(…)` syntax to the modern syntax.
-    ['bg-[theme(colors.red.500/50%)]/50', 'bg-[--theme(--color-red-500/50%)]/50'],
-
-    // Variants, we can't use `var(…)` especially inside of `@media(…)`. We can
-    // still upgrade the `theme(…)` to the modern syntax.
-    ['max-[theme(screens.lg)]:flex', 'max-[--theme(--breakpoint-lg)]:flex'],
-    // There are no variables for `--spacing` multiples, so we can't convert this
-    ['max-[theme(spacing.4)]:flex', 'max-[theme(spacing.4)]:flex'],
-
-    // This test in itself doesn't make much sense. But we need to make sure
-    // that this doesn't end up as the modifier in the candidate itself.
-    ['max-[theme(spacing.4/50)]:flex', 'max-[theme(spacing.4/50)]:flex'],
-
-    // `theme(…)` calls in another CSS function is replaced correctly.
-    // Additionally we remove unnecessary whitespace.
-    ['grid-cols-[min(50%_,_theme(spacing.80))_auto]', 'grid-cols-[min(50%,--spacing(80))_auto]'],
-
-    // `calc(var(--spacing)*…)` to `--spacing(…)`
-    ['pt-[min(20%,calc(var(--spacing)*8))]', 'pt-[min(20%,--spacing(8))]'],
-    ['pt-[min(20%,calc(var(--spacing)*var(--other)))]', 'pt-[min(20%,--spacing(var(--other)))]'],
-    ['pt-[calc(var(--spacing)*8)]', 'pt-8'],
-    ['pt-[calc(var(--spacing)*var(--other))]', 'pt-[--spacing(var(--other))]'],
-
-    ['[padding-top:min(20%,calc(var(--spacing)*8))]', 'pt-[min(20%,--spacing(8))]'],
-    [
-      '[padding-top:min(20%,calc(var(--spacing)*var(--other)))]',
-      'pt-[min(20%,--spacing(var(--other)))]',
-    ],
-    ['[padding-top:calc(var(--spacing)*8)]', 'pt-8'],
-    ['[padding-top:calc(var(--spacing)*var(--other))]', 'pt-[--spacing(var(--other))]'],
-
-    // `theme(…)` calls valid in v3, but not in v4 should still be converted.
-    ['[--foo:theme(transitionDuration.500)]', '[--foo:theme(transitionDuration.500)]'],
-
-    // Renamed theme keys
-    ['max-w-[theme(screens.md)]', 'max-w-(--breakpoint-md)'],
-    ['w-[theme(maxWidth.md)]', 'w-md'],
-
-    // Invalid cases
-    ['[--foo:theme(colors.red.500/50/50)]', '[--foo:theme(colors.red.500/50/50)]'],
-    ['[--foo:theme(colors.red.500/50/50)]/50', '[--foo:theme(colors.red.500/50/50)]/50'],
-
-    // Partially invalid cases
-    [
-      '[--foo:theme(colors.red.500/50/50)_theme(colors.blue.200)]',
-      '[--foo:theme(colors.red.500/50/50)_var(--color-blue-200)]',
-    ],
-    [
-      '[--foo:theme(colors.red.500/50/50)_theme(colors.blue.200)]/50',
-      '[--foo:theme(colors.red.500/50/50)_var(--color-blue-200)]/50',
-    ],
-
-    // If a utility sets `property` and `--tw-{property}` with the same value,
-    // we can ignore the `--tw-{property}`. This is just here for composition.
-    // This means that we should be able to upgrade the one _without_ to the one
-    // _with_ the variable
-    ['[font-weight:400]', 'font-normal'],
-    ['[line-height:0]', 'leading-0'],
-    ['[border-style:solid]', 'border-solid'],
-  ])(testName, { timeout }, async (candidate, expected) => {
-    await expectCanonicalization(
-      css`
+  describe('deprecated utilities', () => {
+    test.each([
+      /// Legacy bg-gradient-* → bg-linear-*
+      ['bg-gradient-to-t', 'bg-linear-to-t'],
+      ['bg-gradient-to-tr', 'bg-linear-to-tr'],
+      ['bg-gradient-to-r', 'bg-linear-to-r'],
+      ['bg-gradient-to-br', 'bg-linear-to-br'],
+      ['bg-gradient-to-b', 'bg-linear-to-b'],
+      ['bg-gradient-to-bl', 'bg-linear-to-bl'],
+      ['bg-gradient-to-l', 'bg-linear-to-l'],
+      ['bg-gradient-to-tl', 'bg-linear-to-tl'],
+    ])(testName, { timeout }, async (candidate, expected) => {
+      let input = css`
         @import 'tailwindcss';
-      `,
-      candidate,
-      expected,
-    )
+      `
+
+      await expectCanonicalization(input, candidate, expected)
+    })
+
+    let deprecated: [string, string][] = [
+      ['order-none', 'order-0'],
+      ['break-words', 'wrap-break-word'],
+      ['overflow-ellipsis', 'text-ellipsis'],
+
+      ['start-full', 'inset-s-full'],
+      ['-start-full', '-inset-s-full'],
+      ['start-auto', 'inset-s-auto'],
+      ['start-px', 'inset-s-px'],
+      ['-start-px', '-inset-s-px'],
+      ['start-8', 'inset-s-8'], // Within default spacing scale
+      ['-start-8', '-inset-s-8'], // Within default spacing scale
+      ['start-123', 'inset-s-123'], // Outside of default spacing scale
+      ['-start-123', '-inset-s-123'], // Outside of default spacing scale
+
+      ['end-full', 'inset-e-full'],
+      ['-end-full', '-inset-e-full'],
+      ['end-auto', 'inset-e-auto'],
+      ['end-px', 'inset-e-px'],
+      ['-end-px', '-inset-e-px'],
+      ['end-8', 'inset-e-8'], // Within default spacing scale
+      ['-end-8', '-inset-e-8'], // Within default spacing scale
+      ['end-123', 'inset-e-123'], // Outside of default spacing scale
+      ['-end-123', '-inset-e-123'], // Outside of default spacing scale
+    ]
+
+    test.each(deprecated)(testName, { timeout }, async (candidate, expected) => {
+      let input = css`
+        @import 'tailwindcss';
+      `
+
+      await expectCanonicalization(input, candidate, expected)
+    })
+
+    describe('With custom implementation', () => {
+      // Creating a shared CSS file such that we can re-use the same design
+      // system for all of these.
+      let customImplementations = deprecated
+        .map(
+          ([candidate]) => css`
+          @utility ${candidate} {
+            --custom-${randomUUID()}: implementation;
+          }
+        `,
+        )
+        .join('\n')
+
+      // Keep the current utility because of the custom implementation
+      test.each(deprecated.map(([candidate]) => [candidate, candidate]))(
+        testName,
+        { timeout },
+        async (candidate, expected) => {
+          let input = css`
+            @import 'tailwindcss';
+
+            ${customImplementations}
+          `
+
+          await expectCanonicalization(input, candidate, expected)
+        },
+      )
+    })
   })
 
-  describe('arbitrary utilities', () => {
+  describe('arbitrary properties', () => {
+    test.each([
+      /// theme(…) to `var(…)`
+      // Keep candidates that don't contain `theme(…)` or `theme(…, …)`
+      ['[color:red]', 'text-[red]'],
+
+      // Handle special cases around `.1` in the `theme(…)`
+      ['[--value:theme(spacing.1)]', '[--value:--spacing(1)]'],
+      ['[--value:theme(fontSize.xs.1.lineHeight)]', '[--value:var(--text-xs--line-height)]'],
+      ['[--value:theme(spacing[1.25])]', '[--value:--spacing(1.25)]'],
+
+      // Should not convert invalid spacing values to calc
+      ['[--value:theme(spacing[1.1])]', '[--value:theme(spacing[1.1])]'],
+
+      // Convert to `var(…)` if we can resolve the path
+      ['[color:theme(colors.red.500)]', 'text-red-500'], // Arbitrary property
+      ['[color:theme(colors.red.500)]/50', 'text-red-500/50'], // Arbitrary property + modifier
+
+      // Multiple `theme(… / …)` calls should result in modern syntax of `theme(…)`
+      // - Can't convert to `var(…)` because that would lose the modifier.
+      // - Can't convert to a candidate modifier because there are multiple
+      //   `theme(…)` calls.
+      //
+      //   If we really want to, we can make a fancy migration that tries to move it
+      //   to a candidate modifier _if_ all `theme(…)` calls use the same modifier.
+      [
+        '[color:theme(colors.red.500/50,theme(colors.blue.500/50))]',
+        'text-[--theme(--color-red-500/50,--theme(--color-blue-500/50))]',
+      ],
+      [
+        '[color:theme(colors.red.500/50,theme(colors.blue.500/50))]/50',
+        'text-[--theme(--color-red-500/50,--theme(--color-blue-500/50))]/50',
+      ],
+
+      // Convert the `theme(…)`, but try to move the inline modifier (e.g. `50%`),
+      // to a candidate modifier.
+      // Arbitrary property, with simple percentage modifier
+      ['[color:theme(colors.red.500/75%)]', 'text-red-500/75'],
+
+      // Arbitrary property, with numbers (0-1) without a unit
+      ['[color:theme(colors.red.500/.12)]', 'text-red-500/12'],
+      ['[color:theme(colors.red.500/0.12)]', 'text-red-500/12'],
+
+      // Arbitrary property, with more complex modifier (we only allow whole numbers
+      // as bare modifiers). Convert the complex numbers to arbitrary values instead.
+      ['[color:theme(colors.red.500/12.34%)]', 'text-red-500/[12.34%]'],
+      ['[color:theme(colors.red.500/var(--opacity))]', 'text-red-500/(--opacity)'],
+      ['[color:theme(colors.red.500/.12345)]', 'text-red-500/1234.5'],
+      ['[color:theme(colors.red.500/50.25%)]', 'text-red-500/50.25'],
+
+      // Arbitrary property that already contains a modifier
+      ['[color:theme(colors.red.500/50%)]/50', 'text-[--theme(--color-red-500/50%)]/50'],
+
+      // `calc(var(--spacing)*…)` to `--spacing(…)`
+      ['[padding-top:min(20%,calc(var(--spacing)*8))]', 'pt-[min(20%,--spacing(8))]'],
+      [
+        '[padding-top:min(20%,calc(var(--spacing)*var(--other)))]',
+        'pt-[min(20%,--spacing(var(--other)))]',
+      ],
+      ['[padding-top:calc(var(--spacing)*8)]', 'pt-8'],
+      ['[padding-top:calc(var(--spacing)*var(--other))]', 'pt-[--spacing(var(--other))]'],
+
+      // `theme(…)` calls valid in v3, but not in v4 should still be converted.
+      ['[--foo:theme(transitionDuration.500)]', '[--foo:theme(transitionDuration.500)]'],
+
+      // Invalid cases
+      ['[--foo:theme(colors.red.500/50/50)]', '[--foo:theme(colors.red.500/50/50)]'],
+      ['[--foo:theme(colors.red.500/50/50)]/50', '[--foo:theme(colors.red.500/50/50)]/50'],
+
+      // Partially invalid cases
+      [
+        '[--foo:theme(colors.red.500/50/50)_theme(colors.blue.200)]',
+        '[--foo:theme(colors.red.500/50/50)_var(--color-blue-200)]',
+      ],
+      [
+        '[--foo:theme(colors.red.500/50/50)_theme(colors.blue.200)]/50',
+        '[--foo:theme(colors.red.500/50/50)_var(--color-blue-200)]/50',
+      ],
+
+      // If a utility sets `property` and `--tw-{property}` with the same value,
+      // we can ignore the `--tw-{property}`. This is just here for composition.
+      // This means that we should be able to upgrade the one _without_ to the one
+      // _with_ the variable
+      ['[font-weight:400]', 'font-normal'],
+      ['[line-height:0]', 'leading-0'],
+      ['[border-style:solid]', 'border-solid'],
+
+      // Do not constant fold `0<unit>` to `0` when the type is unknown (which
+      // is often the case with CSS variables)
+      ['[--foo:0px]', '[--foo:0px]'],
+      ['[--foo:calc(0px*1)]', '[--foo:calc(0px*1)]'],
+      ['[--foo:calc(0*1rem)]', '[--foo:calc(0*1rem)]'],
+    ])(testName, { timeout }, async (candidate, expected) => {
+      let input = css`
+        @import 'tailwindcss';
+      `
+
+      await expectCanonicalization(input, candidate, expected)
+    })
+
     test.each([
       // Arbitrary property to static utility
       ['[text-wrap:balance]', 'text-balance'],
@@ -317,14 +312,14 @@ describe.each([['default'], ['with-variant'], ['important'], ['prefix']])('%s',
       ['[display:_flex]', 'flex'],
       ['[display:flex_]', 'flex'],
 
-      // Arbitrary property to static utility
-      // Map number to keyword-like value
-      ['leading-[1]', 'leading-none'],
-
       // Arbitrary property to named functional utility
       ['[color:var(--color-red-500)]', 'text-red-500'],
       ['[background-color:var(--color-red-500)]', 'bg-red-500'],
 
+      // Arbitrary property to named utility (case insensitive)
+      ['[color:#fff]', 'text-white'],
+      ['[color:#FFF]', 'text-white'],
+
       // Arbitrary property with modifier to named functional utility with modifier
       ['[color:var(--color-red-500)]/25', 'text-red-500/25'],
 
@@ -348,6 +343,107 @@ describe.each([['default'], ['with-variant'], ['important'], ['prefix']])('%s',
       ['[grid-column:2]', 'col-2'],
       ['[grid-column:1234]', 'col-1234'],
 
+      // Complex arbitrary property to arbitrary value
+      [
+        '[grid-template-columns:repeat(2,minmax(100px,1fr))]',
+        'grid-cols-[repeat(2,minmax(100px,1fr))]',
+      ],
+      // Complex arbitrary property to bare value
+      ['[grid-template-columns:repeat(2,minmax(0,1fr))]', 'grid-cols-2'],
+    ])(testName, { timeout }, async (candidate, expected) => {
+      let input = css`
+        @import 'tailwindcss';
+
+        @theme {
+          --*: initial;
+          --spacing: 0.25rem;
+          --color-red-500: red;
+          --color-white: #fff;
+
+          /* Equivalent of blue-500/50 */
+          --color-primary: color-mix(in oklab, oklch(62.3% 0.214 259.815) 50%, transparent);
+        }
+      `
+
+      await expectCanonicalization(input, candidate, expected)
+    })
+  })
+
+  describe('arbitrary values', () => {
+    test.each([
+      // Convert to `var(…)` if we can resolve the path
+      ['bg-[theme(colors.red.500)]', 'bg-red-500'], // Arbitrary value
+      ['bg-[size:theme(spacing.4)]', 'bg-size-[--spacing(4)]'], // Arbitrary value + data type hint
+
+      // Pretty print CSS functions preceded by an operator to prevent consecutive
+      // operator characters.
+      ['w-[calc(100dvh-theme(spacing.2))]', 'w-[calc(100dvh-(--spacing(2)))]'],
+      ['w-[calc(100dvh+theme(spacing.2))]', 'w-[calc(100dvh+(--spacing(2)))]'],
+      ['w-[calc(100dvh/theme(spacing.2))]', 'w-[calc(100dvh/(--spacing(2)))]'],
+      ['w-[calc(100dvh*theme(spacing.2))]', 'w-[calc(100dvh*(--spacing(2)))]'],
+
+      // Convert to `var(…)` if we can resolve the path, but keep fallback values
+      ['bg-[theme(colors.red.500,red)]', 'bg-(--color-red-500,red)'],
+
+      // Keep `theme(…)` if we can't resolve the path
+      ['bg-[theme(colors.foo.1000)]', 'bg-[theme(colors.foo.1000)]'],
+
+      // Keep `theme(…)` if we can't resolve the path, but still try to convert the
+      // fallback value.
+      ['bg-[theme(colors.foo.1000,theme(colors.red.500))]', 'bg-red-500'],
+
+      // Use `theme(…)` (deeply nested) inside of a `calc(…)` function
+      ['text-[calc(theme(fontSize.xs)*2)]', 'text-[calc(var(--text-xs)*2)]'],
+
+      // Arbitrary value
+      ['bg-[theme(colors.red.500/75%)]', 'bg-red-500/75'],
+      ['bg-[theme(colors.red.500/12.34%)]', 'bg-red-500/[12.34%]'],
+
+      // Arbitrary value with different casing
+      ['bg-[#fff]', 'bg-white'],
+      ['bg-[#FFF]', 'bg-white'],
+
+      // Values that don't contain only `theme(…)` calls should not be converted to
+      // use a modifier since the color is not the whole value.
+      [
+        'shadow-[shadow:inset_0px_1px_theme(colors.white/15%)]',
+        'shadow-[inset_0px_1px_--theme(--color-white/15%)]',
+      ],
+
+      // Arbitrary value, where the candidate already contains a modifier
+      // This should still migrate the `theme(…)` syntax to the modern syntax.
+      ['bg-[theme(colors.red.500/50%)]/50', 'bg-[--theme(--color-red-500/50%)]/50'],
+
+      // Variants, we can't use `var(…)` especially inside of `@media(…)`. But
+      // since the value matches the `lg` breakpoint exactly, we can migrate to
+      // the `max-lg` variant.
+      ['max-[theme(screens.lg)]:flex', 'max-lg:flex'],
+      ['min-[theme(screens.lg)]:flex', 'lg:flex'], // We could also map to `min-lg:flex`
+      // There are no variables for `--spacing` multiples, so we can't convert this
+      ['max-[theme(spacing.4)]:flex', 'max-[theme(spacing.4)]:flex'],
+
+      // This test in itself doesn't make much sense. But we need to make sure
+      // that this doesn't end up as the modifier in the candidate itself.
+      ['max-[theme(spacing.4/50)]:flex', 'max-[theme(spacing.4/50)]:flex'],
+
+      // `theme(…)` calls in another CSS function is replaced correctly.
+      // Additionally we remove unnecessary whitespace.
+      ['grid-cols-[min(50%_,_theme(spacing.80))_auto]', 'grid-cols-[min(50%,--spacing(80))_auto]'],
+
+      // `calc(var(--spacing)*…)` to `--spacing(…)`
+      ['pt-[min(20%,calc(var(--spacing)*8))]', 'pt-[min(20%,--spacing(8))]'],
+      ['pt-[min(20%,calc(var(--spacing)*var(--other)))]', 'pt-[min(20%,--spacing(var(--other)))]'],
+      ['pt-[calc(var(--spacing)*8)]', 'pt-8'],
+      ['pt-[calc(var(--spacing)*var(--other))]', 'pt-[--spacing(var(--other))]'],
+
+      // Renamed theme keys
+      ['max-w-[theme(screens.md)]', 'max-w-(--breakpoint-md)'],
+      ['w-[theme(maxWidth.md)]', 'w-md'],
+
+      // Arbitrary property to static utility
+      // Map number to keyword-like value
+      ['leading-[1]', 'leading-none'],
+
       // Arbitrary value to bare value
       ['border-[2px]', 'border-2'],
       ['border-[1234px]', 'border-1234'],
@@ -362,37 +458,47 @@ describe.each([['default'], ['with-variant'], ['important'], ['prefix']])('%s',
       // Arbitrary value with spacing mul
       ['w-[64rem]', 'w-256'],
 
-      // Complex arbitrary property to arbitrary value
-      [
-        '[grid-template-columns:repeat(2,minmax(100px,1fr))]',
-        'grid-cols-[repeat(2,minmax(100px,1fr))]',
-      ],
-      // Complex arbitrary property to bare value
-      ['[grid-template-columns:repeat(2,minmax(0,1fr))]', 'grid-cols-2'],
-
       // Arbitrary value to bare value with percentage
       ['from-[25%]', 'from-25%'],
 
       // Arbitrary percentage value must be a whole number. Should not migrate to
       // a bare value.
       ['from-[2.5%]', 'from-[2.5%]'],
+
+      // Negative arbitrary values can be simplified
+      // 1. Try to move the sign _inside_ the arbitrary value
+      // 2. Try to move the sign _out_ of the arbitrary value
+      ['-mt-[12rem]', '-mt-48'], // Arbitrary value → bare value
+      ['-mt-[-12rem]', 'mt-48'], // Double negation
+      ['-mt-[12.34rem]', 'mt-[-12.34rem]'], // Move `-` inside
+      ['-mt-[-12.34rem]', 'mt-[12.34rem]'], // Move `-` inside, double negation
+      ['-mt-[12.34px]', 'mt-[-12.34px]'],
+      ['-mt-[-12.34px]', 'mt-[12.34px]'],
+      ['-mt-[492px]', '-mt-123'], // Moving inside, allows us to migrate to a bare value
+      ['-mt-[calc(-1*492px)]', 'mt-123'], // Double negation and constant folding into bare value
+      ['-mt-[-492px]', 'mt-123'],
+      ['-mt-[calc(-1*-492px)]', '-mt-123'], // Constant folding with calc expressions
+      ['-mt-(--my-var)', '-mt-(--my-var)'], // Keep as-is
+      ['-mt-[var(--my-var)]', '-mt-(--my-var)'], // Keep as-is, but convert to shorthand
+      ['mt-[calc(var(--my-var)*-1)]', '-mt-(--my-var)'], // Move `-` out
+      ['mt-[calc(-1*var(--my-var))]', '-mt-(--my-var)'], // Move `-` out
+      ['-mt-[calc(var(--my-var)*-1)]', 'mt-(--my-var)'], // Move `-` out
+      ['-mt-[calc(-1*var(--my-var))]', 'mt-(--my-var)'], // Move `-` out
+      ['mt-[calc(-1*calc(-1*var(--my-var)))]', 'mt-(--my-var)'], // Move `-` out
+      ['-mt-[calc(-1*calc(-1*var(--my-var)))]', '-mt-(--my-var)'], // Move `-` out
     ])(testName, { timeout }, async (candidate, expected) => {
       let input = css`
         @import 'tailwindcss';
-
         @theme {
-          --*: initial;
-          --spacing: 0.25rem;
-          --color-red-500: red;
-
-          /* Equivalent of blue-500/50 */
-          --color-primary: color-mix(in oklab, oklch(62.3% 0.214 259.815) 50%, transparent);
+          --color-white: #fff;
         }
       `
 
       await expectCanonicalization(input, candidate, expected)
     })
+  })
 
+  describe('arbitrary utilities', () => {
     test('migrate with custom static utility `@utility custom {…}`', { timeout }, async () => {
       let candidate = '[--key:value]'
       let expected = 'custom'
@@ -435,16 +541,16 @@ describe.each([['default'], ['with-variant'], ['important'], ['prefix']])('%s',
       'migrate with custom functional utility `@utility custom-* {…}` that supports bare values',
       { timeout },
       async () => {
-        let candidate = '[tab-size:4]'
-        let expected = 'tab-4'
+        let candidate = '[--resolved-value:4]'
+        let expected = 'example-4'
 
         let input = css`
           @import 'tailwindcss';
           @theme {
             --*: initial;
           }
-          @utility tab-* {
-            tab-size: --value(integer);
+          @utility example-* {
+            --resolved-value: --value(integer);
           }
         `
 
@@ -453,12 +559,12 @@ describe.each([['default'], ['with-variant'], ['important'], ['prefix']])('%s',
     )
 
     test.each([
-      ['[tab-size:0]', 'tab-0'],
-      ['[tab-size:4]', 'tab-4'],
-      ['[tab-size:8]', 'tab-github'],
-      ['tab-[0]', 'tab-0'],
-      ['tab-[4]', 'tab-4'],
-      ['tab-[8]', 'tab-github'],
+      ['[--resolved-value:0]', 'example-0'],
+      ['[--resolved-value:4]', 'example-4'],
+      ['[--resolved-value:8]', 'example-a'],
+      ['example-[0]', 'example-0'],
+      ['example-[4]', 'example-4'],
+      ['example-[8]', 'example-a'],
     ])(
       'migrate custom @utility from arbitrary values to bare values and named values (based on theme)',
       async (candidate, expected) => {
@@ -466,11 +572,11 @@ describe.each([['default'], ['with-variant'], ['important'], ['prefix']])('%s',
           @import 'tailwindcss';
           @theme {
             --*: initial;
-            --tab-size-github: 8;
+            --example-a: 8;
           }
 
-          @utility tab-* {
-            tab-size: --value(--tab-size, integer, [integer]);
+          @utility example-* {
+            --resolved-value: --value(--example, integer, [integer]);
           }
         `
 
@@ -591,11 +697,11 @@ describe.each([['default'], ['with-variant'], ['important'], ['prefix']])('%s',
         --*: initial;
         --spacing: 0.25rem;
         --aspect-video: 16 / 9;
-        --tab-size-github: 8;
+        --example-a: 8;
       }
 
-      @utility tab-* {
-        tab-size: --value(--tab-size, integer);
+      @utility example-* {
+        --resolved-value: --value(--example, integer);
       }
     `
 
@@ -604,82 +710,18 @@ describe.each([['default'], ['with-variant'], ['important'], ['prefix']])('%s',
       ['aspect-16/9', 'aspect-video'],
 
       // Custom utility with bare value integer
-      ['tab-8', 'tab-github'],
+      ['example-8', 'example-a'],
     ])(testName, { timeout }, async (candidate, expected) => {
       await expectCanonicalization(input, candidate, expected)
     })
   })
 
-  describe('deprecated utilities', () => {
-    test('`order-none` → `order-0`', { timeout }, async () => {
-      let candidate = 'order-none'
-      let expected = 'order-0'
-
-      let input = css`
-        @import 'tailwindcss';
-      `
-
-      await expectCanonicalization(input, candidate, expected)
-    })
-
-    test('`order-none` → `order-none` with custom implementation', { timeout }, async () => {
-      let candidate = 'order-none'
-      let expected = 'order-none'
-
-      let input = css`
-        @import 'tailwindcss';
-
-        @utility order-none {
-          order: none; /* imagine this exists */
-        }
-      `
-
-      await expectCanonicalization(input, candidate, expected)
-    })
-
-    test('`break-words` → `wrap-break-word`', { timeout }, async () => {
-      let candidate = 'break-words'
-      let expected = 'wrap-break-word'
-
-      let input = css`
-        @import 'tailwindcss';
-      `
-
-      await expectCanonicalization(input, candidate, expected)
-    })
-
-    test('`[overflow-wrap:break-word]` → `wrap-break-word`', { timeout }, async () => {
-      let candidate = '[overflow-wrap:break-word]'
-      let expected = 'wrap-break-word'
-
-      let input = css`
-        @import 'tailwindcss';
-      `
-
-      await expectCanonicalization(input, candidate, expected)
-    })
-
-    test('`break-words` → `break-words` with custom implementation', { timeout }, async () => {
-      let candidate = 'break-words'
-      let expected = 'break-words'
-
-      let input = css`
-        @import 'tailwindcss';
-
-        @utility break-words {
-          break: words; /* imagine this exists */
-        }
-      `
-
-      await expectCanonicalization(input, candidate, expected)
-    })
-  })
-
   describe('arbitrary variants', () => {
     let input = css`
       @import 'tailwindcss';
       @theme {
         --*: initial;
+        --breakpoint-lg: 64rem;
       }
     `
 
@@ -696,6 +738,11 @@ describe.each([['default'], ['with-variant'], ['important'], ['prefix']])('%s',
       ['[@media(scripting:_none)]:flex', 'noscript:flex'],
       ['[@media_(scripting:_none)]:flex', 'noscript:flex'],
 
+      // Arbitrary variants with media queries cannot use `var(…)`, but if an
+      // equivalent variant exists we can use that one instead.
+      ['[@media(width>=theme(screens.lg))]:flex', 'lg:flex'], // `min-lg:flex` would also be valid
+      ['[@media(width<theme(screens.lg))]:flex', 'max-lg:flex'],
+
       // With compound variants
       ['has-[&:focus]:flex', 'has-focus:flex'],
       ['not-[&:focus]:flex', 'not-focus:flex'],
@@ -844,6 +891,15 @@ describe.each([['default'], ['with-variant'], ['important'], ['prefix']])('%s',
       ['[margin:-0]', 'm-0'],
       ['[margin:0px]', 'm-0'],
 
+      // Limit conversions for big values using the `--spacing` multiplier
+      ['left-[99999px]', 'left-[99999px]'], // This would otherwise result in `left-24999.75`
+      ['left-[-99999px]', 'left-[-99999px]'], // This would otherwise result in `-left-24999.75`
+      ['left-[96rem]', 'left-384'], // Within the limit
+      ['left-[-96rem]', '-left-384'], // Within the limit
+      ['left-[calc(96rem+1px)]', 'left-[calc(96rem+1px)]'], // Out of the positive limit
+      ['left-[calc(-96rem-1px)]', 'left-[calc(-96rem-1px)]'], // Out of the negative limit
+      ['z-[9999999]', 'z-9999999'], // `--spacing` multiplier is not used
+
       // Not a length-unit, can't safely constant fold
       ['[margin:0%]', 'm-[0%]'],
 
@@ -903,6 +959,67 @@ describe.each([['default'], ['with-variant'], ['important'], ['prefix']])('%s',
     })
   })
 
+  // https://github.com/tailwindlabs/tailwindcss/issues/20365
+  describe('media query and container query variants', () => {
+    test.each([
+      // Breakpoints (`--breakpoint-lg: 64rem`, `--breakpoint-md: 48rem`)
+      ['min-[64rem]:flex', 'lg:flex'],
+      ['max-[64rem]:flex', 'max-lg:flex'],
+      ['min-[48rem]:flex', 'md:flex'],
+      ['max-[48rem]:flex', 'max-md:flex'],
+
+      // With the `rem` option set, equivalent `px` values should also be
+      // canonicalized to the breakpoint variants.
+      ['min-[1024px]:flex', 'lg:flex'],
+      ['max-[1024px]:flex', 'max-lg:flex'],
+
+      // Container queries (`--container-md: 28rem`)
+      ['@min-[28rem]:flex', '@md:flex'],
+      ['@max-[28rem]:flex', '@max-md:flex'],
+      ['@min-[448px]:flex', '@md:flex'],
+      ['@max-[448px]:flex', '@max-md:flex'],
+
+      // Values that don't map to a known breakpoint or container size should
+      // stay as-is.
+      ['min-[123px]:flex', 'min-[123px]:flex'],
+      ['max-[123px]:flex', 'max-[123px]:flex'],
+      ['@min-[123px]:flex', '@min-[123px]:flex'],
+      ['@max-[123px]:flex', '@max-[123px]:flex'],
+
+      // Named variants that produce the same CSS should be kept as-is
+      ['min-lg:flex', 'min-lg:flex'],
+      ['@min-md:flex', '@min-md:flex'],
+    ])(testName, { timeout }, async (candidate, expected) => {
+      let input = css`
+        @import 'tailwindcss';
+      `
+
+      await expectCanonicalization(input, candidate, expected)
+    })
+
+    test.each([
+      // Without the `rem` option, `px` values cannot be safely converted to
+      // `rem` based breakpoints.
+      ['min-[1024px]:flex', 'min-[1024px]:flex'],
+      ['@min-[448px]:flex', '@min-[448px]:flex'],
+
+      // Same unit still works without the `rem` option
+      ['min-[64rem]:flex', 'lg:flex'],
+      ['max-[64rem]:flex', 'max-lg:flex'],
+      ['@min-[28rem]:flex', '@md:flex'],
+      ['@max-[28rem]:flex', '@max-md:flex'],
+    ])(`${testName} (no rem option)`, { timeout }, async (candidate, expected) => {
+      let input = css`
+        @import 'tailwindcss';
+      `
+
+      await expectCanonicalization(input, candidate, expected, {
+        collapse: true,
+        logicalToPhysical: true,
+      })
+    })
+  })
+
   describe('modernize arbitrary variants', () => {
     test.each([
       // Arbitrary variants
@@ -1002,6 +1119,11 @@ describe.each([['default'], ['with-variant'], ['important'], ['prefix']])('%s',
       ['has-[[aria-visible]]:flex', 'has-aria-[visible]:flex'],
 
       ['has-[&:not(:nth-child(even))]:flex', 'has-odd:flex'],
+
+      // Arbitrary variant to compound + arbitrary variants
+      ['[&:has([role=checkbox])]:flex', 'has-[[role=checkbox]]:flex'],
+      ['[&:has([aria-visible="true"])]:flex', 'has-aria-visible:flex'],
+      ['[&:has([data-slot=description])]:flex', 'has-data-[slot=description]:flex'],
     ])(testName, { timeout }, async (candidate, expected) => {
       let input = css`
         @import 'tailwindcss';
@@ -1044,9 +1166,21 @@ describe.each([['default'], ['with-variant'], ['important'], ['prefix']])('%s',
     test.each([
       // 4 to 1
       ['mt-1 mr-1 mb-1 ml-1', 'm-1'],
+      ['border-t-123 border-r-123 border-b-123 border-l-123', 'border-123'],
+      ['border-t-1 border-r-1 border-b-1 border-l-1', 'border'], // `border` is shorter than `border-1`
+      ['border-t-red-500 border-r-red-500 border-b-red-500 border-l-red-500', 'border-red-500'],
+      ['scroll-mt-1 scroll-mr-1 scroll-mb-1 scroll-ml-1', 'scroll-m-1'],
+      ['scroll-pt-1 scroll-pr-1 scroll-pb-1 scroll-pl-1', 'scroll-p-1'],
 
       // 2 to 1
       ['mt-1 mb-1', 'my-1'],
+      ['border-t-123 border-b-123', 'border-y-123'],
+      ['border-t-1 border-b-1', 'border-y'], // `border-y` is shorter than `border-y-1`
+      ['border-t-red-500 border-b-red-500', 'border-y-red-500'],
+      ['scroll-mt-1 scroll-mb-1', 'scroll-my-1'],
+      ['scroll-pt-1 scroll-pb-1', 'scroll-py-1'],
+      ['overflow-x-hidden overflow-y-hidden', 'overflow-hidden'],
+      ['overscroll-x-contain overscroll-y-contain', 'overscroll-contain'],
 
       // Different order as above
       ['mb-1 mt-1', 'my-1'],
@@ -1083,7 +1217,7 @@ describe.each([['default'], ['with-variant'], ['important'], ['prefix']])('%s',
       let input = css`
         @import 'tailwindcss';
       `
-      await expectCombinedCanonicalization(input, candidates, expected)
+      await expectCanonicalization(input, candidates, expected)
     })
   })
 
@@ -1117,9 +1251,91 @@ describe.each([['default'], ['with-variant'], ['important'], ['prefix']])('%s',
       let input = css`
         @import 'tailwindcss';
       `
-      await expectCombinedCanonicalization(input, candidates.trim(), expected)
+      await expectCanonicalization(input, candidates.trim(), expected)
     })
   })
+
+  // https://github.com/tailwindlabs/tailwindcss-intellisense/issues/1558
+  test.each([
+    ['tracking-[-0.05em]', 'tracking-tighter'],
+    ['tracking-[-0.025em]', 'tracking-tight'],
+    ['tracking-[0em]', 'tracking-normal'],
+    ['tracking-[0.025em]', 'tracking-wide'],
+    ['tracking-[0.05em]', 'tracking-wider'],
+    ['tracking-[0.1em]', 'tracking-widest'],
+
+    // Negative values that don't make sense
+    // See: https://tailwindcss.com/docs/letter-spacing#using-negative-values
+    ['-tracking-tighter', 'tracking-wider'],
+    ['-tracking-tight', 'tracking-wide'],
+    ['-tracking-normal', 'tracking-normal'],
+    ['-tracking-wide', 'tracking-tight'],
+    ['-tracking-wider', 'tracking-tighter'],
+  ])(testName, { timeout }, async (candidate, expected) => {
+    await expectCanonicalization(
+      css`
+        @import 'tailwindcss';
+        @theme {
+          --tracking-tighter: -0.05em;
+          --tracking-tight: -0.025em;
+          --tracking-normal: 0em;
+          --tracking-wide: 0.025em;
+          --tracking-wider: 0.05em;
+          --tracking-widest: 0.1em;
+        }
+      `,
+      candidate,
+      expected,
+    )
+  })
+
+  test.each([
+    // Keep whitespace characters that are significant
+    ['[&:has(~_*_*:checked)]:flex', '[&:has(~_*_*:checked)]:flex'],
+    [
+      'shadow-[inset_0px_1px_--theme(--color-white/15%)]',
+      'shadow-[inset_0px_1px_--theme(--color-white/15%)]',
+    ],
+
+    // Improve readability when whitespace was used for readability
+    ['w-[calc(100%_-_calc(var(--spacing)*60))]', 'w-[calc(100%-(--spacing(60)))]'],
+    ['w-[calc(100%_-_--spacing(60))]', 'w-[calc(100%-(--spacing(60)))]'],
+
+    // No need to wrap in `(…)` after a `,`
+    ['m-[min(100%,_--spacing(6))]', 'm-[min(100%,--spacing(6))]'],
+    ['m-[min(100%_,_--spacing(6))]', 'm-[min(100%,--spacing(6))]'],
+    ['m-[min(100%,--spacing(6))]', 'm-[min(100%,--spacing(6))]'],
+  ])(testName, async (candidate, expected) => {
+    let input = css`
+      @import 'tailwindcss';
+    `
+
+    await expectCanonicalization(input, candidate, expected)
+  })
+
+  // https://github.com/tailwindlabs/tailwindcss-intellisense/issues/1573
+  test.each([
+    ['-mt-[0.04in]', 'mt-[-0.04in]'],
+    ['mt-[-0.04in]', 'mt-[-0.04in]'],
+    ['-mt-[-0.04in]', 'mt-[0.04in]'],
+  ])(testName, { timeout }, async (candidate, expected) => {
+    let input = css`
+      @import 'tailwindcss';
+    `
+
+    await expectCanonicalization(input, candidate, expected)
+  })
+
+  // https://github.com/tailwindlabs/tailwindcss-intellisense/issues/1591
+  test.each([
+    ['w-[calc(100%/3.5)]', 'w-[calc(100%/3.5)]'], // Not w-[28.571428571428573%]
+  ])(testName, { timeout }, async (candidate, expected) => {
+    let input = css`
+      @import 'tailwindcss';
+    `
+
+    await expectCanonicalization(input, candidate, expected)
+  })
 })
 
 describe('theme to var', () => {
@@ -1195,53 +1411,172 @@ describe('options', () => {
   })
 })
 
-// https://github.com/schoero/eslint-plugin-better-tailwindcss/issues/321
-test('a subset of classes should be canonicalizable', { timeout }, async () => {
-  let designSystem = await designSystems.get(__dirname).get(css`
-    @import 'tailwindcss';
-  `)
+describe('regressions', () => {
+  // https://github.com/schoero/eslint-plugin-better-tailwindcss/issues/321
+  {
+    test('a subset of classes should be canonicalizable', { timeout }, async () => {
+      let designSystem = await designSystems.get(__dirname).get(css`
+        @import 'tailwindcss';
+      `)
 
-  let options: CanonicalizeOptions = {
-    collapse: true,
-    logicalToPhysical: true,
-    rem: 16,
+      let options: CanonicalizeOptions = {
+        collapse: true,
+        logicalToPhysical: true,
+        rem: 16,
+      }
+
+      expect(
+        designSystem.canonicalizeCandidates(['underline', 'h-4', 'w-4', 'text-sm'], options),
+      ).toEqual(['underline', 'text-sm', 'size-4'])
+    })
+
+    test('collapse canonicalization is not affected by previous calls', { timeout }, async () => {
+      let designSystem = await designSystems.get(__dirname).get(css`
+        @import 'tailwindcss';
+      `)
+
+      let options: CanonicalizeOptions = {
+        collapse: true,
+        logicalToPhysical: true,
+        rem: 16,
+      }
+
+      let target = ['underline', 'h-4', 'w-4']
+
+      expect(designSystem.canonicalizeCandidates(target, options)).toEqual(['underline', 'size-4'])
+
+      designSystem.canonicalizeCandidates(['mb-4', 'text-sm'], options)
+      designSystem.canonicalizeCandidates(['underline', 'mb-4'], options)
+
+      expect(designSystem.canonicalizeCandidates(target, options)).toEqual(['underline', 'size-4'])
+      expect(designSystem.canonicalizeCandidates(target.concat('text-sm'), options)).toEqual([
+        'underline',
+        'text-sm',
+        'size-4',
+      ])
+    })
   }
 
-  expect(
-    designSystem.canonicalizeCandidates(['underline', 'h-4', 'w-4', 'text-sm'], options),
-  ).toEqual(['underline', 'text-sm', 'size-4'])
-})
+  // https://github.com/tailwindlabs/tailwindcss/pull/19727
+  test(
+    'collapse does not crash when utilities with no standard properties are present',
+    { timeout },
+    async () => {
+      let designSystem = await designSystems.get(__dirname).get(css`
+        @import 'tailwindcss';
+      `)
 
-test('collapse canonicalization is not affected by previous calls', { timeout }, async () => {
-  let designSystem = await designSystems.get(__dirname).get(css`
-    @import 'tailwindcss';
-  `)
+      let options: CanonicalizeOptions = {
+        collapse: true,
+        logicalToPhysical: true,
+        rem: 16,
+      }
 
-  let options: CanonicalizeOptions = {
-    collapse: true,
-    logicalToPhysical: true,
-    rem: 16,
-  }
+      // Shadow utilities use CSS custom properties and @property rules but may
+      // produce empty property maps in the collapse algorithm. This should not
+      // crash with "Cannot read properties of null" or "X is not iterable".
+      expect(() =>
+        designSystem.canonicalizeCandidates(['shadow-sm', 'border'], options),
+      ).not.toThrow()
 
-  let target = ['underline', 'h-4', 'w-4']
+      expect(() => designSystem.canonicalizeCandidates(['shadow-md', 'p-4'], options)).not.toThrow()
 
-  expect(designSystem.canonicalizeCandidates(target, options)).toEqual(['underline', 'size-4'])
+      expect(() =>
+        designSystem.canonicalizeCandidates(['shadow-sm', 'shadow-md'], options),
+      ).not.toThrow()
 
-  designSystem.canonicalizeCandidates(['mb-4', 'text-sm'], options)
-  designSystem.canonicalizeCandidates(['underline', 'mb-4'], options)
+      // Verify the candidates are returned (not collapsed, since shadows can't
+      // meaningfully collapse with unrelated utilities)
+      expect(designSystem.canonicalizeCandidates(['shadow-sm', 'border'], options)).toEqual(
+        expect.arrayContaining(['shadow-sm', 'border']),
+      )
 
-  expect(designSystem.canonicalizeCandidates(target, options)).toEqual(['underline', 'size-4'])
-  expect(designSystem.canonicalizeCandidates(target.concat('text-sm'), options)).toEqual([
-    'underline',
-    'text-sm',
-    'size-4',
-  ])
-})
+      expect(designSystem.canonicalizeCandidates(['shadow-sm', 'shadow-md'], options)).toEqual(
+        expect.arrayContaining(['shadow-sm', 'shadow-md']),
+      )
+    },
+  )
 
-test(
-  'collapse does not crash when utilities with no standard properties are present',
-  { timeout },
-  async () => {
+  // https://github.com/tailwindlabs/tailwindcss/issues/19835
+  test.each([
+    // Arbitrary values should be collapsed to another arbitrary value
+    [
+      ['px-[1.2rem]', 'py-[1.2rem]', 'text-left'],
+      ['text-left', 'p-[1.2rem]'],
+    ],
+
+    // Arbitrary values could also be collapsed into a bare value
+    [
+      ['px-[30.75rem]', 'py-[30.75rem]', 'text-left'],
+      ['text-left', 'p-123'],
+    ],
+  ])(
+    'collapse canonicalization works for arbitrary values',
+    { timeout },
+    async (candidates, expected) => {
+      let designSystem = await designSystems.get(__dirname).get(css`
+        @import 'tailwindcss';
+      `)
+
+      let options: CanonicalizeOptions = {
+        collapse: true,
+        logicalToPhysical: true,
+        rem: 16,
+      }
+
+      expect(designSystem.canonicalizeCandidates(candidates, options)).toEqual(expected)
+    },
+  )
+
+  // https://github.com/tailwindlabs/tailwindcss/issues/20051
+  test(
+    'does not crash when plugin matchComponents rejects speculative values during collapse',
+    { timeout },
+    async () => {
+      let designSystem = await __unstable__loadDesignSystem(
+        css`
+          @import 'tailwindcss';
+          @plugin "./plugin.js";
+        `,
+        {
+          async loadStylesheet(_, base) {
+            return {
+              base,
+              path: '',
+              content: '@tailwind utilities;',
+            }
+          },
+          async loadModule() {
+            return {
+              base: '',
+              path: '',
+              module: plugin(({ matchComponents }) => {
+                matchComponents(
+                  {
+                    myicon: () => {
+                      throw new Error('Mimic as-if a custom plugin failed for some reason')
+                    },
+                  },
+                  { values: { icon: __filename } },
+                )
+              }),
+            }
+          },
+        },
+      )
+
+      expect(
+        designSystem.canonicalizeCandidates(['border-[1.5px]', 'flex'], {
+          collapse: true,
+          logicalToPhysical: true,
+          rem: 16,
+        }),
+      ).toEqual(expect.arrayContaining(['border-[1.5px]', 'flex']))
+    },
+  )
+
+  // https://github.com/tailwindlabs/tailwindcss-intellisense/issues/1579
+  test('does not suggest invalid alternative when canonicalizing calc expressions', async () => {
     let designSystem = await designSystems.get(__dirname).get(css`
       @import 'tailwindcss';
     `)
@@ -1252,27 +1587,77 @@ test(
       rem: 16,
     }
 
-    // Shadow utilities use CSS custom properties and @property rules but may
-    // produce empty property maps in the collapse algorithm. This should not
-    // crash with "Cannot read properties of null" or "X is not iterable".
-    expect(() =>
-      designSystem.canonicalizeCandidates(['shadow-sm', 'border'], options),
-    ).not.toThrow()
+    expect(designSystem.canonicalizeCandidates(['px-[calc(1rem+0px)]'], options)).toEqual(['px-4'])
+  })
 
-    expect(() => designSystem.canonicalizeCandidates(['shadow-md', 'p-4'], options)).not.toThrow()
+  // https://github.com/tailwindlabs/tailwindcss/issues/20295
+  test('canonicalizations work when casing of arbitrary values is different', async () => {
+    let designSystem = await designSystems.get(__dirname).get(css`
+      @import 'tailwindcss';
+      @theme {
+        --color-brand-purple: #3f3cbb;
+      }
+    `)
 
-    expect(() =>
-      designSystem.canonicalizeCandidates(['shadow-sm', 'shadow-md'], options),
-    ).not.toThrow()
+    let options: CanonicalizeOptions = {
+      collapse: true,
+      logicalToPhysical: true,
+      rem: 16,
+    }
 
-    // Verify the candidates are returned (not collapsed, since shadows can't
-    // meaningfully collapse with unrelated utilities)
-    expect(designSystem.canonicalizeCandidates(['shadow-sm', 'border'], options)).toEqual(
-      expect.arrayContaining(['shadow-sm', 'border']),
+    expect(designSystem.canonicalizeCandidates(['bg-[#3F3cbb]'], options)).toEqual([
+      'bg-brand-purple',
+    ])
+    expect(designSystem.canonicalizeCandidates(['bg-[#3F3Cbb]'], options)).toEqual([
+      'bg-brand-purple',
+    ])
+    expect(designSystem.canonicalizeCandidates(['bg-[#3F3CBB]'], options)).toEqual([
+      'bg-brand-purple',
+    ])
+  })
+
+  // https://github.com/tailwindlabs/tailwindcss/issues/20365
+  test('canonicalizes min/max media query and container query variants', async () => {
+    let designSystem = await __unstable__loadDesignSystem(
+      css`
+        @tailwind utilities;
+        @theme {
+          --breakpoint-lg: 64rem;
+          --container-lg: 32rem;
+          --spacing: 0.25rem;
+        }
+      `,
+      { base: __dirname },
     )
 
-    expect(designSystem.canonicalizeCandidates(['shadow-sm', 'shadow-md'], options)).toEqual(
-      expect.arrayContaining(['shadow-sm', 'shadow-md']),
+    expect(designSystem.canonicalizeCandidates(['min-[64rem]:flex'])).toEqual(['lg:flex'])
+    expect(designSystem.canonicalizeCandidates(['max-[64rem]:flex'])).toEqual(['max-lg:flex'])
+    expect(designSystem.canonicalizeCandidates(['@min-[32rem]:flex'])).toEqual(['@lg:flex'])
+    expect(designSystem.canonicalizeCandidates(['@max-[32rem]:flex'])).toEqual(['@max-lg:flex'])
+    expect(designSystem.canonicalizeCandidates(['min-[1024px]:flex'], { rem: 16 })).toEqual([
+      'lg:flex',
+    ])
+  })
+
+  // https://github.com/tailwindlabs/tailwindcss-intellisense/issues/1610
+  test('does not merge utilities whose theme variables resolve to CSS-wide keywords', async () => {
+    let designSystem = await __unstable__loadDesignSystem(
+      css`
+        @tailwind utilities;
+        @theme {
+          --foreground: unset;
+          --default: unset;
+        }
+        @theme inline {
+          --color-foreground: var(--foreground);
+          --color-default-soft-hover: color-mix(in oklab, var(--default) 60%, transparent);
+        }
+      `,
+      { base: __dirname },
     )
-  },
-)
+
+    expect(
+      designSystem.canonicalizeCandidates(['text-foreground/60', 'text-default-soft-hover']),
+    ).toEqual(['text-foreground/60', 'text-default-soft-hover'])
+  })
+})
diff --git a/packages/tailwindcss/src/canonicalize-candidates.ts b/packages/tailwindcss/src/canonicalize-candidates.ts
index 566b4a3f7..d1dfc09de 100644
--- a/packages/tailwindcss/src/canonicalize-candidates.ts
+++ b/packages/tailwindcss/src/canonicalize-candidates.ts
@@ -11,8 +11,9 @@ import {
   type NamedUtilityValue,
   type Variant,
 } from './candidate'
+import { canonicalizeCalcExpressionsAst } from './canonicalize-calc-expressions'
 import { keyPathToCssProperty } from './compat/apply-config-to-theme'
-import { constantFoldDeclaration } from './constant-fold-declaration'
+import { constantFoldDeclaration, constantFoldDeclarationAst } from './constant-fold-declaration'
 import type { DesignSystem as BaseDesignSystem } from './design-system'
 import { CompileAstFlags } from './design-system'
 import { expandDeclaration } from './expand-declaration'
@@ -71,11 +72,14 @@ interface InternalCanonicalizeOptions {
   signatureOptions: SignatureOptions
 }
 
+type RemValue = number | null
+
 interface DesignSystem extends BaseDesignSystem {
   storage: {
-    [SIGNATURE_OPTIONS_KEY]: DefaultMap<
-      number | null, // Rem value
-      DefaultMap<SignatureFeatures, SignatureOptions>
+    [SIGNATURE_OPTIONS_KEY]: DefaultMap<RemValue, DefaultMap<SignatureFeatures, SignatureOptions>>
+    [COMPARE_CANDIDATES_KEY]: DefaultMap<
+      SignatureOptions,
+      (a: Candidate | string, b: Candidate | string) => boolean
     >
     [INTERNAL_OPTIONS_KEY]: DefaultMap<
       SignatureOptions,
@@ -102,8 +106,8 @@ interface DesignSystem extends BaseDesignSystem {
       DefaultMap<string, DefaultMap<string, Set<string>>>
     >
     [PRE_COMPUTED_UTILITIES_KEY]: DefaultMap<SignatureOptions, DefaultMap<string, string[]>>
-    [VARIANT_SIGNATURE_KEY]: DefaultMap<string, string | symbol>
-    [PRE_COMPUTED_VARIANTS_KEY]: DefaultMap<string, string[]>
+    [VARIANT_SIGNATURE_KEY]: DefaultMap<RemValue, DefaultMap<string, string | symbol>>
+    [PRE_COMPUTED_VARIANTS_KEY]: DefaultMap<RemValue, DefaultMap<string, string[]>>
   }
 }
 
@@ -126,6 +130,7 @@ export function prepareDesignSystemStorage(
   designSystem.storage[PRE_COMPUTED_UTILITIES_KEY] ??= createPreComputedUtilitiesCache(designSystem)
   designSystem.storage[VARIANT_SIGNATURE_KEY] ??= createVariantSignatureCache(designSystem)
   designSystem.storage[PRE_COMPUTED_VARIANTS_KEY] ??= createPreComputedVariantsCache(designSystem)
+  designSystem.storage[COMPARE_CANDIDATES_KEY] ??= createSignatureComparison(designSystem)
 
   return designSystem
 }
@@ -139,6 +144,25 @@ function createSignatureOptionsCache(): DesignSystem['storage'][typeof SIGNATURE
   })
 }
 
+const COMPARE_CANDIDATES_KEY = Symbol()
+function createSignatureComparison(designSystem: DesignSystem) {
+  return new DefaultMap((options: SignatureOptions) => {
+    let signatures = designSystem.storage[UTILITY_SIGNATURE_KEY].get(options)
+
+    return function hasSameSignature(a: Candidate | string, b: Candidate | string): boolean {
+      let aCandidateString = typeof a === 'string' ? a : designSystem.printCandidate(a)
+      let aSignature = signatures.get(aCandidateString)
+      if (typeof aSignature !== 'string') return false
+
+      let bCandidateString = typeof b === 'string' ? b : designSystem.printCandidate(b)
+      let bSignature = signatures.get(bCandidateString)
+      if (typeof bSignature !== 'string') return false
+
+      return aSignature === bSignature
+    }
+  })
+}
+
 export function createSignatureOptions(
   baseDesignSystem: BaseDesignSystem,
   options?: CanonicalizeOptions,
@@ -198,7 +222,6 @@ export function canonicalizeCandidates(
 }
 
 function collapseCandidates(options: InternalCanonicalizeOptions, candidates: string[]): string[] {
-  if (candidates.length <= 1) return candidates
   let designSystem = options.designSystem
 
   // To keep things simple, we group candidates such that we only collapse
@@ -321,10 +344,7 @@ function collapseCandidates(options: InternalCanonicalizeOptions, candidates: st
       if (relevantProperties.size === 0) return result
 
       for (let parsedCandidate of parseCandidate(designSystem, candidate)) {
-        if (
-          parsedCandidate.kind !== 'functional' ||
-          parsedCandidate.value?.kind !== 'named' // Necessary for bare values
-        ) {
+        if (parsedCandidate.kind !== 'functional' || parsedCandidate.value === null) {
           continue
         }
 
@@ -578,6 +598,7 @@ const UTILITY_CANONICALIZATIONS: UtilityCanonicalizationFunction[] = [
   bgGradientToLinear,
   themeToVarUtility,
   calcToSpacingFunction,
+  optimizeArbitraryValueExpressions,
   arbitraryUtilities,
   bareValueUtilities,
   deprecatedUtilities,
@@ -958,10 +979,10 @@ function substituteFunctionsInValue(
         fallbackValues.length > 0 ? handle(path, ValueParser.toCss(fallbackValues)) : handle(path)
       if (replacement === null) return
 
-      if (ctx.parent) {
-        let idx = ctx.parent.nodes.indexOf(node) - 1
+      {
+        let idx = ctx.index - 1
         while (idx !== -1) {
-          let previous = ctx.parent.nodes[idx]
+          let previous = ctx.siblings[idx]
           // Skip the space separator
           if (previous.kind === 'separator' && previous.value.trim() === '') {
             idx -= 1
@@ -1052,6 +1073,35 @@ function printUnprefixedCandidate(designSystem: DesignSystem, candidate: Candida
 // ----
 
 const SPACING_KEY = Symbol()
+
+// We prefer bare values over arbitrary values such as `left-[6px]` →
+// `left-1.5`.
+//
+// There are situations where this doesn't always make sense. E.g.:
+// `left-[99999px]` → `left-24999.75`.
+//
+// We could try and analyze the incoming value and bail out if we detect certain
+// patterns. But a first step would be to limit the bare values for large values
+// and keep them low. The largest rem value we have is for the 2xl breakpoint,
+// which is 96rem, which is 1536px.
+const MAX_BARE_VALUE_IN_PX = 1536
+const MAX_BARE_VALUE_IN_REM = MAX_BARE_VALUE_IN_PX / 16
+
+function isReasonableBareValue(value: number, designSystem: DesignSystem, rem: number | null) {
+  let spacingMultiplier = designSystem.resolveThemeValue('--spacing')
+  if (spacingMultiplier === undefined) return false
+
+  let parsed = dimensions.get(constantFoldDeclaration(spacingMultiplier, rem))
+  if (parsed === null) return false
+
+  let [spacingValue, spacingUnit] = parsed
+  let bareValueInPixels = value * spacingValue
+
+  if (spacingUnit === 'px') return bareValueInPixels <= MAX_BARE_VALUE_IN_PX
+  if (spacingUnit === 'rem') return bareValueInPixels <= MAX_BARE_VALUE_IN_REM
+  return false
+}
+
 function createSpacingCache(
   designSystem: DesignSystem,
   options?: CanonicalizeOptions,
@@ -1096,6 +1146,7 @@ function arbitraryUtilities(candidate: Candidate, options: InternalCanonicalizeO
   let designSystem = options.designSystem
   let utilities = designSystem.storage[PRE_COMPUTED_UTILITIES_KEY].get(options.signatureOptions)
   let signatures = designSystem.storage[UTILITY_SIGNATURE_KEY].get(options.signatureOptions)
+  let hasSameSignature = designSystem.storage[COMPARE_CANDIDATES_KEY].get(options.signatureOptions)
 
   let targetCandidateString = designSystem.printCandidate(candidate)
 
@@ -1105,9 +1156,7 @@ function arbitraryUtilities(candidate: Candidate, options: InternalCanonicalizeO
 
   // Try a few options to find a suitable replacement utility
   for (let replacementCandidate of tryReplacements(targetSignature, candidate)) {
-    let replacementString = designSystem.printCandidate(replacementCandidate)
-    let replacementSignature = signatures.get(replacementString)
-    if (replacementSignature !== targetSignature) {
+    if (!hasSameSignature(candidate, replacementCandidate)) {
       continue
     }
 
@@ -1128,11 +1177,29 @@ function arbitraryUtilities(candidate: Candidate, options: InternalCanonicalizeO
     // Find a corresponding utility for the same signature
     let replacements = utilities.get(targetSignature)
 
-    // Multiple utilities can map to the same signature. Not sure how to migrate
-    // this one so let's just skip it for now.
-    //
-    // TODO: Do we just migrate to the first one?
-    if (replacements.length > 1) return
+    // Multiple utilities can map to the same signature.
+    if (replacements.length > 1) {
+      // Prefer positive values over negative values
+      let maybeReplacement: string | undefined = undefined
+      for (let replacement of replacements) {
+        if (replacement[0] === '-') continue // Skip negative values
+
+        // If multiple non-negative replacements exists then we are unsure
+        // what to do, so let's bail.
+        if (maybeReplacement) return
+
+        // Consider this replacement
+        maybeReplacement = replacement
+      }
+
+      if (maybeReplacement) {
+        for (let replacementCandidate of parseCandidate(designSystem, maybeReplacement)) {
+          yield replacementCandidate
+        }
+      }
+
+      return
+    }
 
     // If we didn't find any replacement utilities, let's try to strip the
     // modifier and find a replacement then. If we do, we can try to re-add the
@@ -1181,7 +1248,10 @@ function arbitraryUtilities(candidate: Candidate, options: InternalCanonicalizeO
       ) {
         let bareValue = designSystem.storage[SPACING_KEY]?.get(value) ?? null
         if (bareValue !== null) {
-          if (isValidSpacingMultiplier(bareValue)) {
+          if (
+            isValidSpacingMultiplier(bareValue) &&
+            isReasonableBareValue(bareValue, designSystem, options.signatureOptions.rem)
+          ) {
             yield Object.assign({}, candidate, {
               value: { kind: 'named', value: bareValue, fraction: null },
             })
@@ -1222,7 +1292,11 @@ function arbitraryUtilities(candidate: Candidate, options: InternalCanonicalizeO
         // Try bare value based on the `--spacing` value. E.g.:
         //
         // - `w-[64rem]` → `w-256`
-        if (spacingMultiplier !== null) {
+        if (
+          spacingMultiplier !== null &&
+          isValidSpacingMultiplier(spacingMultiplier) &&
+          isReasonableBareValue(spacingMultiplier, designSystem, options.signatureOptions.rem)
+        ) {
           for (let replacementCandidate of parseCandidate(
             designSystem,
             `${root}-${spacingMultiplier}`,
@@ -1326,6 +1400,7 @@ function bareValueUtilities(candidate: Candidate, options: InternalCanonicalizeO
   let designSystem = options.designSystem
   let utilities = designSystem.storage[PRE_COMPUTED_UTILITIES_KEY].get(options.signatureOptions)
   let signatures = designSystem.storage[UTILITY_SIGNATURE_KEY].get(options.signatureOptions)
+  let hasSameSignature = designSystem.storage[COMPARE_CANDIDATES_KEY].get(options.signatureOptions)
 
   let targetCandidateString = designSystem.printCandidate(candidate)
 
@@ -1335,9 +1410,7 @@ function bareValueUtilities(candidate: Candidate, options: InternalCanonicalizeO
 
   // Try a few options to find a suitable replacement utility
   for (let replacementCandidate of tryReplacements(targetSignature, candidate)) {
-    let replacementString = designSystem.printCandidate(replacementCandidate)
-    let replacementSignature = signatures.get(replacementString)
-    if (replacementSignature !== targetSignature) {
+    if (!hasSameSignature(candidate, replacementCandidate)) {
       continue
     }
 
@@ -1353,11 +1426,29 @@ function bareValueUtilities(candidate: Candidate, options: InternalCanonicalizeO
     // Find a corresponding utility for the same signature
     let replacements = utilities.get(targetSignature)
 
-    // Multiple utilities can map to the same signature. Not sure how to migrate
-    // this one so let's just skip it for now.
-    //
-    // TODO: Do we just migrate to the first one?
-    if (replacements.length > 1) return
+    // Multiple utilities can map to the same signature.
+    if (replacements.length > 1) {
+      // Prefer positive values over negative values
+      let maybeReplacement: string | undefined = undefined
+      for (let replacement of replacements) {
+        if (replacement[0] === '-') continue // Skip negative values
+
+        // If multiple non-negative replacements exists then we are unsure
+        // what to do, so let's bail.
+        if (maybeReplacement) return
+
+        // Consider this replacement
+        maybeReplacement = replacement
+      }
+
+      if (maybeReplacement) {
+        for (let replacementCandidate of parseCandidate(designSystem, maybeReplacement)) {
+          yield replacementCandidate
+        }
+      }
+
+      return
+    }
 
     // If we didn't find any replacement utilities, let's try to strip the
     // modifier and find a replacement then. If we do, we can try to re-add the
@@ -1395,31 +1486,47 @@ function bareValueUtilities(candidate: Candidate, options: InternalCanonicalizeO
 const DEPRECATION_MAP = new Map([
   ['order-none', 'order-0'],
   ['break-words', 'wrap-break-word'],
+  ['overflow-ellipsis', 'text-ellipsis'],
 ])
 
+const DEPRECATION_TRANSFORMATION_MAP = new Map([
+  [/^(-)?start-(.*?)$/, '$1inset-s-$2'],
+  [/^(-)?end-(.*?)$/, '$1inset-e-$2'],
+])
+
+function* tryDeprecatedUtilities(candidate: string) {
+  // Try static replacements
+  let replacement = DEPRECATION_MAP.get(candidate)
+  if (replacement) yield replacement
+
+  // Try dynamic replacements
+  for (let [searchValue, replaceValue] of DEPRECATION_TRANSFORMATION_MAP) {
+    let replacement = candidate.replace(searchValue, replaceValue)
+    if (replacement === candidate) continue
+
+    yield replacement
+  }
+}
+
 function deprecatedUtilities(
   candidate: Candidate,
   options: InternalCanonicalizeOptions,
 ): Candidate {
   let designSystem = options.designSystem
-  let signatures = designSystem.storage[UTILITY_SIGNATURE_KEY].get(options.signatureOptions)
+  let hasSameSignature = designSystem.storage[COMPARE_CANDIDATES_KEY].get(options.signatureOptions)
 
   let targetCandidateString = printUnprefixedCandidate(designSystem, candidate)
 
-  let replacementString = DEPRECATION_MAP.get(targetCandidateString) ?? null
-  if (replacementString === null) return candidate
+  for (let replacementString of tryDeprecatedUtilities(targetCandidateString)) {
+    if (!hasSameSignature(candidate, replacementString)) {
+      continue
+    }
 
-  let legacySignature = signatures.get(targetCandidateString)
-  if (typeof legacySignature !== 'string') return candidate
+    let [replacement] = parseCandidate(designSystem, replacementString)
+    return replacement
+  }
 
-  let replacementSignature = signatures.get(replacementString)
-  if (typeof replacementSignature !== 'string') return candidate
-
-  // Not the same signature, not safe to migrate
-  if (legacySignature !== replacementSignature) return candidate
-
-  let [replacement] = parseCandidate(designSystem, replacementString)
-  return replacement
+  return candidate
 }
 
 // ----
@@ -1429,8 +1536,8 @@ function arbitraryVariants(
   options: InternalCanonicalizeOptions,
 ): Variant | Variant[] {
   let designSystem = options.designSystem
-  let signatures = designSystem.storage[VARIANT_SIGNATURE_KEY]
-  let variants = designSystem.storage[PRE_COMPUTED_VARIANTS_KEY]
+  let signatures = designSystem.storage[VARIANT_SIGNATURE_KEY].get(options.signatureOptions.rem)
+  let variants = designSystem.storage[PRE_COMPUTED_VARIANTS_KEY].get(options.signatureOptions.rem)
 
   let iterator = walkVariants(variant)
   for (let [variant] of iterator) {
@@ -1441,7 +1548,11 @@ function arbitraryVariants(
     if (typeof targetSignature !== 'string') continue
 
     let foundVariants = variants.get(targetSignature)
-    if (foundVariants.length !== 1) continue
+    if (foundVariants.length === 0) continue
+
+    // The variant is already in a canonical form, e.g.: `min-lg` and `lg`
+    // produce the same CSS, but both are valid so we keep them as-is.
+    if (foundVariants.includes(targetString)) continue
 
     let foundVariant = foundVariants[0]
     let parsedVariant = designSystem.parseVariant(foundVariant)
@@ -1647,12 +1758,12 @@ function* tryValueReplacements(
 // ----
 
 function isSingleSelector(ast: SelectorParser.SelectorAstNode[]): boolean {
-  return !ast.some((node) => node.kind === 'separator' && node.value.trim() === ',')
+  if (ast.length === 1 && ast[0].kind === 'list') return false
+  return true
 }
 
-function isAttributeSelector(node: SelectorParser.SelectorAstNode): boolean {
-  let value = node.value.trim()
-  return node.kind === 'selector' && value[0] === '[' && value[value.length - 1] === ']'
+function isAttributeSelector(node: SelectorParser.SelectorNode): boolean {
+  return node.value[0] === '[' && node.value[node.value.length - 1] === ']'
 }
 
 function modernizeArbitraryValuesVariant(
@@ -1661,7 +1772,7 @@ function modernizeArbitraryValuesVariant(
 ): Variant | Variant[] {
   let result = [variant]
   let designSystem = options.designSystem
-  let signatures = designSystem.storage[VARIANT_SIGNATURE_KEY]
+  let signatures = designSystem.storage[VARIANT_SIGNATURE_KEY].get(options.signatureOptions.rem)
 
   let iterator = walkVariants(variant)
   for (let [variant, parent] of iterator) {
@@ -1683,11 +1794,17 @@ function modernizeArbitraryValuesVariant(
       // Expecting a non-relative arbitrary variant
       if (variant.relative) continue
 
-      let ast = SelectorParser.parse(variant.selector.trim())
+      let ast = SelectorParser.parse(variant.selector)
 
       // Expecting a single selector node
       if (!isSingleSelector(ast)) continue
 
+      // Keep the existing arbitrary variant modernizations working on a flat
+      // selector sequence while the parser exposes complex selectors as a node.
+      if (ast.length === 1 && ast[0].kind === 'complex') {
+        ast = ast[0].nodes
+      }
+
       // `[&>*]` can be replaced with `*`
       if (
         // Only top-level, so `has-[&>*]` is not supported
@@ -1698,7 +1815,7 @@ function modernizeArbitraryValuesVariant(
         ast[0].kind === 'selector' &&
         ast[0].value === '&' &&
         ast[1].kind === 'combinator' &&
-        ast[1].value.trim() === '>' &&
+        ast[1].value === '>' &&
         ast[2].kind === 'selector' &&
         ast[2].value === '*'
       ) {
@@ -1716,7 +1833,7 @@ function modernizeArbitraryValuesVariant(
         ast[0].kind === 'selector' &&
         ast[0].value === '&' &&
         ast[1].kind === 'combinator' &&
-        ast[1].value.trim() === '' && // space, but trimmed because there could be multiple spaces
+        ast[1].value === ' ' &&
         ast[2].kind === 'selector' &&
         ast[2].value === '*'
       ) {
@@ -1724,6 +1841,30 @@ function modernizeArbitraryValuesVariant(
         continue
       }
 
+      // `[&:has(…)]` can be replaced with `has-[…]`
+      if (
+        // Only top-level, so `group-[&:has(…)]` is not covered
+
+        parent === null &&
+        // [&:has(…)]:flex
+        //  ^ ^^^^^^
+        ast.length === 1 &&
+        ast[0].kind === 'compound' &&
+        ast[0].nodes.length === 2 &&
+        ast[0].nodes[0].kind === 'selector' &&
+        ast[0].nodes[0].value === '&' &&
+        ast[0].nodes[1].kind === 'function' &&
+        ast[0].nodes[1].value === ':has' &&
+        ast[0].nodes[1].nodes.length === 1 &&
+        ast[0].nodes[1].nodes[0].kind === 'selector'
+      ) {
+        replaceObject(
+          variant,
+          designSystem.parseVariant(`has-[${SelectorParser.toCss(ast[0].nodes[1].nodes, true)}]`),
+        )
+        continue
+      }
+
       // `in-*` variant. If the selector ends with ` &`, we can convert it to an
       // `in-*` variant.
       //
@@ -1734,8 +1875,9 @@ function modernizeArbitraryValuesVariant(
         // [[data-visible]___&]:flex
         //  ^^^^^^^^^^^^^^ ^ ^
         ast.length === 3 &&
+        ast[0].kind === 'selector' &&
         ast[1].kind === 'combinator' &&
-        ast[1].value.trim() === '' && // Space, but trimmed because there could be multiple spaces
+        ast[1].value === ' ' &&
         ast[2].kind === 'selector' &&
         ast[2].value === '&'
       ) {
@@ -1747,7 +1889,7 @@ function modernizeArbitraryValuesVariant(
         // that we can convert `[[data-visible]_&]` to `in-[[data-visible]]`.
         //
         // Later this gets converted to `in-data-visible`.
-        replaceObject(variant, designSystem.parseVariant(`in-[${SelectorParser.toCss(ast)}]`))
+        replaceObject(variant, designSystem.parseVariant(`in-[${SelectorParser.toCss(ast, true)}]`))
         continue
       }
 
@@ -1765,7 +1907,7 @@ function modernizeArbitraryValuesVariant(
       ) {
         let targetSignature = signatures.get(designSystem.printVariant(variant))
 
-        let parsed = ValueParser.parse(SelectorParser.toCss(ast))
+        let parsed = ValueParser.parse(SelectorParser.toCss(ast, true))
         let containsNot = false
         walk(parsed, (node) => {
           if (node.kind === 'word' && node.value === 'not') {
@@ -1805,11 +1947,11 @@ function modernizeArbitraryValuesVariant(
         //  ^ ^ ^^^^^^^^^^^^^^
         ast.length === 3 &&
         ast[0].kind === 'selector' &&
-        ast[0].value.trim() === '&' &&
+        ast[0].value === '&' &&
         ast[1].kind === 'combinator' &&
-        ast[1].value.trim() === '>' &&
+        ast[1].value === '>' &&
         ast[2].kind === 'selector' &&
-        (isAttributeSelector(ast[2]) || ast[2].value[0] === ':')
+        (ast[2].value[0] === ':' || isAttributeSelector(ast[2]))
       ) {
         ast = [ast[2]]
         prefixedVariant = designSystem.parseVariant('*')
@@ -1823,20 +1965,34 @@ function modernizeArbitraryValuesVariant(
         //  ^ ^^^^^^^^^^^^^^
         ast.length === 3 &&
         ast[0].kind === 'selector' &&
-        ast[0].value.trim() === '&' &&
+        ast[0].value === '&' &&
         ast[1].kind === 'combinator' &&
-        ast[1].value.trim() === '' && // space, but trimmed because there could be multiple spaces
+        ast[1].value === ' ' &&
         ast[2].kind === 'selector' &&
-        (isAttributeSelector(ast[2]) || ast[2].value[0] === ':')
+        (ast[2].value[0] === ':' || isAttributeSelector(ast[2]))
       ) {
         ast = [ast[2]]
         prefixedVariant = designSystem.parseVariant('**')
       }
 
-      // Filter out `&`. E.g.: `&[data-foo]` => `[data-foo]`
-      let selectorNodes = ast.filter(
-        (node) => !(node.kind === 'selector' && node.value.trim() === '&'),
-      )
+      let selectorNodes = ast
+      walk(selectorNodes, {
+        enter(node) {
+          // Filter out `&`. E.g.: `&[data-foo]` => `[data-foo]`
+          if (node.kind === 'selector' && node.value === '&') {
+            return WalkAction.Replace([])
+          }
+
+          if (node.kind === 'function') {
+            return WalkAction.Skip
+          }
+        },
+        exit(node) {
+          if (node.kind === 'compound' && node.nodes.length === 1) {
+            return WalkAction.ReplaceSkip(node.nodes)
+          }
+        },
+      })
 
       // Expecting a single selector (normal selector or attribute selector)
       if (selectorNodes.length !== 1) continue
@@ -1853,7 +2009,7 @@ function modernizeArbitraryValuesVariant(
         }
 
         // Expecting a single attribute selector
-        if (!isAttributeSelector(target.nodes[0])) continue
+        if (target.nodes[0].kind === 'selector' && !isAttributeSelector(target.nodes[0])) continue
 
         // Unwrap the selector from inside `&:is(…)`
         target = target.nodes[0]
@@ -1925,7 +2081,7 @@ function modernizeArbitraryValuesVariant(
                 return `${variantName}-${targetNode.nodes[0].value}`
               }
 
-              return `${variantName}-[${SelectorParser.toCss(targetNode.nodes)}]`
+              return `${variantName}-[${SelectorParser.toCss(targetNode.nodes, true)}]`
             }
           }
 
@@ -1966,7 +2122,7 @@ function modernizeArbitraryValuesVariant(
       }
 
       // Expecting an attribute selector
-      else if (isAttributeSelector(target)) {
+      else if (target.kind === 'selector' && isAttributeSelector(target)) {
         let attributeSelector = AttributeSelectorParser.parse(target.value)
         if (attributeSelector === null) continue // Invalid attribute selector
 
@@ -2028,6 +2184,95 @@ function modernizeArbitraryValuesVariant(
   return result
 }
 
+// ---
+
+function optimizeArbitraryValueExpressions(
+  candidate: Candidate,
+  options: InternalCanonicalizeOptions,
+): Candidate {
+  if (candidate.kind !== 'functional' || candidate.value?.kind !== 'arbitrary') {
+    return candidate
+  }
+
+  let designSystem = options.designSystem
+  let hasSameSignature = designSystem.storage[COMPARE_CANDIDATES_KEY].get(options.signatureOptions)
+
+  let valueAst = ValueParser.parse(candidate.value.value)
+
+  // Start by constant folding the value expression, when dealing with `calc(…)`
+  if (valueAst.length === 1 && valueAst[0].kind === 'function' && valueAst[0].value === 'calc') {
+    let [folded, foldedValueAst] = constantFoldDeclarationAst(valueAst, null, false)
+    if (folded) {
+      let replacement = cloneCandidate(candidate)
+      replacement.value!.value = ValueParser.toCss(foldedValueAst)
+
+      if (hasSameSignature(candidate, replacement)) {
+        candidate = replacement
+        valueAst = foldedValueAst
+      }
+    }
+  }
+
+  // Move `-` sign into the arbitrary value itself
+  if (candidate.root[0] === '-') {
+    // We're dealing with a `var(…)`, keep as-is
+    if (valueAst.length === 1 && valueAst[0].kind === 'function' && valueAst[0].value === 'var') {
+      return candidate
+    }
+
+    // Move `* -1` inside, and try to constant fold to see if it's even worth
+    // updating the candidate or not.
+    let expressionAst = ValueParser.parse(`calc(${candidate.value!.value} * -1)`)
+    let [folded, foldedExpressionAst] = constantFoldDeclarationAst(expressionAst, null, false)
+    if (folded) {
+      let replacement = cloneCandidate(candidate)
+
+      replacement.root = replacement.root.slice(1) // Drop the leading `-`
+      replacement.value!.value = ValueParser.toCss(foldedExpressionAst)
+
+      if (hasSameSignature(candidate, replacement)) {
+        candidate = replacement
+        valueAst = foldedExpressionAst
+      }
+    }
+  }
+
+  // Move `-` sign out of the arbitrary value
+  if (valueAst.length === 1 && valueAst[0].kind === 'function' && valueAst[0].value === 'calc') {
+    let calcArgs = valueAst[0].nodes
+
+    // `calc(arg * -1)` or `calc(-1  * arg)`
+    if (
+      calcArgs.length === 5 &&
+      calcArgs[1].kind === 'separator' &&
+      calcArgs[1].value === ' ' &&
+      calcArgs[2].kind === 'word' &&
+      calcArgs[2].value === '*' &&
+      calcArgs[3].kind === 'separator' &&
+      calcArgs[3].value === ' '
+    ) {
+      let arg =
+        calcArgs[4].kind === 'word' && calcArgs[4].value === '-1'
+          ? calcArgs[0]
+          : calcArgs[0].kind === 'word' && calcArgs[0].value === '-1'
+            ? calcArgs[4]
+            : null
+
+      if (arg) {
+        let replacement = cloneCandidate(candidate)
+        replacement.root = `-${candidate.root}`
+        replacement.value!.value = ValueParser.toCss([arg])
+
+        if (hasSameSignature(candidate, replacement)) {
+          candidate = replacement
+        }
+      }
+    }
+  }
+
+  return candidate
+}
+
 // ----
 
 // Optimize the modifier
@@ -2183,6 +2428,12 @@ function createUtilitySignatureCache(
   })
 }
 
+// #RGB
+// #RGBA
+// #RRGGBB
+// #RRGGBBAA
+const HEX_REGEX = /#(?:[a-f0-9]{8}|[a-f0-9]{6}|[a-f0-9]{4}|[a-f0-9]{3})/gi
+
 // Optimize the CSS AST to make it suitable for signature comparison. We want to
 // expand declarations, ignore comments, sort declarations etc...
 function canonicalizeAst(designSystem: DesignSystem, ast: AstNode[], options: SignatureOptions) {
@@ -2199,7 +2450,7 @@ function canonicalizeAst(designSystem: DesignSystem, ast: AstNode[], options: Si
         // Ignore `--tw-{property}` if `{property}` exists with the same value
         if (node.property.startsWith('--tw-')) {
           if (
-            (ctx.parent?.nodes ?? []).some(
+            ctx.siblings.some(
               (sibling) =>
                 sibling.kind === 'declaration' &&
                 node.value === sibling.value &&
@@ -2221,6 +2472,8 @@ function canonicalizeAst(designSystem: DesignSystem, ast: AstNode[], options: Si
           node.value = resolveVariablesInValue(node.value, designSystem)
         }
 
+        let valueAst = ValueParser.parse(node.value)
+
         // Very basic `calc(…)` constant folding to handle the spacing scale
         // multiplier:
         //
@@ -2229,7 +2482,17 @@ function canonicalizeAst(designSystem: DesignSystem, ast: AstNode[], options: Si
         //       → `calc(0.25rem * 4)`       ← this is the case we will see
         //                                     after inlining the variable
         //       → `1rem`
-        node.value = constantFoldDeclaration(node.value, rem)
+        let [folded, foldedValueAst] = constantFoldDeclarationAst(valueAst, rem)
+
+        // Normalize `calc(…)` expressions such that arguments that are
+        // associatively equivalent are rendered in the same way.
+        //
+        // `calc(var(--foo) * -1)` === `calc(-1 * var(--foo))`
+        let [normalized, canonicalizedValueAst] = canonicalizeCalcExpressionsAst(foldedValueAst)
+
+        if (folded || normalized) {
+          node.value = ValueParser.toCss(canonicalizedValueAst)
+        }
 
         // We will normalize the `node.value`, this is the same kind of logic
         // we use when printing arbitrary values. It will remove unnecessary
@@ -2282,12 +2545,43 @@ function canonicalizeAst(designSystem: DesignSystem, ast: AstNode[], options: Si
           return a.property.localeCompare(b.property)
         })
       }
+
+      //
+      else if (node.kind === 'declaration' && node.value) {
+        // Leave CSS variables alone
+        if (node.property[0] === '-' && node.property[1] === '-') return
+
+        // Ensure hex colors are always lowercased
+        {
+          HEX_REGEX.lastIndex = 0
+          node.value = node.value.replace(HEX_REGEX, (color) => color.toLowerCase())
+        }
+      }
     },
   })
 
   return ast
 }
 
+// Variables whose theme value is a CSS-wide keyword (e.g.: `unset`) are never
+// inlined. These are typically registered as a placeholder to be re-assigned at
+// runtime, so two variables that share such a value are not interchangeable.
+//
+// E.g.:
+//
+// ```css
+// @theme {
+//   --foreground: unset;
+//   --background: unset;
+// }
+// ```
+//
+// Inlining would make `text-(--foreground)` and `text-(--background)` produce
+// the same signature `color: unset`, even though they are different at runtime.
+//
+// https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/Data_types#css-wide_keywords
+const CSS_WIDE_KEYWORDS = ['initial', 'inherit', 'revert', 'revert-layer', 'revert-rule', 'unset']
+
 // Resolve theme values to their inlined value.
 //
 // E.g.:
@@ -2303,8 +2597,8 @@ function canonicalizeAst(designSystem: DesignSystem, ast: AstNode[], options: Si
 // }
 // ```
 //
-// Which conveniently will be equivalent to: `text-red-500` when we inline
-// the value.
+// Which conveniently will be equivalent to: `text-red-500` when we inline the
+// value.
 //
 // Without inlining:
 // ```css
@@ -2320,13 +2614,13 @@ function canonicalizeAst(designSystem: DesignSystem, ast: AstNode[], options: Si
 // }
 // ```
 //
-// Recently we made sure that utilities like `text-red-500` also generate
-// the fallback value for usage in `@reference` mode.
+// Recently we made sure that utilities like `text-red-500` also generate the
+// fallback value for usage in `@reference` mode.
 //
-// The second assumption is that if you use `var(--key, fallback)` that
-// happens to match a known variable _and_ its inlined value. Then we can
-// replace it with the inlined variable. This allows us to handle custom
-// `@theme` and `@theme inline` definitions.
+// The second assumption is that if you use `var(--key, fallback)` that happens
+// to match a known variable _and_ its inlined value. Then we can replace it
+// with the inlined variable. This allows us to handle custom `@theme` and
+// `@theme inline` definitions.
 function resolveVariablesInValue(value: string, designSystem: DesignSystem): string {
   let changed = false
   let valueAst = ValueParser.parse(value)
@@ -2355,6 +2649,9 @@ function resolveVariablesInValue(value: string, designSystem: DesignSystem): str
     seen.add(variable)
     if (variableValue === undefined) return // Couldn't resolve the variable
 
+    // CSS-wide keywords are never inlined
+    if (CSS_WIDE_KEYWORDS.includes(variableValue.toLowerCase())) return
+
     // Inject variable fallbacks when no fallback is present yet.
     //
     // A fallback could consist of multiple values.
@@ -2419,13 +2716,9 @@ function createUtilityPropertiesCache(
       let parsed = designSystem.parseCandidate(className)
       if (parsed.length === 0) return localPropertyValueLookup
 
-      walk(
-        canonicalizeAst(
-          designSystem,
-          designSystem.compileAstNodes(parsed[0]).map((x) => cloneAstNode(x.node)),
-          options,
-        ),
-        (node) => {
+      try {
+        let ast = designSystem.compileAstNodes(parsed[0]).map((x) => cloneAstNode(x.node))
+        walk(canonicalizeAst(designSystem, ast, options), (node) => {
           if (node.kind === 'declaration') {
             localPropertyValueLookup.get(node.property).add(node.value!)
             designSystem.storage[STATIC_UTILITIES_KEY].get(options)
@@ -2433,8 +2726,12 @@ function createUtilityPropertiesCache(
               .get(node.value!)
               .add(className)
           }
-        },
-      )
+        })
+      } catch {
+        // Ignore errors, this could happen when we call a plugin with a value
+        // it didn't expect. But since plugins are functions, we can't know
+        // ahead of time what it expects.
+      }
 
       return localPropertyValueLookup
     })
@@ -2513,92 +2810,110 @@ export const VARIANT_SIGNATURE_KEY = Symbol()
 function createVariantSignatureCache(
   designSystem: DesignSystem,
 ): DesignSystem['storage'][typeof VARIANT_SIGNATURE_KEY] {
-  return new DefaultMap<string, string | symbol>((variant) => {
-    try {
-      // Ensure the prefix is added to the utility if it is not already present.
-      variant =
-        designSystem.theme.prefix && !variant.startsWith(designSystem.theme.prefix)
-          ? `${designSystem.theme.prefix}:${variant}`
-          : variant
+  return new DefaultMap((rem: number | null) => {
+    return new DefaultMap<string, string | symbol>((variant) => {
+      try {
+        // Ensure the prefix is added to the utility if it is not already present.
+        variant =
+          designSystem.theme.prefix && !variant.startsWith(designSystem.theme.prefix)
+            ? `${designSystem.theme.prefix}:${variant}`
+            : variant
 
-      // Use `@apply` to normalize the selector to `.x`
-      let ast: AstNode[] = [styleRule('.x', [atRule('@apply', `${variant}:flex`)])]
-      substituteAtApply(ast, designSystem)
+        // Use `@apply` to normalize the selector to `.x`
+        let ast: AstNode[] = [styleRule('.x', [atRule('@apply', `${variant}:flex`)])]
+        substituteAtApply(ast, designSystem)
 
-      // Canonicalize selectors to their minimal form
-      walk(ast, (node) => {
-        // At-rules
-        if (node.kind === 'at-rule' && node.params.includes(' ')) {
-          node.params = node.params.replaceAll(' ', '')
-        }
+        // Canonicalize selectors to their minimal form
+        walk(ast, (node) => {
+          // At-rules
+          if (node.kind === 'at-rule') {
+            // Normalize dimensions such that equivalent values in different
+            // units are considered the same. E.g.: with a root font size of
+            // `16px`, `@media (width >= 64rem)` and `@media (width >= 1024px)`
+            // are equivalent.
+            node.params = constantFoldDeclaration(node.params, rem)
 
-        // Style rules
-        else if (node.kind === 'rule') {
-          let selectorAst = SelectorParser.parse(node.selector)
-          let changed = false
-          walk(selectorAst, (node) => {
-            if (node.kind === 'separator' && node.value !== ' ') {
-              node.value = node.value.trim()
-              changed = true
+            if (node.params.includes(' ')) {
+              node.params = node.params.replaceAll(' ', '')
             }
+          }
 
-            // Remove unnecessary `:is(…)` selectors
-            else if (node.kind === 'function' && node.value === ':is') {
-              // A single selector inside of `:is(…)` can be replaced with the
-              // selector itself.
+          // Style rules
+          else if (node.kind === 'rule') {
+            let selectorAst = SelectorParser.parse(node.selector)
+            let changed = false
+            walk(selectorAst, (node) => {
+              // Assumption: when we have a list of selectors: `.foo, .bar` we
+              // want to mark this as changed because this will be re-printed as
+              // `.foo,.bar`.
               //
-              // E.g.: `:is(.foo)` → `.foo`
-              if (node.nodes.length === 1) {
+              // Similarly, when we receive a combinator like `.foo + .bar`, this
+              // will be printed as `.foo+.bar`.
+              //
+              // It could be that this was already optimal, but then this would be
+              // a no-op situation.
+              if (node.kind === 'list' || node.kind === 'combinator') {
                 changed = true
-                return WalkAction.Replace(node.nodes)
               }
 
-              // A selector with the universal selector `*` followed by a pseudo
-              // class, can be replaced with the pseudo class itself.
+              // Remove unnecessary `:is(…)` selectors
+              else if (node.kind === 'function' && node.value === ':is') {
+                // A single selector inside of `:is(…)` can be replaced with the
+                // selector itself.
+                //
+                // E.g.: `:is(.foo)` → `.foo`
+                if (node.nodes.length === 1) {
+                  changed = true
+                  return WalkAction.Replace(node.nodes)
+                }
+
+                // A selector with the universal selector `*` followed by a pseudo
+                // class, can be replaced with the pseudo class itself.
+                else if (
+                  node.nodes.length === 2 &&
+                  node.nodes[0].kind === 'selector' &&
+                  node.nodes[0].value === '*' &&
+                  node.nodes[1].kind === 'selector' &&
+                  node.nodes[1].value[0] === ':'
+                ) {
+                  changed = true
+                  return WalkAction.Replace(node.nodes[1])
+                }
+              }
+
+              // Ensure `*` exists before pseudo selectors inside of `:not(…)`,
+              // `:where(…)`, …
+              //
+              // E.g.:
+              //
+              // `:not(:first-child)` → `:not(*:first-child)`
+              //
               else if (
-                node.nodes.length === 2 &&
-                node.nodes[0].kind === 'selector' &&
-                node.nodes[0].value === '*' &&
-                node.nodes[1].kind === 'selector' &&
-                node.nodes[1].value[0] === ':'
+                node.kind === 'function' &&
+                node.value[0] === ':' &&
+                node.nodes[0]?.kind === 'selector' &&
+                node.nodes[0]?.value[0] === ':'
               ) {
                 changed = true
-                return WalkAction.Replace(node.nodes[1])
+                node.nodes.unshift({ kind: 'selector', value: '*' })
               }
-            }
+            })
 
-            // Ensure `*` exists before pseudo selectors inside of `:not(…)`,
-            // `:where(…)`, …
-            //
-            // E.g.:
-            //
-            // `:not(:first-child)` → `:not(*:first-child)`
-            //
-            else if (
-              node.kind === 'function' &&
-              node.value[0] === ':' &&
-              node.nodes[0]?.kind === 'selector' &&
-              node.nodes[0]?.value[0] === ':'
-            ) {
-              changed = true
-              node.nodes.unshift({ kind: 'selector', value: '*' })
+            if (changed) {
+              node.selector = SelectorParser.toCss(selectorAst, true)
             }
-          })
-
-          if (changed) {
-            node.selector = SelectorParser.toCss(selectorAst)
           }
-        }
-      })
+        })
 
-      // Compute the final signature, by generating the CSS for the variant
-      let signature = toCss(ast)
-      return signature
-    } catch {
-      // A unique symbol is returned to ensure that 2 signatures resulting in
-      // `null` are not considered equal.
-      return Symbol()
-    }
+        // Compute the final signature, by generating the CSS for the variant
+        let signature = toCss(ast)
+        return signature
+      } catch {
+        // A unique symbol is returned to ensure that 2 signatures resulting in
+        // `null` are not considered equal.
+        return Symbol()
+      }
+    })
   })
 }
 
@@ -2606,19 +2921,31 @@ export const PRE_COMPUTED_VARIANTS_KEY = Symbol()
 function createPreComputedVariantsCache(
   designSystem: DesignSystem,
 ): DesignSystem['storage'][typeof PRE_COMPUTED_VARIANTS_KEY] {
-  let signatures = designSystem.storage[VARIANT_SIGNATURE_KEY]
-  let lookup = new DefaultMap<string, string[]>(() => [])
+  return new DefaultMap((rem: number | null) => {
+    let signatures = designSystem.storage[VARIANT_SIGNATURE_KEY].get(rem)
+    let lookup = new DefaultMap<string, string[]>(() => [])
 
-  // Actual static variants
-  for (let [root, variant] of designSystem.variants.entries()) {
-    if (variant.kind === 'static') {
-      let signature = signatures.get(root)
-      if (typeof signature !== 'string') continue
-      lookup.get(signature).push(root)
+    for (let [root, variant] of designSystem.variants.entries()) {
+      // Actual static variants
+      if (variant.kind === 'static') {
+        let signature = signatures.get(root)
+        if (typeof signature !== 'string') continue
+        lookup.get(signature).push(root)
+      }
+
+      // Functional variants with known values, e.g.: `max-lg`, `@min-md`, …
+      else if (variant.kind === 'functional') {
+        for (let value of designSystem.variants.getCompletions(root)) {
+          let name = root === '@' ? `@${value}` : `${root}-${value}`
+          let signature = signatures.get(name)
+          if (typeof signature !== 'string') continue
+          lookup.get(signature).push(name)
+        }
+      }
     }
-  }
 
-  return lookup
+    return lookup
+  })
 }
 
 function temporarilyDisableThemeInline<T>(designSystem: DesignSystem, cb: () => T): T {
diff --git a/packages/tailwindcss/src/compat/apply-compat-hooks.ts b/packages/tailwindcss/src/compat/apply-compat-hooks.ts
index 6a9f580b6..036b9d88e 100644
--- a/packages/tailwindcss/src/compat/apply-compat-hooks.ts
+++ b/packages/tailwindcss/src/compat/apply-compat-hooks.ts
@@ -309,6 +309,19 @@ function upgradeToFullPluginSupport({
 
     let resolvedValue = sharedPluginApi.theme(path, undefined)
 
+    // If we're dealing with an object that has the `DEFAULT` key, unwrap it to
+    // the default value first. This happens for namespace root lookups where
+    // the CSS theme defines a bare value, e.g. `--shadow` resolved via
+    // `theme('shadow')`.
+    if (
+      typeof resolvedValue === 'object' &&
+      resolvedValue !== null &&
+      !Array.isArray(resolvedValue) &&
+      'DEFAULT' in resolvedValue
+    ) {
+      resolvedValue = resolvedValue.DEFAULT
+    }
+
     // When a tuple is returned, return the first element
     if (Array.isArray(resolvedValue) && resolvedValue.length === 2) {
       return resolvedValue[0]
@@ -319,16 +332,6 @@ function upgradeToFullPluginSupport({
       return resolvedValue.join(', ')
     }
 
-    // If we're dealing with an object that has the `DEFAULT` key, return the
-    // default value
-    else if (
-      typeof resolvedValue === 'object' &&
-      resolvedValue !== null &&
-      'DEFAULT' in resolvedValue
-    ) {
-      return resolvedValue.DEFAULT
-    }
-
     // Otherwise only allow string values here, objects (and namespace maps)
     // are treated as non-resolved values for the CSS `theme()` function.
     else if (typeof resolvedValue === 'string') {
diff --git a/packages/tailwindcss/src/compat/colors.ts b/packages/tailwindcss/src/compat/colors.ts
index a1d162c54..64e3bc9c7 100644
--- a/packages/tailwindcss/src/compat/colors.ts
+++ b/packages/tailwindcss/src/compat/colors.ts
@@ -31,7 +31,7 @@ export default {
     '950': 'oklch(13% 0.028 261.692)',
   },
   zinc: {
-    '50': 'oklch(98.5% 0 0)',
+    '50': 'oklch(98.5% 0 none)',
     '100': 'oklch(96.7% 0.001 286.375)',
     '200': 'oklch(92% 0.004 286.32)',
     '300': 'oklch(87.1% 0.006 286.286)',
@@ -44,17 +44,17 @@ export default {
     '950': 'oklch(14.1% 0.005 285.823)',
   },
   neutral: {
-    '50': 'oklch(98.5% 0 0)',
-    '100': 'oklch(97% 0 0)',
-    '200': 'oklch(92.2% 0 0)',
-    '300': 'oklch(87% 0 0)',
-    '400': 'oklch(70.8% 0 0)',
-    '500': 'oklch(55.6% 0 0)',
-    '600': 'oklch(43.9% 0 0)',
-    '700': 'oklch(37.1% 0 0)',
-    '800': 'oklch(26.9% 0 0)',
-    '900': 'oklch(20.5% 0 0)',
-    '950': 'oklch(14.5% 0 0)',
+    '50': 'oklch(98.5% 0 none)',
+    '100': 'oklch(97% 0 none)',
+    '200': 'oklch(92.2% 0 none)',
+    '300': 'oklch(87% 0 none)',
+    '400': 'oklch(70.8% 0 none)',
+    '500': 'oklch(55.6% 0 none)',
+    '600': 'oklch(43.9% 0 none)',
+    '700': 'oklch(37.1% 0 none)',
+    '800': 'oklch(26.9% 0 none)',
+    '900': 'oklch(20.5% 0 none)',
+    '950': 'oklch(14.5% 0 none)',
   },
   stone: {
     '50': 'oklch(98.5% 0.001 106.423)',
@@ -70,7 +70,7 @@ export default {
     '950': 'oklch(14.7% 0.004 49.25)',
   },
   mauve: {
-    '50': 'oklch(98.5% 0 0)',
+    '50': 'oklch(98.5% 0 none)',
     '100': 'oklch(96% 0.003 325.6)',
     '200': 'oklch(92.2% 0.005 325.62)',
     '300': 'oklch(86.5% 0.012 325.68)',
diff --git a/packages/tailwindcss/src/compat/config.test.ts b/packages/tailwindcss/src/compat/config.test.ts
index 25bd893d1..1f69ae446 100644
--- a/packages/tailwindcss/src/compat/config.test.ts
+++ b/packages/tailwindcss/src/compat/config.test.ts
@@ -1,6 +1,7 @@
 import { describe, expect, test, vi } from 'vitest'
 import { compile, type Config } from '..'
 import { default as plugin } from '../plugin'
+import { compileCss, run } from '../test-utils/run'
 import flattenColorPalette from './flatten-color-palette'
 
 const css = String.raw
@@ -19,18 +20,21 @@ test('Config files can add content', async () => {
 })
 
 test('Config files can change dark mode (media)', async () => {
-  let input = css`
-    @tailwind utilities;
-    @config "./config.js";
-  `
-
-  let compiler = await compile(input, {
-    loadModule: async () => ({ module: { darkMode: 'media' }, base: '/root', path: '' }),
-  })
-
-  expect(compiler.build(['dark:underline'])).toMatchInlineSnapshot(`
-    ".dark\\:underline {
-      @media (prefers-color-scheme: dark) {
+  expect(
+    await run(
+      ['dark:underline'],
+      css`
+        @tailwind utilities;
+        @config "./config.js";
+      `,
+      {
+        loadModule: async () => ({ module: { darkMode: 'media' }, base: '/root', path: '' }),
+      },
+    ),
+  ).toMatchInlineSnapshot(`
+    "
+    @media (prefers-color-scheme: dark) {
+      .dark\\:underline {
         text-decoration-line: underline;
       }
     }
@@ -39,75 +43,80 @@ test('Config files can change dark mode (media)', async () => {
 })
 
 test('Config files can change dark mode (selector)', async () => {
-  let input = css`
-    @tailwind utilities;
-    @config "./config.js";
-  `
-
-  let compiler = await compile(input, {
-    loadModule: async () => ({ module: { darkMode: 'selector' }, base: '/root', path: '' }),
-  })
-
-  expect(compiler.build(['dark:underline'])).toMatchInlineSnapshot(`
-    ".dark\\:underline {
-      &:where(.dark, .dark *) {
-        text-decoration-line: underline;
-      }
+  expect(
+    await run(
+      ['dark:underline'],
+      css`
+        @tailwind utilities;
+        @config "./config.js";
+      `,
+      {
+        loadModule: async () => ({ module: { darkMode: 'selector' }, base: '/root', path: '' }),
+      },
+    ),
+  ).toMatchInlineSnapshot(`
+    "
+    .dark\\:underline:where(.dark, .dark *) {
+      text-decoration-line: underline;
     }
     "
   `)
 })
 
 test('Config files can change dark mode (variant)', async () => {
-  let input = css`
-    @tailwind utilities;
-    @config "./config.js";
-  `
-
-  let compiler = await compile(input, {
-    loadModule: async () => ({
-      module: { darkMode: ['variant', '&:where(:not(.light))'] },
-      base: '/root',
-      path: '',
-    }),
-  })
-
-  expect(compiler.build(['dark:underline'])).toMatchInlineSnapshot(`
-    ".dark\\:underline {
-      &:where(:not(.light)) {
-        text-decoration-line: underline;
-      }
+  expect(
+    await run(
+      ['dark:underline'],
+      css`
+        @tailwind utilities;
+        @config "./config.js";
+      `,
+      {
+        loadModule: async () => ({
+          module: { darkMode: ['variant', '&:where(:not(.light))'] },
+          base: '/root',
+          path: '',
+        }),
+      },
+    ),
+  ).toMatchInlineSnapshot(`
+    "
+    .dark\\:underline:where(:not(.light)) {
+      text-decoration-line: underline;
     }
     "
   `)
 })
 
 test('Config files can add plugins', async () => {
-  let input = css`
-    @tailwind utilities;
-    @config "./config.js";
-  `
-
-  let compiler = await compile(input, {
-    loadModule: async () => ({
-      module: {
-        plugins: [
-          plugin(function ({ addUtilities }) {
-            addUtilities({
-              '.no-scrollbar': {
-                'scrollbar-width': 'none',
-              },
-            })
-          }),
-        ],
+  expect(
+    await run(
+      ['no-scrollbar'],
+      css`
+        @tailwind utilities;
+        @config "./config.js";
+      `,
+      {
+        loadModule: async () => ({
+          module: {
+            plugins: [
+              plugin(function ({ addUtilities }) {
+                addUtilities({
+                  '.no-scrollbar': {
+                    'scrollbar-width': 'none',
+                  },
+                })
+              }),
+            ],
+          },
+          base: '/root',
+          path: '',
+        }),
       },
-      base: '/root',
-      path: '',
-    }),
-  })
-
-  expect(compiler.build(['no-scrollbar'])).toMatchInlineSnapshot(`
-    ".no-scrollbar {
+    ),
+  ).toMatchInlineSnapshot(`
+    "
+    .no-scrollbar {
       scrollbar-width: none;
     }
     "
@@ -115,143 +124,145 @@ test('Config files can add plugins', async () => {
 })
 
 test('Plugins loaded from config files can contribute to the config', async () => {
-  let input = css`
-    @tailwind utilities;
-    @config "./config.js";
-  `
-
-  let compiler = await compile(input, {
-    loadModule: async () => ({
-      module: {
-        plugins: [
-          plugin(() => {}, {
-            darkMode: ['variant', '&:where(:not(.light))'],
-          }),
-        ],
+  expect(
+    await run(
+      ['dark:underline'],
+      css`
+        @tailwind utilities;
+        @config "./config.js";
+      `,
+      {
+        loadModule: async () => ({
+          module: {
+            plugins: [
+              plugin(() => {}, {
+                darkMode: ['variant', '&:where(:not(.light))'],
+              }),
+            ],
+          },
+          base: '/root',
+          path: '',
+        }),
       },
-      base: '/root',
-      path: '',
-    }),
-  })
-
-  expect(compiler.build(['dark:underline'])).toMatchInlineSnapshot(`
-    ".dark\\:underline {
-      &:where(:not(.light)) {
-        text-decoration-line: underline;
-      }
+    ),
+  ).toMatchInlineSnapshot(`
+    "
+    .dark\\:underline:where(:not(.light)) {
+      text-decoration-line: underline;
     }
     "
   `)
 })
 
 test('Config file presets can contribute to the config', async () => {
-  let input = css`
-    @tailwind utilities;
-    @config "./config.js";
-  `
-
-  let compiler = await compile(input, {
-    loadModule: async () => ({
-      module: {
-        presets: [
-          {
-            darkMode: ['variant', '&:where(:not(.light))'],
-          },
-        ],
+  expect(
+    await run(
+      ['dark:underline'],
+      css`
+        @tailwind utilities;
+        @config "./config.js";
+      `,
+      {
+        loadModule: async () => ({
+          module: { presets: [{ darkMode: ['variant', '&:where(:not(.light))'] }] },
+          base: '/root',
+          path: '',
+        }),
       },
-      base: '/root',
-      path: '',
-    }),
-  })
-
-  expect(compiler.build(['dark:underline'])).toMatchInlineSnapshot(`
-    ".dark\\:underline {
-      &:where(:not(.light)) {
-        text-decoration-line: underline;
-      }
+    ),
+  ).toMatchInlineSnapshot(`
+    "
+    .dark\\:underline:where(:not(.light)) {
+      text-decoration-line: underline;
     }
     "
   `)
 })
 
 test('Config files can affect the theme', async () => {
-  let input = css`
-    @tailwind utilities;
-    @config "./config.js";
-  `
-
-  let compiler = await compile(input, {
-    loadModule: async () => ({
-      module: {
-        theme: {
-          extend: {
-            colors: {
-              primary: '#c0ffee',
-            },
-          },
-        },
-
-        plugins: [
-          plugin(function ({ addUtilities, theme }) {
-            addUtilities({
-              '.scrollbar-primary': {
-                scrollbarColor: theme('colors.primary'),
+  expect(
+    await run(
+      ['bg-primary', 'scrollbar-primary'],
+      css`
+        @tailwind utilities;
+        @config "./config.js";
+      `,
+      {
+        loadModule: async () => ({
+          module: {
+            theme: {
+              extend: {
+                colors: {
+                  primary: '#c0ffee',
+                },
               },
-            })
-          }),
-        ],
-      },
-      base: '/root',
-      path: '',
-    }),
-  })
+            },
 
-  expect(compiler.build(['bg-primary', 'scrollbar-primary'])).toMatchInlineSnapshot(`
-    ".bg-primary {
-      background-color: #c0ffee;
-    }
+            plugins: [
+              plugin(function ({ addUtilities, theme }) {
+                addUtilities({
+                  '.scrollbar-primary': {
+                    scrollbarColor: theme('colors.primary'),
+                  },
+                })
+              }),
+            ],
+          },
+          base: '/root',
+          path: '',
+        }),
+      },
+    ),
+  ).toMatchInlineSnapshot(`
+    "
     .scrollbar-primary {
       scrollbar-color: #c0ffee;
     }
+
+    .bg-primary {
+      background-color: #c0ffee;
+    }
     "
   `)
 })
 
 // https://github.com/tailwindlabs/tailwindcss/issues/19091
 test('Accessing a default color if a sub-color exists via CSS should work as expected', async () => {
-  let input = css`
-    @tailwind utilities;
-    @config "./config.js";
+  expect(
+    await compileCss(
+      css`
+        @tailwind utilities;
+        @config "./config.js";
 
-    .example {
-      color: theme('colors.foo-bar');
-      border-color: theme('colors.foo');
-    }
-  `
-
-  let compiler = await compile(input, {
-    loadModule: async () => ({
-      module: {
-        theme: {
-          // Internally this object gets converted to something like:
-          // ```
-          // {
-          //   foo: { DEFAULT: 'var(--foo-foo)', bar: 'var(--foo-foo-bar)' },
-          // }
-          // ```
-          colors: {
-            foo: 'var(--foo-foo)',
-            'foo-bar': 'var(--foo-foo-bar)',
+        .example {
+          color: theme('colors.foo-bar');
+          border-color: theme('colors.foo');
+        }
+      `,
+      {
+        loadModule: async () => ({
+          module: {
+            theme: {
+              // Internally this object gets converted to something like:
+              // ```
+              // {
+              //   foo: { DEFAULT: 'var(--foo-foo)', bar: 'var(--foo-foo-bar)' },
+              // }
+              // ```
+              colors: {
+                foo: 'var(--foo-foo)',
+                'foo-bar': 'var(--foo-foo-bar)',
+              },
+            },
           },
-        },
+          base: '/root',
+          path: '',
+        }),
       },
-      base: '/root',
-      path: '',
-    }),
-  })
-
-  expect(compiler.build([])).toMatchInlineSnapshot(`
-    ".example {
+    ),
+  ).toMatchInlineSnapshot(`
+    "
+    .example {
       color: var(--foo-foo-bar);
       border-color: var(--foo-foo);
     }
@@ -260,38 +271,34 @@ test('Accessing a default color if a sub-color exists via CSS should work as exp
 })
 
 test('Variants in CSS overwrite variants from plugins', async () => {
-  let input = css`
-    @tailwind utilities;
-    @config "./config.js";
-    @custom-variant dark (&:is(.my-dark));
-    @custom-variant light (&:is(.my-light));
-  `
-
-  let compiler = await compile(input, {
-    loadModule: async () => ({
-      module: {
-        darkMode: ['variant', '&:is(.dark)'],
-        plugins: [
-          plugin(function ({ addVariant }) {
-            addVariant('light', '&:is(.light)')
-          }),
-        ],
+  expect(
+    await run(
+      ['dark:underline', 'light:underline'],
+      css`
+        @tailwind utilities;
+        @config "./config.js";
+        @custom-variant dark (&:is(.my-dark));
+        @custom-variant light (&:is(.my-light));
+      `,
+      {
+        loadModule: async () => ({
+          module: {
+            darkMode: ['variant', '&:is(.dark)'],
+            plugins: [
+              plugin(function ({ addVariant }) {
+                addVariant('light', '&:is(.light)')
+              }),
+            ],
+          },
+          base: '/root',
+          path: '',
+        }),
       },
-      base: '/root',
-      path: '',
-    }),
-  })
-
-  expect(compiler.build(['dark:underline', 'light:underline'])).toMatchInlineSnapshot(`
-    ".dark\\:underline {
-      &:is(.my-dark) {
-        text-decoration-line: underline;
-      }
-    }
-    .light\\:underline {
-      &:is(.my-light) {
-        text-decoration-line: underline;
-      }
+    ),
+  ).toMatchInlineSnapshot(`
+    "
+    .dark\\:underline.my-dark, .light\\:underline.my-light {
+      text-decoration-line: underline;
     }
     "
   `)
@@ -301,156 +308,167 @@ describe('theme callbacks', () => {
   test('tuple values from the config overwrite `@theme default` tuple-ish values from the CSS theme', async ({
     expect,
   }) => {
-    let input = css`
-      @theme default {
-        --text-base: 0rem;
-        --text-base--line-height: 1rem;
-        --text-md: 0rem;
-        --text-md--line-height: 1rem;
-        --text-xl: 0rem;
-        --text-xl--line-height: 1rem;
-      }
-      @theme {
-        --text-base: 100rem;
-        --text-md--line-height: 101rem;
-      }
-      @tailwind utilities;
-      @config "./config.js";
-    `
+    expect(
+      await run(
+        ['leading-base', 'leading-md', 'leading-xl', 'prose'],
+        css`
+          @theme default {
+            --text-base: 0rem;
+            --text-base--line-height: 1rem;
+            --text-md: 0rem;
+            --text-md--line-height: 1rem;
+            --text-xl: 0rem;
+            --text-xl--line-height: 1rem;
+          }
+          @theme {
+            --text-base: 100rem;
+            --text-md--line-height: 101rem;
+          }
+          @tailwind utilities;
+          @config "./config.js";
+        `,
+        {
+          loadModule: async () => ({
+            module: {
+              theme: {
+                extend: {
+                  fontSize: {
+                    base: ['200rem', { lineHeight: '201rem' }],
+                    md: ['200rem', { lineHeight: '201rem' }],
+                    xl: ['200rem', { lineHeight: '201rem' }],
+                  },
 
-    let compiler = await compile(input, {
-      loadModule: async () => ({
-        module: {
-          theme: {
-            extend: {
-              fontSize: {
-                base: ['200rem', { lineHeight: '201rem' }],
-                md: ['200rem', { lineHeight: '201rem' }],
-                xl: ['200rem', { lineHeight: '201rem' }],
+                  // Direct access
+                  lineHeight: ({ theme }) => ({
+                    base: theme('fontSize.base[1].lineHeight'),
+                    md: theme('fontSize.md[1].lineHeight'),
+                    xl: theme('fontSize.xl[1].lineHeight'),
+                  }),
+
+                  // Tuple access
+                  typography: ({ theme }) => ({
+                    '[class~=lead-base]': {
+                      fontSize: theme('fontSize.base')[0],
+                      ...theme('fontSize.base')[1],
+                    },
+                    '[class~=lead-md]': {
+                      fontSize: theme('fontSize.md')[0],
+                      ...theme('fontSize.md')[1],
+                    },
+                    '[class~=lead-xl]': {
+                      fontSize: theme('fontSize.xl')[0],
+                      ...theme('fontSize.xl')[1],
+                    },
+                  }),
+                },
               },
 
-              // Direct access
-              lineHeight: ({ theme }) => ({
-                base: theme('fontSize.base[1].lineHeight'),
-                md: theme('fontSize.md[1].lineHeight'),
-                xl: theme('fontSize.xl[1].lineHeight'),
-              }),
+              plugins: [
+                plugin(function ({ addUtilities, theme }) {
+                  addUtilities({
+                    '.prose': {
+                      ...theme('typography'),
+                    },
+                  })
+                }),
+              ],
+            } satisfies Config,
+            base: '/root',
+            path: '',
+          }),
+        },
+      ),
+    ).toMatchInlineSnapshot(`
+      "
+      @layer properties {
+        @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
+          *, :before, :after, ::backdrop {
+            --tw-leading: initial;
+          }
+        }
+      }
 
-              // Tuple access
-              typography: ({ theme }) => ({
-                '[class~=lead-base]': {
-                  fontSize: theme('fontSize.base')[0],
-                  ...theme('fontSize.base')[1],
-                },
-                '[class~=lead-md]': {
-                  fontSize: theme('fontSize.md')[0],
-                  ...theme('fontSize.md')[1],
-                },
-                '[class~=lead-xl]': {
-                  fontSize: theme('fontSize.xl')[0],
-                  ...theme('fontSize.xl')[1],
-                },
-              }),
-            },
-          },
+      .prose [class~="lead-base"] {
+        font-size: 100rem;
+        line-height: 201rem;
+      }
 
-          plugins: [
-            plugin(function ({ addUtilities, theme }) {
-              addUtilities({
-                '.prose': {
-                  ...theme('typography'),
-                },
-              })
-            }),
-          ],
-        } satisfies Config,
-        base: '/root',
-        path: '',
-      }),
-    })
+      .prose [class~="lead-md"] {
+        font-size: 200rem;
+        line-height: 101rem;
+      }
 
-    expect(compiler.build(['leading-base', 'leading-md', 'leading-xl', 'prose']))
-      .toMatchInlineSnapshot(`
-        "@layer properties;
-        .prose {
-          [class~=lead-base] {
-            font-size: 100rem;
-            line-height: 201rem;
-          }
-          [class~=lead-md] {
-            font-size: 200rem;
-            line-height: 101rem;
-          }
-          [class~=lead-xl] {
-            font-size: 200rem;
-            line-height: 201rem;
-          }
-        }
-        .leading-base {
-          --tw-leading: 201rem;
-          line-height: 201rem;
-        }
-        .leading-md {
-          --tw-leading: 101rem;
-          line-height: 101rem;
-        }
-        .leading-xl {
-          --tw-leading: 201rem;
-          line-height: 201rem;
-        }
-        @property --tw-leading {
-          syntax: "*";
-          inherits: false;
-        }
-        @layer properties {
-          @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
-            *, ::before, ::after, ::backdrop {
-              --tw-leading: initial;
-            }
-          }
-        }
-        "
-      `)
+      .prose [class~="lead-xl"] {
+        font-size: 200rem;
+        line-height: 201rem;
+      }
+
+      .leading-base {
+        --tw-leading: 201rem;
+        line-height: 201rem;
+      }
+
+      .leading-md {
+        --tw-leading: 101rem;
+        line-height: 101rem;
+      }
+
+      .leading-xl {
+        --tw-leading: 201rem;
+        line-height: 201rem;
+      }
+
+      @property --tw-leading {
+        syntax: "*";
+        inherits: false
+      }
+      "
+    `)
   })
 })
 
 describe('theme overrides order', () => {
   test('user theme > js config > default theme', async () => {
-    let input = css`
-      @theme default {
-        --color-red: red;
-      }
-      @theme {
-        --color-blue: blue;
-      }
-      @tailwind utilities;
-      @config "./config.js";
-    `
-
-    let compiler = await compile(input, {
-      loadModule: async () => ({
-        module: {
-          theme: {
-            extend: {
-              colors: {
-                red: 'very-red',
-                blue: 'very-blue',
+    expect(
+      await run(
+        ['bg-red', 'bg-blue'],
+        css`
+          @theme default {
+            --color-red: red;
+          }
+          @theme {
+            --color-blue: blue;
+          }
+          @tailwind utilities;
+          @config "./config.js";
+        `,
+        {
+          loadModule: async () => ({
+            module: {
+              theme: {
+                extend: {
+                  colors: {
+                    red: 'very-red',
+                    blue: 'very-blue',
+                  },
+                },
               },
             },
-          },
+            base: '/root',
+            path: '',
+          }),
         },
-        base: '/root',
-        path: '',
-      }),
-    })
-
-    expect(compiler.build(['bg-red', 'bg-blue'])).toMatchInlineSnapshot(`
-      ":root, :host {
+      ),
+    ).toMatchInlineSnapshot(`
+      "
+      :root, :host {
         --color-blue: blue;
       }
+
       .bg-blue {
         background-color: var(--color-blue);
       }
+
       .bg-red {
         background-color: very-red;
       }
@@ -459,133 +477,134 @@ describe('theme overrides order', () => {
   })
 
   test('user theme > js config > default theme (with nested object)', async () => {
-    let input = css`
-      @theme default {
-        --color-slate-100: #000100;
-        --color-slate-200: #000200;
-        --color-slate-300: #000300;
-      }
-      @theme {
-        --color-slate-400: #100400;
-        --color-slate-500: #100500;
-      }
-      @tailwind utilities;
-      @config "./config.js";
-      @plugin "./plugin.js";
-    `
-
-    let compiler = await compile(input, {
-      loadModule: async (id) => {
-        if (id.includes('config.js')) {
-          return {
-            module: {
-              theme: {
-                extend: {
-                  colors: {
-                    slate: {
-                      200: '#200200',
-                      400: '#200400',
-                      600: '#200600',
+    expect(
+      await run(
+        [
+          'bg-slate-100',
+          'bg-slate-200',
+          'bg-slate-300',
+          'bg-slate-400',
+          'bg-slate-500',
+          'bg-slate-600',
+          'hover-bg-slate-100',
+          'hover-bg-slate-200',
+          'hover-bg-slate-300',
+          'hover-bg-slate-400',
+          'hover-bg-slate-500',
+          'hover-bg-slate-600',
+        ],
+        css`
+          @theme default {
+            --color-slate-100: #000100;
+            --color-slate-200: #000200;
+            --color-slate-300: #000300;
+          }
+          @theme {
+            --color-slate-400: #100400;
+            --color-slate-500: #100500;
+          }
+          @tailwind utilities;
+          @config "./config.js";
+          @plugin "./plugin.js";
+        `,
+        {
+          loadModule: async (id) => {
+            if (id.includes('config.js')) {
+              return {
+                module: {
+                  theme: {
+                    extend: {
+                      colors: {
+                        slate: {
+                          200: '#200200',
+                          400: '#200400',
+                          600: '#200600',
+                        },
+                      },
                     },
                   },
-                },
-              },
-            } satisfies Config,
-            base: '/root',
-            path: '',
-          }
-        } else {
-          return {
-            module: plugin(({ matchUtilities, theme }) => {
-              matchUtilities(
-                {
-                  'hover-bg': (value) => {
-                    return {
-                      '&:hover': {
-                        backgroundColor: value,
+                } satisfies Config,
+                base: '/root',
+                path: '',
+              }
+            } else {
+              return {
+                module: plugin(({ matchUtilities, theme }) => {
+                  matchUtilities(
+                    {
+                      'hover-bg': (value) => {
+                        return {
+                          '&:hover': {
+                            backgroundColor: value,
+                          },
+                        }
                       },
-                    }
-                  },
-                },
-                { values: flattenColorPalette(theme('colors')) },
-              )
-            }),
-            base: '/root',
-            path: '',
-          }
-        }
-      },
-    })
-
-    expect(
-      compiler.build([
-        'bg-slate-100',
-        'bg-slate-200',
-        'bg-slate-300',
-        'bg-slate-400',
-        'bg-slate-500',
-        'bg-slate-600',
-        'hover-bg-slate-100',
-        'hover-bg-slate-200',
-        'hover-bg-slate-300',
-        'hover-bg-slate-400',
-        'hover-bg-slate-500',
-        'hover-bg-slate-600',
-      ]),
+                    },
+                    { values: flattenColorPalette(theme('colors')) },
+                  )
+                }),
+                base: '/root',
+                path: '',
+              }
+            }
+          },
+        },
+      ),
     ).toMatchInlineSnapshot(`
-      ":root, :host {
+      "
+      :root, :host {
         --color-slate-100: #000100;
         --color-slate-300: #000300;
         --color-slate-400: #100400;
         --color-slate-500: #100500;
       }
+
       .bg-slate-100 {
         background-color: var(--color-slate-100);
       }
+
       .bg-slate-200 {
         background-color: #200200;
       }
+
       .bg-slate-300 {
         background-color: var(--color-slate-300);
       }
+
       .bg-slate-400 {
         background-color: var(--color-slate-400);
       }
+
       .bg-slate-500 {
         background-color: var(--color-slate-500);
       }
+
       .bg-slate-600 {
         background-color: #200600;
       }
-      .hover-bg-slate-100 {
-        &:hover {
-          background-color: #000100;
-        }
+
+      .hover-bg-slate-100:hover {
+        background-color: #000100;
       }
-      .hover-bg-slate-200 {
-        &:hover {
-          background-color: #200200;
-        }
+
+      .hover-bg-slate-200:hover {
+        background-color: #200200;
       }
-      .hover-bg-slate-300 {
-        &:hover {
-          background-color: #000300;
-        }
+
+      .hover-bg-slate-300:hover {
+        background-color: #000300;
       }
-      .hover-bg-slate-400 {
-        &:hover {
-          background-color: #100400;
-        }
+
+      .hover-bg-slate-400:hover {
+        background-color: #100400;
       }
-      .hover-bg-slate-500 {
-        &:hover {
-          background-color: #100500;
-        }
+
+      .hover-bg-slate-500:hover {
+        background-color: #100500;
       }
-      .hover-bg-slate-600 {
-        &:hover {
-          background-color: #200600;
-        }
+
+      .hover-bg-slate-600:hover {
+        background-color: #200600;
       }
       "
     `)
@@ -594,32 +613,35 @@ describe('theme overrides order', () => {
 
 describe('default font family compatibility', () => {
   test('overriding `fontFamily.sans` sets `--default-font-family`', async () => {
-    let input = css`
-      @theme default {
-        --default-font-family: var(--font-family-sans);
-        --default-font-feature-settings: var(--font-family-sans--font-feature-settings);
-        --default-font-variation-settings: var(--font-family-sans--font-variation-settings);
-      }
-      @config "./config.js";
-      @tailwind utilities;
-    `
-
-    let compiler = await compile(input, {
-      loadModule: async () => ({
-        module: {
-          theme: {
-            fontFamily: {
-              sans: 'Potato Sans',
+    expect(
+      await run(
+        ['font-sans'],
+        css`
+          @theme default {
+            --default-font-family: var(--font-family-sans);
+            --default-font-feature-settings: var(--font-family-sans--font-feature-settings);
+            --default-font-variation-settings: var(--font-family-sans--font-variation-settings);
+          }
+          @config "./config.js";
+          @tailwind utilities;
+        `,
+        {
+          loadModule: async () => ({
+            module: {
+              theme: {
+                fontFamily: {
+                  sans: 'Potato Sans',
+                },
+              },
             },
-          },
+            base: '/root',
+            path: '',
+          }),
         },
-        base: '/root',
-        path: '',
-      }),
-    })
-
-    expect(compiler.build(['font-sans'])).toMatchInlineSnapshot(`
-      ".font-sans {
+      ),
+    ).toMatchInlineSnapshot(`
+      "
+      .font-sans {
         font-family: Potato Sans;
       }
       "
@@ -629,34 +651,37 @@ describe('default font family compatibility', () => {
   test('overriding `fontFamily.sans[1].fontFeatureSettings` sets `--default-font-feature-settings`', async ({
     expect,
   }) => {
-    let input = css`
-      @theme default {
-        --default-font-family: var(--font-family-sans);
-        --default-font-feature-settings: var(--font-family-sans--font-feature-settings);
-        --default-font-variation-settings: var(--font-family-sans--font-variation-settings);
-      }
-      @config "./config.js";
-      @tailwind utilities;
-    `
-
-    let compiler = await compile(input, {
-      loadModule: async () => ({
-        module: {
-          theme: {
-            fontFamily: {
-              sans: ['Potato Sans', { fontFeatureSettings: '"cv06"' }],
+    expect(
+      await run(
+        ['font-sans'],
+        css`
+          @theme default {
+            --default-font-family: var(--font-family-sans);
+            --default-font-feature-settings: var(--font-family-sans--font-feature-settings);
+            --default-font-variation-settings: var(--font-family-sans--font-variation-settings);
+          }
+          @config "./config.js";
+          @tailwind utilities;
+        `,
+        {
+          loadModule: async () => ({
+            module: {
+              theme: {
+                fontFamily: {
+                  sans: ['Potato Sans', { fontFeatureSettings: '"cv06"' }],
+                },
+              },
             },
-          },
+            base: '/root',
+            path: '',
+          }),
         },
-        base: '/root',
-        path: '',
-      }),
-    })
-
-    expect(compiler.build(['font-sans'])).toMatchInlineSnapshot(`
-      ".font-sans {
-        font-family: Potato Sans;
+      ),
+    ).toMatchInlineSnapshot(`
+      "
+      .font-sans {
         font-feature-settings: "cv06";
+        font-family: Potato Sans;
       }
       "
     `)
@@ -665,34 +690,37 @@ describe('default font family compatibility', () => {
   test('overriding `fontFamily.sans[1].fontVariationSettings` sets `--default-font-variation-settings`', async ({
     expect,
   }) => {
-    let input = css`
-      @theme default {
-        --default-font-family: var(--font-family-sans);
-        --default-font-feature-settings: var(--font-family-sans--font-feature-settings);
-        --default-font-variation-settings: var(--font-family-sans--font-variation-settings);
-      }
-      @config "./config.js";
-      @tailwind utilities;
-    `
-
-    let compiler = await compile(input, {
-      loadModule: async () => ({
-        module: {
-          theme: {
-            fontFamily: {
-              sans: ['Potato Sans', { fontVariationSettings: '"XHGT" 0.7' }],
+    expect(
+      await run(
+        ['font-sans'],
+        css`
+          @theme default {
+            --default-font-family: var(--font-family-sans);
+            --default-font-feature-settings: var(--font-family-sans--font-feature-settings);
+            --default-font-variation-settings: var(--font-family-sans--font-variation-settings);
+          }
+          @config "./config.js";
+          @tailwind utilities;
+        `,
+        {
+          loadModule: async () => ({
+            module: {
+              theme: {
+                fontFamily: {
+                  sans: ['Potato Sans', { fontVariationSettings: '"XHGT" 0.7' }],
+                },
+              },
             },
-          },
+            base: '/root',
+            path: '',
+          }),
         },
-        base: '/root',
-        path: '',
-      }),
-    })
-
-    expect(compiler.build(['font-sans'])).toMatchInlineSnapshot(`
-      ".font-sans {
+      ),
+    ).toMatchInlineSnapshot(`
+      "
+      .font-sans {
+        font-variation-settings: "XHGT" .7;
         font-family: Potato Sans;
-        font-variation-settings: "XHGT" 0.7;
       }
       "
     `)
@@ -701,38 +729,41 @@ describe('default font family compatibility', () => {
   test('overriding `fontFeatureSettings` and `fontVariationSettings` for `fontFamily.sans` sets `--default-font-feature-settings` and `--default-font-variation-settings`', async ({
     expect,
   }) => {
-    let input = css`
-      @theme default {
-        --default-font-family: var(--font-family-sans);
-        --default-font-feature-settings: var(--font-family-sans--font-feature-settings);
-        --default-font-variation-settings: var(--font-family-sans--font-variation-settings);
-      }
-      @config "./config.js";
-      @tailwind utilities;
-    `
-
-    let compiler = await compile(input, {
-      loadModule: async () => ({
-        module: {
-          theme: {
-            fontFamily: {
-              sans: [
-                'Potato Sans',
-                { fontFeatureSettings: '"cv06"', fontVariationSettings: '"XHGT" 0.7' },
-              ],
+    expect(
+      await run(
+        ['font-sans'],
+        css`
+          @theme default {
+            --default-font-family: var(--font-family-sans);
+            --default-font-feature-settings: var(--font-family-sans--font-feature-settings);
+            --default-font-variation-settings: var(--font-family-sans--font-variation-settings);
+          }
+          @config "./config.js";
+          @tailwind utilities;
+        `,
+        {
+          loadModule: async () => ({
+            module: {
+              theme: {
+                fontFamily: {
+                  sans: [
+                    'Potato Sans',
+                    { fontFeatureSettings: '"cv06"', fontVariationSettings: '"XHGT" 0.7' },
+                  ],
+                },
+              },
             },
-          },
+            base: '/root',
+            path: '',
+          }),
         },
-        base: '/root',
-        path: '',
-      }),
-    })
-
-    expect(compiler.build(['font-sans'])).toMatchInlineSnapshot(`
-      ".font-sans {
-        font-family: Potato Sans;
+      ),
+    ).toMatchInlineSnapshot(`
+      "
+      .font-sans {
         font-feature-settings: "cv06";
-        font-variation-settings: "XHGT" 0.7;
+        font-variation-settings: "XHGT" .7;
+        font-family: Potato Sans;
       }
       "
     `)
@@ -741,37 +772,41 @@ describe('default font family compatibility', () => {
   test('overriding `--font-family-sans` in `@theme` without `default` preserves the original `--default-font-*` values', async ({
     expect,
   }) => {
-    let input = css`
-      @theme default {
-        --default-font-family: var(--font-family-sans);
-        --default-font-feature-settings: var(--font-family-sans--font-feature-settings);
-        --default-font-variation-settings: var(--font-family-sans--font-variation-settings);
-      }
-      @config "./config.js";
-      @theme {
-        --font-sans: Sandwich Sans;
-      }
-      @tailwind utilities;
-    `
-
-    let compiler = await compile(input, {
-      loadModule: async () => ({
-        module: {
-          theme: {
-            fontFamily: {
-              sans: 'Potato Sans',
+    expect(
+      await run(
+        ['font-sans'],
+        css`
+          @theme default {
+            --default-font-family: var(--font-family-sans);
+            --default-font-feature-settings: var(--font-family-sans--font-feature-settings);
+            --default-font-variation-settings: var(--font-family-sans--font-variation-settings);
+          }
+          @config "./config.js";
+          @theme {
+            --font-sans: Sandwich Sans;
+          }
+          @tailwind utilities;
+        `,
+        {
+          loadModule: async () => ({
+            module: {
+              theme: {
+                fontFamily: {
+                  sans: 'Potato Sans',
+                },
+              },
             },
-          },
+            base: '/root',
+            path: '',
+          }),
         },
-        base: '/root',
-        path: '',
-      }),
-    })
-
-    expect(compiler.build(['font-sans'])).toMatchInlineSnapshot(`
-      ":root, :host {
+      ),
+    ).toMatchInlineSnapshot(`
+      "
+      :root, :host {
         --font-sans: Sandwich Sans;
       }
+
       .font-sans {
         font-family: var(--font-sans);
       }
@@ -782,32 +817,35 @@ describe('default font family compatibility', () => {
   test('overriding `fontFamily.sans` in a config file with an array sets `--default-font-family`', async ({
     expect,
   }) => {
-    let input = css`
-      @theme default {
-        --default-font-family: var(--font-family-sans);
-        --default-font-feature-settings: var(--font-family-sans--font-feature-settings);
-        --default-font-variation-settings: var(--font-family-sans--font-variation-settings);
-      }
-      @config "./config.js";
-      @tailwind utilities;
-    `
-
-    let compiler = await compile(input, {
-      loadModule: async () => ({
-        module: {
-          theme: {
-            fontFamily: {
-              sans: ['Inter', 'system-ui', 'sans-serif'],
+    expect(
+      await run(
+        ['font-sans'],
+        css`
+          @theme default {
+            --default-font-family: var(--font-family-sans);
+            --default-font-feature-settings: var(--font-family-sans--font-feature-settings);
+            --default-font-variation-settings: var(--font-family-sans--font-variation-settings);
+          }
+          @config "./config.js";
+          @tailwind utilities;
+        `,
+        {
+          loadModule: async () => ({
+            module: {
+              theme: {
+                fontFamily: {
+                  sans: ['Inter', 'system-ui', 'sans-serif'],
+                },
+              },
             },
-          },
+            base: '/root',
+            path: '',
+          }),
         },
-        base: '/root',
-        path: '',
-      }),
-    })
-
-    expect(compiler.build(['font-sans'])).toMatchInlineSnapshot(`
-      ".font-sans {
+      ),
+    ).toMatchInlineSnapshot(`
+      "
+      .font-sans {
         font-family: Inter, system-ui, sans-serif;
       }
       "
@@ -817,60 +855,67 @@ describe('default font family compatibility', () => {
   test('overriding `fontFamily.sans` in a config file with an unexpected type is ignored', async ({
     expect,
   }) => {
-    let input = css`
-      @theme default {
-        --default-font-family: var(--font-family-sans);
-        --default-font-feature-settings: var(--font-family-sans--font-feature-settings);
-        --default-font-variation-settings: var(--font-family-sans--font-variation-settings);
-      }
-      @config "./config.js";
-      @tailwind utilities;
-    `
-
-    let compiler = await compile(input, {
-      loadModule: async () => ({
-        module: {
-          theme: {
-            fontFamily: {
-              sans: { foo: 'bar', banana: 'sandwich' },
+    expect(
+      await run(
+        ['font-sans'],
+        css`
+          @theme default {
+            --default-font-family: var(--font-family-sans);
+            --default-font-feature-settings: var(--font-family-sans--font-feature-settings);
+            --default-font-variation-settings: var(--font-family-sans--font-variation-settings);
+          }
+          @config "./config.js";
+          @tailwind utilities;
+        `,
+        {
+          loadModule: async () => ({
+            module: {
+              theme: {
+                fontFamily: {
+                  sans: { foo: 'bar', banana: 'sandwich' },
+                },
+              },
             },
-          },
+            base: '/root',
+            path: '',
+          }),
         },
-        base: '/root',
-        path: '',
-      }),
-    })
-
-    expect(compiler.build(['font-sans'])).toMatchInlineSnapshot(`""`)
+      ),
+    ).toEqual('')
   })
 
   test('overriding `fontFamily.mono` sets `--default-mono-font-family`', async () => {
-    let input = css`
-      @theme default {
-        --default-mono-font-family: var(--font-family-mono);
-        --default-mono-font-feature-settings: var(--font-family-mono--font-feature-settings);
-        --default-mono-font-variation-settings: var(--font-family-mono--font-variation-settings);
-      }
-      @config "./config.js";
-      @tailwind utilities;
-    `
-
-    let compiler = await compile(input, {
-      loadModule: async () => ({
-        module: {
-          theme: {
-            fontFamily: {
-              mono: 'Potato Mono',
+    expect(
+      await run(
+        ['font-mono'],
+        css`
+          @theme default {
+            --default-mono-font-family: var(--font-family-mono);
+            --default-mono-font-feature-settings: var(--font-family-mono--font-feature-settings);
+            --default-mono-font-variation-settings: var(
+              --font-family-mono--font-variation-settings
+            );
+          }
+          @config "./config.js";
+          @tailwind utilities;
+        `,
+        {
+          loadModule: async () => ({
+            module: {
+              theme: {
+                fontFamily: {
+                  mono: 'Potato Mono',
+                },
+              },
             },
-          },
+            base: '/root',
+            path: '',
+          }),
         },
-        base: '/root',
-        path: '',
-      }),
-    })
-
-    expect(compiler.build(['font-mono'])).toMatchInlineSnapshot(`
-      ".font-mono {
+      ),
+    ).toMatchInlineSnapshot(`
+      "
+      .font-mono {
         font-family: Potato Mono;
       }
       "
@@ -880,34 +925,39 @@ describe('default font family compatibility', () => {
   test('overriding `fontFamily.mono[1].fontFeatureSettings` sets `--default-mono-font-feature-settings`', async ({
     expect,
   }) => {
-    let input = css`
-      @theme default {
-        --default-mono-font-family: var(--font-family-mono);
-        --default-mono-font-feature-settings: var(--font-family-mono--font-feature-settings);
-        --default-mono-font-variation-settings: var(--font-family-mono--font-variation-settings);
-      }
-      @config "./config.js";
-      @tailwind utilities;
-    `
-
-    let compiler = await compile(input, {
-      loadModule: async () => ({
-        module: {
-          theme: {
-            fontFamily: {
-              mono: ['Potato Mono', { fontFeatureSettings: '"cv06"' }],
+    expect(
+      await run(
+        ['font-mono'],
+        css`
+          @theme default {
+            --default-mono-font-family: var(--font-family-mono);
+            --default-mono-font-feature-settings: var(--font-family-mono--font-feature-settings);
+            --default-mono-font-variation-settings: var(
+              --font-family-mono--font-variation-settings
+            );
+          }
+          @config "./config.js";
+          @tailwind utilities;
+        `,
+        {
+          loadModule: async () => ({
+            module: {
+              theme: {
+                fontFamily: {
+                  mono: ['Potato Mono', { fontFeatureSettings: '"cv06"' }],
+                },
+              },
             },
-          },
+            base: '/root',
+            path: '',
+          }),
         },
-        base: '/root',
-        path: '',
-      }),
-    })
-
-    expect(compiler.build(['font-mono'])).toMatchInlineSnapshot(`
-      ".font-mono {
-        font-family: Potato Mono;
+      ),
+    ).toMatchInlineSnapshot(`
+      "
+      .font-mono {
         font-feature-settings: "cv06";
+        font-family: Potato Mono;
       }
       "
     `)
@@ -916,34 +966,39 @@ describe('default font family compatibility', () => {
   test('overriding `fontFamily.mono[1].fontVariationSettings` sets `--default-mono-font-variation-settings`', async ({
     expect,
   }) => {
-    let input = css`
-      @theme default {
-        --default-mono-font-family: var(--font-family-mono);
-        --default-mono-font-feature-settings: var(--font-family-mono--font-feature-settings);
-        --default-mono-font-variation-settings: var(--font-family-mono--font-variation-settings);
-      }
-      @config "./config.js";
-      @tailwind utilities;
-    `
-
-    let compiler = await compile(input, {
-      loadModule: async () => ({
-        module: {
-          theme: {
-            fontFamily: {
-              mono: ['Potato Mono', { fontVariationSettings: '"XHGT" 0.7' }],
+    expect(
+      await run(
+        ['font-mono'],
+        css`
+          @theme default {
+            --default-mono-font-family: var(--font-family-mono);
+            --default-mono-font-feature-settings: var(--font-family-mono--font-feature-settings);
+            --default-mono-font-variation-settings: var(
+              --font-family-mono--font-variation-settings
+            );
+          }
+          @config "./config.js";
+          @tailwind utilities;
+        `,
+        {
+          loadModule: async () => ({
+            module: {
+              theme: {
+                fontFamily: {
+                  mono: ['Potato Mono', { fontVariationSettings: '"XHGT" 0.7' }],
+                },
+              },
             },
-          },
+            base: '/root',
+            path: '',
+          }),
         },
-        base: '/root',
-        path: '',
-      }),
-    })
-
-    expect(compiler.build(['font-mono'])).toMatchInlineSnapshot(`
-      ".font-mono {
+      ),
+    ).toMatchInlineSnapshot(`
+      "
+      .font-mono {
+        font-variation-settings: "XHGT" .7;
         font-family: Potato Mono;
-        font-variation-settings: "XHGT" 0.7;
       }
       "
     `)
@@ -952,38 +1007,41 @@ describe('default font family compatibility', () => {
   test('overriding `fontFeatureSettings` and `fontVariationSettings` for `fontFamily.mono` sets `--default-mono-font-feature-settings` and `--default-mono-font-variation-settings`', async ({
     expect,
   }) => {
-    let input = css`
-      @theme default {
-        --default-mono-font-family: var(--font-mono);
-        --default-mono-font-feature-settings: var(--font-mono--font-feature-settings);
-        --default-mono-font-variation-settings: var(--font-mono--font-variation-settings);
-      }
-      @config "./config.js";
-      @tailwind utilities;
-    `
-
-    let compiler = await compile(input, {
-      loadModule: async () => ({
-        module: {
-          theme: {
-            fontFamily: {
-              mono: [
-                'Potato Mono',
-                { fontFeatureSettings: '"cv06"', fontVariationSettings: '"XHGT" 0.7' },
-              ],
+    expect(
+      await run(
+        ['font-mono'],
+        css`
+          @theme default {
+            --default-mono-font-family: var(--font-mono);
+            --default-mono-font-feature-settings: var(--font-mono--font-feature-settings);
+            --default-mono-font-variation-settings: var(--font-mono--font-variation-settings);
+          }
+          @config "./config.js";
+          @tailwind utilities;
+        `,
+        {
+          loadModule: async () => ({
+            module: {
+              theme: {
+                fontFamily: {
+                  mono: [
+                    'Potato Mono',
+                    { fontFeatureSettings: '"cv06"', fontVariationSettings: '"XHGT" 0.7' },
+                  ],
+                },
+              },
             },
-          },
+            base: '/root',
+            path: '',
+          }),
         },
-        base: '/root',
-        path: '',
-      }),
-    })
-
-    expect(compiler.build(['font-mono'])).toMatchInlineSnapshot(`
-      ".font-mono {
-        font-family: Potato Mono;
+      ),
+    ).toMatchInlineSnapshot(`
+      "
+      .font-mono {
         font-feature-settings: "cv06";
-        font-variation-settings: "XHGT" 0.7;
+        font-variation-settings: "XHGT" .7;
+        font-family: Potato Mono;
       }
       "
     `)
@@ -992,37 +1050,41 @@ describe('default font family compatibility', () => {
   test('overriding `--font-family-mono` in `@theme` without `default` preserves the original `--default-mono-font-*` values', async ({
     expect,
   }) => {
-    let input = css`
-      @theme default {
-        --default-mono-font-family: var(--font-mono);
-        --default-mono-font-feature-settings: var(--font-mono--font-feature-settings);
-        --default-mono-font-variation-settings: var(--font-mono--font-variation-settings);
-      }
-      @config "./config.js";
-      @theme {
-        --font-mono: Sandwich Mono;
-      }
-      @tailwind utilities;
-    `
-
-    let compiler = await compile(input, {
-      loadModule: async () => ({
-        module: {
-          theme: {
-            fontFamily: {
-              mono: 'Potato Mono',
+    expect(
+      await run(
+        ['font-mono'],
+        css`
+          @theme default {
+            --default-mono-font-family: var(--font-mono);
+            --default-mono-font-feature-settings: var(--font-mono--font-feature-settings);
+            --default-mono-font-variation-settings: var(--font-mono--font-variation-settings);
+          }
+          @config "./config.js";
+          @theme {
+            --font-mono: Sandwich Mono;
+          }
+          @tailwind utilities;
+        `,
+        {
+          loadModule: async () => ({
+            module: {
+              theme: {
+                fontFamily: {
+                  mono: 'Potato Mono',
+                },
+              },
             },
-          },
+            base: '/root',
+            path: '',
+          }),
         },
-        base: '/root',
-        path: '',
-      }),
-    })
-
-    expect(compiler.build(['font-mono'])).toMatchInlineSnapshot(`
-      ":root, :host {
+      ),
+    ).toMatchInlineSnapshot(`
+      "
+      :root, :host {
         --font-mono: Sandwich Mono;
       }
+
       .font-mono {
         font-family: var(--font-mono);
       }
@@ -1033,117 +1095,117 @@ describe('default font family compatibility', () => {
   test('overriding `fontFamily.mono` in a config file with an unexpected type is ignored', async ({
     expect,
   }) => {
-    let input = css`
-      @theme default {
-        --default-mono-font-family: var(--font-family-mono);
-        --default-mono-font-feature-settings: var(--font-family-mono--font-feature-settings);
-        --default-mono-font-variation-settings: var(--font-family-mono--font-variation-settings);
-      }
-      @config "./config.js";
-      @tailwind utilities;
-    `
-
-    let compiler = await compile(input, {
-      loadModule: async () => ({
-        module: {
-          theme: {
-            fontFamily: {
-              mono: { foo: 'bar', banana: 'sandwich' },
+    expect(
+      await run(
+        ['font-mono'],
+        css`
+          @theme default {
+            --default-mono-font-family: var(--font-family-mono);
+            --default-mono-font-feature-settings: var(--font-family-mono--font-feature-settings);
+            --default-mono-font-variation-settings: var(
+              --font-family-mono--font-variation-settings
+            );
+          }
+          @config "./config.js";
+          @tailwind utilities;
+        `,
+        {
+          loadModule: async () => ({
+            module: {
+              theme: {
+                fontFamily: {
+                  mono: { foo: 'bar', banana: 'sandwich' },
+                },
+              },
             },
-          },
+            base: '/root',
+            path: '',
+          }),
         },
-        base: '/root',
-        path: '',
-      }),
-    })
-
-    expect(compiler.build(['font-mono'])).toMatchInlineSnapshot(`""`)
+      ),
+    ).toEqual('')
   })
 })
 
 test('creates variants for `data`, `supports`, and `aria` theme options at the same level as the core utility ', async () => {
-  let input = css`
-    @tailwind utilities;
-    @config "./config.js";
-  `
+  expect(
+    await run(
+      [
+        'aria-polite:underline',
+        'supports-child-combinator:underline',
+        'supports-foo:underline',
+        'data-checked:underline',
 
-  let compiler = await compile(input, {
-    loadModule: async () => ({
-      module: {
-        theme: {
-          extend: {
-            aria: {
-              polite: 'live="polite"',
-            },
-            supports: {
-              'child-combinator': 'selector(h2 > p)',
-              foo: 'bar',
-            },
-            data: {
-              checked: 'ui~="checked"',
+        // Ensure core variants still work
+        'aria-hidden:flex',
+        'supports-grid:flex',
+        'data-foo:flex',
+
+        // The `print` variant should still be sorted last, even after registering
+        // the other custom variants.
+        'print:flex',
+      ],
+      css`
+        @tailwind utilities;
+        @config "./config.js";
+      `,
+      {
+        loadModule: async () => ({
+          module: {
+            theme: {
+              extend: {
+                aria: {
+                  polite: 'live="polite"',
+                },
+                supports: {
+                  'child-combinator': 'selector(h2 > p)',
+                  foo: 'bar',
+                },
+                data: {
+                  checked: 'ui~="checked"',
+                },
+              },
             },
           },
-        },
+          base: '/root',
+          path: '',
+        }),
       },
-      base: '/root',
-      path: '',
-    }),
-  })
-
-  expect(
-    compiler.build([
-      'aria-polite:underline',
-      'supports-child-combinator:underline',
-      'supports-foo:underline',
-      'data-checked:underline',
-
-      // Ensure core variants still work
-      'aria-hidden:flex',
-      'supports-grid:flex',
-      'data-foo:flex',
-
-      // The `print` variant should still be sorted last, even after registering
-      // the other custom variants.
-      'print:flex',
-    ]),
+    ),
   ).toMatchInlineSnapshot(`
-    ".aria-hidden\\:flex {
-      &[aria-hidden="true"] {
+    "
+    .aria-hidden\\:flex[aria-hidden="true"] {
+      display: flex;
+    }
+
+    .aria-polite\\:underline[aria-live="polite"], .data-checked\\:underline[data-ui~="checked"] {
+      text-decoration-line: underline;
+    }
+
+    .data-foo\\:flex[data-foo] {
+      display: flex;
+    }
+
+    @supports selector(h2 > p) {
+      .supports-child-combinator\\:underline {
+        text-decoration-line: underline;
+      }
+    }
+
+    @supports (bar: var(--tw)) {
+      .supports-foo\\:underline {
+        text-decoration-line: underline;
+      }
+    }
+
+    @supports (grid: var(--tw)) {
+      .supports-grid\\:flex {
         display: flex;
       }
     }
-    .aria-polite\\:underline {
-      &[aria-live="polite"] {
-        text-decoration-line: underline;
-      }
-    }
-    .data-checked\\:underline {
-      &[data-ui~="checked"] {
-        text-decoration-line: underline;
-      }
-    }
-    .data-foo\\:flex {
-      &[data-foo] {
-        display: flex;
-      }
-    }
-    .supports-child-combinator\\:underline {
-      @supports selector(h2 > p) {
-        text-decoration-line: underline;
-      }
-    }
-    .supports-foo\\:underline {
-      @supports (bar: var(--tw)) {
-        text-decoration-line: underline;
-      }
-    }
-    .supports-grid\\:flex {
-      @supports (grid: var(--tw)) {
-        display: flex;
-      }
-    }
-    .print\\:flex {
-      @media print {
+
+    @media print {
+      .print\\:flex {
         display: flex;
       }
     }
@@ -1152,63 +1214,66 @@ test('creates variants for `data`, `supports`, and `aria` theme options at the s
 })
 
 test('merges css breakpoints with js config screens', async () => {
-  let input = css`
-    @theme default {
-      --breakpoint-sm: 40rem;
-      --breakpoint-md: 48rem;
-      --breakpoint-lg: 64rem;
-      --breakpoint-xl: 80rem;
-      --breakpoint-2xl: 96rem;
-    }
-    @theme {
-      --breakpoint-md: 50rem;
-    }
-    @config "./config.js";
-    @tailwind utilities;
-  `
-
-  let compiler = await compile(input, {
-    loadModule: async () => ({
-      module: {
-        theme: {
-          extend: {
-            screens: {
-              sm: '44rem',
+  expect(
+    await run(
+      ['sm:flex', 'md:flex', 'lg:flex', 'min-sm:max-md:underline'],
+      css`
+        @theme default {
+          --breakpoint-sm: 40rem;
+          --breakpoint-md: 48rem;
+          --breakpoint-lg: 64rem;
+          --breakpoint-xl: 80rem;
+          --breakpoint-2xl: 96rem;
+        }
+        @theme {
+          --breakpoint-md: 50rem;
+        }
+        @config "./config.js";
+        @tailwind utilities;
+      `,
+      {
+        loadModule: async () => ({
+          module: {
+            theme: {
+              extend: {
+                screens: {
+                  sm: '44rem',
+                },
+              },
             },
           },
-        },
+          base: '/root',
+          path: '',
+        }),
       },
-      base: '/root',
-      path: '',
-    }),
-  })
+    ),
+  ).toMatchInlineSnapshot(`
+    "
+    @media (min-width: 44rem) {
+      .sm\\:flex {
+        display: flex;
+      }
 
-  expect(compiler.build(['sm:flex', 'md:flex', 'lg:flex', 'min-sm:max-md:underline']))
-    .toMatchInlineSnapshot(`
-      ".sm\\:flex {
-        @media (width >= 44rem) {
-          display: flex;
-        }
-      }
-      .min-sm\\:max-md\\:underline {
-        @media (width >= 44rem) {
-          @media (width < 50rem) {
-            text-decoration-line: underline;
-          }
+      @media not all and (min-width: 50rem) {
+        .min-sm\\:max-md\\:underline {
+          text-decoration-line: underline;
         }
       }
+    }
+
+    @media (min-width: 50rem) {
       .md\\:flex {
-        @media (width >= 50rem) {
-          display: flex;
-        }
+        display: flex;
       }
+    }
+
+    @media (min-width: 64rem) {
       .lg\\:flex {
-        @media (width >= 64rem) {
-          display: flex;
-        }
+        display: flex;
       }
-      "
-    `)
+    }
+    "
+  `)
 })
 
 test('utilities must be prefixed', async () => {
@@ -1221,66 +1286,60 @@ test('utilities must be prefixed', async () => {
     }
   `
 
-  let compiler = await compile(input, {
-    loadModule: async (id, base) => ({
+  let options: Partial<Parameters<typeof compile>[1]> = {
+    loadModule: async (_id, base) => ({
       path: '',
       base,
       module: { prefix: 'tw' },
     }),
-  })
+  }
 
   // Prefixed utilities are generated
-  expect(compiler.build(['tw:underline', 'tw:hover:line-through', 'tw:custom']))
+  expect(await run(['tw:underline', 'tw:hover:line-through', 'tw:custom'], input, options))
     .toMatchInlineSnapshot(`
-      ".tw\\:custom {
+      "
+      .tw\\:custom {
         color: red;
       }
+
       .tw\\:underline {
         text-decoration-line: underline;
       }
-      .tw\\:hover\\:line-through {
-        &:hover {
-          @media (hover: hover) {
-            text-decoration-line: line-through;
-          }
+
+      @media (hover: hover) {
+        .tw\\:hover\\:line-through:hover {
+          text-decoration-line: line-through;
         }
       }
       "
     `)
 
   // Non-prefixed utilities are ignored
-  compiler = await compile(input, {
-    loadModule: async (id, base) => ({
-      path: '',
-      base,
-      module: { prefix: 'tw' },
-    }),
-  })
-
-  expect(compiler.build(['underline', 'hover:line-through', 'custom'])).toEqual('')
+  expect(await run(['underline', 'hover:line-through', 'custom'], input, options)).toEqual('')
 })
 
 test('utilities used in @apply must be prefixed', async () => {
-  let compiler = await compile(
-    css`
-      @config "./config.js";
-
-      .my-underline {
-        @apply tw:underline;
-      }
-    `,
-    {
-      loadModule: async (id, base) => ({
-        path: '',
-        base,
-        module: { prefix: 'tw' },
-      }),
-    },
-  )
-
   // Prefixed utilities are generated
-  expect(compiler.build([])).toMatchInlineSnapshot(`
-    ".my-underline {
+  expect(
+    await compileCss(
+      css`
+        @config "./config.js";
+
+        .my-underline {
+          @apply tw:underline;
+        }
+      `,
+      {
+        loadModule: async (_id, base) => ({
+          path: '',
+          base,
+          module: { prefix: 'tw' },
+        }),
+      },
+    ),
+  ).toMatchInlineSnapshot(`
+    "
+    .my-underline {
       text-decoration-line: underline;
     }
     "
@@ -1298,7 +1357,7 @@ test('utilities used in @apply must be prefixed', async () => {
         }
       `,
       {
-        loadModule: async (id, base) => ({
+        loadModule: async (_id, base) => ({
           path: '',
           base,
           module: { prefix: 'tw' },
@@ -1311,35 +1370,37 @@ test('utilities used in @apply must be prefixed', async () => {
 })
 
 test('Prefixes configured in CSS take precedence over those defined in JS configs', async () => {
-  let compiler = await compile(
-    css`
-      @theme prefix(wat) {
-        --color-red: #f00;
-        --color-green: #0f0;
-        --breakpoint-sm: 640px;
-      }
-
-      @config "./plugin.js";
-
-      @tailwind utilities;
-
-      @utility custom {
-        color: red;
-      }
-    `,
-    {
-      async loadModule(id, base) {
-        return {
-          path: '',
-          base,
-          module: { prefix: 'tw' },
+  expect(
+    await run(
+      ['wat:custom'],
+      css`
+        @theme prefix(wat) {
+          --color-red: #f00;
+          --color-green: #0f0;
+          --breakpoint-sm: 640px;
         }
-      },
-    },
-  )
 
-  expect(compiler.build(['wat:custom'])).toMatchInlineSnapshot(`
-    ".wat\\:custom {
+        @config "./plugin.js";
+
+        @tailwind utilities;
+
+        @utility custom {
+          color: red;
+        }
+      `,
+      {
+        async loadModule(_id, base) {
+          return {
+            path: '',
+            base,
+            module: { prefix: 'tw' },
+          }
+        },
+      },
+    ),
+  ).toMatchInlineSnapshot(`
+    "
+    .wat\\:custom {
       color: red;
     }
     "
@@ -1353,7 +1414,7 @@ test('a prefix must be letters only', async () => {
         @config "./plugin.js";
       `,
       {
-        async loadModule(id, base) {
+        async loadModule(_id, base) {
           return {
             path: '',
             base,
@@ -1368,37 +1429,38 @@ test('a prefix must be letters only', async () => {
 })
 
 test('important: `#app`', async () => {
-  let input = css`
-    @tailwind utilities;
-    @config "./config.js";
+  expect(
+    await run(
+      ['underline', 'hover:line-through', 'custom'],
+      css`
+        @tailwind utilities;
+        @config "./config.js";
 
-    @utility custom {
+        @utility custom {
+          color: red;
+        }
+      `,
+      {
+        loadModule: async (_id, base) => ({
+          path: '',
+          base,
+          module: { important: '#app' },
+        }),
+      },
+    ),
+  ).toMatchInlineSnapshot(`
+    "
+    #app .custom {
       color: red;
     }
-  `
 
-  let compiler = await compile(input, {
-    loadModule: async (_, base) => ({
-      path: '',
-      base,
-      module: { important: '#app' },
-    }),
-  })
+    #app .underline {
+      text-decoration-line: underline;
+    }
 
-  expect(compiler.build(['underline', 'hover:line-through', 'custom'])).toMatchInlineSnapshot(`
-    "#app {
-      .custom {
-        color: red;
-      }
-      .underline {
-        text-decoration-line: underline;
-      }
-      .hover\\:line-through {
-        &:hover {
-          @media (hover: hover) {
-            text-decoration-line: line-through;
-          }
-        }
+    @media (hover: hover) {
+      #app .hover\\:line-through:hover {
+        text-decoration-line: line-through;
       }
     }
     "
@@ -1406,35 +1468,38 @@ test('important: `#app`', async () => {
 })
 
 test('important: true', async () => {
-  let input = css`
-    @tailwind utilities;
-    @config "./config.js";
+  expect(
+    await run(
+      ['underline', 'hover:line-through', 'custom'],
+      css`
+        @tailwind utilities;
+        @config "./config.js";
 
-    @utility custom {
-      color: red;
-    }
-  `
-
-  let compiler = await compile(input, {
-    loadModule: async (_, base) => ({
-      path: '',
-      base,
-      module: { important: true },
-    }),
-  })
-
-  expect(compiler.build(['underline', 'hover:line-through', 'custom'])).toMatchInlineSnapshot(`
-    ".custom {
+        @utility custom {
+          color: red;
+        }
+      `,
+      {
+        loadModule: async (_id, base) => ({
+          path: '',
+          base,
+          module: { important: true },
+        }),
+      },
+    ),
+  ).toMatchInlineSnapshot(`
+    "
+    .custom {
       color: red !important;
     }
+
     .underline {
       text-decoration-line: underline !important;
     }
-    .hover\\:line-through {
-      &:hover {
-        @media (hover: hover) {
-          text-decoration-line: line-through !important;
-        }
+
+    @media (hover: hover) {
+      .hover\\:line-through:hover {
+        text-decoration-line: line-through !important;
       }
     }
     "
@@ -1442,43 +1507,45 @@ test('important: true', async () => {
 })
 
 test('blocklisted candidates are not generated', async () => {
-  let compiler = await compile(
-    css`
-      @theme reference {
-        --color-white: #fff;
-        --breakpoint-md: 48rem;
+  let input = css`
+    @theme reference {
+      --color-white: #fff;
+      --breakpoint-md: 48rem;
+    }
+    @tailwind utilities;
+    @config "./config.js";
+  `
+
+  let options: Partial<Parameters<typeof compile>[1]> = {
+    async loadModule(_id, base) {
+      return {
+        path: '',
+        base,
+        module: {
+          blocklist: ['bg-white'],
+        },
       }
-      @tailwind utilities;
-      @config "./config.js";
-    `,
-    {
-      async loadModule(id, base) {
-        return {
-          path: '',
-          base,
-          module: {
-            blocklist: ['bg-white'],
-          },
-        }
-      },
     },
-  )
+  }
 
   // bg-white will not get generated
-  expect(compiler.build(['bg-white'])).toEqual('')
+  expect(await run(['bg-white'], input, options)).toEqual('')
 
   // underline will as will md:bg-white
-  expect(compiler.build(['underline', 'bg-white', 'md:bg-white'])).toMatchInlineSnapshot(`
-    ".underline {
-      text-decoration-line: underline;
-    }
-    .md\\:bg-white {
-      @media (width >= 48rem) {
-        background-color: var(--color-white, #fff);
+  expect(await run(['underline', 'bg-white', 'md:bg-white'], input, options))
+    .toMatchInlineSnapshot(`
+      "
+      .underline {
+        text-decoration-line: underline;
       }
-    }
-    "
-  `)
+
+      @media (min-width: 48rem) {
+        .md\\:bg-white {
+          background-color: var(--color-white, #fff);
+        }
+      }
+      "
+    `)
 })
 
 test('blocklisted candidates cannot be used with `@apply`', async () => {
@@ -1496,7 +1563,7 @@ test('blocklisted candidates cannot be used with `@apply`', async () => {
         }
       `,
       {
-        async loadModule(id, base) {
+        async loadModule(_id, base) {
           return {
             path: '',
             base,
@@ -1513,7 +1580,7 @@ test('blocklisted candidates cannot be used with `@apply`', async () => {
 })
 
 test('old theme values are merged with their renamed counterparts in the CSS theme', async () => {
-  let didCallPluginFn = vi.fn()
+  using didCallPluginFn = vi.fn()
 
   await compile(
     css`
@@ -1549,7 +1616,7 @@ test('old theme values are merged with their renamed counterparts in the CSS the
       @plugin "./plugin.js";
     `,
     {
-      async loadModule(id, base) {
+      async loadModule(_id, base) {
         return {
           path: '',
           base,
@@ -1637,50 +1704,55 @@ test('old theme values are merged with their renamed counterparts in the CSS the
 })
 
 test('handles setting theme keys to null', async () => {
-  let compiler = await compile(
-    css`
-      @theme default {
-        --color-red-50: oklch(0.971 0.013 17.38);
-        --color-red-100: oklch(0.936 0.032 17.717);
-      }
-      @config "./my-config.js";
-      @tailwind utilities;
-      @theme {
-        --color-red-100: oklch(0.936 0.032 17.717);
-        --color-red-200: oklch(0.885 0.062 18.334);
-      }
-    `,
-    {
-      loadModule: async () => {
-        return {
-          module: {
-            theme: {
-              extend: {
-                colors: {
-                  red: null,
+  expect(
+    await run(
+      ['bg-red-50', 'bg-red-100', 'bg-red-200'],
+      css`
+        @theme default {
+          --color-red-50: oklch(0.971 0.013 17.38);
+          --color-red-100: oklch(0.936 0.032 17.717);
+        }
+        @config "./my-config.js";
+        @tailwind utilities;
+        @theme {
+          --color-red-100: oklch(0.936 0.032 17.717);
+          --color-red-200: oklch(0.885 0.062 18.334);
+        }
+      `,
+      {
+        loadModule: async () => {
+          return {
+            module: {
+              theme: {
+                extend: {
+                  colors: {
+                    red: null,
+                  },
                 },
               },
             },
-          },
-          base: '/root',
-          path: '',
-        }
+            base: '/root',
+            path: '',
+          }
+        },
       },
-    },
-  )
-
-  expect(compiler.build(['bg-red-50', 'bg-red-100', 'bg-red-200'])).toMatchInlineSnapshot(`
-    ":root, :host {
-      --color-red-50: oklch(0.971 0.013 17.38);
-      --color-red-100: oklch(0.936 0.032 17.717);
-      --color-red-200: oklch(0.885 0.062 18.334);
+    ),
+  ).toMatchInlineSnapshot(`
+    "
+    :root, :host {
+      --color-red-50: oklch(97.1% .013 17.38);
+      --color-red-100: oklch(93.6% .032 17.717);
+      --color-red-200: oklch(88.5% .062 18.334);
     }
+
     .bg-red-50 {
       background-color: var(--color-red-50);
     }
+
     .bg-red-100 {
       background-color: var(--color-red-100);
     }
+
     .bg-red-200 {
       background-color: var(--color-red-200);
     }
@@ -1689,30 +1761,32 @@ test('handles setting theme keys to null', async () => {
 })
 
 test('The theme() function does not try indexing into strings', async () => {
-  let compiler = await compile(css`
-    @theme default {
-      --color-what-50: #f00;
-      --color-what-950: #f00;
-    }
+  expect(
+    await compileCss(css`
+      @theme default {
+        --color-what-50: #f00;
+        --color-what-950: #f00;
+      }
 
-    @theme {
-      /*
+      @theme {
+        /*
        * The value of this theme variable is > 50 chars because colors.what.50 was previously
        * indexing the string: "light-dark(theme(colors.what.950), theme(colors.what.50))"
        * because the resolved config contained an object with a "what" key that was that string
        */
-      --color-what: light-dark(theme(colors.what.950), theme(colors.what.50));
+        --color-what: light-dark(theme(colors.what.950), theme(colors.what.50));
+      }
+
+      @source inline("text-what");
+
+      @tailwind utilities;
+    `),
+  ).toMatchInlineSnapshot(`
+    "
+    :root, :host {
+      --color-what: red;
     }
 
-    @source inline("text-what");
-
-    @tailwind utilities;
-  `)
-
-  expect(compiler.build([])).toMatchInlineSnapshot(`
-    ":root, :host {
-      --color-what: light-dark(#f00, #f00);
-    }
     .text-what {
       color: var(--color-what);
     }
@@ -1721,50 +1795,52 @@ test('The theme() function does not try indexing into strings', async () => {
 })
 
 test('camel case keys are preserved', async () => {
-  let compiler = await compile(
-    css`
-      @tailwind utilities;
-      @theme {
-        --color-blue-green: slate;
-      }
-      @config "./plugin.js";
-    `,
-    {
-      loadModule: async () => {
-        return {
-          base: '/',
-          path: '',
-          module: {
-            theme: {
-              extend: {
-                backgroundColor: {
-                  lightGreen: '#c0ffee',
+  expect(
+    await run(
+      [
+        // From CSS
+        'bg-blue-green', // should be output
+        'bg-blueGreen', // should not
+
+        // From JS config
+        'bg-light-green', // should not be output
+        'bg-lightGreen', // should be
+      ],
+      css`
+        @tailwind utilities;
+        @theme {
+          --color-blue-green: slate;
+        }
+        @config "./plugin.js";
+      `,
+      {
+        loadModule: async () => {
+          return {
+            base: '/',
+            path: '',
+            module: {
+              theme: {
+                extend: {
+                  backgroundColor: {
+                    lightGreen: '#c0ffee',
+                  },
                 },
               },
             },
-          },
-        }
+          }
+        },
       },
-    },
-  )
-
-  expect(
-    compiler.build([
-      // From CSS
-      'bg-blue-green', // should be output
-      'bg-blueGreen', // should not
-
-      // From JS config
-      'bg-light-green', // should not be output
-      'bg-lightGreen', // should be
-    ]),
+    ),
   ).toMatchInlineSnapshot(`
-    ".bg-blue-green {
+    "
+    .bg-blue-green {
       background-color: var(--color-blue-green);
     }
+
     .bg-lightGreen {
       background-color: #c0ffee;
     }
+
     :root, :host {
       --color-blue-green: slate;
     }
diff --git a/packages/tailwindcss/src/compat/config/create-compat-config.test.ts b/packages/tailwindcss/src/compat/config/create-compat-config.test.ts
new file mode 100644
index 000000000..aa1b21cb7
--- /dev/null
+++ b/packages/tailwindcss/src/compat/config/create-compat-config.test.ts
@@ -0,0 +1,189 @@
+import { describe, expect, test } from 'vitest'
+import { buildDesignSystem } from '../../design-system'
+import { Theme } from '../../theme'
+import { createCompatConfig } from './create-compat-config'
+import { resolveConfig } from './resolve-config'
+
+function buildCompatConfig(cssValues: Record<string, string>) {
+  let theme = new Theme()
+  for (let [key, value] of Object.entries(cssValues)) {
+    theme.add(key, value)
+  }
+  let design = buildDesignSystem(theme)
+
+  let { resolvedConfig } = resolveConfig(design, [
+    { config: createCompatConfig(design.theme), base: '/root', reference: true, src: undefined },
+  ])
+
+  return resolvedConfig
+}
+
+describe('theme namespace lookups', () => {
+  test('a namespace that only defines a bare value resolves to `{ DEFAULT: … }`, not a string', () => {
+    // When the CSS theme only defines `--text` (a single bare value),
+    // `theme('text', {})` used to return the string `'1rem'`.
+    //
+    // Spreading that string, like the compat config does, produced char-indexed
+    // garbage (`{ '0': '1', '1': 'r', … }`) instead of `{ DEFAULT: '1rem' }`.
+    let config = buildCompatConfig({ '--text': '1rem' })
+
+    expect(config.theme?.fontSize?.DEFAULT).toBe('1rem')
+    expect(config.theme?.fontSize).not.toHaveProperty('0')
+  })
+
+  test('a bare value is kept alongside suffixed values in the same namespace', () => {
+    let config = buildCompatConfig({
+      '--text': '1rem',
+      '--text-sm': '0.875rem',
+    })
+
+    expect(config.theme?.fontSize?.DEFAULT).toBe('1rem')
+    expect(config.theme?.fontSize?.sm).toBe('0.875rem')
+  })
+
+  test('a naive spread of a theme namespace in a user config is safe', () => {
+    let theme = new Theme()
+    theme.add('--text', '1rem')
+    let design = buildDesignSystem(theme)
+
+    let { resolvedConfig } = resolveConfig(design, [
+      {
+        config: {
+          theme: {
+            extend: {
+              fontSize: ({ theme }: any) => ({ ...theme('text', {}) }),
+            },
+          },
+        },
+        base: '/root',
+        reference: true,
+        src: undefined,
+      },
+    ])
+
+    expect(resolvedConfig.theme?.fontSize?.DEFAULT).toBe('1rem')
+    expect(resolvedConfig.theme?.fontSize).not.toHaveProperty('0')
+  })
+
+  test('namespace root lookups resolve to an object, key lookups resolve to the value', () => {
+    let theme = new Theme()
+    theme.add('--text', '1rem')
+    theme.add('--animate-spin', 'spin 1s linear infinite')
+    let design = buildDesignSystem(theme)
+
+    let root: unknown
+    let rootWithDefault: unknown
+    let leaf: unknown
+
+    resolveConfig(design, [
+      {
+        config: {
+          theme: {
+            extend: {
+              fontSize: ({ theme }: any) => {
+                root = theme('text')
+                rootWithDefault = theme('text', {})
+                leaf = theme('animate.spin')
+                return {}
+              },
+            },
+          },
+        },
+        base: '/root',
+        reference: true,
+        src: undefined,
+      },
+    ])
+
+    // A namespace root lookup always resolves to an object, like in v3, even
+    // when the namespace only contains a bare value
+    expect(root).toMatchObject({ DEFAULT: '1rem' })
+    expect(rootWithDefault).toMatchObject({ DEFAULT: '1rem' })
+
+    // Lookups of a specific key resolve to the value itself
+    expect(leaf).toBe('spin 1s linear infinite')
+  })
+
+  test('lookups of a specific key still resolve to the value itself', () => {
+    let theme = new Theme()
+    theme.add('--animate-spin', 'spin 1s linear infinite')
+    let design = buildDesignSystem(theme)
+
+    let { resolvedConfig } = resolveConfig(design, [
+      {
+        config: {
+          theme: {
+            extend: {
+              animation: ({ theme }: any) => ({ spin: theme('animate.spin') }),
+            },
+          },
+        },
+        base: '/root',
+        reference: true,
+        src: undefined,
+      },
+    ])
+
+    expect(resolvedConfig.theme?.animation?.spin).toBe('spin 1s linear infinite')
+  })
+})
+
+describe('createCompatConfig namespace mappings', () => {
+  test('fontSize maps from CSS text namespace', () => {
+    let config = buildCompatConfig({ '--text-base': '1rem' })
+    expect(config.theme?.fontSize?.base).toBe('1rem')
+  })
+
+  test('boxShadow maps from CSS shadow namespace', () => {
+    let config = buildCompatConfig({ '--shadow-md': '0 4px 6px #000' })
+    expect(config.theme?.boxShadow?.md).toBe('0 4px 6px #000')
+  })
+
+  test('animation maps from CSS animate namespace', () => {
+    let config = buildCompatConfig({ '--animate-spin': 'spin 1s linear infinite' })
+    expect(config.theme?.animation?.spin).toBe('spin 1s linear infinite')
+  })
+
+  test('aspectRatio maps from CSS aspect namespace', () => {
+    let config = buildCompatConfig({ '--aspect-square': '1 / 1' })
+    expect(config.theme?.aspectRatio?.square).toBe('1 / 1')
+  })
+
+  test('borderRadius maps from CSS radius namespace', () => {
+    let config = buildCompatConfig({ '--radius-lg': '0.5rem' })
+    expect(config.theme?.borderRadius?.lg).toBe('0.5rem')
+  })
+
+  test('screens maps from CSS breakpoint namespace', () => {
+    let config = buildCompatConfig({ '--breakpoint-sm': '640px' })
+    expect(config.theme?.screens?.sm).toBe('640px')
+  })
+
+  test('letterSpacing maps from CSS tracking namespace', () => {
+    let config = buildCompatConfig({ '--tracking-wide': '0.025em' })
+    expect(config.theme?.letterSpacing?.wide).toBe('0.025em')
+  })
+
+  test('lineHeight maps from CSS leading namespace', () => {
+    let config = buildCompatConfig({ '--leading-relaxed': '1.75' })
+    expect(config.theme?.lineHeight?.relaxed).toBe('1.75')
+  })
+
+  test('maxWidth maps from the container namespace in the default theme', () => {
+    let config = buildCompatConfig({})
+    // The default theme has container.sm = '24rem'
+    expect(config.theme?.maxWidth?.sm).toBe('24rem')
+  })
+
+  test('transitionDuration gets DEFAULT from --default-transition-duration', () => {
+    let config = buildCompatConfig({ '--default-transition-duration': '150ms' })
+    expect(config.theme?.transitionDuration?.DEFAULT).toBe('150ms')
+  })
+
+  test('transitionTimingFunction gets DEFAULT from --default-transition-timing-function', () => {
+    let config = buildCompatConfig({
+      '--default-transition-timing-function': 'cubic-bezier(0.4, 0, 0.2, 1)',
+    })
+    expect(config.theme?.transitionTimingFunction?.DEFAULT).toBe('cubic-bezier(0.4, 0, 0.2, 1)')
+  })
+})
diff --git a/packages/tailwindcss/src/compat/container-config.test.ts b/packages/tailwindcss/src/compat/container-config.test.ts
index 22841efbf..39a12557c 100644
--- a/packages/tailwindcss/src/compat/container-config.test.ts
+++ b/packages/tailwindcss/src/compat/container-config.test.ts
@@ -1,55 +1,74 @@
 import { expect, test } from 'vitest'
-import { compile } from '..'
+import { run } from '../test-utils/run'
 
 const css = String.raw
 
 test('creates a custom utility to extend the built-in container', async () => {
-  let input = css`
-    @theme default {
-      --breakpoint-sm: 40rem;
-      --breakpoint-md: 48rem;
-      --breakpoint-lg: 64rem;
-      --breakpoint-xl: 80rem;
-      --breakpoint-2xl: 96rem;
-    }
-    @config "./config.js";
-    @tailwind utilities;
-  `
-
-  let compiler = await compile(input, {
-    loadModule: async () => ({
-      module: {
-        theme: {
-          container: {
-            center: true,
-            padding: '2rem',
+  expect(
+    await run(
+      ['container'],
+      css`
+        @theme default {
+          --breakpoint-sm: 40rem;
+          --breakpoint-md: 48rem;
+          --breakpoint-lg: 64rem;
+          --breakpoint-xl: 80rem;
+          --breakpoint-2xl: 96rem;
+        }
+        @config "./config.js";
+        @tailwind utilities;
+      `,
+      {
+        loadModule: async () => ({
+          module: {
+            theme: {
+              container: {
+                center: true,
+                padding: '2rem',
+              },
+            },
           },
-        },
+          base: '/root',
+          path: '',
+        }),
       },
-      base: '/root',
-      path: '',
-    }),
-  })
-
-  expect(compiler.build(['container'])).toMatchInlineSnapshot(`
-    ".container {
+    ),
+  ).toMatchInlineSnapshot(`
+    "
+    .container {
       width: 100%;
-      @media (width >= 40rem) {
+    }
+
+    @media (min-width: 40rem) {
+      .container {
         max-width: 40rem;
       }
-      @media (width >= 48rem) {
+    }
+
+    @media (min-width: 48rem) {
+      .container {
         max-width: 48rem;
       }
-      @media (width >= 64rem) {
+    }
+
+    @media (min-width: 64rem) {
+      .container {
         max-width: 64rem;
       }
-      @media (width >= 80rem) {
+    }
+
+    @media (min-width: 80rem) {
+      .container {
         max-width: 80rem;
       }
-      @media (width >= 96rem) {
+    }
+
+    @media (min-width: 96rem) {
+      .container {
         max-width: 96rem;
       }
     }
+
     .container {
       margin-inline: auto;
       padding-inline: 2rem;
@@ -59,62 +78,87 @@ test('creates a custom utility to extend the built-in container', async () => {
 })
 
 test('allows padding to be defined at custom breakpoints', async () => {
-  let input = css`
-    @theme default {
-      --breakpoint-sm: 40rem;
-      --breakpoint-md: 48rem;
-      --breakpoint-lg: 64rem;
-      --breakpoint-xl: 80rem;
-      --breakpoint-2xl: 96rem;
-    }
-    @config "./config.js";
-    @tailwind utilities;
-  `
-
-  let compiler = await compile(input, {
-    loadModule: async () => ({
-      module: {
-        theme: {
-          container: {
-            padding: {
-              // The order here is messed up on purpose
-              '2xl': '3rem',
-              DEFAULT: '1rem',
-              lg: '2rem',
+  expect(
+    await run(
+      ['container'],
+      css`
+        @theme default {
+          --breakpoint-sm: 40rem;
+          --breakpoint-md: 48rem;
+          --breakpoint-lg: 64rem;
+          --breakpoint-xl: 80rem;
+          --breakpoint-2xl: 96rem;
+        }
+        @config "./config.js";
+        @tailwind utilities;
+      `,
+      {
+        loadModule: async () => ({
+          module: {
+            theme: {
+              container: {
+                padding: {
+                  // The order here is messed up on purpose
+                  '2xl': '3rem',
+                  DEFAULT: '1rem',
+                  lg: '2rem',
+                },
+              },
             },
           },
-        },
+          base: '/root',
+          path: '',
+        }),
       },
-      base: '/root',
-      path: '',
-    }),
-  })
-
-  expect(compiler.build(['container'])).toMatchInlineSnapshot(`
-    ".container {
+    ),
+  ).toMatchInlineSnapshot(`
+    "
+    .container {
       width: 100%;
-      @media (width >= 40rem) {
+    }
+
+    @media (min-width: 40rem) {
+      .container {
         max-width: 40rem;
       }
-      @media (width >= 48rem) {
+    }
+
+    @media (min-width: 48rem) {
+      .container {
         max-width: 48rem;
       }
-      @media (width >= 64rem) {
+    }
+
+    @media (min-width: 64rem) {
+      .container {
         max-width: 64rem;
       }
-      @media (width >= 80rem) {
+    }
+
+    @media (min-width: 80rem) {
+      .container {
         max-width: 80rem;
       }
-      @media (width >= 96rem) {
+    }
+
+    @media (min-width: 96rem) {
+      .container {
         max-width: 96rem;
       }
     }
+
     .container {
       padding-inline: 1rem;
-      @media (width >= 64rem) {
+    }
+
+    @media (min-width: 64rem) {
+      .container {
         padding-inline: 2rem;
       }
-      @media (width >= 96rem) {
+    }
+
+    @media (min-width: 96rem) {
+      .container {
         padding-inline: 3rem;
       }
     }
@@ -123,62 +167,87 @@ test('allows padding to be defined at custom breakpoints', async () => {
 })
 
 test('allows breakpoints to be overwritten', async () => {
-  let input = css`
-    @theme default {
-      --breakpoint-sm: 40rem;
-      --breakpoint-md: 48rem;
-      --breakpoint-lg: 64rem;
-      --breakpoint-xl: 80rem;
-      --breakpoint-2xl: 96rem;
-    }
-    @config "./config.js";
-    @tailwind utilities;
-  `
-
-  let compiler = await compile(input, {
-    loadModule: async () => ({
-      module: {
-        theme: {
-          container: {
-            screens: {
-              xl: '1280px',
-              '2xl': '1536px',
+  expect(
+    await run(
+      ['container'],
+      css`
+        @theme default {
+          --breakpoint-sm: 40rem;
+          --breakpoint-md: 48rem;
+          --breakpoint-lg: 64rem;
+          --breakpoint-xl: 80rem;
+          --breakpoint-2xl: 96rem;
+        }
+        @config "./config.js";
+        @tailwind utilities;
+      `,
+      {
+        loadModule: async () => ({
+          module: {
+            theme: {
+              container: {
+                screens: {
+                  xl: '1280px',
+                  '2xl': '1536px',
+                },
+              },
             },
           },
-        },
+          base: '/root',
+          path: '',
+        }),
       },
-      base: '/root',
-      path: '',
-    }),
-  })
-
-  expect(compiler.build(['container'])).toMatchInlineSnapshot(`
-    ".container {
+    ),
+  ).toMatchInlineSnapshot(`
+    "
+    .container {
       width: 100%;
-      @media (width >= 40rem) {
+    }
+
+    @media (min-width: 40rem) {
+      .container {
         max-width: 40rem;
       }
-      @media (width >= 48rem) {
+    }
+
+    @media (min-width: 48rem) {
+      .container {
         max-width: 48rem;
       }
-      @media (width >= 64rem) {
+    }
+
+    @media (min-width: 64rem) {
+      .container {
         max-width: 64rem;
       }
-      @media (width >= 80rem) {
+    }
+
+    @media (min-width: 80rem) {
+      .container {
         max-width: 80rem;
       }
-      @media (width >= 96rem) {
+    }
+
+    @media (min-width: 96rem) {
+      .container {
         max-width: 96rem;
       }
     }
-    .container {
-      @media (width >= 40rem) {
+
+    @media (min-width: 40rem) {
+      .container {
         max-width: none;
       }
-      @media (width >= 1280px) {
+    }
+
+    @media (min-width: 1280px) {
+      .container {
         max-width: 1280px;
       }
-      @media (width >= 1536px) {
+    }
+
+    @media (min-width: 1536px) {
+      .container {
         max-width: 1536px;
       }
     }
@@ -187,62 +256,84 @@ test('allows breakpoints to be overwritten', async () => {
 })
 
 test('padding applies to custom `container` screens', async () => {
-  let input = css`
-    @theme default {
-      --breakpoint-sm: 40rem;
-      --breakpoint-md: 48rem;
-      --breakpoint-lg: 64rem;
-      --breakpoint-xl: 80rem;
-      --breakpoint-2xl: 96rem;
-    }
-    @config "./config.js";
-    @tailwind utilities;
-  `
-
-  let compiler = await compile(input, {
-    loadModule: async () => ({
-      module: {
-        theme: {
-          container: {
-            padding: {
-              sm: '2rem',
-              md: '3rem',
-            },
-            screens: {
-              md: '48rem',
+  expect(
+    await run(
+      ['container'],
+      css`
+        @theme default {
+          --breakpoint-sm: 40rem;
+          --breakpoint-md: 48rem;
+          --breakpoint-lg: 64rem;
+          --breakpoint-xl: 80rem;
+          --breakpoint-2xl: 96rem;
+        }
+        @config "./config.js";
+        @tailwind utilities;
+      `,
+      {
+        loadModule: async () => ({
+          module: {
+            theme: {
+              container: {
+                padding: {
+                  sm: '2rem',
+                  md: '3rem',
+                },
+                screens: {
+                  md: '48rem',
+                },
+              },
             },
           },
-        },
+          base: '/root',
+          path: '',
+        }),
       },
-      base: '/root',
-      path: '',
-    }),
-  })
-
-  expect(compiler.build(['container'])).toMatchInlineSnapshot(`
-    ".container {
+    ),
+  ).toMatchInlineSnapshot(`
+    "
+    .container {
       width: 100%;
-      @media (width >= 40rem) {
+    }
+
+    @media (min-width: 40rem) {
+      .container {
         max-width: 40rem;
       }
-      @media (width >= 48rem) {
+    }
+
+    @media (min-width: 48rem) {
+      .container {
         max-width: 48rem;
       }
-      @media (width >= 64rem) {
+    }
+
+    @media (min-width: 64rem) {
+      .container {
         max-width: 64rem;
       }
-      @media (width >= 80rem) {
+    }
+
+    @media (min-width: 80rem) {
+      .container {
         max-width: 80rem;
       }
-      @media (width >= 96rem) {
+    }
+
+    @media (min-width: 96rem) {
+      .container {
         max-width: 96rem;
       }
     }
-    .container {
-      @media (width >= 40rem) {
+
+    @media (min-width: 40rem) {
+      .container {
         max-width: none;
       }
-      @media (width >= 48rem) {
+    }
+
+    @media (min-width: 48rem) {
+      .container {
         max-width: 48rem;
         padding-inline: 3rem;
       }
@@ -252,59 +343,81 @@ test('padding applies to custom `container` screens', async () => {
 })
 
 test("an empty `screen` config will undo all custom media screens and won't apply any breakpoint-specific padding", async () => {
-  let input = css`
-    @theme default {
-      --breakpoint-sm: 40rem;
-      --breakpoint-md: 48rem;
-      --breakpoint-lg: 64rem;
-      --breakpoint-xl: 80rem;
-      --breakpoint-2xl: 96rem;
-    }
-    @config "./config.js";
-    @tailwind utilities;
-  `
-
-  let compiler = await compile(input, {
-    loadModule: async () => ({
-      module: {
-        theme: {
-          container: {
-            padding: {
-              DEFAULT: '1rem',
-              sm: '2rem',
-              md: '3rem',
+  expect(
+    await run(
+      ['container'],
+      css`
+        @theme default {
+          --breakpoint-sm: 40rem;
+          --breakpoint-md: 48rem;
+          --breakpoint-lg: 64rem;
+          --breakpoint-xl: 80rem;
+          --breakpoint-2xl: 96rem;
+        }
+        @config "./config.js";
+        @tailwind utilities;
+      `,
+      {
+        loadModule: async () => ({
+          module: {
+            theme: {
+              container: {
+                padding: {
+                  DEFAULT: '1rem',
+                  sm: '2rem',
+                  md: '3rem',
+                },
+                screens: {},
+              },
             },
-            screens: {},
           },
-        },
+          base: '/root',
+          path: '',
+        }),
       },
-      base: '/root',
-      path: '',
-    }),
-  })
-
-  expect(compiler.build(['container'])).toMatchInlineSnapshot(`
-    ".container {
+    ),
+  ).toMatchInlineSnapshot(`
+    "
+    .container {
       width: 100%;
-      @media (width >= 40rem) {
+    }
+
+    @media (min-width: 40rem) {
+      .container {
         max-width: 40rem;
       }
-      @media (width >= 48rem) {
+    }
+
+    @media (min-width: 48rem) {
+      .container {
         max-width: 48rem;
       }
-      @media (width >= 64rem) {
+    }
+
+    @media (min-width: 64rem) {
+      .container {
         max-width: 64rem;
       }
-      @media (width >= 80rem) {
+    }
+
+    @media (min-width: 80rem) {
+      .container {
         max-width: 80rem;
       }
-      @media (width >= 96rem) {
+    }
+
+    @media (min-width: 96rem) {
+      .container {
         max-width: 96rem;
       }
     }
+
     .container {
       padding-inline: 1rem;
-      @media (width >= 40rem) {
+    }
+
+    @media (min-width: 40rem) {
+      .container {
         max-width: none;
       }
     }
@@ -313,46 +426,50 @@ test("an empty `screen` config will undo all custom media screens and won't appl
 })
 
 test('legacy container component does not interfere with new --container variables', async () => {
-  let input = css`
-    @theme default {
-      --container-3xs: 16rem;
-      --container-2xs: 18rem;
-      --container-xs: 20rem;
-      --container-sm: 24rem;
-      --container-md: 28rem;
-      --container-lg: 32rem;
-      --container-xl: 36rem;
-      --container-2xl: 42rem;
-      --container-3xl: 48rem;
-      --container-4xl: 56rem;
-      --container-5xl: 64rem;
-      --container-6xl: 72rem;
-      --container-7xl: 80rem;
-      --container-prose: 65ch;
-    }
-    @config "./config.js";
-    @tailwind utilities;
-  `
-
-  let compiler = await compile(input, {
-    loadModule: async () => ({
-      module: {
-        theme: {
-          container: {
-            center: true,
-            padding: '2rem',
+  expect(
+    await run(
+      ['max-w-sm'],
+      css`
+        @theme default {
+          --container-3xs: 16rem;
+          --container-2xs: 18rem;
+          --container-xs: 20rem;
+          --container-sm: 24rem;
+          --container-md: 28rem;
+          --container-lg: 32rem;
+          --container-xl: 36rem;
+          --container-2xl: 42rem;
+          --container-3xl: 48rem;
+          --container-4xl: 56rem;
+          --container-5xl: 64rem;
+          --container-6xl: 72rem;
+          --container-7xl: 80rem;
+          --container-prose: 65ch;
+        }
+        @config "./config.js";
+        @tailwind utilities;
+      `,
+      {
+        loadModule: async () => ({
+          module: {
+            theme: {
+              container: {
+                center: true,
+                padding: '2rem',
+              },
+            },
           },
-        },
+          base: '/root',
+          path: '',
+        }),
       },
-      base: '/root',
-      path: '',
-    }),
-  })
-
-  expect(compiler.build(['max-w-sm'])).toMatchInlineSnapshot(`
-    ":root, :host {
+    ),
+  ).toMatchInlineSnapshot(`
+    "
+    :root, :host {
       --container-sm: 24rem;
     }
+
     .max-w-sm {
       max-width: var(--container-sm);
     }
@@ -361,108 +478,168 @@ test('legacy container component does not interfere with new --container variabl
 })
 
 test('combines custom padding and screen overwrites', async () => {
-  let input = css`
-    @theme default {
-      --breakpoint-sm: 40rem;
-      --breakpoint-md: 48rem;
-      --breakpoint-lg: 64rem;
-      --breakpoint-xl: 80rem;
-      --breakpoint-2xl: 96rem;
-    }
-    @config "./config.js";
-    @tailwind utilities;
-  `
-
-  let compiler = await compile(input, {
-    loadModule: async () => ({
-      module: {
-        theme: {
-          container: {
-            center: true,
-            padding: {
-              DEFAULT: '2rem',
-              '2xl': '4rem',
-            },
-            screens: {
-              md: '48rem', // Matches a default --breakpoint
-              xl: '1280px',
-              '2xl': '1536px',
+  expect(
+    await run(
+      ['container', '!container'],
+      css`
+        @theme default {
+          --breakpoint-sm: 40rem;
+          --breakpoint-md: 48rem;
+          --breakpoint-lg: 64rem;
+          --breakpoint-xl: 80rem;
+          --breakpoint-2xl: 96rem;
+        }
+        @config "./config.js";
+        @tailwind utilities;
+      `,
+      {
+        loadModule: async () => ({
+          module: {
+            theme: {
+              container: {
+                center: true,
+                padding: {
+                  DEFAULT: '2rem',
+                  '2xl': '4rem',
+                },
+                screens: {
+                  md: '48rem', // Matches a default --breakpoint
+                  xl: '1280px',
+                  '2xl': '1536px',
+                },
+              },
             },
           },
-        },
+          base: '/root',
+          path: '',
+        }),
       },
-      base: '/root',
-      path: '',
-    }),
-  })
-
-  expect(compiler.build(['container', '!container'])).toMatchInlineSnapshot(`
-    ".\\!container {
+    ),
+  ).toMatchInlineSnapshot(`
+    "
+    .\\!container {
       width: 100% !important;
-      @media (width >= 40rem) {
+    }
+
+    @media (min-width: 40rem) {
+      .\\!container {
         max-width: 40rem !important;
       }
-      @media (width >= 48rem) {
+    }
+
+    @media (min-width: 48rem) {
+      .\\!container {
         max-width: 48rem !important;
       }
-      @media (width >= 64rem) {
+    }
+
+    @media (min-width: 64rem) {
+      .\\!container {
         max-width: 64rem !important;
       }
-      @media (width >= 80rem) {
+    }
+
+    @media (min-width: 80rem) {
+      .\\!container {
         max-width: 80rem !important;
       }
-      @media (width >= 96rem) {
+    }
+
+    @media (min-width: 96rem) {
+      .\\!container {
         max-width: 96rem !important;
       }
     }
+
     .container {
       width: 100%;
-      @media (width >= 40rem) {
+    }
+
+    @media (min-width: 40rem) {
+      .container {
         max-width: 40rem;
       }
-      @media (width >= 48rem) {
+    }
+
+    @media (min-width: 48rem) {
+      .container {
         max-width: 48rem;
       }
-      @media (width >= 64rem) {
+    }
+
+    @media (min-width: 64rem) {
+      .container {
         max-width: 64rem;
       }
-      @media (width >= 80rem) {
+    }
+
+    @media (min-width: 80rem) {
+      .container {
         max-width: 80rem;
       }
-      @media (width >= 96rem) {
+    }
+
+    @media (min-width: 96rem) {
+      .container {
         max-width: 96rem;
       }
     }
+
     .\\!container {
       margin-inline: auto !important;
       padding-inline: 2rem !important;
-      @media (width >= 40rem) {
+    }
+
+    @media (min-width: 40rem) {
+      .\\!container {
         max-width: none !important;
       }
-      @media (width >= 48rem) {
+    }
+
+    @media (min-width: 48rem) {
+      .\\!container {
         max-width: 48rem !important;
       }
-      @media (width >= 1280px) {
+    }
+
+    @media (min-width: 1280px) {
+      .\\!container {
         max-width: 1280px !important;
       }
-      @media (width >= 1536px) {
+    }
+
+    @media (min-width: 1536px) {
+      .\\!container {
         max-width: 1536px !important;
         padding-inline: 4rem !important;
       }
     }
+
     .container {
       margin-inline: auto;
       padding-inline: 2rem;
-      @media (width >= 40rem) {
+    }
+
+    @media (min-width: 40rem) {
+      .container {
         max-width: none;
       }
-      @media (width >= 48rem) {
+    }
+
+    @media (min-width: 48rem) {
+      .container {
         max-width: 48rem;
       }
-      @media (width >= 1280px) {
+    }
+
+    @media (min-width: 1280px) {
+      .container {
         max-width: 1280px;
       }
-      @media (width >= 1536px) {
+    }
+
+    @media (min-width: 1536px) {
+      .container {
         max-width: 1536px;
         padding-inline: 4rem;
       }
@@ -472,75 +649,106 @@ test('combines custom padding and screen overwrites', async () => {
 })
 
 test('filters out complex breakpoints', async () => {
-  let input = css`
-    @theme default {
-      --breakpoint-sm: 40rem;
-      --breakpoint-md: 48rem;
-      --breakpoint-lg: 64rem;
-      --breakpoint-xl: 80rem;
-      --breakpoint-2xl: 96rem;
-    }
-    @config "./config.js";
-    @tailwind utilities;
-  `
-
-  let compiler = await compile(input, {
-    loadModule: async () => ({
-      module: {
-        theme: {
-          container: {
-            center: true,
-            padding: {
-              DEFAULT: '2rem',
-              '2xl': '4rem',
-            },
-            screens: {
-              sm: '20px',
-              md: { min: '100px' },
-              lg: { max: '200px' },
-              xl: { min: '300px', max: '400px' },
-              '2xl': { raw: 'print' },
+  expect(
+    await run(
+      ['container'],
+      css`
+        @theme default {
+          --breakpoint-sm: 40rem;
+          --breakpoint-md: 48rem;
+          --breakpoint-lg: 64rem;
+          --breakpoint-xl: 80rem;
+          --breakpoint-2xl: 96rem;
+        }
+        @config "./config.js";
+        @tailwind utilities;
+      `,
+      {
+        loadModule: async () => ({
+          module: {
+            theme: {
+              container: {
+                center: true,
+                padding: {
+                  DEFAULT: '2rem',
+                  '2xl': '4rem',
+                },
+                screens: {
+                  sm: '20px',
+                  md: { min: '100px' },
+                  lg: { max: '200px' },
+                  xl: { min: '300px', max: '400px' },
+                  '2xl': { raw: 'print' },
+                },
+              },
             },
           },
-        },
+          base: '/root',
+          path: '',
+        }),
       },
-      base: '/root',
-      path: '',
-    }),
-  })
-
-  expect(compiler.build(['container'])).toMatchInlineSnapshot(`
-    ".container {
+    ),
+  ).toMatchInlineSnapshot(`
+    "
+    .container {
       width: 100%;
-      @media (width >= 40rem) {
+    }
+
+    @media (min-width: 40rem) {
+      .container {
         max-width: 40rem;
       }
-      @media (width >= 48rem) {
+    }
+
+    @media (min-width: 48rem) {
+      .container {
         max-width: 48rem;
       }
-      @media (width >= 64rem) {
+    }
+
+    @media (min-width: 64rem) {
+      .container {
         max-width: 64rem;
       }
-      @media (width >= 80rem) {
+    }
+
+    @media (min-width: 80rem) {
+      .container {
         max-width: 80rem;
       }
-      @media (width >= 96rem) {
+    }
+
+    @media (min-width: 96rem) {
+      .container {
         max-width: 96rem;
       }
     }
+
     .container {
       margin-inline: auto;
       padding-inline: 2rem;
-      @media (width >= 40rem) {
+    }
+
+    @media (min-width: 40rem) {
+      .container {
         max-width: none;
       }
-      @media (width >= 20px) {
+    }
+
+    @media (min-width: 20px) {
+      .container {
         max-width: 20px;
       }
-      @media (width >= 100px) {
+    }
+
+    @media (min-width: 100px) {
+      .container {
         max-width: 100px;
       }
-      @media (width >= 300px) {
+    }
+
+    @media (min-width: 300px) {
+      .container {
         max-width: 300px;
       }
     }
diff --git a/packages/tailwindcss/src/compat/default-theme.ts b/packages/tailwindcss/src/compat/default-theme.ts
index f540e63a2..90e699c1c 100644
--- a/packages/tailwindcss/src/compat/default-theme.ts
+++ b/packages/tailwindcss/src/compat/default-theme.ts
@@ -353,8 +353,13 @@ export default {
   },
   fontFamily: {
     sans: [
-      'ui-sans-serif',
-      'system-ui',
+      '-apple-system',
+      'BlinkMacSystemFont',
+      '"Segoe UI"',
+      'Roboto',
+      '"Helvetica Neue"',
+      '"Noto Sans"',
+      'Arial',
       'sans-serif',
       '"Apple Color Emoji"',
       '"Segoe UI Emoji"',
diff --git a/packages/tailwindcss/src/compat/legacy-utilities.test.ts b/packages/tailwindcss/src/compat/legacy-utilities.test.ts
index 24222f882..c90eae845 100644
--- a/packages/tailwindcss/src/compat/legacy-utilities.test.ts
+++ b/packages/tailwindcss/src/compat/legacy-utilities.test.ts
@@ -1,27 +1,23 @@
 import { expect, test } from 'vitest'
-import { compileCss, run } from '../test-utils/run'
+import { run } from '../test-utils/run'
 
 const css = String.raw
 
 test('bg-gradient-*', async () => {
   expect(
-    await compileCss(
-      css`
-        @tailwind utilities;
-      `,
-      [
-        'bg-gradient-to-t',
-        'bg-gradient-to-tr',
-        'bg-gradient-to-r',
-        'bg-gradient-to-br',
-        'bg-gradient-to-b',
-        'bg-gradient-to-bl',
-        'bg-gradient-to-l',
-        'bg-gradient-to-tl',
-      ],
-    ),
+    await run([
+      'bg-gradient-to-t',
+      'bg-gradient-to-tr',
+      'bg-gradient-to-r',
+      'bg-gradient-to-br',
+      'bg-gradient-to-b',
+      'bg-gradient-to-bl',
+      'bg-gradient-to-l',
+      'bg-gradient-to-tl',
+    ]),
   ).toMatchInlineSnapshot(`
-    ".bg-gradient-to-b {
+    "
+    .bg-gradient-to-b {
       --tw-gradient-position: to bottom in oklab;
       background-image: linear-gradient(var(--tw-gradient-stops));
     }
@@ -59,13 +55,21 @@ test('bg-gradient-*', async () => {
     .bg-gradient-to-tr {
       --tw-gradient-position: to top right in oklab;
       background-image: linear-gradient(var(--tw-gradient-stops));
-    }"
+    }
+    "
   `)
 })
 
 test('max-w-screen', async () => {
   expect(
-    await compileCss(
+    await run(
+      [
+        'max-w-screen-sm',
+        'max-w-screen-md',
+        'max-w-screen-lg',
+        'max-w-screen-xl',
+        'max-w-screen-2xl',
+      ],
       css`
         @theme {
           --breakpoint-sm: 40rem;
@@ -76,16 +80,10 @@ test('max-w-screen', async () => {
         }
         @tailwind utilities;
       `,
-      [
-        'max-w-screen-sm',
-        'max-w-screen-md',
-        'max-w-screen-lg',
-        'max-w-screen-xl',
-        'max-w-screen-2xl',
-      ],
     ),
   ).toMatchInlineSnapshot(`
-    ":root, :host {
+    "
+    :root, :host {
       --breakpoint-sm: 40rem;
       --breakpoint-md: 48rem;
       --breakpoint-lg: 64rem;
@@ -111,7 +109,8 @@ test('max-w-screen', async () => {
 
     .max-w-screen-xl {
       max-width: var(--breakpoint-xl);
-    }"
+    }
+    "
   `)
   expect(
     await run([
@@ -134,7 +133,8 @@ test('max-w-screen', async () => {
 
 test('box-decoration', async () => {
   expect(await run(['decoration-slice', 'decoration-clone'])).toMatchInlineSnapshot(`
-    ".decoration-clone {
+    "
+    .decoration-clone {
       -webkit-box-decoration-break: clone;
       box-decoration-break: clone;
     }
@@ -142,21 +142,25 @@ test('box-decoration', async () => {
     .decoration-slice {
       -webkit-box-decoration-break: slice;
       box-decoration-break: slice;
-    }"
+    }
+    "
   `)
 })
 
 test('overflow-ellipsis', async () => {
   expect(await run(['overflow-ellipsis'])).toMatchInlineSnapshot(`
-    ".overflow-ellipsis {
+    "
+    .overflow-ellipsis {
       text-overflow: ellipsis;
-    }"
+    }
+    "
   `)
 })
 
 test('flex-grow', async () => {
   expect(await run(['flex-grow', 'flex-grow-0', 'flex-grow-[123]'])).toMatchInlineSnapshot(`
-    ".flex-grow {
+    "
+    .flex-grow {
       flex-grow: 1;
     }
 
@@ -166,7 +170,8 @@ test('flex-grow', async () => {
 
     .flex-grow-\\[123\\] {
       flex-grow: 123;
-    }"
+    }
+    "
   `)
   expect(
     await run([
@@ -185,7 +190,8 @@ test('flex-grow', async () => {
 
 test('flex-shrink', async () => {
   expect(await run(['flex-shrink', 'flex-shrink-0', 'flex-shrink-[123]'])).toMatchInlineSnapshot(`
-    ".flex-shrink {
+    "
+    .flex-shrink {
       flex-shrink: 1;
     }
 
@@ -195,7 +201,8 @@ test('flex-shrink', async () => {
 
     .flex-shrink-\\[123\\] {
       flex-shrink: 123;
-    }"
+    }
+    "
   `)
   expect(
     await run([
@@ -214,14 +221,7 @@ test('flex-shrink', async () => {
 
 test('start', async () => {
   expect(
-    await compileCss(
-      css`
-        @theme {
-          --spacing-4: 1rem;
-          --inset-shadowned: 1940px;
-        }
-        @tailwind utilities;
-      `,
+    await run(
       [
         'start-shadowned',
         'start-auto',
@@ -232,15 +232,23 @@ test('start', async () => {
         '-start-4',
         'start-[4px]',
       ],
+      css`
+        @theme {
+          --spacing: 0.25rem;
+          --inset-shadowned: 1940px;
+        }
+        @tailwind utilities;
+      `,
     ),
   ).toMatchInlineSnapshot(`
-    ":root, :host {
-      --spacing-4: 1rem;
+    "
+    :root, :host {
+      --spacing: .25rem;
       --inset-shadowned: 1940px;
     }
 
     .-start-4 {
-      inset-inline-start: calc(var(--spacing-4) * -1);
+      inset-inline-start: calc(var(--spacing) * -4);
     }
 
     .-start-full {
@@ -252,7 +260,7 @@ test('start', async () => {
     }
 
     .start-4 {
-      inset-inline-start: var(--spacing-4);
+      inset-inline-start: calc(var(--spacing) * 4);
     }
 
     .start-\\[4px\\] {
@@ -269,17 +277,11 @@ test('start', async () => {
 
     .start-shadowned {
       inset-inline-start: var(--inset-shadowned);
-    }"
+    }
+    "
   `)
   expect(
-    await compileCss(
-      css`
-        @theme reference {
-          --spacing-4: 1rem;
-          --inset-shadow-sm: inset 0 1px 1px rgb(0 0 0 / 0.05);
-        }
-        @tailwind utilities;
-      `,
+    await run(
       [
         'start-shadow-sm',
         'start',
@@ -295,20 +297,20 @@ test('start', async () => {
         '-start-4/foo',
         'start-[4px]/foo',
       ],
+      css`
+        @theme reference {
+          --spacing: 0.25rem;
+          --inset-shadow-sm: inset 0 1px 1px rgb(0 0 0 / 0.05);
+        }
+        @tailwind utilities;
+      `,
     ),
   ).toEqual('')
 })
 
 test('end', async () => {
   expect(
-    await compileCss(
-      css`
-        @theme {
-          --spacing-4: 1rem;
-          --inset-shadowned: 1940px;
-        }
-        @tailwind utilities;
-      `,
+    await run(
       [
         'end-shadowned',
         'end-auto',
@@ -319,15 +321,23 @@ test('end', async () => {
         '-end-4',
         'end-[4px]',
       ],
+      css`
+        @theme {
+          --spacing: 0.25rem;
+          --inset-shadowned: 1940px;
+        }
+        @tailwind utilities;
+      `,
     ),
   ).toMatchInlineSnapshot(`
-    ":root, :host {
-      --spacing-4: 1rem;
+    "
+    :root, :host {
+      --spacing: .25rem;
       --inset-shadowned: 1940px;
     }
 
     .-end-4 {
-      inset-inline-end: calc(var(--spacing-4) * -1);
+      inset-inline-end: calc(var(--spacing) * -4);
     }
 
     .-end-full {
@@ -339,7 +349,7 @@ test('end', async () => {
     }
 
     .end-4 {
-      inset-inline-end: var(--spacing-4);
+      inset-inline-end: calc(var(--spacing) * 4);
     }
 
     .end-\\[4px\\] {
@@ -356,17 +366,11 @@ test('end', async () => {
 
     .end-shadowned {
       inset-inline-end: var(--inset-shadowned);
-    }"
+    }
+    "
   `)
   expect(
-    await compileCss(
-      css`
-        @theme reference {
-          --spacing-4: 1rem;
-          --inset-shadow-sm: inset 0 1px 1px rgb(0 0 0 / 0.05);
-        }
-        @tailwind utilities;
-      `,
+    await run(
       [
         'end-shadow-sm',
         'end',
@@ -382,6 +386,13 @@ test('end', async () => {
         '-end-4/foo',
         'end-[4px]/foo',
       ],
+      css`
+        @theme reference {
+          --spacing: 0.25rem;
+          --inset-shadow-sm: inset 0 1px 1px rgb(0 0 0 / 0.05);
+        }
+        @tailwind utilities;
+      `,
     ),
   ).toEqual('')
 })
diff --git a/packages/tailwindcss/src/compat/legacy-utilities.ts b/packages/tailwindcss/src/compat/legacy-utilities.ts
index dc53e4217..8e7829035 100644
--- a/packages/tailwindcss/src/compat/legacy-utilities.ts
+++ b/packages/tailwindcss/src/compat/legacy-utilities.ts
@@ -126,12 +126,7 @@ export function registerLegacyUtilities(designSystem: DesignSystem) {
 
     function handleInset({ negative }: { negative: boolean }) {
       return (candidate: Extract<import('../candidate').Candidate, { kind: 'functional' }>) => {
-        if (!candidate.value) {
-          if (candidate.modifier) return
-          let value = designSystem.theme.resolve(null, ['--inset', '--spacing'])
-          if (value === null) return
-          return [decl(property, negative ? `calc(${value} * -1)` : value)]
-        }
+        if (candidate.value === null) return
 
         if (candidate.value.kind === 'arbitrary') {
           if (candidate.modifier) return
diff --git a/packages/tailwindcss/src/compat/plugin-api.test.ts b/packages/tailwindcss/src/compat/plugin-api.test.ts
index cc410995b..5fcacb5cd 100644
--- a/packages/tailwindcss/src/compat/plugin-api.test.ts
+++ b/packages/tailwindcss/src/compat/plugin-api.test.ts
@@ -1,7 +1,7 @@
 import { describe, expect, test, vi } from 'vitest'
 import { compile } from '..'
 import plugin from '../plugin'
-import { optimizeCss } from '../test-utils/run'
+import { compileCss, run } from '../test-utils/run'
 import defaultTheme from './default-theme'
 import type { CssInJs, PluginAPI } from './plugin-api'
 
@@ -9,58 +9,61 @@ const css = String.raw
 
 describe('theme', async () => {
   test('plugin theme can contain objects', async () => {
-    let input = css`
-      @tailwind utilities;
-      @plugin "my-plugin";
-    `
-
-    let compiler = await compile(input, {
-      loadModule: async (id, base) => {
-        return {
-          path: '',
-          base,
-          module: plugin(
-            function ({ addBase, theme }) {
-              addBase({
-                '@keyframes enter': theme('keyframes.enter'),
-                '@keyframes exit': theme('keyframes.exit'),
-              })
-            },
-            {
-              theme: {
-                extend: {
-                  keyframes: {
-                    enter: {
-                      from: {
-                        opacity: 'var(--tw-enter-opacity, 1)',
-                        transform:
-                          'translate3d(var(--tw-enter-translate-x, 0), var(--tw-enter-translate-y, 0), 0) scale3d(var(--tw-enter-scale, 1), var(--tw-enter-scale, 1), var(--tw-enter-scale, 1)) rotate(var(--tw-enter-rotate, 0))',
-                      },
-                    },
-                    exit: {
-                      to: {
-                        opacity: 'var(--tw-exit-opacity, 1)',
-                        transform:
-                          'translate3d(var(--tw-exit-translate-x, 0), var(--tw-exit-translate-y, 0), 0) scale3d(var(--tw-exit-scale, 1), var(--tw-exit-scale, 1), var(--tw-exit-scale, 1)) rotate(var(--tw-exit-rotate, 0))',
+    expect(
+      await compileCss(
+        css`
+          @tailwind utilities;
+          @plugin "my-plugin";
+        `,
+        {
+          loadModule: async (_id, base) => {
+            return {
+              path: '',
+              base,
+              module: plugin(
+                function ({ addBase, theme }) {
+                  addBase({
+                    '@keyframes enter': theme('keyframes.enter'),
+                    '@keyframes exit': theme('keyframes.exit'),
+                  })
+                },
+                {
+                  theme: {
+                    extend: {
+                      keyframes: {
+                        enter: {
+                          from: {
+                            opacity: 'var(--tw-enter-opacity, 1)',
+                            transform:
+                              'translate3d(var(--tw-enter-translate-x, 0), var(--tw-enter-translate-y, 0), 0) scale3d(var(--tw-enter-scale, 1), var(--tw-enter-scale, 1), var(--tw-enter-scale, 1)) rotate(var(--tw-enter-rotate, 0))',
+                          },
+                        },
+                        exit: {
+                          to: {
+                            opacity: 'var(--tw-exit-opacity, 1)',
+                            transform:
+                              'translate3d(var(--tw-exit-translate-x, 0), var(--tw-exit-translate-y, 0), 0) scale3d(var(--tw-exit-scale, 1), var(--tw-exit-scale, 1), var(--tw-exit-scale, 1)) rotate(var(--tw-exit-rotate, 0))',
+                          },
+                        },
                       },
                     },
                   },
                 },
-              },
-            },
-          ),
-        }
-      },
-    })
-
-    expect(compiler.build([])).toMatchInlineSnapshot(`
-      "@layer base {
+              ),
+            }
+          },
+        },
+      ),
+    ).toMatchInlineSnapshot(`
+      "
+      @layer base {
         @keyframes enter {
           from {
             opacity: var(--tw-enter-opacity, 1);
             transform: translate3d(var(--tw-enter-translate-x, 0), var(--tw-enter-translate-y, 0), 0) scale3d(var(--tw-enter-scale, 1), var(--tw-enter-scale, 1), var(--tw-enter-scale, 1)) rotate(var(--tw-enter-rotate, 0));
           }
         }
+
         @keyframes exit {
           to {
             opacity: var(--tw-exit-opacity, 1);
@@ -73,31 +76,29 @@ describe('theme', async () => {
   })
 
   test('keyframes added via addUtilities are appended to the AST', async () => {
-    let input = css`
-      @tailwind utilities;
-      @plugin "my-plugin";
-    `
-
-    let compiler = await compile(input, {
-      loadModule: async (id, base) => {
-        return {
-          path: '',
-          base,
-          module: plugin(function ({ addUtilities, theme }) {
-            addUtilities({
-              '@keyframes enter': {
-                from: {
-                  opacity: 'var(--tw-enter-opacity, 1)',
-                },
-              },
-            })
-          }),
-        }
-      },
-    })
-
-    expect(compiler.build([])).toMatchInlineSnapshot(`
-      "@keyframes enter {
+    expect(
+      await compileCss(
+        css`
+          @tailwind utilities;
+          @plugin "my-plugin";
+        `,
+        {
+          loadModule: async (_id, base) => {
+            return {
+              path: '',
+              base,
+              module: plugin(function ({ addUtilities }) {
+                addUtilities({
+                  '@keyframes enter': { from: { opacity: 'var(--tw-enter-opacity, 1)' } },
+                })
+              }),
+            }
+          },
+        },
+      ),
+    ).toMatchInlineSnapshot(`
+      "
+      @keyframes enter {
         from {
           opacity: var(--tw-enter-opacity, 1);
         }
@@ -107,48 +108,40 @@ describe('theme', async () => {
   })
 
   test('plugin theme can extend colors', async () => {
-    let input = css`
-      @theme reference {
-        --color-red-500: #ef4444;
-      }
-      @tailwind utilities;
-      @plugin "my-plugin";
-    `
-
-    let compiler = await compile(input, {
-      loadModule: async (id, base) => {
-        return {
-          path: '',
-          base,
-          module: plugin(
-            function ({ matchUtilities, theme }) {
-              matchUtilities(
-                {
-                  scrollbar: (value) => ({ 'scrollbar-color': value }),
+    expect(
+      await run(
+        ['scrollbar-red-500', 'scrollbar-russet-700'],
+        css`
+          @theme reference {
+            --color-red-500: #ef4444;
+          }
+          @tailwind utilities;
+          @plugin "my-plugin";
+        `,
+        {
+          loadModule: async (_id, base) => {
+            return {
+              path: '',
+              base,
+              module: plugin(
+                function ({ matchUtilities, theme }) {
+                  matchUtilities(
+                    { scrollbar: (value) => ({ 'scrollbar-color': value }) },
+                    { values: theme('colors') },
+                  )
                 },
-                {
-                  values: theme('colors'),
-                },
-              )
-            },
-            {
-              theme: {
-                extend: {
-                  colors: {
-                    'russet-700': '#7a4724',
-                  },
-                },
-              },
-            },
-          ),
-        }
-      },
-    })
-
-    expect(compiler.build(['scrollbar-red-500', 'scrollbar-russet-700'])).toMatchInlineSnapshot(`
-      ".scrollbar-red-500 {
+                { theme: { extend: { colors: { 'russet-700': '#7a4724' } } } },
+              ),
+            }
+          },
+        },
+      ),
+    ).toMatchInlineSnapshot(`
+      "
+      .scrollbar-red-500 {
         scrollbar-color: #ef4444;
       }
+
       .scrollbar-russet-700 {
         scrollbar-color: #7a4724;
       }
@@ -159,46 +152,43 @@ describe('theme', async () => {
   test('plugin theme values can reference legacy theme keys that have been replaced with bare value support', async ({
     expect,
   }) => {
-    let input = css`
-      @tailwind utilities;
-      @plugin "my-plugin";
-    `
-
-    let compiler = await compile(input, {
-      loadModule: async (id, base) => {
-        return {
-          path: '',
-          base,
-          module: plugin(
-            function ({ matchUtilities, theme }) {
-              matchUtilities(
-                {
-                  'animate-duration': (value) => ({ 'animation-duration': value }),
+    expect(
+      await run(
+        ['animate-duration-316'],
+        css`
+          @tailwind utilities;
+          @plugin "my-plugin";
+        `,
+        {
+          loadModule: async (_id, base) => {
+            return {
+              path: '',
+              base,
+              module: plugin(
+                function ({ matchUtilities, theme }) {
+                  matchUtilities(
+                    { 'animate-duration': (value) => ({ 'animation-duration': value }) },
+                    { values: theme('animationDuration') },
+                  )
                 },
                 {
-                  values: theme('animationDuration'),
-                },
-              )
-            },
-            {
-              theme: {
-                extend: {
-                  animationDuration: ({ theme }: { theme: (path: string) => any }) => {
-                    return {
-                      ...theme('transitionDuration'),
-                    }
+                  theme: {
+                    extend: {
+                      animationDuration: ({ theme }: { theme: (path: string) => any }) => {
+                        return { ...theme('transitionDuration') }
+                      },
+                    },
                   },
                 },
-              },
-            },
-          ),
-        }
-      },
-    })
-
-    expect(compiler.build(['animate-duration-316'])).toMatchInlineSnapshot(`
-      ".animate-duration-316 {
-        animation-duration: 316ms;
+              ),
+            }
+          },
+        },
+      ),
+    ).toMatchInlineSnapshot(`
+      "
+      .animate-duration-316 {
+        animation-duration: .316s;
       }
       "
     `)
@@ -207,98 +197,92 @@ describe('theme', async () => {
   test('plugin theme values that support bare values are merged with other values for that theme key', async ({
     expect,
   }) => {
-    let input = css`
-      @tailwind utilities;
-      @plugin "my-plugin";
-    `
-
-    let compiler = await compile(input, {
-      loadModule: async (id, base) => {
-        return {
-          path: '',
-          base,
-          module: plugin(
-            function ({ matchUtilities, theme }) {
-              matchUtilities(
-                {
-                  'animate-duration': (value) => ({ 'animation-duration': value }),
+    expect(
+      await run(
+        ['animate-duration-316', 'animate-duration-slow'],
+        css`
+          @tailwind utilities;
+          @plugin "my-plugin";
+        `,
+        {
+          loadModule: async (_id, base) => {
+            return {
+              path: '',
+              base,
+              module: plugin(
+                function ({ matchUtilities, theme }) {
+                  matchUtilities(
+                    { 'animate-duration': (value) => ({ 'animation-duration': value }) },
+                    { values: theme('animationDuration') },
+                  )
                 },
                 {
-                  values: theme('animationDuration'),
-                },
-              )
-            },
-            {
-              theme: {
-                extend: {
-                  transitionDuration: {
-                    slow: '800ms',
+                  theme: {
+                    extend: {
+                      transitionDuration: { slow: '800ms' },
+                      animationDuration: ({ theme }: { theme: (path: string) => any }) => ({
+                        ...theme('transitionDuration'),
+                      }),
+                    },
                   },
-
-                  animationDuration: ({ theme }: { theme: (path: string) => any }) => ({
-                    ...theme('transitionDuration'),
-                  }),
                 },
-              },
-            },
-          ),
-        }
-      },
-    })
+              ),
+            }
+          },
+        },
+      ),
+    ).toMatchInlineSnapshot(`
+      "
+      .animate-duration-316 {
+        animation-duration: .316s;
+      }
 
-    expect(compiler.build(['animate-duration-316', 'animate-duration-slow']))
-      .toMatchInlineSnapshot(`
-        ".animate-duration-316 {
-          animation-duration: 316ms;
-        }
-        .animate-duration-slow {
-          animation-duration: 800ms;
-        }
-        "
-      `)
+      .animate-duration-slow {
+        animation-duration: .8s;
+      }
+      "
+    `)
   })
 
   test('plugin theme can have opacity modifiers', async () => {
-    let input = css`
-      @tailwind utilities;
-      @theme {
-        --color-red-500: #ef4444;
+    expect(
+      await run(
+        ['percentage', 'fraction', 'variable'],
+        css`
+          @tailwind utilities;
+          @theme {
+            --color-red-500: #ef4444;
+          }
+          @plugin "my-plugin";
+        `,
+        {
+          loadModule: async (_id, base) => {
+            return {
+              path: '',
+              base,
+              module: plugin(function ({ addUtilities, theme }) {
+                addUtilities({
+                  '.percentage': { color: theme('colors.red.500 / 50%') },
+                  '.fraction': { color: theme('colors.red.500 / 0.5') },
+                  '.variable': { color: theme('colors.red.500 / var(--opacity)') },
+                })
+              }),
+            }
+          },
+        },
+      ),
+    ).toMatchInlineSnapshot(`
+      "
+      .fraction, .percentage {
+        color: oklab(63.6834% .187 .088 / .5);
       }
-      @plugin "my-plugin";
-    `
 
-    let compiler = await compile(input, {
-      loadModule: async (id, base) => {
-        return {
-          path: '',
-          base,
-          module: plugin(function ({ addUtilities, theme }) {
-            addUtilities({
-              '.percentage': {
-                color: theme('colors.red.500 / 50%'),
-              },
-              '.fraction': {
-                color: theme('colors.red.500 / 0.5'),
-              },
-              '.variable': {
-                color: theme('colors.red.500 / var(--opacity)'),
-              },
-            })
-          }),
-        }
-      },
-    })
-
-    expect(compiler.build(['percentage', 'fraction', 'variable'])).toMatchInlineSnapshot(`
-      ".fraction {
-        color: color-mix(in oklab, #ef4444 50%, transparent);
-      }
-      .percentage {
-        color: color-mix(in oklab, #ef4444 50%, transparent);
-      }
       .variable {
         color: #ef4444;
-        @supports (color: color-mix(in lab, red, red)) {
+      }
+
+      @supports (color: color-mix(in lab, red, red)) {
+        .variable {
           color: color-mix(in oklab, #ef4444 var(--opacity), transparent);
         }
       }
@@ -307,89 +291,81 @@ describe('theme', async () => {
   })
 
   test('plugin theme colors can use <alpha-value>', async () => {
-    let input = css`
-      @tailwind utilities;
-      @theme {
-        /* This should not work */
-        --color-custom-css: rgba(255 0 0 / <alpha-value>);
-      }
-      @plugin "my-plugin";
-    `
-
-    let compiler = await compile(input, {
-      loadModule: async (id, base) => {
-        return {
-          path: '',
-          base,
-          module: plugin(
-            function ({ addUtilities, theme }) {
-              addUtilities({
-                '.css-percentage': {
-                  color: theme('colors.custom-css / 50%'),
-                },
-                '.css-fraction': {
-                  color: theme('colors.custom-css / 0.5'),
-                },
-                '.css-variable': {
-                  color: theme('colors.custom-css / var(--opacity)'),
-                },
-                '.js-percentage': {
-                  color: theme('colors.custom-js / 50%'),
-                },
-                '.js-fraction': {
-                  color: theme('colors.custom-js / 0.5'),
-                },
-                '.js-variable': {
-                  color: theme('colors.custom-js / var(--opacity)'),
-                },
-              })
-            },
-            {
-              theme: {
-                colors: {
-                  /* This should work */
-                  'custom-js': 'rgb(255 0 0 / <alpha-value>)',
-                },
-              },
-            },
-          ),
-        }
-      },
-    })
-
     expect(
-      compiler.build([
-        'bg-custom',
-        'css-percentage',
-        'css-fraction',
-        'css-variable',
-        'js-percentage',
-        'js-fraction',
-        'js-variable',
-      ]),
+      await run(
+        [
+          'bg-custom',
+          'css-percentage',
+          'css-fraction',
+          'css-variable',
+          'js-percentage',
+          'js-fraction',
+          'js-variable',
+        ],
+        css`
+          @tailwind utilities;
+          @theme {
+            /* This should not work */
+            --color-custom-css: rgba(255 0 0 / <alpha-value>);
+          }
+          @plugin "my-plugin";
+        `,
+        {
+          loadModule: async (_id, base) => {
+            return {
+              path: '',
+              base,
+              module: plugin(
+                function ({ addUtilities, theme }) {
+                  addUtilities({
+                    '.css-percentage': { color: theme('colors.custom-css / 50%') },
+                    '.css-fraction': { color: theme('colors.custom-css / 0.5') },
+                    '.css-variable': { color: theme('colors.custom-css / var(--opacity)') },
+                    '.js-percentage': { color: theme('colors.custom-js / 50%') },
+                    '.js-fraction': { color: theme('colors.custom-js / 0.5') },
+                    '.js-variable': { color: theme('colors.custom-js / var(--opacity)') },
+                  })
+                },
+                {
+                  theme: {
+                    colors: {
+                      /* This should work */
+                      'custom-js': 'rgb(255 0 0 / <alpha-value>)',
+                    },
+                  },
+                },
+              ),
+            }
+          },
+        },
+      ),
     ).toMatchInlineSnapshot(`
-      ".css-fraction {
-        color: color-mix(in oklab, rgba(255 0 0 / <alpha-value>) 50%, transparent);
-      }
-      .css-percentage {
+      "
+      .css-fraction, .css-percentage {
         color: color-mix(in oklab, rgba(255 0 0 / <alpha-value>) 50%, transparent);
       }
+
       .css-variable {
         color: rgba(255 0 0 / <alpha-value>);
-        @supports (color: color-mix(in lab, red, red)) {
+      }
+
+      @supports (color: color-mix(in lab, red, red)) {
+        .css-variable {
           color: color-mix(in oklab, rgba(255 0 0 / <alpha-value>) var(--opacity), transparent);
         }
       }
-      .js-fraction {
-        color: color-mix(in oklab, rgb(255 0 0 / 1) 50%, transparent);
-      }
-      .js-percentage {
-        color: color-mix(in oklab, rgb(255 0 0 / 1) 50%, transparent);
+
+      .js-fraction, .js-percentage {
+        color: oklab(62.7955% .224 .125 / .5);
       }
+
       .js-variable {
-        color: rgb(255 0 0 / 1);
-        @supports (color: color-mix(in lab, red, red)) {
-          color: color-mix(in oklab, rgb(255 0 0 / 1) var(--opacity), transparent);
+        color: red;
+      }
+
+      @supports (color: color-mix(in lab, red, red)) {
+        .js-variable {
+          color: color-mix(in oklab, red var(--opacity), transparent);
         }
       }
       "
@@ -397,260 +373,226 @@ describe('theme', async () => {
   })
 
   test('theme value functions are resolved correctly regardless of order', async () => {
-    let input = css`
-      @tailwind utilities;
-      @plugin "my-plugin";
-    `
-
-    let compiler = await compile(input, {
-      loadModule: async (id, base) => {
-        return {
-          path: '',
-          base,
-          module: plugin(
-            function ({ matchUtilities, theme }) {
-              matchUtilities(
-                {
-                  'animate-delay': (value) => ({ 'animation-delay': value }),
+    expect(
+      await run(
+        ['animate-delay-316', 'animate-delay-slow'],
+        css`
+          @tailwind utilities;
+          @plugin "my-plugin";
+        `,
+        {
+          loadModule: async (_id, base) => {
+            return {
+              path: '',
+              base,
+              module: plugin(
+                function ({ matchUtilities, theme }) {
+                  matchUtilities(
+                    { 'animate-delay': (value) => ({ 'animation-delay': value }) },
+                    { values: theme('animationDelay') },
+                  )
                 },
                 {
-                  values: theme('animationDelay'),
-                },
-              )
-            },
-            {
-              theme: {
-                extend: {
-                  animationDuration: ({ theme }: { theme: (path: string) => any }) => ({
-                    ...theme('transitionDuration'),
-                  }),
-
-                  animationDelay: ({ theme }: { theme: (path: string) => any }) => ({
-                    ...theme('animationDuration'),
-                  }),
-
-                  transitionDuration: {
-                    slow: '800ms',
+                  theme: {
+                    extend: {
+                      animationDuration: ({ theme }: { theme: (path: string) => any }) => ({
+                        ...theme('transitionDuration'),
+                      }),
+                      animationDelay: ({ theme }: { theme: (path: string) => any }) => ({
+                        ...theme('animationDuration'),
+                      }),
+                      transitionDuration: { slow: '800ms' },
+                    },
                   },
                 },
-              },
-            },
-          ),
-        }
-      },
-    })
-
-    expect(compiler.build(['animate-delay-316', 'animate-delay-slow'])).toMatchInlineSnapshot(`
-      ".animate-delay-316 {
-        animation-delay: 316ms;
+              ),
+            }
+          },
+        },
+      ),
+    ).toMatchInlineSnapshot(`
+      "
+      .animate-delay-316 {
+        animation-delay: .316s;
       }
+
       .animate-delay-slow {
-        animation-delay: 800ms;
+        animation-delay: .8s;
       }
       "
     `)
   })
 
   test('plugins can override the default key', async () => {
-    let input = css`
-      @tailwind utilities;
-      @plugin "my-plugin";
-    `
-
-    let compiler = await compile(input, {
-      loadModule: async (id, base) => {
-        return {
-          path: '',
-          base,
-          module: plugin(
-            function ({ matchUtilities, theme }) {
-              matchUtilities(
-                {
-                  'animate-duration': (value) => ({ 'animation-delay': value }),
+    expect(
+      await run(
+        ['animate-duration'],
+        css`
+          @tailwind utilities;
+          @plugin "my-plugin";
+        `,
+        {
+          loadModule: async (_id, base) => {
+            return {
+              path: '',
+              base,
+              module: plugin(
+                function ({ matchUtilities, theme }) {
+                  matchUtilities(
+                    { 'animate-duration': (value) => ({ 'animation-delay': value }) },
+                    { values: theme('transitionDuration') },
+                  )
                 },
-                {
-                  values: theme('transitionDuration'),
-                },
-              )
-            },
-            {
-              theme: {
-                extend: {
-                  transitionDuration: {
-                    DEFAULT: '1500ms',
-                  },
-                },
-              },
-            },
-          ),
-        }
-      },
-    })
-
-    expect(compiler.build(['animate-duration'])).toMatchInlineSnapshot(`
-      ".animate-duration {
-        animation-delay: 1500ms;
+                { theme: { extend: { transitionDuration: { DEFAULT: '1500ms' } } } },
+              ),
+            }
+          },
+        },
+      ),
+    ).toMatchInlineSnapshot(`
+      "
+      .animate-duration {
+        animation-delay: 1.5s;
       }
       "
     `)
   })
 
   test('plugins can read CSS theme keys using the old theme key notation', async () => {
-    let input = css`
-      @tailwind utilities;
-      @plugin "my-plugin";
-      @theme reference {
-        --animate: pulse 1s linear infinite;
-        --animate-spin: spin 1s linear infinite;
+    expect(
+      await run(
+        ['animation-spin', 'animation', 'animation2', 'animation2-twist'],
+        css`
+          @tailwind utilities;
+          @plugin "my-plugin";
+          @theme reference {
+            --animate: pulse 1s linear infinite;
+            --animate-spin: spin 1s linear infinite;
+          }
+        `,
+        {
+          loadModule: async (_id, base) => {
+            return {
+              path: '',
+              base,
+              module: plugin(function ({ matchUtilities, theme }) {
+                matchUtilities(
+                  { animation: (value) => ({ animation: value }) },
+                  { values: theme('animation') },
+                )
+
+                matchUtilities(
+                  { animation2: (value) => ({ animation: value }) },
+                  {
+                    values: { DEFAULT: theme('animation.DEFAULT'), twist: theme('animation.spin') },
+                  },
+                )
+              }),
+            }
+          },
+        },
+      ),
+    ).toMatchInlineSnapshot(`
+      "
+      .animation {
+        animation: 1s linear infinite pulse;
       }
-    `
 
-    let compiler = await compile(input, {
-      loadModule: async (id, base) => {
-        return {
-          path: '',
-          base,
-          module: plugin(function ({ matchUtilities, theme }) {
-            matchUtilities(
-              {
-                animation: (value) => ({ animation: value }),
-              },
-              {
-                values: theme('animation'),
-              },
-            )
+      .animation-spin {
+        animation: 1s linear infinite spin;
+      }
 
-            matchUtilities(
-              {
-                animation2: (value) => ({ animation: value }),
-              },
-              {
-                values: {
-                  DEFAULT: theme('animation.DEFAULT'),
-                  twist: theme('animation.spin'),
-                },
-              },
-            )
-          }),
-        }
-      },
-    })
+      .animation2 {
+        animation: 1s linear infinite pulse;
+      }
 
-    expect(compiler.build(['animation-spin', 'animation', 'animation2', 'animation2-twist']))
-      .toMatchInlineSnapshot(`
-        ".animation {
-          animation: pulse 1s linear infinite;
-        }
-        .animation-spin {
-          animation: spin 1s linear infinite;
-        }
-        .animation2 {
-          animation: pulse 1s linear infinite;
-        }
-        .animation2-twist {
-          animation: spin 1s linear infinite;
-        }
-        "
-      `)
+      .animation2-twist {
+        animation: 1s linear infinite spin;
+      }
+      "
+    `)
   })
 
   test('CSS theme values are merged with JS theme values', async () => {
-    let input = css`
-      @tailwind utilities;
-      @plugin "my-plugin";
-      @theme reference {
-        --animate: pulse 1s linear infinite;
-        --animate-spin: spin 1s linear infinite;
+    expect(
+      await run(
+        ['animation', 'animation-spin', 'animation-bounce'],
+        css`
+          @tailwind utilities;
+          @plugin "my-plugin";
+          @theme reference {
+            --animate: pulse 1s linear infinite;
+            --animate-spin: spin 1s linear infinite;
+          }
+        `,
+        {
+          loadModule: async (_id, base) => {
+            return {
+              path: '',
+              base,
+              module: plugin(
+                function ({ matchUtilities, theme }) {
+                  matchUtilities(
+                    { animation: (value) => ({ '--animation': value }) },
+                    { values: theme('animation') },
+                  )
+                },
+                { theme: { extend: { animation: { bounce: 'bounce 1s linear infinite' } } } },
+              ),
+            }
+          },
+        },
+      ),
+    ).toMatchInlineSnapshot(`
+      "
+      .animation {
+        --animation: pulse 1s linear infinite;
       }
-    `
 
-    let compiler = await compile(input, {
-      loadModule: async (id, base) => {
-        return {
-          path: '',
-          base,
-          module: plugin(
-            function ({ matchUtilities, theme }) {
-              matchUtilities(
-                {
-                  animation: (value) => ({ '--animation': value }),
-                },
-                {
-                  values: theme('animation'),
-                },
-              )
-            },
-            {
-              theme: {
-                extend: {
-                  animation: {
-                    bounce: 'bounce 1s linear infinite',
-                  },
-                },
-              },
-            },
-          ),
-        }
-      },
-    })
+      .animation-bounce {
+        --animation: bounce 1s linear infinite;
+      }
 
-    expect(compiler.build(['animation', 'animation-spin', 'animation-bounce']))
-      .toMatchInlineSnapshot(`
-        ".animation {
-          --animation: pulse 1s linear infinite;
-        }
-        .animation-bounce {
-          --animation: bounce 1s linear infinite;
-        }
-        .animation-spin {
-          --animation: spin 1s linear infinite;
-        }
-        "
-      `)
+      .animation-spin {
+        --animation: spin 1s linear infinite;
+      }
+      "
+    `)
   })
 
   test('CSS theme defaults take precedence over JS theme defaults', async () => {
-    let input = css`
-      @tailwind utilities;
-      @plugin "my-plugin";
-      @theme reference {
-        --animate: pulse 1s linear infinite;
-        --animate-spin: spin 1s linear infinite;
-      }
-    `
-
-    let compiler = await compile(input, {
-      loadModule: async (id, base) => {
-        return {
-          path: '',
-          base,
-          module: plugin(
-            function ({ matchUtilities, theme }) {
-              matchUtilities(
-                {
-                  animation: (value) => ({ '--animation': value }),
+    expect(
+      await run(
+        ['animation'],
+        css`
+          @tailwind utilities;
+          @plugin "my-plugin";
+          @theme reference {
+            --animate: pulse 1s linear infinite;
+            --animate-spin: spin 1s linear infinite;
+          }
+        `,
+        {
+          loadModule: async (_id, base) => {
+            return {
+              path: '',
+              base,
+              module: plugin(
+                function ({ matchUtilities, theme }) {
+                  matchUtilities(
+                    { animation: (value) => ({ '--animation': value }) },
+                    { values: theme('animation') },
+                  )
                 },
-                {
-                  values: theme('animation'),
-                },
-              )
-            },
-            {
-              theme: {
-                extend: {
-                  animation: {
-                    DEFAULT: 'twist 1s linear infinite',
-                  },
-                },
-              },
-            },
-          ),
-        }
-      },
-    })
-
-    expect(compiler.build(['animation'])).toMatchInlineSnapshot(`
-      ".animation {
+                { theme: { extend: { animation: { DEFAULT: 'twist 1s linear infinite' } } } },
+              ),
+            }
+          },
+        },
+      ),
+    ).toMatchInlineSnapshot(`
+      "
+      .animation {
         --animation: pulse 1s linear infinite;
       }
       "
@@ -667,10 +609,10 @@ describe('theme', async () => {
       }
     `
 
-    let fn = vi.fn()
+    using fn = vi.fn()
 
     await compile(input, {
-      loadModule: async (id, base) => {
+      loadModule: async (_id, base) => {
         return {
           path: '',
           base,
@@ -679,13 +621,7 @@ describe('theme', async () => {
               fn(theme('animation.simple'))
             },
             {
-              theme: {
-                extend: {
-                  animation: {
-                    simple: 'simple 1s linear',
-                  },
-                },
-              },
+              theme: { extend: { animation: { simple: 'simple 1s linear' } } },
             },
           ),
         }
@@ -699,241 +635,259 @@ describe('theme', async () => {
     })
   })
 
-  test('all necessary theme keys support bare values', async () => {
-    let input = css`
-      @tailwind utilities;
-      @plugin "my-plugin";
-    `
-
-    let { build } = await compile(input, {
-      loadModule: async (id, base) => {
-        return {
-          path: '',
-          base,
-          module: plugin(function ({ matchUtilities, theme }) {
-            function utility(name: string, themeKey: string) {
-              matchUtilities(
-                { [name]: (value) => ({ '--value': value }) },
-                { values: theme(themeKey) },
-              )
+  test('theme() resolves the DEFAULT value when a bare CSS theme key shares a prefix with a sibling key', async () => {
+    expect(
+      await run(
+        ['example-foo', 'example-foo-bar'],
+        css`
+          @tailwind utilities;
+          @theme {
+            --color-foo: red;
+            --color-foo-bar: blue;
+          }
+          @plugin "my-plugin";
+        `,
+        {
+          loadModule: async (_id, base) => {
+            return {
+              path: '',
+              base,
+              module: plugin(function ({ addUtilities, theme }) {
+                addUtilities({
+                  '.example-foo': { color: theme('colors.foo') },
+                  '.example-foo-bar': { color: theme('colors.foo-bar') },
+                })
+              }),
             }
+          },
+        },
+      ),
+    ).toMatchInlineSnapshot(`
+      "
+      .example-foo {
+        color: red;
+      }
 
-            utility('my-aspect', 'aspectRatio')
-            utility('my-backdrop-brightness', 'backdropBrightness')
-            utility('my-backdrop-contrast', 'backdropContrast')
-            utility('my-backdrop-grayscale', 'backdropGrayscale')
-            utility('my-backdrop-hue-rotate', 'backdropHueRotate')
-            utility('my-backdrop-invert', 'backdropInvert')
-            utility('my-backdrop-opacity', 'backdropOpacity')
-            utility('my-backdrop-saturate', 'backdropSaturate')
-            utility('my-backdrop-sepia', 'backdropSepia')
-            utility('my-border-width', 'borderWidth')
-            utility('my-brightness', 'brightness')
-            utility('my-columns', 'columns')
-            utility('my-contrast', 'contrast')
-            utility('my-divide-width', 'divideWidth')
-            utility('my-flex-grow', 'flexGrow')
-            utility('my-flex-shrink', 'flexShrink')
-            utility('my-gradient-color-stop-positions', 'gradientColorStopPositions')
-            utility('my-grayscale', 'grayscale')
-            utility('my-grid-row-end', 'gridRowEnd')
-            utility('my-grid-row-start', 'gridRowStart')
-            utility('my-grid-template-columns', 'gridTemplateColumns')
-            utility('my-grid-template-rows', 'gridTemplateRows')
-            utility('my-hue-rotate', 'hueRotate')
-            utility('my-invert', 'invert')
-            utility('my-line-clamp', 'lineClamp')
-            utility('my-opacity', 'opacity')
-            utility('my-order', 'order')
-            utility('my-outline-offset', 'outlineOffset')
-            utility('my-outline-width', 'outlineWidth')
-            utility('my-ring-offset-width', 'ringOffsetWidth')
-            utility('my-ring-width', 'ringWidth')
-            utility('my-rotate', 'rotate')
-            utility('my-saturate', 'saturate')
-            utility('my-scale', 'scale')
-            utility('my-sepia', 'sepia')
-            utility('my-skew', 'skew')
-            utility('my-stroke-width', 'strokeWidth')
-            utility('my-text-decoration-thickness', 'textDecorationThickness')
-            utility('my-text-underline-offset', 'textUnderlineOffset')
-            utility('my-transition-delay', 'transitionDelay')
-            utility('my-transition-duration', 'transitionDuration')
-            utility('my-z-index', 'zIndex')
-          }),
-        }
-      },
-    })
+      .example-foo-bar {
+        color: #00f;
+      }
+      "
+    `)
+  })
 
-    let output = build([
-      'my-aspect-2/5',
-      'my-backdrop-brightness-1',
-      'my-backdrop-contrast-1',
-      'my-backdrop-grayscale-1',
-      'my-backdrop-hue-rotate-1',
-      'my-backdrop-invert-1',
-      'my-backdrop-opacity-1',
-      'my-backdrop-saturate-1',
-      'my-backdrop-sepia-1',
-      'my-border-width-1',
-      'my-brightness-1',
-      'my-columns-1',
-      'my-contrast-1',
-      'my-divide-width-1',
-      'my-flex-grow-1',
-      'my-flex-shrink-1',
-      'my-gradient-color-stop-positions-1',
-      'my-grayscale-1',
-      'my-grid-row-end-1',
-      'my-grid-row-start-1',
-      'my-grid-template-columns-1',
-      'my-grid-template-rows-1',
-      'my-hue-rotate-1',
-      'my-invert-1',
-      'my-line-clamp-1',
-      'my-opacity-1',
-      'my-order-1',
-      'my-outline-offset-1',
-      'my-outline-width-1',
-      'my-ring-offset-width-1',
-      'my-ring-width-1',
-      'my-rotate-1',
-      'my-saturate-1',
-      'my-scale-1',
-      'my-sepia-1',
-      'my-skew-1',
-      'my-stroke-width-1',
-      'my-text-decoration-thickness-1',
-      'my-text-underline-offset-1',
-      'my-transition-delay-1',
-      'my-transition-duration-1',
-      'my-z-index-1',
-    ])
+  test('all necessary theme keys support bare values', async () => {
+    expect(
+      await run(
+        [
+          'my-aspect-2/5',
+          'my-backdrop-brightness-1',
+          'my-backdrop-contrast-1',
+          'my-backdrop-grayscale-1',
+          'my-backdrop-hue-rotate-1',
+          'my-backdrop-invert-1',
+          'my-backdrop-opacity-1',
+          'my-backdrop-saturate-1',
+          'my-backdrop-sepia-1',
+          'my-border-width-1',
+          'my-brightness-1',
+          'my-columns-1',
+          'my-contrast-1',
+          'my-divide-width-1',
+          'my-flex-grow-1',
+          'my-flex-shrink-1',
+          'my-gradient-color-stop-positions-1',
+          'my-grayscale-1',
+          'my-grid-row-end-1',
+          'my-grid-row-start-1',
+          'my-grid-template-columns-1',
+          'my-grid-template-rows-1',
+          'my-hue-rotate-1',
+          'my-invert-1',
+          'my-line-clamp-1',
+          'my-opacity-1',
+          'my-order-1',
+          'my-outline-offset-1',
+          'my-outline-width-1',
+          'my-ring-offset-width-1',
+          'my-ring-width-1',
+          'my-rotate-1',
+          'my-saturate-1',
+          'my-scale-1',
+          'my-sepia-1',
+          'my-skew-1',
+          'my-stroke-width-1',
+          'my-text-decoration-thickness-1',
+          'my-text-underline-offset-1',
+          'my-transition-delay-1',
+          'my-transition-duration-1',
+          'my-z-index-1',
+        ],
+        css`
+          @tailwind utilities;
+          @plugin "my-plugin";
+        `,
+        {
+          loadModule: async (_id, base) => {
+            return {
+              path: '',
+              base,
+              module: plugin(function ({ matchUtilities, theme }) {
+                function utility(name: string, themeKey: string) {
+                  matchUtilities(
+                    { [name]: (value) => ({ '--value': value }) },
+                    { values: theme(themeKey) },
+                  )
+                }
 
-    expect(output).toMatchInlineSnapshot(`
-      ".my-aspect-2\\/5 {
+                utility('my-aspect', 'aspectRatio')
+                utility('my-backdrop-brightness', 'backdropBrightness')
+                utility('my-backdrop-contrast', 'backdropContrast')
+                utility('my-backdrop-grayscale', 'backdropGrayscale')
+                utility('my-backdrop-hue-rotate', 'backdropHueRotate')
+                utility('my-backdrop-invert', 'backdropInvert')
+                utility('my-backdrop-opacity', 'backdropOpacity')
+                utility('my-backdrop-saturate', 'backdropSaturate')
+                utility('my-backdrop-sepia', 'backdropSepia')
+                utility('my-border-width', 'borderWidth')
+                utility('my-brightness', 'brightness')
+                utility('my-columns', 'columns')
+                utility('my-contrast', 'contrast')
+                utility('my-divide-width', 'divideWidth')
+                utility('my-flex-grow', 'flexGrow')
+                utility('my-flex-shrink', 'flexShrink')
+                utility('my-gradient-color-stop-positions', 'gradientColorStopPositions')
+                utility('my-grayscale', 'grayscale')
+                utility('my-grid-row-end', 'gridRowEnd')
+                utility('my-grid-row-start', 'gridRowStart')
+                utility('my-grid-template-columns', 'gridTemplateColumns')
+                utility('my-grid-template-rows', 'gridTemplateRows')
+                utility('my-hue-rotate', 'hueRotate')
+                utility('my-invert', 'invert')
+                utility('my-line-clamp', 'lineClamp')
+                utility('my-opacity', 'opacity')
+                utility('my-order', 'order')
+                utility('my-outline-offset', 'outlineOffset')
+                utility('my-outline-width', 'outlineWidth')
+                utility('my-ring-offset-width', 'ringOffsetWidth')
+                utility('my-ring-width', 'ringWidth')
+                utility('my-rotate', 'rotate')
+                utility('my-saturate', 'saturate')
+                utility('my-scale', 'scale')
+                utility('my-sepia', 'sepia')
+                utility('my-skew', 'skew')
+                utility('my-stroke-width', 'strokeWidth')
+                utility('my-text-decoration-thickness', 'textDecorationThickness')
+                utility('my-text-underline-offset', 'textUnderlineOffset')
+                utility('my-transition-delay', 'transitionDelay')
+                utility('my-transition-duration', 'transitionDuration')
+                utility('my-z-index', 'zIndex')
+              }),
+            }
+          },
+        },
+      ),
+    ).toMatchInlineSnapshot(`
+      "
+      .my-aspect-2\\/5 {
         --value: 2/5;
       }
-      .my-backdrop-brightness-1 {
-        --value: 1%;
-      }
-      .my-backdrop-contrast-1 {
-        --value: 1%;
-      }
-      .my-backdrop-grayscale-1 {
+
+      .my-backdrop-brightness-1, .my-backdrop-contrast-1, .my-backdrop-grayscale-1 {
         --value: 1%;
       }
+
       .my-backdrop-hue-rotate-1 {
         --value: 1deg;
       }
-      .my-backdrop-invert-1 {
-        --value: 1%;
-      }
-      .my-backdrop-opacity-1 {
-        --value: 1%;
-      }
-      .my-backdrop-saturate-1 {
-        --value: 1%;
-      }
-      .my-backdrop-sepia-1 {
+
+      .my-backdrop-invert-1, .my-backdrop-opacity-1, .my-backdrop-saturate-1, .my-backdrop-sepia-1 {
         --value: 1%;
       }
+
       .my-border-width-1 {
         --value: 1px;
       }
+
       .my-brightness-1 {
         --value: 1%;
       }
+
       .my-columns-1 {
         --value: 1;
       }
+
       .my-contrast-1 {
         --value: 1%;
       }
+
       .my-divide-width-1 {
         --value: 1px;
       }
-      .my-flex-grow-1 {
+
+      .my-flex-grow-1, .my-flex-shrink-1 {
         --value: 1;
       }
-      .my-flex-shrink-1 {
-        --value: 1;
-      }
-      .my-gradient-color-stop-positions-1 {
+
+      .my-gradient-color-stop-positions-1, .my-grayscale-1 {
         --value: 1%;
       }
-      .my-grayscale-1 {
-        --value: 1%;
-      }
-      .my-grid-row-end-1 {
+
+      .my-grid-row-end-1, .my-grid-row-start-1 {
         --value: 1;
       }
-      .my-grid-row-start-1 {
-        --value: 1;
-      }
-      .my-grid-template-columns-1 {
-        --value: repeat(1, minmax(0, 1fr));
-      }
-      .my-grid-template-rows-1 {
+
+      .my-grid-template-columns-1, .my-grid-template-rows-1 {
         --value: repeat(1, minmax(0, 1fr));
       }
+
       .my-hue-rotate-1 {
         --value: 1deg;
       }
+
       .my-invert-1 {
         --value: 1%;
       }
+
       .my-line-clamp-1 {
         --value: 1;
       }
+
       .my-opacity-1 {
         --value: 1%;
       }
+
       .my-order-1 {
         --value: 1;
       }
-      .my-outline-offset-1 {
-        --value: 1px;
-      }
-      .my-outline-width-1 {
-        --value: 1px;
-      }
-      .my-ring-offset-width-1 {
-        --value: 1px;
-      }
-      .my-ring-width-1 {
+
+      .my-outline-offset-1, .my-outline-width-1, .my-ring-offset-width-1, .my-ring-width-1 {
         --value: 1px;
       }
+
       .my-rotate-1 {
         --value: 1deg;
       }
-      .my-saturate-1 {
-        --value: 1%;
-      }
-      .my-scale-1 {
-        --value: 1%;
-      }
-      .my-sepia-1 {
+
+      .my-saturate-1, .my-scale-1, .my-sepia-1 {
         --value: 1%;
       }
+
       .my-skew-1 {
         --value: 1deg;
       }
+
       .my-stroke-width-1 {
         --value: 1;
       }
-      .my-text-decoration-thickness-1 {
+
+      .my-text-decoration-thickness-1, .my-text-underline-offset-1 {
         --value: 1px;
       }
-      .my-text-underline-offset-1 {
-        --value: 1px;
-      }
-      .my-transition-delay-1 {
-        --value: 1ms;
-      }
-      .my-transition-duration-1 {
+
+      .my-transition-delay-1, .my-transition-duration-1 {
         --value: 1ms;
       }
+
       .my-z-index-1 {
         --value: 1;
       }
@@ -951,10 +905,10 @@ describe('theme', async () => {
       }
     `
 
-    let fn = vi.fn()
+    using fn = vi.fn()
 
     await compile(input, {
-      loadModule: async (id, base) => {
+      loadModule: async (_id, base) => {
         return {
           path: '',
           base,
@@ -994,10 +948,10 @@ describe('theme', async () => {
       }
     `
 
-    let fn = vi.fn()
+    using fn = vi.fn()
 
     await compile(input, {
-      loadModule: async (id, base) => {
+      loadModule: async (_id, base) => {
         return {
           path: '',
           base,
@@ -1026,10 +980,10 @@ describe('theme', async () => {
       }
     `
 
-    let fn = vi.fn()
+    using fn = vi.fn()
 
     await compile(input, {
-      loadModule: async (id, base) => {
+      loadModule: async (_id, base) => {
         return {
           path: '',
           base,
@@ -1055,10 +1009,10 @@ describe('theme', async () => {
       @plugin "my-plugin";
     `
 
-    let fn = vi.fn()
+    using fn = vi.fn()
 
     await compile(input, {
-      loadModule: async (id, base) => {
+      loadModule: async (_id, base) => {
         return {
           path: '',
           base,
@@ -1079,273 +1033,242 @@ describe('theme', async () => {
   })
 
   test('Candidates can match multiple utility definitions', async () => {
-    let input = css`
-      @tailwind utilities;
-      @plugin "my-plugin";
-    `
-
-    let { build } = await compile(input, {
-      loadModule: async (id, base) => {
-        return {
-          path: '',
-          base,
-          module: plugin(({ addUtilities, matchUtilities }) => {
-            addUtilities({
-              '.foo-bar': {
-                color: 'red',
-              },
-            })
-
-            matchUtilities(
-              {
-                foo: (value) => ({
-                  '--my-prop': value,
-                }),
-              },
-              {
-                values: {
-                  bar: 'bar-valuer',
-                  baz: 'bar-valuer',
-                },
-              },
-            )
-
-            addUtilities({
-              '.foo-bar': {
-                backgroundColor: 'red',
-              },
-            })
-          }),
-        }
-      },
-    })
-
-    expect(build(['foo-bar'])).toMatchInlineSnapshot(`
-      ".foo-bar {
-        background-color: red;
-      }
+    expect(
+      await run(
+        ['foo-bar'],
+        css`
+          @tailwind utilities;
+          @plugin "my-plugin";
+        `,
+        {
+          loadModule: async (_id, base) => {
+            return {
+              path: '',
+              base,
+              module: plugin(({ addUtilities, matchUtilities }) => {
+                addUtilities({ '.foo-bar': { color: 'red' } })
+                matchUtilities(
+                  { foo: (value) => ({ '--my-prop': value }) },
+                  { values: { bar: 'bar-valuer', baz: 'bar-valuer' } },
+                )
+                addUtilities({ '.foo-bar': { backgroundColor: 'red' } })
+              }),
+            }
+          },
+        },
+      ),
+    ).toMatchInlineSnapshot(`
+      "
       .foo-bar {
         color: red;
-      }
-      .foo-bar {
         --my-prop: bar-valuer;
+        background-color: red;
       }
       "
     `)
   })
 
   test('spreading `tailwindcss/defaultTheme` exports keeps bare values', async () => {
-    let input = css`
-      @tailwind utilities;
-      @plugin "my-plugin";
-    `
+    expect(
+      await run(
+        [
+          'my-aspect-2/5',
+          // 'my-backdrop-brightness-1',
+          // 'my-backdrop-contrast-1',
+          // 'my-backdrop-grayscale-1',
+          // 'my-backdrop-hue-rotate-1',
+          // 'my-backdrop-invert-1',
+          // 'my-backdrop-opacity-1',
+          // 'my-backdrop-saturate-1',
+          // 'my-backdrop-sepia-1',
+          // 'my-divide-width-1',
+          'my-border-width-1',
+          'my-brightness-1',
+          'my-columns-1',
+          'my-contrast-1',
+          'my-flex-grow-1',
+          'my-flex-shrink-1',
+          'my-gradient-color-stop-positions-1',
+          'my-grayscale-1',
+          'my-grid-row-end-1',
+          'my-grid-row-start-1',
+          'my-grid-template-columns-1',
+          'my-grid-template-rows-1',
+          'my-hue-rotate-1',
+          'my-invert-1',
+          'my-line-clamp-1',
+          'my-opacity-1',
+          'my-order-1',
+          'my-outline-offset-1',
+          'my-outline-width-1',
+          'my-ring-offset-width-1',
+          'my-ring-width-1',
+          'my-rotate-1',
+          'my-saturate-1',
+          'my-scale-1',
+          'my-sepia-1',
+          'my-skew-1',
+          'my-stroke-width-1',
+          'my-text-decoration-thickness-1',
+          'my-text-underline-offset-1',
+          'my-transition-delay-1',
+          'my-transition-duration-1',
+          'my-z-index-1',
+        ],
+        css`
+          @tailwind utilities;
+          @plugin "my-plugin";
+        `,
+        {
+          loadModule: async (_id, base) => {
+            return {
+              path: '',
+              base,
+              module: plugin(function ({ matchUtilities }) {
+                function utility(name: string, themeKey: string) {
+                  matchUtilities(
+                    { [name]: (value) => ({ '--value': value }) },
+                    // @ts-ignore
+                    { values: defaultTheme[themeKey] },
+                  )
+                }
 
-    let { build } = await compile(input, {
-      loadModule: async (id, base) => {
-        return {
-          path: '',
-          base,
-          module: plugin(function ({ matchUtilities }) {
-            function utility(name: string, themeKey: string) {
-              matchUtilities(
-                { [name]: (value) => ({ '--value': value }) },
-                // @ts-ignore
-                { values: defaultTheme[themeKey] },
-              )
+                utility('my-aspect', 'aspectRatio')
+                // The following keys deliberately doesn't work as these are exported
+                // as functions from the compat config.
+                //
+                // utility('my-backdrop-brightness', 'backdropBrightness')
+                // utility('my-backdrop-contrast', 'backdropContrast')
+                // utility('my-backdrop-grayscale', 'backdropGrayscale')
+                // utility('my-backdrop-hue-rotate', 'backdropHueRotate')
+                // utility('my-backdrop-invert', 'backdropInvert')
+                // utility('my-backdrop-opacity', 'backdropOpacity')
+                // utility('my-backdrop-saturate', 'backdropSaturate')
+                // utility('my-backdrop-sepia', 'backdropSepia')
+                // utility('my-divide-width', 'divideWidth')
+                utility('my-border-width', 'borderWidth')
+                utility('my-brightness', 'brightness')
+                utility('my-columns', 'columns')
+                utility('my-contrast', 'contrast')
+                utility('my-flex-grow', 'flexGrow')
+                utility('my-flex-shrink', 'flexShrink')
+                utility('my-gradient-color-stop-positions', 'gradientColorStopPositions')
+                utility('my-grayscale', 'grayscale')
+                utility('my-grid-row-end', 'gridRowEnd')
+                utility('my-grid-row-start', 'gridRowStart')
+                utility('my-grid-template-columns', 'gridTemplateColumns')
+                utility('my-grid-template-rows', 'gridTemplateRows')
+                utility('my-hue-rotate', 'hueRotate')
+                utility('my-invert', 'invert')
+                utility('my-line-clamp', 'lineClamp')
+                utility('my-opacity', 'opacity')
+                utility('my-order', 'order')
+                utility('my-outline-offset', 'outlineOffset')
+                utility('my-outline-width', 'outlineWidth')
+                utility('my-ring-offset-width', 'ringOffsetWidth')
+                utility('my-ring-width', 'ringWidth')
+                utility('my-rotate', 'rotate')
+                utility('my-saturate', 'saturate')
+                utility('my-scale', 'scale')
+                utility('my-sepia', 'sepia')
+                utility('my-skew', 'skew')
+                utility('my-stroke-width', 'strokeWidth')
+                utility('my-text-decoration-thickness', 'textDecorationThickness')
+                utility('my-text-underline-offset', 'textUnderlineOffset')
+                utility('my-transition-delay', 'transitionDelay')
+                utility('my-transition-duration', 'transitionDuration')
+                utility('my-z-index', 'zIndex')
+              }),
             }
-
-            utility('my-aspect', 'aspectRatio')
-            // The following keys deliberately doesn't work as these are exported
-            // as functions from the compat config.
-            //
-            // utility('my-backdrop-brightness', 'backdropBrightness')
-            // utility('my-backdrop-contrast', 'backdropContrast')
-            // utility('my-backdrop-grayscale', 'backdropGrayscale')
-            // utility('my-backdrop-hue-rotate', 'backdropHueRotate')
-            // utility('my-backdrop-invert', 'backdropInvert')
-            // utility('my-backdrop-opacity', 'backdropOpacity')
-            // utility('my-backdrop-saturate', 'backdropSaturate')
-            // utility('my-backdrop-sepia', 'backdropSepia')
-            // utility('my-divide-width', 'divideWidth')
-            utility('my-border-width', 'borderWidth')
-            utility('my-brightness', 'brightness')
-            utility('my-columns', 'columns')
-            utility('my-contrast', 'contrast')
-            utility('my-flex-grow', 'flexGrow')
-            utility('my-flex-shrink', 'flexShrink')
-            utility('my-gradient-color-stop-positions', 'gradientColorStopPositions')
-            utility('my-grayscale', 'grayscale')
-            utility('my-grid-row-end', 'gridRowEnd')
-            utility('my-grid-row-start', 'gridRowStart')
-            utility('my-grid-template-columns', 'gridTemplateColumns')
-            utility('my-grid-template-rows', 'gridTemplateRows')
-            utility('my-hue-rotate', 'hueRotate')
-            utility('my-invert', 'invert')
-            utility('my-line-clamp', 'lineClamp')
-            utility('my-opacity', 'opacity')
-            utility('my-order', 'order')
-            utility('my-outline-offset', 'outlineOffset')
-            utility('my-outline-width', 'outlineWidth')
-            utility('my-ring-offset-width', 'ringOffsetWidth')
-            utility('my-ring-width', 'ringWidth')
-            utility('my-rotate', 'rotate')
-            utility('my-saturate', 'saturate')
-            utility('my-scale', 'scale')
-            utility('my-sepia', 'sepia')
-            utility('my-skew', 'skew')
-            utility('my-stroke-width', 'strokeWidth')
-            utility('my-text-decoration-thickness', 'textDecorationThickness')
-            utility('my-text-underline-offset', 'textUnderlineOffset')
-            utility('my-transition-delay', 'transitionDelay')
-            utility('my-transition-duration', 'transitionDuration')
-            utility('my-z-index', 'zIndex')
-          }),
-        }
-      },
-    })
-
-    let output = build([
-      'my-aspect-2/5',
-      // 'my-backdrop-brightness-1',
-      // 'my-backdrop-contrast-1',
-      // 'my-backdrop-grayscale-1',
-      // 'my-backdrop-hue-rotate-1',
-      // 'my-backdrop-invert-1',
-      // 'my-backdrop-opacity-1',
-      // 'my-backdrop-saturate-1',
-      // 'my-backdrop-sepia-1',
-      // 'my-divide-width-1',
-      'my-border-width-1',
-      'my-brightness-1',
-      'my-columns-1',
-      'my-contrast-1',
-      'my-flex-grow-1',
-      'my-flex-shrink-1',
-      'my-gradient-color-stop-positions-1',
-      'my-grayscale-1',
-      'my-grid-row-end-1',
-      'my-grid-row-start-1',
-      'my-grid-template-columns-1',
-      'my-grid-template-rows-1',
-      'my-hue-rotate-1',
-      'my-invert-1',
-      'my-line-clamp-1',
-      'my-opacity-1',
-      'my-order-1',
-      'my-outline-offset-1',
-      'my-outline-width-1',
-      'my-ring-offset-width-1',
-      'my-ring-width-1',
-      'my-rotate-1',
-      'my-saturate-1',
-      'my-scale-1',
-      'my-sepia-1',
-      'my-skew-1',
-      'my-stroke-width-1',
-      'my-text-decoration-thickness-1',
-      'my-text-underline-offset-1',
-      'my-transition-delay-1',
-      'my-transition-duration-1',
-      'my-z-index-1',
-    ])
-
-    expect(output).toMatchInlineSnapshot(`
-      ".my-aspect-2\\/5 {
+          },
+        },
+      ),
+    ).toMatchInlineSnapshot(`
+      "
+      .my-aspect-2\\/5 {
         --value: 2/5;
       }
+
       .my-border-width-1 {
         --value: 1px;
       }
+
       .my-brightness-1 {
         --value: 1%;
       }
+
       .my-columns-1 {
         --value: 1;
       }
+
       .my-contrast-1 {
         --value: 1%;
       }
-      .my-flex-grow-1 {
+
+      .my-flex-grow-1, .my-flex-shrink-1 {
         --value: 1;
       }
-      .my-flex-shrink-1 {
-        --value: 1;
-      }
-      .my-gradient-color-stop-positions-1 {
+
+      .my-gradient-color-stop-positions-1, .my-grayscale-1 {
         --value: 1%;
       }
-      .my-grayscale-1 {
-        --value: 1%;
-      }
-      .my-grid-row-end-1 {
+
+      .my-grid-row-end-1, .my-grid-row-start-1 {
         --value: 1;
       }
-      .my-grid-row-start-1 {
-        --value: 1;
-      }
-      .my-grid-template-columns-1 {
-        --value: repeat(1, minmax(0, 1fr));
-      }
-      .my-grid-template-rows-1 {
+
+      .my-grid-template-columns-1, .my-grid-template-rows-1 {
         --value: repeat(1, minmax(0, 1fr));
       }
+
       .my-hue-rotate-1 {
         --value: 1deg;
       }
+
       .my-invert-1 {
         --value: 1%;
       }
+
       .my-line-clamp-1 {
         --value: 1;
       }
+
       .my-opacity-1 {
         --value: 1%;
       }
+
       .my-order-1 {
         --value: 1;
       }
-      .my-outline-offset-1 {
-        --value: 1px;
-      }
-      .my-outline-width-1 {
-        --value: 1px;
-      }
-      .my-ring-offset-width-1 {
-        --value: 1px;
-      }
-      .my-ring-width-1 {
+
+      .my-outline-offset-1, .my-outline-width-1, .my-ring-offset-width-1, .my-ring-width-1 {
         --value: 1px;
       }
+
       .my-rotate-1 {
         --value: 1deg;
       }
-      .my-saturate-1 {
-        --value: 1%;
-      }
-      .my-scale-1 {
-        --value: 1%;
-      }
-      .my-sepia-1 {
+
+      .my-saturate-1, .my-scale-1, .my-sepia-1 {
         --value: 1%;
       }
+
       .my-skew-1 {
         --value: 1deg;
       }
+
       .my-stroke-width-1 {
         --value: 1;
       }
-      .my-text-decoration-thickness-1 {
+
+      .my-text-decoration-thickness-1, .my-text-underline-offset-1 {
         --value: 1px;
       }
-      .my-text-underline-offset-1 {
-        --value: 1px;
-      }
-      .my-transition-delay-1 {
-        --value: 1ms;
-      }
-      .my-transition-duration-1 {
+
+      .my-transition-delay-1, .my-transition-duration-1 {
         --value: 1ms;
       }
+
       .my-z-index-1 {
         --value: 1;
       }
@@ -1354,196 +1277,211 @@ describe('theme', async () => {
   })
 
   test('can use escaped JS variables in theme values', async () => {
-    let input = css`
-      @tailwind utilities;
-      @plugin "my-plugin";
-    `
-
-    let compiler = await compile(input, {
-      loadModule: async (id, base) => {
-        return {
-          path: '',
-          base,
-          module: plugin(
-            function ({ matchUtilities, theme }) {
-              matchUtilities(
-                { 'my-width': (value) => ({ width: value }) },
-                { values: theme('width') },
-              )
-            },
-            {
-              theme: {
-                extend: {
-                  width: {
-                    '1': '0.25rem',
-                    // Purposely setting to something different from the v3 default
-                    '1/2': '60%',
-                    '1.5': '0.375rem',
+    expect(
+      await run(
+        ['my-width-1', 'my-width-1/2', 'my-width-1.5'],
+        css`
+          @tailwind utilities;
+          @plugin "my-plugin";
+        `,
+        {
+          loadModule: async (_id, base) => {
+            return {
+              path: '',
+              base,
+              module: plugin(
+                function ({ matchUtilities, theme }) {
+                  matchUtilities(
+                    { 'my-width': (value) => ({ width: value }) },
+                    { values: theme('width') },
+                  )
+                },
+                {
+                  theme: {
+                    extend: {
+                      width: {
+                        '1': '0.25rem',
+                        // Purposely setting to something different from the v3 default
+                        '1/2': '60%',
+                        '1.5': '0.375rem',
+                      },
+                    },
                   },
                 },
-              },
-            },
-          ),
-        }
-      },
-    })
+              ),
+            }
+          },
+        },
+      ),
+    ).toMatchInlineSnapshot(`
+      "
+      .my-width-1 {
+        width: .25rem;
+      }
 
-    expect(compiler.build(['my-width-1', 'my-width-1/2', 'my-width-1.5'])).toMatchInlineSnapshot(
-      `
-      ".my-width-1 {
-        width: 0.25rem;
-      }
       .my-width-1\\.5 {
-        width: 0.375rem;
+        width: .375rem;
       }
+
       .my-width-1\\/2 {
         width: 60%;
       }
       "
-    `,
-    )
+    `)
   })
 
   test('can use escaped CSS variables in theme values', async () => {
-    let input = css`
-      @tailwind utilities;
-      @plugin "my-plugin";
+    expect(
+      await run(
+        ['my-width-1', 'my-width-1.5', 'my-width-1/2', 'my-width-2.5'],
+        css`
+          @tailwind utilities;
+          @plugin "my-plugin";
 
-      @theme {
-        --width-1: 0.25rem;
-        /* Purposely setting to something different from the v3 default */
-        --width-1\/2: 60%;
-        --width-1\.5: 0.375rem;
-        --width-2_5: 0.625rem;
+          @theme {
+            --width-1: 0.25rem;
+            /* Purposely setting to something different from the v3 default */
+            --width-1\/2: 60%;
+            --width-1\.5: 0.375rem;
+            --width-2_5: 0.625rem;
+          }
+        `,
+        {
+          loadModule: async (_id, base) => {
+            return {
+              path: '',
+              base,
+              module: plugin(function ({ matchUtilities, theme }) {
+                matchUtilities(
+                  { 'my-width': (value) => ({ width: value }) },
+                  { values: theme('width') },
+                )
+              }),
+            }
+          },
+        },
+      ),
+    ).toMatchInlineSnapshot(`
+      "
+      .my-width-1 {
+        width: .25rem;
       }
-    `
 
-    let compiler = await compile(input, {
-      loadModule: async (id, base) => {
-        return {
-          path: '',
-          base,
-          module: plugin(function ({ matchUtilities, theme }) {
-            matchUtilities(
-              { 'my-width': (value) => ({ width: value }) },
-              { values: theme('width') },
-            )
-          }),
-        }
-      },
-    })
+      .my-width-1\\.5 {
+        width: .375rem;
+      }
 
-    expect(compiler.build(['my-width-1', 'my-width-1.5', 'my-width-1/2', 'my-width-2.5']))
-      .toMatchInlineSnapshot(`
-        ".my-width-1 {
-          width: 0.25rem;
-        }
-        .my-width-1\\.5 {
-          width: 0.375rem;
-        }
-        .my-width-1\\/2 {
-          width: 60%;
-        }
-        .my-width-2\\.5 {
-          width: 0.625rem;
-        }
-        "
-      `)
+      .my-width-1\\/2 {
+        width: 60%;
+      }
+
+      .my-width-2\\.5 {
+        width: .625rem;
+      }
+      "
+    `)
   })
 
   test('can use escaped CSS variables in referenced theme namespace', async () => {
-    let input = css`
-      @tailwind utilities;
-      @plugin "my-plugin";
+    expect(
+      await run(
+        ['my-width-1', 'my-width-1.5', 'my-width-1/2', 'my-width-2.5'],
+        css`
+          @tailwind utilities;
+          @plugin "my-plugin";
 
-      @theme {
-        --width-1: 0.25rem;
-        /* Purposely setting to something different from the v3 default */
-        --width-1\/2: 60%;
-        --width-1\.5: 0.375rem;
-        --width-2_5: 0.625rem;
+          @theme {
+            --width-1: 0.25rem;
+            /* Purposely setting to something different from the v3 default */
+            --width-1\/2: 60%;
+            --width-1\.5: 0.375rem;
+            --width-2_5: 0.625rem;
+          }
+        `,
+        {
+          loadModule: async (_id, base) => {
+            return {
+              path: '',
+              base,
+              module: plugin(
+                function ({ matchUtilities, theme }) {
+                  matchUtilities(
+                    { 'my-width': (value) => ({ width: value }) },
+                    { values: theme('myWidth') },
+                  )
+                },
+                {
+                  theme: { myWidth: ({ theme }) => theme('width') },
+                },
+              ),
+            }
+          },
+        },
+      ),
+    ).toMatchInlineSnapshot(`
+      "
+      .my-width-1 {
+        width: .25rem;
       }
-    `
 
-    let compiler = await compile(input, {
-      loadModule: async (id, base) => {
-        return {
-          path: '',
-          base,
-          module: plugin(
-            function ({ matchUtilities, theme }) {
-              matchUtilities(
-                { 'my-width': (value) => ({ width: value }) },
-                { values: theme('myWidth') },
-              )
-            },
-            {
-              theme: { myWidth: ({ theme }) => theme('width') },
-            },
-          ),
-        }
-      },
-    })
+      .my-width-1\\.5 {
+        width: .375rem;
+      }
 
-    expect(compiler.build(['my-width-1', 'my-width-1.5', 'my-width-1/2', 'my-width-2.5']))
-      .toMatchInlineSnapshot(`
-        ".my-width-1 {
-          width: 0.25rem;
-        }
-        .my-width-1\\.5 {
-          width: 0.375rem;
-        }
-        .my-width-1\\/2 {
-          width: 60%;
-        }
-        .my-width-2\\.5 {
-          width: 0.625rem;
-        }
-        "
-      `)
+      .my-width-1\\/2 {
+        width: 60%;
+      }
+
+      .my-width-2\\.5 {
+        width: .625rem;
+      }
+      "
+    `)
   })
 })
 
 describe('addBase', () => {
   test('does not create rules when imported via `@import "…" reference`', async () => {
-    let input = css`
-      @tailwind utilities;
-      @plugin "outside";
-      @import './inside.css' reference;
-    `
-
-    let compiler = await compile(input, {
-      loadModule: async (id, base) => {
-        if (id === 'inside') {
-          return {
-            path: '',
-            base,
-            module: plugin(function ({ addBase }) {
-              addBase({ inside: { color: 'red' } })
-            }),
-          }
-        }
-        return {
-          path: '',
-          base,
-          module: plugin(function ({ addBase }) {
-            addBase({ outside: { color: 'red' } })
-          }),
-        }
-      },
-      async loadStylesheet() {
-        return {
-          path: '',
-          base: '',
-          content: css`
-            @plugin "inside";
-          `,
-        }
-      },
-    })
-
-    expect(compiler.build([])).toMatchInlineSnapshot(`
-      "@layer base {
+    expect(
+      await compileCss(
+        css`
+          @tailwind utilities;
+          @plugin "outside";
+          @import './inside.css' reference;
+        `,
+        {
+          loadModule: async (_id, base) => {
+            if (_id === 'inside') {
+              return {
+                path: '',
+                base,
+                module: plugin(function ({ addBase }) {
+                  addBase({ inside: { color: 'red' } })
+                }),
+              }
+            }
+            return {
+              path: '',
+              base,
+              module: plugin(function ({ addBase }) {
+                addBase({ outside: { color: 'red' } })
+              }),
+            }
+          },
+          async loadStylesheet() {
+            return {
+              path: '',
+              base: '',
+              content: css`
+                @plugin "inside";
+              `,
+            }
+          },
+        },
+      ),
+    ).toMatchInlineSnapshot(`
+      "
+      @layer base {
         outside {
           color: red;
         }
@@ -1553,28 +1491,24 @@ describe('addBase', () => {
   })
 
   test('does not modify CSS variables', async () => {
-    let input = css`
-      @plugin "my-plugin";
-    `
-
-    let compiler = await compile(input, {
-      loadModule: async () => ({
-        path: '',
-        base: '/root',
-        module: plugin(function ({ addBase }) {
-          addBase({
-            ':root': {
-              '--PascalCase': '1',
-              '--camelCase': '1',
-              '--UPPERCASE': '1',
-            },
-          })
-        }),
-      }),
-    })
-
-    expect(compiler.build([])).toMatchInlineSnapshot(`
-      "@layer base {
+    expect(
+      await compileCss(
+        css`
+          @plugin "my-plugin";
+        `,
+        {
+          loadModule: async () => ({
+            path: '',
+            base: '/root',
+            module: plugin(function ({ addBase }) {
+              addBase({ ':root': { '--PascalCase': '1', '--camelCase': '1', '--UPPERCASE': '1' } })
+            }),
+          }),
+        },
+      ),
+    ).toMatchInlineSnapshot(`
+      "
+      @layer base {
         :root {
           --PascalCase: 1;
           --camelCase: 1;
@@ -1584,154 +1518,321 @@ describe('addBase', () => {
       "
     `)
   })
+
+  test('@variant is replaced inside rules using addBase', async () => {
+    expect(
+      await compileCss(
+        css`
+          @plugin "my-plugin";
+          @theme {
+            --breakpoint-supertiny: 128px;
+          }
+        `,
+        {
+          loadModule: async () => ({
+            path: '',
+            base: '/root',
+            module: plugin(function ({ addBase }) {
+              addBase({
+                ':root': {
+                  '@variant supertiny': {
+                    '--PascalCase': '1',
+                    '--camelCase': '1',
+                    '--UPPERCASE': '1',
+                  },
+                  '@variant data-enabled:focus, disabled': {
+                    '--x': '1',
+                  },
+                },
+              })
+            }),
+          }),
+        },
+      ),
+    ).toMatchInlineSnapshot(`
+      "
+      @layer base {
+        @media (min-width: 128px) {
+          :root {
+            --PascalCase: 1;
+            --camelCase: 1;
+            --UPPERCASE: 1;
+          }
+        }
+
+        :root[data-enabled]:focus, :root:disabled {
+          --x: 1;
+        }
+      }
+      "
+    `)
+  })
+
+  test('@variant inside addBase works with custom variants', async () => {
+    expect(
+      await compileCss(
+        css`
+          @plugin "my-plugin";
+
+          @custom-variant custom (&.custom);
+        `,
+        {
+          loadModule: async () => ({
+            path: '',
+            base: '/root',
+            module: plugin(function ({ addBase }) {
+              addBase({
+                ':root': {
+                  '@variant custom': {
+                    '--x': '1',
+                  },
+                },
+              })
+            }),
+          }),
+        },
+      ),
+    ).toMatchInlineSnapshot(`
+      "
+      @layer base {
+        :root.custom {
+          --x: 1;
+        }
+      }
+      "
+    `)
+  })
 })
 
 describe('addVariant', () => {
   test('addVariant with string selector', async () => {
-    let { build } = await compile(
-      css`
-        @plugin "my-plugin";
-        @layer utilities {
-          @tailwind utilities;
-        }
-      `,
-      {
-        loadModule: async (id, base) => {
-          return {
-            path: '',
-            base,
-            module: ({ addVariant }: PluginAPI) => {
-              addVariant('hocus', '&:hover, &:focus')
-            },
+    expect(
+      await run(
+        ['hocus:underline', 'group-hocus:flex'],
+        css`
+          @plugin "my-plugin";
+          @layer utilities {
+            @tailwind utilities;
           }
+        `,
+        {
+          loadModule: async (_id, base) => {
+            return {
+              path: '',
+              base,
+              module: ({ addVariant }: PluginAPI) => {
+                addVariant('hocus', '&:hover, &:focus')
+              },
+            }
+          },
         },
-      },
-    )
-    let compiled = build(['hocus:underline', 'group-hocus:flex'])
-
-    expect(optimizeCss(compiled).trim()).toMatchInlineSnapshot(`
-      "@layer utilities {
-        .group-hocus\\:flex:is(:is(:where(.group):hover, :where(.group):focus) *) {
+      ),
+    ).toMatchInlineSnapshot(`
+      "
+      @layer utilities {
+        :is(:is(:where(.group):hover, :where(.group):focus) .group-hocus\\:flex) {
           display: flex;
         }
 
         .hocus\\:underline:hover, .hocus\\:underline:focus {
           text-decoration-line: underline;
         }
-      }"
+      }
+      "
+    `)
+  })
+
+  test('addVariant with `@scope`', async () => {
+    expect(
+      await run(
+        ['blue:underline', 'green:underline'],
+        css`
+          @plugin "my-plugin";
+          @layer utilities {
+            @tailwind utilities;
+          }
+        `,
+        {
+          loadModule: async (_id, base) => {
+            return {
+              path: '',
+              base,
+              module: ({ addVariant }: PluginAPI) => {
+                addVariant('blue', '@scope ([data-theme=blue]) to ([data-theme])')
+                addVariant('green', '@scope ([data-theme=green]) to ([data-theme]) { & }')
+              },
+            }
+          },
+        },
+      ),
+    ).toMatchInlineSnapshot(`
+      "
+      @layer utilities {
+        @scope ([data-theme="blue"]) to ([data-theme]) {
+          .blue\\:underline {
+            text-decoration-line: underline;
+          }
+        }
+
+        @scope ([data-theme="green"]) to ([data-theme]) {
+          .green\\:underline {
+            text-decoration-line: underline;
+          }
+        }
+      }
+      "
+    `)
+  })
+
+  test('matchVariant with `@scope`', async () => {
+    expect(
+      await run(
+        ['theme-[blue]:underline'],
+        css`
+          @plugin "my-plugin";
+          @layer utilities {
+            @tailwind utilities;
+          }
+        `,
+        {
+          loadModule: async (_id, base) => {
+            return {
+              path: '',
+              base,
+              module: ({ matchVariant }: PluginAPI) => {
+                matchVariant('theme', (value) => `@scope ([data-theme=${value}]) to ([data-theme])`)
+              },
+            }
+          },
+        },
+      ),
+    ).toMatchInlineSnapshot(`
+      "
+      @layer utilities {
+        @scope ([data-theme="blue"]) to ([data-theme]) {
+          .theme-\\[blue\\]\\:underline {
+            text-decoration-line: underline;
+          }
+        }
+      }
+      "
     `)
   })
 
   test('addVariant with array of selectors', async () => {
-    let { build } = await compile(
-      css`
-        @plugin "my-plugin";
-        @layer utilities {
-          @tailwind utilities;
-        }
-      `,
-      {
-        loadModule: async (id, base) => {
-          return {
-            path: '',
-            base,
-            module: ({ addVariant }: PluginAPI) => {
-              addVariant('hocus', ['&:hover', '&:focus'])
-            },
+    expect(
+      await run(
+        ['hocus:underline', 'group-hocus:flex'],
+        css`
+          @plugin "my-plugin";
+          @layer utilities {
+            @tailwind utilities;
           }
+        `,
+        {
+          loadModule: async (_id, base) => {
+            return {
+              path: '',
+              base,
+              module: ({ addVariant }: PluginAPI) => {
+                addVariant('hocus', ['&:hover', '&:focus'])
+              },
+            }
+          },
         },
-      },
-    )
-
-    let compiled = build(['hocus:underline', 'group-hocus:flex'])
-
-    expect(optimizeCss(compiled).trim()).toMatchInlineSnapshot(`
-      "@layer utilities {
-        .group-hocus\\:flex:is(:where(.group):hover *), .group-hocus\\:flex:is(:where(.group):focus *) {
+      ),
+    ).toMatchInlineSnapshot(`
+      "
+      @layer utilities {
+        :is(:where(.group):hover .group-hocus\\:flex), :is(:where(.group):focus .group-hocus\\:flex) {
           display: flex;
         }
 
         .hocus\\:underline:hover, .hocus\\:underline:focus {
           text-decoration-line: underline;
         }
-      }"
+      }
+      "
     `)
   })
 
   test('addVariant with object syntax and @slot', async () => {
-    let { build } = await compile(
-      css`
-        @plugin "my-plugin";
-        @layer utilities {
-          @tailwind utilities;
-        }
-      `,
-      {
-        loadModule: async (id, base) => {
-          return {
-            path: '',
-            base,
-            module: ({ addVariant }: PluginAPI) => {
-              addVariant('hocus', {
-                '&:hover': '@slot',
-                '&:focus': '@slot',
-              })
-            },
+    expect(
+      await run(
+        ['hocus:underline', 'group-hocus:flex'],
+        css`
+          @plugin "my-plugin";
+          @layer utilities {
+            @tailwind utilities;
           }
+        `,
+        {
+          loadModule: async (_id, base) => {
+            return {
+              path: '',
+              base,
+              module: ({ addVariant }: PluginAPI) => {
+                addVariant('hocus', {
+                  '&:hover': '@slot',
+                  '&:focus': '@slot',
+                })
+              },
+            }
+          },
         },
-      },
-    )
-    let compiled = build(['hocus:underline', 'group-hocus:flex'])
-
-    expect(optimizeCss(compiled).trim()).toMatchInlineSnapshot(`
-      "@layer utilities {
-        .group-hocus\\:flex:is(:where(.group):hover *), .group-hocus\\:flex:is(:where(.group):focus *) {
+      ),
+    ).toMatchInlineSnapshot(`
+      "
+      @layer utilities {
+        :is(:where(.group):hover .group-hocus\\:flex), :is(:where(.group):focus .group-hocus\\:flex) {
           display: flex;
         }
 
         .hocus\\:underline:hover, .hocus\\:underline:focus {
           text-decoration-line: underline;
         }
-      }"
+      }
+      "
     `)
   })
 
   test('addVariant with object syntax, media, nesting and multiple @slot', async () => {
-    let { build } = await compile(
-      css`
-        @plugin "my-plugin";
-        @layer utilities {
-          @tailwind utilities;
-        }
-      `,
-      {
-        loadModule: async (id, base) => {
-          return {
-            path: '',
-            base,
-            module: ({ addVariant }: PluginAPI) => {
-              addVariant('hocus', {
-                '@media (hover: hover)': {
-                  '&:hover': '@slot',
-                },
-                '&:focus': '@slot',
-              })
-            },
+    expect(
+      await run(
+        ['hocus:underline', 'group-hocus:flex'],
+        css`
+          @plugin "my-plugin";
+          @layer utilities {
+            @tailwind utilities;
           }
+        `,
+        {
+          loadModule: async (_id, base) => {
+            return {
+              path: '',
+              base,
+              module: ({ addVariant }: PluginAPI) => {
+                addVariant('hocus', {
+                  '@media (hover: hover)': {
+                    '&:hover': '@slot',
+                  },
+                  '&:focus': '@slot',
+                })
+              },
+            }
+          },
         },
-      },
-    )
-    let compiled = build(['hocus:underline', 'group-hocus:flex'])
-
-    expect(optimizeCss(compiled).trim()).toMatchInlineSnapshot(`
-      "@layer utilities {
+      ),
+    ).toMatchInlineSnapshot(`
+      "
+      @layer utilities {
         @media (hover: hover) {
-          .group-hocus\\:flex:is(:where(.group):hover *) {
+          :is(:where(.group):hover .group-hocus\\:flex) {
             display: flex;
           }
         }
 
-        .group-hocus\\:flex:is(:where(.group):focus *) {
+        :is(:where(.group):focus .group-hocus\\:flex) {
           display: flex;
         }
 
@@ -1744,37 +1845,39 @@ describe('addVariant', () => {
         .hocus\\:underline:focus {
           text-decoration-line: underline;
         }
-      }"
+      }
+      "
     `)
   })
 
   test('addVariant with at-rules and placeholder', async () => {
-    let { build } = await compile(
-      css`
-        @plugin "my-plugin";
-        @layer utilities {
-          @tailwind utilities;
-        }
-      `,
-      {
-        loadModule: async (id, base) => {
-          return {
-            path: '',
-            base,
-            module: ({ addVariant }: PluginAPI) => {
-              addVariant(
-                'potato',
-                '@media (max-width: 400px) { @supports (font:bold) { &:large-potato } }',
-              )
-            },
+    expect(
+      await run(
+        ['potato:underline', 'potato:flex'],
+        css`
+          @plugin "my-plugin";
+          @layer utilities {
+            @tailwind utilities;
           }
+        `,
+        {
+          loadModule: async (_id, base) => {
+            return {
+              path: '',
+              base,
+              module: ({ addVariant }: PluginAPI) => {
+                addVariant(
+                  'potato',
+                  '@media (max-width: 400px) { @supports (font:bold) { &:large-potato } }',
+                )
+              },
+            }
+          },
         },
-      },
-    )
-    let compiled = build(['potato:underline', 'potato:flex'])
-
-    expect(optimizeCss(compiled).trim()).toMatchInlineSnapshot(`
-      "@layer utilities {
+      ),
+    ).toMatchInlineSnapshot(`
+      "
+      @layer utilities {
         @media (max-width: 400px) {
           @supports (font: bold) {
             .potato\\:flex:large-potato {
@@ -1786,40 +1889,42 @@ describe('addVariant', () => {
             }
           }
         }
-      }"
+      }
+      "
     `)
   })
 
   test('@slot is preserved when used as a custom property value', async () => {
-    let { build } = await compile(
-      css`
-        @plugin "my-plugin";
-        @layer utilities {
-          @tailwind utilities;
-        }
-      `,
-      {
-        loadModule: async (id, base) => {
-          return {
-            path: '',
-            base,
-            module: ({ addVariant }: PluginAPI) => {
-              addVariant('hocus', {
-                '&': {
-                  '--custom-property': '@slot',
-                  '&:hover': '@slot',
-                  '&:focus': '@slot',
-                },
-              })
-            },
+    expect(
+      await run(
+        ['hocus:underline'],
+        css`
+          @plugin "my-plugin";
+          @layer utilities {
+            @tailwind utilities;
           }
+        `,
+        {
+          loadModule: async (_id, base) => {
+            return {
+              path: '',
+              base,
+              module: ({ addVariant }: PluginAPI) => {
+                addVariant('hocus', {
+                  '&': {
+                    '--custom-property': '@slot',
+                    '&:hover': '@slot',
+                    '&:focus': '@slot',
+                  },
+                })
+              },
+            }
+          },
         },
-      },
-    )
-    let compiled = build(['hocus:underline'])
-
-    expect(optimizeCss(compiled).trim()).toMatchInlineSnapshot(`
-      "@layer utilities {
+      ),
+    ).toMatchInlineSnapshot(`
+      "
+      @layer utilities {
         .hocus\\:underline {
           --custom-property: @slot;
         }
@@ -1827,74 +1932,73 @@ describe('addVariant', () => {
         .hocus\\:underline:hover, .hocus\\:underline:focus {
           text-decoration-line: underline;
         }
-      }"
+      }
+      "
     `)
   })
 
   test('ignores variants that use :merge(…) and ensures `peer-*` and `group-*` rules work out of the box', async () => {
-    let { build } = await compile(
-      css`
-        @plugin "my-plugin";
-        @layer utilities {
-          @tailwind utilities;
-        }
-      `,
-      {
-        loadModule: async (id, base) => {
-          return {
-            path: '',
-            base,
-            module: ({ addVariant }: PluginAPI) => {
-              addVariant('optional', '&:optional')
-              addVariant('group-optional', { ':merge(.group):optional &': '@slot' })
-              addVariant('peer-optional', { '&': { ':merge(.peer):optional ~ &': '@slot' } })
-            },
+    expect(
+      await run(
+        ['optional:flex', 'group-optional:flex', 'peer-optional:flex', 'group-optional/foo:flex'],
+        css`
+          @plugin "my-plugin";
+          @layer utilities {
+            @tailwind utilities;
           }
+        `,
+        {
+          loadModule: async (_id, base) => {
+            return {
+              path: '',
+              base,
+              module: ({ addVariant }: PluginAPI) => {
+                addVariant('optional', '&:optional')
+                addVariant('group-optional', { ':merge(.group):optional &': '@slot' })
+                addVariant('peer-optional', { '&': { ':merge(.peer):optional ~ &': '@slot' } })
+              },
+            }
+          },
         },
-      },
-    )
-    let compiled = build([
-      'optional:flex',
-      'group-optional:flex',
-      'peer-optional:flex',
-      'group-optional/foo:flex',
-    ])
-
-    expect(optimizeCss(compiled).trim()).toMatchInlineSnapshot(`
-      "@layer utilities {
-        .group-optional\\:flex:is(:where(.group):optional *), .group-optional\\/foo\\:flex:is(:where(.group\\/foo):optional *), .peer-optional\\:flex:is(:where(.peer):optional ~ *), .optional\\:flex:optional {
+      ),
+    ).toMatchInlineSnapshot(`
+      "
+      @layer utilities {
+        :is(:where(.group):optional .group-optional\\:flex), :is(:where(.group\\/foo):optional .group-optional\\/foo\\:flex), :is(:where(.peer):optional ~ .peer-optional\\:flex), .optional\\:flex:optional {
           display: flex;
         }
-      }"
+      }
+      "
     `)
   })
 })
 
 describe('matchVariant', () => {
   test('partial arbitrary variants', async () => {
-    let { build } = await compile(
-      css`
-        @plugin "my-plugin";
-        @layer utilities {
-          @tailwind utilities;
-        }
-      `,
-      {
-        loadModule: async (id, base) => {
-          return {
-            path: '',
-            base,
-            module: ({ matchVariant }: PluginAPI) => {
-              matchVariant('potato', (flavor) => `.potato-${flavor} &`)
-            },
+    expect(
+      await run(
+        ['potato-[yellow]:underline', 'potato-[baked]:flex'],
+        css`
+          @plugin "my-plugin";
+          @layer utilities {
+            @tailwind utilities;
           }
+        `,
+        {
+          loadModule: async (_id, base) => {
+            return {
+              path: '',
+              base,
+              module: ({ matchVariant }: PluginAPI) => {
+                matchVariant('potato', (flavor) => `.potato-${flavor} &`)
+              },
+            }
+          },
         },
-      },
-    )
-    let compiled = build(['potato-[yellow]:underline', 'potato-[baked]:flex'])
-
-    expect(optimizeCss(compiled).trim()).toMatchInlineSnapshot(`
-      "@layer utilities {
+      ),
+    ).toMatchInlineSnapshot(`
+      "
+      @layer utilities {
         .potato-baked .potato-\\[baked\\]\\:flex {
           display: flex;
         }
@@ -1902,34 +2006,36 @@ describe('matchVariant', () => {
         .potato-yellow .potato-\\[yellow\\]\\:underline {
           text-decoration-line: underline;
         }
-      }"
+      }
+      "
     `)
   })
 
   test('partial arbitrary variants with at-rules', async () => {
-    let { build } = await compile(
-      css`
-        @plugin "my-plugin";
-        @layer utilities {
-          @tailwind utilities;
-        }
-      `,
-      {
-        loadModule: async (id, base) => {
-          return {
-            path: '',
-            base,
-            module: ({ matchVariant }: PluginAPI) => {
-              matchVariant('potato', (flavor) => `@media (potato: ${flavor})`)
-            },
+    expect(
+      await run(
+        ['potato-[yellow]:underline', 'potato-[baked]:flex'],
+        css`
+          @plugin "my-plugin";
+          @layer utilities {
+            @tailwind utilities;
           }
+        `,
+        {
+          loadModule: async (_id, base) => {
+            return {
+              path: '',
+              base,
+              module: ({ matchVariant }: PluginAPI) => {
+                matchVariant('potato', (flavor) => `@media (potato: ${flavor})`)
+              },
+            }
+          },
         },
-      },
-    )
-    let compiled = build(['potato-[yellow]:underline', 'potato-[baked]:flex'])
-
-    expect(optimizeCss(compiled).trim()).toMatchInlineSnapshot(`
-      "@layer utilities {
+      ),
+    ).toMatchInlineSnapshot(`
+      "
+      @layer utilities {
         @media (potato: baked) {
           .potato-\\[baked\\]\\:flex {
             display: flex;
@@ -1941,38 +2047,38 @@ describe('matchVariant', () => {
             text-decoration-line: underline;
           }
         }
-      }"
+      }
+      "
     `)
   })
 
   test('partial arbitrary variants with at-rules and placeholder', async () => {
-    let { build } = await compile(
-      css`
-        @plugin "my-plugin";
-        @layer utilities {
-          @tailwind utilities;
-        }
-      `,
-      {
-        loadModule: async (id, base) => {
-          return {
-            path: '',
-            base,
-            module: ({ matchVariant }: PluginAPI) => {
-              matchVariant(
-                'potato',
-                (flavor) =>
-                  `@media (potato: ${flavor}) { @supports (font:bold) { &:large-potato } }`,
-              )
-            },
+    expect(
+      await run(
+        ['potato-[yellow]:underline', 'potato-[baked]:flex'],
+        css`
+          @plugin "my-plugin";
+          @layer utilities {
+            @tailwind utilities;
           }
+        `,
+        {
+          loadModule: async (_id, base) => {
+            return {
+              path: '',
+              base,
+              module: ({ matchVariant }: PluginAPI) => {
+                matchVariant('potato', (flavor) => {
+                  return `@media (potato: ${flavor}) { @supports (font:bold) { &:large-potato } }`
+                })
+              },
+            }
+          },
         },
-      },
-    )
-    let compiled = build(['potato-[yellow]:underline', 'potato-[baked]:flex'])
-
-    expect(optimizeCss(compiled).trim()).toMatchInlineSnapshot(`
-      "@layer utilities {
+      ),
+    ).toMatchInlineSnapshot(`
+      "
+      @layer utilities {
         @media (potato: baked) {
           @supports (font: bold) {
             .potato-\\[baked\\]\\:flex:large-potato {
@@ -1988,39 +2094,41 @@ describe('matchVariant', () => {
             }
           }
         }
-      }"
+      }
+      "
     `)
   })
 
   test('partial arbitrary variants with default values', async () => {
-    let { build } = await compile(
-      css`
-        @plugin "my-plugin";
-        @layer utilities {
-          @tailwind utilities;
-        }
-      `,
-      {
-        loadModule: async (id, base) => {
-          return {
-            path: '',
-            base,
-            module: ({ matchVariant }: PluginAPI) => {
-              matchVariant('tooltip', (side) => `&${side}`, {
-                values: {
-                  bottom: '[data-location="bottom"]',
-                  top: '[data-location="top"]',
-                },
-              })
-            },
+    expect(
+      await run(
+        ['tooltip-bottom:underline', 'tooltip-top:flex'],
+        css`
+          @plugin "my-plugin";
+          @layer utilities {
+            @tailwind utilities;
           }
+        `,
+        {
+          loadModule: async (_id, base) => {
+            return {
+              path: '',
+              base,
+              module: ({ matchVariant }: PluginAPI) => {
+                matchVariant('tooltip', (side) => `&${side}`, {
+                  values: {
+                    bottom: '[data-location="bottom"]',
+                    top: '[data-location="top"]',
+                  },
+                })
+              },
+            }
+          },
         },
-      },
-    )
-    let compiled = build(['tooltip-bottom:underline', 'tooltip-top:flex'])
-
-    expect(optimizeCss(compiled).trim()).toMatchInlineSnapshot(`
-      "@layer utilities {
+      ),
+    ).toMatchInlineSnapshot(`
+      "
+      @layer utilities {
         .tooltip-bottom\\:underline[data-location="bottom"] {
           text-decoration-line: underline;
         }
@@ -2028,118 +2136,120 @@ describe('matchVariant', () => {
         .tooltip-top\\:flex[data-location="top"] {
           display: flex;
         }
-      }"
+      }
+      "
     `)
   })
 
   test('matched variant values maintain the sort order they are registered in', async () => {
-    let { build } = await compile(
-      css`
-        @plugin "my-plugin";
-        @layer utilities {
-          @tailwind utilities;
-        }
-      `,
-      {
-        loadModule: async (id, base) => {
-          return {
-            path: '',
-            base,
-            module: ({ matchVariant }: PluginAPI) => {
-              matchVariant('alphabet', (side) => `&${side}`, {
-                values: {
-                  d: '[data-order="1"]',
-                  a: '[data-order="2"]',
-                  c: '[data-order="3"]',
-                  b: '[data-order="4"]',
-                },
-              })
-            },
+    expect(
+      await run(
+        [
+          'alphabet-c:underline',
+          'alphabet-a:underline',
+          'alphabet-d:underline',
+          'alphabet-b:underline',
+        ],
+        css`
+          @plugin "my-plugin";
+          @layer utilities {
+            @tailwind utilities;
           }
+        `,
+        {
+          loadModule: async (_id, base) => {
+            return {
+              path: '',
+              base,
+              module: ({ matchVariant }: PluginAPI) => {
+                matchVariant('alphabet', (side) => `&${side}`, {
+                  values: {
+                    d: '[data-order="1"]',
+                    a: '[data-order="2"]',
+                    c: '[data-order="3"]',
+                    b: '[data-order="4"]',
+                  },
+                })
+              },
+            }
+          },
         },
-      },
-    )
-    let compiled = build([
-      'alphabet-c:underline',
-      'alphabet-a:underline',
-      'alphabet-d:underline',
-      'alphabet-b:underline',
-    ])
-
-    expect(optimizeCss(compiled).trim()).toMatchInlineSnapshot(`
-      "@layer utilities {
+      ),
+    ).toMatchInlineSnapshot(`
+      "
+      @layer utilities {
         .alphabet-d\\:underline[data-order="1"], .alphabet-a\\:underline[data-order="2"], .alphabet-c\\:underline[data-order="3"], .alphabet-b\\:underline[data-order="4"] {
           text-decoration-line: underline;
         }
-      }"
+      }
+      "
     `)
   })
 
   test('matchVariant can return an array of format strings from the function', async () => {
-    let { build } = await compile(
-      css`
-        @plugin "my-plugin";
-        @layer utilities {
-          @tailwind utilities;
-        }
-      `,
-      {
-        loadModule: async (id, base) => {
-          return {
-            path: '',
-            base,
-            module: ({ matchVariant }: PluginAPI) => {
-              matchVariant('test', (selector) =>
-                selector.split(',').map((selector) => `&.${selector} > *`),
-              )
-            },
+    expect(
+      await run(
+        ['test-[a,b,c]:underline'],
+        css`
+          @plugin "my-plugin";
+          @layer utilities {
+            @tailwind utilities;
           }
+        `,
+        {
+          loadModule: async (_id, base) => {
+            return {
+              path: '',
+              base,
+              module: ({ matchVariant }: PluginAPI) => {
+                matchVariant('test', (selector) =>
+                  selector.split(',').map((selector) => `&.${selector} > *`),
+                )
+              },
+            }
+          },
         },
-      },
-    )
-    let compiled = build(['test-[a,b,c]:underline'])
-
-    expect(optimizeCss(compiled).trim()).toMatchInlineSnapshot(`
-      "@layer utilities {
+      ),
+    ).toMatchInlineSnapshot(`
+      "
+      @layer utilities {
         .test-\\[a\\,b\\,c\\]\\:underline.a > *, .test-\\[a\\,b\\,c\\]\\:underline.b > *, .test-\\[a\\,b\\,c\\]\\:underline.c > * {
           text-decoration-line: underline;
         }
-      }"
+      }
+      "
     `)
   })
 
   test('should be possible to sort variants', async () => {
-    let { build } = await compile(
-      css`
-        @plugin "my-plugin";
-        @layer utilities {
-          @tailwind utilities;
-        }
-      `,
-      {
-        loadModule: async (id, base) => {
-          return {
-            path: '',
-            base,
-            module: ({ matchVariant }: PluginAPI) => {
-              matchVariant('testmin', (value) => `@media (min-width: ${value})`, {
-                sort(a, z) {
-                  return parseInt(a.value) - parseInt(z.value)
-                },
-              })
-            },
+    expect(
+      await run(
+        ['testmin-[600px]:flex', 'testmin-[500px]:underline', 'testmin-[700px]:italic'],
+        css`
+          @plugin "my-plugin";
+          @layer utilities {
+            @tailwind utilities;
           }
+        `,
+        {
+          loadModule: async (_id, base) => {
+            return {
+              path: '',
+              base,
+              module: ({ matchVariant }: PluginAPI) => {
+                matchVariant('testmin', (value) => `@media (min-width: ${value})`, {
+                  sort(a, z) {
+                    return parseInt(a.value) - parseInt(z.value)
+                  },
+                })
+              },
+            }
+          },
         },
-      },
-    )
-    let compiled = build([
-      'testmin-[600px]:flex',
-      'testmin-[500px]:underline',
-      'testmin-[700px]:italic',
-    ])
-
-    expect(optimizeCss(compiled).trim()).toMatchInlineSnapshot(`
-      "@layer utilities {
+      ),
+    ).toMatchInlineSnapshot(`
+      "
+      @layer utilities {
         @media (min-width: 500px) {
           .testmin-\\[500px\\]\\:underline {
             text-decoration-line: underline;
@@ -2157,45 +2267,41 @@ describe('matchVariant', () => {
             font-style: italic;
           }
         }
-      }"
+      }
+      "
     `)
   })
 
   test('should be possible to compare arbitrary variants and hardcoded variants', async () => {
-    let { build } = await compile(
-      css`
-        @plugin "my-plugin";
-        @layer utilities {
-          @tailwind utilities;
-        }
-      `,
-      {
-        loadModule: async (id, base) => {
-          return {
-            path: '',
-            base,
-            module: ({ matchVariant }: PluginAPI) => {
-              matchVariant('testmin', (value) => `@media (min-width: ${value})`, {
-                values: {
-                  example: '600px',
-                },
-                sort(a, z) {
-                  return parseInt(a.value) - parseInt(z.value)
-                },
-              })
-            },
+    expect(
+      await run(
+        ['testmin-[700px]:italic', 'testmin-example:italic', 'testmin-[500px]:italic'],
+        css`
+          @plugin "my-plugin";
+          @layer utilities {
+            @tailwind utilities;
           }
+        `,
+        {
+          loadModule: async (_id, base) => {
+            return {
+              path: '',
+              base,
+              module: ({ matchVariant }: PluginAPI) => {
+                matchVariant('testmin', (value) => `@media (min-width: ${value})`, {
+                  values: { example: '600px' },
+                  sort(a, z) {
+                    return parseInt(a.value) - parseInt(z.value)
+                  },
+                })
+              },
+            }
+          },
         },
-      },
-    )
-    let compiled = build([
-      'testmin-[700px]:italic',
-      'testmin-example:italic',
-      'testmin-[500px]:italic',
-    ])
-
-    expect(optimizeCss(compiled).trim()).toMatchInlineSnapshot(`
-      "@layer utilities {
+      ),
+    ).toMatchInlineSnapshot(`
+      "
+      @layer utilities {
         @media (min-width: 500px) {
           .testmin-\\[500px\\]\\:italic {
             font-style: italic;
@@ -2213,50 +2319,51 @@ describe('matchVariant', () => {
             font-style: italic;
           }
         }
-      }"
+      }
+      "
     `)
   })
 
   test('should be possible to sort stacked arbitrary variants correctly', async () => {
-    let { build } = await compile(
-      css`
-        @plugin "my-plugin";
-        @layer utilities {
-          @tailwind utilities;
-        }
-      `,
-      {
-        loadModule: async (id, base) => {
-          return {
-            path: '',
-            base,
-            module: ({ matchVariant }: PluginAPI) => {
-              matchVariant('testmin', (value) => `@media (min-width: ${value})`, {
-                sort(a, z) {
-                  return parseInt(a.value) - parseInt(z.value)
-                },
-              })
-
-              matchVariant('testmax', (value) => `@media (max-width: ${value})`, {
-                sort(a, z) {
-                  return parseInt(z.value) - parseInt(a.value)
-                },
-              })
-            },
+    expect(
+      await run(
+        [
+          'testmin-[150px]:testmax-[400px]:order-2',
+          'testmin-[100px]:testmax-[350px]:order-3',
+          'testmin-[100px]:testmax-[300px]:order-4',
+          'testmin-[100px]:testmax-[400px]:order-1',
+        ],
+        css`
+          @plugin "my-plugin";
+          @layer utilities {
+            @tailwind utilities;
           }
+        `,
+        {
+          loadModule: async (_id, base) => {
+            return {
+              path: '',
+              base,
+              module: ({ matchVariant }: PluginAPI) => {
+                matchVariant('testmin', (value) => `@media (min-width: ${value})`, {
+                  sort(a, z) {
+                    return parseInt(a.value) - parseInt(z.value)
+                  },
+                })
+
+                matchVariant('testmax', (value) => `@media (max-width: ${value})`, {
+                  sort(a, z) {
+                    return parseInt(z.value) - parseInt(a.value)
+                  },
+                })
+              },
+            }
+          },
         },
-      },
-    )
-
-    let compiled = build([
-      'testmin-[150px]:testmax-[400px]:order-2',
-      'testmin-[100px]:testmax-[350px]:order-3',
-      'testmin-[100px]:testmax-[300px]:order-4',
-      'testmin-[100px]:testmax-[400px]:order-1',
-    ])
-
-    expect(optimizeCss(compiled).trim()).toMatchInlineSnapshot(`
-      "@layer utilities {
+      ),
+    ).toMatchInlineSnapshot(`
+      "
+      @layer utilities {
         @media (min-width: 100px) {
           @media (max-width: 400px) {
             .testmin-\\[100px\\]\\:testmax-\\[400px\\]\\:order-1 {
@@ -2286,48 +2393,50 @@ describe('matchVariant', () => {
             }
           }
         }
-      }"
+      }
+      "
     `)
   })
 
   test('should maintain sort from other variants, if sort functions of arbitrary variants return 0', async () => {
-    let { build } = await compile(
-      css`
-        @plugin "my-plugin";
-        @layer utilities {
-          @tailwind utilities;
-        }
-      `,
-      {
-        loadModule: async (id, base) => {
-          return {
-            path: '',
-            base,
-            module: ({ matchVariant }: PluginAPI) => {
-              matchVariant('testmin', (value) => `@media (min-width: ${value})`, {
-                sort(a, z) {
-                  return parseInt(a.value) - parseInt(z.value)
-                },
-              })
-
-              matchVariant('testmax', (value) => `@media (max-width: ${value})`, {
-                sort(a, z) {
-                  return parseInt(z.value) - parseInt(a.value)
-                },
-              })
-            },
-          }
-        },
-      },
-    )
-    let compiled = build([
-      'testmin-[100px]:testmax-[200px]:focus:underline',
-      'testmin-[100px]:testmax-[200px]:hover:underline',
-    ])
-
     // Expect :focus to come after :hover
-    expect(optimizeCss(compiled).trim()).toMatchInlineSnapshot(`
-      "@layer utilities {
+    expect(
+      await run(
+        [
+          'testmin-[100px]:testmax-[200px]:focus:underline',
+          'testmin-[100px]:testmax-[200px]:hover:underline',
+        ],
+        css`
+          @plugin "my-plugin";
+          @layer utilities {
+            @tailwind utilities;
+          }
+        `,
+        {
+          loadModule: async (_id, base) => {
+            return {
+              path: '',
+              base,
+              module: ({ matchVariant }: PluginAPI) => {
+                matchVariant('testmin', (value) => `@media (min-width: ${value})`, {
+                  sort(a, z) {
+                    return parseInt(a.value) - parseInt(z.value)
+                  },
+                })
+
+                matchVariant('testmax', (value) => `@media (max-width: ${value})`, {
+                  sort(a, z) {
+                    return parseInt(z.value) - parseInt(a.value)
+                  },
+                })
+              },
+            }
+          },
+        },
+      ),
+    ).toMatchInlineSnapshot(`
+      "
+      @layer utilities {
         @media (min-width: 100px) {
           @media (max-width: 200px) {
             @media (hover: hover) {
@@ -2341,48 +2450,50 @@ describe('matchVariant', () => {
             }
           }
         }
-      }"
+      }
+      "
     `)
   })
 
   test('should sort arbitrary variants left to right (1)', async () => {
-    let { build } = await compile(
-      css`
-        @plugin "my-plugin";
-        @layer utilities {
-          @tailwind utilities;
-        }
-      `,
-      {
-        loadModule: async (id, base) => {
-          return {
-            path: '',
-            base,
-            module: ({ matchVariant }: PluginAPI) => {
-              matchVariant('testmin', (value) => `@media (min-width: ${value})`, {
-                sort(a, z) {
-                  return parseInt(a.value) - parseInt(z.value)
-                },
-              })
-              matchVariant('testmax', (value) => `@media (max-width: ${value})`, {
-                sort(a, z) {
-                  return parseInt(z.value) - parseInt(a.value)
-                },
-              })
-            },
+    expect(
+      await run(
+        [
+          'testmin-[200px]:testmax-[400px]:order-2',
+          'testmin-[200px]:testmax-[300px]:order-4',
+          'testmin-[100px]:testmax-[400px]:order-1',
+          'testmin-[100px]:testmax-[300px]:order-3',
+        ],
+        css`
+          @plugin "my-plugin";
+          @layer utilities {
+            @tailwind utilities;
           }
+        `,
+        {
+          loadModule: async (_id, base) => {
+            return {
+              path: '',
+              base,
+              module: ({ matchVariant }: PluginAPI) => {
+                matchVariant('testmin', (value) => `@media (min-width: ${value})`, {
+                  sort(a, z) {
+                    return parseInt(a.value) - parseInt(z.value)
+                  },
+                })
+                matchVariant('testmax', (value) => `@media (max-width: ${value})`, {
+                  sort(a, z) {
+                    return parseInt(z.value) - parseInt(a.value)
+                  },
+                })
+              },
+            }
+          },
         },
-      },
-    )
-    let compiled = build([
-      'testmin-[200px]:testmax-[400px]:order-2',
-      'testmin-[200px]:testmax-[300px]:order-4',
-      'testmin-[100px]:testmax-[400px]:order-1',
-      'testmin-[100px]:testmax-[300px]:order-3',
-    ])
-
-    expect(optimizeCss(compiled).trim()).toMatchInlineSnapshot(`
-      "@layer utilities {
+      ),
+    ).toMatchInlineSnapshot(`
+      "
+      @layer utilities {
         @media (min-width: 100px) {
           @media (max-width: 400px) {
             .testmin-\\[100px\\]\\:testmax-\\[400px\\]\\:order-1 {
@@ -2414,48 +2525,50 @@ describe('matchVariant', () => {
             }
           }
         }
-      }"
+      }
+      "
     `)
   })
 
   test('should sort arbitrary variants left to right (2)', async () => {
-    let { build } = await compile(
-      css`
-        @plugin "my-plugin";
-        @layer utilities {
-          @tailwind utilities;
-        }
-      `,
-      {
-        loadModule: async (id, base) => {
-          return {
-            path: '',
-            base,
-            module: ({ matchVariant }: PluginAPI) => {
-              matchVariant('testmin', (value) => `@media (min-width: ${value})`, {
-                sort(a, z) {
-                  return parseInt(a.value) - parseInt(z.value)
-                },
-              })
-              matchVariant('testmax', (value) => `@media (max-width: ${value})`, {
-                sort(a, z) {
-                  return parseInt(z.value) - parseInt(a.value)
-                },
-              })
-            },
+    expect(
+      await run(
+        [
+          'testmax-[400px]:testmin-[200px]:underline',
+          'testmax-[300px]:testmin-[200px]:underline',
+          'testmax-[400px]:testmin-[100px]:underline',
+          'testmax-[300px]:testmin-[100px]:underline',
+        ],
+        css`
+          @plugin "my-plugin";
+          @layer utilities {
+            @tailwind utilities;
           }
+        `,
+        {
+          loadModule: async (_id, base) => {
+            return {
+              path: '',
+              base,
+              module: ({ matchVariant }: PluginAPI) => {
+                matchVariant('testmin', (value) => `@media (min-width: ${value})`, {
+                  sort(a, z) {
+                    return parseInt(a.value) - parseInt(z.value)
+                  },
+                })
+                matchVariant('testmax', (value) => `@media (max-width: ${value})`, {
+                  sort(a, z) {
+                    return parseInt(z.value) - parseInt(a.value)
+                  },
+                })
+              },
+            }
+          },
         },
-      },
-    )
-    let compiled = build([
-      'testmax-[400px]:testmin-[200px]:underline',
-      'testmax-[300px]:testmin-[200px]:underline',
-      'testmax-[400px]:testmin-[100px]:underline',
-      'testmax-[300px]:testmin-[100px]:underline',
-    ])
-
-    expect(optimizeCss(compiled).trim()).toMatchInlineSnapshot(`
-      "@layer utilities {
+      ),
+    ).toMatchInlineSnapshot(`
+      "
+      @layer utilities {
         @media (max-width: 400px) {
           @media (min-width: 100px) {
             .testmax-\\[400px\\]\\:testmin-\\[100px\\]\\:underline {
@@ -2483,56 +2596,58 @@ describe('matchVariant', () => {
             }
           }
         }
-      }"
+      }
+      "
     `)
   })
 
   test('should guarantee that we are not passing values from other variants to the wrong function', async () => {
-    let { build } = await compile(
-      css`
-        @plugin "my-plugin";
-        @layer utilities {
-          @tailwind utilities;
-        }
-      `,
-      {
-        loadModule: async (id, base) => {
-          return {
-            path: '',
-            base,
-            module: ({ matchVariant }: PluginAPI) => {
-              matchVariant('testmin', (value) => `@media (min-width: ${value})`, {
-                sort(a, z) {
-                  let lookup = ['100px', '200px']
-                  if (lookup.indexOf(a.value) === -1 || lookup.indexOf(z.value) === -1) {
-                    throw new Error('We are seeing values that should not be there!')
-                  }
-                  return lookup.indexOf(a.value) - lookup.indexOf(z.value)
-                },
-              })
-              matchVariant('testmax', (value) => `@media (max-width: ${value})`, {
-                sort(a, z) {
-                  let lookup = ['300px', '400px']
-                  if (lookup.indexOf(a.value) === -1 || lookup.indexOf(z.value) === -1) {
-                    throw new Error('We are seeing values that should not be there!')
-                  }
-                  return lookup.indexOf(z.value) - lookup.indexOf(a.value)
-                },
-              })
-            },
+    expect(
+      await run(
+        [
+          'testmin-[200px]:testmax-[400px]:order-2',
+          'testmin-[200px]:testmax-[300px]:order-4',
+          'testmin-[100px]:testmax-[400px]:order-1',
+          'testmin-[100px]:testmax-[300px]:order-3',
+        ],
+        css`
+          @plugin "my-plugin";
+          @layer utilities {
+            @tailwind utilities;
           }
+        `,
+        {
+          loadModule: async (_id, base) => {
+            return {
+              path: '',
+              base,
+              module: ({ matchVariant }: PluginAPI) => {
+                matchVariant('testmin', (value) => `@media (min-width: ${value})`, {
+                  sort(a, z) {
+                    let lookup = ['100px', '200px']
+                    if (lookup.indexOf(a.value) === -1 || lookup.indexOf(z.value) === -1) {
+                      throw new Error('We are seeing values that should not be there!')
+                    }
+                    return lookup.indexOf(a.value) - lookup.indexOf(z.value)
+                  },
+                })
+                matchVariant('testmax', (value) => `@media (max-width: ${value})`, {
+                  sort(a, z) {
+                    let lookup = ['300px', '400px']
+                    if (lookup.indexOf(a.value) === -1 || lookup.indexOf(z.value) === -1) {
+                      throw new Error('We are seeing values that should not be there!')
+                    }
+                    return lookup.indexOf(z.value) - lookup.indexOf(a.value)
+                  },
+                })
+              },
+            }
+          },
         },
-      },
-    )
-    let compiled = build([
-      'testmin-[200px]:testmax-[400px]:order-2',
-      'testmin-[200px]:testmax-[300px]:order-4',
-      'testmin-[100px]:testmax-[400px]:order-1',
-      'testmin-[100px]:testmax-[300px]:order-3',
-    ])
-
-    expect(optimizeCss(compiled).trim()).toMatchInlineSnapshot(`
-      "@layer utilities {
+      ),
+    ).toMatchInlineSnapshot(`
+      "
+      @layer utilities {
         @media (min-width: 100px) {
           @media (max-width: 400px) {
             .testmin-\\[100px\\]\\:testmax-\\[400px\\]\\:order-1 {
@@ -2564,170 +2679,178 @@ describe('matchVariant', () => {
             }
           }
         }
-      }"
+      }
+      "
     `)
   })
 
   test('should default to the DEFAULT value for variants', async () => {
-    let { build } = await compile(
-      css`
-        @plugin "my-plugin";
-        @layer utilities {
-          @tailwind utilities;
-        }
-      `,
-      {
-        loadModule: async (id, base) => {
-          return {
-            path: '',
-            base,
-            module: ({ matchVariant }: PluginAPI) => {
-              matchVariant('foo', (value) => `.foo${value} &`, {
-                values: {
-                  DEFAULT: '.bar',
-                },
-              })
-            },
+    expect(
+      await run(
+        ['foo:underline'],
+        css`
+          @plugin "my-plugin";
+          @layer utilities {
+            @tailwind utilities;
           }
+        `,
+        {
+          loadModule: async (_id, base) => {
+            return {
+              path: '',
+              base,
+              module: ({ matchVariant }: PluginAPI) => {
+                matchVariant('foo', (value) => `.foo${value} &`, {
+                  values: { DEFAULT: '.bar' },
+                })
+              },
+            }
+          },
         },
-      },
-    )
-    let compiled = build(['foo:underline'])
-
-    expect(optimizeCss(compiled).trim()).toMatchInlineSnapshot(`
-      "@layer utilities {
+      ),
+    ).toMatchInlineSnapshot(`
+      "
+      @layer utilities {
         .foo.bar .foo\\:underline {
           text-decoration-line: underline;
         }
-      }"
+      }
+      "
     `)
   })
 
   test('should not generate anything if the matchVariant does not have a DEFAULT value configured', async () => {
-    let { build } = await compile(
-      css`
-        @plugin "my-plugin";
-        @layer utilities {
-          @tailwind utilities;
-        }
-      `,
-      {
-        loadModule: async (id, base) => {
-          return {
-            path: '',
-            base,
-            module: ({ matchVariant }: PluginAPI) => {
-              matchVariant('foo', (value) => `.foo${value} &`)
-            },
+    expect(
+      await run(
+        ['foo:underline'],
+        css`
+          @plugin "my-plugin";
+          @layer utilities {
+            @tailwind utilities;
           }
+        `,
+        {
+          loadModule: async (_id, base) => {
+            return {
+              path: '',
+              base,
+              module: ({ matchVariant }: PluginAPI) => {
+                matchVariant('foo', (value) => `.foo${value} &`)
+              },
+            }
+          },
         },
-      },
-    )
-    let compiled = build(['foo:underline'])
-
-    expect(optimizeCss(compiled).trim()).toMatchInlineSnapshot(`"@layer utilities;"`)
+      ),
+    ).toMatchInlineSnapshot(`
+      "
+      @layer utilities;
+      "
+    `)
   })
 
   test('should be possible to use `null` as a DEFAULT value', async () => {
-    let { build } = await compile(
-      css`
-        @plugin "my-plugin";
-        @layer utilities {
-          @tailwind utilities;
-        }
-      `,
-      {
-        loadModule: async (id, base) => {
-          return {
-            path: '',
-            base,
-            module: ({ matchVariant }: PluginAPI) => {
-              matchVariant('foo', (value) => `.foo${value === null ? '-good' : '-bad'} &`, {
-                values: { DEFAULT: null },
-              })
-            },
+    expect(
+      await run(
+        ['foo:underline'],
+        css`
+          @plugin "my-plugin";
+          @layer utilities {
+            @tailwind utilities;
           }
+        `,
+        {
+          loadModule: async (_id, base) => {
+            return {
+              path: '',
+              base,
+              module: ({ matchVariant }: PluginAPI) => {
+                matchVariant('foo', (value) => `.foo${value === null ? '-good' : '-bad'} &`, {
+                  values: { DEFAULT: null },
+                })
+              },
+            }
+          },
         },
-      },
-    )
-    let compiled = build(['foo:underline'])
-
-    expect(optimizeCss(compiled).trim()).toMatchInlineSnapshot(`
-      "@layer utilities {
+      ),
+    ).toMatchInlineSnapshot(`
+      "
+      @layer utilities {
         .foo-good .foo\\:underline {
           text-decoration-line: underline;
         }
-      }"
+      }
+      "
     `)
   })
 
   test('should be possible to use `undefined` as a DEFAULT value', async () => {
-    let { build } = await compile(
-      css`
-        @plugin "my-plugin";
-        @layer utilities {
-          @tailwind utilities;
-        }
-      `,
-      {
-        loadModule: async (id, base) => {
-          return {
-            path: '',
-            base,
-            module: ({ matchVariant }: PluginAPI) => {
-              matchVariant('foo', (value) => `.foo${value === undefined ? '-good' : '-bad'} &`, {
-                values: { DEFAULT: undefined },
-              })
-            },
+    expect(
+      await run(
+        ['foo:underline'],
+        css`
+          @plugin "my-plugin";
+          @layer utilities {
+            @tailwind utilities;
           }
+        `,
+        {
+          loadModule: async (_id, base) => {
+            return {
+              path: '',
+              base,
+              module: ({ matchVariant }: PluginAPI) => {
+                matchVariant('foo', (value) => `.foo${value === undefined ? '-good' : '-bad'} &`, {
+                  values: { DEFAULT: undefined },
+                })
+              },
+            }
+          },
         },
-      },
-    )
-    let compiled = build(['foo:underline'])
-
-    expect(optimizeCss(compiled).trim()).toMatchInlineSnapshot(`
-      "@layer utilities {
+      ),
+    ).toMatchInlineSnapshot(`
+      "
+      @layer utilities {
         .foo-good .foo\\:underline {
           text-decoration-line: underline;
         }
-      }"
+      }
+      "
     `)
   })
 
   test('should be called with eventual modifiers', async () => {
-    let { build } = await compile(
-      css`
-        @plugin "my-plugin";
-        @tailwind utilities;
-      `,
-      {
-        loadModule: async (id, base) => {
-          return {
-            path: '',
-            base,
-            module: ({ matchVariant }: PluginAPI) => {
-              matchVariant('my-container', (value, { modifier }) => {
-                function parseValue(value: string) {
-                  const numericValue = value.match(/^(\d+\.\d+|\d+|\.\d+)\D+/)?.[1] ?? null
-                  if (numericValue === null) return null
+    expect(
+      await run(
+        ['my-container-[250px]:underline', 'my-container-[250px]/placement:underline'],
+        css`
+          @plugin "my-plugin";
+          @tailwind utilities;
+        `,
+        {
+          loadModule: async (_id, base) => {
+            return {
+              path: '',
+              base,
+              module: ({ matchVariant }: PluginAPI) => {
+                matchVariant('my-container', (value, { modifier }) => {
+                  function parseValue(value: string) {
+                    const numericValue = value.match(/^(\d+\.\d+|\d+|\.\d+)\D+/)?.[1] ?? null
+                    if (numericValue === null) return null
 
-                  return parseFloat(value)
-                }
+                    return parseFloat(value)
+                  }
 
-                const parsed = parseValue(value)
-                return parsed !== null ? `@container ${modifier ?? ''} (min-width: ${value})` : []
-              })
-            },
-          }
+                  const parsed = parseValue(value)
+                  return parsed !== null ? `@container ${modifier ?? ''} (min-width: ${value})` : []
+                })
+              },
+            }
+          },
         },
-      },
-    )
-    let compiled = build([
-      'my-container-[250px]:underline',
-      'my-container-[250px]/placement:underline',
-    ])
-    expect(optimizeCss(compiled).trim()).toMatchInlineSnapshot(`
-      "@container (min-width: 250px) {
+      ),
+    ).toMatchInlineSnapshot(`
+      "
+      @container (min-width: 250px) {
         .my-container-\\[250px\\]\\:underline {
           text-decoration-line: underline;
         }
@@ -2737,347 +2860,372 @@ describe('matchVariant', () => {
         .my-container-\\[250px\\]\\/placement\\:underline {
           text-decoration-line: underline;
         }
-      }"
+      }
+      "
     `)
   })
 
   test('ignores variants that use :merge(…)', async () => {
-    let { build } = await compile(
-      css`
-        @plugin "my-plugin";
-        @layer utilities {
-          @tailwind utilities;
-        }
-      `,
-      {
-        loadModule: async (id, base) => {
-          return {
-            path: '',
-            base,
-            module: ({ matchVariant }: PluginAPI) => {
-              matchVariant('optional', (flavor) => `&:optional:has(${flavor}) &`)
-              matchVariant('group-optional', (flavor) => `:merge(.group):optional:has(${flavor}) &`)
-              matchVariant('peer-optional', (flavor) => `:merge(.peer):optional:has(${flavor}) ~ &`)
-            },
+    expect(
+      await run(
+        [
+          'optional-[test]:flex',
+          'group-optional-[test]:flex',
+          'peer-optional-[test]:flex',
+          'group-optional-[test]/foo:flex',
+        ],
+        css`
+          @plugin "my-plugin";
+          @layer utilities {
+            @tailwind utilities;
           }
+        `,
+        {
+          loadModule: async (_id, base) => {
+            return {
+              path: '',
+              base,
+              module: ({ matchVariant }: PluginAPI) => {
+                matchVariant('optional', (flavor) => `&:optional:has(${flavor}) &`)
+                matchVariant(
+                  'group-optional',
+                  (flavor) => `:merge(.group):optional:has(${flavor}) &`,
+                )
+                matchVariant(
+                  'peer-optional',
+                  (flavor) => `:merge(.peer):optional:has(${flavor}) ~ &`,
+                )
+              },
+            }
+          },
         },
-      },
-    )
-    let compiled = build([
-      'optional-[test]:flex',
-      'group-optional-[test]:flex',
-      'peer-optional-[test]:flex',
-      'group-optional-[test]/foo:flex',
-    ])
-
-    expect(optimizeCss(compiled).trim()).toMatchInlineSnapshot(`
-      "@layer utilities {
-        .group-optional-\\[test\\]\\:flex:is(:where(.group):optional:has(test) :where(.group) *), .group-optional-\\[test\\]\\/foo\\:flex:is(:where(.group\\/foo):optional:has(test) :where(.group\\/foo) *), .peer-optional-\\[test\\]\\:flex:is(:where(.peer):optional:has(test) :where(.peer) ~ *), .optional-\\[test\\]\\:flex:optional:has(test) .optional-\\[test\\]\\:flex {
+      ),
+    ).toMatchInlineSnapshot(`
+      "
+      @layer utilities {
+        :is(:where(.group):optional:has(test) :where(.group) .group-optional-\\[test\\]\\:flex), :is(:where(.group\\/foo):optional:has(test) :where(.group\\/foo) .group-optional-\\[test\\]\\/foo\\:flex), :is(:where(.peer):optional:has(test) :where(.peer) ~ .peer-optional-\\[test\\]\\:flex), .optional-\\[test\\]\\:flex:optional:has(test) .optional-\\[test\\]\\:flex {
           display: flex;
         }
-      }"
+      }
+      "
     `)
   })
 
   test('ignores variants that use unknown values', async () => {
-    let { build } = await compile(
-      css`
-        @plugin "my-plugin";
-        @layer utilities {
-          @tailwind utilities;
-        }
-      `,
-      {
-        loadModule: async (id, base) => {
-          return {
-            path: '',
-            base,
-            module: ({ matchVariant }: PluginAPI) => {
-              matchVariant('foo', (flavor) => `&:is(${flavor})`, {
-                values: {
-                  known: 'known',
-                },
-              })
-            },
+    expect(
+      await run(
+        ['foo-[test]:flex', 'foo-known:flex', 'foo-unknown:flex'],
+        css`
+          @plugin "my-plugin";
+          @layer utilities {
+            @tailwind utilities;
           }
+        `,
+        {
+          loadModule: async (_id, base) => {
+            return {
+              path: '',
+              base,
+              module: ({ matchVariant }: PluginAPI) => {
+                matchVariant('foo', (flavor) => `&:is(${flavor})`, {
+                  values: { known: 'known' },
+                })
+              },
+            }
+          },
         },
-      },
-    )
-
-    let compiled = build(['foo-[test]:flex', 'foo-known:flex', 'foo-unknown:flex'])
-
-    expect(optimizeCss(compiled).trim()).toMatchInlineSnapshot(`
-      "@layer utilities {
+      ),
+    ).toMatchInlineSnapshot(`
+      "
+      @layer utilities {
         .foo-known\\:flex:is(known), .foo-\\[test\\]\\:flex:is(test) {
           display: flex;
         }
-      }"
+      }
+      "
     `)
   })
 
   test('ignores variants that produce non-string values', async () => {
-    let { build } = await compile(
-      css`
-        @plugin "my-plugin";
-        @layer utilities {
-          @tailwind utilities;
-        }
-      `,
-      {
-        loadModule: async (id, base) => {
-          return {
-            path: '',
-            base,
-            module: ({ matchVariant }: PluginAPI) => {
-              matchVariant('foo', (flavor) => `&:is(${flavor})`, {
-                values: {
-                  string: 'some string',
-                  object: { some: 'object' },
-                },
-              })
-            },
+    expect(
+      await run(
+        ['foo-[test]:flex', 'foo-string:flex', 'foo-object:flex'],
+        css`
+          @plugin "my-plugin";
+          @layer utilities {
+            @tailwind utilities;
           }
+        `,
+        {
+          loadModule: async (_id, base) => {
+            return {
+              path: '',
+              base,
+              module: ({ matchVariant }: PluginAPI) => {
+                matchVariant('foo', (flavor) => `&:is(${flavor})`, {
+                  values: {
+                    string: 'some string',
+                    object: { some: 'object' },
+                  },
+                })
+              },
+            }
+          },
         },
-      },
-    )
-
-    let compiled = build(['foo-[test]:flex', 'foo-string:flex', 'foo-object:flex'])
-
-    expect(optimizeCss(compiled).trim()).toMatchInlineSnapshot(`
-      "@layer utilities {
+      ),
+    ).toMatchInlineSnapshot(`
+      "
+      @layer utilities {
         .foo-string\\:flex:is(some string), .foo-\\[test\\]\\:flex:is(test) {
           display: flex;
         }
-      }"
+      }
+      "
     `)
   })
 })
 
 describe('addUtilities()', () => {
   test('custom static utility', async () => {
-    let compiled = await compile(
-      css`
-        @plugin "my-plugin";
-        @layer utilities {
-          @tailwind utilities;
-        }
-
-        @theme reference {
-          --breakpoint-lg: 1024px;
-        }
-      `,
-      {
-        async loadModule(id, base) {
-          return {
-            path: '',
-            base,
-            module: ({ addUtilities }: PluginAPI) => {
-              addUtilities({
-                '.text-trim': {
-                  'text-box-trim': 'both',
-                  'text-box-edge': 'cap alphabetic',
-                },
-              })
-            },
-          }
-        },
-      },
-    )
-
-    expect(optimizeCss(compiled.build(['text-trim', 'lg:text-trim'])).trim())
-      .toMatchInlineSnapshot(`
-        "@layer utilities {
-          .text-trim {
-            text-box-trim: both;
-            text-box-edge: cap alphabetic;
+    expect(
+      await run(
+        ['text-trim', 'lg:text-trim'],
+        css`
+          @plugin "my-plugin";
+          @layer utilities {
+            @tailwind utilities;
           }
 
-          @media (min-width: 1024px) {
-            .lg\\:text-trim {
-              text-box-trim: both;
-              text-box-edge: cap alphabetic;
-            }
+          @theme reference {
+            --breakpoint-lg: 1024px;
           }
-        }"
-      `)
-  })
-
-  test('return multiple rule objects from a custom utility', async () => {
-    let compiled = await compile(
-      css`
-        @plugin "my-plugin";
-        @tailwind utilities;
-      `,
-      {
-        async loadModule(id, base) {
-          return {
-            path: '',
-            base,
-            module: ({ addUtilities }: PluginAPI) => {
-              addUtilities([
-                {
-                  '.text-trim': [
-                    { 'text-box-trim': 'both' },
-                    { 'text-box-edge': 'cap alphabetic' },
-                  ],
-                },
-              ])
-            },
-          }
-        },
-      },
-    )
-
-    expect(optimizeCss(compiled.build(['text-trim'])).trim()).toMatchInlineSnapshot(`
-      ".text-trim {
-        text-box-trim: both;
-        text-box-edge: cap alphabetic;
-      }"
-    `)
-  })
-
-  test('define multiple utilities with array syntax', async () => {
-    let compiled = await compile(
-      css`
-        @plugin "my-plugin";
-        @tailwind utilities;
-      `,
-      {
-        async loadModule(id, base) {
-          return {
-            path: '',
-            base,
-            module: ({ addUtilities }: PluginAPI) => {
-              addUtilities([
-                {
+        `,
+        {
+          async loadModule(_id, base) {
+            return {
+              path: '',
+              base,
+              module: ({ addUtilities }: PluginAPI) => {
+                addUtilities({
                   '.text-trim': {
                     'text-box-trim': 'both',
                     'text-box-edge': 'cap alphabetic',
                   },
-                },
-                {
-                  '.text-trim-2': {
-                    'text-box-trim': 'both',
-                    'text-box-edge': 'cap alphabetic',
-                  },
-                },
-              ])
-            },
-          }
+                })
+              },
+            }
+          },
         },
-      },
-    )
+      ),
+    ).toMatchInlineSnapshot(`
+      "
+      @layer utilities {
+        .text-trim {
+          text-box-trim: both;
+          text-box-edge: cap alphabetic;
+        }
 
-    expect(optimizeCss(compiled.build(['text-trim', 'text-trim-2'])).trim()).toMatchInlineSnapshot(`
-      ".text-trim, .text-trim-2 {
+        @media (min-width: 1024px) {
+          .lg\\:text-trim {
+            text-box-trim: both;
+            text-box-edge: cap alphabetic;
+          }
+        }
+      }
+      "
+    `)
+  })
+
+  test('return multiple rule objects from a custom utility', async () => {
+    expect(
+      await run(
+        ['text-trim'],
+        css`
+          @plugin "my-plugin";
+          @tailwind utilities;
+        `,
+        {
+          async loadModule(_id, base) {
+            return {
+              path: '',
+              base,
+              module: ({ addUtilities }: PluginAPI) => {
+                addUtilities([
+                  {
+                    '.text-trim': [
+                      { 'text-box-trim': 'both' },
+                      { 'text-box-edge': 'cap alphabetic' },
+                    ],
+                  },
+                ])
+              },
+            }
+          },
+        },
+      ),
+    ).toMatchInlineSnapshot(`
+      "
+      .text-trim {
         text-box-trim: both;
         text-box-edge: cap alphabetic;
-      }"
+      }
+      "
+    `)
+  })
+
+  test('define multiple utilities with array syntax', async () => {
+    expect(
+      await run(
+        ['text-trim', 'text-trim-2'],
+        css`
+          @plugin "my-plugin";
+          @tailwind utilities;
+        `,
+        {
+          async loadModule(_id, base) {
+            return {
+              path: '',
+              base,
+              module: ({ addUtilities }: PluginAPI) => {
+                addUtilities([
+                  {
+                    '.text-trim': {
+                      'text-box-trim': 'both',
+                      'text-box-edge': 'cap alphabetic',
+                    },
+                  },
+                  {
+                    '.text-trim-2': {
+                      'text-box-trim': 'both',
+                      'text-box-edge': 'cap alphabetic',
+                    },
+                  },
+                ])
+              },
+            }
+          },
+        },
+      ),
+    ).toMatchInlineSnapshot(`
+      "
+      .text-trim, .text-trim-2 {
+        text-box-trim: both;
+        text-box-edge: cap alphabetic;
+      }
+      "
     `)
   })
 
   test('utilities can use arrays for fallback declaration values', async () => {
-    let compiled = await compile(
-      css`
-        @plugin "my-plugin";
-        @tailwind utilities;
-      `,
-      {
-        async loadModule(id, base) {
-          return {
-            path: '',
-            base,
-            module: ({ addUtilities }: PluginAPI) => {
-              addUtilities([
-                {
-                  '.outlined': {
-                    outline: ['1px solid ButtonText', '1px auto -webkit-focus-ring-color'],
+    expect(
+      await run(
+        ['outlined'],
+        css`
+          @plugin "my-plugin";
+          @tailwind utilities;
+        `,
+        {
+          async loadModule(_id, base) {
+            return {
+              path: '',
+              base,
+              module: ({ addUtilities }: PluginAPI) => {
+                addUtilities([
+                  {
+                    '.outlined': {
+                      outline: ['1px solid ButtonText', '1px auto -webkit-focus-ring-color'],
+                    },
                   },
-                },
-              ])
-            },
-          }
+                ])
+              },
+            }
+          },
         },
-      },
-    )
-
-    expect(optimizeCss(compiled.build(['outlined'])).trim()).toMatchInlineSnapshot(`
-      ".outlined {
+      ),
+    ).toMatchInlineSnapshot(`
+      "
+      .outlined {
         outline: 1px solid buttontext;
         outline: 1px auto -webkit-focus-ring-color;
-      }"
+      }
+      "
     `)
   })
 
   test('camel case properties are converted to kebab-case', async () => {
-    let compiled = await compile(
-      css`
-        @plugin "my-plugin";
-        @layer utilities {
-          @tailwind utilities;
-        }
-      `,
-      {
-        async loadModule(id, base) {
-          return {
-            path: '',
-            base,
-            module: ({ addUtilities }: PluginAPI) => {
-              addUtilities({
-                '.text-trim': {
-                  WebkitAppearance: 'none',
-                  textBoxTrim: 'both',
-                  textBoxEdge: 'cap alphabetic',
-                },
-              })
-            },
+    expect(
+      await run(
+        ['text-trim'],
+        css`
+          @plugin "my-plugin";
+          @layer utilities {
+            @tailwind utilities;
           }
+        `,
+        {
+          async loadModule(_id, base) {
+            return {
+              path: '',
+              base,
+              module: ({ addUtilities }: PluginAPI) => {
+                addUtilities({
+                  '.text-trim': {
+                    WebkitAppearance: 'none',
+                    textBoxTrim: 'both',
+                    textBoxEdge: 'cap alphabetic',
+                  },
+                })
+              },
+            }
+          },
         },
-      },
-    )
-
-    expect(optimizeCss(compiled.build(['text-trim'])).trim()).toMatchInlineSnapshot(`
-      "@layer utilities {
+      ),
+    ).toMatchInlineSnapshot(`
+      "
+      @layer utilities {
         .text-trim {
           -webkit-appearance: none;
           text-box-trim: both;
           text-box-edge: cap alphabetic;
         }
-      }"
+      }
+      "
     `)
   })
 
   test('custom static utilities support `@apply`', async () => {
-    let compiled = await compile(
-      css`
-        @plugin "my-plugin";
-        @layer utilities {
-          @tailwind utilities;
-        }
-
-        @theme reference {
-          --breakpoint-lg: 1024px;
-        }
-      `,
-      {
-        async loadModule(id, base) {
-          return {
-            path: '',
-            base,
-            module: ({ addUtilities }: PluginAPI) => {
-              addUtilities({
-                '.foo': {
-                  '@apply flex dark:underline': {},
-                },
-              })
-            },
+    expect(
+      await run(
+        ['foo', 'lg:foo'],
+        css`
+          @plugin "my-plugin";
+          @layer utilities {
+            @tailwind utilities;
           }
-        },
-      },
-    )
 
-    expect(optimizeCss(compiled.build(['foo', 'lg:foo'])).trim()).toMatchInlineSnapshot(`
-      "@layer utilities {
+          @theme reference {
+            --breakpoint-lg: 1024px;
+          }
+        `,
+        {
+          async loadModule(_id, base) {
+            return {
+              path: '',
+              base,
+              module: ({ addUtilities }: PluginAPI) => {
+                addUtilities({
+                  '.foo': {
+                    '@apply flex dark:underline': {},
+                  },
+                })
+              },
+            }
+          },
+        },
+      ),
+    ).toMatchInlineSnapshot(`
+      "
+      @layer utilities {
         .foo {
           display: flex;
         }
@@ -3099,7 +3247,8 @@ describe('addUtilities()', () => {
             }
           }
         }
-      }"
+      }
+      "
     `)
   })
 
@@ -3117,7 +3266,7 @@ describe('addUtilities()', () => {
           }
         `,
         {
-          async loadModule(id, base) {
+          async loadModule(_id, base) {
             return {
               path: '',
               base,
@@ -3133,399 +3282,336 @@ describe('addUtilities()', () => {
           },
         },
       )
-    }).rejects.toThrowError(/invalid utility selector/)
+    }).rejects.toThrow(/invalid utility selector/)
   })
 
   test('supports multiple selector names', async () => {
-    let compiled = await compile(
-      css`
-        @plugin "my-plugin";
-        @tailwind utilities;
-
-        @theme reference {
-          --breakpoint-lg: 1024px;
-        }
-      `,
-      {
-        async loadModule(id, base) {
-          return {
-            path: '',
-            base,
-            module: ({ addUtilities }: PluginAPI) => {
-              addUtilities({
-                '.form-input, .form-textarea': {
-                  appearance: 'none',
-                  'background-color': '#fff',
-                },
-              })
-            },
-          }
-        },
-      },
-    )
-
-    expect(optimizeCss(compiled.build(['form-input', 'lg:form-textarea'])).trim())
-      .toMatchInlineSnapshot(`
-        ".form-input {
-          appearance: none;
-          background-color: #fff;
-        }
-
-        @media (min-width: 1024px) {
-          .lg\\:form-textarea {
-            appearance: none;
-            background-color: #fff;
-          }
-        }"
-      `)
-  })
-
-  test('supports pseudo classes and pseudo elements', async () => {
-    let compiled = await compile(
-      css`
-        @plugin "my-plugin";
-        @tailwind utilities;
-
-        @theme reference {
-          --breakpoint-lg: 1024px;
-        }
-      `,
-      {
-        async loadModule(id, base) {
-          return {
-            path: '',
-            base,
-            module: ({ addUtilities }: PluginAPI) => {
-              addUtilities({
-                '.form-input, .form-input::placeholder, .form-textarea:hover:focus': {
-                  'background-color': 'red',
-                },
-              })
-            },
-          }
-        },
-      },
-    )
-
-    expect(compiled.build(['form-input', 'lg:form-textarea']).trim()).toMatchInlineSnapshot(`
-      ".form-input {
-        background-color: red;
-        &::placeholder {
-          background-color: red;
-        }
-      }
-      .lg\\:form-textarea {
-        @media (width >= 1024px) {
-          &:hover:focus {
-            background-color: red;
-          }
-        }
-      }"
-    `)
-  })
-
-  test('nests complex utility names', async () => {
-    let compiled = await compile(
-      css`
-        @plugin "my-plugin";
-        @layer utilities {
-          @tailwind utilities;
-        }
-      `,
-      {
-        async loadModule(id, base) {
-          return {
-            path: '',
-            base,
-            module: ({ addUtilities }: PluginAPI) => {
-              addUtilities({
-                '.a .b:hover .c': {
-                  color: 'red',
-                },
-                '.d > *': {
-                  color: 'red',
-                },
-                '.e .bar:not(.f):has(.g)': {
-                  color: 'red',
-                },
-                '.h~.i': {
-                  color: 'red',
-                },
-                '.j.j': {
-                  color: 'red',
-                },
-              })
-            },
-          }
-        },
-      },
-    )
-
     expect(
-      compiled.build(['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j']).trim(),
-    ).toMatchInlineSnapshot(
-      `
-      "@layer utilities {
-        .j {
-          &.j {
-            color: red;
-          }
-          .j& {
-            color: red;
-          }
-        }
-        .a {
-          & .b:hover .c {
-            color: red;
-          }
-        }
-        .b {
-          .a &:hover .c {
-            color: red;
-          }
-        }
-        .c {
-          .a .b:hover & {
-            color: red;
-          }
-        }
-        .d {
-          & > * {
-            color: red;
-          }
-        }
-        .e {
-          & .bar:not(.f):has(.g) {
-            color: red;
-          }
-        }
-        .g {
-          .e .bar:not(.f):has(&) {
-            color: red;
-          }
-        }
-        .h {
-          &~.i {
-            color: red;
-          }
-        }
-        .i {
-          .h~& {
-            color: red;
-          }
-        }
-      }"
-    `,
-    )
-  })
-
-  test('prefixes nested class names with the configured theme prefix', async () => {
-    let compiled = await compile(
-      css`
-        @plugin "my-plugin";
-        @layer utilities {
-          @tailwind utilities;
-        }
-        @theme prefix(tw) {
-        }
-      `,
-      {
-        async loadModule(id, base) {
-          return {
-            path: '',
-            base,
-            module: ({ addUtilities }: PluginAPI) => {
-              addUtilities({
-                '.a .b:hover .c.d': {
-                  color: 'red',
-                },
-              })
-            },
-          }
-        },
-      },
-    )
-
-    expect(compiled.build(['tw:a', 'tw:b', 'tw:c', 'tw:d']).trim()).toMatchInlineSnapshot(
-      `
-      "@layer utilities {
-        .tw\\:a {
-          & .tw\\:b:hover .tw\\:c.tw\\:d {
-            color: red;
-          }
-        }
-        .tw\\:b {
-          .tw\\:a &:hover .tw\\:c.tw\\:d {
-            color: red;
-          }
-        }
-        .tw\\:c {
-          .tw\\:a .tw\\:b:hover &.tw\\:d {
-            color: red;
-          }
-        }
-        .tw\\:d {
-          .tw\\:a .tw\\:b:hover .tw\\:c& {
-            color: red;
-          }
-        }
-      }"
-    `,
-    )
-  })
-
-  test('replaces the class name with variants in nested selectors', async () => {
-    let compiled = await compile(
-      css`
-        @plugin "my-plugin";
-        @theme {
-          --breakpoint-md: 768px;
-        }
-        @tailwind utilities;
-      `,
-      {
-        async loadModule(id, base) {
-          return {
-            path: '',
-            base,
-            module: ({ addUtilities }: PluginAPI) => {
-              addUtilities({
-                '.foo': {
-                  ':where(.foo > :first-child)': {
-                    color: 'red',
-                  },
-                },
-              })
-            },
-          }
-        },
-      },
-    )
-
-    expect(compiled.build(['foo', 'md:foo', 'not-hover:md:foo']).trim()).toMatchInlineSnapshot(`
-      ".foo {
-        :where(.foo > :first-child) {
-          color: red;
-        }
-      }
-      .md\\:foo {
-        @media (width >= 768px) {
-          :where(.md\\:foo > :first-child) {
-            color: red;
-          }
-        }
-      }
-      .not-hover\\:md\\:foo {
-        &:not(*:hover) {
-          @media (width >= 768px) {
-            :where(.not-hover\\:md\\:foo > :first-child) {
-              color: red;
-            }
-          }
-        }
-        @media not (hover: hover) {
-          @media (width >= 768px) {
-            :where(.not-hover\\:md\\:foo > :first-child) {
-              color: red;
-            }
-          }
-        }
-      }"
-    `)
-  })
-
-  test('values that are `false`, `null`, or `undefined` are discarded from CSS object ASTs', async () => {
-    let compiled = await compile(
-      css`
-        @plugin "my-plugin";
-        @tailwind utilities;
-      `,
-      {
-        async loadModule(id, base) {
-          return {
-            path: '',
-            base,
-            module: ({ addUtilities }: PluginAPI) => {
-              addUtilities({
-                '.foo': {
-                  a: 'red',
-                  // @ts-ignore: While this isn't valid per the types this did work in v3
-                  'z-index': 0,
-                  // @ts-ignore
-                  '.bar': false,
-                  // @ts-ignore
-                  '.baz': null,
-                  // @ts-ignore
-                  '.qux': undefined,
-                },
-              })
-            },
-          }
-        },
-      },
-    )
-
-    expect(compiled.build(['foo']).trim()).toMatchInlineSnapshot(`
-      ".foo {
-        a: red;
-        z-index: 0;
-      }"
-    `)
-  })
-})
-
-describe('matchUtilities()', () => {
-  test('custom functional utility', async () => {
-    async function run(candidates: string[]) {
-      let compiled = await compile(
+      await run(
+        ['form-input', 'lg:form-textarea'],
         css`
           @plugin "my-plugin";
-
           @tailwind utilities;
 
           @theme reference {
             --breakpoint-lg: 1024px;
           }
         `,
-
         {
-          async loadModule(id, base) {
+          async loadModule(_id, base) {
             return {
               path: '',
               base,
-              module: ({ matchUtilities }: PluginAPI) => {
-                matchUtilities(
-                  {
-                    'border-block': (value) => ({ 'border-block-width': value }),
+              module: ({ addUtilities }: PluginAPI) => {
+                addUtilities({
+                  '.form-input, .form-textarea': {
+                    appearance: 'none',
+                    'background-color': '#fff',
                   },
-                  {
-                    values: {
-                      DEFAULT: '1px',
-                      '2': '2px',
-                    },
-                  },
-                )
+                })
               },
             }
           },
         },
-      )
+      ),
+    ).toMatchInlineSnapshot(`
+      "
+      .form-input {
+        appearance: none;
+        background-color: #fff;
+      }
 
-      return compiled.build(candidates)
-    }
+      @media (min-width: 1024px) {
+        .lg\\:form-textarea {
+          appearance: none;
+          background-color: #fff;
+        }
+      }
+      "
+    `)
+  })
+
+  test('supports pseudo classes and pseudo elements', async () => {
+    expect(
+      await run(
+        ['form-input', 'lg:form-textarea'],
+        css`
+          @plugin "my-plugin";
+          @tailwind utilities;
+
+          @theme reference {
+            --breakpoint-lg: 1024px;
+          }
+        `,
+        {
+          async loadModule(_id, base) {
+            return {
+              path: '',
+              base,
+              module: ({ addUtilities }: PluginAPI) => {
+                addUtilities({
+                  '.form-input, .form-input::placeholder, .form-textarea:hover:focus': {
+                    'background-color': 'red',
+                  },
+                })
+              },
+            }
+          },
+        },
+      ),
+    ).toMatchInlineSnapshot(`
+      "
+      .form-input, .form-input::placeholder {
+        background-color: red;
+      }
+
+      @media (min-width: 1024px) {
+        .lg\\:form-textarea:hover:focus {
+          background-color: red;
+        }
+      }
+      "
+    `)
+  })
+
+  test('nests complex utility names', async () => {
+    expect(
+      await run(
+        ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j'],
+        css`
+          @plugin "my-plugin";
+          @layer utilities {
+            @tailwind utilities;
+          }
+        `,
+        {
+          async loadModule(_id, base) {
+            return {
+              path: '',
+              base,
+              module: ({ addUtilities }: PluginAPI) => {
+                addUtilities({
+                  '.a .b:hover .c': { color: 'red' },
+                  '.d > *': { color: 'red' },
+                  '.e .bar:not(.f):has(.g)': { color: 'red' },
+                  '.h~.i': { color: 'red' },
+                  '.j.j': { color: 'red' },
+                })
+              },
+            }
+          },
+        },
+      ),
+    ).toMatchInlineSnapshot(`
+      "
+      @layer utilities {
+        .j.j, .a .b:hover .c, .d > *, .e .bar:not(.f):has(.g), .h ~ .i {
+          color: red;
+        }
+      }
+      "
+    `)
+  })
+
+  test('does not register class names inside `:nth-child(… of …)` as utilities', async () => {
+    expect(
+      await run(
+        ['foo', 'mark'],
+        css`
+          @plugin "my-plugin";
+          @layer utilities {
+            @tailwind utilities;
+          }
+        `,
+        {
+          async loadModule(_id, base) {
+            return {
+              path: '',
+              base,
+              module: ({ addUtilities }: PluginAPI) => {
+                addUtilities({
+                  '.foo:nth-child(2 of .mark)': { color: 'red' },
+                })
+              },
+            }
+          },
+        },
+      ),
+    ).toMatchInlineSnapshot(`
+      "
+      @layer utilities {
+        .foo:nth-child(2 of .mark) {
+          color: red;
+        }
+      }
+      "
+    `)
+  })
+
+  test('prefixes nested class names with the configured theme prefix', async () => {
+    expect(
+      await run(
+        ['tw:a', 'tw:b', 'tw:c', 'tw:d'],
+        css`
+          @plugin "my-plugin";
+          @layer utilities {
+            @tailwind utilities;
+          }
+          @theme prefix(tw) {
+          }
+        `,
+        {
+          async loadModule(_id, base) {
+            return {
+              path: '',
+              base,
+              module: ({ addUtilities }: PluginAPI) => {
+                addUtilities({ '.a .b:hover .c.d': { color: 'red' } })
+              },
+            }
+          },
+        },
+      ),
+    ).toMatchInlineSnapshot(`
+      "
+      @layer utilities {
+        .tw\\:a .tw\\:b:hover .tw\\:c.tw\\:d {
+          color: red;
+        }
+      }
+      "
+    `)
+  })
+
+  test('replaces the class name with variants in nested selectors', async () => {
+    expect(
+      await run(
+        ['foo', 'md:foo', 'not-hover:md:foo'],
+        css`
+          @plugin "my-plugin";
+          @theme {
+            --breakpoint-md: 768px;
+          }
+          @tailwind utilities;
+        `,
+        {
+          async loadModule(_id, base) {
+            return {
+              path: '',
+              base,
+              module: ({ addUtilities }: PluginAPI) => {
+                addUtilities({ '.foo': { ':where(.foo > :first-child)': { color: 'red' } } })
+              },
+            }
+          },
+        },
+      ),
+    ).toMatchInlineSnapshot(`
+      "
+      .foo :where(.foo > :first-child) {
+        color: red;
+      }
+
+      @media (min-width: 768px) {
+        .md\\:foo :where(.md\\:foo > :first-child), .not-hover\\:md\\:foo:not(:hover) :where(.not-hover\\:md\\:foo > :first-child) {
+          color: red;
+        }
+      }
+
+      @media not all and (hover: hover) {
+        @media (min-width: 768px) {
+          .not-hover\\:md\\:foo :where(.not-hover\\:md\\:foo > :first-child) {
+            color: red;
+          }
+        }
+      }
+      "
+    `)
+  })
+
+  test('values that are `false`, `null`, or `undefined` are discarded from CSS object ASTs', async () => {
+    expect(
+      await run(
+        ['foo'],
+        css`
+          @plugin "my-plugin";
+          @tailwind utilities;
+        `,
+        {
+          async loadModule(_id, base) {
+            return {
+              path: '',
+              base,
+              module: ({ addUtilities }: PluginAPI) => {
+                addUtilities({
+                  '.foo': {
+                    a: 'red',
+                    // @ts-ignore: While this isn't valid per the types this did work in v3
+                    'z-index': 0,
+                    // @ts-ignore
+                    '.bar': false,
+                    // @ts-ignore
+                    '.baz': null,
+                    // @ts-ignore
+                    '.qux': undefined,
+                  },
+                })
+              },
+            }
+          },
+        },
+      ),
+    ).toMatchInlineSnapshot(`
+      "
+      .foo {
+        a: red;
+        z-index: 0;
+      }
+      "
+    `)
+  })
+})
+
+describe('matchUtilities()', () => {
+  test('custom functional utility', async () => {
+    let input = css`
+      @plugin "my-plugin";
+
+      @tailwind utilities;
+
+      @theme reference {
+        --breakpoint-lg: 1024px;
+      }
+    `
 
     expect(
-      optimizeCss(
-        await run([
+      await run(
+        [
           'border-block',
           'border-block-2',
           'border-block-[35px]',
           'border-block-[var(--foo)]',
           'lg:border-block-2',
-        ]),
-      ).trim(),
+        ],
+        input,
+        {
+          async loadModule(_id, base) {
+            return {
+              path: '',
+              base,
+              module: ({ matchUtilities }: PluginAPI) => {
+                matchUtilities(
+                  { 'border-block': (value) => ({ 'border-block-width': value }) },
+                  { values: { DEFAULT: '1px', '2': '2px' } },
+                )
+              },
+            }
+          },
+        },
+      ),
     ).toMatchInlineSnapshot(`
-      ".border-block {
+      "
+      .border-block {
         border-block-width: 1px;
       }
 
@@ -3545,55 +3631,61 @@ describe('matchUtilities()', () => {
         .lg\\:border-block-2 {
           border-block-width: 2px;
         }
-      }"
+      }
+      "
     `)
 
     expect(
-      optimizeCss(
-        await run([
+      await run(
+        [
           '-border-block',
           '-border-block-2',
           'lg:-border-block-2',
           'border-block-unknown',
           'border-block/1',
-        ]),
-      ).trim(),
-    ).toEqual('')
-  })
-
-  test('custom functional utilities can start with @', async () => {
-    async function run(candidates: string[]) {
-      let compiled = await compile(
-        css`
-          @plugin "my-plugin";
-          @tailwind utilities;
-        `,
-
+        ],
+        input,
         {
-          async loadModule(id, base) {
+          async loadModule(_id, base) {
             return {
               path: '',
               base,
               module: ({ matchUtilities }: PluginAPI) => {
                 matchUtilities(
-                  { '@w': (value) => ({ width: value }) },
-                  {
-                    values: {
-                      1: '1px',
-                    },
-                  },
+                  { 'border-block': (value) => ({ 'border-block-width': value }) },
+                  { values: { DEFAULT: '1px', '2': '2px' } },
                 )
               },
             }
           },
         },
-      )
+      ),
+    ).toEqual('')
+  })
 
-      return compiled.build(candidates)
-    }
-
-    expect(optimizeCss(await run(['@w-1', 'hover:@w-1'])).trim()).toMatchInlineSnapshot(`
-      ".\\@w-1 {
+  test('custom functional utilities can start with @', async () => {
+    expect(
+      await run(
+        ['@w-1', 'hover:@w-1'],
+        css`
+          @plugin "my-plugin";
+          @tailwind utilities;
+        `,
+        {
+          async loadModule(_id, base) {
+            return {
+              path: '',
+              base,
+              module: ({ matchUtilities }: PluginAPI) => {
+                matchUtilities({ '@w': (value) => ({ width: value }) }, { values: { 1: '1px' } })
+              },
+            }
+          },
+        },
+      ),
+    ).toMatchInlineSnapshot(`
+      "
+      .\\@w-1 {
         width: 1px;
       }
 
@@ -3601,198 +3693,195 @@ describe('matchUtilities()', () => {
         .hover\\:\\@w-1:hover {
           width: 1px;
         }
-      }"
+      }
+      "
     `)
   })
 
   test('custom functional utilities can return an array of rules', async () => {
-    let compiled = await compile(
-      css`
-        @plugin "my-plugin";
-        @tailwind utilities;
-      `,
-      {
-        async loadModule(id, base) {
+    expect(
+      await run(
+        ['all-but-order-bottom-left-radius'],
+        css`
+          @plugin "my-plugin";
+          @tailwind utilities;
+        `,
+        {
+          async loadModule(_id, base) {
+            return {
+              path: '',
+              base,
+              module: ({ matchUtilities }: PluginAPI) => {
+                matchUtilities(
+                  {
+                    'all-but-order-bottom-left-radius': (value) =>
+                      [
+                        { 'border-top-left-radius': value },
+                        { 'border-top-right-radius': value },
+                        { 'border-bottom-right-radius': value },
+                      ] as CssInJs[],
+                  },
+                  { values: { DEFAULT: '1px' } },
+                )
+              },
+            }
+          },
+        },
+      ),
+    ).toMatchInlineSnapshot(`
+      "
+      .all-but-order-bottom-left-radius {
+        border-top-left-radius: 1px;
+        border-top-right-radius: 1px;
+        border-bottom-right-radius: 1px;
+      }
+      "
+    `)
+  })
+
+  test('custom functional utility with any modifier', async () => {
+    expect(
+      await run(
+        ['border-block', 'border-block-2', 'border-block/foo', 'border-block-2/foo'],
+        css`
+          @plugin "my-plugin";
+
+          @tailwind utilities;
+
+          @theme reference {
+            --breakpoint-lg: 1024px;
+          }
+        `,
+        {
+          async loadModule(_id, base) {
+            return {
+              path: '',
+              base,
+              module: ({ matchUtilities }: PluginAPI) => {
+                matchUtilities(
+                  {
+                    'border-block': (value, { modifier }) => ({
+                      '--my-modifier': modifier ?? 'none',
+                      'border-block-width': value,
+                    }),
+                  },
+                  { values: { DEFAULT: '1px', '2': '2px' }, modifiers: 'any' },
+                )
+              },
+            }
+          },
+        },
+      ),
+    ).toMatchInlineSnapshot(`
+      "
+      .border-block {
+        --my-modifier: none;
+        border-block-width: 1px;
+      }
+
+      .border-block-2 {
+        --my-modifier: none;
+        border-block-width: 2px;
+      }
+
+      .border-block-2\\/foo {
+        --my-modifier: foo;
+        border-block-width: 2px;
+      }
+
+      .border-block\\/foo {
+        --my-modifier: foo;
+        border-block-width: 1px;
+      }
+      "
+    `)
+  })
+
+  test('custom functional utility with known modifier', async () => {
+    let input = css`
+      @plugin "my-plugin";
+
+      @tailwind utilities;
+
+      @theme reference {
+        --breakpoint-lg: 1024px;
+      }
+    `
+
+    expect(
+      await run(
+        ['border-block', 'border-block-2', 'border-block/foo', 'border-block-2/foo'],
+        input,
+        {
+          async loadModule(_id, base) {
+            return {
+              path: '',
+              base,
+              module: ({ matchUtilities }: PluginAPI) => {
+                matchUtilities(
+                  {
+                    'border-block': (value, { modifier }) => ({
+                      '--my-modifier': modifier ?? 'none',
+                      'border-block-width': value,
+                    }),
+                  },
+                  {
+                    values: { DEFAULT: '1px', '2': '2px' },
+                    modifiers: { foo: 'foo' },
+                  },
+                )
+              },
+            }
+          },
+        },
+      ),
+    ).toMatchInlineSnapshot(`
+      "
+      .border-block {
+        --my-modifier: none;
+        border-block-width: 1px;
+      }
+
+      .border-block-2 {
+        --my-modifier: none;
+        border-block-width: 2px;
+      }
+
+      .border-block-2\\/foo {
+        --my-modifier: foo;
+        border-block-width: 2px;
+      }
+
+      .border-block\\/foo {
+        --my-modifier: foo;
+        border-block-width: 1px;
+      }
+      "
+    `)
+
+    expect(
+      await run(['border-block/unknown', 'border-block-2/unknown'], input, {
+        async loadModule(_id, base) {
           return {
             path: '',
             base,
             module: ({ matchUtilities }: PluginAPI) => {
               matchUtilities(
                 {
-                  'all-but-order-bottom-left-radius': (value) =>
-                    [
-                      { 'border-top-left-radius': value },
-                      { 'border-top-right-radius': value },
-                      { 'border-bottom-right-radius': value },
-                    ] as CssInJs[],
+                  'border-block': (value, { modifier }) => ({
+                    '--my-modifier': modifier ?? 'none',
+                    'border-block-width': value,
+                  }),
                 },
                 {
-                  values: {
-                    DEFAULT: '1px',
-                  },
+                  values: { DEFAULT: '1px', '2': '2px' },
+                  modifiers: { foo: 'foo' },
                 },
               )
             },
           }
         },
-      },
-    )
-
-    expect(optimizeCss(compiled.build(['all-but-order-bottom-left-radius'])).trim())
-      .toMatchInlineSnapshot(`
-        ".all-but-order-bottom-left-radius {
-          border-top-left-radius: 1px;
-          border-top-right-radius: 1px;
-          border-bottom-right-radius: 1px;
-        }"
-      `)
-  })
-
-  test('custom functional utility with any modifier', async () => {
-    async function run(candidates: string[]) {
-      let compiled = await compile(
-        css`
-          @plugin "my-plugin";
-
-          @tailwind utilities;
-
-          @theme reference {
-            --breakpoint-lg: 1024px;
-          }
-        `,
-
-        {
-          async loadModule(id, base) {
-            return {
-              path: '',
-              base,
-              module: ({ matchUtilities }: PluginAPI) => {
-                matchUtilities(
-                  {
-                    'border-block': (value, { modifier }) => ({
-                      '--my-modifier': modifier ?? 'none',
-                      'border-block-width': value,
-                    }),
-                  },
-                  {
-                    values: {
-                      DEFAULT: '1px',
-                      '2': '2px',
-                    },
-
-                    modifiers: 'any',
-                  },
-                )
-              },
-            }
-          },
-        },
-      )
-
-      return compiled.build(candidates)
-    }
-
-    expect(
-      optimizeCss(
-        await run(['border-block', 'border-block-2', 'border-block/foo', 'border-block-2/foo']),
-      ).trim(),
-    ).toMatchInlineSnapshot(`
-      ".border-block {
-        --my-modifier: none;
-        border-block-width: 1px;
-      }
-
-      .border-block-2 {
-        --my-modifier: none;
-        border-block-width: 2px;
-      }
-
-      .border-block-2\\/foo {
-        --my-modifier: foo;
-        border-block-width: 2px;
-      }
-
-      .border-block\\/foo {
-        --my-modifier: foo;
-        border-block-width: 1px;
-      }"
-    `)
-  })
-
-  test('custom functional utility with known modifier', async () => {
-    async function run(candidates: string[]) {
-      let compiled = await compile(
-        css`
-          @plugin "my-plugin";
-
-          @tailwind utilities;
-
-          @theme reference {
-            --breakpoint-lg: 1024px;
-          }
-        `,
-
-        {
-          async loadModule(id, base) {
-            return {
-              path: '',
-              base,
-              module: ({ matchUtilities }: PluginAPI) => {
-                matchUtilities(
-                  {
-                    'border-block': (value, { modifier }) => ({
-                      '--my-modifier': modifier ?? 'none',
-                      'border-block-width': value,
-                    }),
-                  },
-                  {
-                    values: {
-                      DEFAULT: '1px',
-                      '2': '2px',
-                    },
-
-                    modifiers: {
-                      foo: 'foo',
-                    },
-                  },
-                )
-              },
-            }
-          },
-        },
-      )
-
-      return compiled.build(candidates)
-    }
-
-    expect(
-      optimizeCss(
-        await run(['border-block', 'border-block-2', 'border-block/foo', 'border-block-2/foo']),
-      ).trim(),
-    ).toMatchInlineSnapshot(`
-      ".border-block {
-        --my-modifier: none;
-        border-block-width: 1px;
-      }
-
-      .border-block-2 {
-        --my-modifier: none;
-        border-block-width: 2px;
-      }
-
-      .border-block-2\\/foo {
-        --my-modifier: foo;
-        border-block-width: 2px;
-      }
-
-      .border-block\\/foo {
-        --my-modifier: foo;
-        border-block-width: 1px;
-      }"
-    `)
-
-    expect(
-      optimizeCss(await run(['border-block/unknown', 'border-block-2/unknown'])).trim(),
+      }),
     ).toEqual('')
   })
 
@@ -3800,194 +3889,127 @@ describe('matchUtilities()', () => {
   // future don't be afraid to change what should happen in this scenario.
   describe('plugins that handle a specific arbitrary value type prevent falling through to other plugins if the result is invalid for that plugin', () => {
     test('implicit color modifier', async () => {
-      async function run(candidates: string[]) {
-        let compiled = await compile(
-          css`
-            @tailwind utilities;
-            @plugin "my-plugin";
-          `,
+      let input = css`
+        @tailwind utilities;
+        @plugin "my-plugin";
+      `
 
-          {
-            async loadModule(id, base) {
-              return {
-                path: '',
-                base,
-                module: ({ matchUtilities }: PluginAPI) => {
-                  matchUtilities(
-                    {
-                      scrollbar: (value) => ({ 'scrollbar-color': value }),
-                    },
-                    { type: ['color', 'any'] },
-                  )
-
-                  matchUtilities(
-                    {
-                      scrollbar: (value) => ({ 'scrollbar-width': value }),
-                    },
-                    { type: ['length'] },
-                  )
-                },
-              }
+      let options: Partial<Parameters<typeof compile>[1]> = {
+        async loadModule(_id, base) {
+          return {
+            path: '',
+            base,
+            module: ({ matchUtilities }: PluginAPI) => {
+              matchUtilities(
+                { scrollbar: (value) => ({ 'scrollbar-color': value }) },
+                { type: ['color', 'any'] },
+              )
+              matchUtilities(
+                { scrollbar: (value) => ({ 'scrollbar-width': value }) },
+                { type: ['length'] },
+              )
             },
-          },
-        )
-
-        return compiled.build(candidates)
+          }
+        },
       }
 
       expect(
-        optimizeCss(
-          await run(['scrollbar-[2px]', 'scrollbar-[#08c]', 'scrollbar-[#08c]/50']),
-        ).trim(),
+        await run(['scrollbar-[2px]', 'scrollbar-[#08c]', 'scrollbar-[#08c]/50'], input, options),
       ).toMatchInlineSnapshot(`
-        ".scrollbar-\\[\\#08c\\] {
+        "
+        .scrollbar-\\[2px\\] {
+          scrollbar-width: 2px;
+        }
+
+        .scrollbar-\\[\\#08c\\] {
           scrollbar-color: #08c;
         }
 
         .scrollbar-\\[\\#08c\\]\\/50 {
           scrollbar-color: oklab(59.9824% -.067 -.124 / .5);
         }
-
-        .scrollbar-\\[2px\\] {
-          scrollbar-width: 2px;
-        }"
+        "
       `)
-      expect(optimizeCss(await run(['scrollbar-[2px]/50'])).trim()).toEqual('')
+      expect(await run(['scrollbar-[2px]/50'], input, options)).toEqual('')
     })
 
     test('no modifiers are supported by the plugins', async () => {
-      async function run(candidates: string[]) {
-        let compiled = await compile(
+      expect(
+        await run(
+          ['scrollbar-[2px]/50'],
           css`
             @tailwind utilities;
             @plugin "my-plugin";
           `,
-
           {
-            async loadModule(id, base) {
+            async loadModule(_id, base) {
               return {
                 path: '',
                 base,
                 module: ({ matchUtilities }: PluginAPI) => {
                   matchUtilities(
-                    {
-                      scrollbar: (value) => ({ '--scrollbar-angle': value }),
-                    },
+                    { scrollbar: (value) => ({ '--scrollbar-angle': value }) },
                     { type: ['angle', 'any'] },
                   )
 
                   matchUtilities(
-                    {
-                      scrollbar: (value) => ({ '--scrollbar-width': value }),
-                    },
+                    { scrollbar: (value) => ({ '--scrollbar-width': value }) },
                     { type: ['length'] },
                   )
                 },
               }
             },
           },
-        )
-
-        return compiled.build(candidates)
-      }
-
-      expect(optimizeCss(await run(['scrollbar-[2px]/50'])).trim()).toEqual('')
+        ),
+      ).toEqual('')
     })
 
     test('invalid named modifier', async () => {
-      async function run(candidates: string[]) {
-        let compiled = await compile(
+      expect(
+        await run(
+          ['scrollbar-[2px]/foo'],
           css`
             @tailwind utilities;
             @plugin "my-plugin";
           `,
-
           {
-            async loadModule(id, base) {
+            async loadModule(_id, base) {
               return {
                 path: '',
                 base,
                 module: ({ matchUtilities }: PluginAPI) => {
                   matchUtilities(
-                    {
-                      scrollbar: (value) => ({ 'scrollbar-color': value }),
-                    },
+                    { scrollbar: (value) => ({ 'scrollbar-color': value }) },
                     { type: ['color', 'any'], modifiers: { foo: 'foo' } },
                   )
 
                   matchUtilities(
-                    {
-                      scrollbar: (value) => ({ 'scrollbar-width': value }),
-                    },
+                    { scrollbar: (value) => ({ 'scrollbar-width': value }) },
                     { type: ['length'], modifiers: { bar: 'bar' } },
                   )
                 },
               }
             },
           },
-        )
-
-        return compiled.build(candidates)
-      }
-
-      expect(optimizeCss(await run(['scrollbar-[2px]/foo'])).trim()).toEqual('')
+        ),
+      ).toEqual('')
     })
   })
 
   test('custom functional utilities with different types', async () => {
-    async function run(candidates: string[]) {
-      let compiled = await compile(
-        css`
-          @plugin "my-plugin";
+    let input = css`
+      @plugin "my-plugin";
 
-          @tailwind utilities;
+      @tailwind utilities;
 
-          @theme reference {
-            --breakpoint-lg: 1024px;
-          }
-        `,
-
-        {
-          async loadModule(id, base) {
-            return {
-              path: '',
-              base,
-              module: ({ matchUtilities }: PluginAPI) => {
-                matchUtilities(
-                  {
-                    scrollbar: (value) => ({ 'scrollbar-color': value }),
-                  },
-                  {
-                    type: ['color', 'any'],
-                    values: {
-                      black: 'black',
-                    },
-                  },
-                )
-
-                matchUtilities(
-                  {
-                    scrollbar: (value) => ({ 'scrollbar-width': value }),
-                  },
-                  {
-                    type: ['length'],
-                    values: {
-                      2: '2px',
-                    },
-                  },
-                )
-              },
-            }
-          },
-        },
-      )
-
-      return compiled.build(candidates)
-    }
+      @theme reference {
+        --breakpoint-lg: 1024px;
+      }
+    `
 
     expect(
-      optimizeCss(
-        await run([
+      await run(
+        [
           'scrollbar-black',
           'scrollbar-black/50',
           'scrollbar-2',
@@ -3999,13 +4021,38 @@ describe('matchUtilities()', () => {
           'scrollbar-[color:var(--my-color)]',
           'scrollbar-[color:var(--my-color)]/50',
           'scrollbar-[length:var(--my-width)]',
-        ]),
-      ).trim(),
+        ],
+        input,
+        {
+          async loadModule(_id, base) {
+            return {
+              path: '',
+              base,
+              module: ({ matchUtilities }: PluginAPI) => {
+                matchUtilities(
+                  { scrollbar: (value) => ({ 'scrollbar-color': value }) },
+                  { type: ['color', 'any'], values: { black: 'black' } },
+                )
+
+                matchUtilities(
+                  { scrollbar: (value) => ({ 'scrollbar-width': value }) },
+                  { type: ['length'], values: { 2: '2px' } },
+                )
+              },
+            }
+          },
+        },
+      ),
     ).toMatchInlineSnapshot(`
-      ".scrollbar-2 {
+      "
+      .scrollbar-2, .scrollbar-\\[2px\\] {
         scrollbar-width: 2px;
       }
 
+      .scrollbar-\\[length\\:var\\(--my-width\\)\\] {
+        scrollbar-width: var(--my-width);
+      }
+
       .scrollbar-\\[\\#fff\\] {
         scrollbar-color: #fff;
       }
@@ -4014,10 +4061,6 @@ describe('matchUtilities()', () => {
         scrollbar-color: oklab(100% 0 5.96046e-8 / .5);
       }
 
-      .scrollbar-\\[2px\\] {
-        scrollbar-width: 2px;
-      }
-
       .scrollbar-\\[color\\:var\\(--my-color\\)\\], .scrollbar-\\[color\\:var\\(--my-color\\)\\]\\/50 {
         scrollbar-color: var(--my-color);
       }
@@ -4028,10 +4071,6 @@ describe('matchUtilities()', () => {
         }
       }
 
-      .scrollbar-\\[length\\:var\\(--my-width\\)\\] {
-        scrollbar-width: var(--my-width);
-      }
-
       .scrollbar-\\[var\\(--my-color\\)\\], .scrollbar-\\[var\\(--my-color\\)\\]\\/50 {
         scrollbar-color: var(--my-color);
       }
@@ -4048,23 +4087,48 @@ describe('matchUtilities()', () => {
 
       .scrollbar-black\\/50 {
         scrollbar-color: oklab(0% none none / .5);
-      }"
+      }
+      "
     `)
 
     expect(
-      optimizeCss(
-        await run([
-          'scrollbar-2/50',
-          'scrollbar-[2px]/50',
-          'scrollbar-[length:var(--my-width)]/50',
-        ]),
-      ).trim(),
+      await run(
+        ['scrollbar-2/50', 'scrollbar-[2px]/50', 'scrollbar-[length:var(--my-width)]/50'],
+        input,
+        {
+          async loadModule(_id, base) {
+            return {
+              path: '',
+              base,
+              module: ({ matchUtilities }: PluginAPI) => {
+                matchUtilities(
+                  { scrollbar: (value) => ({ 'scrollbar-color': value }) },
+                  { type: ['color', 'any'], values: { black: 'black' } },
+                )
+
+                matchUtilities(
+                  { scrollbar: (value) => ({ 'scrollbar-width': value }) },
+                  { type: ['length'], values: { 2: '2px' } },
+                )
+              },
+            }
+          },
+        },
+      ),
     ).toEqual('')
   })
 
   test('functional utilities with `type: color` automatically support opacity', async () => {
-    async function run(candidates: string[]) {
-      let compiled = await compile(
+    expect(
+      await run(
+        [
+          'scrollbar-current',
+          'scrollbar-current/45',
+          'scrollbar-black',
+          'scrollbar-black/33',
+          'scrollbar-black/[50%]',
+          'scrollbar-[var(--my-color)]/[25%]',
+        ],
         css`
           @plugin "my-plugin";
 
@@ -4074,46 +4138,24 @@ describe('matchUtilities()', () => {
             --breakpoint-lg: 1024px;
           }
         `,
-
         {
-          async loadModule(id, base) {
+          async loadModule(_id, base) {
             return {
               path: '',
               base,
               module: ({ matchUtilities }: PluginAPI) => {
                 matchUtilities(
-                  {
-                    scrollbar: (value) => ({ 'scrollbar-color': value }),
-                  },
-                  {
-                    type: ['color', 'any'],
-                    values: {
-                      black: 'black',
-                    },
-                  },
+                  { scrollbar: (value) => ({ 'scrollbar-color': value }) },
+                  { type: ['color', 'any'], values: { black: 'black' } },
                 )
               },
             }
           },
         },
-      )
-
-      return compiled.build(candidates)
-    }
-
-    expect(
-      optimizeCss(
-        await run([
-          'scrollbar-current',
-          'scrollbar-current/45',
-          'scrollbar-black',
-          'scrollbar-black/33',
-          'scrollbar-black/[50%]',
-          'scrollbar-[var(--my-color)]/[25%]',
-        ]),
-      ).trim(),
+      ),
     ).toMatchInlineSnapshot(`
-      ".scrollbar-\\[var\\(--my-color\\)\\]\\/\\[25\\%\\] {
+      "
+      .scrollbar-\\[var\\(--my-color\\)\\]\\/\\[25\\%\\] {
         scrollbar-color: var(--my-color);
       }
 
@@ -4143,13 +4185,15 @@ describe('matchUtilities()', () => {
         .scrollbar-current\\/45 {
           scrollbar-color: color-mix(in oklab, currentcolor 45%, transparent);
         }
-      }"
+      }
+      "
     `)
   })
 
   test('functional utilities with explicit modifiers', async () => {
-    async function run(candidates: string[]) {
-      let compiled = await compile(
+    expect(
+      await run(
+        ['scrollbar-[12px]', 'scrollbar-[12px]/foo', 'scrollbar-[12px]/bar'],
         css`
           @plugin "my-plugin";
 
@@ -4160,9 +4204,8 @@ describe('matchUtilities()', () => {
             --opacity-my-opacity: 0.5;
           }
         `,
-
         {
-          async loadModule(id, base) {
+          async loadModule(_id, base) {
             return {
               path: '',
               base,
@@ -4174,29 +4217,16 @@ describe('matchUtilities()', () => {
                       'scrollbar-width': value,
                     }),
                   },
-                  {
-                    type: ['any'],
-                    values: {},
-                    modifiers: {
-                      foo: 'foo',
-                    },
-                  },
+                  { type: ['any'], values: {}, modifiers: { foo: 'foo' } },
                 )
               },
             }
           },
         },
-      )
-
-      return compiled.build(candidates)
-    }
-
-    expect(
-      optimizeCss(
-        await run(['scrollbar-[12px]', 'scrollbar-[12px]/foo', 'scrollbar-[12px]/bar']),
-      ).trim(),
+      ),
     ).toMatchInlineSnapshot(`
-      ".scrollbar-\\[12px\\] {
+      "
+      .scrollbar-\\[12px\\] {
         --modifier: none;
         scrollbar-width: 12px;
       }
@@ -4204,51 +4234,43 @@ describe('matchUtilities()', () => {
       .scrollbar-\\[12px\\]\\/foo {
         --modifier: foo;
         scrollbar-width: 12px;
-      }"
+      }
+      "
     `)
   })
 
   test('functional utilities support `@apply`', async () => {
-    let compiled = await compile(
-      css`
-        @plugin "my-plugin";
-        @layer utilities {
-          @tailwind utilities;
-        }
-
-        @theme reference {
-          --breakpoint-lg: 1024px;
-        }
-      `,
-      {
-        async loadModule(id, base) {
-          return {
-            path: '',
-            base,
-            module: ({ matchUtilities }: PluginAPI) => {
-              matchUtilities(
-                {
-                  foo: (value) => ({
-                    '--foo': value,
-                    [`@apply flex`]: {},
-                  }),
-                },
-                {
-                  values: {
-                    bar: 'bar',
-                  },
-                },
-              )
-            },
-          }
-        },
-      },
-    )
-
     expect(
-      optimizeCss(compiled.build(['foo-bar', 'lg:foo-bar', 'foo-[12px]', 'lg:foo-[12px]'])).trim(),
+      await run(
+        ['foo-bar', 'lg:foo-bar', 'foo-[12px]', 'lg:foo-[12px]'],
+        css`
+          @plugin "my-plugin";
+          @layer utilities {
+            @tailwind utilities;
+          }
+
+          @theme reference {
+            --breakpoint-lg: 1024px;
+          }
+        `,
+        {
+          async loadModule(_id, base) {
+            return {
+              path: '',
+              base,
+              module: ({ matchUtilities }: PluginAPI) => {
+                matchUtilities(
+                  { foo: (value) => ({ '--foo': value, [`@apply flex`]: {} }) },
+                  { values: { bar: 'bar' } },
+                )
+              },
+            }
+          },
+        },
+      ),
     ).toMatchInlineSnapshot(`
-      "@layer utilities {
+      "
+      @layer utilities {
         .foo-\\[12px\\] {
           --foo: 12px;
           display: flex;
@@ -4270,7 +4292,8 @@ describe('matchUtilities()', () => {
             display: flex;
           }
         }
-      }"
+      }
+      "
     `)
   })
 
@@ -4289,7 +4312,7 @@ describe('matchUtilities()', () => {
         `,
 
         {
-          async loadModule(id, base) {
+          async loadModule(_id, base) {
             return {
               path: '',
               base,
@@ -4305,202 +4328,179 @@ describe('matchUtilities()', () => {
           },
         },
       )
-    }).rejects.toThrowError(/invalid utility name/)
+    }).rejects.toThrow(/invalid utility name/)
   })
 
   test('replaces the class name with variants in nested selectors', async () => {
-    let compiled = await compile(
-      css`
-        @plugin "my-plugin";
-        @theme {
-          --breakpoint-md: 768px;
-        }
-        @tailwind utilities;
-      `,
-      {
-        async loadModule(base) {
-          return {
-            path: '',
-            base,
-            module: ({ matchUtilities }: PluginAPI) => {
-              matchUtilities(
-                {
-                  foo: (value) => ({
-                    ':where(.foo > :first-child)': {
-                      color: value,
-                    },
-                  }),
-                },
-                {
-                  values: {
-                    red: 'red',
-                  },
-                },
-              )
-            },
+    expect(
+      await run(
+        ['foo-red', 'md:foo-red', 'not-hover:md:foo-red'],
+        css`
+          @plugin "my-plugin";
+          @theme {
+            --breakpoint-md: 768px;
           }
+          @tailwind utilities;
+        `,
+        {
+          async loadModule(base) {
+            return {
+              path: '',
+              base,
+              module: ({ matchUtilities }: PluginAPI) => {
+                matchUtilities(
+                  { foo: (value) => ({ ':where(.foo > :first-child)': { color: value } }) },
+                  { values: { red: 'red' } },
+                )
+              },
+            }
+          },
         },
-      },
-    )
+      ),
+    ).toMatchInlineSnapshot(`
+      "
+      .foo-red :where(.foo-red > :first-child) {
+        color: red;
+      }
 
-    expect(compiled.build(['foo-red', 'md:foo-red', 'not-hover:md:foo-red']).trim())
-      .toMatchInlineSnapshot(`
-        ".foo-red {
-          :where(.foo-red > :first-child) {
+      @media (min-width: 768px) {
+        .md\\:foo-red :where(.md\\:foo-red > :first-child), .not-hover\\:md\\:foo-red:not(:hover) :where(.not-hover\\:md\\:foo-red > :first-child) {
+          color: red;
+        }
+      }
+
+      @media not all and (hover: hover) {
+        @media (min-width: 768px) {
+          .not-hover\\:md\\:foo-red :where(.not-hover\\:md\\:foo-red > :first-child) {
             color: red;
           }
         }
-        .md\\:foo-red {
-          @media (width >= 768px) {
-            :where(.md\\:foo-red > :first-child) {
-              color: red;
-            }
-          }
-        }
-        .not-hover\\:md\\:foo-red {
-          &:not(*:hover) {
-            @media (width >= 768px) {
-              :where(.not-hover\\:md\\:foo-red > :first-child) {
-                color: red;
-              }
-            }
-          }
-          @media not (hover: hover) {
-            @media (width >= 768px) {
-              :where(.not-hover\\:md\\:foo-red > :first-child) {
-                color: red;
-              }
-            }
-          }
-        }"
-      `)
+      }
+      "
+    `)
   })
 })
 
 describe('addComponents()', () => {
   test('is an alias for addUtilities', async () => {
-    let compiled = await compile(
-      css`
-        @plugin "my-plugin";
-        @tailwind utilities;
-      `,
-      {
-        async loadModule(id, base) {
-          return {
-            path: '',
-            base,
-            module: ({ addComponents }: PluginAPI) => {
-              addComponents({
-                '.btn': {
-                  padding: '.5rem 1rem',
-                  borderRadius: '.25rem',
-                  fontWeight: '600',
-                },
-                '.btn-blue': {
-                  backgroundColor: '#3490dc',
-                  color: '#fff',
-                  '&:hover': {
-                    backgroundColor: '#2779bd',
+    expect(
+      await run(
+        ['btn', 'btn-blue', 'btn-red'],
+        css`
+          @plugin "my-plugin";
+          @tailwind utilities;
+        `,
+        {
+          async loadModule(_id, base) {
+            return {
+              path: '',
+              base,
+              module: ({ addComponents }: PluginAPI) => {
+                addComponents({
+                  '.btn': {
+                    padding: '.5rem 1rem',
+                    borderRadius: '.25rem',
+                    fontWeight: '600',
                   },
-                },
-                '.btn-red': {
-                  backgroundColor: '#e3342f',
-                  color: '#fff',
-                  '&:hover': {
-                    backgroundColor: '#cc1f1a',
+                  '.btn-blue': {
+                    backgroundColor: '#3490dc',
+                    color: '#fff',
+                    '&:hover': {
+                      backgroundColor: '#2779bd',
+                    },
                   },
-                },
-              })
-            },
-          }
+                  '.btn-red': {
+                    backgroundColor: '#e3342f',
+                    color: '#fff',
+                    '&:hover': {
+                      backgroundColor: '#cc1f1a',
+                    },
+                  },
+                })
+              },
+            }
+          },
         },
-      },
-    )
+      ),
+    ).toMatchInlineSnapshot(`
+      "
+      .btn {
+        border-radius: .25rem;
+        padding: .5rem 1rem;
+        font-weight: 600;
+      }
 
-    expect(optimizeCss(compiled.build(['btn', 'btn-blue', 'btn-red'])).trim())
-      .toMatchInlineSnapshot(`
-        ".btn {
-          border-radius: .25rem;
-          padding: .5rem 1rem;
-          font-weight: 600;
-        }
+      .btn-blue {
+        color: #fff;
+        background-color: #3490dc;
+      }
 
-        .btn-blue {
-          color: #fff;
-          background-color: #3490dc;
-        }
+      .btn-blue:hover {
+        background-color: #2779bd;
+      }
 
-        .btn-blue:hover {
-          background-color: #2779bd;
-        }
+      .btn-red {
+        color: #fff;
+        background-color: #e3342f;
+      }
 
-        .btn-red {
-          color: #fff;
-          background-color: #e3342f;
-        }
-
-        .btn-red:hover {
-          background-color: #cc1f1a;
-        }"
-      `)
+      .btn-red:hover {
+        background-color: #cc1f1a;
+      }
+      "
+    `)
   })
 })
 
 describe('matchComponents()', () => {
   test('is an alias for matchUtilities', async () => {
-    let compiled = await compile(
-      css`
-        @plugin "my-plugin";
-        @tailwind utilities;
-      `,
-      {
-        async loadModule(id, base) {
-          return {
-            path: '',
-            base,
-            module: ({ matchComponents }: PluginAPI) => {
-              matchComponents(
-                {
-                  prose: (value) => ({ '--container-size': value }),
-                },
-                {
-                  values: {
-                    DEFAULT: 'normal',
-                    sm: 'sm',
-                    lg: 'lg',
-                  },
-                },
-              )
-            },
-          }
+    expect(
+      await run(
+        ['prose', 'sm:prose-sm', 'hover:prose-lg'],
+        css`
+          @plugin "my-plugin";
+          @tailwind utilities;
+        `,
+        {
+          async loadModule(_id, base) {
+            return {
+              path: '',
+              base,
+              module: ({ matchComponents }: PluginAPI) => {
+                matchComponents(
+                  { prose: (value) => ({ '--container-size': value }) },
+                  { values: { DEFAULT: 'normal', sm: 'sm', lg: 'lg' } },
+                )
+              },
+            }
+          },
         },
-      },
-    )
+      ),
+    ).toMatchInlineSnapshot(`
+      "
+      .prose {
+        --container-size: normal;
+      }
 
-    expect(optimizeCss(compiled.build(['prose', 'sm:prose-sm', 'hover:prose-lg'])).trim())
-      .toMatchInlineSnapshot(`
-        ".prose {
-          --container-size: normal;
+      @media (hover: hover) {
+        .hover\\:prose-lg:hover {
+          --container-size: lg;
         }
-
-        @media (hover: hover) {
-          .hover\\:prose-lg:hover {
-            --container-size: lg;
-          }
-        }"
-      `)
+      }
+      "
+    `)
   })
 })
 
 describe('prefix()', () => {
   test('is an identity function', async () => {
-    let fn = vi.fn()
+    using fn = vi.fn()
     await compile(
       css`
         @plugin "my-plugin";
       `,
       {
-        async loadModule(id, base) {
+        async loadModule(_id, base) {
           return {
             path: '',
             base,
@@ -4518,13 +4518,13 @@ describe('prefix()', () => {
 
 describe('config()', () => {
   test('can return the resolved config when passed no arguments', async () => {
-    let fn = vi.fn()
+    using fn = vi.fn()
     await compile(
       css`
         @plugin "my-plugin";
       `,
       {
-        async loadModule(id, base) {
+        async loadModule(_id, base) {
           return {
             path: '',
             base,
@@ -4546,13 +4546,13 @@ describe('config()', () => {
   })
 
   test('can return part of the config', async () => {
-    let fn = vi.fn()
+    using fn = vi.fn()
     await compile(
       css`
         @plugin "my-plugin";
       `,
       {
-        async loadModule(id, base) {
+        async loadModule(_id, base) {
           return {
             path: '',
             base,
@@ -4572,13 +4572,13 @@ describe('config()', () => {
   })
 
   test('falls back to default value if requested path does not exist', async () => {
-    let fn = vi.fn()
+    using fn = vi.fn()
     await compile(
       css`
         @plugin "my-plugin";
       `,
       {
-        async loadModule(id, base) {
+        async loadModule(_id, base) {
           return {
             path: '',
             base,
@@ -4597,43 +4597,35 @@ describe('config()', () => {
   test('matchUtilities does not match Object.prototype properties as values', async ({
     expect,
   }) => {
-    let input = css`
-      @tailwind utilities;
-      @plugin "my-plugin";
-    `
-
-    let compiler = await compile(input, {
-      loadModule: async (id, base) => {
-        return {
-          path: '',
-          base,
-          module: plugin(function ({ matchUtilities }) {
-            matchUtilities(
-              {
-                test: (value) => ({ '--test': value }),
-              },
-              {
-                values: {
-                  foo: 'bar',
-                },
-              },
-            )
-          }),
-        }
-      },
-    })
-
     // These should not crash or produce output
     expect(
-      optimizeCss(
-        compiler.build([
+      await run(
+        [
           'test-constructor',
           'test-hasOwnProperty',
           'test-toString',
           'test-valueOf',
           'test-__proto__',
-        ]),
-      ).trim(),
+        ],
+        css`
+          @tailwind utilities;
+          @plugin "my-plugin";
+        `,
+        {
+          loadModule: async (_id, base) => {
+            return {
+              path: '',
+              base,
+              module: plugin(function ({ matchUtilities }) {
+                matchUtilities(
+                  { test: (value) => ({ '--test': value }) },
+                  { values: { foo: 'bar' } },
+                )
+              }),
+            }
+          },
+        },
+      ),
     ).toEqual('')
   })
 })
diff --git a/packages/tailwindcss/src/compat/plugin-api.ts b/packages/tailwindcss/src/compat/plugin-api.ts
index af6e98d77..11878fb30 100644
--- a/packages/tailwindcss/src/compat/plugin-api.ts
+++ b/packages/tailwindcss/src/compat/plugin-api.ts
@@ -1,6 +1,6 @@
 import type { Features } from '..'
 import { substituteAtApply } from '../apply'
-import { atRule, cloneAstNode, decl, rule, type AstNode } from '../ast'
+import { atRule, cloneAstNode, context, decl, rule, type AstNode } from '../ast'
 import type { Candidate, CandidateModifier, NamedUtilityValue } from '../candidate'
 import { substituteFunctions } from '../css-functions'
 import * as CSS from '../css-parser'
@@ -310,7 +310,14 @@ export function buildPluginApi({
             return
           }
 
-          if (node.kind === 'function' && node.value === ':not') {
+          if (
+            node.kind === 'function' &&
+            (node.value === ':not' ||
+              // A class inside `:nth-child(… of <selector>)` is part of the
+              // condition, not a utility being defined.
+              node.value === ':nth-child' ||
+              node.value === ':nth-last-child')
+          ) {
             return WalkAction.Skip
           }
         })
@@ -601,14 +608,28 @@ export function objectToAst(rules: CssInJs | CssInJs[]): AstNode[] {
 
 function parseVariantValue(resolved: string | string[], nodes: AstNode[]): AstNode[] {
   let resolvedArray = typeof resolved === 'string' ? [resolved] : resolved
-  return resolvedArray.flatMap((r) => {
+  return resolvedArray.flatMap((r): AstNode | AstNode[] => {
     if (r.trim().endsWith('}')) {
+      let usesAtScope = r.includes('@scope')
       let updatedCSS = r.replace('}', '{@slot}}')
       let ast = CSS.parse(updatedCSS)
+
+      if (usesAtScope) {
+        substituteAtSlot(ast, [context({ source: 'user' }, nodes)])
+        return context({ source: 'variant' }, ast)
+      }
+
       substituteAtSlot(ast, nodes)
       return ast
     } else {
-      return rule(r, nodes)
+      let node = rule(r, nodes)
+
+      if (node.kind === 'at-rule' && node.name === '@scope') {
+        node.nodes = [context({ source: 'user' }, nodes)]
+        return context({ source: 'variant' }, [node])
+      }
+
+      return node
     }
   })
 }
diff --git a/packages/tailwindcss/src/compat/plugin-functions.ts b/packages/tailwindcss/src/compat/plugin-functions.ts
index 40b8c93e8..bbd5fac46 100644
--- a/packages/tailwindcss/src/compat/plugin-functions.ts
+++ b/packages/tailwindcss/src/compat/plugin-functions.ts
@@ -100,6 +100,28 @@ export function createThemeFn(
         return [base, extra]
       }
 
+      // If `--color-foo` and `--color-foo-bar` are both defined, `colors.foo`
+      // produces a synthetic object:
+      //
+      // ```ts
+      // { DEFAULT: 'red', bar: 'blue', __CSS_VALUES__: { DEFAULT: 0, bar: 0 } }
+      // ```
+      //
+      // Prefer `DEFAULT` instead of exposing the object to plugin code.
+      //
+      // This only applies to lookups of a specific key (e.g. `colors.foo`). A
+      // namespace root lookup (e.g. `theme('shadow')`) resolves to the whole
+      // namespace as an object, like in v3.
+      if (
+        keypath.length > 1 &&
+        cssValue !== null &&
+        typeof cssValue === 'object' &&
+        !Array.isArray(cssValue) &&
+        'DEFAULT' in cssValue
+      ) {
+        return cssValue.DEFAULT
+      }
+
       // Values from CSS take precedence over values from the config
       return cssValue ?? configValue
     })()
@@ -208,7 +230,12 @@ function readFromCss(
   // The request looked like `theme('animation.spin')` and was turned into a
   // lookup for `--animation-spin-*` which had only one entry which means it
   // should be returned directly.
-  if ('DEFAULT' in obj && Object.keys(obj).length === 1) {
+  //
+  // This only applies to lookups of a specific key (`path.length > 1`). A
+  // namespace root lookup like `theme('shadow')` resolves to the whole
+  // namespace as an object, like in v3, so it must keep the object shape (`{
+  // DEFAULT: … }`).
+  if (path.length > 1 && 'DEFAULT' in obj && Object.keys(obj).length === 1) {
     return [obj.DEFAULT as any, optionsObj.DEFAULT ?? ThemeOptions.NONE] as const
   }
 
diff --git a/packages/tailwindcss/src/compat/screens-config.test.ts b/packages/tailwindcss/src/compat/screens-config.test.ts
index 26dac0632..d81cd8de6 100644
--- a/packages/tailwindcss/src/compat/screens-config.test.ts
+++ b/packages/tailwindcss/src/compat/screens-config.test.ts
@@ -1,86 +1,89 @@
 import { describe, expect, test } from 'vitest'
-import { compile } from '..'
+import { run } from '../test-utils/run'
 
 const css = String.raw
 
 test('CSS `--breakpoint-*` merge with JS config `screens`', async () => {
-  let input = css`
-    @theme default {
-      --breakpoint-sm: 40rem;
-      --breakpoint-md: 48rem;
-      --breakpoint-lg: 64rem;
-      --breakpoint-xl: 80rem;
-      --breakpoint-2xl: 96rem;
-    }
-    @theme {
-      --breakpoint-md: 50rem;
-    }
-    @config "./config.js";
-    @tailwind utilities;
-  `
-
-  let compiler = await compile(input, {
-    loadModule: async () => ({
-      module: {
-        theme: {
-          extend: {
-            screens: {
-              sm: '44rem',
+  expect(
+    await run(
+      [
+        'sm:flex',
+        'md:flex',
+        'lg:flex',
+        'min-sm:max-md:underline',
+        'min-md:max-lg:underline',
+        'max-w-screen-sm',
+        // Ensure other core variants appear at the end
+        'print:items-end',
+      ],
+      css`
+        @theme default {
+          --breakpoint-sm: 40rem;
+          --breakpoint-md: 48rem;
+          --breakpoint-lg: 64rem;
+          --breakpoint-xl: 80rem;
+          --breakpoint-2xl: 96rem;
+        }
+        @theme {
+          --breakpoint-md: 50rem;
+        }
+        @config "./config.js";
+        @tailwind utilities;
+      `,
+      {
+        loadModule: async () => ({
+          module: {
+            theme: {
+              extend: {
+                screens: {
+                  sm: '44rem',
+                },
+              },
             },
           },
-        },
+          base: '/root',
+          path: '',
+        }),
       },
-      base: '/root',
-      path: '',
-    }),
-  })
-
-  expect(
-    compiler.build([
-      'sm:flex',
-      'md:flex',
-      'lg:flex',
-      'min-sm:max-md:underline',
-      'min-md:max-lg:underline',
-      'max-w-screen-sm',
-      // Ensure other core variants appear at the end
-      'print:items-end',
-    ]),
+    ),
   ).toMatchInlineSnapshot(`
-    ".max-w-screen-sm {
+    "
+    .max-w-screen-sm {
       max-width: 44rem;
     }
-    .sm\\:flex {
-      @media (width >= 44rem) {
+
+    @media (min-width: 44rem) {
+      .sm\\:flex {
         display: flex;
       }
-    }
-    .min-sm\\:max-md\\:underline {
-      @media (width >= 44rem) {
-        @media (width < 50rem) {
+
+      @media not all and (min-width: 50rem) {
+        .min-sm\\:max-md\\:underline {
           text-decoration-line: underline;
         }
       }
     }
-    .md\\:flex {
-      @media (width >= 50rem) {
+
+    @media (min-width: 50rem) {
+      .md\\:flex {
         display: flex;
       }
-    }
-    .min-md\\:max-lg\\:underline {
-      @media (width >= 50rem) {
-        @media (width < 64rem) {
+
+      @media not all and (min-width: 64rem) {
+        .min-md\\:max-lg\\:underline {
           text-decoration-line: underline;
         }
       }
     }
-    .lg\\:flex {
-      @media (width >= 64rem) {
+
+    @media (min-width: 64rem) {
+      .lg\\:flex {
         display: flex;
       }
     }
-    .print\\:items-end {
-      @media print {
+
+    @media print {
+      .print\\:items-end {
         align-items: flex-end;
       }
     }
@@ -89,101 +92,98 @@ test('CSS `--breakpoint-*` merge with JS config `screens`', async () => {
 })
 
 test('JS config `screens` extend CSS `--breakpoint-*`', async () => {
-  let input = css`
-    @theme default {
-      --breakpoint-xs: 39rem;
-      --breakpoint-md: 49rem;
-    }
-    @theme {
-      --breakpoint-md: 50rem;
-    }
-    @config "./config.js";
-    @tailwind utilities;
-  `
+  expect(
+    await run(
+      [
+        // Order is messed up on purpose
+        'md:flex',
+        'sm:flex',
+        'lg:flex',
+        'xs:flex',
+        'min-md:max-lg:underline',
+        'min-sm:max-md:underline',
+        'min-xs:flex',
+        'min-xs:max-md:underline',
 
-  let compiler = await compile(input, {
-    loadModule: async () => ({
-      module: {
-        theme: {
-          extend: {
-            screens: {
-              xs: '30rem',
-              sm: '40rem',
-              md: '48rem',
-              lg: '60rem',
+        // Ensure other core variants appear at the end
+        'print:items-end',
+      ],
+      css`
+        @theme default {
+          --breakpoint-xs: 39rem;
+          --breakpoint-md: 49rem;
+        }
+        @theme {
+          --breakpoint-md: 50rem;
+        }
+        @config "./config.js";
+        @tailwind utilities;
+      `,
+      {
+        loadModule: async () => ({
+          module: {
+            theme: {
+              extend: {
+                screens: {
+                  xs: '30rem',
+                  sm: '40rem',
+                  md: '48rem',
+                  lg: '60rem',
+                },
+              },
             },
           },
-        },
+          base: '/root',
+          path: '',
+        }),
       },
-      base: '/root',
-      path: '',
-    }),
-  })
-
-  expect(
-    compiler.build([
-      // Order is messed up on purpose
-      'md:flex',
-      'sm:flex',
-      'lg:flex',
-      'xs:flex',
-      'min-md:max-lg:underline',
-      'min-sm:max-md:underline',
-      'min-xs:flex',
-      'min-xs:max-md:underline',
-
-      // Ensure other core variants appear at the end
-      'print:items-end',
-    ]),
+    ),
   ).toMatchInlineSnapshot(`
-    ".min-xs\\:flex {
-      @media (width >= 30rem) {
+    "
+    @media (min-width: 30rem) {
+      .min-xs\\:flex, .xs\\:flex {
         display: flex;
       }
-    }
-    .xs\\:flex {
-      @media (width >= 30rem) {
-        display: flex;
-      }
-    }
-    .min-xs\\:max-md\\:underline {
-      @media (width >= 30rem) {
-        @media (width < 50rem) {
+
+      @media not all and (min-width: 50rem) {
+        .min-xs\\:max-md\\:underline {
           text-decoration-line: underline;
         }
       }
     }
-    .sm\\:flex {
-      @media (width >= 40rem) {
+
+    @media (min-width: 40rem) {
+      .sm\\:flex {
         display: flex;
       }
-    }
-    .min-sm\\:max-md\\:underline {
-      @media (width >= 40rem) {
-        @media (width < 50rem) {
+
+      @media not all and (min-width: 50rem) {
+        .min-sm\\:max-md\\:underline {
           text-decoration-line: underline;
         }
       }
     }
-    .md\\:flex {
-      @media (width >= 50rem) {
+
+    @media (min-width: 50rem) {
+      .md\\:flex {
         display: flex;
       }
-    }
-    .min-md\\:max-lg\\:underline {
-      @media (width >= 50rem) {
-        @media (width < 60rem) {
+
+      @media not all and (min-width: 60rem) {
+        .min-md\\:max-lg\\:underline {
           text-decoration-line: underline;
         }
       }
     }
-    .lg\\:flex {
-      @media (width >= 60rem) {
+
+    @media (min-width: 60rem) {
+      .lg\\:flex {
         display: flex;
       }
     }
-    .print\\:items-end {
-      @media print {
+
+    @media print {
+      .print\\:items-end {
         align-items: flex-end;
       }
     }
@@ -192,71 +192,73 @@ test('JS config `screens` extend CSS `--breakpoint-*`', async () => {
 })
 
 test('JS config `screens` only setup, even if those match the default-theme export', async () => {
-  let input = css`
-    @config "./config.js";
-    @tailwind utilities;
-  `
-
-  let compiler = await compile(input, {
-    loadModule: async () => ({
-      module: {
-        theme: {
-          screens: {
-            sm: '40rem',
-            md: '48rem',
-            lg: '64rem',
-          },
-        },
-      },
-      base: '/root',
-      path: '',
-    }),
-  })
-
   expect(
-    compiler.build([
-      // Order is messed up on purpose
-      'md:flex',
-      'sm:flex',
-      'lg:flex',
-      'min-md:max-lg:underline',
-      'min-sm:max-md:underline',
+    await run(
+      [
+        // Order is messed up on purpose
+        'md:flex',
+        'sm:flex',
+        'lg:flex',
+        'min-md:max-lg:underline',
+        'min-sm:max-md:underline',
 
-      // Ensure other core variants appear at the end
-      'print:items-end',
-    ]),
+        // Ensure other core variants appear at the end
+        'print:items-end',
+      ],
+      css`
+        @config "./config.js";
+        @tailwind utilities;
+      `,
+      {
+        loadModule: async () => ({
+          module: {
+            theme: {
+              screens: {
+                sm: '40rem',
+                md: '48rem',
+                lg: '64rem',
+              },
+            },
+          },
+          base: '/root',
+          path: '',
+        }),
+      },
+    ),
   ).toMatchInlineSnapshot(`
-    ".sm\\:flex {
-      @media (width >= 40rem) {
+    "
+    @media (min-width: 40rem) {
+      .sm\\:flex {
         display: flex;
       }
-    }
-    .min-sm\\:max-md\\:underline {
-      @media (width >= 40rem) {
-        @media (width < 48rem) {
+
+      @media not all and (min-width: 48rem) {
+        .min-sm\\:max-md\\:underline {
           text-decoration-line: underline;
         }
       }
     }
-    .md\\:flex {
-      @media (width >= 48rem) {
+
+    @media (min-width: 48rem) {
+      .md\\:flex {
         display: flex;
       }
-    }
-    .min-md\\:max-lg\\:underline {
-      @media (width >= 48rem) {
-        @media (width < 64rem) {
+
+      @media not all and (min-width: 64rem) {
+        .min-md\\:max-lg\\:underline {
           text-decoration-line: underline;
         }
       }
     }
-    .lg\\:flex {
-      @media (width >= 64rem) {
+
+    @media (min-width: 64rem) {
+      .lg\\:flex {
         display: flex;
       }
     }
-    .print\\:items-end {
-      @media print {
+
+    @media print {
+      .print\\:items-end {
         align-items: flex-end;
       }
     }
@@ -265,107 +267,85 @@ test('JS config `screens` only setup, even if those match the default-theme expo
 })
 
 test('JS config `screens` overwrite CSS `--breakpoint-*`', async () => {
-  let input = css`
-    @theme default {
-      --breakpoint-sm: 40rem;
-      --breakpoint-md: 48rem;
-      --breakpoint-lg: 64rem;
-      --breakpoint-xl: 80rem;
-      --breakpoint-2xl: 96rem;
-    }
-    @config "./config.js";
-    @tailwind utilities;
-  `
+  expect(
+    await run(
+      [
+        'sm:flex',
+        'md:flex',
+        'mini:flex',
+        'midi:flex',
+        'maxi:flex',
+        'min-md:max-lg:underline',
+        'min-sm:max-md:underline',
+        'min-midi:max-maxi:underline',
+        'min-mini:max-midi:underline',
 
-  let compiler = await compile(input, {
-    loadModule: async () => ({
-      module: {
-        theme: {
-          extend: {
-            screens: {
-              mini: '40rem',
-              midi: '48rem',
-              maxi: '64rem',
+        // Ensure other core variants appear at the end
+        'print:items-end',
+      ],
+      css`
+        @theme default {
+          --breakpoint-sm: 40rem;
+          --breakpoint-md: 48rem;
+          --breakpoint-lg: 64rem;
+          --breakpoint-xl: 80rem;
+          --breakpoint-2xl: 96rem;
+        }
+        @config "./config.js";
+        @tailwind utilities;
+      `,
+      {
+        loadModule: async () => ({
+          module: {
+            theme: {
+              extend: {
+                screens: {
+                  mini: '40rem',
+                  midi: '48rem',
+                  maxi: '64rem',
+                },
+              },
             },
           },
-        },
+          base: '/root',
+          path: '',
+        }),
       },
-      base: '/root',
-      path: '',
-    }),
-  })
-
-  expect(
-    compiler.build([
-      'sm:flex',
-      'md:flex',
-      'mini:flex',
-      'midi:flex',
-      'maxi:flex',
-      'min-md:max-lg:underline',
-      'min-sm:max-md:underline',
-      'min-midi:max-maxi:underline',
-      'min-mini:max-midi:underline',
-
-      // Ensure other core variants appear at the end
-      'print:items-end',
-    ]),
+    ),
   ).toMatchInlineSnapshot(`
-    ".mini\\:flex {
-      @media (width >= 40rem) {
+    "
+    @media (min-width: 40rem) {
+      .mini\\:flex, .sm\\:flex {
         display: flex;
       }
-    }
-    .sm\\:flex {
-      @media (width >= 40rem) {
-        display: flex;
-      }
-    }
-    .min-mini\\:max-midi\\:underline {
-      @media (width >= 40rem) {
-        @media (width < 48rem) {
+
+      @media not all and (min-width: 48rem) {
+        .min-mini\\:max-midi\\:underline, .min-sm\\:max-md\\:underline {
           text-decoration-line: underline;
         }
       }
     }
-    .min-sm\\:max-md\\:underline {
-      @media (width >= 40rem) {
-        @media (width < 48rem) {
+
+    @media (min-width: 48rem) {
+      .md\\:flex, .midi\\:flex {
+        display: flex;
+      }
+
+      @media not all and (min-width: 64rem) {
+        .min-md\\:max-lg\\:underline, .min-midi\\:max-maxi\\:underline {
           text-decoration-line: underline;
         }
       }
     }
-    .md\\:flex {
-      @media (width >= 48rem) {
+
+    @media (min-width: 64rem) {
+      .maxi\\:flex {
         display: flex;
       }
     }
-    .midi\\:flex {
-      @media (width >= 48rem) {
-        display: flex;
-      }
-    }
-    .min-md\\:max-lg\\:underline {
-      @media (width >= 48rem) {
-        @media (width < 64rem) {
-          text-decoration-line: underline;
-        }
-      }
-    }
-    .min-midi\\:max-maxi\\:underline {
-      @media (width >= 48rem) {
-        @media (width < 64rem) {
-          text-decoration-line: underline;
-        }
-      }
-    }
-    .maxi\\:flex {
-      @media (width >= 64rem) {
-        display: flex;
-      }
-    }
-    .print\\:items-end {
-      @media print {
+
+    @media print {
+      .print\\:items-end {
         align-items: flex-end;
       }
     }
@@ -379,71 +359,91 @@ test('JS config with `theme: { extends }` should not include the `default-config
     @tailwind utilities;
   `
 
-  let compiler = await compile(input, {
-    loadModule: async () => ({
-      module: {
-        theme: {
-          extend: {
-            screens: {
-              mini: '40rem',
-              midi: '48rem',
-              maxi: '64rem',
+  expect(
+    await run(['sm:flex', 'md:flex', 'min-md:max-lg:underline', 'min-sm:max-md:underline'], input, {
+      loadModule: async () => ({
+        module: {
+          theme: {
+            extend: {
+              screens: {
+                mini: '40rem',
+                midi: '48rem',
+                maxi: '64rem',
+              },
             },
           },
         },
-      },
-      base: '/root',
-      path: '',
+        base: '/root',
+        path: '',
+      }),
     }),
-  })
-
-  expect(
-    compiler.build(['sm:flex', 'md:flex', 'min-md:max-lg:underline', 'min-sm:max-md:underline']),
   ).toBe('')
 
   expect(
-    compiler.build([
-      'mini:flex',
-      'midi:flex',
-      'maxi:flex',
-      'min-midi:max-maxi:underline',
-      'min-mini:max-midi:underline',
+    await run(
+      [
+        'mini:flex',
+        'midi:flex',
+        'maxi:flex',
+        'min-midi:max-maxi:underline',
+        'min-mini:max-midi:underline',
 
-      // Ensure other core variants appear at the end
-      'print:items-end',
-    ]),
+        // Ensure other core variants appear at the end
+        'print:items-end',
+      ],
+      input,
+      {
+        loadModule: async () => ({
+          module: {
+            theme: {
+              extend: {
+                screens: {
+                  mini: '40rem',
+                  midi: '48rem',
+                  maxi: '64rem',
+                },
+              },
+            },
+          },
+          base: '/root',
+          path: '',
+        }),
+      },
+    ),
   ).toMatchInlineSnapshot(`
-    ".mini\\:flex {
-      @media (width >= 40rem) {
+    "
+    @media (min-width: 40rem) {
+      .mini\\:flex {
         display: flex;
       }
-    }
-    .min-mini\\:max-midi\\:underline {
-      @media (width >= 40rem) {
-        @media (width < 48rem) {
+
+      @media not all and (min-width: 48rem) {
+        .min-mini\\:max-midi\\:underline {
           text-decoration-line: underline;
         }
       }
     }
-    .midi\\:flex {
-      @media (width >= 48rem) {
+
+    @media (min-width: 48rem) {
+      .midi\\:flex {
         display: flex;
       }
-    }
-    .min-midi\\:max-maxi\\:underline {
-      @media (width >= 48rem) {
-        @media (width < 64rem) {
+
+      @media not all and (min-width: 64rem) {
+        .min-midi\\:max-maxi\\:underline {
           text-decoration-line: underline;
         }
       }
     }
-    .maxi\\:flex {
-      @media (width >= 64rem) {
+
+    @media (min-width: 64rem) {
+      .maxi\\:flex {
         display: flex;
       }
     }
-    .print\\:items-end {
-      @media print {
+
+    @media print {
+      .print\\:items-end {
         align-items: flex-end;
       }
     }
@@ -458,77 +458,104 @@ describe('complex screen configs', () => {
       @tailwind utilities;
     `
 
-    let compiler = await compile(input, {
-      loadModule: async () => ({
-        module: {
-          theme: {
-            extend: {
-              screens: {
-                sm: { max: '639px' },
-                md: [
-                  //
-                  { min: '668px', max: '767px' },
-                  '868px',
-                ],
-                lg: { min: '868px' },
-                xl: { min: '1024px', max: '1279px' },
-                tall: { raw: '(min-height: 800px)' },
+    expect(
+      await run(['min-sm:flex', 'min-md:flex', 'min-xl:flex', 'min-tall:flex'], input, {
+        loadModule: async () => ({
+          module: {
+            theme: {
+              extend: {
+                screens: {
+                  sm: { max: '639px' },
+                  md: [
+                    //
+                    { min: '668px', max: '767px' },
+                    '868px',
+                  ],
+                  lg: { min: '868px' },
+                  xl: { min: '1024px', max: '1279px' },
+                  tall: { raw: '(min-height: 800px)' },
+                },
               },
             },
           },
-        },
-        base: '/root',
-        path: '',
+          base: '/root',
+          path: '',
+        }),
       }),
-    })
-
-    expect(compiler.build(['min-sm:flex', 'min-md:flex', 'min-xl:flex', 'min-tall:flex'])).toBe('')
+    ).toBe('')
 
     expect(
-      compiler.build([
-        'sm:flex',
-        'md:flex',
-        'lg:flex',
-        'min-lg:flex',
-        'xl:flex',
-        'tall:flex',
+      await run(
+        [
+          'sm:flex',
+          'md:flex',
+          'lg:flex',
+          'min-lg:flex',
+          'xl:flex',
+          'tall:flex',
 
-        // Ensure other core variants appear at the end
-        'print:items-end',
-      ]),
+          // Ensure other core variants appear at the end
+          'print:items-end',
+        ],
+        input,
+        {
+          loadModule: async () => ({
+            module: {
+              theme: {
+                extend: {
+                  screens: {
+                    sm: { max: '639px' },
+                    md: [
+                      //
+                      { min: '668px', max: '767px' },
+                      '868px',
+                    ],
+                    lg: { min: '868px' },
+                    xl: { min: '1024px', max: '1279px' },
+                    tall: { raw: '(min-height: 800px)' },
+                  },
+                },
+              },
+            },
+            base: '/root',
+            path: '',
+          }),
+        },
+      ),
     ).toMatchInlineSnapshot(`
-      ".lg\\:flex {
-        @media (width >= 868px) {
+      "
+      @media (min-width: 868px) {
+        .lg\\:flex, .min-lg\\:flex {
           display: flex;
         }
       }
-      .min-lg\\:flex {
-        @media (width >= 868px) {
+
+      @media (max-width: 639px) {
+        .sm\\:flex {
           display: flex;
         }
       }
-      .sm\\:flex {
-        @media (639px >= width) {
+
+      @media (max-width: 767px) and (min-width: 668px), (min-width: 868px) {
+        .md\\:flex {
           display: flex;
         }
       }
-      .md\\:flex {
-        @media (767px >= width >= 668px), (width >= 868px) {
+
+      @media (max-width: 1279px) and (min-width: 1024px) {
+        .xl\\:flex {
           display: flex;
         }
       }
-      .xl\\:flex {
-        @media (1279px >= width >= 1024px) {
+
+      @media (min-height: 800px) {
+        .tall\\:flex {
           display: flex;
         }
       }
-      .tall\\:flex {
-        @media (min-height: 800px) {
-          display: flex;
-        }
-      }
-      .print\\:items-end {
-        @media print {
+
+      @media print {
+        .print\\:items-end {
           align-items: flex-end;
         }
       }
@@ -537,71 +564,65 @@ describe('complex screen configs', () => {
   })
 
   test("don't interfere with `min-*` and `max-*` variants of non-complex screen configs", async () => {
-    let input = css`
-      @theme default {
-        --breakpoint-sm: 39rem;
-        --breakpoint-md: 48rem;
-      }
-      @config "./config.js";
-      @tailwind utilities;
-    `
-
-    let compiler = await compile(input, {
-      loadModule: async () => ({
-        module: {
-          theme: {
-            extend: {
-              screens: {
-                sm: '40rem',
-                portrait: { raw: 'screen and (orientation: portrait)' },
+    expect(
+      await run(
+        [
+          'sm:flex',
+          'md:flex',
+          'portrait:flex',
+          'min-sm:flex',
+          'min-md:flex',
+          'min-portrait:flex',
+          // Ensure other core variants appear at the end
+          'print:items-end',
+        ],
+        css`
+          @theme default {
+            --breakpoint-sm: 39rem;
+            --breakpoint-md: 48rem;
+          }
+          @config "./config.js";
+          @tailwind utilities;
+        `,
+        {
+          loadModule: async () => ({
+            module: {
+              theme: {
+                extend: {
+                  screens: {
+                    sm: '40rem',
+                    portrait: { raw: 'screen and (orientation: portrait)' },
+                  },
+                },
               },
             },
-          },
+            base: '/root',
+            path: '',
+          }),
         },
-        base: '/root',
-        path: '',
-      }),
-    })
-
-    expect(
-      compiler.build([
-        'sm:flex',
-        'md:flex',
-        'portrait:flex',
-        'min-sm:flex',
-        'min-md:flex',
-        'min-portrait:flex',
-        // Ensure other core variants appear at the end
-        'print:items-end',
-      ]),
+      ),
     ).toMatchInlineSnapshot(`
-      ".min-sm\\:flex {
-        @media (width >= 40rem) {
+      "
+      @media (min-width: 40rem) {
+        .min-sm\\:flex, .sm\\:flex {
           display: flex;
         }
       }
-      .sm\\:flex {
-        @media (width >= 40rem) {
+
+      @media (min-width: 48rem) {
+        .md\\:flex, .min-md\\:flex {
           display: flex;
         }
       }
-      .md\\:flex {
-        @media (width >= 48rem) {
+
+      @media screen and (orientation: portrait) {
+        .portrait\\:flex {
           display: flex;
         }
       }
-      .min-md\\:flex {
-        @media (width >= 48rem) {
-          display: flex;
-        }
-      }
-      .portrait\\:flex {
-        @media screen and (orientation: portrait) {
-          display: flex;
-        }
-      }
-      .print\\:items-end {
-        @media print {
+
+      @media print {
+        .print\\:items-end {
           align-items: flex-end;
         }
       }
@@ -611,38 +632,38 @@ describe('complex screen configs', () => {
 })
 
 test('JS config `screens` can overwrite default CSS `--breakpoint-*`', async () => {
-  let input = css`
-    @theme default {
-      --breakpoint-sm: 40rem;
-      --breakpoint-md: 48rem;
-      --breakpoint-lg: 64rem;
-      --breakpoint-xl: 80rem;
-      --breakpoint-2xl: 96rem;
-    }
-    @config "./config.js";
-    @tailwind utilities;
-  `
-
-  let compiler = await compile(input, {
-    loadModule: async () => ({
-      module: {
-        theme: {
-          screens: {
-            mini: '40rem',
-            midi: '48rem',
-            maxi: '64rem',
-          },
-        },
-      },
-      base: '/root',
-      path: '',
-    }),
-  })
-
   // Note: The `sm`, `md`, and other variants are still there because they are
   // created before the compat layer can intercept. We do not remove them
   // currently.
   expect(
-    compiler.build(['min-sm:flex', 'min-md:flex', 'min-lg:flex', 'min-xl:flex', 'min-2xl:flex']),
-  ).toMatchInlineSnapshot(`""`)
+    await run(
+      ['min-sm:flex', 'min-md:flex', 'min-lg:flex', 'min-xl:flex', 'min-2xl:flex'],
+      css`
+        @theme default {
+          --breakpoint-sm: 40rem;
+          --breakpoint-md: 48rem;
+          --breakpoint-lg: 64rem;
+          --breakpoint-xl: 80rem;
+          --breakpoint-2xl: 96rem;
+        }
+        @config "./config.js";
+        @tailwind utilities;
+      `,
+      {
+        loadModule: async () => ({
+          module: {
+            theme: {
+              screens: {
+                mini: '40rem',
+                midi: '48rem',
+                maxi: '64rem',
+              },
+            },
+          },
+          base: '/root',
+          path: '',
+        }),
+      },
+    ),
+  ).toEqual('')
 })
diff --git a/packages/tailwindcss/src/compile.ts b/packages/tailwindcss/src/compile.ts
index 82ac77eb1..46f562918 100644
--- a/packages/tailwindcss/src/compile.ts
+++ b/packages/tailwindcss/src/compile.ts
@@ -1,4 +1,4 @@
-import { atRule, decl, rule, type AstNode, type Rule, type StyleRule } from './ast'
+import { atRule, context, decl, rule, type AstNode, type Rule, type StyleRule } from './ast'
 import { type Candidate, type Variant } from './candidate'
 import { CompileAstFlags, type DesignSystem } from './design-system'
 import GLOBAL_PROPERTY_ORDER from './property-order'
@@ -187,7 +187,18 @@ export function applyVariant(
     // E.g. `[>img]:flex` is not valid, but `has-[>img]:flex` is
     if (variant.relative && depth === 0) return null
 
-    node.nodes = [rule(variant.selector, node.nodes)]
+    let child: AstNode = rule(variant.selector, node.nodes)
+
+    // Wrap variant-generated `@scope` rules in a `context` marker, so they are
+    // hoisted with the variant semantics instead of their native CSS nesting
+    // semantics. The slotted content is marked as `user` content, so `@scope`
+    // rules defined there keep their native CSS nesting semantics.
+    if (child.kind === 'at-rule' && child.name === '@scope') {
+      child.nodes = [context({ source: 'user' }, node.nodes)]
+      child = context({ source: 'variant' }, [child])
+    }
+
+    node.nodes = [child]
     return
   }
 
@@ -287,7 +298,19 @@ function compileBaseUtility(candidate: Candidate, designSystem: DesignSystem) {
 
     let compiledNodes = utility.compileFn(candidate)
     if (compiledNodes === undefined) continue
-    if (compiledNodes === null) return asts
+    if (compiledNodes === null) {
+      // `null` means that the result is invalid and that this plugin should not
+      // result in any CSS, but that doesn't mean that subsequent plugins are
+      // invalid as well.
+      //
+      // However, for backwards compatibility with `matchUtilities` this means
+      // that we do need to bail entirely: plugins that handle a specific
+      // arbitrary value type prevent falling through to other plugins if the
+      // result is invalid for that plugin
+      if (utility.options?.types?.length) return asts
+
+      continue
+    }
     asts.push(compiledNodes)
   }
 
@@ -299,7 +322,19 @@ function compileBaseUtility(candidate: Candidate, designSystem: DesignSystem) {
 
     let compiledNodes = utility.compileFn(candidate)
     if (compiledNodes === undefined) continue
-    if (compiledNodes === null) return asts
+    if (compiledNodes === null) {
+      // `null` means that the result is invalid and that this plugin should not
+      // result in any CSS, but that doesn't mean that subsequent plugins are
+      // invalid as well.
+      //
+      // However, for backwards compatibility with `matchUtilities` this means
+      // that we do need to bail entirely: plugins that handle a specific
+      // arbitrary value type prevent falling through to other plugins if the
+      // result is invalid for that plugin
+      if (utility.options?.types?.length) return asts
+
+      continue
+    }
     asts.push(compiledNodes)
   }
 
diff --git a/packages/tailwindcss/src/constant-fold-declaration.test.ts b/packages/tailwindcss/src/constant-fold-declaration.test.ts
index b95ed74a3..5a0c867b6 100644
--- a/packages/tailwindcss/src/constant-fold-declaration.test.ts
+++ b/packages/tailwindcss/src/constant-fold-declaration.test.ts
@@ -24,9 +24,30 @@ it.each([
   ['calc(3rem * 6)', '18rem'],
   ['calc(5rem / 2)', '2.5rem'],
 
+  // Negating with units
+  ['calc(2rem * -1)', '-2rem'],
+  ['calc(-1 * 2rem)', '-2rem'],
+
   // Nested partial evaluation
   ['calc(calc(1 + 2) + 2rem)', 'calc(3 + 2rem)'],
 
+  // Nested multiplication with unknown values
+  ['calc(2 * calc(3 * var(--foo)))', 'calc(6 * var(--foo))'],
+  ['calc(calc(3 * var(--foo)) * 2)', 'calc(6 * var(--foo))'],
+  ['calc(2rem * calc(3 * var(--foo)))', 'calc(6rem * var(--foo))'],
+
+  // Nested addition with unknown values
+  ['calc(1rem + calc(2rem + var(--foo)))', 'calc(3rem + var(--foo))'],
+  ['calc(calc(2rem + var(--foo)) + 1rem)', 'calc(3rem + var(--foo))'],
+
+  // Nested multiplication can collapse away entirely
+  ['calc(-1 * calc(-1 * var(--foo)))', 'var(--foo)'],
+  ['calc(calc(-1 * var(--foo)) * -1)', 'var(--foo)'],
+  ['calc(-1 * calc(var(--foo) * -1))', 'var(--foo)'],
+  ['calc(-1 * (-1 * var(--foo)))', 'var(--foo)'],
+  ['calc(1 * var(--foo))', 'var(--foo)'],
+  ['calc(var(--foo) * 1)', 'var(--foo)'],
+
   // Evaluation only handles two operands right now, this can change in the future
   ['calc(1 + 2 + 3)', 'calc(1 + 2 + 3)'],
 ])('should constant fold `%s` into `%s`', (input, expected) => {
@@ -40,6 +61,8 @@ it.each([
   ['calc(3rem * 3dvw)'],
   ['calc(3rem * 2dvh)'],
   ['calc(5rem / 17px)'],
+  ['calc(2rem * calc(3px * var(--foo)))'],
+  ['calc(1rem + 0px + var(--foo))'],
 ])('should not constant fold different units `%s`', (input) => {
   expect(constantFoldDeclaration(input)).toBe(input)
 })
@@ -55,7 +78,6 @@ it.each([
   ['calc(var(--foo) * 0)'],
   ['calc(calc(var(--spacing, 0.25rem) * 32) * 0)'],
   ['calc(var(--spacing, 0.25rem) * -0)'],
-  ['calc(-0px * -1)'],
 
   // Zeroes
   ['0px'],
@@ -66,11 +88,24 @@ it.each([
   ['+0'],
   ['-0.0rem'],
   ['+0.00rem'],
-])('should constant fold `%s` to `0`', (input) => {
+
+  // Expressions
+  ['calc(-0px * -1)'],
+  ['calc(-1 * -0px)'],
+])('should constant fold `%s` to `0` (%#)', (input) => {
   expect(constantFoldDeclaration(input)).toBe('0')
 })
 
 it.each([
+  // Expressions, keep unit when they are nested
+  //
+  // TODO: We might be able to fold this further to just `1rem`, but we can't do
+  // that for any `0<unit>`. E.g.: `calc(0s + 1rem)` which is invalid, would
+  // become valid if we just use `1rem`.
+  ['calc(calc(0px * -1) + 1rem)', 'calc(0px + 1rem)'],
+  ['calc(calc(-1 * 0px) + 1rem)', 'calc(0px + 1rem)'],
+
+  // Non-foldable units
   ['0deg', '0deg'],
   ['0rad', '0deg'],
   ['0%', '0%'],
@@ -92,3 +127,11 @@ it.each([
 it('should not constant fold when dividing by `0`', () => {
   expect(constantFoldDeclaration('calc(123rem / 0)')).toBe('calc(123rem / 0)')
 })
+
+it('should not constant fold when a computation has a high-precision result', () => {
+  expect(constantFoldDeclaration('calc(100% / 3.5)')).toBe('calc(100% / 3.5)')
+})
+
+it('should constant fold division results with floating-point error after scaling', () => {
+  expect(constantFoldDeclaration('calc(29% / 100)')).toBe('0.29%')
+})
diff --git a/packages/tailwindcss/src/constant-fold-declaration.ts b/packages/tailwindcss/src/constant-fold-declaration.ts
index 9c33e73e9..c15420150 100644
--- a/packages/tailwindcss/src/constant-fold-declaration.ts
+++ b/packages/tailwindcss/src/constant-fold-declaration.ts
@@ -5,24 +5,55 @@ import { walk, WalkAction } from './walk'
 
 // Assumption: We already assume that we receive somewhat valid `calc()`
 // expressions. So we will see `calc(1 + 1)` and not `calc(1+1)`
-export function constantFoldDeclaration(input: string, rem: number | null = null): string {
-  let folded = false
-  let valueAst = ValueParser.parse(input)
+export function constantFoldDeclaration(
+  input: string,
+  rem: number | null = null,
+  normalizeUnit = true,
+): string {
+  let [folded, valueAst] = constantFoldDeclarationAst(ValueParser.parse(input), rem, normalizeUnit)
 
-  walk(valueAst, {
-    exit(valueNode) {
+  return folded ? ValueParser.toCss(valueAst) : input
+}
+
+export function constantFoldDeclarationAst(
+  ast: ValueParser.ValueAstNode[],
+  rem: number | null = null,
+  normalizeUnit = true,
+): [folded: boolean, ast: ValueParser.ValueAstNode[]] {
+  let folded = false
+
+  walk(ast, {
+    exit(valueNode, ctx) {
       // Canonicalize dimensions to their simplest form. This includes:
       // - Convert `-0`, `+0`, `0.0`, … to `0`
-      // - Convert `-0px`, `+0em`, `0.0rem`, … to `0`
+      // - Convert `-0px`, `+0em`, `0.0rem`, … to `0<unit>`
       // - Convert units to an equivalent unit
       if (
         valueNode.kind === 'word' &&
         valueNode.value !== '0' // Already `0`, nothing to do
       ) {
-        let canonical = canonicalizeDimension(valueNode.value, rem)
+        let canonical = canonicalizeDimension(valueNode.value, rem, normalizeUnit)
         if (canonical === null) return // Couldn't be canonicalized, nothing to do
         if (canonical === valueNode.value) return // Already in canonical form, nothing to do
 
+        // We need to be careful with `0` because `0<unit>` can only be
+        // converted to `0` if we're dealing with a `<length>` type.
+        if (canonical === '0') {
+          // When used inside of a function such as `calc(…)`, then this isn't
+          // always safe to convert to `0`.
+          //
+          // E.g.:
+          // - `calc(0px + 1rem)` → `calc(0 + 1rem)` this goes from valid to invalid
+          // - `calc(0px * 1rem)` → `calc(0 * 1rem)` this goes from invalid to valid
+          if (ctx.parent?.kind === 'function') {
+            let withUnit = canonicalizeDimension(valueNode.value, rem, false)
+            if (withUnit === null) return
+
+            folded = true
+            return WalkAction.ReplaceSkip(ValueParser.word(withUnit))
+          }
+        }
+
         folded = true
         return WalkAction.ReplaceSkip(ValueParser.word(canonical))
       }
@@ -40,10 +71,14 @@ export function constantFoldDeclaration(input: string, rem: number | null = null
         //   { kind: 'word', value: '256' }                 4
         // ]
         if (valueNode.nodes.length !== 5) return
+        if (valueNode.nodes[2].kind !== 'word') return
 
-        let lhs = dimensions.get(valueNode.nodes[0].value)
+        let lhsNode = valueNode.nodes[0]
         let operator = valueNode.nodes[2].value
-        let rhs = dimensions.get(valueNode.nodes[4].value)
+        let rhsNode = valueNode.nodes[4]
+
+        let lhs = lhsNode.kind === 'word' ? dimensions.get(lhsNode.value) : null
+        let rhs = rhsNode.kind === 'word' ? dimensions.get(rhsNode.value) : null
 
         // Nullify entire expression when multiplying by `0`, e.g.: `calc(0 * 100vw)` -> `0`
         //
@@ -57,6 +92,154 @@ export function constantFoldDeclaration(input: string, rem: number | null = null
           return WalkAction.ReplaceSkip(ValueParser.word('0'))
         }
 
+        // Fold `0<unit> * something-without-unit` to just `0<unit>`, inside of a function such as `calc(…)`
+        if (operator === '*' && lhs?.[0] === 0 && lhs?.[1] !== null && rhs?.[1] === null) {
+          folded = true
+          if (ctx.parent?.kind === 'function') {
+            return WalkAction.ReplaceSkip(ValueParser.word(`0${lhs[1]}`))
+          } else {
+            return WalkAction.ReplaceSkip(ValueParser.word('0'))
+          }
+        }
+
+        // Fold `something-without-unit * 0<unit>` to just `0<unit>`, inside of a function such as `calc(…)`
+        if (operator === '*' && rhs?.[0] === 0 && rhs?.[1] !== null && lhs?.[1] === null) {
+          folded = true
+          if (ctx.parent?.kind === 'function') {
+            return WalkAction.ReplaceSkip(ValueParser.word(`0${rhs[1]}`))
+          } else {
+            return WalkAction.ReplaceSkip(ValueParser.word('0'))
+          }
+        }
+
+        if (operator === '*') {
+          // Multiplying by `1` can always unwrap the other side, even when that
+          // side is an expression like `var(--foo)` that we can't fully fold.
+          if (lhs?.[0] === 1 && lhs?.[1] === null) {
+            folded = true
+            return WalkAction.ReplaceSkip(rhsNode)
+          }
+
+          if (rhs?.[0] === 1 && rhs?.[1] === null) {
+            folded = true
+            return WalkAction.ReplaceSkip(lhsNode)
+          }
+        }
+
+        if (operator === '*' || operator === '+') {
+          // If only one side is known, and the unknown side is itself another
+          // binary expression with the same operator, try to combine the two
+          // known parts and keep the unknown part in place.
+          //
+          // E.g.:
+          //
+          // - `calc(2rem * calc(3    * var(--foo)))` → `calc(6rem * var(--foo))`
+          // - `calc(2rem + calc(3rem + var(--foo)))` → `calc(5rem + var(--foo))`
+          //
+          // At this point `lhs` and `rhs` are dimensions ([value, unit] |
+          // null). The `null` one is the unknown node.
+          let constant = lhs ?? rhs
+          let nestedNode = lhs === null ? lhsNode : rhs === null ? rhsNode : null
+
+          if (
+            constant !== null &&
+            nestedNode !== null &&
+            nestedNode.kind === 'function' &&
+            (nestedNode.value === 'calc' || nestedNode.value === '') &&
+            nestedNode.nodes.length === 5 &&
+            nestedNode.nodes[2].kind === 'word' &&
+            nestedNode.nodes[2].value === operator
+          ) {
+            let nestedLhsNode = nestedNode.nodes[0]
+            let nestedRhsNode = nestedNode.nodes[4]
+            let nestedLhs =
+              nestedLhsNode.kind === 'word' ? dimensions.get(nestedLhsNode.value) : null
+            let nestedRhs =
+              nestedRhsNode.kind === 'word' ? dimensions.get(nestedRhsNode.value) : null
+
+            let known = nestedLhs ?? nestedRhs
+            let unknown =
+              nestedLhs === null ? nestedLhsNode : nestedRhs === null ? nestedRhsNode : null
+
+            if (known !== null && unknown !== null) {
+              // `*` requires both values being unitless, or one of them. Both
+              // values having a unit is invalid.
+              //
+              // - `2    * 3`     → valid
+              // - `4rem * 5`     → valid
+              // - `6    * 7rem`  → valid
+              // - `8rem * 9rem`  → invalid
+              if (
+                operator === '*' &&
+                !(
+                  (constant[1] === null && known[1] === null) || // Both can be unitless
+                  (constant[1] === null && known[1] !== null) || // One of them can be unitless, but the other can't
+                  (constant[1] !== null && known[1] === null) // One of them can be unitless, but the other can't
+                )
+              ) {
+                return
+              }
+
+              // `+` requires that both values being unitless, or both values
+              // have a unit. Mixed units are valid, but we won't fold these.
+              //
+              // - `2    + 3`     → valid
+              // - `4rem + 5`     → invalid
+              // - `6    + 7rem`  → invalid
+              // - `8rem + 9rem`  → valid
+              if (
+                operator === '+' &&
+                !(
+                  constant[1] === known[1] // Only same unit is allowed
+                )
+              ) {
+                return
+              }
+
+              // Re-associate nested expressions so we can still fold the known
+              // part of `x op (y op z)` when `z` is unknown.
+              //
+              // Examples:
+              // - `calc(2 * calc(3 * var(--foo)))` -> `calc(6 * var(--foo))`
+              // - `calc(1rem + calc(2rem + var(--foo)))` -> `calc(3rem + var(--foo))`
+              let combined: string
+              switch (operator) {
+                case '*': {
+                  combined = `${constant[0] * known[0]}${constant[1] ?? known[1] ?? ''}`
+                  break
+                }
+                case '+': {
+                  combined = `${constant[0] + known[0]}${constant[1] ?? known[1] ?? ''}`
+                  break
+                }
+
+                default:
+                  return
+              }
+
+              folded = true
+
+              if (operator === '*' && combined === '1') {
+                return WalkAction.ReplaceSkip(unknown)
+              }
+
+              let replacement: ValueParser.ValueFunctionNode = {
+                kind: 'function',
+                value: valueNode.value,
+                nodes: [
+                  ValueParser.word(combined),
+                  valueNode.nodes[1],
+                  valueNode.nodes[2],
+                  valueNode.nodes[3],
+                  unknown,
+                ],
+              }
+
+              return WalkAction.ReplaceSkip(replacement)
+            }
+          }
+        }
+
         // We're not dealing with dimensions, so we can't fold this
         if (lhs === null || rhs === null) {
           return
@@ -70,7 +253,9 @@ export function constantFoldDeclaration(input: string, rem: number | null = null
               (lhs[1] !== null && rhs[1] === null) // Unit * Unitless, e.g.: `1rem * 2`
             ) {
               folded = true
-              return WalkAction.ReplaceSkip(ValueParser.word(`${lhs[0] * rhs[0]}${lhs[1] ?? ''}`))
+              return WalkAction.ReplaceSkip(
+                ValueParser.word(`${lhs[0] * rhs[0]}${lhs[1] ?? rhs[1] ?? ''}`),
+              )
             }
             break
           }
@@ -101,8 +286,19 @@ export function constantFoldDeclaration(input: string, rem: number | null = null
               ((lhs[1] === null && rhs[1] === null) || // Unitless / Unitless, e.g.: `8 / 2`
                 (lhs[1] !== null && rhs[1] === null)) // Unit / Unitless, e.g.: `1rem / 2`
             ) {
+              let computed = lhs[0] / rhs[0]
+
+              // Only fold with .xx precision, anything beyond that might be a bit too much.
+              //
+              // E.g. 100% / 3.5 = 28.571428571428573%, which is correct but not
+              //      as user friendly. Especially when going from
+              //      `w-[calc(100%/3.5)]` → `w-[28.571428571428573%]`
+              if (Math.round(computed * 100) / 100 !== computed) {
+                break
+              }
+
               folded = true
-              return WalkAction.ReplaceSkip(ValueParser.word(`${lhs[0] / rhs[0]}${lhs[1] ?? ''}`))
+              return WalkAction.ReplaceSkip(ValueParser.word(`${computed}${lhs[1] ?? ''}`))
             }
             break
           }
@@ -111,10 +307,14 @@ export function constantFoldDeclaration(input: string, rem: number | null = null
     },
   })
 
-  return folded ? ValueParser.toCss(valueAst) : input
+  return [folded, ast]
 }
 
-function canonicalizeDimension(input: string, rem: number | null = null): string | null {
+function canonicalizeDimension(
+  input: string,
+  rem: number | null = null,
+  normalizeUnit = true,
+): string | null {
   let dimension = dimensions.get(input)
   if (dimension === null) return null // This shouldn't happen
 
@@ -122,7 +322,13 @@ function canonicalizeDimension(input: string, rem: number | null = null): string
   if (unit === null) return `${value}` // Already unitless, nothing to do
 
   // Replace `0<length>` units with just `0`
-  if (value === 0 && isLength(input)) return '0'
+  if (value === 0 && isLength(input)) {
+    if (normalizeUnit) return '0'
+    else return `0${unit}` // Keep unit
+  }
+
+  // Only normalize into base units when necessary
+  if (!normalizeUnit) return `${input}`
 
   // prettier-ignore
   switch (unit.toLowerCase()) {
diff --git a/packages/tailwindcss/src/css-functions.test.ts b/packages/tailwindcss/src/css-functions.test.ts
index 3e880dd8b..8cab2949f 100644
--- a/packages/tailwindcss/src/css-functions.test.ts
+++ b/packages/tailwindcss/src/css-functions.test.ts
@@ -3,7 +3,7 @@ import path from 'node:path'
 import { describe, expect, test } from 'vitest'
 import { compile } from '.'
 import plugin from './plugin'
-import { compileCss, optimizeCss } from './test-utils/run'
+import { compileCss, pretty, run } from './test-utils/run'
 
 const css = String.raw
 
@@ -16,9 +16,11 @@ describe('--alpha(…)', () => {
         }
       `),
     ).toMatchInlineSnapshot(`
-      ".foo {
+      "
+      .foo {
         margin: oklab(62.7955% .224 .125 / .5);
-      }"
+      }
+      "
     `)
   })
 
@@ -72,13 +74,15 @@ describe('--spacing(…)', () => {
         }
       `),
     ).toMatchInlineSnapshot(`
-      ":root, :host {
+      "
+      :root, :host {
         --spacing: .25rem;
       }
 
       .foo {
         margin: calc(var(--spacing) * 4);
-      }"
+      }
+      "
     `)
   })
 
@@ -94,12 +98,115 @@ describe('--spacing(…)', () => {
         }
       `),
     ).toMatchInlineSnapshot(`
-      ".foo {
+      "
+      .foo {
         margin: 1rem;
-      }"
+      }
+      "
     `)
   })
 
+  describe('optimizations', () => {
+    // Use custom `compileCss` such that we can use a version without Lightning
+    // CSS. This way we test _our_ optimizations instead of Lightning's
+    // optimizations.
+    async function compileCss(css: string, options: Parameters<typeof compile>[1] = {}) {
+      let { build } = await compile(css, options)
+      return pretty(build([]))
+    }
+
+    test('--spacing(…) optimizes the output when the input is `0`', async () => {
+      expect(
+        await compileCss(css`
+          @theme {
+            --spacing: 0.25rem;
+          }
+
+          .foo {
+            margin: --spacing(0);
+            padding: --spacing(0px);
+          }
+        `),
+      ).toMatchInlineSnapshot(`
+        "
+        .foo {
+          margin: 0px;
+          padding: 0px;
+        }
+        "
+      `)
+    })
+
+    test('--spacing(…) optimizes the output when the input is `0` (with an inlined theme value)', async () => {
+      expect(
+        await compileCss(css`
+          @theme inline {
+            --spacing: 0.25rem;
+          }
+
+          .foo {
+            margin: --spacing(0);
+            padding: --spacing(0px);
+          }
+        `),
+      ).toMatchInlineSnapshot(`
+        "
+        .foo {
+          margin: 0px;
+          padding: 0px;
+        }
+        "
+      `)
+    })
+
+    test('--spacing(…) optimizes the output when the input is `1`', async () => {
+      expect(
+        await compileCss(css`
+          @theme {
+            --spacing: 0.25rem;
+          }
+
+          .foo {
+            margin: --spacing(1);
+            padding: --spacing(1px);
+          }
+        `),
+      ).toMatchInlineSnapshot(`
+        "
+        :root, :host {
+          --spacing: 0.25rem;
+        }
+        .foo {
+          margin: var(--spacing);
+          padding: var(--spacing);
+        }
+        "
+      `)
+    })
+
+    test('--spacing(…) optimizes the output when the input is `1` (with an inlined theme value)', async () => {
+      expect(
+        await compileCss(css`
+          @theme inline {
+            --spacing: 0.25rem;
+          }
+
+          .foo {
+            margin: --spacing(1);
+            padding: --spacing(1px);
+          }
+        `),
+      ).toMatchInlineSnapshot(`
+        "
+        .foo {
+          margin: 0.25rem;
+          padding: 0.25rem;
+        }
+        "
+      `)
+    })
+  })
+
   test('--spacing(…) relies on `--spacing` to be defined', async () => {
     await expect(() =>
       compileCss(css`
@@ -153,13 +260,15 @@ describe('--theme(…)', () => {
         }
       `),
     ).toMatchInlineSnapshot(`
-      ":root, :host {
+      "
+      :root, :host {
         --color-red-500: red;
       }
 
       .red {
         color: var(--color-red-500);
-      }"
+      }
+      "
     `)
   })
 
@@ -174,9 +283,11 @@ describe('--theme(…)', () => {
         }
       `),
     ).toMatchInlineSnapshot(`
-      ".red {
+      "
+      .red {
         color: red;
-      }"
+      }
+      "
     `)
   })
 
@@ -191,7 +302,8 @@ describe('--theme(…)', () => {
         }
       `),
     ).toMatchInlineSnapshot(`
-      ":root, :host {
+      "
+      :root, :host {
         --color-red-500: red;
       }
 
@@ -203,7 +315,8 @@ describe('--theme(…)', () => {
         .red {
           color: color-mix(in oklab, var(--color-red-500) 50%, transparent);
         }
-      }"
+      }
+      "
     `)
   })
 
@@ -218,9 +331,11 @@ describe('--theme(…)', () => {
         }
       `),
     ).toMatchInlineSnapshot(`
-      ".red {
+      "
+      .red {
         color: oklab(62.7955% .224863 .125846);
-      }"
+      }
+      "
     `)
   })
 
@@ -235,9 +350,11 @@ describe('--theme(…)', () => {
         }
       `),
     ).toMatchInlineSnapshot(`
-      ".red {
+      "
+      .red {
         font-family: var(--tw-default-font-family, Potato Sans, sans-serif);
-      }"
+      }
+      "
     `)
   })
 
@@ -252,9 +369,11 @@ describe('--theme(…)', () => {
         }
       `),
     ).toMatchInlineSnapshot(`
-      ".red {
+      "
+      .red {
         font-family: var(--tw-default-font-family, Potato Sans, sans-serif);
-      }"
+      }
+      "
     `)
   })
 
@@ -269,9 +388,11 @@ describe('--theme(…)', () => {
         }
       `),
     ).toMatchInlineSnapshot(`
-      ".red {
+      "
+      .red {
         font-family: Potato Sans, sans-serif;
-      }"
+      }
+      "
     `)
   })
 
@@ -286,15 +407,18 @@ describe('--theme(…)', () => {
         }
       `),
     ).toMatchInlineSnapshot(`
-      ".red {
+      "
+      .red {
         font-family: Potato Sans, sans-serif;
-      }"
+      }
+      "
     `)
   })
 
   test('--theme(…) does not inject the fallback if the fallback is `initial`', async () => {
     expect(
-      await compileCss(
+      await run(
+        ['tw:font-sans'],
         css`
           @theme prefix(tw) {
             --font-sans:
@@ -309,10 +433,10 @@ describe('--theme(…)', () => {
           }
           @tailwind utilities;
         `,
-        ['tw:font-sans'],
       ),
     ).toMatchInlineSnapshot(`
-      ":root, :host {
+      "
+      :root, :host {
         --tw-font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
                     "Segoe UI Symbol", "Noto Color Emoji";
         --tw-default-font-family: var(--tw-font-sans);
@@ -326,7 +450,8 @@ describe('--theme(…)', () => {
 
       .tw\\:font-sans {
         font-family: var(--tw-font-sans);
-      }"
+      }
+      "
     `)
   })
 
@@ -350,7 +475,8 @@ describe('--theme(…)', () => {
         }
       `),
     ).toMatchInlineSnapshot(`
-      "@media (min-width: 48rem) {
+      "
+      @media (min-width: 48rem) {
         .blue {
           color: #00f;
         }
@@ -360,7 +486,8 @@ describe('--theme(…)', () => {
         .red {
           color: red;
         }
-      }"
+      }
+      "
     `)
   })
 
@@ -410,7 +537,6 @@ describe('--theme(…)', () => {
           }
           @plugin "my-plugin.js";
         `,
-        [],
         {
           loadModule: async () => ({
             path: '',
@@ -420,7 +546,8 @@ describe('--theme(…)', () => {
         },
       ),
     ).toMatchInlineSnapshot(`
-      "@layer base {
+      "
+      @layer base {
         html, :host {
           font-family: var(--default-font-family, system-ui);
         }
@@ -431,7 +558,8 @@ describe('--theme(…)', () => {
           --font-sans: sans-serif;
           --default-font-family: var(--font-sans);
         }
-      }"
+      }
+      "
     `)
   })
 })
@@ -450,9 +578,11 @@ describe('theme(…)', () => {
             }
           `),
         ).toMatchInlineSnapshot(`
-          ".red {
+          "
+          .red {
             color: red;
-          }"
+          }
+          "
         `)
       })
 
@@ -467,9 +597,11 @@ describe('theme(…)', () => {
             }
           `),
         ).toMatchInlineSnapshot(`
-          ".red {
+          "
+          .red {
             color: red;
-          }"
+          }
+          "
         `)
       })
 
@@ -484,9 +616,11 @@ describe('theme(…)', () => {
             }
           `),
         ).toMatchInlineSnapshot(`
-          ".red {
+          "
+          .red {
             color: red;
-          }"
+          }
+          "
         `)
       })
 
@@ -501,9 +635,11 @@ describe('theme(…)', () => {
             }
           `),
         ).toMatchInlineSnapshot(`
-          ".red {
+          "
+          .red {
             color: red;
-          }"
+          }
+          "
         `)
       })
 
@@ -518,9 +654,11 @@ describe('theme(…)', () => {
             }
           `),
         ).toMatchInlineSnapshot(`
-          ".red {
+          "
+          .red {
             color: red;
-          }"
+          }
+          "
         `)
       })
 
@@ -535,9 +673,11 @@ describe('theme(…)', () => {
             }
           `),
         ).toMatchInlineSnapshot(`
-          ".red {
+          "
+          .red {
             color: red;
-          }"
+          }
+          "
         `)
       })
 
@@ -552,9 +692,11 @@ describe('theme(…)', () => {
             }
           `),
         ).toMatchInlineSnapshot(`
-          ".red {
+          "
+          .red {
             color: oklab(62.7955% .224 .125 / .75);
-          }"
+          }
+          "
         `)
       })
 
@@ -569,9 +711,11 @@ describe('theme(…)', () => {
             }
           `),
         ).toMatchInlineSnapshot(`
-          ".red {
+          "
+          .red {
             color: oklab(62.7955% .224 .125 / .75);
-          }"
+          }
+          "
         `)
       })
 
@@ -586,9 +730,11 @@ describe('theme(…)', () => {
             }
           `),
         ).toMatchInlineSnapshot(`
-          ".red {
+          "
+          .red {
             color: oklab(62.7955% .224 .125 / .75);
-          }"
+          }
+          "
         `)
       })
 
@@ -603,7 +749,8 @@ describe('theme(…)', () => {
             }
           `),
         ).toMatchInlineSnapshot(`
-          ".red {
+          "
+          .red {
             color: red;
           }
 
@@ -611,7 +758,8 @@ describe('theme(…)', () => {
             .red {
               color: color-mix(in oklab, red var(--opacity), transparent);
             }
-          }"
+          }
+          "
         `)
       })
 
@@ -627,7 +775,8 @@ describe('theme(…)', () => {
             }
           `),
         ).toMatchInlineSnapshot(`
-          ".red {
+          "
+          .red {
             color: red;
           }
 
@@ -635,7 +784,8 @@ describe('theme(…)', () => {
             .red {
               color: color-mix(in oklab, red var(--opacity, 50%), transparent);
             }
-          }"
+          }
+          "
         `)
       })
 
@@ -650,9 +800,11 @@ describe('theme(…)', () => {
             }
           `),
         ).toMatchInlineSnapshot(`
-          ".space-on-the-left {
+          "
+          .space-on-the-left {
             margin-left: 3rem;
-          }"
+          }
+          "
         `)
       })
 
@@ -667,9 +819,11 @@ describe('theme(…)', () => {
             }
           `),
         ).toMatchInlineSnapshot(`
-          ".space-on-the-left {
+          "
+          .space-on-the-left {
             margin-left: .625rem;
-          }"
+          }
+          "
         `)
       })
 
@@ -684,9 +838,11 @@ describe('theme(…)', () => {
             }
           `),
         ).toMatchInlineSnapshot(`
-          ".space-on-the-left {
+          "
+          .space-on-the-left {
             margin-left: calc(100vh - .625rem);
-          }"
+          }
+          "
         `)
       })
 
@@ -701,9 +857,11 @@ describe('theme(…)', () => {
             }
           `),
         ).toMatchInlineSnapshot(`
-          ".radius {
+          "
+          .radius {
             border-radius: .5rem;
-          }"
+          }
+          "
         `)
       })
 
@@ -719,9 +877,11 @@ describe('theme(…)', () => {
               }
             `),
           ).toMatchInlineSnapshot(`
-            ".default-blur {
+            "
+            .default-blur {
               filter: blur(8px);
-            }"
+            }
+            "
           `)
         })
 
@@ -738,10 +898,12 @@ describe('theme(…)', () => {
               }
             `),
           ).toMatchInlineSnapshot(`
-            ".text {
+            "
+            .text {
               font-size: 1337.75rem;
               line-height: 1337rem;
-            }"
+            }
+            "
           `)
         })
 
@@ -750,41 +912,40 @@ describe('theme(…)', () => {
             await compileCss(css`
               @theme default reference {
                 --font-family-sans:
-                  ui-sans-serif, system-ui, sans-serif, Apple Color Emoji, Segoe UI Emoji,
-                  Segoe UI Symbol, Noto Color Emoji;
+                  -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Noto Sans,
+                  Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol,
+                  Noto Color Emoji;
               }
               .fam {
                 font-family: theme(fontFamily.sans);
               }
             `),
           ).toMatchInlineSnapshot(`
-            ".fam {
-              font-family: ui-sans-serif, system-ui, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
-            }"
+            "
+            .fam {
+              font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Noto Sans, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
+            }
+            "
           `)
         })
 
         test('theme(fontFamily.sans) (config)', async () => {
-          let compiled = await compile(
-            css`
-              @config "./my-config.js";
-              .fam {
-                font-family: theme(fontFamily.sans);
-              }
-            `,
-            {
-              loadModule: async () => ({
-                path: '',
-                base: '/root',
-                module: {},
-              }),
-            },
-          )
-
-          expect(optimizeCss(compiled.build([])).trim()).toMatchInlineSnapshot(`
-            ".fam {
-              font-family: ui-sans-serif, system-ui, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
-            }"
+          expect(
+            await compileCss(
+              css`
+                @config "./my-config.js";
+                .fam {
+                  font-family: theme(fontFamily.sans);
+                }
+              `,
+              { loadModule: async () => ({ path: '', base: '/root', module: {} }) },
+            ),
+          ).toMatchInlineSnapshot(`
+            "
+            .fam {
+              font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Noto Sans, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
+            }
+            "
           `)
         })
       })
@@ -810,9 +971,11 @@ describe('theme(…)', () => {
             }
           `),
         ).toMatchInlineSnapshot(`
-          ".red {
+          "
+          .red {
             color: red;
-          }"
+          }
+          "
         `)
       })
 
@@ -827,9 +990,11 @@ describe('theme(…)', () => {
             }
           `),
         ).toMatchInlineSnapshot(`
-          ".red {
+          "
+          .red {
             color: oklab(62.7955% .224 .125 / .25);
-          }"
+          }
+          "
         `)
       })
 
@@ -841,9 +1006,11 @@ describe('theme(…)', () => {
             }
           `),
         ).toMatchInlineSnapshot(`
-          ".fam {
+          "
+          .fam {
             font-family: Helvetica Neue, Helvetica, sans-serif;
-          }"
+          }
+          "
         `)
       })
 
@@ -861,9 +1028,11 @@ describe('theme(…)', () => {
             }
           `),
         ).toMatchInlineSnapshot(`
-          ".fam {
+          "
+          .fam {
             font-family: Helvetica Neue, Helvetica, sans-serif;
-          }"
+          }
+          "
         `)
       })
     })
@@ -881,9 +1050,11 @@ describe('theme(…)', () => {
             }
           `),
         ).toMatchInlineSnapshot(`
-          ".red {
+          "
+          .red {
             color: red;
-          }"
+          }
+          "
         `)
       })
 
@@ -899,9 +1070,11 @@ describe('theme(…)', () => {
             }
           `),
         ).toMatchInlineSnapshot(`
-          ".red {
+          "
+          .red {
             color: oklab(62.7955% .224 .125 / .25);
-          }"
+          }
+          "
         `)
       })
     })
@@ -918,9 +1091,11 @@ describe('theme(…)', () => {
             }
           `),
         ).toMatchInlineSnapshot(`
-          ".red {
+          "
+          .red {
             color: red;
-          }"
+          }
+          "
         `)
       })
 
@@ -935,9 +1110,11 @@ describe('theme(…)', () => {
             }
           `),
         ).toMatchInlineSnapshot(`
-          ".red {
+          "
+          .red {
             color: oklab(62.7955% .224 .125 / .5);
-          }"
+          }
+          "
         `)
       })
 
@@ -952,9 +1129,11 @@ describe('theme(…)', () => {
             }
           `),
         ).toMatchInlineSnapshot(`
-          ".red {
+          "
+          .red {
             color: red;
-          }"
+          }
+          "
         `)
       })
     })
@@ -971,9 +1150,11 @@ describe('theme(…)', () => {
             }
           `),
         ).toMatchInlineSnapshot(`
-          ".blur {
+          "
+          .blur {
             filter: blur(8px);
-          }"
+          }
+          "
         `)
       })
     })
@@ -982,7 +1163,7 @@ describe('theme(…)', () => {
       test.each([
         [
           'fontFamily.sans',
-          'ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"',
+          '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"',
         ],
         ['maxWidth.xs', '20rem'],
         ['transitionTimingFunction.in-out', 'cubic-bezier(.4, 0, .2, 1)'],
@@ -1015,7 +1196,8 @@ describe('theme(…)', () => {
   describe('in candidates', () => {
     test('sm:[--color:theme(colors.red[500])]', async () => {
       expect(
-        await compileCss(
+        await run(
+          ['sm:[--color:theme(colors.red[500])]'],
           css`
             @tailwind utilities;
             @theme {
@@ -1023,50 +1205,47 @@ describe('theme(…)', () => {
               --color-red-500: #f00;
             }
           `,
-          ['sm:[--color:theme(colors.red[500])]'],
         ),
       ).toMatchInlineSnapshot(`
-        "@media (min-width: 40rem) {
+        "
+        @media (min-width: 40rem) {
           .sm\\:\\[--color\\:theme\\(colors\\.red\\[500\\]\\)\\] {
             --color: red;
           }
-        }"
+        }
+        "
       `)
     })
 
     test("values that don't exist don't produce candidates", async () => {
+      let input = css`
+        @tailwind utilities;
+        @theme reference {
+          --radius-sm: 2rem;
+        }
+      `
+
       // This guarantees that valid candidates still make it through when some are invalid
       expect(
-        await compileCss(
-          css`
-            @tailwind utilities;
-            @theme reference {
-              --radius-sm: 2rem;
-            }
-          `,
+        await run(
           [
             'rounded-[theme(--radius-sm)]',
             'rounded-[theme(i.do.not.exist)]',
             'rounded-[theme(--i-do-not-exist)]',
           ],
+          input,
         ),
       ).toMatchInlineSnapshot(`
-        ".rounded-\\[theme\\(--radius-sm\\)\\] {
+        "
+        .rounded-\\[theme\\(--radius-sm\\)\\] {
           border-radius: 2rem;
-        }"
+        }
+        "
       `)
 
       // This guarantees no output for the following candidates
       expect(
-        await compileCss(
-          css`
-            @tailwind utilities;
-            @theme reference {
-              --radius-sm: 2rem;
-            }
-          `,
-          ['rounded-[theme(i.do.not.exist)]', 'rounded-[theme(--i-do-not-exist)]'],
-        ),
+        await run(['rounded-[theme(i.do.not.exist)]', 'rounded-[theme(--i-do-not-exist)]'], input),
       ).toEqual('')
     })
   })
@@ -1087,11 +1266,13 @@ describe('theme(…)', () => {
           }
         `),
       ).toMatchInlineSnapshot(`
-        "@media (min-width: 48rem) and (max-width: 64rem) {
+        "
+        @media (min-width: 48rem) and (max-width: 64rem) {
           .red {
             color: red;
           }
-        }"
+        }
+        "
       `)
     })
 
@@ -1109,11 +1290,13 @@ describe('theme(…)', () => {
           }
         `),
       ).toMatchInlineSnapshot(`
-        "@media (min-width: 48rem) and (not (min-width: 64rem)) {
+        "
+        @media (min-width: 48rem) and (not (min-width: 64rem)) {
           .red {
             color: red;
           }
-        }"
+        }
+        "
       `)
     })
   })
@@ -1132,11 +1315,13 @@ describe('theme(…)', () => {
         }
       `),
     ).toMatchInlineSnapshot(`
-      "@media (min-width: 48rem) {
+      "
+      @media (min-width: 48rem) {
         .red {
           color: red;
         }
-      }"
+      }
+      "
     `)
   })
 
@@ -1153,11 +1338,13 @@ describe('theme(…)', () => {
         }
       `),
     ).toMatchInlineSnapshot(`
-      "@container not (max-width: 48rem) {
+      "
+      @container not (max-width: 48rem) {
         .red {
           color: red;
         }
-      }"
+      }
+      "
     `)
   })
 
@@ -1174,59 +1361,63 @@ describe('theme(…)', () => {
         }
       `),
     ).toMatchInlineSnapshot(`
-      "@supports (text-stroke: 0.75rem) {
+      "
+      @supports (text-stroke: 0.75rem) {
         .red {
           color: red;
         }
-      }"
+      }
+      "
     `)
   })
 })
 
 describe('in plugins', () => {
   test('CSS theme functions in plugins are properly evaluated', async () => {
-    let compiled = await compile(
-      css`
-        @layer base, utilities;
-        @plugin "my-plugin";
-        @theme reference {
-          --color-red: oklch(62% 0.25 30);
-          --color-orange: oklch(79% 0.17 70);
-          --color-blue: oklch(45% 0.31 264);
-          --color-pink: oklch(87% 0.07 7);
-        }
-        @layer utilities {
-          @tailwind utilities;
-        }
-      `,
-      {
-        async loadModule() {
-          return {
-            path: '',
-            base: '/root',
-            module: plugin(({ addBase, addUtilities }) => {
-              addBase({
-                '.my-base-rule': {
-                  color: 'theme(colors.red)',
-                  'outline-color': 'theme(colors.orange / 15%)',
-                  'background-color': 'theme(--color-blue)',
-                  'border-color': 'theme(--color-pink / 10%)',
-                },
-              })
-
-              addUtilities({
-                '.my-utility': {
-                  color: 'theme(colors.red)',
-                },
-              })
-            }),
+    expect(
+      await run(
+        ['my-utility'],
+        css`
+          @layer base, utilities;
+          @plugin "my-plugin";
+          @theme reference {
+            --color-red: oklch(62% 0.25 30);
+            --color-orange: oklch(79% 0.17 70);
+            --color-blue: oklch(45% 0.31 264);
+            --color-pink: oklch(87% 0.07 7);
           }
-        },
-      },
-    )
+          @layer utilities {
+            @tailwind utilities;
+          }
+        `,
+        {
+          async loadModule() {
+            return {
+              path: '',
+              base: '/root',
+              module: plugin(({ addBase, addUtilities }) => {
+                addBase({
+                  '.my-base-rule': {
+                    color: 'theme(colors.red)',
+                    'outline-color': 'theme(colors.orange / 15%)',
+                    'background-color': 'theme(--color-blue)',
+                    'border-color': 'theme(--color-pink / 10%)',
+                  },
+                })
 
-    expect(optimizeCss(compiled.build(['my-utility'])).trim()).toMatchInlineSnapshot(`
-      "@layer base {
+                addUtilities({
+                  '.my-utility': {
+                    color: 'theme(colors.red)',
+                  },
+                })
+              }),
+            }
+          },
+        },
+      ),
+    ).toMatchInlineSnapshot(`
+      "
+      @layer base {
         .my-base-rule {
           color: oklch(62% .25 30);
           background-color: oklch(45% .31 264);
@@ -1239,61 +1430,64 @@ describe('in plugins', () => {
         .my-utility {
           color: oklch(62% .25 30);
         }
-      }"
+      }
+      "
     `)
   })
 })
 
 describe('in JS config files', () => {
   test('CSS theme functions in config files are properly evaluated', async () => {
-    let compiled = await compile(
-      css`
-        @layer base, utilities;
-        @config "./my-config.js";
-        @theme reference {
-          --color-red: red;
-          --color-orange: orange;
-        }
-        @layer utilities {
-          @tailwind utilities;
-        }
-      `,
-      {
-        loadModule: async () => ({
-          path: '',
-          base: '/root',
-          module: {
-            theme: {
-              extend: {
-                colors: {
-                  primary: 'theme(colors.red)',
-                  secondary: 'theme(--color-orange)',
+    expect(
+      await run(
+        ['my-utility'],
+        css`
+          @layer base, utilities;
+          @config "./my-config.js";
+          @theme reference {
+            --color-red: red;
+            --color-orange: orange;
+          }
+          @layer utilities {
+            @tailwind utilities;
+          }
+        `,
+        {
+          loadModule: async () => ({
+            path: '',
+            base: '/root',
+            module: {
+              theme: {
+                extend: {
+                  colors: {
+                    primary: 'theme(colors.red)',
+                    secondary: 'theme(--color-orange)',
+                  },
                 },
               },
+              plugins: [
+                plugin(({ addBase, addUtilities }) => {
+                  addBase({
+                    '.my-base-rule': {
+                      background: 'theme(colors.primary)',
+                      color: 'theme(colors.secondary)',
+                    },
+                  })
+
+                  addUtilities({
+                    '.my-utility': {
+                      color: 'theme(colors.red)',
+                    },
+                  })
+                }),
+              ],
             },
-            plugins: [
-              plugin(({ addBase, addUtilities }) => {
-                addBase({
-                  '.my-base-rule': {
-                    background: 'theme(colors.primary)',
-                    color: 'theme(colors.secondary)',
-                  },
-                })
-
-                addUtilities({
-                  '.my-utility': {
-                    color: 'theme(colors.red)',
-                  },
-                })
-              }),
-            ],
-          },
-        }),
-      },
-    )
-
-    expect(optimizeCss(compiled.build(['my-utility'])).trim()).toMatchInlineSnapshot(`
-      "@layer base {
+          }),
+        },
+      ),
+    ).toMatchInlineSnapshot(`
+      "
+      @layer base {
         .my-base-rule {
           color: orange;
           background: red;
@@ -1304,7 +1498,8 @@ describe('in JS config files', () => {
         .my-utility {
           color: red;
         }
-      }"
+      }
+      "
     `)
   })
 })
@@ -1318,7 +1513,6 @@ test('replaces CSS theme() function with values inside imported stylesheets', as
         }
         @import './bar.css';
       `,
-      [],
       {
         async loadStylesheet() {
           return {
@@ -1334,46 +1528,46 @@ test('replaces CSS theme() function with values inside imported stylesheets', as
       },
     ),
   ).toMatchInlineSnapshot(`
-    ".red {
+    "
+    .red {
       color: red;
-    }"
+    }
+    "
   `)
 })
 
 test('resolves paths ending with a 1', async () => {
   expect(
-    await compileCss(
-      css`
-        @theme {
-          --spacing-1: 0.25rem;
-        }
+    await compileCss(css`
+      @theme {
+        --spacing-1: 0.25rem;
+      }
 
-        .foo {
-          margin: theme(spacing.1);
-        }
-      `,
-      [],
-    ),
+      .foo {
+        margin: theme(spacing.1);
+      }
+    `),
   ).toMatchInlineSnapshot(`
-    ".foo {
+    "
+    .foo {
       margin: .25rem;
-    }"
+    }
+    "
   `)
 })
 
 test('upgrades to a full JS compat theme lookup if a value cannot be mapped to a CSS variable', async () => {
   expect(
-    await compileCss(
-      css`
-        .semi {
-          font-weight: theme(fontWeight.semibold);
-        }
-      `,
-      [],
-    ),
+    await compileCss(css`
+      .semi {
+        font-weight: theme(fontWeight.semibold);
+      }
+    `),
   ).toMatchInlineSnapshot(`
-    ".semi {
+    "
+    .semi {
       font-weight: 600;
-    }"
+    }
+    "
   `)
 })
diff --git a/packages/tailwindcss/src/css-functions.ts b/packages/tailwindcss/src/css-functions.ts
index bb3e305e4..32fba455f 100644
--- a/packages/tailwindcss/src/css-functions.ts
+++ b/packages/tailwindcss/src/css-functions.ts
@@ -2,6 +2,7 @@ import { Features } from '.'
 import { type AstNode } from './ast'
 import type { DesignSystem } from './design-system'
 import { withAlpha } from './utilities'
+import { dimensions } from './utils/dimensions'
 import { segment } from './utils/segment'
 import * as ValueParser from './value-parser'
 import { walk, WalkAction } from './walk'
@@ -62,6 +63,24 @@ function spacing(
     )
   }
 
+  // Optimization:
+  //
+  // - We know that at this point the `--spacing` value must be set.
+  // - We know that `--spacing` must be set to a `<length>` unit, such as `0.25rem`
+  // - We can assume that the `--spacing` value is not set to a `0`-like value.
+  //   Otherwise `p-<anything>` would calculate as `0` which wouldn't make sense.
+  //
+  // - That means that a value of `0` can be replaced by `0px`. It's important
+  //   to keep the unit so the value stays a `<length>`, e.g. when assigned to
+  //   a custom property and later used inside `calc(…)`.
+  // - That means that a value of `1` can be replaced by `multiplier`
+  let valueDimension = dimensions.get(value)
+  if (valueDimension) {
+    if (valueDimension[0] === 0) return '0px'
+    if (valueDimension[0] === 1) return multiplier
+  }
+
+  // No known optimizations available, use full calculation
   return `calc(${multiplier} * ${value})`
 }
 
diff --git a/packages/tailwindcss/src/css-parser.test.ts b/packages/tailwindcss/src/css-parser.test.ts
index 6caeb9f16..0dcbc0a41 100644
--- a/packages/tailwindcss/src/css-parser.test.ts
+++ b/packages/tailwindcss/src/css-parser.test.ts
@@ -31,6 +31,23 @@ describe.each(['Unix', 'Windows'])('Line endings: %s', (lineEndings) => {
       ).toEqual([])
     })
 
+    it('should end a comment at `*/` even when it is preceded by a `\\`', () => {
+      expect(
+        parse(css`
+          /* C:\temp\*/
+          .foo {
+            color: red;
+          }
+        `),
+      ).toEqual([
+        {
+          kind: 'rule',
+          selector: '.foo',
+          nodes: [{ kind: 'declaration', property: 'color', value: 'red', important: false }],
+        },
+      ])
+    })
+
     it('should parse a comment inside of a selector and ignore it', () => {
       expect(
         parse(css`
@@ -203,7 +220,7 @@ describe.each(['Unix', 'Windows'])('Line endings: %s', (lineEndings) => {
       ])
     })
 
-    it('should parse declarations with with strings and escaped string endings', () => {
+    it('should parse declarations with strings and escaped string endings', () => {
       expect(
         parse(css`
           content: 'These are not the end "\' of the string';
@@ -448,6 +465,28 @@ describe.each(['Unix', 'Windows'])('Line endings: %s', (lineEndings) => {
         ])
       })
 
+      it('should end a comment in a custom property at `*/` even when it is preceded by a `\\`', () => {
+        expect(
+          parse(css`
+            --foo: /* C:\temp\*/ bar;
+            --bar: /* baz */ qux;
+          `),
+        ).toEqual([
+          {
+            kind: 'declaration',
+            property: '--foo',
+            value: '/* C:\\temp\\*/ bar',
+            important: false,
+          },
+          {
+            kind: 'declaration',
+            property: '--bar',
+            value: '/* baz */ qux',
+            important: false,
+          },
+        ])
+      })
+
       it('should parse empty custom properties', () => {
         expect(
           parse(css`
@@ -1198,50 +1237,38 @@ describe.each(['Unix', 'Windows'])('Line endings: %s', (lineEndings) => {
     })
 
     it('should error when an unterminated string is used', () => {
-      expect(() =>
-        parse(css`
-          .foo {
-            content: "Hello world!
-            /*                    ^ missing " */
-            font-weight: bold;
-          }
-        `),
-      ).toThrowErrorMatchingInlineSnapshot(`[CssSyntaxError: Unterminated string: "Hello world!"]`)
+      let input = css`
+        .foo {
+          content: "Hello world!
+          /*                    ^ missing " */
+          font-weight: bold;
+        }
+      `
 
-      expect(() =>
-        parseWithLoc(css`
-          .foo {
-            content: "Hello world!
-            /*                    ^ missing " */
-            font-weight: bold;
-          }
-        `),
-      ).toThrowErrorMatchingInlineSnapshot(
-        `[CssSyntaxError: input.css:3:22: Unterminated string: "Hello world!"]`,
+      expect(() => parse(input)).toThrowErrorMatchingInlineSnapshot(
+        `[CssSyntaxError: Unterminated string: "Hello world!"]`,
+      )
+
+      expect(() => parseWithLoc(input)).toThrowErrorMatchingInlineSnapshot(
+        `[CssSyntaxError: input.css:3:20: Unterminated string: "Hello world!"]`,
       )
     })
 
     it('should error when an unterminated string is used with a `;`', () => {
-      expect(() =>
-        parse(css`
-          .foo {
-            content: "Hello world!;
-            /*                    ^ missing " */
-            font-weight: bold;
-          }
-        `),
-      ).toThrowErrorMatchingInlineSnapshot(`[CssSyntaxError: Unterminated string: "Hello world!;"]`)
+      let input = css`
+        .foo {
+          content: "Hello world!;
+          /*                    ^ missing " */
+          font-weight: bold;
+        }
+      `
 
-      expect(() =>
-        parseWithLoc(css`
-          .foo {
-            content: "Hello world!;
-            /*                    ^ missing " */
-            font-weight: bold;
-          }
-        `),
-      ).toThrowErrorMatchingInlineSnapshot(
-        `[CssSyntaxError: input.css:3:22: Unterminated string: "Hello world!;"]`,
+      expect(() => parse(input)).toThrowErrorMatchingInlineSnapshot(
+        `[CssSyntaxError: Unterminated string: "Hello world!;"]`,
+      )
+
+      expect(() => parseWithLoc(input)).toThrowErrorMatchingInlineSnapshot(
+        `[CssSyntaxError: input.css:3:20: Unterminated string: "Hello world!;"]`,
       )
     })
 
@@ -1266,24 +1293,20 @@ describe.each(['Unix', 'Windows'])('Line endings: %s', (lineEndings) => {
     })
 
     it('should error when an unterminated string is used in a custom property', () => {
-      expect(() =>
-        parse(css`
-          .foo {
-            --bar: 'Hello world!
-            /*                  ^ missing ' * /;
-          }
-        `),
-      ).toThrowErrorMatchingInlineSnapshot(`[CssSyntaxError: Unterminated string: 'Hello world!']`)
+      // prettier-ignore
+      let input = css`
+        .foo {
+          --bar: 'Hello world!
+          /*                  ^ missing ' * /;
+        }
+      `
 
-      expect(() =>
-        parseWithLoc(css`
-          .foo {
-            --bar: 'Hello world!
-            /*                  ^ missing ' * /;
-          }
-        `),
-      ).toThrowErrorMatchingInlineSnapshot(
-        `[CssSyntaxError: input.css:3:20: Unterminated string: 'Hello world!']`,
+      expect(() => parse(input)).toThrowErrorMatchingInlineSnapshot(
+        `[CssSyntaxError: Unterminated string: 'Hello world!']`,
+      )
+
+      expect(() => parseWithLoc(input)).toThrowErrorMatchingInlineSnapshot(
+        `[CssSyntaxError: input.css:3:18: Unterminated string: 'Hello world!']`,
       )
     })
 
diff --git a/packages/tailwindcss/src/css-parser.ts b/packages/tailwindcss/src/css-parser.ts
index 3dd5e6ffe..0896881e6 100644
--- a/packages/tailwindcss/src/css-parser.ts
+++ b/packages/tailwindcss/src/css-parser.ts
@@ -128,19 +128,24 @@ export function parse(input: string, opts?: ParseOptions) {
     //         ^^^^^^^^^^^^^
     // }
     // ```
+    //
+    // The escape character `\` in comments are ignored, this means that a
+    // the end of a comment preceded by `\` does _not_ mean that the end of the
+    // comment is escaped and therefore we have to keep parsing.
+    //
+    // This is a valid comment:
+    // ```
+    // /*C:\*/
+    // ```
+    // See: https://www.w3.org/TR/css-syntax-3/#consume-comment
     else if (currentChar === SLASH && input.charCodeAt(i + 1) === ASTERISK) {
       let start = i
 
       for (let j = i + 2; j < input.length; j++) {
         peekChar = input.charCodeAt(j)
 
-        // Current character is a `\` therefore the next character is escaped.
-        if (peekChar === BACKSLASH) {
-          j += 1
-        }
-
-        // End of the comment
-        else if (peekChar === ASTERISK && input.charCodeAt(j + 1) === SLASH) {
+        // End of the comment.
+        if (peekChar === ASTERISK && input.charCodeAt(j + 1) === SLASH) {
           i = j + 1
           break
         }
@@ -224,13 +229,9 @@ export function parse(input: string, opts?: ParseOptions) {
         else if (peekChar === SLASH && input.charCodeAt(j + 1) === ASTERISK) {
           for (let k = j + 2; k < input.length; k++) {
             peekChar = input.charCodeAt(k)
-            // Current character is a `\` therefore the next character is escaped.
-            if (peekChar === BACKSLASH) {
-              k += 1
-            }
 
-            // End of the comment
-            else if (peekChar === ASTERISK && input.charCodeAt(k + 1) === SLASH) {
+            // End of the comment.
+            if (peekChar === ASTERISK && input.charCodeAt(k + 1) === SLASH) {
               j = k + 1
               break
             }
diff --git a/packages/tailwindcss/src/design-system.ts b/packages/tailwindcss/src/design-system.ts
index 975e59e9a..7786790f6 100644
--- a/packages/tailwindcss/src/design-system.ts
+++ b/packages/tailwindcss/src/design-system.ts
@@ -75,6 +75,8 @@ export function buildDesignSystem(
   let variants = createVariants(theme)
 
   let parsedVariants = new DefaultMap((variant) => parseVariant(variant, designSystem))
+  let cachedVariantOrder: Map<Variant, number> | null = null
+  let cachedVariantOrderSize = -1
   let parsedCandidates = new DefaultMap((candidate) =>
     Array.from(parseCandidate(candidate, designSystem)),
   )
@@ -84,20 +86,16 @@ export function buildDesignSystem(
       let ast = compileAstNodes(candidate, designSystem, flags)
 
       try {
+        let nodes = ast.map((value) => value.node)
+
         // Arbitrary values (`text-[theme(--color-red-500)]`) and arbitrary
         // properties (`[--my-var:theme(--color-red-500)]`) can contain function
         // calls so we need evaluate any functions we find there that weren't in
         // the source CSS.
-        substituteFunctions(
-          ast.map(({ node }) => node),
-          designSystem,
-        )
+        substituteFunctions(nodes, designSystem)
 
         // JS plugins might contain an `@variant` inside a generated utility
-        substituteAtVariant(
-          ast.map(({ node }) => node),
-          designSystem,
-        )
+        substituteAtVariant(nodes, designSystem)
       } catch (err) {
         // If substitution fails then the candidate likely contains a call to
         // `theme()` that is invalid which may be because of incorrect usage,
@@ -192,6 +190,11 @@ export function buildDesignSystem(
     },
 
     getVariantOrder() {
+      // parsedVariants only grows, so the cache should be reset only when the size changes
+      if (cachedVariantOrder !== null && cachedVariantOrderSize === parsedVariants.size) {
+        return cachedVariantOrder
+      }
+
       let variants = Array.from(parsedVariants.values())
       variants.sort((a, z) => this.variants.compare(a, z))
 
@@ -213,6 +216,9 @@ export function buildDesignSystem(
         prevVariant = variant
       }
 
+      cachedVariantOrder = order
+      cachedVariantOrderSize = parsedVariants.size
+
       return order
     },
 
diff --git a/packages/tailwindcss/src/expand-declaration.test.ts b/packages/tailwindcss/src/expand-declaration.test.ts
index 1f9e71561..eb3d5ffb2 100644
--- a/packages/tailwindcss/src/expand-declaration.test.ts
+++ b/packages/tailwindcss/src/expand-declaration.test.ts
@@ -23,7 +23,7 @@ function expand(input: string, options: SignatureFeatures): string {
 describe('expand declarations', () => {
   let options = SignatureFeatures.ExpandProperties
 
-  test('expand to 4 properties', () => {
+  test('inset', () => {
     let input = css`
       .one {
         inset: 10px;
@@ -71,7 +71,7 @@ describe('expand declarations', () => {
     `)
   })
 
-  test('expand to 2 properties', () => {
+  test('gap', () => {
     let input = css`
       .one {
         gap: 10px;
@@ -95,6 +95,294 @@ describe('expand declarations', () => {
     `)
   })
 
+  test('border-width', () => {
+    let input = css`
+      .one {
+        border-width: 1px;
+      }
+
+      .two {
+        border-width: 1px 2px;
+      }
+
+      .three {
+        border-width: 1px 2px 3px;
+      }
+
+      .four {
+        border-width: 1px 2px 3px 4px;
+      }
+    `
+
+    expect(expand(input, options)).toMatchInlineSnapshot(`
+      ".one {
+        border-top-width: 1px;
+        border-right-width: 1px;
+        border-bottom-width: 1px;
+        border-left-width: 1px;
+      }
+      .two {
+        border-top-width: 1px;
+        border-right-width: 2px;
+        border-bottom-width: 1px;
+        border-left-width: 2px;
+      }
+      .three {
+        border-top-width: 1px;
+        border-right-width: 2px;
+        border-bottom-width: 3px;
+        border-left-width: 2px;
+      }
+      .four {
+        border-top-width: 1px;
+        border-right-width: 2px;
+        border-bottom-width: 3px;
+        border-left-width: 4px;
+      }
+      "
+    `)
+  })
+
+  test('border-style', () => {
+    let input = css`
+      .one {
+        border-style: solid;
+      }
+
+      .two {
+        border-style: solid dashed;
+      }
+
+      .three {
+        border-style: solid dashed dotted;
+      }
+
+      .four {
+        border-style: solid dashed dotted double;
+      }
+    `
+
+    expect(expand(input, options)).toMatchInlineSnapshot(`
+      ".one {
+        border-top-style: solid;
+        border-right-style: solid;
+        border-bottom-style: solid;
+        border-left-style: solid;
+      }
+      .two {
+        border-top-style: solid;
+        border-right-style: dashed;
+        border-bottom-style: solid;
+        border-left-style: dashed;
+      }
+      .three {
+        border-top-style: solid;
+        border-right-style: dashed;
+        border-bottom-style: dotted;
+        border-left-style: dashed;
+      }
+      .four {
+        border-top-style: solid;
+        border-right-style: dashed;
+        border-bottom-style: dotted;
+        border-left-style: double;
+      }
+      "
+    `)
+  })
+
+  test('border-color', () => {
+    let input = css`
+      .one {
+        border-color: red;
+      }
+
+      .two {
+        border-color: red green;
+      }
+
+      .three {
+        border-color: red green blue;
+      }
+
+      .four {
+        border-color: red green blue black;
+      }
+    `
+
+    expect(expand(input, options)).toMatchInlineSnapshot(`
+      ".one {
+        border-top-color: red;
+        border-right-color: red;
+        border-bottom-color: red;
+        border-left-color: red;
+      }
+      .two {
+        border-top-color: red;
+        border-right-color: green;
+        border-bottom-color: red;
+        border-left-color: green;
+      }
+      .three {
+        border-top-color: red;
+        border-right-color: green;
+        border-bottom-color: blue;
+        border-left-color: green;
+      }
+      .four {
+        border-top-color: red;
+        border-right-color: green;
+        border-bottom-color: blue;
+        border-left-color: black;
+      }
+      "
+    `)
+  })
+
+  test('scroll-margin', () => {
+    let input = css`
+      .one {
+        scroll-margin: 1px;
+      }
+
+      .two {
+        scroll-margin: 1px 2px;
+      }
+
+      .three {
+        scroll-margin: 1px 2px 3px;
+      }
+
+      .four {
+        scroll-margin: 1px 2px 3px 4px;
+      }
+    `
+
+    expect(expand(input, options)).toMatchInlineSnapshot(`
+      ".one {
+        scroll-margin-top: 1px;
+        scroll-margin-right: 1px;
+        scroll-margin-bottom: 1px;
+        scroll-margin-left: 1px;
+      }
+      .two {
+        scroll-margin-top: 1px;
+        scroll-margin-right: 2px;
+        scroll-margin-bottom: 1px;
+        scroll-margin-left: 2px;
+      }
+      .three {
+        scroll-margin-top: 1px;
+        scroll-margin-right: 2px;
+        scroll-margin-bottom: 3px;
+        scroll-margin-left: 2px;
+      }
+      .four {
+        scroll-margin-top: 1px;
+        scroll-margin-right: 2px;
+        scroll-margin-bottom: 3px;
+        scroll-margin-left: 4px;
+      }
+      "
+    `)
+  })
+
+  test('scroll-padding', () => {
+    let input = css`
+      .one {
+        scroll-padding: 1px;
+      }
+
+      .two {
+        scroll-padding: 1px 2px;
+      }
+
+      .three {
+        scroll-padding: 1px 2px 3px;
+      }
+
+      .four {
+        scroll-padding: 1px 2px 3px 4px;
+      }
+    `
+
+    expect(expand(input, options)).toMatchInlineSnapshot(`
+      ".one {
+        scroll-padding-top: 1px;
+        scroll-padding-right: 1px;
+        scroll-padding-bottom: 1px;
+        scroll-padding-left: 1px;
+      }
+      .two {
+        scroll-padding-top: 1px;
+        scroll-padding-right: 2px;
+        scroll-padding-bottom: 1px;
+        scroll-padding-left: 2px;
+      }
+      .three {
+        scroll-padding-top: 1px;
+        scroll-padding-right: 2px;
+        scroll-padding-bottom: 3px;
+        scroll-padding-left: 2px;
+      }
+      .four {
+        scroll-padding-top: 1px;
+        scroll-padding-right: 2px;
+        scroll-padding-bottom: 3px;
+        scroll-padding-left: 4px;
+      }
+      "
+    `)
+  })
+
+  test('overflow', () => {
+    let input = css`
+      .one {
+        overflow: clip;
+      }
+
+      .two {
+        overflow: hidden visible;
+      }
+    `
+
+    expect(expand(input, options)).toMatchInlineSnapshot(`
+      ".one {
+        overflow-x: clip;
+        overflow-y: clip;
+      }
+      .two {
+        overflow-x: hidden;
+        overflow-y: visible;
+      }
+      "
+    `)
+  })
+
+  test('overscroll-behavior', () => {
+    let input = css`
+      .one {
+        overscroll-behavior: none;
+      }
+
+      .two {
+        overscroll-behavior: auto contain;
+      }
+    `
+
+    expect(expand(input, options)).toMatchInlineSnapshot(`
+      ".one {
+        overscroll-behavior-x: none;
+        overscroll-behavior-y: none;
+      }
+      .two {
+        overscroll-behavior-x: auto;
+        overscroll-behavior-y: contain;
+      }
+      "
+    `)
+  })
+
   test('expansion with `!important`', () => {
     let input = css`
       .one {
@@ -147,6 +435,22 @@ describe('expand declarations', () => {
 describe('expand logical properties', () => {
   let options = SignatureFeatures.ExpandProperties | SignatureFeatures.LogicalToPhysical
 
+  test('margin-inline', () => {
+    let input = css`
+      .example {
+        margin-inline: 10px 20px;
+      }
+    `
+
+    expect(expand(input, options)).toMatchInlineSnapshot(`
+      ".example {
+        margin-left: 10px;
+        margin-right: 20px;
+      }
+      "
+    `)
+  })
+
   test('margin-block', () => {
     let input = css`
       .example {
@@ -162,4 +466,164 @@ describe('expand logical properties', () => {
       "
     `)
   })
+
+  test('padding-inline', () => {
+    let input = css`
+      .example {
+        padding-inline: 10px 20px;
+      }
+    `
+
+    expect(expand(input, options)).toMatchInlineSnapshot(`
+      ".example {
+        padding-left: 10px;
+        padding-right: 20px;
+      }
+      "
+    `)
+  })
+
+  test('padding-block', () => {
+    let input = css`
+      .example {
+        padding-block: 10px 20px;
+      }
+    `
+
+    expect(expand(input, options)).toMatchInlineSnapshot(`
+      ".example {
+        padding-top: 10px;
+        padding-bottom: 20px;
+      }
+      "
+    `)
+  })
+
+  test('scroll-margin-inline', () => {
+    let input = css`
+      .example {
+        scroll-margin-inline: 10px 20px;
+      }
+    `
+
+    expect(expand(input, options)).toMatchInlineSnapshot(`
+      ".example {
+        scroll-margin-left: 10px;
+        scroll-margin-right: 20px;
+      }
+      "
+    `)
+  })
+
+  test('scroll-margin-block', () => {
+    let input = css`
+      .example {
+        scroll-margin-block: 10px 20px;
+      }
+    `
+
+    expect(expand(input, options)).toMatchInlineSnapshot(`
+      ".example {
+        scroll-margin-top: 10px;
+        scroll-margin-bottom: 20px;
+      }
+      "
+    `)
+  })
+
+  test('scroll-padding-inline', () => {
+    let input = css`
+      .example {
+        scroll-padding-inline: 10px 20px;
+      }
+    `
+
+    expect(expand(input, options)).toMatchInlineSnapshot(`
+      ".example {
+        scroll-padding-left: 10px;
+        scroll-padding-right: 20px;
+      }
+      "
+    `)
+  })
+
+  test('scroll-padding-block', () => {
+    let input = css`
+      .example {
+        scroll-padding-block: 10px 20px;
+      }
+    `
+
+    expect(expand(input, options)).toMatchInlineSnapshot(`
+      ".example {
+        scroll-padding-top: 10px;
+        scroll-padding-bottom: 20px;
+      }
+      "
+    `)
+  })
+
+  test('border-inline-width', () => {
+    let input = css`
+      .example {
+        border-inline-width: 1px;
+      }
+    `
+
+    expect(expand(input, options)).toMatchInlineSnapshot(`
+      ".example {
+        border-left-width: 1px;
+        border-right-width: 1px;
+      }
+      "
+    `)
+  })
+
+  test('border-block-width', () => {
+    let input = css`
+      .example {
+        border-block-width: 1px;
+      }
+    `
+
+    expect(expand(input, options)).toMatchInlineSnapshot(`
+      ".example {
+        border-bottom-width: 1px;
+        border-top-width: 1px;
+      }
+      "
+    `)
+  })
+
+  test('border-inline-style', () => {
+    let input = css`
+      .example {
+        border-inline-style: 1px;
+      }
+    `
+
+    expect(expand(input, options)).toMatchInlineSnapshot(`
+      ".example {
+        border-left-style: 1px;
+        border-right-style: 1px;
+      }
+      "
+    `)
+  })
+
+  test('border-block-style', () => {
+    let input = css`
+      .example {
+        border-block-style: 1px;
+      }
+    `
+
+    expect(expand(input, options)).toMatchInlineSnapshot(`
+      ".example {
+        border-bottom-style: 1px;
+        border-top-style: 1px;
+      }
+      "
+    `)
+  })
 })
diff --git a/packages/tailwindcss/src/expand-declaration.ts b/packages/tailwindcss/src/expand-declaration.ts
index 628848ab4..7cef98952 100644
--- a/packages/tailwindcss/src/expand-declaration.ts
+++ b/packages/tailwindcss/src/expand-declaration.ts
@@ -35,7 +35,32 @@ let VARIADIC_EXPANSION_MAP: Record<string, Record<number, [prop: string, index:
   inset: createBareQuad(),
   margin: createPrefixedQuad('margin'),
   padding: createPrefixedQuad('padding'),
+  'scroll-margin': createPrefixedQuad('scroll-margin'),
+  'scroll-padding': createPrefixedQuad('scroll-padding'),
+  'border-width': createPrefixedQuad(
+    'border',
+    'top-width',
+    'right-width',
+    'bottom-width',
+    'left-width',
+  ),
+  'border-style': createPrefixedQuad(
+    'border',
+    'top-style',
+    'right-style',
+    'bottom-style',
+    'left-style',
+  ),
+  'border-color': createPrefixedQuad(
+    'border',
+    'top-color',
+    'right-color',
+    'bottom-color',
+    'left-color',
+  ),
   gap: createPair('row-gap', 'column-gap'),
+  overflow: createPair('overflow-x', 'overflow-y'),
+  'overscroll-behavior': createPair('overscroll-behavior-x', 'overscroll-behavior-y'),
 }
 
 // Depending on the length of the value, map to different properties
@@ -49,6 +74,10 @@ let VARIADIC_LOGICAL_EXPANSION_MAP: Record<
   'margin-inline': createPair('margin-left', 'margin-right'),
   'padding-block': createPair('padding-top', 'padding-bottom'),
   'padding-inline': createPair('padding-left', 'padding-right'),
+  'scroll-margin-block': createPair('scroll-margin-top', 'scroll-margin-bottom'),
+  'scroll-margin-inline': createPair('scroll-margin-left', 'scroll-margin-right'),
+  'scroll-padding-block': createPair('scroll-padding-top', 'scroll-padding-bottom'),
+  'scroll-padding-inline': createPair('scroll-padding-left', 'scroll-padding-right'),
 }
 
 // The entire value is mapped to each property
diff --git a/packages/tailwindcss/src/feature-flags.ts b/packages/tailwindcss/src/feature-flags.ts
index 5a262056c..e69de29bb 100644
--- a/packages/tailwindcss/src/feature-flags.ts
+++ b/packages/tailwindcss/src/feature-flags.ts
@@ -1 +0,0 @@
-export const enableContainerSizeUtility = process.env.FEATURES_ENV !== 'stable'
diff --git a/packages/tailwindcss/src/important.test.ts b/packages/tailwindcss/src/important.test.ts
index cd5af637c..a3c9447fc 100644
--- a/packages/tailwindcss/src/important.test.ts
+++ b/packages/tailwindcss/src/important.test.ts
@@ -1,30 +1,28 @@
 import { expect, test } from 'vitest'
-import { compile } from '.'
-import { compileCss } from './test-utils/run'
+import { run } from './test-utils/run'
 
 const css = String.raw
 
 test('Utilities can be wrapped in a selector', async () => {
   // This is the v4 equivalent of `important: "#app"` from v3
-  let input = css`
-    #app {
-      @tailwind utilities;
-    }
-  `
-
-  let compiler = await compile(input)
-
-  expect(compiler.build(['underline', 'hover:line-through'])).toMatchInlineSnapshot(`
-    "#app {
-      .underline {
-        text-decoration-line: underline;
-      }
-      .hover\\:line-through {
-        &:hover {
-          @media (hover: hover) {
-            text-decoration-line: line-through;
-          }
+  expect(
+    await run(
+      ['underline', 'hover:line-through'],
+      css`
+        #app {
+          @tailwind utilities;
         }
+      `,
+    ),
+  ).toMatchInlineSnapshot(`
+    "
+    #app .underline {
+      text-decoration-line: underline;
+    }
+
+    @media (hover: hover) {
+      #app .hover\\:line-through:hover {
+        text-decoration-line: line-through;
       }
     }
     "
@@ -33,27 +31,29 @@ test('Utilities can be wrapped in a selector', async () => {
 
 test('Utilities can be marked with important', async () => {
   // This is the v4 equivalent of `important: true` from v3
-  let input = css`
-    @import 'tailwindcss/utilities' important;
-  `
-
-  let compiler = await compile(input, {
-    loadStylesheet: async (id: string, base: string) => ({
-      base,
-      content: '@tailwind utilities;',
-      path: '',
-    }),
-  })
-
-  expect(compiler.build(['underline', 'hover:line-through'])).toMatchInlineSnapshot(`
-    ".underline {
+  expect(
+    await run(
+      ['underline', 'hover:line-through'],
+      css`
+        @import 'tailwindcss/utilities' important;
+      `,
+      {
+        loadStylesheet: async (_id: string, base: string) => ({
+          base,
+          content: '@tailwind utilities;',
+          path: '',
+        }),
+      },
+    ),
+  ).toMatchInlineSnapshot(`
+    "
+    .underline {
       text-decoration-line: underline !important;
     }
-    .hover\\:line-through {
-      &:hover {
-        @media (hover: hover) {
-          text-decoration-line: line-through !important;
-        }
+
+    @media (hover: hover) {
+      .hover\\:line-through:hover {
+        text-decoration-line: line-through !important;
       }
     }
     "
@@ -63,27 +63,26 @@ test('Utilities can be marked with important', async () => {
 test('Utilities can be wrapped with a selector and marked as important', async () => {
   // This does not have a direct equivalent in v3 but works as a consequence of
   // the new APIs
-  let input = css`
-    @media important {
-      #app {
-        @tailwind utilities;
-      }
-    }
-  `
-
-  let compiler = await compile(input)
-
-  expect(compiler.build(['underline', 'hover:line-through'])).toMatchInlineSnapshot(`
-    "#app {
-      .underline {
-        text-decoration-line: underline !important;
-      }
-      .hover\\:line-through {
-        &:hover {
-          @media (hover: hover) {
-            text-decoration-line: line-through !important;
+  expect(
+    await run(
+      ['underline', 'hover:line-through'],
+      css`
+        @media important {
+          #app {
+            @tailwind utilities;
           }
         }
+      `,
+    ),
+  ).toMatchInlineSnapshot(`
+    "
+    #app .underline {
+      text-decoration-line: underline !important;
+    }
+
+    @media (hover: hover) {
+      #app .hover\\:line-through:hover {
+        text-decoration-line: line-through !important;
       }
     }
     "
@@ -92,17 +91,18 @@ test('Utilities can be wrapped with a selector and marked as important', async (
 
 test('variables in utilities should not be marked as important', async () => {
   expect(
-    await compileCss(
+    await run(
+      ['ease-out!', 'z-10!'],
       css`
         @theme {
           --ease-out: cubic-bezier(0, 0, 0.2, 1);
         }
         @tailwind utilities;
       `,
-      ['ease-out!', 'z-10!'],
     ),
   ).toMatchInlineSnapshot(`
-    "@layer properties {
+    "
+    @layer properties {
       @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
         *, :before, :after, ::backdrop {
           --tw-ease: initial;
@@ -126,6 +126,7 @@ test('variables in utilities should not be marked as important', async () => {
     @property --tw-ease {
       syntax: "*";
       inherits: false
-    }"
+    }
+    "
   `)
 })
diff --git a/packages/tailwindcss/src/index.test.ts b/packages/tailwindcss/src/index.test.ts
index 5eb7407d8..7f4a0eef3 100644
--- a/packages/tailwindcss/src/index.test.ts
+++ b/packages/tailwindcss/src/index.test.ts
@@ -2,16 +2,18 @@ import fs from 'node:fs'
 import path from 'node:path'
 import { describe, expect, it, test } from 'vitest'
 import { compile, Features, Polyfills } from '.'
+import { cartesian } from './cartesian'
 import type { PluginAPI } from './compat/plugin-api'
 import plugin from './plugin'
-import { compileCss, optimizeCss, run } from './test-utils/run'
+import { compileCss, run } from './test-utils/run'
 
 const css = String.raw
 
 describe('compiling CSS', () => {
   test('`@tailwind utilities` is replaced with the generated utility classes', async () => {
     expect(
-      await compileCss(
+      await run(
+        ['flex', 'md:grid', 'hover:underline', 'dark:bg-black'],
         css`
           @theme {
             --color-black: #000;
@@ -22,10 +24,10 @@ describe('compiling CSS', () => {
             @tailwind utilities;
           }
         `,
-        ['flex', 'md:grid', 'hover:underline', 'dark:bg-black'],
       ),
     ).toMatchInlineSnapshot(`
-      ":root, :host {
+      "
+      :root, :host {
         --color-black: #000;
       }
 
@@ -51,13 +53,15 @@ describe('compiling CSS', () => {
             background-color: var(--color-black);
           }
         }
-      }"
+      }
+      "
     `)
   })
 
   test('that only CSS variables are allowed', () => {
     return expect(
-      compileCss(
+      run(
+        ['bg-primary'],
         css`
           @theme {
             --color-primary: red;
@@ -67,7 +71,6 @@ describe('compiling CSS', () => {
           }
           @tailwind utilities;
         `,
-        ['bg-primary'],
       ),
     ).rejects.toThrowErrorMatchingInlineSnapshot(`
       [Error: \`@theme\` blocks must only contain custom properties or \`@keyframes\`.
@@ -83,21 +86,23 @@ describe('compiling CSS', () => {
 
   test('`@tailwind utilities` is only processed once', async () => {
     expect(
-      await compileCss(
+      await run(
+        ['flex', 'grid'],
         css`
           @tailwind utilities;
           @tailwind utilities;
         `,
-        ['flex', 'grid'],
       ),
     ).toMatchInlineSnapshot(`
-      ".flex {
+      "
+      .flex {
         display: flex;
       }
 
       .grid {
         display: grid;
-      }"
+      }
+      "
     `)
   })
 
@@ -105,24 +110,24 @@ describe('compiling CSS', () => {
     let defaultTheme = fs.readFileSync(path.resolve(__dirname, '..', 'theme.css'), 'utf-8')
 
     expect(
-      await compileCss(
+      await run(
+        ['bg-red-500', 'w-4', 'sm:flex', 'shadow-sm'],
         css`
           ${defaultTheme}
           @tailwind utilities;
         `,
-        ['bg-red-500', 'w-4', 'sm:flex', 'shadow-sm'],
       ),
     ).toMatchSnapshot()
   })
 
   test('prefix all CSS variables inside preflight', async () => {
     expect(
-      await compileCss(
+      await run(
+        ['font-mono'],
         css`
           @import 'tailwindcss' prefix(tw);
           @tailwind utilities;
         `,
-        ['font-mono'],
         {
           async loadStylesheet(id) {
             return {
@@ -141,7 +146,12 @@ describe('compiling CSS', () => {
 
   test('unescapes underscores to spaces inside arbitrary values except for `url()` and first argument of `var()` and `theme()`', async () => {
     expect(
-      await compileCss(
+      await run(
+        [
+          'bg-[no-repeat_url(./my_file.jpg)]',
+          'ml-[var(--spacing-1_5,_var(--spacing-2_5,_1rem))]',
+          'ml-[theme(--spacing-1_5,theme(--spacing-2_5,_1rem)))]',
+        ],
         css`
           @theme {
             --spacing-1_5: 1.5rem;
@@ -149,14 +159,10 @@ describe('compiling CSS', () => {
           }
           @tailwind utilities;
         `,
-        [
-          'bg-[no-repeat_url(./my_file.jpg)]',
-          'ml-[var(--spacing-1_5,_var(--spacing-2_5,_1rem))]',
-          'ml-[theme(--spacing-1_5,theme(--spacing-2_5,_1rem)))]',
-        ],
       ),
     ).toMatchInlineSnapshot(`
-      ":root, :host {
+      "
+      :root, :host {
         --spacing-1_5: 1.5rem;
         --spacing-2_5: 2.5rem;
       }
@@ -171,13 +177,15 @@ describe('compiling CSS', () => {
 
       .bg-\\[no-repeat_url\\(\\.\\/my_file\\.jpg\\)\\] {
         background-color: no-repeat url("./my_file.jpg");
-      }"
+      }
+      "
     `)
   })
 
   test('unescapes theme variables and handles dots as underscore', async () => {
     expect(
-      await compileCss(
+      await run(
+        ['m-1.5', 'm-2.5', 'm-2_5', 'm-3.5', 'm-foo/bar'],
         css`
           @theme {
             --spacing-*: initial;
@@ -189,10 +197,10 @@ describe('compiling CSS', () => {
           }
           @tailwind utilities;
         `,
-        ['m-1.5', 'm-2.5', 'm-2_5', 'm-3.5', 'm-foo/bar'],
       ),
     ).toMatchInlineSnapshot(`
-      ":root, :host {
+      "
+      :root, :host {
         --spacing-1\\.5: 1.5px;
         --spacing-2_5: 2.5px;
         --spacing-3\\.5: 3.5px;
@@ -213,24 +221,20 @@ describe('compiling CSS', () => {
 
       .m-foo\\/bar {
         margin: var(--spacing-foo\\/bar);
-      }"
+      }
+      "
     `)
   })
 
   test('adds vendor prefixes', async () => {
-    expect(
-      await compileCss(
-        css`
-          @tailwind utilities;
-        `,
-        ['[text-size-adjust:none]'],
-      ),
-    ).toMatchInlineSnapshot(`
-      ".\\[text-size-adjust\\:none\\] {
+    expect(await run(['[text-size-adjust:none]'])).toMatchInlineSnapshot(`
+      "
+      .\\[text-size-adjust\\:none\\] {
         -webkit-text-size-adjust: none;
         -moz-text-size-adjust: none;
         text-size-adjust: none;
-      }"
+      }
+      "
     `)
   })
 })
@@ -238,27 +242,32 @@ describe('compiling CSS', () => {
 describe('arbitrary properties', () => {
   it('should generate arbitrary properties', async () => {
     expect(await run(['[color:red]'])).toMatchInlineSnapshot(`
-      ".\\[color\\:red\\] {
+      "
+      .\\[color\\:red\\] {
         color: red;
-      }"
+      }
+      "
     `)
   })
 
   it('should generate arbitrary properties with modifiers', async () => {
     expect(await run(['[color:red]/50'])).toMatchInlineSnapshot(`
-      ".\\[color\\:red\\]\\/50 {
+      "
+      .\\[color\\:red\\]\\/50 {
         color: oklab(62.7955% .224 .125 / .5);
-      }"
+      }
+      "
     `)
   })
 
   it('should not generate arbitrary properties with invalid modifiers', async () => {
-    expect(await run(['[color:red]/not-a-percentage'])).toMatchInlineSnapshot(`""`)
+    expect(await run(['[color:red]/not-a-percentage'])).toEqual('')
   })
 
   it('should generate arbitrary properties with variables and with modifiers', async () => {
     expect(await run(['[color:var(--my-color)]/50'])).toMatchInlineSnapshot(`
-      ".\\[color\\:var\\(--my-color\\)\\]\\/50 {
+      "
+      .\\[color\\:var\\(--my-color\\)\\]\\/50 {
         color: var(--my-color);
       }
 
@@ -266,7 +275,8 @@ describe('arbitrary properties', () => {
         .\\[color\\:var\\(--my-color\\)\\]\\/50 {
           color: color-mix(in oklab, var(--my-color) 50%, transparent);
         }
-      }"
+      }
+      "
     `)
   })
 })
@@ -308,7 +318,6 @@ describe('@apply', () => {
             @apply p-2;
           }
         `,
-        [],
         {
           async loadStylesheet() {
             return {
@@ -325,13 +334,15 @@ describe('@apply', () => {
         },
       ),
     ).toMatchInlineSnapshot(`
-      ":root, :host {
+      "
+      :root, :host {
         --spacing: .25rem;
       }
 
       .foo {
         padding: calc(var(--spacing) * 2);
-      }"
+      }
+      "
     `)
   })
 
@@ -345,7 +356,6 @@ describe('@apply', () => {
             @apply p-2;
           }
         `,
-        [],
         {
           async loadStylesheet() {
             return {
@@ -362,9 +372,11 @@ describe('@apply', () => {
         },
       ),
     ).toMatchInlineSnapshot(`
-      ".foo {
+      "
+      .foo {
         padding: calc(var(--spacing, .25rem) * 2);
-      }"
+      }
+      "
     `)
   })
 
@@ -398,7 +410,8 @@ describe('@apply', () => {
         }
       `),
     ).toMatchInlineSnapshot(`
-      "@layer properties {
+      "
+      @layer properties {
         @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
           *, :before, :after, ::backdrop {
             --tw-translate-x: 0;
@@ -469,7 +482,8 @@ describe('@apply', () => {
         to {
           transform: rotate(360deg);
         }
-      }"
+      }
+      "
     `)
   })
 
@@ -480,7 +494,6 @@ describe('@apply', () => {
           @import './bar.css';
           @tailwind utilities;
         `,
-        [],
         {
           async loadStylesheet() {
             return {
@@ -496,9 +509,11 @@ describe('@apply', () => {
         },
       ),
     ).toMatchInlineSnapshot(`
-      ".foo {
+      "
+      .foo {
         text-decoration-line: underline;
-      }"
+      }
+      "
     `)
   })
 
@@ -516,7 +531,8 @@ describe('@apply', () => {
         }
       `),
     ).toMatchInlineSnapshot(`
-      "@layer properties {
+      "
+      @layer properties {
         @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
           *, :before, :after, ::backdrop {
             --tw-content: "";
@@ -533,7 +549,8 @@ describe('@apply', () => {
         syntax: "*";
         inherits: false;
         initial-value: "";
-      }"
+      }
+      "
     `)
   })
 
@@ -551,7 +568,8 @@ describe('@apply', () => {
         }
       `),
     ).toMatchInlineSnapshot(`
-      "@layer properties {
+      "
+      @layer properties {
         @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
           *, :before, :after, ::backdrop {
             --tw-leading: initial;
@@ -577,7 +595,8 @@ describe('@apply', () => {
       @property --tw-leading {
         syntax: "*";
         inherits: false
-      }"
+      }
+      "
     `)
   })
 
@@ -622,9 +641,11 @@ describe('@apply', () => {
         }
       `),
     ).toMatchInlineSnapshot(`
-      ".foo {
+      "
+      .foo {
         display: flex;
-      }"
+      }
+      "
     `)
   })
 
@@ -651,19 +672,22 @@ describe('@apply', () => {
         @tailwind utilities;
       `),
     ).toMatchInlineSnapshot(`
-      ".foo:before {
+      "
+      .foo:before {
         content: "bar";
       }
 
       .foo:after {
         content: "baz";
-      }"
+      }
+      "
     `)
   })
 
   it('should recursively apply with custom `@utility`, which is used before it is defined', async () => {
     expect(
-      await compileCss(
+      await run(
+        ['a', 'b', 'c', 'flex', 'my-flex'],
         css`
           @tailwind utilities;
 
@@ -689,10 +713,10 @@ describe('@apply', () => {
             @apply flex;
           }
         `,
-        ['a', 'b', 'c', 'flex', 'my-flex'],
       ),
     ).toMatchInlineSnapshot(`
-      ".a:focus, .b:focus, .c {
+      "
+      .a:focus, .b:focus, .c {
         display: flex !important;
       }
 
@@ -704,14 +728,16 @@ describe('@apply', () => {
         body:focus {
           display: flex !important;
         }
-      }"
+      }
+      "
     `)
   })
 
   // https://github.com/tailwindlabs/tailwindcss/issues/16935
   it('should not swallow @utility declarations when @apply is used in nested rules', async () => {
     expect(
-      await compileCss(
+      await run(
+        ['custom-utility'],
         css`
           @tailwind utilities;
 
@@ -726,10 +752,10 @@ describe('@apply', () => {
             @apply flex;
           }
         `,
-        ['custom-utility'],
       ),
     ).toMatchInlineSnapshot(`
-      ".custom-utility {
+      "
+      .custom-utility {
         display: flex;
       }
 
@@ -739,14 +765,16 @@ describe('@apply', () => {
 
       .ignore-me div {
         display: flex;
-      }"
+      }
+      "
     `)
   })
 
   // https://github.com/tailwindlabs/tailwindcss/issues/17924
   it('should correctly apply nested usages of @apply when one @utility applies another', async () => {
     expect(
-      await compileCss(
+      await run(
+        ['foo', 'test', 'test2'],
         css`
           @theme {
             --color-green-500: green;
@@ -774,10 +802,10 @@ describe('@apply', () => {
             @apply test2;
           }
         `,
-        ['foo', 'test', 'test2'],
       ),
     ).toMatchInlineSnapshot(`
-      ":root, :host {
+      "
+      :root, :host {
         --color-green-500: green;
         --color-red-500: red;
         --color-indigo-500: indigo;
@@ -817,14 +845,16 @@ describe('@apply', () => {
 
       .foo:disabled {
         background-color: var(--color-indigo-500);
-      }"
+      }
+      "
     `)
   })
 
   // https://github.com/tailwindlabs/tailwindcss/issues/18400
   it('should ignore the design systems `important` flag when using @apply', async () => {
     expect(
-      await compileCss(
+      await run(
+        ['flex'],
         css`
           @import 'tailwindcss/utilities' important;
           .flex-explicitly-important {
@@ -834,7 +864,6 @@ describe('@apply', () => {
             @apply flex;
           }
         `,
-        ['flex'],
         {
           async loadStylesheet(_, base) {
             return {
@@ -846,33 +875,108 @@ describe('@apply', () => {
         },
       ),
     ).toMatchInlineSnapshot(`
-      ".flex, .flex-explicitly-important {
+      "
+      .flex, .flex-explicitly-important {
         display: flex !important;
       }
 
       .flex-not-important {
         display: flex;
-      }"
+      }
+      "
     `)
   })
+
+  it('should be usable with CSS mixins', async () => {
+    let input = css`
+      .foo {
+        /* Utility usage */
+        @apply underline;
+
+        /* CSS mixin usage */
+        @apply --my-mixin-1;
+        @apply --my-mixin-1();
+        @apply --my-mixin-1 --my-mixin-2;
+        @apply --my-mixin-1() --my-mixin-2();
+        @apply --my-mixin-3 {
+          color: red;
+        }
+      }
+    `
+
+    expect(await compileCss(input)).toMatchInlineSnapshot(`
+      "
+      .foo {
+        text-decoration-line: underline;
+        @apply --my-mixin-1;
+        @apply --my-mixin-1();
+        @apply --my-mixin-1 --my-mixin-2;
+        @apply --my-mixin-1() --my-mixin-2();
+        @apply --my-mixin-3 {
+          color: red;
+        }
+      }
+      "
+    `)
+  })
+
+  it('should error when trying to use mixins and utilities together', async () => {
+    await expect(
+      compile(css`
+        .foo {
+          @apply underline --my-mixin-1;
+        }
+      `),
+    ).rejects.toThrowErrorMatchingInlineSnapshot(
+      `[Error: You cannot use \`@apply\` with both mixins and utilities. Please move \`@apply --my-mixin-1\` into a separate rule.]`,
+    )
+
+    await expect(
+      compile(css`
+        .foo {
+          @apply --my-mixin-1 underline;
+        }
+      `),
+    ).rejects.toThrowErrorMatchingInlineSnapshot(
+      `[Error: You cannot use \`@apply\` with both mixins and utilities. Please move \`@apply --my-mixin-1\` into a separate rule.]`,
+    )
+  })
+
+  it('should error when used with a body', async () => {
+    await expect(
+      compile(css`
+        .foo {
+          @apply underline {
+            color: red;
+          }
+        }
+      `),
+    ).rejects.toThrowErrorMatchingInlineSnapshot(
+      `[Error: The rule \`@apply underline\` must not have a body.]`,
+    )
+  })
 })
 
 describe('arbitrary variants', () => {
   it('should generate arbitrary variants', async () => {
     expect(await run(['[&_p]:flex'])).toMatchInlineSnapshot(`
-      ".\\[\\&_p\\]\\:flex p {
+      "
+      .\\[\\&_p\\]\\:flex p {
         display: flex;
-      }"
+      }
+      "
     `)
   })
 
   it('should generate arbitrary at-rule variants', async () => {
     expect(await run(['[@media(width>=123px)]:flex'])).toMatchInlineSnapshot(`
-      "@media (min-width: 123px) {
+      "
+      @media (min-width: 123px) {
         .\\[\\@media\\(width\\>\\=123px\\)\\]\\:flex {
           display: flex;
         }
-      }"
+      }
+      "
     `)
   })
 
@@ -884,37 +988,44 @@ describe('arbitrary variants', () => {
 describe('variant stacking', () => {
   it('should stack simple variants', async () => {
     expect(await run(['focus:hover:flex'])).toMatchInlineSnapshot(`
-      "@media (hover: hover) {
+      "
+      @media (hover: hover) {
         .focus\\:hover\\:flex:focus:hover {
           display: flex;
         }
-      }"
+      }
+      "
     `)
   })
 
   it('should stack arbitrary variants and simple variants', async () => {
     expect(await run(['[&_p]:hover:flex'])).toMatchInlineSnapshot(`
-      "@media (hover: hover) {
+      "
+      @media (hover: hover) {
         .\\[\\&_p\\]\\:hover\\:flex p:hover {
           display: flex;
         }
-      }"
+      }
+      "
     `)
   })
 
   it('should stack multiple arbitrary variants', async () => {
     expect(await run(['[&_p]:[@media(width>=123px)]:flex'])).toMatchInlineSnapshot(`
-      "@media (min-width: 123px) {
+      "
+      @media (min-width: 123px) {
         .\\[\\&_p\\]\\:\\[\\@media\\(width\\>\\=123px\\)\\]\\:flex p {
           display: flex;
         }
-      }"
+      }
+      "
     `)
   })
 
   it('pseudo element variants are re-ordered', async () => {
     expect(await run(['before:hover:flex', 'hover:before:flex'])).toMatchInlineSnapshot(`
-      "@layer properties {
+      "
+      @layer properties {
         @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
           *, :before, :after, ::backdrop {
             --tw-content: "";
@@ -941,7 +1052,8 @@ describe('variant stacking', () => {
         syntax: "*";
         inherits: false;
         initial-value: "";
-      }"
+      }
+      "
     `)
   })
 })
@@ -949,23 +1061,28 @@ describe('variant stacking', () => {
 describe('important', () => {
   it('should generate an important utility', async () => {
     expect(await run(['underline!'])).toMatchInlineSnapshot(`
-      ".underline\\! {
+      "
+      .underline\\! {
         text-decoration-line: underline !important;
-      }"
+      }
+      "
     `)
   })
 
   it('should generate an important utility with legacy syntax', async () => {
     expect(await run(['!underline'])).toMatchInlineSnapshot(`
-      ".\\!underline {
+      "
+      .\\!underline {
         text-decoration-line: underline !important;
-      }"
+      }
+      "
     `)
   })
 
   it('should not mark declarations inside of @keyframes as important', async () => {
     expect(
-      await compileCss(
+      await run(
+        ['animate-spin!'],
         css`
           @theme {
             --animate-spin: spin 1s linear infinite;
@@ -978,10 +1095,10 @@ describe('important', () => {
           }
           @tailwind utilities;
         `,
-        ['animate-spin!'],
       ),
     ).toMatchInlineSnapshot(`
-      ":root, :host {
+      "
+      :root, :host {
         --animate-spin: spin 1s linear infinite;
       }
 
@@ -993,15 +1110,18 @@ describe('important', () => {
         to {
           transform: rotate(360deg);
         }
-      }"
+      }
+      "
     `)
   })
 
   it('should generate an important arbitrary property utility', async () => {
     expect(await run(['[color:red]!'])).toMatchInlineSnapshot(`
-      ".\\[color\\:red\\]\\! {
+      "
+      .\\[color\\:red\\]\\! {
         color: red !important;
-      }"
+      }
+      "
     `)
   })
 })
@@ -1009,17 +1129,18 @@ describe('important', () => {
 describe('sorting', () => {
   it('should sort utilities based on their property order', async () => {
     expect(
-      await compileCss(
+      await run(
+        ['pointer-events-none', 'flex', 'p-1', 'px-1', 'pl-1'].sort(() => Math.random() - 0.5),
         css`
           @theme {
             --spacing-1: 0.25rem;
           }
           @tailwind utilities;
         `,
-        ['pointer-events-none', 'flex', 'p-1', 'px-1', 'pl-1'].sort(() => Math.random() - 0.5),
       ),
     ).toMatchInlineSnapshot(`
-      ":root, :host {
+      "
+      :root, :host {
         --spacing-1: .25rem;
       }
 
@@ -1041,13 +1162,15 @@ describe('sorting', () => {
 
       .pl-1 {
         padding-left: var(--spacing-1);
-      }"
+      }
+      "
     `)
   })
 
   it('should sort based on amount of properties', async () => {
     expect(await run(['text-clip', 'truncate', 'overflow-scroll'])).toMatchInlineSnapshot(`
-      ".truncate {
+      "
+      .truncate {
         text-overflow: ellipsis;
         white-space: nowrap;
         overflow: hidden;
@@ -1059,7 +1182,8 @@ describe('sorting', () => {
 
       .text-clip {
         text-overflow: clip;
-      }"
+      }
+      "
     `)
   })
 
@@ -1070,7 +1194,8 @@ describe('sorting', () => {
    */
   it('should sort utilities with a custom internal --tw-sort correctly', async () => {
     expect(
-      await compileCss(
+      await run(
+        ['mx-0', 'gap-4', 'space-x-2'].sort(() => Math.random() - 0.5),
         css`
           @theme {
             --spacing-0: 0px;
@@ -1079,10 +1204,10 @@ describe('sorting', () => {
           }
           @tailwind utilities;
         `,
-        ['mx-0', 'gap-4', 'space-x-2'].sort(() => Math.random() - 0.5),
       ),
     ).toMatchInlineSnapshot(`
-      "@layer properties {
+      "
+      @layer properties {
         @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
           *, :before, :after, ::backdrop {
             --tw-space-x-reverse: 0;
@@ -1114,21 +1239,14 @@ describe('sorting', () => {
         syntax: "*";
         inherits: false;
         initial-value: 0;
-      }"
+      }
+      "
     `)
   })
 
   it('should sort individual logical properties later than left/right pairs', async () => {
     expect(
-      await compileCss(
-        css`
-          @theme {
-            --spacing-1: 1px;
-            --spacing-2: 2px;
-            --spacing-3: 3px;
-          }
-          @tailwind utilities;
-        `,
+      await run(
         [
           // scroll-margin
           'scroll-ms-1',
@@ -1150,9 +1268,18 @@ describe('sorting', () => {
           'pe-2',
           'px-3',
         ].sort(() => Math.random() - 0.5),
+        css`
+          @theme {
+            --spacing-1: 1px;
+            --spacing-2: 2px;
+            --spacing-3: 3px;
+          }
+          @tailwind utilities;
+        `,
       ),
     ).toMatchInlineSnapshot(`
-      ":root, :host {
+      "
+      :root, :host {
         --spacing-1: 1px;
         --spacing-2: 2px;
         --spacing-3: 3px;
@@ -1204,7 +1331,8 @@ describe('sorting', () => {
 
       .pe-2 {
         padding-inline-end: var(--spacing-2);
-      }"
+      }
+      "
     `)
   })
 
@@ -1216,7 +1344,8 @@ describe('sorting', () => {
         ),
       ),
     ).toMatchInlineSnapshot(`
-      ".pointer-events-none {
+      "
+      .pointer-events-none {
         pointer-events: none;
       }
 
@@ -1232,7 +1361,8 @@ describe('sorting', () => {
 
       .focus\\:pointer-events-none:focus {
         pointer-events: none;
-      }"
+      }
+      "
     `)
   })
 
@@ -1259,7 +1389,8 @@ describe('sorting', () => {
         ),
       ),
     ).toMatchInlineSnapshot(`
-      ".flex {
+      "
+      .flex {
         display: flex;
       }
 
@@ -1281,7 +1412,8 @@ describe('sorting', () => {
 
       .disabled\\:flex:disabled {
         display: flex;
-      }"
+      }
+      "
     `)
   })
 
@@ -1310,43 +1442,44 @@ describe('sorting', () => {
         ].sort(() => Math.random() - 0.5),
       ),
     ).toMatchInlineSnapshot(`
-      "@media (hover: hover) {
-        .group-hover\\:flex:is(:where(.group):hover *) {
+      "
+      @media (hover: hover) {
+        :is(:where(.group):hover .group-hover\\:flex) {
           display: flex;
         }
       }
 
-      .group-focus\\:flex:is(:where(.group):focus *) {
+      :is(:where(.group):focus .group-focus\\:flex) {
         display: flex;
       }
 
       @media (hover: hover) {
-        .peer-hover\\:flex:is(:where(.peer):hover ~ *) {
+        :is(:where(.peer):hover ~ .peer-hover\\:flex) {
           display: flex;
         }
 
         @media (hover: hover) {
-          .group-hover\\:peer-hover\\:flex:is(:where(.group):hover *):is(:where(.peer):hover ~ *), .peer-hover\\:group-hover\\:flex:is(:where(.peer):hover ~ *):is(:where(.group):hover *) {
+          :is(:where(.peer):hover ~ :is(:where(.group):hover .group-hover\\:peer-hover\\:flex)), :is(:where(.group):hover :is(:where(.peer):hover ~ .peer-hover\\:group-hover\\:flex)) {
             display: flex;
           }
         }
 
-        .group-focus\\:peer-hover\\:flex:is(:where(.group):focus *):is(:where(.peer):hover ~ *), .peer-hover\\:group-focus\\:flex:is(:where(.peer):hover ~ *):is(:where(.group):focus *) {
+        :is(:where(.peer):hover ~ :is(:where(.group):focus .group-focus\\:peer-hover\\:flex)), :is(:where(.group):focus :is(:where(.peer):hover ~ .peer-hover\\:group-focus\\:flex)) {
           display: flex;
         }
       }
 
-      .peer-focus\\:flex:is(:where(.peer):focus ~ *) {
+      :is(:where(.peer):focus ~ .peer-focus\\:flex) {
         display: flex;
       }
 
       @media (hover: hover) {
-        .group-hover\\:peer-focus\\:flex:is(:where(.group):hover *):is(:where(.peer):focus ~ *), .peer-focus\\:group-hover\\:flex:is(:where(.peer):focus ~ *):is(:where(.group):hover *) {
+        :is(:where(.peer):focus ~ :is(:where(.group):hover .group-hover\\:peer-focus\\:flex)), :is(:where(.group):hover :is(:where(.peer):focus ~ .peer-focus\\:group-hover\\:flex)) {
           display: flex;
         }
       }
 
-      .group-focus\\:peer-focus\\:flex:is(:where(.group):focus *):is(:where(.peer):focus ~ *), .peer-focus\\:group-focus\\:flex:is(:where(.peer):focus ~ *):is(:where(.group):focus *) {
+      :is(:where(.peer):focus ~ :is(:where(.group):focus .group-focus\\:peer-focus\\:flex)), :is(:where(.group):focus :is(:where(.peer):focus ~ .peer-focus\\:group-focus\\:flex)) {
         display: flex;
       }
 
@@ -1354,14 +1487,16 @@ describe('sorting', () => {
         .hover\\:flex:hover {
           display: flex;
         }
-      }"
+      }
+      "
     `)
   })
 
   // https://github.com/tailwindlabs/tailwindcss/issues/16973
   it('should not take undefined values into account when sorting', async () => {
     expect(
-      await compileCss(
+      await run(
+        ['fancy-text', 'text-sm'],
         css`
           @theme {
             --text-sm: 0.875rem;
@@ -1374,10 +1509,10 @@ describe('sorting', () => {
             font-weight: var(--font-weight-bold);
           }
         `,
-        ['fancy-text', 'text-sm'],
       ),
     ).toMatchInlineSnapshot(`
-      ":root, :host {
+      "
+      :root, :host {
         --text-sm: .875rem;
         --text-sm--line-height: calc(1.25 / .875);
       }
@@ -1391,7 +1526,8 @@ describe('sorting', () => {
       .text-sm {
         font-size: var(--text-sm);
         line-height: var(--tw-leading, var(--text-sm--line-height));
-      }"
+      }
+      "
     `)
   })
 })
@@ -1399,29 +1535,32 @@ describe('sorting', () => {
 describe('Parsing theme values from CSS', () => {
   test('Can read values from `@theme`', async () => {
     expect(
-      await compileCss(
+      await run(
+        ['accent-red-500'],
         css`
           @theme {
             --color-red-500: #f00;
           }
           @tailwind utilities;
         `,
-        ['accent-red-500'],
       ),
     ).toMatchInlineSnapshot(`
-      ":root, :host {
+      "
+      :root, :host {
         --color-red-500: red;
       }
 
       .accent-red-500 {
         accent-color: var(--color-red-500);
-      }"
+      }
+      "
     `)
   })
 
   test('Later values from `@theme` override earlier ones', async () => {
     expect(
-      await compileCss(
+      await run(
+        ['accent-red-500'],
         css`
           @theme {
             --color-red-500: #f00;
@@ -1429,22 +1568,24 @@ describe('Parsing theme values from CSS', () => {
           }
           @tailwind utilities;
         `,
-        ['accent-red-500'],
       ),
     ).toMatchInlineSnapshot(`
-      ":root, :host {
+      "
+      :root, :host {
         --color-red-500: #f10;
       }
 
       .accent-red-500 {
         accent-color: var(--color-red-500);
-      }"
+      }
+      "
     `)
   })
 
   test('Multiple `@theme` blocks are merged', async () => {
     expect(
-      await compileCss(
+      await run(
+        ['accent-red-500', 'accent-blue-500'],
         css`
           @theme {
             --color-red-500: #f00;
@@ -1454,10 +1595,10 @@ describe('Parsing theme values from CSS', () => {
           }
           @tailwind utilities;
         `,
-        ['accent-red-500', 'accent-blue-500'],
       ),
     ).toMatchInlineSnapshot(`
-      ":root, :host {
+      "
+      :root, :host {
         --color-red-500: red;
         --color-blue-500: #00f;
       }
@@ -1468,13 +1609,15 @@ describe('Parsing theme values from CSS', () => {
 
       .accent-red-500 {
         accent-color: var(--color-red-500);
-      }"
+      }
+      "
     `)
   })
 
   test('`@theme` values with escaped forward slashes map to unescaped slashes in candidate values', async () => {
     expect(
-      await compileCss(
+      await run(
+        ['w-1/2', 'w-75%'],
         css`
           @theme {
             /* Cursed but we want this to work */
@@ -1483,10 +1626,10 @@ describe('Parsing theme values from CSS', () => {
           }
           @tailwind utilities;
         `,
-        ['w-1/2', 'w-75%'],
       ),
     ).toMatchInlineSnapshot(`
-      ":root, :host {
+      "
+      :root, :host {
         --width-1\\/2: 75%;
         --width-75\\%: 50%;
       }
@@ -1497,13 +1640,23 @@ describe('Parsing theme values from CSS', () => {
 
       .w-75\\% {
         width: var(--width-75\\%);
-      }"
+      }
+      "
     `)
   })
 
+  // https://github.com/tailwindlabs/tailwindcss/issues/19786
+  test('out-of-range escaped CSS variable candidates do not crash the build', async () => {
+    // Shouldn't crash
+    await run([
+      String.raw`--Coding-Projects-CharacterMapper-Master-Workspace\d8819554-4725-4235-9d22-2d0ed572e924`,
+    ])
+  })
+
   test('`@keyframes` in `@theme` are hoisted', async () => {
     expect(
-      await compileCss(
+      await run(
+        ['accent-red', 'text-lg'],
         css`
           @theme {
             --color-red: red;
@@ -1519,10 +1672,10 @@ describe('Parsing theme values from CSS', () => {
           }
           @tailwind utilities;
         `,
-        ['accent-red', 'text-lg'],
       ),
     ).toMatchInlineSnapshot(`
-      ":root, :host {
+      "
+      :root, :host {
         --color-red: red;
         --text-lg: 20px;
       }
@@ -1533,13 +1686,15 @@ describe('Parsing theme values from CSS', () => {
 
       .accent-red {
         accent-color: var(--color-red);
-      }"
+      }
+      "
     `)
   })
 
   test('`@keyframes` in `@theme` are generated when name contains a new line', async () => {
     expect(
-      await compileCss(
+      await run(
+        ['animate-very-long-animation-name'],
         css`
           @theme {
             --animate-very-long-animation-name: very-long-animation-name
@@ -1557,10 +1712,10 @@ describe('Parsing theme values from CSS', () => {
 
           @tailwind utilities;
         `,
-        ['animate-very-long-animation-name'],
       ),
     ).toMatchInlineSnapshot(`
-      ":root, :host {
+      "
+      :root, :host {
         --animate-very-long-animation-name: very-long-animation-name
                     var(--very-long-animation-name-configuration, 2.5s ease-in-out 0s infinite normal none running);
       }
@@ -1573,13 +1728,15 @@ describe('Parsing theme values from CSS', () => {
         to {
           opacity: 1;
         }
-      }"
+      }
+      "
     `)
   })
 
   test('`@theme` values can be unset', async () => {
     expect(
-      await compileCss(
+      await run(
+        ['accent-red', 'accent-blue', 'accent-green', 'text-sm', 'text-md'],
         css`
           @theme {
             --color-red: #f00;
@@ -1606,10 +1763,10 @@ describe('Parsing theme values from CSS', () => {
           }
           @tailwind utilities;
         `,
-        ['accent-red', 'accent-blue', 'accent-green', 'text-sm', 'text-md'],
       ),
     ).toMatchInlineSnapshot(`
-      ":root, :host {
+      "
+      :root, :host {
         --text-sm: 13px;
         --color-green: #0f0;
       }
@@ -1620,13 +1777,15 @@ describe('Parsing theme values from CSS', () => {
 
       .accent-green {
         accent-color: var(--color-green);
-      }"
+      }
+      "
     `)
   })
 
   test('`@theme` values can be unset (using the escaped syntax)', async () => {
     expect(
-      await compileCss(
+      await run(
+        ['accent-red', 'accent-blue', 'accent-green', 'text-sm', 'text-md'],
         css`
           @theme {
             --color-red: #f00;
@@ -1653,10 +1812,10 @@ describe('Parsing theme values from CSS', () => {
           }
           @tailwind utilities;
         `,
-        ['accent-red', 'accent-blue', 'accent-green', 'text-sm', 'text-md'],
       ),
     ).toMatchInlineSnapshot(`
-      ":root, :host {
+      "
+      :root, :host {
         --text-sm: 13px;
         --color-green: #0f0;
       }
@@ -1667,13 +1826,15 @@ describe('Parsing theme values from CSS', () => {
 
       .accent-green {
         accent-color: var(--color-green);
-      }"
+      }
+      "
     `)
   })
 
   test('all `@theme` values can be unset at once', async () => {
     expect(
-      await compileCss(
+      await run(
+        ['accent-red', 'accent-blue', 'accent-green', 'text-sm', 'text-md'],
         css`
           @theme {
             --color-red: #f00;
@@ -1689,22 +1850,24 @@ describe('Parsing theme values from CSS', () => {
           }
           @tailwind utilities;
         `,
-        ['accent-red', 'accent-blue', 'accent-green', 'text-sm', 'text-md'],
       ),
     ).toMatchInlineSnapshot(`
-      ":root, :host {
+      "
+      :root, :host {
         --color-green: #0f0;
       }
 
       .accent-green {
         accent-color: var(--color-green);
-      }"
+      }
+      "
     `)
   })
 
   test('unsetting `--font-*` does not unset `--font-weight-*`', async () => {
     expect(
-      await compileCss(
+      await run(
+        ['font-bold', 'font-sans', 'font-serif', 'font-body'],
         css`
           @theme {
             --font-weight-bold: bold;
@@ -1717,10 +1880,10 @@ describe('Parsing theme values from CSS', () => {
           }
           @tailwind utilities;
         `,
-        ['font-bold', 'font-sans', 'font-serif', 'font-body'],
       ),
     ).toMatchInlineSnapshot(`
-      "@layer properties {
+      "
+      @layer properties {
         @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
           *, :before, :after, ::backdrop {
             --tw-font-weight: initial;
@@ -1745,13 +1908,15 @@ describe('Parsing theme values from CSS', () => {
       @property --tw-font-weight {
         syntax: "*";
         inherits: false
-      }"
+      }
+      "
     `)
   })
 
   test('unsetting `--inset-*` does not unset `--inset-shadow-*`', async () => {
     expect(
-      await compileCss(
+      await run(
+        ['inset-shadow-sm', 'inset-ring-thick', 'inset-lg', 'inset-sm', 'inset-md'],
         css`
           @theme {
             --inset-shadow-sm: inset 0 2px 4px rgb(0 0 0 / 0.05);
@@ -1764,10 +1929,10 @@ describe('Parsing theme values from CSS', () => {
           }
           @tailwind utilities;
         `,
-        ['inset-shadow-sm', 'inset-ring-thick', 'inset-lg', 'inset-sm', 'inset-md'],
       ),
     ).toMatchInlineSnapshot(`
-      "@layer properties {
+      "
+      @layer properties {
         @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
           *, :before, :after, ::backdrop {
             --tw-shadow: 0 0 #0000;
@@ -1878,13 +2043,22 @@ describe('Parsing theme values from CSS', () => {
         syntax: "*";
         inherits: false;
         initial-value: 0 0 #0000;
-      }"
+      }
+      "
     `)
   })
 
   test('unsetting `--text-*` does not unset `--text-color-*`, `--text-underline-offset-*`, `--text-indent-*`, `--text-decoration-thickness-*` or `--text-decoration-color-*`', async () => {
     expect(
-      await compileCss(
+      await run(
+        [
+          'text-potato',
+          'underline-offset-potato',
+          'indent-potato',
+          'decoration-potato',
+          'decoration-salad',
+          'text-lg',
+        ],
         css`
           @theme {
             --text-color-potato: brown;
@@ -1900,17 +2074,10 @@ describe('Parsing theme values from CSS', () => {
           }
           @tailwind utilities;
         `,
-        [
-          'text-potato',
-          'underline-offset-potato',
-          'indent-potato',
-          'decoration-potato',
-          'decoration-salad',
-          'text-lg',
-        ],
       ),
     ).toMatchInlineSnapshot(`
-      ":root, :host {
+      "
+      :root, :host {
         --text-color-potato: brown;
         --text-underline-offset-potato: 4px;
         --text-indent-potato: 6px;
@@ -1943,13 +2110,15 @@ describe('Parsing theme values from CSS', () => {
 
       .underline-offset-potato {
         text-underline-offset: var(--text-underline-offset-potato);
-      }"
+      }
+      "
     `)
   })
 
   test('unused keyframes are removed when an animation is unset', async () => {
     expect(
-      await compileCss(
+      await run(
+        ['animate-foo', 'animate-foobar'],
         css`
           @theme {
             --animate-foo: foo 1s infinite;
@@ -1972,10 +2141,10 @@ describe('Parsing theme values from CSS', () => {
           }
           @tailwind utilities;
         `,
-        ['animate-foo', 'animate-foobar'],
       ),
     ).toMatchInlineSnapshot(`
-      ":root, :host {
+      "
+      :root, :host {
         --animate-foobar: foobar 1s infinite;
       }
 
@@ -1987,13 +2156,15 @@ describe('Parsing theme values from CSS', () => {
         to {
           opacity: 0;
         }
-      }"
+      }
+      "
     `)
   })
 
   test('keyframes are generated when used in an animation', async () => {
     expect(
-      await compileCss(
+      await run(
+        ['animate-foo'],
         css`
           @theme {
             --animate-foo: used 1s infinite;
@@ -2014,10 +2185,10 @@ describe('Parsing theme values from CSS', () => {
 
           @tailwind utilities;
         `,
-        ['animate-foo'],
       ),
     ).toMatchInlineSnapshot(`
-      ":root, :host {
+      "
+      :root, :host {
         --animate-foo: used 1s infinite;
       }
 
@@ -2029,13 +2200,15 @@ describe('Parsing theme values from CSS', () => {
         to {
           opacity: 1;
         }
-      }"
+      }
+      "
     `)
   })
 
   test('keyframes are generated when used in an animation within a prefixed setup', async () => {
     expect(
-      await compileCss(
+      await run(
+        ['tw:animate-foo'],
         css`
           @theme prefix(tw) {
             --animate-foo: used 1s infinite;
@@ -2056,10 +2229,10 @@ describe('Parsing theme values from CSS', () => {
 
           @tailwind utilities;
         `,
-        ['tw:animate-foo'],
       ),
     ).toMatchInlineSnapshot(`
-      ":root, :host {
+      "
+      :root, :host {
         --tw-animate-foo: used 1s infinite;
       }
 
@@ -2071,39 +2244,40 @@ describe('Parsing theme values from CSS', () => {
         to {
           opacity: 1;
         }
-      }"
+      }
+      "
     `)
   })
 
   test('custom properties are generated when used from a CSS var with a prefixed setup', async () => {
     expect(
-      await compileCss(
-        css`
-          @theme prefix(tw) {
-            --color-tomato: #e10c04;
-          }
-          @tailwind utilities;
-          .red {
-            color: var(--tw-color-tomato);
-          }
-        `,
-        [],
-      ),
+      await compileCss(css`
+        @theme prefix(tw) {
+          --color-tomato: #e10c04;
+        }
+        @tailwind utilities;
+        .red {
+          color: var(--tw-color-tomato);
+        }
+      `),
     ).toMatchInlineSnapshot(`
-      ":root, :host {
+      "
+      :root, :host {
         --tw-color-tomato: #e10c04;
       }
 
       .red {
         color: var(--tw-color-tomato);
-      }"
+      }
+      "
     `)
   })
 
   // https://github.com/tailwindlabs/tailwindcss/issues/16374
   test('custom properties in keyframes preserved', async () => {
     expect(
-      await compileCss(
+      await run(
+        ['animate-foo'],
         css`
           @theme {
             --animate-foo: used 1s infinite;
@@ -2118,10 +2292,10 @@ describe('Parsing theme values from CSS', () => {
 
           @tailwind utilities;
         `,
-        ['animate-foo'],
       ),
     ).toMatchInlineSnapshot(`
-      ":root, :host {
+      "
+      :root, :host {
         --animate-foo: used 1s infinite;
       }
 
@@ -2134,13 +2308,15 @@ describe('Parsing theme values from CSS', () => {
           --other: var(--angle);
           --angle: 360deg;
         }
-      }"
+      }
+      "
     `)
   })
 
   test('keyframes are generated when used in an animation using `@theme inline`', async () => {
     expect(
-      await compileCss(
+      await run(
+        ['animate-foo'],
         css`
           @theme inline {
             --animate-foo: used 1s infinite;
@@ -2161,10 +2337,10 @@ describe('Parsing theme values from CSS', () => {
 
           @tailwind utilities;
         `,
-        ['animate-foo'],
       ),
     ).toMatchInlineSnapshot(`
-      ".animate-foo {
+      "
+      .animate-foo {
         animation: 1s infinite used;
       }
 
@@ -2172,13 +2348,15 @@ describe('Parsing theme values from CSS', () => {
         to {
           opacity: 1;
         }
-      }"
+      }
+      "
     `)
   })
 
   test('keyframes are generated when used in an animation using `@theme static`', async () => {
     expect(
-      await compileCss(
+      await run(
+        ['animate-foo'],
         css`
           @theme static {
             --animate-foo: used 1s infinite;
@@ -2199,10 +2377,10 @@ describe('Parsing theme values from CSS', () => {
 
           @tailwind utilities;
         `,
-        ['animate-foo'],
       ),
     ).toMatchInlineSnapshot(`
-      ":root, :host {
+      "
+      :root, :host {
         --animate-foo: used 1s infinite;
         --animate-bar: unused-but-kept 1s infinite;
       }
@@ -2221,38 +2399,37 @@ describe('Parsing theme values from CSS', () => {
         to {
           opacity: 0;
         }
-      }"
+      }
+      "
     `)
   })
 
   test('keyframes are generated when used in user CSS', async () => {
     expect(
-      await compileCss(
-        css`
-          @theme {
-            @keyframes used {
-              to {
-                opacity: 1;
-              }
-            }
-
-            @keyframes unused {
-              to {
-                opacity: 0;
-              }
+      await compileCss(css`
+        @theme {
+          @keyframes used {
+            to {
+              opacity: 1;
             }
           }
 
-          .foo {
-            animation: used 1s infinite;
+          @keyframes unused {
+            to {
+              opacity: 0;
+            }
           }
+        }
 
-          @tailwind utilities;
-        `,
-        [],
-      ),
+        .foo {
+          animation: used 1s infinite;
+        }
+
+        @tailwind utilities;
+      `),
     ).toMatchInlineSnapshot(`
-      ".foo {
+      "
+      .foo {
         animation: 1s infinite used;
       }
 
@@ -2260,14 +2437,16 @@ describe('Parsing theme values from CSS', () => {
         to {
           opacity: 1;
         }
-      }"
+      }
+      "
     `)
   })
 
   // https://github.com/tailwindlabs/tailwindcss/issues/17332
   test('extracts keyframe names followed by comma', async () => {
     expect(
-      await compileCss(
+      await run(
+        ['animate-test'],
         css`
           @theme {
             --animate-test: 500ms both fade-in, 1000ms linear 500ms spin infinite;
@@ -2284,10 +2463,10 @@ describe('Parsing theme values from CSS', () => {
 
           @tailwind utilities;
         `,
-        ['animate-test'],
       ),
     ).toMatchInlineSnapshot(`
-      ":root, :host {
+      "
+      :root, :host {
         --animate-test: .5s both fade-in, 1s linear .5s spin infinite;
       }
 
@@ -2303,38 +2482,37 @@ describe('Parsing theme values from CSS', () => {
         to {
           opacity: 1;
         }
-      }"
+      }
+      "
     `)
   })
 
   test('keyframes outside of `@theme are always preserved', async () => {
     expect(
-      await compileCss(
-        css`
-          @theme {
-            @keyframes used {
-              to {
-                opacity: 1;
-              }
-            }
-          }
-
-          @keyframes unused {
+      await compileCss(css`
+        @theme {
+          @keyframes used {
             to {
-              opacity: 0;
+              opacity: 1;
             }
           }
+        }
 
-          .foo {
-            animation: used 1s infinite;
+        @keyframes unused {
+          to {
+            opacity: 0;
           }
+        }
 
-          @tailwind utilities;
-        `,
-        [],
-      ),
+        .foo {
+          animation: used 1s infinite;
+        }
+
+        @tailwind utilities;
+      `),
     ).toMatchInlineSnapshot(`
-      "@keyframes unused {
+      "
+      @keyframes unused {
         to {
           opacity: 0;
         }
@@ -2348,13 +2526,15 @@ describe('Parsing theme values from CSS', () => {
         to {
           opacity: 1;
         }
-      }"
+      }
+      "
     `)
   })
 
   test('theme values added as reference are not included in the output as variables but emit fallback values', async () => {
     expect(
-      await compileCss(
+      await run(
+        ['bg-tomato', 'bg-potato'],
         css`
           @theme {
             --color-tomato: #e10c04;
@@ -2364,10 +2544,10 @@ describe('Parsing theme values from CSS', () => {
           }
           @tailwind utilities;
         `,
-        ['bg-tomato', 'bg-potato'],
       ),
     ).toMatchInlineSnapshot(`
-      ":root, :host {
+      "
+      :root, :host {
         --color-tomato: #e10c04;
       }
 
@@ -2377,13 +2557,15 @@ describe('Parsing theme values from CSS', () => {
 
       .bg-tomato {
         background-color: var(--color-tomato);
-      }"
+      }
+      "
     `)
   })
 
   test('`@keyframes` added in `@theme reference` should not be emitted', async () => {
     return expect(
-      await compileCss(
+      await run(
+        ['animate-foo'],
         css`
           @theme reference {
             --animate-foo: foo 1s infinite;
@@ -2400,10 +2582,10 @@ describe('Parsing theme values from CSS', () => {
           }
           @tailwind utilities;
         `,
-        ['animate-foo'],
       ),
     ).toMatchInlineSnapshot(`
-      ".animate-foo {
+      "
+      .animate-foo {
         animation: var(--animate-foo, foo 1s infinite);
       }
 
@@ -2415,13 +2597,15 @@ describe('Parsing theme values from CSS', () => {
         50% {
           color: #00f;
         }
-      }"
+      }
+      "
     `)
   })
 
   test('`@keyframes` added in `@theme reference` should not be emitted, even if another `@theme` block exists', async () => {
     return expect(
-      await compileCss(
+      await run(
+        ['bg-pink', 'animate-foo'],
         css`
           @theme reference {
             --animate-foo: foo 1s infinite;
@@ -2443,10 +2627,10 @@ describe('Parsing theme values from CSS', () => {
 
           @tailwind utilities;
         `,
-        ['bg-pink', 'animate-foo'],
       ),
     ).toMatchInlineSnapshot(`
-      ":root, :host {
+      "
+      :root, :host {
         --color-pink: pink;
       }
 
@@ -2466,13 +2650,15 @@ describe('Parsing theme values from CSS', () => {
         50% {
           color: #00f;
         }
-      }"
+      }
+      "
     `)
   })
 
   test('theme values added as reference that override existing theme value suppress the output of the original theme value as a variable', async () => {
     expect(
-      await compileCss(
+      await run(
+        ['bg-potato'],
         css`
           @theme {
             --color-potato: #ac855b;
@@ -2482,18 +2668,20 @@ describe('Parsing theme values from CSS', () => {
           }
           @tailwind utilities;
         `,
-        ['bg-potato'],
       ),
     ).toMatchInlineSnapshot(`
-      ".bg-potato {
+      "
+      .bg-potato {
         background-color: var(--color-potato, #c794aa);
-      }"
+      }
+      "
     `)
   })
 
   test('overriding a reference theme value with a non-reference theme value includes it in the output as a variable', async () => {
     expect(
-      await compileCss(
+      await run(
+        ['bg-potato'],
         css`
           @theme reference {
             --color-potato: #ac855b;
@@ -2503,22 +2691,24 @@ describe('Parsing theme values from CSS', () => {
           }
           @tailwind utilities;
         `,
-        ['bg-potato'],
       ),
     ).toMatchInlineSnapshot(`
-      ":root, :host {
+      "
+      :root, :host {
         --color-potato: #c794aa;
       }
 
       .bg-potato {
         background-color: var(--color-potato);
-      }"
+      }
+      "
     `)
   })
 
   test('wrapping `@theme` with `@media reference` behaves like `@theme reference` to support `@import` statements', async () => {
     expect(
-      await compileCss(
+      await run(
+        ['bg-tomato', 'bg-potato', 'bg-avocado'],
         css`
           @theme {
             --color-tomato: #e10c04;
@@ -2533,10 +2723,10 @@ describe('Parsing theme values from CSS', () => {
           }
           @tailwind utilities;
         `,
-        ['bg-tomato', 'bg-potato', 'bg-avocado'],
       ),
     ).toMatchInlineSnapshot(`
-      ":root, :host {
+      "
+      :root, :host {
         --color-tomato: #e10c04;
       }
 
@@ -2550,17 +2740,18 @@ describe('Parsing theme values from CSS', () => {
 
       .bg-tomato {
         background-color: var(--color-tomato);
-      }"
+      }
+      "
     `)
   })
 
   test('`@import "tailwindcss" theme(static)` will always generate theme values, regardless of whether they were used or not', async () => {
     expect(
-      await compileCss(
+      await run(
+        ['bg-tomato'],
         css`
           @import 'tailwindcss' theme(static);
         `,
-        ['bg-tomato'],
         {
           async loadStylesheet() {
             return {
@@ -2580,7 +2771,8 @@ describe('Parsing theme values from CSS', () => {
         },
       ),
     ).toMatchInlineSnapshot(`
-      ":root, :host {
+      "
+      :root, :host {
         --color-tomato: #e10c04;
         --color-potato: #ac855b;
         --color-primary: var(--primary);
@@ -2588,13 +2780,15 @@ describe('Parsing theme values from CSS', () => {
 
       .bg-tomato {
         background-color: var(--color-tomato);
-      }"
+      }
+      "
     `)
   })
 
   test('`@media theme(reference)` can only contain `@theme` rules', () => {
     return expect(
-      compileCss(
+      run(
+        ['bg-tomato', 'bg-potato', 'bg-avocado'],
         css`
           @media theme(reference) {
             .not-a-theme-rule {
@@ -2603,7 +2797,6 @@ describe('Parsing theme values from CSS', () => {
           }
           @tailwind utilities;
         `,
-        ['bg-tomato', 'bg-potato', 'bg-avocado'],
       ),
     ).rejects.toThrowErrorMatchingInlineSnapshot(
       `
@@ -2615,7 +2808,8 @@ describe('Parsing theme values from CSS', () => {
 
   test('theme values added as `inline` are not wrapped in `var(…)` when used as utility values', async () => {
     expect(
-      await compileCss(
+      await run(
+        ['bg-tomato', 'bg-potato', 'bg-primary'],
         css`
           @theme inline {
             --color-tomato: #e10c04;
@@ -2625,10 +2819,10 @@ describe('Parsing theme values from CSS', () => {
 
           @tailwind utilities;
         `,
-        ['bg-tomato', 'bg-potato', 'bg-primary'],
       ),
     ).toMatchInlineSnapshot(`
-      ".bg-potato {
+      "
+      .bg-potato {
         background-color: #ac855b;
       }
 
@@ -2638,17 +2832,18 @@ describe('Parsing theme values from CSS', () => {
 
       .bg-tomato {
         background-color: #e10c04;
-      }"
+      }
+      "
     `)
   })
 
   test('`@import "tailwindcss" theme(inline)` theme values added as `inline` are not wrapped in `var(…)` when used as utility values', async () => {
     expect(
-      await compileCss(
+      await run(
+        ['bg-tomato'],
         css`
           @import 'tailwindcss' theme(inline);
         `,
-        ['bg-tomato'],
         {
           async loadStylesheet() {
             return {
@@ -2668,15 +2863,18 @@ describe('Parsing theme values from CSS', () => {
         },
       ),
     ).toMatchInlineSnapshot(`
-      ".bg-tomato {
+      "
+      .bg-tomato {
         background-color: #e10c04;
-      }"
+      }
+      "
     `)
   })
 
   test('theme values added as `static` will always be generated, regardless of whether they were used or not', async () => {
     expect(
-      await compileCss(
+      await run(
+        ['bg-tomato'],
         css`
           @theme static {
             --color-tomato: #e10c04;
@@ -2686,10 +2884,10 @@ describe('Parsing theme values from CSS', () => {
 
           @tailwind utilities;
         `,
-        ['bg-tomato'],
       ),
     ).toMatchInlineSnapshot(`
-      ":root, :host {
+      "
+      :root, :host {
         --color-tomato: #e10c04;
         --color-potato: #ac855b;
         --color-primary: var(--primary);
@@ -2697,13 +2895,15 @@ describe('Parsing theme values from CSS', () => {
 
       .bg-tomato {
         background-color: var(--color-tomato);
-      }"
+      }
+      "
     `)
   })
 
   test('when no theme values are emitted, empty layers can be removed', async () => {
     expect(
-      await compileCss(
+      await run(
+        ['underline'],
         css`
           @layer theme1 {
             @layer theme2 {
@@ -2716,18 +2916,20 @@ describe('Parsing theme values from CSS', () => {
 
           @tailwind utilities;
         `,
-        ['underline'],
       ),
     ).toMatchInlineSnapshot(`
-      ".underline {
+      "
+      .underline {
         text-decoration-line: underline;
-      }"
+      }
+      "
     `)
   })
 
   test('wrapping `@theme` with `@media theme(inline)` behaves like `@theme inline` to support `@import` statements', async () => {
     expect(
-      await compileCss(
+      await run(
+        ['bg-tomato', 'bg-potato', 'bg-primary'],
         css`
           @media theme(inline) {
             @theme {
@@ -2739,10 +2941,10 @@ describe('Parsing theme values from CSS', () => {
 
           @tailwind utilities;
         `,
-        ['bg-tomato', 'bg-potato', 'bg-primary'],
       ),
     ).toMatchInlineSnapshot(`
-      ".bg-potato {
+      "
+      .bg-potato {
         background-color: #ac855b;
       }
 
@@ -2752,13 +2954,15 @@ describe('Parsing theme values from CSS', () => {
 
       .bg-tomato {
         background-color: #e10c04;
-      }"
+      }
+      "
     `)
   })
 
   test('`inline` and `reference` can be used together', async () => {
     expect(
-      await compileCss(
+      await run(
+        ['bg-tomato', 'bg-potato', 'bg-primary'],
         css`
           @theme reference inline {
             --color-tomato: #e10c04;
@@ -2768,10 +2972,10 @@ describe('Parsing theme values from CSS', () => {
 
           @tailwind utilities;
         `,
-        ['bg-tomato', 'bg-potato', 'bg-primary'],
       ),
     ).toMatchInlineSnapshot(`
-      ".bg-potato {
+      "
+      .bg-potato {
         background-color: #ac855b;
       }
 
@@ -2781,13 +2985,15 @@ describe('Parsing theme values from CSS', () => {
 
       .bg-tomato {
         background-color: #e10c04;
-      }"
+      }
+      "
     `)
   })
 
   test('`inline` and `reference` can be used together in `media(…)`', async () => {
     expect(
-      await compileCss(
+      await run(
+        ['bg-tomato', 'bg-potato', 'bg-primary'],
         css`
           @media theme(reference inline) {
             @theme {
@@ -2799,10 +3005,10 @@ describe('Parsing theme values from CSS', () => {
 
           @tailwind utilities;
         `,
-        ['bg-tomato', 'bg-potato', 'bg-primary'],
       ),
     ).toMatchInlineSnapshot(`
-      ".bg-potato {
+      "
+      .bg-potato {
         background-color: #ac855b;
       }
 
@@ -2812,13 +3018,15 @@ describe('Parsing theme values from CSS', () => {
 
       .bg-tomato {
         background-color: #e10c04;
-      }"
+      }
+      "
     `)
   })
 
   test('`default` theme values can be overridden by regular theme values`', async () => {
     expect(
-      await compileCss(
+      await run(
+        ['bg-potato'],
         css`
           @theme {
             --color-potato: #ac855b;
@@ -2829,22 +3037,24 @@ describe('Parsing theme values from CSS', () => {
 
           @tailwind utilities;
         `,
-        ['bg-potato'],
       ),
     ).toMatchInlineSnapshot(`
-      ":root, :host {
+      "
+      :root, :host {
         --color-potato: #ac855b;
       }
 
       .bg-potato {
         background-color: var(--color-potato);
-      }"
+      }
+      "
     `)
   })
 
   test('`default` and `inline` can be used together', async () => {
     expect(
-      await compileCss(
+      await run(
+        ['bg-potato'],
         css`
           @theme default inline {
             --color-potato: #efb46b;
@@ -2852,18 +3062,20 @@ describe('Parsing theme values from CSS', () => {
 
           @tailwind utilities;
         `,
-        ['bg-potato'],
       ),
     ).toMatchInlineSnapshot(`
-      ".bg-potato {
+      "
+      .bg-potato {
         background-color: #efb46b;
-      }"
+      }
+      "
     `)
   })
 
   test('`default` and `reference` can be used together', async () => {
     expect(
-      await compileCss(
+      await run(
+        ['bg-potato'],
         css`
           @theme default reference {
             --color-potato: #efb46b;
@@ -2871,18 +3083,20 @@ describe('Parsing theme values from CSS', () => {
 
           @tailwind utilities;
         `,
-        ['bg-potato'],
       ),
     ).toMatchInlineSnapshot(`
-      ".bg-potato {
+      "
+      .bg-potato {
         background-color: var(--color-potato, #efb46b);
-      }"
+      }
+      "
     `)
   })
 
   test('`default`, `inline`, and `reference` can be used together', async () => {
     expect(
-      await compileCss(
+      await run(
+        ['bg-potato'],
         css`
           @theme default reference inline {
             --color-potato: #efb46b;
@@ -2890,18 +3104,20 @@ describe('Parsing theme values from CSS', () => {
 
           @tailwind utilities;
         `,
-        ['bg-potato'],
       ),
     ).toMatchInlineSnapshot(`
-      ".bg-potato {
+      "
+      .bg-potato {
         background-color: #efb46b;
-      }"
+      }
+      "
     `)
   })
 
   test('`default` can be used in `media(…)`', async () => {
     expect(
-      await compileCss(
+      await run(
+        ['bg-potato', 'bg-tomato'],
         css`
           @media theme() {
             @theme {
@@ -2917,10 +3133,10 @@ describe('Parsing theme values from CSS', () => {
 
           @tailwind utilities;
         `,
-        ['bg-potato', 'bg-tomato'],
       ),
     ).toMatchInlineSnapshot(`
-      ":root, :host {
+      "
+      :root, :host {
         --color-potato: #ac855b;
         --color-tomato: tomato;
       }
@@ -2931,44 +3147,47 @@ describe('Parsing theme values from CSS', () => {
 
       .bg-tomato {
         background-color: var(--color-tomato);
-      }"
+      }
+      "
     `)
   })
 
   test('`default` theme values can be overridden by plugin theme values', async () => {
-    let { build } = await compile(
-      css`
-        @theme default {
-          --color-red: red;
-        }
-        @theme {
-          --color-orange: orange;
-        }
-        @plugin "my-plugin";
-        @tailwind utilities;
-      `,
-      {
-        loadModule: async () => {
-          return {
-            path: '',
-            base: '/root',
-            module: plugin(({}) => {}, {
-              theme: {
-                extend: {
-                  colors: {
-                    red: 'tomato',
-                    orange: '#f28500',
+    expect(
+      await run(
+        ['text-red', 'text-orange'],
+        css`
+          @theme default {
+            --color-red: red;
+          }
+          @theme {
+            --color-orange: orange;
+          }
+          @plugin "my-plugin";
+          @tailwind utilities;
+        `,
+        {
+          loadModule: async () => {
+            return {
+              path: '',
+              base: '/root',
+              module: plugin(({}) => {}, {
+                theme: {
+                  extend: {
+                    colors: {
+                      red: 'tomato',
+                      orange: '#f28500',
+                    },
                   },
                 },
-              },
-            }),
-          }
+              }),
+            }
+          },
         },
-      },
-    )
-
-    expect(optimizeCss(build(['text-red', 'text-orange'])).trim()).toMatchInlineSnapshot(`
-      ":root, :host {
+      ),
+    ).toMatchInlineSnapshot(`
+      "
+      :root, :host {
         --color-orange: orange;
       }
 
@@ -2978,44 +3197,47 @@ describe('Parsing theme values from CSS', () => {
 
       .text-red {
         color: tomato;
-      }"
+      }
+      "
     `)
   })
 
   test('`default` theme values can be overridden by config theme values', async () => {
-    let { build } = await compile(
-      css`
-        @theme default {
-          --color-red: red;
-        }
-        @theme {
-          --color-orange: orange;
-        }
-        @config "./my-config.js";
-        @tailwind utilities;
-      `,
-      {
-        loadModule: async () => {
-          return {
-            path: '',
-            base: '/root',
-            module: {
-              theme: {
-                extend: {
-                  colors: {
-                    red: 'tomato',
-                    orange: '#f28500',
+    expect(
+      await run(
+        ['text-red', 'text-orange'],
+        css`
+          @theme default {
+            --color-red: red;
+          }
+          @theme {
+            --color-orange: orange;
+          }
+          @config "./my-config.js";
+          @tailwind utilities;
+        `,
+        {
+          loadModule: async () => {
+            return {
+              path: '',
+              base: '/root',
+              module: {
+                theme: {
+                  extend: {
+                    colors: {
+                      red: 'tomato',
+                      orange: '#f28500',
+                    },
                   },
                 },
               },
-            },
-          }
+            }
+          },
         },
-      },
-    )
-
-    expect(optimizeCss(build(['text-red', 'text-orange'])).trim()).toMatchInlineSnapshot(`
-      ":root, :host {
+      ),
+    ).toMatchInlineSnapshot(`
+      "
+      :root, :host {
         --color-orange: orange;
       }
 
@@ -3025,40 +3247,42 @@ describe('Parsing theme values from CSS', () => {
 
       .text-red {
         color: tomato;
-      }"
+      }
+      "
     `)
   })
 
   test('only emits theme variables that are used outside of being defined by another variable', async () => {
-    let { build } = await compile(
-      css`
-        @theme {
-          --var-a: var(--var-b);
-          --var-b: var(--var-c);
-          --var-c: var(--var-d);
-          --var-d: red;
+    expect(
+      await run(
+        ['get-var-b', 'get-var-two'],
+        css`
+          @theme {
+            --var-a: var(--var-b);
+            --var-b: var(--var-c);
+            --var-c: var(--var-d);
+            --var-d: red;
 
-          --var-four: green;
-          --var-three: var(--var-four);
-          --var-two: var(--var-three);
-          --var-one: var(--var-two);
+            --var-four: green;
+            --var-three: var(--var-four);
+            --var-two: var(--var-three);
+            --var-one: var(--var-two);
 
-          --var-eins: var(--var-zwei);
-          --var-zwei: var(--var-drei);
-          --var-drei: var(--var-vier);
-          --var-vier: blue;
-        }
+            --var-eins: var(--var-zwei);
+            --var-zwei: var(--var-drei);
+            --var-drei: var(--var-vier);
+            --var-vier: blue;
+          }
 
-        @utility get-var-* {
-          color: --value(--var-\*);
-        }
-        @tailwind utilities;
-      `,
-      {},
-    )
-
-    expect(optimizeCss(build(['get-var-b', 'get-var-two'])).trim()).toMatchInlineSnapshot(`
-      ":root, :host {
+          @utility get-var-* {
+            color: --value(--var-\*);
+          }
+          @tailwind utilities;
+        `,
+      ),
+    ).toMatchInlineSnapshot(`
+      "
+      :root, :host {
         --var-b: var(--var-c);
         --var-c: var(--var-d);
         --var-d: red;
@@ -3073,7 +3297,8 @@ describe('Parsing theme values from CSS', () => {
 
       .get-var-two {
         color: var(--var-two);
-      }"
+      }
+      "
     `)
   })
 })
@@ -3141,40 +3366,41 @@ describe('plugins', () => {
   test('@plugin can accept options', async () => {
     expect.hasAssertions()
 
-    let { build } = await compile(
-      css`
-        @tailwind utilities;
-        @plugin "my-plugin" {
-          color: red;
-        }
-      `,
-      {
-        loadModule: async () => ({
-          path: '',
-          base: '/root',
-          module: plugin.withOptions((options) => {
-            expect(options).toEqual({
-              color: 'red',
-            })
-
-            return ({ addUtilities }) => {
-              addUtilities({
-                '.text-primary': {
-                  color: options.color,
-                },
+    expect(
+      await run(
+        ['text-primary'],
+        css`
+          @tailwind utilities;
+          @plugin "my-plugin" {
+            color: red;
+          }
+        `,
+        {
+          loadModule: async () => ({
+            path: '',
+            base: '/root',
+            module: plugin.withOptions((options) => {
+              expect(options).toEqual({
+                color: 'red',
               })
-            }
+
+              return ({ addUtilities }) => {
+                addUtilities({
+                  '.text-primary': {
+                    color: options.color,
+                  },
+                })
+              }
+            }),
           }),
-        }),
-      },
-    )
-
-    let compiled = build(['text-primary'])
-
-    expect(optimizeCss(compiled).trim()).toMatchInlineSnapshot(`
-      ".text-primary {
+        },
+      ),
+    ).toMatchInlineSnapshot(`
+      "
+      .text-primary {
         color: red;
-      }"
+      }
+      "
     `)
   })
 
@@ -3353,142 +3579,148 @@ describe('plugins', () => {
   })
 
   test('addVariant with string selector', async () => {
-    let { build } = await compile(
-      css`
-        @plugin "my-plugin";
-        @layer utilities {
-          @tailwind utilities;
-        }
-      `,
-      {
-        loadModule: async () => ({
-          path: '',
-          base: '/root',
-          module: ({ addVariant }: PluginAPI) => {
-            addVariant('hocus', '&:hover, &:focus')
-          },
-        }),
-      },
-    )
-    let compiled = build(['hocus:underline', 'group-hocus:flex'])
-
-    expect(optimizeCss(compiled).trim()).toMatchInlineSnapshot(`
-      "@layer utilities {
-        .group-hocus\\:flex:is(:is(:where(.group):hover, :where(.group):focus) *) {
+    expect(
+      await run(
+        ['hocus:underline', 'group-hocus:flex'],
+        css`
+          @plugin "my-plugin";
+          @layer utilities {
+            @tailwind utilities;
+          }
+        `,
+        {
+          loadModule: async () => ({
+            path: '',
+            base: '/root',
+            module: ({ addVariant }: PluginAPI) => {
+              addVariant('hocus', '&:hover, &:focus')
+            },
+          }),
+        },
+      ),
+    ).toMatchInlineSnapshot(`
+      "
+      @layer utilities {
+        :is(:is(:where(.group):hover, :where(.group):focus) .group-hocus\\:flex) {
           display: flex;
         }
 
         .hocus\\:underline:hover, .hocus\\:underline:focus {
           text-decoration-line: underline;
         }
-      }"
+      }
+      "
     `)
   })
 
   test('addVariant with array of selectors', async () => {
-    let { build } = await compile(
-      css`
-        @plugin "my-plugin";
-        @layer utilities {
-          @tailwind utilities;
-        }
-      `,
-      {
-        loadModule: async () => ({
-          path: '',
-          base: '/root',
-          module: ({ addVariant }: PluginAPI) => {
-            addVariant('hocus', ['&:hover', '&:focus'])
-          },
-        }),
-      },
-    )
-
-    let compiled = build(['hocus:underline', 'group-hocus:flex'])
-
-    expect(optimizeCss(compiled).trim()).toMatchInlineSnapshot(`
-      "@layer utilities {
-        .group-hocus\\:flex:is(:where(.group):hover *), .group-hocus\\:flex:is(:where(.group):focus *) {
+    expect(
+      await run(
+        ['hocus:underline', 'group-hocus:flex'],
+        css`
+          @plugin "my-plugin";
+          @layer utilities {
+            @tailwind utilities;
+          }
+        `,
+        {
+          loadModule: async () => ({
+            path: '',
+            base: '/root',
+            module: ({ addVariant }: PluginAPI) => {
+              addVariant('hocus', ['&:hover', '&:focus'])
+            },
+          }),
+        },
+      ),
+    ).toMatchInlineSnapshot(`
+      "
+      @layer utilities {
+        :is(:where(.group):hover .group-hocus\\:flex), :is(:where(.group):focus .group-hocus\\:flex) {
           display: flex;
         }
 
         .hocus\\:underline:hover, .hocus\\:underline:focus {
           text-decoration-line: underline;
         }
-      }"
+      }
+      "
     `)
   })
 
   test('addVariant with object syntax and @slot', async () => {
-    let { build } = await compile(
-      css`
-        @plugin "my-plugin";
-        @layer utilities {
-          @tailwind utilities;
-        }
-      `,
-      {
-        loadModule: async () => ({
-          path: '',
-          base: '/root',
-          module: ({ addVariant }: PluginAPI) => {
-            addVariant('hocus', {
-              '&:hover': '@slot',
-              '&:focus': '@slot',
-            })
-          },
-        }),
-      },
-    )
-    let compiled = build(['hocus:underline', 'group-hocus:flex'])
-
-    expect(optimizeCss(compiled).trim()).toMatchInlineSnapshot(`
-      "@layer utilities {
-        .group-hocus\\:flex:is(:where(.group):hover *), .group-hocus\\:flex:is(:where(.group):focus *) {
+    expect(
+      await run(
+        ['hocus:underline', 'group-hocus:flex'],
+        css`
+          @plugin "my-plugin";
+          @layer utilities {
+            @tailwind utilities;
+          }
+        `,
+        {
+          loadModule: async () => ({
+            path: '',
+            base: '/root',
+            module: ({ addVariant }: PluginAPI) => {
+              addVariant('hocus', {
+                '&:hover': '@slot',
+                '&:focus': '@slot',
+              })
+            },
+          }),
+        },
+      ),
+    ).toMatchInlineSnapshot(`
+      "
+      @layer utilities {
+        :is(:where(.group):hover .group-hocus\\:flex), :is(:where(.group):focus .group-hocus\\:flex) {
           display: flex;
         }
 
         .hocus\\:underline:hover, .hocus\\:underline:focus {
           text-decoration-line: underline;
         }
-      }"
+      }
+      "
     `)
   })
 
   test('addVariant with object syntax, media, nesting and multiple @slot', async () => {
-    let { build } = await compile(
-      css`
-        @plugin "my-plugin";
-        @layer utilities {
-          @tailwind utilities;
-        }
-      `,
-      {
-        loadModule: async () => ({
-          path: '',
-          base: '/root',
-          module: ({ addVariant }: PluginAPI) => {
-            addVariant('hocus', {
-              '@media (hover: hover)': {
-                '&:hover': '@slot',
-              },
-              '&:focus': '@slot',
-            })
-          },
-        }),
-      },
-    )
-    let compiled = build(['hocus:underline', 'group-hocus:flex'])
-
-    expect(optimizeCss(compiled).trim()).toMatchInlineSnapshot(`
-      "@layer utilities {
+    expect(
+      await run(
+        ['hocus:underline', 'group-hocus:flex'],
+        css`
+          @plugin "my-plugin";
+          @layer utilities {
+            @tailwind utilities;
+          }
+        `,
+        {
+          loadModule: async () => ({
+            path: '',
+            base: '/root',
+            module: ({ addVariant }: PluginAPI) => {
+              addVariant('hocus', {
+                '@media (hover: hover)': {
+                  '&:hover': '@slot',
+                },
+                '&:focus': '@slot',
+              })
+            },
+          }),
+        },
+      ),
+    ).toMatchInlineSnapshot(`
+      "
+      @layer utilities {
         @media (hover: hover) {
-          .group-hocus\\:flex:is(:where(.group):hover *) {
+          :is(:where(.group):hover .group-hocus\\:flex) {
             display: flex;
           }
         }
 
-        .group-hocus\\:flex:is(:where(.group):focus *) {
+        :is(:where(.group):focus .group-hocus\\:flex) {
           display: flex;
         }
 
@@ -3501,38 +3733,40 @@ describe('plugins', () => {
         .hocus\\:underline:focus {
           text-decoration-line: underline;
         }
-      }"
+      }
+      "
     `)
   })
 
   test('@slot is preserved when used as a custom property value', async () => {
-    let { build } = await compile(
-      css`
-        @plugin "my-plugin";
-        @layer utilities {
-          @tailwind utilities;
-        }
-      `,
-      {
-        loadModule: async () => ({
-          path: '',
-          base: '/root',
-          module: ({ addVariant }: PluginAPI) => {
-            addVariant('hocus', {
-              '&': {
-                '--custom-property': '@slot',
-                '&:hover': '@slot',
-                '&:focus': '@slot',
-              },
-            })
-          },
-        }),
-      },
-    )
-    let compiled = build(['hocus:underline'])
-
-    expect(optimizeCss(compiled).trim()).toMatchInlineSnapshot(`
-      "@layer utilities {
+    expect(
+      await run(
+        ['hocus:underline'],
+        css`
+          @plugin "my-plugin";
+          @layer utilities {
+            @tailwind utilities;
+          }
+        `,
+        {
+          loadModule: async () => ({
+            path: '',
+            base: '/root',
+            module: ({ addVariant }: PluginAPI) => {
+              addVariant('hocus', {
+                '&': {
+                  '--custom-property': '@slot',
+                  '&:hover': '@slot',
+                  '&:focus': '@slot',
+                },
+              })
+            },
+          }),
+        },
+      ),
+    ).toMatchInlineSnapshot(`
+      "
+      @layer utilities {
         .hocus\\:underline {
           --custom-property: @slot;
         }
@@ -3540,36 +3774,36 @@ describe('plugins', () => {
         .hocus\\:underline:hover, .hocus\\:underline:focus {
           text-decoration-line: underline;
         }
-      }"
+      }
+      "
     `)
   })
 
   test('built-in variants can be overridden while keeping their order', async () => {
-    let { build } = await compile(
-      css`
-        @plugin "my-plugin";
-        @layer utilities {
-          @tailwind utilities;
-        }
-      `,
-      {
-        loadModule: async () => ({
-          path: '',
-          base: '/root',
-          module: ({ addVariant }: PluginAPI) => {
-            addVariant('dark', '&:is([data-theme=dark] *)')
-          },
-        }),
-      },
-    )
-    let compiled = build(
-      // Make sure the order does not change by including the variants
-      // immediately before and after `dark`
-      ['rtl:flex', 'dark:flex', 'starting:flex'],
-    )
-
-    expect(optimizeCss(compiled).trim()).toMatchInlineSnapshot(`
-      "@layer utilities {
+    expect(
+      await run(
+        // Make sure the order does not change by including the variants
+        // immediately before and after `dark`
+        ['rtl:flex', 'dark:flex', 'starting:flex'],
+        css`
+          @plugin "my-plugin";
+          @layer utilities {
+            @tailwind utilities;
+          }
+        `,
+        {
+          loadModule: async () => ({
+            path: '',
+            base: '/root',
+            module: ({ addVariant }: PluginAPI) => {
+              addVariant('dark', '&:is([data-theme=dark] *)')
+            },
+          }),
+        },
+      ),
+    ).toMatchInlineSnapshot(`
+      "
+      @layer utilities {
         .rtl\\:flex:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *), .dark\\:flex:is([data-theme="dark"] *) {
           display: flex;
         }
@@ -3579,7 +3813,8 @@ describe('plugins', () => {
             display: flex;
           }
         }
-      }"
+      }
+      "
     `)
   })
 })
@@ -3628,16 +3863,14 @@ describe('@source', () => {
 
   describe('@source inline(…)', () => {
     test('always includes the candidate', async () => {
-      let { build } = await compile(
-        css`
+      expect(
+        await compileCss(css`
           @source inline("underline");
           @tailwind utilities;
-        `,
-        { base: '/root' },
-      )
-
-      expect(build([])).toMatchInlineSnapshot(`
-        ".underline {
+        `),
+      ).toMatchInlineSnapshot(`
+        "
+        .underline {
           text-decoration-line: underline;
         }
         "
@@ -3645,8 +3878,8 @@ describe('@source', () => {
     })
 
     test('applies brace expansion', async () => {
-      let { build } = await compile(
-        css`
+      expect(
+        await compileCss(css`
           @theme {
             --color-red-50: oklch(0.971 0.013 17.38);
             --color-red-100: oklch(0.936 0.032 17.717);
@@ -3662,54 +3895,63 @@ describe('@source', () => {
           }
           @source inline("bg-red-{50,{100..900..100},950}");
           @tailwind utilities;
-        `,
-        { base: '/root' },
-      )
-
-      expect(build([])).toMatchInlineSnapshot(`
-        ":root, :host {
-          --color-red-50: oklch(0.971 0.013 17.38);
-          --color-red-100: oklch(0.936 0.032 17.717);
-          --color-red-200: oklch(0.885 0.062 18.334);
-          --color-red-300: oklch(0.808 0.114 19.571);
-          --color-red-400: oklch(0.704 0.191 22.216);
-          --color-red-500: oklch(0.637 0.237 25.331);
-          --color-red-600: oklch(0.577 0.245 27.325);
-          --color-red-700: oklch(0.505 0.213 27.518);
-          --color-red-800: oklch(0.444 0.177 26.899);
-          --color-red-900: oklch(0.396 0.141 25.723);
-          --color-red-950: oklch(0.258 0.092 26.042);
+        `),
+      ).toMatchInlineSnapshot(`
+        "
+        :root, :host {
+          --color-red-50: oklch(97.1% .013 17.38);
+          --color-red-100: oklch(93.6% .032 17.717);
+          --color-red-200: oklch(88.5% .062 18.334);
+          --color-red-300: oklch(80.8% .114 19.571);
+          --color-red-400: oklch(70.4% .191 22.216);
+          --color-red-500: oklch(63.7% .237 25.331);
+          --color-red-600: oklch(57.7% .245 27.325);
+          --color-red-700: oklch(50.5% .213 27.518);
+          --color-red-800: oklch(44.4% .177 26.899);
+          --color-red-900: oklch(39.6% .141 25.723);
+          --color-red-950: oklch(25.8% .092 26.042);
         }
+
         .bg-red-50 {
           background-color: var(--color-red-50);
         }
+
         .bg-red-100 {
           background-color: var(--color-red-100);
         }
+
         .bg-red-200 {
           background-color: var(--color-red-200);
         }
+
         .bg-red-300 {
           background-color: var(--color-red-300);
         }
+
         .bg-red-400 {
           background-color: var(--color-red-400);
         }
+
         .bg-red-500 {
           background-color: var(--color-red-500);
         }
+
         .bg-red-600 {
           background-color: var(--color-red-600);
         }
+
         .bg-red-700 {
           background-color: var(--color-red-700);
         }
+
         .bg-red-800 {
           background-color: var(--color-red-800);
         }
+
         .bg-red-900 {
           background-color: var(--color-red-900);
         }
+
         .bg-red-950 {
           background-color: var(--color-red-950);
         }
@@ -3718,29 +3960,30 @@ describe('@source', () => {
     })
 
     test('adds multiple inline sources separated by spaces', async () => {
-      let { build } = await compile(
-        css`
+      expect(
+        await compileCss(css`
           @theme {
             --color-red-100: oklch(0.936 0.032 17.717);
             --color-red-200: oklch(0.885 0.062 18.334);
           }
           @source inline("block bg-red-{100..200..100}");
           @tailwind utilities;
-        `,
-        { base: '/root' },
-      )
-
-      expect(build([])).toMatchInlineSnapshot(`
-        ":root, :host {
-          --color-red-100: oklch(0.936 0.032 17.717);
-          --color-red-200: oklch(0.885 0.062 18.334);
+        `),
+      ).toMatchInlineSnapshot(`
+        "
+        :root, :host {
+          --color-red-100: oklch(93.6% .032 17.717);
+          --color-red-200: oklch(88.5% .062 18.334);
         }
+
         .block {
           display: block;
         }
+
         .bg-red-100 {
           background-color: var(--color-red-100);
         }
+
         .bg-red-200 {
           background-color: var(--color-red-200);
         }
@@ -3749,73 +3992,68 @@ describe('@source', () => {
     })
 
     test('ignores invalid inline candidates', async () => {
-      let { build } = await compile(
-        css`
+      expect(
+        await compileCss(css`
           @source inline("my-cucumber");
           @tailwind utilities;
-        `,
-        { base: '/root' },
-      )
-
-      expect(build([])).toMatchInlineSnapshot(`""`)
+        `),
+      ).toEqual('')
     })
 
     test('can be negated', async () => {
-      let { build } = await compile(
-        css`
-          @theme {
-            --breakpoint-sm: 40rem;
-            --breakpoint-md: 48rem;
-            --breakpoint-lg: 64rem;
-            --breakpoint-xl: 80rem;
-            --breakpoint-2xl: 96rem;
-          }
-          @source not inline("container");
-          @tailwind utilities;
-        `,
-        { base: '/root' },
-      )
-
-      expect(build(['container'])).toMatchInlineSnapshot(`""`)
+      expect(
+        await run(
+          ['container'],
+          css`
+            @theme {
+              --breakpoint-sm: 40rem;
+              --breakpoint-md: 48rem;
+              --breakpoint-lg: 64rem;
+              --breakpoint-xl: 80rem;
+              --breakpoint-2xl: 96rem;
+            }
+            @source not inline("container");
+            @tailwind utilities;
+          `,
+        ),
+      ).toEqual('')
     })
 
     test('applies brace expansion to negated sources', async () => {
-      let { build } = await compile(
-        css`
-          @theme {
-            --color-red-50: oklch(0.971 0.013 17.38);
-            --color-red-100: oklch(0.936 0.032 17.717);
-            --color-red-200: oklch(0.885 0.062 18.334);
-            --color-red-300: oklch(0.808 0.114 19.571);
-            --color-red-400: oklch(0.704 0.191 22.216);
-            --color-red-500: oklch(0.637 0.237 25.331);
-            --color-red-600: oklch(0.577 0.245 27.325);
-            --color-red-700: oklch(0.505 0.213 27.518);
-            --color-red-800: oklch(0.444 0.177 26.899);
-            --color-red-900: oklch(0.396 0.141 25.723);
-            --color-red-950: oklch(0.258 0.092 26.042);
-          }
-          @source not inline("bg-red-{50,{100..900..100},950}");
-          @tailwind utilities;
-        `,
-        { base: '/root' },
-      )
-
-      expect(build(['bg-red-500', 'bg-red-700'])).toMatchInlineSnapshot(`""`)
+      expect(
+        await run(
+          ['bg-red-500', 'bg-red-700'],
+          css`
+            @theme {
+              --color-red-50: oklch(0.971 0.013 17.38);
+              --color-red-100: oklch(0.936 0.032 17.717);
+              --color-red-200: oklch(0.885 0.062 18.334);
+              --color-red-300: oklch(0.808 0.114 19.571);
+              --color-red-400: oklch(0.704 0.191 22.216);
+              --color-red-500: oklch(0.637 0.237 25.331);
+              --color-red-600: oklch(0.577 0.245 27.325);
+              --color-red-700: oklch(0.505 0.213 27.518);
+              --color-red-800: oklch(0.444 0.177 26.899);
+              --color-red-900: oklch(0.396 0.141 25.723);
+              --color-red-950: oklch(0.258 0.092 26.042);
+            }
+            @source not inline("bg-red-{50,{100..900..100},950}");
+            @tailwind utilities;
+          `,
+        ),
+      ).toEqual('')
     })
 
     test('works with whitespace around the argument', async () => {
-      let { build } = await compile(
-        css`
+      expect(
+        await compileCss(css`
           /* prettier-ignore */
           @source inline( "underline" );
           @tailwind utilities;
-        `,
-        { base: '/root' },
-      )
-
-      expect(build([])).toMatchInlineSnapshot(`
-        ".underline {
+        `),
+      ).toMatchInlineSnapshot(`
+        "
+        .underline {
           text-decoration-line: underline;
         }
         "
@@ -3823,19 +4061,17 @@ describe('@source', () => {
     })
 
     test('works with newlines around the argument', async () => {
-      let { build } = await compile(
-        css`
+      expect(
+        await compileCss(css`
           /* prettier-ignore */
           @source inline(
             "underline"
           );
           @tailwind utilities;
-        `,
-        { base: '/root' },
-      )
-
-      expect(build([])).toMatchInlineSnapshot(`
-        ".underline {
+        `),
+      ).toMatchInlineSnapshot(`
+        "
+        .underline {
           text-decoration-line: underline;
         }
         "
@@ -3879,10 +4115,10 @@ describe('@custom-variant', () => {
     [`@custom-variant foo_ (&);`],
     [`@custom-variant foo__ (&);`],
   ])('@custom-variant must have a valid name', (input) => {
-    return expect(compileCss(input)).rejects.toThrowError()
+    return expect(compileCss(input)).rejects.toThrow()
   })
 
-  test('@custom-variant must not container special characters', () => {
+  test('@custom-variant must not contain special characters', () => {
     return expect(
       compileCss(css`
         .foo {
@@ -3949,40 +4185,47 @@ describe('@custom-variant', () => {
 
   describe('body-less syntax', () => {
     test('selector variant', async () => {
-      let { build } = await compile(css`
-        @custom-variant hocus (&:hover, &:focus);
+      expect(
+        await run(
+          ['hocus:underline', 'group-hocus:flex'],
+          css`
+            @custom-variant hocus (&:hover, &:focus);
 
+            @layer utilities {
+              @tailwind utilities;
+            }
+          `,
+        ),
+      ).toMatchInlineSnapshot(`
+        "
         @layer utilities {
-          @tailwind utilities;
-        }
-      `)
-      let compiled = build(['hocus:underline', 'group-hocus:flex'])
-
-      expect(optimizeCss(compiled).trim()).toMatchInlineSnapshot(`
-        "@layer utilities {
-          .group-hocus\\:flex:is(:is(:where(.group):hover, :where(.group):focus) *) {
+          :is(:is(:where(.group):hover, :where(.group):focus) .group-hocus\\:flex) {
             display: flex;
           }
 
           .hocus\\:underline:hover, .hocus\\:underline:focus {
             text-decoration-line: underline;
           }
-        }"
+        }
+        "
       `)
     })
 
     test('at-rule variant', async () => {
-      let { build } = await compile(css`
-        @custom-variant any-hover (@media (any-hover: hover));
+      expect(
+        await run(
+          ['any-hover:hover:underline'],
+          css`
+            @custom-variant any-hover (@media (any-hover: hover));
 
+            @layer utilities {
+              @tailwind utilities;
+            }
+          `,
+        ),
+      ).toMatchInlineSnapshot(`
+        "
         @layer utilities {
-          @tailwind utilities;
-        }
-      `)
-      let compiled = build(['any-hover:hover:underline'])
-
-      expect(optimizeCss(compiled).trim()).toMatchInlineSnapshot(`
-        "@layer utilities {
           @media (any-hover: hover) {
             @media (hover: hover) {
               .any-hover\\:hover\\:underline:hover {
@@ -3990,22 +4233,26 @@ describe('@custom-variant', () => {
               }
             }
           }
-        }"
+        }
+        "
       `)
     })
 
     test('style-rules and at-rules', async () => {
-      let { build } = await compile(css`
-        @custom-variant cant-hover (&:not(:hover), &:not(:active), @media not (any-hover: hover), @media not (pointer: fine));
+      expect(
+        await run(
+          ['cant-hover:focus:underline'],
+          css`
+            @custom-variant cant-hover (&:not(:hover), &:not(:active), @media not (any-hover: hover), @media not (pointer: fine));
 
+            @layer utilities {
+              @tailwind utilities;
+            }
+          `,
+        ),
+      ).toMatchInlineSnapshot(`
+        "
         @layer utilities {
-          @tailwind utilities;
-        }
-      `)
-      let compiled = build(['cant-hover:focus:underline'])
-
-      expect(optimizeCss(compiled).trim()).toMatchInlineSnapshot(`
-        "@layer utilities {
           :is(.cant-hover\\:focus\\:underline:not(:hover), .cant-hover\\:focus\\:underline:not(:active)):focus {
             text-decoration-line: underline;
           }
@@ -4021,105 +4268,121 @@ describe('@custom-variant', () => {
               text-decoration-line: underline;
             }
           }
-        }"
+        }
+        "
       `)
     })
   })
 
   describe('body with @slot syntax', () => {
     test('selector with @slot', async () => {
-      let { build } = await compile(css`
-        @custom-variant selected {
-          &[data-selected] {
-            @slot;
-          }
-        }
+      expect(
+        await run(
+          ['selected:underline', 'group-selected:underline'],
+          css`
+            @custom-variant selected {
+              &[data-selected] {
+                @slot;
+              }
+            }
 
+            @layer utilities {
+              @tailwind utilities;
+            }
+          `,
+        ),
+      ).toMatchInlineSnapshot(`
+        "
         @layer utilities {
-          @tailwind utilities;
-        }
-      `)
-      let compiled = build(['selected:underline', 'group-selected:underline'])
-
-      expect(optimizeCss(compiled).trim()).toMatchInlineSnapshot(`
-        "@layer utilities {
-          .group-selected\\:underline:is(:where(.group)[data-selected] *), .selected\\:underline[data-selected] {
+          :is(:where(.group)[data-selected] .group-selected\\:underline), .selected\\:underline[data-selected] {
             text-decoration-line: underline;
           }
-        }"
+        }
+        "
       `)
     })
 
     test('grouped selectors with @slot', async () => {
-      let { build } = await compile(css`
-        @custom-variant hocus {
-          &:hover,
-          &:focus {
-            @slot;
-          }
-        }
+      expect(
+        await run(
+          ['hocus:underline', 'group-hocus:underline'],
+          css`
+            @custom-variant hocus {
+              &:hover,
+              &:focus {
+                @slot;
+              }
+            }
 
+            @layer utilities {
+              @tailwind utilities;
+            }
+          `,
+        ),
+      ).toMatchInlineSnapshot(`
+        "
         @layer utilities {
-          @tailwind utilities;
-        }
-      `)
-      let compiled = build(['hocus:underline', 'group-hocus:underline'])
-
-      expect(optimizeCss(compiled).trim()).toMatchInlineSnapshot(`
-        "@layer utilities {
-          .group-hocus\\:underline:is(:is(:where(.group):hover, :where(.group):focus) *), .hocus\\:underline:hover, .hocus\\:underline:focus {
+          :is(:is(:where(.group):hover, :where(.group):focus) .group-hocus\\:underline), .hocus\\:underline:hover, .hocus\\:underline:focus {
             text-decoration-line: underline;
           }
-        }"
+        }
+        "
       `)
     })
 
     test('multiple selectors with @slot', async () => {
-      let { build } = await compile(css`
-        @custom-variant hocus {
-          &:hover {
-            @slot;
-          }
+      expect(
+        await run(
+          ['hocus:underline', 'group-hocus:underline'],
+          css`
+            @custom-variant hocus {
+              &:hover {
+                @slot;
+              }
 
-          &:focus {
-            @slot;
-          }
-        }
+              &:focus {
+                @slot;
+              }
+            }
 
+            @layer utilities {
+              @tailwind utilities;
+            }
+          `,
+        ),
+      ).toMatchInlineSnapshot(`
+        "
         @layer utilities {
-          @tailwind utilities;
-        }
-      `)
-      let compiled = build(['hocus:underline', 'group-hocus:underline'])
-
-      expect(optimizeCss(compiled).trim()).toMatchInlineSnapshot(`
-        "@layer utilities {
-          .group-hocus\\:underline:is(:where(.group):hover *), .group-hocus\\:underline:is(:where(.group):focus *), .hocus\\:underline:hover, .hocus\\:underline:focus {
+          :is(:where(.group):hover .group-hocus\\:underline), :is(:where(.group):focus .group-hocus\\:underline), .hocus\\:underline:hover, .hocus\\:underline:focus {
             text-decoration-line: underline;
           }
-        }"
+        }
+        "
       `)
     })
 
     test('nested selector with @slot', async () => {
-      let { build } = await compile(css`
-        @custom-variant custom-before {
-          & {
-            --has-before: 1;
-            &::before {
-              @slot;
+      expect(
+        await run(
+          ['custom-before:underline'],
+          css`
+            @custom-variant custom-before {
+              & {
+                --has-before: 1;
+                &::before {
+                  @slot;
+                }
+              }
             }
-          }
-        }
 
+            @layer utilities {
+              @tailwind utilities;
+            }
+          `,
+        ),
+      ).toMatchInlineSnapshot(`
+        "
         @layer utilities {
-          @tailwind utilities;
-        }
-      `)
-      let compiled = build(['custom-before:underline'])
-
-      expect(optimizeCss(compiled).trim()).toMatchInlineSnapshot(`
-        "@layer utilities {
           .custom-before\\:underline {
             --has-before: 1;
           }
@@ -4127,32 +4390,36 @@ describe('@custom-variant', () => {
           .custom-before\\:underline:before {
             text-decoration-line: underline;
           }
-        }"
+        }
+        "
       `)
     })
 
     test('grouped nested selectors with @slot', async () => {
-      let { build } = await compile(css`
-        @custom-variant custom-before {
-          & {
-            --has-before: 1;
-            &::before {
-              &:hover,
-              &:focus {
-                @slot;
+      expect(
+        await run(
+          ['custom-before:underline'],
+          css`
+            @custom-variant custom-before {
+              & {
+                --has-before: 1;
+                &::before {
+                  &:hover,
+                  &:focus {
+                    @slot;
+                  }
+                }
               }
             }
-          }
-        }
 
+            @layer utilities {
+              @tailwind utilities;
+            }
+          `,
+        ),
+      ).toMatchInlineSnapshot(`
+        "
         @layer utilities {
-          @tailwind utilities;
-        }
-      `)
-      let compiled = build(['custom-before:underline'])
-
-      expect(optimizeCss(compiled).trim()).toMatchInlineSnapshot(`
-        "@layer utilities {
           .custom-before\\:underline {
             --has-before: 1;
           }
@@ -4160,39 +4427,43 @@ describe('@custom-variant', () => {
           .custom-before\\:underline:before:hover, .custom-before\\:underline:before:focus {
             text-decoration-line: underline;
           }
-        }"
+        }
+        "
       `)
     })
 
     test('nested multiple selectors with @slot', async () => {
-      let { build } = await compile(css`
-        @custom-variant hocus {
-          &:hover {
-            @media (hover: hover) {
-              @slot;
+      expect(
+        await run(
+          ['hocus:underline', 'group-hocus:underline'],
+          css`
+            @custom-variant hocus {
+              &:hover {
+                @media (hover: hover) {
+                  @slot;
+                }
+              }
+
+              &:focus {
+                @slot;
+              }
             }
-          }
-
-          &:focus {
-            @slot;
-          }
-        }
 
+            @layer utilities {
+              @tailwind utilities;
+            }
+          `,
+        ),
+      ).toMatchInlineSnapshot(`
+        "
         @layer utilities {
-          @tailwind utilities;
-        }
-      `)
-      let compiled = build(['hocus:underline', 'group-hocus:underline'])
-
-      expect(optimizeCss(compiled).trim()).toMatchInlineSnapshot(`
-        "@layer utilities {
           @media (hover: hover) {
-            .group-hocus\\:underline:is(:where(.group):hover *) {
+            :is(:where(.group):hover .group-hocus\\:underline) {
               text-decoration-line: underline;
             }
           }
 
-          .group-hocus\\:underline:is(:where(.group):focus *) {
+          :is(:where(.group):focus .group-hocus\\:underline) {
             text-decoration-line: underline;
           }
 
@@ -4205,82 +4476,94 @@ describe('@custom-variant', () => {
           .hocus\\:underline:focus {
             text-decoration-line: underline;
           }
-        }"
+        }
+        "
       `)
     })
 
     test('selector nested under at-rule with @slot', async () => {
-      let { build } = await compile(css`
-        @custom-variant hocus {
-          @media (hover: hover) {
-            &:hover {
-              @slot;
+      expect(
+        await run(
+          ['hocus:underline', 'group-hocus:underline'],
+          css`
+            @custom-variant hocus {
+              @media (hover: hover) {
+                &:hover {
+                  @slot;
+                }
+              }
             }
-          }
-        }
 
+            @layer utilities {
+              @tailwind utilities;
+            }
+          `,
+        ),
+      ).toMatchInlineSnapshot(`
+        "
         @layer utilities {
-          @tailwind utilities;
-        }
-      `)
-      let compiled = build(['hocus:underline', 'group-hocus:underline'])
-
-      expect(optimizeCss(compiled).trim()).toMatchInlineSnapshot(`
-        "@layer utilities {
           @media (hover: hover) {
-            .group-hocus\\:underline:is(:where(.group):hover *), .hocus\\:underline:hover {
+            :is(:where(.group):hover .group-hocus\\:underline), .hocus\\:underline:hover {
               text-decoration-line: underline;
             }
           }
-        }"
+        }
+        "
       `)
     })
 
     test('at-rule with @slot', async () => {
-      let { build } = await compile(css`
-        @custom-variant any-hover {
-          @media (any-hover: hover) {
-            @slot;
-          }
-        }
+      expect(
+        await run(
+          ['any-hover:underline'],
+          css`
+            @custom-variant any-hover {
+              @media (any-hover: hover) {
+                @slot;
+              }
+            }
 
+            @layer utilities {
+              @tailwind utilities;
+            }
+          `,
+        ),
+      ).toMatchInlineSnapshot(`
+        "
         @layer utilities {
-          @tailwind utilities;
-        }
-      `)
-      let compiled = build(['any-hover:underline'])
-
-      expect(optimizeCss(compiled).trim()).toMatchInlineSnapshot(`
-        "@layer utilities {
           @media (any-hover: hover) {
             .any-hover\\:underline {
               text-decoration-line: underline;
             }
           }
-        }"
+        }
+        "
       `)
     })
 
     test('multiple at-rules with @slot', async () => {
-      let { build } = await compile(css`
-        @custom-variant desktop {
-          @media (any-hover: hover) {
-            @slot;
-          }
+      expect(
+        await run(
+          ['desktop:underline'],
+          css`
+            @custom-variant desktop {
+              @media (any-hover: hover) {
+                @slot;
+              }
 
-          @media (pointer: fine) {
-            @slot;
-          }
-        }
+              @media (pointer: fine) {
+                @slot;
+              }
+            }
 
+            @layer utilities {
+              @tailwind utilities;
+            }
+          `,
+        ),
+      ).toMatchInlineSnapshot(`
+        "
         @layer utilities {
-          @tailwind utilities;
-        }
-      `)
-      let compiled = build(['desktop:underline'])
-
-      expect(optimizeCss(compiled).trim()).toMatchInlineSnapshot(`
-        "@layer utilities {
           @media (any-hover: hover) {
             .desktop\\:underline {
               text-decoration-line: underline;
@@ -4292,32 +4575,36 @@ describe('@custom-variant', () => {
               text-decoration-line: underline;
             }
           }
-        }"
+        }
+        "
       `)
     })
 
     test('nested at-rules with @slot', async () => {
-      let { build } = await compile(css`
-        @custom-variant custom-variant {
-          @media (orientation: landscape) {
-            @media screen {
-              @slot;
+      expect(
+        await run(
+          ['custom-variant:underline'],
+          css`
+            @custom-variant custom-variant {
+              @media (orientation: landscape) {
+                @media screen {
+                  @slot;
+                }
+
+                @media print {
+                  display: none;
+                }
+              }
             }
 
-            @media print {
-              display: none;
+            @layer utilities {
+              @tailwind utilities;
             }
-          }
-        }
-
+          `,
+        ),
+      ).toMatchInlineSnapshot(`
+        "
         @layer utilities {
-          @tailwind utilities;
-        }
-      `)
-      let compiled = build(['custom-variant:underline'])
-
-      expect(optimizeCss(compiled).trim()).toMatchInlineSnapshot(`
-        "@layer utilities {
           @media (orientation: landscape) {
             @media screen {
               .custom-variant\\:underline {
@@ -4331,29 +4618,33 @@ describe('@custom-variant', () => {
               }
             }
           }
-        }"
+        }
+        "
       `)
     })
 
     test('at-rule and selector with @slot', async () => {
-      let { build } = await compile(css`
-        @custom-variant custom-dark {
-          @media (prefers-color-scheme: dark) {
-            @slot;
-          }
-          &:is(.dark *) {
-            @slot;
-          }
-        }
+      expect(
+        await run(
+          ['custom-dark:underline'],
+          css`
+            @custom-variant custom-dark {
+              @media (prefers-color-scheme: dark) {
+                @slot;
+              }
+              &:is(.dark *) {
+                @slot;
+              }
+            }
 
+            @layer utilities {
+              @tailwind utilities;
+            }
+          `,
+        ),
+      ).toMatchInlineSnapshot(`
+        "
         @layer utilities {
-          @tailwind utilities;
-        }
-      `)
-      let compiled = build(['custom-dark:underline'])
-
-      expect(optimizeCss(compiled).trim()).toMatchInlineSnapshot(`
-        "@layer utilities {
           @media (prefers-color-scheme: dark) {
             .custom-dark\\:underline {
               text-decoration-line: underline;
@@ -4363,27 +4654,341 @@ describe('@custom-variant', () => {
           .custom-dark\\:underline:is(.dark *) {
             text-decoration-line: underline;
           }
-        }"
+        }
+        "
+      `)
+    })
+  })
+
+  describe('@scope', () => {
+    test('arbitrary variant', async () => {
+      expect(await run(['[@scope_(.from)_to_(.to)]:underline'])).toMatchInlineSnapshot(`
+        "
+        @scope (.from) to (.to) {
+          .\\[\\@scope_\\(\\.from\\)_to_\\(\\.to\\)\\]\\:underline {
+            text-decoration-line: underline;
+          }
+        }
+        "
+      `)
+    })
+
+    test('shorthand syntax', async () => {
+      expect(
+        await run(
+          ['scoped:underline'],
+          css`
+            @custom-variant scoped (@scope (.from) to (.to));
+
+            @layer utilities {
+              @tailwind utilities;
+            }
+          `,
+        ),
+      ).toMatchInlineSnapshot(`
+        "
+        @layer utilities {
+          @scope (.from) to (.to) {
+            .scoped\\:underline {
+              text-decoration-line: underline;
+            }
+          }
+        }
+        "
+      `)
+    })
+
+    test('with @slot syntax', async () => {
+      expect(
+        await run(
+          ['scoped:underline'],
+          css`
+            @custom-variant scoped {
+              @scope (.from) to (.to) {
+                @slot;
+              }
+            }
+
+            @layer utilities {
+              @tailwind utilities;
+            }
+          `,
+        ),
+      ).toMatchInlineSnapshot(`
+        "
+        @layer utilities {
+          @scope (.from) to (.to) {
+            .scoped\\:underline {
+              text-decoration-line: underline;
+            }
+          }
+        }
+        "
+      `)
+    })
+
+    test('@scope in a custom variant combined with user-authored `@scope` rules', async () => {
+      expect(
+        await run(
+          ['blue:bg-blue-500'],
+          css`
+            @layer utilities {
+              @tailwind utilities;
+            }
+
+            @theme inline {
+              --color-blue-500: blue;
+            }
+
+            /* In a variant */
+            @custom-variant blue {
+              @scope ([data-theme='blue']) to ([data-theme]) {
+                @slot;
+              }
+            }
+
+            /* User CSS */
+            .parent {
+              /* @scope with bare declarations */
+              @scope (.from) to (.to) {
+                --x: 1;
+              }
+
+              .child {
+                .a {
+                  /* Variant with @scope used by @apply */
+                  @apply blue:[--x:2];
+                }
+                .b {
+                  /* Variant with @scope used by @apply combined with another variant */
+                  @apply blue:hover:[--x:3];
+                }
+                .c {
+                  /* Variant with @scoped used by @variant */
+                  @variant blue {
+                    --x: 4;
+                  }
+                }
+              }
+            }
+          `,
+        ),
+      ).toMatchInlineSnapshot(`
+        "
+        @layer utilities {
+          @scope ([data-theme="blue"]) to ([data-theme]) {
+            .blue\\:bg-blue-500 {
+              background-color: #00f;
+            }
+          }
+        }
+
+        @scope (.parent .from) to (.to) {
+          :where(:scope) {
+            --x: 1;
+          }
+        }
+
+        @scope ([data-theme="blue"]) to ([data-theme]) {
+          .parent .child .a {
+            --x: 2;
+          }
+
+          @media (hover: hover) {
+            .parent .child .b:hover {
+              --x: 3;
+            }
+          }
+
+          .parent .child .c {
+            --x: 4;
+          }
+        }
+        "
+      `)
+    })
+
+    test('`&` in the `@scope` prelude of a custom variant controls the composition', async () => {
+      expect(
+        await run(
+          ['in-blue:flex', 'blue-self:flex', 'scoped-panel:flex', 'in-blue:hover:flex'],
+          css`
+            /* Default: the utility applies to elements inside the scope */
+            @custom-variant in-blue {
+              @scope ([data-theme='blue']) to ([data-theme]) {
+                @slot;
+              }
+            }
+
+            /* Trailing &: the utility itself becomes the scoping root */
+            @custom-variant blue-self {
+              @scope ([data-theme='blue'] &) to ([data-theme]) {
+                @slot;
+              }
+            }
+
+            /* Leading &: the scoping roots are found inside the utility */
+            @custom-variant scoped-panel {
+              @scope (& .panel) {
+                @slot;
+              }
+            }
+
+            @layer utilities {
+              @tailwind utilities;
+            }
+          `,
+        ),
+      ).toMatchInlineSnapshot(`
+        "
+        @layer utilities {
+          @scope ([data-theme="blue"]) to ([data-theme]) {
+            .in-blue\\:flex {
+              display: flex;
+            }
+
+            @media (hover: hover) {
+              .in-blue\\:hover\\:flex:hover {
+                display: flex;
+              }
+            }
+          }
+
+          @scope ([data-theme="blue"] .blue-self\\:flex) to ([data-theme]) {
+            :where(:scope) {
+              display: flex;
+            }
+          }
+
+          @scope (.scoped-panel\\:flex .panel) {
+            :where(:scope) {
+              display: flex;
+            }
+          }
+        }
+        "
+      `)
+    })
+
+    test('user-authored `@scope` inside `@variant` keeps its native semantics', async () => {
+      // The `hocus` variant does not use `@scope` itself, so the inner `@scope`
+      // is user CSS and compiles with the native CSS nesting semantics: the
+      // parent selector moves into the prelude, and bare declarations apply to
+      // the scoping root.
+      expect(
+        await compileCss(css`
+          @custom-variant hocus (&:hover, &:focus);
+
+          .btn {
+            @variant hocus {
+              @scope (.from) to (.to) {
+                --x: 1;
+              }
+            }
+          }
+        `),
+      ).toMatchInlineSnapshot(`
+        "
+        @scope (:is(.btn:hover, .btn:focus) .from) to (.to) {
+          :where(:scope) {
+            --x: 1;
+          }
+        }
+        "
+      `)
+    })
+
+    test('user-authored `@scope` inside a `@variant` that uses `@scope` keeps its native semantics', async () => {
+      // The `blue` variant uses `@scope` itself, so its own `@scope` takes the
+      // variant composition. But the user CSS slotted into its body is marked
+      // as `user` content, so the inner `@scope` keeps its native CSS nesting
+      // semantics: the parent selector moves into the prelude, and bare
+      // declarations apply to the scoping root.
+      expect(
+        await compileCss(css`
+          @custom-variant blue {
+            @scope ([data-theme='blue']) to ([data-theme]) {
+              @slot;
+            }
+          }
+
+          .btn {
+            @variant blue {
+              @scope (.from) to (.to) {
+                --x: 1;
+              }
+            }
+          }
+        `),
+      ).toMatchInlineSnapshot(`
+        "
+        @scope ([data-theme="blue"]) to ([data-theme]) {
+          @scope (.btn .from) to (.to) {
+            :where(:scope) {
+              --x: 1;
+            }
+          }
+        }
+        "
+      `)
+    })
+
+    test('@scope nested in a rule, nested in another @scope, with @slot', async () => {
+      // Both `@scope` rules take the variant composition: neither prelude is
+      // made relative to a parent, the outer/inner nesting order is preserved,
+      // and the rule between them composes into the body with the utility's
+      // selector.
+      expect(
+        await run(
+          ['foo:underline'],
+          css`
+            @custom-variant foo {
+              @scope (.outer) to (.outer-limit) {
+                .middle {
+                  @scope (.inner) to (.inner-limit) {
+                    @slot;
+                  }
+                }
+              }
+            }
+
+            @layer utilities {
+              @tailwind utilities;
+            }
+          `,
+        ),
+      ).toMatchInlineSnapshot(`
+        "
+        @layer utilities {
+          @scope (.outer) to (.outer-limit) {
+            @scope (.inner) to (.inner-limit) {
+              .foo\\:underline .middle {
+                text-decoration-line: underline;
+              }
+            }
+          }
+        }
+        "
       `)
     })
   })
 
   test('built-in variants can be overridden while keeping their order', async () => {
     expect(
-      await compileCss(
+      await run(
+        // Make sure the order does not change by including the variants
+        // immediately before and after `dark`
+        ['rtl:flex', 'dark:flex', 'starting:flex'],
         css`
           @custom-variant dark (&:is([data-theme='dark'] *));
           @layer utilities {
             @tailwind utilities;
           }
         `,
-
-        // Make sure the order does not change by including the variants
-        // immediately before and after `dark`
-        ['rtl:flex', 'dark:flex', 'starting:flex'],
       ),
     ).toMatchInlineSnapshot(`
-      "@layer utilities {
+      "
+      @layer utilities {
         .rtl\\:flex:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *), .dark\\:flex:is([data-theme="dark"] *) {
           display: flex;
         }
@@ -4393,13 +4998,15 @@ describe('@custom-variant', () => {
             display: flex;
           }
         }
-      }"
+      }
+      "
     `)
   })
 
   test('at-rule-only variants cannot be used with compound variants', async () => {
     expect(
-      await compileCss(
+      await run(
+        ['foo:flex', 'group-foo:flex', 'peer-foo:flex', 'has-foo:flex', 'not-foo:flex'],
         css`
           @custom-variant foo (@media foo);
 
@@ -4407,11 +5014,10 @@ describe('@custom-variant', () => {
             @tailwind utilities;
           }
         `,
-
-        ['foo:flex', 'group-foo:flex', 'peer-foo:flex', 'has-foo:flex', 'not-foo:flex'],
       ),
     ).toMatchInlineSnapshot(`
-      "@layer utilities {
+      "
+      @layer utilities {
         @media not foo {
           .not-foo\\:flex {
             display: flex;
@@ -4423,13 +5029,15 @@ describe('@custom-variant', () => {
             display: flex;
           }
         }
-      }"
+      }
+      "
     `)
   })
 
   test('@custom-variant can reuse existing @variant in the definition', async () => {
     expect(
-      await compileCss(
+      await run(
+        ['hocus:flex'],
         css`
           @custom-variant hocus {
             @variant hover {
@@ -4441,20 +5049,22 @@ describe('@custom-variant', () => {
 
           @tailwind utilities;
         `,
-        ['hocus:flex'],
       ),
     ).toMatchInlineSnapshot(`
-      "@media (hover: hover) {
+      "
+      @media (hover: hover) {
         .hocus\\:flex:hover:focus {
           display: flex;
         }
-      }"
+      }
+      "
     `)
   })
 
   test('@custom-variant can reuse @custom-variant that is defined later', async () => {
     expect(
-      await compileCss(
+      await run(
+        ['hocus:flex'],
         css`
           @custom-variant hocus {
             @variant custom-hover {
@@ -4468,18 +5078,20 @@ describe('@custom-variant', () => {
 
           @tailwind utilities;
         `,
-        ['hocus:flex'],
       ),
     ).toMatchInlineSnapshot(`
-      ".hocus\\:flex:hover:focus {
+      "
+      .hocus\\:flex:hover:focus {
         display: flex;
-      }"
+      }
+      "
     `)
   })
 
   test('@custom-variant can reuse existing @variant that is overwritten later', async () => {
     expect(
-      await compileCss(
+      await run(
+        ['hocus:flex'],
         css`
           @custom-variant hocus {
             @variant hover {
@@ -4493,18 +5105,20 @@ describe('@custom-variant', () => {
 
           @tailwind utilities;
         `,
-        ['hocus:flex'],
       ),
     ).toMatchInlineSnapshot(`
-      ".hocus\\:flex:hover:focus {
+      "
+      .hocus\\:flex:hover:focus {
         display: flex;
-      }"
+      }
+      "
     `)
   })
 
   test('@custom-variant cannot use @variant that eventually results in a circular dependency', async () => {
     return expect(() =>
-      compileCss(
+      run(
+        ['foo:flex'],
         css`
           @custom-variant custom-variant {
             @variant foo {
@@ -4538,7 +5152,6 @@ describe('@custom-variant', () => {
 
           @tailwind utilities;
         `,
-        ['foo:flex'],
       ),
     ).rejects.toThrowErrorMatchingInlineSnapshot(`
       [Error: Circular dependency detected in custom variants:
@@ -4562,7 +5175,8 @@ describe('@custom-variant', () => {
   // https://github.com/tailwindlabs/tailwindcss/issues/19618
   test('@custom-variant can use a @variant that eventually uses another @custom-variant', async () => {
     expect(
-      await compileCss(
+      await run(
+        ['a:flex', 'b:flex', 'a:b:flex', 'b:a:flex'],
         css`
           @custom-variant a {
             @slot;
@@ -4576,18 +5190,20 @@ describe('@custom-variant', () => {
 
           @tailwind utilities;
         `,
-        ['a:flex', 'b:flex', 'a:b:flex', 'b:a:flex'],
       ),
     ).toMatchInlineSnapshot(`
-      ".a\\:flex, .b\\:flex, .a\\:b\\:flex, .b\\:a\\:flex {
+      "
+      .a\\:flex, .b\\:flex, .a\\:b\\:flex, .b\\:a\\:flex {
         display: flex;
-      }"
+      }
+      "
     `)
   })
 
   test('@custom-variant can use a @variant that eventually uses another @custom-variant (2)', async () => {
     expect(
-      await compileCss(
+      await run(
+        ['a:flex', 'b:flex', 'a:b:flex', 'b:a:flex'],
         css`
           @custom-variant a {
             .a {
@@ -4607,19 +5223,21 @@ describe('@custom-variant', () => {
 
           @tailwind utilities;
         `,
-        ['a:flex', 'b:flex', 'a:b:flex', 'b:a:flex'],
       ),
     ).toMatchInlineSnapshot(`
-      ".a\\:flex .a, .b\\:flex .b .a .a-inside-b, .a\\:b\\:flex .a .b .a .a-inside-b, .b\\:a\\:flex .b .a .a-inside-b .a {
+      "
+      .a\\:flex .a, .b\\:flex .b .a .a-inside-b, .a\\:b\\:flex .a .b .a .a-inside-b, .b\\:a\\:flex .b .a .a-inside-b .a {
         display: flex;
-      }"
+      }
+      "
     `)
   })
 
   // https://github.com/tailwindlabs/tailwindcss/issues/19618#issuecomment-3830775912
   test('@custom-variant can use existing @slot @variants', async () => {
     expect(
-      await compileCss(
+      await run(
+        ['hocus:flex'],
         css`
           @custom-variant hocus {
             @variant hover {
@@ -4641,18 +5259,20 @@ describe('@custom-variant', () => {
 
           @tailwind utilities;
         `,
-        ['hocus:flex'],
       ),
     ).toMatchInlineSnapshot(`
-      ".hocus\\:flex:hover:focus, .hocus\\:flex[data-hover]:focus {
+      "
+      .hocus\\:flex:hover:focus, .hocus\\:flex[data-hover]:focus {
         display: flex;
-      }"
+      }
+      "
     `)
   })
 
   test('@custom-variant setup that results in a circular dependency error can be solved', async () => {
     expect(
-      await compileCss(
+      await run(
+        ['baz:flex'],
         css`
           @custom-variant foo {
             @variant hover {
@@ -4683,12 +5303,13 @@ describe('@custom-variant', () => {
 
           @tailwind utilities;
         `,
-        ['baz:flex'],
       ),
     ).toMatchInlineSnapshot(`
-      "[data-broken-circle] .baz\\:flex:active {
+      "
+      [data-broken-circle] .baz\\:flex:active {
         display: flex;
-      }"
+      }
+      "
     `)
   })
 })
@@ -4730,27 +5351,31 @@ describe('@utility', () => {
   })
 
   test('@utility can handle escape sequences correctly', async () => {
-    let { build } = await compile(css`
+    expect(
+      await run(
+        ['push-1/2', 'push-50%'],
+        css`
+          @layer utilities {
+            @tailwind utilities;
+          }
+
+          @utility push-1\/2 {
+            right: 50%;
+          }
+
+          @utility push-50\% {
+            right: 50%;
+          }
+        `,
+      ),
+    ).toMatchInlineSnapshot(`
+      "
       @layer utilities {
-        @tailwind utilities;
-      }
-
-      @utility push-1\/2 {
-        right: 50%;
-      }
-
-      @utility push-50\% {
-        right: 50%;
-      }
-    `)
-    let compiled = build(['push-1/2', 'push-50%'])
-
-    expect(optimizeCss(compiled).trim()).toMatchInlineSnapshot(`
-      "@layer utilities {
         .push-1\\/2, .push-50\\% {
           right: 50%;
         }
-      }"
+      }
+      "
     `)
   })
 
@@ -4780,8 +5405,9 @@ describe('@utility', () => {
 
   // https://github.com/tailwindlabs/tailwindcss/issues/19505
   test('@utility name cannot contain multiple `/` characters', async () => {
-    await expect(
-      compileCss(
+    expect(
+      await run(
+        ['ui/button'],
         css`
           @utility ui/button {
             display: inline-flex;
@@ -4789,14 +5415,15 @@ describe('@utility', () => {
           }
           @tailwind utilities;
         `,
-        ['ui/button'],
       ),
-    ).resolves.toMatchInlineSnapshot(
+    ).toMatchInlineSnapshot(
       `
-      ".ui\\/button {
+      "
+      .ui\\/button {
         background: #00f;
         display: inline-flex;
-      }"
+      }
+      "
     `,
     )
 
@@ -4815,33 +5442,33 @@ describe('@utility', () => {
 })
 
 test('addBase', async () => {
-  let { build } = await compile(
-    css`
-      @plugin "my-plugin";
-      @layer base, utilities;
-      @layer utilities {
-        @tailwind utilities;
-      }
-    `,
-    {
-      loadModule: async () => ({
-        path: '',
-        base: '/root',
-        module: ({ addBase }: PluginAPI) => {
-          addBase({
-            body: {
-              'font-feature-settings': '"tnum"',
-            },
-          })
-        },
-      }),
-    },
-  )
-
-  let compiled = build(['underline'])
-
-  expect(optimizeCss(compiled).trim()).toMatchInlineSnapshot(`
-    "@layer base {
+  expect(
+    await run(
+      ['underline'],
+      css`
+        @plugin "my-plugin";
+        @layer base, utilities;
+        @layer utilities {
+          @tailwind utilities;
+        }
+      `,
+      {
+        loadModule: async () => ({
+          path: '',
+          base: '/root',
+          module: ({ addBase }: PluginAPI) => {
+            addBase({
+              body: {
+                'font-feature-settings': '"tnum"',
+              },
+            })
+          },
+        }),
+      },
+    ),
+  ).toMatchInlineSnapshot(`
+    "
+    @layer base {
       body {
         font-feature-settings: "tnum";
       }
@@ -4851,39 +5478,40 @@ test('addBase', async () => {
       .underline {
         text-decoration-line: underline;
       }
-    }"
+    }
+    "
   `)
 })
 
 test('JS APIs support @variant', async () => {
-  let { build } = await compile(
-    css`
-      @plugin "my-plugin";
-      @layer base, utilities;
-      @layer utilities {
-        @tailwind utilities;
-      }
-    `,
-    {
-      loadModule: async () => ({
-        path: '',
-        base: '/root',
-        module: ({ addBase, addUtilities, matchUtilities }: PluginAPI) => {
-          addBase({ body: { '@variant dark': { color: 'red' } } })
-          addUtilities({ '.foo': { '@variant dark': { '--foo': 'foo' } } })
-          matchUtilities(
-            { bar: (value) => ({ '@variant dark': { '--bar': value } }) },
-            { values: { one: '1' } },
-          )
-        },
-      }),
-    },
-  )
-
-  let compiled = build(['underline', 'foo', 'bar-one'])
-
-  expect(optimizeCss(compiled).trim()).toMatchInlineSnapshot(`
-    "@layer base {
+  expect(
+    await run(
+      ['underline', 'foo', 'bar-one'],
+      css`
+        @plugin "my-plugin";
+        @layer base, utilities;
+        @layer utilities {
+          @tailwind utilities;
+        }
+      `,
+      {
+        loadModule: async () => ({
+          path: '',
+          base: '/root',
+          module: ({ addBase, addUtilities, matchUtilities }: PluginAPI) => {
+            addBase({ body: { '@variant dark': { color: 'red' } } })
+            addUtilities({ '.foo': { '@variant dark': { '--foo': 'foo' } } })
+            matchUtilities(
+              { bar: (value) => ({ '@variant dark': { '--bar': value } }) },
+              { values: { one: '1' } },
+            )
+          },
+        }),
+      },
+    ),
+  ).toMatchInlineSnapshot(`
+    "
+    @layer base {
       @media (prefers-color-scheme: dark) {
         body {
           color: red;
@@ -4905,7 +5533,8 @@ test('JS APIs support @variant', async () => {
           --foo: foo;
         }
       }
-    }"
+    }
+    "
   `)
 })
 
@@ -4915,7 +5544,6 @@ it("should error when `layer(…)` is used, but it's not the first param", async
       css`
         @import './bar.css' supports(display: grid) layer(utilities);
       `,
-      [],
       {
         async loadStylesheet() {
           return {
@@ -4965,62 +5593,65 @@ describe('`@reference "…" imports`', () => {
       }
     }
 
-    await expect(
-      compileCss(
-        `
+    expect(
+      await compileCss(
+        css`
           @reference './foo/bar.css';
 
           .bar {
             @apply md:hocus:foo;
           }
         `,
-        [],
         { loadStylesheet },
       ),
-    ).resolves.toMatchInlineSnapshot(`
-      "@media (min-width: 768px) {
+    ).toMatchInlineSnapshot(`
+      "
+      @media (min-width: 768px) {
         .bar:hover, .bar:focus {
           color: red;
         }
-      }"
+      }
+      "
     `)
   })
 
   test('does not generate utilities', async () => {
-    let loadStylesheet = async (id: string, base = '/root/foo') => {
-      if (id === './foo/baz.css') {
-        return {
-          base,
-          path: '',
-          content: css`
-            @layer utilities {
-              @tailwind utilities;
-            }
-          `,
-        }
-      }
-      return {
-        path: '',
-        base: '/root/foo',
-        content: css`
-          @import './foo/baz.css';
+    expect(
+      await run(
+        ['text-underline', 'border'],
+        css`
+          @reference './foo/bar.css';
         `,
-      }
-    }
-
-    let { build } = await compile(
-      css`
-        @reference './foo/bar.css';
-      `,
-      { loadStylesheet },
-    )
-
-    expect(build(['text-underline', 'border']).trim()).toMatchInlineSnapshot(`""`)
+        {
+          loadStylesheet: async (id: string, base = '/root/foo') => {
+            if (id === './foo/baz.css') {
+              return {
+                base,
+                path: '',
+                content: css`
+                  @layer utilities {
+                    @tailwind utilities;
+                  }
+                `,
+              }
+            }
+            return {
+              path: '',
+              base: '/root/foo',
+              content: css`
+                @import './foo/baz.css';
+              `,
+            }
+          },
+        },
+      ),
+    ).toEqual('')
   })
 
   test('removes all @keyframes, even those contributed by JavasScript plugins', async () => {
-    await expect(
-      compileCss(
+    expect(
+      await run(
+        ['animate-spin', 'match-utility-initial', 'match-components-initial'],
         css`
           @media reference {
             @layer theme, base, components, utilities;
@@ -5051,7 +5682,6 @@ describe('`@reference "…" imports`', () => {
             @apply animate-spin;
           }
         `,
-        ['animate-spin', 'match-utility-initial', 'match-components-initial'],
         {
           loadModule: async () => ({
             path: '',
@@ -5092,8 +5722,9 @@ describe('`@reference "…" imports`', () => {
           }),
         },
       ),
-    ).resolves.toMatchInlineSnapshot(`
-      ".bar {
+    ).toMatchInlineSnapshot(`
+      "
+      .bar {
         animation: var(--animate-spin, spin 1s linear infinite);
       }
 
@@ -5101,7 +5732,8 @@ describe('`@reference "…" imports`', () => {
         to {
           transform: rotate(360deg);
         }
-      }"
+      }
+      "
     `)
   })
 
@@ -5155,19 +5787,19 @@ describe('`@reference "…" imports`', () => {
       throw new Error('unreachable')
     }
 
-    await expect(
-      compileCss(
-        `
+    expect(
+      await compileCss(
+        css`
           @reference './one.css';
           .bar {
             @apply text-red animate-wiggle;
           }
         `,
-        [],
         { loadStylesheet },
       ),
-    ).resolves.toMatchInlineSnapshot(`
-      ".bar {
+    ).toMatchInlineSnapshot(`
+      "
+      .bar {
         animation: var(--animate-wiggle, wiggle 1s ease-in-out infinite);
         color: var(--color-red, red);
       }
@@ -5180,7 +5812,8 @@ describe('`@reference "…" imports`', () => {
         50% {
           transform: rotate(3deg);
         }
-      }"
+      }
+      "
     `)
   })
 
@@ -5204,82 +5837,85 @@ describe('`@reference "…" imports`', () => {
       }
     }
 
-    await expect(
-      compileCss(
-        `
-            @import './foo/bar.css' reference;
-
-            .bar {
-              @apply md:hocus:foo;
-            }
-          `,
-        [],
-        { loadStylesheet },
-      ),
-    ).resolves.toMatchInlineSnapshot(`
-      "@media (min-width: 768px) {
-        .bar:hover, .bar:focus {
-          color: red;
-        }
-      }"
-    `)
-  })
-
-  test('removes styles when the import resolver was handled outside of Tailwind CSS', async () => {
-    await expect(
-      compileCss(
-        `
-          @media reference {
-            @layer theme {
-              @theme {
-                --breakpoint-md: 48rem;
-              }
-              .foo {
-                color: red;
-              }
-            }
-            @utility foo {
-              color: red;
-            }
-            @custom-variant hocus (&:hover, &:focus);
-          }
+    expect(
+      await compileCss(
+        css`
+          @import './foo/bar.css' reference;
 
           .bar {
             @apply md:hocus:foo;
           }
         `,
-        [],
+        { loadStylesheet },
       ),
-    ).resolves.toMatchInlineSnapshot(`
-      "@media (min-width: 48rem) {
+    ).toMatchInlineSnapshot(`
+      "
+      @media (min-width: 768px) {
         .bar:hover, .bar:focus {
           color: red;
         }
-      }"
+      }
+      "
+    `)
+  })
+
+  test('removes styles when the import resolver was handled outside of Tailwind CSS', async () => {
+    expect(
+      await compileCss(css`
+        @media reference {
+          @layer theme {
+            @theme {
+              --breakpoint-md: 48rem;
+            }
+            .foo {
+              color: red;
+            }
+          }
+          @utility foo {
+            color: red;
+          }
+          @custom-variant hocus (&:hover, &:focus);
+        }
+
+        .bar {
+          @apply md:hocus:foo;
+        }
+      `),
+    ).toMatchInlineSnapshot(`
+      "
+      @media (min-width: 48rem) {
+        .bar:hover, .bar:focus {
+          color: red;
+        }
+      }
+      "
     `)
   })
 })
 
 describe('@variant', () => {
   it('should convert legacy body-less `@variant` as a `@custom-variant`', async () => {
-    await expect(
-      compileCss(
+    expect(
+      await run(
+        ['hocus:underline'],
         css`
           @variant hocus (&:hover, &:focus);
           @tailwind utilities;
         `,
-        ['hocus:underline'],
       ),
-    ).resolves.toMatchInlineSnapshot(`
-      ".hocus\\:underline:hover, .hocus\\:underline:focus {
+    ).toMatchInlineSnapshot(`
+      "
+      .hocus\\:underline:hover, .hocus\\:underline:focus {
         text-decoration-line: underline;
-      }"
+      }
+      "
     `)
   })
 
   it('should convert legacy `@variant` with `@slot` as a `@custom-variant`', async () => {
-    await expect(
-      compileCss(
+    expect(
+      await run(
+        ['hocus:underline'],
         css`
           @variant hocus {
             &:hover {
@@ -5292,63 +5928,62 @@ describe('@variant', () => {
           }
           @tailwind utilities;
         `,
-        ['hocus:underline'],
       ),
-    ).resolves.toMatchInlineSnapshot(`
-      ".hocus\\:underline:hover, .hocus\\:underline:focus {
+    ).toMatchInlineSnapshot(`
+      "
+      .hocus\\:underline:hover, .hocus\\:underline:focus {
         text-decoration-line: underline;
-      }"
+      }
+      "
     `)
   })
 
   it('should be possible to use `@variant` in your CSS', async () => {
-    await expect(
-      compileCss(
-        css`
-          .btn {
-            background: black;
+    expect(
+      await compileCss(css`
+        .btn {
+          background: black;
 
-            @variant dark {
-              background: white;
-            }
+          @variant dark {
+            background: white;
           }
+        }
 
-          @variant hover {
-            @variant landscape {
-              .btn2 {
-                color: red;
-              }
-            }
-          }
-
-          @variant hover {
-            .foo {
+        @variant hover {
+          @variant landscape {
+            .btn2 {
               color: red;
             }
-            @variant landscape {
-              .bar {
-                color: blue;
-              }
-            }
-            .baz {
-              @variant portrait {
-                color: green;
-              }
-            }
           }
+        }
 
-          @media something {
-            @variant landscape {
-              @page {
-                color: red;
-              }
+        @variant hover {
+          .foo {
+            color: red;
+          }
+          @variant landscape {
+            .bar {
+              color: blue;
             }
           }
-        `,
-        [],
-      ),
-    ).resolves.toMatchInlineSnapshot(`
-      ".btn {
+          .baz {
+            @variant portrait {
+              color: green;
+            }
+          }
+        }
+
+        @media something {
+          @variant landscape {
+            @page {
+              color: red;
+            }
+          }
+        }
+      `),
+    ).toMatchInlineSnapshot(`
+      "
+      .btn {
         background: #000;
       }
 
@@ -5388,40 +6023,41 @@ describe('@variant', () => {
             color: red;
           }
         }
-      }"
+      }
+      "
     `)
   })
 
   it('should be possible to use `@variant` in your CSS with a `@custom-variant` that is defined later', async () => {
-    await expect(
-      compileCss(
-        css`
-          .btn {
-            background: black;
+    expect(
+      await compileCss(css`
+        .btn {
+          background: black;
 
-            @variant hocus {
-              background: white;
-            }
+          @variant hocus {
+            background: white;
           }
+        }
 
-          @custom-variant hocus (&:hover, &:focus);
-        `,
-        [],
-      ),
-    ).resolves.toMatchInlineSnapshot(`
-      ".btn {
+        @custom-variant hocus (&:hover, &:focus);
+      `),
+    ).toMatchInlineSnapshot(`
+      "
+      .btn {
         background: #000;
       }
 
       .btn:hover, .btn:focus {
         background: #fff;
-      }"
+      }
+      "
     `)
   })
 
   it('should be possible to use nested `@variant` rules', async () => {
-    await expect(
-      compileCss(
+    expect(
+      await run(
+        ['disabled:focus:underline'],
         css`
           .btn {
             background: black;
@@ -5434,10 +6070,10 @@ describe('@variant', () => {
           }
           @tailwind utilities;
         `,
-        ['disabled:focus:underline'],
       ),
-    ).resolves.toMatchInlineSnapshot(`
-      ".btn {
+    ).toMatchInlineSnapshot(`
+      "
+      .btn {
         background: #000;
       }
 
@@ -5447,32 +6083,427 @@ describe('@variant', () => {
 
       .disabled\\:focus\\:underline:disabled:focus {
         text-decoration-line: underline;
-      }"
+      }
+      "
     `)
   })
 
-  it('should be possible to use `@variant` with a funky looking variants', async () => {
-    await expect(
-      compileCss(
-        css`
-          @theme inline reference {
-            --container-md: 768px;
-          }
+  describe('comma-separated `@variant` rules', () => {
+    it('should be possible to use comma-separated `@variant` rules', async () => {
+      let input = css`
+        .btn {
+          background: black;
 
+          @variant hover, focus {
+            background: red;
+          }
+        }
+        @tailwind utilities;
+      `
+
+      expect(await compileCss(input)).toMatchInlineSnapshot(`
+        "
+        .btn {
+          background: #000;
+        }
+
+        @media (hover: hover) {
+          .btn:hover {
+            background: red;
+          }
+        }
+
+        .btn:focus {
+          background: red;
+        }
+        "
+      `)
+
+      expect(await compileCss(input)).toEqual(
+        await compileCss(css`
           .btn {
             background: black;
 
-            @variant @md {
-              @variant [&.foo] {
-                background: white;
+            @variant hover {
+              background: red;
+            }
+            @variant focus {
+              background: red;
+            }
+          }
+          @tailwind utilities;
+        `),
+      )
+    })
+
+    it.each(
+      Array.from(
+        cartesian(
+          ['', ' ', '  ', '\t', '\t\t'], // Before
+          ['', ' ', '  ', '\t', '\t\t'], // After
+        ),
+      ),
+    )(
+      "should handle optional whitespace ('%s', '%s') between `@variant` variants",
+      async (before, after) => {
+        expect(
+          await compileCss(css`
+            .btn {
+              background: black;
+
+              @variant hover${before},${after}focus {
+                background: red;
+              }
+            }
+            @tailwind utilities;
+          `),
+        ).toMatchInlineSnapshot(`
+          "
+          .btn {
+            background: #000;
+          }
+
+          @media (hover: hover) {
+            .btn:hover {
+              background: red;
+            }
+          }
+
+          .btn:focus {
+            background: red;
+          }
+          "
+        `)
+      },
+    )
+
+    it('should handle variants containing a `,` inside', async () => {
+      expect(
+        await compileCss(css`
+          .btn {
+            background: black;
+
+            @variant [&:is(:hover,:focus)], disabled {
+              background: red;
+            }
+          }
+          @tailwind utilities;
+        `),
+      ).toMatchInlineSnapshot(`
+        "
+        .btn {
+          background: #000;
+        }
+
+        .btn:is(:hover, :focus), .btn:disabled {
+          background: red;
+        }
+        "
+      `)
+    })
+
+    it('should handle nested comma-separated variants', async () => {
+      let input = css`
+        .btn {
+          background: black;
+
+          @variant hover, focus {
+            background: red;
+
+            @variant active, disabled {
+              background: blue;
+            }
+          }
+        }
+        @tailwind utilities;
+      `
+
+      expect(await compileCss(input)).toMatchInlineSnapshot(`
+        "
+        .btn {
+          background: #000;
+        }
+
+        @media (hover: hover) {
+          .btn:hover {
+            background: red;
+          }
+
+          .btn:hover:active, .btn:hover:disabled {
+            background: #00f;
+          }
+        }
+
+        .btn:focus {
+          background: red;
+        }
+
+        .btn:focus:active, .btn:focus:disabled {
+          background: #00f;
+        }
+        "
+      `)
+
+      expect(await compileCss(input)).toEqual(
+        await compileCss(css`
+          .btn {
+            background: black;
+
+            @variant hover {
+              background: red;
+
+              @variant active {
+                background: blue;
+              }
+
+              @variant disabled {
+                background: blue;
+              }
+            }
+
+            @variant focus {
+              background: red;
+
+              @variant active {
+                background: blue;
+              }
+
+              @variant disabled {
+                background: blue;
               }
             }
           }
-        `,
-        [],
-      ),
-    ).resolves.toMatchInlineSnapshot(`
-      ".btn {
+          @tailwind utilities;
+        `),
+      )
+    })
+
+    it('should error on invalid variants (trailing comma)', async () => {
+      await expect(
+        compileCss(css`
+          .btn {
+            background: black;
+
+            @variant hover,focus, {
+              background: red;
+            }
+          }
+          @tailwind utilities;
+        `),
+      ).rejects.toThrowErrorMatchingInlineSnapshot(
+        `[Error: Cannot use \`@variant\` with empty variant]`,
+      )
+    })
+
+    it('should error on invalid variants (double comma)', async () => {
+      await expect(
+        compileCss(css`
+          .btn {
+            background: black;
+
+            @variant hover,,focus {
+              background: red;
+            }
+          }
+          @tailwind utilities;
+        `),
+      ).rejects.toThrowErrorMatchingInlineSnapshot(
+        `[Error: Cannot use \`@variant\` with empty variant]`,
+      )
+    })
+  })
+
+  describe('stacked `@variant` rules', () => {
+    it('should handle stacked variants', async () => {
+      expect(
+        await compileCss(css`
+          .btn {
+            background: black;
+
+            @variant hover:focus {
+              background: red;
+            }
+          }
+          @tailwind utilities;
+        `),
+      ).toMatchInlineSnapshot(`
+        "
+        .btn {
+          background: #000;
+        }
+
+        @media (hover: hover) {
+          .btn:hover:focus {
+            background: red;
+          }
+        }
+        "
+      `)
+    })
+
+    it('should handle stacked variants & comma-separated variants', async () => {
+      expect(
+        await compileCss(css`
+          .btn {
+            background: black;
+
+            @variant hover:focus, disabled {
+              background: red;
+            }
+          }
+          @tailwind utilities;
+        `),
+      ).toMatchInlineSnapshot(`
+        "
+        .btn {
+          background: #000;
+        }
+
+        @media (hover: hover) {
+          .btn:hover:focus {
+            background: red;
+          }
+        }
+
+        .btn:disabled {
+          background: red;
+        }
+        "
+      `)
+    })
+
+    it('should handle variants containing a `:` inside', async () => {
+      expect(
+        await compileCss(css`
+          .btn {
+            background: black;
+
+            @variant [&:is(:hover,:focus)]:disabled, aria-disabled:hover {
+              background: red;
+            }
+          }
+          @tailwind utilities;
+        `),
+      ).toMatchInlineSnapshot(`
+        "
+        .btn {
+          background: #000;
+        }
+
+        .btn:is(:hover, :focus):disabled {
+          background: red;
+        }
+
+        @media (hover: hover) {
+          .btn[aria-disabled="true"]:hover {
+            background: red;
+          }
+        }
+        "
+      `)
+    })
+  })
+
+  it('should be possible to use compound and stacked variants in `@variant`', async () => {
+    let input = css`
+      .btn {
+        background: black;
+
+        @variant data-a, data-b:data-c {
+          background: red;
+
+          @variant data-d, data-e:data-f {
+            background: blue;
+          }
+        }
+      }
+      @tailwind utilities;
+    `
+
+    expect(await compileCss(input)).toMatchInlineSnapshot(`
+      "
+      .btn {
+        background: #000;
+      }
+
+      .btn[data-a] {
+        background: red;
+      }
+
+      .btn[data-a][data-d], .btn[data-a][data-e][data-f] {
+        background: #00f;
+      }
+
+      .btn[data-b][data-c] {
+        background: red;
+      }
+
+      .btn[data-b][data-c][data-d], .btn[data-b][data-c][data-e][data-f] {
+        background: #00f;
+      }
+      "
+    `)
+
+    expect(await compileCss(input)).toEqual(
+      await compileCss(css`
+        .btn {
+          background: black;
+
+          @variant data-a {
+            background: red;
+
+            @variant data-d {
+              background: blue;
+            }
+
+            @variant data-e {
+              @variant data-f {
+                background: blue;
+              }
+            }
+          }
+
+          @variant data-b {
+            @variant data-c {
+              background: red;
+
+              @variant data-d {
+                background: blue;
+              }
+
+              @variant data-e {
+                @variant data-f {
+                  background: blue;
+                }
+              }
+            }
+          }
+        }
+        @tailwind utilities;
+      `),
+    )
+  })
+
+  it('should be possible to use `@variant` with a funky looking variants', async () => {
+    expect(
+      await compileCss(css`
+        @theme inline reference {
+          --container-md: 768px;
+        }
+
+        .btn {
+          background: black;
+
+          @variant @md {
+            @variant [&.foo] {
+              background: white;
+            }
+          }
+        }
+      `),
+    ).toMatchInlineSnapshot(`
+      "
+      .btn {
         background: #000;
       }
 
@@ -5480,25 +6511,27 @@ describe('@variant', () => {
         .btn.foo {
           background: #fff;
         }
-      }"
+      }
+      "
     `)
   })
 })
 
 describe('`color-mix(…)` polyfill', () => {
   it('creates an inlined variable version of the color-mix(…) usages', async () => {
-    await expect(
-      compileCss(
+    expect(
+      await run(
+        ['text-red-500/50'],
         css`
           @theme {
             --color-red-500: oklch(63.7% 0.237 25.331);
           }
           @tailwind utilities;
         `,
-        ['text-red-500/50'],
       ),
-    ).resolves.toMatchInlineSnapshot(`
-      ":root, :host {
+    ).toMatchInlineSnapshot(`
+      "
+      :root, :host {
         --color-red-500: oklch(63.7% .237 25.331);
       }
 
@@ -5510,13 +6543,15 @@ describe('`color-mix(…)` polyfill', () => {
         .text-red-500\\/50 {
           color: color-mix(in oklab, var(--color-red-500) 50%, transparent);
         }
-      }"
+      }
+      "
     `)
   })
 
   it('creates an inlined variable version of the color-mix(…) usages when it resolves to a var(…) containing another theme variable', async () => {
-    await expect(
-      compileCss(
+    expect(
+      await run(
+        ['text-red/50'],
         css`
           @theme {
             --color-red: var(--color-red-500);
@@ -5524,10 +6559,10 @@ describe('`color-mix(…)` polyfill', () => {
           }
           @tailwind utilities;
         `,
-        ['text-red/50'],
       ),
-    ).resolves.toMatchInlineSnapshot(`
-      ":root, :host {
+    ).toMatchInlineSnapshot(`
+      "
+      :root, :host {
         --color-red: var(--color-red-500);
         --color-red-500: oklch(63.7% .237 25.331);
       }
@@ -5540,27 +6575,26 @@ describe('`color-mix(…)` polyfill', () => {
         .text-red\\/50 {
           color: color-mix(in oklab, var(--color-red) 50%, transparent);
         }
-      }"
+      }
+      "
     `)
   })
 
   it('works for color values in the first and second position', async () => {
-    await expect(
-      compileCss(
-        css`
-          @theme {
-            --color-red-500: oklch(63.7% 0.237 25.331);
-            --color-orange-500: oklch(70.5% 0.213 47.604);
-          }
-          @tailwind utilities;
-          .mixed {
-            color: color-mix(in lch, var(--color-red-500) 50%, var(--color-orange-500));
-          }
-        `,
-        [],
-      ),
-    ).resolves.toMatchInlineSnapshot(`
-      ":root, :host {
+    expect(
+      await compileCss(css`
+        @theme {
+          --color-red-500: oklch(63.7% 0.237 25.331);
+          --color-orange-500: oklch(70.5% 0.213 47.604);
+        }
+        @tailwind utilities;
+        .mixed {
+          color: color-mix(in lch, var(--color-red-500) 50%, var(--color-orange-500));
+        }
+      `),
+    ).toMatchInlineSnapshot(`
+      "
+      :root, :host {
         --color-red-500: oklch(63.7% .237 25.331);
         --color-orange-500: oklch(70.5% .213 47.604);
       }
@@ -5573,30 +6607,29 @@ describe('`color-mix(…)` polyfill', () => {
         .mixed {
           color: color-mix(in lch, var(--color-red-500) 50%, var(--color-orange-500));
         }
-      }"
+      }
+      "
     `)
   })
 
   it('works for nested `color-mix(…)` calls', async () => {
-    await expect(
-      compileCss(
-        css`
-          @theme {
-            --color-red-500: oklch(63.7% 0.237 25.331);
-          }
-          @tailwind utilities;
-          .stacked {
-            color: color-mix(
-              in lch,
-              color-mix(in lch, var(--color-red-500) 50%, transparent) 50%,
-              transparent
-            );
-          }
-        `,
-        [],
-      ),
-    ).resolves.toMatchInlineSnapshot(`
-      ":root, :host {
+    expect(
+      await compileCss(css`
+        @theme {
+          --color-red-500: oklch(63.7% 0.237 25.331);
+        }
+        @tailwind utilities;
+        .stacked {
+          color: color-mix(
+            in lch,
+            color-mix(in lch, var(--color-red-500) 50%, transparent) 50%,
+            transparent
+          );
+        }
+      `),
+    ).toMatchInlineSnapshot(`
+      "
+      :root, :host {
         --color-red-500: oklch(63.7% .237 25.331);
       }
 
@@ -5608,32 +6641,31 @@ describe('`color-mix(…)` polyfill', () => {
         .stacked {
           color: color-mix(in lch, color-mix(in lch, var(--color-red-500) 50%, transparent) 50%, transparent);
         }
-      }"
+      }
+      "
     `)
   })
 
   it('works with multiple `color-mix(…)` functions in one declaration', async () => {
-    await expect(
-      compileCss(
-        css`
-          @theme {
-            --color-red-500: oklch(63.7% 0.237 25.331);
-            --color-orange-500: oklch(70.5% 0.213 47.604);
-          }
-          @tailwind utilities;
-          .gradient {
-            background: linear-gradient(
-              90deg,
-              color-mix(in oklab, var(--color-red-500) 50%, transparent) 0%,
-              color-mix(in oklab, var(--color-orange-500) 50%, transparent) 0%,
-              100%
-            );
-          }
-        `,
-        [],
-      ),
-    ).resolves.toMatchInlineSnapshot(`
-      ":root, :host {
+    expect(
+      await compileCss(css`
+        @theme {
+          --color-red-500: oklch(63.7% 0.237 25.331);
+          --color-orange-500: oklch(70.5% 0.213 47.604);
+        }
+        @tailwind utilities;
+        .gradient {
+          background: linear-gradient(
+            90deg,
+            color-mix(in oklab, var(--color-red-500) 50%, transparent) 0%,
+            color-mix(in oklab, var(--color-orange-500) 50%, transparent) 0%,
+            100%
+          );
+        }
+      `),
+    ).toMatchInlineSnapshot(`
+      "
+      :root, :host {
         --color-red-500: oklch(63.7% .237 25.331);
         --color-orange-500: oklch(70.5% .213 47.604);
       }
@@ -5646,13 +6678,14 @@ describe('`color-mix(…)` polyfill', () => {
         .gradient {
           background: linear-gradient(90deg, color-mix(in oklab, var(--color-red-500) 50%, transparent) 0%, color-mix(in oklab, var(--color-orange-500) 50%, transparent) 0%, 100%);
         }
-      }"
+      }
+      "
     `)
   })
 
   it('works with no spaces after the `var(…)`', async () => {
-    await expect(
-      compileCss(
+    expect(
+      await compileCss(
         // prettier-ignore
         css`
           @theme {
@@ -5663,10 +6696,10 @@ describe('`color-mix(…)` polyfill', () => {
             color: color-mix(in oklab,var(--color-red-500)50%,transparent);
           }
         `,
-        [],
       ),
-    ).resolves.toMatchInlineSnapshot(`
-      ":root, :host {
+    ).toMatchInlineSnapshot(`
+      "
+      :root, :host {
         --color-red-500: oklch(63.7% .237 25.331);
       }
 
@@ -5678,23 +6711,25 @@ describe('`color-mix(…)` polyfill', () => {
         .text-red-500\\/50 {
           color: color-mix(in oklab,var(--color-red-500)50%,transparent);
         }
-      }"
+      }
+      "
     `)
   })
 
   it('uses the first color value as the fallback when the `color-mix(…)` function contains non-theme variables', async () => {
-    await expect(
-      compileCss(
+    expect(
+      await run(
+        ['text-(--my-color)/50', 'text-red-500/(--my-opacity)', 'text-(--my-color)/(--my-opacity)'],
         css`
           @theme {
             --color-red-500: oklch(63.7% 0.237 25.331);
           }
           @tailwind utilities;
         `,
-        ['text-(--my-color)/50', 'text-red-500/(--my-opacity)', 'text-(--my-color)/(--my-opacity)'],
       ),
-    ).resolves.toMatchInlineSnapshot(`
-      ":root, :host {
+    ).toMatchInlineSnapshot(`
+      "
+      :root, :host {
         --color-red-500: oklch(63.7% .237 25.331);
       }
 
@@ -5726,20 +6761,15 @@ describe('`color-mix(…)` polyfill', () => {
         .text-red-500\\/\\(--my-opacity\\) {
           color: color-mix(in oklab, var(--color-red-500) var(--my-opacity), transparent);
         }
-      }"
+      }
+      "
     `)
   })
 
   it('uses the first color value as the fallback when the `color-mix(…)` function contains currentcolor', async () => {
-    await expect(
-      compileCss(
-        css`
-          @tailwind utilities;
-        `,
-        ['text-current/50'],
-      ),
-    ).resolves.toMatchInlineSnapshot(`
-      ".text-current\\/50 {
+    expect(await run(['text-current/50'])).toMatchInlineSnapshot(`
+      "
+      .text-current\\/50 {
         color: currentColor;
       }
 
@@ -5747,23 +6777,25 @@ describe('`color-mix(…)` polyfill', () => {
         .text-current\\/50 {
           color: color-mix(in oklab, currentcolor 50%, transparent);
         }
-      }"
+      }
+      "
     `)
   })
 
   it('uses the first color value as the fallback when the `color-mix(…)` function contains theme variables that resolves to other variables', async () => {
-    await expect(
-      compileCss(
+    expect(
+      await run(
+        ['text-red/50'],
         css`
           @tailwind utilities;
           @theme {
             --color-red: var(--my-red);
           }
         `,
-        ['text-red/50'],
       ),
-    ).resolves.toMatchInlineSnapshot(`
-      ".text-red\\/50 {
+    ).toMatchInlineSnapshot(`
+      "
+      .text-red\\/50 {
         color: var(--color-red);
       }
 
@@ -5775,28 +6807,27 @@ describe('`color-mix(…)` polyfill', () => {
 
       :root, :host {
         --color-red: var(--my-red);
-      }"
+      }
+      "
     `)
   })
 
   it('uses the first color value of the inner most `color-mix(…)` function as the fallback when nested `color-mix(…)` function all contain non-theme variables', async () => {
-    await expect(
-      compileCss(
-        css`
-          @tailwind utilities;
-          .stacked {
-            color: color-mix(
-              in oklab,
-              color-mix(in oklab, var(--my-color) var(--my-inner-opacity), transparent)
-                var(--my-outer-opacity),
-              transparent
-            );
-          }
-        `,
-        [],
-      ),
-    ).resolves.toMatchInlineSnapshot(`
-      ".stacked {
+    expect(
+      await compileCss(css`
+        @tailwind utilities;
+        .stacked {
+          color: color-mix(
+            in oklab,
+            color-mix(in oklab, var(--my-color) var(--my-inner-opacity), transparent)
+              var(--my-outer-opacity),
+            transparent
+          );
+        }
+      `),
+    ).toMatchInlineSnapshot(`
+      "
+      .stacked {
         color: var(--my-color);
       }
 
@@ -5804,31 +6835,35 @@ describe('`color-mix(…)` polyfill', () => {
         .stacked {
           color: color-mix(in oklab, color-mix(in oklab, var(--my-color) var(--my-inner-opacity), transparent) var(--my-outer-opacity), transparent);
         }
-      }"
+      }
+      "
     `)
   })
 
   it('does not create a fallback when all color values are statically analyzable (lightningcss will flatten this)', async () => {
-    await expect(
-      compileCss(
+    expect(
+      await run(
+        ['text-red-500/50'],
         css`
           @theme inline {
             --color-red-500: oklch(63.7% 0.237 25.331);
           }
           @tailwind utilities;
         `,
-        ['text-red-500/50'],
       ),
-    ).resolves.toMatchInlineSnapshot(`
-      ".text-red-500\\/50 {
+    ).toMatchInlineSnapshot(`
+      "
+      .text-red-500\\/50 {
         color: oklab(63.7% .214 .101 / .5);
-      }"
+      }
+      "
     `)
   })
 
   it('also replaces eventual variables in opacity values', async () => {
-    await expect(
-      compileCss(
+    expect(
+      await run(
+        ['text-red-500/(--my-half)'],
         css`
           @theme {
             --my-half: 50%;
@@ -5836,10 +6871,10 @@ describe('`color-mix(…)` polyfill', () => {
           }
           @tailwind utilities;
         `,
-        ['text-red-500/(--my-half)'],
       ),
-    ).resolves.toMatchInlineSnapshot(`
-      ":root, :host {
+    ).toMatchInlineSnapshot(`
+      "
+      :root, :host {
         --my-half: 50%;
         --color-red-500: oklch(63.7% .237 25.331);
       }
@@ -5852,13 +6887,15 @@ describe('`color-mix(…)` polyfill', () => {
         .text-red-500\\/\\(--my-half\\) {
           color: color-mix(in oklab, var(--color-red-500) var(--my-half), transparent);
         }
-      }"
+      }
+      "
     `)
   })
 
   it('does not delete theme variables from the output', async () => {
-    await expect(
-      compileCss(
+    expect(
+      await run(
+        ['text-red-500', 'shadow-xl', 'opacity-disabled'],
         css`
           @layer theme {
             @theme {
@@ -5869,10 +6906,10 @@ describe('`color-mix(…)` polyfill', () => {
           }
           @tailwind utilities;
         `,
-        ['text-red-500', 'shadow-xl', 'opacity-disabled'],
       ),
-    ).resolves.toMatchInlineSnapshot(`
-      "@layer properties {
+    ).toMatchInlineSnapshot(`
+      "
+      @layer properties {
         @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
           *, :before, :after, ::backdrop {
             --tw-shadow: 0 0 #0000;
@@ -5999,13 +7036,15 @@ describe('`color-mix(…)` polyfill', () => {
         syntax: "*";
         inherits: false;
         initial-value: 0 0 #0000;
-      }"
+      }
+      "
     `)
   })
 
   it('does not apply optimizations when already inside a @supports (color: color-mix... block', async () => {
-    await expect(
-      compileCss(
+    expect(
+      await run(
+        ['mixed'],
         css`
           @tailwind utilities;
           @utility mixed {
@@ -6014,48 +7053,47 @@ describe('`color-mix(…)` polyfill', () => {
             }
           }
         `,
-        ['mixed'],
       ),
-    ).resolves.toMatchInlineSnapshot(`
-      "@supports (color: color-mix(in lab, red, red)) {
+    ).toMatchInlineSnapshot(`
+      "
+      @supports (color: color-mix(in lab, red, red)) {
         .mixed {
           background: color-mix(in oklab, var(--color-1), var(--color-2) 0%);
         }
-      }"
+      }
+      "
     `)
   })
 })
 
 describe('`@property` polyfill', async () => {
   it('emits fallbacks', async () => {
-    await expect(
-      compileCss(
-        css`
-          @tailwind utilities;
+    expect(
+      await compileCss(css`
+        @tailwind utilities;
 
-          @property --no-inherit-no-value {
-            syntax: '*';
-            inherits: false;
-          }
-          @property --no-inherit-value {
-            syntax: '*';
-            inherits: false;
-            initial-value: red;
-          }
-          @property --inherit-no-value {
-            syntax: '*';
-            inherits: true;
-          }
-          @property --inherit-value {
-            syntax: '*';
-            inherits: true;
-            initial-value: red;
-          }
-        `,
-        [],
-      ),
-    ).resolves.toMatchInlineSnapshot(`
-      "@layer properties {
+        @property --no-inherit-no-value {
+          syntax: '*';
+          inherits: false;
+        }
+        @property --no-inherit-value {
+          syntax: '*';
+          inherits: false;
+          initial-value: red;
+        }
+        @property --inherit-no-value {
+          syntax: '*';
+          inherits: true;
+        }
+        @property --inherit-value {
+          syntax: '*';
+          inherits: true;
+          initial-value: red;
+        }
+      `),
+    ).toMatchInlineSnapshot(`
+      "
+      @layer properties {
         @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
           :root, :host {
             --inherit-no-value: initial;
@@ -6089,13 +7127,14 @@ describe('`@property` polyfill', async () => {
         syntax: "*";
         inherits: true;
         initial-value: red;
-      }"
+      }
+      "
     `)
   })
 
   it('emitting fallbacks can be disabled (necessary for CSS modules)', async () => {
-    await expect(
-      compileCss(
+    expect(
+      await compileCss(
         css`
           @tailwind utilities;
 
@@ -6118,13 +7157,13 @@ describe('`@property` polyfill', async () => {
             initial-value: red;
           }
         `,
-        [],
         {
           polyfills: Polyfills.None,
         },
       ),
-    ).resolves.toMatchInlineSnapshot(`
-      "@property --no-inherit-no-value {
+    ).toMatchInlineSnapshot(`
+      "
+      @property --no-inherit-no-value {
         syntax: "*";
         inherits: false
       }
@@ -6144,7 +7183,8 @@ describe('`@property` polyfill', async () => {
         syntax: "*";
         inherits: true;
         initial-value: red;
-      }"
+      }
+      "
     `)
   })
 })
@@ -6182,7 +7222,7 @@ describe('feature detection', () => {
   test('using `@reference`', async () => {
     let compiler = await compile(
       css`
-        @import 'tailwindcss/preflight';
+        @reference 'tailwindcss/preflight';
       `,
       { loadStylesheet: async (_, base) => ({ base, path: '', content: '' }) },
     )
diff --git a/packages/tailwindcss/src/index.ts b/packages/tailwindcss/src/index.ts
index a511b0838..bc279e624 100644
--- a/packages/tailwindcss/src/index.ts
+++ b/packages/tailwindcss/src/index.ts
@@ -34,7 +34,8 @@ import { segment } from './utils/segment'
 import { topologicalSort } from './utils/topological-sort'
 import { compoundsForSelectors, IS_VALID_VARIANT_NAME, substituteAtVariant } from './variants'
 import { walk, WalkAction } from './walk'
-export type Config = UserConfig
+
+export interface Config extends UserConfig {}
 
 const IS_VALID_PREFIX = /^[a-z]+$/
 
@@ -391,21 +392,25 @@ async function parseCss(
           }
         }
 
+        let usesAtScope = atRuleParams.some((param) => param.startsWith('@scope'))
+
         customVariants.set(name, (designSystem) => {
           designSystem.variants.static(
             name,
             (r) => {
+              let slot = usesAtScope ? [contextNode({ source: 'user' }, r.nodes)] : r.nodes
+
               let nodes: AstNode[] = []
 
               if (styleRuleSelectors.length > 0) {
-                nodes.push(styleRule(styleRuleSelectors.join(', '), r.nodes))
+                nodes.push(styleRule(styleRuleSelectors.join(', '), slot))
               }
 
               for (let selector of atRuleParams) {
-                nodes.push(rule(selector, r.nodes))
+                nodes.push(rule(selector, slot))
               }
 
-              r.nodes = nodes
+              r.nodes = usesAtScope ? [contextNode({ source: 'variant' }, nodes)] : nodes
             },
             {
               compounds: compoundsForSelectors([...styleRuleSelectors, ...atRuleParams]),
diff --git a/packages/tailwindcss/src/intellisense.test.ts b/packages/tailwindcss/src/intellisense.test.ts
index 2e475f738..63f9e7576 100644
--- a/packages/tailwindcss/src/intellisense.test.ts
+++ b/packages/tailwindcss/src/intellisense.test.ts
@@ -97,9 +97,9 @@ test('getVariants compound', async () => {
   ]
 
   expect(list).toEqual([
-    ['@media (hover: hover) { &:is(:where(.group):hover *) }'],
-    ['@media (hover: hover) { &:is(:where(.group\\/sidebar):hover *) }'],
-    ['@media (hover: hover) { &:is(:where(.group):is(:where(.group):hover *) *) }'],
+    ['@media (hover: hover) { :is(:where(.group):hover &) }'],
+    ['@media (hover: hover) { :is(:where(.group\\/sidebar):hover &) }'],
+    ['@media (hover: hover) { :is(:is(:where(.group):hover :where(.group)) &) }'],
     [],
     [],
   ])
@@ -213,11 +213,9 @@ test('Utilities do not show wrapping selector in intellisense', async () => {
       text-decoration-line: underline;
     }
     ",
-      ".hover\\:line-through {
-      &:hover {
-        @media (hover: hover) {
-          text-decoration-line: line-through;
-        }
+      "@media (hover: hover) {
+      .hover\\:line-through:hover {
+        text-decoration-line: line-through;
       }
     }
     ",
@@ -244,11 +242,9 @@ test('Utilities, when marked as important, show as important in intellisense', a
       text-decoration-line: underline !important;
     }
     ",
-      ".hover\\:line-through {
-      &:hover {
-        @media (hover: hover) {
-          text-decoration-line: line-through !important;
-        }
+      "@media (hover: hover) {
+      .hover\\:line-through:hover {
+        text-decoration-line: line-through !important;
       }
     }
     ",
@@ -361,48 +357,48 @@ test('Functional utilities from plugins are listed in hovers and completions', a
 
   expect(design.candidatesToCss(['custom-1-red', 'custom-1-green', 'custom-1-unknown']))
     .toMatchInlineSnapshot(`
-    [
-      ".custom-1-red {
-      color: #ff0000;
-    }
-    ",
-      ".custom-1-green {
-      color: #ff0000;
-    }
-    ",
-      null,
-    ]
-  `)
+      [
+        ".custom-1-red {
+        color: #ff0000;
+      }
+      ",
+        ".custom-1-green {
+        color: #ff0000;
+      }
+      ",
+        null,
+      ]
+    `)
 
   expect(design.candidatesToCss(['custom-2-red', 'custom-2-green', 'custom-2-unknown']))
     .toMatchInlineSnapshot(`
-    [
-      ".custom-2-red {
-      color: #ff0000 / 0%;
-    }
-    ",
-      ".custom-2-green {
-      color: #ff0000 / 0%;
-    }
-    ",
-      null,
-    ]
-  `)
+      [
+        ".custom-2-red {
+        color: #ff0000 / 0%;
+      }
+      ",
+        ".custom-2-green {
+        color: #ff0000 / 0%;
+      }
+      ",
+        null,
+      ]
+    `)
 
   expect(design.candidatesToCss(['custom-2-red/50', 'custom-2-red/75', 'custom-2-red/unknown']))
     .toMatchInlineSnapshot(`
-    [
-      ".custom-2-red\\/50 {
-      color: #ff0000 / 50%;
-    }
-    ",
-      ".custom-2-red\\/75 {
-      color: #ff0000 / 75%;
-    }
-    ",
-      null,
-    ]
-  `)
+      [
+        ".custom-2-red\\/50 {
+        color: #ff0000 / 50%;
+      }
+      ",
+        ".custom-2-red\\/75 {
+        color: #ff0000 / 75%;
+      }
+      ",
+        null,
+      ]
+    `)
 
   let classMap = new Map(design.getClassList())
   let classNames = Array.from(classMap.keys())
@@ -497,11 +493,6 @@ test('Custom functional @utility', async () => {
     @import 'tailwindcss/utilities';
 
     @theme reference {
-      --tab-size-1: 1;
-      --tab-size-2: 2;
-      --tab-size-4: 4;
-      --tab-size-github: 8;
-
       --text-xs: 0.75rem;
       --text-xs--line-height: calc(1 / 0.75);
 
@@ -510,10 +501,11 @@ test('Custom functional @utility', async () => {
 
       --spacing: 0.25rem;
       --spacing-custom: 123px;
-    }
 
-    @utility tab-* {
-      tab-size: --value(--tab-size, 'revert', 'initial');
+      --negative-1: 1;
+      --negative-2: 2;
+      --negative-4: 4;
+      --negative-a: 8;
     }
 
     @utility example-* {
@@ -535,7 +527,7 @@ test('Custom functional @utility', async () => {
     }
 
     @utility -negative-* {
-      margin: --value(--tab-size-*);
+      margin: --value(--negative-*);
     }
   `
 
@@ -550,18 +542,6 @@ test('Custom functional @utility', async () => {
   let classMap = new Map(design.getClassList())
   let classNames = Array.from(classMap.keys())
 
-  expect(classNames).toContain('tab-1')
-  expect(classNames).toContain('tab-2')
-  expect(classNames).toContain('tab-4')
-  expect(classNames).toContain('tab-github')
-  expect(classNames).toContain('tab-revert')
-  expect(classNames).toContain('tab-initial')
-
-  expect(classNames).not.toContain('-tab-1')
-  expect(classNames).not.toContain('-tab-2')
-  expect(classNames).not.toContain('-tab-4')
-  expect(classNames).not.toContain('-tab-github')
-
   expect(classNames).toContain('with-custom-spacing-custom')
   expect(classNames).not.toContain('with-custom-spacing-0')
   expect(classNames).not.toContain('with-custom-spacing-0.5')
@@ -583,12 +563,12 @@ test('Custom functional @utility', async () => {
   expect(classNames).toContain('-negative-1')
   expect(classNames).toContain('-negative-2')
   expect(classNames).toContain('-negative-4')
-  expect(classNames).toContain('-negative-github')
+  expect(classNames).toContain('-negative-a')
 
   expect(classNames).not.toContain('--negative-1')
   expect(classNames).not.toContain('--negative-2')
   expect(classNames).not.toContain('--negative-4')
-  expect(classNames).not.toContain('--negative-github')
+  expect(classNames).not.toContain('--negative-a')
 
   expect(classNames).toContain('example-xs')
   expect(classMap.get('example-xs')?.modifiers).toEqual(['normal', 'foo', 'bar'])
diff --git a/packages/tailwindcss/src/plugin.test.ts b/packages/tailwindcss/src/plugin.test.ts
index 485381cde..a7704ae58 100644
--- a/packages/tailwindcss/src/plugin.test.ts
+++ b/packages/tailwindcss/src/plugin.test.ts
@@ -1,30 +1,32 @@
 import { expect, test } from 'vitest'
-import { compile } from '.'
 import plugin from './plugin'
+import { compileCss } from './test-utils/run'
 
 const css = String.raw
 
 test('plugin', async () => {
-  let input = css`
-    @plugin "my-plugin";
-  `
-
-  let compiler = await compile(input, {
-    loadModule: async () => ({
-      module: plugin(function ({ addBase }) {
-        addBase({
-          body: {
-            margin: '0',
-          },
-        })
-      }),
-      base: '/root',
-      path: '',
-    }),
-  })
-
-  expect(compiler.build([])).toMatchInlineSnapshot(`
-    "@layer base {
+  expect(
+    await compileCss(
+      css`
+        @plugin "my-plugin";
+      `,
+      {
+        loadModule: async () => ({
+          module: plugin(function ({ addBase }) {
+            addBase({
+              body: {
+                margin: '0',
+              },
+            })
+          }),
+          base: '/root',
+          path: '',
+        }),
+      },
+    ),
+  ).toMatchInlineSnapshot(`
+    "
+    @layer base {
       body {
         margin: 0;
       }
@@ -34,28 +36,30 @@ test('plugin', async () => {
 })
 
 test('plugin.withOptions', async () => {
-  let input = css`
-    @plugin "my-plugin";
-  `
-
-  let compiler = await compile(input, {
-    loadModule: async () => ({
-      module: plugin.withOptions(function (opts = { foo: '1px' }) {
-        return function ({ addBase }) {
-          addBase({
-            body: {
-              margin: opts.foo,
-            },
-          })
-        }
-      }),
-      base: '/root',
-      path: '',
-    }),
-  })
-
-  expect(compiler.build([])).toMatchInlineSnapshot(`
-    "@layer base {
+  expect(
+    await compileCss(
+      css`
+        @plugin "my-plugin";
+      `,
+      {
+        loadModule: async () => ({
+          module: plugin.withOptions(function (opts = { foo: '1px' }) {
+            return function ({ addBase }) {
+              addBase({
+                body: {
+                  margin: opts.foo,
+                },
+              })
+            }
+          }),
+          base: '/root',
+          path: '',
+        }),
+      },
+    ),
+  ).toMatchInlineSnapshot(`
+    "
+    @layer base {
       body {
         margin: 1px;
       }
diff --git a/packages/tailwindcss/src/plugin.ts b/packages/tailwindcss/src/plugin.ts
index 5425f03c1..8035633b0 100644
--- a/packages/tailwindcss/src/plugin.ts
+++ b/packages/tailwindcss/src/plugin.ts
@@ -41,5 +41,6 @@ export type {
   PluginFn as PluginCreator,
   Plugin as PluginsConfig,
   PluginUtils,
+  PluginWithConfig,
   ThemeConfig,
 }
diff --git a/packages/tailwindcss/src/prefix.test.ts b/packages/tailwindcss/src/prefix.test.ts
index c60383de4..ded304cad 100644
--- a/packages/tailwindcss/src/prefix.test.ts
+++ b/packages/tailwindcss/src/prefix.test.ts
@@ -1,6 +1,7 @@
 import { expect, test } from 'vitest'
 import { compile } from '.'
 import plugin from './plugin'
+import { compileCss, run } from './test-utils/run'
 
 const css = String.raw
 
@@ -14,66 +15,57 @@ test('utilities must be prefixed', async () => {
     }
   `
 
-  let compiler = await compile(input)
-
   // Prefixed utilities are generated
   expect(
-    compiler.build([
-      'tw:underline',
-      'tw:hover:line-through',
-      'tw:custom',
-      'tw:group-hover:flex',
-      'tw:peer-hover:flex',
-    ]),
+    await run(
+      [
+        'tw:underline',
+        'tw:hover:line-through',
+        'tw:custom',
+        'tw:group-hover:flex',
+        'tw:peer-hover:flex',
+      ],
+      input,
+    ),
   ).toMatchInlineSnapshot(`
-    ".tw\\:custom {
+    "
+    .tw\\:custom {
       color: red;
     }
+
     .tw\\:underline {
       text-decoration-line: underline;
     }
-    .tw\\:group-hover\\:flex {
-      &:is(:where(.tw\\:group):hover *) {
-        @media (hover: hover) {
-          display: flex;
-        }
+
+    @media (hover: hover) {
+      :is(:where(.tw\\:group):hover .tw\\:group-hover\\:flex), :is(:where(.tw\\:peer):hover ~ .tw\\:peer-hover\\:flex) {
+        display: flex;
       }
-    }
-    .tw\\:peer-hover\\:flex {
-      &:is(:where(.tw\\:peer):hover ~ *) {
-        @media (hover: hover) {
-          display: flex;
-        }
-      }
-    }
-    .tw\\:hover\\:line-through {
-      &:hover {
-        @media (hover: hover) {
-          text-decoration-line: line-through;
-        }
+
+      .tw\\:hover\\:line-through:hover {
+        text-decoration-line: line-through;
       }
     }
     "
   `)
 
   // Non-prefixed utilities are ignored
-  compiler = await compile(input)
-
-  expect(compiler.build(['underline', 'hover:line-through', 'custom'])).toEqual('')
+  expect(await run(['underline', 'hover:line-through', 'custom'], input)).toEqual('')
 })
 
 test('utilities used in @apply must be prefixed', async () => {
-  let compiler = await compile(css`
-    @theme reference prefix(tw);
-
-    .my-underline {
-      @apply tw:underline;
-    }
-  `)
-
   // Prefixed utilities are generated
-  expect(compiler.build([])).toMatchInlineSnapshot(`
-    ".my-underline {
+  expect(
+    await compileCss(css`
+      @theme reference prefix(tw);
+
+      .my-underline {
+        @apply tw:underline;
+      }
+    `),
+  ).toMatchInlineSnapshot(`
+    "
+    .my-underline {
       text-decoration-line: underline;
     }
     "
@@ -94,21 +86,26 @@ test('utilities used in @apply must be prefixed', async () => {
 })
 
 test('CSS variables output by the theme are prefixed', async () => {
-  let compiler = await compile(css`
-    @theme prefix(tw) {
-      --color-red: #f00;
-      --color-green: #0f0;
-      --breakpoint-sm: 640px;
-    }
-
-    @tailwind utilities;
-  `)
-
   // Prefixed utilities are generated
-  expect(compiler.build(['tw:text-red'])).toMatchInlineSnapshot(`
-    ":root, :host {
-      --tw-color-red: #f00;
+  expect(
+    await run(
+      ['tw:text-red'],
+      css`
+        @theme prefix(tw) {
+          --color-red: #f00;
+          --color-green: #0f0;
+          --breakpoint-sm: 640px;
+        }
+
+        @tailwind utilities;
+      `,
+    ),
+  ).toMatchInlineSnapshot(`
+    "
+    :root, :host {
+      --tw-color-red: red;
     }
+
     .tw\\:text-red {
       color: var(--tw-color-red);
     }
@@ -117,78 +114,81 @@ test('CSS variables output by the theme are prefixed', async () => {
 })
 
 test('CSS theme functions do not use the prefix', async () => {
-  let compiler = await compile(css`
-    @theme prefix(tw) {
-      --color-red: #f00;
-      --color-green: #0f0;
-      --breakpoint-sm: 640px;
+  expect(
+    await run(
+      ['tw:[color:theme(--color-red)]', 'tw:text-[theme(--color-red)]'],
+      css`
+        @theme prefix(tw) {
+          --color-red: #f00;
+          --color-green: #0f0;
+          --breakpoint-sm: 640px;
+        }
+
+        @tailwind utilities;
+      `,
+    ),
+  ).toMatchInlineSnapshot(`
+    "
+    .tw\\:\\[color\\:theme\\(--color-red\\)\\], .tw\\:text-\\[theme\\(--color-red\\)\\] {
+      color: red;
     }
-
-    @tailwind utilities;
-  `)
-
-  expect(compiler.build(['tw:[color:theme(--color-red)]', 'tw:text-[theme(--color-red)]']))
-    .toMatchInlineSnapshot(`
-      ".tw\\:\\[color\\:theme\\(--color-red\\)\\] {
-        color: #f00;
-      }
-      .tw\\:text-\\[theme\\(--color-red\\)\\] {
-        color: #f00;
-      }
-      "
-    `)
-
-  compiler = await compile(css`
-    @theme reference prefix(tw) {
-      --color-red: #f00;
-      --color-green: #0f0;
-      --breakpoint-sm: 640px;
-    }
-
-    @tailwind utilities;
+    "
   `)
 
   expect(
-    compiler.build(['tw:[color:theme(--tw-color-red)]', 'tw:text-[theme(--tw-color-red)]']),
+    await run(
+      ['tw:[color:theme(--tw-color-red)]', 'tw:text-[theme(--tw-color-red)]'],
+      css`
+        @theme reference prefix(tw) {
+          --color-red: #f00;
+          --color-green: #0f0;
+          --breakpoint-sm: 640px;
+        }
+
+        @tailwind utilities;
+      `,
+    ),
   ).toEqual('')
 })
 
 test('JS theme functions do not use the prefix', async () => {
-  let compiler = await compile(
-    css`
-      @theme prefix(tw) {
-        --color-red: #f00;
-        --color-green: #0f0;
-        --breakpoint-sm: 640px;
-      }
-
-      @plugin "./plugin.js";
-
-      @tailwind utilities;
-    `,
-    {
-      async loadModule(id, base) {
-        return {
-          path: '',
-          base,
-          module: plugin(({ addUtilities, theme }) => {
-            addUtilities({
-              '.my-custom': {
-                color: theme('--color-red'),
-              },
-            })
-
-            // The theme function does not use the prefix
-            expect(theme('--tw-color-red')).toEqual(undefined)
-          }),
+  expect(
+    await run(
+      ['tw:my-custom'],
+      css`
+        @theme prefix(tw) {
+          --color-red: #f00;
+          --color-green: #0f0;
+          --breakpoint-sm: 640px;
         }
-      },
-    },
-  )
 
-  expect(compiler.build(['tw:my-custom'])).toMatchInlineSnapshot(`
-    ".tw\\:my-custom {
-      color: #f00;
+        @plugin "./plugin.js";
+
+        @tailwind utilities;
+      `,
+      {
+        async loadModule(_id, base) {
+          return {
+            path: '',
+            base,
+            module: plugin(({ addUtilities, theme }) => {
+              addUtilities({
+                '.my-custom': {
+                  color: theme('--color-red'),
+                },
+              })
+
+              // The theme function does not use the prefix
+              expect(theme('--tw-color-red')).toEqual(undefined)
+            }),
+          }
+        },
+      },
+    ),
+  ).toMatchInlineSnapshot(`
+    "
+    .tw\\:my-custom {
+      color: red;
     }
     "
   `)
@@ -204,8 +204,8 @@ test('a prefix can be configured via @import theme(…)', async () => {
     }
   `
 
-  let compiler = await compile(input, {
-    async loadStylesheet(id, base) {
+  let options: Partial<Parameters<typeof compile>[1]> = {
+    async loadStylesheet(_id, base) {
       return {
         path: '',
         base,
@@ -216,54 +216,39 @@ test('a prefix can be configured via @import theme(…)', async () => {
         `,
       }
     },
-  })
+  }
 
   // Prefixed utilities are generated
   expect(
-    compiler.build([
-      'tw:underline',
-      'tw:bg-potato',
-      'tw:hover:line-through',
-      'tw:custom',
-      'flex',
-      'text-potato',
-    ]),
+    await run(
+      ['tw:underline', 'tw:bg-potato', 'tw:hover:line-through', 'tw:custom', 'flex', 'text-potato'],
+      input,
+      options,
+    ),
   ).toMatchInlineSnapshot(`
-    ".tw\\:bg-potato {
+    "
+    .tw\\:bg-potato {
       background-color: var(--tw-color-potato, #7a4724);
     }
+
     .tw\\:custom {
       color: red;
     }
+
     .tw\\:underline {
       text-decoration-line: underline;
     }
-    .tw\\:hover\\:line-through {
-      &:hover {
-        @media (hover: hover) {
-          text-decoration-line: line-through;
-        }
+
+    @media (hover: hover) {
+      .tw\\:hover\\:line-through:hover {
+        text-decoration-line: line-through;
       }
     }
     "
   `)
 
   // Non-prefixed utilities are ignored
-  compiler = await compile(input, {
-    async loadStylesheet(id, base) {
-      return {
-        path: '',
-        base,
-        content: css`
-          @theme {
-            --color-potato: #7a4724;
-          }
-        `,
-      }
-    },
-  })
-
-  expect(compiler.build(['underline', 'hover:line-through', 'custom'])).toMatchInlineSnapshot(`""`)
+  expect(await run(['underline', 'hover:line-through', 'custom'], input, options)).toEqual('')
 })
 
 test('a prefix can be configured via @import prefix(…)', async () => {
@@ -275,8 +260,8 @@ test('a prefix can be configured via @import prefix(…)', async () => {
     }
   `
 
-  let compiler = await compile(input, {
-    async loadStylesheet(id, base) {
+  let options: Partial<Parameters<typeof compile>[1]> = {
+    async loadStylesheet(_id, base) {
       return {
         path: '',
         base,
@@ -288,49 +273,42 @@ test('a prefix can be configured via @import prefix(…)', async () => {
         `,
       }
     },
-  })
+  }
 
-  expect(compiler.build(['tw:underline', 'tw:bg-potato', 'tw:hover:line-through', 'tw:custom']))
-    .toMatchInlineSnapshot(`
-      ":root, :host {
-        --tw-color-potato: #7a4724;
+  expect(
+    await run(
+      ['tw:underline', 'tw:bg-potato', 'tw:hover:line-through', 'tw:custom'],
+      input,
+      options,
+    ),
+  ).toMatchInlineSnapshot(`
+    "
+    :root, :host {
+      --tw-color-potato: #7a4724;
+    }
+
+    .tw\\:bg-potato {
+      background-color: var(--tw-color-potato);
+    }
+
+    .tw\\:custom {
+      color: red;
+    }
+
+    .tw\\:underline {
+      text-decoration-line: underline;
+    }
+
+    @media (hover: hover) {
+      .tw\\:hover\\:line-through:hover {
+        text-decoration-line: line-through;
       }
-      .tw\\:bg-potato {
-        background-color: var(--tw-color-potato);
-      }
-      .tw\\:custom {
-        color: red;
-      }
-      .tw\\:underline {
-        text-decoration-line: underline;
-      }
-      .tw\\:hover\\:line-through {
-        &:hover {
-          @media (hover: hover) {
-            text-decoration-line: line-through;
-          }
-        }
-      }
-      "
-    `)
+    }
+    "
+  `)
 
   // Non-prefixed utilities are ignored
-  compiler = await compile(input, {
-    async loadStylesheet(id, base) {
-      return {
-        path: '',
-        base,
-        content: css`
-          @theme {
-            --color-potato: #7a4724;
-          }
-          @tailwind utilities;
-        `,
-      }
-    },
-  })
-
-  expect(compiler.build(['underline', 'hover:line-through', 'custom'])).toMatchInlineSnapshot(`""`)
+  expect(await run(['underline', 'hover:line-through', 'custom'], input, options)).toEqual('')
 })
 
 test('a prefix must be letters only', async () => {
@@ -344,15 +322,17 @@ test('a prefix must be letters only', async () => {
 })
 
 test('a candidate matching the prefix does not crash', async () => {
-  let input = css`
-    @theme reference prefix(tomato);
-    @tailwind utilities;
-  `
-
-  let compiler = await compile(input)
-
-  expect(compiler.build(['tomato', 'tomato:flex'])).toMatchInlineSnapshot(`
-    ".tomato\\:flex {
+  expect(
+    await run(
+      ['tomato', 'tomato:flex'],
+      css`
+        @theme reference prefix(tomato);
+        @tailwind utilities;
+      `,
+    ),
+  ).toMatchInlineSnapshot(`
+    "
+    .tomato\\:flex {
       display: flex;
     }
     "
diff --git a/packages/tailwindcss/src/property-order.ts b/packages/tailwindcss/src/property-order.ts
index e92bc3744..bf9f0791a 100644
--- a/packages/tailwindcss/src/property-order.ts
+++ b/packages/tailwindcss/src/property-order.ts
@@ -92,6 +92,8 @@ export default [
   '--tw-skew-y',
   'transform',
 
+  'zoom',
+
   'animation',
 
   'cursor',
@@ -131,6 +133,10 @@ export default [
   'scroll-padding-bottom',
   'scroll-padding-left',
 
+  'scrollbar-width',
+  'scrollbar-color',
+  'scrollbar-gutter',
+
   'list-style-position',
   'list-style-type',
   'list-style-image',
@@ -354,6 +360,7 @@ export default [
   'text-overflow',
   'hyphens',
   'white-space',
+  'tab-size',
 
   'color',
   'text-transform',
diff --git a/packages/tailwindcss/src/selector-parser.test.ts b/packages/tailwindcss/src/selector-parser.test.ts
index 132359ccc..fa38dc578 100644
--- a/packages/tailwindcss/src/selector-parser.test.ts
+++ b/packages/tailwindcss/src/selector-parser.test.ts
@@ -9,54 +9,315 @@ describe('parse', () => {
 
   it('should parse a compound selector', () => {
     expect(parse('.foo.bar:hover#id')).toEqual([
-      { kind: 'selector', value: '.foo' },
-      { kind: 'selector', value: '.bar' },
-      { kind: 'selector', value: ':hover' },
-      { kind: 'selector', value: '#id' },
+      {
+        kind: 'compound',
+        nodes: [
+          { kind: 'selector', value: '.foo' },
+          { kind: 'selector', value: '.bar' },
+          { kind: 'selector', value: ':hover' },
+          { kind: 'selector', value: '#id' },
+        ],
+      },
+    ])
+  })
+
+  it('should parse a pseudo-element selector with double ::', () => {
+    expect(parse('.foo::before')).toEqual([
+      {
+        kind: 'compound',
+        nodes: [
+          { kind: 'selector', value: '.foo' },
+          { kind: 'selector', value: '::before' },
+        ],
+      },
     ])
   })
 
   it('should parse a selector list', () => {
     expect(parse('.foo,.bar')).toEqual([
-      { kind: 'selector', value: '.foo' },
-      { kind: 'separator', value: ',' },
-      { kind: 'selector', value: '.bar' },
+      {
+        kind: 'list',
+        nodes: [
+          { kind: 'selector', value: '.foo' },
+          { kind: 'selector', value: '.bar' },
+        ],
+      },
+    ])
+  })
+
+  // We've got 3 options here:
+  //
+  // 1. We could throw, but then it becomes more annoying when you don't have
+  //    control over the CSS (for example when it's coming from a package).
+  // 2. We could parse it and ignore the invalid cases as-if they weren't there.
+  //    Re-printing the AST would turn it into a valid situation.
+  // 3. We could parse the invalid case and turn it into a `compound` such that
+  //    it stays invalid. When we re-print we would re-introduce the error.
+  //
+  // Before this change, we would keep the errors, and pass it along:
+  // - In a browser environment, these would be ignored
+  // - In Lightning CSS, these are thrown out
+  //
+  // For that reason alone, let's go with option 3 for now, such that the
+  // behavior is the same as before. This does mean that we see "weird" empty
+  // compound nodes.
+  it('should safely parse an invalid selector list', () => {
+    expect(parse('.foo,')).toEqual([
+      {
+        kind: 'list',
+        nodes: [
+          { kind: 'selector', value: '.foo' },
+          { kind: 'compound', nodes: [] },
+        ],
+      },
+    ])
+    expect(parse(',.foo')).toEqual([
+      {
+        kind: 'list',
+        nodes: [
+          { kind: 'compound', nodes: [] },
+          { kind: 'selector', value: '.foo' },
+        ],
+      },
+    ])
+    expect(parse(',.foo,')).toEqual([
+      {
+        kind: 'list',
+        nodes: [
+          { kind: 'compound', nodes: [] },
+          { kind: 'selector', value: '.foo' },
+          { kind: 'compound', nodes: [] },
+        ],
+      },
+    ])
+    expect(parse('.foo,,.bar')).toEqual([
+      {
+        kind: 'list',
+        nodes: [
+          { kind: 'selector', value: '.foo' },
+          { kind: 'compound', nodes: [] },
+          { kind: 'selector', value: '.bar' },
+        ],
+      },
+    ])
+  })
+
+  it('should parse selector lists with whitespace around the comma', () => {
+    expect(parse('.foo, .bar')).toEqual([
+      {
+        kind: 'list',
+        nodes: [
+          { kind: 'selector', value: '.foo' },
+          { kind: 'selector', value: '.bar' },
+        ],
+      },
+    ])
+
+    expect(parse('.foo , .bar')).toEqual([
+      {
+        kind: 'list',
+        nodes: [
+          { kind: 'selector', value: '.foo' },
+          { kind: 'selector', value: '.bar' },
+        ],
+      },
+    ])
+
+    expect(parse('.foo ,.bar')).toEqual([
+      {
+        kind: 'list',
+        nodes: [
+          { kind: 'selector', value: '.foo' },
+          { kind: 'selector', value: '.bar' },
+        ],
+      },
+    ])
+  })
+
+  it('should parse a list of attribute selectors', () => {
+    expect(parse('[foo],[bar]')).toEqual([
+      {
+        kind: 'list',
+        nodes: [
+          { kind: 'selector', value: '[foo]' },
+          { kind: 'selector', value: '[bar]' },
+        ],
+      },
+    ])
+  })
+
+  it('should parse a list of selectors with just functions', () => {
+    expect(parse(':is(.a),:is(.b)')).toEqual([
+      {
+        kind: 'list',
+        nodes: [
+          { kind: 'function', value: ':is', nodes: [{ kind: 'selector', value: '.a' }] },
+          { kind: 'function', value: ':is', nodes: [{ kind: 'selector', value: '.b' }] },
+        ],
+      },
+    ])
+  })
+
+  it('should parse selector lists with more than two selectors', () => {
+    expect(parse('.foo,.bar,.baz')).toEqual([
+      {
+        kind: 'list',
+        nodes: [
+          { kind: 'selector', value: '.foo' },
+          { kind: 'selector', value: '.bar' },
+          { kind: 'selector', value: '.baz' },
+        ],
+      },
+    ])
+  })
+
+  it('should group selectors with combinators in a selector list', () => {
+    expect(parse('.a+.b, .c .d[attr], .e')).toEqual([
+      {
+        kind: 'list',
+        nodes: [
+          {
+            kind: 'complex',
+            nodes: [
+              { kind: 'selector', value: '.a' },
+              { kind: 'combinator', value: '+' },
+              { kind: 'selector', value: '.b' },
+            ],
+          },
+          {
+            kind: 'complex',
+            nodes: [
+              { kind: 'selector', value: '.c' },
+              { kind: 'combinator', value: ' ' },
+              {
+                kind: 'compound',
+                nodes: [
+                  { kind: 'selector', value: '.d' },
+                  { kind: 'selector', value: '[attr]' },
+                ],
+              },
+            ],
+          },
+          { kind: 'selector', value: '.e' },
+        ],
+      },
+    ])
+  })
+
+  it('should parse complex selectors in a selector list', () => {
+    expect(parse('#a.b > .c, .d')).toEqual([
+      {
+        kind: 'list',
+        nodes: [
+          {
+            kind: 'complex',
+            nodes: [
+              {
+                kind: 'compound',
+                nodes: [
+                  { kind: 'selector', value: '#a' },
+                  { kind: 'selector', value: '.b' },
+                ],
+              },
+              { kind: 'combinator', value: '>' },
+              { kind: 'selector', value: '.c' },
+            ],
+          },
+          { kind: 'selector', value: '.d' },
+        ],
+      },
     ])
   })
 
   it('should combine everything within attribute selectors', () => {
     expect(parse('.foo[bar="baz"]')).toEqual([
-      { kind: 'selector', value: '.foo' },
-      { kind: 'selector', value: '[bar="baz"]' },
+      {
+        kind: 'compound',
+        nodes: [
+          { kind: 'selector', value: '.foo' },
+          { kind: 'selector', value: '[bar="baz"]' },
+        ],
+      },
     ])
   })
 
   it('should parse functions', () => {
     expect(parse('.foo:hover:not(.bar:focus)')).toEqual([
-      { kind: 'selector', value: '.foo' },
-      { kind: 'selector', value: ':hover' },
       {
-        kind: 'function',
+        kind: 'compound',
         nodes: [
+          { kind: 'selector', value: '.foo' },
+          { kind: 'selector', value: ':hover' },
           {
-            kind: 'selector',
-            value: '.bar',
-          },
-          {
-            kind: 'selector',
-            value: ':focus',
+            kind: 'function',
+            value: ':not',
+            nodes: [
+              {
+                kind: 'compound',
+                nodes: [
+                  { kind: 'selector', value: '.bar' },
+                  { kind: 'selector', value: ':focus' },
+                ],
+              },
+            ],
+          },
+        ],
+      },
+    ])
+  })
+
+  it('should parse selector lists in functions', () => {
+    expect(parse(':is(.foo, .bar)')).toEqual([
+      {
+        kind: 'function',
+        value: ':is',
+        nodes: [
+          {
+            kind: 'list',
+            nodes: [
+              { kind: 'selector', value: '.foo' },
+              { kind: 'selector', value: '.bar' },
+            ],
           },
         ],
-        value: ':not',
       },
     ])
   })
 
   it('should handle next-children combinator', () => {
     expect(parse('.foo + p')).toEqual([
-      { kind: 'selector', value: '.foo' },
-      { kind: 'combinator', value: ' + ' },
-      { kind: 'selector', value: 'p' },
+      {
+        kind: 'complex',
+        nodes: [
+          { kind: 'selector', value: '.foo' },
+          { kind: 'combinator', value: '+' },
+          { kind: 'selector', value: 'p' },
+        ],
+      },
+    ])
+  })
+
+  it('should normalize combinators', () => {
+    expect(parse('.foo + .bar')).toEqual([
+      {
+        kind: 'complex',
+        nodes: [
+          { kind: 'selector', value: '.foo' },
+          { kind: 'combinator', value: '+' },
+          { kind: 'selector', value: '.bar' },
+        ],
+      },
+    ])
+
+    expect(parse('.foo  \n\t .bar')).toEqual([
+      {
+        kind: 'complex',
+        nodes: [
+          { kind: 'selector', value: '.foo' },
+          { kind: 'combinator', value: ' ' },
+          { kind: 'selector', value: '.bar' },
+        ],
+      },
     ])
   })
 
@@ -65,14 +326,39 @@ describe('parse', () => {
   })
 
   it('parses :nth-child()', () => {
+    // The `An+B` part is not a selector, it stays an opaque value
     expect(parse(':nth-child(n+1)')).toEqual([
+      {
+        kind: 'function',
+        value: ':nth-child',
+        nodes: [{ kind: 'value', value: 'n+1' }],
+      },
+    ])
+
+    // The selector list after `of` is parsed as a selector
+    expect(parse(':nth-child(2 of &)')).toEqual([
       {
         kind: 'function',
         value: ':nth-child',
         nodes: [
+          { kind: 'value', value: '2 of ' },
+          { kind: 'selector', value: '&' },
+        ],
+      },
+    ])
+
+    expect(parse(':nth-child(2n + 1 of .foo, .bar)')).toEqual([
+      {
+        kind: 'function',
+        value: ':nth-child',
+        nodes: [
+          { kind: 'value', value: '2n + 1 of ' },
           {
-            kind: 'value',
-            value: 'n+1',
+            kind: 'list',
+            nodes: [
+              { kind: 'selector', value: '.foo' },
+              { kind: 'selector', value: '.bar' },
+            ],
           },
         ],
       },
@@ -82,24 +368,34 @@ describe('parse', () => {
   it('parses &:has(.child:nth-child(2))', () => {
     expect(parse('&:has(.child:nth-child(2))')).toEqual([
       {
-        kind: 'selector',
-        value: '&',
-      },
-      {
-        kind: 'function',
-        value: ':has',
+        kind: 'compound',
         nodes: [
           {
             kind: 'selector',
-            value: '.child',
+            value: '&',
           },
           {
             kind: 'function',
-            value: ':nth-child',
+            value: ':has',
             nodes: [
               {
-                kind: 'value',
-                value: '2',
+                kind: 'compound',
+                nodes: [
+                  {
+                    kind: 'selector',
+                    value: '.child',
+                  },
+                  {
+                    kind: 'function',
+                    value: ':nth-child',
+                    nodes: [
+                      {
+                        kind: 'value',
+                        value: '2',
+                      },
+                    ],
+                  },
+                ],
               },
             ],
           },
@@ -111,20 +407,25 @@ describe('parse', () => {
   it('parses &:has(:nth-child(2))', () => {
     expect(parse('&:has(:nth-child(2))')).toEqual([
       {
-        kind: 'selector',
-        value: '&',
-      },
-      {
-        kind: 'function',
-        value: ':has',
+        kind: 'compound',
         nodes: [
+          {
+            kind: 'selector',
+            value: '&',
+          },
           {
             kind: 'function',
-            value: ':nth-child',
+            value: ':has',
             nodes: [
               {
-                kind: 'value',
-                value: '2',
+                kind: 'function',
+                value: ':nth-child',
+                nodes: [
+                  {
+                    kind: 'value',
+                    value: '2',
+                  },
+                ],
               },
             ],
           },
@@ -135,29 +436,117 @@ describe('parse', () => {
 
   it('parses nesting selector before attribute selector', () => {
     expect(parse('&[data-foo]')).toEqual([
-      { kind: 'selector', value: '&' },
-      { kind: 'selector', value: '[data-foo]' },
+      {
+        kind: 'compound',
+        nodes: [
+          { kind: 'selector', value: '&' },
+          { kind: 'selector', value: '[data-foo]' },
+        ],
+      },
     ])
   })
 
   it('parses nesting selector after an attribute selector', () => {
     expect(parse('[data-foo]&')).toEqual([
-      { kind: 'selector', value: '[data-foo]' },
-      { kind: 'selector', value: '&' },
+      {
+        kind: 'compound',
+        nodes: [
+          { kind: 'selector', value: '[data-foo]' },
+          { kind: 'selector', value: '&' },
+        ],
+      },
     ])
   })
 
   it('parses universal selector before attribute selector', () => {
     expect(parse('*[data-foo]')).toEqual([
-      { kind: 'selector', value: '*' },
-      { kind: 'selector', value: '[data-foo]' },
+      {
+        kind: 'compound',
+        nodes: [
+          { kind: 'selector', value: '*' },
+          { kind: 'selector', value: '[data-foo]' },
+        ],
+      },
     ])
   })
 
-  it('parses universal selector after an attribute selector', () => {
+  it('parses the universal selector after an attribute selector', () => {
     expect(parse('[data-foo]*')).toEqual([
-      { kind: 'selector', value: '[data-foo]' },
-      { kind: 'selector', value: '*' },
+      {
+        kind: 'compound',
+        nodes: [
+          { kind: 'selector', value: '[data-foo]' },
+          { kind: 'selector', value: '*' },
+        ],
+      },
+    ])
+  })
+
+  it('parses another attribute selector after an attribute selector', () => {
+    expect(parse('[data-foo][data-bar]')).toEqual([
+      {
+        kind: 'compound',
+        nodes: [
+          { kind: 'selector', value: '[data-foo]' },
+          { kind: 'selector', value: '[data-bar]' },
+        ],
+      },
+    ])
+  })
+
+  it('parses a type selector before an attribute selector', () => {
+    expect(parse('div[data-foo]')).toEqual([
+      {
+        kind: 'compound',
+        nodes: [
+          { kind: 'selector', value: 'div' },
+          { kind: 'selector', value: '[data-foo]' },
+        ],
+      },
+    ])
+  })
+
+  it('parses a type selector after an attribute selector', () => {
+    expect(parse('[data-foo]div')).toEqual([
+      {
+        kind: 'compound',
+        nodes: [
+          { kind: 'selector', value: '[data-foo]' },
+          { kind: 'selector', value: 'div' },
+        ],
+      },
+    ])
+  })
+
+  it('should parse selector lists as real selectors', () => {
+    expect(parse('.foo[attr], .bar#id, .baz + .qux')).toEqual([
+      {
+        kind: 'list',
+        nodes: [
+          {
+            kind: 'compound',
+            nodes: [
+              { kind: 'selector', value: '.foo' },
+              { kind: 'selector', value: '[attr]' },
+            ],
+          },
+          {
+            kind: 'compound',
+            nodes: [
+              { kind: 'selector', value: '.bar' },
+              { kind: 'selector', value: '#id' },
+            ],
+          },
+          {
+            kind: 'complex',
+            nodes: [
+              { kind: 'selector', value: '.baz' },
+              { kind: 'combinator', value: '+' },
+              { kind: 'selector', value: '.qux' },
+            ],
+          },
+        ],
+      },
     ])
   })
 })
@@ -172,7 +561,20 @@ describe('toCss', () => {
   })
 
   it('should print a selector list', () => {
-    expect(toCss(parse('.foo,.bar'))).toBe('.foo,.bar')
+    expect(toCss(parse('.foo, .bar'))).toBe('.foo, .bar')
+  })
+
+  it('should print a selector list with normalized commas', () => {
+    expect(toCss(parse('.foo,.bar'))).toBe('.foo, .bar')
+    expect(toCss(parse('.foo, .bar'))).toBe('.foo, .bar')
+    expect(toCss(parse('.foo , .bar'))).toBe('.foo, .bar')
+    expect(toCss(parse('.foo ,.bar'))).toBe('.foo, .bar')
+  })
+
+  it('should print a selector list but minimized', () => {
+    expect(toCss(parse('.foo, .bar'), true)).toBe('.foo,.bar')
+    expect(toCss(parse('.foo , .bar'), true)).toBe('.foo,.bar')
+    expect(toCss(parse('.foo ,.bar'), true)).toBe('.foo,.bar')
   })
 
   it('should print an attribute selectors', () => {
@@ -188,7 +590,20 @@ describe('toCss', () => {
   })
 
   it('should print :nth-child()', () => {
+    // The `An+B` part is printed verbatim, whitespace in the selector list
+    // after `of` is normalized
     expect(toCss(parse(':nth-child(n+1)'))).toBe(':nth-child(n+1)')
+    expect(toCss(parse(':nth-child(+2)'))).toBe(':nth-child(+2)')
+    expect(toCss(parse(':nth-child(2n + 1 of .foo,.bar)'))).toBe(':nth-child(2n + 1 of .foo, .bar)')
+  })
+
+  it('should pretty print a complex selector', () => {
+    expect(toCss(parse('.a+.b, .c .d[attr], .e'))).toBe('.a + .b, .c .d[attr], .e')
+  })
+
+  it('should minify a complex selector during printing', () => {
+    expect(toCss(parse('.a+.b, .c .d[attr], .e'), true)).toBe('.a+.b,.c .d[attr],.e')
+    //                                                                 ^ This space is significant to indicate a descendant combinator
   })
 })
 
diff --git a/packages/tailwindcss/src/selector-parser.ts b/packages/tailwindcss/src/selector-parser.ts
index 184eb1286..2a435f687 100644
--- a/packages/tailwindcss/src/selector-parser.ts
+++ b/packages/tailwindcss/src/selector-parser.ts
@@ -1,5 +1,31 @@
+type Combinator =
+  | ' ' // Descendant combinator
+  | '>' // Child combinator
+  | '+' // Next-sibling combinator
+  | '~' // Subsequent-sibling combinator
+
+export type SelectorListNode = {
+  kind: 'list'
+  nodes: SelectorAstNode[]
+}
+
 export type SelectorCombinatorNode = {
   kind: 'combinator'
+  value: Combinator
+}
+
+export type SelectorComplexNode = {
+  kind: 'complex'
+  nodes: SelectorAstNode[]
+}
+
+export type SelectorCompoundNode = {
+  kind: 'compound'
+  nodes: SelectorAstNode[]
+}
+
+export type SelectorNode = {
+  kind: 'selector'
   value: string
 }
 
@@ -9,53 +35,59 @@ export type SelectorFunctionNode = {
   nodes: SelectorAstNode[]
 }
 
-export type SelectorNode = {
-  kind: 'selector'
-  value: string
-}
-
 export type SelectorValueNode = {
   kind: 'value'
   value: string
 }
 
-export type SelectorSeparatorNode = {
-  kind: 'separator'
-  value: string
-}
-
 export type SelectorAstNode =
-  | SelectorCombinatorNode
   | SelectorFunctionNode
+  | SelectorCombinatorNode
+  | SelectorComplexNode
+  | SelectorCompoundNode
+  | SelectorListNode
   | SelectorNode
-  | SelectorSeparatorNode
   | SelectorValueNode
 
-function combinator(value: string): SelectorCombinatorNode {
+function combinator(value: Combinator): SelectorCombinatorNode {
   return {
     kind: 'combinator',
     value,
   }
 }
 
-function fun(value: string, nodes: SelectorAstNode[]): SelectorFunctionNode {
+function complex(nodes: SelectorAstNode[]): SelectorComplexNode {
   return {
-    kind: 'function',
-    value: value,
+    kind: 'complex',
     nodes,
   }
 }
 
-function selector(value: string): SelectorNode {
+function compound(nodes: SelectorAstNode[]): SelectorCompoundNode {
   return {
-    kind: 'selector',
-    value,
+    kind: 'compound',
+    nodes,
   }
 }
 
-function separator(value: string): SelectorSeparatorNode {
+export function fun(value: string, nodes: SelectorAstNode[]): SelectorFunctionNode {
   return {
-    kind: 'separator',
+    kind: 'function',
+    value,
+    nodes,
+  }
+}
+
+function list(nodes: SelectorAstNode[]): SelectorListNode {
+  return {
+    kind: 'list',
+    nodes,
+  }
+}
+
+export function selector(value: string): SelectorNode {
+  return {
+    kind: 'selector',
     value,
   }
 }
@@ -67,19 +99,110 @@ function value(value: string): SelectorValueNode {
   }
 }
 
-export function toCss(ast: SelectorAstNode[]) {
+export function isUniversalSelector(node: SelectorAstNode): boolean {
+  return node.kind === 'selector' && node.value.charCodeAt(0) === ASTERISK
+}
+
+export function isNestingSelector(node: SelectorAstNode): boolean {
+  return node.kind === 'selector' && node.value.charCodeAt(0) === AMPERSAND
+}
+
+export function isClassSelector(node: SelectorAstNode): boolean {
+  return node.kind === 'selector' && node.value.charCodeAt(0) === DOT
+}
+
+export function isIdSelector(node: SelectorAstNode): boolean {
+  return node.kind === 'selector' && node.value.charCodeAt(0) === HASH
+}
+
+export function isPseudoSelector(node: SelectorAstNode): boolean {
+  return node.kind === 'selector' && node.value.charCodeAt(0) === COLON
+}
+
+export function isAttributeSelector(node: SelectorAstNode): boolean {
+  return node.kind === 'selector' && node.value.charCodeAt(0) === OPEN_BRACKET
+}
+
+export function isTypeSelector(node: SelectorAstNode): boolean {
+  if (node.kind !== 'selector') return false
+
+  switch (node.value.charCodeAt(0)) {
+    case ASTERISK: // Universal selector
+    case AMPERSAND: // Nesting selector
+    case DOT: // Class selector
+    case HASH: // ID selector
+    case COLON: // Pseudo selector
+    case OPEN_BRACKET: // Attribute selector
+      return false
+
+    // We don't fully verify whether this is actually a proper type selector,
+    // but we assume it is one if it's not any of the other ones.
+    default:
+      return true
+  }
+}
+
+export function cloneAstNode<T extends SelectorAstNode>(node: T): T {
+  switch (node.kind) {
+    case 'combinator':
+    case 'selector':
+    case 'value':
+      return {
+        kind: node.kind,
+        value: node.value,
+      } as T
+
+    case 'complex':
+    case 'compound':
+    case 'list':
+      return {
+        kind: node.kind,
+        nodes: node.nodes.map(cloneAstNode),
+      } as T
+
+    case 'function':
+      return {
+        kind: node.kind,
+        value: node.value,
+        nodes: node.nodes.map(cloneAstNode),
+      } satisfies SelectorFunctionNode as T
+
+    default:
+      node satisfies never
+      throw new Error(`Unknown node kind: ${(node as any).kind}`)
+  }
+}
+
+export function toCss(ast: SelectorAstNode[], minify = false) {
   let css = ''
-  for (const node of ast) {
+  for (let node of ast) {
     switch (node.kind) {
-      case 'combinator':
       case 'selector':
-      case 'separator':
       case 'value': {
         css += node.value
         break
       }
+      case 'combinator': {
+        if (minify || node.value === ' ') {
+          css += node.value
+        } else {
+          css += ` ${node.value} `
+        }
+        break
+      }
+
       case 'function': {
-        css += node.value + '(' + toCss(node.nodes) + ')'
+        css += `${node.value}(${toCss(node.nodes, minify)})`
+        break
+      }
+      case 'complex':
+      case 'compound': {
+        css += toCss(node.nodes, minify)
+        break
+      }
+      case 'list': {
+        css += node.nodes.map((node) => toCss([node], minify)).join(minify ? ',' : ', ')
+        break
       }
     }
   }
@@ -92,10 +215,10 @@ const CLOSE_PAREN = 0x29
 const COLON = 0x3a
 const COMMA = 0x2c
 const DOUBLE_QUOTE = 0x22
-const FULL_STOP = 0x2e
+const DOT = 0x2e
 const GREATER_THAN = 0x3e
 const NEWLINE = 0x0a
-const NUMBER_SIGN = 0x23
+const HASH = 0x23
 const OPEN_BRACKET = 0x5b
 const OPEN_PAREN = 0x28
 const PLUS = 0x2b
@@ -111,18 +234,86 @@ export function parse(input: string) {
 
   let ast: SelectorAstNode[] = []
 
-  let stack: (SelectorFunctionNode | null)[] = []
+  let target = ast
 
-  let parent = null as SelectorFunctionNode | null
+  let containsCombinator = false
+
+  let contextStack: {
+    target: SelectorAstNode[]
+    currentList: SelectorListNode | null
+    containsCombinator: boolean
+  }[] = []
+
+  let currentList: SelectorListNode | null = null
 
   let buffer = ''
 
   let peekChar
 
+  function current(nodes = target): SelectorAstNode {
+    return nodes.length === 1 ? nodes[0] : containsCombinator ? complex(nodes) : compound(nodes)
+  }
+
+  function append(node: SelectorAstNode) {
+    let existing = target[target.length - 1]
+
+    if (existing?.kind === 'compound') {
+      existing.nodes.push(node)
+    } else if (existing && existing.kind !== 'list' && existing.kind !== 'combinator') {
+      target[target.length - 1] = compound([existing, node])
+    } else {
+      target.push(node)
+    }
+  }
+
   for (let i = 0; i < input.length; i++) {
     let currentChar = input.charCodeAt(i)
 
     switch (currentChar) {
+      // Handle selector lists
+      //
+      // ```css
+      // .foo, .bar {}
+      //     ^
+      // ```
+      case COMMA: {
+        // Flush remaining buffer as a selector
+        if (buffer.length > 0) {
+          append(selector(buffer))
+          buffer = ''
+        }
+
+        // Skip whitespace
+        for (; i + 1 < input.length; i++) {
+          peekChar = input.charCodeAt(i + 1)
+          if (peekChar !== NEWLINE && peekChar !== SPACE && peekChar !== TAB) {
+            break
+          }
+        }
+
+        // Add nodes to the current list
+        if (currentList) {
+          currentList.nodes.push(current())
+          target = []
+          containsCombinator = false
+        }
+
+        // Start a new list
+        else {
+          let nodes = target.splice(0)
+          let item = current(nodes)
+          let node = list([item])
+          target.push(node)
+          currentList = node
+          target = []
+          containsCombinator = false
+        }
+
+        break
+      }
+
+      // Handle combinators
+      //
       // E.g.:
       //
       // ```css
@@ -132,31 +323,24 @@ export function parse(input: string) {
       // .foo > .bar
       //     ^^^
       // ```
-      case COMMA:
       case GREATER_THAN:
       case NEWLINE:
       case SPACE:
       case PLUS:
       case TAB:
       case TILDE: {
-        // 1. Handle everything before the combinator as a selector
+        // Flush remaining buffer as a selector
         if (buffer.length > 0) {
-          let node = selector(buffer)
-          if (parent) {
-            parent.nodes.push(node)
-          } else {
-            ast.push(node)
-          }
+          append(selector(buffer))
           buffer = ''
         }
 
-        // 2. Look ahead and find the end of the combinator
+        // Look ahead and find the end of the combinator
         let start = i
         let end = i + 1
         for (; end < input.length; end++) {
           peekChar = input.charCodeAt(end)
           if (
-            peekChar !== COMMA &&
             peekChar !== GREATER_THAN &&
             peekChar !== NEWLINE &&
             peekChar !== SPACE &&
@@ -169,18 +353,21 @@ export function parse(input: string) {
         }
         i = end - 1
 
-        let contents = input.slice(start, end)
-        let node = contents.trim() === ',' ? separator(contents) : combinator(contents)
-        if (parent) {
-          parent.nodes.push(node)
-        } else {
-          ast.push(node)
+        let value = input.slice(start, end).trim()
+        if (
+          value === '' &&
+          (target.length === 0 || end >= input.length || input.charCodeAt(end) === COMMA)
+        ) {
+          break
         }
 
+        target.push(combinator((value === '' ? ' ' : value) as Combinator))
+        containsCombinator = true
+
         break
       }
 
-      // Start of a function call.
+      // Start of a function call
       //
       // E.g.:
       //
@@ -192,7 +379,7 @@ export function parse(input: string) {
         let node = fun(buffer, [])
         buffer = ''
 
-        // If the function is not one of the following, we combine all it's
+        // If the function is not one of the following, we combine all its
         // contents into a single value node
         if (
           node.value !== ':not' &&
@@ -204,7 +391,7 @@ export function parse(input: string) {
           let start = i + 1
           let nesting = 0
 
-          // Find the closing bracket.
+          // Find the closing bracket
           for (let j = i + 1; j < input.length; j++) {
             peekChar = input.charCodeAt(j)
             if (peekChar === OPEN_PAREN) {
@@ -221,31 +408,57 @@ export function parse(input: string) {
           }
           let end = i
 
-          node.nodes.push(value(input.slice(start, end)))
+          let contents = input.slice(start, end)
+
+          // `:nth-child(…)` and `:nth-last-child(…)` can contain an
+          // `of <complex-selector-list>` clause. The selector list must be
+          // parsed (e.g. to be able to substitute `&`), but the `An+B` part
+          // is not a selector so it stays an opaque value node. E.g.:
+          //
+          // ```css
+          // :nth-child(2n + 1 of .foo, .bar)
+          //            ^^^^^^^^^^ value
+          //                       ^^^^^^^^^^ selector list
+          // ```
+          if (node.value === ':nth-child' || node.value === ':nth-last-child') {
+            let idx = contents.indexOf('of ')
+            if (idx !== -1) {
+              node.nodes.push(
+                value(
+                  contents.slice(0, idx + 3), // value `2n + 1 of `
+                ),
+                ...parse(
+                  contents.slice(idx + 3), // `.foo, .bar`
+                ),
+              )
+              buffer = ''
+              i = end
+
+              append(node)
+
+              break
+            }
+          }
+
+          node.nodes.push(value(contents))
           buffer = ''
           i = end
 
-          if (parent) {
-            parent.nodes.push(node)
-          } else {
-            ast.push(node)
-          }
+          append(node)
 
           break
         }
 
-        if (parent) {
-          parent.nodes.push(node)
-        } else {
-          ast.push(node)
-        }
-        stack.push(node)
-        parent = node
+        append(node)
+        contextStack.push({ target, currentList, containsCombinator })
+        target = node.nodes
+        containsCombinator = false
+        currentList = null
 
         break
       }
 
-      // End of a function call.
+      // End of a function call
       //
       // E.g.:
       //
@@ -254,25 +467,27 @@ export function parse(input: string) {
       //             ^
       // ```
       case CLOSE_PAREN: {
-        let tail = stack.pop()
-
-        // Handle everything before the closing paren a selector
+        // Flush remaining buffer as a selector
         if (buffer.length > 0) {
-          let node = selector(buffer)
-          tail!.nodes.push(node)
+          append(selector(buffer))
           buffer = ''
         }
 
-        if (stack.length > 0) {
-          parent = stack[stack.length - 1]
-        } else {
-          parent = null
+        if (currentList) {
+          currentList.nodes.push(current())
+        } else if (containsCombinator) {
+          target.splice(0, target.length, complex(target.splice(0)))
         }
 
+        let context = contextStack.pop()
+        target = context?.target ?? ast
+        currentList = context?.currentList ?? null
+        containsCombinator = context?.containsCombinator ?? false
+
         break
       }
 
-      // Split compound selectors.
+      // Split compound selectors
       //
       // E.g.:
       //
@@ -280,24 +495,24 @@ export function parse(input: string) {
       // .foo.bar
       //     ^
       // ```
-      case FULL_STOP:
+      case DOT:
       case COLON:
-      case NUMBER_SIGN: {
-        // Handle everything before the combinator as a selector and
-        // start a new selector
+      case HASH: {
+        if (currentChar === COLON && buffer === ':') {
+          buffer += input[i]
+          break
+        }
+
+        // Handle everything before the combinator as a selector and start a new
+        // selector
         if (buffer.length > 0) {
-          let node = selector(buffer)
-          if (parent) {
-            parent.nodes.push(node)
-          } else {
-            ast.push(node)
-          }
+          append(selector(buffer))
         }
         buffer = input[i]
         break
       }
 
-      // Start of an attribute selector.
+      // Start of an attribute selector
       //
       // NOTE: Right now we don't care about the individual parts of the
       // attribute selector, we just want to find the matching closing bracket.
@@ -306,21 +521,16 @@ export function parse(input: string) {
       // future, then we can use the `AttributeSelectorParser` here (and even
       // inline it if needed)
       case OPEN_BRACKET: {
-        // Handle everything before the combinator as a selector
+        // Flush remaining buffer as a selector
         if (buffer.length > 0) {
-          let node = selector(buffer)
-          if (parent) {
-            parent.nodes.push(node)
-          } else {
-            ast.push(node)
-          }
+          append(selector(buffer))
+          buffer = ''
         }
-        buffer = ''
 
         let start = i
         let nesting = 0
 
-        // Find the closing bracket.
+        // Find the closing bracket
         for (let j = i + 1; j < input.length; j++) {
           peekChar = input.charCodeAt(j)
           if (peekChar === OPEN_BRACKET) {
@@ -336,12 +546,11 @@ export function parse(input: string) {
           }
         }
 
-        // Adjust `buffer` to include the string.
-        buffer += input.slice(start, i + 1)
+        append(selector(input.slice(start, i + 1)))
         break
       }
 
-      // Start of a string.
+      // Start of a string
       case SINGLE_QUOTE:
       case DOUBLE_QUOTE: {
         let start = i
@@ -353,52 +562,43 @@ export function parse(input: string) {
         //
         // ```css
         // "This is a string with a 'quote' in it"
-        //                          ^     ^         -> These are not the end of the string.
+        //                          ^     ^         -> These are not the end of the string
         // ```
         for (let j = i + 1; j < input.length; j++) {
           peekChar = input.charCodeAt(j)
-          // Current character is a `\` therefore the next character is escaped.
+          // Current character is a `\` therefore the next character is escaped
           if (peekChar === BACKSLASH) {
             j += 1
           }
 
-          // End of the string.
+          // End of the string
           else if (peekChar === currentChar) {
             i = j
             break
           }
         }
 
-        // Adjust `buffer` to include the string.
+        // Adjust `buffer` to include the string
         buffer += input.slice(start, i + 1)
         break
       }
 
-      // Nesting `&` is always a new selector.
-      // Universal `*` is always a new selector.
+      // Nesting `&` is always a new selector
+      // Universal `*` is always a new selector
       case AMPERSAND:
       case ASTERISK: {
-        // 1. Handle everything before the combinator as a selector
+        // Flush remaining buffer as a selector
         if (buffer.length > 0) {
-          let node = selector(buffer)
-          if (parent) {
-            parent.nodes.push(node)
-          } else {
-            ast.push(node)
-          }
+          append(selector(buffer))
           buffer = ''
         }
 
-        // 2. Handle the `&` or `*` as a selector on its own
-        if (parent) {
-          parent.nodes.push(selector(input[i]))
-        } else {
-          ast.push(selector(input[i]))
-        }
+        // Handle the `&` or `*` as a selector on its own
+        append(selector(input[i]))
         break
       }
 
-      // Escaped characters.
+      // Escaped characters
       case BACKSLASH: {
         buffer += input[i] + input[i + 1]
         i += 1
@@ -412,9 +612,15 @@ export function parse(input: string) {
     }
   }
 
-  // Collect the remainder as a word
+  // Collect the remainder as a selector
   if (buffer.length > 0) {
-    ast.push(selector(buffer))
+    append(selector(buffer))
+  }
+
+  if (currentList) {
+    currentList.nodes.push(current())
+  } else if (containsCombinator) {
+    target.splice(0, target.length, complex(target.splice(0)))
   }
 
   return ast
diff --git a/packages/tailwindcss/src/source-maps/source-map.test.ts b/packages/tailwindcss/src/source-maps/source-map.test.ts
index 02d8a434a..2bc7b0962 100644
--- a/packages/tailwindcss/src/source-maps/source-map.test.ts
+++ b/packages/tailwindcss/src/source-maps/source-map.test.ts
@@ -3,12 +3,13 @@ import dedent from 'dedent'
 import MagicString from 'magic-string'
 import * as fs from 'node:fs/promises'
 import * as path from 'node:path'
-import { SourceMapConsumer, SourceMapGenerator, type RawSourceMap } from 'source-map-js'
+import { SourceMapGenerator, type RawSourceMap } from 'source-map-js'
 import { test } from 'vitest'
 import { compile } from '..'
 import createPlugin from '../plugin'
 import { DefaultMap } from '../utils/default-map'
 import type { DecodedSource, DecodedSourceMap } from './source-map'
+import { visualizeSourceMap } from './visualize-source-map'
 const css = dedent
 
 interface RunOptions {
@@ -42,7 +43,7 @@ async function run({ input, candidates, options }: RunOptions) {
   let map = JSON.parse(rawMap.toString()) as RawSourceMap
 
   let sources = combined.sources
-  let annotations = formattedMappings(map)
+  let annotations = visualizeSourceMap(map, css)
 
   return { css, map, sources, annotations }
 }
@@ -80,72 +81,6 @@ function toRawSourceMap(map: DecodedSourceMap): string {
   return generator.toString()
 }
 
-/**
- * An string annotation that represents a source map
- *
- * It's not meant to be exhaustive just enough to
- * verify that the source map is working and that
- * lines are mapped back to the original source
- *
- * Including when using @apply with multiple classes
- */
-function formattedMappings(map: RawSourceMap) {
-  const smc = new SourceMapConsumer(map)
-  const annotations: Record<
-    number,
-    {
-      original: { start: [number, number]; end: [number, number] }
-      generated: { start: [number, number]; end: [number, number] }
-      source: string
-    }
-  > = {}
-
-  smc.eachMapping((mapping) => {
-    let annotation = (annotations[mapping.generatedLine] = annotations[mapping.generatedLine] || {
-      ...mapping,
-
-      original: {
-        start: [mapping.originalLine, mapping.originalColumn],
-        end: [mapping.originalLine, mapping.originalColumn],
-      },
-
-      generated: {
-        start: [mapping.generatedLine, mapping.generatedColumn],
-        end: [mapping.generatedLine, mapping.generatedColumn],
-      },
-
-      source: mapping.source,
-    })
-
-    annotation.generated.end[0] = mapping.generatedLine
-    annotation.generated.end[1] = mapping.generatedColumn
-
-    annotation.original.end[0] = mapping.originalLine!
-    annotation.original.end[1] = mapping.originalColumn!
-  })
-
-  return Object.values(annotations).map((annotation) => {
-    return `${annotation.source}: ${formatRange(annotation.generated)} <- ${formatRange(annotation.original)}`
-  })
-}
-
-function formatRange(range: { start: [number, number]; end: [number, number] }) {
-  if (range.start[0] === range.end[0]) {
-    // This range is on the same line
-    // and the columns are the same
-    if (range.start[1] === range.end[1]) {
-      return `${range.start[0]}:${range.start[1]}`
-    }
-
-    // This range is on the same line
-    // but the columns are different
-    return `${range.start[0]}:${range.start[1]}-${range.end[1]}`
-  }
-
-  // This range spans multiple lines
-  return `${range.start[0]}:${range.start[1]}-${range.end[0]}:${range.end[1]}`
-}
-
 test('source maps trace back to @import location', async ({ expect }) => {
   let { sources, annotations } = await run({
     input: css`
@@ -170,129 +105,484 @@ test('source maps trace back to @import location', async ({ expect }) => {
   // The output CSS should include annotations linking back to:
   // 1. The class definition `.foo`
   // 2. The `@apply underline` line inside of it
-  expect(annotations).toEqual([
-    'index.css: 1:0-41 <- 1:0-41',
-    'index.css: 2:0-13 <- 3:0-34',
-    'theme.css: 3:2-15 <- 1:0-15',
-    'theme.css: 4:4 <- 2:2-4:0',
-    'theme.css: 5:22 <- 4:22',
-    'theme.css: 6:4 <- 6:2-8:0',
-    'theme.css: 7:13 <- 8:13',
-    'theme.css: 8:4-43 <- 494:2-54',
-    'theme.css: 9:4-48 <- 497:2-59',
-    'index.css: 12:0-12 <- 4:0-37',
-    'preflight.css: 13:2-59 <- 7:0-11:23',
-    'preflight.css: 14:4-26 <- 12:2-24',
-    'preflight.css: 15:4-13 <- 13:2-11',
-    'preflight.css: 16:4-14 <- 14:2-12',
-    'preflight.css: 17:4-19 <- 15:2-17',
-    'preflight.css: 19:2-14 <- 28:0-29:6',
-    'preflight.css: 20:4-20 <- 30:2-18',
-    'preflight.css: 21:4-34 <- 31:2-32',
-    'preflight.css: 22:4-15 <- 32:2-13',
-    'preflight.css: 23:4-159 <- 33:2-42:3',
-    'preflight.css: 24:4-71 <- 43:2-73',
-    'preflight.css: 25:4-75 <- 44:2-77',
-    'preflight.css: 26:4-44 <- 45:2-42',
-    'preflight.css: 28:2-5 <- 54:0-3',
-    'preflight.css: 29:4-13 <- 55:2-11',
-    'preflight.css: 30:4-18 <- 56:2-16',
-    'preflight.css: 31:4-25 <- 57:2-23',
-    'preflight.css: 33:2-22 <- 64:0-20',
-    'preflight.css: 34:4-45 <- 65:2-43',
-    'preflight.css: 35:4-37 <- 66:2-35',
-    'preflight.css: 37:2-25 <- 73:0-78:3',
-    'preflight.css: 38:4-22 <- 79:2-20',
-    'preflight.css: 39:4-24 <- 80:2-22',
-    'preflight.css: 41:2-4 <- 87:0-2',
-    'preflight.css: 42:4-18 <- 88:2-16',
-    'preflight.css: 43:4-36 <- 89:2-34',
-    'preflight.css: 44:4-28 <- 90:2-26',
-    'preflight.css: 46:2-12 <- 97:0-98:7',
-    'preflight.css: 47:4-23 <- 99:2-21',
-    'preflight.css: 49:2-23 <- 109:0-112:4',
-    'preflight.css: 50:4-148 <- 113:2-123:3',
-    'preflight.css: 51:4-76 <- 124:2-78',
-    'preflight.css: 52:4-80 <- 125:2-82',
-    'preflight.css: 53:4-18 <- 126:2-16',
-    'preflight.css: 55:2-8 <- 133:0-6',
-    'preflight.css: 56:4-18 <- 134:2-16',
-    'preflight.css: 58:2-11 <- 141:0-142:4',
-    'preflight.css: 59:4-18 <- 143:2-16',
-    'preflight.css: 60:4-18 <- 144:2-16',
-    'preflight.css: 61:4-22 <- 145:2-20',
-    'preflight.css: 62:4-28 <- 146:2-26',
-    'preflight.css: 64:2-6 <- 149:0-4',
-    'preflight.css: 65:4-19 <- 150:2-17',
-    'preflight.css: 67:2-6 <- 153:0-4',
-    'preflight.css: 68:4-15 <- 154:2-13',
-    'preflight.css: 70:2-8 <- 163:0-6',
-    'preflight.css: 71:4-18 <- 164:2-16',
-    'preflight.css: 72:4-25 <- 165:2-23',
-    'preflight.css: 73:4-29 <- 166:2-27',
-    'preflight.css: 75:2-18 <- 173:0-16',
-    'preflight.css: 76:4-17 <- 174:2-15',
-    'preflight.css: 78:2-11 <- 181:0-9',
-    'preflight.css: 79:4-28 <- 182:2-26',
-    'preflight.css: 81:2-10 <- 189:0-8',
-    'preflight.css: 82:4-22 <- 190:2-20',
-    'preflight.css: 84:2-15 <- 197:0-199:5',
-    'preflight.css: 85:4-20 <- 200:2-18',
-    'preflight.css: 87:2-56 <- 209:0-216:7',
-    'preflight.css: 88:4-18 <- 217:2-16',
-    'preflight.css: 89:4-26 <- 218:2-24',
-    'preflight.css: 91:2-13 <- 225:0-226:6',
-    'preflight.css: 92:4-19 <- 227:2-17',
-    'preflight.css: 93:4-16 <- 228:2-14',
-    'preflight.css: 95:2-68 <- 238:0-243:23',
-    'preflight.css: 96:4-17 <- 244:2-15',
-    'preflight.css: 97:4-34 <- 245:2-32',
-    'preflight.css: 98:4-36 <- 246:2-34',
-    'preflight.css: 99:4-27 <- 247:2-25',
-    'preflight.css: 100:4-18 <- 248:2-16',
-    'preflight.css: 101:4-20 <- 249:2-18',
-    'preflight.css: 102:4-33 <- 250:2-31',
-    'preflight.css: 103:4-14 <- 251:2-12',
-    'preflight.css: 105:2-49 <- 258:0-47',
-    'preflight.css: 106:4-23 <- 259:2-21',
-    'preflight.css: 108:2-56 <- 266:0-54',
-    'preflight.css: 109:4-30 <- 267:2-28',
-    'preflight.css: 111:2-25 <- 274:0-23',
-    'preflight.css: 112:4-26 <- 275:2-24',
-    'preflight.css: 114:2-16 <- 282:0-14',
-    'preflight.css: 115:4-14 <- 283:2-12',
-    'preflight.css: 117:2-92 <- 291:0-292:49',
-    'preflight.css: 118:4-18 <- 293:2-16',
-    'preflight.css: 119:6-25 <- 294:4-61',
-    'preflight.css: 120:6-53 <- 294:4-61',
-    'preflight.css: 121:8-65 <- 294:4-61',
-    'preflight.css: 125:2-11 <- 302:0-9',
-    'preflight.css: 126:4-20 <- 303:2-18',
-    'preflight.css: 128:2-30 <- 310:0-28',
-    'preflight.css: 129:4-28 <- 311:2-26',
-    'preflight.css: 131:2-32 <- 319:0-30',
-    'preflight.css: 132:4-19 <- 320:2-17',
-    'preflight.css: 133:4-23 <- 321:2-21',
-    'preflight.css: 135:2-26 <- 328:0-24',
-    'preflight.css: 136:4-24 <- 329:2-22',
-    'preflight.css: 138:2-41 <- 336:0-39',
-    'preflight.css: 139:4-14 <- 337:2-12',
-    'preflight.css: 141:2-329 <- 340:0-348:39',
-    'preflight.css: 142:4-20 <- 349:2-18',
-    'preflight.css: 144:2-38 <- 356:0-36',
-    'preflight.css: 145:4-18 <- 357:2-16',
-    'preflight.css: 147:2-19 <- 364:0-17',
-    'preflight.css: 148:4-20 <- 365:2-18',
-    'preflight.css: 150:2-96 <- 372:0-374:23',
-    'preflight.css: 151:4-22 <- 375:2-20',
-    'preflight.css: 153:2-59 <- 382:0-383:28',
-    'preflight.css: 154:4-16 <- 384:2-14',
-    'preflight.css: 156:2-47 <- 391:0-45',
-    'preflight.css: 157:4-28 <- 392:2-26',
-    'index.css: 160:0-16 <- 5:0-42',
-    'input.css: 161:0-5 <- 3:0-5',
-    'input.css: 162:2-33 <- 4:9-18',
-  ])
+  expect(annotations).toMatchInlineSnapshot(`
+    "
+         output.css                                                                                      |      original
+                                                                                                         | 
+                                                                                                         |      --- index.css ---
+      1  @layer theme, base, components, utilities;                                                      |   1  @layer theme, base, components, utilities;
+         ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ A @ 1:0-41                                            |      ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ A @ 1:0-41
+      2  @layer theme {                                                                                  |   3  @import './theme.css' layer(theme);
+         ^^^^^^^^^^^^^ B @ 2:0-13                                                                        |      ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ B @ 3:0-34
+                                                                                                         |      --- theme.css ---
+      3    :root, :host {                                                                                |   1  @theme default {
+           ^^^^^^^^^^^^^ C @ 3:2-15                                                                      |      ^^^^^^^^^^^^^^^ C @ 1:0-15
+      4      --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', 'N... |   2    --font-sans:
+             ^ D @ 4:4                                                                                   |        ^ D @ 2:2
+      4      --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', 'N... |   3      -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', 'Noto Sans', Ar...
+             ^ E @ 4:4                                                                                   |      ^ E @ 3:0
+      4      --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', 'N... |   4      sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
+             ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^... F @ 4:4-5:0 |      ^ F @ 4:0
+      5      sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';   |   4      sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
+                                                                                        ... G @ 5:92-6:0 |                                                                                         ... G @ 4:92
+                                                                                                         |   5    --font-serif: ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif;
+      6      --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', '... |   6    --font-mono:
+             ^ H @ 6:4                                                                                   |        ^ H @ 6:2
+      6      --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', '... |   7      ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New',
+             ^ I @ 6:4                                                                                   |      ^ I @ 7:0
+      6      --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', '... |   8      monospace;
+             ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^... J @ 6:4-7:0 |      ^ J @ 8:0
+      7      monospace;                                                                                  |   8      monospace;
+                      ^ K @ 7:13-8:0                                                                     |                   ^ K @ 8:13
+      8      --default-font-family: var(--font-sans);                                                    | 494    --default-font-family: --theme(--font-sans, initial);
+             ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ L @ 8:4-43                                          |        ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ L @ 494:2-54
+                                                                                                         | 495    --default-font-feature-settings: --theme(--font-sans--font-feature-settings, initial);
+                                                                                                         | 496    --default-font-variation-settings: --theme(--font-sans--font-variation-settings, initial);
+      9      --default-mono-font-family: var(--font-mono);                                               | 497    --default-mono-font-family: --theme(--font-mono, initial);
+             ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ M @ 9:4-48                                     |        ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ M @ 497:2-59
+     10    }                                                                                             | 
+     11  }                                                                                               | 
+                                                                                                         |      --- index.css ---
+     12  @layer base {                                                                                   |   4  @import './preflight.css' layer(base);
+         ^^^^^^^^^^^^ N @ 12:0-12                                                                        |      ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ N @ 4:0-37
+                                                                                                         |      --- preflight.css ---
+     13    *, ::after, ::before, ::backdrop, ::file-selector-button {                                    |   7  *,
+           ^ O @ 13:2                                                                                    |      ^ O @ 7:0
+     13    *, ::after, ::before, ::backdrop, ::file-selector-button {                                    |   8  ::after,
+           ^ P @ 13:2                                                                                    |      ^ P @ 8:0
+     13    *, ::after, ::before, ::backdrop, ::file-selector-button {                                    |   9  ::before,
+           ^ Q @ 13:2                                                                                    |      ^ Q @ 9:0
+     13    *, ::after, ::before, ::backdrop, ::file-selector-button {                                    |  10  ::backdrop,
+           ^ R @ 13:2                                                                                    |      ^ R @ 10:0
+     13    *, ::after, ::before, ::backdrop, ::file-selector-button {                                    |  11  ::file-selector-button {
+           ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ S @ 13:2-59                         |      ^^^^^^^^^^^^^^^^^^^^^^^ S @ 11:0-23
+     14      box-sizing: border-box;                                                                     |  12    box-sizing: border-box; /* 1 */
+             ^^^^^^^^^^^^^^^^^^^^^^ T @ 14:4-26                                                          |        ^^^^^^^^^^^^^^^^^^^^^^ T @ 12:2-24
+     15      margin: 0;                                                                                  |  13    margin: 0; /* 2 */
+             ^^^^^^^^^ U @ 15:4-13                                                                       |        ^^^^^^^^^ U @ 13:2-11
+     16      padding: 0;                                                                                 |  14    padding: 0; /* 2 */
+             ^^^^^^^^^^ V @ 16:4-14                                                                      |        ^^^^^^^^^^ V @ 14:2-12
+     17      border: 0 solid;                                                                            |  15    border: 0 solid; /* 3 */
+             ^^^^^^^^^^^^^^^ W @ 17:4-19                                                                 |        ^^^^^^^^^^^^^^^ W @ 15:2-17
+                                                                                                         |  16  }
+     18    }                                                                                             | 
+     19    html, :host {                                                                                 |  28  html,
+           ^ X @ 19:2                                                                                    |      ^ X @ 28:0
+     19    html, :host {                                                                                 |  29  :host {
+           ^^^^^^^^^^^^ Y @ 19:2-14                                                                      |      ^^^^^^ Y @ 29:0-6
+     20      line-height: 1.5;                                                                           |  30    line-height: 1.5; /* 1 */
+             ^^^^^^^^^^^^^^^^ Z @ 20:4-20                                                                |        ^^^^^^^^^^^^^^^^ Z @ 30:2-18
+     21      -webkit-text-size-adjust: 100%;                                                             |  31    -webkit-text-size-adjust: 100%; /* 2 */
+             ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ AA @ 21:4-34                                                 |        ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ AA @ 31:2-32
+     22      tab-size: 4;                                                                                |  32    tab-size: 4; /* 3 */
+             ^^^^^^^^^^^ AB @ 22:4-15                                                                    |        ^^^^^^^^^^^ AB @ 32:2-13
+     23      font-family: var(--default-font-family, -apple-system, BlinkMacSystemFont, 'Segoe UI', R... |  33    font-family: --theme(
+             ^ AC @ 23:4                                                                                 |        ^ AC @ 33:2
+     23      font-family: var(--default-font-family, -apple-system, BlinkMacSystemFont, 'Segoe UI', R... |  34      --default-font-family,
+             ^ AD @ 23:4                                                                                 |      ^ AD @ 34:0
+     23      font-family: var(--default-font-family, -apple-system, BlinkMacSystemFont, 'Segoe UI', R... |  35      -apple-system,
+             ^ AE @ 23:4                                                                                 |      ^ AE @ 35:0
+     23      font-family: var(--default-font-family, -apple-system, BlinkMacSystemFont, 'Segoe UI', R... |  36      BlinkMacSystemFont,
+             ^ AF @ 23:4                                                                                 |      ^ AF @ 36:0
+     23      font-family: var(--default-font-family, -apple-system, BlinkMacSystemFont, 'Segoe UI', R... |  37      'Segoe UI',
+             ^ AG @ 23:4                                                                                 |      ^ AG @ 37:0
+     23      font-family: var(--default-font-family, -apple-system, BlinkMacSystemFont, 'Segoe UI', R... |  38      Roboto,
+             ^ AH @ 23:4                                                                                 |      ^ AH @ 38:0
+     23      font-family: var(--default-font-family, -apple-system, BlinkMacSystemFont, 'Segoe UI', R... |  39      'Helvetica Neue',
+             ^ AI @ 23:4                                                                                 |      ^ AI @ 39:0
+     23      font-family: var(--default-font-family, -apple-system, BlinkMacSystemFont, 'Segoe UI', R... |  40      'Noto Sans',
+             ^ AJ @ 23:4                                                                                 |      ^ AJ @ 40:0
+     23      font-family: var(--default-font-family, -apple-system, BlinkMacSystemFont, 'Segoe UI', R... |  41      Arial,
+             ^ AK @ 23:4                                                                                 |      ^ AK @ 41:0
+     23      font-family: var(--default-font-family, -apple-system, BlinkMacSystemFont, 'Segoe UI', R... |  42      sans-serif,
+             ^ AL @ 23:4                                                                                 |      ^ AL @ 42:0
+     23      font-family: var(--default-font-family, -apple-system, BlinkMacSystemFont, 'Segoe UI', R... |  43      'Apple Color Emoji',
+             ^ AM @ 23:4                                                                                 |      ^ AM @ 43:0
+     23      font-family: var(--default-font-family, -apple-system, BlinkMacSystemFont, 'Segoe UI', R... |  44      'Segoe UI Emoji',
+             ^ AN @ 23:4                                                                                 |      ^ AN @ 44:0
+     23      font-family: var(--default-font-family, -apple-system, BlinkMacSystemFont, 'Segoe UI', R... |  45      'Segoe UI Symbol',
+             ^ AO @ 23:4                                                                                 |      ^ AO @ 45:0
+     23      font-family: var(--default-font-family, -apple-system, BlinkMacSystemFont, 'Segoe UI', R... |  46      'Noto Color Emoji'
+             ^ AP @ 23:4                                                                                 |      ^ AP @ 46:0
+     23      font-family: var(--default-font-family, -apple-system, BlinkMacSystemFont, 'Segoe UI', R... |  47    ); /* 4 */
+             ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^... AQ @ 23:4-226 |      ^^^ AQ @ 47:0-3
+     24      font-feature-settings: var(--default-font-feature-settings, normal);                        |  48    font-feature-settings: --theme(--default-font-feature-settings, normal); /* 5 */
+             ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ AR @ 24:4-71            |        ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ AR @ 48:2-73
+     25      font-variation-settings: var(--default-font-variation-settings, normal);                    |  49    font-variation-settings: --theme(--default-font-variation-settings, normal); /* 6 */
+             ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ AS @ 25:4-75        |        ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ AS @ 49:2-77
+     26      -webkit-tap-highlight-color: transparent;                                                   |  50    -webkit-tap-highlight-color: transparent; /* 7 */
+             ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ AT @ 26:4-44                                       |        ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ AT @ 50:2-42
+                                                                                                         |  51  }
+     27    }                                                                                             | 
+     28    hr {                                                                                          |  59  hr {
+           ^^^ AU @ 28:2-5                                                                               |      ^^^ AU @ 59:0-3
+     29      height: 0;                                                                                  |  60    height: 0; /* 1 */
+             ^^^^^^^^^ AV @ 29:4-13                                                                      |        ^^^^^^^^^ AV @ 60:2-11
+     30      color: inherit;                                                                             |  61    color: inherit; /* 2 */
+             ^^^^^^^^^^^^^^ AW @ 30:4-18                                                                 |        ^^^^^^^^^^^^^^ AW @ 61:2-16
+     31      border-top-width: 1px;                                                                      |  62    border-top-width: 1px; /* 3 */
+             ^^^^^^^^^^^^^^^^^^^^^ AX @ 31:4-25                                                          |        ^^^^^^^^^^^^^^^^^^^^^ AX @ 62:2-23
+                                                                                                         |  63  }
+     32    }                                                                                             | 
+     33    abbr:where([title]) {                                                                         |  69  abbr:where([title]) {
+           ^^^^^^^^^^^^^^^^^^^^ AY @ 33:2-22                                                             |      ^^^^^^^^^^^^^^^^^^^^ AY @ 69:0-20
+     34      -webkit-text-decoration: underline dotted;                                                  |  70    -webkit-text-decoration: underline dotted;
+             ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ AZ @ 34:4-45                                      |        ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ AZ @ 70:2-43
+     35      text-decoration: underline dotted;                                                          |  71    text-decoration: underline dotted;
+             ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ BA @ 35:4-37                                              |        ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ BA @ 71:2-35
+                                                                                                         |  72  }
+     36    }                                                                                             | 
+     37    h1, h2, h3, h4, h5, h6 {                                                                      |  78  h1,
+           ^ BB @ 37:2                                                                                   |      ^ BB @ 78:0
+     37    h1, h2, h3, h4, h5, h6 {                                                                      |  79  h2,
+           ^ BC @ 37:2                                                                                   |      ^ BC @ 79:0
+     37    h1, h2, h3, h4, h5, h6 {                                                                      |  80  h3,
+           ^ BD @ 37:2                                                                                   |      ^ BD @ 80:0
+     37    h1, h2, h3, h4, h5, h6 {                                                                      |  81  h4,
+           ^ BE @ 37:2                                                                                   |      ^ BE @ 81:0
+     37    h1, h2, h3, h4, h5, h6 {                                                                      |  82  h5,
+           ^ BF @ 37:2                                                                                   |      ^ BF @ 82:0
+     37    h1, h2, h3, h4, h5, h6 {                                                                      |  83  h6 {
+           ^^^^^^^^^^^^^^^^^^^^^^^ BG @ 37:2-25                                                          |      ^^^ BG @ 83:0-3
+     38      font-size: inherit;                                                                         |  84    font-size: inherit;
+             ^^^^^^^^^^^^^^^^^^ BH @ 38:4-22                                                             |        ^^^^^^^^^^^^^^^^^^ BH @ 84:2-20
+     39      font-weight: inherit;                                                                       |  85    font-weight: inherit;
+             ^^^^^^^^^^^^^^^^^^^^ BI @ 39:4-24                                                           |        ^^^^^^^^^^^^^^^^^^^^ BI @ 85:2-22
+                                                                                                         |  86  }
+     40    }                                                                                             | 
+     41    a {                                                                                           |  92  a {
+           ^^ BJ @ 41:2-4                                                                                |      ^^ BJ @ 92:0-2
+     42      color: inherit;                                                                             |  93    color: inherit;
+             ^^^^^^^^^^^^^^ BK @ 42:4-18                                                                 |        ^^^^^^^^^^^^^^ BK @ 93:2-16
+     43      -webkit-text-decoration: inherit;                                                           |  94    -webkit-text-decoration: inherit;
+             ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ BL @ 43:4-36                                               |        ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ BL @ 94:2-34
+     44      text-decoration: inherit;                                                                   |  95    text-decoration: inherit;
+             ^^^^^^^^^^^^^^^^^^^^^^^^ BM @ 44:4-28                                                       |        ^^^^^^^^^^^^^^^^^^^^^^^^ BM @ 95:2-26
+                                                                                                         |  96  }
+     45    }                                                                                             | 
+     46    b, strong {                                                                                   | 102  b,
+           ^ BN @ 46:2                                                                                   |      ^ BN @ 102:0
+     46    b, strong {                                                                                   | 103  strong {
+           ^^^^^^^^^^ BO @ 46:2-12                                                                       |      ^^^^^^^ BO @ 103:0-7
+     47      font-weight: bolder;                                                                        | 104    font-weight: bolder;
+             ^^^^^^^^^^^^^^^^^^^ BP @ 47:4-23                                                            |        ^^^^^^^^^^^^^^^^^^^ BP @ 104:2-21
+                                                                                                         | 105  }
+     48    }                                                                                             | 
+     49    code, kbd, samp, pre {                                                                        | 114  code,
+           ^ BQ @ 49:2                                                                                   |      ^ BQ @ 114:0
+     49    code, kbd, samp, pre {                                                                        | 115  kbd,
+           ^ BR @ 49:2                                                                                   |      ^ BR @ 115:0
+     49    code, kbd, samp, pre {                                                                        | 116  samp,
+           ^ BS @ 49:2                                                                                   |      ^ BS @ 116:0
+     49    code, kbd, samp, pre {                                                                        | 117  pre {
+           ^^^^^^^^^^^^^^^^^^^^^ BT @ 49:2-23                                                            |      ^^^^ BT @ 117:0-4
+     50      font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco... | 118    font-family: --theme(
+             ^ BU @ 50:4                                                                                 |        ^ BU @ 118:2
+     50      font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco... | 119      --default-mono-font-family,
+             ^ BV @ 50:4                                                                                 |      ^ BV @ 119:0
+     50      font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco... | 120      ui-monospace,
+             ^ BW @ 50:4                                                                                 |      ^ BW @ 120:0
+     50      font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco... | 121      SFMono-Regular,
+             ^ BX @ 50:4                                                                                 |      ^ BX @ 121:0
+     50      font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco... | 122      Menlo,
+             ^ BY @ 50:4                                                                                 |      ^ BY @ 122:0
+     50      font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco... | 123      Monaco,
+             ^ BZ @ 50:4                                                                                 |      ^ BZ @ 123:0
+     50      font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco... | 124      Consolas,
+             ^ CA @ 50:4                                                                                 |      ^ CA @ 124:0
+     50      font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco... | 125      'Liberation Mono',
+             ^ CB @ 50:4                                                                                 |      ^ CB @ 125:0
+     50      font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco... | 126      'Courier New',
+             ^ CC @ 50:4                                                                                 |      ^ CC @ 126:0
+     50      font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco... | 127      monospace
+             ^ CD @ 50:4                                                                                 |      ^ CD @ 127:0
+     50      font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco... | 128    ); /* 1 */
+             ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^... CE @ 50:4-148 |      ^^^ CE @ 128:0-3
+     51      font-feature-settings: var(--default-mono-font-feature-settings, normal);                   | 129    font-feature-settings: --theme(--default-mono-font-feature-settings, normal); /* 2 */
+             ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ CF @ 51:4-76       |        ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ CF @ 129:2-78
+     52      font-variation-settings: var(--default-mono-font-variation-settings, normal);               | 130    font-variation-settings: --theme(--default-mono-font-variation-settings, normal); /* 3 */
+             ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ CG @ 52:4-80   |        ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^... CG @ 130:2-82
+     53      font-size: 1em;                                                                             | 131    font-size: 1em; /* 4 */
+             ^^^^^^^^^^^^^^ CH @ 53:4-18                                                                 |        ^^^^^^^^^^^^^^ CH @ 131:2-16
+                                                                                                         | 132  }
+     54    }                                                                                             | 
+     55    small {                                                                                       | 138  small {
+           ^^^^^^ CI @ 55:2-8                                                                            |      ^^^^^^ CI @ 138:0-6
+     56      font-size: 80%;                                                                             | 139    font-size: 80%;
+             ^^^^^^^^^^^^^^ CJ @ 56:4-18                                                                 |        ^^^^^^^^^^^^^^ CJ @ 139:2-16
+                                                                                                         | 140  }
+     57    }                                                                                             | 
+     58    sub, sup {                                                                                    | 146  sub,
+           ^ CK @ 58:2                                                                                   |      ^ CK @ 146:0
+     58    sub, sup {                                                                                    | 147  sup {
+           ^^^^^^^^^ CL @ 58:2-11                                                                        |      ^^^^ CL @ 147:0-4
+     59      font-size: 75%;                                                                             | 148    font-size: 75%;
+             ^^^^^^^^^^^^^^ CM @ 59:4-18                                                                 |        ^^^^^^^^^^^^^^ CM @ 148:2-16
+     60      line-height: 0;                                                                             | 149    line-height: 0;
+             ^^^^^^^^^^^^^^ CN @ 60:4-18                                                                 |        ^^^^^^^^^^^^^^ CN @ 149:2-16
+     61      position: relative;                                                                         | 150    position: relative;
+             ^^^^^^^^^^^^^^^^^^ CO @ 61:4-22                                                             |        ^^^^^^^^^^^^^^^^^^ CO @ 150:2-20
+     62      vertical-align: baseline;                                                                   | 151    vertical-align: baseline;
+             ^^^^^^^^^^^^^^^^^^^^^^^^ CP @ 62:4-28                                                       |        ^^^^^^^^^^^^^^^^^^^^^^^^ CP @ 151:2-26
+                                                                                                         | 152  }
+     63    }                                                                                             | 
+     64    sub {                                                                                         | 154  sub {
+           ^^^^ CQ @ 64:2-6                                                                              |      ^^^^ CQ @ 154:0-4
+     65      bottom: -0.25em;                                                                            | 155    bottom: -0.25em;
+             ^^^^^^^^^^^^^^^ CR @ 65:4-19                                                                |        ^^^^^^^^^^^^^^^ CR @ 155:2-17
+                                                                                                         | 156  }
+     66    }                                                                                             | 
+     67    sup {                                                                                         | 158  sup {
+           ^^^^ CS @ 67:2-6                                                                              |      ^^^^ CS @ 158:0-4
+     68      top: -0.5em;                                                                                | 159    top: -0.5em;
+             ^^^^^^^^^^^ CT @ 68:4-15                                                                    |        ^^^^^^^^^^^ CT @ 159:2-13
+                                                                                                         | 160  }
+     69    }                                                                                             | 
+     70    table {                                                                                       | 168  table {
+           ^^^^^^ CU @ 70:2-8                                                                            |      ^^^^^^ CU @ 168:0-6
+     71      text-indent: 0;                                                                             | 169    text-indent: 0; /* 1 */
+             ^^^^^^^^^^^^^^ CV @ 71:4-18                                                                 |        ^^^^^^^^^^^^^^ CV @ 169:2-16
+     72      border-color: inherit;                                                                      | 170    border-color: inherit; /* 2 */
+             ^^^^^^^^^^^^^^^^^^^^^ CW @ 72:4-25                                                          |        ^^^^^^^^^^^^^^^^^^^^^ CW @ 170:2-23
+     73      border-collapse: collapse;                                                                  | 171    border-collapse: collapse; /* 3 */
+             ^^^^^^^^^^^^^^^^^^^^^^^^^ CX @ 73:4-29                                                      |        ^^^^^^^^^^^^^^^^^^^^^^^^^ CX @ 171:2-27
+                                                                                                         | 172  }
+     74    }                                                                                             | 
+     75    :-moz-focusring:where(:not(iframe)) {                                                         | 178  :-moz-focusring:where(:not(iframe)) {
+           ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ CY @ 75:2-38                                             |      ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ CY @ 178:0-36
+     76      outline: auto;                                                                              | 179    outline: auto;
+             ^^^^^^^^^^^^^ CZ @ 76:4-17                                                                  |        ^^^^^^^^^^^^^ CZ @ 179:2-15
+                                                                                                         | 180  }
+     77    }                                                                                             | 
+     78    progress {                                                                                    | 186  progress {
+           ^^^^^^^^^ DA @ 78:2-11                                                                        |      ^^^^^^^^^ DA @ 186:0-9
+     79      vertical-align: baseline;                                                                   | 187    vertical-align: baseline;
+             ^^^^^^^^^^^^^^^^^^^^^^^^ DB @ 79:4-28                                                       |        ^^^^^^^^^^^^^^^^^^^^^^^^ DB @ 187:2-26
+                                                                                                         | 188  }
+     80    }                                                                                             | 
+     81    summary {                                                                                     | 194  summary {
+           ^^^^^^^^ DC @ 81:2-10                                                                         |      ^^^^^^^^ DC @ 194:0-8
+     82      display: list-item;                                                                         | 195    display: list-item;
+             ^^^^^^^^^^^^^^^^^^ DD @ 82:4-22                                                             |        ^^^^^^^^^^^^^^^^^^ DD @ 195:2-20
+                                                                                                         | 196  }
+     83    }                                                                                             | 
+     84    ol, ul, menu {                                                                                | 202  ol,
+           ^ DE @ 84:2                                                                                   |      ^ DE @ 202:0
+     84    ol, ul, menu {                                                                                | 203  ul,
+           ^ DF @ 84:2                                                                                   |      ^ DF @ 203:0
+     84    ol, ul, menu {                                                                                | 204  menu {
+           ^^^^^^^^^^^^^ DG @ 84:2-15                                                                    |      ^^^^^ DG @ 204:0-5
+     85      list-style: none;                                                                           | 205    list-style: none;
+             ^^^^^^^^^^^^^^^^ DH @ 85:4-20                                                               |        ^^^^^^^^^^^^^^^^ DH @ 205:2-18
+                                                                                                         | 206  }
+     86    }                                                                                             | 
+     87    img, svg, video, canvas, audio, iframe, embed, object {                                       | 214  img,
+           ^ DI @ 87:2                                                                                   |      ^ DI @ 214:0
+     87    img, svg, video, canvas, audio, iframe, embed, object {                                       | 215  svg,
+           ^ DJ @ 87:2                                                                                   |      ^ DJ @ 215:0
+     87    img, svg, video, canvas, audio, iframe, embed, object {                                       | 216  video,
+           ^ DK @ 87:2                                                                                   |      ^ DK @ 216:0
+     87    img, svg, video, canvas, audio, iframe, embed, object {                                       | 217  canvas,
+           ^ DL @ 87:2                                                                                   |      ^ DL @ 217:0
+     87    img, svg, video, canvas, audio, iframe, embed, object {                                       | 218  audio,
+           ^ DM @ 87:2                                                                                   |      ^ DM @ 218:0
+     87    img, svg, video, canvas, audio, iframe, embed, object {                                       | 219  iframe,
+           ^ DN @ 87:2                                                                                   |      ^ DN @ 219:0
+     87    img, svg, video, canvas, audio, iframe, embed, object {                                       | 220  embed,
+           ^ DO @ 87:2                                                                                   |      ^ DO @ 220:0
+     87    img, svg, video, canvas, audio, iframe, embed, object {                                       | 221  object {
+           ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ DP @ 87:2-56                           |      ^^^^^^^ DP @ 221:0-7
+     88      display: block;                                                                             | 222    display: block; /* 1 */
+             ^^^^^^^^^^^^^^ DQ @ 88:4-18                                                                 |        ^^^^^^^^^^^^^^ DQ @ 222:2-16
+     89      vertical-align: middle;                                                                     | 223    vertical-align: middle; /* 2 */
+             ^^^^^^^^^^^^^^^^^^^^^^ DR @ 89:4-26                                                         |        ^^^^^^^^^^^^^^^^^^^^^^ DR @ 223:2-24
+                                                                                                         | 224  }
+     90    }                                                                                             | 
+     91    img, video {                                                                                  | 230  img,
+           ^ DS @ 91:2                                                                                   |      ^ DS @ 230:0
+     91    img, video {                                                                                  | 231  video {
+           ^^^^^^^^^^^ DT @ 91:2-13                                                                      |      ^^^^^^ DT @ 231:0-6
+     92      max-width: 100%;                                                                            | 232    max-width: 100%;
+             ^^^^^^^^^^^^^^^ DU @ 92:4-19                                                                |        ^^^^^^^^^^^^^^^ DU @ 232:2-17
+     93      height: auto;                                                                               | 233    height: auto;
+             ^^^^^^^^^^^^ DV @ 93:4-16                                                                   |        ^^^^^^^^^^^^ DV @ 233:2-14
+                                                                                                         | 234  }
+     94    }                                                                                             | 
+     95    button, input, select, optgroup, textarea, ::file-selector-button {                           | 243  button,
+           ^ DW @ 95:2                                                                                   |      ^ DW @ 243:0
+     95    button, input, select, optgroup, textarea, ::file-selector-button {                           | 244  input,
+           ^ DX @ 95:2                                                                                   |      ^ DX @ 244:0
+     95    button, input, select, optgroup, textarea, ::file-selector-button {                           | 245  select,
+           ^ DY @ 95:2                                                                                   |      ^ DY @ 245:0
+     95    button, input, select, optgroup, textarea, ::file-selector-button {                           | 246  optgroup,
+           ^ DZ @ 95:2                                                                                   |      ^ DZ @ 246:0
+     95    button, input, select, optgroup, textarea, ::file-selector-button {                           | 247  textarea,
+           ^ EA @ 95:2                                                                                   |      ^ EA @ 247:0
+     95    button, input, select, optgroup, textarea, ::file-selector-button {                           | 248  ::file-selector-button {
+           ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ EB @ 95:2-68               |      ^^^^^^^^^^^^^^^^^^^^^^^ EB @ 248:0-23
+     96      font: inherit;                                                                              | 249    font: inherit; /* 1 */
+             ^^^^^^^^^^^^^ EC @ 96:4-17                                                                  |        ^^^^^^^^^^^^^ EC @ 249:2-15
+     97      font-feature-settings: inherit;                                                             | 250    font-feature-settings: inherit; /* 1 */
+             ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ ED @ 97:4-34                                                 |        ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ ED @ 250:2-32
+     98      font-variation-settings: inherit;                                                           | 251    font-variation-settings: inherit; /* 1 */
+             ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ EE @ 98:4-36                                               |        ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ EE @ 251:2-34
+     99      letter-spacing: inherit;                                                                    | 252    letter-spacing: inherit; /* 1 */
+             ^^^^^^^^^^^^^^^^^^^^^^^ EF @ 99:4-27                                                        |        ^^^^^^^^^^^^^^^^^^^^^^^ EF @ 252:2-25
+    100      color: inherit;                                                                             | 253    color: inherit; /* 1 */
+             ^^^^^^^^^^^^^^ EG @ 100:4-18                                                                |        ^^^^^^^^^^^^^^ EG @ 253:2-16
+    101      border-radius: 0;                                                                           | 254    border-radius: 0; /* 2 */
+             ^^^^^^^^^^^^^^^^ EH @ 101:4-20                                                              |        ^^^^^^^^^^^^^^^^ EH @ 254:2-18
+    102      background-color: transparent;                                                              | 255    background-color: transparent; /* 3 */
+             ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ EI @ 102:4-33                                                 |        ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ EI @ 255:2-31
+    103      opacity: 1;                                                                                 | 256    opacity: 1; /* 4 */
+             ^^^^^^^^^^ EJ @ 103:4-14                                                                    |        ^^^^^^^^^^ EJ @ 256:2-12
+                                                                                                         | 257  }
+    104    }                                                                                             | 
+    105    :where(select:is([multiple], [size])) optgroup {                                              | 263  :where(select:is([multiple], [size])) optgroup {
+           ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ EK @ 105:2-49                                 |      ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ EK @ 263:0-47
+    106      font-weight: bolder;                                                                        | 264    font-weight: bolder;
+             ^^^^^^^^^^^^^^^^^^^ EL @ 106:4-23                                                           |        ^^^^^^^^^^^^^^^^^^^ EL @ 264:2-21
+                                                                                                         | 265  }
+    107    }                                                                                             | 
+    108    :where(select:is([multiple], [size])) optgroup option {                                       | 271  :where(select:is([multiple], [size])) optgroup option {
+           ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ EM @ 108:2-56                          |      ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ EM @ 271:0-54
+    109      padding-inline-start: 20px;                                                                 | 272    padding-inline-start: 20px;
+             ^^^^^^^^^^^^^^^^^^^^^^^^^^ EN @ 109:4-30                                                    |        ^^^^^^^^^^^^^^^^^^^^^^^^^^ EN @ 272:2-28
+                                                                                                         | 273  }
+    110    }                                                                                             | 
+    111    ::file-selector-button {                                                                      | 279  ::file-selector-button {
+           ^^^^^^^^^^^^^^^^^^^^^^^ EO @ 111:2-25                                                         |      ^^^^^^^^^^^^^^^^^^^^^^^ EO @ 279:0-23
+    112      margin-inline-end: 4px;                                                                     | 280    margin-inline-end: 4px;
+             ^^^^^^^^^^^^^^^^^^^^^^ EP @ 112:4-26                                                        |        ^^^^^^^^^^^^^^^^^^^^^^ EP @ 280:2-24
+                                                                                                         | 281  }
+    113    }                                                                                             | 
+    114    ::placeholder {                                                                               | 287  ::placeholder {
+           ^^^^^^^^^^^^^^ EQ @ 114:2-16                                                                  |      ^^^^^^^^^^^^^^ EQ @ 287:0-14
+    115      opacity: 1;                                                                                 | 288    opacity: 1;
+             ^^^^^^^^^^ ER @ 115:4-14                                                                    |        ^^^^^^^^^^ ER @ 288:2-12
+                                                                                                         | 289  }
+    116    }                                                                                             | 
+    117    @supports (not (-webkit-appearance: -apple-pay-button))  or (contain-intrinsic-size: 1px) {   | 296  @supports (not (-webkit-appearance: -apple-pay-button)) /* Not Safari */ or
+           ^ ES @ 117:2                                                                                  |      ^ ES @ 296:0
+    117    @supports (not (-webkit-appearance: -apple-pay-button))  or (contain-intrinsic-size: 1px) {   | 297    (contain-intrinsic-size: 1px) /* Safari 17+ */ {
+           ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^... ET @ 117:2-92 |      ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ ET @ 297:0-49
+    118      ::placeholder {                                                                             | 298    ::placeholder {
+             ^^^^^^^^^^^^^^ EU @ 118:4-18                                                                |        ^^^^^^^^^^^^^^ EU @ 298:2-16
+    119        color: currentcolor;                                                                      | 299      color: color-mix(in oklab, currentcolor 50%, transparent);
+               ^^^^^^^^^^^^^^^^^^^ EV @ 119:6-25                                                         |          ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ EV @ 299:4-61
+                                                                                                         | 300    }
+                                                                                                         | 301  }
+    120        @supports (color: color-mix(in lab, red, red)) {                                          | 
+               ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ EV @ 120:6-53                             | 
+    121          color: color-mix(in oklab, currentcolor 50%, transparent);                              | 
+                 ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ EV @ 121:8-65                 | 
+    122        }                                                                                         | 
+    123      }                                                                                           | 
+    124    }                                                                                             | 
+    125    textarea {                                                                                    | 307  textarea {
+           ^^^^^^^^^ EW @ 125:2-11                                                                       |      ^^^^^^^^^ EW @ 307:0-9
+    126      resize: vertical;                                                                           | 308    resize: vertical;
+             ^^^^^^^^^^^^^^^^ EX @ 126:4-20                                                              |        ^^^^^^^^^^^^^^^^ EX @ 308:2-18
+                                                                                                         | 309  }
+    127    }                                                                                             | 
+    128    ::-webkit-search-decoration {                                                                 | 315  ::-webkit-search-decoration {
+           ^^^^^^^^^^^^^^^^^^^^^^^^^^^^ EY @ 128:2-30                                                    |      ^^^^^^^^^^^^^^^^^^^^^^^^^^^^ EY @ 315:0-28
+    129      -webkit-appearance: none;                                                                   | 316    -webkit-appearance: none;
+             ^^^^^^^^^^^^^^^^^^^^^^^^ EZ @ 129:4-28                                                      |        ^^^^^^^^^^^^^^^^^^^^^^^^ EZ @ 316:2-26
+                                                                                                         | 317  }
+    130    }                                                                                             | 
+    131    ::-webkit-date-and-time-value {                                                               | 324  ::-webkit-date-and-time-value {
+           ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ FA @ 131:2-32                                                  |      ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ FA @ 324:0-30
+    132      min-height: 1lh;                                                                            | 325    min-height: 1lh; /* 1 */
+             ^^^^^^^^^^^^^^^ FB @ 132:4-19                                                               |        ^^^^^^^^^^^^^^^ FB @ 325:2-17
+    133      text-align: inherit;                                                                        | 326    text-align: inherit; /* 2 */
+             ^^^^^^^^^^^^^^^^^^^ FC @ 133:4-23                                                           |        ^^^^^^^^^^^^^^^^^^^ FC @ 326:2-21
+                                                                                                         | 327  }
+    134    }                                                                                             | 
+    135    ::-webkit-datetime-edit {                                                                     | 333  ::-webkit-datetime-edit {
+           ^^^^^^^^^^^^^^^^^^^^^^^^ FD @ 135:2-26                                                        |      ^^^^^^^^^^^^^^^^^^^^^^^^ FD @ 333:0-24
+    136      display: inline-flex;                                                                       | 334    display: inline-flex;
+             ^^^^^^^^^^^^^^^^^^^^ FE @ 136:4-24                                                          |        ^^^^^^^^^^^^^^^^^^^^ FE @ 334:2-22
+                                                                                                         | 335  }
+    137    }                                                                                             | 
+    138    ::-webkit-datetime-edit-fields-wrapper {                                                      | 341  ::-webkit-datetime-edit-fields-wrapper {
+           ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ FF @ 138:2-41                                         |      ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ FF @ 341:0-39
+    139      padding: 0;                                                                                 | 342    padding: 0;
+             ^^^^^^^^^^ FG @ 139:4-14                                                                    |        ^^^^^^^^^^ FG @ 342:2-12
+                                                                                                         | 343  }
+    140    }                                                                                             | 
+    141    ::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month... | 345  ::-webkit-datetime-edit,
+           ^ FH @ 141:2                                                                                  |      ^ FH @ 345:0
+    141    ::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month... | 346  ::-webkit-datetime-edit-year-field,
+           ^ FI @ 141:2                                                                                  |      ^ FI @ 346:0
+    141    ::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month... | 347  ::-webkit-datetime-edit-month-field,
+           ^ FJ @ 141:2                                                                                  |      ^ FJ @ 347:0
+    141    ::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month... | 348  ::-webkit-datetime-edit-day-field,
+           ^ FK @ 141:2                                                                                  |      ^ FK @ 348:0
+    141    ::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month... | 349  ::-webkit-datetime-edit-hour-field,
+           ^ FL @ 141:2                                                                                  |      ^ FL @ 349:0
+    141    ::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month... | 350  ::-webkit-datetime-edit-minute-field,
+           ^ FM @ 141:2                                                                                  |      ^ FM @ 350:0
+    141    ::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month... | 351  ::-webkit-datetime-edit-second-field,
+           ^ FN @ 141:2                                                                                  |      ^ FN @ 351:0
+    141    ::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month... | 352  ::-webkit-datetime-edit-millisecond-field,
+           ^ FO @ 141:2                                                                                  |      ^ FO @ 352:0
+    141    ::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month... | 353  ::-webkit-datetime-edit-meridiem-field {
+           ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^... FP @ 141:2-329 |      ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ FP @ 353:0-39
+    142      padding-block: 0;                                                                           | 354    padding-block: 0;
+             ^^^^^^^^^^^^^^^^ FQ @ 142:4-20                                                              |        ^^^^^^^^^^^^^^^^ FQ @ 354:2-18
+                                                                                                         | 355  }
+    143    }                                                                                             | 
+    144    ::-webkit-calendar-picker-indicator {                                                         | 361  ::-webkit-calendar-picker-indicator {
+           ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ FR @ 144:2-38                                            |      ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ FR @ 361:0-36
+    145      line-height: 1;                                                                             | 362    line-height: 1;
+             ^^^^^^^^^^^^^^ FS @ 145:4-18                                                                |        ^^^^^^^^^^^^^^ FS @ 362:2-16
+                                                                                                         | 363  }
+    146    }                                                                                             | 
+    147    :-moz-ui-invalid {                                                                            | 369  :-moz-ui-invalid {
+           ^^^^^^^^^^^^^^^^^ FT @ 147:2-19                                                               |      ^^^^^^^^^^^^^^^^^ FT @ 369:0-17
+    148      box-shadow: none;                                                                           | 370    box-shadow: none;
+             ^^^^^^^^^^^^^^^^ FU @ 148:4-20                                                              |        ^^^^^^^^^^^^^^^^ FU @ 370:2-18
+                                                                                                         | 371  }
+    149    }                                                                                             | 
+    150    button, input:where([type='button'], [type='reset'], [type='submit']), ::file-selector-but... | 377  button,
+           ^ FV @ 150:2                                                                                  |      ^ FV @ 377:0
+    150    button, input:where([type='button'], [type='reset'], [type='submit']), ::file-selector-but... | 378  input:where([type='button'], [type='reset'], [type='submit']),
+           ^ FW @ 150:2                                                                                  |      ^ FW @ 378:0
+    150    button, input:where([type='button'], [type='reset'], [type='submit']), ::file-selector-but... | 379  ::file-selector-button {
+           ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^... FX @ 150:2-96 |      ^^^^^^^^^^^^^^^^^^^^^^^ FX @ 379:0-23
+    151      appearance: button;                                                                         | 380    appearance: button;
+             ^^^^^^^^^^^^^^^^^^ FY @ 151:4-22                                                            |        ^^^^^^^^^^^^^^^^^^ FY @ 380:2-20
+                                                                                                         | 381  }
+    152    }                                                                                             | 
+    153    ::-webkit-inner-spin-button, ::-webkit-outer-spin-button {                                    | 387  ::-webkit-inner-spin-button,
+           ^ FZ @ 153:2                                                                                  |      ^ FZ @ 387:0
+    153    ::-webkit-inner-spin-button, ::-webkit-outer-spin-button {                                    | 388  ::-webkit-outer-spin-button {
+           ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ GA @ 153:2-59                       |      ^^^^^^^^^^^^^^^^^^^^^^^^^^^^ GA @ 388:0-28
+    154      height: auto;                                                                               | 389    height: auto;
+             ^^^^^^^^^^^^ GB @ 154:4-16                                                                  |        ^^^^^^^^^^^^ GB @ 389:2-14
+                                                                                                         | 390  }
+    155    }                                                                                             | 
+    156    [hidden]:where(:not([hidden='until-found'])) {                                                | 396  [hidden]:where(:not([hidden='until-found'])) {
+           ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ GC @ 156:2-47                                   |      ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ GC @ 396:0-45
+    157      display: none !important;                                                                   | 397    display: none !important;
+             ^^^^^^^^^^^^^^^^^^^^^^^^ GD @ 157:4-28                                                      |        ^^^^^^^^^^^^^^^^^^^^^^^^ GD @ 397:2-26
+                                                                                                         | 398  }
+    158    }                                                                                             | 
+    159  }                                                                                               | 
+                                                                                                         |      --- index.css ---
+    160  @layer utilities;                                                                               |   5  @import './utilities.css' layer(utilities);
+         ^^^^^^^^^^^^^^^^ GE @ 160:0-16                                                                  |      ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ GE @ 5:0-42
+                                                                                                         |      --- input.css ---
+    161  .foo {                                                                                          |   3  .foo {
+         ^^^^^ GF @ 161:0-5                                                                              |      ^^^^^ GF @ 3:0-5
+    162    text-decoration-line: underline;                                                              |   4    @apply underline;
+           ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ GG @ 162:2-33                                                 |               ^^^^^^^^^ GG @ 4:9-18
+                                                                                                         |   5  }
+    163  }                                                                                               | 
+    164                                                                                                  | 
+    "
+  `)
 })
 
 test('source maps are generated for utilities', async ({ expect }) => {
@@ -325,17 +615,31 @@ test('source maps are generated for utilities', async ({ expect }) => {
   expect(sources.length).toBe(2)
 
   // The output CSS should include annotations linking back to:
-  expect(annotations).toEqual([
-    // @tailwind utilities
-    'utilities.css: 1:0-6 <- 1:0-19',
-    'utilities.css: 2:2-15 <- 1:0-19',
-    'utilities.css: 4:0-8 <- 1:0-19',
-    // color: orange
-    'input.css: 5:2-15 <- 4:2-15',
-    // @tailwind utilities
-    'utilities.css: 7:0-11 <- 1:0-19',
-    'utilities.css: 8:2-13 <- 1:0-19',
-  ])
+  expect(annotations).toMatchInlineSnapshot(`
+    "
+        output.css                 |    original
+                                   | 
+                                   |    --- utilities.css ---
+     1  .flex {                    | 1  @tailwind utilities;
+        ^^^^^^ A @ 1:0-6           |    ^^^^^^^^^^^^^^^^^^^ A @ 1:0-19
+     2    display: flex;           | 
+          ^^^^^^^^^^^^^ A @ 2:2-15 | 
+     3  }                          | 
+     4  .custom {                  | 
+        ^^^^^^^^ A @ 4:0-8         | 
+                                   |    --- input.css ---
+     5    color: orange;           | 4    color: orange;
+          ^^^^^^^^^^^^^ B @ 5:2-15 |      ^^^^^^^^^^^^^ B @ 4:2-15
+                                   | 5  }
+     6  }                          | 
+     7  .custom-js {               | 
+        ^^^^^^^^^^^ A @ 7:0-11     | 
+     8    color: blue;             | 
+          ^^^^^^^^^^^ A @ 8:2-13   | 
+     9  }                          | 
+    10                             | 
+    "
+  `)
 
   expect(output).toMatchInlineSnapshot(`
     ".flex {
@@ -362,11 +666,18 @@ test('utilities have source maps pointing to the utilities node', async ({ expec
 
   expect(sources).toEqual(['input.css'])
 
-  expect(annotations).toEqual([
-    //
-    'input.css: 1:0-11 <- 1:0-19',
-    'input.css: 2:2-33 <- 1:0-19',
-  ])
+  expect(annotations).toMatchInlineSnapshot(`
+    "
+       output.css                                   |    input.css
+                                                    | 
+    1  .underline {                                 | 1  @tailwind utilities;
+       ^^^^^^^^^^^ A @ 1:0-11                       |    ^^^^^^^^^^^^^^^^^^^ A @ 1:0-19
+    2    text-decoration-line: underline;           | 
+         ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ A @ 2:2-33 | 
+    3  }                                            | 
+    4                                               | 
+    "
+  `)
 })
 
 test('@apply generates source maps', async ({ expect }) => {
@@ -376,6 +687,7 @@ test('@apply generates source maps', async ({ expect }) => {
         color: blue;
         @apply text-[#000] hover:text-[#f00];
         @apply underline;
+        @apply --my-mixin-1 --my-mixin-2();
         color: red;
       }
     `,
@@ -383,16 +695,103 @@ test('@apply generates source maps', async ({ expect }) => {
 
   expect(sources).toEqual(['input.css'])
 
-  expect(annotations).toEqual([
-    'input.css: 1:0-5 <- 1:0-5',
-    'input.css: 2:2-13 <- 2:2-13',
-    'input.css: 3:2-13 <- 3:9-20',
-    'input.css: 4:2-10 <- 3:21-38',
-    'input.css: 5:4-26 <- 3:21-38',
-    'input.css: 6:6-17 <- 3:21-38',
-    'input.css: 9:2-33 <- 4:9-18',
-    'input.css: 10:2-12 <- 5:2-12',
-  ])
+  expect(annotations).toMatchInlineSnapshot(`
+    "
+        output.css                                       |    input.css
+                                                         | 
+     1  .foo {                                           | 1  .foo {
+        ^^^^^ A @ 1:0-5                                  |    ^^^^^ A @ 1:0-5
+     2    color: blue;                                   | 2    color: blue;
+          ^^^^^^^^^^^ B @ 2:2-13                         |      ^^^^^^^^^^^ B @ 2:2-13
+     3    color: #000;                                   | 3    @apply text-[#000] hover:text-[#f00];
+          ^^^^^^^^^^^ C @ 3:2-13                         |             ^^^^^^^^^^^ C @ 3:9-20
+     4    &:hover {                                      | 3    @apply text-[#000] hover:text-[#f00];
+          ^^^^^^^^ D @ 4:2-10                            |                         ^^^^^^^^^^^^^^^^^ D @ 3:21-38
+     5      @media (hover: hover) {                      | 
+            ^^^^^^^^^^^^^^^^^^^^^^ D @ 5:4-26            | 
+     6        color: #f00;                               | 
+              ^^^^^^^^^^^ D @ 6:6-17                     | 
+     7      }                                            | 
+     8    }                                              | 
+     9    text-decoration-line: underline;               | 4    @apply underline;
+          ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ E @ 9:2-33     |             ^^^^^^^^^ E @ 4:9-18
+    10    @apply --my-mixin-1 --my-mixin-2();            | 5    @apply --my-mixin-1 --my-mixin-2();
+          ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ F @ 10:2-36 |      ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ F @ 5:2-36
+    11    color: red;                                    | 6    color: red;
+          ^^^^^^^^^^ G @ 11:2-12                         |      ^^^^^^^^^^ G @ 6:2-12
+                                                         | 7  }
+    12  }                                                | 
+    13                                                   | 
+    "
+  `)
+})
+
+test('@variant generates source maps', async ({ expect }) => {
+  let { sources, annotations } = await run({
+    input: css`
+      .foo {
+        color: red;
+
+        @variant data-a, data-b:data-c {
+          color: green;
+
+          @variant data-d, data-e:data-f {
+            color: blue;
+          }
+        }
+      }
+    `,
+  })
+
+  expect(sources).toEqual(['input.css'])
+
+  expect(annotations).toMatchInlineSnapshot(`
+    "
+        output.css                         |     input.css
+                                           | 
+     1  .foo {                             |  1  .foo {
+        ^^^^^ A @ 1:0-5                    |     ^^^^^ A @ 1:0-5
+     2    color: red;                      |  2    color: red;
+          ^^^^^^^^^^ B @ 2:2-12            |       ^^^^^^^^^^ B @ 2:2-12
+     3    &[data-a] {                      | 
+                                           |  4    @variant data-a, data-b:data-c {
+     4      color: green;                  |  5      color: green;
+            ^^^^^^^^^^^^ C @ 4:4-16        |         ^^^^^^^^^^^^ C @ 5:4-16
+     5      &[data-d] {                    | 
+                                           |  7      @variant data-d, data-e:data-f {
+     6        color: blue;                 |  8        color: blue;
+              ^^^^^^^^^^^ D @ 6:6-17       |           ^^^^^^^^^^^ D @ 8:6-17
+                                           |  9      }
+                                           | 10    }
+                                           | 11  }
+     7      }                              | 
+     8      &[data-e] {                    | 
+     9        &[data-f] {                  | 
+    10          color: blue;               | 
+                ^^^^^^^^^^^ D @ 10:8-19    | 
+    11        }                            | 
+    12      }                              | 
+    13    }                                | 
+    14    &[data-b] {                      | 
+    15      &[data-c] {                    | 
+    16        color: green;                | 
+              ^^^^^^^^^^^^ C @ 16:6-18     | 
+    17        &[data-d] {                  | 
+    18          color: blue;               | 
+                ^^^^^^^^^^^ D @ 18:8-19    | 
+    19        }                            | 
+    20        &[data-e] {                  | 
+    21          &[data-f] {                | 
+    22            color: blue;             | 
+                  ^^^^^^^^^^^ D @ 22:10-21 | 
+    23          }                          | 
+    24        }                            | 
+    25      }                              | 
+    26    }                                | 
+    27  }                                  | 
+    28                                     | 
+    "
+  `)
 })
 
 test('license comments preserve source locations', async ({ expect }) => {
@@ -402,10 +801,14 @@ test('license comments preserve source locations', async ({ expect }) => {
 
   expect(sources).toEqual(['input.css'])
 
-  expect(annotations).toEqual([
-    //
-    'input.css: 1:0-19 <- 1:0-19',
-  ])
+  expect(annotations).toMatchInlineSnapshot(`
+    "
+       output.css                     |    input.css
+                                      | 
+    1  /*! some comment */            | 1  /*! some comment */
+       ^^^^^^^^^^^^^^^^^^^ A @ 1:0-19 |    ^^^^^^^^^^^^^^^^^^^ A @ 1:0-19
+    "
+  `)
 })
 
 test('license comments with new lines preserve source locations', async ({ expect }) => {
@@ -415,18 +818,25 @@ test('license comments with new lines preserve source locations', async ({ expec
 
   expect(sources).toEqual(['input.css'])
 
-  expect(annotations).toEqual([
-    //
-    'input.css: 1:0 <- 1:0-2:0',
-    'input.css: 2:11 <- 2:11',
-  ])
+  expect(annotations).toMatchInlineSnapshot(`
+    "
+       output.css                |    input.css
+                                 | 
+    1  /*! some                  | 1  /*! some 
+       ^ A @ 1:0                 |    ^ A @ 1:0
+    1  /*! some                  | 2   comment */
+       ^^^^^^^^^ B @ 1:0-2:0     |    ^ B @ 2:0
+    2   comment */               | 2   comment */
+                  ^ C @ 2:11-3:0 |               ^ C @ 2:11
+    "
+  `)
 })
 
 test('Source locations for `addBase` point to the `@plugin` that generated them', async ({
   expect,
 }) => {
   let { sources, annotations } = await run({
-    input: dedent`
+    input: css`
       @plugin "./plugin.js";
       @config "./config.js";
     `,
@@ -463,13 +873,21 @@ test('Source locations for `addBase` point to the `@plugin` that generated them'
 
   expect(sources).toEqual(['input.css'])
 
-  expect(annotations).toEqual([
-    //
-    'input.css: 1:0-12 <- 1:0-21',
-    'input.css: 2:2-7 <- 1:0-21',
-    'input.css: 3:4-14 <- 1:0-21',
-    'input.css: 6:0-12 <- 2:0-21',
-    'input.css: 7:2-7 <- 2:0-21',
-    'input.css: 8:4-16 <- 2:0-21',
-  ])
+  expect(annotations).toMatchInlineSnapshot(`
+    "
+       output.css                  |    input.css
+                                   | 
+    1  @layer base {               | 1  @plugin "./plugin.js";
+       ^^^^^^^^^^^^ A @ 1:0-12     |    ^^^^^^^^^^^^^^^^^^^^^ A @ 1:0-21
+    2    body {                    | 
+         ^^^^^ A @ 2:2-7           | 
+    3      color: red;             | 
+           ^^^^^^^^^^ A @ 3:4-14   | 
+    4      color: green;           | 2  @config "./config.js";
+           ^^^^^^^^^^^^ B @ 4:4-16 |    ^^^^^^^^^^^^^^^^^^^^^ B @ 2:0-21
+    5    }                         | 
+    6  }                           | 
+    7                              | 
+    "
+  `)
 })
diff --git a/packages/tailwindcss/src/source-maps/translation-map.test.ts b/packages/tailwindcss/src/source-maps/translation-map.test.ts
index ad0a9f435..0c367ebbd 100644
--- a/packages/tailwindcss/src/source-maps/translation-map.test.ts
+++ b/packages/tailwindcss/src/source-maps/translation-map.test.ts
@@ -3,6 +3,7 @@ import { assert, expect, test } from 'vitest'
 import { toCss, type AstNode } from '../ast'
 import * as CSS from '../css-parser'
 import { createTranslationMap } from './source-map'
+import { visualizeSourceMapRanges, type SourceMapVisualizationRange } from './visualize-source-map'
 
 async function analyze(input: string) {
   let ast = CSS.parse(input, { from: 'input.css' })
@@ -13,21 +14,26 @@ async function analyze(input: string) {
   })
 
   function format(node: AstNode) {
-    let lines: string[] = []
+    let ranges: SourceMapVisualizationRange[] = []
 
     for (let [oStart, oEnd, gStart, gEnd] of translate(node)) {
-      let src = `${oStart.line}:${oStart.column}-${oEnd.line}:${oEnd.column}`
-
-      let dst = '(none)'
-
-      if (gStart && gEnd) {
-        dst = `${gStart.line}:${gStart.column}-${gEnd.line}:${gEnd.column}`
-      }
-
-      lines.push(`${dst} <- ${src}`)
+      ranges.push({
+        original: {
+          source: 'input.css',
+          start: [oStart.line, oStart.column],
+          end: [oEnd.line, oEnd.column],
+        },
+        generated:
+          gStart && gEnd
+            ? {
+                start: [gStart.line, gStart.column],
+                end: [gEnd.line, gEnd.column],
+              }
+            : null,
+      })
     }
 
-    return lines
+    return visualizeSourceMapRanges({ 'input.css': input }, css, ranges)
   }
 
   return { ast, css, format }
@@ -38,9 +44,13 @@ test('comment, single line', async () => {
 
   assert(ast[0].kind === 'comment')
   expect(format(ast[0])).toMatchInlineSnapshot(`
-    [
-      "1:0-1:10 <- 1:0-1:10",
-    ]
+    "
+       output.css            |    input.css
+                             | 
+    1  /*! foo */            | 1  /*! foo */
+       ^^^^^^^^^^ A @ 1:0-10 |    ^^^^^^^^^^ A @ 1:0-10
+    2                        | 
+    "
   `)
 
   expect(css).toMatchInlineSnapshot(`
@@ -54,9 +64,15 @@ test('comment, multi line', async () => {
 
   assert(ast[0].kind === 'comment')
   expect(format(ast[0])).toMatchInlineSnapshot(`
-    [
-      "1:0-2:7 <- 1:0-2:7",
-    ]
+    "
+       output.css           |    input.css
+                            | 
+    1  /*! foo              | 1  /*! foo 
+       ^^^^^^^^ A @ 1:0-2:7 |    ^^^^^^^^ A @ 1:0-2:7
+    2   bar */              | 2   bar */
+       ^^^^^^^ A            |    ^^^^^^^ A
+    3                       | 
+    "
   `)
 
   expect(css).toMatchInlineSnapshot(`
@@ -72,9 +88,15 @@ test('declaration, normal property, single line', async () => {
   assert(ast[0].kind === 'rule')
   assert(ast[0].nodes[0].kind === 'declaration')
   expect(format(ast[0].nodes[0])).toMatchInlineSnapshot(`
-    [
-      "2:2-2:12 <- 1:7-1:17",
-    ]
+    "
+       output.css              |    input.css
+                               | 
+    1  .foo {                  | 
+    2    color: red;           | 1  .foo { color: red; }
+         ^^^^^^^^^^ A @ 2:2-12 |           ^^^^^^^^^^ A @ 1:7-17
+    3  }                       | 
+    4                          | 
+    "
   `)
 
   expect(css).toMatchInlineSnapshot(`
@@ -99,9 +121,22 @@ test('declaration, normal property, multi line', async () => {
   assert(ast[0].kind === 'rule')
   assert(ast[0].nodes[0].kind === 'declaration')
   expect(format(ast[0].nodes[0])).toMatchInlineSnapshot(`
-    [
-      "2:2-2:46 <- 2:2-5:11",
-    ]
+    "
+       output.css                                                |    input.css
+                                                                 | 
+    1  .foo {                                                    | 
+    2    grid-template-areas: "a b c" "d e f" "g h i";           | 2    grid-template-areas:
+         ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ A @ 2:2-46 |      ^^^^^^^^^^^^^^^^^^^^ A @ 2:2-5:11
+                                                                 | 3      "a b c"
+                                                                 |    ^^^^^^^^^^^ A
+                                                                 | 4      "d e f"
+                                                                 |    ^^^^^^^^^^^ A
+                                                                 | 5      "g h i";
+                                                                 |    ^^^^^^^^^^^ A
+                                                                 | 6  }
+    3  }                                                         | 
+    4                                                            | 
+    "
   `)
 
   expect(css).toMatchInlineSnapshot(`
@@ -118,9 +153,15 @@ test('declaration, custom property, single line', async () => {
   assert(ast[0].kind === 'rule')
   assert(ast[0].nodes[0].kind === 'declaration')
   expect(format(ast[0].nodes[0])).toMatchInlineSnapshot(`
-    [
-      "2:2-2:12 <- 1:7-1:17",
-    ]
+    "
+       output.css              |    input.css
+                               | 
+    1  .foo {                  | 
+    2    --foo: bar;           | 1  .foo { --foo: bar; }
+         ^^^^^^^^^^ A @ 2:2-12 |           ^^^^^^^^^^ A @ 1:7-17
+    3  }                       | 
+    4                          | 
+    "
   `)
 
   expect(css).toMatchInlineSnapshot(`
@@ -141,9 +182,18 @@ test('declaration, custom property, multi line', async () => {
   assert(ast[0].kind === 'rule')
   assert(ast[0].nodes[0].kind === 'declaration')
   expect(format(ast[0].nodes[0])).toMatchInlineSnapshot(`
-    [
-      "2:2-3:3 <- 2:2-3:3",
-    ]
+    "
+       output.css               |    input.css
+                                | 
+    1  .foo {                   | 
+    2    --foo: bar             | 2    --foo: bar
+         ^^^^^^^^^^ A @ 2:2-3:3 |      ^^^^^^^^^^ A @ 2:2-3:3
+    3  baz;                     | 3  baz;
+       ^^^ A                    |    ^^^ A
+                                | 4  }
+    4  }                        | 
+    5                           | 
+    "
   `)
 
   expect(css).toMatchInlineSnapshot(`
@@ -161,9 +211,13 @@ test('at rules, bodyless, single line', async () => {
 
   assert(ast[0].kind === 'at-rule')
   expect(format(ast[0])).toMatchInlineSnapshot(`
-    [
-      "1:0-1:15 <- 1:0-1:19",
-    ]
+    "
+       output.css                 |    input.css
+                                  | 
+    1  @layer foo, bar;           | 1  @layer foo,     bar;
+       ^^^^^^^^^^^^^^^ A @ 1:0-15 |    ^^^^^^^^^^^^^^^^^^^ A @ 1:0-19
+    2                             | 
+    "
   `)
 
   expect(css).toMatchInlineSnapshot(`
@@ -182,9 +236,17 @@ test('at rules, bodyless, multi line', async () => {
 
   assert(ast[0].kind === 'at-rule')
   expect(format(ast[0])).toMatchInlineSnapshot(`
-    [
-      "1:0-1:15 <- 1:0-4:0",
-    ]
+    "
+       output.css                 |    input.css
+                                  | 
+    1  @layer foo, bar;           | 1  @layer
+       ^^^^^^^^^^^^^^^ A @ 1:0-15 |    ^^^^^^ A @ 1:0-4:0
+                                  | 2    foo,
+                                  |    ^^^^^^ A
+                                  | 3    bar
+                                  |    ^^^^^ A
+    2                             | 
+    "
   `)
 
   expect(css).toMatchInlineSnapshot(`
@@ -198,9 +260,15 @@ test('at rules, body, single line', async () => {
 
   assert(ast[0].kind === 'at-rule')
   expect(format(ast[0])).toMatchInlineSnapshot(`
-    [
-      "1:0-1:11 <- 1:0-1:11",
-    ]
+    "
+       output.css             |    input.css
+                              | 
+    1  @layer foo {           | 1  @layer foo { color: red; }
+       ^^^^^^^^^^^ A @ 1:0-11 |    ^^^^^^^^^^^ A @ 1:0-11
+    2    color: red;          | 
+    3  }                      | 
+    4                         | 
+    "
   `)
 
   expect(css).toMatchInlineSnapshot(`
@@ -222,9 +290,17 @@ test('at rules, body, multi line', async () => {
 
   assert(ast[0].kind === 'at-rule')
   expect(format(ast[0])).toMatchInlineSnapshot(`
-    [
-      "1:0-1:11 <- 1:0-3:0",
-    ]
+    "
+       output.css             |    input.css
+                              | 
+    1  @layer foo {           | 1  @layer
+       ^^^^^^^^^^^ A @ 1:0-11 |    ^^^^^^ A @ 1:0-3:0
+                              | 2    foo
+                              |    ^^^^^ A
+    2    color: baz;          | 
+    3  }                      | 
+    4                         | 
+    "
   `)
 
   expect(css).toMatchInlineSnapshot(`
@@ -240,9 +316,15 @@ test('style rules, body, single line', async () => {
 
   assert(ast[0].kind === 'rule')
   expect(format(ast[0])).toMatchInlineSnapshot(`
-    [
-      "1:0-1:14 <- 1:0-1:14",
-    ]
+    "
+       output.css                |    input.css
+                                 | 
+    1  .foo:is(.bar) {           | 1  .foo:is(.bar) { color: red; }
+       ^^^^^^^^^^^^^^ A @ 1:0-14 |    ^^^^^^^^^^^^^^ A @ 1:0-14
+    2    color: red;             | 
+    3  }                         | 
+    4                            | 
+    "
   `)
 
   expect(css).toMatchInlineSnapshot(`
@@ -265,9 +347,19 @@ test('style rules, body, multi line', async () => {
 
   assert(ast[0].kind === 'rule')
   expect(format(ast[0])).toMatchInlineSnapshot(`
-    [
-      "1:0-1:16 <- 1:0-3:2",
-    ]
+    "
+       output.css                  |    input.css
+                                   | 
+    1  .foo:is( .bar ) {           | 1  .foo:is(
+       ^^^^^^^^^^^^^^^^ A @ 1:0-16 |    ^^^^^^^^ A @ 1:0-3:2
+                                   | 2    .bar
+                                   |    ^^^^^^ A
+                                   | 3  ) {
+                                   |    ^^ A
+    2    color: red;               | 
+    3  }                           | 
+    4                              | 
+    "
   `)
 
   expect(css).toMatchInlineSnapshot(`
diff --git a/packages/tailwindcss/src/source-maps/visualize-source-map.test.ts b/packages/tailwindcss/src/source-maps/visualize-source-map.test.ts
new file mode 100644
index 000000000..f69bfac31
--- /dev/null
+++ b/packages/tailwindcss/src/source-maps/visualize-source-map.test.ts
@@ -0,0 +1,318 @@
+import dedent from 'dedent'
+import { SourceMapGenerator, type RawSourceMap } from 'source-map-js'
+import { expect, test } from 'vitest'
+import { visualizeSourceMap, visualizeSourceMapRanges } from './visualize-source-map'
+
+const css = dedent
+
+function sourceMap({
+  sources,
+  mappings,
+}: {
+  sources: Record<string, string>
+  mappings: {
+    source: string
+    original: [line: number, column: number]
+    generated: [line: number, column: number]
+  }[]
+}) {
+  let generator = new SourceMapGenerator()
+
+  for (let mapping of mappings) {
+    generator.addMapping({
+      source: mapping.source,
+      original: {
+        line: mapping.original[0],
+        column: mapping.original[1],
+      },
+      generated: {
+        line: mapping.generated[0],
+        column: mapping.generated[1],
+      },
+    })
+  }
+
+  for (let [source, content] of Object.entries(sources)) {
+    generator.setSourceContent(source, content)
+  }
+
+  return JSON.parse(generator.toString()) as RawSourceMap
+}
+
+test('visualizes single-line ranges', () => {
+  expect(
+    visualizeSourceMapRanges(
+      {
+        // prettier-ignore
+        'input.css': css`.foo { color: red; }`,
+      },
+      css`
+        .foo {
+          color: red;
+        }
+      `,
+      [
+        {
+          original: {
+            source: 'input.css',
+            start: [1, 7],
+            end: [1, 17],
+          },
+          generated: {
+            start: [2, 2],
+            end: [2, 12],
+          },
+        },
+      ],
+    ),
+  ).toMatchInlineSnapshot(`
+    "
+       output.css              |    input.css
+                               | 
+    1  .foo {                  | 
+    2    color: red;           | 1  .foo { color: red; }
+         ^^^^^^^^^^ A @ 2:2-12 |           ^^^^^^^^^^ A @ 1:7-17
+    3  }                       | 
+    "
+  `)
+})
+
+test('visualizes multi-line ranges', () => {
+  expect(
+    visualizeSourceMapRanges(
+      {
+        'input.css': css`
+          /*! foo
+           bar */
+        `,
+      },
+      css`
+        /*! foo
+         bar */
+      `,
+      [
+        {
+          original: {
+            source: 'input.css',
+            start: [1, 0],
+            end: [2, 7],
+          },
+          generated: {
+            start: [1, 0],
+            end: [2, 7],
+          },
+        },
+      ],
+    ),
+  ).toMatchInlineSnapshot(`
+    "
+       output.css          |    input.css
+                           | 
+    1  /*! foo             | 1  /*! foo
+       ^^^^^^^ A @ 1:0-2:7 |    ^^^^^^^ A @ 1:0-2:7
+    2   bar */             | 2   bar */
+       ^^^^^^^ A           |    ^^^^^^^ A
+    "
+  `)
+})
+
+test('visualizes multiple sources', () => {
+  expect(
+    visualizeSourceMapRanges(
+      {
+        'utilities.css': css`
+          @tailwind utilities;
+        `,
+        'input.css': css`
+          @utility custom {
+            color: red;
+          }
+        `,
+      },
+      css`
+        .flex {
+          display: flex;
+        }
+        .custom {
+          color: red;
+        }
+      `,
+      [
+        {
+          original: {
+            source: 'utilities.css',
+            start: [1, 0],
+            end: [1, 19],
+          },
+          generated: {
+            start: [1, 0],
+            end: [1, 6],
+          },
+        },
+        {
+          original: {
+            source: 'utilities.css',
+            start: [1, 0],
+            end: [1, 19],
+          },
+          generated: {
+            start: [2, 2],
+            end: [2, 15],
+          },
+        },
+        {
+          original: {
+            source: 'input.css',
+            start: [2, 2],
+            end: [2, 12],
+          },
+          generated: {
+            start: [5, 2],
+            end: [5, 12],
+          },
+        },
+      ],
+    ),
+  ).toMatchInlineSnapshot(`
+    "
+       output.css                 |    original
+                                  | 
+                                  |    --- utilities.css ---
+    1  .flex {                    | 1  @tailwind utilities;
+       ^^^^^^ A @ 1:0-6           |    ^^^^^^^^^^^^^^^^^^^ A @ 1:0-19
+    2    display: flex;           | 
+         ^^^^^^^^^^^^^ A @ 2:2-15 | 
+    3  }                          | 
+    4  .custom {                  | 
+                                  |    --- input.css ---
+    5    color: red;              | 2    color: red;
+         ^^^^^^^^^^ B @ 5:2-12    |      ^^^^^^^^^^ B @ 2:2-12
+                                  | 3  }
+    6  }                          | 
+    "
+  `)
+})
+
+test('visualizes unmapped source ranges', () => {
+  expect(
+    visualizeSourceMapRanges(
+      {
+        // prettier-ignore
+        'input.css': css`.foo { color: red; }`,
+      },
+      css`
+        .foo {
+          color: red;
+        }
+      `,
+      [
+        {
+          original: {
+            source: 'input.css',
+            start: [1, 7],
+            end: [1, 17],
+          },
+          generated: null,
+        },
+      ],
+    ),
+  ).toMatchInlineSnapshot(`
+    "
+       output.css |    input.css
+                  | 
+       unmapped A | 1  .foo { color: red; }
+                  |           ^^^^^^^^^^ A @ 1:7-17
+    1  .foo {     | 
+    2    color... | 
+    3  }          | 
+    "
+  `)
+})
+
+test('visualizes source-map points as generated segments', () => {
+  let generated = css`
+    /*! foo
+     bar */
+  `
+
+  expect(
+    visualizeSourceMap(
+      sourceMap({
+        sources: {
+          'input.css': css`
+            /*! foo
+             bar */
+          `,
+        },
+        mappings: [
+          { source: 'input.css', original: [1, 0], generated: [1, 0] },
+          { source: 'input.css', original: [2, 0], generated: [2, 0] },
+          { source: 'input.css', original: [2, 7], generated: [2, 7] },
+        ],
+      }),
+      generated,
+    ),
+  ).toMatchInlineSnapshot(`
+    "
+       output.css          |    input.css
+                           | 
+    1  /*! foo             | 1  /*! foo
+       ^^^^^^^ A @ 1:0-2:0 |    ^^^^^^^ A @ 1:0-2:0
+    2   bar */             | 2   bar */
+       ^^^^^^^ B @ 2:0-7   |    ^^^^^^^ B @ 2:0-7
+    "
+  `)
+})
+
+test('visualizes final source-map point through end of line', () => {
+  expect(
+    visualizeSourceMap(
+      sourceMap({
+        sources: {
+          'input.css': css`aaaa`,
+        },
+        mappings: [{ source: 'input.css', original: [1, 0], generated: [1, 0] }],
+      }),
+      css`aaaa`,
+    ),
+  ).toMatchInlineSnapshot(`
+    "
+       output.css       |    input.css
+                        | 
+    1  aaaa             | 1  aaaa
+       ^^^^ A @ 1:0-2:0 |    ^ A @ 1:0
+    "
+  `)
+})
+
+test('visualizes duplicate source-map points without hiding them', () => {
+  expect(
+    visualizeSourceMap(
+      sourceMap({
+        sources: {
+          'input.css': css`
+            aaaa
+            bbbb
+          `,
+        },
+        mappings: [
+          { source: 'input.css', original: [1, 0], generated: [1, 0] },
+          { source: 'input.css', original: [2, 0], generated: [1, 0] },
+          { source: 'input.css', original: [2, 4], generated: [1, 4] },
+        ],
+      }),
+      css`
+        bbbb
+      `,
+    ),
+  ).toMatchInlineSnapshot(`
+    "
+       output.css     |    input.css
+                      | 
+    1  bbbb           | 1  aaaa
+       ^ A @ 1:0      |    ^ A @ 1:0
+    1  bbbb           | 2  bbbb
+       ^^^^ B @ 1:0-4 |    ^^^^ B @ 2:0-4
+    "
+  `)
+})
diff --git a/packages/tailwindcss/src/source-maps/visualize-source-map.ts b/packages/tailwindcss/src/source-maps/visualize-source-map.ts
new file mode 100644
index 000000000..d0da423be
--- /dev/null
+++ b/packages/tailwindcss/src/source-maps/visualize-source-map.ts
@@ -0,0 +1,538 @@
+import { SourceMapConsumer, type RawSourceMap } from 'source-map-js'
+
+import { DefaultMap } from '../utils/default-map'
+
+const COLUMN_WIDTH = 100
+const CONTEXT_LINES = 3
+
+type Range = { start: [number, number]; end: [number, number] }
+
+interface Annotation {
+  original: Range
+  generated: Range | null
+  source: string
+}
+
+interface MappedAnnotation extends Annotation {
+  generated: Range
+}
+
+interface SourceMapPoint {
+  original: [number, number]
+  generated: [number, number]
+  source: string
+}
+
+interface SourceVisualization {
+  before: string[]
+  line: string
+  marker: string
+  after: string[]
+}
+
+export interface SourceMapVisualizationRange {
+  original: Range & { source: string }
+  generated: Range | null
+}
+
+/**
+ * Render source map mappings as a side-by-side view of generated and original code.
+ *
+ * For raw source maps this renders the generated segments implied by mapping points,
+ * so duplicate points and unmapped generated lines are visible in snapshots.
+ */
+export function visualizeSourceMap(map: RawSourceMap, css: string) {
+  let smc = new SourceMapConsumer(map)
+  let sourceContents = buildSourceContents(map.sources, map.sourcesContent ?? [])
+  let points: SourceMapPoint[] = []
+
+  smc.eachMapping((mapping) => {
+    if (
+      mapping.source === null ||
+      mapping.originalLine === null ||
+      mapping.originalColumn === null
+    ) {
+      return
+    }
+
+    points.push({
+      original: [mapping.originalLine, mapping.originalColumn],
+      generated: [mapping.generatedLine, mapping.generatedColumn],
+      source: mapping.source,
+    })
+  })
+
+  return renderVisualization(sourceContents, buildAnnotationsFromSourceMapPoints(points), css)
+}
+
+export function visualizeSourceMapRanges(
+  sources: Record<string, string>,
+  generated: string,
+  ranges: SourceMapVisualizationRange[],
+) {
+  let sourceContents = buildSourceContents(Object.keys(sources), Object.values(sources))
+  let annotations: Annotation[] = []
+
+  for (let range of ranges) {
+    annotations.push({
+      generated: range.generated,
+      original: range.original,
+      source: range.original.source,
+    })
+  }
+
+  return renderVisualization(sourceContents, annotations, generated)
+}
+
+function buildSourceContents(sources: string[], contents: (string | null)[]) {
+  let result = new Map<string, string[]>()
+
+  for (let i = 0; i < sources.length; i++) {
+    let content = contents[i]
+
+    if (content === undefined || content === null) continue
+
+    result.set(sources[i], content.split('\n'))
+  }
+
+  return result
+}
+
+function buildAnnotationsFromSourceMapPoints(points: SourceMapPoint[]) {
+  let annotations: Annotation[] = []
+  let current: MappedAnnotation | null = null
+
+  function finish(next: SourceMapPoint | null) {
+    if (current === null) return
+
+    if (samePosition(current.generated.start, current.generated.end)) {
+      if (next === null) {
+        current.generated.end = [current.generated.start[0] + 1, 0]
+      } else if (next.generated[0] > current.generated.start[0]) {
+        current.generated.end = [current.generated.start[0] + 1, 0]
+
+        if (
+          next.source === current.source &&
+          next.generated[0] === current.generated.start[0] + 1 &&
+          next.generated[1] === 0 &&
+          next.original[0] === current.original.start[0] + 1 &&
+          next.original[1] === 0
+        ) {
+          current.original.end = next.original
+        }
+      }
+    }
+
+    annotations.push(current)
+    current = null
+  }
+
+  for (let point of points) {
+    if (
+      current !== null &&
+      current.source === point.source &&
+      current.generated.start[0] === point.generated[0] &&
+      point.generated[1] > current.generated.end[1] &&
+      comparePosition(current.original.start, point.original) <= 0
+    ) {
+      current.generated.end = point.generated
+      current.original.end = point.original
+      continue
+    }
+
+    finish(point)
+
+    current = {
+      original: {
+        start: point.original,
+        end: point.original,
+      },
+      generated: {
+        start: point.generated,
+        end: point.generated,
+      },
+      source: point.source,
+    }
+  }
+
+  finish(null)
+
+  return annotations
+}
+
+function renderVisualization(
+  sourceContents: Map<string, string[]>,
+  annotationsList: Annotation[],
+  generated: string,
+) {
+  let generatedLines = generated.split('\n')
+  let nextLabelIdx = 0
+  let labelsBySource = new DefaultMap<string, string>(() => annotationLabel(nextLabelIdx++))
+  let labels = annotationsList.map((annotation) => {
+    return labelsBySource.get(sourceKey(annotation.source, annotation.original))
+  })
+  let generatedLineWidth = String(generatedLines.length).length
+  let sourceLineWidth = Math.max(
+    1,
+    ...Array.from(sourceContents.values(), (lines) => String(lines.length).length),
+  )
+  let leftWidth = Math.min(
+    100,
+    Math.max(
+      withLineNumber(generatedLineWidth, 'output.css').length,
+      ...annotationsList.map((annotation, idx) => {
+        let label = labels[idx]
+
+        if (annotation.generated === null) {
+          return withoutLineNumber(generatedLineWidth, `unmapped ${label}`).length
+        }
+
+        let line = withLineNumber(
+          generatedLineWidth,
+          generatedLines[annotation.generated.start[0] - 1] ?? '',
+          annotation.generated.start[0],
+        )
+        let marker = withoutLineNumber(
+          generatedLineWidth,
+          visualizeRange(
+            annotation.generated,
+            label,
+            generatedLines[annotation.generated.start[0] - 1] ?? '',
+          ),
+        )
+        let after = visualizeGeneratedRangeContinuation(
+          generatedLines,
+          generatedLineWidth,
+          annotation.generated,
+          label,
+        )
+
+        return Math.max(line.length, marker.length, ...after.map((line) => line.length))
+      }),
+    ),
+  )
+  let sources = new Set(annotationsList.map((annotation) => annotation.source))
+  let sourceHeader = sources.size === 1 ? (annotationsList[0]?.source ?? 'original') : 'original'
+  let result: string[] = []
+
+  function add(left: string, right: string) {
+    result.push(sideBySide(left, right, leftWidth))
+  }
+
+  add(
+    withLineNumber(generatedLineWidth, 'output.css'),
+    withLineNumber(sourceLineWidth, sourceHeader),
+  )
+  add(withoutLineNumber(generatedLineWidth, ''), withoutLineNumber(sourceLineWidth, ''))
+
+  let lastLine = 0
+  let lastSourceLine = new Map<string, number>()
+  let lastSource: string | null = null
+  let renderedSources = new Set<string>()
+
+  for (let idx = 0; idx < annotationsList.length; idx++) {
+    let annotation = annotationsList[idx]
+    let label = labels[idx]
+
+    if (annotation.generated === null) {
+      let source = visualizeSource(
+        sourceContents,
+        lastSourceLine,
+        renderedSources,
+        sourceLineWidth,
+        annotation.source,
+        annotation.original,
+        label,
+      )
+
+      if (sources.size > 1 && source.line !== '' && annotation.source !== lastSource) {
+        add(
+          withoutLineNumber(generatedLineWidth, ''),
+          withoutLineNumber(sourceLineWidth, `--- ${annotation.source} ---`),
+        )
+        lastSource = annotation.source
+      }
+
+      for (let line of source.before) {
+        add(withoutLineNumber(generatedLineWidth, ''), line)
+      }
+
+      add(withoutLineNumber(generatedLineWidth, `unmapped ${label}`), source.line)
+      add(withoutLineNumber(generatedLineWidth, ''), source.marker)
+
+      for (let line of source.after) {
+        add(withoutLineNumber(generatedLineWidth, ''), line)
+      }
+
+      continue
+    }
+
+    let lineNumber = annotation.generated.start[0]
+
+    for (let i = lastLine + 1; i < lineNumber; i++) {
+      add(
+        withLineNumber(generatedLineWidth, generatedLines[i - 1] ?? '', i),
+        withoutLineNumber(sourceLineWidth, ''),
+      )
+    }
+
+    let endLine = coveredEndLine(annotation.generated)
+    let generatedAfter = visualizeGeneratedRangeContinuation(
+      generatedLines,
+      generatedLineWidth,
+      annotation.generated,
+      label,
+    )
+    let source = visualizeSource(
+      sourceContents,
+      lastSourceLine,
+      renderedSources,
+      sourceLineWidth,
+      annotation.source,
+      annotation.original,
+      label,
+    )
+
+    if (sources.size > 1 && source.line !== '' && annotation.source !== lastSource) {
+      add(
+        withoutLineNumber(generatedLineWidth, ''),
+        withoutLineNumber(sourceLineWidth, `--- ${annotation.source} ---`),
+      )
+      lastSource = annotation.source
+    }
+
+    for (let line of source.before) {
+      add(withoutLineNumber(generatedLineWidth, ''), line)
+    }
+
+    add(
+      withLineNumber(generatedLineWidth, generatedLines[lineNumber - 1] ?? '', lineNumber),
+      source.line,
+    )
+    add(
+      withoutLineNumber(
+        generatedLineWidth,
+        visualizeRange(annotation.generated, label, generatedLines[lineNumber - 1] ?? ''),
+      ),
+      source.marker,
+    )
+
+    for (let i = 0; i < Math.max(generatedAfter.length, source.after.length); i++) {
+      add(generatedAfter[i] ?? withoutLineNumber(generatedLineWidth, ''), source.after[i] ?? '')
+    }
+
+    lastLine = endLine
+  }
+
+  for (let i = lastLine + 1; i <= generatedLines.length; i++) {
+    add(
+      withLineNumber(generatedLineWidth, generatedLines[i - 1] ?? '', i),
+      withoutLineNumber(sourceLineWidth, ''),
+    )
+  }
+
+  return `\n${result.join('\n')}\n`
+}
+
+function sideBySide(left: string, right: string, leftWidth: number) {
+  return `${fitColumn(left, leftWidth)} | ${fitColumn(right, COLUMN_WIDTH, false)}`
+}
+
+function withLineNumber(width: number, value: string, line?: number) {
+  return `${line === undefined ? ' '.repeat(width) : String(line).padStart(width)}  ${value}`
+}
+
+function withoutLineNumber(width: number, value: string) {
+  if (value === '') return ''
+
+  return `${' '.repeat(width)}  ${value}`
+}
+
+function fitColumn(value: string, width: number, pad = true) {
+  if (value.length <= width) {
+    return pad ? value.padEnd(width) : value
+  }
+
+  let markerIdx = value.indexOf(' @ ')
+
+  if (markerIdx !== -1) {
+    let labelIdx = value.lastIndexOf(' ', markerIdx - 1) + 1
+    let suffix = value.slice(labelIdx)
+    let prefixWidth = width - suffix.length - 4
+
+    if (prefixWidth > 0) {
+      let result = `${value.slice(0, prefixWidth)}... ${suffix}`
+
+      return pad ? result.padEnd(width) : result
+    }
+  }
+
+  return `${value.slice(0, width - 3)}...`
+}
+
+function annotationLabel(idx: number) {
+  let label = ''
+
+  for (let current = idx; current >= 0; current = Math.floor(current / 26) - 1) {
+    label = String.fromCharCode(65 + (current % 26)) + label
+  }
+
+  return label
+}
+
+function visualizeRange(range: Range, label: string, line?: string) {
+  let start = range.start[1]
+  let width = (() => {
+    if (line !== undefined && range.start[0] !== range.end[0]) {
+      return Math.max(1, line.length - start)
+    }
+
+    return Math.max(1, range.end[1] - start)
+  })()
+  return `${' '.repeat(start)}${'^'.repeat(width)} ${label} @ ${formatRange(range)}`
+}
+
+function visualizeSource(
+  sourceContents: Map<string, string[]>,
+  lastSourceLine: Map<string, number>,
+  renderedSources: Set<string>,
+  sourceLineWidth: number,
+  source: string,
+  range: Range,
+  label: string,
+): SourceVisualization {
+  let lines = sourceContents.get(source)
+
+  if (lines === undefined) return { before: [], line: '', marker: '', after: [] }
+
+  let startLine = range.start[0]
+  let line = lines[startLine - 1]
+
+  if (line === undefined) return { before: [], line: '', marker: '', after: [] }
+
+  let before: string[] = []
+  let lastLine = lastSourceLine.get(source) ?? 0
+
+  if (lastLine > 0 && startLine > lastLine && startLine - lastLine <= CONTEXT_LINES + 1) {
+    for (let i = lastLine + 1; i < startLine; i++) {
+      let line = lines[i - 1] ?? ''
+
+      if (line.trim() === '') continue
+
+      before.push(withLineNumber(sourceLineWidth, line, i))
+    }
+  }
+
+  let key = sourceKey(source, range)
+
+  if (renderedSources.has(key)) {
+    lastSourceLine.set(source, Math.max(lastLine, startLine))
+
+    return { before: [], line: '', marker: '', after: [] }
+  }
+
+  renderedSources.add(key)
+
+  let endLine = coveredEndLine(range)
+  let after = visualizeSourceRangeContinuation(lines, sourceLineWidth, range, label)
+
+  if (startLine > lastLine) {
+    for (let i = endLine + 1; i <= Math.min(endLine + CONTEXT_LINES, lines.length); i++) {
+      let line = lines[i - 1]
+
+      if (line?.trim() !== '}') break
+
+      after.push(withLineNumber(sourceLineWidth, line, i))
+      endLine = i
+    }
+  }
+
+  lastSourceLine.set(source, Math.max(lastLine, endLine))
+
+  return {
+    before,
+    line: withLineNumber(sourceLineWidth, line, startLine),
+    marker: withoutLineNumber(sourceLineWidth, visualizeRange(range, label, line)),
+    after,
+  }
+}
+
+function visualizeSourceRangeContinuation(
+  lines: string[],
+  sourceLineWidth: number,
+  range: Range,
+  label: string,
+) {
+  let result: string[] = []
+
+  for (let i = range.start[0] + 1; i <= coveredEndLine(range); i++) {
+    let line = lines[i - 1] ?? ''
+
+    result.push(withLineNumber(sourceLineWidth, line, i))
+    result.push(
+      withoutLineNumber(sourceLineWidth, visualizeContinuationRange(range, label, line, i)),
+    )
+  }
+
+  return result
+}
+
+function visualizeGeneratedRangeContinuation(
+  lines: string[],
+  generatedLineWidth: number,
+  range: Range,
+  label: string,
+) {
+  let result: string[] = []
+
+  for (let i = range.start[0] + 1; i <= coveredEndLine(range); i++) {
+    let line = lines[i - 1] ?? ''
+
+    result.push(withLineNumber(generatedLineWidth, line, i))
+    result.push(
+      withoutLineNumber(generatedLineWidth, visualizeContinuationRange(range, label, line, i)),
+    )
+  }
+
+  return result
+}
+
+function coveredEndLine(range: Range) {
+  if (range.start[0] !== range.end[0] && range.end[1] === 0) {
+    return range.end[0] - 1
+  }
+
+  return range.end[0]
+}
+
+function visualizeContinuationRange(range: Range, label: string, line: string, lineNumber: number) {
+  let start = lineNumber === range.start[0] ? range.start[1] : 0
+  let end = lineNumber === range.end[0] ? range.end[1] : line.length
+  let width = Math.max(1, end - start)
+
+  return `${' '.repeat(start)}${'^'.repeat(width)} ${label}`
+}
+
+function sourceKey(source: string, range: Range) {
+  return `${source}:${range.start[0]}:${range.start[1]}:${range.end[0]}:${range.end[1]}`
+}
+
+function samePosition(a: [number, number], b: [number, number]) {
+  return a[0] === b[0] && a[1] === b[1]
+}
+
+function comparePosition(a: [number, number], b: [number, number]) {
+  return a[0] - b[0] || a[1] - b[1]
+}
+
+function formatRange(range: Range): string {
+  if (range.start[0] === range.end[0]) {
+    if (range.start[1] === range.end[1]) {
+      return `${range.start[0]}:${range.start[1]}`
+    }
+
+    return `${range.start[0]}:${range.start[1]}-${range.end[1]}`
+  }
+
+  return `${range.start[0]}:${range.start[1]}-${range.end[0]}:${range.end[1]}`
+}
diff --git a/packages/tailwindcss/src/test-utils/run.ts b/packages/tailwindcss/src/test-utils/run.ts
index 5b4b1ca99..7667ca66f 100644
--- a/packages/tailwindcss/src/test-utils/run.ts
+++ b/packages/tailwindcss/src/test-utils/run.ts
@@ -1,20 +1,25 @@
 import { compile } from '..'
 import { optimize } from '../../../@tailwindcss-node/src/optimize'
 
-export async function compileCss(
-  css: string,
-  candidates: string[] = [],
+const css = String.raw
+
+export async function run(
+  candidates: string[],
+  input = css`
+    @tailwind utilities;
+  `,
   options: Parameters<typeof compile>[1] = {},
 ) {
-  let { build } = await compile(css, options)
-  return optimize(build(candidates)).code.trim()
+  let { build } = await compile(input, options)
+  return pretty(optimize(build(candidates)).code)
 }
 
-export async function run(candidates: string[]) {
-  let { build } = await compile('@tailwind utilities;')
-  return optimize(build(candidates)).code.trim()
+export async function compileCss(css: string, options: Parameters<typeof compile>[1] = {}) {
+  return run([], css, options)
 }
 
-export function optimizeCss(input: string) {
-  return optimize(input).code
+export function pretty(input: string) {
+  input = input.trim()
+  if (input === '') return ''
+  return `\n${input}\n`
 }
diff --git a/packages/tailwindcss/src/utilities.test.ts b/packages/tailwindcss/src/utilities.test.ts
index 4e4f1feee..66b051d57 100644
--- a/packages/tailwindcss/src/utilities.test.ts
+++ b/packages/tailwindcss/src/utilities.test.ts
@@ -1,13 +1,14 @@
 import { describe, expect, test, vi } from 'vitest'
 import { compile } from '.'
-import { compileCss, optimizeCss, run } from './test-utils/run'
+import { compileCss, run } from './test-utils/run'
 import { isValidFunctionalUtilityName, isValidStaticUtilityName } from './utilities'
 
 const css = String.raw
 
 test('sr-only', async () => {
   expect(await run(['sr-only'])).toMatchInlineSnapshot(`
-    ".sr-only {
+    "
+    .sr-only {
       clip-path: inset(50%);
       white-space: nowrap;
       border-width: 0;
@@ -17,14 +18,16 @@ test('sr-only', async () => {
       padding: 0;
       position: absolute;
       overflow: hidden;
-    }"
+    }
+    "
   `)
   expect(await run(['-sr-only', 'sr-only-[var(--value)]', 'sr-only/foo'])).toEqual('')
 })
 
 test('not-sr-only', async () => {
   expect(await run(['not-sr-only'])).toMatchInlineSnapshot(`
-    ".not-sr-only {
+    "
+    .not-sr-only {
       clip-path: none;
       white-space: normal;
       width: auto;
@@ -33,20 +36,23 @@ test('not-sr-only', async () => {
       padding: 0;
       position: static;
       overflow: visible;
-    }"
+    }
+    "
   `)
   expect(await run(['-not-sr-only', 'not-sr-only-[var(--value)]', 'not-sr-only/foo'])).toEqual('')
 })
 
 test('pointer-events', async () => {
   expect(await run(['pointer-events-none', 'pointer-events-auto'])).toMatchInlineSnapshot(`
-    ".pointer-events-auto {
+    "
+    .pointer-events-auto {
       pointer-events: auto;
     }
 
     .pointer-events-none {
       pointer-events: none;
-    }"
+    }
+    "
   `)
   expect(
     await run([
@@ -60,7 +66,8 @@ test('pointer-events', async () => {
 
 test('visibility', async () => {
   expect(await run(['visible', 'invisible', 'collapse'])).toMatchInlineSnapshot(`
-    ".collapse {
+    "
+    .collapse {
       visibility: collapse;
     }
 
@@ -70,7 +77,8 @@ test('visibility', async () => {
 
     .visible {
       visibility: visible;
-    }"
+    }
+    "
   `)
   expect(
     await run([
@@ -86,7 +94,8 @@ test('visibility', async () => {
 
 test('position', async () => {
   expect(await run(['static', 'fixed', 'absolute', 'relative', 'sticky'])).toMatchInlineSnapshot(`
-    ".absolute {
+    "
+    .absolute {
       position: absolute;
     }
 
@@ -104,7 +113,8 @@ test('position', async () => {
 
     .sticky {
       position: sticky;
-    }"
+    }
+    "
   `)
   expect(
     await run([
@@ -124,15 +134,7 @@ test('position', async () => {
 
 test('inset', async () => {
   expect(
-    await compileCss(
-      css`
-        @theme {
-          --spacing-4: 1rem;
-          --inset-shadow-sm: inset 0 1px 1px rgb(0 0 0 / 0.05);
-          --inset-shadowned: 1940px;
-        }
-        @tailwind utilities;
-      `,
+    await run(
       [
         'inset-auto',
         'inset-shadow-sm',
@@ -144,9 +146,18 @@ test('inset', async () => {
         '-inset-4',
         'inset-[4px]',
       ],
+      css`
+        @theme {
+          --spacing-4: 1rem;
+          --inset-shadow-sm: inset 0 1px 1px rgb(0 0 0 / 0.05);
+          --inset-shadowned: 1940px;
+        }
+        @tailwind utilities;
+      `,
     ),
   ).toMatchInlineSnapshot(`
-    "@layer properties {
+    "
+    @layer properties {
       @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
         *, :before, :after, ::backdrop {
           --tw-shadow: 0 0 #0000;
@@ -286,7 +297,8 @@ test('inset', async () => {
       syntax: "*";
       inherits: false;
       initial-value: 0 0 #0000;
-    }"
+    }
+    "
   `)
   expect(
     await run([
@@ -308,14 +320,7 @@ test('inset', async () => {
 
 test('inset-x', async () => {
   expect(
-    await compileCss(
-      css`
-        @theme {
-          --spacing-4: 1rem;
-          --inset-shadowned: 1940px;
-        }
-        @tailwind utilities;
-      `,
+    await run(
       [
         'inset-x-shadowned',
         'inset-x-auto',
@@ -326,9 +331,17 @@ test('inset-x', async () => {
         '-inset-x-4',
         'inset-x-[4px]',
       ],
+      css`
+        @theme {
+          --spacing-4: 1rem;
+          --inset-shadowned: 1940px;
+        }
+        @tailwind utilities;
+      `,
     ),
   ).toMatchInlineSnapshot(`
-    ":root, :host {
+    "
+    :root, :host {
       --spacing-4: 1rem;
       --inset-shadowned: 1940px;
     }
@@ -363,17 +376,11 @@ test('inset-x', async () => {
 
     .inset-x-shadowned {
       inset-inline: var(--inset-shadowned);
-    }"
+    }
+    "
   `)
   expect(
-    await compileCss(
-      css`
-        @theme reference {
-          --spacing-4: 1rem;
-          --inset-shadow-sm: inset 0 1px 1px #0000000d;
-        }
-        @tailwind utilities;
-      `,
+    await run(
       [
         'inset-x-shadow-sm',
         'inset-x',
@@ -389,20 +396,20 @@ test('inset-x', async () => {
         '-inset-x-4/foo',
         'inset-x-[4px]/foo',
       ],
+      css`
+        @theme reference {
+          --spacing-4: 1rem;
+          --inset-shadow-sm: inset 0 1px 1px #0000000d;
+        }
+        @tailwind utilities;
+      `,
     ),
   ).toEqual('')
 })
 
 test('inset-y', async () => {
   expect(
-    await compileCss(
-      css`
-        @theme {
-          --spacing-4: 1rem;
-          --inset-shadowned: 1940px;
-        }
-        @tailwind utilities;
-      `,
+    await run(
       [
         'inset-y-shadowned',
         'inset-y-auto',
@@ -413,9 +420,17 @@ test('inset-y', async () => {
         '-inset-y-4',
         'inset-y-[4px]',
       ],
+      css`
+        @theme {
+          --spacing-4: 1rem;
+          --inset-shadowned: 1940px;
+        }
+        @tailwind utilities;
+      `,
     ),
   ).toMatchInlineSnapshot(`
-    ":root, :host {
+    "
+    :root, :host {
       --spacing-4: 1rem;
       --inset-shadowned: 1940px;
     }
@@ -450,17 +465,11 @@ test('inset-y', async () => {
 
     .inset-y-shadowned {
       inset-block: var(--inset-shadowned);
-    }"
+    }
+    "
   `)
   expect(
-    await compileCss(
-      css`
-        @theme reference {
-          --spacing-4: 1rem;
-          --inset-shadow-sm: inset 0 1px 1px rgb(0 0 0 / 0.05);
-        }
-        @tailwind utilities;
-      `,
+    await run(
       [
         'inset-y-shadow-sm',
         'inset-y',
@@ -476,20 +485,20 @@ test('inset-y', async () => {
         '-inset-y-4/foo',
         'inset-y-[4px]/foo',
       ],
+      css`
+        @theme reference {
+          --spacing-4: 1rem;
+          --inset-shadow-sm: inset 0 1px 1px rgb(0 0 0 / 0.05);
+        }
+        @tailwind utilities;
+      `,
     ),
   ).toEqual('')
 })
 
 test('inset-s', async () => {
   expect(
-    await compileCss(
-      css`
-        @theme {
-          --spacing-4: 1rem;
-          --inset-shadowned: 1940px;
-        }
-        @tailwind utilities;
-      `,
+    await run(
       [
         'inset-s-shadowned',
         'inset-s-auto',
@@ -500,9 +509,17 @@ test('inset-s', async () => {
         '-inset-s-4',
         'inset-s-[4px]',
       ],
+      css`
+        @theme {
+          --spacing-4: 1rem;
+          --inset-shadowned: 1940px;
+        }
+        @tailwind utilities;
+      `,
     ),
   ).toMatchInlineSnapshot(`
-    ":root, :host {
+    "
+    :root, :host {
       --spacing-4: 1rem;
       --inset-shadowned: 1940px;
     }
@@ -537,17 +554,11 @@ test('inset-s', async () => {
 
     .inset-s-shadowned {
       inset-inline-start: var(--inset-shadowned);
-    }"
+    }
+    "
   `)
   expect(
-    await compileCss(
-      css`
-        @theme reference {
-          --spacing-4: 1rem;
-          --inset-shadow-sm: inset 0 1px 1px rgb(0 0 0 / 0.05);
-        }
-        @tailwind utilities;
-      `,
+    await run(
       [
         'inset-s-shadow-sm',
         'inset-s',
@@ -563,20 +574,20 @@ test('inset-s', async () => {
         '-inset-s-4/foo',
         'inset-s-[4px]/foo',
       ],
+      css`
+        @theme reference {
+          --spacing-4: 1rem;
+          --inset-shadow-sm: inset 0 1px 1px rgb(0 0 0 / 0.05);
+        }
+        @tailwind utilities;
+      `,
     ),
   ).toEqual('')
 })
 
 test('inset-e', async () => {
   expect(
-    await compileCss(
-      css`
-        @theme {
-          --spacing-4: 1rem;
-          --inset-shadowned: 1940px;
-        }
-        @tailwind utilities;
-      `,
+    await run(
       [
         'inset-e-shadowned',
         'inset-e-auto',
@@ -587,9 +598,17 @@ test('inset-e', async () => {
         '-inset-e-4',
         'inset-e-[4px]',
       ],
+      css`
+        @theme {
+          --spacing-4: 1rem;
+          --inset-shadowned: 1940px;
+        }
+        @tailwind utilities;
+      `,
     ),
   ).toMatchInlineSnapshot(`
-    ":root, :host {
+    "
+    :root, :host {
       --spacing-4: 1rem;
       --inset-shadowned: 1940px;
     }
@@ -624,17 +643,11 @@ test('inset-e', async () => {
 
     .inset-e-shadowned {
       inset-inline-end: var(--inset-shadowned);
-    }"
+    }
+    "
   `)
   expect(
-    await compileCss(
-      css`
-        @theme reference {
-          --spacing-4: 1rem;
-          --inset-shadow-sm: inset 0 1px 1px rgb(0 0 0 / 0.05);
-        }
-        @tailwind utilities;
-      `,
+    await run(
       [
         'inset-e-shadow-sm',
         'inset-e',
@@ -650,20 +663,20 @@ test('inset-e', async () => {
         '-inset-e-4/foo',
         'inset-e-[4px]/foo',
       ],
+      css`
+        @theme reference {
+          --spacing-4: 1rem;
+          --inset-shadow-sm: inset 0 1px 1px rgb(0 0 0 / 0.05);
+        }
+        @tailwind utilities;
+      `,
     ),
   ).toEqual('')
 })
 
 test('inset-bs', async () => {
   expect(
-    await compileCss(
-      css`
-        @theme {
-          --spacing-4: 1rem;
-          --inset-shadowned: 1940px;
-        }
-        @tailwind utilities;
-      `,
+    await run(
       [
         'inset-bs-shadowned',
         'inset-bs-auto',
@@ -674,9 +687,17 @@ test('inset-bs', async () => {
         '-inset-bs-4',
         'inset-bs-[4px]',
       ],
+      css`
+        @theme {
+          --spacing-4: 1rem;
+          --inset-shadowned: 1940px;
+        }
+        @tailwind utilities;
+      `,
     ),
   ).toMatchInlineSnapshot(`
-    ":root, :host {
+    "
+    :root, :host {
       --spacing-4: 1rem;
       --inset-shadowned: 1940px;
     }
@@ -711,17 +732,11 @@ test('inset-bs', async () => {
 
     .inset-bs-shadowned {
       inset-block-start: var(--inset-shadowned);
-    }"
+    }
+    "
   `)
   expect(
-    await compileCss(
-      css`
-        @theme reference {
-          --spacing-4: 1rem;
-          --inset-shadow-sm: inset 0 1px 1px rgb(0 0 0 / 0.05);
-        }
-        @tailwind utilities;
-      `,
+    await run(
       [
         'inset-bs-shadow-sm',
         'inset-bs',
@@ -737,20 +752,20 @@ test('inset-bs', async () => {
         '-inset-bs-4/foo',
         'inset-bs-[4px]/foo',
       ],
+      css`
+        @theme reference {
+          --spacing-4: 1rem;
+          --inset-shadow-sm: inset 0 1px 1px rgb(0 0 0 / 0.05);
+        }
+        @tailwind utilities;
+      `,
     ),
   ).toEqual('')
 })
 
 test('inset-be', async () => {
   expect(
-    await compileCss(
-      css`
-        @theme {
-          --spacing-4: 1rem;
-          --inset-shadowned: 1940px;
-        }
-        @tailwind utilities;
-      `,
+    await run(
       [
         'inset-be-shadowned',
         'inset-be-auto',
@@ -761,9 +776,17 @@ test('inset-be', async () => {
         '-inset-be-4',
         'inset-be-[4px]',
       ],
+      css`
+        @theme {
+          --spacing-4: 1rem;
+          --inset-shadowned: 1940px;
+        }
+        @tailwind utilities;
+      `,
     ),
   ).toMatchInlineSnapshot(`
-    ":root, :host {
+    "
+    :root, :host {
       --spacing-4: 1rem;
       --inset-shadowned: 1940px;
     }
@@ -798,17 +821,11 @@ test('inset-be', async () => {
 
     .inset-be-shadowned {
       inset-block-end: var(--inset-shadowned);
-    }"
+    }
+    "
   `)
   expect(
-    await compileCss(
-      css`
-        @theme reference {
-          --spacing-4: 1rem;
-          --inset-shadow-sm: inset 0 1px 1px rgb(0 0 0 / 0.05);
-        }
-        @tailwind utilities;
-      `,
+    await run(
       [
         'inset-be-shadow-sm',
         'inset-be',
@@ -824,21 +841,20 @@ test('inset-be', async () => {
         '-inset-be-4/foo',
         'inset-be-[4px]/foo',
       ],
+      css`
+        @theme reference {
+          --spacing-4: 1rem;
+          --inset-shadow-sm: inset 0 1px 1px rgb(0 0 0 / 0.05);
+        }
+        @tailwind utilities;
+      `,
     ),
   ).toEqual('')
 })
 
 test('top', async () => {
   expect(
-    await compileCss(
-      css`
-        @theme {
-          --spacing-4: 1rem;
-          --inset-shadowned: 1940px;
-        }
-        @tailwind utilities;
-      `,
-
+    await run(
       [
         'top-shadowned',
         'top-auto',
@@ -849,9 +865,17 @@ test('top', async () => {
         '-top-4',
         'top-[4px]',
       ],
+      css`
+        @theme {
+          --spacing-4: 1rem;
+          --inset-shadowned: 1940px;
+        }
+        @tailwind utilities;
+      `,
     ),
   ).toMatchInlineSnapshot(`
-    ":root, :host {
+    "
+    :root, :host {
       --spacing-4: 1rem;
       --inset-shadowned: 1940px;
     }
@@ -886,17 +910,11 @@ test('top', async () => {
 
     .top-shadowned {
       top: var(--inset-shadowned);
-    }"
+    }
+    "
   `)
   expect(
-    await compileCss(
-      css`
-        @theme reference {
-          --spacing-4: 1rem;
-          --inset-shadow-sm: inset 0 1px 1px rgb(0 0 0 / 0.05);
-        }
-        @tailwind utilities;
-      `,
+    await run(
       [
         'top-shadow-sm',
         'top',
@@ -912,20 +930,20 @@ test('top', async () => {
         '-top-4/foo',
         'top-[4px]/foo',
       ],
+      css`
+        @theme reference {
+          --spacing-4: 1rem;
+          --inset-shadow-sm: inset 0 1px 1px rgb(0 0 0 / 0.05);
+        }
+        @tailwind utilities;
+      `,
     ),
   ).toEqual('')
 })
 
 test('right', async () => {
   expect(
-    await compileCss(
-      css`
-        @theme {
-          --spacing-4: 1rem;
-          --inset-shadowned: 1940px;
-        }
-        @tailwind utilities;
-      `,
+    await run(
       [
         'right-shadowned',
         'right-auto',
@@ -936,9 +954,17 @@ test('right', async () => {
         '-right-4',
         'right-[4px]',
       ],
+      css`
+        @theme {
+          --spacing-4: 1rem;
+          --inset-shadowned: 1940px;
+        }
+        @tailwind utilities;
+      `,
     ),
   ).toMatchInlineSnapshot(`
-    ":root, :host {
+    "
+    :root, :host {
       --spacing-4: 1rem;
       --inset-shadowned: 1940px;
     }
@@ -973,17 +999,11 @@ test('right', async () => {
 
     .right-shadowned {
       right: var(--inset-shadowned);
-    }"
+    }
+    "
   `)
   expect(
-    await compileCss(
-      css`
-        @theme reference {
-          --spacing-4: 1rem;
-          --inset-shadow-sm: inset 0 1px 1px rgb(0 0 0 / 0.05);
-        }
-        @tailwind utilities;
-      `,
+    await run(
       [
         'right-shadow-sm',
         'right',
@@ -999,20 +1019,20 @@ test('right', async () => {
         '-right-4/foo',
         'right-[4px]/foo',
       ],
+      css`
+        @theme reference {
+          --spacing-4: 1rem;
+          --inset-shadow-sm: inset 0 1px 1px rgb(0 0 0 / 0.05);
+        }
+        @tailwind utilities;
+      `,
     ),
   ).toEqual('')
 })
 
 test('bottom', async () => {
   expect(
-    await compileCss(
-      css`
-        @theme {
-          --spacing-4: 1rem;
-          --inset-shadowned: 1940px;
-        }
-        @tailwind utilities;
-      `,
+    await run(
       [
         'bottom-shadowned',
         'bottom-auto',
@@ -1023,9 +1043,17 @@ test('bottom', async () => {
         '-bottom-4',
         'bottom-[4px]',
       ],
+      css`
+        @theme {
+          --spacing-4: 1rem;
+          --inset-shadowned: 1940px;
+        }
+        @tailwind utilities;
+      `,
     ),
   ).toMatchInlineSnapshot(`
-    ":root, :host {
+    "
+    :root, :host {
       --spacing-4: 1rem;
       --inset-shadowned: 1940px;
     }
@@ -1060,17 +1088,11 @@ test('bottom', async () => {
 
     .bottom-shadowned {
       bottom: var(--inset-shadowned);
-    }"
+    }
+    "
   `)
   expect(
-    await compileCss(
-      css`
-        @theme reference {
-          --spacing-4: 1rem;
-          --inset-shadow-sm: inset 0 1px 1px rgb(0 0 0 / 0.05);
-        }
-        @tailwind utilities;
-      `,
+    await run(
       [
         'bottom-shadow-sm',
         'bottom',
@@ -1086,20 +1108,20 @@ test('bottom', async () => {
         '-bottom-4/foo',
         'bottom-[4px]/foo',
       ],
+      css`
+        @theme reference {
+          --spacing-4: 1rem;
+          --inset-shadow-sm: inset 0 1px 1px rgb(0 0 0 / 0.05);
+        }
+        @tailwind utilities;
+      `,
     ),
   ).toEqual('')
 })
 
 test('left', async () => {
   expect(
-    await compileCss(
-      css`
-        @theme {
-          --spacing-4: 1rem;
-          --inset-shadowned: 1940px;
-        }
-        @tailwind utilities;
-      `,
+    await run(
       [
         'left-shadowned',
         'left-auto',
@@ -1109,10 +1131,21 @@ test('left', async () => {
         'left-4',
         '-left-4',
         'left-[4px]',
+
+        // https://github.com/tailwindlabs/tailwindcss/issues/20010
+        '-left-[(var(--my-var1)+var(--my-var2))]',
       ],
+      css`
+        @theme {
+          --spacing-4: 1rem;
+          --inset-shadowned: 1940px;
+        }
+        @tailwind utilities;
+      `,
     ),
   ).toMatchInlineSnapshot(`
-    ":root, :host {
+    "
+    :root, :host {
       --spacing-4: 1rem;
       --inset-shadowned: 1940px;
     }
@@ -1121,6 +1154,10 @@ test('left', async () => {
       left: calc(var(--spacing-4) * -1);
     }
 
+    .-left-\\[\\(var\\(--my-var1\\)\\+var\\(--my-var2\\)\\)\\] {
+      left: calc((var(--my-var1) + var(--my-var2)) * -1);
+    }
+
     .-left-full {
       left: -100%;
     }
@@ -1147,17 +1184,11 @@ test('left', async () => {
 
     .left-shadowned {
       left: var(--inset-shadowned);
-    }"
+    }
+    "
   `)
   expect(
-    await compileCss(
-      css`
-        @theme reference {
-          --spacing-4: 1rem;
-          --inset-shadow-sm: inset 0 1px 1px rgb(0 0 0 / 0.05);
-        }
-        @tailwind utilities;
-      `,
+    await run(
       [
         'left-shadow-sm',
         'left',
@@ -1173,19 +1204,28 @@ test('left', async () => {
         '-left-4/foo',
         'left-[4px]/foo',
       ],
+      css`
+        @theme reference {
+          --spacing-4: 1rem;
+          --inset-shadow-sm: inset 0 1px 1px rgb(0 0 0 / 0.05);
+        }
+        @tailwind utilities;
+      `,
     ),
   ).toEqual('')
 })
 
 test('isolation', async () => {
   expect(await run(['isolate', 'isolation-auto'])).toMatchInlineSnapshot(`
-    ".isolate {
+    "
+    .isolate {
       isolation: isolate;
     }
 
     .isolation-auto {
       isolation: auto;
-    }"
+    }
+    "
   `)
   expect(await run(['-isolate', '-isolation-auto', 'isolate/foo', 'isolation-auto/foo'])).toEqual(
     '',
@@ -1195,7 +1235,8 @@ test('isolation', async () => {
 test('z-index', async () => {
   expect(await run(['z-auto', 'z-10', '-z-10', 'z-[123]', '-z-[var(--value)]']))
     .toMatchInlineSnapshot(`
-      ".-z-10 {
+      "
+      .-z-10 {
         z-index: calc(10 * -1);
       }
 
@@ -1213,7 +1254,8 @@ test('z-index', async () => {
 
       .z-auto {
         z-index: auto;
-      }"
+      }
+      "
     `)
   expect(
     await run([
@@ -1231,23 +1273,25 @@ test('z-index', async () => {
   ).toEqual('')
 
   expect(
-    await compileCss(
+    await run(
+      ['z-auto'],
       css`
         @theme {
           --z-index-auto: 42;
         }
         @tailwind utilities;
       `,
-      ['z-auto'],
     ),
   ).toMatchInlineSnapshot(`
-    ":root, :host {
+    "
+    :root, :host {
       --z-index-auto: 42;
     }
 
     .z-auto {
       z-index: var(--z-index-auto);
-    }"
+    }
+    "
   `)
 })
 
@@ -1263,7 +1307,8 @@ test('order', async () => {
       'order-none',
     ]),
   ).toMatchInlineSnapshot(`
-    ".-order-4 {
+    "
+    .-order-4 {
       order: calc(4 * -1);
     }
 
@@ -1289,7 +1334,8 @@ test('order', async () => {
 
     .order-none {
       order: 0;
-    }"
+    }
+    "
   `)
   expect(
     await run([
@@ -1311,43 +1357,47 @@ test('order', async () => {
   ).toEqual('')
 
   expect(
-    await compileCss(
+    await run(
+      ['order-first'],
       css`
         @theme {
           --order-first: 1;
         }
         @tailwind utilities;
       `,
-      ['order-first'],
     ),
   ).toMatchInlineSnapshot(`
-    ":root, :host {
+    "
+    :root, :host {
       --order-first: 1;
     }
 
     .order-first {
       order: var(--order-first);
-    }"
+    }
+    "
   `)
 
   expect(
-    await compileCss(
+    await run(
+      ['order-last'],
       css`
         @theme {
           --order-last: -1;
         }
         @tailwind utilities;
       `,
-      ['order-last'],
     ),
   ).toMatchInlineSnapshot(`
-    ":root, :host {
+    "
+    :root, :host {
       --order-last: -1;
     }
 
     .order-last {
       order: var(--order-last);
-    }"
+    }
+    "
   `)
 })
 
@@ -1364,7 +1414,8 @@ test('col', async () => {
       'col-span-[var(--my-variable)]',
     ]),
   ).toMatchInlineSnapshot(`
-    ".-col-12 {
+    "
+    .-col-12 {
       grid-column: calc(12 * -1);
     }
 
@@ -1394,7 +1445,8 @@ test('col', async () => {
 
     .col-span-full {
       grid-column: 1 / -1;
-    }"
+    }
+    "
   `)
   expect(
     await run([
@@ -1413,35 +1465,31 @@ test('col', async () => {
   ).toEqual('')
 
   expect(
-    await compileCss(
+    await run(
+      ['col-auto'],
       css`
         @theme {
           --grid-column-auto: 5;
         }
         @tailwind utilities;
       `,
-      ['col-auto'],
     ),
   ).toMatchInlineSnapshot(`
-    ":root, :host {
+    "
+    :root, :host {
       --grid-column-auto: 5;
     }
 
     .col-auto {
       grid-column: var(--grid-column-auto);
-    }"
+    }
+    "
   `)
 })
 
 test('col-start', async () => {
   expect(
-    await compileCss(
-      css`
-        @theme {
-          --grid-column-start-custom: 1 column-start;
-        }
-        @tailwind utilities;
-      `,
+    await run(
       [
         'col-start-auto',
         'col-start-4',
@@ -1450,9 +1498,16 @@ test('col-start', async () => {
         '-col-start-4',
         'col-start-custom',
       ],
+      css`
+        @theme {
+          --grid-column-start-custom: 1 column-start;
+        }
+        @tailwind utilities;
+      `,
     ),
   ).toMatchInlineSnapshot(`
-    ":root, :host {
+    "
+    :root, :host {
       --grid-column-start-custom: 1 column-start;
     }
 
@@ -1478,7 +1533,8 @@ test('col-start', async () => {
 
     .col-start-custom {
       grid-column-start: var(--grid-column-start-custom);
-    }"
+    }
+    "
   `)
   expect(
     await run([
@@ -1494,39 +1550,42 @@ test('col-start', async () => {
   ).toEqual('')
 
   expect(
-    await compileCss(
+    await run(
+      ['col-start-auto'],
       css`
         @theme {
           --grid-column-start-auto: 7;
         }
         @tailwind utilities;
       `,
-      ['col-start-auto'],
     ),
   ).toMatchInlineSnapshot(`
-    ":root, :host {
+    "
+    :root, :host {
       --grid-column-start-auto: 7;
     }
 
     .col-start-auto {
       grid-column-start: var(--grid-column-start-auto);
-    }"
+    }
+    "
   `)
 })
 
 test('col-end', async () => {
   expect(
-    await compileCss(
+    await run(
+      ['col-end-auto', 'col-end-4', 'col-end-99', 'col-end-[123]', '-col-end-4', 'col-end-custom'],
       css`
         @theme {
           --grid-column-end-custom: 1 column-end;
         }
         @tailwind utilities;
       `,
-      ['col-end-auto', 'col-end-4', 'col-end-99', 'col-end-[123]', '-col-end-4', 'col-end-custom'],
     ),
   ).toMatchInlineSnapshot(`
-    ":root, :host {
+    "
+    :root, :host {
       --grid-column-end-custom: 1 column-end;
     }
 
@@ -1552,7 +1611,8 @@ test('col-end', async () => {
 
     .col-end-custom {
       grid-column-end: var(--grid-column-end-custom);
-    }"
+    }
+    "
   `)
   expect(
     await run([
@@ -1568,23 +1628,25 @@ test('col-end', async () => {
   ).toEqual('')
 
   expect(
-    await compileCss(
+    await run(
+      ['col-end-auto'],
       css`
         @theme {
           --grid-column-end-auto: 3;
         }
         @tailwind utilities;
       `,
-      ['col-end-auto'],
     ),
   ).toMatchInlineSnapshot(`
-    ":root, :host {
+    "
+    :root, :host {
       --grid-column-end-auto: 3;
     }
 
     .col-end-auto {
       grid-column-end: var(--grid-column-end-auto);
-    }"
+    }
+    "
   `)
 })
 
@@ -1601,7 +1663,8 @@ test('row', async () => {
       'row-span-[var(--my-variable)]',
     ]),
   ).toMatchInlineSnapshot(`
-    ".-row-12 {
+    "
+    .-row-12 {
       grid-row: calc(12 * -1);
     }
 
@@ -1631,7 +1694,8 @@ test('row', async () => {
 
     .row-span-full {
       grid-row: 1 / -1;
-    }"
+    }
+    "
   `)
   expect(
     await run([
@@ -1657,35 +1721,31 @@ test('row', async () => {
   ).toEqual('')
 
   expect(
-    await compileCss(
+    await run(
+      ['row-auto'],
       css`
         @theme {
           --grid-row-auto: 9;
         }
         @tailwind utilities;
       `,
-      ['row-auto'],
     ),
   ).toMatchInlineSnapshot(`
-    ":root, :host {
+    "
+    :root, :host {
       --grid-row-auto: 9;
     }
 
     .row-auto {
       grid-row: var(--grid-row-auto);
-    }"
+    }
+    "
   `)
 })
 
 test('row-start', async () => {
   expect(
-    await compileCss(
-      css`
-        @theme {
-          --grid-row-start-custom: 1 row-start;
-        }
-        @tailwind utilities;
-      `,
+    await run(
       [
         'row-start-auto',
         'row-start-4',
@@ -1694,9 +1754,16 @@ test('row-start', async () => {
         '-row-start-4',
         'row-start-custom',
       ],
+      css`
+        @theme {
+          --grid-row-start-custom: 1 row-start;
+        }
+        @tailwind utilities;
+      `,
     ),
   ).toMatchInlineSnapshot(`
-    ":root, :host {
+    "
+    :root, :host {
       --grid-row-start-custom: 1 row-start;
     }
 
@@ -1722,7 +1789,8 @@ test('row-start', async () => {
 
     .row-start-custom {
       grid-row-start: var(--grid-row-start-custom);
-    }"
+    }
+    "
   `)
   expect(
     await run([
@@ -1738,39 +1806,42 @@ test('row-start', async () => {
   ).toEqual('')
 
   expect(
-    await compileCss(
+    await run(
+      ['row-start-auto'],
       css`
         @theme {
           --grid-row-start-auto: 11;
         }
         @tailwind utilities;
       `,
-      ['row-start-auto'],
     ),
   ).toMatchInlineSnapshot(`
-    ":root, :host {
+    "
+    :root, :host {
       --grid-row-start-auto: 11;
     }
 
     .row-start-auto {
       grid-row-start: var(--grid-row-start-auto);
-    }"
+    }
+    "
   `)
 })
 
 test('row-end', async () => {
   expect(
-    await compileCss(
+    await run(
+      ['row-end-auto', 'row-end-4', 'row-end-99', 'row-end-[123]', '-row-end-4', 'row-end-custom'],
       css`
         @theme {
           --grid-row-end-custom: 1 row-end;
         }
         @tailwind utilities;
       `,
-      ['row-end-auto', 'row-end-4', 'row-end-99', 'row-end-[123]', '-row-end-4', 'row-end-custom'],
     ),
   ).toMatchInlineSnapshot(`
-    ":root, :host {
+    "
+    :root, :host {
       --grid-row-end-custom: 1 row-end;
     }
 
@@ -1796,7 +1867,8 @@ test('row-end', async () => {
 
     .row-end-custom {
       grid-row-end: var(--grid-row-end-custom);
-    }"
+    }
+    "
   `)
   expect(
     await run([
@@ -1812,30 +1884,33 @@ test('row-end', async () => {
   ).toEqual('')
 
   expect(
-    await compileCss(
+    await run(
+      ['row-end-auto'],
       css`
         @theme {
           --grid-row-end-auto: 13;
         }
         @tailwind utilities;
       `,
-      ['row-end-auto'],
     ),
   ).toMatchInlineSnapshot(`
-    ":root, :host {
+    "
+    :root, :host {
       --grid-row-end-auto: 13;
     }
 
     .row-end-auto {
       grid-row-end: var(--grid-row-end-auto);
-    }"
+    }
+    "
   `)
 })
 
 test('float', async () => {
   expect(await run(['float-start', 'float-end', 'float-right', 'float-left', 'float-none']))
     .toMatchInlineSnapshot(`
-      ".float-end {
+      "
+      .float-end {
         float: inline-end;
       }
 
@@ -1853,7 +1928,8 @@ test('float', async () => {
 
       .float-start {
         float: inline-start;
-      }"
+      }
+      "
     `)
   expect(
     await run([
@@ -1883,7 +1959,8 @@ test('clear', async () => {
       'clear-none',
     ]),
   ).toMatchInlineSnapshot(`
-    ".clear-both {
+    "
+    .clear-both {
       clear: both;
     }
 
@@ -1905,7 +1982,8 @@ test('clear', async () => {
 
     .clear-start {
       clear: inline-start;
-    }"
+    }
+    "
   `)
   expect(
     await run([
@@ -1928,17 +2006,18 @@ test('clear', async () => {
 
 test('margin', async () => {
   expect(
-    await compileCss(
+    await run(
+      ['m-auto', 'm-4', 'm-[4px]', '-m-4', '-m-[var(--value)]'],
       css`
         @theme {
           --spacing-4: 1rem;
         }
         @tailwind utilities;
       `,
-      ['m-auto', 'm-4', 'm-[4px]', '-m-4', '-m-[var(--value)]'],
     ),
   ).toMatchInlineSnapshot(`
-    ":root, :host {
+    "
+    :root, :host {
       --spacing-4: 1rem;
     }
 
@@ -1960,7 +2039,8 @@ test('margin', async () => {
 
     .m-auto {
       margin: auto;
-    }"
+    }
+    "
   `)
   expect(
     await run(['m', 'm-auto/foo', 'm-4/foo', 'm-[4px]/foo', '-m-4/foo', '-m-[var(--value)]/foo']),
@@ -1969,14 +2049,7 @@ test('margin', async () => {
 
 test('mx', async () => {
   expect(
-    await compileCss(
-      css`
-        @theme {
-          --spacing: 0.25rem;
-          --spacing-big: 100rem;
-        }
-        @tailwind utilities;
-      `,
+    await run(
       [
         'mx-auto',
         'mx-1',
@@ -1990,9 +2063,17 @@ test('mx', async () => {
         'mx-[var(--my-var)]',
         '-mx-[var(--my-var)]',
       ],
+      css`
+        @theme {
+          --spacing: 0.25rem;
+          --spacing-big: 100rem;
+        }
+        @tailwind utilities;
+      `,
     ),
   ).toMatchInlineSnapshot(`
-    ":root, :host {
+    "
+    :root, :host {
       --spacing: .25rem;
       --spacing-big: 100rem;
     }
@@ -2014,7 +2095,7 @@ test('mx', async () => {
     }
 
     .mx-1 {
-      margin-inline: calc(var(--spacing) * 1);
+      margin-inline: var(--spacing);
     }
 
     .mx-4 {
@@ -2039,7 +2120,8 @@ test('mx', async () => {
 
     .mx-big {
       margin-inline: var(--spacing-big);
-    }"
+    }
+    "
   `)
   expect(
     await run([
@@ -2055,14 +2137,7 @@ test('mx', async () => {
 
 test('my', async () => {
   expect(
-    await compileCss(
-      css`
-        @theme {
-          --spacing: 0.25rem;
-          --spacing-big: 100rem;
-        }
-        @tailwind utilities;
-      `,
+    await run(
       [
         'my-1',
         'my-99',
@@ -2076,9 +2151,17 @@ test('my', async () => {
         'my-[var(--my-var)]',
         '-my-[var(--my-var)]',
       ],
+      css`
+        @theme {
+          --spacing: 0.25rem;
+          --spacing-big: 100rem;
+        }
+        @tailwind utilities;
+      `,
     ),
   ).toMatchInlineSnapshot(`
-    ":root, :host {
+    "
+    :root, :host {
       --spacing: .25rem;
       --spacing-big: 100rem;
     }
@@ -2104,7 +2187,7 @@ test('my', async () => {
     }
 
     .my-1 {
-      margin-block: calc(var(--spacing) * 1);
+      margin-block: var(--spacing);
     }
 
     .my-2\\.5 {
@@ -2125,7 +2208,8 @@ test('my', async () => {
 
     .my-big {
       margin-block: var(--spacing-big);
-    }"
+    }
+    "
   `)
   expect(
     await run([
@@ -2141,14 +2225,7 @@ test('my', async () => {
 
 test('mt', async () => {
   expect(
-    await compileCss(
-      css`
-        @theme {
-          --spacing: 0.25rem;
-          --spacing-big: 100rem;
-        }
-        @tailwind utilities;
-      `,
+    await run(
       [
         'mt-1',
         'mt-99',
@@ -2162,9 +2239,17 @@ test('mt', async () => {
         'mt-[var(--my-var)]',
         '-mt-[var(--my-var)]',
       ],
+      css`
+        @theme {
+          --spacing: 0.25rem;
+          --spacing-big: 100rem;
+        }
+        @tailwind utilities;
+      `,
     ),
   ).toMatchInlineSnapshot(`
-    ":root, :host {
+    "
+    :root, :host {
       --spacing: .25rem;
       --spacing-big: 100rem;
     }
@@ -2190,7 +2275,7 @@ test('mt', async () => {
     }
 
     .mt-1 {
-      margin-top: calc(var(--spacing) * 1);
+      margin-top: var(--spacing);
     }
 
     .mt-2\\.5 {
@@ -2211,7 +2296,8 @@ test('mt', async () => {
 
     .mt-big {
       margin-top: var(--spacing-big);
-    }"
+    }
+    "
   `)
   expect(
     await run([
@@ -2227,14 +2313,7 @@ test('mt', async () => {
 
 test('ms', async () => {
   expect(
-    await compileCss(
-      css`
-        @theme {
-          --spacing: 0.25rem;
-          --spacing-big: 100rem;
-        }
-        @tailwind utilities;
-      `,
+    await run(
       [
         'ms-1',
         'ms-99',
@@ -2248,9 +2327,17 @@ test('ms', async () => {
         'ms-[var(--my-var)]',
         '-ms-[var(--my-var)]',
       ],
+      css`
+        @theme {
+          --spacing: 0.25rem;
+          --spacing-big: 100rem;
+        }
+        @tailwind utilities;
+      `,
     ),
   ).toMatchInlineSnapshot(`
-    ":root, :host {
+    "
+    :root, :host {
       --spacing: .25rem;
       --spacing-big: 100rem;
     }
@@ -2276,7 +2363,7 @@ test('ms', async () => {
     }
 
     .ms-1 {
-      margin-inline-start: calc(var(--spacing) * 1);
+      margin-inline-start: var(--spacing);
     }
 
     .ms-2\\.5 {
@@ -2297,7 +2384,8 @@ test('ms', async () => {
 
     .ms-big {
       margin-inline-start: var(--spacing-big);
-    }"
+    }
+    "
   `)
   expect(
     await run([
@@ -2313,14 +2401,7 @@ test('ms', async () => {
 
 test('me', async () => {
   expect(
-    await compileCss(
-      css`
-        @theme {
-          --spacing: 0.25rem;
-          --spacing-big: 100rem;
-        }
-        @tailwind utilities;
-      `,
+    await run(
       [
         'me-1',
         'me-99',
@@ -2334,9 +2415,17 @@ test('me', async () => {
         'me-[var(--my-var)]',
         '-me-[var(--my-var)]',
       ],
+      css`
+        @theme {
+          --spacing: 0.25rem;
+          --spacing-big: 100rem;
+        }
+        @tailwind utilities;
+      `,
     ),
   ).toMatchInlineSnapshot(`
-    ":root, :host {
+    "
+    :root, :host {
       --spacing: .25rem;
       --spacing-big: 100rem;
     }
@@ -2362,7 +2451,7 @@ test('me', async () => {
     }
 
     .me-1 {
-      margin-inline-end: calc(var(--spacing) * 1);
+      margin-inline-end: var(--spacing);
     }
 
     .me-2\\.5 {
@@ -2383,7 +2472,8 @@ test('me', async () => {
 
     .me-big {
       margin-inline-end: var(--spacing-big);
-    }"
+    }
+    "
   `)
   expect(
     await run([
@@ -2399,14 +2489,7 @@ test('me', async () => {
 
 test('mbs', async () => {
   expect(
-    await compileCss(
-      css`
-        @theme {
-          --spacing: 0.25rem;
-          --spacing-big: 100rem;
-        }
-        @tailwind utilities;
-      `,
+    await run(
       [
         'mbs-1',
         'mbs-99',
@@ -2420,9 +2503,17 @@ test('mbs', async () => {
         'mbs-[var(--my-var)]',
         '-mbs-[var(--my-var)]',
       ],
+      css`
+        @theme {
+          --spacing: 0.25rem;
+          --spacing-big: 100rem;
+        }
+        @tailwind utilities;
+      `,
     ),
   ).toMatchInlineSnapshot(`
-    ":root, :host {
+    "
+    :root, :host {
       --spacing: .25rem;
       --spacing-big: 100rem;
     }
@@ -2448,7 +2539,7 @@ test('mbs', async () => {
     }
 
     .mbs-1 {
-      margin-block-start: calc(var(--spacing) * 1);
+      margin-block-start: var(--spacing);
     }
 
     .mbs-2\\.5 {
@@ -2469,7 +2560,8 @@ test('mbs', async () => {
 
     .mbs-big {
       margin-block-start: var(--spacing-big);
-    }"
+    }
+    "
   `)
   expect(
     await run([
@@ -2485,14 +2577,7 @@ test('mbs', async () => {
 
 test('mbe', async () => {
   expect(
-    await compileCss(
-      css`
-        @theme {
-          --spacing: 0.25rem;
-          --spacing-big: 100rem;
-        }
-        @tailwind utilities;
-      `,
+    await run(
       [
         'mbe-1',
         'mbe-99',
@@ -2506,9 +2591,17 @@ test('mbe', async () => {
         'mbe-[var(--my-var)]',
         '-mbe-[var(--my-var)]',
       ],
+      css`
+        @theme {
+          --spacing: 0.25rem;
+          --spacing-big: 100rem;
+        }
+        @tailwind utilities;
+      `,
     ),
   ).toMatchInlineSnapshot(`
-    ":root, :host {
+    "
+    :root, :host {
       --spacing: .25rem;
       --spacing-big: 100rem;
     }
@@ -2534,7 +2627,7 @@ test('mbe', async () => {
     }
 
     .mbe-1 {
-      margin-block-end: calc(var(--spacing) * 1);
+      margin-block-end: var(--spacing);
     }
 
     .mbe-2\\.5 {
@@ -2555,7 +2648,8 @@ test('mbe', async () => {
 
     .mbe-big {
       margin-block-end: var(--spacing-big);
-    }"
+    }
+    "
   `)
   expect(
     await run([
@@ -2571,14 +2665,7 @@ test('mbe', async () => {
 
 test('mr', async () => {
   expect(
-    await compileCss(
-      css`
-        @theme {
-          --spacing: 0.25rem;
-          --spacing-big: 100rem;
-        }
-        @tailwind utilities;
-      `,
+    await run(
       [
         'mr-1',
         'mr-99',
@@ -2592,9 +2679,17 @@ test('mr', async () => {
         'mr-[var(--my-var)]',
         '-mr-[var(--my-var)]',
       ],
+      css`
+        @theme {
+          --spacing: 0.25rem;
+          --spacing-big: 100rem;
+        }
+        @tailwind utilities;
+      `,
     ),
   ).toMatchInlineSnapshot(`
-    ":root, :host {
+    "
+    :root, :host {
       --spacing: .25rem;
       --spacing-big: 100rem;
     }
@@ -2620,7 +2715,7 @@ test('mr', async () => {
     }
 
     .mr-1 {
-      margin-right: calc(var(--spacing) * 1);
+      margin-right: var(--spacing);
     }
 
     .mr-2\\.5 {
@@ -2641,7 +2736,8 @@ test('mr', async () => {
 
     .mr-big {
       margin-right: var(--spacing-big);
-    }"
+    }
+    "
   `)
   expect(
     await run([
@@ -2657,14 +2753,7 @@ test('mr', async () => {
 
 test('mb', async () => {
   expect(
-    await compileCss(
-      css`
-        @theme {
-          --spacing: 0.25rem;
-          --spacing-big: 100rem;
-        }
-        @tailwind utilities;
-      `,
+    await run(
       [
         'mb-1',
         'mb-99',
@@ -2678,9 +2767,17 @@ test('mb', async () => {
         'mb-[var(--my-var)]',
         '-mb-[var(--my-var)]',
       ],
+      css`
+        @theme {
+          --spacing: 0.25rem;
+          --spacing-big: 100rem;
+        }
+        @tailwind utilities;
+      `,
     ),
   ).toMatchInlineSnapshot(`
-    ":root, :host {
+    "
+    :root, :host {
       --spacing: .25rem;
       --spacing-big: 100rem;
     }
@@ -2706,7 +2803,7 @@ test('mb', async () => {
     }
 
     .mb-1 {
-      margin-bottom: calc(var(--spacing) * 1);
+      margin-bottom: var(--spacing);
     }
 
     .mb-2\\.5 {
@@ -2727,7 +2824,8 @@ test('mb', async () => {
 
     .mb-big {
       margin-bottom: var(--spacing-big);
-    }"
+    }
+    "
   `)
   expect(
     await run([
@@ -2743,14 +2841,7 @@ test('mb', async () => {
 
 test('ml', async () => {
   expect(
-    await compileCss(
-      css`
-        @theme {
-          --spacing: 0.25rem;
-          --spacing-big: 100rem;
-        }
-        @tailwind utilities;
-      `,
+    await run(
       [
         'ml-1',
         'ml-99',
@@ -2764,9 +2855,17 @@ test('ml', async () => {
         'ml-[var(--my-var)]',
         '-ml-[var(--my-var)]',
       ],
+      css`
+        @theme {
+          --spacing: 0.25rem;
+          --spacing-big: 100rem;
+        }
+        @tailwind utilities;
+      `,
     ),
   ).toMatchInlineSnapshot(`
-    ":root, :host {
+    "
+    :root, :host {
       --spacing: .25rem;
       --spacing-big: 100rem;
     }
@@ -2792,7 +2891,7 @@ test('ml', async () => {
     }
 
     .ml-1 {
-      margin-left: calc(var(--spacing) * 1);
+      margin-left: var(--spacing);
     }
 
     .ml-2\\.5 {
@@ -2813,7 +2912,8 @@ test('ml', async () => {
 
     .ml-big {
       margin-left: var(--spacing-big);
-    }"
+    }
+    "
   `)
   expect(
     await run([
@@ -2829,17 +2929,18 @@ test('ml', async () => {
 
 test('margin sort order', async () => {
   expect(
-    await compileCss(
+    await run(
+      ['mb-4', 'me-4', 'mx-4', 'ml-4', 'ms-4', 'm-4', 'mr-4', 'mt-4', 'my-4'],
       css`
         @theme {
           --spacing-4: 1rem;
         }
         @tailwind utilities;
       `,
-      ['mb-4', 'me-4', 'mx-4', 'ml-4', 'ms-4', 'm-4', 'mr-4', 'mt-4', 'my-4'],
     ),
   ).toMatchInlineSnapshot(`
-    ":root, :host {
+    "
+    :root, :host {
       --spacing-4: 1rem;
     }
 
@@ -2877,7 +2978,8 @@ test('margin sort order', async () => {
 
     .ml-4 {
       margin-left: var(--spacing-4);
-    }"
+    }
+    "
   `)
   expect(
     await run([
@@ -2897,13 +2999,15 @@ test('margin sort order', async () => {
 
 test('box-sizing', async () => {
   expect(await run(['box-border', 'box-content'])).toMatchInlineSnapshot(`
-    ".box-border {
+    "
+    .box-border {
       box-sizing: border-box;
     }
 
     .box-content {
       box-sizing: content-box;
-    }"
+    }
+    "
   `)
   expect(
     await run(['box', '-box-border', '-box-content', 'box-border/foo', 'box-content/foo']),
@@ -2913,7 +3017,8 @@ test('box-sizing', async () => {
 test('line-clamp', async () => {
   expect(await run(['line-clamp-4', 'line-clamp-99', 'line-clamp-[123]', 'line-clamp-none']))
     .toMatchInlineSnapshot(`
-      ".line-clamp-4 {
+      "
+      .line-clamp-4 {
         -webkit-line-clamp: 4;
         -webkit-box-orient: vertical;
         display: -webkit-box;
@@ -2939,7 +3044,8 @@ test('line-clamp', async () => {
         -webkit-box-orient: horizontal;
         display: block;
         overflow: visible;
-      }"
+      }
+      "
     `)
   expect(
     await run([
@@ -2958,17 +3064,18 @@ test('line-clamp', async () => {
   ).toEqual('')
 
   expect(
-    await compileCss(
+    await run(
+      ['line-clamp-none'],
       css`
         @theme {
           --line-clamp-none: 0;
         }
         @tailwind utilities;
       `,
-      ['line-clamp-none'],
     ),
   ).toMatchInlineSnapshot(`
-    ":root, :host {
+    "
+    :root, :host {
       --line-clamp-none: 0;
     }
 
@@ -2977,7 +3084,8 @@ test('line-clamp', async () => {
       -webkit-box-orient: vertical;
       display: -webkit-box;
       overflow: hidden;
-    }"
+    }
+    "
   `)
 })
 
@@ -3007,7 +3115,8 @@ test('display', async () => {
       'hidden',
     ]),
   ).toMatchInlineSnapshot(`
-    ".block {
+    "
+    .block {
       display: block;
     }
 
@@ -3089,7 +3198,8 @@ test('display', async () => {
 
     .table-row-group {
       display: table-row-group;
-    }"
+    }
+    "
   `)
   expect(
     await run([
@@ -3141,13 +3251,15 @@ test('display', async () => {
 
 test('field-sizing', async () => {
   expect(await run(['field-sizing-content', 'field-sizing-fixed'])).toMatchInlineSnapshot(`
-    ".field-sizing-content {
+    "
+    .field-sizing-content {
       field-sizing: content;
     }
 
     .field-sizing-fixed {
       field-sizing: fixed;
-    }"
+    }
+    "
   `)
   expect(
     await run(['field-sizing-[other]', '-field-sizing-content', '-field-sizing-fixed']),
@@ -3156,17 +3268,18 @@ test('field-sizing', async () => {
 
 test('aspect-ratio', async () => {
   expect(
-    await compileCss(
+    await run(
+      ['aspect-video', 'aspect-[10/9]', 'aspect-4/3', 'aspect-8.5/11'],
       css`
         @theme {
           --aspect-video: 16 / 9;
         }
         @tailwind utilities;
       `,
-      ['aspect-video', 'aspect-[10/9]', 'aspect-4/3', 'aspect-8.5/11'],
     ),
   ).toMatchInlineSnapshot(`
-    ":root, :host {
+    "
+    :root, :host {
       --aspect-video: 16 / 9;
     }
 
@@ -3184,7 +3297,8 @@ test('aspect-ratio', async () => {
 
     .aspect-video {
       aspect-ratio: var(--aspect-video);
-    }"
+    }
+    "
   `)
   expect(
     await run([
@@ -3206,13 +3320,7 @@ test('aspect-ratio', async () => {
 
 test('size', async () => {
   expect(
-    await compileCss(
-      css`
-        @theme {
-          --spacing-4: 1rem;
-        }
-        @tailwind utilities;
-      `,
+    await run(
       [
         'size-auto',
         'size-full',
@@ -3223,9 +3331,16 @@ test('size', async () => {
         'size-1/2',
         'size-[4px]',
       ],
+      css`
+        @theme {
+          --spacing-4: 1rem;
+        }
+        @tailwind utilities;
+      `,
     ),
   ).toMatchInlineSnapshot(`
-    ":root, :host {
+    "
+    :root, :host {
       --spacing-4: 1rem;
     }
 
@@ -3267,7 +3382,8 @@ test('size', async () => {
     .size-min {
       width: min-content;
       height: min-content;
-    }"
+    }
+    "
   `)
   expect(
     await run([
@@ -3293,14 +3409,7 @@ test('size', async () => {
 
 test('width', async () => {
   expect(
-    await compileCss(
-      css`
-        @theme {
-          --spacing-4: 1rem;
-          --width-xl: 36rem;
-        }
-        @tailwind utilities;
-      `,
+    await run(
       [
         'w-full',
         'w-auto',
@@ -3316,9 +3425,17 @@ test('width', async () => {
         'w-1/2',
         'w-[4px]',
       ],
+      css`
+        @theme {
+          --spacing-4: 1rem;
+          --width-xl: 36rem;
+        }
+        @tailwind utilities;
+      `,
     ),
   ).toMatchInlineSnapshot(`
-    ":root, :host {
+    "
+    :root, :host {
       --spacing-4: 1rem;
       --width-xl: 36rem;
     }
@@ -3373,7 +3490,8 @@ test('width', async () => {
 
     .w-xl {
       width: var(--width-xl);
-    }"
+    }
+    "
   `)
   expect(
     await run([
@@ -3404,14 +3522,7 @@ test('width', async () => {
 
 test('min-width', async () => {
   expect(
-    await compileCss(
-      css`
-        @theme {
-          --spacing-4: 1rem;
-          --container-xl: 36rem;
-        }
-        @tailwind utilities;
-      `,
+    await run(
       [
         'min-w-full',
         'min-w-auto',
@@ -3422,9 +3533,17 @@ test('min-width', async () => {
         'min-w-xl',
         'min-w-[4px]',
       ],
+      css`
+        @theme {
+          --spacing-4: 1rem;
+          --container-xl: 36rem;
+        }
+        @tailwind utilities;
+      `,
     ),
   ).toMatchInlineSnapshot(`
-    ":root, :host {
+    "
+    :root, :host {
       --spacing-4: 1rem;
       --container-xl: 36rem;
     }
@@ -3459,7 +3578,8 @@ test('min-width', async () => {
 
     .min-w-xl {
       min-width: var(--container-xl);
-    }"
+    }
+    "
   `)
   expect(
     await run([
@@ -3480,7 +3600,8 @@ test('min-width', async () => {
 
 test('max-width', async () => {
   expect(
-    await compileCss(
+    await run(
+      ['max-w-none', 'max-w-full', 'max-w-max', 'max-w-fit', 'max-w-4', 'max-w-xl', 'max-w-[4px]'],
       css`
         @theme {
           --spacing-4: 1rem;
@@ -3488,10 +3609,10 @@ test('max-width', async () => {
         }
         @tailwind utilities;
       `,
-      ['max-w-none', 'max-w-full', 'max-w-max', 'max-w-fit', 'max-w-4', 'max-w-xl', 'max-w-[4px]'],
     ),
   ).toMatchInlineSnapshot(`
-    ":root, :host {
+    "
+    :root, :host {
       --spacing-4: 1rem;
       --container-xl: 36rem;
     }
@@ -3522,7 +3643,8 @@ test('max-width', async () => {
 
     .max-w-xl {
       max-width: var(--container-xl);
-    }"
+    }
+    "
   `)
   expect(
     await run([
@@ -3544,13 +3666,7 @@ test('max-width', async () => {
 
 test('height', async () => {
   expect(
-    await compileCss(
-      css`
-        @theme {
-          --spacing-4: 1rem;
-        }
-        @tailwind utilities;
-      `,
+    await run(
       [
         'h-full',
         'h-auto',
@@ -3566,9 +3682,16 @@ test('height', async () => {
         'h-1/2',
         'h-[4px]',
       ],
+      css`
+        @theme {
+          --spacing-4: 1rem;
+        }
+        @tailwind utilities;
+      `,
     ),
   ).toMatchInlineSnapshot(`
-    ":root, :host {
+    "
+    :root, :host {
       --spacing-4: 1rem;
     }
 
@@ -3622,7 +3745,8 @@ test('height', async () => {
 
     .h-svh {
       height: 100svh;
-    }"
+    }
+    "
   `)
   expect(
     await run([
@@ -3653,13 +3777,7 @@ test('height', async () => {
 
 test('min-height', async () => {
   expect(
-    await compileCss(
-      css`
-        @theme {
-          --spacing-4: 1rem;
-        }
-        @tailwind utilities;
-      `,
+    await run(
       [
         'min-h-full',
         'min-h-auto',
@@ -3674,9 +3792,16 @@ test('min-height', async () => {
         'min-h-4',
         'min-h-[4px]',
       ],
+      css`
+        @theme {
+          --spacing-4: 1rem;
+        }
+        @tailwind utilities;
+      `,
     ),
   ).toMatchInlineSnapshot(`
-    ":root, :host {
+    "
+    :root, :host {
       --spacing-4: 1rem;
     }
 
@@ -3726,7 +3851,8 @@ test('min-height', async () => {
 
     .min-h-svh {
       min-height: 100svh;
-    }"
+    }
+    "
   `)
   expect(
     await run([
@@ -3751,13 +3877,7 @@ test('min-height', async () => {
 
 test('max-height', async () => {
   expect(
-    await compileCss(
-      css`
-        @theme {
-          --spacing-4: 1rem;
-        }
-        @tailwind utilities;
-      `,
+    await run(
       [
         'max-h-none',
         'max-h-full',
@@ -3772,9 +3892,16 @@ test('max-height', async () => {
         'max-h-4',
         'max-h-[4px]',
       ],
+      css`
+        @theme {
+          --spacing-4: 1rem;
+        }
+        @tailwind utilities;
+      `,
     ),
   ).toMatchInlineSnapshot(`
-    ":root, :host {
+    "
+    :root, :host {
       --spacing-4: 1rem;
     }
 
@@ -3824,7 +3951,8 @@ test('max-height', async () => {
 
     .max-h-svh {
       max-height: 100svh;
-    }"
+    }
+    "
   `)
   expect(
     await run([
@@ -3850,14 +3978,7 @@ test('max-height', async () => {
 
 test('inline-size', async () => {
   expect(
-    await compileCss(
-      css`
-        @theme {
-          --spacing-4: 1rem;
-          --container-xl: 36rem;
-        }
-        @tailwind utilities;
-      `,
+    await run(
       [
         'inline-full',
         'inline-auto',
@@ -3873,9 +3994,17 @@ test('inline-size', async () => {
         'inline-1/2',
         'inline-[4px]',
       ],
+      css`
+        @theme {
+          --spacing-4: 1rem;
+          --container-xl: 36rem;
+        }
+        @tailwind utilities;
+      `,
     ),
   ).toMatchInlineSnapshot(`
-    ":root, :host {
+    "
+    :root, :host {
       --spacing-4: 1rem;
       --container-xl: 36rem;
     }
@@ -3930,7 +4059,8 @@ test('inline-size', async () => {
 
     .inline-xl {
       inline-size: var(--container-xl);
-    }"
+    }
+    "
   `)
   expect(
     await run([
@@ -3960,14 +4090,7 @@ test('inline-size', async () => {
 
 test('min-inline-size', async () => {
   expect(
-    await compileCss(
-      css`
-        @theme {
-          --spacing-4: 1rem;
-          --container-xl: 36rem;
-        }
-        @tailwind utilities;
-      `,
+    await run(
       [
         'min-inline-full',
         'min-inline-auto',
@@ -3978,9 +4101,17 @@ test('min-inline-size', async () => {
         'min-inline-xl',
         'min-inline-[4px]',
       ],
+      css`
+        @theme {
+          --spacing-4: 1rem;
+          --container-xl: 36rem;
+        }
+        @tailwind utilities;
+      `,
     ),
   ).toMatchInlineSnapshot(`
-    ":root, :host {
+    "
+    :root, :host {
       --spacing-4: 1rem;
       --container-xl: 36rem;
     }
@@ -4015,7 +4146,8 @@ test('min-inline-size', async () => {
 
     .min-inline-xl {
       min-inline-size: var(--container-xl);
-    }"
+    }
+    "
   `)
   expect(
     await run([
@@ -4036,14 +4168,7 @@ test('min-inline-size', async () => {
 
 test('max-inline-size', async () => {
   expect(
-    await compileCss(
-      css`
-        @theme {
-          --spacing-4: 1rem;
-          --container-xl: 36rem;
-        }
-        @tailwind utilities;
-      `,
+    await run(
       [
         'max-inline-none',
         'max-inline-full',
@@ -4053,9 +4178,17 @@ test('max-inline-size', async () => {
         'max-inline-xl',
         'max-inline-[4px]',
       ],
+      css`
+        @theme {
+          --spacing-4: 1rem;
+          --container-xl: 36rem;
+        }
+        @tailwind utilities;
+      `,
     ),
   ).toMatchInlineSnapshot(`
-    ":root, :host {
+    "
+    :root, :host {
       --spacing-4: 1rem;
       --container-xl: 36rem;
     }
@@ -4086,7 +4219,8 @@ test('max-inline-size', async () => {
 
     .max-inline-xl {
       max-inline-size: var(--container-xl);
-    }"
+    }
+    "
   `)
   expect(
     await run([
@@ -4108,13 +4242,7 @@ test('max-inline-size', async () => {
 
 test('block-size', async () => {
   expect(
-    await compileCss(
-      css`
-        @theme {
-          --spacing-4: 1rem;
-        }
-        @tailwind utilities;
-      `,
+    await run(
       [
         'block-full',
         'block-auto',
@@ -4130,9 +4258,16 @@ test('block-size', async () => {
         'block-1/2',
         'block-[4px]',
       ],
+      css`
+        @theme {
+          --spacing-4: 1rem;
+        }
+        @tailwind utilities;
+      `,
     ),
   ).toMatchInlineSnapshot(`
-    ":root, :host {
+    "
+    :root, :host {
       --spacing-4: 1rem;
     }
 
@@ -4186,7 +4321,8 @@ test('block-size', async () => {
 
     .block-svh {
       block-size: 100svh;
-    }"
+    }
+    "
   `)
   expect(
     await run([
@@ -4216,13 +4352,7 @@ test('block-size', async () => {
 
 test('min-block-size', async () => {
   expect(
-    await compileCss(
-      css`
-        @theme {
-          --spacing-4: 1rem;
-        }
-        @tailwind utilities;
-      `,
+    await run(
       [
         'min-block-full',
         'min-block-auto',
@@ -4237,9 +4367,16 @@ test('min-block-size', async () => {
         'min-block-4',
         'min-block-[4px]',
       ],
+      css`
+        @theme {
+          --spacing-4: 1rem;
+        }
+        @tailwind utilities;
+      `,
     ),
   ).toMatchInlineSnapshot(`
-    ":root, :host {
+    "
+    :root, :host {
       --spacing-4: 1rem;
     }
 
@@ -4289,7 +4426,8 @@ test('min-block-size', async () => {
 
     .min-block-svh {
       min-block-size: 100svh;
-    }"
+    }
+    "
   `)
   expect(
     await run([
@@ -4314,13 +4452,7 @@ test('min-block-size', async () => {
 
 test('max-block-size', async () => {
   expect(
-    await compileCss(
-      css`
-        @theme {
-          --spacing-4: 1rem;
-        }
-        @tailwind utilities;
-      `,
+    await run(
       [
         'max-block-none',
         'max-block-full',
@@ -4335,9 +4467,16 @@ test('max-block-size', async () => {
         'max-block-4',
         'max-block-[4px]',
       ],
+      css`
+        @theme {
+          --spacing-4: 1rem;
+        }
+        @tailwind utilities;
+      `,
     ),
   ).toMatchInlineSnapshot(`
-    ":root, :host {
+    "
+    :root, :host {
       --spacing-4: 1rem;
     }
 
@@ -4387,7 +4526,8 @@ test('max-block-size', async () => {
 
     .max-block-svh {
       max-block-size: 100svh;
-    }"
+    }
+    "
   `)
   expect(
     await run([
@@ -4414,7 +4554,8 @@ test('max-block-size', async () => {
 describe('container', () => {
   test('creates the right media queries and sorts it before width', async () => {
     expect(
-      await compileCss(
+      await run(
+        ['w-1/2', 'container', 'max-w-[var(--breakpoint-sm)]'],
         css`
           @theme {
             --breakpoint-sm: 40rem;
@@ -4425,10 +4566,10 @@ describe('container', () => {
           }
           @tailwind utilities;
         `,
-        ['w-1/2', 'container', 'max-w-[var(--breakpoint-sm)]'],
       ),
     ).toMatchInlineSnapshot(`
-      ":root, :host {
+      "
+      :root, :host {
         --breakpoint-sm: 40rem;
       }
 
@@ -4472,13 +4613,15 @@ describe('container', () => {
 
       .max-w-\\[var\\(--breakpoint-sm\\)\\] {
         max-width: var(--breakpoint-sm);
-      }"
+      }
+      "
     `)
   })
 
   test('sorts breakpoints based on unit and then in ascending aOrder', async () => {
     expect(
-      await compileCss(
+      await run(
+        ['container'],
         css`
           @theme reference {
             --breakpoint-lg: 64rem;
@@ -4491,10 +4634,10 @@ describe('container', () => {
           }
           @tailwind utilities;
         `,
-        ['container'],
       ),
     ).toMatchInlineSnapshot(`
-      ".container {
+      "
+      .container {
         width: 100%;
       }
 
@@ -4538,13 +4681,15 @@ describe('container', () => {
         .container {
           max-width: 96rem;
         }
-      }"
+      }
+      "
     `)
   })
 
   test('custom `@utility container` always follow the core utility ', async () => {
     expect(
-      await compileCss(
+      await run(
+        ['w-1/2', 'container', 'max-w-[var(--breakpoint-sm)]'],
         css`
           @theme {
             --breakpoint-sm: 40rem;
@@ -4564,10 +4709,10 @@ describe('container', () => {
             }
           }
         `,
-        ['w-1/2', 'container', 'max-w-[var(--breakpoint-sm)]'],
       ),
     ).toMatchInlineSnapshot(`
-      ":root, :host {
+      "
+      :root, :host {
         --breakpoint-sm: 40rem;
       }
 
@@ -4622,7 +4767,8 @@ describe('container', () => {
 
       .max-w-\\[var\\(--breakpoint-sm\\)\\] {
         max-width: var(--breakpoint-sm);
-      }"
+      }
+      "
     `)
   })
 })
@@ -4639,7 +4785,8 @@ test('flex', async () => {
       'flex-[123]',
     ]),
   ).toMatchInlineSnapshot(`
-    ".flex-1 {
+    "
+    .flex-1 {
       flex: 1;
     }
 
@@ -4665,7 +4812,8 @@ test('flex', async () => {
 
     .flex-none {
       flex: none;
-    }"
+    }
+    "
   `)
   expect(
     await run([
@@ -4692,7 +4840,8 @@ test('flex', async () => {
 
 test('flex-shrink', async () => {
   expect(await run(['shrink', 'shrink-0', 'shrink-[123]'])).toMatchInlineSnapshot(`
-    ".shrink {
+    "
+    .shrink {
       flex-shrink: 1;
     }
 
@@ -4702,7 +4851,8 @@ test('flex-shrink', async () => {
 
     .shrink-\\[123\\] {
       flex-shrink: 123;
-    }"
+    }
+    "
   `)
   expect(
     await run([
@@ -4721,7 +4871,8 @@ test('flex-shrink', async () => {
 
 test('flex-grow', async () => {
   expect(await run(['grow', 'grow-0', 'grow-[123]'])).toMatchInlineSnapshot(`
-    ".grow {
+    "
+    .grow {
       flex-grow: 1;
     }
 
@@ -4731,7 +4882,8 @@ test('flex-grow', async () => {
 
     .grow-\\[123\\] {
       flex-grow: 123;
-    }"
+    }
+    "
   `)
   expect(
     await run([
@@ -4750,17 +4902,18 @@ test('flex-grow', async () => {
 
 test('flex-basis', async () => {
   expect(
-    await compileCss(
+    await run(
+      ['basis-auto', 'basis-full', 'basis-xl', 'basis-11/12', 'basis-[123px]'],
       css`
         @theme {
           --container-xl: 36rem;
         }
         @tailwind utilities;
       `,
-      ['basis-auto', 'basis-full', 'basis-xl', 'basis-11/12', 'basis-[123px]'],
     ),
   ).toMatchInlineSnapshot(`
-    ":root, :host {
+    "
+    :root, :host {
       --container-xl: 36rem;
     }
 
@@ -4782,7 +4935,8 @@ test('flex-basis', async () => {
 
     .basis-xl {
       flex-basis: var(--container-xl);
-    }"
+    }
+    "
   `)
   expect(
     await run([
@@ -4804,13 +4958,15 @@ test('flex-basis', async () => {
 
 test('table-layout', async () => {
   expect(await run(['table-auto', 'table-fixed'])).toMatchInlineSnapshot(`
-    ".table-auto {
+    "
+    .table-auto {
       table-layout: auto;
     }
 
     .table-fixed {
       table-layout: fixed;
-    }"
+    }
+    "
   `)
   expect(await run(['-table-auto', '-table-fixed', 'table-auto/foo', 'table-fixed/foo'])).toEqual(
     '',
@@ -4819,13 +4975,15 @@ test('table-layout', async () => {
 
 test('caption-side', async () => {
   expect(await run(['caption-top', 'caption-bottom'])).toMatchInlineSnapshot(`
-    ".caption-bottom {
+    "
+    .caption-bottom {
       caption-side: bottom;
     }
 
     .caption-top {
       caption-side: top;
-    }"
+    }
+    "
   `)
   expect(
     await run(['-caption-top', '-caption-bottom', 'caption-top/foo', 'caption-bottom/foo']),
@@ -4834,13 +4992,15 @@ test('caption-side', async () => {
 
 test('border-collapse', async () => {
   expect(await run(['border-collapse', 'border-separate'])).toMatchInlineSnapshot(`
-    ".border-collapse {
+    "
+    .border-collapse {
       border-collapse: collapse;
     }
 
     .border-separate {
       border-collapse: separate;
-    }"
+    }
+    "
   `)
   expect(
     await run([
@@ -4854,17 +5014,18 @@ test('border-collapse', async () => {
 
 test('border-spacing', async () => {
   expect(
-    await compileCss(
+    await run(
+      ['border-spacing-1', 'border-spacing-[123px]'],
       css`
         @theme {
           --spacing-1: 0.25rem;
         }
         @tailwind utilities;
       `,
-      ['border-spacing-1', 'border-spacing-[123px]'],
     ),
   ).toMatchInlineSnapshot(`
-    "@layer properties {
+    "
+    @layer properties {
       @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
         *, :before, :after, ::backdrop {
           --tw-border-spacing-x: 0;
@@ -4899,7 +5060,8 @@ test('border-spacing', async () => {
       syntax: "<length>";
       inherits: false;
       initial-value: 0;
-    }"
+    }
+    "
   `)
   expect(
     await run([
@@ -4914,17 +5076,18 @@ test('border-spacing', async () => {
 
 test('border-spacing-x', async () => {
   expect(
-    await compileCss(
+    await run(
+      ['border-spacing-x-1', 'border-spacing-x-[123px]'],
       css`
         @theme {
           --spacing-1: 0.25rem;
         }
         @tailwind utilities;
       `,
-      ['border-spacing-x-1', 'border-spacing-x-[123px]'],
     ),
   ).toMatchInlineSnapshot(`
-    "@layer properties {
+    "
+    @layer properties {
       @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
         *, :before, :after, ::backdrop {
           --tw-border-spacing-x: 0;
@@ -4957,7 +5120,8 @@ test('border-spacing-x', async () => {
       syntax: "<length>";
       inherits: false;
       initial-value: 0;
-    }"
+    }
+    "
   `)
   expect(
     await run([
@@ -4972,17 +5136,18 @@ test('border-spacing-x', async () => {
 
 test('border-spacing-y', async () => {
   expect(
-    await compileCss(
+    await run(
+      ['border-spacing-y-1', 'border-spacing-y-[123px]'],
       css`
         @theme {
           --spacing-1: 0.25rem;
         }
         @tailwind utilities;
       `,
-      ['border-spacing-y-1', 'border-spacing-y-[123px]'],
     ),
   ).toMatchInlineSnapshot(`
-    "@layer properties {
+    "
+    @layer properties {
       @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
         *, :before, :after, ::backdrop {
           --tw-border-spacing-x: 0;
@@ -5015,7 +5180,8 @@ test('border-spacing-y', async () => {
       syntax: "<length>";
       inherits: false;
       initial-value: 0;
-    }"
+    }
+    "
   `)
   expect(
     await run([
@@ -5044,7 +5210,8 @@ test('origin', async () => {
       'origin-[var(--value)]',
     ]),
   ).toMatchInlineSnapshot(`
-    ".origin-\\[50px_100px\\] {
+    "
+    .origin-\\[50px_100px\\] {
       transform-origin: 50px 100px;
     }
 
@@ -5086,7 +5253,8 @@ test('origin', async () => {
 
     .origin-top-right {
       transform-origin: 100% 0;
-    }"
+    }
+    "
   `)
   expect(
     await run([
@@ -5107,23 +5275,25 @@ test('origin', async () => {
   ).toEqual('')
 
   expect(
-    await compileCss(
+    await run(
+      ['origin-top'],
       css`
         @theme {
           --transform-origin-top: 10px 20px;
         }
         @tailwind utilities;
       `,
-      ['origin-top'],
     ),
   ).toMatchInlineSnapshot(`
-    ":root, :host {
+    "
+    :root, :host {
       --transform-origin-top: 10px 20px;
     }
 
     .origin-top {
       transform-origin: var(--transform-origin-top);
-    }"
+    }
+    "
   `)
 })
 
@@ -5143,7 +5313,8 @@ test('perspective-origin', async () => {
       'perspective-origin-[var(--value)]',
     ]),
   ).toMatchInlineSnapshot(`
-    ".perspective-origin-\\[50px_100px\\] {
+    "
+    .perspective-origin-\\[50px_100px\\] {
       perspective-origin: 50px 100px;
     }
 
@@ -5185,7 +5356,8 @@ test('perspective-origin', async () => {
 
     .perspective-origin-top-right {
       perspective-origin: 100% 0;
-    }"
+    }
+    "
   `)
   expect(
     await run([
@@ -5206,24 +5378,26 @@ test('perspective-origin', async () => {
   ).toEqual('')
 
   expect(
-    await compileCss(
+    await run(
+      ['perspective-origin-top'],
       css`
         @theme {
           --perspective-origin-top: 10px 20px;
         }
         @tailwind utilities;
       `,
-      ['perspective-origin-top'],
     ),
   ).toMatchInlineSnapshot(`
-    ":root, :host {
+    "
+    :root, :host {
       --perspective-origin-top: 10px 20px;
     }
 
     .perspective-origin-top {
       perspective-origin: var(--perspective-origin-top);
       perspective: var(--perspective-origin-top);
-    }"
+    }
+    "
   `)
 })
 
@@ -5237,7 +5411,8 @@ test('translate', async () => {
       '-translate-[var(--value)]',
     ]),
   ).toMatchInlineSnapshot(`
-    "@layer properties {
+    "
+    @layer properties {
       @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
         *, :before, :after, ::backdrop {
           --tw-translate-x: 0;
@@ -5293,7 +5468,8 @@ test('translate', async () => {
       syntax: "*";
       inherits: false;
       initial-value: 0;
-    }"
+    }
+    "
   `)
   expect(
     await run([
@@ -5320,7 +5496,8 @@ test('translate-x', async () => {
       '-translate-x-[var(--value)]',
     ]),
   ).toMatchInlineSnapshot(`
-    "@layer properties {
+    "
+    @layer properties {
       @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
         *, :before, :after, ::backdrop {
           --tw-translate-x: 0;
@@ -5366,7 +5543,8 @@ test('translate-x', async () => {
       syntax: "*";
       inherits: false;
       initial-value: 0;
-    }"
+    }
+    "
   `)
   expect(
     await run([
@@ -5383,17 +5561,18 @@ test('translate-x', async () => {
   ).toEqual('')
 
   expect(
-    await compileCss(
+    await run(
+      ['translate-x-full', '-translate-x-full', 'translate-x-px', '-translate-x-[var(--value)]'],
       css`
         @theme {
           --spacing: 0.25rem;
         }
         @tailwind utilities;
       `,
-      ['translate-x-full', '-translate-x-full', 'translate-x-px', '-translate-x-[var(--value)]'],
     ),
   ).toMatchInlineSnapshot(`
-    "@layer properties {
+    "
+    @layer properties {
       @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
         *, :before, :after, ::backdrop {
           --tw-translate-x: 0;
@@ -5439,7 +5618,8 @@ test('translate-x', async () => {
       syntax: "*";
       inherits: false;
       initial-value: 0;
-    }"
+    }
+    "
   `)
   expect(
     await run([
@@ -5464,7 +5644,8 @@ test('translate-y', async () => {
       '-translate-y-[var(--value)]',
     ]),
   ).toMatchInlineSnapshot(`
-    "@layer properties {
+    "
+    @layer properties {
       @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
         *, :before, :after, ::backdrop {
           --tw-translate-x: 0;
@@ -5510,7 +5691,8 @@ test('translate-y', async () => {
       syntax: "*";
       inherits: false;
       initial-value: 0;
-    }"
+    }
+    "
   `)
   expect(
     await run([
@@ -5527,17 +5709,18 @@ test('translate-y', async () => {
   ).toEqual('')
 
   expect(
-    await compileCss(
+    await run(
+      ['translate-y-full', '-translate-y-full', 'translate-y-px', '-translate-y-[var(--value)]'],
       css`
         @theme {
           --spacing: 0.25rem;
         }
         @tailwind utilities;
       `,
-      ['translate-y-full', '-translate-y-full', 'translate-y-px', '-translate-y-[var(--value)]'],
     ),
   ).toMatchInlineSnapshot(`
-    "@layer properties {
+    "
+    @layer properties {
       @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
         *, :before, :after, ::backdrop {
           --tw-translate-x: 0;
@@ -5583,7 +5766,8 @@ test('translate-y', async () => {
       syntax: "*";
       inherits: false;
       initial-value: 0;
-    }"
+    }
+    "
   `)
   expect(
     await run([
@@ -5602,7 +5786,8 @@ test('translate-y', async () => {
 test('translate-z', async () => {
   expect(await run(['-translate-z-px', 'translate-z-px', '-translate-z-[var(--value)]']))
     .toMatchInlineSnapshot(`
-      "@layer properties {
+      "
+      @layer properties {
         @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
           *, :before, :after, ::backdrop {
             --tw-translate-x: 0;
@@ -5643,7 +5828,8 @@ test('translate-z', async () => {
         syntax: "*";
         inherits: false;
         initial-value: 0;
-      }"
+      }
+      "
     `)
   expect(
     await run([
@@ -5663,7 +5849,8 @@ test('translate-z', async () => {
 
 test('translate-3d', async () => {
   expect(await run(['translate-3d'])).toMatchInlineSnapshot(`
-    "@layer properties {
+    "
+    @layer properties {
       @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
         *, :before, :after, ::backdrop {
           --tw-translate-x: 0;
@@ -5693,7 +5880,8 @@ test('translate-3d', async () => {
       syntax: "*";
       inherits: false;
       initial-value: 0;
-    }"
+    }
+    "
   `)
   expect(await run(['-translate-3d', 'translate-3d/foo'])).toEqual('')
 })
@@ -5710,7 +5898,8 @@ test('rotate', async () => {
       '-rotate-(--var)',
     ]),
   ).toMatchInlineSnapshot(`
-    ".-rotate-\\(--var\\) {
+    "
+    .-rotate-\\(--var\\) {
       rotate: calc(var(--var) * -1);
     }
 
@@ -5736,7 +5925,8 @@ test('rotate', async () => {
 
     .rotate-\\[123deg\\] {
       rotate: 123deg;
-    }"
+    }
+    "
   `)
   expect(
     await run([
@@ -5762,7 +5952,8 @@ test('rotate-x', async () => {
       '-rotate-x-(--var)',
     ]),
   ).toMatchInlineSnapshot(`
-    "@layer properties {
+    "
+    @layer properties {
       @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
         *, :before, :after, ::backdrop {
           --tw-rotate-x: initial;
@@ -5822,7 +6013,8 @@ test('rotate-x', async () => {
     @property --tw-skew-y {
       syntax: "*";
       inherits: false
-    }"
+    }
+    "
   `)
   expect(
     await run([
@@ -5848,7 +6040,8 @@ test('rotate-y', async () => {
       '-rotate-y-(--var)',
     ]),
   ).toMatchInlineSnapshot(`
-    "@layer properties {
+    "
+    @layer properties {
       @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
         *, :before, :after, ::backdrop {
           --tw-rotate-x: initial;
@@ -5913,7 +6106,8 @@ test('rotate-y', async () => {
     @property --tw-skew-y {
       syntax: "*";
       inherits: false
-    }"
+    }
+    "
   `)
   expect(
     await run([
@@ -5939,7 +6133,8 @@ test('rotate-z', async () => {
       '-rotate-z-(--var)',
     ]),
   ).toMatchInlineSnapshot(`
-    "@layer properties {
+    "
+    @layer properties {
       @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
         *, :before, :after, ::backdrop {
           --tw-rotate-x: initial;
@@ -6004,7 +6199,8 @@ test('rotate-z', async () => {
     @property --tw-skew-y {
       syntax: "*";
       inherits: false
-    }"
+    }
+    "
   `)
   expect(
     await run([
@@ -6021,7 +6217,8 @@ test('rotate-z', async () => {
 
 test('skew', async () => {
   expect(await run(['skew-6', '-skew-6', 'skew-[123deg]'])).toMatchInlineSnapshot(`
-    "@layer properties {
+    "
+    @layer properties {
       @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
         *, :before, :after, ::backdrop {
           --tw-rotate-x: initial;
@@ -6074,7 +6271,8 @@ test('skew', async () => {
     @property --tw-skew-y {
       syntax: "*";
       inherits: false
-    }"
+    }
+    "
   `)
   expect(
     await run([
@@ -6090,7 +6288,8 @@ test('skew', async () => {
 
 test('skew-x', async () => {
   expect(await run(['skew-x-6', '-skew-x-6', 'skew-x-[123deg]'])).toMatchInlineSnapshot(`
-    "@layer properties {
+    "
+    @layer properties {
       @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
         *, :before, :after, ::backdrop {
           --tw-rotate-x: initial;
@@ -6140,7 +6339,8 @@ test('skew-x', async () => {
     @property --tw-skew-y {
       syntax: "*";
       inherits: false
-    }"
+    }
+    "
   `)
   expect(
     await run([
@@ -6156,7 +6356,8 @@ test('skew-x', async () => {
 
 test('skew-y', async () => {
   expect(await run(['skew-y-6', '-skew-y-6', 'skew-y-[123deg]'])).toMatchInlineSnapshot(`
-    "@layer properties {
+    "
+    @layer properties {
       @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
         *, :before, :after, ::backdrop {
           --tw-rotate-x: initial;
@@ -6206,7 +6407,8 @@ test('skew-y', async () => {
     @property --tw-skew-y {
       syntax: "*";
       inherits: false
-    }"
+    }
+    "
   `)
   expect(
     await run([
@@ -6223,7 +6425,8 @@ test('skew-y', async () => {
 test('scale', async () => {
   expect(await run(['scale-50', '-scale-50', 'scale-[2]', 'scale-[2_1.5_3]']))
     .toMatchInlineSnapshot(`
-      "@layer properties {
+      "
+      @layer properties {
         @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
           *, :before, :after, ::backdrop {
             --tw-scale-x: 1;
@@ -6271,7 +6474,8 @@ test('scale', async () => {
         syntax: "*";
         inherits: false;
         initial-value: 1;
-      }"
+      }
+      "
     `)
   expect(
     await run([
@@ -6289,7 +6493,8 @@ test('scale', async () => {
 
 test('scale-3d', async () => {
   expect(await run(['scale-3d'])).toMatchInlineSnapshot(`
-    "@layer properties {
+    "
+    @layer properties {
       @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
         *, :before, :after, ::backdrop {
           --tw-scale-x: 1;
@@ -6319,14 +6524,16 @@ test('scale-3d', async () => {
       syntax: "*";
       inherits: false;
       initial-value: 1;
-    }"
+    }
+    "
   `)
   expect(await run(['-scale-3d', 'scale-3d/foo'])).toEqual('')
 })
 
 test('scale-x', async () => {
   expect(await run(['scale-x-50', '-scale-x-50', 'scale-x-[2]'])).toMatchInlineSnapshot(`
-    "@layer properties {
+    "
+    @layer properties {
       @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
         *, :before, :after, ::backdrop {
           --tw-scale-x: 1;
@@ -6367,10 +6574,12 @@ test('scale-x', async () => {
       syntax: "*";
       inherits: false;
       initial-value: 1;
-    }"
+    }
+    "
   `)
   expect(await run(['scale-200', 'scale-x-400'])).toMatchInlineSnapshot(`
-    "@layer properties {
+    "
+    @layer properties {
       @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
         *, :before, :after, ::backdrop {
           --tw-scale-x: 1;
@@ -6408,7 +6617,8 @@ test('scale-x', async () => {
       syntax: "*";
       inherits: false;
       initial-value: 1;
-    }"
+    }
+    "
   `)
   expect(
     await run([
@@ -6427,7 +6637,8 @@ test('scale-x', async () => {
 
 test('scale-y', async () => {
   expect(await run(['scale-y-50', '-scale-y-50', 'scale-y-[2]'])).toMatchInlineSnapshot(`
-    "@layer properties {
+    "
+    @layer properties {
       @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
         *, :before, :after, ::backdrop {
           --tw-scale-x: 1;
@@ -6468,7 +6679,8 @@ test('scale-y', async () => {
       syntax: "*";
       inherits: false;
       initial-value: 1;
-    }"
+    }
+    "
   `)
   expect(
     await run([
@@ -6485,7 +6697,8 @@ test('scale-y', async () => {
 
 test('scale-z', async () => {
   expect(await run(['scale-z-50', '-scale-z-50', 'scale-z-[123deg]'])).toMatchInlineSnapshot(`
-    "@layer properties {
+    "
+    @layer properties {
       @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
         *, :before, :after, ::backdrop {
           --tw-scale-x: 1;
@@ -6526,7 +6739,8 @@ test('scale-z', async () => {
       syntax: "*";
       inherits: false;
       initial-value: 1;
-    }"
+    }
+    "
   `)
   expect(
     await run([
@@ -6550,7 +6764,8 @@ test('transform', async () => {
       'transform-[scaleZ(2)_rotateY(45deg)]',
     ]),
   ).toMatchInlineSnapshot(`
-    "@layer properties {
+    "
+    @layer properties {
       @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
         *, :before, :after, ::backdrop {
           --tw-rotate-x: initial;
@@ -6605,7 +6820,8 @@ test('transform', async () => {
     @property --tw-skew-y {
       syntax: "*";
       inherits: false
-    }"
+    }
+    "
   `)
   expect(
     await run([
@@ -6620,7 +6836,8 @@ test('transform', async () => {
       'backface-hidden',
     ]),
   ).toMatchInlineSnapshot(`
-    ".backface-hidden {
+    "
+    .backface-hidden {
       backface-visibility: hidden;
     }
 
@@ -6654,7 +6871,8 @@ test('transform', async () => {
 
     .transform-view {
       transform-box: view-box;
-    }"
+    }
+    "
   `)
   expect(
     await run([
@@ -6680,9 +6898,31 @@ test('transform', async () => {
   ).toEqual('')
 })
 
+test('zoom', async () => {
+  expect(await run(['zoom-50', 'zoom-100', 'zoom-[var(--zoom)]'])).toMatchInlineSnapshot(`
+    "
+    .zoom-50 {
+      zoom: 50%;
+    }
+
+    .zoom-100 {
+      zoom: 100%;
+    }
+
+    .zoom-\\[var\\(--zoom\\)\\] {
+      zoom: var(--zoom);
+    }
+    "
+  `)
+  expect(
+    await run(['zoom', '-zoom-50', 'zoom--50', 'zoom-1.5', 'zoom-unknown', 'zoom-50/foo']),
+  ).toEqual('')
+})
+
 test('perspective', async () => {
   expect(
-    await compileCss(
+    await run(
+      ['perspective-normal', 'perspective-dramatic', 'perspective-none', 'perspective-[456px]'],
       css`
         @theme {
           --perspective-dramatic: 100px;
@@ -6690,10 +6930,10 @@ test('perspective', async () => {
         }
         @tailwind utilities;
       `,
-      ['perspective-normal', 'perspective-dramatic', 'perspective-none', 'perspective-[456px]'],
     ),
   ).toMatchInlineSnapshot(`
-    ":root, :host {
+    "
+    :root, :host {
       --perspective-dramatic: 100px;
       --perspective-normal: 500px;
     }
@@ -6712,7 +6952,8 @@ test('perspective', async () => {
 
     .perspective-normal {
       perspective: var(--perspective-normal);
-    }"
+    }
+    "
   `)
   expect(
     await run([
@@ -6728,35 +6969,31 @@ test('perspective', async () => {
   ).toEqual('')
 
   expect(
-    await compileCss(
+    await run(
+      ['perspective-none'],
       css`
         @theme {
           --perspective-none: 400px;
         }
         @tailwind utilities;
       `,
-      ['perspective-none'],
     ),
   ).toMatchInlineSnapshot(`
-    ":root, :host {
+    "
+    :root, :host {
       --perspective-none: 400px;
     }
 
     .perspective-none {
       perspective: var(--perspective-none);
-    }"
+    }
+    "
   `)
 })
 
 test('cursor', async () => {
   expect(
-    await compileCss(
-      css`
-        @theme {
-          --cursor-custom: url(/my-cursor.png);
-        }
-        @tailwind utilities;
-      `,
+    await run(
       [
         'cursor-auto',
         'cursor-default',
@@ -6797,9 +7034,16 @@ test('cursor', async () => {
         'cursor-[var(--value)]',
         'cursor-custom',
       ],
+      css`
+        @theme {
+          --cursor-custom: url(/my-cursor.png);
+        }
+        @tailwind utilities;
+      `,
     ),
   ).toMatchInlineSnapshot(`
-    ":root, :host {
+    "
+    :root, :host {
       --cursor-custom: url("/my-cursor.png");
     }
 
@@ -6953,7 +7197,8 @@ test('cursor', async () => {
 
     .cursor-zoom-out {
       cursor: zoom-out;
-    }"
+    }
+    "
   `)
   expect(
     await run([
@@ -7040,7 +7285,8 @@ test('cursor', async () => {
 
 test('touch-action', async () => {
   expect(await run(['touch-auto', 'touch-none', 'touch-manipulation'])).toMatchInlineSnapshot(`
-    ".touch-auto {
+    "
+    .touch-auto {
       touch-action: auto;
     }
 
@@ -7050,7 +7296,8 @@ test('touch-action', async () => {
 
     .touch-none {
       touch-action: none;
-    }"
+    }
+    "
   `)
   expect(
     await run([
@@ -7075,7 +7322,8 @@ test('touch-pan', async () => {
       'touch-pan-down',
     ]),
   ).toMatchInlineSnapshot(`
-    "@layer properties {
+    "
+    @layer properties {
       @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
         *, :before, :after, ::backdrop {
           --tw-pan-x: initial;
@@ -7128,7 +7376,8 @@ test('touch-pan', async () => {
     @property --tw-pinch-zoom {
       syntax: "*";
       inherits: false
-    }"
+    }
+    "
   `)
   expect(
     await run([
@@ -7150,7 +7399,8 @@ test('touch-pan', async () => {
 
 test('touch-pinch-zoom', async () => {
   expect(await run(['touch-pinch-zoom'])).toMatchInlineSnapshot(`
-    "@layer properties {
+    "
+    @layer properties {
       @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
         *, :before, :after, ::backdrop {
           --tw-pan-x: initial;
@@ -7178,7 +7428,8 @@ test('touch-pinch-zoom', async () => {
     @property --tw-pinch-zoom {
       syntax: "*";
       inherits: false
-    }"
+    }
+    "
   `)
   expect(await run(['-touch-pinch-zoom', 'touch-pinch-zoom/foo'])).toEqual('')
 })
@@ -7186,7 +7437,8 @@ test('touch-pinch-zoom', async () => {
 test('select', async () => {
   expect(await run(['select-none', 'select-text', 'select-all', 'select-auto']))
     .toMatchInlineSnapshot(`
-      ".select-all {
+      "
+      .select-all {
         -webkit-user-select: all;
         user-select: all;
       }
@@ -7204,7 +7456,8 @@ test('select', async () => {
       .select-text {
         -webkit-user-select: text;
         user-select: text;
-      }"
+      }
+      "
     `)
   expect(
     await run([
@@ -7222,7 +7475,8 @@ test('select', async () => {
 
 test('resize', async () => {
   expect(await run(['resize-none', 'resize', 'resize-x', 'resize-y'])).toMatchInlineSnapshot(`
-    ".resize {
+    "
+    .resize {
       resize: both;
     }
 
@@ -7236,7 +7490,8 @@ test('resize', async () => {
 
     .resize-y {
       resize: vertical;
-    }"
+    }
+    "
   `)
   expect(
     await run([
@@ -7254,7 +7509,8 @@ test('resize', async () => {
 
 test('scroll-snap-type', async () => {
   expect(await run(['snap-none', 'snap-x', 'snap-y', 'snap-both'])).toMatchInlineSnapshot(`
-    "@layer properties {
+    "
+    @layer properties {
       @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
         *, :before, :after, ::backdrop {
           --tw-scroll-snap-strictness: proximity;
@@ -7282,7 +7538,8 @@ test('scroll-snap-type', async () => {
       syntax: "*";
       inherits: false;
       initial-value: proximity;
-    }"
+    }
+    "
   `)
   expect(
     await run([
@@ -7300,7 +7557,8 @@ test('scroll-snap-type', async () => {
 
 test('--tw-scroll-snap-strictness', async () => {
   expect(await run(['snap-mandatory', 'snap-proximity'])).toMatchInlineSnapshot(`
-    "@layer properties {
+    "
+    @layer properties {
       @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
         *, :before, :after, ::backdrop {
           --tw-scroll-snap-strictness: proximity;
@@ -7320,7 +7578,8 @@ test('--tw-scroll-snap-strictness', async () => {
       syntax: "*";
       inherits: false;
       initial-value: proximity;
-    }"
+    }
+    "
   `)
   expect(
     await run(['-snap-mandatory', '-snap-proximity', 'snap-mandatory/foo', 'snap-proximity/foo']),
@@ -7330,7 +7589,8 @@ test('--tw-scroll-snap-strictness', async () => {
 test('scroll-snap-align', async () => {
   expect(await run(['snap-align-none', 'snap-start', 'snap-end', 'snap-center']))
     .toMatchInlineSnapshot(`
-      ".snap-align-none {
+      "
+      .snap-align-none {
         scroll-snap-align: none;
       }
 
@@ -7344,7 +7604,8 @@ test('scroll-snap-align', async () => {
 
       .snap-start {
         scroll-snap-align: start;
-      }"
+      }
+      "
     `)
   expect(
     await run([
@@ -7362,13 +7623,15 @@ test('scroll-snap-align', async () => {
 
 test('scroll-snap-stop', async () => {
   expect(await run(['snap-normal', 'snap-always'])).toMatchInlineSnapshot(`
-    ".snap-always {
+    "
+    .snap-always {
       scroll-snap-stop: always;
     }
 
     .snap-normal {
       scroll-snap-stop: normal;
-    }"
+    }
+    "
   `)
   expect(await run(['-snap-normal', '-snap-always', 'snap-normal/foo', 'snap-always/foo'])).toEqual(
     '',
@@ -7377,17 +7640,18 @@ test('scroll-snap-stop', async () => {
 
 test('scroll-m', async () => {
   expect(
-    await compileCss(
+    await run(
+      ['scroll-m-4', 'scroll-m-[4px]', '-scroll-m-4', '-scroll-m-[var(--value)]'],
       css`
         @theme {
           --spacing-4: 1rem;
         }
         @tailwind utilities;
       `,
-      ['scroll-m-4', 'scroll-m-[4px]', '-scroll-m-4', '-scroll-m-[var(--value)]'],
     ),
   ).toMatchInlineSnapshot(`
-    ":root, :host {
+    "
+    :root, :host {
       --spacing-4: 1rem;
     }
 
@@ -7405,7 +7669,8 @@ test('scroll-m', async () => {
 
     .scroll-m-\\[4px\\] {
       scroll-margin: 4px;
-    }"
+    }
+    "
   `)
   expect(
     await run([
@@ -7420,17 +7685,18 @@ test('scroll-m', async () => {
 
 test('scroll-mx', async () => {
   expect(
-    await compileCss(
+    await run(
+      ['scroll-mx-4', 'scroll-mx-[4px]', '-scroll-mx-4', '-scroll-mx-[var(--value)]'],
       css`
         @theme {
           --spacing-4: 1rem;
         }
         @tailwind utilities;
       `,
-      ['scroll-mx-4', 'scroll-mx-[4px]', '-scroll-mx-4', '-scroll-mx-[var(--value)]'],
     ),
   ).toMatchInlineSnapshot(`
-    ":root, :host {
+    "
+    :root, :host {
       --spacing-4: 1rem;
     }
 
@@ -7448,7 +7714,8 @@ test('scroll-mx', async () => {
 
     .scroll-mx-\\[4px\\] {
       scroll-margin-inline: 4px;
-    }"
+    }
+    "
   `)
   expect(
     await run([
@@ -7463,17 +7730,18 @@ test('scroll-mx', async () => {
 
 test('scroll-my', async () => {
   expect(
-    await compileCss(
+    await run(
+      ['scroll-my-4', 'scroll-my-[4px]', '-scroll-my-4', '-scroll-my-[var(--value)]'],
       css`
         @theme {
           --spacing-4: 1rem;
         }
         @tailwind utilities;
       `,
-      ['scroll-my-4', 'scroll-my-[4px]', '-scroll-my-4', '-scroll-my-[var(--value)]'],
     ),
   ).toMatchInlineSnapshot(`
-    ":root, :host {
+    "
+    :root, :host {
       --spacing-4: 1rem;
     }
 
@@ -7491,7 +7759,8 @@ test('scroll-my', async () => {
 
     .scroll-my-\\[4px\\] {
       scroll-margin-block: 4px;
-    }"
+    }
+    "
   `)
   expect(
     await run([
@@ -7506,17 +7775,18 @@ test('scroll-my', async () => {
 
 test('scroll-ms', async () => {
   expect(
-    await compileCss(
+    await run(
+      ['scroll-ms-4', 'scroll-ms-[4px]', '-scroll-ms-4', '-scroll-ms-[var(--value)]'],
       css`
         @theme {
           --spacing-4: 1rem;
         }
         @tailwind utilities;
       `,
-      ['scroll-ms-4', 'scroll-ms-[4px]', '-scroll-ms-4', '-scroll-ms-[var(--value)]'],
     ),
   ).toMatchInlineSnapshot(`
-    ":root, :host {
+    "
+    :root, :host {
       --spacing-4: 1rem;
     }
 
@@ -7534,7 +7804,8 @@ test('scroll-ms', async () => {
 
     .scroll-ms-\\[4px\\] {
       scroll-margin-inline-start: 4px;
-    }"
+    }
+    "
   `)
   expect(
     await run([
@@ -7549,17 +7820,18 @@ test('scroll-ms', async () => {
 
 test('scroll-me', async () => {
   expect(
-    await compileCss(
+    await run(
+      ['scroll-me-4', 'scroll-me-[4px]', '-scroll-me-4', '-scroll-me-[var(--value)]'],
       css`
         @theme {
           --spacing-4: 1rem;
         }
         @tailwind utilities;
       `,
-      ['scroll-me-4', 'scroll-me-[4px]', '-scroll-me-4', '-scroll-me-[var(--value)]'],
     ),
   ).toMatchInlineSnapshot(`
-    ":root, :host {
+    "
+    :root, :host {
       --spacing-4: 1rem;
     }
 
@@ -7577,7 +7849,8 @@ test('scroll-me', async () => {
 
     .scroll-me-\\[4px\\] {
       scroll-margin-inline-end: 4px;
-    }"
+    }
+    "
   `)
   expect(
     await run([
@@ -7592,17 +7865,18 @@ test('scroll-me', async () => {
 
 test('scroll-mbs', async () => {
   expect(
-    await compileCss(
+    await run(
+      ['scroll-mbs-4', 'scroll-mbs-[4px]', '-scroll-mbs-4', '-scroll-mbs-[var(--value)]'],
       css`
         @theme {
           --spacing-4: 1rem;
         }
         @tailwind utilities;
       `,
-      ['scroll-mbs-4', 'scroll-mbs-[4px]', '-scroll-mbs-4', '-scroll-mbs-[var(--value)]'],
     ),
   ).toMatchInlineSnapshot(`
-    ":root, :host {
+    "
+    :root, :host {
       --spacing-4: 1rem;
     }
 
@@ -7620,7 +7894,8 @@ test('scroll-mbs', async () => {
 
     .scroll-mbs-\\[4px\\] {
       scroll-margin-block-start: 4px;
-    }"
+    }
+    "
   `)
   expect(
     await run([
@@ -7635,17 +7910,18 @@ test('scroll-mbs', async () => {
 
 test('scroll-mbe', async () => {
   expect(
-    await compileCss(
+    await run(
+      ['scroll-mbe-4', 'scroll-mbe-[4px]', '-scroll-mbe-4', '-scroll-mbe-[var(--value)]'],
       css`
         @theme {
           --spacing-4: 1rem;
         }
         @tailwind utilities;
       `,
-      ['scroll-mbe-4', 'scroll-mbe-[4px]', '-scroll-mbe-4', '-scroll-mbe-[var(--value)]'],
     ),
   ).toMatchInlineSnapshot(`
-    ":root, :host {
+    "
+    :root, :host {
       --spacing-4: 1rem;
     }
 
@@ -7663,7 +7939,8 @@ test('scroll-mbe', async () => {
 
     .scroll-mbe-\\[4px\\] {
       scroll-margin-block-end: 4px;
-    }"
+    }
+    "
   `)
   expect(
     await run([
@@ -7678,17 +7955,18 @@ test('scroll-mbe', async () => {
 
 test('scroll-mt', async () => {
   expect(
-    await compileCss(
+    await run(
+      ['scroll-mt-4', 'scroll-mt-[4px]', '-scroll-mt-4', '-scroll-mt-[var(--value)]'],
       css`
         @theme {
           --spacing-4: 1rem;
         }
         @tailwind utilities;
       `,
-      ['scroll-mt-4', 'scroll-mt-[4px]', '-scroll-mt-4', '-scroll-mt-[var(--value)]'],
     ),
   ).toMatchInlineSnapshot(`
-    ":root, :host {
+    "
+    :root, :host {
       --spacing-4: 1rem;
     }
 
@@ -7706,7 +7984,8 @@ test('scroll-mt', async () => {
 
     .scroll-mt-\\[4px\\] {
       scroll-margin-top: 4px;
-    }"
+    }
+    "
   `)
   expect(
     await run([
@@ -7721,17 +8000,18 @@ test('scroll-mt', async () => {
 
 test('scroll-mr', async () => {
   expect(
-    await compileCss(
+    await run(
+      ['scroll-mr-4', 'scroll-mr-[4px]', '-scroll-mr-4', '-scroll-mr-[var(--value)]'],
       css`
         @theme {
           --spacing-4: 1rem;
         }
         @tailwind utilities;
       `,
-      ['scroll-mr-4', 'scroll-mr-[4px]', '-scroll-mr-4', '-scroll-mr-[var(--value)]'],
     ),
   ).toMatchInlineSnapshot(`
-    ":root, :host {
+    "
+    :root, :host {
       --spacing-4: 1rem;
     }
 
@@ -7749,7 +8029,8 @@ test('scroll-mr', async () => {
 
     .scroll-mr-\\[4px\\] {
       scroll-margin-right: 4px;
-    }"
+    }
+    "
   `)
   expect(
     await run([
@@ -7764,17 +8045,18 @@ test('scroll-mr', async () => {
 
 test('scroll-mb', async () => {
   expect(
-    await compileCss(
+    await run(
+      ['scroll-mb-4', 'scroll-mb-[4px]', '-scroll-mb-4', '-scroll-mb-[var(--value)]'],
       css`
         @theme {
           --spacing-4: 1rem;
         }
         @tailwind utilities;
       `,
-      ['scroll-mb-4', 'scroll-mb-[4px]', '-scroll-mb-4', '-scroll-mb-[var(--value)]'],
     ),
   ).toMatchInlineSnapshot(`
-    ":root, :host {
+    "
+    :root, :host {
       --spacing-4: 1rem;
     }
 
@@ -7792,7 +8074,8 @@ test('scroll-mb', async () => {
 
     .scroll-mb-\\[4px\\] {
       scroll-margin-bottom: 4px;
-    }"
+    }
+    "
   `)
   expect(
     await run([
@@ -7807,17 +8090,18 @@ test('scroll-mb', async () => {
 
 test('scroll-ml', async () => {
   expect(
-    await compileCss(
+    await run(
+      ['scroll-ml-4', 'scroll-ml-[4px]', '-scroll-ml-4', '-scroll-ml-[var(--value)]'],
       css`
         @theme {
           --spacing-4: 1rem;
         }
         @tailwind utilities;
       `,
-      ['scroll-ml-4', 'scroll-ml-[4px]', '-scroll-ml-4', '-scroll-ml-[var(--value)]'],
     ),
   ).toMatchInlineSnapshot(`
-    ":root, :host {
+    "
+    :root, :host {
       --spacing-4: 1rem;
     }
 
@@ -7835,7 +8119,8 @@ test('scroll-ml', async () => {
 
     .scroll-ml-\\[4px\\] {
       scroll-margin-left: 4px;
-    }"
+    }
+    "
   `)
   expect(
     await run([
@@ -7850,17 +8135,18 @@ test('scroll-ml', async () => {
 
 test('scroll-p', async () => {
   expect(
-    await compileCss(
+    await run(
+      ['scroll-p-4', 'scroll-p-[4px]', '-scroll-p-4', '-scroll-p-[var(--value)]'],
       css`
         @theme {
           --spacing-4: 1rem;
         }
         @tailwind utilities;
       `,
-      ['scroll-p-4', 'scroll-p-[4px]', '-scroll-p-4', '-scroll-p-[var(--value)]'],
     ),
   ).toMatchInlineSnapshot(`
-    ":root, :host {
+    "
+    :root, :host {
       --spacing-4: 1rem;
     }
 
@@ -7870,7 +8156,8 @@ test('scroll-p', async () => {
 
     .scroll-p-\\[4px\\] {
       scroll-padding: 4px;
-    }"
+    }
+    "
   `)
   expect(
     await run([
@@ -7885,17 +8172,18 @@ test('scroll-p', async () => {
 
 test('scroll-px', async () => {
   expect(
-    await compileCss(
+    await run(
+      ['scroll-px-4', 'scroll-px-[4px]', '-scroll-px-4', '-scroll-px-[var(--value)]'],
       css`
         @theme {
           --spacing-4: 1rem;
         }
         @tailwind utilities;
       `,
-      ['scroll-px-4', 'scroll-px-[4px]', '-scroll-px-4', '-scroll-px-[var(--value)]'],
     ),
   ).toMatchInlineSnapshot(`
-    ":root, :host {
+    "
+    :root, :host {
       --spacing-4: 1rem;
     }
 
@@ -7905,7 +8193,8 @@ test('scroll-px', async () => {
 
     .scroll-px-\\[4px\\] {
       scroll-padding-inline: 4px;
-    }"
+    }
+    "
   `)
   expect(
     await run([
@@ -7920,17 +8209,18 @@ test('scroll-px', async () => {
 
 test('scroll-py', async () => {
   expect(
-    await compileCss(
+    await run(
+      ['scroll-py-4', 'scroll-py-[4px]', '-scroll-py-4', '-scroll-py-[var(--value)]'],
       css`
         @theme {
           --spacing-4: 1rem;
         }
         @tailwind utilities;
       `,
-      ['scroll-py-4', 'scroll-py-[4px]', '-scroll-py-4', '-scroll-py-[var(--value)]'],
     ),
   ).toMatchInlineSnapshot(`
-    ":root, :host {
+    "
+    :root, :host {
       --spacing-4: 1rem;
     }
 
@@ -7940,7 +8230,8 @@ test('scroll-py', async () => {
 
     .scroll-py-\\[4px\\] {
       scroll-padding-block: 4px;
-    }"
+    }
+    "
   `)
   expect(
     await run([
@@ -7955,17 +8246,18 @@ test('scroll-py', async () => {
 
 test('scroll-ps', async () => {
   expect(
-    await compileCss(
+    await run(
+      ['scroll-ps-4', 'scroll-ps-[4px]', '-scroll-ps-4', '-scroll-ps-[var(--value)]'],
       css`
         @theme {
           --spacing-4: 1rem;
         }
         @tailwind utilities;
       `,
-      ['scroll-ps-4', 'scroll-ps-[4px]', '-scroll-ps-4', '-scroll-ps-[var(--value)]'],
     ),
   ).toMatchInlineSnapshot(`
-    ":root, :host {
+    "
+    :root, :host {
       --spacing-4: 1rem;
     }
 
@@ -7975,7 +8267,8 @@ test('scroll-ps', async () => {
 
     .scroll-ps-\\[4px\\] {
       scroll-padding-inline-start: 4px;
-    }"
+    }
+    "
   `)
   expect(
     await run([
@@ -7990,17 +8283,18 @@ test('scroll-ps', async () => {
 
 test('scroll-pe', async () => {
   expect(
-    await compileCss(
+    await run(
+      ['scroll-pe-4', 'scroll-pe-[4px]', '-scroll-pe-4', '-scroll-pe-[var(--value)]'],
       css`
         @theme {
           --spacing-4: 1rem;
         }
         @tailwind utilities;
       `,
-      ['scroll-pe-4', 'scroll-pe-[4px]', '-scroll-pe-4', '-scroll-pe-[var(--value)]'],
     ),
   ).toMatchInlineSnapshot(`
-    ":root, :host {
+    "
+    :root, :host {
       --spacing-4: 1rem;
     }
 
@@ -8010,7 +8304,8 @@ test('scroll-pe', async () => {
 
     .scroll-pe-\\[4px\\] {
       scroll-padding-inline-end: 4px;
-    }"
+    }
+    "
   `)
   expect(
     await run([
@@ -8025,17 +8320,18 @@ test('scroll-pe', async () => {
 
 test('scroll-pbs', async () => {
   expect(
-    await compileCss(
+    await run(
+      ['scroll-pbs-4', 'scroll-pbs-[4px]'],
       css`
         @theme {
           --spacing-4: 1rem;
         }
         @tailwind utilities;
       `,
-      ['scroll-pbs-4', 'scroll-pbs-[4px]'],
     ),
   ).toMatchInlineSnapshot(`
-    ":root, :host {
+    "
+    :root, :host {
       --spacing-4: 1rem;
     }
 
@@ -8045,7 +8341,8 @@ test('scroll-pbs', async () => {
 
     .scroll-pbs-\\[4px\\] {
       scroll-padding-block-start: 4px;
-    }"
+    }
+    "
   `)
   expect(
     await run([
@@ -8060,17 +8357,18 @@ test('scroll-pbs', async () => {
 
 test('scroll-pbe', async () => {
   expect(
-    await compileCss(
+    await run(
+      ['scroll-pbe-4', 'scroll-pbe-[4px]'],
       css`
         @theme {
           --spacing-4: 1rem;
         }
         @tailwind utilities;
       `,
-      ['scroll-pbe-4', 'scroll-pbe-[4px]'],
     ),
   ).toMatchInlineSnapshot(`
-    ":root, :host {
+    "
+    :root, :host {
       --spacing-4: 1rem;
     }
 
@@ -8080,7 +8378,8 @@ test('scroll-pbe', async () => {
 
     .scroll-pbe-\\[4px\\] {
       scroll-padding-block-end: 4px;
-    }"
+    }
+    "
   `)
   expect(
     await run([
@@ -8095,17 +8394,18 @@ test('scroll-pbe', async () => {
 
 test('scroll-pt', async () => {
   expect(
-    await compileCss(
+    await run(
+      ['scroll-pt-4', 'scroll-pt-[4px]', '-scroll-pt-4', '-scroll-pt-[var(--value)]'],
       css`
         @theme {
           --spacing-4: 1rem;
         }
         @tailwind utilities;
       `,
-      ['scroll-pt-4', 'scroll-pt-[4px]', '-scroll-pt-4', '-scroll-pt-[var(--value)]'],
     ),
   ).toMatchInlineSnapshot(`
-    ":root, :host {
+    "
+    :root, :host {
       --spacing-4: 1rem;
     }
 
@@ -8115,7 +8415,8 @@ test('scroll-pt', async () => {
 
     .scroll-pt-\\[4px\\] {
       scroll-padding-top: 4px;
-    }"
+    }
+    "
   `)
   expect(
     await run([
@@ -8130,17 +8431,18 @@ test('scroll-pt', async () => {
 
 test('scroll-pr', async () => {
   expect(
-    await compileCss(
+    await run(
+      ['scroll-pr-4', 'scroll-pr-[4px]', '-scroll-pr-4', '-scroll-pr-[var(--value)]'],
       css`
         @theme {
           --spacing-4: 1rem;
         }
         @tailwind utilities;
       `,
-      ['scroll-pr-4', 'scroll-pr-[4px]', '-scroll-pr-4', '-scroll-pr-[var(--value)]'],
     ),
   ).toMatchInlineSnapshot(`
-    ":root, :host {
+    "
+    :root, :host {
       --spacing-4: 1rem;
     }
 
@@ -8150,7 +8452,8 @@ test('scroll-pr', async () => {
 
     .scroll-pr-\\[4px\\] {
       scroll-padding-right: 4px;
-    }"
+    }
+    "
   `)
   expect(
     await run([
@@ -8165,17 +8468,18 @@ test('scroll-pr', async () => {
 
 test('scroll-pb', async () => {
   expect(
-    await compileCss(
+    await run(
+      ['scroll-pb-4', 'scroll-pb-[4px]', '-scroll-pb-4', '-scroll-pb-[var(--value)]'],
       css`
         @theme {
           --spacing-4: 1rem;
         }
         @tailwind utilities;
       `,
-      ['scroll-pb-4', 'scroll-pb-[4px]', '-scroll-pb-4', '-scroll-pb-[var(--value)]'],
     ),
   ).toMatchInlineSnapshot(`
-    ":root, :host {
+    "
+    :root, :host {
       --spacing-4: 1rem;
     }
 
@@ -8185,7 +8489,8 @@ test('scroll-pb', async () => {
 
     .scroll-pb-\\[4px\\] {
       scroll-padding-bottom: 4px;
-    }"
+    }
+    "
   `)
   expect(
     await run([
@@ -8200,17 +8505,18 @@ test('scroll-pb', async () => {
 
 test('scroll-pl', async () => {
   expect(
-    await compileCss(
+    await run(
+      ['scroll-pl-4', 'scroll-pl-[4px]', '-scroll-pl-4', '-scroll-pl-[var(--value)]'],
       css`
         @theme {
           --spacing-4: 1rem;
         }
         @tailwind utilities;
       `,
-      ['scroll-pl-4', 'scroll-pl-[4px]', '-scroll-pl-4', '-scroll-pl-[var(--value)]'],
     ),
   ).toMatchInlineSnapshot(`
-    ":root, :host {
+    "
+    :root, :host {
       --spacing-4: 1rem;
     }
 
@@ -8220,7 +8526,8 @@ test('scroll-pl', async () => {
 
     .scroll-pl-\\[4px\\] {
       scroll-padding-left: 4px;
-    }"
+    }
+    "
   `)
   expect(
     await run([
@@ -8235,13 +8542,15 @@ test('scroll-pl', async () => {
 
 test('list-style-position', async () => {
   expect(await run(['list-inside', 'list-outside'])).toMatchInlineSnapshot(`
-    ".list-inside {
+    "
+    .list-inside {
       list-style-position: inside;
     }
 
     .list-outside {
       list-style-position: outside;
-    }"
+    }
+    "
   `)
   expect(
     await run(['-list-inside', '-list-outside', 'list-inside/foo', 'list-outside/foo']),
@@ -8251,7 +8560,8 @@ test('list-style-position', async () => {
 test('list', async () => {
   expect(await run(['list-none', 'list-disc', 'list-decimal', 'list-[var(--value)]']))
     .toMatchInlineSnapshot(`
-      ".list-\\[var\\(--value\\)\\] {
+      "
+      .list-\\[var\\(--value\\)\\] {
         list-style-type: var(--value);
       }
 
@@ -8265,7 +8575,8 @@ test('list', async () => {
 
       .list-none {
         list-style-type: none;
-      }"
+      }
+      "
     `)
   expect(
     await run([
@@ -8281,35 +8592,39 @@ test('list', async () => {
   ).toEqual('')
 
   expect(
-    await compileCss(
+    await run(
+      ['list-none'],
       css`
         @theme {
           --list-style-type-none: disc;
         }
         @tailwind utilities;
       `,
-      ['list-none'],
     ),
   ).toMatchInlineSnapshot(`
-    ":root, :host {
+    "
+    :root, :host {
       --list-style-type-none: disc;
     }
 
     .list-none {
       list-style-type: var(--list-style-type-none);
-    }"
+    }
+    "
   `)
 })
 
 test('list-image', async () => {
   expect(await run(['list-image-none', 'list-image-[var(--value)]'])).toMatchInlineSnapshot(`
-    ".list-image-\\[var\\(--value\\)\\] {
+    "
+    .list-image-\\[var\\(--value\\)\\] {
       list-style-image: var(--value);
     }
 
     .list-image-none {
       list-style-image: none;
-    }"
+    }
+    "
   `)
   expect(
     await run([
@@ -8322,35 +8637,39 @@ test('list-image', async () => {
   ).toEqual('')
 
   expect(
-    await compileCss(
+    await run(
+      ['list-image-none'],
       css`
         @theme {
           --list-style-image-none: url(../foo.png);
         }
         @tailwind utilities;
       `,
-      ['list-image-none'],
     ),
   ).toMatchInlineSnapshot(`
-    ":root, :host {
+    "
+    :root, :host {
       --list-style-image-none: url("../foo.png");
     }
 
     .list-image-none {
       list-style-image: var(--list-style-image-none);
-    }"
+    }
+    "
   `)
 })
 
 test('appearance', async () => {
   expect(await run(['appearance-none', 'appearance-auto'])).toMatchInlineSnapshot(`
-    ".appearance-auto {
+    "
+    .appearance-auto {
       appearance: auto;
     }
 
     .appearance-none {
       appearance: none;
-    }"
+    }
+    "
   `)
   expect(
     await run([
@@ -8374,7 +8693,8 @@ test('color-scheme', async () => {
       'scheme-only-light',
     ]),
   ).toMatchInlineSnapshot(`
-    ".scheme-dark {
+    "
+    .scheme-dark {
       color-scheme: dark;
     }
 
@@ -8396,7 +8716,8 @@ test('color-scheme', async () => {
 
     .scheme-only-light {
       color-scheme: light only;
-    }"
+    }
+    "
   `)
   expect(
     await run([
@@ -8412,14 +8733,7 @@ test('color-scheme', async () => {
 
 test('columns', async () => {
   expect(
-    await compileCss(
-      css`
-        @theme {
-          --container-3xs: 16rem;
-          --container-7xl: 80rem;
-        }
-        @tailwind utilities;
-      `,
+    await run(
       [
         'columns-auto',
         'columns-3xs',
@@ -8429,9 +8743,17 @@ test('columns', async () => {
         'columns-[123]',
         'columns-[var(--value)]',
       ],
+      css`
+        @theme {
+          --container-3xs: 16rem;
+          --container-7xl: 80rem;
+        }
+        @tailwind utilities;
+      `,
     ),
   ).toMatchInlineSnapshot(`
-    ":root, :host {
+    "
+    :root, :host {
       --container-3xs: 16rem;
       --container-7xl: 80rem;
     }
@@ -8462,7 +8784,8 @@ test('columns', async () => {
 
     .columns-auto {
       columns: auto;
-    }"
+    }
+    "
   `)
   expect(
     await run([
@@ -8483,23 +8806,25 @@ test('columns', async () => {
   ).toEqual('')
 
   expect(
-    await compileCss(
+    await run(
+      ['columns-auto'],
       css`
         @theme {
           --columns-auto: 3;
         }
         @tailwind utilities;
       `,
-      ['columns-auto'],
     ),
   ).toMatchInlineSnapshot(`
-    ":root, :host {
+    "
+    :root, :host {
       --columns-auto: 3;
     }
 
     .columns-auto {
       columns: var(--columns-auto);
-    }"
+    }
+    "
   `)
 })
 
@@ -8516,7 +8841,8 @@ test('break-before', async () => {
       'break-before-column',
     ]),
   ).toMatchInlineSnapshot(`
-    ".break-before-all {
+    "
+    .break-before-all {
       break-before: all;
     }
 
@@ -8546,7 +8872,8 @@ test('break-before', async () => {
 
     .break-before-right {
       break-before: right;
-    }"
+    }
+    "
   `)
   expect(
     await run([
@@ -8580,7 +8907,8 @@ test('break-inside', async () => {
       'break-inside-avoid-column',
     ]),
   ).toMatchInlineSnapshot(`
-    ".break-inside-auto {
+    "
+    .break-inside-auto {
       break-inside: auto;
     }
 
@@ -8594,7 +8922,8 @@ test('break-inside', async () => {
 
     .break-inside-avoid-page {
       break-inside: avoid-page;
-    }"
+    }
+    "
   `)
   expect(
     await run([
@@ -8624,7 +8953,8 @@ test('break-after', async () => {
       'break-after-column',
     ]),
   ).toMatchInlineSnapshot(`
-    ".break-after-all {
+    "
+    .break-after-all {
       break-after: all;
     }
 
@@ -8654,7 +8984,8 @@ test('break-after', async () => {
 
     .break-after-right {
       break-after: right;
-    }"
+    }
+    "
   `)
   expect(
     await run([
@@ -8681,15 +9012,29 @@ test('break-after', async () => {
 
 test('auto-cols', async () => {
   expect(
-    await run([
-      'auto-cols-auto',
-      'auto-cols-min',
-      'auto-cols-max',
-      'auto-cols-fr',
-      'auto-cols-[2fr]',
-    ]),
+    await run(
+      [
+        'auto-cols-auto',
+        'auto-cols-min',
+        'auto-cols-max',
+        'auto-cols-fr',
+        'auto-cols-[2fr]',
+        'auto-cols-12',
+      ],
+      css`
+        @tailwind utilities;
+        @theme {
+          --spacing: 0.25rem;
+        }
+      `,
+    ),
   ).toMatchInlineSnapshot(`
-    ".auto-cols-\\[2fr\\] {
+    "
+    .auto-cols-12 {
+      grid-auto-columns: calc(var(--spacing) * 12);
+    }
+
+    .auto-cols-\\[2fr\\] {
       grid-auto-columns: 2fr;
     }
 
@@ -8707,7 +9052,12 @@ test('auto-cols', async () => {
 
     .auto-cols-min {
       grid-auto-columns: min-content;
-    }"
+    }
+
+    :root, :host {
+      --spacing: .25rem;
+    }
+    "
   `)
   expect(
     await run([
@@ -8723,23 +9073,25 @@ test('auto-cols', async () => {
   ).toEqual('')
 
   expect(
-    await compileCss(
+    await run(
+      ['auto-cols-auto'],
       css`
         @theme {
           --grid-auto-columns-auto: 2fr;
         }
         @tailwind utilities;
       `,
-      ['auto-cols-auto'],
     ),
   ).toMatchInlineSnapshot(`
-    ":root, :host {
+    "
+    :root, :host {
       --grid-auto-columns-auto: 2fr;
     }
 
     .auto-cols-auto {
       grid-auto-columns: var(--grid-auto-columns-auto);
-    }"
+    }
+    "
   `)
 })
 
@@ -8753,7 +9105,8 @@ test('grid-flow', async () => {
       'grid-flow-col-dense',
     ]),
   ).toMatchInlineSnapshot(`
-    ".grid-flow-col {
+    "
+    .grid-flow-col {
       grid-auto-flow: column;
     }
 
@@ -8771,7 +9124,8 @@ test('grid-flow', async () => {
 
     .grid-flow-row-dense {
       grid-auto-flow: row dense;
-    }"
+    }
+    "
   `)
   expect(
     await run([
@@ -8792,15 +9146,29 @@ test('grid-flow', async () => {
 
 test('auto-rows', async () => {
   expect(
-    await run([
-      'auto-rows-auto',
-      'auto-rows-min',
-      'auto-rows-max',
-      'auto-rows-fr',
-      'auto-rows-[2fr]',
-    ]),
+    await run(
+      [
+        'auto-rows-auto',
+        'auto-rows-min',
+        'auto-rows-max',
+        'auto-rows-fr',
+        'auto-rows-[2fr]',
+        'auto-rows-12',
+      ],
+      css`
+        @tailwind utilities;
+        @theme {
+          --spacing: 0.25rem;
+        }
+      `,
+    ),
   ).toMatchInlineSnapshot(`
-    ".auto-rows-\\[2fr\\] {
+    "
+    .auto-rows-12 {
+      grid-auto-rows: calc(var(--spacing) * 12);
+    }
+
+    .auto-rows-\\[2fr\\] {
       grid-auto-rows: 2fr;
     }
 
@@ -8818,7 +9186,12 @@ test('auto-rows', async () => {
 
     .auto-rows-min {
       grid-auto-rows: min-content;
-    }"
+    }
+
+    :root, :host {
+      --spacing: .25rem;
+    }
+    "
   `)
   expect(
     await run([
@@ -8834,23 +9207,25 @@ test('auto-rows', async () => {
   ).toEqual('')
 
   expect(
-    await compileCss(
+    await run(
+      ['auto-rows-auto'],
       css`
         @theme {
           --grid-auto-rows-auto: 2fr;
         }
         @tailwind utilities;
       `,
-      ['auto-rows-auto'],
     ),
   ).toMatchInlineSnapshot(`
-    ":root, :host {
+    "
+    :root, :host {
       --grid-auto-rows-auto: 2fr;
     }
 
     .auto-rows-auto {
       grid-auto-rows: var(--grid-auto-rows-auto);
-    }"
+    }
+    "
   `)
 })
 
@@ -8864,7 +9239,8 @@ test('grid-cols', async () => {
       'grid-cols-[123]',
     ]),
   ).toMatchInlineSnapshot(`
-    ".grid-cols-12 {
+    "
+    .grid-cols-12 {
       grid-template-columns: repeat(12, minmax(0, 1fr));
     }
 
@@ -8882,7 +9258,8 @@ test('grid-cols', async () => {
 
     .grid-cols-subgrid {
       grid-template-columns: subgrid;
-    }"
+    }
+    "
   `)
   expect(
     await run([
@@ -8903,23 +9280,25 @@ test('grid-cols', async () => {
   ).toEqual('')
 
   expect(
-    await compileCss(
+    await run(
+      ['grid-cols-none'],
       css`
         @theme {
           --grid-template-columns-none: 200px 1fr;
         }
         @tailwind utilities;
       `,
-      ['grid-cols-none'],
     ),
   ).toMatchInlineSnapshot(`
-    ":root, :host {
+    "
+    :root, :host {
       --grid-template-columns-none: 200px 1fr;
     }
 
     .grid-cols-none {
       grid-template-columns: var(--grid-template-columns-none);
-    }"
+    }
+    "
   `)
 })
 
@@ -8933,7 +9312,8 @@ test('grid-rows', async () => {
       'grid-rows-[123]',
     ]),
   ).toMatchInlineSnapshot(`
-    ".grid-rows-12 {
+    "
+    .grid-rows-12 {
       grid-template-rows: repeat(12, minmax(0, 1fr));
     }
 
@@ -8951,7 +9331,8 @@ test('grid-rows', async () => {
 
     .grid-rows-subgrid {
       grid-template-rows: subgrid;
-    }"
+    }
+    "
   `)
   expect(
     await run([
@@ -8972,30 +9353,33 @@ test('grid-rows', async () => {
   ).toEqual('')
 
   expect(
-    await compileCss(
+    await run(
+      ['grid-rows-none'],
       css`
         @theme {
           --grid-template-rows-none: 200px 1fr;
         }
         @tailwind utilities;
       `,
-      ['grid-rows-none'],
     ),
   ).toMatchInlineSnapshot(`
-    ":root, :host {
+    "
+    :root, :host {
       --grid-template-rows-none: 200px 1fr;
     }
 
     .grid-rows-none {
       grid-template-rows: var(--grid-template-rows-none);
-    }"
+    }
+    "
   `)
 })
 
 test('flex-direction', async () => {
   expect(await run(['flex-row', 'flex-row-reverse', 'flex-col', 'flex-col-reverse']))
     .toMatchInlineSnapshot(`
-      ".flex-col {
+      "
+      .flex-col {
         flex-direction: column;
       }
 
@@ -9009,7 +9393,8 @@ test('flex-direction', async () => {
 
       .flex-row-reverse {
         flex-direction: row-reverse;
-      }"
+      }
+      "
     `)
   expect(
     await run([
@@ -9027,7 +9412,8 @@ test('flex-direction', async () => {
 
 test('flex-wrap', async () => {
   expect(await run(['flex-wrap', 'flex-wrap-reverse', 'flex-nowrap'])).toMatchInlineSnapshot(`
-    ".flex-nowrap {
+    "
+    .flex-nowrap {
       flex-wrap: nowrap;
     }
 
@@ -9037,7 +9423,8 @@ test('flex-wrap', async () => {
 
     .flex-wrap-reverse {
       flex-wrap: wrap-reverse;
-    }"
+    }
+    "
   `)
   expect(
     await run([
@@ -9066,7 +9453,8 @@ test('place-content', async () => {
       'place-content-stretch',
     ]),
   ).toMatchInlineSnapshot(`
-    ".place-content-around {
+    "
+    .place-content-around {
       place-content: space-around;
     }
 
@@ -9104,7 +9492,8 @@ test('place-content', async () => {
 
     .place-content-stretch {
       place-content: stretch;
-    }"
+    }
+    "
   `)
   expect(
     await run([
@@ -9141,7 +9530,8 @@ test('place-items', async () => {
       'place-items-stretch',
     ]),
   ).toMatchInlineSnapshot(`
-    ".place-items-baseline {
+    "
+    .place-items-baseline {
       place-items: baseline;
     }
 
@@ -9167,7 +9557,8 @@ test('place-items', async () => {
 
     .place-items-stretch {
       place-items: stretch stretch;
-    }"
+    }
+    "
   `)
   expect(
     await run([
@@ -9202,7 +9593,8 @@ test('align-content', async () => {
       'content-stretch',
     ]),
   ).toMatchInlineSnapshot(`
-    ".content-around {
+    "
+    .content-around {
       align-content: space-around;
     }
 
@@ -9244,7 +9636,8 @@ test('align-content', async () => {
 
     .content-stretch {
       align-content: stretch;
-    }"
+    }
+    "
   `)
   expect(
     await run([
@@ -9284,7 +9677,8 @@ test('items', async () => {
       'items-stretch',
     ]),
   ).toMatchInlineSnapshot(`
-    ".items-baseline {
+    "
+    .items-baseline {
       align-items: baseline;
     }
 
@@ -9314,7 +9708,8 @@ test('items', async () => {
 
     .items-stretch {
       align-items: stretch;
-    }"
+    }
+    "
   `)
   expect(
     await run([
@@ -9350,7 +9745,8 @@ test('justify', async () => {
       'justify-stretch',
     ]),
   ).toMatchInlineSnapshot(`
-    ".justify-around {
+    "
+    .justify-around {
       justify-content: space-around;
     }
 
@@ -9388,7 +9784,8 @@ test('justify', async () => {
 
     .justify-stretch {
       justify-content: stretch;
-    }"
+    }
+    "
   `)
   expect(
     await run([
@@ -9424,7 +9821,8 @@ test('justify-items', async () => {
       'justify-items-stretch',
     ]),
   ).toMatchInlineSnapshot(`
-    ".justify-items-center {
+    "
+    .justify-items-center {
       justify-items: center;
     }
 
@@ -9446,7 +9844,8 @@ test('justify-items', async () => {
 
     .justify-items-stretch {
       justify-items: stretch;
-    }"
+    }
+    "
   `)
   expect(
     await run([
@@ -9465,17 +9864,18 @@ test('justify-items', async () => {
 
 test('gap', async () => {
   expect(
-    await compileCss(
+    await run(
+      ['gap-4', 'gap-[4px]'],
       css`
         @theme {
           --spacing-4: 1rem;
         }
         @tailwind utilities;
       `,
-      ['gap-4', 'gap-[4px]'],
     ),
   ).toMatchInlineSnapshot(`
-    ":root, :host {
+    "
+    :root, :host {
       --spacing-4: 1rem;
     }
 
@@ -9485,24 +9885,26 @@ test('gap', async () => {
 
     .gap-\\[4px\\] {
       gap: 4px;
-    }"
+    }
+    "
   `)
   expect(await run(['gap', '-gap-4', '-gap-[4px]', 'gap-4/foo', 'gap-[4px]/foo'])).toEqual('')
 })
 
 test('gap-x', async () => {
   expect(
-    await compileCss(
+    await run(
+      ['gap-x-4', 'gap-x-[4px]'],
       css`
         @theme {
           --spacing-4: 1rem;
         }
         @tailwind utilities;
       `,
-      ['gap-x-4', 'gap-x-[4px]'],
     ),
   ).toMatchInlineSnapshot(`
-    ":root, :host {
+    "
+    :root, :host {
       --spacing-4: 1rem;
     }
 
@@ -9512,7 +9914,8 @@ test('gap-x', async () => {
 
     .gap-x-\\[4px\\] {
       column-gap: 4px;
-    }"
+    }
+    "
   `)
   expect(
     await run(['gap-x', '-gap-x-4', '-gap-x-[4px]', 'gap-x-4/foo', 'gap-x-[4px]/foo']),
@@ -9521,17 +9924,18 @@ test('gap-x', async () => {
 
 test('gap-y', async () => {
   expect(
-    await compileCss(
+    await run(
+      ['gap-y-4', 'gap-y-[4px]'],
       css`
         @theme {
           --spacing-4: 1rem;
         }
         @tailwind utilities;
       `,
-      ['gap-y-4', 'gap-y-[4px]'],
     ),
   ).toMatchInlineSnapshot(`
-    ":root, :host {
+    "
+    :root, :host {
       --spacing-4: 1rem;
     }
 
@@ -9541,7 +9945,8 @@ test('gap-y', async () => {
 
     .gap-y-\\[4px\\] {
       row-gap: 4px;
-    }"
+    }
+    "
   `)
   expect(
     await run(['gap-y', '-gap-y-4', '-gap-y-[4px]', 'gap-y-4/foo', 'gap-y-[4px]/foo']),
@@ -9550,17 +9955,31 @@ test('gap-y', async () => {
 
 test('space-x', async () => {
   expect(
-    await compileCss(
+    await run(
+      [
+        'space-x-0',
+        'space-x-[0]',
+        'space-x-[0px]',
+        '-space-x-0',
+        'space-x-[-0]',
+        'space-x-[-0px]',
+        'space-x-1',
+        '-space-x-1',
+        'space-x-4',
+        'space-x-[4px]',
+        '-space-x-4',
+      ],
       css`
         @theme {
+          --spacing: 0.25rem;
           --spacing-4: 1rem;
         }
         @tailwind utilities;
       `,
-      ['space-x-4', 'space-x-[4px]', '-space-x-4'],
     ),
   ).toMatchInlineSnapshot(`
-    "@layer properties {
+    "
+    @layer properties {
       @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
         *, :before, :after, ::backdrop {
           --tw-space-x-reverse: 0;
@@ -9569,21 +9988,49 @@ test('space-x', async () => {
     }
 
     :root, :host {
+      --spacing: .25rem;
       --spacing-4: 1rem;
     }
 
+    :where(.-space-x-0 > :not(:last-child)) {
+      --tw-space-x-reverse: 0;
+      margin-inline: 0;
+    }
+
+    :where(.-space-x-1 > :not(:last-child)) {
+      --tw-space-x-reverse: 0;
+      margin-inline-start: calc(calc(var(--spacing) * -1) * var(--tw-space-x-reverse));
+      margin-inline-end: calc(calc(var(--spacing) * -1) * calc(1 - var(--tw-space-x-reverse)));
+    }
+
     :where(.-space-x-4 > :not(:last-child)) {
       --tw-space-x-reverse: 0;
       margin-inline-start: calc(calc(var(--spacing-4) * -1) * var(--tw-space-x-reverse));
       margin-inline-end: calc(calc(var(--spacing-4) * -1) * calc(1 - var(--tw-space-x-reverse)));
     }
 
+    :where(.space-x-0 > :not(:last-child)) {
+      --tw-space-x-reverse: 0;
+      margin-inline: 0;
+    }
+
+    :where(.space-x-1 > :not(:last-child)) {
+      --tw-space-x-reverse: 0;
+      margin-inline-start: calc(var(--spacing) * var(--tw-space-x-reverse));
+      margin-inline-end: calc(var(--spacing) * calc(1 - var(--tw-space-x-reverse)));
+    }
+
     :where(.space-x-4 > :not(:last-child)) {
       --tw-space-x-reverse: 0;
       margin-inline-start: calc(var(--spacing-4) * var(--tw-space-x-reverse));
       margin-inline-end: calc(var(--spacing-4) * calc(1 - var(--tw-space-x-reverse)));
     }
 
+    :where(.space-x-\\[-0\\] > :not(:last-child)), :where(.space-x-\\[-0px\\] > :not(:last-child)), :where(.space-x-\\[0\\] > :not(:last-child)), :where(.space-x-\\[0px\\] > :not(:last-child)) {
+      --tw-space-x-reverse: 0;
+      margin-inline: 0;
+    }
+
     :where(.space-x-\\[4px\\] > :not(:last-child)) {
       --tw-space-x-reverse: 0;
       margin-inline-start: calc(4px * var(--tw-space-x-reverse));
@@ -9594,24 +10041,39 @@ test('space-x', async () => {
       syntax: "*";
       inherits: false;
       initial-value: 0;
-    }"
+    }
+    "
   `)
   expect(await run(['space-x', 'space-x-4/foo', 'space-x-[4px]/foo', '-space-x-4/foo'])).toEqual('')
 })
 
 test('space-y', async () => {
   expect(
-    await compileCss(
+    await run(
+      [
+        'space-y-0',
+        'space-y-[0]',
+        'space-y-[0px]',
+        '-space-y-0',
+        'space-y-[-0]',
+        'space-y-[-0px]',
+        'space-y-1',
+        '-space-y-1',
+        'space-y-4',
+        'space-y-[4px]',
+        '-space-y-4',
+      ],
       css`
         @theme {
+          --spacing: 0.25rem;
           --spacing-4: 1rem;
         }
         @tailwind utilities;
       `,
-      ['space-y-4', 'space-y-[4px]', '-space-y-4'],
     ),
   ).toMatchInlineSnapshot(`
-    "@layer properties {
+    "
+    @layer properties {
       @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
         *, :before, :after, ::backdrop {
           --tw-space-y-reverse: 0;
@@ -9620,21 +10082,49 @@ test('space-y', async () => {
     }
 
     :root, :host {
+      --spacing: .25rem;
       --spacing-4: 1rem;
     }
 
+    :where(.-space-y-0 > :not(:last-child)) {
+      --tw-space-y-reverse: 0;
+      margin-block: 0;
+    }
+
+    :where(.-space-y-1 > :not(:last-child)) {
+      --tw-space-y-reverse: 0;
+      margin-block-start: calc(calc(var(--spacing) * -1) * var(--tw-space-y-reverse));
+      margin-block-end: calc(calc(var(--spacing) * -1) * calc(1 - var(--tw-space-y-reverse)));
+    }
+
     :where(.-space-y-4 > :not(:last-child)) {
       --tw-space-y-reverse: 0;
       margin-block-start: calc(calc(var(--spacing-4) * -1) * var(--tw-space-y-reverse));
       margin-block-end: calc(calc(var(--spacing-4) * -1) * calc(1 - var(--tw-space-y-reverse)));
     }
 
+    :where(.space-y-0 > :not(:last-child)) {
+      --tw-space-y-reverse: 0;
+      margin-block: 0;
+    }
+
+    :where(.space-y-1 > :not(:last-child)) {
+      --tw-space-y-reverse: 0;
+      margin-block-start: calc(var(--spacing) * var(--tw-space-y-reverse));
+      margin-block-end: calc(var(--spacing) * calc(1 - var(--tw-space-y-reverse)));
+    }
+
     :where(.space-y-4 > :not(:last-child)) {
       --tw-space-y-reverse: 0;
       margin-block-start: calc(var(--spacing-4) * var(--tw-space-y-reverse));
       margin-block-end: calc(var(--spacing-4) * calc(1 - var(--tw-space-y-reverse)));
     }
 
+    :where(.space-y-\\[-0\\] > :not(:last-child)), :where(.space-y-\\[-0px\\] > :not(:last-child)), :where(.space-y-\\[0\\] > :not(:last-child)), :where(.space-y-\\[0px\\] > :not(:last-child)) {
+      --tw-space-y-reverse: 0;
+      margin-block: 0;
+    }
+
     :where(.space-y-\\[4px\\] > :not(:last-child)) {
       --tw-space-y-reverse: 0;
       margin-block-start: calc(4px * var(--tw-space-y-reverse));
@@ -9645,14 +10135,16 @@ test('space-y', async () => {
       syntax: "*";
       inherits: false;
       initial-value: 0;
-    }"
+    }
+    "
   `)
   expect(await run(['space-y', 'space-y-4/foo', 'space-y-[4px]/foo', '-space-y-4/foo'])).toEqual('')
 })
 
 test('space-x-reverse', async () => {
   expect(await run(['space-x-reverse'])).toMatchInlineSnapshot(`
-    "@layer properties {
+    "
+    @layer properties {
       @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
         *, :before, :after, ::backdrop {
           --tw-space-x-reverse: 0;
@@ -9668,14 +10160,16 @@ test('space-x-reverse', async () => {
       syntax: "*";
       inherits: false;
       initial-value: 0;
-    }"
+    }
+    "
   `)
   expect(await run(['-space-x-reverse', 'space-x-reverse/foo'])).toEqual('')
 })
 
 test('space-y-reverse', async () => {
   expect(await run(['space-y-reverse'])).toMatchInlineSnapshot(`
-    "@layer properties {
+    "
+    @layer properties {
       @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
         *, :before, :after, ::backdrop {
           --tw-space-y-reverse: 0;
@@ -9691,69 +10185,73 @@ test('space-y-reverse', async () => {
       syntax: "*";
       inherits: false;
       initial-value: 0;
-    }"
+    }
+    "
   `)
   expect(await run(['-space-y-reverse', 'space-y-reverse/foo'])).toEqual('')
 })
 
 test('divide-x', async () => {
-  expect(
-    await compileCss(
-      css`
-        @tailwind utilities;
-      `,
-      ['divide-x', 'divide-x-4', 'divide-x-123', 'divide-x-[4px]'],
-    ),
-  ).toMatchInlineSnapshot(`
-    "@layer properties {
-      @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
-        *, :before, :after, ::backdrop {
-          --tw-divide-x-reverse: 0;
-          --tw-border-style: solid;
+  expect(await run(['divide-x', 'divide-x-0', 'divide-x-4', 'divide-x-123', 'divide-x-[4px]']))
+    .toMatchInlineSnapshot(`
+      "
+      @layer properties {
+        @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
+          *, :before, :after, ::backdrop {
+            --tw-divide-x-reverse: 0;
+            --tw-border-style: solid;
+          }
         }
       }
-    }
 
-    :where(.divide-x > :not(:last-child)) {
-      --tw-divide-x-reverse: 0;
-      border-inline-style: var(--tw-border-style);
-      border-inline-start-width: calc(1px * var(--tw-divide-x-reverse));
-      border-inline-end-width: calc(1px * calc(1 - var(--tw-divide-x-reverse)));
-    }
+      :where(.divide-x > :not(:last-child)) {
+        --tw-divide-x-reverse: 0;
+        border-inline-style: var(--tw-border-style);
+        border-inline-start-width: calc(1px * var(--tw-divide-x-reverse));
+        border-inline-end-width: calc(1px * calc(1 - var(--tw-divide-x-reverse)));
+      }
 
-    :where(.divide-x-4 > :not(:last-child)) {
-      --tw-divide-x-reverse: 0;
-      border-inline-style: var(--tw-border-style);
-      border-inline-start-width: calc(4px * var(--tw-divide-x-reverse));
-      border-inline-end-width: calc(4px * calc(1 - var(--tw-divide-x-reverse)));
-    }
+      :where(.divide-x-0 > :not(:last-child)) {
+        --tw-divide-x-reverse: 0;
+        border-inline-style: var(--tw-border-style);
+        border-inline-start-width: calc(0px * var(--tw-divide-x-reverse));
+        border-inline-end-width: calc(0px * calc(1 - var(--tw-divide-x-reverse)));
+      }
 
-    :where(.divide-x-123 > :not(:last-child)) {
-      --tw-divide-x-reverse: 0;
-      border-inline-style: var(--tw-border-style);
-      border-inline-start-width: calc(123px * var(--tw-divide-x-reverse));
-      border-inline-end-width: calc(123px * calc(1 - var(--tw-divide-x-reverse)));
-    }
+      :where(.divide-x-4 > :not(:last-child)) {
+        --tw-divide-x-reverse: 0;
+        border-inline-style: var(--tw-border-style);
+        border-inline-start-width: calc(4px * var(--tw-divide-x-reverse));
+        border-inline-end-width: calc(4px * calc(1 - var(--tw-divide-x-reverse)));
+      }
 
-    :where(.divide-x-\\[4px\\] > :not(:last-child)) {
-      --tw-divide-x-reverse: 0;
-      border-inline-style: var(--tw-border-style);
-      border-inline-start-width: calc(4px * var(--tw-divide-x-reverse));
-      border-inline-end-width: calc(4px * calc(1 - var(--tw-divide-x-reverse)));
-    }
+      :where(.divide-x-123 > :not(:last-child)) {
+        --tw-divide-x-reverse: 0;
+        border-inline-style: var(--tw-border-style);
+        border-inline-start-width: calc(123px * var(--tw-divide-x-reverse));
+        border-inline-end-width: calc(123px * calc(1 - var(--tw-divide-x-reverse)));
+      }
 
-    @property --tw-divide-x-reverse {
-      syntax: "*";
-      inherits: false;
-      initial-value: 0;
-    }
+      :where(.divide-x-\\[4px\\] > :not(:last-child)) {
+        --tw-divide-x-reverse: 0;
+        border-inline-style: var(--tw-border-style);
+        border-inline-start-width: calc(4px * var(--tw-divide-x-reverse));
+        border-inline-end-width: calc(4px * calc(1 - var(--tw-divide-x-reverse)));
+      }
 
-    @property --tw-border-style {
-      syntax: "*";
-      inherits: false;
-      initial-value: solid;
-    }"
-  `)
+      @property --tw-divide-x-reverse {
+        syntax: "*";
+        inherits: false;
+        initial-value: 0;
+      }
+
+      @property --tw-border-style {
+        syntax: "*";
+        inherits: false;
+        initial-value: solid;
+      }
+      "
+    `)
   expect(
     await run([
       '-divide-x',
@@ -9771,17 +10269,18 @@ test('divide-x', async () => {
 
 test('divide-x with custom default border width', async () => {
   expect(
-    await compileCss(
+    await run(
+      ['divide-x'],
       css`
         @theme {
           --default-border-width: 2px;
         }
         @tailwind utilities;
       `,
-      ['divide-x'],
     ),
   ).toMatchInlineSnapshot(`
-    "@layer properties {
+    "
+    @layer properties {
       @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
         *, :before, :after, ::backdrop {
           --tw-divide-x-reverse: 0;
@@ -9807,73 +10306,78 @@ test('divide-x with custom default border width', async () => {
       syntax: "*";
       inherits: false;
       initial-value: solid;
-    }"
+    }
+    "
   `)
   expect(await run(['divide-x/foo'])).toEqual('')
 })
 
 test('divide-y', async () => {
-  expect(
-    await compileCss(
-      css`
-        @tailwind utilities;
-      `,
-      ['divide-y', 'divide-y-4', 'divide-y-123', 'divide-y-[4px]'],
-    ),
-  ).toMatchInlineSnapshot(`
-    "@layer properties {
-      @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
-        *, :before, :after, ::backdrop {
-          --tw-divide-y-reverse: 0;
-          --tw-border-style: solid;
+  expect(await run(['divide-y', 'divide-y-0', 'divide-y-4', 'divide-y-123', 'divide-y-[4px]']))
+    .toMatchInlineSnapshot(`
+      "
+      @layer properties {
+        @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
+          *, :before, :after, ::backdrop {
+            --tw-divide-y-reverse: 0;
+            --tw-border-style: solid;
+          }
         }
       }
-    }
 
-    :where(.divide-y > :not(:last-child)) {
-      --tw-divide-y-reverse: 0;
-      border-bottom-style: var(--tw-border-style);
-      border-top-style: var(--tw-border-style);
-      border-top-width: calc(1px * var(--tw-divide-y-reverse));
-      border-bottom-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
-    }
+      :where(.divide-y > :not(:last-child)) {
+        --tw-divide-y-reverse: 0;
+        border-bottom-style: var(--tw-border-style);
+        border-top-style: var(--tw-border-style);
+        border-top-width: calc(1px * var(--tw-divide-y-reverse));
+        border-bottom-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
+      }
 
-    :where(.divide-y-4 > :not(:last-child)) {
-      --tw-divide-y-reverse: 0;
-      border-bottom-style: var(--tw-border-style);
-      border-top-style: var(--tw-border-style);
-      border-top-width: calc(4px * var(--tw-divide-y-reverse));
-      border-bottom-width: calc(4px * calc(1 - var(--tw-divide-y-reverse)));
-    }
+      :where(.divide-y-0 > :not(:last-child)) {
+        --tw-divide-y-reverse: 0;
+        border-bottom-style: var(--tw-border-style);
+        border-top-style: var(--tw-border-style);
+        border-top-width: calc(0px * var(--tw-divide-y-reverse));
+        border-bottom-width: calc(0px * calc(1 - var(--tw-divide-y-reverse)));
+      }
 
-    :where(.divide-y-123 > :not(:last-child)) {
-      --tw-divide-y-reverse: 0;
-      border-bottom-style: var(--tw-border-style);
-      border-top-style: var(--tw-border-style);
-      border-top-width: calc(123px * var(--tw-divide-y-reverse));
-      border-bottom-width: calc(123px * calc(1 - var(--tw-divide-y-reverse)));
-    }
+      :where(.divide-y-4 > :not(:last-child)) {
+        --tw-divide-y-reverse: 0;
+        border-bottom-style: var(--tw-border-style);
+        border-top-style: var(--tw-border-style);
+        border-top-width: calc(4px * var(--tw-divide-y-reverse));
+        border-bottom-width: calc(4px * calc(1 - var(--tw-divide-y-reverse)));
+      }
 
-    :where(.divide-y-\\[4px\\] > :not(:last-child)) {
-      --tw-divide-y-reverse: 0;
-      border-bottom-style: var(--tw-border-style);
-      border-top-style: var(--tw-border-style);
-      border-top-width: calc(4px * var(--tw-divide-y-reverse));
-      border-bottom-width: calc(4px * calc(1 - var(--tw-divide-y-reverse)));
-    }
+      :where(.divide-y-123 > :not(:last-child)) {
+        --tw-divide-y-reverse: 0;
+        border-bottom-style: var(--tw-border-style);
+        border-top-style: var(--tw-border-style);
+        border-top-width: calc(123px * var(--tw-divide-y-reverse));
+        border-bottom-width: calc(123px * calc(1 - var(--tw-divide-y-reverse)));
+      }
 
-    @property --tw-divide-y-reverse {
-      syntax: "*";
-      inherits: false;
-      initial-value: 0;
-    }
+      :where(.divide-y-\\[4px\\] > :not(:last-child)) {
+        --tw-divide-y-reverse: 0;
+        border-bottom-style: var(--tw-border-style);
+        border-top-style: var(--tw-border-style);
+        border-top-width: calc(4px * var(--tw-divide-y-reverse));
+        border-bottom-width: calc(4px * calc(1 - var(--tw-divide-y-reverse)));
+      }
 
-    @property --tw-border-style {
-      syntax: "*";
-      inherits: false;
-      initial-value: solid;
-    }"
-  `)
+      @property --tw-divide-y-reverse {
+        syntax: "*";
+        inherits: false;
+        initial-value: 0;
+      }
+
+      @property --tw-border-style {
+        syntax: "*";
+        inherits: false;
+        initial-value: solid;
+      }
+      "
+    `)
   expect(
     await run([
       '-divide-y',
@@ -9891,17 +10395,18 @@ test('divide-y', async () => {
 
 test('divide-y with custom default border width', async () => {
   expect(
-    await compileCss(
+    await run(
+      ['divide-y'],
       css`
         @theme {
           --default-border-width: 2px;
         }
         @tailwind utilities;
       `,
-      ['divide-y'],
     ),
   ).toMatchInlineSnapshot(`
-    "@layer properties {
+    "
+    @layer properties {
       @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
         *, :before, :after, ::backdrop {
           --tw-divide-y-reverse: 0;
@@ -9928,14 +10433,16 @@ test('divide-y with custom default border width', async () => {
       syntax: "*";
       inherits: false;
       initial-value: solid;
-    }"
+    }
+    "
   `)
   expect(await run(['divide-y/foo'])).toEqual('')
 })
 
 test('divide-x-reverse', async () => {
   expect(await run(['divide-x-reverse'])).toMatchInlineSnapshot(`
-    "@layer properties {
+    "
+    @layer properties {
       @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
         *, :before, :after, ::backdrop {
           --tw-divide-x-reverse: 0;
@@ -9951,14 +10458,16 @@ test('divide-x-reverse', async () => {
       syntax: "*";
       inherits: false;
       initial-value: 0;
-    }"
+    }
+    "
   `)
   expect(await run(['-divide-x-reverse', 'divide-x-reverse/foo'])).toEqual('')
 })
 
 test('divide-y-reverse', async () => {
   expect(await run(['divide-y-reverse'])).toMatchInlineSnapshot(`
-    "@layer properties {
+    "
+    @layer properties {
       @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
         *, :before, :after, ::backdrop {
           --tw-divide-y-reverse: 0;
@@ -9974,7 +10483,8 @@ test('divide-y-reverse', async () => {
       syntax: "*";
       inherits: false;
       initial-value: 0;
-    }"
+    }
+    "
   `)
   expect(await run(['-divide-y-reverse', 'divide-y-reverse/foo'])).toEqual('')
 })
@@ -9983,7 +10493,8 @@ test('divide-style', async () => {
   expect(
     await run(['divide-solid', 'divide-dashed', 'divide-dotted', 'divide-double', 'divide-none']),
   ).toMatchInlineSnapshot(`
-    ":where(.divide-dashed > :not(:last-child)) {
+    "
+    :where(.divide-dashed > :not(:last-child)) {
       --tw-border-style: dashed;
       border-style: dashed;
     }
@@ -10006,7 +10517,8 @@ test('divide-style', async () => {
     :where(.divide-solid > :not(:last-child)) {
       --tw-border-style: solid;
       border-style: solid;
-    }"
+    }
+    "
   `)
   expect(
     await run([
@@ -10027,14 +10539,7 @@ test('divide-style', async () => {
 
 test('accent', async () => {
   expect(
-    await compileCss(
-      css`
-        @theme {
-          --color-red-500: #ef4444;
-          --accent-color-blue-500: #3b82f6;
-        }
-        @tailwind utilities;
-      `,
+    await run(
       [
         'accent-red-500',
         'accent-red-500/50',
@@ -10055,9 +10560,17 @@ test('accent', async () => {
         'accent-[#0088cc]/[0.5]',
         'accent-[#0088cc]/[50%]',
       ],
+      css`
+        @theme {
+          --color-red-500: #ef4444;
+          --accent-color-blue-500: #3b82f6;
+        }
+        @tailwind utilities;
+      `,
     ),
   ).toMatchInlineSnapshot(`
-    ":root, :host {
+    "
+    :root, :host {
       --color-red-500: #ef4444;
       --accent-color-blue-500: #3b82f6;
     }
@@ -10174,7 +10687,8 @@ test('accent', async () => {
 
     .accent-transparent {
       accent-color: #0000;
-    }"
+    }
+    "
   `)
   expect(
     await run([
@@ -10215,14 +10729,7 @@ test('accent', async () => {
 
 test('caret', async () => {
   expect(
-    await compileCss(
-      css`
-        @theme {
-          --color-red-500: #ef4444;
-          --caret-color-blue-500: #3b82f6;
-        }
-        @tailwind utilities;
-      `,
+    await run(
       [
         'caret-red-500',
         'caret-red-500/50',
@@ -10243,9 +10750,17 @@ test('caret', async () => {
         'caret-[#0088cc]/[0.5]',
         'caret-[#0088cc]/[50%]',
       ],
+      css`
+        @theme {
+          --color-red-500: #ef4444;
+          --caret-color-blue-500: #3b82f6;
+        }
+        @tailwind utilities;
+      `,
     ),
   ).toMatchInlineSnapshot(`
-    ":root, :host {
+    "
+    :root, :host {
       --color-red-500: #ef4444;
       --caret-color-blue-500: #3b82f6;
     }
@@ -10362,7 +10877,8 @@ test('caret', async () => {
 
     .caret-transparent {
       caret-color: #0000;
-    }"
+    }
+    "
   `)
   expect(
     await run([
@@ -10401,14 +10917,7 @@ test('caret', async () => {
 
 test('divide-color', async () => {
   expect(
-    await compileCss(
-      css`
-        @theme {
-          --color-red-500: #ef4444;
-          --border-color-best-blue: #6495ed;
-        }
-        @tailwind utilities;
-      `,
+    await run(
       [
         'divide-red-500',
         'divide-red-500/50',
@@ -10429,9 +10938,17 @@ test('divide-color', async () => {
         'divide-[#0088cc]/[0.5]',
         'divide-[#0088cc]/[50%]',
       ],
+      css`
+        @theme {
+          --color-red-500: #ef4444;
+          --border-color-best-blue: #6495ed;
+        }
+        @tailwind utilities;
+      `,
     ),
   ).toMatchInlineSnapshot(`
-    ":root, :host {
+    "
+    :root, :host {
       --color-red-500: #ef4444;
       --border-color-best-blue: #6495ed;
     }
@@ -10548,7 +11065,8 @@ test('divide-color', async () => {
 
     :where(.divide-transparent > :not(:last-child)) {
       border-color: #0000;
-    }"
+    }
+    "
   `)
   expect(
     await run([
@@ -10597,7 +11115,8 @@ test('place-self', async () => {
       'place-self-stretch',
     ]),
   ).toMatchInlineSnapshot(`
-    ".place-self-auto {
+    "
+    .place-self-auto {
       place-self: auto;
     }
 
@@ -10623,7 +11142,8 @@ test('place-self', async () => {
 
     .place-self-stretch {
       place-self: stretch stretch;
-    }"
+    }
+    "
   `)
   expect(
     await run([
@@ -10656,7 +11176,8 @@ test('self', async () => {
       'self-baseline-last',
     ]),
   ).toMatchInlineSnapshot(`
-    ".self-auto {
+    "
+    .self-auto {
       align-self: auto;
     }
 
@@ -10690,7 +11211,8 @@ test('self', async () => {
 
     .self-stretch {
       align-self: stretch;
-    }"
+    }
+    "
   `)
   expect(
     await run([
@@ -10724,7 +11246,8 @@ test('justify-self', async () => {
       'justify-self-baseline',
     ]),
   ).toMatchInlineSnapshot(`
-    ".justify-self-auto {
+    "
+    .justify-self-auto {
       justify-self: auto;
     }
 
@@ -10750,7 +11273,8 @@ test('justify-self', async () => {
 
     .justify-self-stretch {
       justify-self: stretch;
-    }"
+    }
+    "
   `)
   expect(
     await run([
@@ -10781,7 +11305,8 @@ test('overflow', async () => {
       'overflow-scroll',
     ]),
   ).toMatchInlineSnapshot(`
-    ".overflow-auto {
+    "
+    .overflow-auto {
       overflow: auto;
     }
 
@@ -10799,7 +11324,8 @@ test('overflow', async () => {
 
     .overflow-visible {
       overflow: visible;
-    }"
+    }
+    "
   `)
   expect(
     await run([
@@ -10828,7 +11354,8 @@ test('overflow-x', async () => {
       'overflow-x-scroll',
     ]),
   ).toMatchInlineSnapshot(`
-    ".overflow-x-auto {
+    "
+    .overflow-x-auto {
       overflow-x: auto;
     }
 
@@ -10846,7 +11373,8 @@ test('overflow-x', async () => {
 
     .overflow-x-visible {
       overflow-x: visible;
-    }"
+    }
+    "
   `)
   expect(
     await run([
@@ -10875,7 +11403,8 @@ test('overflow-y', async () => {
       'overflow-y-scroll',
     ]),
   ).toMatchInlineSnapshot(`
-    ".overflow-y-auto {
+    "
+    .overflow-y-auto {
       overflow-y: auto;
     }
 
@@ -10893,7 +11422,8 @@ test('overflow-y', async () => {
 
     .overflow-y-visible {
       overflow-y: visible;
-    }"
+    }
+    "
   `)
   expect(
     await run([
@@ -10915,7 +11445,8 @@ test('overflow-y', async () => {
 test('overscroll', async () => {
   expect(await run(['overscroll-auto', 'overscroll-contain', 'overscroll-none']))
     .toMatchInlineSnapshot(`
-      ".overscroll-auto {
+      "
+      .overscroll-auto {
         overscroll-behavior: auto;
       }
 
@@ -10925,7 +11456,8 @@ test('overscroll', async () => {
 
       .overscroll-none {
         overscroll-behavior: none;
-      }"
+      }
+      "
     `)
   expect(
     await run([
@@ -10943,7 +11475,8 @@ test('overscroll', async () => {
 test('overscroll-x', async () => {
   expect(await run(['overscroll-x-auto', 'overscroll-x-contain', 'overscroll-x-none']))
     .toMatchInlineSnapshot(`
-      ".overscroll-x-auto {
+      "
+      .overscroll-x-auto {
         overscroll-behavior-x: auto;
       }
 
@@ -10953,7 +11486,8 @@ test('overscroll-x', async () => {
 
       .overscroll-x-none {
         overscroll-behavior-x: none;
-      }"
+      }
+      "
     `)
   expect(
     await run([
@@ -10971,7 +11505,8 @@ test('overscroll-x', async () => {
 test('overscroll-y', async () => {
   expect(await run(['overscroll-y-auto', 'overscroll-y-contain', 'overscroll-y-none']))
     .toMatchInlineSnapshot(`
-      ".overscroll-y-auto {
+      "
+      .overscroll-y-auto {
         overscroll-behavior-y: auto;
       }
 
@@ -10981,7 +11516,8 @@ test('overscroll-y', async () => {
 
       .overscroll-y-none {
         overscroll-behavior-y: none;
-      }"
+      }
+      "
     `)
   expect(
     await run([
@@ -10998,39 +11534,338 @@ test('overscroll-y', async () => {
 
 test('scroll-behavior', async () => {
   expect(await run(['scroll-auto', 'scroll-smooth'])).toMatchInlineSnapshot(`
-    ".scroll-auto {
+    "
+    .scroll-auto {
       scroll-behavior: auto;
     }
 
     .scroll-smooth {
       scroll-behavior: smooth;
-    }"
+    }
+    "
   `)
   expect(
     await run(['scroll', '-scroll-auto', '-scroll-smooth', 'scroll-auto/foo', 'scroll-smooth/foo']),
   ).toEqual('')
 })
 
+test('scrollbar-width', async () => {
+  expect(await run(['scrollbar-auto', 'scrollbar-thin', 'scrollbar-none'])).toMatchInlineSnapshot(`
+    "
+    .scrollbar-auto {
+      scrollbar-width: auto;
+    }
+
+    .scrollbar-none {
+      scrollbar-width: none;
+    }
+
+    .scrollbar-thin {
+      scrollbar-width: thin;
+    }
+    "
+  `)
+  expect(
+    await run([
+      'scrollbar',
+      '-scrollbar-auto',
+      '-scrollbar-thin',
+      '-scrollbar-none',
+      'scrollbar-auto/foo',
+      'scrollbar-thin/foo',
+      'scrollbar-none/foo',
+    ]),
+  ).toEqual('')
+})
+
+test('scrollbar-gutter', async () => {
+  expect(await run(['scrollbar-gutter-auto', 'scrollbar-gutter-stable', 'scrollbar-gutter-both']))
+    .toMatchInlineSnapshot(`
+      "
+      .scrollbar-gutter-auto {
+        scrollbar-gutter: auto;
+      }
+
+      .scrollbar-gutter-both {
+        scrollbar-gutter: stable both-edges;
+      }
+
+      .scrollbar-gutter-stable {
+        scrollbar-gutter: stable;
+      }
+      "
+    `)
+  expect(
+    await run([
+      'scrollbar-gutter',
+      '-scrollbar-gutter-auto',
+      '-scrollbar-gutter-stable',
+      '-scrollbar-gutter-both',
+      'scrollbar-gutter-auto/foo',
+      'scrollbar-gutter-stable/foo',
+      'scrollbar-gutter-both/foo',
+    ]),
+  ).toEqual('')
+})
+
+test('scrollbar-thumb', async () => {
+  expect(
+    await run(
+      [
+        'scrollbar-thumb-red-500',
+        'scrollbar-thumb-red-500/50',
+        'scrollbar-thumb-red-500/[0.5]',
+        'scrollbar-thumb-current',
+        'scrollbar-thumb-inherit',
+        'scrollbar-thumb-transparent',
+        'scrollbar-thumb-[#0088cc]',
+        'scrollbar-thumb-[#0088cc]/50',
+      ],
+      css`
+        @theme {
+          --color-red-500: #ef4444;
+        }
+        @tailwind utilities;
+      `,
+    ),
+  ).toMatchInlineSnapshot(`
+    "
+    @layer properties {
+      @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
+        *, :before, :after, ::backdrop {
+          --tw-scrollbar-thumb: #0000;
+          --tw-scrollbar-track: #0000;
+        }
+      }
+    }
+
+    :root, :host {
+      --color-red-500: #ef4444;
+    }
+
+    .scrollbar-thumb-\\[\\#0088cc\\] {
+      --tw-scrollbar-thumb: #08c;
+      scrollbar-color: var(--tw-scrollbar-thumb) var(--tw-scrollbar-track);
+    }
+
+    .scrollbar-thumb-\\[\\#0088cc\\]\\/50 {
+      --tw-scrollbar-thumb: oklab(59.9824% -.067 -.124 / .5);
+      scrollbar-color: var(--tw-scrollbar-thumb) var(--tw-scrollbar-track);
+    }
+
+    .scrollbar-thumb-current {
+      --tw-scrollbar-thumb: currentcolor;
+      scrollbar-color: var(--tw-scrollbar-thumb) var(--tw-scrollbar-track);
+    }
+
+    .scrollbar-thumb-inherit {
+      --tw-scrollbar-thumb: inherit;
+      scrollbar-color: var(--tw-scrollbar-thumb) var(--tw-scrollbar-track);
+    }
+
+    .scrollbar-thumb-red-500 {
+      --tw-scrollbar-thumb: var(--color-red-500);
+      scrollbar-color: var(--tw-scrollbar-thumb) var(--tw-scrollbar-track);
+    }
+
+    .scrollbar-thumb-red-500\\/50 {
+      --tw-scrollbar-thumb: #ef444480;
+    }
+
+    @supports (color: color-mix(in lab, red, red)) {
+      .scrollbar-thumb-red-500\\/50 {
+        --tw-scrollbar-thumb: color-mix(in oklab, var(--color-red-500) 50%, transparent);
+      }
+    }
+
+    .scrollbar-thumb-red-500\\/50 {
+      scrollbar-color: var(--tw-scrollbar-thumb) var(--tw-scrollbar-track);
+    }
+
+    .scrollbar-thumb-red-500\\/\\[0\\.5\\] {
+      --tw-scrollbar-thumb: #ef444480;
+    }
+
+    @supports (color: color-mix(in lab, red, red)) {
+      .scrollbar-thumb-red-500\\/\\[0\\.5\\] {
+        --tw-scrollbar-thumb: color-mix(in oklab, var(--color-red-500) 50%, transparent);
+      }
+    }
+
+    .scrollbar-thumb-red-500\\/\\[0\\.5\\] {
+      scrollbar-color: var(--tw-scrollbar-thumb) var(--tw-scrollbar-track);
+    }
+
+    .scrollbar-thumb-transparent {
+      --tw-scrollbar-thumb: transparent;
+      scrollbar-color: var(--tw-scrollbar-thumb) var(--tw-scrollbar-track);
+    }
+
+    @property --tw-scrollbar-thumb {
+      syntax: "<color>";
+      inherits: false;
+      initial-value: #0000;
+    }
+
+    @property --tw-scrollbar-track {
+      syntax: "<color>";
+      inherits: false;
+      initial-value: #0000;
+    }
+    "
+  `)
+  expect(
+    await run([
+      'scrollbar-thumb',
+      '-scrollbar-thumb-red-500',
+      '-scrollbar-thumb-red-500/50',
+      'scrollbar-thumb-red-500/foo',
+      'scrollbar-thumb-[#0088cc]/foo',
+    ]),
+  ).toEqual('')
+})
+
+test('scrollbar-track', async () => {
+  expect(
+    await run(
+      [
+        'scrollbar-track-red-500',
+        'scrollbar-track-red-500/50',
+        'scrollbar-track-red-500/[0.5]',
+        'scrollbar-track-current',
+        'scrollbar-track-inherit',
+        'scrollbar-track-transparent',
+        'scrollbar-track-[#0088cc]',
+        'scrollbar-track-[#0088cc]/50',
+      ],
+      css`
+        @theme {
+          --color-red-500: #ef4444;
+        }
+        @tailwind utilities;
+      `,
+    ),
+  ).toMatchInlineSnapshot(`
+    "
+    @layer properties {
+      @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
+        *, :before, :after, ::backdrop {
+          --tw-scrollbar-thumb: #0000;
+          --tw-scrollbar-track: #0000;
+        }
+      }
+    }
+
+    :root, :host {
+      --color-red-500: #ef4444;
+    }
+
+    .scrollbar-track-\\[\\#0088cc\\] {
+      --tw-scrollbar-track: #08c;
+      scrollbar-color: var(--tw-scrollbar-thumb) var(--tw-scrollbar-track);
+    }
+
+    .scrollbar-track-\\[\\#0088cc\\]\\/50 {
+      --tw-scrollbar-track: oklab(59.9824% -.067 -.124 / .5);
+      scrollbar-color: var(--tw-scrollbar-thumb) var(--tw-scrollbar-track);
+    }
+
+    .scrollbar-track-current {
+      --tw-scrollbar-track: currentcolor;
+      scrollbar-color: var(--tw-scrollbar-thumb) var(--tw-scrollbar-track);
+    }
+
+    .scrollbar-track-inherit {
+      --tw-scrollbar-track: inherit;
+      scrollbar-color: var(--tw-scrollbar-thumb) var(--tw-scrollbar-track);
+    }
+
+    .scrollbar-track-red-500 {
+      --tw-scrollbar-track: var(--color-red-500);
+      scrollbar-color: var(--tw-scrollbar-thumb) var(--tw-scrollbar-track);
+    }
+
+    .scrollbar-track-red-500\\/50 {
+      --tw-scrollbar-track: #ef444480;
+    }
+
+    @supports (color: color-mix(in lab, red, red)) {
+      .scrollbar-track-red-500\\/50 {
+        --tw-scrollbar-track: color-mix(in oklab, var(--color-red-500) 50%, transparent);
+      }
+    }
+
+    .scrollbar-track-red-500\\/50 {
+      scrollbar-color: var(--tw-scrollbar-thumb) var(--tw-scrollbar-track);
+    }
+
+    .scrollbar-track-red-500\\/\\[0\\.5\\] {
+      --tw-scrollbar-track: #ef444480;
+    }
+
+    @supports (color: color-mix(in lab, red, red)) {
+      .scrollbar-track-red-500\\/\\[0\\.5\\] {
+        --tw-scrollbar-track: color-mix(in oklab, var(--color-red-500) 50%, transparent);
+      }
+    }
+
+    .scrollbar-track-red-500\\/\\[0\\.5\\] {
+      scrollbar-color: var(--tw-scrollbar-thumb) var(--tw-scrollbar-track);
+    }
+
+    .scrollbar-track-transparent {
+      --tw-scrollbar-track: transparent;
+      scrollbar-color: var(--tw-scrollbar-thumb) var(--tw-scrollbar-track);
+    }
+
+    @property --tw-scrollbar-thumb {
+      syntax: "<color>";
+      inherits: false;
+      initial-value: #0000;
+    }
+
+    @property --tw-scrollbar-track {
+      syntax: "<color>";
+      inherits: false;
+      initial-value: #0000;
+    }
+    "
+  `)
+  expect(
+    await run([
+      'scrollbar-track',
+      '-scrollbar-track-red-500',
+      '-scrollbar-track-red-500/50',
+      'scrollbar-track-red-500/foo',
+      'scrollbar-track-[#0088cc]/foo',
+    ]),
+  ).toEqual('')
+})
+
 test('truncate', async () => {
   expect(await run(['truncate'])).toMatchInlineSnapshot(`
-    ".truncate {
+    "
+    .truncate {
       text-overflow: ellipsis;
       white-space: nowrap;
       overflow: hidden;
-    }"
+    }
+    "
   `)
   expect(await run(['-truncate', 'truncate/foo'])).toEqual('')
 })
 
 test('text-overflow', async () => {
   expect(await run(['text-ellipsis', 'text-clip'])).toMatchInlineSnapshot(`
-    ".text-clip {
+    "
+    .text-clip {
       text-overflow: clip;
     }
 
     .text-ellipsis {
       text-overflow: ellipsis;
-    }"
+    }
+    "
   `)
   expect(await run(['-text-ellipsis', '-text-clip', 'text-ellipsis/foo', 'text-clip/foo'])).toEqual(
     '',
@@ -11039,7 +11874,8 @@ test('text-overflow', async () => {
 
 test('hyphens', async () => {
   expect(await run(['hyphens-none', 'hyphens-manual', 'hyphens-auto'])).toMatchInlineSnapshot(`
-    ".hyphens-auto {
+    "
+    .hyphens-auto {
       -webkit-hyphens: auto;
       hyphens: auto;
     }
@@ -11052,7 +11888,8 @@ test('hyphens', async () => {
     .hyphens-none {
       -webkit-hyphens: none;
       hyphens: none;
-    }"
+    }
+    "
   `)
   expect(
     await run([
@@ -11078,7 +11915,8 @@ test('whitespace', async () => {
       'whitespace-break-spaces',
     ]),
   ).toMatchInlineSnapshot(`
-    ".whitespace-break-spaces {
+    "
+    .whitespace-break-spaces {
       white-space: break-spaces;
     }
 
@@ -11100,7 +11938,8 @@ test('whitespace', async () => {
 
     .whitespace-pre-wrap {
       white-space: pre-wrap;
-    }"
+    }
+    "
   `)
   expect(
     await run([
@@ -11121,10 +11960,44 @@ test('whitespace', async () => {
   ).toEqual('')
 })
 
+test('tab', async () => {
+  expect(await run(['tab-2', 'tab-8', 'tab-[12px]', 'tab-[3]'])).toMatchInlineSnapshot(`
+    "
+    .tab-2 {
+      tab-size: 2;
+    }
+
+    .tab-8 {
+      tab-size: 8;
+    }
+
+    .tab-\\[3\\] {
+      tab-size: 3;
+    }
+
+    .tab-\\[12px\\] {
+      tab-size: 12px;
+    }
+    "
+  `)
+  expect(
+    await run([
+      'tab',
+      '-tab-2',
+      'tab-2.5',
+      'tab-1/2',
+      'tab-unknown',
+      'tab-2/foo',
+      'tab-[12px]/foo',
+    ]),
+  ).toEqual('')
+})
+
 test('text-wrap', async () => {
   expect(await run(['text-wrap', 'text-nowrap', 'text-balance', 'text-pretty']))
     .toMatchInlineSnapshot(`
-      ".text-balance {
+      "
+      .text-balance {
         text-wrap: balance;
       }
 
@@ -11138,7 +12011,8 @@ test('text-wrap', async () => {
 
       .text-wrap {
         text-wrap: wrap;
-      }"
+      }
+      "
     `)
   expect(
     await run([
@@ -11157,7 +12031,8 @@ test('text-wrap', async () => {
 test('word-break', async () => {
   expect(await run(['break-normal', 'break-words', 'break-all', 'break-keep']))
     .toMatchInlineSnapshot(`
-      ".break-normal {
+      "
+      .break-normal {
         overflow-wrap: normal;
         word-break: normal;
       }
@@ -11172,7 +12047,8 @@ test('word-break', async () => {
 
       .break-keep {
         word-break: keep-all;
-      }"
+      }
+      "
     `)
   expect(
     await run([
@@ -11190,7 +12066,8 @@ test('word-break', async () => {
 
 test('overflow-wrap', async () => {
   expect(await run(['wrap-anywhere', 'wrap-break-word', 'wrap-normal'])).toMatchInlineSnapshot(`
-    ".wrap-anywhere {
+    "
+    .wrap-anywhere {
       overflow-wrap: anywhere;
     }
 
@@ -11200,7 +12077,8 @@ test('overflow-wrap', async () => {
 
     .wrap-normal {
       overflow-wrap: normal;
-    }"
+    }
+    "
   `)
   expect(
     await run([
@@ -11216,7 +12094,8 @@ test('overflow-wrap', async () => {
 
 test('rounded', async () => {
   expect(
-    await compileCss(
+    await run(
+      ['rounded', 'rounded-full', 'rounded-none', 'rounded-sm', 'rounded-[4px]'],
       css`
         @theme {
           --radius-sm: 0.125rem;
@@ -11224,10 +12103,10 @@ test('rounded', async () => {
         }
         @tailwind utilities;
       `,
-      ['rounded', 'rounded-full', 'rounded-none', 'rounded-sm', 'rounded-[4px]'],
     ),
   ).toMatchInlineSnapshot(`
-    ":root, :host {
+    "
+    :root, :host {
       --radius-sm: .125rem;
       --radius: .25rem;
     }
@@ -11241,7 +12120,7 @@ test('rounded', async () => {
     }
 
     .rounded-full {
-      border-radius: 3.40282e38px;
+      border-radius: 2147483647px;
     }
 
     .rounded-none {
@@ -11250,46 +12129,60 @@ test('rounded', async () => {
 
     .rounded-sm {
       border-radius: var(--radius-sm);
-    }"
+    }
+    "
   `)
   expect(
-    await compileCss(
+    await run(
+      ['rounded-full'],
       css`
         @theme {
           --radius-full: 99999px;
         }
         @tailwind utilities;
       `,
-      ['rounded-full'],
     ),
   ).toMatchInlineSnapshot(`
-    ":root, :host {
+    "
+    :root, :host {
       --radius-full: 99999px;
     }
 
     .rounded-full {
       border-radius: var(--radius-full);
-    }"
+    }
+    "
   `)
   expect(
-    await run([
-      '-rounded',
-      '-rounded-full',
-      '-rounded-none',
-      '-rounded-sm',
-      '-rounded-[4px]',
-      'rounded/foo',
-      'rounded-full/foo',
-      'rounded-none/foo',
-      'rounded-sm/foo',
-      'rounded-[4px]/foo',
-    ]),
+    await run(
+      [
+        '-rounded',
+        '-rounded-full',
+        '-rounded-none',
+        '-rounded-sm',
+        '-rounded-[4px]',
+        'rounded/foo',
+        'rounded-full/foo',
+        'rounded-none/foo',
+        'rounded-sm/foo',
+        'rounded-[4px]/foo',
+        'rounded-sm/[5]',
+        'rounded-sm/(--foo)',
+      ],
+      css`
+        @theme {
+          --radius-sm: 0.125rem;
+        }
+        @tailwind utilities;
+      `,
+    ),
   ).toEqual('')
 })
 
 test('rounded-s', async () => {
   expect(
-    await compileCss(
+    await run(
+      ['rounded-s', 'rounded-s-full', 'rounded-s-none', 'rounded-s-sm', 'rounded-s-[4px]'],
       css`
         @theme {
           --radius-none: 0px;
@@ -11299,10 +12192,10 @@ test('rounded-s', async () => {
         }
         @tailwind utilities;
       `,
-      ['rounded-s', 'rounded-s-full', 'rounded-s-none', 'rounded-s-sm', 'rounded-s-[4px]'],
     ),
   ).toMatchInlineSnapshot(`
-    ":root, :host {
+    "
+    :root, :host {
       --radius-none: 0px;
       --radius-full: 9999px;
       --radius-sm: .125rem;
@@ -11332,7 +12225,8 @@ test('rounded-s', async () => {
     .rounded-s-sm {
       border-start-start-radius: var(--radius-sm);
       border-end-start-radius: var(--radius-sm);
-    }"
+    }
+    "
   `)
   expect(
     await run([
@@ -11352,7 +12246,8 @@ test('rounded-s', async () => {
 
 test('rounded-e', async () => {
   expect(
-    await compileCss(
+    await run(
+      ['rounded-e', 'rounded-e-full', 'rounded-e-none', 'rounded-e-sm', 'rounded-e-[4px]'],
       css`
         @theme {
           --radius-none: 0px;
@@ -11362,10 +12257,10 @@ test('rounded-e', async () => {
         }
         @tailwind utilities;
       `,
-      ['rounded-e', 'rounded-e-full', 'rounded-e-none', 'rounded-e-sm', 'rounded-e-[4px]'],
     ),
   ).toMatchInlineSnapshot(`
-    ":root, :host {
+    "
+    :root, :host {
       --radius-none: 0px;
       --radius-full: 9999px;
       --radius-sm: .125rem;
@@ -11395,7 +12290,8 @@ test('rounded-e', async () => {
     .rounded-e-sm {
       border-start-end-radius: var(--radius-sm);
       border-end-end-radius: var(--radius-sm);
-    }"
+    }
+    "
   `)
   expect(
     await run([
@@ -11415,7 +12311,8 @@ test('rounded-e', async () => {
 
 test('rounded-t', async () => {
   expect(
-    await compileCss(
+    await run(
+      ['rounded-t', 'rounded-t-full', 'rounded-t-none', 'rounded-t-sm', 'rounded-t-[4px]'],
       css`
         @theme {
           --radius-none: 0px;
@@ -11425,10 +12322,10 @@ test('rounded-t', async () => {
         }
         @tailwind utilities;
       `,
-      ['rounded-t', 'rounded-t-full', 'rounded-t-none', 'rounded-t-sm', 'rounded-t-[4px]'],
     ),
   ).toMatchInlineSnapshot(`
-    ":root, :host {
+    "
+    :root, :host {
       --radius-none: 0px;
       --radius-full: 9999px;
       --radius-sm: .125rem;
@@ -11458,7 +12355,8 @@ test('rounded-t', async () => {
     .rounded-t-sm {
       border-top-left-radius: var(--radius-sm);
       border-top-right-radius: var(--radius-sm);
-    }"
+    }
+    "
   `)
   expect(
     await run([
@@ -11478,7 +12376,8 @@ test('rounded-t', async () => {
 
 test('rounded-r', async () => {
   expect(
-    await compileCss(
+    await run(
+      ['rounded-r', 'rounded-r-full', 'rounded-r-none', 'rounded-r-sm', 'rounded-r-[4px]'],
       css`
         @theme {
           --radius-none: 0px;
@@ -11488,10 +12387,10 @@ test('rounded-r', async () => {
         }
         @tailwind utilities;
       `,
-      ['rounded-r', 'rounded-r-full', 'rounded-r-none', 'rounded-r-sm', 'rounded-r-[4px]'],
     ),
   ).toMatchInlineSnapshot(`
-    ":root, :host {
+    "
+    :root, :host {
       --radius-none: 0px;
       --radius-full: 9999px;
       --radius-sm: .125rem;
@@ -11521,7 +12420,8 @@ test('rounded-r', async () => {
     .rounded-r-sm {
       border-top-right-radius: var(--radius-sm);
       border-bottom-right-radius: var(--radius-sm);
-    }"
+    }
+    "
   `)
   expect(
     await run([
@@ -11541,7 +12441,8 @@ test('rounded-r', async () => {
 
 test('rounded-b', async () => {
   expect(
-    await compileCss(
+    await run(
+      ['rounded-b', 'rounded-b-full', 'rounded-b-none', 'rounded-b-sm', 'rounded-b-[4px]'],
       css`
         @theme {
           --radius-none: 0px;
@@ -11551,10 +12452,10 @@ test('rounded-b', async () => {
         }
         @tailwind utilities;
       `,
-      ['rounded-b', 'rounded-b-full', 'rounded-b-none', 'rounded-b-sm', 'rounded-b-[4px]'],
     ),
   ).toMatchInlineSnapshot(`
-    ":root, :host {
+    "
+    :root, :host {
       --radius-none: 0px;
       --radius-full: 9999px;
       --radius-sm: .125rem;
@@ -11584,7 +12485,8 @@ test('rounded-b', async () => {
     .rounded-b-sm {
       border-bottom-right-radius: var(--radius-sm);
       border-bottom-left-radius: var(--radius-sm);
-    }"
+    }
+    "
   `)
   expect(
     await run([
@@ -11604,7 +12506,8 @@ test('rounded-b', async () => {
 
 test('rounded-l', async () => {
   expect(
-    await compileCss(
+    await run(
+      ['rounded-l', 'rounded-l-full', 'rounded-l-none', 'rounded-l-sm', 'rounded-l-[4px]'],
       css`
         @theme {
           --radius-none: 0px;
@@ -11614,10 +12517,10 @@ test('rounded-l', async () => {
         }
         @tailwind utilities;
       `,
-      ['rounded-l', 'rounded-l-full', 'rounded-l-none', 'rounded-l-sm', 'rounded-l-[4px]'],
     ),
   ).toMatchInlineSnapshot(`
-    ":root, :host {
+    "
+    :root, :host {
       --radius-none: 0px;
       --radius-full: 9999px;
       --radius-sm: .125rem;
@@ -11647,7 +12550,8 @@ test('rounded-l', async () => {
     .rounded-l-sm {
       border-top-left-radius: var(--radius-sm);
       border-bottom-left-radius: var(--radius-sm);
-    }"
+    }
+    "
   `)
   expect(
     await run([
@@ -11667,7 +12571,8 @@ test('rounded-l', async () => {
 
 test('rounded-ss', async () => {
   expect(
-    await compileCss(
+    await run(
+      ['rounded-ss', 'rounded-ss-full', 'rounded-ss-none', 'rounded-ss-sm', 'rounded-ss-[4px]'],
       css`
         @theme {
           --radius-none: 0px;
@@ -11677,10 +12582,10 @@ test('rounded-ss', async () => {
         }
         @tailwind utilities;
       `,
-      ['rounded-ss', 'rounded-ss-full', 'rounded-ss-none', 'rounded-ss-sm', 'rounded-ss-[4px]'],
     ),
   ).toMatchInlineSnapshot(`
-    ":root, :host {
+    "
+    :root, :host {
       --radius-none: 0px;
       --radius-full: 9999px;
       --radius-sm: .125rem;
@@ -11705,7 +12610,8 @@ test('rounded-ss', async () => {
 
     .rounded-ss-sm {
       border-start-start-radius: var(--radius-sm);
-    }"
+    }
+    "
   `)
   expect(
     await run([
@@ -11725,7 +12631,8 @@ test('rounded-ss', async () => {
 
 test('rounded-se', async () => {
   expect(
-    await compileCss(
+    await run(
+      ['rounded-se', 'rounded-se-full', 'rounded-se-none', 'rounded-se-sm', 'rounded-se-[4px]'],
       css`
         @theme {
           --radius-none: 0px;
@@ -11735,10 +12642,10 @@ test('rounded-se', async () => {
         }
         @tailwind utilities;
       `,
-      ['rounded-se', 'rounded-se-full', 'rounded-se-none', 'rounded-se-sm', 'rounded-se-[4px]'],
     ),
   ).toMatchInlineSnapshot(`
-    ":root, :host {
+    "
+    :root, :host {
       --radius-none: 0px;
       --radius-full: 9999px;
       --radius-sm: .125rem;
@@ -11763,7 +12670,8 @@ test('rounded-se', async () => {
 
     .rounded-se-sm {
       border-start-end-radius: var(--radius-sm);
-    }"
+    }
+    "
   `)
   expect(
     await run([
@@ -11783,7 +12691,8 @@ test('rounded-se', async () => {
 
 test('rounded-ee', async () => {
   expect(
-    await compileCss(
+    await run(
+      ['rounded-ee', 'rounded-ee-full', 'rounded-ee-none', 'rounded-ee-sm', 'rounded-ee-[4px]'],
       css`
         @theme {
           --radius-none: 0px;
@@ -11793,10 +12702,10 @@ test('rounded-ee', async () => {
         }
         @tailwind utilities;
       `,
-      ['rounded-ee', 'rounded-ee-full', 'rounded-ee-none', 'rounded-ee-sm', 'rounded-ee-[4px]'],
     ),
   ).toMatchInlineSnapshot(`
-    ":root, :host {
+    "
+    :root, :host {
       --radius-none: 0px;
       --radius-full: 9999px;
       --radius-sm: .125rem;
@@ -11821,7 +12730,8 @@ test('rounded-ee', async () => {
 
     .rounded-ee-sm {
       border-end-end-radius: var(--radius-sm);
-    }"
+    }
+    "
   `)
   expect(
     await run([
@@ -11841,7 +12751,8 @@ test('rounded-ee', async () => {
 
 test('rounded-es', async () => {
   expect(
-    await compileCss(
+    await run(
+      ['rounded-es', 'rounded-es-full', 'rounded-es-none', 'rounded-es-sm', 'rounded-es-[4px]'],
       css`
         @theme {
           --radius-none: 0px;
@@ -11851,10 +12762,10 @@ test('rounded-es', async () => {
         }
         @tailwind utilities;
       `,
-      ['rounded-es', 'rounded-es-full', 'rounded-es-none', 'rounded-es-sm', 'rounded-es-[4px]'],
     ),
   ).toMatchInlineSnapshot(`
-    ":root, :host {
+    "
+    :root, :host {
       --radius-none: 0px;
       --radius-full: 9999px;
       --radius-sm: .125rem;
@@ -11879,7 +12790,8 @@ test('rounded-es', async () => {
 
     .rounded-es-sm {
       border-end-start-radius: var(--radius-sm);
-    }"
+    }
+    "
   `)
   expect(
     await run([
@@ -11899,7 +12811,8 @@ test('rounded-es', async () => {
 
 test('rounded-tl', async () => {
   expect(
-    await compileCss(
+    await run(
+      ['rounded-tl', 'rounded-tl-full', 'rounded-tl-none', 'rounded-tl-sm', 'rounded-tl-[4px]'],
       css`
         @theme {
           --radius-none: 0px;
@@ -11909,10 +12822,10 @@ test('rounded-tl', async () => {
         }
         @tailwind utilities;
       `,
-      ['rounded-tl', 'rounded-tl-full', 'rounded-tl-none', 'rounded-tl-sm', 'rounded-tl-[4px]'],
     ),
   ).toMatchInlineSnapshot(`
-    ":root, :host {
+    "
+    :root, :host {
       --radius-none: 0px;
       --radius-full: 9999px;
       --radius-sm: .125rem;
@@ -11937,7 +12850,8 @@ test('rounded-tl', async () => {
 
     .rounded-tl-sm {
       border-top-left-radius: var(--radius-sm);
-    }"
+    }
+    "
   `)
   expect(
     await run([
@@ -11957,7 +12871,8 @@ test('rounded-tl', async () => {
 
 test('rounded-tr', async () => {
   expect(
-    await compileCss(
+    await run(
+      ['rounded-tr', 'rounded-tr-full', 'rounded-tr-none', 'rounded-tr-sm', 'rounded-tr-[4px]'],
       css`
         @theme {
           --radius-none: 0px;
@@ -11967,10 +12882,10 @@ test('rounded-tr', async () => {
         }
         @tailwind utilities;
       `,
-      ['rounded-tr', 'rounded-tr-full', 'rounded-tr-none', 'rounded-tr-sm', 'rounded-tr-[4px]'],
     ),
   ).toMatchInlineSnapshot(`
-    ":root, :host {
+    "
+    :root, :host {
       --radius-none: 0px;
       --radius-full: 9999px;
       --radius-sm: .125rem;
@@ -11995,7 +12910,8 @@ test('rounded-tr', async () => {
 
     .rounded-tr-sm {
       border-top-right-radius: var(--radius-sm);
-    }"
+    }
+    "
   `)
   expect(
     await run([
@@ -12015,7 +12931,8 @@ test('rounded-tr', async () => {
 
 test('rounded-br', async () => {
   expect(
-    await compileCss(
+    await run(
+      ['rounded-br', 'rounded-br-full', 'rounded-br-none', 'rounded-br-sm', 'rounded-br-[4px]'],
       css`
         @theme {
           --radius-none: 0px;
@@ -12025,10 +12942,10 @@ test('rounded-br', async () => {
         }
         @tailwind utilities;
       `,
-      ['rounded-br', 'rounded-br-full', 'rounded-br-none', 'rounded-br-sm', 'rounded-br-[4px]'],
     ),
   ).toMatchInlineSnapshot(`
-    ":root, :host {
+    "
+    :root, :host {
       --radius-none: 0px;
       --radius-full: 9999px;
       --radius-sm: .125rem;
@@ -12053,7 +12970,8 @@ test('rounded-br', async () => {
 
     .rounded-br-sm {
       border-bottom-right-radius: var(--radius-sm);
-    }"
+    }
+    "
   `)
   expect(
     await run([
@@ -12073,7 +12991,8 @@ test('rounded-br', async () => {
 
 test('rounded-bl', async () => {
   expect(
-    await compileCss(
+    await run(
+      ['rounded-bl', 'rounded-bl-full', 'rounded-bl-none', 'rounded-bl-sm', 'rounded-bl-[4px]'],
       css`
         @theme {
           --radius-none: 0px;
@@ -12083,10 +13002,10 @@ test('rounded-bl', async () => {
         }
         @tailwind utilities;
       `,
-      ['rounded-bl', 'rounded-bl-full', 'rounded-bl-none', 'rounded-bl-sm', 'rounded-bl-[4px]'],
     ),
   ).toMatchInlineSnapshot(`
-    ":root, :host {
+    "
+    :root, :host {
       --radius-none: 0px;
       --radius-full: 9999px;
       --radius-sm: .125rem;
@@ -12111,7 +13030,8 @@ test('rounded-bl', async () => {
 
     .rounded-bl-sm {
       border-bottom-left-radius: var(--radius-sm);
-    }"
+    }
+    "
   `)
   expect(
     await run([
@@ -12140,7 +13060,8 @@ test('border-style', async () => {
       'border-none',
     ]),
   ).toMatchInlineSnapshot(`
-    ".border-dashed {
+    "
+    .border-dashed {
       --tw-border-style: dashed;
       border-style: dashed;
     }
@@ -12168,7 +13089,8 @@ test('border-style', async () => {
     .border-solid {
       --tw-border-style: solid;
       border-style: solid;
-    }"
+    }
+    "
   `)
   expect(
     await run([
@@ -12248,7 +13170,8 @@ for (let prefix of prefixes) {
     classes.push(`${prefix}-[color:var(--my-color)]/50`)
 
     expect(
-      await compileCss(
+      await run(
+        classes,
         css`
           @theme {
             --radius-none: 0px;
@@ -12259,7 +13182,6 @@ for (let prefix of prefixes) {
           }
           @tailwind utilities;
         `,
-        classes,
       ),
     ).toMatchSnapshot()
 
@@ -12285,17 +13207,18 @@ for (let prefix of prefixes) {
 
 test('border with custom default border width', async () => {
   expect(
-    await compileCss(
+    await run(
+      ['border'],
       css`
         @theme {
           --default-border-width: 2px;
         }
         @tailwind utilities;
       `,
-      ['border'],
     ),
   ).toMatchInlineSnapshot(`
-    "@layer properties {
+    "
+    @layer properties {
       @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
         *, :before, :after, ::backdrop {
           --tw-border-style: solid;
@@ -12312,21 +13235,15 @@ test('border with custom default border width', async () => {
       syntax: "*";
       inherits: false;
       initial-value: solid;
-    }"
+    }
+    "
   `)
   expect(await run(['-border', 'border/foo'])).toEqual('')
 })
 
 test('bg', async () => {
   expect(
-    await compileCss(
-      css`
-        @theme {
-          --color-red-500: #ef4444;
-          --background-color-blue-500: #3b82f6;
-        }
-        @tailwind utilities;
-      `,
+    await run(
       [
         // background-color
         'bg-red-500',
@@ -12468,9 +13385,17 @@ test('bg', async () => {
         'bg-repeat-round',
         'bg-repeat-space',
       ],
+      css`
+        @theme {
+          --color-red-500: #ef4444;
+          --background-color-blue-500: #3b82f6;
+        }
+        @tailwind utilities;
+      `,
     ),
   ).toMatchInlineSnapshot(`
-    ":root, :host {
+    "
+    :root, :host {
       --color-red-500: #ef4444;
       --background-color-blue-500: #3b82f6;
     }
@@ -13285,7 +14210,8 @@ test('bg', async () => {
 
     .bg-repeat-y {
       background-repeat: repeat-y;
-    }"
+    }
+    "
   `)
   expect(
     await run([
@@ -13383,7 +14309,8 @@ test('bg', async () => {
   ).toEqual('')
 
   expect(
-    await compileCss(
+    await run(
+      ['bg-current/half', 'bg-current/custom', '[color:red]/half'],
       css`
         @theme reference {
           --opacity-half: 0.5;
@@ -13391,10 +14318,10 @@ test('bg', async () => {
         }
         @tailwind utilities;
       `,
-      ['bg-current/half', 'bg-current/custom', '[color:red]/half'],
     ),
   ).toMatchInlineSnapshot(`
-    ".bg-current\\/custom {
+    "
+    .bg-current\\/custom {
       background-color: currentColor;
     }
 
@@ -13422,23 +14349,25 @@ test('bg', async () => {
       .\\[color\\:red\\]\\/half {
         color: color-mix(in oklab, red var(--opacity-half, .5), transparent);
       }
-    }"
+    }
+    "
   `)
 })
 
 test('bg-position', async () => {
   expect(
-    await compileCss(
+    await run(
+      ['bg-position-[120px]', 'bg-position-[120px_120px]', 'bg-position-[var(--some-var)]'],
       css`
         @theme {
           --color-red-500: #ef4444;
         }
         @tailwind utilities;
       `,
-      ['bg-position-[120px]', 'bg-position-[120px_120px]', 'bg-position-[var(--some-var)]'],
     ),
   ).toMatchInlineSnapshot(`
-    ".bg-position-\\[120px\\] {
+    "
+    .bg-position-\\[120px\\] {
       background-position: 120px;
     }
 
@@ -13448,7 +14377,8 @@ test('bg-position', async () => {
 
     .bg-position-\\[var\\(--some-var\\)\\] {
       background-position: var(--some-var);
-    }"
+    }
+    "
   `)
   expect(
     await run([
@@ -13467,17 +14397,18 @@ test('bg-position', async () => {
 
 test('bg-size', async () => {
   expect(
-    await compileCss(
+    await run(
+      ['bg-size-[120px]', 'bg-size-[120px_120px]', 'bg-size-[var(--some-var)]'],
       css`
         @theme {
           --color-red-500: #ef4444;
         }
         @tailwind utilities;
       `,
-      ['bg-size-[120px]', 'bg-size-[120px_120px]', 'bg-size-[var(--some-var)]'],
     ),
   ).toMatchInlineSnapshot(`
-    ".bg-size-\\[120px\\] {
+    "
+    .bg-size-\\[120px\\] {
       background-size: 120px;
     }
 
@@ -13487,7 +14418,8 @@ test('bg-size', async () => {
 
     .bg-size-\\[var\\(--some-var\\)\\] {
       background-size: var(--some-var);
-    }"
+    }
+    "
   `)
   expect(
     await run([
@@ -13506,13 +14438,7 @@ test('bg-size', async () => {
 
 test('from', async () => {
   expect(
-    await compileCss(
-      css`
-        @theme {
-          --color-red-500: #ef4444;
-        }
-        @tailwind utilities;
-      `,
+    await run(
       [
         // --tw-gradient-from
         'from-red-500',
@@ -13547,9 +14473,16 @@ test('from', async () => {
         'from-[length:var(--my-position)]',
         'from-[percentage:var(--my-position)]',
       ],
+      css`
+        @theme {
+          --color-red-500: #ef4444;
+        }
+        @tailwind utilities;
+      `,
     ),
   ).toMatchInlineSnapshot(`
-    "@layer properties {
+    "
+    @layer properties {
       @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
         *, :before, :after, ::backdrop {
           --tw-gradient-position: initial;
@@ -13850,7 +14783,8 @@ test('from', async () => {
       syntax: "<length-percentage>";
       inherits: false;
       initial-value: 100%;
-    }"
+    }
+    "
   `)
   expect(
     await run([
@@ -13889,13 +14823,7 @@ test('from', async () => {
 
 test('via', async () => {
   expect(
-    await compileCss(
-      css`
-        @theme {
-          --color-red-500: #ef4444;
-        }
-        @tailwind utilities;
-      `,
+    await run(
       [
         // --tw-gradient-stops
         'via-red-500',
@@ -13930,9 +14858,16 @@ test('via', async () => {
         'via-[length:var(--my-position)]',
         'via-[percentage:var(--my-position)]',
       ],
+      css`
+        @theme {
+          --color-red-500: #ef4444;
+        }
+        @tailwind utilities;
+      `,
     ),
   ).toMatchInlineSnapshot(`
-    "@layer properties {
+    "
+    @layer properties {
       @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
         *, :before, :after, ::backdrop {
           --tw-gradient-position: initial;
@@ -14253,7 +15188,8 @@ test('via', async () => {
       syntax: "<length-percentage>";
       inherits: false;
       initial-value: 100%;
-    }"
+    }
+    "
   `)
   expect(
     await run([
@@ -14290,13 +15226,7 @@ test('via', async () => {
 
 test('to', async () => {
   expect(
-    await compileCss(
-      css`
-        @theme {
-          --color-red-500: #ef4444;
-        }
-        @tailwind utilities;
-      `,
+    await run(
       [
         // --tw-gradient-to
         'to-red-500',
@@ -14331,9 +15261,16 @@ test('to', async () => {
         'to-[length:var(--my-position)]',
         'to-[percentage:var(--my-position)]',
       ],
+      css`
+        @theme {
+          --color-red-500: #ef4444;
+        }
+        @tailwind utilities;
+      `,
     ),
   ).toMatchInlineSnapshot(`
-    "@layer properties {
+    "
+    @layer properties {
       @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
         *, :before, :after, ::backdrop {
           --tw-gradient-position: initial;
@@ -14634,7 +15571,8 @@ test('to', async () => {
       syntax: "<length-percentage>";
       inherits: false;
       initial-value: 100%;
-    }"
+    }
+    "
   `)
   expect(
     await run([
@@ -14671,13 +15609,7 @@ test('to', async () => {
 
 test('mask', async () => {
   expect(
-    await compileCss(
-      css`
-        @theme {
-          --color-red-500: #ef4444;
-        }
-        @tailwind utilities;
-      `,
+    await run(
       [
         // mask-image
         'mask-none',
@@ -14735,9 +15667,16 @@ test('mask', async () => {
         'mask-repeat-round',
         'mask-repeat-space',
       ],
+      css`
+        @theme {
+          --color-red-500: #ef4444;
+        }
+        @tailwind utilities;
+      `,
     ),
   ).toMatchInlineSnapshot(`
-    ".mask-\\[image\\:var\\(--some-var\\)\\] {
+    "
+    .mask-\\[image\\:var\\(--some-var\\)\\] {
       -webkit-mask-image: var(--some-var);
       -webkit-mask-image: var(--some-var);
       mask-image: var(--some-var);
@@ -14932,7 +15871,8 @@ test('mask', async () => {
     .mask-repeat-y {
       -webkit-mask-repeat: repeat-y;
       mask-repeat: repeat-y;
-    }"
+    }
+    "
   `)
   expect(
     await run([
@@ -15022,7 +15962,8 @@ test('mask', async () => {
   ).toEqual('')
 
   expect(
-    await compileCss(
+    await run(
+      ['mask-current/half', 'mask-current/custom', '[color:red]/half'],
       css`
         @theme reference {
           --opacity-half: 0.5;
@@ -15030,10 +15971,10 @@ test('mask', async () => {
         }
         @tailwind utilities;
       `,
-      ['mask-current/half', 'mask-current/custom', '[color:red]/half'],
     ),
   ).toMatchInlineSnapshot(`
-    ".\\[color\\:red\\]\\/half {
+    "
+    .\\[color\\:red\\]\\/half {
       color: color-mix(in srgb, red .5, transparent);
     }
 
@@ -15041,23 +15982,25 @@ test('mask', async () => {
       .\\[color\\:red\\]\\/half {
         color: color-mix(in oklab, red var(--opacity-half, .5), transparent);
       }
-    }"
+    }
+    "
   `)
 })
 
 test('mask-position', async () => {
   expect(
-    await compileCss(
+    await run(
+      ['mask-position-[120px]', 'mask-position-[120px_120px]', 'mask-position-[var(--some-var)]'],
       css`
         @theme {
           --color-red-500: #ef4444;
         }
         @tailwind utilities;
       `,
-      ['mask-position-[120px]', 'mask-position-[120px_120px]', 'mask-position-[var(--some-var)]'],
     ),
   ).toMatchInlineSnapshot(`
-    ".mask-position-\\[120px\\] {
+    "
+    .mask-position-\\[120px\\] {
       -webkit-mask-position: 120px;
       mask-position: 120px;
     }
@@ -15071,7 +16014,8 @@ test('mask-position', async () => {
       -webkit-mask-position: var(--some-var);
       -webkit-mask-position: var(--some-var);
       mask-position: var(--some-var);
-    }"
+    }
+    "
   `)
   expect(
     await run([
@@ -15090,17 +16034,18 @@ test('mask-position', async () => {
 
 test('mask-size', async () => {
   expect(
-    await compileCss(
+    await run(
+      ['mask-size-[120px]', 'mask-size-[120px_120px]', 'mask-size-[var(--some-var)]'],
       css`
         @theme {
           --color-red-500: #ef4444;
         }
         @tailwind utilities;
       `,
-      ['mask-size-[120px]', 'mask-size-[120px_120px]', 'mask-size-[var(--some-var)]'],
     ),
   ).toMatchInlineSnapshot(`
-    ".mask-size-\\[120px\\] {
+    "
+    .mask-size-\\[120px\\] {
       -webkit-mask-size: 120px;
       mask-size: 120px;
     }
@@ -15114,7 +16059,8 @@ test('mask-size', async () => {
       -webkit-mask-size: var(--some-var);
       -webkit-mask-size: var(--some-var);
       mask-size: var(--some-var);
-    }"
+    }
+    "
   `)
   expect(
     await run([
@@ -15132,14 +16078,15 @@ test('mask-size', async () => {
 })
 
 test('mask-t-from', async () => {
+  let input = css`
+    @theme {
+      --spacing: 0.25rem;
+    }
+    @tailwind utilities;
+  `
+
   expect(
-    await compileCss(
-      css`
-        @theme {
-          --spacing: 0.25rem;
-        }
-        @tailwind utilities;
-      `,
+    await run(
       [
         'mask-t-from-0',
         'mask-t-from-1.5',
@@ -15152,9 +16099,11 @@ test('mask-t-from', async () => {
         'mask-t-from-(color:--my-var)',
         'mask-t-from-(length:--my-var)',
       ],
+      input,
     ),
   ).toMatchInlineSnapshot(`
-    "@layer properties {
+    "
+    @layer properties {
       @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
         *, :before, :after, ::backdrop {
           --tw-mask-linear: linear-gradient(#fff, #fff);
@@ -15206,7 +16155,7 @@ test('mask-t-from', async () => {
       mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
       --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top);
       --tw-mask-top: linear-gradient(to top, var(--tw-mask-top-from-color) var(--tw-mask-top-from-position), var(--tw-mask-top-to-color) var(--tw-mask-top-to-position));
-      --tw-mask-top-from-position: calc(var(--spacing) * 0);
+      --tw-mask-top-from-position: 0px;
       -webkit-mask-composite: source-in;
       -webkit-mask-composite: source-in;
       mask-composite: intersect;
@@ -15348,16 +16297,11 @@ test('mask-t-from', async () => {
       syntax: "*";
       inherits: false;
       initial-value: transparent;
-    }"
+    }
+    "
   `)
   expect(
-    await compileCss(
-      css`
-        @theme {
-          --spacing: 0.25rem;
-        }
-        @tailwind utilities;
-      `,
+    await run(
       [
         'mask-t-from',
         'mask-t-from-2.8175',
@@ -15388,19 +16332,21 @@ test('mask-t-from', async () => {
         '-mask-l-from-[25%]/foo',
         '-mask-l-from-[-25%]/foo',
       ],
+      input,
     ),
   ).toEqual('')
 })
 
 test('mask-t-to', async () => {
+  let input = css`
+    @theme {
+      --spacing: 0.25rem;
+    }
+    @tailwind utilities;
+  `
+
   expect(
-    await compileCss(
-      css`
-        @theme {
-          --spacing: 0.25rem;
-        }
-        @tailwind utilities;
-      `,
+    await run(
       [
         'mask-t-to-0',
         'mask-t-to-1.5',
@@ -15413,9 +16359,11 @@ test('mask-t-to', async () => {
         'mask-t-to-(color:--my-var)',
         'mask-t-to-(length:--my-var)',
       ],
+      input,
     ),
   ).toMatchInlineSnapshot(`
-    "@layer properties {
+    "
+    @layer properties {
       @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
         *, :before, :after, ::backdrop {
           --tw-mask-linear: linear-gradient(#fff, #fff);
@@ -15467,7 +16415,7 @@ test('mask-t-to', async () => {
       mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
       --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top);
       --tw-mask-top: linear-gradient(to top, var(--tw-mask-top-from-color) var(--tw-mask-top-from-position), var(--tw-mask-top-to-color) var(--tw-mask-top-to-position));
-      --tw-mask-top-to-position: calc(var(--spacing) * 0);
+      --tw-mask-top-to-position: 0px;
       -webkit-mask-composite: source-in;
       -webkit-mask-composite: source-in;
       mask-composite: intersect;
@@ -15609,16 +16557,11 @@ test('mask-t-to', async () => {
       syntax: "*";
       inherits: false;
       initial-value: transparent;
-    }"
+    }
+    "
   `)
   expect(
-    await compileCss(
-      css`
-        @theme {
-          --spacing: 0.25rem;
-        }
-        @tailwind utilities;
-      `,
+    await run(
       [
         'mask-t-to',
         'mask-t-to-2.8175',
@@ -15649,19 +16592,21 @@ test('mask-t-to', async () => {
         '-mask-l-from-[25%]/foo',
         '-mask-l-from-[-25%]/foo',
       ],
+      input,
     ),
   ).toEqual('')
 })
 
 test('mask-r-from', async () => {
+  let input = css`
+    @theme {
+      --spacing: 0.25rem;
+    }
+    @tailwind utilities;
+  `
+
   expect(
-    await compileCss(
-      css`
-        @theme {
-          --spacing: 0.25rem;
-        }
-        @tailwind utilities;
-      `,
+    await run(
       [
         'mask-r-from-0',
         'mask-r-from-1.5',
@@ -15675,9 +16620,11 @@ test('mask-r-from', async () => {
         'mask-r-from-(color:--my-var)',
         'mask-r-from-(length:--my-var)',
       ],
+      input,
     ),
   ).toMatchInlineSnapshot(`
-    "@layer properties {
+    "
+    @layer properties {
       @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
         *, :before, :after, ::backdrop {
           --tw-mask-linear: linear-gradient(#fff, #fff);
@@ -15729,7 +16676,7 @@ test('mask-r-from', async () => {
       mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
       --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top);
       --tw-mask-right: linear-gradient(to right, var(--tw-mask-right-from-color) var(--tw-mask-right-from-position), var(--tw-mask-right-to-color) var(--tw-mask-right-to-position));
-      --tw-mask-right-from-position: calc(var(--spacing) * 0);
+      --tw-mask-right-from-position: 0px;
       -webkit-mask-composite: source-in;
       -webkit-mask-composite: source-in;
       mask-composite: intersect;
@@ -15871,16 +16818,11 @@ test('mask-r-from', async () => {
       syntax: "*";
       inherits: false;
       initial-value: transparent;
-    }"
+    }
+    "
   `)
   expect(
-    await compileCss(
-      css`
-        @theme {
-          --spacing: 0.25rem;
-        }
-        @tailwind utilities;
-      `,
+    await run(
       [
         'mask-r-from',
         'mask-r-from-2.8175',
@@ -15911,19 +16853,21 @@ test('mask-r-from', async () => {
         '-mask-r-from-[25%]/foo',
         '-mask-r-from-[-25%]/foo',
       ],
+      input,
     ),
   ).toEqual('')
 })
 
 test('mask-r-to', async () => {
+  let input = css`
+    @theme {
+      --spacing: 0.25rem;
+    }
+    @tailwind utilities;
+  `
+
   expect(
-    await compileCss(
-      css`
-        @theme {
-          --spacing: 0.25rem;
-        }
-        @tailwind utilities;
-      `,
+    await run(
       [
         'mask-r-to-0',
         'mask-r-to-1.5',
@@ -15937,9 +16881,11 @@ test('mask-r-to', async () => {
         'mask-r-to-(color:--my-var)',
         'mask-r-to-(length:--my-var)',
       ],
+      input,
     ),
   ).toMatchInlineSnapshot(`
-    "@layer properties {
+    "
+    @layer properties {
       @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
         *, :before, :after, ::backdrop {
           --tw-mask-linear: linear-gradient(#fff, #fff);
@@ -15991,7 +16937,7 @@ test('mask-r-to', async () => {
       mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
       --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top);
       --tw-mask-right: linear-gradient(to right, var(--tw-mask-right-from-color) var(--tw-mask-right-from-position), var(--tw-mask-right-to-color) var(--tw-mask-right-to-position));
-      --tw-mask-right-to-position: calc(var(--spacing) * 0);
+      --tw-mask-right-to-position: 0px;
       -webkit-mask-composite: source-in;
       -webkit-mask-composite: source-in;
       mask-composite: intersect;
@@ -16133,16 +17079,11 @@ test('mask-r-to', async () => {
       syntax: "*";
       inherits: false;
       initial-value: transparent;
-    }"
+    }
+    "
   `)
   expect(
-    await compileCss(
-      css`
-        @theme {
-          --spacing: 0.25rem;
-        }
-        @tailwind utilities;
-      `,
+    await run(
       [
         'mask-r-to',
         'mask-r-to-2.8175',
@@ -16173,19 +17114,21 @@ test('mask-r-to', async () => {
         '-mask-r-to-[25%]/foo',
         '-mask-r-to-[-25%]/foo',
       ],
+      input,
     ),
   ).toEqual('')
 })
 
 test('mask-b-from', async () => {
+  let input = css`
+    @theme {
+      --spacing: 0.25rem;
+    }
+    @tailwind utilities;
+  `
+
   expect(
-    await compileCss(
-      css`
-        @theme {
-          --spacing: 0.25rem;
-        }
-        @tailwind utilities;
-      `,
+    await run(
       [
         'mask-b-from-0',
         'mask-b-from-1.5',
@@ -16199,9 +17142,11 @@ test('mask-b-from', async () => {
         'mask-b-from-(color:--my-var)',
         'mask-b-from-(length:--my-var)',
       ],
+      input,
     ),
   ).toMatchInlineSnapshot(`
-    "@layer properties {
+    "
+    @layer properties {
       @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
         *, :before, :after, ::backdrop {
           --tw-mask-linear: linear-gradient(#fff, #fff);
@@ -16253,7 +17198,7 @@ test('mask-b-from', async () => {
       mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
       --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top);
       --tw-mask-bottom: linear-gradient(to bottom, var(--tw-mask-bottom-from-color) var(--tw-mask-bottom-from-position), var(--tw-mask-bottom-to-color) var(--tw-mask-bottom-to-position));
-      --tw-mask-bottom-from-position: calc(var(--spacing) * 0);
+      --tw-mask-bottom-from-position: 0px;
       -webkit-mask-composite: source-in;
       -webkit-mask-composite: source-in;
       mask-composite: intersect;
@@ -16395,16 +17340,11 @@ test('mask-b-from', async () => {
       syntax: "*";
       inherits: false;
       initial-value: transparent;
-    }"
+    }
+    "
   `)
   expect(
-    await compileCss(
-      css`
-        @theme {
-          --spacing: 0.25rem;
-        }
-        @tailwind utilities;
-      `,
+    await run(
       [
         'mask-b-from',
         'mask-b-from-2.8175',
@@ -16435,19 +17375,21 @@ test('mask-b-from', async () => {
         '-mask-b-from-[25%]/foo',
         '-mask-b-from-[-25%]/foo',
       ],
+      input,
     ),
   ).toEqual('')
 })
 
 test('mask-b-to', async () => {
+  let input = css`
+    @theme {
+      --spacing: 0.25rem;
+    }
+    @tailwind utilities;
+  `
+
   expect(
-    await compileCss(
-      css`
-        @theme {
-          --spacing: 0.25rem;
-        }
-        @tailwind utilities;
-      `,
+    await run(
       [
         'mask-b-to-0',
         'mask-b-to-1.5',
@@ -16461,9 +17403,11 @@ test('mask-b-to', async () => {
         'mask-b-to-(color:--my-var)',
         'mask-b-to-(length:--my-var)',
       ],
+      input,
     ),
   ).toMatchInlineSnapshot(`
-    "@layer properties {
+    "
+    @layer properties {
       @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
         *, :before, :after, ::backdrop {
           --tw-mask-linear: linear-gradient(#fff, #fff);
@@ -16515,7 +17459,7 @@ test('mask-b-to', async () => {
       mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
       --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top);
       --tw-mask-bottom: linear-gradient(to bottom, var(--tw-mask-bottom-from-color) var(--tw-mask-bottom-from-position), var(--tw-mask-bottom-to-color) var(--tw-mask-bottom-to-position));
-      --tw-mask-bottom-to-position: calc(var(--spacing) * 0);
+      --tw-mask-bottom-to-position: 0px;
       -webkit-mask-composite: source-in;
       -webkit-mask-composite: source-in;
       mask-composite: intersect;
@@ -16657,16 +17601,11 @@ test('mask-b-to', async () => {
       syntax: "*";
       inherits: false;
       initial-value: transparent;
-    }"
+    }
+    "
   `)
   expect(
-    await compileCss(
-      css`
-        @theme {
-          --spacing: 0.25rem;
-        }
-        @tailwind utilities;
-      `,
+    await run(
       [
         'mask-b-to',
         'mask-b-to-2.8175',
@@ -16697,19 +17636,21 @@ test('mask-b-to', async () => {
         '-mask-b-to-[25%]/foo',
         '-mask-b-to-[-25%]/foo',
       ],
+      input,
     ),
   ).toEqual('')
 })
 
 test('mask-l-from', async () => {
+  let input = css`
+    @theme {
+      --spacing: 0.25rem;
+    }
+    @tailwind utilities;
+  `
+
   expect(
-    await compileCss(
-      css`
-        @theme {
-          --spacing: 0.25rem;
-        }
-        @tailwind utilities;
-      `,
+    await run(
       [
         'mask-l-from-0',
         'mask-l-from-1.5',
@@ -16723,9 +17664,11 @@ test('mask-l-from', async () => {
         'mask-l-from-(color:--my-var)',
         'mask-l-from-(length:--my-var)',
       ],
+      input,
     ),
   ).toMatchInlineSnapshot(`
-    "@layer properties {
+    "
+    @layer properties {
       @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
         *, :before, :after, ::backdrop {
           --tw-mask-linear: linear-gradient(#fff, #fff);
@@ -16777,7 +17720,7 @@ test('mask-l-from', async () => {
       mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
       --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top);
       --tw-mask-left: linear-gradient(to left, var(--tw-mask-left-from-color) var(--tw-mask-left-from-position), var(--tw-mask-left-to-color) var(--tw-mask-left-to-position));
-      --tw-mask-left-from-position: calc(var(--spacing) * 0);
+      --tw-mask-left-from-position: 0px;
       -webkit-mask-composite: source-in;
       -webkit-mask-composite: source-in;
       mask-composite: intersect;
@@ -16919,16 +17862,11 @@ test('mask-l-from', async () => {
       syntax: "*";
       inherits: false;
       initial-value: transparent;
-    }"
+    }
+    "
   `)
   expect(
-    await compileCss(
-      css`
-        @theme {
-          --spacing: 0.25rem;
-        }
-        @tailwind utilities;
-      `,
+    await run(
       [
         'mask-l-from',
         'mask-l-from-2.8175',
@@ -16959,19 +17897,21 @@ test('mask-l-from', async () => {
         '-mask-l-from-[25%]/foo',
         '-mask-l-from-[-25%]/foo',
       ],
+      input,
     ),
   ).toEqual('')
 })
 
 test('mask-l-to', async () => {
+  let input = css`
+    @theme {
+      --spacing: 0.25rem;
+    }
+    @tailwind utilities;
+  `
+
   expect(
-    await compileCss(
-      css`
-        @theme {
-          --spacing: 0.25rem;
-        }
-        @tailwind utilities;
-      `,
+    await run(
       [
         'mask-l-to-0',
         'mask-l-to-1.5',
@@ -16985,9 +17925,11 @@ test('mask-l-to', async () => {
         'mask-l-to-(color:--my-var)',
         'mask-l-to-(length:--my-var)',
       ],
+      input,
     ),
   ).toMatchInlineSnapshot(`
-    "@layer properties {
+    "
+    @layer properties {
       @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
         *, :before, :after, ::backdrop {
           --tw-mask-linear: linear-gradient(#fff, #fff);
@@ -17039,7 +17981,7 @@ test('mask-l-to', async () => {
       mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
       --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top);
       --tw-mask-left: linear-gradient(to left, var(--tw-mask-left-from-color) var(--tw-mask-left-from-position), var(--tw-mask-left-to-color) var(--tw-mask-left-to-position));
-      --tw-mask-left-to-position: calc(var(--spacing) * 0);
+      --tw-mask-left-to-position: 0px;
       -webkit-mask-composite: source-in;
       -webkit-mask-composite: source-in;
       mask-composite: intersect;
@@ -17181,16 +18123,11 @@ test('mask-l-to', async () => {
       syntax: "*";
       inherits: false;
       initial-value: transparent;
-    }"
+    }
+    "
   `)
   expect(
-    await compileCss(
-      css`
-        @theme {
-          --spacing: 0.25rem;
-        }
-        @tailwind utilities;
-      `,
+    await run(
       [
         'mask-l-to',
         'mask-l-to-2.8175',
@@ -17221,19 +18158,21 @@ test('mask-l-to', async () => {
         '-mask-l-to-[25%]/foo',
         '-mask-l-to-[-25%]/foo',
       ],
+      input,
     ),
   ).toEqual('')
 })
 
 test('mask-x-from', async () => {
+  let input = css`
+    @theme {
+      --spacing: 0.25rem;
+    }
+    @tailwind utilities;
+  `
+
   expect(
-    await compileCss(
-      css`
-        @theme {
-          --spacing: 0.25rem;
-        }
-        @tailwind utilities;
-      `,
+    await run(
       [
         'mask-x-from-0',
         'mask-x-from-1.5',
@@ -17247,9 +18186,11 @@ test('mask-x-from', async () => {
         'mask-x-from-(color:--my-var)',
         'mask-x-from-(length:--my-var)',
       ],
+      input,
     ),
   ).toMatchInlineSnapshot(`
-    "@layer properties {
+    "
+    @layer properties {
       @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
         *, :before, :after, ::backdrop {
           --tw-mask-linear: linear-gradient(#fff, #fff);
@@ -17309,9 +18250,9 @@ test('mask-x-from', async () => {
       mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
       --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top);
       --tw-mask-right: linear-gradient(to right, var(--tw-mask-right-from-color) var(--tw-mask-right-from-position), var(--tw-mask-right-to-color) var(--tw-mask-right-to-position));
-      --tw-mask-right-from-position: calc(var(--spacing) * 0);
+      --tw-mask-right-from-position: 0px;
       --tw-mask-left: linear-gradient(to left, var(--tw-mask-left-from-color) var(--tw-mask-left-from-position), var(--tw-mask-left-to-color) var(--tw-mask-left-to-position));
-      --tw-mask-left-from-position: calc(var(--spacing) * 0);
+      --tw-mask-left-from-position: 0px;
       -webkit-mask-composite: source-in;
       -webkit-mask-composite: source-in;
       mask-composite: intersect;
@@ -17489,16 +18430,11 @@ test('mask-x-from', async () => {
       syntax: "*";
       inherits: false;
       initial-value: transparent;
-    }"
+    }
+    "
   `)
   expect(
-    await compileCss(
-      css`
-        @theme {
-          --spacing: 0.25rem;
-        }
-        @tailwind utilities;
-      `,
+    await run(
       [
         'mask-x-from',
         'mask-x-from-2.8175',
@@ -17529,19 +18465,21 @@ test('mask-x-from', async () => {
         '-mask-x-from-[25%]/foo',
         '-mask-x-from-[-25%]/foo',
       ],
+      input,
     ),
   ).toEqual('')
 })
 
 test('mask-x-to', async () => {
+  let input = css`
+    @theme {
+      --spacing: 0.25rem;
+    }
+    @tailwind utilities;
+  `
+
   expect(
-    await compileCss(
-      css`
-        @theme {
-          --spacing: 0.25rem;
-        }
-        @tailwind utilities;
-      `,
+    await run(
       [
         'mask-x-to-0',
         'mask-x-to-1.5',
@@ -17555,9 +18493,11 @@ test('mask-x-to', async () => {
         'mask-x-to-(color:--my-var)',
         'mask-x-to-(length:--my-var)',
       ],
+      input,
     ),
   ).toMatchInlineSnapshot(`
-    "@layer properties {
+    "
+    @layer properties {
       @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
         *, :before, :after, ::backdrop {
           --tw-mask-linear: linear-gradient(#fff, #fff);
@@ -17617,9 +18557,9 @@ test('mask-x-to', async () => {
       mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
       --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top);
       --tw-mask-right: linear-gradient(to right, var(--tw-mask-right-from-color) var(--tw-mask-right-from-position), var(--tw-mask-right-to-color) var(--tw-mask-right-to-position));
-      --tw-mask-right-to-position: calc(var(--spacing) * 0);
+      --tw-mask-right-to-position: 0px;
       --tw-mask-left: linear-gradient(to left, var(--tw-mask-left-from-color) var(--tw-mask-left-from-position), var(--tw-mask-left-to-color) var(--tw-mask-left-to-position));
-      --tw-mask-left-to-position: calc(var(--spacing) * 0);
+      --tw-mask-left-to-position: 0px;
       -webkit-mask-composite: source-in;
       -webkit-mask-composite: source-in;
       mask-composite: intersect;
@@ -17797,16 +18737,11 @@ test('mask-x-to', async () => {
       syntax: "*";
       inherits: false;
       initial-value: transparent;
-    }"
+    }
+    "
   `)
   expect(
-    await compileCss(
-      css`
-        @theme {
-          --spacing: 0.25rem;
-        }
-        @tailwind utilities;
-      `,
+    await run(
       [
         'mask-x-to',
         'mask-x-to-2.8175',
@@ -17837,19 +18772,21 @@ test('mask-x-to', async () => {
         '-mask-x-to-[25%]/foo',
         '-mask-x-to-[-25%]/foo',
       ],
+      input,
     ),
   ).toEqual('')
 })
 
 test('mask-y-from', async () => {
+  let input = css`
+    @theme {
+      --spacing: 0.25rem;
+    }
+    @tailwind utilities;
+  `
+
   expect(
-    await compileCss(
-      css`
-        @theme {
-          --spacing: 0.25rem;
-        }
-        @tailwind utilities;
-      `,
+    await run(
       [
         'mask-y-from-0',
         'mask-y-from-1.5',
@@ -17863,9 +18800,11 @@ test('mask-y-from', async () => {
         'mask-y-from-(color:--my-var)',
         'mask-y-from-(length:--my-var)',
       ],
+      input,
     ),
   ).toMatchInlineSnapshot(`
-    "@layer properties {
+    "
+    @layer properties {
       @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
         *, :before, :after, ::backdrop {
           --tw-mask-linear: linear-gradient(#fff, #fff);
@@ -17925,9 +18864,9 @@ test('mask-y-from', async () => {
       mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
       --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top);
       --tw-mask-top: linear-gradient(to top, var(--tw-mask-top-from-color) var(--tw-mask-top-from-position), var(--tw-mask-top-to-color) var(--tw-mask-top-to-position));
-      --tw-mask-top-from-position: calc(var(--spacing) * 0);
+      --tw-mask-top-from-position: 0px;
       --tw-mask-bottom: linear-gradient(to bottom, var(--tw-mask-bottom-from-color) var(--tw-mask-bottom-from-position), var(--tw-mask-bottom-to-color) var(--tw-mask-bottom-to-position));
-      --tw-mask-bottom-from-position: calc(var(--spacing) * 0);
+      --tw-mask-bottom-from-position: 0px;
       -webkit-mask-composite: source-in;
       -webkit-mask-composite: source-in;
       mask-composite: intersect;
@@ -18105,16 +19044,11 @@ test('mask-y-from', async () => {
       syntax: "*";
       inherits: false;
       initial-value: transparent;
-    }"
+    }
+    "
   `)
   expect(
-    await compileCss(
-      css`
-        @theme {
-          --spacing: 0.25rem;
-        }
-        @tailwind utilities;
-      `,
+    await run(
       [
         'mask-y-from',
         'mask-y-from-2.8175',
@@ -18145,19 +19079,21 @@ test('mask-y-from', async () => {
         '-mask-y-from-[25%]/foo',
         '-mask-y-from-[-25%]/foo',
       ],
+      input,
     ),
   ).toEqual('')
 })
 
 test('mask-y-to', async () => {
+  let input = css`
+    @theme {
+      --spacing: 0.25rem;
+    }
+    @tailwind utilities;
+  `
+
   expect(
-    await compileCss(
-      css`
-        @theme {
-          --spacing: 0.25rem;
-        }
-        @tailwind utilities;
-      `,
+    await run(
       [
         'mask-y-to-0',
         'mask-y-to-1.5',
@@ -18171,9 +19107,11 @@ test('mask-y-to', async () => {
         'mask-y-to-(color:--my-var)',
         'mask-y-to-(length:--my-var)',
       ],
+      input,
     ),
   ).toMatchInlineSnapshot(`
-    "@layer properties {
+    "
+    @layer properties {
       @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
         *, :before, :after, ::backdrop {
           --tw-mask-linear: linear-gradient(#fff, #fff);
@@ -18233,9 +19171,9 @@ test('mask-y-to', async () => {
       mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
       --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top);
       --tw-mask-top: linear-gradient(to top, var(--tw-mask-top-from-color) var(--tw-mask-top-from-position), var(--tw-mask-top-to-color) var(--tw-mask-top-to-position));
-      --tw-mask-top-to-position: calc(var(--spacing) * 0);
+      --tw-mask-top-to-position: 0px;
       --tw-mask-bottom: linear-gradient(to bottom, var(--tw-mask-bottom-from-color) var(--tw-mask-bottom-from-position), var(--tw-mask-bottom-to-color) var(--tw-mask-bottom-to-position));
-      --tw-mask-bottom-to-position: calc(var(--spacing) * 0);
+      --tw-mask-bottom-to-position: 0px;
       -webkit-mask-composite: source-in;
       -webkit-mask-composite: source-in;
       mask-composite: intersect;
@@ -18413,16 +19351,11 @@ test('mask-y-to', async () => {
       syntax: "*";
       inherits: false;
       initial-value: transparent;
-    }"
+    }
+    "
   `)
   expect(
-    await compileCss(
-      css`
-        @theme {
-          --spacing: 0.25rem;
-        }
-        @tailwind utilities;
-      `,
+    await run(
       [
         'mask-y-to',
         'mask-y-to-2.8175',
@@ -18453,20 +19386,24 @@ test('mask-y-to', async () => {
         '-mask-y-to-[25%]/foo',
         '-mask-y-to-[-25%]/foo',
       ],
+      input,
     ),
   ).toEqual('')
 })
 
 test('mask-linear', async () => {
   expect(
-    await compileCss(
-      css`
-        @tailwind utilities;
-      `,
-      ['mask-linear-45', 'mask-linear-[3rad]', '-mask-linear-45'],
-    ),
+    await run([
+      'mask-linear-0',
+      'mask-linear-1',
+      '-mask-linear-1',
+      'mask-linear-45',
+      'mask-linear-[3rad]',
+      '-mask-linear-45',
+    ]),
   ).toMatchInlineSnapshot(`
-    "@layer properties {
+    "
+    @layer properties {
       @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
         *, :before, :after, ::backdrop {
           --tw-mask-linear: linear-gradient(#fff, #fff);
@@ -18481,6 +19418,17 @@ test('mask-linear', async () => {
       }
     }
 
+    .-mask-linear-1 {
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      --tw-mask-linear: linear-gradient(var(--tw-mask-linear-stops, var(--tw-mask-linear-position)));
+      --tw-mask-linear-position: -1deg;
+      -webkit-mask-composite: source-in;
+      -webkit-mask-composite: source-in;
+      mask-composite: intersect;
+    }
+
     .-mask-linear-45 {
       -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
       -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
@@ -18492,6 +19440,28 @@ test('mask-linear', async () => {
       mask-composite: intersect;
     }
 
+    .mask-linear-0 {
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      --tw-mask-linear: linear-gradient(var(--tw-mask-linear-stops, var(--tw-mask-linear-position)));
+      --tw-mask-linear-position: 0deg;
+      -webkit-mask-composite: source-in;
+      -webkit-mask-composite: source-in;
+      mask-composite: intersect;
+    }
+
+    .mask-linear-1 {
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      --tw-mask-linear: linear-gradient(var(--tw-mask-linear-stops, var(--tw-mask-linear-position)));
+      --tw-mask-linear-position: 1deg;
+      -webkit-mask-composite: source-in;
+      -webkit-mask-composite: source-in;
+      mask-composite: intersect;
+    }
+
     .mask-linear-45 {
       -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
       -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
@@ -18560,7 +19530,8 @@ test('mask-linear', async () => {
       syntax: "*";
       inherits: false;
       initial-value: transparent;
-    }"
+    }
+    "
   `)
   expect(
     await run([
@@ -18582,14 +19553,15 @@ test('mask-linear', async () => {
 })
 
 test('mask-linear-from', async () => {
+  let input = css`
+    @theme {
+      --spacing: 0.25rem;
+    }
+    @tailwind utilities;
+  `
+
   expect(
-    await compileCss(
-      css`
-        @theme {
-          --spacing: 0.25rem;
-        }
-        @tailwind utilities;
-      `,
+    await run(
       [
         'mask-linear-from-0',
         'mask-linear-from-1.5',
@@ -18603,9 +19575,11 @@ test('mask-linear-from', async () => {
         'mask-linear-from-(color:--my-var)',
         'mask-linear-from-(length:--my-var)',
       ],
+      input,
     ),
   ).toMatchInlineSnapshot(`
-    "@layer properties {
+    "
+    @layer properties {
       @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
         *, :before, :after, ::backdrop {
           --tw-mask-linear: linear-gradient(#fff, #fff);
@@ -18654,7 +19628,7 @@ test('mask-linear-from', async () => {
       mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
       --tw-mask-linear-stops: var(--tw-mask-linear-position), var(--tw-mask-linear-from-color) var(--tw-mask-linear-from-position), var(--tw-mask-linear-to-color) var(--tw-mask-linear-to-position);
       --tw-mask-linear: linear-gradient(var(--tw-mask-linear-stops));
-      --tw-mask-linear-from-position: calc(var(--spacing) * 0);
+      --tw-mask-linear-from-position: 0px;
       -webkit-mask-composite: source-in;
       -webkit-mask-composite: source-in;
       mask-composite: intersect;
@@ -18778,16 +19752,11 @@ test('mask-linear-from', async () => {
       syntax: "*";
       inherits: false;
       initial-value: transparent;
-    }"
+    }
+    "
   `)
   expect(
-    await compileCss(
-      css`
-        @theme {
-          --spacing: 0.25rem;
-        }
-        @tailwind utilities;
-      `,
+    await run(
       [
         'mask-linear-from',
         'mask-linear-from-2.8175',
@@ -18818,19 +19787,21 @@ test('mask-linear-from', async () => {
         '-mask-linear-from-[25%]/foo',
         '-mask-linear-from-[-25%]/foo',
       ],
+      input,
     ),
   ).toEqual('')
 })
 
 test('mask-linear-to', async () => {
+  let input = css`
+    @theme {
+      --spacing: 0.25rem;
+    }
+    @tailwind utilities;
+  `
+
   expect(
-    await compileCss(
-      css`
-        @theme {
-          --spacing: 0.25rem;
-        }
-        @tailwind utilities;
-      `,
+    await run(
       [
         'mask-linear-to-0',
         'mask-linear-to-1.5',
@@ -18844,9 +19815,11 @@ test('mask-linear-to', async () => {
         'mask-linear-to-(color:--my-var)',
         'mask-linear-to-(length:--my-var)',
       ],
+      input,
     ),
   ).toMatchInlineSnapshot(`
-    "@layer properties {
+    "
+    @layer properties {
       @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
         *, :before, :after, ::backdrop {
           --tw-mask-linear: linear-gradient(#fff, #fff);
@@ -18895,7 +19868,7 @@ test('mask-linear-to', async () => {
       mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
       --tw-mask-linear-stops: var(--tw-mask-linear-position), var(--tw-mask-linear-from-color) var(--tw-mask-linear-from-position), var(--tw-mask-linear-to-color) var(--tw-mask-linear-to-position);
       --tw-mask-linear: linear-gradient(var(--tw-mask-linear-stops));
-      --tw-mask-linear-to-position: calc(var(--spacing) * 0);
+      --tw-mask-linear-to-position: 0px;
       -webkit-mask-composite: source-in;
       -webkit-mask-composite: source-in;
       mask-composite: intersect;
@@ -19019,16 +19992,11 @@ test('mask-linear-to', async () => {
       syntax: "*";
       inherits: false;
       initial-value: transparent;
-    }"
+    }
+    "
   `)
   expect(
-    await compileCss(
-      css`
-        @theme {
-          --spacing: 0.25rem;
-        }
-        @tailwind utilities;
-      `,
+    await run(
       [
         'mask-linear-to',
         'mask-linear-to-2.8175',
@@ -19059,28 +20027,25 @@ test('mask-linear-to', async () => {
         '-mask-linear-to-[25%]/foo',
         '-mask-linear-to-[-25%]/foo',
       ],
+      input,
     ),
   ).toEqual('')
 })
 
 test('mask-radial', async () => {
   expect(
-    await compileCss(
-      css`
-        @tailwind utilities;
-      `,
-      [
-        'mask-circle',
-        'mask-ellipse',
-        'mask-radial-closest-side',
-        'mask-radial-farthest-side',
-        'mask-radial-closest-corner',
-        'mask-radial-farthest-corner',
-        'mask-radial-[25%_25%]',
-      ],
-    ),
+    await run([
+      'mask-circle',
+      'mask-ellipse',
+      'mask-radial-closest-side',
+      'mask-radial-farthest-side',
+      'mask-radial-closest-corner',
+      'mask-radial-farthest-corner',
+      'mask-radial-[25%_25%]',
+    ]),
   ).toMatchInlineSnapshot(`
-    "@layer properties {
+    "
+    @layer properties {
       @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
         *, :before, :after, ::backdrop {
           --tw-mask-linear: linear-gradient(#fff, #fff);
@@ -19190,7 +20155,8 @@ test('mask-radial', async () => {
       syntax: "*";
       inherits: false;
       initial-value: center;
-    }"
+    }
+    "
   `)
   expect(
     await run([
@@ -19214,13 +20180,7 @@ test('mask-radial', async () => {
 
 test('mask-radial-at', async () => {
   expect(
-    await compileCss(
-      css`
-        @theme {
-          --spacing: 0.25rem;
-        }
-        @tailwind utilities;
-      `,
+    await run(
       [
         'mask-radial-at-top',
         'mask-radial-at-top-left',
@@ -19232,9 +20192,16 @@ test('mask-radial-at', async () => {
         'mask-radial-at-right',
         'mask-radial-at-[25%]',
       ],
+      css`
+        @theme {
+          --spacing: 0.25rem;
+        }
+        @tailwind utilities;
+      `,
     ),
   ).toMatchInlineSnapshot(`
-    ".mask-radial-at-\\[25\\%\\] {
+    "
+    .mask-radial-at-\\[25\\%\\] {
       --tw-mask-radial-position: 25%;
     }
 
@@ -19268,7 +20235,8 @@ test('mask-radial-at', async () => {
 
     .mask-radial-at-top-right {
       --tw-mask-radial-position: top right;
-    }"
+    }
+    "
   `)
   expect(
     await run([
@@ -19312,14 +20280,15 @@ test('mask-radial-at', async () => {
 })
 
 test('mask-radial-from', async () => {
+  let input = css`
+    @theme {
+      --spacing: 0.25rem;
+    }
+    @tailwind utilities;
+  `
+
   expect(
-    await compileCss(
-      css`
-        @theme {
-          --spacing: 0.25rem;
-        }
-        @tailwind utilities;
-      `,
+    await run(
       [
         'mask-radial-from-0',
         'mask-radial-from-1.5',
@@ -19333,9 +20302,11 @@ test('mask-radial-from', async () => {
         'mask-radial-from-(color:--my-var)',
         'mask-radial-from-(length:--my-var)',
       ],
+      input,
     ),
   ).toMatchInlineSnapshot(`
-    "@layer properties {
+    "
+    @layer properties {
       @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
         *, :before, :after, ::backdrop {
           --tw-mask-linear: linear-gradient(#fff, #fff);
@@ -19386,7 +20357,7 @@ test('mask-radial-from', async () => {
       mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
       --tw-mask-radial-stops: var(--tw-mask-radial-shape) var(--tw-mask-radial-size) at var(--tw-mask-radial-position), var(--tw-mask-radial-from-color) var(--tw-mask-radial-from-position), var(--tw-mask-radial-to-color) var(--tw-mask-radial-to-position);
       --tw-mask-radial: radial-gradient(var(--tw-mask-radial-stops));
-      --tw-mask-radial-from-position: calc(var(--spacing) * 0);
+      --tw-mask-radial-from-position: 0px;
       -webkit-mask-composite: source-in;
       -webkit-mask-composite: source-in;
       mask-composite: intersect;
@@ -19522,16 +20493,11 @@ test('mask-radial-from', async () => {
       syntax: "*";
       inherits: false;
       initial-value: center;
-    }"
+    }
+    "
   `)
   expect(
-    await compileCss(
-      css`
-        @theme {
-          --spacing: 0.25rem;
-        }
-        @tailwind utilities;
-      `,
+    await run(
       [
         'mask-radial-from',
         'mask-radial-from-2.8175',
@@ -19562,19 +20528,21 @@ test('mask-radial-from', async () => {
         '-mask-radial-from-[25%]/foo',
         '-mask-radial-from-[-25%]/foo',
       ],
+      input,
     ),
   ).toEqual('')
 })
 
 test('mask-radial-to', async () => {
+  let input = css`
+    @theme {
+      --spacing: 0.25rem;
+    }
+    @tailwind utilities;
+  `
+
   expect(
-    await compileCss(
-      css`
-        @theme {
-          --spacing: 0.25rem;
-        }
-        @tailwind utilities;
-      `,
+    await run(
       [
         'mask-radial-to-0',
         'mask-radial-to-1.5',
@@ -19588,9 +20556,11 @@ test('mask-radial-to', async () => {
         'mask-radial-to-(color:--my-var)',
         'mask-radial-to-(length:--my-var)',
       ],
+      input,
     ),
   ).toMatchInlineSnapshot(`
-    "@layer properties {
+    "
+    @layer properties {
       @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
         *, :before, :after, ::backdrop {
           --tw-mask-linear: linear-gradient(#fff, #fff);
@@ -19641,7 +20611,7 @@ test('mask-radial-to', async () => {
       mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
       --tw-mask-radial-stops: var(--tw-mask-radial-shape) var(--tw-mask-radial-size) at var(--tw-mask-radial-position), var(--tw-mask-radial-from-color) var(--tw-mask-radial-from-position), var(--tw-mask-radial-to-color) var(--tw-mask-radial-to-position);
       --tw-mask-radial: radial-gradient(var(--tw-mask-radial-stops));
-      --tw-mask-radial-to-position: calc(var(--spacing) * 0);
+      --tw-mask-radial-to-position: 0px;
       -webkit-mask-composite: source-in;
       -webkit-mask-composite: source-in;
       mask-composite: intersect;
@@ -19777,16 +20747,11 @@ test('mask-radial-to', async () => {
       syntax: "*";
       inherits: false;
       initial-value: center;
-    }"
+    }
+    "
   `)
   expect(
-    await compileCss(
-      css`
-        @theme {
-          --spacing: 0.25rem;
-        }
-        @tailwind utilities;
-      `,
+    await run(
       [
         'mask-radial-to',
         'mask-radial-to-2.8175',
@@ -19817,20 +20782,24 @@ test('mask-radial-to', async () => {
         '-mask-radial-to-[25%]/foo',
         '-mask-radial-to-[-25%]/foo',
       ],
+      input,
     ),
   ).toEqual('')
 })
 
 test('mask-conic', async () => {
   expect(
-    await compileCss(
-      css`
-        @tailwind utilities;
-      `,
-      ['mask-conic-45', 'mask-conic-[3rad]', '-mask-conic-45'],
-    ),
+    await run([
+      'mask-conic-0',
+      'mask-conic-1',
+      '-mask-conic-1',
+      'mask-conic-45',
+      'mask-conic-[3rad]',
+      '-mask-conic-45',
+    ]),
   ).toMatchInlineSnapshot(`
-    "@layer properties {
+    "
+    @layer properties {
       @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
         *, :before, :after, ::backdrop {
           --tw-mask-linear: linear-gradient(#fff, #fff);
@@ -19845,6 +20814,17 @@ test('mask-conic', async () => {
       }
     }
 
+    .-mask-conic-1 {
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      --tw-mask-conic: conic-gradient(var(--tw-mask-conic-stops, var(--tw-mask-conic-position)));
+      --tw-mask-conic-position: -1deg;
+      -webkit-mask-composite: source-in;
+      -webkit-mask-composite: source-in;
+      mask-composite: intersect;
+    }
+
     .-mask-conic-45 {
       -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
       -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
@@ -19856,6 +20836,28 @@ test('mask-conic', async () => {
       mask-composite: intersect;
     }
 
+    .mask-conic-0 {
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      --tw-mask-conic: conic-gradient(var(--tw-mask-conic-stops, var(--tw-mask-conic-position)));
+      --tw-mask-conic-position: 0deg;
+      -webkit-mask-composite: source-in;
+      -webkit-mask-composite: source-in;
+      mask-composite: intersect;
+    }
+
+    .mask-conic-1 {
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      --tw-mask-conic: conic-gradient(var(--tw-mask-conic-stops, var(--tw-mask-conic-position)));
+      --tw-mask-conic-position: 1deg;
+      -webkit-mask-composite: source-in;
+      -webkit-mask-composite: source-in;
+      mask-composite: intersect;
+    }
+
     .mask-conic-45 {
       -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
       -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
@@ -19924,7 +20926,8 @@ test('mask-conic', async () => {
       syntax: "*";
       inherits: false;
       initial-value: transparent;
-    }"
+    }
+    "
   `)
   expect(
     await run([
@@ -19946,14 +20949,15 @@ test('mask-conic', async () => {
 })
 
 test('mask-conic-from', async () => {
+  let input = css`
+    @theme {
+      --spacing: 0.25rem;
+    }
+    @tailwind utilities;
+  `
+
   expect(
-    await compileCss(
-      css`
-        @theme {
-          --spacing: 0.25rem;
-        }
-        @tailwind utilities;
-      `,
+    await run(
       [
         'mask-conic-from-0',
         'mask-conic-from-1.5',
@@ -19967,9 +20971,11 @@ test('mask-conic-from', async () => {
         'mask-conic-from-(color:--my-var)',
         'mask-conic-from-(length:--my-var)',
       ],
+      input,
     ),
   ).toMatchInlineSnapshot(`
-    "@layer properties {
+    "
+    @layer properties {
       @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
         *, :before, :after, ::backdrop {
           --tw-mask-linear: linear-gradient(#fff, #fff);
@@ -20018,7 +21024,7 @@ test('mask-conic-from', async () => {
       mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
       --tw-mask-conic-stops: from var(--tw-mask-conic-position), var(--tw-mask-conic-from-color) var(--tw-mask-conic-from-position), var(--tw-mask-conic-to-color) var(--tw-mask-conic-to-position);
       --tw-mask-conic: conic-gradient(var(--tw-mask-conic-stops));
-      --tw-mask-conic-from-position: calc(var(--spacing) * 0);
+      --tw-mask-conic-from-position: 0px;
       -webkit-mask-composite: source-in;
       -webkit-mask-composite: source-in;
       mask-composite: intersect;
@@ -20142,16 +21148,11 @@ test('mask-conic-from', async () => {
       syntax: "*";
       inherits: false;
       initial-value: transparent;
-    }"
+    }
+    "
   `)
   expect(
-    await compileCss(
-      css`
-        @theme {
-          --spacing: 0.25rem;
-        }
-        @tailwind utilities;
-      `,
+    await run(
       [
         'mask-conic-from',
         'mask-conic-from-2.8175',
@@ -20182,19 +21183,21 @@ test('mask-conic-from', async () => {
         '-mask-conic-from-[25%]/foo',
         '-mask-conic-from-[-25%]/foo',
       ],
+      input,
     ),
   ).toEqual('')
 })
 
 test('mask-conic-to', async () => {
+  let input = css`
+    @theme {
+      --spacing: 0.25rem;
+    }
+    @tailwind utilities;
+  `
+
   expect(
-    await compileCss(
-      css`
-        @theme {
-          --spacing: 0.25rem;
-        }
-        @tailwind utilities;
-      `,
+    await run(
       [
         'mask-conic-to-0',
         'mask-conic-to-1.5',
@@ -20208,9 +21211,11 @@ test('mask-conic-to', async () => {
         'mask-conic-to-(color:--my-var)',
         'mask-conic-to-(length:--my-var)',
       ],
+      input,
     ),
   ).toMatchInlineSnapshot(`
-    "@layer properties {
+    "
+    @layer properties {
       @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
         *, :before, :after, ::backdrop {
           --tw-mask-linear: linear-gradient(#fff, #fff);
@@ -20259,7 +21264,7 @@ test('mask-conic-to', async () => {
       mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
       --tw-mask-conic-stops: from var(--tw-mask-conic-position), var(--tw-mask-conic-from-color) var(--tw-mask-conic-from-position), var(--tw-mask-conic-to-color) var(--tw-mask-conic-to-position);
       --tw-mask-conic: conic-gradient(var(--tw-mask-conic-stops));
-      --tw-mask-conic-to-position: calc(var(--spacing) * 0);
+      --tw-mask-conic-to-position: 0px;
       -webkit-mask-composite: source-in;
       -webkit-mask-composite: source-in;
       mask-composite: intersect;
@@ -20383,16 +21388,11 @@ test('mask-conic-to', async () => {
       syntax: "*";
       inherits: false;
       initial-value: transparent;
-    }"
+    }
+    "
   `)
   expect(
-    await compileCss(
-      css`
-        @theme {
-          --spacing: 0.25rem;
-        }
-        @tailwind utilities;
-      `,
+    await run(
       [
         'mask-conic-to',
         'mask-conic-to-2.8175',
@@ -20423,13 +21423,15 @@ test('mask-conic-to', async () => {
         '-mask-conic-to-[25%]/foo',
         '-mask-conic-to-[-25%]/foo',
       ],
+      input,
     ),
   ).toEqual('')
 })
 
 test('box-decoration', async () => {
   expect(await run(['box-decoration-slice', 'box-decoration-clone'])).toMatchInlineSnapshot(`
-    ".box-decoration-clone {
+    "
+    .box-decoration-clone {
       -webkit-box-decoration-break: clone;
       box-decoration-break: clone;
     }
@@ -20437,7 +21439,8 @@ test('box-decoration', async () => {
     .box-decoration-slice {
       -webkit-box-decoration-break: slice;
       box-decoration-break: slice;
-    }"
+    }
+    "
   `)
   expect(
     await run([
@@ -20454,7 +21457,8 @@ test('box-decoration', async () => {
 test('bg-clip', async () => {
   expect(await run(['bg-clip-border', 'bg-clip-padding', 'bg-clip-content', 'bg-clip-text']))
     .toMatchInlineSnapshot(`
-      ".bg-clip-border {
+      "
+      .bg-clip-border {
         background-clip: border-box;
       }
 
@@ -20469,7 +21473,8 @@ test('bg-clip', async () => {
       .bg-clip-text {
         -webkit-background-clip: text;
         background-clip: text;
-      }"
+      }
+      "
     `)
   expect(
     await run([
@@ -20489,7 +21494,8 @@ test('bg-clip', async () => {
 test('bg-origin', async () => {
   expect(await run(['bg-origin-border', 'bg-origin-padding', 'bg-origin-content']))
     .toMatchInlineSnapshot(`
-      ".bg-origin-border {
+      "
+      .bg-origin-border {
         background-origin: border-box;
       }
 
@@ -20499,7 +21505,8 @@ test('bg-origin', async () => {
 
       .bg-origin-padding {
         background-origin: padding-box;
-      }"
+      }
+      "
     `)
   expect(
     await run([
@@ -20526,7 +21533,8 @@ test('mask-clip', async () => {
       'mask-no-clip',
     ]),
   ).toMatchInlineSnapshot(`
-    ".mask-clip-border {
+    "
+    .mask-clip-border {
       -webkit-mask-clip: border-box;
       mask-clip: border-box;
     }
@@ -20559,7 +21567,8 @@ test('mask-clip', async () => {
     .mask-no-clip {
       -webkit-mask-clip: no-clip;
       mask-clip: no-clip;
-    }"
+    }
+    "
   `)
   expect(
     await run([
@@ -20593,7 +21602,8 @@ test('mask-origin', async () => {
       'mask-origin-view',
     ]),
   ).toMatchInlineSnapshot(`
-    ".mask-origin-border {
+    "
+    .mask-origin-border {
       -webkit-mask-origin: border-box;
       mask-origin: border-box;
     }
@@ -20621,7 +21631,8 @@ test('mask-origin', async () => {
     .mask-origin-view {
       -webkit-mask-origin: view-box;
       mask-origin: view-box;
-    }"
+    }
+    "
   `)
   expect(
     await run([
@@ -20663,7 +21674,8 @@ test('bg-blend', async () => {
       'bg-blend-luminosity',
     ]),
   ).toMatchInlineSnapshot(`
-    ".bg-blend-color {
+    "
+    .bg-blend-color {
       background-blend-mode: color;
     }
 
@@ -20725,7 +21737,8 @@ test('bg-blend', async () => {
 
     .bg-blend-soft-light {
       background-blend-mode: soft-light;
-    }"
+    }
+    "
   `)
   expect(
     await run([
@@ -20789,7 +21802,8 @@ test('mix-blend', async () => {
       'mix-blend-plus-lighter',
     ]),
   ).toMatchInlineSnapshot(`
-    ".mix-blend-color {
+    "
+    .mix-blend-color {
       mix-blend-mode: color;
     }
 
@@ -20859,7 +21873,8 @@ test('mix-blend', async () => {
 
     .mix-blend-soft-light {
       mix-blend-mode: soft-light;
-    }"
+    }
+    "
   `)
   expect(
     await run([
@@ -20905,14 +21920,7 @@ test('mix-blend', async () => {
 
 test('fill', async () => {
   expect(
-    await compileCss(
-      css`
-        @theme {
-          --color-red-500: #ef4444;
-          --fill-blue-500: #3b82f6;
-        }
-        @tailwind utilities;
-      `,
+    await run(
       [
         'fill-red-500',
         'fill-red-500/50',
@@ -20933,9 +21941,17 @@ test('fill', async () => {
         'fill-[#0088cc]/[0.5]',
         'fill-[#0088cc]/[50%]',
       ],
+      css`
+        @theme {
+          --color-red-500: #ef4444;
+          --fill-blue-500: #3b82f6;
+        }
+        @tailwind utilities;
+      `,
     ),
   ).toMatchInlineSnapshot(`
-    ":root, :host {
+    "
+    :root, :host {
       --color-red-500: #ef4444;
       --fill-blue-500: #3b82f6;
     }
@@ -21052,7 +22068,8 @@ test('fill', async () => {
 
     .fill-transparent {
       fill: #0000;
-    }"
+    }
+    "
   `)
   expect(
     await run([
@@ -21078,14 +22095,7 @@ test('fill', async () => {
 
 test('stroke', async () => {
   expect(
-    await compileCss(
-      css`
-        @theme {
-          --color-red-500: #ef4444;
-          --stroke-blue-500: #3b82f6;
-        }
-        @tailwind utilities;
-      `,
+    await run(
       [
         // Color
         'stroke-red-500',
@@ -21127,9 +22137,17 @@ test('stroke', async () => {
         'stroke-[length:var(--my-width)]',
         'stroke-[percentage:var(--my-width)]',
       ],
+      css`
+        @theme {
+          --color-red-500: #ef4444;
+          --stroke-blue-500: #3b82f6;
+        }
+        @tailwind utilities;
+      `,
     ),
   ).toMatchInlineSnapshot(`
-    ":root, :host {
+    "
+    :root, :host {
       --color-red-500: #ef4444;
       --stroke-blue-500: #3b82f6;
     }
@@ -21338,7 +22356,8 @@ test('stroke', async () => {
 
     .stroke-\\[length\\:var\\(--my-width\\)\\], .stroke-\\[number\\:var\\(--my-width\\)\\], .stroke-\\[percentage\\:var\\(--my-width\\)\\] {
       stroke-width: var(--my-width);
-    }"
+    }
+    "
   `)
   expect(
     await run([
@@ -21364,6 +22383,11 @@ test('stroke', async () => {
       // Width
       '-stroke-0',
       'stroke--1',
+      'stroke-0/foo',
+      'stroke-1/50',
+      'stroke-2/[0.5]',
+      'stroke-2/(--my-opacity)',
+      'stroke-[12px]/foo',
     ]),
   ).toEqual('')
 })
@@ -21397,7 +22421,8 @@ test('object', async () => {
       'object-right-top',
     ]),
   ).toMatchInlineSnapshot(`
-    ".object-contain {
+    "
+    .object-contain {
       object-fit: contain;
     }
 
@@ -21471,7 +22496,8 @@ test('object', async () => {
 
     .object-top-right {
       object-position: right top;
-    }"
+    }
+    "
   `)
   expect(
     await run([
@@ -21506,29 +22532,32 @@ test('object', async () => {
   ).toEqual('')
 
   expect(
-    await compileCss(
+    await run(
+      ['object-center'],
       css`
         @theme {
           --object-position-center: top left;
         }
         @tailwind utilities;
       `,
-      ['object-center'],
     ),
   ).toMatchInlineSnapshot(`
-    ":root, :host {
+    "
+    :root, :host {
       --object-position-center: top left;
     }
 
     .object-center {
       object-position: var(--object-position-center);
-    }"
+    }
+    "
   `)
 })
 
 test('p', async () => {
   expect(
-    await compileCss(
+    await run(
+      ['p-1', 'p-4', 'p-99', 'p-big', 'p-[4px]'],
       css`
         @theme {
           --spacing: 0.25rem;
@@ -21536,16 +22565,16 @@ test('p', async () => {
         }
         @tailwind utilities;
       `,
-      ['p-1', 'p-4', 'p-99', 'p-big', 'p-[4px]'],
     ),
   ).toMatchInlineSnapshot(`
-    ":root, :host {
+    "
+    :root, :host {
       --spacing: .25rem;
       --spacing-big: 100rem;
     }
 
     .p-1 {
-      padding: calc(var(--spacing) * 1);
+      padding: var(--spacing);
     }
 
     .p-4 {
@@ -21562,14 +22591,16 @@ test('p', async () => {
 
     .p-big {
       padding: var(--spacing-big);
-    }"
+    }
+    "
   `)
   expect(await run(['p', '-p-4', '-p-[4px]', 'p-4/foo', 'p-[4px]/foo'])).toEqual('')
 })
 
 test('px', async () => {
   expect(
-    await compileCss(
+    await run(
+      ['px-1', 'px-99', 'px-2.5', 'px-big', 'px-[4px]'],
       css`
         @theme {
           --spacing: 0.25rem;
@@ -21577,16 +22608,16 @@ test('px', async () => {
         }
         @tailwind utilities;
       `,
-      ['px-1', 'px-99', 'px-2.5', 'px-big', 'px-[4px]'],
     ),
   ).toMatchInlineSnapshot(`
-    ":root, :host {
+    "
+    :root, :host {
       --spacing: .25rem;
       --spacing-big: 100rem;
     }
 
     .px-1 {
-      padding-inline: calc(var(--spacing) * 1);
+      padding-inline: var(--spacing);
     }
 
     .px-2\\.5 {
@@ -21603,14 +22634,16 @@ test('px', async () => {
 
     .px-big {
       padding-inline: var(--spacing-big);
-    }"
+    }
+    "
   `)
   expect(await run(['px', '-px-4', '-px-[4px]', 'px-4/foo', 'px-[4px]/foo'])).toEqual('')
 })
 
 test('py', async () => {
   expect(
-    await compileCss(
+    await run(
+      ['py-1', 'py-4', 'py-99', 'py-big', 'py-[4px]'],
       css`
         @theme {
           --spacing: 0.25rem;
@@ -21618,16 +22651,16 @@ test('py', async () => {
         }
         @tailwind utilities;
       `,
-      ['py-1', 'py-4', 'py-99', 'py-big', 'py-[4px]'],
     ),
   ).toMatchInlineSnapshot(`
-    ":root, :host {
+    "
+    :root, :host {
       --spacing: .25rem;
       --spacing-big: 100rem;
     }
 
     .py-1 {
-      padding-block: calc(var(--spacing) * 1);
+      padding-block: var(--spacing);
     }
 
     .py-4 {
@@ -21644,14 +22677,16 @@ test('py', async () => {
 
     .py-big {
       padding-block: var(--spacing-big);
-    }"
+    }
+    "
   `)
   expect(await run(['py', '-py-4', '-py-[4px]', 'py-4/foo', 'py-[4px]/foo'])).toEqual('')
 })
 
 test('pt', async () => {
   expect(
-    await compileCss(
+    await run(
+      ['pt-1', 'pt-4', 'pt-99', 'pt-big', 'pt-[4px]'],
       css`
         @theme {
           --spacing: 0.25rem;
@@ -21659,16 +22694,16 @@ test('pt', async () => {
         }
         @tailwind utilities;
       `,
-      ['pt-1', 'pt-4', 'pt-99', 'pt-big', 'pt-[4px]'],
     ),
   ).toMatchInlineSnapshot(`
-    ":root, :host {
+    "
+    :root, :host {
       --spacing: .25rem;
       --spacing-big: 100rem;
     }
 
     .pt-1 {
-      padding-top: calc(var(--spacing) * 1);
+      padding-top: var(--spacing);
     }
 
     .pt-4 {
@@ -21685,14 +22720,16 @@ test('pt', async () => {
 
     .pt-big {
       padding-top: var(--spacing-big);
-    }"
+    }
+    "
   `)
   expect(await run(['pt', '-pt-4', '-pt-[4px]', 'pt-4/foo', 'pt-[4px]/foo'])).toEqual('')
 })
 
 test('ps', async () => {
   expect(
-    await compileCss(
+    await run(
+      ['ps-1', 'ps-4', 'ps-99', 'ps-big', 'ps-[4px]'],
       css`
         @theme {
           --spacing: 0.25rem;
@@ -21700,16 +22737,16 @@ test('ps', async () => {
         }
         @tailwind utilities;
       `,
-      ['ps-1', 'ps-4', 'ps-99', 'ps-big', 'ps-[4px]'],
     ),
   ).toMatchInlineSnapshot(`
-    ":root, :host {
+    "
+    :root, :host {
       --spacing: .25rem;
       --spacing-big: 100rem;
     }
 
     .ps-1 {
-      padding-inline-start: calc(var(--spacing) * 1);
+      padding-inline-start: var(--spacing);
     }
 
     .ps-4 {
@@ -21726,14 +22763,16 @@ test('ps', async () => {
 
     .ps-big {
       padding-inline-start: var(--spacing-big);
-    }"
+    }
+    "
   `)
   expect(await run(['ps', '-ps-4', '-ps-[4px]', 'ps-4/foo', 'ps-[4px]/foo'])).toEqual('')
 })
 
 test('pe', async () => {
   expect(
-    await compileCss(
+    await run(
+      ['pe-1', 'pe-4', 'pe-99', 'pe-big', 'pe-[4px]'],
       css`
         @theme {
           --spacing: 0.25rem;
@@ -21741,16 +22780,16 @@ test('pe', async () => {
         }
         @tailwind utilities;
       `,
-      ['pe-1', 'pe-4', 'pe-99', 'pe-big', 'pe-[4px]'],
     ),
   ).toMatchInlineSnapshot(`
-    ":root, :host {
+    "
+    :root, :host {
       --spacing: .25rem;
       --spacing-big: 100rem;
     }
 
     .pe-1 {
-      padding-inline-end: calc(var(--spacing) * 1);
+      padding-inline-end: var(--spacing);
     }
 
     .pe-4 {
@@ -21767,14 +22806,16 @@ test('pe', async () => {
 
     .pe-big {
       padding-inline-end: var(--spacing-big);
-    }"
+    }
+    "
   `)
   expect(await run(['pe', '-pe-4', '-pe-[4px]', 'pe-4/foo', 'pe-[4px]/foo'])).toEqual('')
 })
 
 test('pbs', async () => {
   expect(
-    await compileCss(
+    await run(
+      ['pbs-1', 'pbs-4', 'pbs-99', 'pbs-big', 'pbs-[4px]'],
       css`
         @theme {
           --spacing: 0.25rem;
@@ -21782,16 +22823,16 @@ test('pbs', async () => {
         }
         @tailwind utilities;
       `,
-      ['pbs-1', 'pbs-4', 'pbs-99', 'pbs-big', 'pbs-[4px]'],
     ),
   ).toMatchInlineSnapshot(`
-    ":root, :host {
+    "
+    :root, :host {
       --spacing: .25rem;
       --spacing-big: 100rem;
     }
 
     .pbs-1 {
-      padding-block-start: calc(var(--spacing) * 1);
+      padding-block-start: var(--spacing);
     }
 
     .pbs-4 {
@@ -21808,14 +22849,16 @@ test('pbs', async () => {
 
     .pbs-big {
       padding-block-start: var(--spacing-big);
-    }"
+    }
+    "
   `)
   expect(await run(['pbs', '-pbs-4', '-pbs-[4px]', 'pbs-4/foo', 'pbs-[4px]/foo'])).toEqual('')
 })
 
 test('pbe', async () => {
   expect(
-    await compileCss(
+    await run(
+      ['pbe-1', 'pbe-4', 'pbe-99', 'pbe-big', 'pbe-[4px]'],
       css`
         @theme {
           --spacing: 0.25rem;
@@ -21823,16 +22866,16 @@ test('pbe', async () => {
         }
         @tailwind utilities;
       `,
-      ['pbe-1', 'pbe-4', 'pbe-99', 'pbe-big', 'pbe-[4px]'],
     ),
   ).toMatchInlineSnapshot(`
-    ":root, :host {
+    "
+    :root, :host {
       --spacing: .25rem;
       --spacing-big: 100rem;
     }
 
     .pbe-1 {
-      padding-block-end: calc(var(--spacing) * 1);
+      padding-block-end: var(--spacing);
     }
 
     .pbe-4 {
@@ -21849,14 +22892,16 @@ test('pbe', async () => {
 
     .pbe-big {
       padding-block-end: var(--spacing-big);
-    }"
+    }
+    "
   `)
   expect(await run(['pbe', '-pbe-4', '-pbe-[4px]', 'pbe-4/foo', 'pbe-[4px]/foo'])).toEqual('')
 })
 
 test('pr', async () => {
   expect(
-    await compileCss(
+    await run(
+      ['pr-1', 'pr-4', 'pr-99', 'pr-big', 'pr-[4px]'],
       css`
         @theme {
           --spacing: 0.25rem;
@@ -21864,16 +22909,16 @@ test('pr', async () => {
         }
         @tailwind utilities;
       `,
-      ['pr-1', 'pr-4', 'pr-99', 'pr-big', 'pr-[4px]'],
     ),
   ).toMatchInlineSnapshot(`
-    ":root, :host {
+    "
+    :root, :host {
       --spacing: .25rem;
       --spacing-big: 100rem;
     }
 
     .pr-1 {
-      padding-right: calc(var(--spacing) * 1);
+      padding-right: var(--spacing);
     }
 
     .pr-4 {
@@ -21890,14 +22935,16 @@ test('pr', async () => {
 
     .pr-big {
       padding-right: var(--spacing-big);
-    }"
+    }
+    "
   `)
   expect(await run(['pr', '-pr-4', '-pr-[4px]', 'pr-4/foo', 'pr-[4px]/foo'])).toEqual('')
 })
 
 test('pb', async () => {
   expect(
-    await compileCss(
+    await run(
+      ['pb-1', 'pb-4', 'pb-99', 'pb-big', 'pb-[4px]'],
       css`
         @theme {
           --spacing: 0.25rem;
@@ -21905,16 +22952,16 @@ test('pb', async () => {
         }
         @tailwind utilities;
       `,
-      ['pb-1', 'pb-4', 'pb-99', 'pb-big', 'pb-[4px]'],
     ),
   ).toMatchInlineSnapshot(`
-    ":root, :host {
+    "
+    :root, :host {
       --spacing: .25rem;
       --spacing-big: 100rem;
     }
 
     .pb-1 {
-      padding-bottom: calc(var(--spacing) * 1);
+      padding-bottom: var(--spacing);
     }
 
     .pb-4 {
@@ -21931,14 +22978,16 @@ test('pb', async () => {
 
     .pb-big {
       padding-bottom: var(--spacing-big);
-    }"
+    }
+    "
   `)
   expect(await run(['pb', '-pb-4', '-pb-[4px]', 'pb-4/foo', 'pb-[4px]/foo'])).toEqual('')
 })
 
 test('pl', async () => {
   expect(
-    await compileCss(
+    await run(
+      ['pl-1', 'pl-4', 'pl-99', 'pl-big', 'pl-[4px]'],
       css`
         @theme {
           --spacing: 0.25rem;
@@ -21946,16 +22995,16 @@ test('pl', async () => {
         }
         @tailwind utilities;
       `,
-      ['pl-1', 'pl-4', 'pl-99', 'pl-big', 'pl-[4px]'],
     ),
   ).toMatchInlineSnapshot(`
-    ":root, :host {
+    "
+    :root, :host {
       --spacing: .25rem;
       --spacing-big: 100rem;
     }
 
     .pl-1 {
-      padding-left: calc(var(--spacing) * 1);
+      padding-left: var(--spacing);
     }
 
     .pl-4 {
@@ -21972,7 +23021,8 @@ test('pl', async () => {
 
     .pl-big {
       padding-left: var(--spacing-big);
-    }"
+    }
+    "
   `)
   expect(await run(['pl', '-pl-4', '-pl-[4px]', 'pl-4/foo', 'pl-[4px]/foo'])).toEqual('')
 })
@@ -21981,7 +23031,8 @@ test('text-align', async () => {
   expect(
     await run(['text-left', 'text-center', 'text-right', 'text-justify', 'text-start', 'text-end']),
   ).toMatchInlineSnapshot(`
-    ".text-center {
+    "
+    .text-center {
       text-align: center;
     }
 
@@ -22003,7 +23054,8 @@ test('text-align', async () => {
 
     .text-start {
       text-align: start;
-    }"
+    }
+    "
   `)
   expect(
     await run([
@@ -22025,13 +23077,15 @@ test('text-align', async () => {
 
 test('indent', async () => {
   expect(await run(['indent-[4px]', '-indent-[4px]'])).toMatchInlineSnapshot(`
-    ".-indent-\\[4px\\] {
+    "
+    .-indent-\\[4px\\] {
       text-indent: -4px;
     }
 
     .indent-\\[4px\\] {
       text-indent: 4px;
-    }"
+    }
+    "
   `)
   expect(await run(['indent', 'indent-[4px]/foo', '-indent-[4px]/foo'])).toEqual('')
 })
@@ -22051,7 +23105,8 @@ test('align', async () => {
       'align-[var(--value)]',
     ]),
   ).toMatchInlineSnapshot(`
-    ".align-\\[var\\(--value\\)\\] {
+    "
+    .align-\\[var\\(--value\\)\\] {
       vertical-align: var(--value);
     }
 
@@ -22085,7 +23140,8 @@ test('align', async () => {
 
     .align-top {
       vertical-align: top;
-    }"
+    }
+    "
   `)
   expect(
     await run([
@@ -22116,16 +23172,7 @@ test('align', async () => {
 
 test('font', async () => {
   expect(
-    await compileCss(
-      css`
-        @theme {
-          --font-sans:
-            ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
-            'Segoe UI Symbol', 'Noto Color Emoji';
-          --font-weight-bold: 650;
-        }
-        @tailwind utilities;
-      `,
+    await run(
       [
         // font-family
         'font-sans',
@@ -22140,9 +23187,19 @@ test('font', async () => {
         'font-[100]',
         'font-[number:var(--my-weight)]',
       ],
+      css`
+        @theme {
+          --font-sans:
+            ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
+            'Segoe UI Symbol', 'Noto Color Emoji';
+          --font-weight-bold: 650;
+        }
+        @tailwind utilities;
+      `,
     ),
   ).toMatchInlineSnapshot(`
-    "@layer properties {
+    "
+    @layer properties {
       @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
         *, :before, :after, ::backdrop {
           --tw-font-weight: initial;
@@ -22195,19 +23252,11 @@ test('font', async () => {
     @property --tw-font-weight {
       syntax: "*";
       inherits: false
-    }"
+    }
+    "
   `)
   expect(
-    await compileCss(
-      css`
-        @theme reference {
-          --font-sans:
-            ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
-            'Segoe UI Symbol', 'Noto Color Emoji';
-          --font-weight-bold: 650;
-        }
-        @tailwind utilities;
-      `,
+    await run(
       [
         'font',
         // font-family
@@ -22227,6 +23276,15 @@ test('font', async () => {
         'font-[100]/foo',
         'font-[number:var(--my-weight)]/foo',
       ],
+      css`
+        @theme reference {
+          --font-sans:
+            ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
+            'Segoe UI Symbol', 'Noto Color Emoji';
+          --font-weight-bold: 650;
+        }
+        @tailwind utilities;
+      `,
     ),
   ).toEqual('')
 })
@@ -22240,7 +23298,8 @@ test('font-features', async () => {
       'font-features-(--my-features)',
     ]),
   ).toMatchInlineSnapshot(`
-    ".font-features-\\(--my-features\\) {
+    "
+    .font-features-\\(--my-features\\) {
       font-feature-settings: var(--my-features);
     }
 
@@ -22254,7 +23313,8 @@ test('font-features', async () => {
 
     .font-features-\\[var\\(--my-features\\)\\] {
       font-feature-settings: var(--my-features);
-    }"
+    }
+    "
   `)
   expect(
     await run([
@@ -22268,7 +23328,8 @@ test('font-features', async () => {
 
 test('text-transform', async () => {
   expect(await run(['uppercase', 'lowercase', 'capitalize', 'normal-case'])).toMatchInlineSnapshot(`
-    ".capitalize {
+    "
+    .capitalize {
       text-transform: capitalize;
     }
 
@@ -22282,7 +23343,8 @@ test('text-transform', async () => {
 
     .uppercase {
       text-transform: uppercase;
-    }"
+    }
+    "
   `)
   expect(
     await run([
@@ -22300,13 +23362,15 @@ test('text-transform', async () => {
 
 test('font-style', async () => {
   expect(await run(['italic', 'not-italic'])).toMatchInlineSnapshot(`
-    ".italic {
+    "
+    .italic {
       font-style: italic;
     }
 
     .not-italic {
       font-style: normal;
-    }"
+    }
+    "
   `)
   expect(await run(['-italic', '-not-italic', 'italic/foo', 'not-italic/foo'])).toEqual('')
 })
@@ -22314,7 +23378,8 @@ test('font-style', async () => {
 test('font-stretch', async () => {
   expect(await run(['font-stretch-ultra-expanded', 'font-stretch-50%', 'font-stretch-200%']))
     .toMatchInlineSnapshot(`
-      ".font-stretch-50\\% {
+      "
+      .font-stretch-50\\% {
         font-stretch: 50%;
       }
 
@@ -22324,7 +23389,8 @@ test('font-stretch', async () => {
 
       .font-stretch-ultra-expanded {
         font-stretch: ultra-expanded;
-      }"
+      }
+      "
     `)
   expect(
     await run([
@@ -22344,7 +23410,8 @@ test('font-stretch', async () => {
 test('text-decoration-line', async () => {
   expect(await run(['underline', 'overline', 'line-through', 'no-underline']))
     .toMatchInlineSnapshot(`
-      ".line-through {
+      "
+      .line-through {
         text-decoration-line: line-through;
       }
 
@@ -22358,7 +23425,8 @@ test('text-decoration-line', async () => {
 
       .underline {
         text-decoration-line: underline;
-      }"
+      }
+      "
     `)
   expect(
     await run([
@@ -22376,13 +23444,7 @@ test('text-decoration-line', async () => {
 
 test('placeholder', async () => {
   expect(
-    await compileCss(
-      css`
-        @theme {
-          --color-red-500: #ef4444;
-        }
-        @tailwind utilities;
-      `,
+    await run(
       [
         'placeholder-red-500',
         'placeholder-red-500/50',
@@ -22402,9 +23464,16 @@ test('placeholder', async () => {
         'placeholder-[#0088cc]/[0.5]',
         'placeholder-[#0088cc]/[50%]',
       ],
+      css`
+        @theme {
+          --color-red-500: #ef4444;
+        }
+        @tailwind utilities;
+      `,
     ),
   ).toMatchInlineSnapshot(`
-    ":root, :host {
+    "
+    :root, :host {
       --color-red-500: #ef4444;
     }
 
@@ -22516,7 +23585,8 @@ test('placeholder', async () => {
 
     .placeholder-transparent::placeholder {
       color: #0000;
-    }"
+    }
+    "
   `)
   expect(
     await run([
@@ -22541,14 +23611,7 @@ test('placeholder', async () => {
 
 test('decoration', async () => {
   expect(
-    await compileCss(
-      css`
-        @theme {
-          --color-red-500: #ef4444;
-          --text-decoration-color-blue-500: #3b82f6;
-        }
-        @tailwind utilities;
-      `,
+    await run(
       [
         // text-decoration-color
         'decoration-red-500',
@@ -22595,9 +23658,17 @@ test('decoration', async () => {
         'decoration-[length:var(--my-thickness)]',
         'decoration-[percentage:var(--my-thickness)]',
       ],
+      css`
+        @theme {
+          --color-red-500: #ef4444;
+          --text-decoration-color-blue-500: #3b82f6;
+        }
+        @tailwind utilities;
+      `,
     ),
   ).toMatchInlineSnapshot(`
-    ":root, :host {
+    "
+    :root, :host {
       --color-red-500: #ef4444;
       --text-decoration-color-blue-500: #3b82f6;
     }
@@ -22846,7 +23917,8 @@ test('decoration', async () => {
 
     .decoration-from-font {
       text-decoration-thickness: from-font;
-    }"
+    }
+    "
   `)
   expect(
     await run([
@@ -22905,17 +23977,18 @@ test('decoration', async () => {
 
 test('animate', async () => {
   expect(
-    await compileCss(
+    await run(
+      ['animate-spin', 'animate-none', 'animate-[bounce_1s_infinite]', 'animate-not-found'],
       css`
         @theme {
           --animate-spin: spin 1s linear infinite;
         }
         @tailwind utilities;
       `,
-      ['animate-spin', 'animate-none', 'animate-[bounce_1s_infinite]', 'animate-not-found'],
     ),
   ).toMatchInlineSnapshot(`
-    ":root, :host {
+    "
+    :root, :host {
       --animate-spin: spin 1s linear infinite;
     }
 
@@ -22929,7 +24002,8 @@ test('animate', async () => {
 
     .animate-spin {
       animation: var(--animate-spin);
-    }"
+    }
+    "
   `)
   expect(
     await run([
@@ -22946,41 +24020,31 @@ test('animate', async () => {
   ).toEqual('')
 
   expect(
-    await compileCss(
+    await run(
+      ['animate-none'],
       css`
         @theme {
           --animate-none: bounce 1s infinite;
         }
         @tailwind utilities;
       `,
-      ['animate-none'],
     ),
   ).toMatchInlineSnapshot(`
-    ":root, :host {
+    "
+    :root, :host {
       --animate-none: bounce 1s infinite;
     }
 
     .animate-none {
       animation: var(--animate-none);
-    }"
+    }
+    "
   `)
 })
 
 test('filter', async () => {
   expect(
-    await compileCss(
-      css`
-        @theme {
-          --blur-xl: 24px;
-          --color-red-500: #ef4444;
-          --drop-shadow: 0 1px 1px rgb(0 0 0 / 0.05);
-          --drop-shadow-xl: 0 9px 7px rgb(0 0 0 / 0.1);
-        }
-        @theme inline {
-          --drop-shadow-multi: 0 1px 1px rgb(0 0 0 / 0.05), 0 9px 7px rgb(0 0 0 / 0.1);
-        }
-        @tailwind utilities;
-      `,
+    await run(
       [
         'filter',
         'filter-none',
@@ -23004,6 +24068,7 @@ test('filter', async () => {
         'invert-[var(--value)]',
         'drop-shadow',
         'drop-shadow/25',
+        'drop-shadow/12.5',
         'drop-shadow-xl',
         'drop-shadow-multi',
         'drop-shadow-[0_0_red]',
@@ -23011,6 +24076,7 @@ test('filter', async () => {
         'drop-shadow-red-500/50',
         'drop-shadow-none',
         'drop-shadow-inherit',
+        'drop-shadow-calc',
         'saturate-0',
         'saturate-[1.75]',
         'saturate-[var(--value)]',
@@ -23019,9 +24085,24 @@ test('filter', async () => {
         'sepia-[50%]',
         'sepia-[var(--value)]',
       ],
+      css`
+        @theme {
+          --spacing: 0.25rem;
+          --blur-xl: 24px;
+          --color-red-500: #ef4444;
+          --drop-shadow: 0 1px 1px rgb(0 0 0 / 0.05);
+          --drop-shadow-xl: 0 9px 7px rgb(0 0 0 / 0.1);
+          --drop-shadow-calc: 0 0 calc(1 * var(--spacing)) black;
+        }
+        @theme inline {
+          --drop-shadow-multi: 0 1px 1px rgb(0 0 0 / 0.05), 0 9px 7px rgb(0 0 0 / 0.1);
+        }
+        @tailwind utilities;
+      `,
     ),
   ).toMatchInlineSnapshot(`
-    "@layer properties {
+    "
+    @layer properties {
       @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
         *, :before, :after, ::backdrop {
           --tw-blur: initial;
@@ -23042,10 +24123,12 @@ test('filter', async () => {
     }
 
     :root, :host {
+      --spacing: .25rem;
       --blur-xl: 24px;
       --color-red-500: #ef4444;
       --drop-shadow: 0 1px 1px #0000000d;
       --drop-shadow-xl: 0 9px 7px #0000001a;
+      --drop-shadow-calc: 0 0 calc(1 * var(--spacing)) black;
     }
 
     .blur-\\[4px\\] {
@@ -23083,6 +24166,13 @@ test('filter', async () => {
       filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );
     }
 
+    .drop-shadow\\/12\\.5 {
+      --tw-drop-shadow-alpha: 12.5%;
+      --tw-drop-shadow-size: drop-shadow(0 1px 1px var(--tw-drop-shadow-color, oklab(0% 0 0 / .125)));
+      --tw-drop-shadow: drop-shadow(var(--drop-shadow));
+      filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );
+    }
+
     .drop-shadow\\/25 {
       --tw-drop-shadow-alpha: 25%;
       --tw-drop-shadow-size: drop-shadow(0 1px 1px var(--tw-drop-shadow-color, oklab(0% 0 0 / .25)));
@@ -23102,6 +24192,12 @@ test('filter', async () => {
       filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );
     }
 
+    .drop-shadow-calc {
+      --tw-drop-shadow-size: drop-shadow(0 0 calc(1 * var(--spacing)) var(--tw-drop-shadow-color, black));
+      --tw-drop-shadow: drop-shadow(var(--drop-shadow-calc));
+      filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );
+    }
+
     .drop-shadow-multi {
       --tw-drop-shadow-size: drop-shadow(0 1px 1px var(--tw-drop-shadow-color, #0000000d)) drop-shadow(0 9px 7px var(--tw-drop-shadow-color, #0000001a));
       --tw-drop-shadow: drop-shadow(0 1px 1px #0000000d) drop-shadow(0 9px 7px #0000001a);
@@ -23313,99 +24409,109 @@ test('filter', async () => {
     @property --tw-drop-shadow-size {
       syntax: "*";
       inherits: false
-    }"
+    }
+    "
   `)
   expect(
-    await run([
-      '-filter',
-      '-filter-none',
-      '-filter-[var(--value)]',
-      '-blur-xl',
-      '-blur-[4px]',
-      'brightness--50',
-      '-brightness-50',
-      '-brightness-[1.23]',
-      'brightness-unknown',
-      'contrast--50',
-      '-contrast-50',
-      '-contrast-[1.23]',
-      'contrast-unknown',
-      '-grayscale',
-      '-grayscale-0',
-      'grayscale--1',
-      '-grayscale-[var(--value)]',
-      'grayscale-unknown',
-      'hue-rotate--5',
-      'hue-rotate-unknown',
-      '-invert',
-      'invert--5',
-      '-invert-0',
-      '-invert-[var(--value)]',
-      'invert-unknown',
-      '-drop-shadow-xl',
-      '-drop-shadow-[0_0_red]',
+    await run(
+      [
+        '-filter',
+        '-filter-none',
+        '-filter-[var(--value)]',
+        '-blur-xl',
+        '-blur-[4px]',
+        'brightness--50',
+        '-brightness-50',
+        '-brightness-[1.23]',
+        'brightness-unknown',
+        'contrast--50',
+        '-contrast-50',
+        '-contrast-[1.23]',
+        'contrast-unknown',
+        '-grayscale',
+        '-grayscale-0',
+        'grayscale--1',
+        '-grayscale-[var(--value)]',
+        'grayscale-unknown',
+        'hue-rotate--5',
+        'hue-rotate-unknown',
+        '-invert',
+        'invert--5',
+        '-invert-0',
+        '-invert-[var(--value)]',
+        'invert-unknown',
+        '-drop-shadow-xl',
+        '-drop-shadow-[0_0_red]',
 
-      'drop-shadow/foo',
-      '-drop-shadow/foo',
-      '-drop-shadow/25',
-      '-drop-shadow-red-500',
-      'drop-shadow-red-500/foo',
-      '-drop-shadow-red-500/foo',
-      '-drop-shadow-red-500/50',
+        'drop-shadow/foo',
+        '-drop-shadow/foo',
+        '-drop-shadow/25',
+        '-drop-shadow-red-500',
+        'drop-shadow-red-500/foo',
+        '-drop-shadow-red-500/foo',
+        '-drop-shadow-red-500/50',
 
-      '-saturate-0',
-      'saturate--5',
-      '-saturate-[1.75]',
-      '-saturate-[var(--value)]',
-      'saturate-saturate',
-      '-sepia',
-      'sepia--50',
-      '-sepia-0',
-      '-sepia-[50%]',
-      '-sepia-[var(--value)]',
-      'sepia-unknown',
-      'filter/foo',
-      'filter-none/foo',
-      'filter-[var(--value)]/foo',
-      'blur-xl/foo',
-      'blur-none/foo',
-      'blur-[4px]/foo',
-      'brightness-50/foo',
-      'brightness-[1.23]/foo',
-      'contrast-50/foo',
-      'contrast-[1.23]/foo',
-      'grayscale/foo',
-      'grayscale-0/foo',
-      'grayscale-[var(--value)]/foo',
-      'hue-rotate-15/foo',
-      'hue-rotate-[45deg]/foo',
-      'invert/foo',
-      'invert-0/foo',
-      'invert-[var(--value)]/foo',
-      'drop-shadow-xl/foo',
-      'drop-shadow-[0_0_red]/foo',
-      'saturate-0/foo',
-      'saturate-[1.75]/foo',
-      'saturate-[var(--value)]/foo',
-      'sepia/foo',
-      'sepia-0/foo',
-      'sepia-[50%]/foo',
-      'sepia-[var(--value)]/foo',
-    ]),
+        '-saturate-0',
+        'saturate--5',
+        '-saturate-[1.75]',
+        '-saturate-[var(--value)]',
+        'saturate-saturate',
+        '-sepia',
+        'sepia--50',
+        '-sepia-0',
+        '-sepia-[50%]',
+        '-sepia-[var(--value)]',
+        'sepia-unknown',
+        'filter/foo',
+        'filter-none/foo',
+        'filter-[var(--value)]/foo',
+        'blur-xl/foo',
+        'blur-none/foo',
+        'blur-[4px]/foo',
+        'brightness-50/foo',
+        'brightness-[1.23]/foo',
+        'contrast-50/foo',
+        'contrast-[1.23]/foo',
+        'grayscale/foo',
+        'grayscale-0/foo',
+        'grayscale-[var(--value)]/foo',
+        'hue-rotate-15/foo',
+        'hue-rotate-[45deg]/foo',
+        'invert/foo',
+        'invert-0/foo',
+        'invert-[var(--value)]/foo',
+        'drop-shadow-xl/foo',
+        'drop-shadow-[0_0_red]/foo',
+        'saturate-0/foo',
+        'saturate-[1.75]/foo',
+        'saturate-[var(--value)]/foo',
+        'sepia/foo',
+        'sepia-0/foo',
+        'sepia-[50%]/foo',
+        'sepia-[var(--value)]/foo',
+      ],
+      css`
+        @theme {
+          --drop-shadow: 0 1px 1px rgb(0 0 0 / 0.05);
+        }
+        @tailwind utilities;
+      `,
+    ),
   ).toEqual('')
 
   expect(
-    await compileCss(
+    await run(
+      ['blur-none'],
       css`
         @theme {
           --blur-none: 2px;
         }
         @tailwind utilities;
       `,
-      ['blur-none'],
     ),
   ).toMatchInlineSnapshot(`
-    "@layer properties {
+    "
+    @layer properties {
       @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
         *, :before, :after, ::backdrop {
           --tw-blur: initial;
@@ -23498,19 +24604,14 @@ test('filter', async () => {
     @property --tw-drop-shadow-size {
       syntax: "*";
       inherits: false
-    }"
+    }
+    "
   `)
 })
 
 test('backdrop-filter', async () => {
   expect(
-    await compileCss(
-      css`
-        @theme {
-          --blur-xl: 24px;
-        }
-        @tailwind utilities;
-      `,
+    await run(
       [
         'backdrop-filter',
         'backdrop-filter-none',
@@ -23546,9 +24647,16 @@ test('backdrop-filter', async () => {
         'backdrop-sepia-[50%]',
         'backdrop-sepia-[var(--value)]',
       ],
+      css`
+        @theme {
+          --blur-xl: 24px;
+        }
+        @tailwind utilities;
+      `,
     ),
   ).toMatchInlineSnapshot(`
-    "@layer properties {
+    "
+    @layer properties {
       @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
         *, :before, :after, ::backdrop {
           --tw-backdrop-blur: initial;
@@ -23806,7 +24914,8 @@ test('backdrop-filter', async () => {
     @property --tw-backdrop-sepia {
       syntax: "*";
       inherits: false
-    }"
+    }
+    "
   `)
   expect(
     await run([
@@ -23882,17 +24991,18 @@ test('backdrop-filter', async () => {
   ).toEqual('')
 
   expect(
-    await compileCss(
+    await run(
+      ['backdrop-blur-none'],
       css`
         @theme {
           --backdrop-blur-none: 2px;
         }
         @tailwind utilities;
       `,
-      ['backdrop-blur-none'],
     ),
   ).toMatchInlineSnapshot(`
-    "@layer properties {
+    "
+    @layer properties {
       @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
         *, :before, :after, ::backdrop {
           --tw-backdrop-blur: initial;
@@ -23961,13 +25071,24 @@ test('backdrop-filter', async () => {
     @property --tw-backdrop-sepia {
       syntax: "*";
       inherits: false
-    }"
+    }
+    "
   `)
 })
 
 test('transition', async () => {
   expect(
-    await compileCss(
+    await run(
+      [
+        'transition',
+        'transition-none',
+        'transition-all',
+        'transition-transform',
+        'transition-shadow',
+        'transition-colors',
+        'transition-opacity',
+        'transition-[var(--value)]',
+      ],
       css`
         @theme {
           --default-transition-timing-function: ease;
@@ -23979,19 +25100,10 @@ test('transition', async () => {
         }
         @tailwind utilities;
       `,
-      [
-        'transition',
-        'transition-none',
-        'transition-all',
-        'transition-transform',
-        'transition-shadow',
-        'transition-colors',
-        'transition-opacity',
-        'transition-[var(--value)]',
-      ],
     ),
   ).toMatchInlineSnapshot(`
-    ":root, :host {
+    "
+    :root, :host {
       --default-transition-timing-function: ease;
       --default-transition-duration: .1s;
       --transition-property-opacity: opacity;
@@ -24041,11 +25153,13 @@ test('transition', async () => {
 
     .transition-none {
       transition-property: none;
-    }"
+    }
+    "
   `)
 
   expect(
-    await compileCss(
+    await run(
+      ['transition', 'transition-all', 'transition-colors'],
       css`
         @theme inline {
           --default-transition-timing-function: ease;
@@ -24053,10 +25167,10 @@ test('transition', async () => {
         }
         @tailwind utilities;
       `,
-      ['transition', 'transition-all', 'transition-colors'],
     ),
   ).toMatchInlineSnapshot(`
-    ".transition {
+    "
+    .transition {
       transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
       transition-timing-function: var(--tw-ease, ease);
       transition-duration: var(--tw-duration, .1s);
@@ -24072,22 +25186,18 @@ test('transition', async () => {
       transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
       transition-timing-function: var(--tw-ease, ease);
       transition-duration: var(--tw-duration, .1s);
-    }"
+    }
+    "
   `)
 
-  expect(
-    await compileCss(
-      css`
-        @tailwind utilities;
-      `,
-      ['transition-all'],
-    ),
-  ).toMatchInlineSnapshot(`
-    ".transition-all {
+  expect(await run(['transition-all'])).toMatchInlineSnapshot(`
+    "
+    .transition-all {
       transition-property: all;
       transition-timing-function: var(--tw-ease, ease);
       transition-duration: var(--tw-duration, 0s);
-    }"
+    }
+    "
   `)
 
   expect(
@@ -24109,17 +25219,18 @@ test('transition', async () => {
   ).toEqual('')
 
   expect(
-    await compileCss(
+    await run(
+      ['transition-colors'],
       css`
         @theme {
           --transition-property-colors: transform;
         }
         @tailwind utilities;
       `,
-      ['transition-colors'],
     ),
   ).toMatchInlineSnapshot(`
-    ":root, :host {
+    "
+    :root, :host {
       --transition-property-colors: transform;
     }
 
@@ -24127,19 +25238,22 @@ test('transition', async () => {
       transition-property: var(--transition-property-colors);
       transition-timing-function: var(--tw-ease, ease);
       transition-duration: var(--tw-duration, 0s);
-    }"
+    }
+    "
   `)
 })
 
 test('transition-behavior', async () => {
   expect(await run(['transition-discrete', 'transition-normal'])).toMatchInlineSnapshot(`
-    ".transition-discrete {
+    "
+    .transition-discrete {
       transition-behavior: allow-discrete;
     }
 
     .transition-normal {
       transition-behavior: normal;
-    }"
+    }
+    "
   `)
 
   expect(await run(['-transition-discrete', '-transition-normal'])).toEqual('')
@@ -24147,7 +25261,8 @@ test('transition-behavior', async () => {
 
 test('delay', async () => {
   expect(await run(['delay-123', 'delay-200', 'delay-[300ms]'])).toMatchInlineSnapshot(`
-    ".delay-123 {
+    "
+    .delay-123 {
       transition-delay: .123s;
     }
 
@@ -24157,7 +25272,8 @@ test('delay', async () => {
 
     .delay-\\[300ms\\] {
       transition-delay: .3s;
-    }"
+    }
+    "
   `)
   expect(
     await run([
@@ -24175,7 +25291,8 @@ test('delay', async () => {
 
 test('duration', async () => {
   expect(await run(['duration-123', 'duration-200', 'duration-[300ms]'])).toMatchInlineSnapshot(`
-    "@layer properties {
+    "
+    @layer properties {
       @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
         *, :before, :after, ::backdrop {
           --tw-duration: initial;
@@ -24201,7 +25318,8 @@ test('duration', async () => {
     @property --tw-duration {
       syntax: "*";
       inherits: false
-    }"
+    }
+    "
   `)
   expect(
     await run([
@@ -24218,7 +25336,8 @@ test('duration', async () => {
 
 test('ease', async () => {
   expect(
-    await compileCss(
+    await run(
+      ['ease-in', 'ease-out', 'ease-[var(--value)]'],
       css`
         @theme {
           --ease-in: cubic-bezier(0.4, 0, 1, 1);
@@ -24226,10 +25345,10 @@ test('ease', async () => {
         }
         @tailwind utilities;
       `,
-      ['ease-in', 'ease-out', 'ease-[var(--value)]'],
     ),
   ).toMatchInlineSnapshot(`
-    "@layer properties {
+    "
+    @layer properties {
       @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
         *, :before, :after, ::backdrop {
           --tw-ease: initial;
@@ -24260,7 +25379,8 @@ test('ease', async () => {
     @property --tw-ease {
       syntax: "*";
       inherits: false
-    }"
+    }
+    "
   `)
   expect(
     await run([
@@ -24274,17 +25394,18 @@ test('ease', async () => {
   ).toEqual('')
 
   expect(
-    await compileCss(
+    await run(
+      ['ease-linear'],
       css`
         @theme {
           --ease-linear: steps(4);
         }
         @tailwind utilities;
       `,
-      ['ease-linear'],
     ),
   ).toMatchInlineSnapshot(`
-    "@layer properties {
+    "
+    @layer properties {
       @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
         *, :before, :after, ::backdrop {
           --tw-ease: initial;
@@ -24304,7 +25425,8 @@ test('ease', async () => {
     @property --tw-ease {
       syntax: "*";
       inherits: false
-    }"
+    }
+    "
   `)
 })
 
@@ -24318,7 +25440,8 @@ test('will-change', async () => {
       'will-change-[var(--value)]',
     ]),
   ).toMatchInlineSnapshot(`
-    ".will-change-\\[var\\(--value\\)\\] {
+    "
+    .will-change-\\[var\\(--value\\)\\] {
       will-change: var(--value);
     }
 
@@ -24336,7 +25459,8 @@ test('will-change', async () => {
 
     .will-change-transform {
       will-change: transform;
-    }"
+    }
+    "
   `)
   expect(
     await run([
@@ -24369,7 +25493,8 @@ test('contain', async () => {
       'contain-[unset]',
     ]),
   ).toMatchInlineSnapshot(`
-    "@layer properties {
+    "
+    @layer properties {
       @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
         *, :before, :after, ::backdrop {
           --tw-contain-size: initial;
@@ -24439,7 +25564,8 @@ test('contain', async () => {
     @property --tw-contain-style {
       syntax: "*";
       inherits: false
-    }"
+    }
+    "
   `)
   expect(
     await run([
@@ -24458,17 +25584,18 @@ test('contain', async () => {
 
 test('content', async () => {
   expect(
-    await compileCss(
+    await run(
+      ['content-slash', 'content-["hello_world"]'],
       css`
         @theme {
           --content-slash: '/';
         }
         @tailwind utilities;
       `,
-      ['content-slash', 'content-["hello_world"]'],
     ),
   ).toMatchInlineSnapshot(`
-    "@layer properties {
+    "
+    @layer properties {
       @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
         *, :before, :after, ::backdrop {
           --tw-content: "";
@@ -24494,7 +25621,8 @@ test('content', async () => {
       syntax: "*";
       inherits: false;
       initial-value: "";
-    }"
+    }
+    "
   `)
   expect(await run(['content', '-content-["hello_world"]', 'content-["hello_world"]/foo'])).toEqual(
     '',
@@ -24504,13 +25632,15 @@ test('content', async () => {
 test('forced-color-adjust', async () => {
   expect(await run(['forced-color-adjust-none', 'forced-color-adjust-auto']))
     .toMatchInlineSnapshot(`
-      ".forced-color-adjust-auto {
+      "
+      .forced-color-adjust-auto {
         forced-color-adjust: auto;
       }
 
       .forced-color-adjust-none {
         forced-color-adjust: none;
-      }"
+      }
+      "
     `)
   expect(
     await run([
@@ -24527,7 +25657,8 @@ test('forced-color-adjust', async () => {
 
 test('leading', async () => {
   expect(
-    await compileCss(
+    await run(
+      ['leading-tight', 'leading-6', 'leading-[var(--value)]'],
       css`
         @theme {
           --leading-tight: 1.25;
@@ -24535,10 +25666,10 @@ test('leading', async () => {
         }
         @tailwind utilities;
       `,
-      ['leading-tight', 'leading-6', 'leading-[var(--value)]'],
     ),
   ).toMatchInlineSnapshot(`
-    "@layer properties {
+    "
+    @layer properties {
       @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
         *, :before, :after, ::backdrop {
           --tw-leading: initial;
@@ -24569,7 +25700,8 @@ test('leading', async () => {
     @property --tw-leading {
       syntax: "*";
       inherits: false
-    }"
+    }
+    "
   `)
   expect(
     await run([
@@ -24584,17 +25716,18 @@ test('leading', async () => {
   ).toEqual('')
 
   expect(
-    await compileCss(
+    await run(
+      ['leading-none'],
       css`
         @theme {
           --leading-none: 2;
         }
         @tailwind utilities;
       `,
-      ['leading-none'],
     ),
   ).toMatchInlineSnapshot(`
-    "@layer properties {
+    "
+    @layer properties {
       @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
         *, :before, :after, ::backdrop {
           --tw-leading: initial;
@@ -24614,13 +25747,15 @@ test('leading', async () => {
     @property --tw-leading {
       syntax: "*";
       inherits: false
-    }"
+    }
+    "
   `)
 })
 
 test('tracking', async () => {
   expect(
-    await compileCss(
+    await run(
+      ['tracking-normal', 'tracking-wide', 'tracking-[var(--value)]', '-tracking-[var(--value)]'],
       css`
         @theme {
           --tracking-normal: 0em;
@@ -24628,10 +25763,10 @@ test('tracking', async () => {
         }
         @tailwind utilities;
       `,
-      ['tracking-normal', 'tracking-wide', 'tracking-[var(--value)]', '-tracking-[var(--value)]'],
     ),
   ).toMatchInlineSnapshot(`
-    "@layer properties {
+    "
+    @layer properties {
       @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
         *, :before, :after, ::backdrop {
           --tw-tracking: initial;
@@ -24667,7 +25802,8 @@ test('tracking', async () => {
     @property --tw-tracking {
       syntax: "*";
       inherits: false
-    }"
+    }
+    "
   `)
   expect(
     await run([
@@ -24682,7 +25818,8 @@ test('tracking', async () => {
 
 test('font-smoothing', async () => {
   expect(await run(['antialiased', 'subpixel-antialiased'])).toMatchInlineSnapshot(`
-    ".antialiased {
+    "
+    .antialiased {
       -webkit-font-smoothing: antialiased;
       -moz-osx-font-smoothing: grayscale;
     }
@@ -24690,7 +25827,8 @@ test('font-smoothing', async () => {
     .subpixel-antialiased {
       -webkit-font-smoothing: auto;
       -moz-osx-font-smoothing: auto;
-    }"
+    }
+    "
   `)
   expect(
     await run([
@@ -24716,7 +25854,8 @@ test('font-variant-numeric', async () => {
       'stacked-fractions',
     ]),
   ).toMatchInlineSnapshot(`
-    "@layer properties {
+    "
+    @layer properties {
       @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
         *, :before, :after, ::backdrop {
           --tw-ordinal: initial;
@@ -24795,7 +25934,8 @@ test('font-variant-numeric', async () => {
     @property --tw-numeric-fraction {
       syntax: "*";
       inherits: false
-    }"
+    }
+    "
   `)
   expect(
     await run([
@@ -24823,14 +25963,7 @@ test('font-variant-numeric', async () => {
 
 test('outline', async () => {
   expect(
-    await compileCss(
-      css`
-        @theme {
-          --color-red-500: #ef4444;
-          --outline-color-blue-500: #3b82f6;
-        }
-        @tailwind utilities;
-      `,
+    await run(
       [
         'outline',
         'outline-hidden',
@@ -24880,9 +26013,17 @@ test('outline', async () => {
         'outline-[length:var(--my-width)]',
         'outline-[percentage:var(--my-width)]',
       ],
+      css`
+        @theme {
+          --color-red-500: #ef4444;
+          --outline-color-blue-500: #3b82f6;
+        }
+        @tailwind utilities;
+      `,
     ),
   ).toMatchInlineSnapshot(`
-    "@layer properties {
+    "
+    @layer properties {
       @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
         *, :before, :after, ::backdrop {
           --tw-outline-style: solid;
@@ -25126,20 +26267,22 @@ test('outline', async () => {
       syntax: "*";
       inherits: false;
       initial-value: solid;
-    }"
+    }
+    "
   `)
   expect(
-    await compileCss(
+    await run(
+      ['outline'],
       css`
         @theme {
           --default-outline-width: 2px;
         }
         @tailwind utilities;
       `,
-      ['outline'],
     ),
   ).toMatchInlineSnapshot(`
-    "@layer properties {
+    "
+    @layer properties {
       @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
         *, :before, :after, ::backdrop {
           --tw-outline-style: solid;
@@ -25156,7 +26299,8 @@ test('outline', async () => {
       syntax: "*";
       inherits: false;
       initial-value: solid;
-    }"
+    }
+    "
   `)
   expect(
     await run([
@@ -25208,7 +26352,8 @@ test('outline-offset', async () => {
       '-outline-offset-[var(--value)]',
     ]),
   ).toMatchInlineSnapshot(`
-    ".-outline-offset-4 {
+    "
+    .-outline-offset-4 {
       outline-offset: calc(4px * -1);
     }
 
@@ -25222,7 +26367,8 @@ test('outline-offset', async () => {
 
     .outline-offset-\\[var\\(--value\\)\\] {
       outline-offset: var(--value);
-    }"
+    }
+    "
   `)
   expect(
     await run([
@@ -25247,7 +26393,8 @@ test('opacity', async () => {
       'opacity-[var(--value)]',
     ]),
   ).toMatchInlineSnapshot(`
-    ".opacity-2\\.5 {
+    "
+    .opacity-2\\.5 {
       opacity: .025;
     }
 
@@ -25265,7 +26412,8 @@ test('opacity', async () => {
 
     .opacity-\\[var\\(--value\\)\\] {
       opacity: var(--value);
-    }"
+    }
+    "
   `)
   expect(
     await run([
@@ -25283,12 +26431,7 @@ test('opacity', async () => {
 
 test('underline-offset', async () => {
   expect(
-    await compileCss(
-      css`
-        @theme {
-        }
-        @tailwind utilities;
-      `,
+    await run(
       [
         'underline-offset-auto',
         'underline-offset-4',
@@ -25298,9 +26441,15 @@ test('underline-offset', async () => {
         'underline-offset-[var(--value)]',
         '-underline-offset-[var(--value)]',
       ],
+      css`
+        @theme {
+        }
+        @tailwind utilities;
+      `,
     ),
   ).toMatchInlineSnapshot(`
-    ".-underline-offset-4 {
+    "
+    .-underline-offset-4 {
       text-underline-offset: calc(4px * -1);
     }
 
@@ -25326,7 +26475,8 @@ test('underline-offset', async () => {
 
     .underline-offset-auto {
       text-underline-offset: auto;
-    }"
+    }
+    "
   `)
   expect(
     await run([
@@ -25345,40 +26495,31 @@ test('underline-offset', async () => {
   ).toEqual('')
 
   expect(
-    await compileCss(
+    await run(
+      ['underline-offset-auto'],
       css`
         @theme {
           --text-underline-offset-auto: 4px;
         }
         @tailwind utilities;
       `,
-      ['underline-offset-auto'],
     ),
   ).toMatchInlineSnapshot(`
-    ":root, :host {
+    "
+    :root, :host {
       --text-underline-offset-auto: 4px;
     }
 
     .underline-offset-auto {
       text-underline-offset: var(--text-underline-offset-auto);
-    }"
+    }
+    "
   `)
 })
 
 test('text', async () => {
   expect(
-    await compileCss(
-      css`
-        @theme {
-          --spacing: 0.25rem;
-          --color-red-500: #ef4444;
-          --text-color-blue-500: #3b82f6;
-          --text-sm: 0.875rem;
-          --text-sm--line-height: 1.25rem;
-          --leading-snug: 1.375;
-        }
-        @tailwind utilities;
-      `,
+    await run(
       [
         // color
         'text-red-500',
@@ -25408,15 +26549,18 @@ test('text', async () => {
         'text-[color:var(--my-color)]/50',
         'text-[color:var(--my-color)]/[0.5]',
         'text-[color:var(--my-color)]/[50%]',
+        'text-[--alpha(red/20%)]',
 
         // font-size / line-height / letter-spacing / font-weight
         'text-sm',
+        'text-sm/0',
         'text-sm/6',
         'text-sm/none',
         'text-[10px]/none',
         'text-sm/snug',
         'text-sm/[4px]',
         'text-[12px]',
+        'text-[12px]/0',
         'text-[12px]/6',
         'text-[50%]',
         'text-[50%]/6',
@@ -25431,10 +26575,23 @@ test('text', async () => {
         'text-[clamp(1rem,2rem,3rem)]',
         'text-[clamp(1rem,var(--size),3rem)]',
         'text-[clamp(1rem,var(--size),3rem)]/9',
+        'text-[--spacing(2)]',
       ],
+      css`
+        @theme {
+          --spacing: 0.25rem;
+          --color-red-500: #ef4444;
+          --text-color-blue-500: #3b82f6;
+          --text-sm: 0.875rem;
+          --text-sm--line-height: 1.25rem;
+          --leading-snug: 1.375;
+        }
+        @tailwind utilities;
+      `,
     ),
   ).toMatchInlineSnapshot(`
-    ":root, :host {
+    "
+    :root, :host {
       --spacing: .25rem;
       --color-red-500: #ef4444;
       --text-color-blue-500: #3b82f6;
@@ -25448,6 +26605,11 @@ test('text', async () => {
       line-height: 1;
     }
 
+    .text-\\[12px\\]\\/0 {
+      font-size: 12px;
+      line-height: 0;
+    }
+
     .text-\\[12px\\]\\/6 {
       font-size: 12px;
       line-height: calc(var(--spacing) * 6);
@@ -25478,6 +26640,11 @@ test('text', async () => {
       line-height: var(--tw-leading, var(--text-sm--line-height));
     }
 
+    .text-sm\\/0 {
+      font-size: var(--text-sm);
+      line-height: 0;
+    }
+
     .text-sm\\/6 {
       font-size: var(--text-sm);
       line-height: calc(var(--spacing) * 6);
@@ -25498,6 +26665,10 @@ test('text', async () => {
       line-height: var(--leading-snug);
     }
 
+    .text-\\[--spacing\\(2\\)\\] {
+      font-size: calc(var(--spacing) * 2);
+    }
+
     .text-\\[12px\\] {
       font-size: 12px;
     }
@@ -25538,6 +26709,10 @@ test('text', async () => {
       color: oklab(59.9824% -.067 -.124 / .5);
     }
 
+    .text-\\[--alpha\\(red\\/20\\%\\)\\] {
+      color: oklab(62.7955% .224 .125 / .2);
+    }
+
     .text-\\[color\\:var\\(--my-color\\)\\], .text-\\[color\\:var\\(--my-color\\)\\]\\/50 {
       color: var(--my-color);
     }
@@ -25702,16 +26877,11 @@ test('text', async () => {
 
     .text-transparent {
       color: #0000;
-    }"
+    }
+    "
   `)
   expect(
-    await compileCss(
-      css`
-        @theme inline reference {
-          --text-sm: 0.875rem;
-        }
-        @tailwind utilities;
-      `,
+    await run(
       [
         'text',
         // color
@@ -25737,21 +26907,19 @@ test('text', async () => {
         '-text-sm/[4px]',
         'text-[10px]/foo',
       ],
+      css`
+        @theme inline reference {
+          --text-sm: 0.875rem;
+        }
+        @tailwind utilities;
+      `,
     ),
   ).toEqual('')
 })
 
 test('text-shadow', async () => {
   expect(
-    await compileCss(
-      css`
-        @theme {
-          --color-red-500: #ef4444;
-          --text-shadow-2xs: 0px 1px 0px rgb(0 0 0 / 0.1);
-          --text-shadow-sm: 0px 1px 2px rgb(0 0 0 / 0.06), 0px 2px 2px rgb(0 0 0 / 0.06);
-        }
-        @tailwind utilities;
-      `,
+    await run(
       [
         // Shadows
         'text-shadow-2xs',
@@ -25764,6 +26932,7 @@ test('text-shadow', async () => {
         'text-shadow-[shadow:var(--value)]',
 
         'text-shadow-sm/25',
+        'text-shadow-sm/12.5',
         'text-shadow-[12px_12px_#0088cc]/25',
         'text-shadow-[12px_12px_var(--value)]/25',
         'text-shadow-[10px_10px]/25',
@@ -25791,9 +26960,18 @@ test('text-shadow', async () => {
         'text-shadow-[color:var(--value)]/[0.5]',
         'text-shadow-[color:var(--value)]/[50%]',
       ],
+      css`
+        @theme {
+          --color-red-500: #ef4444;
+          --text-shadow-2xs: 0px 1px 0px rgb(0 0 0 / 0.1);
+          --text-shadow-sm: 0px 1px 2px rgb(0 0 0 / 0.06), 0px 2px 2px rgb(0 0 0 / 0.06);
+        }
+        @tailwind utilities;
+      `,
     ),
   ).toMatchInlineSnapshot(`
-    "@layer properties {
+    "
+    @layer properties {
       @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
         *, :before, :after, ::backdrop {
           --tw-text-shadow-color: initial;
@@ -25833,6 +27011,11 @@ test('text-shadow', async () => {
       text-shadow: 12px 12px var(--tw-text-shadow-color, oklab(59.9824% -.067 -.124 / .25));
     }
 
+    .text-shadow-sm\\/12\\.5 {
+      --tw-text-shadow-alpha: 12.5%;
+      text-shadow: 0px 1px 2px var(--tw-text-shadow-color, oklab(0% 0 0 / .125)), 0px 2px 2px var(--tw-text-shadow-color, oklab(0% 0 0 / .125));
+    }
+
     .text-shadow-sm\\/25 {
       --tw-text-shadow-alpha: 25%;
       text-shadow: 0px 1px 2px var(--tw-text-shadow-color, oklab(0% 0 0 / .25)), 0px 2px 2px var(--tw-text-shadow-color, oklab(0% 0 0 / .25));
@@ -26079,43 +27262,46 @@ test('text-shadow', async () => {
       syntax: "<percentage>";
       inherits: false;
       initial-value: 100%;
-    }"
+    }
+    "
   `)
   expect(
-    await run([
-      '-shadow-xl',
-      '-shadow-none',
-      '-shadow-red-500',
-      '-shadow-red-500/50',
-      '-shadow-red-500/[0.5]',
-      '-shadow-red-500/[50%]',
-      '-shadow-current',
-      '-shadow-current/50',
-      '-shadow-current/[0.5]',
-      '-shadow-current/[50%]',
-      '-shadow-inherit',
-      '-shadow-transparent',
-      '-shadow-[#0088cc]',
-      '-shadow-[#0088cc]/50',
-      '-shadow-[#0088cc]/[0.5]',
-      '-shadow-[#0088cc]/[50%]',
-      '-shadow-[var(--value)]',
-    ]),
+    await run(
+      [
+        '-text-shadow-sm',
+        '-text-shadow-none',
+        '-text-shadow-red-500',
+        '-text-shadow-red-500/50',
+        '-text-shadow-red-500/[0.5]',
+        '-text-shadow-red-500/[50%]',
+        '-text-shadow-current',
+        '-text-shadow-current/50',
+        '-text-shadow-current/[0.5]',
+        '-text-shadow-current/[50%]',
+        '-text-shadow-inherit',
+        '-text-shadow-transparent',
+        '-text-shadow-[#0088cc]',
+        '-text-shadow-[#0088cc]/50',
+        '-text-shadow-[#0088cc]/[0.5]',
+        '-text-shadow-[#0088cc]/[50%]',
+        '-text-shadow-[var(--value)]',
+        'text-shadow/foo',
+        'text-shadow-sm/foo',
+      ],
+      css`
+        @theme {
+          --text-shadow: 0 1px 1px rgb(0 0 0 / 0.05);
+          --text-shadow-sm: 0 1px 2px rgb(0 0 0 / 0.06);
+        }
+        @tailwind utilities;
+      `,
+    ),
   ).toEqual('')
 })
 
 test('shadow', async () => {
   expect(
-    await compileCss(
-      css`
-        @theme {
-          --color-red-500: #ef4444;
-          --box-shadow-color-blue-500: #3b82f6;
-          --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
-          --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
-        }
-        @tailwind utilities;
-      `,
+    await run(
       [
         // Shadows
         'shadow-sm',
@@ -26128,6 +27314,7 @@ test('shadow', async () => {
         'shadow-[shadow:var(--value)]',
 
         'shadow-sm/25',
+        'shadow-sm/12.5',
         'shadow-[12px_12px_#0088cc]/25',
         'shadow-[12px_12px_var(--value)]/25',
         'shadow-[10px_10px]/25',
@@ -26156,9 +27343,19 @@ test('shadow', async () => {
         'shadow-[color:var(--value)]/[0.5]',
         'shadow-[color:var(--value)]/[50%]',
       ],
+      css`
+        @theme {
+          --color-red-500: #ef4444;
+          --box-shadow-color-blue-500: #3b82f6;
+          --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
+          --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
+        }
+        @tailwind utilities;
+      `,
     ),
   ).toMatchInlineSnapshot(`
-    "@layer properties {
+    "
+    @layer properties {
       @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
         *, :before, :after, ::backdrop {
           --tw-shadow: 0 0 #0000;
@@ -26220,6 +27417,12 @@ test('shadow', async () => {
       box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
     }
 
+    .shadow-sm\\/12\\.5 {
+      --tw-shadow-alpha: 12.5%;
+      --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, oklab(0% 0 0 / .125)), 0 1px 2px -1px var(--tw-shadow-color, oklab(0% 0 0 / .125));
+      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+    }
+
     .shadow-sm\\/25 {
       --tw-shadow-alpha: 25%;
       --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, oklab(0% 0 0 / .25)), 0 1px 2px -1px var(--tw-shadow-color, oklab(0% 0 0 / .25));
@@ -26552,42 +27755,48 @@ test('shadow', async () => {
       syntax: "*";
       inherits: false;
       initial-value: 0 0 #0000;
-    }"
+    }
+    "
   `)
   expect(
-    await run([
-      '-shadow-xl',
-      '-shadow-none',
-      '-shadow-red-500',
-      '-shadow-red-500/50',
-      '-shadow-red-500/[0.5]',
-      '-shadow-red-500/[50%]',
-      '-shadow-current',
-      '-shadow-current/50',
-      '-shadow-current/[0.5]',
-      '-shadow-current/[50%]',
-      '-shadow-inherit',
-      '-shadow-transparent',
-      '-shadow-[#0088cc]',
-      '-shadow-[#0088cc]/50',
-      '-shadow-[#0088cc]/[0.5]',
-      '-shadow-[#0088cc]/[50%]',
-      '-shadow-[var(--value)]',
-    ]),
+    await run(
+      [
+        '-shadow-sm',
+        '-shadow-none',
+        '-shadow-red-500',
+        '-shadow-red-500/50',
+        '-shadow-red-500/[0.5]',
+        '-shadow-red-500/[50%]',
+        '-shadow-current',
+        '-shadow-current/50',
+        '-shadow-current/[0.5]',
+        '-shadow-current/[50%]',
+        '-shadow-inherit',
+        '-shadow-transparent',
+        '-shadow-[#0088cc]',
+        '-shadow-[#0088cc]/50',
+        '-shadow-[#0088cc]/[0.5]',
+        '-shadow-[#0088cc]/[50%]',
+        '-shadow-[var(--value)]',
+        'shadow/foo',
+        'shadow-sm/foo',
+        'shadow-[10px_10px]/foo',
+        'shadow-[#0088cc]/foo',
+      ],
+      css`
+        @theme {
+          --shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1);
+          --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
+        }
+        @tailwind utilities;
+      `,
+    ),
   ).toEqual('')
 })
 
 test('inset-shadow', async () => {
   expect(
-    await compileCss(
-      css`
-        @theme {
-          --color-red-500: #ef4444;
-          --inset-shadow: inset 0 2px 4px rgb(0 0 0 / 0.05);
-          --inset-shadow-sm: inset 0 1px 1px rgb(0 0 0 / 0.05);
-        }
-        @tailwind utilities;
-      `,
+    await run(
       [
         // Shadows
         'inset-shadow',
@@ -26601,6 +27810,7 @@ test('inset-shadow', async () => {
         'inset-shadow-[12px_12px_#0088cc,12px_12px_var(--value,#0088cc)]',
 
         'inset-shadow-sm/25',
+        'inset-shadow-sm/12.5',
         'inset-shadow-[12px_12px_#0088cc]/25',
         'inset-shadow-[12px_12px_var(--value)]/25',
         'inset-shadow-[10px_10px]/25',
@@ -26629,9 +27839,18 @@ test('inset-shadow', async () => {
         'inset-shadow-[color:var(--value)]/[0.5]',
         'inset-shadow-[color:var(--value)]/[50%]',
       ],
+      css`
+        @theme {
+          --color-red-500: #ef4444;
+          --inset-shadow: inset 0 2px 4px rgb(0 0 0 / 0.05);
+          --inset-shadow-sm: inset 0 1px 1px rgb(0 0 0 / 0.05);
+        }
+        @tailwind utilities;
+      `,
     ),
   ).toMatchInlineSnapshot(`
-    "@layer properties {
+    "
+    @layer properties {
       @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
         *, :before, :after, ::backdrop {
           --tw-shadow: 0 0 #0000;
@@ -26707,6 +27926,12 @@ test('inset-shadow', async () => {
       box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
     }
 
+    .inset-shadow-sm\\/12\\.5 {
+      --tw-inset-shadow-alpha: 12.5%;
+      --tw-inset-shadow: inset 0 1px 1px var(--tw-inset-shadow-color, oklab(0% 0 0 / .125));
+      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+    }
+
     .inset-shadow-sm\\/25 {
       --tw-inset-shadow-alpha: 25%;
       --tw-inset-shadow: inset 0 1px 1px var(--tw-inset-shadow-color, oklab(0% 0 0 / .25));
@@ -26744,7 +27969,7 @@ test('inset-shadow', async () => {
     }
 
     .inset-shadow-none {
-      --tw-inset-shadow: 0 0 #0000;
+      --tw-inset-shadow: inset 0 0 #0000;
       box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
     }
 
@@ -27034,41 +28259,47 @@ test('inset-shadow', async () => {
       syntax: "*";
       inherits: false;
       initial-value: 0 0 #0000;
-    }"
+    }
+    "
   `)
   expect(
-    await run([
-      '-inset-shadow-sm',
-      '-inset-shadow-none',
-      '-inset-shadow-red-500',
-      '-inset-shadow-red-500/50',
-      '-inset-shadow-red-500/[0.5]',
-      '-inset-shadow-red-500/[50%]',
-      '-inset-shadow-current',
-      '-inset-shadow-current/50',
-      '-inset-shadow-current/[0.5]',
-      '-inset-shadow-current/[50%]',
-      '-inset-shadow-inherit',
-      '-inset-shadow-transparent',
-      '-inset-shadow-[#0088cc]',
-      '-inset-shadow-[#0088cc]/50',
-      '-inset-shadow-[#0088cc]/[0.5]',
-      '-inset-shadow-[#0088cc]/[50%]',
-      '-inset-shadow-[var(--value)]',
-    ]),
+    await run(
+      [
+        '-inset-shadow-sm',
+        '-inset-shadow-none',
+        '-inset-shadow-red-500',
+        '-inset-shadow-red-500/50',
+        '-inset-shadow-red-500/[0.5]',
+        '-inset-shadow-red-500/[50%]',
+        '-inset-shadow-current',
+        '-inset-shadow-current/50',
+        '-inset-shadow-current/[0.5]',
+        '-inset-shadow-current/[50%]',
+        '-inset-shadow-inherit',
+        '-inset-shadow-transparent',
+        '-inset-shadow-[#0088cc]',
+        '-inset-shadow-[#0088cc]/50',
+        '-inset-shadow-[#0088cc]/[0.5]',
+        '-inset-shadow-[#0088cc]/[50%]',
+        '-inset-shadow-[var(--value)]',
+        'inset-shadow/foo',
+        'inset-shadow-sm/foo',
+        'inset-shadow-[10px_10px]/foo',
+      ],
+      css`
+        @theme {
+          --inset-shadow: inset 0 1px 3px 0 rgb(0 0 0 / 0.1);
+          --inset-shadow-sm: inset 0 1px 1px rgb(0 0 0 / 0.05);
+        }
+        @tailwind utilities;
+      `,
+    ),
   ).toEqual('')
 })
 
 test('ring', async () => {
   expect(
-    await compileCss(
-      css`
-        @theme {
-          --color-red-500: #ef4444;
-          --ring-color-blue-500: #3b82f6;
-        }
-        @tailwind utilities;
-      `,
+    await run(
       [
         // ring color
         'ring-inset',
@@ -27108,9 +28339,17 @@ test('ring', async () => {
         'ring-[12px]',
         'ring-[length:var(--my-width)]',
       ],
+      css`
+        @theme {
+          --color-red-500: #ef4444;
+          --ring-color-blue-500: #3b82f6;
+        }
+        @tailwind utilities;
+      `,
     ),
   ).toMatchInlineSnapshot(`
-    "@layer properties {
+    "
+    @layer properties {
       @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
         *, :before, :after, ::backdrop {
           --tw-shadow: 0 0 #0000;
@@ -27426,20 +28665,22 @@ test('ring', async () => {
       syntax: "*";
       inherits: false;
       initial-value: 0 0 #0000;
-    }"
+    }
+    "
   `)
   expect(
-    await compileCss(
+    await run(
+      ['ring'],
       css`
         @theme {
           --default-ring-width: 2px;
         }
         @tailwind utilities;
       `,
-      ['ring'],
     ),
   ).toMatchInlineSnapshot(`
-    "@layer properties {
+    "
+    @layer properties {
       @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
         *, :before, :after, ::backdrop {
           --tw-shadow: 0 0 #0000;
@@ -27542,7 +28783,8 @@ test('ring', async () => {
       syntax: "*";
       inherits: false;
       initial-value: 0 0 #0000;
-    }"
+    }
+    "
   `)
   expect(
     await run([
@@ -27584,13 +28826,7 @@ test('ring', async () => {
 
 test('inset-ring', async () => {
   expect(
-    await compileCss(
-      css`
-        @theme {
-          --color-red-500: #ef4444;
-        }
-        @tailwind utilities;
-      `,
+    await run(
       [
         // ring color
         'inset-ring-red-500',
@@ -27628,9 +28864,16 @@ test('inset-ring', async () => {
         'inset-ring-[12px]',
         'inset-ring-[length:var(--my-width)]',
       ],
+      css`
+        @theme {
+          --color-red-500: #ef4444;
+        }
+        @tailwind utilities;
+      `,
     ),
   ).toMatchInlineSnapshot(`
-    "@layer properties {
+    "
+    @layer properties {
       @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
         *, :before, :after, ::backdrop {
           --tw-shadow: 0 0 #0000;
@@ -27937,7 +29180,8 @@ test('inset-ring', async () => {
       syntax: "*";
       inherits: false;
       initial-value: 0 0 #0000;
-    }"
+    }
+    "
   `)
   expect(
     await run([
@@ -27978,14 +29222,7 @@ test('inset-ring', async () => {
 
 test('ring-offset', async () => {
   expect(
-    await compileCss(
-      css`
-        @theme {
-          --color-red-500: #ef4444;
-          --ring-offset-color-blue-500: #3b82f6;
-        }
-        @tailwind utilities;
-      `,
+    await run(
       [
         // ring color
         'ring-offset-inset',
@@ -28022,9 +29259,17 @@ test('ring-offset', async () => {
         'ring-offset-[12px]',
         'ring-offset-[length:var(--my-width)]',
       ],
+      css`
+        @theme {
+          --color-red-500: #ef4444;
+          --ring-offset-color-blue-500: #3b82f6;
+        }
+        @tailwind utilities;
+      `,
     ),
   ).toMatchInlineSnapshot(`
-    ":root, :host {
+    "
+    :root, :host {
       --color-red-500: #ef4444;
       --ring-offset-color-blue-500: #3b82f6;
     }
@@ -28201,7 +29446,8 @@ test('ring-offset', async () => {
 
     .ring-offset-transparent {
       --tw-ring-offset-color: transparent;
-    }"
+    }
+    "
   `)
   expect(
     await run([
@@ -28251,7 +29497,8 @@ test('@container', async () => {
       '@container-size/sidebar',
     ]),
   ).toMatchInlineSnapshot(`
-    ".\\@container-normal\\/sidebar {
+    "
+    .\\@container-normal\\/sidebar {
       container: sidebar;
     }
 
@@ -28273,7 +29520,8 @@ test('@container', async () => {
 
     .\\@container-size {
       container-type: size;
-    }"
+    }
+    "
   `)
   expect(
     await run([
@@ -28289,58 +29537,69 @@ test('@container', async () => {
 
 describe('spacing utilities', () => {
   test('`--spacing: initial` disables the spacing multiplier', async () => {
-    let { build } = await compile(css`
-      @theme {
-        --spacing: initial;
-        --spacing-4: 1rem;
-      }
-      @tailwind utilities;
-    `)
-    let compiled = build(['px-1', 'px-4'])
-
-    expect(optimizeCss(compiled).trim()).toMatchInlineSnapshot(`
-      ":root, :host {
+    expect(
+      await run(
+        ['px-1', 'px-4'],
+        css`
+          @theme {
+            --spacing: initial;
+            --spacing-4: 1rem;
+          }
+          @tailwind utilities;
+        `,
+      ),
+    ).toMatchInlineSnapshot(`
+      "
+      :root, :host {
         --spacing-4: 1rem;
       }
 
       .px-4 {
         padding-inline: var(--spacing-4);
-      }"
+      }
+      "
     `)
   })
 
   test('`--spacing-*: initial` disables the spacing multiplier', async () => {
-    let { build } = await compile(css`
-      @theme {
-        --spacing-*: initial;
-        --spacing-4: 1rem;
-      }
-      @tailwind utilities;
-    `)
-    let compiled = build(['px-1', 'px-4'])
-
-    expect(optimizeCss(compiled).trim()).toMatchInlineSnapshot(`
-      ":root, :host {
+    expect(
+      await run(
+        ['px-1', 'px-4'],
+        css`
+          @theme {
+            --spacing-*: initial;
+            --spacing-4: 1rem;
+          }
+          @tailwind utilities;
+        `,
+      ),
+    ).toMatchInlineSnapshot(`
+      "
+      :root, :host {
         --spacing-4: 1rem;
       }
 
       .px-4 {
         padding-inline: var(--spacing-4);
-      }"
+      }
+      "
     `)
   })
 
   test('only multiples of 0.25 with no trailing zeroes are supported with the spacing multiplier', async () => {
-    let { build } = await compile(css`
-      @theme {
-        --spacing: 4px;
-      }
-      @tailwind utilities;
-    `)
-    let compiled = build(['px-0.25', 'px-1.5', 'px-2.75', 'px-0.375', 'px-2.50', 'px-.75'])
-
-    expect(optimizeCss(compiled).trim()).toMatchInlineSnapshot(`
-      ":root, :host {
+    expect(
+      await run(
+        ['px-0.25', 'px-1.5', 'px-2.75', 'px-0.375', 'px-2.50', 'px-.75'],
+        css`
+          @theme {
+            --spacing: 4px;
+          }
+          @tailwind utilities;
+        `,
+      ),
+    ).toMatchInlineSnapshot(`
+      "
+      :root, :host {
         --spacing: 4px;
       }
 
@@ -28354,34 +29613,40 @@ describe('spacing utilities', () => {
 
       .px-2\\.75 {
         padding-inline: calc(var(--spacing) * 2.75);
-      }"
+      }
+      "
     `)
   })
 
   test('spacing utilities must have a value', async () => {
-    let { build } = await compile(css`
-      @theme reference {
-        --spacing: 4px;
-      }
-      @tailwind utilities;
-    `)
-    let compiled = build(['px'])
-
-    expect(optimizeCss(compiled).trim()).toEqual('')
+    expect(
+      await run(
+        ['px'],
+        css`
+          @theme reference {
+            --spacing: 4px;
+          }
+          @tailwind utilities;
+        `,
+      ),
+    ).toEqual('')
   })
 
   test('--spacing-* variables take precedence over --container-* variables', async () => {
-    let { build } = await compile(css`
-      @theme {
-        --spacing-sm: 8px;
-        --container-sm: 256px;
-      }
-      @tailwind utilities;
-    `)
-    let compiled = build(['w-sm', 'max-w-sm', 'min-w-sm', 'basis-sm'])
-
-    expect(optimizeCss(compiled).trim()).toMatchInlineSnapshot(`
-      ":root, :host {
+    expect(
+      await run(
+        ['w-sm', 'max-w-sm', 'min-w-sm', 'basis-sm'],
+        css`
+          @theme {
+            --spacing-sm: 8px;
+            --container-sm: 256px;
+          }
+          @tailwind utilities;
+        `,
+      ),
+    ).toMatchInlineSnapshot(`
+      "
+      :root, :host {
         --spacing-sm: 8px;
       }
 
@@ -28399,7 +29664,8 @@ describe('spacing utilities', () => {
 
       .basis-sm {
         flex-basis: var(--spacing-sm);
-      }"
+      }
+      "
     `)
   })
 })
@@ -28448,24 +29714,27 @@ describe('custom utilities', () => {
   })
 
   test('custom static utility', async () => {
-    let { build } = await compile(css`
+    expect(
+      await run(
+        ['text-trim', 'lg:text-trim'],
+        css`
+          @layer utilities {
+            @tailwind utilities;
+          }
+
+          @theme reference {
+            --breakpoint-lg: 1024px;
+          }
+
+          @utility text-trim {
+            text-box-trim: both;
+            text-box-edge: cap alphabetic;
+          }
+        `,
+      ),
+    ).toMatchInlineSnapshot(`
+      "
       @layer utilities {
-        @tailwind utilities;
-      }
-
-      @theme reference {
-        --breakpoint-lg: 1024px;
-      }
-
-      @utility text-trim {
-        text-box-trim: both;
-        text-box-edge: cap alphabetic;
-      }
-    `)
-    let compiled = build(['text-trim', 'lg:text-trim'])
-
-    expect(optimizeCss(compiled).trim()).toMatchInlineSnapshot(`
-      "@layer utilities {
         .text-trim {
           text-box-trim: both;
           text-box-edge: cap alphabetic;
@@ -28477,12 +29746,13 @@ describe('custom utilities', () => {
             text-box-edge: cap alphabetic;
           }
         }
-      }"
+      }
+      "
     `)
   })
 
   test('custom static utility emit CSS variables if the utility is used', async () => {
-    let { build } = await compile(css`
+    let input = css`
       @layer utilities {
         @tailwind utilities;
       }
@@ -28494,16 +29764,19 @@ describe('custom utilities', () => {
       @utility foo {
         value: var(--example-foo);
       }
-    `)
-    let compiled = build([])
+    `
 
     // `foo` is not used yet:
-    expect(optimizeCss(compiled).trim()).toMatchInlineSnapshot(`"@layer utilities;"`)
+    expect(await compileCss(input)).toMatchInlineSnapshot(`
+      "
+      @layer utilities;
+      "
+    `)
 
     // `foo` is used, and the CSS variable is emitted:
-    compiled = build(['foo'])
-    expect(optimizeCss(compiled).trim()).toMatchInlineSnapshot(`
-      "@layer utilities {
+    expect(await run(['foo'], input)).toMatchInlineSnapshot(`
+      "
+      @layer utilities {
         .foo {
           value: var(--example-foo);
         }
@@ -28511,104 +29784,120 @@ describe('custom utilities', () => {
 
       :root, :host {
         --example-foo: 123px;
-      }"
+      }
+      "
     `)
   })
 
   test('custom static utility (negative)', async () => {
-    let { build } = await compile(css`
+    expect(
+      await run(
+        ['-example', 'lg:-example'],
+        css`
+          @layer utilities {
+            @tailwind utilities;
+          }
+
+          @utility -example {
+            value: -1;
+          }
+        `,
+      ),
+    ).toMatchInlineSnapshot(`
+      "
       @layer utilities {
-        @tailwind utilities;
-      }
-
-      @utility -example {
-        value: -1;
-      }
-    `)
-    let compiled = build(['-example', 'lg:-example'])
-
-    expect(optimizeCss(compiled).trim()).toMatchInlineSnapshot(`
-      "@layer utilities {
         .-example {
           value: -1;
         }
-      }"
+      }
+      "
     `)
   })
 
   test('Multiple static utilities are merged', async () => {
-    let { build } = await compile(css`
+    expect(
+      await run(
+        ['really-round'],
+        css`
+          @layer utilities {
+            @tailwind utilities;
+          }
+
+          @utility really-round {
+            --custom-prop: hi;
+            border-radius: 50rem;
+          }
+
+          @utility really-round {
+            border-radius: 30rem;
+          }
+        `,
+      ),
+    ).toMatchInlineSnapshot(`
+      "
       @layer utilities {
-        @tailwind utilities;
-      }
-
-      @utility really-round {
-        --custom-prop: hi;
-        border-radius: 50rem;
-      }
-
-      @utility really-round {
-        border-radius: 30rem;
-      }
-    `)
-    let compiled = build(['really-round'])
-
-    expect(optimizeCss(compiled).trim()).toMatchInlineSnapshot(`
-      "@layer utilities {
         .really-round {
           --custom-prop: hi;
           border-radius: 30rem;
         }
-      }"
+      }
+      "
     `)
   })
 
   test('custom utilities support some special characters', async () => {
-    let { build } = await compile(css`
+    expect(
+      await run(
+        ['push-1/2', 'push-50%'],
+        css`
+          @layer utilities {
+            @tailwind utilities;
+          }
+
+          @utility push-1/2 {
+            right: 50%;
+          }
+
+          @utility push-50% {
+            right: 50%;
+          }
+        `,
+      ),
+    ).toMatchInlineSnapshot(`
+      "
       @layer utilities {
-        @tailwind utilities;
-      }
-
-      @utility push-1/2 {
-        right: 50%;
-      }
-
-      @utility push-50% {
-        right: 50%;
-      }
-    `)
-    let compiled = build(['push-1/2', 'push-50%'])
-
-    expect(optimizeCss(compiled).trim()).toMatchInlineSnapshot(`
-      "@layer utilities {
         .push-1\\/2, .push-50\\% {
           right: 50%;
         }
-      }"
+      }
+      "
     `)
   })
 
   test('can override specific versions of a functional utility with a static utility', async () => {
-    let { build } = await compile(css`
+    expect(
+      await run(
+        ['text-sm'],
+        css`
+          @layer utilities {
+            @tailwind utilities;
+          }
+
+          @theme reference {
+            --text-sm: 0.875rem;
+            --text-sm--line-height: 1.25rem;
+          }
+
+          @utility text-sm {
+            font-size: var(--text-sm, 0.8755rem);
+            line-height: var(--text-sm--line-height, 1.255rem);
+            text-rendering: optimizeLegibility;
+          }
+        `,
+      ),
+    ).toMatchInlineSnapshot(`
+      "
       @layer utilities {
-        @tailwind utilities;
-      }
-
-      @theme reference {
-        --text-sm: 0.875rem;
-        --text-sm--line-height: 1.25rem;
-      }
-
-      @utility text-sm {
-        font-size: var(--text-sm, 0.8755rem);
-        line-height: var(--text-sm--line-height, 1.255rem);
-        text-rendering: optimizeLegibility;
-      }
-    `)
-    let compiled = build(['text-sm'])
-
-    expect(optimizeCss(compiled).trim()).toMatchInlineSnapshot(`
-      "@layer utilities {
         .text-sm {
           font-size: var(--text-sm, .8755rem);
           line-height: var(--text-sm--line-height, 1.255rem);
@@ -28616,28 +29905,32 @@ describe('custom utilities', () => {
           font-size: var(--text-sm, .875rem);
           line-height: var(--tw-leading, var(--text-sm--line-height, 1.25rem));
         }
-      }"
+      }
+      "
     `)
   })
 
   test('can override the default value of a functional utility', async () => {
-    let { build } = await compile(css`
+    expect(
+      await run(
+        ['rounded', 'rounded-xl', 'rounded-[33px]'],
+        css`
+          @layer utilities {
+            @tailwind utilities;
+          }
+
+          @theme reference {
+            --radius-xl: 16px;
+          }
+
+          @utility rounded {
+            border-radius: 50rem;
+          }
+        `,
+      ),
+    ).toMatchInlineSnapshot(`
+      "
       @layer utilities {
-        @tailwind utilities;
-      }
-
-      @theme reference {
-        --radius-xl: 16px;
-      }
-
-      @utility rounded {
-        border-radius: 50rem;
-      }
-    `)
-    let compiled = build(['rounded', 'rounded-xl', 'rounded-[33px]'])
-
-    expect(optimizeCss(compiled).trim()).toMatchInlineSnapshot(`
-      "@layer utilities {
         .rounded {
           border-radius: 50rem;
         }
@@ -28649,24 +29942,28 @@ describe('custom utilities', () => {
         .rounded-xl {
           border-radius: var(--radius-xl, 16px);
         }
-      }"
+      }
+      "
     `)
   })
 
   test('custom utilities are sorted by used properties', async () => {
-    let { build } = await compile(css`
+    expect(
+      await run(
+        ['top-[100px]', 'push-left', 'right-[100px]', 'bottom-[100px]'],
+        css`
+          @layer utilities {
+            @tailwind utilities;
+          }
+
+          @utility push-left {
+            right: 100%;
+          }
+        `,
+      ),
+    ).toMatchInlineSnapshot(`
+      "
       @layer utilities {
-        @tailwind utilities;
-      }
-
-      @utility push-left {
-        right: 100%;
-      }
-    `)
-    let compiled = build(['top-[100px]', 'push-left', 'right-[100px]', 'bottom-[100px]'])
-
-    expect(optimizeCss(compiled).trim()).toMatchInlineSnapshot(`
-      "@layer utilities {
         .top-\\[100px\\] {
           top: 100px;
         }
@@ -28682,7 +29979,8 @@ describe('custom utilities', () => {
         .bottom-\\[100px\\] {
           bottom: 100px;
         }
-      }"
+      }
+      "
     `)
   })
 
@@ -28693,7 +29991,7 @@ describe('custom utilities', () => {
           right: 100%;
         }
       `),
-    ).rejects.toThrowError(/should be alphanumeric/)
+    ).rejects.toThrow(/should be alphanumeric/)
 
     await expect(() =>
       compile(css`
@@ -28701,7 +29999,7 @@ describe('custom utilities', () => {
           right: 100%;
         }
       `),
-    ).rejects.toThrowError(/should be alphanumeric/)
+    ).rejects.toThrow(/should be alphanumeric/)
 
     await expect(() =>
       compile(css`
@@ -28709,12 +30007,13 @@ describe('custom utilities', () => {
           right: 100%;
         }
       `),
-    ).rejects.toThrowError(/should be alphanumeric/)
+    ).rejects.toThrow(/should be alphanumeric/)
   })
 
   test('custom utilities work with `@apply`', async () => {
     expect(
-      await compileCss(
+      await run(
+        ['foo', 'hover:foo', 'bar'],
         css`
           @utility foo {
             @apply flex flex-col underline;
@@ -28730,10 +30029,10 @@ describe('custom utilities', () => {
 
           @tailwind utilities;
         `,
-        ['foo', 'hover:foo', 'bar'],
       ),
     ).toMatchInlineSnapshot(`
-      ".bar {
+      "
+      .bar {
         z-index: 10;
       }
 
@@ -28753,13 +30052,15 @@ describe('custom utilities', () => {
           text-decoration-line: underline;
           display: flex;
         }
-      }"
+      }
+      "
     `)
   })
 
   test('referencing custom utilities in custom utilities via `@apply` should work', async () => {
     expect(
-      await compileCss(
+      await run(
+        ['bar'],
         css`
           @utility foo {
             @apply flex flex-col underline;
@@ -28771,10 +30072,10 @@ describe('custom utilities', () => {
 
           @tailwind utilities;
         `,
-        ['bar'],
       ),
     ).toMatchInlineSnapshot(`
-      ".bar {
+      "
+      .bar {
         flex-wrap: wrap;
       }
 
@@ -28784,13 +30085,15 @@ describe('custom utilities', () => {
           text-decoration-line: underline;
           display: flex;
         }
-      }"
+      }
+      "
     `)
   })
 
   test('custom utilities with `@apply` causing circular dependencies should error', async () => {
     await expect(() =>
-      compileCss(
+      run(
+        ['foo', 'bar'],
         css`
           @utility foo {
             @apply flex-wrap hover:bar;
@@ -28802,7 +30105,6 @@ describe('custom utilities', () => {
 
           @tailwind utilities;
         `,
-        ['foo', 'bar'],
       ),
     ).rejects.toThrowErrorMatchingInlineSnapshot(
       `[Error: You cannot \`@apply\` the \`hover:bar\` utility here because it creates a circular dependency.]`,
@@ -28811,7 +30113,8 @@ describe('custom utilities', () => {
 
   test('custom utilities with `@apply` causing circular dependencies should error (deeply nesting)', async () => {
     await expect(() =>
-      compileCss(
+      run(
+        ['foo', 'bar'],
         css`
           @utility foo {
             .bar {
@@ -28833,7 +30136,6 @@ describe('custom utilities', () => {
 
           @tailwind utilities;
         `,
-        ['foo', 'bar'],
       ),
     ).rejects.toThrowErrorMatchingInlineSnapshot(
       `[Error: You cannot \`@apply\` the \`hover:bar\` utility here because it creates a circular dependency.]`,
@@ -28842,7 +30144,8 @@ describe('custom utilities', () => {
 
   test('custom utilities with `@apply` causing circular dependencies should error (multiple levels)', async () => {
     await expect(() =>
-      compileCss(
+      run(
+        ['foo', 'bar'],
         css`
           body {
             @apply foo;
@@ -28862,7 +30165,6 @@ describe('custom utilities', () => {
 
           @tailwind utilities;
         `,
-        ['foo', 'bar'],
       ),
     ).rejects.toThrowErrorMatchingInlineSnapshot(
       `[Error: You cannot \`@apply\` the \`hover:bar\` utility here because it creates a circular dependency.]`,
@@ -28870,41 +30172,79 @@ describe('custom utilities', () => {
   })
 
   describe('functional utilities', () => {
-    test('resolving values from `@theme`', async () => {
+    test('functional utilities require a `--value(…)`', async () => {
       let input = css`
-        @theme reference {
-          --tab-size-1: 1;
-          --tab-size-2: 2;
-          --tab-size-4: 4;
-          --tab-size-github: 8;
-        }
-
-        @utility tab-* {
-          tab-size: --value(--tab-size);
+        @utility example-* {
+          --resolved-value: 4;
         }
 
         @tailwind utilities;
       `
 
-      expect(await compileCss(input, ['tab-1', 'tab-2', 'tab-4', 'tab-github']))
+      expect(await run(['example', 'example-foo'], input)).toEqual('')
+    })
+
+    test('functional utilities must resolve at least one `--value(…)`', async () => {
+      let input = css`
+        @utility example-* {
+          --resolved-value: --value(integer);
+        }
+
+        @tailwind utilities;
+      `
+
+      expect(await run(['example-1', 'example-2'], input)).toMatchInlineSnapshot(`
+        "
+        .example-1 {
+          --resolved-value: 1;
+        }
+
+        .example-2 {
+          --resolved-value: 2;
+        }
+        "
+      `)
+
+      expect(await run(['example', 'example-foo', 'example-2.5'], input)).toEqual('')
+    })
+
+    test('resolving values from `@theme`', async () => {
+      let input = css`
+        @theme reference {
+          --example-1: 1;
+          --example-2: 2;
+          --example-4: 4;
+          --example-a: 8;
+        }
+
+        @utility example-* {
+          --resolved-value: --value(--example);
+        }
+
+        @tailwind utilities;
+      `
+
+      expect(await run(['example-1', 'example-2', 'example-4', 'example-a'], input))
         .toMatchInlineSnapshot(`
-          ".tab-1 {
-            tab-size: var(--tab-size-1, 1);
+          "
+          .example-1 {
+            --resolved-value: var(--example-1, 1);
           }
 
-          .tab-2 {
-            tab-size: var(--tab-size-2, 2);
+          .example-2 {
+            --resolved-value: var(--example-2, 2);
           }
 
-          .tab-4 {
-            tab-size: var(--tab-size-4, 4);
+          .example-4 {
+            --resolved-value: var(--example-4, 4);
           }
 
-          .tab-github {
-            tab-size: var(--tab-size-github, 8);
-          }"
+          .example-a {
+            --resolved-value: var(--example-a, 8);
+          }
+          "
         `)
-      expect(await compileCss(input, ['tab-3', 'tab-gitlab'])).toEqual('')
+      expect(await run(['example-3', 'example-gitlab'], input)).toEqual('')
     })
 
     test('functional utility with double-dash separator', async () => {
@@ -28922,128 +30262,135 @@ describe('custom utilities', () => {
         @tailwind utilities;
       `
 
-      expect(await compileCss(input, ['border--0', 'border--1', 'border--2']))
-        .toMatchInlineSnapshot(`
-          ".border--0 {
-            border-color: var(--color-border-0, #e5e7eb);
-          }
+      expect(await run(['border--0', 'border--1', 'border--2'], input)).toMatchInlineSnapshot(`
+        "
+        .border--0 {
+          border-color: var(--color-border-0, #e5e7eb);
+        }
 
-          .border--1 {
-            border-color: var(--color-border-1, #d1d5db);
-          }
+        .border--1 {
+          border-color: var(--color-border-1, #d1d5db);
+        }
 
-          .border--2 {
-            border-color: var(--color-border-2, #9ca3af);
-          }"
-        `)
-      expect(await compileCss(input, ['border--3'])).toEqual('')
+        .border--2 {
+          border-color: var(--color-border-2, #9ca3af);
+        }
+        "
+      `)
+      expect(await run(['border--3'], input)).toEqual('')
     })
 
-    test('resolving values from `@theme`, with `--tab-size-*` syntax', async () => {
+    test('resolving values from `@theme`, with `--example-*` syntax', async () => {
       let input =
         // Explicitly not using the css tagged template literal so that
-        // Prettier doesn't format the `value(--tab-size-*)` as
-        // `value(--tab-size- *)`
+        // Prettier doesn't format the `value(--example-*)` as
+        // `value(--example- *)`
         `
           @theme reference {
-            --tab-size-1: 1;
-            --tab-size-2: 2;
-            --tab-size-4: 4;
-            --tab-size-github: 8;
+            --example-1: 1;
+            --example-2: 2;
+            --example-4: 4;
+            --example-a: 8;
           }
 
-          @utility tab-* {
-            tab-size: --value(--tab-size-*);
+          @utility example-* {
+            --resolved-value: --value(--example-*);
           }
 
           @tailwind utilities;
         `
 
-      expect(await compileCss(input, ['tab-1', 'tab-2', 'tab-4', 'tab-github']))
+      expect(await run(['example-1', 'example-2', 'example-4', 'example-a'], input))
         .toMatchInlineSnapshot(`
-          ".tab-1 {
-            tab-size: var(--tab-size-1, 1);
+          "
+          .example-1 {
+            --resolved-value: var(--example-1, 1);
           }
 
-          .tab-2 {
-            tab-size: var(--tab-size-2, 2);
+          .example-2 {
+            --resolved-value: var(--example-2, 2);
           }
 
-          .tab-4 {
-            tab-size: var(--tab-size-4, 4);
+          .example-4 {
+            --resolved-value: var(--example-4, 4);
           }
 
-          .tab-github {
-            tab-size: var(--tab-size-github, 8);
-          }"
+          .example-a {
+            --resolved-value: var(--example-a, 8);
+          }
+          "
         `)
-      expect(await compileCss(input, ['tab-3', 'tab-gitlab'])).toEqual('')
+      expect(await run(['example-3', 'example-gitlab'], input)).toEqual('')
     })
 
-    test('resolving values from `@theme`, with `--tab-size-\\*` syntax (prettier friendly)', async () => {
+    test('resolving values from `@theme`, with `--example-\\*` syntax (prettier friendly)', async () => {
       let input = css`
         @theme reference {
-          --tab-size-1: 1;
-          --tab-size-2: 2;
-          --tab-size-4: 4;
-          --tab-size-github: 8;
+          --example-1: 1;
+          --example-2: 2;
+          --example-4: 4;
+          --example-a: 8;
         }
 
-        @utility tab-* {
-          tab-size: --value(--tab-size-\*);
+        @utility example-* {
+          --resolved-value: --value(--example-\*);
         }
 
         @tailwind utilities;
       `
 
-      expect(await compileCss(input, ['tab-1', 'tab-2', 'tab-4', 'tab-github']))
+      expect(await run(['example-1', 'example-2', 'example-4', 'example-a'], input))
         .toMatchInlineSnapshot(`
-          ".tab-1 {
-            tab-size: var(--tab-size-1, 1);
+          "
+          .example-1 {
+            --resolved-value: var(--example-1, 1);
           }
 
-          .tab-2 {
-            tab-size: var(--tab-size-2, 2);
+          .example-2 {
+            --resolved-value: var(--example-2, 2);
           }
 
-          .tab-4 {
-            tab-size: var(--tab-size-4, 4);
+          .example-4 {
+            --resolved-value: var(--example-4, 4);
           }
 
-          .tab-github {
-            tab-size: var(--tab-size-github, 8);
-          }"
+          .example-a {
+            --resolved-value: var(--example-a, 8);
+          }
+          "
         `)
-      expect(await compileCss(input, ['tab-3', 'tab-gitlab'])).toEqual('')
+      expect(await run(['example-3', 'example-gitlab'], input)).toEqual('')
     })
 
     test('resolving bare values', async () => {
       let input = css`
-        @utility tab-* {
-          tab-size: --value(integer);
+        @utility example-* {
+          --resolved-value: --value(integer);
         }
 
         @tailwind utilities;
       `
 
-      expect(await compileCss(input, ['tab-1', 'tab-76', 'tab-971'])).toMatchInlineSnapshot(`
-        ".tab-1 {
-          tab-size: 1;
+      expect(await run(['example-1', 'example-76', 'example-971'], input)).toMatchInlineSnapshot(`
+        "
+        .example-1 {
+          --resolved-value: 1;
         }
 
-        .tab-76 {
-          tab-size: 76;
+        .example-76 {
+          --resolved-value: 76;
         }
 
-        .tab-971 {
-          tab-size: 971;
-        }"
+        .example-971 {
+          --resolved-value: 971;
+        }
+        "
       `)
-      expect(await compileCss(input, ['tab-foo'])).toEqual('')
+      expect(await run(['example-foo'], input)).toEqual('')
     })
 
     test('bare values with unsupported data types should result in a warning', async () => {
-      let spy = vi.spyOn(console, 'warn').mockImplementation(() => {})
+      using spy = vi.spyOn(console, 'warn').mockImplementation(() => {})
       let input = css`
         @utility paint-* {
           paint: --value([color], color);
@@ -29052,7 +30399,7 @@ describe('custom utilities', () => {
         @tailwind utilities;
       `
 
-      expect(await compileCss(input, ['paint-#0088cc', 'paint-red'])).toMatchInlineSnapshot(`""`)
+      expect(await run(['paint-#0088cc', 'paint-red'], input)).toEqual('')
       expect(spy.mock.calls).toMatchInlineSnapshot(`
         [
           [
@@ -29072,19 +30419,21 @@ describe('custom utilities', () => {
 
     test('resolve literal values', async () => {
       let input = css`
-        @utility tab-* {
-          tab-size: --value('revert');
+        @utility example-* {
+          --resolved-value: --value('revert');
         }
 
         @tailwind utilities;
       `
 
-      expect(await compileCss(input, ['tab-revert'])).toMatchInlineSnapshot(`
-        ".tab-revert {
-          tab-size: revert;
-        }"
+      expect(await run(['example-revert'], input)).toMatchInlineSnapshot(`
+        "
+        .example-revert {
+          --resolved-value: revert;
+        }
+        "
       `)
-      expect(await compileCss(input, ['tab-initial'])).toEqual('')
+      expect(await run(['example-initial'], input)).toEqual('')
     })
 
     test('resolving bare values with constraints for integer, percentage, and ratio', async () => {
@@ -29098,9 +30447,10 @@ describe('custom utilities', () => {
         @tailwind utilities;
       `
 
-      expect(await compileCss(input, ['example-1', 'example-0.5', 'example-20%', 'example-2/3']))
+      expect(await run(['example-1', 'example-0.5', 'example-20%', 'example-2/3'], input))
         .toMatchInlineSnapshot(`
-          ".example-0\\.5 {
+          "
+          .example-0\\.5 {
             --value-as-number: .5;
           }
 
@@ -29114,226 +30464,266 @@ describe('custom utilities', () => {
 
           .example-20\\% {
             --value-as-percentage: 20%;
-          }"
+          }
+          "
         `)
       expect(
-        await compileCss(input, [
-          'example-1.23',
-          'example-12.34%',
-          'example-1.2/3',
-          'example-1/2.3',
-          'example-1.2/3.4',
-        ]),
+        await run(
+          ['example-1.23', 'example-12.34%', 'example-1.2/3', 'example-1/2.3', 'example-1.2/3.4'],
+          input,
+        ),
       ).toEqual('')
     })
 
     test('resolving unsupported bare values', async () => {
+      using spy = vi.spyOn(console, 'warn').mockImplementation(() => {})
       let input = css`
-        @utility tab-* {
-          tab-size: --value(color);
+        @utility example-* {
+          --resolved-value: --value(color);
         }
 
         @tailwind utilities;
       `
 
-      expect(await compileCss(input, ['tab-#0088cc', 'tab-foo'])).toEqual('')
+      expect(await run(['example-#0088cc', 'example-foo'], input)).toEqual('')
+      expect(
+        `\n${spy.mock.calls
+          .map((c) => c.join(' '))
+          .join('\n')
+          .trim()}\n`,
+      ).toMatchInlineSnapshot(`
+        "
+        Unsupported bare value data type: "color".
+        Only valid data types are: "number", "integer", "ratio", "percentage".
+
+        \`\`\`css
+        --value(color)
+                ^^^^^
+        \`\`\`
+        "
+      `)
     })
 
     test('resolving arbitrary values', async () => {
       let input = css`
-        @utility tab-* {
-          tab-size: --value([integer]);
+        @utility example-* {
+          --resolved-value: --value([integer]);
         }
 
         @tailwind utilities;
       `
 
       expect(
-        await compileCss(input, [
-          'tab-[1]',
-          'tab-[76]',
-          'tab-[971]',
-          'tab-[integer:var(--my-value)]',
-          'tab-(integer:my-value)',
-        ]),
+        await run(
+          [
+            'example-[1]',
+            'example-[76]',
+            'example-[971]',
+            'example-[integer:var(--my-value)]',
+            'example-(integer:my-value)',
+          ],
+          input,
+        ),
       ).toMatchInlineSnapshot(`
-        ".tab-\\[1\\] {
-          tab-size: 1;
+        "
+        .example-\\[1\\] {
+          --resolved-value: 1;
         }
 
-        .tab-\\[76\\] {
-          tab-size: 76;
+        .example-\\[76\\] {
+          --resolved-value: 76;
         }
 
-        .tab-\\[971\\] {
-          tab-size: 971;
+        .example-\\[971\\] {
+          --resolved-value: 971;
         }
 
-        .tab-\\[integer\\:var\\(--my-value\\)\\] {
-          tab-size: var(--my-value);
-        }"
+        .example-\\[integer\\:var\\(--my-value\\)\\] {
+          --resolved-value: var(--my-value);
+        }
+        "
       `)
       expect(
-        await compileCss(input, [
-          'tab-[#0088cc]',
-          'tab-[1px]',
-          'tab-[var(--my-value)]',
-          'tab-(--my-value)',
-          'tab-[color:var(--my-value)]',
-          'tab-(color:--my-value)',
-        ]),
+        await run(
+          [
+            'example-[#0088cc]',
+            'example-[1px]',
+            'example-[var(--my-value)]',
+            'example-(--my-value)',
+            'example-[color:var(--my-value)]',
+            'example-(color:--my-value)',
+          ],
+          input,
+        ),
       ).toEqual('')
     })
 
     test('resolving any arbitrary values', async () => {
       let input = css`
-        @utility tab-* {
-          tab-size: --value([*]);
+        @utility example-* {
+          --resolved-value: --value([*]);
         }
 
         @tailwind utilities;
       `
 
       expect(
-        await compileCss(input, [
-          'tab-[1]',
-          'tab-[76]',
-          'tab-[971]',
-          'tab-[var(--my-value)]',
-          'tab-(--my-value)',
-        ]),
+        await run(
+          [
+            'example-[1]',
+            'example-[76]',
+            'example-[971]',
+            'example-[var(--my-value)]',
+            'example-(--my-value)',
+          ],
+          input,
+        ),
       ).toMatchInlineSnapshot(`
-        ".tab-\\(--my-value\\) {
-          tab-size: var(--my-value);
+        "
+        .example-\\(--my-value\\) {
+          --resolved-value: var(--my-value);
         }
 
-        .tab-\\[1\\] {
-          tab-size: 1;
+        .example-\\[1\\] {
+          --resolved-value: 1;
         }
 
-        .tab-\\[76\\] {
-          tab-size: 76;
+        .example-\\[76\\] {
+          --resolved-value: 76;
         }
 
-        .tab-\\[971\\] {
-          tab-size: 971;
+        .example-\\[971\\] {
+          --resolved-value: 971;
         }
 
-        .tab-\\[var\\(--my-value\\)\\] {
-          tab-size: var(--my-value);
-        }"
+        .example-\\[var\\(--my-value\\)\\] {
+          --resolved-value: var(--my-value);
+        }
+        "
       `)
     })
 
     test('resolving any arbitrary values (without space)', async () => {
       let input = `
-        @utility tab-* {
-          tab-size: --value([*]);
+        @utility example-* {
+          --resolved-value: --value([*]);
         }
 
         @tailwind utilities;
       `
 
       expect(
-        await compileCss(input, [
-          'tab-[1]',
-          'tab-[76]',
-          'tab-[971]',
-          'tab-[var(--my-value)]',
-          'tab-(--my-value)',
-        ]),
+        await run(
+          [
+            'example-[1]',
+            'example-[76]',
+            'example-[971]',
+            'example-[var(--my-value)]',
+            'example-(--my-value)',
+          ],
+          input,
+        ),
       ).toMatchInlineSnapshot(`
-        ".tab-\\(--my-value\\) {
-          tab-size: var(--my-value);
+        "
+        .example-\\(--my-value\\) {
+          --resolved-value: var(--my-value);
         }
 
-        .tab-\\[1\\] {
-          tab-size: 1;
+        .example-\\[1\\] {
+          --resolved-value: 1;
         }
 
-        .tab-\\[76\\] {
-          tab-size: 76;
+        .example-\\[76\\] {
+          --resolved-value: 76;
         }
 
-        .tab-\\[971\\] {
-          tab-size: 971;
+        .example-\\[971\\] {
+          --resolved-value: 971;
         }
 
-        .tab-\\[var\\(--my-value\\)\\] {
-          tab-size: var(--my-value);
-        }"
+        .example-\\[var\\(--my-value\\)\\] {
+          --resolved-value: var(--my-value);
+        }
+        "
       `)
     })
 
     test('resolving any arbitrary values (with escaped `*`)', async () => {
       let input = css`
-        @utility tab-* {
-          tab-size: --value([\*]);
+        @utility example-* {
+          --resolved-value: --value([\*]);
         }
 
         @tailwind utilities;
       `
 
       expect(
-        await compileCss(input, [
-          'tab-[1]',
-          'tab-[76]',
-          'tab-[971]',
-          'tab-[var(--my-value)]',
-          'tab-(--my-value)',
-        ]),
+        await run(
+          [
+            'example-[1]',
+            'example-[76]',
+            'example-[971]',
+            'example-[var(--my-value)]',
+            'example-(--my-value)',
+          ],
+          input,
+        ),
       ).toMatchInlineSnapshot(`
-        ".tab-\\(--my-value\\) {
-          tab-size: var(--my-value);
+        "
+        .example-\\(--my-value\\) {
+          --resolved-value: var(--my-value);
         }
 
-        .tab-\\[1\\] {
-          tab-size: 1;
+        .example-\\[1\\] {
+          --resolved-value: 1;
         }
 
-        .tab-\\[76\\] {
-          tab-size: 76;
+        .example-\\[76\\] {
+          --resolved-value: 76;
         }
 
-        .tab-\\[971\\] {
-          tab-size: 971;
+        .example-\\[971\\] {
+          --resolved-value: 971;
         }
 
-        .tab-\\[var\\(--my-value\\)\\] {
-          tab-size: var(--my-value);
-        }"
+        .example-\\[var\\(--my-value\\)\\] {
+          --resolved-value: var(--my-value);
+        }
+        "
       `)
     })
 
     test('resolving theme, bare and arbitrary values all at once', async () => {
       let input = css`
         @theme reference {
-          --tab-size-github: 8;
+          --example-a: 8;
         }
 
-        @utility tab-* {
-          tab-size: --value([integer]);
-          tab-size: --value(integer);
-          tab-size: --value(--tab-size);
+        @utility example-* {
+          --resolved-value: --value([integer]);
+          --resolved-value: --value(integer);
+          --resolved-value: --value(--example);
         }
 
         @tailwind utilities;
       `
 
-      expect(await compileCss(input, ['tab-github', 'tab-76', 'tab-[123]'])).toMatchInlineSnapshot(`
-        ".tab-76 {
-          tab-size: 76;
+      expect(await run(['example-a', 'example-76', 'example-[123]'], input)).toMatchInlineSnapshot(`
+        "
+        .example-76 {
+          --resolved-value: 76;
         }
 
-        .tab-\\[123\\] {
-          tab-size: 123;
+        .example-\\[123\\] {
+          --resolved-value: 123;
         }
 
-        .tab-github {
-          tab-size: var(--tab-size-github, 8);
-        }"
+        .example-a {
+          --resolved-value: var(--example-a, 8);
+        }
+        "
       `)
-      expect(await compileCss(input, ['tab-[#0088cc]', 'tab-[1px]'])).toEqual('')
+      expect(await run(['example-[#0088cc]', 'example-[1px]'], input)).toEqual('')
     })
 
     test('in combination with calc to produce different data types of values', async () => {
@@ -29343,87 +30733,64 @@ describe('custom utilities', () => {
         }
 
         @utility example-* {
-          --value: --value([percentage]);
-          --value: calc(--value(integer) * 1%);
-          --value: --value(--example);
+          --resolved-value: --value([percentage]);
+          --resolved-value: calc(--value(integer) * 1%);
+          --resolved-value: --value(--example);
         }
 
         @tailwind utilities;
       `
 
-      expect(await compileCss(input, ['example-full', 'example-12', 'example-[20%]']))
+      expect(await run(['example-full', 'example-12', 'example-[20%]'], input))
         .toMatchInlineSnapshot(`
-          ".example-12 {
-            --value: calc(12 * 1%);
+          "
+          .example-12 {
+            --resolved-value: calc(12 * 1%);
           }
 
           .example-\\[20\\%\\] {
-            --value: 20%;
+            --resolved-value: 20%;
           }
 
           .example-full {
-            --value: var(--example-full, 100%);
-          }"
+            --resolved-value: var(--example-full, 100%);
+          }
+          "
         `)
-      expect(await compileCss(input, ['example-half', 'example-[#0088cc]'])).toEqual('')
+      expect(await run(['example-half', 'example-[#0088cc]'], input)).toEqual('')
     })
 
     test('shorthand if resulting values are of the same type', async () => {
       let input = css`
         @theme reference {
-          --tab-size-github: 8;
           --example-full: 100%;
         }
 
-        @utility tab-* {
-          tab-size: --value(--tab-size, integer, [integer]);
-        }
-
         @utility example-* {
-          --value: calc(--value(integer) * 1%);
-          --value: --value(--example, [percentage]);
+          --resolved-value: calc(--value(integer) * 1%);
+          --resolved-value: --value(--example, [percentage]);
         }
 
         @tailwind utilities;
       `
 
-      expect(
-        await compileCss(input, [
-          'tab-github',
-          'tab-76',
-          'tab-[123]',
-          'example-37',
-          'example-[50%]',
-          'example-full',
-        ]),
-      ).toMatchInlineSnapshot(`
-        ".example-37 {
-          --value: calc(37 * 1%);
-        }
+      expect(await run(['example-37', 'example-[50%]', 'example-full'], input))
+        .toMatchInlineSnapshot(`
+          "
+          .example-37 {
+            --resolved-value: calc(37 * 1%);
+          }
 
-        .example-\\[50\\%\\] {
-          --value: 50%;
-        }
+          .example-\\[50\\%\\] {
+            --resolved-value: 50%;
+          }
 
-        .example-full {
-          --value: var(--example-full, 100%);
-        }
-
-        .tab-76 {
-          tab-size: 76;
-        }
-
-        .tab-\\[123\\] {
-          tab-size: 123;
-        }
-
-        .tab-github {
-          tab-size: var(--tab-size-github, 8);
-        }"
-      `)
-      expect(
-        await compileCss(input, ['tab-[#0088cc]', 'tab-[1px]', 'example-foo', 'example-[13px]']),
-      ).toEqual('')
+          .example-full {
+            --resolved-value: var(--example-full, 100%);
+          }
+          "
+        `)
+      expect(await run(['example-foo', 'example-[13px]'], input)).toEqual('')
     })
 
     test('negative values', async () => {
@@ -29433,66 +30800,75 @@ describe('custom utilities', () => {
         }
 
         @utility example-* {
-          --value: --value(--example, [percentage], [length]);
+          --resolved-value: --value(--example, [percentage], [length]);
         }
 
         @utility -example-* {
-          --value: calc(--value(--example, [percentage], [length]) * -1);
+          --resolved-value: calc(--value(--example, [percentage], [length]) * -1);
         }
 
         @tailwind utilities;
       `
 
       expect(
-        await compileCss(input, [
-          'example-full',
-          '-example-full',
-          'example-[10px]',
-          '-example-[10px]',
-          'example-[20%]',
-          '-example-[20%]',
-        ]),
+        await run(
+          [
+            'example-full',
+            '-example-full',
+            'example-[10px]',
+            '-example-[10px]',
+            'example-[20%]',
+            '-example-[20%]',
+          ],
+          input,
+        ),
       ).toMatchInlineSnapshot(`
-        ".-example-\\[10px\\] {
-          --value: calc(10px * -1);
+        "
+        .-example-\\[10px\\] {
+          --resolved-value: calc(10px * -1);
         }
 
         .-example-\\[20\\%\\] {
-          --value: calc(20% * -1);
+          --resolved-value: calc(20% * -1);
         }
 
         .-example-full {
-          --value: calc(var(--example-full, 100%) * -1);
+          --resolved-value: calc(var(--example-full, 100%) * -1);
         }
 
         .example-\\[10px\\] {
-          --value: 10px;
+          --resolved-value: 10px;
         }
 
         .example-\\[20\\%\\] {
-          --value: 20%;
+          --resolved-value: 20%;
         }
 
         .example-full {
-          --value: var(--example-full, 100%);
-        }"
+          --resolved-value: var(--example-full, 100%);
+        }
+        "
       `)
-      expect(await compileCss(input, ['example-10'])).toEqual('')
+      expect(await run(['example-10'], input)).toEqual('')
     })
 
     test('using the same value multiple times', async () => {
       let input = css`
         @utility example-* {
-          --value: calc(var(--spacing) * --value(number)) calc(var(--spacing) * --value(number));
+          --resolved-value: calc(var(--spacing) * --value(number))
+            calc(var(--spacing) * --value(number));
         }
 
         @tailwind utilities;
       `
 
-      expect(await compileCss(input, ['example-12'])).toMatchInlineSnapshot(`
-        ".example-12 {
-          --value: calc(var(--spacing) * 12) calc(var(--spacing) * 12);
-        }"
+      expect(await run(['example-12'], input)).toMatchInlineSnapshot(`
+        "
+        .example-12 {
+          --resolved-value: calc(var(--spacing) * 12)
+                    calc(var(--spacing) * 12);
+        }
+        "
       `)
     })
 
@@ -29509,14 +30885,16 @@ describe('custom utilities', () => {
         @tailwind utilities;
       `
 
-      expect(await compileCss(input, ['example-12'])).toMatchInlineSnapshot(`
-        ":root, :host {
+      expect(await run(['example-12'], input)).toMatchInlineSnapshot(`
+        "
+        :root, :host {
           --spacing: 4px;
         }
 
         .example-12 {
           margin: calc(var(--spacing) * 12);
-        }"
+        }
+        "
       `)
     })
 
@@ -29533,10 +30911,179 @@ describe('custom utilities', () => {
         @tailwind utilities;
       `
 
-      expect(await compileCss(input, ['example-12'])).toMatchInlineSnapshot(`
-        ".example-12 {
+      expect(await run(['example-12'], input)).toMatchInlineSnapshot(`
+        "
+        .example-12 {
           margin: 48px;
-        }"
+        }
+        "
+      `)
+    })
+
+    test('functional utilities can use `--default(…)` in `--value(…)`', async () => {
+      let input = css`
+        @utility example-* {
+          --resolved-value: --value(integer, --default(4));
+        }
+
+        @tailwind utilities;
+      `
+
+      expect(await run(['example', 'example-123'], input)).toMatchInlineSnapshot(`
+        "
+        .example {
+          --resolved-value: 4;
+        }
+
+        .example-123 {
+          --resolved-value: 123;
+        }
+        "
+      `)
+
+      expect(await run(['example-foo'], input)).toEqual('')
+    })
+
+    test('functional utilities can use `--default(…)` in complex expressions', async () => {
+      let input = css`
+        @utility example-* {
+          --resolved-value: calc(--value(integer, --default(4)) * 2);
+        }
+
+        @tailwind utilities;
+      `
+
+      expect(await run(['example', 'example-123'], input)).toMatchInlineSnapshot(`
+        "
+        .example {
+          --resolved-value: calc(4 * 2);
+        }
+
+        .example-123 {
+          --resolved-value: calc(123 * 2);
+        }
+        "
+      `)
+
+      expect(await run(['example-foo'], input)).toEqual('')
+    })
+
+    test('functional utilities can use `--default(…)` with `--modifier(…)`', async () => {
+      let input = css`
+        @utility example-* {
+          --resolved-value: --value(integer, --default(4));
+          --resolved-modifier: --modifier(integer);
+        }
+
+        @tailwind utilities;
+      `
+
+      expect(await run(['example', 'example/25'], input)).toMatchInlineSnapshot(`
+        "
+        .example\\/25 {
+          --resolved-value: 4;
+          --resolved-modifier: 25;
+        }
+
+        .example {
+          --resolved-value: 4;
+        }
+        "
+      `)
+
+      expect(await run(['example/foo'], input)).toEqual('')
+    })
+
+    test('functional utilities can use `--default(…)` in `--modifier(…)`', async () => {
+      let input = css`
+        @utility example-* {
+          --resolved-value: --value(integer);
+          --resolved-modifier: --modifier(integer, --default(1));
+        }
+
+        @tailwind utilities;
+      `
+
+      expect(await run(['example-123', 'example-123/25'], input)).toMatchInlineSnapshot(`
+        "
+        .example-123 {
+          --resolved-value: 123;
+          --resolved-modifier: 1;
+        }
+
+        .example-123\\/25 {
+          --resolved-value: 123;
+          --resolved-modifier: 25;
+        }
+        "
+      `)
+
+      expect(await run(['example-123/foo'], input)).toEqual('')
+    })
+
+    test('functional utilities can use `--default(…)` in `--value(…)` and `--modifier(…)`', async () => {
+      let input = css`
+        @utility example-* {
+          --resolved-value: --value(integer, --default(12));
+          --resolved-modifier: --modifier(integer, --default(34));
+        }
+
+        @tailwind utilities;
+      `
+
+      expect(await run(['example', 'example/1', 'example-1', 'example-1/1'], input))
+        .toMatchInlineSnapshot(`
+          "
+          .example {
+            --resolved-value: 12;
+            --resolved-modifier: 34;
+          }
+
+          .example-1 {
+            --resolved-value: 1;
+            --resolved-modifier: 34;
+          }
+
+          .example-1\\/1 {
+            --resolved-value: 1;
+            --resolved-modifier: 1;
+          }
+
+          .example\\/1 {
+            --resolved-value: 12;
+            --resolved-modifier: 1;
+          }
+          "
+        `)
+
+      expect(await run(['example-123/foo'], input)).toEqual('')
+    })
+
+    test('the value of `--default(…)` is emitted as-is', async () => {
+      let input = css`
+        @theme reference {
+          --text-box-trim-trim-both: trim-both;
+          --text-box-edge-cap: cap alphabetic;
+        }
+
+        @utility trim-* {
+          text-box: --value(--text-box-trim-*)
+            --modifier(--text-box-edge-*, --default(box alphabetic));
+        }
+
+        @tailwind utilities;
+      `
+
+      expect(await run(['trim-trim-both', 'trim-trim-both/cap'], input)).toMatchInlineSnapshot(`
+        "
+        .trim-trim-both {
+          text-box: var(--text-box-trim-trim-both, trim-both) box alphabetic;
+        }
+
+        .trim-trim-both\\/cap {
+          text-box: var(--text-box-trim-trim-both, trim-both) var(--text-box-edge-cap, cap alphabetic);
+        }
+        "
       `)
     })
 
@@ -29548,62 +31095,65 @@ describe('custom utilities', () => {
         }
 
         @utility example-* {
-          --value: --value(--value, [length]);
-          --modifier: --modifier(--modifier, [length]);
-          --modifier-with-calc: calc(--modifier(--modifier, [length]) * 2);
-          --modifier-literals: --modifier('literal', 'literal-2');
+          --resolved-value: --value(--value, [length]);
+          --resolved-modifier: --modifier(--modifier, [length]);
+          --resolved-modifier-with-calc: calc(--modifier(--modifier, [length]) * 2);
+          --resolved-modifier-literals: --modifier('literal', 'literal-2');
         }
 
         @tailwind utilities;
       `
 
       expect(
-        await compileCss(input, [
-          'example-sm',
-          'example-sm/7',
-          'example-[12px]',
-          'example-[12px]/[16px]',
-          'example-sm/literal',
-          'example-sm/literal-2',
-        ]),
+        await run(
+          [
+            'example-sm',
+            'example-sm/7',
+            'example-[12px]',
+            'example-[12px]/[16px]',
+            'example-sm/literal',
+            'example-sm/literal-2',
+          ],
+          input,
+        ),
       ).toMatchInlineSnapshot(`
-        ".example-\\[12px\\]\\/\\[16px\\] {
-          --value: 12px;
-          --modifier: 16px;
-          --modifier-with-calc: calc(16px * 2);
+        "
+        .example-\\[12px\\]\\/\\[16px\\] {
+          --resolved-value: 12px;
+          --resolved-modifier: 16px;
+          --resolved-modifier-with-calc: calc(16px * 2);
         }
 
         .example-sm\\/7 {
-          --value: var(--value-sm, 14px);
-          --modifier: var(--modifier-7, 28px);
-          --modifier-with-calc: calc(var(--modifier-7, 28px) * 2);
+          --resolved-value: var(--value-sm, 14px);
+          --resolved-modifier: var(--modifier-7, 28px);
+          --resolved-modifier-with-calc: calc(var(--modifier-7, 28px) * 2);
         }
 
         .example-sm\\/literal {
-          --value: var(--value-sm, 14px);
-          --modifier-literals: literal;
+          --resolved-value: var(--value-sm, 14px);
+          --resolved-modifier-literals: literal;
         }
 
         .example-sm\\/literal-2 {
-          --value: var(--value-sm, 14px);
-          --modifier-literals: literal-2;
+          --resolved-value: var(--value-sm, 14px);
+          --resolved-modifier-literals: literal-2;
         }
 
         .example-\\[12px\\] {
-          --value: 12px;
+          --resolved-value: 12px;
         }
 
         .example-sm {
-          --value: var(--value-sm, 14px);
-        }"
+          --resolved-value: var(--value-sm, 14px);
+        }
+        "
       `)
       expect(
-        await compileCss(input, [
-          'example-foo',
-          'example-foo/[12px]',
-          'example-foo/12',
-          'example-sm/unknown-literal',
-        ]),
+        await run(
+          ['example-foo', 'example-foo/[12px]', 'example-foo/12', 'example-sm/unknown-literal'],
+          input,
+        ),
       ).toEqual('')
     })
 
@@ -29614,27 +31164,29 @@ describe('custom utilities', () => {
         }
 
         @utility example-* {
-          --value: --value(--example, ratio, [ratio]);
+          --resolved-value: --value(--example, ratio, [ratio]);
         }
 
         @tailwind utilities;
       `
 
-      expect(await compileCss(input, ['example-video', 'example-1/1', 'example-[7/9]']))
+      expect(await run(['example-video', 'example-1/1', 'example-[7/9]'], input))
         .toMatchInlineSnapshot(`
-          ".example-1\\/1 {
-            --value: 1 / 1;
+          "
+          .example-1\\/1 {
+            --resolved-value: 1 / 1;
           }
 
           .example-\\[7\\/9\\] {
-            --value: 7/9;
+            --resolved-value: 7/9;
           }
 
           .example-video {
-            --value: var(--example-video, 16 / 9);
-          }"
+            --resolved-value: var(--example-video, 16 / 9);
+          }
+          "
         `)
-      expect(await compileCss(input, ['example-foo'])).toEqual('')
+      expect(await run(['example-foo'], input)).toEqual('')
     })
 
     test('resolve theme values with sub-namespace (--text- * --line-height)', async () => {
@@ -29653,8 +31205,9 @@ describe('custom utilities', () => {
         @tailwind utilities;
       `
 
-      expect(await compileCss(input, ['example-xs', 'example-xs/6'])).toMatchInlineSnapshot(`
-        ".example-xs\\/6 {
+      expect(await run(['example-xs', 'example-xs/6'], input)).toMatchInlineSnapshot(`
+        "
+        .example-xs\\/6 {
           font-size: var(--text-xs, .75rem);
           line-height: var(--text-xs--line-height, calc(1 / .75));
           line-height: 6;
@@ -29663,9 +31216,10 @@ describe('custom utilities', () => {
         .example-xs {
           font-size: var(--text-xs, .75rem);
           line-height: var(--text-xs--line-height, calc(1 / .75));
-        }"
+        }
+        "
       `)
-      expect(await compileCss(input, ['example-foo', 'example-xs/foo'])).toEqual('')
+      expect(await run(['example-foo', 'example-xs/foo'], input)).toEqual('')
     })
 
     test('resolve theme values with sub-namespace (--text-\\* --line-height)', async () => {
@@ -29684,8 +31238,9 @@ describe('custom utilities', () => {
         @tailwind utilities;
       `
 
-      expect(await compileCss(input, ['example-xs', 'example-xs/6'])).toMatchInlineSnapshot(`
-        ".example-xs\\/6 {
+      expect(await run(['example-xs', 'example-xs/6'], input)).toMatchInlineSnapshot(`
+        "
+        .example-xs\\/6 {
           font-size: var(--text-xs, .75rem);
           line-height: var(--text-xs--line-height, calc(1 / .75));
           line-height: 6;
@@ -29694,9 +31249,10 @@ describe('custom utilities', () => {
         .example-xs {
           font-size: var(--text-xs, .75rem);
           line-height: var(--text-xs--line-height, calc(1 / .75));
-        }"
+        }
+        "
       `)
-      expect(await compileCss(input, ['example-foo', 'example-xs/foo'])).toEqual('')
+      expect(await run(['example-foo', 'example-xs/foo'], input)).toEqual('')
     })
 
     test('resolve theme values with sub-namespace (--value(--text --line-height))', async () => {
@@ -29715,8 +31271,9 @@ describe('custom utilities', () => {
         @tailwind utilities;
       `
 
-      expect(await compileCss(input, ['example-xs', 'example-xs/6'])).toMatchInlineSnapshot(`
-        ".example-xs\\/6 {
+      expect(await run(['example-xs', 'example-xs/6'], input)).toMatchInlineSnapshot(`
+        "
+        .example-xs\\/6 {
           font-size: var(--text-xs, .75rem);
           line-height: var(--text-xs--line-height, calc(1 / .75));
           line-height: 6;
@@ -29725,9 +31282,10 @@ describe('custom utilities', () => {
         .example-xs {
           font-size: var(--text-xs, .75rem);
           line-height: var(--text-xs--line-height, calc(1 / .75));
-        }"
+        }
+        "
       `)
-      expect(await compileCss(input, ['example-foo', 'example-xs/foo'])).toEqual('')
+      expect(await run(['example-foo', 'example-xs/foo'], input)).toEqual('')
     })
 
     test('resolve theme values with sub-namespace (--value(--text-*--line-height))', async () => {
@@ -29746,8 +31304,9 @@ describe('custom utilities', () => {
         @tailwind utilities;
       `
 
-      expect(await compileCss(input, ['example-xs', 'example-xs/6'])).toMatchInlineSnapshot(`
-        ".example-xs\\/6 {
+      expect(await run(['example-xs', 'example-xs/6'], input)).toMatchInlineSnapshot(`
+        "
+        .example-xs\\/6 {
           font-size: var(--text-xs, .75rem);
           line-height: var(--text-xs--line-height, calc(1 / .75));
           line-height: 6;
@@ -29756,9 +31315,10 @@ describe('custom utilities', () => {
         .example-xs {
           font-size: var(--text-xs, .75rem);
           line-height: var(--text-xs--line-height, calc(1 / .75));
-        }"
+        }
+        "
       `)
-      expect(await compileCss(input, ['example-foo', 'example-xs/foo'])).toEqual('')
+      expect(await run(['example-foo', 'example-xs/foo'], input)).toEqual('')
     })
 
     test('variables used in `@utility` will not be emitted if the utility is not used', async () => {
@@ -29776,10 +31336,12 @@ describe('custom utilities', () => {
         @tailwind utilities;
       `
 
-      expect(await compileCss(input, ['flex'])).toMatchInlineSnapshot(`
-        ".flex {
+      expect(await run(['flex'], input)).toMatchInlineSnapshot(`
+        "
+        .flex {
           display: flex;
-        }"
+        }
+        "
       `)
     })
 
@@ -29798,8 +31360,9 @@ describe('custom utilities', () => {
         @tailwind utilities;
       `
 
-      expect(await compileCss(input, ['example-foo'])).toMatchInlineSnapshot(`
-        ":root, :host {
+      expect(await run(['example-foo'], input)).toMatchInlineSnapshot(`
+        "
+        :root, :host {
           --example-foo: red;
           --color-red-500: red;
         }
@@ -29807,7 +31370,8 @@ describe('custom utilities', () => {
         .example-foo {
           color: var(--color-red-500);
           background-color: var(--example-foo);
-        }"
+        }
+        "
       `)
     })
 
@@ -29833,13 +31397,15 @@ describe('custom utilities', () => {
         @tailwind utilities;
       `
 
-      expect(await compileCss(input, ['mask-r-20%'])).toMatchInlineSnapshot(`
-        ".mask-r-20\\% {
+      expect(await run(['mask-r-20%'], input)).toMatchInlineSnapshot(`
+        "
+        .mask-r-20\\% {
           --mask-right: linear-gradient(to left, transparent, black 20%);
           -webkit-mask-image: var(--mask-linear), var(--mask-radial), var(--mask-conic);
           -webkit-mask-image: var(--mask-linear), var(--mask-radial), var(--mask-conic);
           mask-image: var(--mask-linear), var(--mask-radial), var(--mask-conic);
-        }"
+        }
+        "
       `)
     })
   })
@@ -29847,84 +31413,92 @@ describe('custom utilities', () => {
   test('resolve value based on `@theme`', async () => {
     let input = css`
       @theme {
-        --tab-size-github: 8;
+        --example-a: 8;
       }
 
-      @utility tab-* {
-        tab-size: --value(--tab-size);
+      @utility example-* {
+        --resolved-value: --value(--example);
       }
 
       @tailwind utilities;
     `
 
-    expect(await compileCss(input, ['tab-github'])).toMatchInlineSnapshot(`
-      ":root, :host {
-        --tab-size-github: 8;
+    expect(await run(['example-a'], input)).toMatchInlineSnapshot(`
+      "
+      :root, :host {
+        --example-a: 8;
       }
 
-      .tab-github {
-        tab-size: var(--tab-size-github);
-      }"
+      .example-a {
+        --resolved-value: var(--example-a);
+      }
+      "
     `)
   })
 
   test('resolve value based on `@theme reference`', async () => {
     let input = css`
       @theme reference {
-        --tab-size-github: 8;
+        --example-a: 8;
       }
 
-      @utility tab-* {
-        tab-size: --value(--tab-size);
+      @utility example-* {
+        --resolved-value: --value(--example);
       }
 
       @tailwind utilities;
     `
 
-    expect(await compileCss(input, ['tab-github'])).toMatchInlineSnapshot(`
-      ".tab-github {
-        tab-size: var(--tab-size-github, 8);
-      }"
+    expect(await run(['example-a'], input)).toMatchInlineSnapshot(`
+      "
+      .example-a {
+        --resolved-value: var(--example-a, 8);
+      }
+      "
     `)
   })
 
   test('resolve value based on `@theme inline`', async () => {
     let input = css`
       @theme inline {
-        --tab-size-github: 8;
+        --example-a: 8;
       }
 
-      @utility tab-* {
-        tab-size: --value(--tab-size);
+      @utility example-* {
+        --resolved-value: --value(--example);
       }
 
       @tailwind utilities;
     `
 
-    expect(await compileCss(input, ['tab-github'])).toMatchInlineSnapshot(`
-      ".tab-github {
-        tab-size: 8;
-      }"
+    expect(await run(['example-a'], input)).toMatchInlineSnapshot(`
+      "
+      .example-a {
+        --resolved-value: 8;
+      }
+      "
     `)
   })
 
   test('resolve value based on `@theme inline reference`', async () => {
     let input = css`
       @theme inline reference {
-        --tab-size-github: 8;
+        --example-a: 8;
       }
 
-      @utility tab-* {
-        tab-size: --value(--tab-size);
+      @utility example-* {
+        --resolved-value: --value(--example);
       }
 
       @tailwind utilities;
     `
 
-    expect(await compileCss(input, ['tab-github'])).toMatchInlineSnapshot(`
-      ".tab-github {
-        tab-size: 8;
-      }"
+    expect(await run(['example-a'], input)).toMatchInlineSnapshot(`
+      "
+      .example-a {
+        --resolved-value: 8;
+      }
+      "
     `)
   })
 
@@ -29946,11 +31520,13 @@ describe('custom utilities', () => {
       @tailwind utilities;
     `
 
-    expect(await compileCss(input, ['example-xs'])).toMatchInlineSnapshot(`
-      ".example-xs {
+    expect(await run(['example-xs'], input)).toMatchInlineSnapshot(`
+      "
+      .example-xs {
         font-size: var(--text-xs, .75rem);
         line-height: 1.33333;
-      }"
+      }
+      "
     `)
   })
 
@@ -29972,11 +31548,49 @@ describe('custom utilities', () => {
       @tailwind utilities;
     `
 
-    expect(await compileCss(input, ['example-xs'])).toMatchInlineSnapshot(`
-      ".example-xs {
+    expect(await run(['example-xs'], input)).toMatchInlineSnapshot(`
+      "
+      .example-xs {
         font-size: .75rem;
         line-height: var(--text-xs--line-height, calc(1 / .75));
-      }"
+      }
+      "
+    `)
+  })
+
+  test('multiple @utility definitions with the same name but different value types', async () => {
+    let input = css`
+      @theme {
+        --color-red-500: #ef4444;
+        --spacing: 0.25rem;
+      }
+
+      @utility foo-* {
+        color: --value(--color-*);
+      }
+
+      @utility foo-* {
+        font-size: --spacing(--value(number));
+      }
+
+      @tailwind utilities;
+    `
+
+    expect(await run(['foo-red-500', 'foo-123'], input)).toMatchInlineSnapshot(`
+      "
+      :root, :host {
+        --color-red-500: #ef4444;
+        --spacing: .25rem;
+      }
+
+      .foo-123 {
+        font-size: calc(var(--spacing) * 123);
+      }
+
+      .foo-red-500 {
+        color: var(--color-red-500);
+      }
+      "
     `)
   })
 })
diff --git a/packages/tailwindcss/src/utilities.ts b/packages/tailwindcss/src/utilities.ts
index 62e4510b7..477559d7e 100644
--- a/packages/tailwindcss/src/utilities.ts
+++ b/packages/tailwindcss/src/utilities.ts
@@ -12,18 +12,20 @@ import {
 } from './ast'
 import type { Candidate, CandidateModifier, NamedUtilityValue } from './candidate'
 import type { DesignSystem } from './design-system'
-import { enableContainerSizeUtility } from './feature-flags'
 import type { Theme, ThemeKey } from './theme'
 import { compareBreakpoints } from './utils/compare-breakpoints'
 import { DefaultMap } from './utils/default-map'
+import { dimensions } from './utils/dimensions'
 import { unescape } from './utils/escape'
 import {
   inferDataType,
+  isLength,
   isPositiveInteger,
   isStrictPositiveInteger,
   isValidOpacityValue,
   isValidSpacingMultiplier,
 } from './utils/infer-data-type'
+import { addWhitespaceAroundMathOperators } from './utils/math-operators'
 import { replaceShadowColors } from './utils/replace-shadow-colors'
 import { segment } from './utils/segment'
 import * as ValueParser from './value-parser'
@@ -419,6 +421,13 @@ export function createUtilities(theme: Theme) {
             desc.themeKeys ?? [],
           )
 
+          // If the theme value resolved without consuming the modifier, then
+          // the modifier would be silently ignored and `w-4` and `w-4/foo`
+          // would generate the same CSS.
+          //
+          // The modifier would be consumed if it's a fraction, e.g.: `w-1/2`
+          if (value !== null && candidate.modifier && !candidate.value.fraction) return
+
           // Automatically handle things like `w-1/2` without requiring `1/2` to
           // exist as a theme value.
           if (value === null && desc.supportsFractions && candidate.value.fraction) {
@@ -450,7 +459,10 @@ export function createUtilities(theme: Theme) {
         if (value === null) return
 
         // Negate the value if the candidate has a negative prefix.
-        return desc.handle(negative ? `calc(${value} * -1)` : value, dataType)
+        return desc.handle(
+          negative ? addWhitespaceAroundMathOperators(`calc(${value} * -1)`) : value,
+          dataType,
+        )
       }
     }
 
@@ -514,6 +526,7 @@ export function createUtilities(theme: Theme) {
       {
         values: ['current', 'inherit', 'transparent'],
         valueThemeKeys: desc.themeKeys,
+        modifierThemeKeys: ['--opacity'],
         modifiers: Array.from({ length: 21 }, (_, index) => `${index * 5}`),
       },
     ])
@@ -547,14 +560,14 @@ export function createUtilities(theme: Theme) {
         if (!multiplier) return null
         if (!isValidSpacingMultiplier(value)) return null
 
-        return `calc(${multiplier} * ${value})`
+        return `--spacing(${value})`
       },
       handleNegativeBareValue: ({ value }) => {
         let multiplier = theme.resolve(null, ['--spacing'])
         if (!multiplier) return null
         if (!isValidSpacingMultiplier(value)) return null
 
-        return `calc(${multiplier} * -${value})`
+        return `--spacing(-${value})`
       },
       handle,
       staticValues,
@@ -1555,11 +1568,11 @@ export function createUtilities(theme: Theme) {
 
   {
     let transformValue = [
-      'var(--tw-rotate-x,)',
-      'var(--tw-rotate-y,)',
-      'var(--tw-rotate-z,)',
-      'var(--tw-skew-x,)',
-      'var(--tw-skew-y,)',
+      'var(--tw-rotate-x, )',
+      'var(--tw-rotate-y, )',
+      'var(--tw-rotate-z, )',
+      'var(--tw-skew-x, )',
+      'var(--tw-skew-y, )',
     ].join(' ')
 
     let transformProperties = () =>
@@ -1702,6 +1715,21 @@ export function createUtilities(theme: Theme) {
     staticUtility('transform-none', [['transform', 'none']])
   }
 
+  /**
+   * @css `zoom`
+   */
+  functionalUtility('zoom', {
+    handleBareValue: ({ value }) => {
+      if (!isPositiveInteger(value)) return null
+      return `${value}%`
+    },
+    handle: (value) => [decl('zoom', value)],
+  })
+
+  suggest('zoom', () => [
+    { values: ['50', '75', '90', '95', '100', '105', '110', '125', '150', '200'] },
+  ])
+
   /**
    * @css `transform-style`
    */
@@ -1786,7 +1814,7 @@ export function createUtilities(theme: Theme) {
     staticUtility(`touch-pan-${value}`, [
       touchProperties,
       ['--tw-pan-x', `pan-${value}`],
-      ['touch-action', 'var(--tw-pan-x,) var(--tw-pan-y,) var(--tw-pinch-zoom,)'],
+      ['touch-action', 'var(--tw-pan-x, ) var(--tw-pan-y, ) var(--tw-pinch-zoom, )'],
     ])
   }
 
@@ -1794,14 +1822,14 @@ export function createUtilities(theme: Theme) {
     staticUtility(`touch-pan-${value}`, [
       touchProperties,
       ['--tw-pan-y', `pan-${value}`],
-      ['touch-action', 'var(--tw-pan-x,) var(--tw-pan-y,) var(--tw-pinch-zoom,)'],
+      ['touch-action', 'var(--tw-pan-x, ) var(--tw-pan-y, ) var(--tw-pinch-zoom, )'],
     ])
   }
 
   staticUtility('touch-pinch-zoom', [
     touchProperties,
     ['--tw-pinch-zoom', `pinch-zoom`],
-    ['touch-action', 'var(--tw-pan-x,) var(--tw-pan-y,) var(--tw-pinch-zoom,)'],
+    ['touch-action', 'var(--tw-pan-x, ) var(--tw-pan-y, ) var(--tw-pinch-zoom, )'],
   ])
 
   /**
@@ -1965,6 +1993,11 @@ export function createUtilities(theme: Theme) {
 
   functionalUtility('auto-cols', {
     themeKeys: ['--grid-auto-columns'],
+    handleBareValue: ({ value }) => {
+      if (!theme.resolve(null, ['--spacing'])) return null
+      if (!isValidSpacingMultiplier(value)) return null
+      return `--spacing(${value})`
+    },
     handle: (value) => [decl('grid-auto-columns', value)],
     staticValues: {
       auto: [decl('grid-auto-columns', 'auto')],
@@ -1976,6 +2009,11 @@ export function createUtilities(theme: Theme) {
 
   functionalUtility('auto-rows', {
     themeKeys: ['--grid-auto-rows'],
+    handleBareValue: ({ value }) => {
+      if (!theme.resolve(null, ['--spacing'])) return null
+      if (!isValidSpacingMultiplier(value)) return null
+      return `--spacing(${value})`
+    },
     handle: (value) => [decl('grid-auto-rows', value)],
     staticValues: {
       auto: [decl('grid-auto-rows', 'auto')],
@@ -2101,31 +2139,65 @@ export function createUtilities(theme: Theme) {
   spacingUtility(
     'space-x',
     ['--space', '--spacing'],
-    (value) => [
-      atRoot([property('--tw-space-x-reverse', '0')]),
+    (value) => {
+      let zero = (() => {
+        if (value === '--spacing(0)') return true
+        if (value === '--spacing(-0)') return true
 
-      styleRule(':where(& > :not(:last-child))', [
-        decl('--tw-sort', 'row-gap'),
-        decl('--tw-space-x-reverse', '0'),
-        decl('margin-inline-start', `calc(${value} * var(--tw-space-x-reverse))`),
-        decl('margin-inline-end', `calc(${value} * calc(1 - var(--tw-space-x-reverse)))`),
-      ]),
-    ],
+        let parsed = dimensions.get(value)
+        if (parsed && parsed[0] === 0 && (parsed[1] === null || isLength(value))) {
+          return true
+        }
+
+        return false
+      })()
+
+      return [
+        atRoot([property('--tw-space-x-reverse', '0')]),
+
+        styleRule(':where(& > :not(:last-child))', [
+          decl('--tw-sort', 'row-gap'),
+          decl('--tw-space-x-reverse', '0'),
+          decl('margin-inline-start', zero ? '0' : `calc(${value} * var(--tw-space-x-reverse))`),
+          decl(
+            'margin-inline-end',
+            zero ? '0' : `calc(${value} * calc(1 - var(--tw-space-x-reverse)))`,
+          ),
+        ]),
+      ]
+    },
     { supportsNegative: true },
   )
 
   spacingUtility(
     'space-y',
     ['--space', '--spacing'],
-    (value) => [
-      atRoot([property('--tw-space-y-reverse', '0')]),
-      styleRule(':where(& > :not(:last-child))', [
-        decl('--tw-sort', 'column-gap'),
-        decl('--tw-space-y-reverse', '0'),
-        decl('margin-block-start', `calc(${value} * var(--tw-space-y-reverse))`),
-        decl('margin-block-end', `calc(${value} * calc(1 - var(--tw-space-y-reverse)))`),
-      ]),
-    ],
+    (value) => {
+      let zero = (() => {
+        if (value === '--spacing(0)') return true
+        if (value === '--spacing(-0)') return true
+
+        let parsed = dimensions.get(value)
+        if (parsed && parsed[0] === 0 && (parsed[1] === null || isLength(value))) {
+          return true
+        }
+
+        return false
+      })()
+
+      return [
+        atRoot([property('--tw-space-y-reverse', '0')]),
+        styleRule(':where(& > :not(:last-child))', [
+          decl('--tw-sort', 'column-gap'),
+          decl('--tw-space-y-reverse', '0'),
+          decl('margin-block-start', zero ? '0' : `calc(${value} * var(--tw-space-y-reverse))`),
+          decl(
+            'margin-block-end',
+            zero ? '0' : `calc(${value} * calc(1 - var(--tw-space-y-reverse)))`,
+          ),
+        ]),
+      ]
+    },
     { supportsNegative: true },
   )
 
@@ -2209,6 +2281,41 @@ export function createUtilities(theme: Theme) {
   staticUtility('scroll-auto', [['scroll-behavior', 'auto']])
   staticUtility('scroll-smooth', [['scroll-behavior', 'smooth']])
 
+  staticUtility('scrollbar-auto', [['scrollbar-width', 'auto']])
+  staticUtility('scrollbar-thin', [['scrollbar-width', 'thin']])
+  staticUtility('scrollbar-none', [['scrollbar-width', 'none']])
+
+  {
+    let scrollbarColorProperties = () => {
+      return atRoot([
+        property('--tw-scrollbar-thumb', '#0000', '<color>'),
+        property('--tw-scrollbar-track', '#0000', '<color>'),
+      ])
+    }
+
+    colorUtility('scrollbar-thumb', {
+      themeKeys: ['--color'],
+      handle: (value) => [
+        scrollbarColorProperties(),
+        decl('--tw-scrollbar-thumb', value),
+        decl('scrollbar-color', 'var(--tw-scrollbar-thumb) var(--tw-scrollbar-track)'),
+      ],
+    })
+
+    colorUtility('scrollbar-track', {
+      themeKeys: ['--color'],
+      handle: (value) => [
+        scrollbarColorProperties(),
+        decl('--tw-scrollbar-track', value),
+        decl('scrollbar-color', 'var(--tw-scrollbar-thumb) var(--tw-scrollbar-track)'),
+      ],
+    })
+  }
+
+  staticUtility('scrollbar-gutter-auto', [['scrollbar-gutter', 'auto']])
+  staticUtility('scrollbar-gutter-stable', [['scrollbar-gutter', 'stable']])
+  staticUtility('scrollbar-gutter-both', [['scrollbar-gutter', 'stable both-edges']])
+
   staticUtility('truncate', [
     ['overflow', 'hidden'],
     ['text-overflow', 'ellipsis'],
@@ -2238,6 +2345,16 @@ export function createUtilities(theme: Theme) {
   staticUtility('whitespace-pre-wrap', [['white-space', 'pre-wrap']])
   staticUtility('whitespace-break-spaces', [['white-space', 'break-spaces']])
 
+  functionalUtility('tab', {
+    handleBareValue: ({ value }) => {
+      if (!isPositiveInteger(value)) return null
+      return value
+    },
+    handle: (value) => [decl('tab-size', value)],
+  })
+
+  suggest('tab', () => [{ values: ['2', '4', '8'] }])
+
   staticUtility('text-wrap', [['text-wrap', 'wrap']])
   staticUtility('text-nowrap', [['text-wrap', 'nowrap']])
   staticUtility('text-balance', [['text-wrap', 'balance']])
@@ -2381,6 +2498,7 @@ export function createUtilities(theme: Theme) {
         {
           values: ['current', 'inherit', 'transparent'],
           valueThemeKeys: ['--border-color', '--color'],
+          modifierThemeKeys: ['--opacity'],
           modifiers: Array.from({ length: 21 }, (_, index) => `${index * 5}`),
           hasDefaultValue: true,
         },
@@ -2851,6 +2969,7 @@ export function createUtilities(theme: Theme) {
     {
       values: ['current', 'inherit', 'transparent'],
       valueThemeKeys: ['--background-color', '--color'],
+      modifierThemeKeys: ['--opacity'],
       modifiers: Array.from({ length: 21 }, (_, index) => `${index * 5}`),
     },
     {
@@ -2930,6 +3049,7 @@ export function createUtilities(theme: Theme) {
       {
         values: ['current', 'inherit', 'transparent'],
         valueThemeKeys: ['--background-color', '--color'],
+        modifierThemeKeys: ['--opacity'],
         modifiers: Array.from({ length: 21 }, (_, index) => `${index * 5}`),
       },
       {
@@ -3178,7 +3298,7 @@ export function createUtilities(theme: Theme) {
             if (!multiplier) return
             if (!isValidSpacingMultiplier(candidate.value.value)) return
 
-            return desc.position(`calc(${multiplier} * ${candidate.value.value})`)
+            return desc.position(`--spacing(${candidate.value.value})`)
           }
 
           case 'percentage': {
@@ -3197,6 +3317,7 @@ export function createUtilities(theme: Theme) {
       {
         values: ['current', 'inherit', 'transparent'],
         valueThemeKeys: ['--background-color', '--color'],
+        modifierThemeKeys: ['--opacity'],
         modifiers: Array.from({ length: 21 }, (_, index) => `${index * 5}`),
       },
       {
@@ -3220,6 +3341,7 @@ export function createUtilities(theme: Theme) {
       {
         values: ['current', 'inherit', 'transparent'],
         valueThemeKeys: ['--background-color', '--color'],
+        modifierThemeKeys: ['--opacity'],
         modifiers: Array.from({ length: 21 }, (_, index) => `${index * 5}`),
       },
     ])
@@ -3353,13 +3475,19 @@ export function createUtilities(theme: Theme) {
     defaultValue: null,
     supportsNegative: true,
     supportsFractions: false,
-    handleBareValue(value) {
-      if (!isPositiveInteger(value.value)) return null
-      return `calc(1deg * ${value.value})`
+    handleBareValue({ value }) {
+      if (!isPositiveInteger(value)) return null
+      let valueAsNumber = Number(value)
+      if (valueAsNumber === 0) return '0deg'
+      if (valueAsNumber === 1) return '1deg'
+      return `calc(1deg * ${value})`
     },
-    handleNegativeBareValue(value) {
-      if (!isPositiveInteger(value.value)) return null
-      return `calc(1deg * -${value.value})`
+    handleNegativeBareValue({ value }) {
+      if (!isPositiveInteger(value)) return null
+      let valueAsNumber = Number(value)
+      if (valueAsNumber === 0) return '0deg'
+      if (valueAsNumber === 1) return '-1deg'
+      return `calc(1deg * -${value})`
     },
     handle: (value) => [
       maskPropertiesGradient(),
@@ -3571,13 +3699,19 @@ export function createUtilities(theme: Theme) {
     defaultValue: null,
     supportsNegative: true,
     supportsFractions: false,
-    handleBareValue(value) {
-      if (!isPositiveInteger(value.value)) return null
-      return `calc(1deg * ${value.value})`
+    handleBareValue({ value }) {
+      if (!isPositiveInteger(value)) return null
+      let valueAsNumber = Number(value)
+      if (valueAsNumber === 0) return '0deg'
+      if (valueAsNumber === 1) return '1deg'
+      return `calc(1deg * ${value})`
     },
-    handleNegativeBareValue(value) {
-      if (!isPositiveInteger(value.value)) return null
-      return `calc(1deg * -${value.value})`
+    handleNegativeBareValue({ value }) {
+      if (!isPositiveInteger(value)) return null
+      let valueAsNumber = Number(value)
+      if (valueAsNumber === 0) return '0deg'
+      if (valueAsNumber === 1) return '-1deg'
+      return `calc(1deg * -${value})`
     },
     handle: (value) => [
       maskPropertiesGradient(),
@@ -3722,6 +3856,7 @@ export function createUtilities(theme: Theme) {
     {
       values: ['current', 'inherit', 'transparent'],
       valueThemeKeys: ['--fill', '--color'],
+      modifierThemeKeys: ['--opacity'],
       modifiers: Array.from({ length: 21 }, (_, index) => `${index * 5}`),
     },
   ])
@@ -3760,6 +3895,10 @@ export function createUtilities(theme: Theme) {
     }
 
     {
+      // A modifier is only valid as the opacity of a stroke color. The value
+      // did not resolve to a color, so a modifier would be silently ignored.
+      if (candidate.modifier) return
+
       let value = theme.resolve(candidate.value.value, ['--stroke-width'])
       if (value) {
         return [decl('stroke-width', value)]
@@ -3773,6 +3912,7 @@ export function createUtilities(theme: Theme) {
     {
       values: ['current', 'inherit', 'transparent'],
       valueThemeKeys: ['--stroke', '--color'],
+      modifierThemeKeys: ['--opacity'],
       modifiers: Array.from({ length: 21 }, (_, index) => `${index * 5}`),
     },
     {
@@ -3960,7 +4100,7 @@ export function createUtilities(theme: Theme) {
   ])
 
   colorUtility('placeholder', {
-    themeKeys: ['--background-color', '--color'],
+    themeKeys: ['--placeholder-color', '--color'],
     handle: (value) => [
       styleRule('&::placeholder', [decl('--tw-sort', 'placeholder-color'), decl('color', value)]),
     ],
@@ -4030,6 +4170,7 @@ export function createUtilities(theme: Theme) {
     {
       values: ['current', 'inherit', 'transparent'],
       valueThemeKeys: ['--text-decoration-color', '--color'],
+      modifierThemeKeys: ['--opacity'],
       modifiers: Array.from({ length: 21 }, (_, index) => `${index * 5}`),
     },
     {
@@ -4048,27 +4189,27 @@ export function createUtilities(theme: Theme) {
 
   {
     let cssFilterValue = [
-      'var(--tw-blur,)',
-      'var(--tw-brightness,)',
-      'var(--tw-contrast,)',
-      'var(--tw-grayscale,)',
-      'var(--tw-hue-rotate,)',
-      'var(--tw-invert,)',
-      'var(--tw-saturate,)',
-      'var(--tw-sepia,)',
-      'var(--tw-drop-shadow,)',
+      'var(--tw-blur, )',
+      'var(--tw-brightness, )',
+      'var(--tw-contrast, )',
+      'var(--tw-grayscale, )',
+      'var(--tw-hue-rotate, )',
+      'var(--tw-invert, )',
+      'var(--tw-saturate, )',
+      'var(--tw-sepia, )',
+      'var(--tw-drop-shadow, )',
     ].join(' ')
 
     let cssBackdropFilterValue = [
-      'var(--tw-backdrop-blur,)',
-      'var(--tw-backdrop-brightness,)',
-      'var(--tw-backdrop-contrast,)',
-      'var(--tw-backdrop-grayscale,)',
-      'var(--tw-backdrop-hue-rotate,)',
-      'var(--tw-backdrop-invert,)',
-      'var(--tw-backdrop-opacity,)',
-      'var(--tw-backdrop-saturate,)',
-      'var(--tw-backdrop-sepia,)',
+      'var(--tw-backdrop-blur, )',
+      'var(--tw-backdrop-brightness, )',
+      'var(--tw-backdrop-contrast, )',
+      'var(--tw-backdrop-grayscale, )',
+      'var(--tw-backdrop-hue-rotate, )',
+      'var(--tw-backdrop-invert, )',
+      'var(--tw-backdrop-opacity, )',
+      'var(--tw-backdrop-saturate, )',
+      'var(--tw-backdrop-sepia, )',
     ].join(' ')
 
     let filterProperties = () => {
@@ -4488,7 +4629,7 @@ export function createUtilities(theme: Theme) {
         if (candidate.modifier.kind === 'arbitrary') {
           alpha = candidate.modifier.value
         } else {
-          if (isPositiveInteger(candidate.modifier.value)) {
+          if (isValidOpacityValue(candidate.modifier.value)) {
             alpha = `${candidate.modifier.value}%`
           }
         }
@@ -4498,6 +4639,7 @@ export function createUtilities(theme: Theme) {
         let value = theme.get(['--drop-shadow'])
         let resolved = theme.resolve(null, ['--drop-shadow'])
         if (value === null || resolved === null) return
+        if (candidate.modifier && !alpha) return
 
         return [
           filterProperties(),
@@ -4618,6 +4760,7 @@ export function createUtilities(theme: Theme) {
       {
         values: ['current', 'inherit', 'transparent'],
         valueThemeKeys: ['--drop-shadow-color', '--color'],
+        modifierThemeKeys: ['--opacity'],
         modifiers: Array.from({ length: 21 }, (_, index) => `${index * 5}`),
       },
       {
@@ -4810,7 +4953,7 @@ export function createUtilities(theme: Theme) {
 
   {
     let cssContainValue =
-      'var(--tw-contain-size,) var(--tw-contain-layout,) var(--tw-contain-paint,) var(--tw-contain-style,)'
+      'var(--tw-contain-size, ) var(--tw-contain-layout, ) var(--tw-contain-paint, ) var(--tw-contain-style, )'
     let cssContainProperties = () => {
       return atRoot([
         property('--tw-contain-size'),
@@ -4904,7 +5047,7 @@ export function createUtilities(theme: Theme) {
 
   {
     let cssFontVariantNumericValue =
-      'var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,)'
+      'var(--tw-ordinal, ) var(--tw-slashed-zero, ) var(--tw-numeric-figure, ) var(--tw-numeric-spacing, ) var(--tw-numeric-fraction, )'
     let fontVariantNumericProperties = () => {
       return atRoot([
         property('--tw-ordinal'),
@@ -5075,6 +5218,7 @@ export function createUtilities(theme: Theme) {
       {
         values: ['current', 'inherit', 'transparent'],
         valueThemeKeys: ['--outline-color', '--color'],
+        modifierThemeKeys: ['--opacity'],
         modifiers: Array.from({ length: 21 }, (_, index) => `${index * 5}`),
         hasDefaultValue: true,
       },
@@ -5164,7 +5308,7 @@ export function createUtilities(theme: Theme) {
             if (!modifier && isValidSpacingMultiplier(candidate.modifier.value)) {
               let multiplier = theme.resolve(null, ['--spacing'])
               if (!multiplier) return null
-              modifier = `calc(${multiplier} * ${candidate.modifier.value})`
+              modifier = `--spacing(${candidate.modifier.value})`
             }
 
             // Shorthand for `leading-none`
@@ -5217,7 +5361,7 @@ export function createUtilities(theme: Theme) {
           if (!modifier && isValidSpacingMultiplier(candidate.modifier.value)) {
             let multiplier = theme.resolve(null, ['--spacing'])
             if (!multiplier) return null
-            modifier = `calc(${multiplier} * ${candidate.modifier.value})`
+            modifier = `--spacing(${candidate.modifier.value})`
           }
 
           // Shorthand for `leading-none`
@@ -5265,6 +5409,7 @@ export function createUtilities(theme: Theme) {
     {
       values: ['current', 'inherit', 'transparent'],
       valueThemeKeys: ['--text-color', '--color'],
+      modifierThemeKeys: ['--opacity'],
       modifiers: Array.from({ length: 21 }, (_, index) => `${index * 5}`),
     },
     {
@@ -5294,7 +5439,7 @@ export function createUtilities(theme: Theme) {
       if (candidate.modifier.kind === 'arbitrary') {
         alpha = candidate.modifier.value
       } else {
-        if (isPositiveInteger(candidate.modifier.value)) {
+        if (isValidOpacityValue(candidate.modifier.value)) {
           alpha = `${candidate.modifier.value}%`
         }
       }
@@ -5303,6 +5448,7 @@ export function createUtilities(theme: Theme) {
     if (!candidate.value) {
       let value = theme.get(['--text-shadow'])
       if (value === null) return
+      if (candidate.modifier && !alpha) return
 
       return [
         textShadowProperties(),
@@ -5330,6 +5476,8 @@ export function createUtilities(theme: Theme) {
           ]
         }
         default: {
+          if (candidate.modifier && !alpha) return
+
           return [
             textShadowProperties(),
             decl('--tw-text-shadow-alpha', alpha),
@@ -5358,6 +5506,8 @@ export function createUtilities(theme: Theme) {
     {
       let value = theme.get([`--text-shadow-${candidate.value.value}`])
       if (value) {
+        if (candidate.modifier && !alpha) return
+
         return [
           textShadowProperties(),
           decl('--tw-text-shadow-alpha', alpha),
@@ -5387,6 +5537,7 @@ export function createUtilities(theme: Theme) {
     {
       values: ['current', 'inherit', 'transparent'],
       valueThemeKeys: ['--text-shadow-color', '--color'],
+      modifierThemeKeys: ['--opacity'],
       modifiers: Array.from({ length: 21 }, (_, index) => `${index * 5}`),
     },
     {
@@ -5439,7 +5590,7 @@ export function createUtilities(theme: Theme) {
         if (candidate.modifier.kind === 'arbitrary') {
           alpha = candidate.modifier.value
         } else {
-          if (isPositiveInteger(candidate.modifier.value)) {
+          if (isValidOpacityValue(candidate.modifier.value)) {
             alpha = `${candidate.modifier.value}%`
           }
         }
@@ -5448,6 +5599,7 @@ export function createUtilities(theme: Theme) {
       if (!candidate.value) {
         let value = theme.get(['--shadow'])
         if (value === null) return
+        if (candidate.modifier && !alpha) return
 
         return [
           boxShadowProperties(),
@@ -5477,6 +5629,8 @@ export function createUtilities(theme: Theme) {
             ]
           }
           default: {
+            if (candidate.modifier && !alpha) return
+
             return [
               boxShadowProperties(),
               decl('--tw-shadow-alpha', alpha),
@@ -5510,6 +5664,8 @@ export function createUtilities(theme: Theme) {
       {
         let value = theme.get([`--shadow-${candidate.value.value}`])
         if (value) {
+          if (candidate.modifier && !alpha) return
+
           return [
             boxShadowProperties(),
             decl('--tw-shadow-alpha', alpha),
@@ -5540,6 +5696,7 @@ export function createUtilities(theme: Theme) {
       {
         values: ['current', 'inherit', 'transparent'],
         valueThemeKeys: ['--box-shadow-color', '--color'],
+        modifierThemeKeys: ['--opacity'],
         modifiers: Array.from({ length: 21 }, (_, index) => `${index * 5}`),
       },
       {
@@ -5564,7 +5721,7 @@ export function createUtilities(theme: Theme) {
         if (candidate.modifier.kind === 'arbitrary') {
           alpha = candidate.modifier.value
         } else {
-          if (isPositiveInteger(candidate.modifier.value)) {
+          if (isValidOpacityValue(candidate.modifier.value)) {
             alpha = `${candidate.modifier.value}%`
           }
         }
@@ -5573,6 +5730,7 @@ export function createUtilities(theme: Theme) {
       if (!candidate.value) {
         let value = theme.get(['--inset-shadow'])
         if (value === null) return
+        if (candidate.modifier && !alpha) return
 
         return [
           boxShadowProperties(),
@@ -5602,6 +5760,8 @@ export function createUtilities(theme: Theme) {
             ]
           }
           default: {
+            if (candidate.modifier && !alpha) return
+
             return [
               boxShadowProperties(),
               decl('--tw-inset-shadow-alpha', alpha),
@@ -5623,7 +5783,7 @@ export function createUtilities(theme: Theme) {
           if (candidate.modifier) return
           return [
             boxShadowProperties(),
-            decl('--tw-inset-shadow', nullShadow),
+            decl('--tw-inset-shadow', `inset ${nullShadow}`),
             decl('box-shadow', cssBoxShadowValue),
           ]
 
@@ -5637,6 +5797,8 @@ export function createUtilities(theme: Theme) {
         let value = theme.get([`--inset-shadow-${candidate.value.value}`])
 
         if (value) {
+          if (candidate.modifier && !alpha) return
+
           return [
             boxShadowProperties(),
             decl('--tw-inset-shadow-alpha', alpha),
@@ -5667,6 +5829,7 @@ export function createUtilities(theme: Theme) {
       {
         values: ['current', 'inherit', 'transparent'],
         valueThemeKeys: ['--box-shadow-color', '--color'],
+        modifierThemeKeys: ['--opacity'],
         modifiers: Array.from({ length: 21 }, (_, index) => `${index * 5}`),
       },
       {
@@ -5683,7 +5846,7 @@ export function createUtilities(theme: Theme) {
 
     let defaultRingColor = theme.get(['--default-ring-color']) ?? 'currentcolor'
     function ringShadowValue(value: string) {
-      return `var(--tw-ring-inset,) 0 0 0 calc(${value} + var(--tw-ring-offset-width)) var(--tw-ring-color, ${defaultRingColor})`
+      return `var(--tw-ring-inset, ) 0 0 0 calc(${value} + var(--tw-ring-offset-width)) var(--tw-ring-color, ${defaultRingColor})`
     }
     utilities.functional('ring', (candidate) => {
       if (!candidate.value) {
@@ -5747,6 +5910,7 @@ export function createUtilities(theme: Theme) {
       {
         values: ['current', 'inherit', 'transparent'],
         valueThemeKeys: ['--ring-color', '--color'],
+        modifierThemeKeys: ['--opacity'],
         modifiers: Array.from({ length: 21 }, (_, index) => `${index * 5}`),
       },
       {
@@ -5820,6 +5984,7 @@ export function createUtilities(theme: Theme) {
       {
         values: ['current', 'inherit', 'transparent'],
         valueThemeKeys: ['--ring-color', '--color'],
+        modifierThemeKeys: ['--opacity'],
         modifiers: Array.from({ length: 21 }, (_, index) => `${index * 5}`),
       },
       {
@@ -5830,7 +5995,7 @@ export function createUtilities(theme: Theme) {
     ])
 
     let ringOffsetShadowValue =
-      'var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color)'
+      'var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color)'
     utilities.functional('ring-offset', (candidate) => {
       if (!candidate.value) return
 
@@ -5887,6 +6052,7 @@ export function createUtilities(theme: Theme) {
     {
       values: ['current', 'inherit', 'transparent'],
       valueThemeKeys: ['--ring-offset-color', '--color'],
+      modifierThemeKeys: ['--opacity'],
       modifiers: Array.from({ length: 21 }, (_, index) => `${index * 5}`),
     },
     {
@@ -5903,11 +6069,7 @@ export function createUtilities(theme: Theme) {
       value = candidate.value.value
     } else if (candidate.value.kind === 'named' && candidate.value.value === 'normal') {
       value = 'normal'
-    } else if (
-      enableContainerSizeUtility &&
-      candidate.value.kind === 'named' &&
-      candidate.value.value === 'size'
-    ) {
+    } else if (candidate.value.kind === 'named' && candidate.value.value === 'size') {
       value = 'size'
     }
 
@@ -5956,6 +6118,8 @@ export function createCssUtility(node: AtRule) {
     // - `--value(number)`            resolves a bare value of type number
     // - `--value([number])`          resolves an arbitrary value of type number
     // - `--value(--color)`           resolves a theme value in the `color` namespace
+    // - `--value(--default(4))`      resolves to a default value when only the
+    //                                root of the functional utility was used.
     // - `--value(number, [number])`  resolves a bare value of type number or an
     //                                arbitrary value of type number in order.
     //
@@ -6056,6 +6220,15 @@ export function createCssUtility(node: AtRule) {
 
           let args = segment(ValueParser.toCss(fn.nodes), ',')
           for (let [idx, arg] of args.entries()) {
+            arg = arg.trim()
+
+            // The value of `--default(…)` is emitted as-is, so it should not be
+            // normalized.
+            if (arg.startsWith('--default(')) {
+              args[idx] = arg
+              continue
+            }
+
             // Transform escaped `\\*` -> `*`
             arg = arg.replace(/\\\*/g, '*')
 
@@ -6069,7 +6242,7 @@ export function createCssUtility(node: AtRule) {
             arg = arg.replace(/(-\*){2,}/g, '-*')
 
             // Ensure trailing `-*` exists if `-*` isn't present yet
-            if (arg[0] === '-' && arg[1] === '-' && !arg.includes('-*')) {
+            if (arg[0] === '-' && arg[1] === '-' && !arg.includes('(') && !arg.includes('-*')) {
               arg += '-*'
             }
 
@@ -6135,9 +6308,8 @@ export function createCssUtility(node: AtRule) {
         let value = candidate.value
         let modifier = candidate.modifier
 
-        // A value is required for functional utilities, if you want to accept
-        // just `tab-size`, you'd have to use a static utility.
-        if (value === null) return
+        // Functional CSS utilities must resolve at least one `--value(…)`.
+        // Use `--default(…)` inside `--value(…)` for the omitted-value case.
 
         // Whether `--value(…)` was used
         let usedValueFn = false
@@ -6178,14 +6350,14 @@ export function createCssUtility(node: AtRule) {
           let shouldRemoveDeclaration = false
 
           let valueAst = ValueParser.parse(node.value)
-          walk(valueAst, (valueNode) => {
-            if (valueNode.kind !== 'function') return
+          walk(valueAst, (fnNode) => {
+            if (fnNode.kind !== 'function') return
 
             // Value function, e.g.: `--value(integer)`
-            if (valueNode.value === '--value') {
+            if (fnNode.value === '--value') {
               usedValueFn = true
 
-              let resolved = resolveValueFunction(value, valueNode, designSystem)
+              let resolved = resolveValueFunction(value, fnNode, designSystem)
               if (resolved) {
                 resolvedValueFn = true
                 if (resolved.ratio) {
@@ -6197,30 +6369,21 @@ export function createCssUtility(node: AtRule) {
               }
 
               // Drop the declaration in case we couldn't resolve the value
-              usedValueFn ||= false
               shouldRemoveDeclaration = true
               return WalkAction.Stop
             }
 
             // Modifier function, e.g.: `--modifier(integer)`
-            else if (valueNode.value === '--modifier') {
-              // If there is no modifier present in the candidate, then the
-              // declaration can be removed.
-              if (modifier === null) {
-                shouldRemoveDeclaration = true
-                return WalkAction.Stop
-              }
-
+            else if (fnNode.value === '--modifier') {
               usedModifierFn = true
 
-              let replacement = resolveValueFunction(modifier, valueNode, designSystem)
-              if (replacement) {
+              let resolved = resolveValueFunction(modifier, fnNode, designSystem)
+              if (resolved) {
                 resolvedModifierFn = true
-                return WalkAction.ReplaceSkip(replacement.nodes)
+                return WalkAction.ReplaceSkip(resolved.nodes)
               }
 
               // Drop the declaration in case we couldn't resolve the value
-              usedModifierFn ||= false
               shouldRemoveDeclaration = true
               return WalkAction.Stop
             }
@@ -6233,11 +6396,12 @@ export function createCssUtility(node: AtRule) {
           node.value = ValueParser.toCss(valueAst)
         })
 
-        // Used `--value(…)` but nothing resolved
-        if (usedValueFn && !resolvedValueFn) return null
+        // Functional CSS utilities require `--value(…)`, and one of those
+        // branches must resolve for the candidate to be valid.
+        if (!usedValueFn || !resolvedValueFn) return null
 
         // Used `--modifier(…)` but nothing resolved
-        if (usedModifierFn && !resolvedModifierFn) return null
+        if (usedModifierFn && !resolvedModifierFn && modifier !== null) return null
 
         // Resolved `--value(ratio)` and `--modifier(…)`, which is invalid
         if (resolvedRatioValue && resolvedModifierFn) return null
@@ -6308,13 +6472,23 @@ export function createCssUtility(node: AtRule) {
 }
 
 function resolveValueFunction(
-  value: NonNullable<
+  value:
     | Extract<Candidate, { kind: 'functional' }>['value']
-    | Extract<Candidate, { kind: 'functional' }>['modifier']
-  >,
+    | Extract<Candidate, { kind: 'functional' }>['modifier'],
   fn: ValueParser.ValueFunctionNode,
   designSystem: DesignSystem,
 ): { nodes: ValueParser.ValueAstNode[]; ratio?: boolean } | undefined {
+  // No value provided, we can try `--default(…)`
+  if (value === null) {
+    for (let arg of fn.nodes) {
+      // Resolve default value, e.g.: `--default(…)`
+      if (arg.kind === 'function' && arg.value === '--default') {
+        return { nodes: arg.nodes }
+      }
+    }
+    return
+  }
+
   for (let arg of fn.nodes) {
     // Resolve literal value, e.g.: `--modifier('closest-side')`
     if (
diff --git a/packages/tailwindcss/src/utils/compare-breakpoints.ts b/packages/tailwindcss/src/utils/compare-breakpoints.ts
index 08e97998e..4eb562764 100644
--- a/packages/tailwindcss/src/utils/compare-breakpoints.ts
+++ b/packages/tailwindcss/src/utils/compare-breakpoints.ts
@@ -25,7 +25,7 @@ export function compareBreakpoints(a: string, z: string, direction: 'asc' | 'des
     // Compare by bucket name
     (aBucket === zBucket ? 0 : aBucket < zBucket ? -1 : 1) ||
     // If bucket names are the same, compare by value
-    (direction === 'asc' ? parseInt(a) - parseInt(z) : parseInt(z) - parseInt(a))
+    (direction === 'asc' ? parseFloat(a) - parseFloat(z) : parseFloat(z) - parseFloat(a))
 
   // If the groups are the same, and the contents are not numbers, the
   // `order` will result in `NaN`. In this case, we want to make sorting
diff --git a/packages/tailwindcss/src/utils/escape.test.ts b/packages/tailwindcss/src/utils/escape.test.ts
index ff7715b9d..f4c8e1192 100644
--- a/packages/tailwindcss/src/utils/escape.test.ts
+++ b/packages/tailwindcss/src/utils/escape.test.ts
@@ -11,4 +11,14 @@ describe('unescape', () => {
   test('removes backslashes', () => {
     expect(unescape(String.raw`red-1\/2`)).toMatchInlineSnapshot(`"red-1/2"`)
   })
+
+  test('replaces out-of-range escaped code points', () => {
+    expect(
+      unescape(
+        String.raw`--Coding-Projects-CharacterMapper-Master-Workspace\d8819554-4725-4235-9d22-2d0ed572e924`,
+      ),
+    ).toMatchInlineSnapshot(
+      `"--Coding-Projects-CharacterMapper-Master-Workspace�54-4725-4235-9d22-2d0ed572e924"`,
+    )
+  })
 })
diff --git a/packages/tailwindcss/src/utils/escape.ts b/packages/tailwindcss/src/utils/escape.ts
index cbcfa62a0..c430e4ad4 100644
--- a/packages/tailwindcss/src/utils/escape.ts
+++ b/packages/tailwindcss/src/utils/escape.ts
@@ -74,8 +74,24 @@ export function escape(value: string) {
 
 export function unescape(escaped: string) {
   return escaped.replace(/\\([\dA-Fa-f]{1,6}[\t\n\f\r ]?|[\S\s])/g, (match) => {
-    return match.length > 2
-      ? String.fromCodePoint(Number.parseInt(match.slice(1).trim(), 16))
-      : match[1]
+    if (match.length <= 2) {
+      return match[1]
+    }
+
+    let codePoint = Number.parseInt(match.slice(1).trim(), 16)
+
+    if (
+      // Invalid codepoint: https://infra.spec.whatwg.org/#code-point
+      codePoint === 0x0000 ||
+      codePoint > 0x10ffff ||
+      // Is surrogate: https://infra.spec.whatwg.org/#leading-surrogate
+      //  - A leading surrogate is a code point that is in the range U+D800 to U+DBFF, inclusive.
+      //  - A trailing surrogate is a code point that is in the range U+DC00 to U+DFFF, inclusive.
+      (codePoint >= 0xd800 && codePoint <= 0xdfff)
+    ) {
+      return '\uFFFD'
+    }
+
+    return String.fromCodePoint(codePoint)
   })
 }
diff --git a/packages/tailwindcss/src/utils/infer-data-type.ts b/packages/tailwindcss/src/utils/infer-data-type.ts
index afaab7c60..3317572f3 100644
--- a/packages/tailwindcss/src/utils/infer-data-type.ts
+++ b/packages/tailwindcss/src/utils/infer-data-type.ts
@@ -232,9 +232,10 @@ const LENGTH_UNITS = [
 ]
 
 const IS_LENGTH = new RegExp(`^${HAS_NUMBER.source}(${LENGTH_UNITS.join('|')})$`)
+const IS_LENGTH_FN = /^(--spacing)\(/i
 
 export function isLength(value: string): boolean {
-  return IS_LENGTH.test(value) || hasMathFn(value)
+  return IS_LENGTH.test(value) || IS_LENGTH_FN.test(value) || hasMathFn(value)
 }
 
 /* -------------------------------------------------------------------------- */
diff --git a/packages/tailwindcss/src/utils/is-color.ts b/packages/tailwindcss/src/utils/is-color.ts
index e3501aa86..de7c4cbd4 100644
--- a/packages/tailwindcss/src/utils/is-color.ts
+++ b/packages/tailwindcss/src/utils/is-color.ts
@@ -195,10 +195,14 @@ const NAMED_COLORS = new Set([
   'accentcolortext',
 ])
 
-const IS_COLOR_FN = /^(rgba?|hsla?|hwb|color|(ok)?(lab|lch)|light-dark|color-mix)\(/i
+const IS_COLOR_FN = /^(rgba?|hsla?|hwb|color|(ok)?(lab|lch)|light-dark|color-mix|--alpha)\(/i
 
 export function isColor(value: string): boolean {
   return (
     value.charCodeAt(0) === HASH || IS_COLOR_FN.test(value) || NAMED_COLORS.has(value.toLowerCase())
   )
 }
+
+export function isNamedColor(value: string): boolean {
+  return NAMED_COLORS.has(value.toLowerCase())
+}
diff --git a/packages/tailwindcss/src/utils/replace-shadow-colors.test.ts b/packages/tailwindcss/src/utils/replace-shadow-colors.test.ts
index 6303e5a8d..701e80f05 100644
--- a/packages/tailwindcss/src/utils/replace-shadow-colors.test.ts
+++ b/packages/tailwindcss/src/utils/replace-shadow-colors.test.ts
@@ -1,4 +1,5 @@
 import { describe, expect, it } from 'vitest'
+import { cartesian } from '../cartesian'
 import { replaceAlpha } from '../utilities'
 import { replaceShadowColors } from './replace-shadow-colors'
 
@@ -40,6 +41,59 @@ describe('without replacer', () => {
     expect(parsed).toMatchInlineSnapshot(`"1px 2px 3px 4px var(--tw-shadow-color, currentcolor)"`)
   })
 
+  it('should find the color regardless of its position', () => {
+    for (let [x, y, blur, spread, color] of cartesian(
+      ['calc(var(--spacing) * 1)', '1', '--spacing(1)'], // x
+      ['calc(var(--spacing) * 2)', '2', '--spacing(2)'], // y
+      ['calc(var(--spacing) * 3)', '3', '--spacing(3)'], // blur
+      ['calc(var(--spacing) * 4)', '4', '--spacing(4)'], // spread
+      ['black', 'rgb(0, 0, 0)', '#000', '--alpha(var(--color) / 50%)', 'var(--uknown-color)'], // color
+    )) {
+      let expectedColor = `var(--tw-shadow-color, ${color})`
+
+      {
+        let input = `${x} ${color} ${y} ${blur} ${spread}`
+        expect(replaceShadowColors(input, replacer)).toEqual(input.replace(color, expectedColor))
+      }
+
+      {
+        let input = `${x} ${y} ${color} ${blur} ${spread}`
+        expect(replaceShadowColors(input, replacer)).toEqual(input.replace(color, expectedColor))
+      }
+
+      {
+        let input = `${x} ${y} ${blur} ${color} ${spread}`
+        expect(replaceShadowColors(input, replacer)).toEqual(input.replace(color, expectedColor))
+      }
+    }
+  })
+
+  // When using `var(…)`, we don't know the types of the used variables, but we
+  // might be able to find the color itself.
+  it.each([
+    'black', // Named color
+    '#000', // Hex color
+    'rgb(0, 0, 0)', // Color functions
+    '--alpha(var(--color) / 50%)', // Known custom functions
+  ])('should find the color (%s)', (color) => {
+    let expectedColor = `var(--tw-shadow-color, ${color})`
+
+    {
+      let input = `var(--x) var(--y) ${color}`
+      expect(replaceShadowColors(input, replacer)).toEqual(input.replace(color, expectedColor))
+    }
+
+    {
+      let input = `var(--x) var(--y) var(--blur) ${color}`
+      expect(replaceShadowColors(input, replacer)).toEqual(input.replace(color, expectedColor))
+    }
+
+    {
+      let input = `var(--x) var(--y) var(--blur) var(--spread) ${color}`
+      expect(replaceShadowColors(input, replacer)).toEqual(input.replace(color, expectedColor))
+    }
+  })
+
   it('should handle multiple shadows', () => {
     let parsed = replaceShadowColors(
       ['var(--my-shadow)', '1px 1px var(--my-color)', '0 0 1px var(--my-color)'].join(', '),
diff --git a/packages/tailwindcss/src/utils/replace-shadow-colors.ts b/packages/tailwindcss/src/utils/replace-shadow-colors.ts
index e51f9c2a0..5f9e0264c 100644
--- a/packages/tailwindcss/src/utils/replace-shadow-colors.ts
+++ b/packages/tailwindcss/src/utils/replace-shadow-colors.ts
@@ -1,47 +1,134 @@
+import * as ValueParser from '../value-parser'
+import { walk, WalkAction } from '../walk'
+import { isNamedColor } from './is-color'
 import { segment } from './segment'
 
 const KEYWORDS = new Set(['inset', 'inherit', 'initial', 'revert', 'unset'])
-const LENGTH = /^-?(\d+|\.\d+)(.*?)$/g
+const LENGTH_FUNCTIONS = new Set(['calc', 'clamp', 'max', 'min', '--spacing'])
+const COLOR_FUNCTIONS = new Set([
+  'color',
+  'color-mix',
+  'contrast-color',
+  'device-cmyk',
+  'hsl',
+  'hsla',
+  'hwb',
+  'lab',
+  'lch',
+  'light-dark',
+  'oklab',
+  'oklch',
+  'rgb',
+  'rgba',
+  '--alpha',
+])
+const LENGTH = /^-?(\d+|\.\d+)(.*?)$/
 
 export function replaceShadowColors(input: string, replacement: (color: string) => string) {
+  function replaceAst(node: ValueParser.ValueAstNode): ValueParser.ValueAstNode[] {
+    let color = ValueParser.toCss([node])
+    let updatedColor = replacement(color)
+    let ast = ValueParser.parse(updatedColor)
+    return ast
+  }
+
   let shadows = segment(input, ',').map((shadow) => {
     shadow = shadow.trim()
-    let parts = segment(shadow, ' ').filter((part) => part.trim() !== '')
-    let color = null
-    let offsetX = null
-    let offsetY = null
+    let ast = ValueParser.parse(shadow)
 
-    for (let part of parts) {
-      if (KEYWORDS.has(part)) {
-        continue
-      } else if (LENGTH.test(part)) {
-        if (offsetX === null) {
-          offsetX = part
-        } else if (offsetY === null) {
-          offsetY = part
+    let unknown: ValueParser.ValueAstNode | null = null
+    let unknowns = 0
+    let lengths = 0
+    let replaced = false
+
+    walk(ast, (node) => {
+      switch (node.kind) {
+        case 'word': {
+          // Skip known keywords
+          if (KEYWORDS.has(node.value.toLowerCase())) {
+            return WalkAction.Continue
+          }
+
+          // Must be a length
+          if (LENGTH.test(node.value.toLowerCase())) {
+            lengths++
+            return WalkAction.Continue
+          }
+
+          // Must be a color
+          if (node.value[0] === '#' || isNamedColor(node.value)) {
+            replaced = true
+            return WalkAction.ReplaceStop(replaceAst(node))
+          }
+
+          // We're not sure yet
+          unknown = node
+          unknowns++
+          break
         }
 
-        // Reset index, since the regex is stateful.
-        LENGTH.lastIndex = 0
-      } else if (color === null) {
-        color = part
+        case 'function': {
+          // Must be a color
+          if (COLOR_FUNCTIONS.has(node.value.toLowerCase())) {
+            replaced = true
+            return WalkAction.ReplaceStop(replaceAst(node))
+          }
+
+          // Must be a length
+          if (LENGTH_FUNCTIONS.has(node.value.toLowerCase())) {
+            lengths++
+            return WalkAction.Skip
+          }
+
+          // We're not sure yet
+          unknown = node
+          unknowns++
+
+          // We're not interested in the arguments of the function
+          return WalkAction.Skip
+        }
+
+        // Ignore separators
+        case 'separator':
+          return WalkAction.Continue
+
+        default:
+          node satisfies never
       }
+    })
+
+    // We definitely found a color, nothing else to do
+    if (replaced) {
+      return ValueParser.toCss(ast)
     }
 
     // If the x and y offsets were not detected, the shadow is either invalid or
     // using a variable to represent more than one field in the shadow value, so
     // we can't know what to replace.
-    if (offsetX === null || offsetY === null) return shadow
-
-    let replacementColor = replacement(color ?? 'currentcolor')
-
-    if (color !== null) {
-      // If a color was found, replace the color.
-      return shadow.replace(color, replacementColor)
+    if (lengths < 2) {
+      return shadow
     }
+
     // If no color was found, assume the shadow is relying on the browser
     // default shadow color and append the replacement color.
-    return `${shadow} ${replacementColor}`
+    if (unknowns === 0) {
+      return `${shadow} ${replacement('currentcolor')}`
+    }
+
+    // A single left-over, we assume that this is the color
+    if (unknowns === 1) {
+      walk(ast, (node) => {
+        if (node === unknown) {
+          replaced = true
+          return WalkAction.ReplaceStop(replaceAst(node))
+        }
+
+        // Keep the walk top-level only, no need to go into functions
+        return WalkAction.Skip
+      })
+    }
+
+    return replaced ? ValueParser.toCss(ast) : shadow
   })
 
   return shadows.join(', ')
diff --git a/packages/tailwindcss/src/utils/variables.ts b/packages/tailwindcss/src/utils/variables.ts
index 57ac4c3a5..b72987565 100644
--- a/packages/tailwindcss/src/utils/variables.ts
+++ b/packages/tailwindcss/src/utils/variables.ts
@@ -1,7 +1,8 @@
 import * as ValueParser from '../value-parser'
 import { walk, WalkAction } from '../walk'
+import { DefaultMap } from './default-map'
 
-export function extractUsedVariables(raw: string): string[] {
+let extractUsedVariablesCache = new DefaultMap((raw) => {
   let variables: string[] = []
   walk(ValueParser.parse(raw), (node) => {
     if (node.kind !== 'function' || node.value !== 'var') return
@@ -15,4 +16,8 @@ export function extractUsedVariables(raw: string): string[] {
     return WalkAction.Skip
   })
   return variables
+})
+
+export function extractUsedVariables(raw: string): string[] {
+  return extractUsedVariablesCache.get(raw)
 }
diff --git a/packages/tailwindcss/src/variants.test.ts b/packages/tailwindcss/src/variants.test.ts
index d69847bb2..37f9ebbea 100644
--- a/packages/tailwindcss/src/variants.test.ts
+++ b/packages/tailwindcss/src/variants.test.ts
@@ -1,50 +1,58 @@
-import dedent from 'dedent'
 import { expect, test } from 'vitest'
 import createPlugin from './plugin'
-import { compileCss, run } from './test-utils/run'
+import { run } from './test-utils/run'
 import { Compounds, compoundsForSelectors } from './variants'
 
 const css = String.raw
 
 test('*', async () => {
   expect(await run(['*:flex'])).toMatchInlineSnapshot(`
-    ":is(.\\*\\:flex > *) {
+    "
+    :is(.\\*\\:flex > *) {
       display: flex;
-    }"
+    }
+    "
   `)
   expect(await run(['*/foo:flex'])).toEqual('')
 })
 
 test('**', async () => {
   expect(await run(['**:flex'])).toMatchInlineSnapshot(`
-    ":is(.\\*\\*\\:flex *) {
+    "
+    :is(.\\*\\*\\:flex *) {
       display: flex;
-    }"
+    }
+    "
   `)
   expect(await run(['**/foo:flex'])).toEqual('')
 })
 
 test('first-letter', async () => {
   expect(await run(['first-letter:flex'])).toMatchInlineSnapshot(`
-    ".first-letter\\:flex:first-letter {
+    "
+    .first-letter\\:flex:first-letter {
       display: flex;
-    }"
+    }
+    "
   `)
   expect(await run(['first-letter/foo:flex'])).toEqual('')
 })
 
 test('first-line', async () => {
   expect(await run(['first-line:flex'])).toMatchInlineSnapshot(`
-    ".first-line\\:flex:first-line {
+    "
+    .first-line\\:flex:first-line {
       display: flex;
-    }"
+    }
+    "
   `)
   expect(await run(['first-line/foo:flex'])).toEqual('')
 })
 
 test('marker', async () => {
   expect(await run(['marker:flex'])).toMatchInlineSnapshot(`
-    ".marker\\:flex ::marker {
+    "
+    .marker\\:flex ::marker {
       display: flex;
     }
 
@@ -58,63 +66,75 @@ test('marker', async () => {
 
     .marker\\:flex::-webkit-details-marker {
       display: flex;
-    }"
+    }
+    "
   `)
   expect(await run(['marker/foo:flex'])).toEqual('')
 })
 
 test('selection', async () => {
   expect(await run(['selection:flex'])).toMatchInlineSnapshot(`
-    ".selection\\:flex ::selection {
+    "
+    .selection\\:flex ::selection {
       display: flex;
     }
 
     .selection\\:flex::selection {
       display: flex;
-    }"
+    }
+    "
   `)
   expect(await run(['selection/foo:flex'])).toEqual('')
 })
 
 test('file', async () => {
   expect(await run(['file:flex'])).toMatchInlineSnapshot(`
-    ".file\\:flex::file-selector-button {
+    "
+    .file\\:flex::file-selector-button {
       display: flex;
-    }"
+    }
+    "
   `)
   expect(await run(['file/foo:flex'])).toEqual('')
 })
 
 test('placeholder', async () => {
   expect(await run(['placeholder:flex'])).toMatchInlineSnapshot(`
-    ".placeholder\\:flex::placeholder {
+    "
+    .placeholder\\:flex::placeholder {
       display: flex;
-    }"
+    }
+    "
   `)
   expect(await run(['placeholder/foo:flex'])).toEqual('')
 })
 
 test('backdrop', async () => {
   expect(await run(['backdrop:flex'])).toMatchInlineSnapshot(`
-    ".backdrop\\:flex::backdrop {
+    "
+    .backdrop\\:flex::backdrop {
       display: flex;
-    }"
+    }
+    "
   `)
   expect(await run(['backdrop/foo:flex'])).toEqual('')
 })
 
 test('details-content', async () => {
   expect(await run(['details-content:flex'])).toMatchInlineSnapshot(`
-    ".details-content\\:flex::details-content {
+    "
+    .details-content\\:flex::details-content {
       display: flex;
-    }"
+    }
+    "
   `)
   expect(await run(['details-content/foo:flex'])).toEqual('')
 })
 
 test('before', async () => {
   expect(await run(['before:flex'])).toMatchInlineSnapshot(`
-    "@layer properties {
+    "
+    @layer properties {
       @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
         *, :before, :after, ::backdrop {
           --tw-content: "";
@@ -131,14 +151,16 @@ test('before', async () => {
       syntax: "*";
       inherits: false;
       initial-value: "";
-    }"
+    }
+    "
   `)
   expect(await run(['before/foo:flex'])).toEqual('')
 })
 
 test('after', async () => {
   expect(await run(['after:flex'])).toMatchInlineSnapshot(`
-    "@layer properties {
+    "
+    @layer properties {
       @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
         *, :before, :after, ::backdrop {
           --tw-content: "";
@@ -155,52 +177,63 @@ test('after', async () => {
       syntax: "*";
       inherits: false;
       initial-value: "";
-    }"
+    }
+    "
   `)
   expect(await run(['after/foo:flex'])).toEqual('')
 })
 
 test('first', async () => {
   expect(await run(['first:flex', 'group-first:flex', 'peer-first:flex'])).toMatchInlineSnapshot(`
-    ".group-first\\:flex:is(:where(.group):first-child *), .peer-first\\:flex:is(:where(.peer):first-child ~ *), .first\\:flex:first-child {
+    "
+    :is(:where(.group):first-child .group-first\\:flex), :is(:where(.peer):first-child ~ .peer-first\\:flex), .first\\:flex:first-child {
       display: flex;
-    }"
+    }
+    "
   `)
   expect(await run(['first/foo:flex'])).toEqual('')
 })
 
 test('last', async () => {
   expect(await run(['last:flex', 'group-last:flex', 'peer-last:flex'])).toMatchInlineSnapshot(`
-    ".group-last\\:flex:is(:where(.group):last-child *), .peer-last\\:flex:is(:where(.peer):last-child ~ *), .last\\:flex:last-child {
+    "
+    :is(:where(.group):last-child .group-last\\:flex), :is(:where(.peer):last-child ~ .peer-last\\:flex), .last\\:flex:last-child {
       display: flex;
-    }"
+    }
+    "
   `)
   expect(await run(['last/foo:flex'])).toEqual('')
 })
 
 test('only', async () => {
   expect(await run(['only:flex', 'group-only:flex', 'peer-only:flex'])).toMatchInlineSnapshot(`
-    ".group-only\\:flex:is(:where(.group):only-child *), .peer-only\\:flex:is(:where(.peer):only-child ~ *), .only\\:flex:only-child {
+    "
+    :is(:where(.group):only-child .group-only\\:flex), :is(:where(.peer):only-child ~ .peer-only\\:flex), .only\\:flex:only-child {
       display: flex;
-    }"
+    }
+    "
   `)
   expect(await run(['only/foo:flex'])).toEqual('')
 })
 
 test('odd', async () => {
   expect(await run(['odd:flex', 'group-odd:flex', 'peer-odd:flex'])).toMatchInlineSnapshot(`
-    ".group-odd\\:flex:is(:where(.group):nth-child(odd) *), .peer-odd\\:flex:is(:where(.peer):nth-child(odd) ~ *), .odd\\:flex:nth-child(odd) {
+    "
+    :is(:where(.group):nth-child(odd) .group-odd\\:flex), :is(:where(.peer):nth-child(odd) ~ .peer-odd\\:flex), .odd\\:flex:nth-child(odd) {
       display: flex;
-    }"
+    }
+    "
   `)
   expect(await run(['odd/foo:flex'])).toEqual('')
 })
 
 test('even', async () => {
   expect(await run(['even:flex', 'group-even:flex', 'peer-even:flex'])).toMatchInlineSnapshot(`
-    ".group-even\\:flex:is(:where(.group):nth-child(2n) *), .peer-even\\:flex:is(:where(.peer):nth-child(2n) ~ *), .even\\:flex:nth-child(2n) {
+    "
+    :is(:where(.group):nth-child(2n) .group-even\\:flex), :is(:where(.peer):nth-child(2n) ~ .peer-even\\:flex), .even\\:flex:nth-child(2n) {
       display: flex;
-    }"
+    }
+    "
   `)
   expect(await run(['even/foo:flex'])).toEqual('')
 })
@@ -208,9 +241,11 @@ test('even', async () => {
 test('first-of-type', async () => {
   expect(await run(['first-of-type:flex', 'group-first-of-type:flex', 'peer-first-of-type:flex']))
     .toMatchInlineSnapshot(`
-      ".group-first-of-type\\:flex:is(:where(.group):first-of-type *), .peer-first-of-type\\:flex:is(:where(.peer):first-of-type ~ *), .first-of-type\\:flex:first-of-type {
+      "
+      :is(:where(.group):first-of-type .group-first-of-type\\:flex), :is(:where(.peer):first-of-type ~ .peer-first-of-type\\:flex), .first-of-type\\:flex:first-of-type {
         display: flex;
-      }"
+      }
+      "
     `)
   expect(await run(['first-of-type/foo:flex'])).toEqual('')
 })
@@ -218,9 +253,11 @@ test('first-of-type', async () => {
 test('last-of-type', async () => {
   expect(await run(['last-of-type:flex', 'group-last-of-type:flex', 'peer-last-of-type:flex']))
     .toMatchInlineSnapshot(`
-      ".group-last-of-type\\:flex:is(:where(.group):last-of-type *), .peer-last-of-type\\:flex:is(:where(.peer):last-of-type ~ *), .last-of-type\\:flex:last-of-type {
+      "
+      :is(:where(.group):last-of-type .group-last-of-type\\:flex), :is(:where(.peer):last-of-type ~ .peer-last-of-type\\:flex), .last-of-type\\:flex:last-of-type {
         display: flex;
-      }"
+      }
+      "
     `)
   expect(await run(['last-of-type/foo:flex'])).toEqual('')
 })
@@ -228,9 +265,11 @@ test('last-of-type', async () => {
 test('only-of-type', async () => {
   expect(await run(['only-of-type:flex', 'group-only-of-type:flex', 'peer-only-of-type:flex']))
     .toMatchInlineSnapshot(`
-      ".group-only-of-type\\:flex:is(:where(.group):only-of-type *), .peer-only-of-type\\:flex:is(:where(.peer):only-of-type ~ *), .only-of-type\\:flex:only-of-type {
+      "
+      :is(:where(.group):only-of-type .group-only-of-type\\:flex), :is(:where(.peer):only-of-type ~ .peer-only-of-type\\:flex), .only-of-type\\:flex:only-of-type {
         display: flex;
-      }"
+      }
+      "
     `)
   expect(await run(['only-of-type/foo:flex'])).toEqual('')
 })
@@ -238,9 +277,11 @@ test('only-of-type', async () => {
 test('visited', async () => {
   expect(await run(['visited:flex', 'group-visited:flex', 'peer-visited:flex']))
     .toMatchInlineSnapshot(`
-      ".group-visited\\:flex:is(:where(.group):visited *), .peer-visited\\:flex:is(:where(.peer):visited ~ *), .visited\\:flex:visited {
+      "
+      :is(:where(.group):visited .group-visited\\:flex), :is(:where(.peer):visited ~ .peer-visited\\:flex), .visited\\:flex:visited {
         display: flex;
-      }"
+      }
+      "
     `)
   expect(await run(['visited/foo:flex'])).toEqual('')
 })
@@ -248,9 +289,11 @@ test('visited', async () => {
 test('target', async () => {
   expect(await run(['target:flex', 'group-target:flex', 'peer-target:flex']))
     .toMatchInlineSnapshot(`
-      ".group-target\\:flex:is(:where(.group):target *), .peer-target\\:flex:is(:where(.peer):target ~ *), .target\\:flex:target {
+      "
+      :is(:where(.group):target .group-target\\:flex), :is(:where(.peer):target ~ .peer-target\\:flex), .target\\:flex:target {
         display: flex;
-      }"
+      }
+      "
     `)
   expect(await run(['target/foo:flex'])).toEqual('')
 })
@@ -258,9 +301,11 @@ test('target', async () => {
 test('open', async () => {
   expect(await run(['open:flex', 'group-open:flex', 'peer-open:flex', 'not-open:flex']))
     .toMatchInlineSnapshot(`
-      ".not-open\\:flex:not(:is([open], :popover-open, :open)), .group-open\\:flex:is(:where(.group):is([open], :popover-open, :open) *), .peer-open\\:flex:is(:where(.peer):is([open], :popover-open, :open) ~ *), .open\\:flex:is([open], :popover-open, :open) {
+      "
+      .not-open\\:flex:not(:is([open], :popover-open, :open)), :is(:where(.group):is([open], :popover-open, :open) .group-open\\:flex), :is(:where(.peer):is([open], :popover-open, :open) ~ .peer-open\\:flex), .open\\:flex:is([open], :popover-open, :open) {
         display: flex;
-      }"
+      }
+      "
     `)
   expect(await run(['open/foo:flex'])).toEqual('')
 })
@@ -268,9 +313,11 @@ test('open', async () => {
 test('default', async () => {
   expect(await run(['default:flex', 'group-default:flex', 'peer-default:flex']))
     .toMatchInlineSnapshot(`
-      ".group-default\\:flex:is(:where(.group):default *), .peer-default\\:flex:is(:where(.peer):default ~ *), .default\\:flex:default {
+      "
+      :is(:where(.group):default .group-default\\:flex), :is(:where(.peer):default ~ .peer-default\\:flex), .default\\:flex:default {
         display: flex;
-      }"
+      }
+      "
     `)
   expect(await run(['default/foo:flex'])).toEqual('')
 })
@@ -278,9 +325,11 @@ test('default', async () => {
 test('checked', async () => {
   expect(await run(['checked:flex', 'group-checked:flex', 'peer-checked:flex']))
     .toMatchInlineSnapshot(`
-      ".group-checked\\:flex:is(:where(.group):checked *), .peer-checked\\:flex:is(:where(.peer):checked ~ *), .checked\\:flex:checked {
+      "
+      :is(:where(.group):checked .group-checked\\:flex), :is(:where(.peer):checked ~ .peer-checked\\:flex), .checked\\:flex:checked {
         display: flex;
-      }"
+      }
+      "
     `)
   expect(await run(['checked/foo:flex'])).toEqual('')
 })
@@ -288,9 +337,11 @@ test('checked', async () => {
 test('indeterminate', async () => {
   expect(await run(['indeterminate:flex', 'group-indeterminate:flex', 'peer-indeterminate:flex']))
     .toMatchInlineSnapshot(`
-      ".group-indeterminate\\:flex:is(:where(.group):indeterminate *), .peer-indeterminate\\:flex:is(:where(.peer):indeterminate ~ *), .indeterminate\\:flex:indeterminate {
+      "
+      :is(:where(.group):indeterminate .group-indeterminate\\:flex), :is(:where(.peer):indeterminate ~ .peer-indeterminate\\:flex), .indeterminate\\:flex:indeterminate {
         display: flex;
-      }"
+      }
+      "
     `)
   expect(await run(['indeterminate/foo:flex'])).toEqual('')
 })
@@ -303,9 +354,11 @@ test('placeholder-shown', async () => {
       'peer-placeholder-shown:flex',
     ]),
   ).toMatchInlineSnapshot(`
-    ".group-placeholder-shown\\:flex:is(:where(.group):placeholder-shown *), .peer-placeholder-shown\\:flex:is(:where(.peer):placeholder-shown ~ *), .placeholder-shown\\:flex:placeholder-shown {
+    "
+    :is(:where(.group):placeholder-shown .group-placeholder-shown\\:flex), :is(:where(.peer):placeholder-shown ~ .peer-placeholder-shown\\:flex), .placeholder-shown\\:flex:placeholder-shown {
       display: flex;
-    }"
+    }
+    "
   `)
   expect(await run(['placeholder-shown/foo:flex'])).toEqual('')
 })
@@ -313,13 +366,15 @@ test('placeholder-shown', async () => {
 test('autofill', async () => {
   expect(await run(['autofill:flex', 'group-autofill:flex', 'peer-autofill:flex']))
     .toMatchInlineSnapshot(`
-      ".group-autofill\\:flex:is(:where(.group):autofill *), .peer-autofill\\:flex:is(:where(.peer):autofill ~ *) {
+      "
+      :is(:where(.group):autofill .group-autofill\\:flex), :is(:where(.peer):autofill ~ .peer-autofill\\:flex) {
         display: flex;
       }
 
       .autofill\\:flex:autofill {
         display: flex;
-      }"
+      }
+      "
     `)
   expect(await run(['autofill/foo:flex'])).toEqual('')
 })
@@ -327,9 +382,11 @@ test('autofill', async () => {
 test('optional', async () => {
   expect(await run(['optional:flex', 'group-optional:flex', 'peer-optional:flex']))
     .toMatchInlineSnapshot(`
-      ".group-optional\\:flex:is(:where(.group):optional *), .peer-optional\\:flex:is(:where(.peer):optional ~ *), .optional\\:flex:optional {
+      "
+      :is(:where(.group):optional .group-optional\\:flex), :is(:where(.peer):optional ~ .peer-optional\\:flex), .optional\\:flex:optional {
         display: flex;
-      }"
+      }
+      "
     `)
   expect(await run(['optional/foo:flex'])).toEqual('')
 })
@@ -337,18 +394,22 @@ test('optional', async () => {
 test('required', async () => {
   expect(await run(['required:flex', 'group-required:flex', 'peer-required:flex']))
     .toMatchInlineSnapshot(`
-      ".group-required\\:flex:is(:where(.group):required *), .peer-required\\:flex:is(:where(.peer):required ~ *), .required\\:flex:required {
+      "
+      :is(:where(.group):required .group-required\\:flex), :is(:where(.peer):required ~ .peer-required\\:flex), .required\\:flex:required {
         display: flex;
-      }"
+      }
+      "
     `)
   expect(await run(['required/foo:flex'])).toEqual('')
 })
 
 test('valid', async () => {
   expect(await run(['valid:flex', 'group-valid:flex', 'peer-valid:flex'])).toMatchInlineSnapshot(`
-    ".group-valid\\:flex:is(:where(.group):valid *), .peer-valid\\:flex:is(:where(.peer):valid ~ *), .valid\\:flex:valid {
+    "
+    :is(:where(.group):valid .group-valid\\:flex), :is(:where(.peer):valid ~ .peer-valid\\:flex), .valid\\:flex:valid {
       display: flex;
-    }"
+    }
+    "
   `)
   expect(await run(['valid/foo:flex'])).toEqual('')
 })
@@ -356,9 +417,11 @@ test('valid', async () => {
 test('invalid', async () => {
   expect(await run(['invalid:flex', 'group-invalid:flex', 'peer-invalid:flex']))
     .toMatchInlineSnapshot(`
-      ".group-invalid\\:flex:is(:where(.group):invalid *), .peer-invalid\\:flex:is(:where(.peer):invalid ~ *), .invalid\\:flex:invalid {
+      "
+      :is(:where(.group):invalid .group-invalid\\:flex), :is(:where(.peer):invalid ~ .peer-invalid\\:flex), .invalid\\:flex:invalid {
         display: flex;
-      }"
+      }
+      "
     `)
   expect(await run(['invalid/foo:flex'])).toEqual('')
 })
@@ -366,13 +429,15 @@ test('invalid', async () => {
 test('user-valid', async () => {
   expect(await run(['user-valid:flex', 'group-user-valid:flex', 'peer-user-valid:flex']))
     .toMatchInlineSnapshot(`
-      ".group-user-valid\\:flex:is(:where(.group):user-valid *), .peer-user-valid\\:flex:is(:where(.peer):user-valid ~ *) {
+      "
+      :is(:where(.group):user-valid .group-user-valid\\:flex), :is(:where(.peer):user-valid ~ .peer-user-valid\\:flex) {
         display: flex;
       }
 
       .user-valid\\:flex:user-valid {
         display: flex;
-      }"
+      }
+      "
     `)
   expect(await run(['user-valid/foo:flex'])).toEqual('')
 })
@@ -380,23 +445,27 @@ test('user-valid', async () => {
 test('user-invalid', async () => {
   expect(await run(['user-invalid:flex', 'group-user-invalid:flex', 'peer-user-invalid:flex']))
     .toMatchInlineSnapshot(`
-      ".group-user-invalid\\:flex:is(:where(.group):user-invalid *), .peer-user-invalid\\:flex:is(:where(.peer):user-invalid ~ *) {
+      "
+      :is(:where(.group):user-invalid .group-user-invalid\\:flex), :is(:where(.peer):user-invalid ~ .peer-user-invalid\\:flex) {
         display: flex;
       }
 
       .user-invalid\\:flex:user-invalid {
         display: flex;
-      }"
+      }
+      "
     `)
-  expect(await run(['invalid/foo:flex'])).toEqual('')
+  expect(await run(['user-invalid/foo:flex'])).toEqual('')
 })
 
 test('in-range', async () => {
   expect(await run(['in-range:flex', 'group-in-range:flex', 'peer-in-range:flex']))
     .toMatchInlineSnapshot(`
-      ".group-in-range\\:flex:is(:where(.group):in-range *), .peer-in-range\\:flex:is(:where(.peer):in-range ~ *), .in-range\\:flex:in-range {
+      "
+      :is(:where(.group):in-range .group-in-range\\:flex), :is(:where(.peer):in-range ~ .peer-in-range\\:flex), .in-range\\:flex:in-range {
         display: flex;
-      }"
+      }
+      "
     `)
   expect(await run(['in-range/foo:flex'])).toEqual('')
 })
@@ -404,9 +473,11 @@ test('in-range', async () => {
 test('out-of-range', async () => {
   expect(await run(['out-of-range:flex', 'group-out-of-range:flex', 'peer-out-of-range:flex']))
     .toMatchInlineSnapshot(`
-      ".group-out-of-range\\:flex:is(:where(.group):out-of-range *), .peer-out-of-range\\:flex:is(:where(.peer):out-of-range ~ *), .out-of-range\\:flex:out-of-range {
+      "
+      :is(:where(.group):out-of-range .group-out-of-range\\:flex), :is(:where(.peer):out-of-range ~ .peer-out-of-range\\:flex), .out-of-range\\:flex:out-of-range {
         display: flex;
-      }"
+      }
+      "
     `)
   expect(await run(['out-of-range/foo:flex'])).toEqual('')
 })
@@ -414,18 +485,22 @@ test('out-of-range', async () => {
 test('read-only', async () => {
   expect(await run(['read-only:flex', 'group-read-only:flex', 'peer-read-only:flex']))
     .toMatchInlineSnapshot(`
-      ".group-read-only\\:flex:is(:where(.group):read-only *), .peer-read-only\\:flex:is(:where(.peer):read-only ~ *), .read-only\\:flex:read-only {
+      "
+      :is(:where(.group):read-only .group-read-only\\:flex), :is(:where(.peer):read-only ~ .peer-read-only\\:flex), .read-only\\:flex:read-only {
         display: flex;
-      }"
+      }
+      "
     `)
   expect(await run(['read-only/foo:flex'])).toEqual('')
 })
 
 test('empty', async () => {
   expect(await run(['empty:flex', 'group-empty:flex', 'peer-empty:flex'])).toMatchInlineSnapshot(`
-    ".group-empty\\:flex:is(:where(.group):empty *), .peer-empty\\:flex:is(:where(.peer):empty ~ *), .empty\\:flex:empty {
+    "
+    :is(:where(.group):empty .group-empty\\:flex), :is(:where(.peer):empty ~ .peer-empty\\:flex), .empty\\:flex:empty {
       display: flex;
-    }"
+    }
+    "
   `)
   expect(await run(['empty/foo:flex'])).toEqual('')
 })
@@ -433,64 +508,89 @@ test('empty', async () => {
 test('focus-within', async () => {
   expect(await run(['focus-within:flex', 'group-focus-within:flex', 'peer-focus-within:flex']))
     .toMatchInlineSnapshot(`
-      ".group-focus-within\\:flex:is(:where(.group):focus-within *), .peer-focus-within\\:flex:is(:where(.peer):focus-within ~ *), .focus-within\\:flex:focus-within {
+      "
+      :is(:where(.group):focus-within .group-focus-within\\:flex), :is(:where(.peer):focus-within ~ .peer-focus-within\\:flex), .focus-within\\:flex:focus-within {
         display: flex;
-      }"
+      }
+      "
     `)
   expect(await run(['focus-within/foo:flex'])).toEqual('')
 })
 
 test('hover', async () => {
   expect(await run(['hover:flex', 'group-hover:flex', 'peer-hover:flex'])).toMatchInlineSnapshot(`
-    "@media (hover: hover) {
-      .group-hover\\:flex:is(:where(.group):hover *), .peer-hover\\:flex:is(:where(.peer):hover ~ *), .hover\\:flex:hover {
+    "
+    @media (hover: hover) {
+      :is(:where(.group):hover .group-hover\\:flex), :is(:where(.peer):hover ~ .peer-hover\\:flex), .hover\\:flex:hover {
         display: flex;
       }
-    }"
+    }
+    "
   `)
   expect(await run(['hover/foo:flex'])).toEqual('')
 })
 
 test('focus', async () => {
   expect(await run(['focus:flex', 'group-focus:flex', 'peer-focus:flex'])).toMatchInlineSnapshot(`
-    ".group-focus\\:flex:is(:where(.group):focus *), .peer-focus\\:flex:is(:where(.peer):focus ~ *), .focus\\:flex:focus {
+    "
+    :is(:where(.group):focus .group-focus\\:flex), :is(:where(.peer):focus ~ .peer-focus\\:flex), .focus\\:flex:focus {
       display: flex;
-    }"
+    }
+    "
   `)
   expect(await run(['focus/foo:flex'])).toEqual('')
 })
 
 test('group-hover group-focus sorting', async () => {
   expect(await run(['group-hover:flex', 'group-focus:flex'])).toMatchInlineSnapshot(`
-    "@media (hover: hover) {
-      .group-hover\\:flex:is(:where(.group):hover *) {
+    "
+    @media (hover: hover) {
+      :is(:where(.group):hover .group-hover\\:flex) {
         display: flex;
       }
     }
 
-    .group-focus\\:flex:is(:where(.group):focus *) {
+    :is(:where(.group):focus .group-focus\\:flex) {
       display: flex;
-    }"
+    }
+    "
   `)
   expect(await run(['group-focus:flex', 'group-hover:flex'])).toMatchInlineSnapshot(`
-    "@media (hover: hover) {
-      .group-hover\\:flex:is(:where(.group):hover *) {
+    "
+    @media (hover: hover) {
+      :is(:where(.group):hover .group-hover\\:flex) {
         display: flex;
       }
     }
 
-    .group-focus\\:flex:is(:where(.group):focus *) {
+    :is(:where(.group):focus .group-focus\\:flex) {
       display: flex;
-    }"
+    }
+    "
   `)
 })
 
+test('stacking group and peer variants does not duplicate the target selector', async () => {
+  let candidate = Array.from(
+    { length: 12 },
+    (_, i) => `${i % 2 === 0 ? 'group' : 'peer'}-data-active/name${i}`,
+  ).join(':')
+
+  let output = await run([`${candidate}:flex`])
+  expect(output).toContain('display: flex')
+  // Repeating `&` in each variant makes the generated selector grow
+  // exponentially. This many variants should still produce a small rule.
+  expect(output.length).toBeLessThan(2_000)
+})
+
 test('focus-visible', async () => {
   expect(await run(['focus-visible:flex', 'group-focus-visible:flex', 'peer-focus-visible:flex']))
     .toMatchInlineSnapshot(`
-      ".group-focus-visible\\:flex:is(:where(.group):focus-visible *), .peer-focus-visible\\:flex:is(:where(.peer):focus-visible ~ *), .focus-visible\\:flex:focus-visible {
+      "
+      :is(:where(.group):focus-visible .group-focus-visible\\:flex), :is(:where(.peer):focus-visible ~ .peer-focus-visible\\:flex), .focus-visible\\:flex:focus-visible {
         display: flex;
-      }"
+      }
+      "
     `)
   expect(await run(['focus-visible/foo:flex'])).toEqual('')
 })
@@ -498,9 +598,11 @@ test('focus-visible', async () => {
 test('active', async () => {
   expect(await run(['active:flex', 'group-active:flex', 'peer-active:flex']))
     .toMatchInlineSnapshot(`
-      ".group-active\\:flex:is(:where(.group):active *), .peer-active\\:flex:is(:where(.peer):active ~ *), .active\\:flex:active {
+      "
+      :is(:where(.group):active .group-active\\:flex), :is(:where(.peer):active ~ .peer-active\\:flex), .active\\:flex:active {
         display: flex;
-      }"
+      }
+      "
     `)
   expect(await run(['active/foo:flex'])).toEqual('')
 })
@@ -508,9 +610,11 @@ test('active', async () => {
 test('enabled', async () => {
   expect(await run(['enabled:flex', 'group-enabled:flex', 'peer-enabled:flex']))
     .toMatchInlineSnapshot(`
-      ".group-enabled\\:flex:is(:where(.group):enabled *), .peer-enabled\\:flex:is(:where(.peer):enabled ~ *), .enabled\\:flex:enabled {
+      "
+      :is(:where(.group):enabled .group-enabled\\:flex), :is(:where(.peer):enabled ~ .peer-enabled\\:flex), .enabled\\:flex:enabled {
         display: flex;
-      }"
+      }
+      "
     `)
   expect(await run(['enabled/foo:flex'])).toEqual('')
 })
@@ -518,18 +622,22 @@ test('enabled', async () => {
 test('disabled', async () => {
   expect(await run(['disabled:flex', 'group-disabled:flex', 'peer-disabled:flex']))
     .toMatchInlineSnapshot(`
-      ".group-disabled\\:flex:is(:where(.group):disabled *), .peer-disabled\\:flex:is(:where(.peer):disabled ~ *), .disabled\\:flex:disabled {
+      "
+      :is(:where(.group):disabled .group-disabled\\:flex), :is(:where(.peer):disabled ~ .peer-disabled\\:flex), .disabled\\:flex:disabled {
         display: flex;
-      }"
+      }
+      "
     `)
   expect(await run(['disabled/foo:flex'])).toEqual('')
 })
 
 test('inert', async () => {
   expect(await run(['inert:flex', 'group-inert:flex', 'peer-inert:flex'])).toMatchInlineSnapshot(`
-    ".group-inert\\:flex:is(:where(.group):is([inert], [inert] *) *), .peer-inert\\:flex:is(:where(.peer):is([inert], [inert] *) ~ *), .inert\\:flex:is([inert], [inert] *) {
+    "
+    :is(:where(.group):is([inert], [inert] *) .group-inert\\:flex), :is(:where(.peer):is([inert], [inert] *) ~ .peer-inert\\:flex), .inert\\:flex:is([inert], [inert] *) {
       display: flex;
-    }"
+    }
+    "
   `)
   expect(await run(['inert/foo:flex'])).toEqual('')
 })
@@ -544,36 +652,46 @@ test('group-[...]', async () => {
       'group-[&:hover]:group-[&_p]:flex',
     ]),
   ).toMatchInlineSnapshot(`
-    ".group-\\[\\&_p\\]\\:flex:is(:where(.group) p *), .group-\\[\\&\\:hover\\]\\:group-\\[\\&_p\\]\\:flex:is(:where(.group):hover *):is(:where(.group) p *) {
+    "
+    :is(:where(.group) p .group-\\[\\&_p\\]\\:flex), :is(:where(.group) p :is(:where(.group):hover .group-\\[\\&\\:hover\\]\\:group-\\[\\&_p\\]\\:flex)) {
       display: flex;
     }
 
     @media (hover: hover) {
-      .group-\\[\\&_p\\]\\:hover\\:flex:is(:where(.group) p *):hover, .hover\\:group-\\[\\&_p\\]\\:flex:hover:is(:where(.group) p *) {
+      :is(:where(.group) p .group-\\[\\&_p\\]\\:hover\\:flex):hover, :is(:where(.group) p .hover\\:group-\\[\\&_p\\]\\:flex:hover) {
         display: flex;
       }
 
       @media (hover: hover) {
-        .hover\\:group-\\[\\&_p\\]\\:hover\\:flex:hover:is(:where(.group) p *):hover {
+        :is(:where(.group) p .hover\\:group-\\[\\&_p\\]\\:hover\\:flex:hover):hover {
           display: flex;
         }
       }
-    }"
+    }
+    "
   `)
 
   expect(
-    await compileCss(
-      css`
-        @tailwind utilities;
-      `,
-      ['group-[]:flex', 'group-hover/[]:flex', 'group-[@media_foo]:flex', 'group-[>img]:flex'],
-    ),
+    await run([
+      'group-[]:flex',
+      'group-hover/[]:flex',
+      'group-[@media_foo]:flex',
+      'group-[>img]:flex',
+    ]),
   ).toEqual('')
 })
 
 test('group-*', async () => {
   expect(
-    await compileCss(
+    await run(
+      [
+        'group-hover:flex',
+        'group-focus:flex',
+        'group-hocus:flex',
+
+        'group-hover:group-focus:flex',
+        'group-focus:group-hover:flex',
+      ],
       css`
         @custom-variant hocus {
           &:hover,
@@ -583,39 +701,34 @@ test('group-*', async () => {
         }
         @tailwind utilities;
       `,
-      [
-        'group-hover:flex',
-        'group-focus:flex',
-        'group-hocus:flex',
-
-        'group-hover:group-focus:flex',
-        'group-focus:group-hover:flex',
-      ],
     ),
   ).toMatchInlineSnapshot(`
-    "@media (hover: hover) {
-      .group-hover\\:flex:is(:where(.group):hover *) {
+    "
+    @media (hover: hover) {
+      :is(:where(.group):hover .group-hover\\:flex) {
         display: flex;
       }
     }
 
-    .group-focus\\:flex:is(:where(.group):focus *) {
+    :is(:where(.group):focus .group-focus\\:flex) {
       display: flex;
     }
 
     @media (hover: hover) {
-      .group-focus\\:group-hover\\:flex:is(:where(.group):focus *):is(:where(.group):hover *), .group-hover\\:group-focus\\:flex:is(:where(.group):hover *):is(:where(.group):focus *) {
+      :is(:where(.group):hover :is(:where(.group):focus .group-focus\\:group-hover\\:flex)), :is(:where(.group):focus :is(:where(.group):hover .group-hover\\:group-focus\\:flex)) {
         display: flex;
       }
     }
 
-    .group-hocus\\:flex:is(:is(:where(.group):hover, :where(.group):focus) *) {
+    :is(:is(:where(.group):hover, :where(.group):focus) .group-hocus\\:flex) {
       display: flex;
-    }"
+    }
+    "
   `)
 
   expect(
-    await compileCss(
+    await run(
+      ['group-custom-at-rule:flex', 'group-nested-selectors:flex'],
       css`
         @custom-variant custom-at-rule (@media foo);
         @custom-variant nested-selectors {
@@ -627,7 +740,6 @@ test('group-*', async () => {
         }
         @tailwind utilities;
       `,
-      ['group-custom-at-rule:flex', 'group-nested-selectors:flex'],
     ),
   ).toEqual('')
 })
@@ -642,30 +754,34 @@ test('peer-[...]', async () => {
       'peer-[&:hover]:peer-[&_p]:flex',
     ]),
   ).toMatchInlineSnapshot(`
-    ".peer-\\[\\&_p\\]\\:flex:is(:where(.peer) p ~ *), .peer-\\[\\&\\:hover\\]\\:peer-\\[\\&_p\\]\\:flex:is(:where(.peer):hover ~ *):is(:where(.peer) p ~ *) {
+    "
+    :is(:where(.peer) p ~ .peer-\\[\\&_p\\]\\:flex), :is(:where(.peer) p ~ :is(:where(.peer):hover ~ .peer-\\[\\&\\:hover\\]\\:peer-\\[\\&_p\\]\\:flex)) {
       display: flex;
     }
 
     @media (hover: hover) {
-      .hover\\:peer-\\[\\&_p\\]\\:flex:hover:is(:where(.peer) p ~ *), .peer-\\[\\&_p\\]\\:hover\\:flex:is(:where(.peer) p ~ *):hover, .hover\\:peer-\\[\\&_p\\]\\:focus\\:flex:hover:is(:where(.peer) p ~ *):focus {
+      :is(:where(.peer) p ~ .hover\\:peer-\\[\\&_p\\]\\:flex:hover), :is(:where(.peer) p ~ .peer-\\[\\&_p\\]\\:hover\\:flex):hover, :is(:where(.peer) p ~ .hover\\:peer-\\[\\&_p\\]\\:focus\\:flex:hover):focus {
         display: flex;
       }
-    }"
+    }
+    "
   `)
 
   expect(
-    await compileCss(
-      css`
-        @tailwind utilities;
-      `,
-      ['peer-[]:flex', 'peer-hover/[]:flex', 'peer-[@media_foo]:flex', 'peer-[>img]:flex'],
-    ),
+    await run(['peer-[]:flex', 'peer-hover/[]:flex', 'peer-[@media_foo]:flex', 'peer-[>img]:flex']),
   ).toEqual('')
 })
 
 test('peer-*', async () => {
   expect(
-    await compileCss(
+    await run(
+      [
+        'peer-hover:flex',
+        'peer-focus:flex',
+        'peer-hocus:flex',
+        'peer-hover:peer-focus:flex',
+        'peer-focus:peer-hover:flex',
+      ],
       css`
         @custom-variant hocus {
           &:hover,
@@ -675,38 +791,34 @@ test('peer-*', async () => {
         }
         @tailwind utilities;
       `,
-      [
-        'peer-hover:flex',
-        'peer-focus:flex',
-        'peer-hocus:flex',
-        'peer-hover:peer-focus:flex',
-        'peer-focus:peer-hover:flex',
-      ],
     ),
   ).toMatchInlineSnapshot(`
-    "@media (hover: hover) {
-      .peer-hover\\:flex:is(:where(.peer):hover ~ *) {
+    "
+    @media (hover: hover) {
+      :is(:where(.peer):hover ~ .peer-hover\\:flex) {
         display: flex;
       }
     }
 
-    .peer-focus\\:flex:is(:where(.peer):focus ~ *) {
+    :is(:where(.peer):focus ~ .peer-focus\\:flex) {
       display: flex;
     }
 
     @media (hover: hover) {
-      .peer-focus\\:peer-hover\\:flex:is(:where(.peer):focus ~ *):is(:where(.peer):hover ~ *), .peer-hover\\:peer-focus\\:flex:is(:where(.peer):hover ~ *):is(:where(.peer):focus ~ *) {
+      :is(:where(.peer):hover ~ :is(:where(.peer):focus ~ .peer-focus\\:peer-hover\\:flex)), :is(:where(.peer):focus ~ :is(:where(.peer):hover ~ .peer-hover\\:peer-focus\\:flex)) {
         display: flex;
       }
     }
 
-    .peer-hocus\\:flex:is(:is(:where(.peer):hover, :where(.peer):focus) ~ *) {
+    :is(:is(:where(.peer):hover, :where(.peer):focus) ~ .peer-hocus\\:flex) {
       display: flex;
-    }"
+    }
+    "
   `)
 
   expect(
-    await compileCss(
+    await run(
+      ['peer-custom-at-rule:flex', 'peer-nested-selectors:flex'],
       css`
         @custom-variant custom-at-rule (@media foo);
         @custom-variant nested-selectors {
@@ -718,87 +830,101 @@ test('peer-*', async () => {
         }
         @tailwind utilities;
       `,
-      ['peer-custom-at-rule:flex', 'peer-nested-selectors:flex'],
     ),
   ).toEqual('')
 })
 
 test('ltr', async () => {
   expect(await run(['ltr:flex'])).toMatchInlineSnapshot(`
-    ".ltr\\:flex:where(:dir(ltr), [dir="ltr"], [dir="ltr"] *) {
+    "
+    .ltr\\:flex:where(:dir(ltr), [dir="ltr"], [dir="ltr"] *) {
       display: flex;
-    }"
+    }
+    "
   `)
   expect(await run(['ltr/foo:flex'])).toEqual('')
 })
 
 test('rtl', async () => {
   expect(await run(['rtl:flex'])).toMatchInlineSnapshot(`
-    ".rtl\\:flex:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) {
+    "
+    .rtl\\:flex:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) {
       display: flex;
-    }"
+    }
+    "
   `)
   expect(await run(['rtl/foo:flex'])).toEqual('')
 })
 
 test('motion-safe', async () => {
   expect(await run(['motion-safe:flex'])).toMatchInlineSnapshot(`
-    "@media (prefers-reduced-motion: no-preference) {
+    "
+    @media (prefers-reduced-motion: no-preference) {
       .motion-safe\\:flex {
         display: flex;
       }
-    }"
+    }
+    "
   `)
   expect(await run(['motion-safe/foo:flex'])).toEqual('')
 })
 
 test('motion-reduce', async () => {
   expect(await run(['motion-reduce:flex'])).toMatchInlineSnapshot(`
-    "@media (prefers-reduced-motion: reduce) {
+    "
+    @media (prefers-reduced-motion: reduce) {
       .motion-reduce\\:flex {
         display: flex;
       }
-    }"
+    }
+    "
   `)
   expect(await run(['motion-reduce/foo:flex'])).toEqual('')
 })
 
 test('dark', async () => {
   expect(await run(['dark:flex'])).toMatchInlineSnapshot(`
-    "@media (prefers-color-scheme: dark) {
+    "
+    @media (prefers-color-scheme: dark) {
       .dark\\:flex {
         display: flex;
       }
-    }"
+    }
+    "
   `)
   expect(await run(['dark/foo:flex'])).toEqual('')
 })
 
 test('starting', async () => {
   expect(await run(['starting:opacity-0'])).toMatchInlineSnapshot(`
-    "@starting-style {
+    "
+    @starting-style {
       .starting\\:opacity-0 {
         opacity: 0;
       }
-    }"
+    }
+    "
   `)
   expect(await run(['starting/foo:flex'])).toEqual('')
 })
 
 test('print', async () => {
   expect(await run(['print:flex'])).toMatchInlineSnapshot(`
-    "@media print {
+    "
+    @media print {
       .print\\:flex {
         display: flex;
       }
-    }"
+    }
+    "
   `)
   expect(await run(['print/foo:flex'])).toEqual('')
 })
 
 test('default breakpoints', async () => {
   expect(
-    await compileCss(
+    await run(
+      ['sm:flex', 'md:flex', 'lg:flex', 'xl:flex', '2xl:flex'],
       css`
         @theme {
           /* Breakpoints */
@@ -810,10 +936,10 @@ test('default breakpoints', async () => {
         }
         @tailwind utilities;
       `,
-      ['sm:flex', 'md:flex', 'lg:flex', 'xl:flex', '2xl:flex'],
     ),
   ).toMatchInlineSnapshot(`
-    "@media (min-width: 640px) {
+    "
+    @media (min-width: 640px) {
       .sm\\:flex {
         display: flex;
       }
@@ -841,10 +967,12 @@ test('default breakpoints', async () => {
       .\\32 xl\\:flex {
         display: flex;
       }
-    }"
+    }
+    "
   `)
   expect(
-    await compileCss(
+    await run(
+      ['sm/foo:flex', 'md/foo:flex', 'lg/foo:flex', 'xl/foo:flex', '2xl/foo:flex'],
       css`
         @theme reference {
           /* Breakpoints */
@@ -856,34 +984,36 @@ test('default breakpoints', async () => {
         }
         @tailwind utilities;
       `,
-      ['sm/foo:flex', 'md/foo:flex', 'lg/foo:flex', 'xl/foo:flex', '2xl/foo:flex'],
     ),
   ).toEqual('')
 })
 
 test('custom breakpoint', async () => {
   expect(
-    await compileCss(
+    await run(
+      ['10xl:flex'],
       css`
         @theme {
           --breakpoint-10xl: 5000px;
         }
         @tailwind utilities;
       `,
-      ['10xl:flex'],
     ),
   ).toMatchInlineSnapshot(`
-    "@media (min-width: 5000px) {
+    "
+    @media (min-width: 5000px) {
       .\\31 0xl\\:flex {
         display: flex;
       }
-    }"
+    }
+    "
   `)
 })
 
 test('max-*', async () => {
   expect(
-    await compileCss(
+    await run(
+      ['max-lg:flex', 'max-sm:flex', 'max-md:flex'],
       css`
         @theme {
           /* Explicitly ordered in a strange way */
@@ -893,10 +1023,10 @@ test('max-*', async () => {
         }
         @tailwind utilities;
       `,
-      ['max-lg:flex', 'max-sm:flex', 'max-md:flex'],
     ),
   ).toMatchInlineSnapshot(`
-    "@media not all and (min-width: 1024px) {
+    "
+    @media not all and (min-width: 1024px) {
       .max-lg\\:flex {
         display: flex;
       }
@@ -912,10 +1042,12 @@ test('max-*', async () => {
       .max-sm\\:flex {
         display: flex;
       }
-    }"
+    }
+    "
   `)
   expect(
-    await compileCss(
+    await run(
+      ['max-lg/foo:flex', 'max-sm/foo:flex', 'max-md/foo:flex'],
       css`
         @theme reference {
           /* Explicitly ordered in a strange way */
@@ -925,14 +1057,14 @@ test('max-*', async () => {
         }
         @tailwind utilities;
       `,
-      ['max-lg/foo:flex', 'max-sm/foo:flex', 'max-md/foo:flex'],
     ),
   ).toEqual('')
 })
 
 test('min-*', async () => {
   expect(
-    await compileCss(
+    await run(
+      ['min-lg:flex', 'min-sm:flex', 'min-md:flex'],
       css`
         @theme {
           /* Explicitly ordered in a strange way */
@@ -942,10 +1074,10 @@ test('min-*', async () => {
         }
         @tailwind utilities;
       `,
-      ['min-lg:flex', 'min-sm:flex', 'min-md:flex'],
     ),
   ).toMatchInlineSnapshot(`
-    "@media (min-width: 640px) {
+    "
+    @media (min-width: 640px) {
       .min-sm\\:flex {
         display: flex;
       }
@@ -961,10 +1093,12 @@ test('min-*', async () => {
       .min-lg\\:flex {
         display: flex;
       }
-    }"
+    }
+    "
   `)
   expect(
-    await compileCss(
+    await run(
+      ['min-lg/foo:flex', 'min-sm/foo:flex', 'min-md/foo:flex'],
       css`
         @theme reference {
           /* Explicitly ordered in a strange way */
@@ -974,14 +1108,14 @@ test('min-*', async () => {
         }
         @tailwind utilities;
       `,
-      ['min-lg/foo:flex', 'min-sm/foo:flex', 'min-md/foo:flex'],
     ),
   ).toEqual('')
 })
 
 test('sorting stacked min-* and max-* variants', async () => {
   expect(
-    await compileCss(
+    await run(
+      ['min-sm:max-lg:flex', 'min-sm:max-xl:flex', 'min-md:max-lg:flex', 'min-xs:max-sm:flex'],
       css`
         @theme {
           /* Explicitly ordered in a strange way */
@@ -993,10 +1127,10 @@ test('sorting stacked min-* and max-* variants', async () => {
         }
         @tailwind utilities;
       `,
-      ['min-sm:max-lg:flex', 'min-sm:max-xl:flex', 'min-md:max-lg:flex', 'min-xs:max-sm:flex'],
     ),
   ).toMatchInlineSnapshot(`
-    "@media (min-width: 280px) {
+    "
+    @media (min-width: 280px) {
       @media not all and (min-width: 640px) {
         .min-xs\\:max-sm\\:flex {
           display: flex;
@@ -1024,13 +1158,15 @@ test('sorting stacked min-* and max-* variants', async () => {
           display: flex;
         }
       }
-    }"
+    }
+    "
   `)
 })
 
 test('stacked min-* and max-* variants should come after unprefixed variants', async () => {
   expect(
-    await compileCss(
+    await run(
+      ['sm:flex', 'min-sm:max-lg:flex', 'md:flex', 'min-md:max-lg:flex'],
       css`
         @theme {
           /* Explicitly ordered in a strange way */
@@ -1040,10 +1176,10 @@ test('stacked min-* and max-* variants should come after unprefixed variants', a
         }
         @tailwind utilities;
       `,
-      ['sm:flex', 'min-sm:max-lg:flex', 'md:flex', 'min-md:max-lg:flex'],
     ),
   ).toMatchInlineSnapshot(`
-    "@media (min-width: 640px) {
+    "
+    @media (min-width: 640px) {
       .sm\\:flex {
         display: flex;
       }
@@ -1065,22 +1201,14 @@ test('stacked min-* and max-* variants should come after unprefixed variants', a
           display: flex;
         }
       }
-    }"
+    }
+    "
   `)
 })
 
 test('min, max and unprefixed breakpoints', async () => {
   expect(
-    await compileCss(
-      css`
-        @theme {
-          /* Explicitly ordered in a strange way */
-          --breakpoint-sm: 640px;
-          --breakpoint-lg: 1024px;
-          --breakpoint-md: 768px;
-        }
-        @tailwind utilities;
-      `,
+    await run(
       [
         'max-lg-sm-potato:flex',
         'min-lg-sm-potato:flex',
@@ -1097,9 +1225,19 @@ test('min, max and unprefixed breakpoints', async () => {
         'sm:flex',
         'lg:flex',
       ],
+      css`
+        @theme {
+          /* Explicitly ordered in a strange way */
+          --breakpoint-sm: 640px;
+          --breakpoint-lg: 1024px;
+          --breakpoint-md: 768px;
+        }
+        @tailwind utilities;
+      `,
     ),
   ).toMatchInlineSnapshot(`
-    "@media not all and (min-width: 1024px) {
+    "
+    @media not all and (min-width: 1024px) {
       .max-lg\\:flex {
         display: flex;
       }
@@ -1145,7 +1283,8 @@ test('min, max and unprefixed breakpoints', async () => {
       .lg\\:flex, .min-lg\\:flex {
         display: flex;
       }
-    }"
+    }
+    "
   `)
 })
 
@@ -1174,7 +1313,8 @@ test('sorting `min` and `max` should sort by unit, then by value, then alphabeti
       'max-[12vh]:flex',
     ]),
   ).toMatchInlineSnapshot(`
-    "@media not all and (min-width: calc(1000px + 12em)) {
+    "
+    @media not all and (min-width: calc(1000px + 12em)) {
       .max-\\[calc\\(1000px\\+12em\\)\\]\\:flex {
         display: flex;
       }
@@ -1292,7 +1432,82 @@ test('sorting `min` and `max` should sort by unit, then by value, then alphabeti
       .min-\\[12vh\\]\\:flex {
         display: flex;
       }
-    }"
+    }
+    "
+  `)
+})
+
+test('sorting `min` and `max` should compare decimal values numerically', async () => {
+  expect(
+    await run([
+      'min-[40.5rem]:flex',
+      'min-[40.25rem]:flex',
+      'max-[40.25rem]:flex',
+      'max-[40.5rem]:flex',
+    ]),
+  ).toMatchInlineSnapshot(`
+    "
+    @media not all and (min-width: 40.5rem) {
+      .max-\\[40\\.5rem\\]\\:flex {
+        display: flex;
+      }
+    }
+
+    @media not all and (min-width: 40.25rem) {
+      .max-\\[40\\.25rem\\]\\:flex {
+        display: flex;
+      }
+    }
+
+    @media (min-width: 40.25rem) {
+      .min-\\[40\\.25rem\\]\\:flex {
+        display: flex;
+      }
+    }
+
+    @media (min-width: 40.5rem) {
+      .min-\\[40\\.5rem\\]\\:flex {
+        display: flex;
+      }
+    }
+    "
+  `)
+})
+
+test('sorting `@min` and `@max` should compare decimal values numerically', async () => {
+  expect(
+    await run([
+      '@min-[40.5rem]:flex',
+      '@min-[40.25rem]:flex',
+      '@max-[40.25rem]:flex',
+      '@max-[40.5rem]:flex',
+    ]),
+  ).toMatchInlineSnapshot(`
+    "
+    @container not (min-width: 40.5rem) {
+      .\\@max-\\[40\\.5rem\\]\\:flex {
+        display: flex;
+      }
+    }
+
+    @container not (min-width: 40.25rem) {
+      .\\@max-\\[40\\.25rem\\]\\:flex {
+        display: flex;
+      }
+    }
+
+    @container (min-width: 40.25rem) {
+      .\\@min-\\[40\\.25rem\\]\\:flex {
+        display: flex;
+      }
+    }
+
+    @container (min-width: 40.5rem) {
+      .\\@min-\\[40\\.5rem\\]\\:flex {
+        display: flex;
+      }
+    }
+    "
   `)
 })
 
@@ -1307,20 +1522,44 @@ test('supports', async () => {
       'supports-[font-tech(color-COLRv1)]:flex',
       'supports-[var(--test)]:flex',
       'supports-[--test]:flex',
+
+      // Only top-level and/or/not should have spaces around them. We should
+      // ignore and/or/not inside of `selector(…)`
+      'supports-[selector(a:not(.foo))]:flex',
+      'supports-[selector(a:is(.and,.or))]:flex',
+      'supports-[(display:grid)or(display:flex)]:grid',
+      'supports-[not(display:grid)]:flex',
+      'supports-[foo-not(display:grid)]:flex',
+      'supports-[selector([data-foo="("])or(display:grid)]:flex',
+      'supports-[selector(.foo\\(bar)or(display:grid)]:flex',
+      'supports-[((display:grid)or(display:flex))]:grid',
     ]),
   ).toMatchInlineSnapshot(`
-    "@supports (gap: var(--tw)) {
+    "
+    @supports (gap: var(--tw)) {
       .supports-gap\\:grid {
         display: grid;
       }
     }
 
+    @supports (display: grid) or (display: flex) {
+      .supports-\\[\\(\\(display\\:grid\\)or\\(display\\:flex\\)\\)\\]\\:grid {
+        display: grid;
+      }
+    }
+
     @supports (display: grid) and font-format(opentype) {
       .supports-\\[\\(display\\:grid\\)_and_font-format\\(opentype\\)\\]\\:grid {
         display: grid;
       }
     }
 
+    @supports (display: grid) or (display: flex) {
+      .supports-\\[\\(display\\:grid\\)or\\(display\\:flex\\)\\]\\:grid {
+        display: grid;
+      }
+    }
+
     @supports (--test: var(--tw)) {
       .supports-\\[--test\\]\\:flex {
         display: flex;
@@ -1345,17 +1584,54 @@ test('supports', async () => {
       }
     }
 
+    @supports foo-not(display:grid) {
+      .supports-\\[foo-not\\(display\\:grid\\)\\]\\:flex {
+        display: flex;
+      }
+    }
+
+    @supports not (display: grid) {
+      .supports-\\[not\\(display\\:grid\\)\\]\\:flex {
+        display: flex;
+      }
+    }
+
+    @supports selector(.foo\\(bar) or (display: grid) {
+      .supports-\\[selector\\(\\.foo\\\\\\(bar\\)or\\(display\\:grid\\)\\]\\:flex {
+        display: flex;
+      }
+    }
+
     @supports selector(A > B) {
       .supports-\\[selector\\(A_\\>_B\\)\\]\\:flex {
         display: flex;
       }
     }
 
+    @supports selector([data-foo="("]) or (display: grid) {
+      .supports-\\[selector\\(\\[data-foo\\=\\"\\(\\"\\]\\)or\\(display\\:grid\\)\\]\\:flex {
+        display: flex;
+      }
+    }
+
+    @supports selector(a:is(.and,.or)) {
+      .supports-\\[selector\\(a\\:is\\(\\.and\\,\\.or\\)\\)\\]\\:flex {
+        display: flex;
+      }
+    }
+
+    @supports selector(a:not(.foo)) {
+      .supports-\\[selector\\(a\\:not\\(\\.foo\\)\\)\\]\\:flex {
+        display: flex;
+      }
+    }
+
     @supports var(--test) {
       .supports-\\[var\\(--test\\)\\]\\:flex {
         display: flex;
       }
-    }"
+    }
+    "
   `)
   expect(
     await run([
@@ -1372,30 +1648,7 @@ test('supports', async () => {
 
 test('not', async () => {
   expect(
-    await compileCss(
-      css`
-        @custom-variant hocus {
-          &:hover,
-          &:focus {
-            @slot;
-          }
-        }
-
-        @custom-variant device-hocus {
-          @media (hover: hover) {
-            &:hover,
-            &:focus {
-              @slot;
-            }
-          }
-        }
-
-        @theme {
-          --breakpoint-sm: 640px;
-        }
-
-        @tailwind utilities;
-      `,
+    await run(
       [
         'not-[:checked]:flex',
         'not-[@media_print]:flex',
@@ -1477,9 +1730,33 @@ test('not', async () => {
         'not-max-sm:flex',
         'not-max-[130px]:flex',
       ],
+      css`
+        @custom-variant hocus {
+          &:hover,
+          &:focus {
+            @slot;
+          }
+        }
+
+        @custom-variant device-hocus {
+          @media (hover: hover) {
+            &:hover,
+            &:focus {
+              @slot;
+            }
+          }
+        }
+
+        @theme {
+          --breakpoint-sm: 640px;
+        }
+
+        @tailwind utilities;
+      `,
     ),
   ).toMatchInlineSnapshot(`
-    ".not-first\\:flex:not(:first-child), .not-last\\:flex:not(:last-child), .not-only\\:flex:not(:only-child), .not-odd\\:flex:not(:nth-child(odd)), .not-even\\:flex:not(:nth-child(2n)), .not-first-of-type\\:flex:not(:first-of-type), .not-last-of-type\\:flex:not(:last-of-type), .not-only-of-type\\:flex:not(:only-of-type), .not-visited\\:flex:not(:visited), .not-target\\:flex:not(:target), .not-open\\:flex:not(:is([open], :popover-open, :open)), .not-default\\:flex:not(:default), .not-checked\\:flex:not(:checked), .not-indeterminate\\:flex:not(:indeterminate), .not-placeholder-shown\\:flex:not(:placeholder-shown) {
+    "
+    .not-first\\:flex:not(:first-child), .not-last\\:flex:not(:last-child), .not-only\\:flex:not(:only-child), .not-odd\\:flex:not(:nth-child(odd)), .not-even\\:flex:not(:nth-child(2n)), .not-first-of-type\\:flex:not(:first-of-type), .not-last-of-type\\:flex:not(:last-of-type), .not-only-of-type\\:flex:not(:only-of-type), .not-visited\\:flex:not(:visited), .not-target\\:flex:not(:target), .not-open\\:flex:not(:is([open], :popover-open, :open)), .not-default\\:flex:not(:default), .not-checked\\:flex:not(:checked), .not-indeterminate\\:flex:not(:indeterminate), .not-placeholder-shown\\:flex:not(:placeholder-shown) {
       display: flex;
     }
 
@@ -1633,13 +1910,116 @@ test('not', async () => {
       }
     }
 
-    .group-not-checked\\:flex:is(:where(.group):not(:checked) *), .group-not-hocus\\:flex:is(:where(.group):not(:hover, :focus) *), .group-not-hocus\\/parent-name\\:flex:is(:where(.group\\/parent-name):not(:hover, :focus) *), .group-not-\\[\\:checked\\]\\:flex:is(:where(.group):not(:checked) *), .group-not-\\[\\:checked\\]\\/parent-name\\:flex:is(:where(.group\\/parent-name):not(:checked) *), .peer-not-checked\\:flex:is(:where(.peer):not(:checked) ~ *), .peer-not-hocus\\:flex:is(:where(.peer):not(:hover, :focus) ~ *), .peer-not-hocus\\/sibling-name\\:flex:is(:where(.peer\\/sibling-name):not(:hover, :focus) ~ *), .peer-not-\\[\\:checked\\]\\:flex:is(:where(.peer):not(:checked) ~ *), .peer-not-\\[\\:checked\\]\\/sibling-name\\:flex:is(:where(.peer\\/sibling-name):not(:checked) ~ *) {
+    :is(:where(.group):not(:checked) .group-not-checked\\:flex), :is(:where(.group):not(:hover, :focus) .group-not-hocus\\:flex), :is(:where(.group\\/parent-name):not(:hover, :focus) .group-not-hocus\\/parent-name\\:flex), :is(:where(.group):not(:checked) .group-not-\\[\\:checked\\]\\:flex), :is(:where(.group\\/parent-name):not(:checked) .group-not-\\[\\:checked\\]\\/parent-name\\:flex), :is(:where(.peer):not(:checked) ~ .peer-not-checked\\:flex), :is(:where(.peer):not(:hover, :focus) ~ .peer-not-hocus\\:flex), :is(:where(.peer\\/sibling-name):not(:hover, :focus) ~ .peer-not-hocus\\/sibling-name\\:flex), :is(:where(.peer):not(:checked) ~ .peer-not-\\[\\:checked\\]\\:flex), :is(:where(.peer\\/sibling-name):not(:checked) ~ .peer-not-\\[\\:checked\\]\\/sibling-name\\:flex) {
       display: flex;
-    }"
+    }
+    "
+  `)
+
+  // https://github.com/tailwindlabs/tailwindcss/issues/20058
+  expect(
+    await run(
+      ['not-has-a:flex', 'not-has-b:flex', 'not-has-c:flex', 'not-has-d:flex'],
+      css`
+        @custom-variant has-a {
+          @container style(--a) {
+            @slot;
+          }
+        }
+
+        /* Already negated case */
+        @custom-variant has-b {
+          @container not style(--b) {
+            @slot;
+          }
+        }
+
+        /* Named @container */
+        @custom-variant has-c {
+          @container foo style(--c) {
+            @slot;
+          }
+        }
+
+        /* Named @container, that's already negated case */
+        @custom-variant has-d {
+          @container bar not style(--d) {
+            @slot;
+          }
+        }
+
+        @tailwind utilities;
+      `,
+    ),
+  ).toMatchInlineSnapshot(`
+    "
+    @container not style(--a) {
+      .not-has-a\\:flex {
+        display: flex;
+      }
+    }
+
+    @container style(--b) {
+      .not-has-b\\:flex {
+        display: flex;
+      }
+    }
+
+    @container foo not style(--c) {
+      .not-has-c\\:flex {
+        display: flex;
+      }
+    }
+
+    @container bar style(--d) {
+      .not-has-d\\:flex {
+        display: flex;
+      }
+    }
+    "
   `)
 
   expect(
-    await compileCss(
+    await run(
+      [
+        'not-[>img]:flex',
+        'not-[+img]:flex',
+        'not-[~img]:flex',
+        'not-[:checked]/foo:flex',
+        'not-[@media_screen,print]:flex',
+        'not-[@media_not_screen,print]:flex',
+        'not-[@media_not_screen,not_print]:flex',
+
+        'not-nested-at-rules:flex',
+        'not-nested-style-rules:flex',
+        'not-multiple-media-conditions:flex',
+        'not-starting:flex',
+
+        'not-parallel-style-rules:flex',
+        'not-parallel-at-rules:flex',
+        'not-parallel-mixed-rules:flex',
+
+        // The following built-in variants don't have not-* versions because
+        // there is no sensible negative version of them.
+
+        // These just don't make sense as not-*
+        'not-force:flex',
+        'not-*:flex',
+
+        // These contain pseudo-elements
+        'not-first-letter:flex',
+        'not-first-line:flex',
+        'not-marker:flex',
+        'not-selection:flex',
+        'not-file:flex',
+        'not-placeholder:flex',
+        'not-backdrop:flex',
+        'not-before:flex',
+        'not-after:flex',
+
+        // This is not a conditional at rule
+        'not-starting:flex',
+      ],
       css`
         @custom-variant nested-at-rules {
           @media foo {
@@ -1686,45 +2066,6 @@ test('not', async () => {
         }
         @tailwind utilities;
       `,
-      [
-        'not-[>img]:flex',
-        'not-[+img]:flex',
-        'not-[~img]:flex',
-        'not-[:checked]/foo:flex',
-        'not-[@media_screen,print]:flex',
-        'not-[@media_not_screen,print]:flex',
-        'not-[@media_not_screen,not_print]:flex',
-
-        'not-nested-at-rules:flex',
-        'not-nested-style-rules:flex',
-        'not-multiple-media-conditions:flex',
-        'not-starting:flex',
-
-        'not-parallel-style-rules:flex',
-        'not-parallel-at-rules:flex',
-        'not-parallel-mixed-rules:flex',
-
-        // The following built-in variants don't have not-* versions because
-        // there is no sensible negative version of them.
-
-        // These just don't make sense as not-*
-        'not-force:flex',
-        'not-*:flex',
-
-        // These contain pseudo-elements
-        'not-first-letter:flex',
-        'not-first-line:flex',
-        'not-marker:flex',
-        'not-selection:flex',
-        'not-file:flex',
-        'not-placeholder:flex',
-        'not-backdrop:flex',
-        'not-before:flex',
-        'not-after:flex',
-
-        // This is not a conditional at rule
-        'not-starting:flex',
-      ],
     ),
   ).toEqual('')
 })
@@ -1739,25 +2080,18 @@ test('in', async () => {
       'in-data-visible:flex',
     ]),
   ).toMatchInlineSnapshot(`
-    ".not-in-\\[\\.group\\]\\:flex:not(:where(.group) *), .not-in-\\[p\\]\\:flex:not(:where(:is(p)) *), :where([data-visible]) .in-data-visible\\:flex, :where(.group) .in-\\[\\.group\\]\\:flex, :where(:is(p)) .in-\\[p\\]\\:flex {
+    "
+    .not-in-\\[\\.group\\]\\:flex:not(:where(.group) *), .not-in-\\[p\\]\\:flex:not(:where(:is(p)) *), :where([data-visible]) .in-data-visible\\:flex, :where(.group) .in-\\[\\.group\\]\\:flex, :where(:is(p)) .in-\\[p\\]\\:flex {
       display: flex;
-    }"
+    }
+    "
   `)
   expect(await run(['in-p:flex', 'in-foo-bar:flex'])).toEqual('')
 })
 
 test('has', async () => {
   expect(
-    await compileCss(
-      css`
-        @custom-variant hocus {
-          &:hover,
-          &:focus {
-            @slot;
-          }
-        }
-        @tailwind utilities;
-      `,
+    await run(
       [
         'has-checked:flex',
         'has-[:checked]:flex',
@@ -1793,15 +2127,32 @@ test('has', async () => {
         'peer-has-hocus:flex',
         'peer-has-hocus/sibling-name:flex',
       ],
+      css`
+        @custom-variant hocus {
+          &:hover,
+          &:focus {
+            @slot;
+          }
+        }
+        @tailwind utilities;
+      `,
     ),
   ).toMatchInlineSnapshot(`
-    ".group-has-checked\\:flex:is(:where(.group):has(:checked) *), .group-has-checked\\/parent-name\\:flex:is(:where(.group\\/parent-name):has(:checked) *), .group-has-hocus\\:flex:is(:where(.group):has(:hover, :focus) *), .group-has-hocus\\/parent-name\\:flex:is(:where(.group\\/parent-name):has(:hover, :focus) *), .group-has-\\[\\:checked\\]\\:flex:is(:where(.group):has(:checked) *), .group-has-\\[\\:checked\\]\\/parent-name\\:flex:is(:where(.group\\/parent-name):has(:checked) *), .group-has-\\[\\&\\>img\\]\\:flex:is(:where(.group):has(* > img) *), .group-has-\\[\\&\\>img\\]\\/parent-name\\:flex:is(:where(.group\\/parent-name):has(* > img) *), .group-has-\\[\\+img\\]\\:flex:is(:where(.group):has( + img) *), .group-has-\\[\\>img\\]\\:flex:is(:where(.group):has( > img) *), .group-has-\\[\\>img\\]\\/parent-name\\:flex:is(:where(.group\\/parent-name):has( > img) *), .group-has-\\[\\~img\\]\\:flex:is(:where(.group):has( ~ img) *), .peer-has-checked\\:flex:is(:where(.peer):has(:checked) ~ *), .peer-has-checked\\/sibling-name\\:flex:is(:where(.peer\\/sibling-name):has(:checked) ~ *), .peer-has-hocus\\:flex:is(:where(.peer):has(:hover, :focus) ~ *), .peer-has-hocus\\/sibling-name\\:flex:is(:where(.peer\\/sibling-name):has(:hover, :focus) ~ *), .peer-has-\\[\\:checked\\]\\:flex:is(:where(.peer):has(:checked) ~ *), .peer-has-\\[\\:checked\\]\\/sibling-name\\:flex:is(:where(.peer\\/sibling-name):has(:checked) ~ *), .peer-has-\\[\\&\\>img\\]\\:flex:is(:where(.peer):has(* > img) ~ *), .peer-has-\\[\\&\\>img\\]\\/sibling-name\\:flex:is(:where(.peer\\/sibling-name):has(* > img) ~ *), .peer-has-\\[\\+img\\]\\:flex:is(:where(.peer):has( + img) ~ *), .peer-has-\\[\\>img\\]\\:flex:is(:where(.peer):has( > img) ~ *), .peer-has-\\[\\>img\\]\\/sibling-name\\:flex:is(:where(.peer\\/sibling-name):has( > img) ~ *), .peer-has-\\[\\~img\\]\\:flex:is(:where(.peer):has( ~ img) ~ *), .has-checked\\:flex:has(:checked), .has-hocus\\:flex:has(:hover, :focus), .has-\\[\\:checked\\]\\:flex:has(:checked), .has-\\[\\&\\>img\\]\\:flex:has(* > img), .has-\\[\\+img\\]\\:flex:has( + img), .has-\\[\\>img\\]\\:flex:has( > img), .has-\\[\\~img\\]\\:flex:has( ~ img) {
+    "
+    :is(:where(.group):has(:checked) .group-has-checked\\:flex), :is(:where(.group\\/parent-name):has(:checked) .group-has-checked\\/parent-name\\:flex), :is(:where(.group):has(:hover, :focus) .group-has-hocus\\:flex), :is(:where(.group\\/parent-name):has(:hover, :focus) .group-has-hocus\\/parent-name\\:flex), :is(:where(.group):has(:checked) .group-has-\\[\\:checked\\]\\:flex), :is(:where(.group\\/parent-name):has(:checked) .group-has-\\[\\:checked\\]\\/parent-name\\:flex), :is(:where(.group):has(* > img) .group-has-\\[\\&\\>img\\]\\:flex), :is(:where(.group\\/parent-name):has(* > img) .group-has-\\[\\&\\>img\\]\\/parent-name\\:flex), :is(:where(.group):has( + img) .group-has-\\[\\+img\\]\\:flex), :is(:where(.group):has( > img) .group-has-\\[\\>img\\]\\:flex), :is(:where(.group\\/parent-name):has( > img) .group-has-\\[\\>img\\]\\/parent-name\\:flex), :is(:where(.group):has( ~ img) .group-has-\\[\\~img\\]\\:flex), :is(:where(.peer):has(:checked) ~ .peer-has-checked\\:flex), :is(:where(.peer\\/sibling-name):has(:checked) ~ .peer-has-checked\\/sibling-name\\:flex), :is(:where(.peer):has(:hover, :focus) ~ .peer-has-hocus\\:flex), :is(:where(.peer\\/sibling-name):has(:hover, :focus) ~ .peer-has-hocus\\/sibling-name\\:flex), :is(:where(.peer):has(:checked) ~ .peer-has-\\[\\:checked\\]\\:flex), :is(:where(.peer\\/sibling-name):has(:checked) ~ .peer-has-\\[\\:checked\\]\\/sibling-name\\:flex), :is(:where(.peer):has(* > img) ~ .peer-has-\\[\\&\\>img\\]\\:flex), :is(:where(.peer\\/sibling-name):has(* > img) ~ .peer-has-\\[\\&\\>img\\]\\/sibling-name\\:flex), :is(:where(.peer):has( + img) ~ .peer-has-\\[\\+img\\]\\:flex), :is(:where(.peer):has( > img) ~ .peer-has-\\[\\>img\\]\\:flex), :is(:where(.peer\\/sibling-name):has( > img) ~ .peer-has-\\[\\>img\\]\\/sibling-name\\:flex), :is(:where(.peer):has( ~ img) ~ .peer-has-\\[\\~img\\]\\:flex), .has-checked\\:flex:has(:checked), .has-hocus\\:flex:has(:hover, :focus), .has-\\[\\:checked\\]\\:flex:has(:checked), .has-\\[\\&\\>img\\]\\:flex:has(* > img), .has-\\[\\+img\\]\\:flex:has( + img), .has-\\[\\>img\\]\\:flex:has( > img), .has-\\[\\~img\\]\\:flex:has( ~ img) {
       display: flex;
-    }"
+    }
+    "
   `)
 
   expect(
-    await compileCss(
+    await run(
+      [
+        'has-[:checked]/foo:flex',
+        'has-[@media_print]:flex',
+        'has-custom-at-rule:flex',
+        'has-nested-selectors:flex',
+      ],
       css`
         @custom-variant custom-at-rule (@media foo);
         @custom-variant nested-selectors {
@@ -1813,12 +2164,6 @@ test('has', async () => {
         }
         @tailwind utilities;
       `,
-      [
-        'has-[:checked]/foo:flex',
-        'has-[@media_print]:flex',
-        'has-custom-at-rule:flex',
-        'has-nested-selectors:flex',
-      ],
     ),
   ).toEqual('')
 })
@@ -1846,9 +2191,11 @@ test('aria', async () => {
       'peer-aria-[valuenow=1]/sibling-name:flex',
     ]),
   ).toMatchInlineSnapshot(`
-    ".group-aria-checked\\:flex:is(:where(.group)[aria-checked="true"] *), .group-aria-checked\\/parent-name\\:flex:is(:where(.group\\/parent-name)[aria-checked="true"] *), .group-aria-\\[modal\\]\\:flex:is(:where(.group)[aria-modal] *), .group-aria-\\[modal\\]\\/parent-name\\:flex:is(:where(.group\\/parent-name)[aria-modal] *), .group-aria-\\[valuenow\\=1\\]\\:flex:is(:where(.group)[aria-valuenow="1"] *), .group-aria-\\[valuenow\\=1\\]\\/parent-name\\:flex:is(:where(.group\\/parent-name)[aria-valuenow="1"] *), .peer-aria-checked\\:flex:is(:where(.peer)[aria-checked="true"] ~ *), .peer-aria-checked\\/sibling-name\\:flex:is(:where(.peer\\/sibling-name)[aria-checked="true"] ~ *), .peer-aria-\\[modal\\]\\:flex:is(:where(.peer)[aria-modal] ~ *), .peer-aria-\\[modal\\]\\/sibling-name\\:flex:is(:where(.peer\\/sibling-name)[aria-modal] ~ *), .peer-aria-\\[valuenow\\=1\\]\\:flex:is(:where(.peer)[aria-valuenow="1"] ~ *), .peer-aria-\\[valuenow\\=1\\]\\/sibling-name\\:flex:is(:where(.peer\\/sibling-name)[aria-valuenow="1"] ~ *), .aria-checked\\:flex[aria-checked="true"], .aria-\\[invalid\\=spelling\\]\\:flex[aria-invalid="spelling"], .aria-\\[valuenow_\\=_\\"1\\"\\]\\:flex[aria-valuenow="1"], .aria-\\[valuenow\\=1\\]\\:flex[aria-valuenow="1"] {
+    "
+    :is(:where(.group)[aria-checked="true"] .group-aria-checked\\:flex), :is(:where(.group\\/parent-name)[aria-checked="true"] .group-aria-checked\\/parent-name\\:flex), :is(:where(.group)[aria-modal] .group-aria-\\[modal\\]\\:flex), :is(:where(.group\\/parent-name)[aria-modal] .group-aria-\\[modal\\]\\/parent-name\\:flex), :is(:where(.group)[aria-valuenow="1"] .group-aria-\\[valuenow\\=1\\]\\:flex), :is(:where(.group\\/parent-name)[aria-valuenow="1"] .group-aria-\\[valuenow\\=1\\]\\/parent-name\\:flex), :is(:where(.peer)[aria-checked="true"] ~ .peer-aria-checked\\:flex), :is(:where(.peer\\/sibling-name)[aria-checked="true"] ~ .peer-aria-checked\\/sibling-name\\:flex), :is(:where(.peer)[aria-modal] ~ .peer-aria-\\[modal\\]\\:flex), :is(:where(.peer\\/sibling-name)[aria-modal] ~ .peer-aria-\\[modal\\]\\/sibling-name\\:flex), :is(:where(.peer)[aria-valuenow="1"] ~ .peer-aria-\\[valuenow\\=1\\]\\:flex), :is(:where(.peer\\/sibling-name)[aria-valuenow="1"] ~ .peer-aria-\\[valuenow\\=1\\]\\/sibling-name\\:flex), .aria-checked\\:flex[aria-checked="true"], .aria-\\[invalid\\=spelling\\]\\:flex[aria-invalid="spelling"], .aria-\\[valuenow_\\=_\\"1\\"\\]\\:flex[aria-valuenow="1"], .aria-\\[valuenow\\=1\\]\\:flex[aria-valuenow="1"] {
       display: flex;
-    }"
+    }
+    "
   `)
   expect(await run(['aria-checked/foo:flex', 'aria-[invalid=spelling]/foo:flex'])).toEqual('')
 })
@@ -1883,9 +2230,11 @@ test('data', async () => {
       'peer-data-[foo$=bar_baz_i]/sibling-name:flex',
     ]),
   ).toMatchInlineSnapshot(`
-    ".group-data-\\[disabled\\]\\:flex:is(:where(.group)[data-disabled] *), .group-data-\\[disabled\\]\\/parent-name\\:flex:is(:where(.group\\/parent-name)[data-disabled] *), .group-data-\\[foo\\$\\=\\'bar\\'_i\\]\\/parent-name\\:flex:is(:where(.group\\/parent-name)[data-foo$="bar" i] *), .group-data-\\[foo\\$\\=bar_baz_i\\]\\/parent-name\\:flex:is(:where(.group\\/parent-name)[data-foo$="bar baz" i] *), .group-data-\\[foo\\=1\\]\\:flex:is(:where(.group)[data-foo="1"] *), .group-data-\\[foo\\=1\\]\\/parent-name\\:flex:is(:where(.group\\/parent-name)[data-foo="1"] *), .group-data-\\[foo\\=bar\\ baz\\]\\/parent-name\\:flex:is(:where(.group\\/parent-name)[data-foo="bar baz"] *), .peer-data-\\[disabled\\]\\:flex:is(:where(.peer)[data-disabled] ~ *), .peer-data-\\[disabled\\]\\/sibling-name\\:flex:is(:where(.peer\\/sibling-name)[data-disabled] ~ *), .peer-data-\\[foo\\$\\=\\'bar\\'_i\\]\\/sibling-name\\:flex:is(:where(.peer\\/sibling-name)[data-foo$="bar" i] ~ *), .peer-data-\\[foo\\$\\=bar_baz_i\\]\\/sibling-name\\:flex:is(:where(.peer\\/sibling-name)[data-foo$="bar baz" i] ~ *), .peer-data-\\[foo\\=1\\]\\:flex:is(:where(.peer)[data-foo="1"] ~ *), .peer-data-\\[foo\\=1\\]\\/sibling-name\\:flex:is(:where(.peer\\/sibling-name)[data-foo="1"] ~ *), .peer-data-\\[foo\\=bar\\ baz\\]\\/sibling-name\\:flex:is(:where(.peer\\/sibling-name)[data-foo="bar baz"] ~ *), .data-disabled\\:flex[data-disabled], .data-\\[foo\\$\\=\\'bar\\'_i\\]\\:flex[data-foo$="bar" i], .data-\\[foo\\$\\=bar_baz_i\\]\\:flex[data-foo$="bar baz" i], .data-\\[foo\\=1\\]\\:flex[data-foo="1"], .data-\\[foo\\=bar_baz\\]\\:flex[data-foo="bar baz"], .data-\\[potato_\\=_\\"salad\\"\\]\\:flex[data-potato="salad"], .data-\\[potato_\\^\\=_\\"salad\\"\\]\\:flex[data-potato^="salad"], .data-\\[potato\\=\\"\\^_\\=\\"\\]\\:flex[data-potato="^ ="], .data-\\[potato\\=salad\\]\\:flex[data-potato="salad"] {
+    "
+    :is(:where(.group)[data-disabled] .group-data-\\[disabled\\]\\:flex), :is(:where(.group\\/parent-name)[data-disabled] .group-data-\\[disabled\\]\\/parent-name\\:flex), :is(:where(.group\\/parent-name)[data-foo$="bar" i] .group-data-\\[foo\\$\\=\\'bar\\'_i\\]\\/parent-name\\:flex), :is(:where(.group\\/parent-name)[data-foo$="bar baz" i] .group-data-\\[foo\\$\\=bar_baz_i\\]\\/parent-name\\:flex), :is(:where(.group)[data-foo="1"] .group-data-\\[foo\\=1\\]\\:flex), :is(:where(.group\\/parent-name)[data-foo="1"] .group-data-\\[foo\\=1\\]\\/parent-name\\:flex), :is(:where(.group\\/parent-name)[data-foo="bar baz"] .group-data-\\[foo\\=bar\\ baz\\]\\/parent-name\\:flex), :is(:where(.peer)[data-disabled] ~ .peer-data-\\[disabled\\]\\:flex), :is(:where(.peer\\/sibling-name)[data-disabled] ~ .peer-data-\\[disabled\\]\\/sibling-name\\:flex), :is(:where(.peer\\/sibling-name)[data-foo$="bar" i] ~ .peer-data-\\[foo\\$\\=\\'bar\\'_i\\]\\/sibling-name\\:flex), :is(:where(.peer\\/sibling-name)[data-foo$="bar baz" i] ~ .peer-data-\\[foo\\$\\=bar_baz_i\\]\\/sibling-name\\:flex), :is(:where(.peer)[data-foo="1"] ~ .peer-data-\\[foo\\=1\\]\\:flex), :is(:where(.peer\\/sibling-name)[data-foo="1"] ~ .peer-data-\\[foo\\=1\\]\\/sibling-name\\:flex), :is(:where(.peer\\/sibling-name)[data-foo="bar baz"] ~ .peer-data-\\[foo\\=bar\\ baz\\]\\/sibling-name\\:flex), .data-disabled\\:flex[data-disabled], .data-\\[foo\\$\\=\\'bar\\'_i\\]\\:flex[data-foo$="bar" i], .data-\\[foo\\$\\=bar_baz_i\\]\\:flex[data-foo$="bar baz" i], .data-\\[foo\\=1\\]\\:flex[data-foo="1"], .data-\\[foo\\=bar_baz\\]\\:flex[data-foo="bar baz"], .data-\\[potato_\\=_\\"salad\\"\\]\\:flex[data-potato="salad"], .data-\\[potato_\\^\\=_\\"salad\\"\\]\\:flex[data-potato^="salad"], .data-\\[potato\\=\\"\\^_\\=\\"\\]\\:flex[data-potato="^ ="], .data-\\[potato\\=salad\\]\\:flex[data-potato="salad"] {
       display: flex;
-    }"
+    }
+    "
   `)
   expect(
     await run([
@@ -1895,140 +2244,175 @@ test('data', async () => {
       'data-[potato=salad]/foo:flex',
     ]),
   ).toEqual('')
+
+  // Non-ASCII code points are valid in attribute names
+  expect(await run(['data-[état]:flex', 'aria-[état]:flex'])).toMatchInlineSnapshot(`
+    "
+    .aria-\\[état\\]\\:flex[aria-état], .data-\\[état\\]\\:flex[data-état] {
+      display: flex;
+    }
+    "
+  `)
 })
 
 test('portrait', async () => {
   expect(await run(['portrait:flex'])).toMatchInlineSnapshot(`
-    "@media (orientation: portrait) {
+    "
+    @media (orientation: portrait) {
       .portrait\\:flex {
         display: flex;
       }
-    }"
+    }
+    "
   `)
   expect(await run(['portrait/foo:flex'])).toEqual('')
 })
 
 test('landscape', async () => {
   expect(await run(['landscape:flex'])).toMatchInlineSnapshot(`
-    "@media (orientation: landscape) {
+    "
+    @media (orientation: landscape) {
       .landscape\\:flex {
         display: flex;
       }
-    }"
+    }
+    "
   `)
   expect(await run(['landscape/foo:flex'])).toEqual('')
 })
 
 test('contrast-more', async () => {
   expect(await run(['contrast-more:flex'])).toMatchInlineSnapshot(`
-    "@media (prefers-contrast: more) {
+    "
+    @media (prefers-contrast: more) {
       .contrast-more\\:flex {
         display: flex;
       }
-    }"
+    }
+    "
   `)
   expect(await run(['contrast-more/foo:flex'])).toEqual('')
 })
 
 test('contrast-less', async () => {
   expect(await run(['contrast-less:flex'])).toMatchInlineSnapshot(`
-    "@media (prefers-contrast: less) {
+    "
+    @media (prefers-contrast: less) {
       .contrast-less\\:flex {
         display: flex;
       }
-    }"
+    }
+    "
   `)
   expect(await run(['contrast-less/foo:flex'])).toEqual('')
 })
 
 test('forced-colors', async () => {
   expect(await run(['forced-colors:flex'])).toMatchInlineSnapshot(`
-    "@media (forced-colors: active) {
+    "
+    @media (forced-colors: active) {
       .forced-colors\\:flex {
         display: flex;
       }
-    }"
+    }
+    "
   `)
   expect(await run(['forced-colors/foo:flex'])).toEqual('')
 })
 
 test('inverted-colors', async () => {
   expect(await run(['inverted-colors:flex'])).toMatchInlineSnapshot(`
-    "@media (inverted-colors: inverted) {
+    "
+    @media (inverted-colors: inverted) {
       .inverted-colors\\:flex {
         display: flex;
       }
-    }"
+    }
+    "
   `)
 })
 
 test('pointer-none', async () => {
   expect(await run(['pointer-none:flex'])).toMatchInlineSnapshot(`
-    "@media (pointer: none) {
+    "
+    @media (pointer: none) {
       .pointer-none\\:flex {
         display: flex;
       }
-    }"
+    }
+    "
   `)
 })
 
 test('pointer-coarse', async () => {
   expect(await run(['pointer-coarse:flex'])).toMatchInlineSnapshot(`
-    "@media (pointer: coarse) {
+    "
+    @media (pointer: coarse) {
       .pointer-coarse\\:flex {
         display: flex;
       }
-    }"
+    }
+    "
   `)
 })
 
 test('pointer-fine', async () => {
   expect(await run(['pointer-fine:flex'])).toMatchInlineSnapshot(`
-    "@media (pointer: fine) {
+    "
+    @media (pointer: fine) {
       .pointer-fine\\:flex {
         display: flex;
       }
-    }"
+    }
+    "
   `)
 })
 
 test('any-pointer-none', async () => {
   expect(await run(['any-pointer-none:flex'])).toMatchInlineSnapshot(`
-    "@media (any-pointer: none) {
+    "
+    @media (any-pointer: none) {
       .any-pointer-none\\:flex {
         display: flex;
       }
-    }"
+    }
+    "
   `)
 })
 
 test('any-pointer-coarse', async () => {
   expect(await run(['any-pointer-coarse:flex'])).toMatchInlineSnapshot(`
-    "@media (any-pointer: coarse) {
+    "
+    @media (any-pointer: coarse) {
       .any-pointer-coarse\\:flex {
         display: flex;
       }
-    }"
+    }
+    "
   `)
 })
 
 test('any-pointer-fine', async () => {
   expect(await run(['any-pointer-fine:flex'])).toMatchInlineSnapshot(`
-    "@media (any-pointer: fine) {
+    "
+    @media (any-pointer: fine) {
       .any-pointer-fine\\:flex {
         display: flex;
       }
-    }"
+    }
+    "
   `)
 })
 
 test('scripting-none', async () => {
   expect(await run(['noscript:flex'])).toMatchInlineSnapshot(`
-    "@media (scripting: none) {
+    "
+    @media (scripting: none) {
       .noscript\\:flex {
         display: flex;
       }
-    }"
+    }
+    "
   `)
 })
 
@@ -2047,9 +2431,11 @@ test('nth', async () => {
       'nth-last-of-type-[2n+1]:flex',
     ]),
   ).toMatchInlineSnapshot(`
-    ".nth-3\\:flex:nth-child(3), .nth-\\[2n\\+1\\]\\:flex:nth-child(odd), .nth-\\[2n\\+1_of_\\.foo\\]\\:flex:nth-child(odd of .foo), .nth-last-3\\:flex:nth-last-child(3), .nth-last-\\[2n\\+1\\]\\:flex:nth-last-child(odd), .nth-last-\\[2n\\+1_of_\\.foo\\]\\:flex:nth-last-child(odd of .foo), .nth-of-type-3\\:flex:nth-of-type(3), .nth-of-type-\\[2n\\+1\\]\\:flex:nth-of-type(odd), .nth-last-of-type-3\\:flex:nth-last-of-type(3), .nth-last-of-type-\\[2n\\+1\\]\\:flex:nth-last-of-type(odd) {
+    "
+    .nth-3\\:flex:nth-child(3), .nth-\\[2n\\+1\\]\\:flex:nth-child(odd), .nth-\\[2n\\+1_of_\\.foo\\]\\:flex:nth-child(odd of .foo), .nth-last-3\\:flex:nth-last-child(3), .nth-last-\\[2n\\+1\\]\\:flex:nth-last-child(odd), .nth-last-\\[2n\\+1_of_\\.foo\\]\\:flex:nth-last-child(odd of .foo), .nth-of-type-3\\:flex:nth-of-type(3), .nth-of-type-\\[2n\\+1\\]\\:flex:nth-of-type(odd), .nth-last-of-type-3\\:flex:nth-last-of-type(3), .nth-last-of-type-\\[2n\\+1\\]\\:flex:nth-last-of-type(odd) {
       display: flex;
-    }"
+    }
+    "
   `)
 
   expect(
@@ -2081,15 +2467,16 @@ test('nth', async () => {
 })
 
 test('container queries', async () => {
+  let input = css`
+    @theme {
+      --container-lg: 1024px;
+      --container-foo-bar: 1440px;
+    }
+    @tailwind utilities;
+  `
+
   expect(
-    await compileCss(
-      css`
-        @theme {
-          --container-lg: 1024px;
-          --container-foo-bar: 1440px;
-        }
-        @tailwind utilities;
-      `,
+    await run(
       [
         '@lg:flex',
         '@lg/name:flex',
@@ -2112,9 +2499,11 @@ test('container queries', async () => {
         '@max-foo-bar:flex',
         '@max-foo-bar/name:flex',
       ],
+      input,
     ),
   ).toMatchInlineSnapshot(`
-    "@container name not (min-width: 1440px) {
+    "
+    @container name not (min-width: 1440px) {
       .\\@max-foo-bar\\/name\\:flex {
         display: flex;
       }
@@ -2208,17 +2597,11 @@ test('container queries', async () => {
       .\\@min-foo-bar\\:flex {
         display: flex;
       }
-    }"
+    }
+    "
   `)
   expect(
-    await compileCss(
-      css`
-        @theme {
-          --container-lg: 1024px;
-          --container-foo-bar: 1440px;
-        }
-        @tailwind utilities;
-      `,
+    await run(
       [
         '@-lg:flex',
         '@-lg/name:flex',
@@ -2241,23 +2624,14 @@ test('container queries', async () => {
         '@-max-foo-bar:flex',
         '@-max-foo-bar/name:flex',
       ],
+      input,
     ),
   ).toEqual('')
 })
 
 test('variant order', async () => {
   expect(
-    await compileCss(
-      css`
-        @theme {
-          --breakpoint-sm: 640px;
-          --breakpoint-md: 768px;
-          --breakpoint-lg: 1024px;
-          --breakpoint-xl: 1280px;
-          --breakpoint-2xl: 1536px;
-        }
-        @tailwind utilities;
-      `,
+    await run(
       [
         '[&_p]:flex',
         '2xl:flex',
@@ -2334,9 +2708,20 @@ test('variant order', async () => {
         'visited:flex',
         'xl:flex',
       ],
+      css`
+        @theme {
+          --breakpoint-sm: 640px;
+          --breakpoint-md: 768px;
+          --breakpoint-lg: 1024px;
+          --breakpoint-xl: 1280px;
+          --breakpoint-2xl: 1536px;
+        }
+        @tailwind utilities;
+      `,
     ),
   ).toMatchInlineSnapshot(`
-    "@layer properties {
+    "
+    @layer properties {
       @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
         *, :before, :after, ::backdrop {
           --tw-content: "";
@@ -2345,7 +2730,7 @@ test('variant order', async () => {
     }
 
     @media (hover: hover) {
-      .group-hover\\:flex:is(:where(.group):hover *), .peer-hover\\:flex:is(:where(.peer):hover ~ *) {
+      :is(:where(.group):hover .group-hover\\:flex), :is(:where(.peer):hover ~ .peer-hover\\:flex) {
         display: flex;
       }
     }
@@ -2519,7 +2904,8 @@ test('variant order', async () => {
       syntax: "*";
       inherits: false;
       initial-value: "";
-    }"
+    }
+    "
   `)
 })
 
@@ -2545,15 +2931,13 @@ test('variants with the same root are sorted deterministically', async () => {
   ])
 
   for (let classList of classLists) {
-    let output = await compileCss('@tailwind utilities;', classList)
-
-    expect(output.trim()).toEqual(
-      dedent(`
-        .data-active\\:flex[data-active], .data-focus\\:flex[data-focus], .data-hover\\:flex[data-hover], .data-\\[bar\\]\\:flex[data-bar], .data-\\[baz\\]\\:flex[data-baz], .data-\\[foo\\]\\:flex[data-foo] {
-          display: flex;
-        }
-      `),
-    )
+    expect(await run(classList)).toMatchInlineSnapshot(`
+      "
+      .data-active\\:flex[data-active], .data-focus\\:flex[data-focus], .data-hover\\:flex[data-hover], .data-\\[bar\\]\\:flex[data-bar], .data-\\[baz\\]\\:flex[data-baz], .data-\\[foo\\]\\:flex[data-foo] {
+        display: flex;
+      }
+      "
+    `)
   }
 })
 
@@ -2578,31 +2962,31 @@ test('matchVariant sorts deterministically', async () => {
   ])
 
   for (let classList of classLists) {
-    let output = await compileCss('@tailwind utilities; @plugin "./plugin.js";', classList, {
-      async loadModule(id: string) {
-        return {
-          path: '',
-          base: '/',
-          module: createPlugin(({ matchVariant }) => {
-            matchVariant('is-data', (value) => `&:is([data-${value}])`, {
-              values: {
-                DEFAULT: 'default',
-                foo: 'foo',
-                bar: 'bar',
-              },
-            })
-          }),
-        }
-      },
-    })
-
-    expect(output.trim()).toEqual(
-      dedent(`
-        .is-data\\:flex[data-default], .is-data-foo\\:flex[data-foo], .is-data-bar\\:flex[data-bar], .is-data-\\[potato\\]\\:flex[data-potato], .is-data-\\[sandwich\\]\\:flex[data-sandwich] {
-          display: flex;
-        }
-      `),
-    )
+    expect(
+      await run(classList, '@tailwind utilities; @plugin "./plugin.js";', {
+        async loadModule(_id: string) {
+          return {
+            path: '',
+            base: '/',
+            module: createPlugin(({ matchVariant }) => {
+              matchVariant('is-data', (value) => `&:is([data-${value}])`, {
+                values: {
+                  DEFAULT: 'default',
+                  foo: 'foo',
+                  bar: 'bar',
+                },
+              })
+            }),
+          }
+        },
+      }),
+    ).toMatchInlineSnapshot(`
+      "
+      .is-data\\:flex[data-default], .is-data-foo\\:flex[data-foo], .is-data-bar\\:flex[data-bar], .is-data-\\[potato\\]\\:flex[data-potato], .is-data-\\[sandwich\\]\\:flex[data-sandwich] {
+        display: flex;
+      }
+      "
+    `)
   }
 })
 
@@ -2618,9 +3002,11 @@ test('move modifier of compound variant to sub-variant if its also a compound va
       'group-peer-focus/name:flex',
     ]),
   ).toMatchInlineSnapshot(`
-    ".not-group-focus\\/name\\:flex:not(:is(:where(.group\\/name):focus *)), .group-peer-focus\\/name\\:flex:is(:where(.group\\/name):is(:where(.peer):focus ~ *) *), :where(:is(:where(.group\\/name):focus *)) .in-group-focus\\/name\\:flex, .has-group-focus\\/name\\:flex:has(:is(:where(.group\\/name):focus *)) {
+    "
+    .not-group-focus\\/name\\:flex:not(:is(:where(.group\\/name):focus *)), :is(:is(:where(.peer):focus ~ :where(.group\\/name)) .group-peer-focus\\/name\\:flex), :where(:is(:where(.group\\/name):focus *)) .in-group-focus\\/name\\:flex, .has-group-focus\\/name\\:flex:has(:is(:where(.group\\/name):focus *)) {
       display: flex;
-    }"
+    }
+    "
   `)
 })
 
diff --git a/packages/tailwindcss/src/variants.ts b/packages/tailwindcss/src/variants.ts
index 0b4bcb0c5..d2695b4d2 100644
--- a/packages/tailwindcss/src/variants.ts
+++ b/packages/tailwindcss/src/variants.ts
@@ -3,6 +3,7 @@ import {
   atRoot,
   atRule,
   cloneAstNode,
+  context,
   decl,
   rule,
   styleRule,
@@ -11,6 +12,7 @@ import {
   type Rule,
   type StyleRule,
 } from './ast'
+import * as AttributeSelectorParser from './attribute-selector-parser'
 import { type Variant } from './candidate'
 import { applyVariant } from './compile'
 import type { DesignSystem } from './design-system'
@@ -19,6 +21,7 @@ import { compareBreakpoints } from './utils/compare-breakpoints'
 import { DefaultMap } from './utils/default-map'
 import { isPositiveInteger } from './utils/infer-data-type'
 import { segment } from './utils/segment'
+import * as ValueParser from './value-parser'
 import { walk, WalkAction } from './walk'
 
 export const IS_VALID_VARIANT_NAME = /^@?[a-z0-9][a-zA-Z0-9_-]*(?<![_-])$/
@@ -87,12 +90,14 @@ export class Variants {
     let selectors: string[] = []
 
     let usesAtVariant = false
+    let usesAtScope = false
     walk(ast, (node) => {
       if (node.kind === 'rule') {
         selectors.push(node.selector)
       } else if (node.kind === 'at-rule' && node.name === '@variant') {
         usesAtVariant = true
       } else if (node.kind === 'at-rule' && node.name !== '@slot') {
+        if (node.name === '@scope') usesAtScope = true
         selectors.push(`${node.name} ${node.params}`)
       }
     })
@@ -102,8 +107,14 @@ export class Variants {
       (r) => {
         let body = ast.map(cloneAstNode)
         if (usesAtVariant) substituteAtVariant(body, designSystem)
-        substituteAtSlot(body, r.nodes)
-        r.nodes = body
+
+        if (usesAtScope) {
+          substituteAtSlot(body, [context({ source: 'user' }, r.nodes)])
+          r.nodes = [context({ source: 'variant' }, body)]
+        } else {
+          substituteAtSlot(body, r.nodes)
+          r.nodes = body
+        }
       },
       { compounds: compoundsForSelectors(selectors) },
     )
@@ -375,35 +386,83 @@ export function createVariants(theme: Theme): Variants {
 
   function negateConditions(ruleName: string, conditions: string[]) {
     return conditions.map((condition) => {
-      condition = condition.trim()
+      switch (ruleName) {
+        case '@container': {
+          let ast = ValueParser.parse(condition.trim())
 
-      let parts = segment(condition, ' ')
+          // @container {query}
+          //            ^^^^^^^
+          // ast        0
+          if (ast.length >= 1 && ast[0].kind === 'function') {
+            return `not ${condition}`
+          }
 
-      // @media not {query}
-      // @supports not {query}
-      // @container not {query}
-      if (parts[0] === 'not') {
-        return parts.slice(1).join(' ')
-      }
+          // @container not   {query}
+          //            ^^^ ^ ^^^^^^^
+          // ast        0   1 2
+          else if (
+            ast.length >= 3 &&
+            ast[0].kind === 'word' &&
+            ast[0].value === 'not' &&
+            ast[2].kind === 'function'
+          ) {
+            // Drop the leading `not` (ast[0]) and separator (ast[1])
+            ast.splice(0, 2)
+
+            return ValueParser.toCss(ast)
+          }
+
+          // @container {name}   not   {query}
+          //            ^^^^^^ ^ ^^^ ^ ^^^^^^^
+          // ast        0      1 2   3 4
+          else if (
+            ast.length >= 5 &&
+            ast[0].kind === 'word' &&
+            ast[2].kind === 'word' &&
+            ast[2].value === 'not' &&
+            ast[4].kind === 'function'
+          ) {
+            // Drop the `not` (ast[2]) and separator (ast[3])
+            ast.splice(2, 2)
+
+            return ValueParser.toCss(ast)
+          }
+
+          // @container {name}   {query}
+          //            ^^^^^^ ^ ^^^^^^^
+          // ast        0      1 2
+          else if (
+            ast.length >= 3 &&
+            ast[0].kind === 'word' &&
+            ast[0].value !== 'not' &&
+            ast[2].kind === 'function'
+          ) {
+            // Inject a separator and a `not`, after the `name` (ast[0])
+            ast.splice(1, 0, { kind: 'separator', value: ' ' }, { kind: 'word', value: 'not' })
+
+            return ValueParser.toCss(ast)
+          }
+
+          // Fallback
+          else {
+            return `not ${condition}`
+          }
+        }
+
+        default: {
+          condition = condition.trim()
+
+          let parts = segment(condition, ' ')
+
+          // @media not {query}
+          // @supports not {query}
+          if (parts[0] === 'not') {
+            return parts.slice(1).join(' ')
+          }
 
-      if (ruleName === '@container') {
-        // @container {query}
-        if (parts[0][0] === '(') {
           return `not ${condition}`
         }
-
-        // @container {name} not {query}
-        else if (parts[1] === 'not') {
-          return `${parts[0]} ${parts.slice(2).join(' ')}`
-        }
-
-        // @container {name} {query}
-        else {
-          return `${parts[0]} not ${parts.slice(1).join(' ')}`
-        }
       }
-
-      return `not ${condition}`
     })
   }
 
@@ -551,7 +610,13 @@ export function createVariants(theme: Theme): Variants {
         selector = `:is(${selector})`
       }
 
-      node.selector = `&:is(${selector} *)`
+      // Put the target inside `:is` so browsers can limit style invalidation to
+      // it when the group changes. Keep `&` instead of the candidate's class so
+      // this also works with `@apply` and variants that change the target.
+      //
+      // The `:is` wrapper also keeps `has-group-*` from anchoring the group
+      // itself to the element carrying the utility.
+      node.selector = `:is(${selector} &)`
 
       // Track that the variant was actually applied
       didApply = true
@@ -592,7 +657,7 @@ export function createVariants(theme: Theme): Variants {
 
       // For most variants we rely entirely on CSS nesting to build-up the final
       // selector, but there is no way to use CSS nesting to make `&` refer to
-      // just the `.group` class the way we'd need to for these variants, so we
+      // just the `.peer` class the way we'd need to for these variants, so we
       // need to replace it in the selector ourselves.
       let selector = node.selector.replaceAll('&', variantSelector)
 
@@ -603,7 +668,8 @@ export function createVariants(theme: Theme): Variants {
         selector = `:is(${selector})`
       }
 
-      node.selector = `&:is(${selector} ~ *)`
+      // As with `group`, constrain the target without repeating its selector.
+      node.selector = `:is(${selector} ~ &)`
 
       // Track that the variant was actually applied
       didApply = true
@@ -796,11 +862,15 @@ export function createVariants(theme: Theme): Variants {
     if (!variant.value || variant.modifier) return null
 
     if (variant.value.kind === 'arbitrary') {
-      ruleNode.nodes = [
-        styleRule(`&[aria-${quoteAttributeValue(variant.value.value)}]`, ruleNode.nodes),
-      ]
+      let selector = `[aria-${quoteAttributeValue(variant.value.value)}]`
+      let parsed = AttributeSelectorParser.parse(selector)
+      if (parsed === null) return null
+      ruleNode.nodes = [styleRule(`&${selector}`, ruleNode.nodes)]
     } else {
-      ruleNode.nodes = [styleRule(`&[aria-${variant.value.value}="true"]`, ruleNode.nodes)]
+      let selector = `[aria-${variant.value.value}="true"]`
+      let parsed = AttributeSelectorParser.parse(selector)
+      if (parsed === null) return null
+      ruleNode.nodes = [styleRule(`&${selector}`, ruleNode.nodes)]
     }
   })
 
@@ -819,9 +889,11 @@ export function createVariants(theme: Theme): Variants {
   variants.functional('data', (ruleNode, variant) => {
     if (!variant.value || variant.modifier) return null
 
-    ruleNode.nodes = [
-      styleRule(`&[data-${quoteAttributeValue(variant.value.value)}]`, ruleNode.nodes),
-    ]
+    let selector = `[data-${quoteAttributeValue(variant.value.value)}]`
+    let parsed = AttributeSelectorParser.parse(selector)
+    if (parsed === null) return null
+
+    ruleNode.nodes = [styleRule(`&${selector}`, ruleNode.nodes)]
   })
 
   variants.functional('nth', (ruleNode, variant) => {
@@ -873,7 +945,22 @@ export function createVariants(theme: Theme): Variants {
       if (/^[\w-]*\s*\(/.test(value)) {
         // Chrome has a bug where `(condition1)or(condition2)` is not valid, but
         // `(condition1) or (condition2)` is supported.
-        let query = value.replace(/\b(and|or|not)\b/g, ' $1 ')
+        let changed = false
+        let ast = ValueParser.parse(value)
+        walk(ast, (node) => {
+          if (node.kind !== 'function') return
+
+          // Leave selectors as-is, they could contain `selector(a:not(b))`, and
+          // in this case we don't want the space around the `not`.
+          if (node.value === 'selector') return WalkAction.Skip
+
+          if (node.value === 'and' || node.value === 'or' || node.value === 'not') {
+            changed = true
+            node.value = ` ${node.value} `
+          }
+        })
+
+        let query = changed ? ValueParser.toCss(ast) : value
 
         ruleNode.nodes = [atRule('@supports', query, ruleNode.nodes)]
         return
@@ -1212,24 +1299,50 @@ export function substituteAtVariant(ast: AstNode[], designSystem: DesignSystem):
   walk(ast, (variantNode) => {
     if (variantNode.kind !== 'at-rule' || variantNode.name !== '@variant') return
 
-    // Starting with the `&` rule node
-    let node = styleRule('&', variantNode.nodes)
+    let nodes: AstNode[] = []
+    let compoundVariants = segment(variantNode.params, ',')
+    for (let [idx, compoundVariant] of compoundVariants.entries()) {
+      // Starting with the `&` rule node
+      //
+      // Only clone the nodes when we have multiple compound variants to deal
+      // with. The last one can use the original nodes. We do need unique AST
+      // nodes for sourcemap `dst` location information.
+      let node = styleRule(
+        '&',
+        idx === compoundVariants.length - 1
+          ? variantNode.nodes
+          : variantNode.nodes.map(cloneAstNode),
+      )
 
-    let variant = variantNode.params
+      let stackedVariants = segment(compoundVariant, ':')
+      for (let i = stackedVariants.length - 1; i >= 0; --i) {
+        let variant = stackedVariants[i].trim()
 
-    let variantAst = designSystem.parseVariant(variant)
-    if (variantAst === null) {
-      throw new Error(`Cannot use \`@variant\` with unknown variant: ${variant}`)
-    }
+        if (!variant) {
+          throw new Error(`Cannot use \`@variant\` with empty variant`)
+        }
 
-    let result = applyVariant(node, variantAst, designSystem.variants)
-    if (result === null) {
-      throw new Error(`Cannot use \`@variant\` with variant: ${variant}`)
+        let variantAst = designSystem.parseVariant(variant)
+        if (variantAst === null) {
+          throw new Error(`Cannot use \`@variant\` with unknown variant: ${variant}`)
+        }
+
+        let result = applyVariant(node, variantAst, designSystem.variants)
+        if (result === null) {
+          throw new Error(`Cannot use \`@variant\` with variant: ${variant}`)
+        }
+      }
+
+      if (node.selector === '&') {
+        nodes.push(...node.nodes)
+      } else {
+        nodes.push(node)
+      }
     }
 
     // Update the variant at-rule node, to be the `&` rule node
     features |= Features.Variants
-    return WalkAction.Replace(node)
+    return WalkAction.Replace(nodes)
   })
   return features
 }
diff --git a/packages/tailwindcss/src/walk.test.ts b/packages/tailwindcss/src/walk.test.ts
index 09720cc52..794d7e629 100644
--- a/packages/tailwindcss/src/walk.test.ts
+++ b/packages/tailwindcss/src/walk.test.ts
@@ -956,33 +956,35 @@ describe('AST Enter & Exit', () => {
     let visited: string[] = []
     walk(ast, {
       enter(node, ctx) {
-        visited.push(`${'  '.repeat(ctx.depth)} Enter(${node.kind})`)
+        expect(ctx.index).toEqual(ctx.siblings.indexOf(node))
+        visited.push(`${'  '.repeat(ctx.depth)} Enter(${node.kind} @ ${ctx.index})`)
       },
       exit(node, ctx) {
-        visited.push(`${'  '.repeat(ctx.depth)} Exit(${node.kind})`)
+        expect(ctx.index).toEqual(ctx.siblings.indexOf(node))
+        visited.push(`${'  '.repeat(ctx.depth)} Exit(${node.kind} @ ${ctx.index})`)
       },
     })
 
     expect(`\n${visited.join('\n')}\n`).toMatchInlineSnapshot(`
       "
-       Enter(a)
-         Enter(b)
-           Enter(c)
-           Exit(c)
-         Exit(b)
-         Enter(d)
-           Enter(e)
-             Enter(f)
-             Exit(f)
-           Exit(e)
-         Exit(d)
-         Enter(g)
-           Enter(h)
-           Exit(h)
-         Exit(g)
-       Exit(a)
-       Enter(i)
-       Exit(i)
+       Enter(a @ 0)
+         Enter(b @ 0)
+           Enter(c @ 0)
+           Exit(c @ 0)
+         Exit(b @ 0)
+         Enter(d @ 1)
+           Enter(e @ 0)
+             Enter(f @ 0)
+             Exit(f @ 0)
+           Exit(e @ 0)
+         Exit(d @ 1)
+         Enter(g @ 2)
+           Enter(h @ 0)
+           Exit(h @ 0)
+         Exit(g @ 2)
+       Exit(a @ 0)
+       Enter(i @ 1)
+       Exit(i @ 1)
       "
     `)
   })
diff --git a/packages/tailwindcss/src/walk.ts b/packages/tailwindcss/src/walk.ts
index 97c30db90..2c268a7bd 100644
--- a/packages/tailwindcss/src/walk.ts
+++ b/packages/tailwindcss/src/walk.ts
@@ -36,6 +36,8 @@ type Parent<T> = T & { nodes: T[] }
 export interface VisitContext<T> {
   parent: Parent<T> | null
   depth: number
+  index: number
+  siblings: T[]
   path: () => T[]
 }
 
@@ -68,6 +70,8 @@ function walkImplementation<T extends { nodes?: T[] }>(
   let ctx: VisitContext<T> = {
     parent: null,
     depth: 0,
+    index: 0,
+    siblings: ast,
     path() {
       let path: T[] = []
 
@@ -99,9 +103,12 @@ function walkImplementation<T extends { nodes?: T[] }>(
     }
 
     ctx.parent = parent
+    ctx.siblings = nodes
 
     // Enter phase (offsets are positive)
     if (offset >= 0) {
+      ctx.index = offset
+
       let node = nodes[offset]
       let result = enter(node, ctx) ?? WalkAction.Continue
 
@@ -155,6 +162,7 @@ function walkImplementation<T extends { nodes?: T[] }>(
 
     // Exit phase for nodes[~offset]
     let index = ~offset // Two's complement to get original offset
+    ctx.index = index
     let node = nodes[index]
 
     let result = exit(node, ctx) ?? WalkAction.Continue
diff --git a/packages/tailwindcss/tests/ui.spec.ts b/packages/tailwindcss/tests/ui.spec.ts
index 889848c5c..e5da091d8 100644
--- a/packages/tailwindcss/tests/ui.spec.ts
+++ b/packages/tailwindcss/tests/ui.spec.ts
@@ -2177,6 +2177,330 @@ test('shadow DOM has access to variables', async ({ page }) => {
   expect(gap).toBe('8px')
 })
 
+// @scope related tests
+{
+  test('custom variant using `@scope`', async ({ page }) => {
+    let { getPropertyValue } = await render(
+      page,
+      html`
+        <div class="checkout">
+          <div id="in" class="in-checkout:underline">In scope</div>
+          <div class="payment">
+            <div id="beyond" class="in-checkout:underline">Beyond the limit</div>
+          </div>
+        </div>
+        <div id="out" class="in-checkout:underline">Not in scope</div>
+      `,
+      css`
+        @custom-variant in-checkout {
+          @scope (.checkout) to (.payment) {
+            @slot;
+          }
+        }
+      `,
+    )
+
+    test.skip(!(await supportsAtScope(page)), '`@scope` is not supported in this browser')
+
+    expect(await getPropertyValue('#in', 'text-decoration-line')).toEqual('underline')
+    expect(await getPropertyValue('#beyond', 'text-decoration-line')).toEqual('none')
+    expect(await getPropertyValue('#out', 'text-decoration-line')).toEqual('none')
+  })
+
+  test('custom variant using `@scope` behaves like the equivalent authored CSS', async ({
+    page,
+  }) => {
+    // Render the same structure twice:
+    // - Once styled by authored CSS using `@scope`, like the "normal CSS"
+    //   reference in https://github.com/tailwindlabs/tailwindcss/issues/18961
+    // - Once styled by utilities using an equivalent custom variant
+    function structure(prefix: string, probe: string) {
+      return html`
+        <div class="checkout">
+          <div id="${prefix}-in" class="${probe}">In scope</div>
+          <div class="payment">
+            <div id="${prefix}-beyond" class="${probe}">Beyond the limit</div>
+          </div>
+        </div>
+        <div id="${prefix}-out" class="${probe}">Not in scope</div>
+      `
+    }
+
+    let { getPropertyValue } = await render(
+      page,
+      structure('a', 'a-probe') + structure('c', 'in-checkout:underline'),
+      css`
+        @custom-variant in-checkout {
+          @scope (.checkout) to (.payment) {
+            @slot;
+          }
+        }
+      `,
+    )
+
+    // The `a-*` structure is styled by the authored CSS as-is
+    await page.addStyleTag({
+      content: css`
+        @scope (.checkout) to (.payment) {
+          .a-probe {
+            text-decoration-line: underline;
+          }
+        }
+      `,
+    })
+
+    test.skip(!(await supportsAtScope(page)), '`@scope` is not supported in this browser')
+
+    for (let prefix of ['a', 'c']) {
+      expect(await getPropertyValue(`#${prefix}-in`, 'text-decoration-line')).toEqual('underline')
+      expect(await getPropertyValue(`#${prefix}-beyond`, 'text-decoration-line')).toEqual('none')
+      expect(await getPropertyValue(`#${prefix}-out`, 'text-decoration-line')).toEqual('none')
+    }
+  })
+
+  test('user-authored nested `@scope` behaves like the authored CSS', async ({ page }) => {
+    // User-authored `@scope` rules are compiled to their native CSS nesting
+    // semantics. Rendering the same structure twice:
+    // - Once styled by the authored (nested) CSS as-is
+    // - Once styled by the compiled output
+    function structure(prefix: string) {
+      return html`
+        <div class="${prefix}-parent">
+          <div class="${prefix}-scope">
+            <span class="${prefix}-content" id="${prefix}-in">in scope</span>
+            <div class="${prefix}-limit">
+              <span class="${prefix}-content" id="${prefix}-beyond">beyond the limit</span>
+            </div>
+          </div>
+        </div>
+        <div class="${prefix}-scope">
+          <span class="${prefix}-content" id="${prefix}-out">scope not inside parent</span>
+        </div>
+      `
+    }
+
+    function scopeCss(prefix: string) {
+      return css`
+        .${prefix}-parent {
+          @scope (& > .${prefix}-scope) to (& .${prefix}-limit) {
+            .${prefix}-content {
+              text-decoration-line: underline;
+            }
+          }
+        }
+      `
+    }
+
+    // The `c-*` structure is styled by the compiled CSS
+    let { getPropertyValue } = await render(page, structure('a') + structure('c'), scopeCss('c'))
+
+    // The `a-*` structure is styled by the authored CSS as-is
+    await page.addStyleTag({ content: scopeCss('a') })
+
+    test.skip(!(await supportsAtScope(page)), '`@scope` is not supported in this browser')
+
+    // The compiled output only applies within the scope
+    expect(await getPropertyValue('#c-in', 'text-decoration-line')).toEqual('underline')
+    expect(await getPropertyValue('#c-beyond', 'text-decoration-line')).toEqual('none')
+    expect(await getPropertyValue('#c-out', 'text-decoration-line')).toEqual('none')
+
+    // The authored CSS behaves the same
+    expect(await getPropertyValue('#a-in', 'text-decoration-line')).toEqual('underline')
+    expect(await getPropertyValue('#a-out', 'text-decoration-line')).toEqual('none')
+
+    // WebKit currently drops the `<scope-end>` limit entirely when it contains
+    // `&`. Since we resolve the `&` at build time, the compiled output works
+    // even though the authored CSS doesn't.
+    if (test.info().project.name !== 'webkit') {
+      expect(await getPropertyValue('#a-beyond', 'text-decoration-line')).toEqual('none')
+    }
+  })
+
+  test('user-authored `@scope` nested inside another `@scope`', async ({ page }) => {
+    function structure(prefix: string) {
+      return html`
+        <!-- Control: outer > middle > inner -->
+        <div class="${prefix}-outer">
+          <div class="${prefix}-middle">
+            <div class="${prefix}-inner" id="${prefix}-ctrl">ctrl</div>
+          </div>
+        </div>
+
+        <!-- Middle is an ancestor of the outer scope root -->
+        <div class="${prefix}-middle">
+          <div class="${prefix}-outer">
+            <div class="${prefix}-inner" id="${prefix}-ancestor">ancestor</div>
+          </div>
+        </div>
+
+        <!-- Middle is beyond the outer limit -->
+        <div class="${prefix}-outer">
+          <div class="${prefix}-outer-limit">
+            <div class="${prefix}-middle">
+              <div class="${prefix}-inner" id="${prefix}-beyond">beyond</div>
+            </div>
+          </div>
+        </div>
+      `
+    }
+
+    function scopeCss(prefix: string) {
+      return css`
+        @scope (.${prefix}-outer) to (.${prefix}-outer-limit) {
+          .${prefix}-middle {
+            @scope (.${prefix}-inner) to (.${prefix}-inner-limit) {
+              text-decoration-line: underline;
+            }
+          }
+        }
+      `
+    }
+
+    // The `c-*` structure is styled by the compiled CSS
+    let { getPropertyValue } = await render(page, structure('a') + structure('c'), scopeCss('c'))
+
+    // The `a-*` structure is styled by the authored CSS as-is
+    await page.addStyleTag({ content: scopeCss('a') })
+
+    test.skip(!(await supportsAtScope(page)), '`@scope` is not supported in this browser')
+
+    // The compiled output behaves the same in every browser
+    expect(await getPropertyValue('#c-ctrl', 'text-decoration-line')).toEqual('underline')
+    expect(await getPropertyValue('#c-ancestor', 'text-decoration-line')).toEqual('none')
+    expect(await getPropertyValue('#c-beyond', 'text-decoration-line')).toEqual('none')
+
+    // The authored CSS behaves the same …
+    expect(await getPropertyValue('#a-ctrl', 'text-decoration-line')).toEqual('underline')
+    expect(await getPropertyValue('#a-beyond', 'text-decoration-line')).toEqual('none')
+
+    // … except in Chromium, which resolves the nesting context of a
+    // rule-nested `@scope` without the enclosing scope's constraint (Safari
+    // and Firefox both constrain it). The compiled output normalizes this
+    // browser difference.
+    if (test.info().project.name !== 'chromium') {
+      expect(await getPropertyValue('#a-ancestor', 'text-decoration-line')).toEqual('none')
+    }
+  })
+
+  function supportsAtScope(page: Page) {
+    return page.evaluate(() => typeof CSSScopeRule !== 'undefined')
+  }
+}
+
+for (let kind of ['group', 'peer']) {
+  test(`${kind}-* variants`, async ({ page }) => {
+    let targets = html`
+      <div id="target" class="${kind}-focus:z-10"></div>
+      <div id="applied" class="applied"></div>
+    `
+
+    let { getPropertyValue } = await render(
+      page,
+      kind === 'group'
+        ? html`<div id="trigger" tabindex="0" class="group owner">${targets}</div>`
+        : html`<div class="owner">
+            <div id="trigger" tabindex="0" class="peer"></div>
+            ${targets}
+          </div>`,
+      css`
+        .owner > .applied {
+          @apply ${kind}-focus:z-20;
+        }
+      `,
+    )
+
+    expect(await getPropertyValue('#target', 'z-index')).toEqual('auto')
+    expect(await getPropertyValue('#applied', 'z-index')).toEqual('auto')
+
+    await page.locator('#trigger').focus()
+
+    expect(await getPropertyValue('#target', 'z-index')).toEqual('10')
+    expect(await getPropertyValue('#applied', 'z-index')).toEqual('20')
+
+    await page.locator('#trigger').blur()
+
+    expect(await getPropertyValue('#target', 'z-index')).toEqual('auto')
+    expect(await getPropertyValue('#applied', 'z-index')).toEqual('auto')
+  })
+}
+
+test('group-* variants do not change specificity', async ({ page }) => {
+  let { getPropertyValue } = await render(
+    page,
+    html`
+      <div id="trigger" tabindex="0" class="group">
+        <div id="target" class="target group-focus:z-10"></div>
+      </div>
+    `,
+    css`
+      @layer utilities {
+        .target {
+          z-index: 20;
+        }
+        .target.equal {
+          z-index: 30;
+        }
+      }
+    `,
+  )
+
+  await page.locator('#trigger').focus()
+
+  expect(await getPropertyValue('#target', 'z-index')).toEqual('10')
+
+  await page.locator('#target').evaluate((element) => element.classList.add('equal'))
+
+  expect(await getPropertyValue('#target', 'z-index')).toEqual('30')
+})
+
+test('stacked group-* variants match regardless of the order of the groups', async ({ page }) => {
+  for (let [outer, inner] of [
+    ['a', 'b'],
+    ['b', 'a'],
+  ]) {
+    let { getPropertyValue } = await render(
+      page,
+      html`
+        <div class="group/${outer}" data-active>
+          <div id="inner" class="group/${inner}" data-active>
+            <div id="target" class="group-data-active/a:group-data-active/b:z-10"></div>
+          </div>
+        </div>
+      `,
+    )
+
+    expect(await getPropertyValue('#target', 'z-index')).toEqual('10')
+
+    await page.locator('#inner').evaluate((element) => element.removeAttribute('data-active'))
+
+    expect(await getPropertyValue('#target', 'z-index')).toEqual('auto')
+  }
+})
+
+test('compound group-* and peer-* variants', async ({ page }) => {
+  let { getPropertyValue } = await render(
+    page,
+    html`
+      <div id="outer" tabindex="0" class="group">
+        <div id="peer" tabindex="0" class="peer"></div>
+        <div id="middle" class="group peer-group-focus:z-20">
+          <div id="target" class="group-peer-focus:z-10"></div>
+        </div>
+      </div>
+    `,
+  )
+
+  await page.locator('#peer').focus()
+
+  expect(await getPropertyValue('#target', 'z-index')).toEqual('10')
+  expect(await getPropertyValue('#middle', 'z-index')).toEqual('auto')
+
+  await page.locator('#outer').focus()
+
+  expect(await getPropertyValue('#target', 'z-index')).toEqual('auto')
+  expect(await getPropertyValue('#middle', 'z-index')).toEqual('20')
+})
+
 // ---
 
 const preflight = fs.readFileSync(path.resolve(__dirname, '..', 'preflight.css'), 'utf-8')
diff --git a/packages/tailwindcss/theme.css b/packages/tailwindcss/theme.css
index 502f5c752..05364f5c2 100644
--- a/packages/tailwindcss/theme.css
+++ b/packages/tailwindcss/theme.css
@@ -1,7 +1,7 @@
 @theme default {
   --font-sans:
-    ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
-    'Noto Color Emoji';
+    -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', 'Noto Sans', Arial,
+    sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
   --font-serif: ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif;
   --font-mono:
     ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New',
@@ -235,7 +235,7 @@
   --color-gray-900: oklch(21% 0.034 264.665);
   --color-gray-950: oklch(13% 0.028 261.692);
 
-  --color-zinc-50: oklch(98.5% 0 0);
+  --color-zinc-50: oklch(98.5% 0 none);
   --color-zinc-100: oklch(96.7% 0.001 286.375);
   --color-zinc-200: oklch(92% 0.004 286.32);
   --color-zinc-300: oklch(87.1% 0.006 286.286);
@@ -247,17 +247,17 @@
   --color-zinc-900: oklch(21% 0.006 285.885);
   --color-zinc-950: oklch(14.1% 0.005 285.823);
 
-  --color-neutral-50: oklch(98.5% 0 0);
-  --color-neutral-100: oklch(97% 0 0);
-  --color-neutral-200: oklch(92.2% 0 0);
-  --color-neutral-300: oklch(87% 0 0);
-  --color-neutral-400: oklch(70.8% 0 0);
-  --color-neutral-500: oklch(55.6% 0 0);
-  --color-neutral-600: oklch(43.9% 0 0);
-  --color-neutral-700: oklch(37.1% 0 0);
-  --color-neutral-800: oklch(26.9% 0 0);
-  --color-neutral-900: oklch(20.5% 0 0);
-  --color-neutral-950: oklch(14.5% 0 0);
+  --color-neutral-50: oklch(98.5% 0 none);
+  --color-neutral-100: oklch(97% 0 none);
+  --color-neutral-200: oklch(92.2% 0 none);
+  --color-neutral-300: oklch(87% 0 none);
+  --color-neutral-400: oklch(70.8% 0 none);
+  --color-neutral-500: oklch(55.6% 0 none);
+  --color-neutral-600: oklch(43.9% 0 none);
+  --color-neutral-700: oklch(37.1% 0 none);
+  --color-neutral-800: oklch(26.9% 0 none);
+  --color-neutral-900: oklch(20.5% 0 none);
+  --color-neutral-950: oklch(14.5% 0 none);
 
   --color-stone-50: oklch(98.5% 0.001 106.423);
   --color-stone-100: oklch(97% 0.001 106.424);
@@ -271,7 +271,7 @@
   --color-stone-900: oklch(21.6% 0.006 56.043);
   --color-stone-950: oklch(14.7% 0.004 49.25);
 
-  --color-mauve-50: oklch(98.5% 0 0);
+  --color-mauve-50: oklch(98.5% 0 none);
   --color-mauve-100: oklch(96% 0.003 325.6);
   --color-mauve-200: oklch(92.2% 0.005 325.62);
   --color-mauve-300: oklch(86.5% 0.012 325.68);
diff --git a/packages/tailwindcss/tsconfig.json b/packages/tailwindcss/tsconfig.json
index 6ae022f65..d2131cbeb 100644
--- a/packages/tailwindcss/tsconfig.json
+++ b/packages/tailwindcss/tsconfig.json
@@ -1,3 +1,6 @@
 {
   "extends": "../tsconfig.base.json",
+  "compilerOptions": {
+    "verbatimModuleSyntax": false,
+  },
 }
diff --git a/packages/tailwindcss/vitest.config.ts b/packages/tailwindcss/vitest.config.mts
similarity index 100%
rename from packages/tailwindcss/vitest.config.ts
rename to packages/tailwindcss/vitest.config.mts
diff --git a/patches/@napi-rs__cli@3.7.4.patch b/patches/@napi-rs__cli@3.7.4.patch
new file mode 100644
index 000000000..e72212499
--- /dev/null
+++ b/patches/@napi-rs__cli@3.7.4.patch
@@ -0,0 +1,80 @@
+diff --git a/dist/cli.js b/dist/cli.js
+index c4c2d568bc070c07dbf3a1f9f4a0c946466668cf..353bbca86e3261a2ba9a8fc56dc612c7c84dab6d 100755
+--- a/dist/cli.js
++++ b/dist/cli.js
+@@ -1,4 +1,13 @@
+ #!/usr/bin/env node
++// PATCHED (see patches/@napi-rs__cli@3.7.4.patch): the embedded wasi loader
++// and worker templates below retry `new WASI(...)` with narrower preopens,
++// because preopening `/` throws `UVWASI_EACCES` on sandboxed platforms (e.g.
++// OpenHarmony), which would make the generated wasm binding fail to load.
++//
++// The same templates also exist in `dist/index.js` and `dist/index.cjs` (the
++// programmatic API). Those are intentionally NOT patched because we only
++// build through the `napi` bin, which runs this file. If we ever start using
++// the programmatic API, update the patch to cover those bundles too.
+ import { createRequire } from "node:module";
+ import { Cli, Command, Option } from "clipanion";
+ import path, { basename, dirname, isAbsolute, join, parse, resolve } from "node:path";
+@@ -1021,13 +1030,25 @@ const {
+ 
+ const __rootDir = __nodePath.parse(process.cwd()).root
+ 
+-const __wasi = new __nodeWASI({
+-  version: 'preview1',
+-  env: process.env,
+-  preopens: {
+-    [__rootDir]: __rootDir,
++const __wasi = (() => {
++  // Preopening '/' fails with UVWASI_EACCES in sandboxed environments (e.g.
++  // OpenHarmony, Android), which would prevent the wasm binding from loading
++  // at all. Retry with narrower preopens instead. Without any preopens the
++  // binding still loads; only file system access is unavailable.
++  let lastError = null
++  for (const dir of [__rootDir, process.cwd(), null]) {
++    try {
++      return new __nodeWASI({
++        version: 'preview1',
++        env: process.env,
++        preopens: dir === null ? {} : { [dir]: dir },
++      })
++    } catch (error) {
++      lastError = error
++    }
+   }
+-})
++  throw lastError
++})()
+ 
+ const __emnapiContext = __emnapiGetDefaultContext()
+ 
+@@ -1151,13 +1172,22 @@ const __rootDir = parse(process.cwd()).root;
+ 
+ const handler = new MessageHandler({
+   onLoad({ wasmModule, wasmMemory }) {
+-    const wasi = new WASI({
+-      version: 'preview1',
+-      env: process.env,
+-      preopens: {
+-        [__rootDir]: __rootDir,
+-      },
+-    });
++    // Keep in sync with the preopen fallback in the main-thread loader.
++    const wasi = (() => {
++      let lastError = null;
++      for (const dir of [__rootDir, process.cwd(), null]) {
++        try {
++          return new WASI({
++            version: 'preview1',
++            env: process.env,
++            preopens: dir === null ? {} : { [dir]: dir },
++          });
++        } catch (error) {
++          lastError = error;
++        }
++      }
++      throw lastError;
++    })();
+ 
+     return instantiateNapiModuleSync(wasmModule, {
+       childThread: true,
diff --git a/patches/@parcel__watcher@2.5.1.patch b/patches/@parcel__watcher@2.6.0.patch
similarity index 79%
rename from patches/@parcel__watcher@2.5.1.patch
rename to patches/@parcel__watcher@2.6.0.patch
index 9060d212c..37ff83f04 100644
--- a/patches/@parcel__watcher@2.5.1.patch
+++ b/patches/@parcel__watcher@2.6.0.patch
@@ -1,13 +1,14 @@
 diff --git a/index.js b/index.js
-index 8afb2b1126dcc687b7ff9b631589da252c1f9c22..f28fd092644ccfb8aff2618b966cb5219a181a02 100644
+index 78ee744d74900c39a839cafa46b295258fc86307..f28fd092644ccfb8aff2618b966cb5219a181a02 100644
 --- a/index.js
 +++ b/index.js
-@@ -1,40 +1,32 @@
+@@ -1,43 +1,32 @@
  const {createWrapper} = require('./wrapper');
  
 -let name = `@parcel/watcher-${process.platform}-${process.arch}`;
 -if (process.platform === 'linux') {
--  const { MUSL, family } = require('detect-libc');
+-  const {MUSL, familySync} = require('detect-libc');
+-  const family = familySync();
 -  if (family === MUSL) {
 -    name += '-musl';
 -  } else {
@@ -39,7 +40,9 @@ index 8afb2b1126dcc687b7ff9b631589da252c1f9c22..f28fd092644ccfb8aff2618b966cb521
 -      binding = require('./build/Debug/watcher.node');
 -    } catch (err) {
 -      handleError(err);
--      throw new Error(`No prebuild or local build of @parcel/watcher found. Tried ${name}. Please ensure it is installed (don't use --no-optional when installing with npm). Otherwise it is possible we don't support your platform yet. If this is the case, please report an issue to https://github.com/parcel-bundler/watcher.`);
+-      throw new Error(
+-        `No prebuild or local build of @parcel/watcher found. Tried ${name}. Please ensure it is installed (don't use --no-optional when installing with npm). Otherwise it is possible we don't support your platform yet. If this is the case, please report an issue to https://github.com/parcel-bundler/watcher.`,
+-      );
 -    }
 -  }
 -}
diff --git a/patches/lightningcss@1.32.0.patch b/patches/lightningcss@1.33.0.patch
similarity index 100%
rename from patches/lightningcss@1.32.0.patch
rename to patches/lightningcss@1.33.0.patch
diff --git a/playgrounds/nextjs/app/page.module.css b/playgrounds/nextjs/app/page.module.css
index 4c5bdd253..b0117f44c 100644
--- a/playgrounds/nextjs/app/page.module.css
+++ b/playgrounds/nextjs/app/page.module.css
@@ -1,5 +1,5 @@
 @reference "./globals.css";
 
 .heading {
-  @apply skew-7;
+  @apply text-red-500;
 }
diff --git a/playgrounds/nextjs/package.json b/playgrounds/nextjs/package.json
index 4e56fd309..5487af5a5 100644
--- a/playgrounds/nextjs/package.json
+++ b/playgrounds/nextjs/package.json
@@ -5,23 +5,20 @@
   "scripts": {
     "dev": "next dev",
     "build": "next build",
-    "start": "next start",
-    "lint": "next lint"
+    "start": "next start"
   },
   "dependencies": {
     "@tailwindcss/postcss": "workspace:^",
     "fast-glob": "^3.3.3",
-    "next": "^16.1.6",
-    "react": "^19.2.4",
-    "react-dom": "^19.2.4",
+    "next": "16.2.7",
+    "react": "19.2.7",
+    "react-dom": "19.2.7",
     "tailwindcss": "workspace:^"
   },
   "devDependencies": {
     "@types/node": "catalog:",
-    "@types/react": "^19.2.14",
-    "@types/react-dom": "^19.2.3",
-    "eslint": "^9.39.2",
-    "eslint-config-next": "^16.1.6",
-    "typescript": "^5.9.3"
+    "@types/react": "19.2.15",
+    "@types/react-dom": "19.2.3",
+    "typescript": "^6.0.3"
   }
 }
diff --git a/playgrounds/nextjs/tsconfig.json b/playgrounds/nextjs/tsconfig.json
index 862143548..27414aae7 100644
--- a/playgrounds/nextjs/tsconfig.json
+++ b/playgrounds/nextjs/tsconfig.json
@@ -10,7 +10,7 @@
     "moduleResolution": "bundler",
     "resolveJsonModule": true,
     "isolatedModules": true,
-    "jsx": "preserve",
+    "jsx": "react-jsx",
     "incremental": true,
     "plugins": [
       {
@@ -20,7 +20,14 @@
     "paths": {
       "@/*": ["./*"],
     },
+    "target": "ES2017",
   },
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+  "include": [
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx",
+    ".next/types/**/*.ts",
+    ".next/dev/types/**/*.ts",
+  ],
   "exclude": ["node_modules"],
 }
diff --git a/playgrounds/v3/package.json b/playgrounds/v3/package.json
index 15449f640..8c08310db 100644
--- a/playgrounds/v3/package.json
+++ b/playgrounds/v3/package.json
@@ -9,18 +9,16 @@
     "upgrade": "node scripts/upgrade.mjs"
   },
   "dependencies": {
-    "next": "^16.1.6",
-    "react": "^19.2.4",
-    "react-dom": "^19.2.4",
+    "next": "16.2.7",
+    "react": "19.2.7",
+    "react-dom": "19.2.7",
     "tailwindcss": "^3"
   },
   "devDependencies": {
     "@types/node": "catalog:",
-    "@types/react": "^19.2.14",
-    "@types/react-dom": "^19.2.3",
-    "autoprefixer": "^10.4.24",
-    "eslint": "^9.39.2",
-    "eslint-config-next": "^16.1.6",
-    "typescript": "^5.9.3"
+    "@types/react": "19.2.15",
+    "@types/react-dom": "19.2.3",
+    "autoprefixer": "^10.5.0",
+    "typescript": "^6.0.3"
   }
 }
diff --git a/playgrounds/v3/tsconfig.json b/playgrounds/v3/tsconfig.json
index 862143548..27414aae7 100644
--- a/playgrounds/v3/tsconfig.json
+++ b/playgrounds/v3/tsconfig.json
@@ -10,7 +10,7 @@
     "moduleResolution": "bundler",
     "resolveJsonModule": true,
     "isolatedModules": true,
-    "jsx": "preserve",
+    "jsx": "react-jsx",
     "incremental": true,
     "plugins": [
       {
@@ -20,7 +20,14 @@
     "paths": {
       "@/*": ["./*"],
     },
+    "target": "ES2017",
   },
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+  "include": [
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx",
+    ".next/types/**/*.ts",
+    ".next/dev/types/**/*.ts",
+  ],
   "exclude": ["node_modules"],
 }
diff --git a/playgrounds/vite/package.json b/playgrounds/vite/package.json
index 1a7c0b745..25ab1a33b 100644
--- a/playgrounds/vite/package.json
+++ b/playgrounds/vite/package.json
@@ -10,15 +10,15 @@
   },
   "dependencies": {
     "@tailwindcss/vite": "workspace:^",
-    "@vitejs/plugin-react": "^5.1.3",
-    "react": "^19.2.4",
-    "react-dom": "^19.2.4",
+    "@vitejs/plugin-react": "^6.0.2",
+    "react": "^19.2.6",
+    "react-dom": "^19.2.6",
     "tailwindcss": "workspace:^"
   },
   "devDependencies": {
-    "@types/react": "^19.2.14",
+    "@types/react": "^19.2.15",
     "@types/react-dom": "^19.2.3",
-    "bun": "^1.3.9",
+    "bun": "^1.3.14",
     "vite": "catalog:"
   }
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index ef88e3b9d..8382b2ba5 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -6,90 +6,136 @@ settings:
 
 catalogs:
   default:
+    '@parcel/watcher':
+      specifier: 2.6.0
+      version: 2.6.0
+    '@parcel/watcher-darwin-arm64':
+      specifier: 2.6.0
+      version: 2.6.0
+    '@parcel/watcher-darwin-x64':
+      specifier: 2.6.0
+      version: 2.6.0
+    '@parcel/watcher-linux-arm64-glibc':
+      specifier: 2.6.0
+      version: 2.6.0
+    '@parcel/watcher-linux-arm64-musl':
+      specifier: 2.6.0
+      version: 2.6.0
+    '@parcel/watcher-linux-x64-glibc':
+      specifier: 2.6.0
+      version: 2.6.0
+    '@parcel/watcher-linux-x64-musl':
+      specifier: 2.6.0
+      version: 2.6.0
+    '@parcel/watcher-win32-x64':
+      specifier: 2.6.0
+      version: 2.6.0
     '@types/node':
-      specifier: ^20.19.0
-      version: 20.19.1
+      specifier: 22.20.1
+      version: 22.20.1
+    dedent:
+      specifier: 1.7.2
+      version: 1.7.2
+    enhanced-resolve:
+      specifier: ^5.24.5
+      version: 5.24.5
     lightningcss:
-      specifier: 1.32.0
-      version: 1.32.0
+      specifier: 1.33.0
+      version: 1.33.0
     lightningcss-darwin-arm64:
-      specifier: 1.32.0
-      version: 1.32.0
+      specifier: 1.33.0
+      version: 1.33.0
     lightningcss-darwin-x64:
-      specifier: 1.32.0
-      version: 1.32.0
+      specifier: 1.33.0
+      version: 1.33.0
     lightningcss-linux-arm64-gnu:
-      specifier: 1.32.0
-      version: 1.32.0
+      specifier: 1.33.0
+      version: 1.33.0
     lightningcss-linux-arm64-musl:
-      specifier: 1.32.0
-      version: 1.32.0
+      specifier: 1.33.0
+      version: 1.33.0
     lightningcss-linux-x64-gnu:
-      specifier: 1.32.0
-      version: 1.32.0
+      specifier: 1.33.0
+      version: 1.33.0
     lightningcss-linux-x64-musl:
-      specifier: 1.32.0
-      version: 1.32.0
+      specifier: 1.33.0
+      version: 1.33.0
     lightningcss-win32-x64-msvc:
-      specifier: 1.32.0
-      version: 1.32.0
+      specifier: 1.33.0
+      version: 1.33.0
+    postcss:
+      specifier: ^8.5.25
+      version: 8.5.25
     prettier:
-      specifier: 3.8.1
-      version: 3.8.1
+      specifier: 3.9.6
+      version: 3.9.6
     vite:
-      specifier: ^8.0.0
-      version: 8.0.0
+      specifier: ^8.2.0
+      version: 8.2.0
     webpack:
-      specifier: ^5
-      version: 5.104.1
+      specifier: ^5.109.2
+      version: 5.109.2
 
 patchedDependencies:
-  '@parcel/watcher@2.5.1':
-    hash: p6xahr7zs4c5qsorj3exeppxhm
-    path: patches/@parcel__watcher@2.5.1.patch
-  lightningcss@1.32.0:
-    hash: mz3chiqe2jbihxa25xumd4ogum
-    path: patches/lightningcss@1.32.0.patch
+  '@napi-rs/cli@3.7.4': 9912bf0a9c2cef8329d11c41fbce4d33ce2bdcf660a630b258c962c0a3c44bed
+  '@parcel/watcher@2.6.0': 705ce75ccea54337110c4d7fe0a8b421658ea0c23e1a77c1fa890a86041179da
+  lightningcss@1.33.0: 1d4a8800d60d13d42887b88b3a86576df4b451670308145fb432ec8abbf40930
 
 importers:
 
   .:
     devDependencies:
       '@playwright/test':
-        specifier: ^1.58.0
-        version: 1.58.0
+        specifier: ^1.62.1
+        version: 1.62.1
       '@types/node':
         specifier: 'catalog:'
-        version: 20.19.1
+        version: 22.20.1
       postcss:
-        specifier: 8.5.6
-        version: 8.5.6
+        specifier: 'catalog:'
+        version: 8.5.25
       postcss-import:
         specifier: ^16.1.1
-        version: 16.1.1(postcss@8.5.6)
+        version: 16.1.1(postcss@8.5.25)
       prettier:
         specifier: 'catalog:'
-        version: 3.8.1
+        version: 3.9.6
       prettier-plugin-embed:
         specifier: ^0.5.1
         version: 0.5.1
       prettier-plugin-organize-imports:
         specifier: ^4.3.0
-        version: 4.3.0(prettier@3.8.1)(typescript@5.5.4)
+        version: 4.3.0(prettier@3.9.6)(typescript@5.9.3)
       tsup:
         specifier: ^8.5.1
-        version: 8.5.1(jiti@2.6.1)(postcss@8.5.6)(tsx@4.19.1)(typescript@5.5.4)(yaml@2.6.0)
+        version: 8.5.1(jiti@2.7.0)(postcss@8.5.25)(typescript@5.9.3)(yaml@2.9.0)
       turbo:
-        specifier: ^2.7.6
-        version: 2.7.6
+        specifier: ^2.10.8
+        version: 2.10.8
       typescript:
-        specifier: ^5.5.4
-        version: 5.5.4
+        specifier: ^5.9.3
+        version: 5.9.3
       vitest:
-        specifier: ^4.0.18
-        version: 4.0.18(@types/node@20.19.1)(jiti@2.6.1)(lightningcss@1.32.0(patch_hash=mz3chiqe2jbihxa25xumd4ogum))(terser@5.31.6)(tsx@4.19.1)(yaml@2.6.0)
+        specifier: ^4.1.10
+        version: 4.1.10(@types/node@22.20.1)(vite@8.2.0(@types/node@22.20.1)(esbuild@0.27.7)(jiti@2.7.0)(terser@5.48.0)(yaml@2.9.0))
 
   crates/node:
+    devDependencies:
+      '@emnapi/core':
+        specifier: 1.11.3
+        version: 1.11.3
+      '@emnapi/runtime':
+        specifier: 1.11.3
+        version: 1.11.3
+      '@napi-rs/cli':
+        specifier: 3.7.4
+        version: 3.7.4(patch_hash=9912bf0a9c2cef8329d11c41fbce4d33ce2bdcf660a630b258c962c0a3c44bed)(@emnapi/core@1.11.3)(@emnapi/runtime@1.11.3)(@types/node@25.9.1)(node-addon-api@8.7.0)
+      '@napi-rs/wasm-runtime':
+        specifier: ^1.2.2
+        version: 1.2.2(@emnapi/core@1.11.3)(@emnapi/runtime@1.11.3)
+      emnapi:
+        specifier: 1.11.3
+        version: 1.11.3(node-addon-api@8.7.0)
     optionalDependencies:
       '@tailwindcss/oxide-android-arm64':
         specifier: workspace:*
@@ -127,16 +173,6 @@ importers:
       '@tailwindcss/oxide-win32-x64-msvc':
         specifier: workspace:*
         version: link:npm/win32-x64-msvc
-    devDependencies:
-      '@napi-rs/cli':
-        specifier: 3.4.1
-        version: 3.4.1(@emnapi/runtime@1.8.1)(@types/node@20.19.1)(node-addon-api@8.3.0)
-      '@napi-rs/wasm-runtime':
-        specifier: ^1.1.1
-        version: 1.1.1
-      emnapi:
-        specifier: 1.8.1
-        version: 1.8.1(node-addon-api@8.3.0)
 
   crates/node/npm/android-arm-eabi: {}
 
@@ -161,20 +197,20 @@ importers:
   crates/node/npm/wasm32-wasi:
     dependencies:
       '@emnapi/core':
-        specifier: ^1.8.1
-        version: 1.8.1
+        specifier: ^1.11.3
+        version: 1.11.3
       '@emnapi/runtime':
-        specifier: ^1.8.1
-        version: 1.8.1
+        specifier: ^1.11.3
+        version: 1.11.3
       '@emnapi/wasi-threads':
-        specifier: ^1.1.0
-        version: 1.1.0
+        specifier: ^1.2.3
+        version: 1.2.3
       '@napi-rs/wasm-runtime':
-        specifier: ^1.1.1
-        version: 1.1.1
+        specifier: ^1.2.2
+        version: 1.2.2(@emnapi/core@1.11.3)(@emnapi/runtime@1.11.3)
       '@tybys/wasm-util':
-        specifier: ^0.10.1
-        version: 0.10.1
+        specifier: ^0.10.3
+        version: 0.10.3
       tslib:
         specifier: ^2.8.1
         version: 2.8.1
@@ -186,23 +222,26 @@ importers:
   integrations:
     devDependencies:
       dedent:
-        specifier: 1.7.1
-        version: 1.7.1
+        specifier: 'catalog:'
+        version: 1.7.2
       fast-glob:
         specifier: ^3.3.3
         version: 3.3.3
       source-map-js:
         specifier: ^1.2.1
         version: 1.2.1
+      yaml:
+        specifier: ^2.9.0
+        version: 2.9.0
 
   packages/@tailwindcss-browser:
     devDependencies:
       h3:
-        specifier: ^1.15.5
-        version: 1.15.5
+        specifier: ^1.15.11
+        version: 1.15.11
       listhen:
-        specifier: ^1.9.0
-        version: 1.9.0
+        specifier: ^1.10.1
+        version: 1.10.1(@parcel/watcher@2.6.0(patch_hash=705ce75ccea54337110c4d7fe0a8b421658ea0c23e1a77c1fa890a86041179da))
       tailwindcss:
         specifier: workspace:*
         version: link:../tailwindcss
@@ -210,8 +249,8 @@ importers:
   packages/@tailwindcss-cli:
     dependencies:
       '@parcel/watcher':
-        specifier: ^2.5.1
-        version: 2.5.1(patch_hash=p6xahr7zs4c5qsorj3exeppxhm)
+        specifier: 'catalog:'
+        version: 2.6.0(patch_hash=705ce75ccea54337110c4d7fe0a8b421658ea0c23e1a77c1fa890a86041179da)
       '@tailwindcss/node':
         specifier: workspace:*
         version: link:../@tailwindcss-node
@@ -219,8 +258,8 @@ importers:
         specifier: workspace:*
         version: link:../../crates/node
       enhanced-resolve:
-        specifier: ^5.19.0
-        version: 5.19.0
+        specifier: 'catalog:'
+        version: 5.24.5
       mri:
         specifier: ^1.2.0
         version: 1.2.0
@@ -237,17 +276,17 @@ importers:
         specifier: ^2.3.5
         version: 2.3.5
       enhanced-resolve:
-        specifier: ^5.19.0
-        version: 5.19.0
+        specifier: 'catalog:'
+        version: 5.24.5
       jiti:
-        specifier: ^2.6.1
-        version: 2.6.1
+        specifier: ^2.7.0
+        version: 2.7.0
       lightningcss:
         specifier: 'catalog:'
-        version: 1.32.0(patch_hash=mz3chiqe2jbihxa25xumd4ogum)
+        version: 1.33.0(patch_hash=1d4a8800d60d13d42887b88b3a86576df4b451670308145fb432ec8abbf40930)
       magic-string:
-        specifier: ^0.30.21
-        version: 0.30.21
+        specifier: ^1.1.0
+        version: 1.1.0
       source-map-js:
         specifier: ^1.2.1
         version: 1.2.1
@@ -267,27 +306,27 @@ importers:
         specifier: workspace:*
         version: link:../../crates/node
       postcss:
-        specifier: ^8.5.6
-        version: 8.5.6
+        specifier: 'catalog:'
+        version: 8.5.25
       tailwindcss:
         specifier: workspace:*
         version: link:../tailwindcss
     devDependencies:
       '@types/node':
         specifier: 'catalog:'
-        version: 20.19.1
+        version: 22.20.1
       '@types/postcss-import':
         specifier: 14.0.3
         version: 14.0.3
       dedent:
-        specifier: 1.7.1
-        version: 1.7.1
+        specifier: 'catalog:'
+        version: 1.7.2
       internal-example-plugin:
         specifier: workspace:*
         version: link:../internal-example-plugin
       postcss-import:
         specifier: ^16.1.1
-        version: 16.1.1(postcss@8.5.6)
+        version: 16.1.1(postcss@8.5.25)
 
   packages/@tailwindcss-standalone:
     dependencies:
@@ -301,148 +340,68 @@ importers:
         specifier: ^0.5.11
         version: 0.5.11(tailwindcss@packages+tailwindcss)
       '@tailwindcss/typography':
-        specifier: ^0.5.19
-        version: 0.5.19(tailwindcss@packages+tailwindcss)
+        specifier: ^0.5.20
+        version: 0.5.20(tailwindcss@packages+tailwindcss)
       detect-libc:
         specifier: 1.0.3
         version: 1.0.3
       enhanced-resolve:
-        specifier: ^5.19.0
-        version: 5.19.0
+        specifier: 'catalog:'
+        version: 5.24.5
       tailwindcss:
         specifier: workspace:*
         version: link:../tailwindcss
     devDependencies:
       '@parcel/watcher-darwin-arm64':
-        specifier: ^2.5.6
-        version: 2.5.6
+        specifier: 'catalog:'
+        version: 2.6.0
       '@parcel/watcher-darwin-x64':
-        specifier: ^2.5.6
-        version: 2.5.6
+        specifier: 'catalog:'
+        version: 2.6.0
       '@parcel/watcher-linux-arm64-glibc':
-        specifier: ^2.5.6
-        version: 2.5.6
+        specifier: 'catalog:'
+        version: 2.6.0
       '@parcel/watcher-linux-arm64-musl':
-        specifier: ^2.5.6
-        version: 2.5.6
+        specifier: 'catalog:'
+        version: 2.6.0
       '@parcel/watcher-linux-x64-glibc':
-        specifier: ^2.5.6
-        version: 2.5.6
+        specifier: 'catalog:'
+        version: 2.6.0
       '@parcel/watcher-linux-x64-musl':
-        specifier: ^2.5.6
-        version: 2.5.6
+        specifier: 'catalog:'
+        version: 2.6.0
       '@parcel/watcher-win32-x64':
-        specifier: ^2.5.6
-        version: 2.5.6
+        specifier: 'catalog:'
+        version: 2.6.0
       '@types/bun':
-        specifier: ^1.3.9
-        version: 1.3.9
+        specifier: ^1.3.14
+        version: 1.3.14
       bun:
-        specifier: ^1.3.9
-        version: 1.3.9
+        specifier: ^1.3.14
+        version: 1.3.14
       lightningcss-darwin-arm64:
         specifier: 'catalog:'
-        version: 1.32.0
+        version: 1.33.0
       lightningcss-darwin-x64:
         specifier: 'catalog:'
-        version: 1.32.0
+        version: 1.33.0
       lightningcss-linux-arm64-gnu:
         specifier: 'catalog:'
-        version: 1.32.0
+        version: 1.33.0
       lightningcss-linux-arm64-musl:
         specifier: 'catalog:'
-        version: 1.32.0
+        version: 1.33.0
       lightningcss-linux-x64-gnu:
         specifier: 'catalog:'
-        version: 1.32.0
+        version: 1.33.0
       lightningcss-linux-x64-musl:
         specifier: 'catalog:'
-        version: 1.32.0
+        version: 1.33.0
       lightningcss-win32-x64-msvc:
         specifier: 'catalog:'
-        version: 1.32.0
+        version: 1.33.0
 
-  packages/@tailwindcss-upgrade:
-    dependencies:
-      '@tailwindcss/node':
-        specifier: workspace:*
-        version: link:../@tailwindcss-node
-      '@tailwindcss/oxide':
-        specifier: workspace:*
-        version: link:../../crates/node
-      dedent:
-        specifier: 1.7.1
-        version: 1.7.1
-      enhanced-resolve:
-        specifier: ^5.19.0
-        version: 5.19.0
-      globby:
-        specifier: ^15.0.0
-        version: 15.0.0
-      jiti:
-        specifier: ^2.0.0-beta.3
-        version: 2.6.1
-      mri:
-        specifier: ^1.2.0
-        version: 1.2.0
-      picocolors:
-        specifier: ^1.1.1
-        version: 1.1.1
-      postcss:
-        specifier: ^8.5.6
-        version: 8.5.6
-      postcss-import:
-        specifier: ^16.1.1
-        version: 16.1.1(postcss@8.5.6)
-      postcss-selector-parser:
-        specifier: ^7.1.1
-        version: 7.1.1
-      prettier:
-        specifier: 'catalog:'
-        version: 3.8.1
-      semver:
-        specifier: ^7.7.4
-        version: 7.7.4
-      tailwindcss:
-        specifier: workspace:*
-        version: link:../tailwindcss
-      tree-sitter:
-        specifier: ^0.22.4
-        version: 0.22.4
-      tree-sitter-typescript:
-        specifier: ^0.23.2
-        version: 0.23.2(tree-sitter@0.22.4)
-    devDependencies:
-      '@types/node':
-        specifier: 'catalog:'
-        version: 20.19.1
-      '@types/postcss-import':
-        specifier: ^14.0.3
-        version: 14.0.3
-      '@types/semver':
-        specifier: ^7.7.1
-        version: 7.7.1
-
-  packages/@tailwindcss-vite:
-    dependencies:
-      '@tailwindcss/node':
-        specifier: workspace:*
-        version: link:../@tailwindcss-node
-      '@tailwindcss/oxide':
-        specifier: workspace:*
-        version: link:../../crates/node
-      tailwindcss:
-        specifier: workspace:*
-        version: link:../tailwindcss
-    devDependencies:
-      '@types/node':
-        specifier: 'catalog:'
-        version: 20.19.1
-      vite:
-        specifier: 'catalog:'
-        version: 8.0.0(@types/node@20.19.1)(esbuild@0.27.0)(jiti@2.6.1)(terser@5.31.6)(tsx@4.19.1)(yaml@2.6.0)
-
-  packages/@tailwindcss-webpack:
+  packages/@tailwindcss-turbopack:
     dependencies:
       '@alloc/quick-lru':
         specifier: ^5.2.0
@@ -459,10 +418,115 @@ importers:
     devDependencies:
       '@types/node':
         specifier: 'catalog:'
-        version: 20.19.1
+        version: 22.20.1
       webpack:
         specifier: 'catalog:'
-        version: 5.104.1(esbuild@0.27.0)
+        version: 5.109.2(esbuild@0.27.7)(postcss@8.5.25)
+
+  packages/@tailwindcss-upgrade:
+    dependencies:
+      '@tailwindcss/node':
+        specifier: workspace:*
+        version: link:../@tailwindcss-node
+      '@tailwindcss/oxide':
+        specifier: workspace:*
+        version: link:../../crates/node
+      dedent:
+        specifier: 'catalog:'
+        version: 1.7.2
+      enhanced-resolve:
+        specifier: 'catalog:'
+        version: 5.24.5
+      globby:
+        specifier: ^16.2.2
+        version: 16.2.2
+      jiti:
+        specifier: ^2.7.0
+        version: 2.7.0
+      mri:
+        specifier: ^1.2.0
+        version: 1.2.0
+      picocolors:
+        specifier: ^1.1.1
+        version: 1.1.1
+      postcss:
+        specifier: 'catalog:'
+        version: 8.5.25
+      postcss-import:
+        specifier: ^16.1.1
+        version: 16.1.1(postcss@8.5.25)
+      postcss-selector-parser:
+        specifier: ^7.1.4
+        version: 7.1.4
+      prettier:
+        specifier: 'catalog:'
+        version: 3.9.6
+      semver:
+        specifier: ^7.8.5
+        version: 7.8.5
+      tailwindcss:
+        specifier: workspace:*
+        version: link:../tailwindcss
+      tree-sitter:
+        specifier: ^0.25.1
+        version: 0.25.1
+      tree-sitter-typescript:
+        specifier: ^0.23.2
+        version: 0.23.2(tree-sitter@0.25.1)
+    devDependencies:
+      '@types/node':
+        specifier: 'catalog:'
+        version: 22.20.1
+      '@types/postcss-import':
+        specifier: ^14.0.3
+        version: 14.0.3
+      '@types/semver':
+        specifier: ^7.8.0
+        version: 7.8.0
+
+  packages/@tailwindcss-vite:
+    dependencies:
+      '@tailwindcss/node':
+        specifier: workspace:*
+        version: link:../@tailwindcss-node
+      '@tailwindcss/oxide':
+        specifier: workspace:*
+        version: link:../../crates/node
+      tailwindcss:
+        specifier: workspace:*
+        version: link:../tailwindcss
+    devDependencies:
+      '@types/node':
+        specifier: 'catalog:'
+        version: 22.20.1
+      vite:
+        specifier: 'catalog:'
+        version: 8.2.0(@types/node@22.20.1)(esbuild@0.27.7)(jiti@2.7.0)(terser@5.48.0)(yaml@2.9.0)
+
+  packages/@tailwindcss-webpack:
+    dependencies:
+      '@alloc/quick-lru':
+        specifier: ^5.2.0
+        version: 5.2.0
+      '@rspack/core':
+        specifier: ^1.0.0 || ^2.0.0
+        version: 2.0.2(@swc/helpers@0.5.15)
+      '@tailwindcss/node':
+        specifier: workspace:*
+        version: link:../@tailwindcss-node
+      '@tailwindcss/oxide':
+        specifier: workspace:*
+        version: link:../../crates/node
+      tailwindcss:
+        specifier: workspace:*
+        version: link:../tailwindcss
+    devDependencies:
+      '@types/node':
+        specifier: 'catalog:'
+        version: 22.20.1
+      webpack:
+        specifier: 'catalog:'
+        version: 5.109.2(esbuild@0.27.7)(postcss@8.5.25)
 
   packages/internal-example-plugin: {}
 
@@ -476,16 +540,16 @@ importers:
         version: link:../../crates/node
       '@types/node':
         specifier: 'catalog:'
-        version: 20.19.1
+        version: 22.20.1
       dedent:
-        specifier: 1.7.1
-        version: 1.7.1
+        specifier: 'catalog:'
+        version: 1.7.2
       lightningcss:
         specifier: 'catalog:'
-        version: 1.32.0(patch_hash=mz3chiqe2jbihxa25xumd4ogum)
+        version: 1.33.0(patch_hash=1d4a8800d60d13d42887b88b3a86576df4b451670308145fb432ec8abbf40930)
       magic-string:
-        specifier: ^0.30.21
-        version: 0.30.21
+        specifier: ^1.1.0
+        version: 1.1.0
       source-map-js:
         specifier: ^1.2.1
         version: 1.2.1
@@ -499,73 +563,61 @@ importers:
         specifier: ^3.3.3
         version: 3.3.3
       next:
-        specifier: ^16.1.6
-        version: 16.1.6(@babel/core@7.28.5)(@playwright/test@1.58.0)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+        specifier: 16.2.7
+        version: 16.2.7(@playwright/test@1.62.1)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)
       react:
-        specifier: ^19.2.4
-        version: 19.2.4
+        specifier: 19.2.7
+        version: 19.2.7
       react-dom:
-        specifier: ^19.2.4
-        version: 19.2.4(react@19.2.4)
+        specifier: 19.2.7
+        version: 19.2.7(react@19.2.7)
       tailwindcss:
         specifier: workspace:^
         version: link:../../packages/tailwindcss
     devDependencies:
       '@types/node':
         specifier: 'catalog:'
-        version: 20.19.1
+        version: 22.20.1
       '@types/react':
-        specifier: ^19.2.14
-        version: 19.2.14
+        specifier: 19.2.15
+        version: 19.2.15
       '@types/react-dom':
-        specifier: ^19.2.3
-        version: 19.2.3(@types/react@19.2.14)
-      eslint:
-        specifier: ^9.39.2
-        version: 9.39.2(jiti@2.6.1)
-      eslint-config-next:
-        specifier: ^16.1.6
-        version: 16.1.6(@typescript-eslint/parser@8.47.0(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3))(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3)
+        specifier: 19.2.3
+        version: 19.2.3(@types/react@19.2.15)
       typescript:
-        specifier: ^5.9.3
-        version: 5.9.3
+        specifier: ^6.0.3
+        version: 6.0.3
 
   playgrounds/v3:
     dependencies:
       next:
-        specifier: ^16.1.6
-        version: 16.1.6(@babel/core@7.28.5)(@playwright/test@1.58.0)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+        specifier: 16.2.7
+        version: 16.2.7(@playwright/test@1.62.1)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)
       react:
-        specifier: ^19.2.4
-        version: 19.2.4
+        specifier: 19.2.7
+        version: 19.2.7
       react-dom:
-        specifier: ^19.2.4
-        version: 19.2.4(react@19.2.4)
+        specifier: 19.2.7
+        version: 19.2.7(react@19.2.7)
       tailwindcss:
         specifier: ^3
-        version: 3.4.14
+        version: 3.4.19(yaml@2.9.0)
     devDependencies:
       '@types/node':
         specifier: 'catalog:'
-        version: 20.19.1
+        version: 22.20.1
       '@types/react':
-        specifier: ^19.2.14
-        version: 19.2.14
+        specifier: 19.2.15
+        version: 19.2.15
       '@types/react-dom':
-        specifier: ^19.2.3
-        version: 19.2.3(@types/react@19.2.14)
+        specifier: 19.2.3
+        version: 19.2.3(@types/react@19.2.15)
       autoprefixer:
-        specifier: ^10.4.24
-        version: 10.4.24(postcss@8.5.6)
-      eslint:
-        specifier: ^9.39.2
-        version: 9.39.2(jiti@2.6.1)
-      eslint-config-next:
-        specifier: ^16.1.6
-        version: 16.1.6(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3)
+        specifier: ^10.5.0
+        version: 10.5.0(postcss@8.5.25)
       typescript:
-        specifier: ^5.9.3
-        version: 5.9.3
+        specifier: ^6.0.3
+        version: 6.0.3
 
   playgrounds/vite:
     dependencies:
@@ -573,30 +625,30 @@ importers:
         specifier: workspace:^
         version: link:../../packages/@tailwindcss-vite
       '@vitejs/plugin-react':
-        specifier: ^5.1.3
-        version: 5.1.3(vite@8.0.0(@types/node@20.19.1)(esbuild@0.27.0)(jiti@2.6.1)(terser@5.31.6)(tsx@4.19.1)(yaml@2.6.0))
+        specifier: ^6.0.2
+        version: 6.0.2(vite@8.2.0(@types/node@25.9.1)(esbuild@0.27.7)(jiti@2.7.0)(terser@5.48.0)(yaml@2.9.0))
       react:
-        specifier: ^19.2.4
-        version: 19.2.4
+        specifier: ^19.2.6
+        version: 19.2.6
       react-dom:
-        specifier: ^19.2.4
-        version: 19.2.4(react@19.2.4)
+        specifier: ^19.2.6
+        version: 19.2.6(react@19.2.6)
       tailwindcss:
         specifier: workspace:^
         version: link:../../packages/tailwindcss
     devDependencies:
       '@types/react':
-        specifier: ^19.2.14
-        version: 19.2.14
+        specifier: ^19.2.15
+        version: 19.2.15
       '@types/react-dom':
         specifier: ^19.2.3
-        version: 19.2.3(@types/react@19.2.14)
+        version: 19.2.3(@types/react@19.2.15)
       bun:
-        specifier: ^1.3.9
-        version: 1.3.9
+        specifier: ^1.3.14
+        version: 1.3.14
       vite:
         specifier: 'catalog:'
-        version: 8.0.0(@types/node@20.19.1)(esbuild@0.27.0)(jiti@2.6.1)(terser@5.31.6)(tsx@4.19.1)(yaml@2.6.0)
+        version: 8.2.0(@types/node@25.9.1)(esbuild@0.27.7)(jiti@2.7.0)(terser@5.48.0)(yaml@2.9.0)
 
 packages:
 
@@ -604,665 +656,191 @@ packages:
     resolution: {integrity: sha512-UrcABB+4bUrFABwbluTIBErXwvbsU/V7TZWfmbgJfbkwiBuziS9gxdODUyuiecfdGQ85jglMW6juS3+z5TsKLw==}
     engines: {node: '>=10'}
 
-  '@babel/code-frame@7.27.1':
-    resolution: {integrity: sha512-cjQ7ZlQ0Mv3b47hABuTevyTuYN4i+loJKGeV9flcCgIK37cCXRh+L1bd3iBHlynerhQ7BhCkn2BPbQUL+rGqFg==}
-    engines: {node: '>=6.9.0'}
+  '@emnapi/core@1.10.0':
+    resolution: {integrity: sha512-yq6OkJ4p82CAfPl0u9mQebQHKPJkY7WrIuk205cTYnYe+k2Z8YBh11FrbRG/H6ihirqcacOgl2BIO8oyMQLeXw==}
 
-  '@babel/code-frame@7.29.0':
-    resolution: {integrity: sha512-9NhCeYjq9+3uxgdtp20LSiJXJvN0FeCtNGpJxuMFZ1Kv3cWUNb6DOhJwUvcVCzKGR66cw4njwM6hrJLqgOwbcw==}
-    engines: {node: '>=6.9.0'}
+  '@emnapi/core@1.11.3':
+    resolution: {integrity: sha512-zLpS5asjEb7lq8jYLq37N6XKaE41DIexlY1rF/z4/tIl3wo13Sqm28fRyfIsKZD+NZ8mM5RoKkpW/rBcuoSZSg==}
 
-  '@babel/compat-data@7.27.5':
-    resolution: {integrity: sha512-KiRAp/VoJaWkkte84TvUd9qjdbZAdiqyvMxrGl1N6vzFogKmaLgoM3L1kgtLicp2HP5fBJS8JrZKLVIZGVJAVg==}
-    engines: {node: '>=6.9.0'}
+  '@emnapi/core@2.0.0-alpha.3':
+    resolution: {integrity: sha512-AZypUeJ/yByuxyS7BlSNRDOMLMlROYtjYdIAuBmJssVz1UJDSeYxLrdizhXCFYhedC5bqd/ASy8EuNXbVVXp9g==}
 
-  '@babel/compat-data@7.29.0':
-    resolution: {integrity: sha512-T1NCJqT/j9+cn8fvkt7jtwbLBfLC/1y1c7NtCeXFRgzGTsafi68MRv8yzkYSapBnFA6L3U2VSc02ciDzoAJhJg==}
-    engines: {node: '>=6.9.0'}
+  '@emnapi/runtime@1.10.0':
+    resolution: {integrity: sha512-ewvYlk86xUoGI0zQRNq/mC+16R1QeDlKQy21Ki3oSYXNgLb45GV1P6A0M+/s6nyCuNDqe5VpaY84BzXGwVbwFA==}
 
-  '@babel/core@7.28.5':
-    resolution: {integrity: sha512-e7jT4DxYvIDLk1ZHmU/m/mB19rex9sv0c2ftBtjSBv+kVM/902eh0fINUzD7UwLLNR+jU585GxUJ8/EBfAM5fw==}
-    engines: {node: '>=6.9.0'}
+  '@emnapi/runtime@1.11.3':
+    resolution: {integrity: sha512-Xz4Tpyki7XyrpbUK1jR1AhdAdaXyhhY4lZ3neLodmhpuWfy2PAQN5B46sAiU4liOXGLkHypn/qU+jvfWSCYYLA==}
 
-  '@babel/core@7.29.0':
-    resolution: {integrity: sha512-CGOfOJqWjg2qW/Mb6zNsDm+u5vFQ8DxXfbM09z69p5Z6+mE1ikP2jUXw+j42Pf1XTYED2Rni5f95npYeuwMDQA==}
-    engines: {node: '>=6.9.0'}
+  '@emnapi/runtime@2.0.0-alpha.3':
+    resolution: {integrity: sha512-hFPAhMUjJD9BSyCANEISPOogeXC9Zo9ZQl7L6vKnaVsMkCtzznaW/naYypeyl0Gv5rYfWYsZbpixTMpjDJzQeA==}
 
-  '@babel/generator@7.28.5':
-    resolution: {integrity: sha512-3EwLFhZ38J4VyIP6WNtt2kUdW9dokXA9Cr4IVIFHuCpZ3H8/YFOl5JjZHisrn1fATPBmKKqXzDFvh9fUwHz6CQ==}
-    engines: {node: '>=6.9.0'}
+  '@emnapi/wasi-threads@1.2.1':
+    resolution: {integrity: sha512-uTII7OYF+/Mes/MrcIOYp5yOtSMLBWSIoLPpcgwipoiKbli6k322tcoFsxoIIxPDqW01SQGAgko4EzZi2BNv2w==}
 
-  '@babel/generator@7.29.1':
-    resolution: {integrity: sha512-qsaF+9Qcm2Qv8SRIMMscAvG4O3lJ0F1GuMo5HR/Bp02LopNgnZBC/EkbevHFeGs4ls/oPz9v+Bsmzbkbe+0dUw==}
-    engines: {node: '>=6.9.0'}
+  '@emnapi/wasi-threads@1.2.3':
+    resolution: {integrity: sha512-ELEBe8PsLvvJ6QMr0zLt8ffvOHW/dc1m3CEzNMg7aJUv3bMaoDtw2TXyDAwkYBuroxxuHEwhRTLJSe5sya547g==}
 
-  '@babel/helper-compilation-targets@7.27.2':
-    resolution: {integrity: sha512-2+1thGUUWWjLTYTHZWK1n8Yga0ijBz1XAhUXcKy81rd5g6yh7hGqMp45v7cadSbEHc9G3OTv45SyneRN3ps4DQ==}
-    engines: {node: '>=6.9.0'}
+  '@emnapi/wasi-threads@2.0.1':
+    resolution: {integrity: sha512-9DsSk+o5NBX0CCJT8s0EROGSGxjR/tKu6aBTaVyq+SjAEQH4XcdcRxPBRzsBLizTTJ49MJjF+jgu3qnO9GLQcQ==}
 
-  '@babel/helper-compilation-targets@7.28.6':
-    resolution: {integrity: sha512-JYtls3hqi15fcx5GaSNL7SCTJ2MNmjrkHXg4FSpOA/grxK8KwyZ5bubHsCq8FXCkua6xhuaaBit+3b7+VZRfcA==}
-    engines: {node: '>=6.9.0'}
-
-  '@babel/helper-globals@7.28.0':
-    resolution: {integrity: sha512-+W6cISkXFa1jXsDEdYA8HeevQT/FULhxzR99pxphltZcVaugps53THCeiWA8SguxxpSp3gKPiuYfSWopkLQ4hw==}
-    engines: {node: '>=6.9.0'}
-
-  '@babel/helper-module-imports@7.27.1':
-    resolution: {integrity: sha512-0gSFWUPNXNopqtIPQvlD5WgXYI5GY2kP2cCvoT8kczjbfcfuIljTbcWrulD1CIPIX2gt1wghbDy08yE1p+/r3w==}
-    engines: {node: '>=6.9.0'}
-
-  '@babel/helper-module-imports@7.28.6':
-    resolution: {integrity: sha512-l5XkZK7r7wa9LucGw9LwZyyCUscb4x37JWTPz7swwFE/0FMQAGpiWUZn8u9DzkSBWEcK25jmvubfpw2dnAMdbw==}
-    engines: {node: '>=6.9.0'}
-
-  '@babel/helper-module-transforms@7.28.3':
-    resolution: {integrity: sha512-gytXUbs8k2sXS9PnQptz5o0QnpLL51SwASIORY6XaBKF88nsOT0Zw9szLqlSGQDP/4TljBAD5y98p2U1fqkdsw==}
-    engines: {node: '>=6.9.0'}
-    peerDependencies:
-      '@babel/core': ^7.0.0
-
-  '@babel/helper-module-transforms@7.28.6':
-    resolution: {integrity: sha512-67oXFAYr2cDLDVGLXTEABjdBJZ6drElUSI7WKp70NrpyISso3plG9SAGEF6y7zbha/wOzUByWWTJvEDVNIUGcA==}
-    engines: {node: '>=6.9.0'}
-    peerDependencies:
-      '@babel/core': ^7.0.0
-
-  '@babel/helper-plugin-utils@7.27.1':
-    resolution: {integrity: sha512-1gn1Up5YXka3YYAHGKpbideQ5Yjf1tDa9qYcgysz+cNCXukyLl6DjPXhD3VRwSb8c0J9tA4b2+rHEZtc6R0tlw==}
-    engines: {node: '>=6.9.0'}
-
-  '@babel/helper-string-parser@7.27.1':
-    resolution: {integrity: sha512-qMlSxKbpRlAridDExk92nSobyDdpPijUq2DW6oDnUqd0iOGxmQjyqhMIihI9+zv4LPyZdRje2cavWPbCbWm3eA==}
-    engines: {node: '>=6.9.0'}
-
-  '@babel/helper-validator-identifier@7.28.5':
-    resolution: {integrity: sha512-qSs4ifwzKJSV39ucNjsvc6WVHs6b7S03sOh2OcHF9UHfVPqWWALUsNUVzhSBiItjRZoLHx7nIarVjqKVusUZ1Q==}
-    engines: {node: '>=6.9.0'}
-
-  '@babel/helper-validator-option@7.27.1':
-    resolution: {integrity: sha512-YvjJow9FxbhFFKDSuFnVCe2WxXk1zWc22fFePVNEaWJEu8IrZVlda6N0uHwzZrUM1il7NC9Mlp4MaJYbYd9JSg==}
-    engines: {node: '>=6.9.0'}
-
-  '@babel/helpers@7.28.4':
-    resolution: {integrity: sha512-HFN59MmQXGHVyYadKLVumYsA9dBFun/ldYxipEjzA4196jpLZd8UjEEBLkbEkvfYreDqJhZxYAWFPtrfhNpj4w==}
-    engines: {node: '>=6.9.0'}
-
-  '@babel/helpers@7.28.6':
-    resolution: {integrity: sha512-xOBvwq86HHdB7WUDTfKfT/Vuxh7gElQ+Sfti2Cy6yIWNW05P8iUslOVcZ4/sKbE+/jQaukQAdz/gf3724kYdqw==}
-    engines: {node: '>=6.9.0'}
-
-  '@babel/parser@7.28.5':
-    resolution: {integrity: sha512-KKBU1VGYR7ORr3At5HAtUQ+TV3SzRCXmA/8OdDZiLDBIZxVyzXuztPjfLd3BV1PRAQGCMWWSHYhL0F8d5uHBDQ==}
-    engines: {node: '>=6.0.0'}
-    hasBin: true
-
-  '@babel/parser@7.29.0':
-    resolution: {integrity: sha512-IyDgFV5GeDUVX4YdF/3CPULtVGSXXMLh1xVIgdCgxApktqnQV0r7/8Nqthg+8YLGaAtdyIlo2qIdZrbCv4+7ww==}
-    engines: {node: '>=6.0.0'}
-    hasBin: true
-
-  '@babel/plugin-transform-react-jsx-self@7.27.1':
-    resolution: {integrity: sha512-6UzkCs+ejGdZ5mFFC/OCUrv028ab2fp1znZmCZjAOBKiBK2jXD1O+BPSfX8X2qjJ75fZBMSnQn3Rq2mrBJK2mw==}
-    engines: {node: '>=6.9.0'}
-    peerDependencies:
-      '@babel/core': ^7.0.0-0
-
-  '@babel/plugin-transform-react-jsx-source@7.27.1':
-    resolution: {integrity: sha512-zbwoTsBruTeKB9hSq73ha66iFeJHuaFkUbwvqElnygoNbj/jHRsSeokowZFN3CZ64IvEqcmmkVe89OPXc7ldAw==}
-    engines: {node: '>=6.9.0'}
-    peerDependencies:
-      '@babel/core': ^7.0.0-0
-
-  '@babel/template@7.27.2':
-    resolution: {integrity: sha512-LPDZ85aEJyYSd18/DkjNh4/y1ntkE5KwUHWTiqgRxruuZL2F1yuHligVHLvcHY2vMHXttKFpJn6LwfI7cw7ODw==}
-    engines: {node: '>=6.9.0'}
-
-  '@babel/template@7.28.6':
-    resolution: {integrity: sha512-YA6Ma2KsCdGb+WC6UpBVFJGXL58MDA6oyONbjyF/+5sBgxY/dwkhLogbMT2GXXyU84/IhRw/2D1Os1B/giz+BQ==}
-    engines: {node: '>=6.9.0'}
-
-  '@babel/traverse@7.28.5':
-    resolution: {integrity: sha512-TCCj4t55U90khlYkVV/0TfkJkAkUg3jZFA3Neb7unZT8CPok7iiRfaX0F+WnqWqt7OxhOn0uBKXCw4lbL8W0aQ==}
-    engines: {node: '>=6.9.0'}
-
-  '@babel/traverse@7.29.0':
-    resolution: {integrity: sha512-4HPiQr0X7+waHfyXPZpWPfWL/J7dcN1mx9gL6WdQVMbPnF3+ZhSMs8tCxN7oHddJE9fhNE7+lxdnlyemKfJRuA==}
-    engines: {node: '>=6.9.0'}
-
-  '@babel/types@7.28.5':
-    resolution: {integrity: sha512-qQ5m48eI/MFLQ5PxQj4PFaprjyCTLI37ElWMmNs0K8Lk3dVeOdNpB3ks8jc7yM5CDmVC73eMVk/trk3fgmrUpA==}
-    engines: {node: '>=6.9.0'}
-
-  '@babel/types@7.29.0':
-    resolution: {integrity: sha512-LwdZHpScM4Qz8Xw2iKSzS+cfglZzJGvofQICy7W7v4caru4EaAmyUuO6BGrbyQ2mYV11W0U8j5mBhd14dd3B0A==}
-    engines: {node: '>=6.9.0'}
-
-  '@emnapi/core@1.7.1':
-    resolution: {integrity: sha512-o1uhUASyo921r2XtHYOHy7gdkGLge8ghBEQHMWmyJFoXlpU58kIrhhN3w26lpQb6dspetweapMn2CSNwQ8I4wg==}
-
-  '@emnapi/core@1.8.1':
-    resolution: {integrity: sha512-AvT9QFpxK0Zd8J0jopedNm+w/2fIzvtPKPjqyw9jwvBaReTTqPBk9Hixaz7KbjimP+QNz605/XnjFcDAL2pqBg==}
-
-  '@emnapi/runtime@1.7.1':
-    resolution: {integrity: sha512-PVtJr5CmLwYAU9PZDMITZoR5iAOShYREoR45EyyLrbntV50mdePTgUn4AmOw90Ifcj+x2kRjdzr1HP3RrNiHGA==}
-
-  '@emnapi/runtime@1.8.1':
-    resolution: {integrity: sha512-mehfKSMWjjNol8659Z8KxEMrdSJDDot5SXMq00dM8BN4o+CLNXQ0xH2V7EchNHV4RmbZLmmPdEaXZc5H2FXmDg==}
-
-  '@emnapi/wasi-threads@1.1.0':
-    resolution: {integrity: sha512-WI0DdZ8xFSbgMjR1sFsKABJ/C5OnRrjT06JXbZKexJGrDuPTzZdDYfFlsgcCXCyf+suG5QU2e/y1Wo2V/OapLQ==}
-
-  '@esbuild/aix-ppc64@0.23.1':
-    resolution: {integrity: sha512-6VhYk1diRqrhBAqpJEdjASR/+WVRtfjpqKuNw11cLiaWpAT/Uu+nokB+UJnevzy/P9C/ty6AOe0dwueMrGh/iQ==}
+  '@esbuild/aix-ppc64@0.27.7':
+    resolution: {integrity: sha512-EKX3Qwmhz1eMdEJokhALr0YiD0lhQNwDqkPYyPhiSwKrh7/4KRjQc04sZ8db+5DVVnZ1LmbNDI1uAMPEUBnQPg==}
     engines: {node: '>=18'}
     cpu: [ppc64]
     os: [aix]
 
-  '@esbuild/aix-ppc64@0.25.0':
-    resolution: {integrity: sha512-O7vun9Sf8DFjH2UtqK8Ku3LkquL9SZL8OLY1T5NZkA34+wG3OQF7cl4Ql8vdNzM6fzBbYfLaiRLIOZ+2FOCgBQ==}
-    engines: {node: '>=18'}
-    cpu: [ppc64]
-    os: [aix]
-
-  '@esbuild/aix-ppc64@0.27.0':
-    resolution: {integrity: sha512-KuZrd2hRjz01y5JK9mEBSD3Vj3mbCvemhT466rSuJYeE/hjuBrHfjjcjMdTm/sz7au+++sdbJZJmuBwQLuw68A==}
-    engines: {node: '>=18'}
-    cpu: [ppc64]
-    os: [aix]
-
-  '@esbuild/android-arm64@0.23.1':
-    resolution: {integrity: sha512-xw50ipykXcLstLeWH7WRdQuysJqejuAGPd30vd1i5zSyKK3WE+ijzHmLKxdiCMtH1pHz78rOg0BKSYOSB/2Khw==}
+  '@esbuild/android-arm64@0.27.7':
+    resolution: {integrity: sha512-62dPZHpIXzvChfvfLJow3q5dDtiNMkwiRzPylSCfriLvZeq0a1bWChrGx/BbUbPwOrsWKMn8idSllklzBy+dgQ==}
     engines: {node: '>=18'}
     cpu: [arm64]
     os: [android]
 
-  '@esbuild/android-arm64@0.25.0':
-    resolution: {integrity: sha512-grvv8WncGjDSyUBjN9yHXNt+cq0snxXbDxy5pJtzMKGmmpPxeAmAhWxXI+01lU5rwZomDgD3kJwulEnhTRUd6g==}
-    engines: {node: '>=18'}
-    cpu: [arm64]
-    os: [android]
-
-  '@esbuild/android-arm64@0.27.0':
-    resolution: {integrity: sha512-CC3vt4+1xZrs97/PKDkl0yN7w8edvU2vZvAFGD16n9F0Cvniy5qvzRXjfO1l94efczkkQE6g1x0i73Qf5uthOQ==}
-    engines: {node: '>=18'}
-    cpu: [arm64]
-    os: [android]
-
-  '@esbuild/android-arm@0.23.1':
-    resolution: {integrity: sha512-uz6/tEy2IFm9RYOyvKl88zdzZfwEfKZmnX9Cj1BHjeSGNuGLuMD1kR8y5bteYmwqKm1tj8m4cb/aKEorr6fHWQ==}
+  '@esbuild/android-arm@0.27.7':
+    resolution: {integrity: sha512-jbPXvB4Yj2yBV7HUfE2KHe4GJX51QplCN1pGbYjvsyCZbQmies29EoJbkEc+vYuU5o45AfQn37vZlyXy4YJ8RQ==}
     engines: {node: '>=18'}
     cpu: [arm]
     os: [android]
 
-  '@esbuild/android-arm@0.25.0':
-    resolution: {integrity: sha512-PTyWCYYiU0+1eJKmw21lWtC+d08JDZPQ5g+kFyxP0V+es6VPPSUhM6zk8iImp2jbV6GwjX4pap0JFbUQN65X1g==}
-    engines: {node: '>=18'}
-    cpu: [arm]
-    os: [android]
-
-  '@esbuild/android-arm@0.27.0':
-    resolution: {integrity: sha512-j67aezrPNYWJEOHUNLPj9maeJte7uSMM6gMoxfPC9hOg8N02JuQi/T7ewumf4tNvJadFkvLZMlAq73b9uwdMyQ==}
-    engines: {node: '>=18'}
-    cpu: [arm]
-    os: [android]
-
-  '@esbuild/android-x64@0.23.1':
-    resolution: {integrity: sha512-nlN9B69St9BwUoB+jkyU090bru8L0NA3yFvAd7k8dNsVH8bi9a8cUAUSEcEEgTp2z3dbEDGJGfP6VUnkQnlReg==}
+  '@esbuild/android-x64@0.27.7':
+    resolution: {integrity: sha512-x5VpMODneVDb70PYV2VQOmIUUiBtY3D3mPBG8NxVk5CogneYhkR7MmM3yR/uMdITLrC1ml/NV1rj4bMJuy9MCg==}
     engines: {node: '>=18'}
     cpu: [x64]
     os: [android]
 
-  '@esbuild/android-x64@0.25.0':
-    resolution: {integrity: sha512-m/ix7SfKG5buCnxasr52+LI78SQ+wgdENi9CqyCXwjVR2X4Jkz+BpC3le3AoBPYTC9NHklwngVXvbJ9/Akhrfg==}
-    engines: {node: '>=18'}
-    cpu: [x64]
-    os: [android]
-
-  '@esbuild/android-x64@0.27.0':
-    resolution: {integrity: sha512-wurMkF1nmQajBO1+0CJmcN17U4BP6GqNSROP8t0X/Jiw2ltYGLHpEksp9MpoBqkrFR3kv2/te6Sha26k3+yZ9Q==}
-    engines: {node: '>=18'}
-    cpu: [x64]
-    os: [android]
-
-  '@esbuild/darwin-arm64@0.23.1':
-    resolution: {integrity: sha512-YsS2e3Wtgnw7Wq53XXBLcV6JhRsEq8hkfg91ESVadIrzr9wO6jJDMZnCQbHm1Guc5t/CdDiFSSfWP58FNuvT3Q==}
+  '@esbuild/darwin-arm64@0.27.7':
+    resolution: {integrity: sha512-5lckdqeuBPlKUwvoCXIgI2D9/ABmPq3Rdp7IfL70393YgaASt7tbju3Ac+ePVi3KDH6N2RqePfHnXkaDtY9fkw==}
     engines: {node: '>=18'}
     cpu: [arm64]
     os: [darwin]
 
-  '@esbuild/darwin-arm64@0.25.0':
-    resolution: {integrity: sha512-mVwdUb5SRkPayVadIOI78K7aAnPamoeFR2bT5nszFUZ9P8UpK4ratOdYbZZXYSqPKMHfS1wdHCJk1P1EZpRdvw==}
-    engines: {node: '>=18'}
-    cpu: [arm64]
-    os: [darwin]
-
-  '@esbuild/darwin-arm64@0.27.0':
-    resolution: {integrity: sha512-uJOQKYCcHhg07DL7i8MzjvS2LaP7W7Pn/7uA0B5S1EnqAirJtbyw4yC5jQ5qcFjHK9l6o/MX9QisBg12kNkdHg==}
-    engines: {node: '>=18'}
-    cpu: [arm64]
-    os: [darwin]
-
-  '@esbuild/darwin-x64@0.23.1':
-    resolution: {integrity: sha512-aClqdgTDVPSEGgoCS8QDG37Gu8yc9lTHNAQlsztQ6ENetKEO//b8y31MMu2ZaPbn4kVsIABzVLXYLhCGekGDqw==}
+  '@esbuild/darwin-x64@0.27.7':
+    resolution: {integrity: sha512-rYnXrKcXuT7Z+WL5K980jVFdvVKhCHhUwid+dDYQpH+qu+TefcomiMAJpIiC2EM3Rjtq0sO3StMV/+3w3MyyqQ==}
     engines: {node: '>=18'}
     cpu: [x64]
     os: [darwin]
 
-  '@esbuild/darwin-x64@0.25.0':
-    resolution: {integrity: sha512-DgDaYsPWFTS4S3nWpFcMn/33ZZwAAeAFKNHNa1QN0rI4pUjgqf0f7ONmXf6d22tqTY+H9FNdgeaAa+YIFUn2Rg==}
-    engines: {node: '>=18'}
-    cpu: [x64]
-    os: [darwin]
-
-  '@esbuild/darwin-x64@0.27.0':
-    resolution: {integrity: sha512-8mG6arH3yB/4ZXiEnXof5MK72dE6zM9cDvUcPtxhUZsDjESl9JipZYW60C3JGreKCEP+p8P/72r69m4AZGJd5g==}
-    engines: {node: '>=18'}
-    cpu: [x64]
-    os: [darwin]
-
-  '@esbuild/freebsd-arm64@0.23.1':
-    resolution: {integrity: sha512-h1k6yS8/pN/NHlMl5+v4XPfikhJulk4G+tKGFIOwURBSFzE8bixw1ebjluLOjfwtLqY0kewfjLSrO6tN2MgIhA==}
+  '@esbuild/freebsd-arm64@0.27.7':
+    resolution: {integrity: sha512-B48PqeCsEgOtzME2GbNM2roU29AMTuOIN91dsMO30t+Ydis3z/3Ngoj5hhnsOSSwNzS+6JppqWsuhTp6E82l2w==}
     engines: {node: '>=18'}
     cpu: [arm64]
     os: [freebsd]
 
-  '@esbuild/freebsd-arm64@0.25.0':
-    resolution: {integrity: sha512-VN4ocxy6dxefN1MepBx/iD1dH5K8qNtNe227I0mnTRjry8tj5MRk4zprLEdG8WPyAPb93/e4pSgi1SoHdgOa4w==}
-    engines: {node: '>=18'}
-    cpu: [arm64]
-    os: [freebsd]
-
-  '@esbuild/freebsd-arm64@0.27.0':
-    resolution: {integrity: sha512-9FHtyO988CwNMMOE3YIeci+UV+x5Zy8fI2qHNpsEtSF83YPBmE8UWmfYAQg6Ux7Gsmd4FejZqnEUZCMGaNQHQw==}
-    engines: {node: '>=18'}
-    cpu: [arm64]
-    os: [freebsd]
-
-  '@esbuild/freebsd-x64@0.23.1':
-    resolution: {integrity: sha512-lK1eJeyk1ZX8UklqFd/3A60UuZ/6UVfGT2LuGo3Wp4/z7eRTRYY+0xOu2kpClP+vMTi9wKOfXi2vjUpO1Ro76g==}
+  '@esbuild/freebsd-x64@0.27.7':
+    resolution: {integrity: sha512-jOBDK5XEjA4m5IJK3bpAQF9/Lelu/Z9ZcdhTRLf4cajlB+8VEhFFRjWgfy3M1O4rO2GQ/b2dLwCUGpiF/eATNQ==}
     engines: {node: '>=18'}
     cpu: [x64]
     os: [freebsd]
 
-  '@esbuild/freebsd-x64@0.25.0':
-    resolution: {integrity: sha512-mrSgt7lCh07FY+hDD1TxiTyIHyttn6vnjesnPoVDNmDfOmggTLXRv8Id5fNZey1gl/V2dyVK1VXXqVsQIiAk+A==}
-    engines: {node: '>=18'}
-    cpu: [x64]
-    os: [freebsd]
-
-  '@esbuild/freebsd-x64@0.27.0':
-    resolution: {integrity: sha512-zCMeMXI4HS/tXvJz8vWGexpZj2YVtRAihHLk1imZj4efx1BQzN76YFeKqlDr3bUWI26wHwLWPd3rwh6pe4EV7g==}
-    engines: {node: '>=18'}
-    cpu: [x64]
-    os: [freebsd]
-
-  '@esbuild/linux-arm64@0.23.1':
-    resolution: {integrity: sha512-/93bf2yxencYDnItMYV/v116zff6UyTjo4EtEQjUBeGiVpMmffDNUyD9UN2zV+V3LRV3/on4xdZ26NKzn6754g==}
+  '@esbuild/linux-arm64@0.27.7':
+    resolution: {integrity: sha512-RZPHBoxXuNnPQO9rvjh5jdkRmVizktkT7TCDkDmQ0W2SwHInKCAV95GRuvdSvA7w4VMwfCjUiPwDi0ZO6Nfe9A==}
     engines: {node: '>=18'}
     cpu: [arm64]
     os: [linux]
 
-  '@esbuild/linux-arm64@0.25.0':
-    resolution: {integrity: sha512-9QAQjTWNDM/Vk2bgBl17yWuZxZNQIF0OUUuPZRKoDtqF2k4EtYbpyiG5/Dk7nqeK6kIJWPYldkOcBqjXjrUlmg==}
-    engines: {node: '>=18'}
-    cpu: [arm64]
-    os: [linux]
-
-  '@esbuild/linux-arm64@0.27.0':
-    resolution: {integrity: sha512-AS18v0V+vZiLJyi/4LphvBE+OIX682Pu7ZYNsdUHyUKSoRwdnOsMf6FDekwoAFKej14WAkOef3zAORJgAtXnlQ==}
-    engines: {node: '>=18'}
-    cpu: [arm64]
-    os: [linux]
-
-  '@esbuild/linux-arm@0.23.1':
-    resolution: {integrity: sha512-CXXkzgn+dXAPs3WBwE+Kvnrf4WECwBdfjfeYHpMeVxWE0EceB6vhWGShs6wi0IYEqMSIzdOF1XjQ/Mkm5d7ZdQ==}
+  '@esbuild/linux-arm@0.27.7':
+    resolution: {integrity: sha512-RkT/YXYBTSULo3+af8Ib0ykH8u2MBh57o7q/DAs3lTJlyVQkgQvlrPTnjIzzRPQyavxtPtfg0EopvDyIt0j1rA==}
     engines: {node: '>=18'}
     cpu: [arm]
     os: [linux]
 
-  '@esbuild/linux-arm@0.25.0':
-    resolution: {integrity: sha512-vkB3IYj2IDo3g9xX7HqhPYxVkNQe8qTK55fraQyTzTX/fxaDtXiEnavv9geOsonh2Fd2RMB+i5cbhu2zMNWJwg==}
-    engines: {node: '>=18'}
-    cpu: [arm]
-    os: [linux]
-
-  '@esbuild/linux-arm@0.27.0':
-    resolution: {integrity: sha512-t76XLQDpxgmq2cNXKTVEB7O7YMb42atj2Re2Haf45HkaUpjM2J0UuJZDuaGbPbamzZ7bawyGFUkodL+zcE+jvQ==}
-    engines: {node: '>=18'}
-    cpu: [arm]
-    os: [linux]
-
-  '@esbuild/linux-ia32@0.23.1':
-    resolution: {integrity: sha512-VTN4EuOHwXEkXzX5nTvVY4s7E/Krz7COC8xkftbbKRYAl96vPiUssGkeMELQMOnLOJ8k3BY1+ZY52tttZnHcXQ==}
+  '@esbuild/linux-ia32@0.27.7':
+    resolution: {integrity: sha512-GA48aKNkyQDbd3KtkplYWT102C5sn/EZTY4XROkxONgruHPU72l+gW+FfF8tf2cFjeHaRbWpOYa/uRBz/Xq1Pg==}
     engines: {node: '>=18'}
     cpu: [ia32]
     os: [linux]
 
-  '@esbuild/linux-ia32@0.25.0':
-    resolution: {integrity: sha512-43ET5bHbphBegyeqLb7I1eYn2P/JYGNmzzdidq/w0T8E2SsYL1U6un2NFROFRg1JZLTzdCoRomg8Rvf9M6W6Gg==}
-    engines: {node: '>=18'}
-    cpu: [ia32]
-    os: [linux]
-
-  '@esbuild/linux-ia32@0.27.0':
-    resolution: {integrity: sha512-Mz1jxqm/kfgKkc/KLHC5qIujMvnnarD9ra1cEcrs7qshTUSksPihGrWHVG5+osAIQ68577Zpww7SGapmzSt4Nw==}
-    engines: {node: '>=18'}
-    cpu: [ia32]
-    os: [linux]
-
-  '@esbuild/linux-loong64@0.23.1':
-    resolution: {integrity: sha512-Vx09LzEoBa5zDnieH8LSMRToj7ir/Jeq0Gu6qJ/1GcBq9GkfoEAoXvLiW1U9J1qE/Y/Oyaq33w5p2ZWrNNHNEw==}
+  '@esbuild/linux-loong64@0.27.7':
+    resolution: {integrity: sha512-a4POruNM2oWsD4WKvBSEKGIiWQF8fZOAsycHOt6JBpZ+JN2n2JH9WAv56SOyu9X5IqAjqSIPTaJkqN8F7XOQ5Q==}
     engines: {node: '>=18'}
     cpu: [loong64]
     os: [linux]
 
-  '@esbuild/linux-loong64@0.25.0':
-    resolution: {integrity: sha512-fC95c/xyNFueMhClxJmeRIj2yrSMdDfmqJnyOY4ZqsALkDrrKJfIg5NTMSzVBr5YW1jf+l7/cndBfP3MSDpoHw==}
-    engines: {node: '>=18'}
-    cpu: [loong64]
-    os: [linux]
-
-  '@esbuild/linux-loong64@0.27.0':
-    resolution: {integrity: sha512-QbEREjdJeIreIAbdG2hLU1yXm1uu+LTdzoq1KCo4G4pFOLlvIspBm36QrQOar9LFduavoWX2msNFAAAY9j4BDg==}
-    engines: {node: '>=18'}
-    cpu: [loong64]
-    os: [linux]
-
-  '@esbuild/linux-mips64el@0.23.1':
-    resolution: {integrity: sha512-nrFzzMQ7W4WRLNUOU5dlWAqa6yVeI0P78WKGUo7lg2HShq/yx+UYkeNSE0SSfSure0SqgnsxPvmAUu/vu0E+3Q==}
+  '@esbuild/linux-mips64el@0.27.7':
+    resolution: {integrity: sha512-KabT5I6StirGfIz0FMgl1I+R1H73Gp0ofL9A3nG3i/cYFJzKHhouBV5VWK1CSgKvVaG4q1RNpCTR2LuTVB3fIw==}
     engines: {node: '>=18'}
     cpu: [mips64el]
     os: [linux]
 
-  '@esbuild/linux-mips64el@0.25.0':
-    resolution: {integrity: sha512-nkAMFju7KDW73T1DdH7glcyIptm95a7Le8irTQNO/qtkoyypZAnjchQgooFUDQhNAy4iu08N79W4T4pMBwhPwQ==}
-    engines: {node: '>=18'}
-    cpu: [mips64el]
-    os: [linux]
-
-  '@esbuild/linux-mips64el@0.27.0':
-    resolution: {integrity: sha512-sJz3zRNe4tO2wxvDpH/HYJilb6+2YJxo/ZNbVdtFiKDufzWq4JmKAiHy9iGoLjAV7r/W32VgaHGkk35cUXlNOg==}
-    engines: {node: '>=18'}
-    cpu: [mips64el]
-    os: [linux]
-
-  '@esbuild/linux-ppc64@0.23.1':
-    resolution: {integrity: sha512-dKN8fgVqd0vUIjxuJI6P/9SSSe/mB9rvA98CSH2sJnlZ/OCZWO1DJvxj8jvKTfYUdGfcq2dDxoKaC6bHuTlgcw==}
+  '@esbuild/linux-ppc64@0.27.7':
+    resolution: {integrity: sha512-gRsL4x6wsGHGRqhtI+ifpN/vpOFTQtnbsupUF5R5YTAg+y/lKelYR1hXbnBdzDjGbMYjVJLJTd2OFmMewAgwlQ==}
     engines: {node: '>=18'}
     cpu: [ppc64]
     os: [linux]
 
-  '@esbuild/linux-ppc64@0.25.0':
-    resolution: {integrity: sha512-NhyOejdhRGS8Iwv+KKR2zTq2PpysF9XqY+Zk77vQHqNbo/PwZCzB5/h7VGuREZm1fixhs4Q/qWRSi5zmAiO4Fw==}
-    engines: {node: '>=18'}
-    cpu: [ppc64]
-    os: [linux]
-
-  '@esbuild/linux-ppc64@0.27.0':
-    resolution: {integrity: sha512-z9N10FBD0DCS2dmSABDBb5TLAyF1/ydVb+N4pi88T45efQ/w4ohr/F/QYCkxDPnkhkp6AIpIcQKQ8F0ANoA2JA==}
-    engines: {node: '>=18'}
-    cpu: [ppc64]
-    os: [linux]
-
-  '@esbuild/linux-riscv64@0.23.1':
-    resolution: {integrity: sha512-5AV4Pzp80fhHL83JM6LoA6pTQVWgB1HovMBsLQ9OZWLDqVY8MVobBXNSmAJi//Csh6tcY7e7Lny2Hg1tElMjIA==}
+  '@esbuild/linux-riscv64@0.27.7':
+    resolution: {integrity: sha512-hL25LbxO1QOngGzu2U5xeXtxXcW+/GvMN3ejANqXkxZ/opySAZMrc+9LY/WyjAan41unrR3YrmtTsUpwT66InQ==}
     engines: {node: '>=18'}
     cpu: [riscv64]
     os: [linux]
 
-  '@esbuild/linux-riscv64@0.25.0':
-    resolution: {integrity: sha512-5S/rbP5OY+GHLC5qXp1y/Mx//e92L1YDqkiBbO9TQOvuFXM+iDqUNG5XopAnXoRH3FjIUDkeGcY1cgNvnXp/kA==}
-    engines: {node: '>=18'}
-    cpu: [riscv64]
-    os: [linux]
-
-  '@esbuild/linux-riscv64@0.27.0':
-    resolution: {integrity: sha512-pQdyAIZ0BWIC5GyvVFn5awDiO14TkT/19FTmFcPdDec94KJ1uZcmFs21Fo8auMXzD4Tt+diXu1LW1gHus9fhFQ==}
-    engines: {node: '>=18'}
-    cpu: [riscv64]
-    os: [linux]
-
-  '@esbuild/linux-s390x@0.23.1':
-    resolution: {integrity: sha512-9ygs73tuFCe6f6m/Tb+9LtYxWR4c9yg7zjt2cYkjDbDpV/xVn+68cQxMXCjUpYwEkze2RcU/rMnfIXNRFmSoDw==}
+  '@esbuild/linux-s390x@0.27.7':
+    resolution: {integrity: sha512-2k8go8Ycu1Kb46vEelhu1vqEP+UeRVj2zY1pSuPdgvbd5ykAw82Lrro28vXUrRmzEsUV0NzCf54yARIK8r0fdw==}
     engines: {node: '>=18'}
     cpu: [s390x]
     os: [linux]
 
-  '@esbuild/linux-s390x@0.25.0':
-    resolution: {integrity: sha512-XM2BFsEBz0Fw37V0zU4CXfcfuACMrppsMFKdYY2WuTS3yi8O1nFOhil/xhKTmE1nPmVyvQJjJivgDT+xh8pXJA==}
-    engines: {node: '>=18'}
-    cpu: [s390x]
-    os: [linux]
-
-  '@esbuild/linux-s390x@0.27.0':
-    resolution: {integrity: sha512-hPlRWR4eIDDEci953RI1BLZitgi5uqcsjKMxwYfmi4LcwyWo2IcRP+lThVnKjNtk90pLS8nKdroXYOqW+QQH+w==}
-    engines: {node: '>=18'}
-    cpu: [s390x]
-    os: [linux]
-
-  '@esbuild/linux-x64@0.23.1':
-    resolution: {integrity: sha512-EV6+ovTsEXCPAp58g2dD68LxoP/wK5pRvgy0J/HxPGB009omFPv3Yet0HiaqvrIrgPTBuC6wCH1LTOY91EO5hQ==}
+  '@esbuild/linux-x64@0.27.7':
+    resolution: {integrity: sha512-hzznmADPt+OmsYzw1EE33ccA+HPdIqiCRq7cQeL1Jlq2gb1+OyWBkMCrYGBJ+sxVzve2ZJEVeePbLM2iEIZSxA==}
     engines: {node: '>=18'}
     cpu: [x64]
     os: [linux]
 
-  '@esbuild/linux-x64@0.25.0':
-    resolution: {integrity: sha512-9yl91rHw/cpwMCNytUDxwj2XjFpxML0y9HAOH9pNVQDpQrBxHy01Dx+vaMu0N1CKa/RzBD2hB4u//nfc+Sd3Cw==}
-    engines: {node: '>=18'}
-    cpu: [x64]
-    os: [linux]
-
-  '@esbuild/linux-x64@0.27.0':
-    resolution: {integrity: sha512-1hBWx4OUJE2cab++aVZ7pObD6s+DK4mPGpemtnAORBvb5l/g5xFGk0vc0PjSkrDs0XaXj9yyob3d14XqvnQ4gw==}
-    engines: {node: '>=18'}
-    cpu: [x64]
-    os: [linux]
-
-  '@esbuild/netbsd-arm64@0.25.0':
-    resolution: {integrity: sha512-RuG4PSMPFfrkH6UwCAqBzauBWTygTvb1nxWasEJooGSJ/NwRw7b2HOwyRTQIU97Hq37l3npXoZGYMy3b3xYvPw==}
+  '@esbuild/netbsd-arm64@0.27.7':
+    resolution: {integrity: sha512-b6pqtrQdigZBwZxAn1UpazEisvwaIDvdbMbmrly7cDTMFnw/+3lVxxCTGOrkPVnsYIosJJXAsILG9XcQS+Yu6w==}
     engines: {node: '>=18'}
     cpu: [arm64]
     os: [netbsd]
 
-  '@esbuild/netbsd-arm64@0.27.0':
-    resolution: {integrity: sha512-6m0sfQfxfQfy1qRuecMkJlf1cIzTOgyaeXaiVaaki8/v+WB+U4hc6ik15ZW6TAllRlg/WuQXxWj1jx6C+dfy3w==}
-    engines: {node: '>=18'}
-    cpu: [arm64]
-    os: [netbsd]
-
-  '@esbuild/netbsd-x64@0.23.1':
-    resolution: {integrity: sha512-aevEkCNu7KlPRpYLjwmdcuNz6bDFiE7Z8XC4CPqExjTvrHugh28QzUXVOZtiYghciKUacNktqxdpymplil1beA==}
+  '@esbuild/netbsd-x64@0.27.7':
+    resolution: {integrity: sha512-OfatkLojr6U+WN5EDYuoQhtM+1xco+/6FSzJJnuWiUw5eVcicbyK3dq5EeV/QHT1uy6GoDhGbFpprUiHUYggrw==}
     engines: {node: '>=18'}
     cpu: [x64]
     os: [netbsd]
 
-  '@esbuild/netbsd-x64@0.25.0':
-    resolution: {integrity: sha512-jl+qisSB5jk01N5f7sPCsBENCOlPiS/xptD5yxOx2oqQfyourJwIKLRA2yqWdifj3owQZCL2sn6o08dBzZGQzA==}
-    engines: {node: '>=18'}
-    cpu: [x64]
-    os: [netbsd]
-
-  '@esbuild/netbsd-x64@0.27.0':
-    resolution: {integrity: sha512-xbbOdfn06FtcJ9d0ShxxvSn2iUsGd/lgPIO2V3VZIPDbEaIj1/3nBBe1AwuEZKXVXkMmpr6LUAgMkLD/4D2PPA==}
-    engines: {node: '>=18'}
-    cpu: [x64]
-    os: [netbsd]
-
-  '@esbuild/openbsd-arm64@0.23.1':
-    resolution: {integrity: sha512-3x37szhLexNA4bXhLrCC/LImN/YtWis6WXr1VESlfVtVeoFJBRINPJ3f0a/6LV8zpikqoUg4hyXw0sFBt5Cr+Q==}
+  '@esbuild/openbsd-arm64@0.27.7':
+    resolution: {integrity: sha512-AFuojMQTxAz75Fo8idVcqoQWEHIXFRbOc1TrVcFSgCZtQfSdc1RXgB3tjOn/krRHENUB4j00bfGjyl2mJrU37A==}
     engines: {node: '>=18'}
     cpu: [arm64]
     os: [openbsd]
 
-  '@esbuild/openbsd-arm64@0.25.0':
-    resolution: {integrity: sha512-21sUNbq2r84YE+SJDfaQRvdgznTD8Xc0oc3p3iW/a1EVWeNj/SdUCbm5U0itZPQYRuRTW20fPMWMpcrciH2EJw==}
-    engines: {node: '>=18'}
-    cpu: [arm64]
-    os: [openbsd]
-
-  '@esbuild/openbsd-arm64@0.27.0':
-    resolution: {integrity: sha512-fWgqR8uNbCQ/GGv0yhzttj6sU/9Z5/Sv/VGU3F5OuXK6J6SlriONKrQ7tNlwBrJZXRYk5jUhuWvF7GYzGguBZQ==}
-    engines: {node: '>=18'}
-    cpu: [arm64]
-    os: [openbsd]
-
-  '@esbuild/openbsd-x64@0.23.1':
-    resolution: {integrity: sha512-aY2gMmKmPhxfU+0EdnN+XNtGbjfQgwZj43k8G3fyrDM/UdZww6xrWxmDkuz2eCZchqVeABjV5BpildOrUbBTqA==}
+  '@esbuild/openbsd-x64@0.27.7':
+    resolution: {integrity: sha512-+A1NJmfM8WNDv5CLVQYJ5PshuRm/4cI6WMZRg1by1GwPIQPCTs1GLEUHwiiQGT5zDdyLiRM/l1G0Pv54gvtKIg==}
     engines: {node: '>=18'}
     cpu: [x64]
     os: [openbsd]
 
-  '@esbuild/openbsd-x64@0.25.0':
-    resolution: {integrity: sha512-2gwwriSMPcCFRlPlKx3zLQhfN/2WjJ2NSlg5TKLQOJdV0mSxIcYNTMhk3H3ulL/cak+Xj0lY1Ym9ysDV1igceg==}
-    engines: {node: '>=18'}
-    cpu: [x64]
-    os: [openbsd]
-
-  '@esbuild/openbsd-x64@0.27.0':
-    resolution: {integrity: sha512-aCwlRdSNMNxkGGqQajMUza6uXzR/U0dIl1QmLjPtRbLOx3Gy3otfFu/VjATy4yQzo9yFDGTxYDo1FfAD9oRD2A==}
-    engines: {node: '>=18'}
-    cpu: [x64]
-    os: [openbsd]
-
-  '@esbuild/openharmony-arm64@0.27.0':
-    resolution: {integrity: sha512-nyvsBccxNAsNYz2jVFYwEGuRRomqZ149A39SHWk4hV0jWxKM0hjBPm3AmdxcbHiFLbBSwG6SbpIcUbXjgyECfA==}
+  '@esbuild/openharmony-arm64@0.27.7':
+    resolution: {integrity: sha512-+KrvYb/C8zA9CU/g0sR6w2RBw7IGc5J2BPnc3dYc5VJxHCSF1yNMxTV5LQ7GuKteQXZtspjFbiuW5/dOj7H4Yw==}
     engines: {node: '>=18'}
     cpu: [arm64]
     os: [openharmony]
 
-  '@esbuild/sunos-x64@0.23.1':
-    resolution: {integrity: sha512-RBRT2gqEl0IKQABT4XTj78tpk9v7ehp+mazn2HbUeZl1YMdaGAQqhapjGTCe7uw7y0frDi4gS0uHzhvpFuI1sA==}
+  '@esbuild/sunos-x64@0.27.7':
+    resolution: {integrity: sha512-ikktIhFBzQNt/QDyOL580ti9+5mL/YZeUPKU2ivGtGjdTYoqz6jObj6nOMfhASpS4GU4Q/Clh1QtxWAvcYKamA==}
     engines: {node: '>=18'}
     cpu: [x64]
     os: [sunos]
 
-  '@esbuild/sunos-x64@0.25.0':
-    resolution: {integrity: sha512-bxI7ThgLzPrPz484/S9jLlvUAHYMzy6I0XiU1ZMeAEOBcS0VePBFxh1JjTQt3Xiat5b6Oh4x7UC7IwKQKIJRIg==}
-    engines: {node: '>=18'}
-    cpu: [x64]
-    os: [sunos]
-
-  '@esbuild/sunos-x64@0.27.0':
-    resolution: {integrity: sha512-Q1KY1iJafM+UX6CFEL+F4HRTgygmEW568YMqDA5UV97AuZSm21b7SXIrRJDwXWPzr8MGr75fUZPV67FdtMHlHA==}
-    engines: {node: '>=18'}
-    cpu: [x64]
-    os: [sunos]
-
-  '@esbuild/win32-arm64@0.23.1':
-    resolution: {integrity: sha512-4O+gPR5rEBe2FpKOVyiJ7wNDPA8nGzDuJ6gN4okSA1gEOYZ67N8JPk58tkWtdtPeLz7lBnY6I5L3jdsr3S+A6A==}
+  '@esbuild/win32-arm64@0.27.7':
+    resolution: {integrity: sha512-7yRhbHvPqSpRUV7Q20VuDwbjW5kIMwTHpptuUzV+AA46kiPze5Z7qgt6CLCK3pWFrHeNfDd1VKgyP4O+ng17CA==}
     engines: {node: '>=18'}
     cpu: [arm64]
     os: [win32]
 
-  '@esbuild/win32-arm64@0.25.0':
-    resolution: {integrity: sha512-ZUAc2YK6JW89xTbXvftxdnYy3m4iHIkDtK3CLce8wg8M2L+YZhIvO1DKpxrd0Yr59AeNNkTiic9YLf6FTtXWMw==}
-    engines: {node: '>=18'}
-    cpu: [arm64]
-    os: [win32]
-
-  '@esbuild/win32-arm64@0.27.0':
-    resolution: {integrity: sha512-W1eyGNi6d+8kOmZIwi/EDjrL9nxQIQ0MiGqe/AWc6+IaHloxHSGoeRgDRKHFISThLmsewZ5nHFvGFWdBYlgKPg==}
-    engines: {node: '>=18'}
-    cpu: [arm64]
-    os: [win32]
-
-  '@esbuild/win32-ia32@0.23.1':
-    resolution: {integrity: sha512-BcaL0Vn6QwCwre3Y717nVHZbAa4UBEigzFm6VdsVdT/MbZ38xoj1X9HPkZhbmaBGUD1W8vxAfffbDe8bA6AKnQ==}
+  '@esbuild/win32-ia32@0.27.7':
+    resolution: {integrity: sha512-SmwKXe6VHIyZYbBLJrhOoCJRB/Z1tckzmgTLfFYOfpMAx63BJEaL9ExI8x7v0oAO3Zh6D/Oi1gVxEYr5oUCFhw==}
     engines: {node: '>=18'}
     cpu: [ia32]
     os: [win32]
 
-  '@esbuild/win32-ia32@0.25.0':
-    resolution: {integrity: sha512-eSNxISBu8XweVEWG31/JzjkIGbGIJN/TrRoiSVZwZ6pkC6VX4Im/WV2cz559/TXLcYbcrDN8JtKgd9DJVIo8GA==}
-    engines: {node: '>=18'}
-    cpu: [ia32]
-    os: [win32]
-
-  '@esbuild/win32-ia32@0.27.0':
-    resolution: {integrity: sha512-30z1aKL9h22kQhilnYkORFYt+3wp7yZsHWus+wSKAJR8JtdfI76LJ4SBdMsCopTR3z/ORqVu5L1vtnHZWVj4cQ==}
-    engines: {node: '>=18'}
-    cpu: [ia32]
-    os: [win32]
-
-  '@esbuild/win32-x64@0.23.1':
-    resolution: {integrity: sha512-BHpFFeslkWrXWyUPnbKm+xYYVYruCinGcftSBaa8zoF9hZO4BcSCFUvHVTtzpIY6YzUnYtuEhZ+C9iEXjxnasg==}
+  '@esbuild/win32-x64@0.27.7':
+    resolution: {integrity: sha512-56hiAJPhwQ1R4i+21FVF7V8kSD5zZTdHcVuRFMW0hn753vVfQN8xlx4uOPT4xoGH0Z/oVATuR82AiqSTDIpaHg==}
     engines: {node: '>=18'}
     cpu: [x64]
     os: [win32]
 
-  '@esbuild/win32-x64@0.25.0':
-    resolution: {integrity: sha512-ZENoHJBxA20C2zFzh6AI4fT6RraMzjYw4xKWemRTRmRVtN9c5DcH9r/f2ihEkMjOW5eGgrwCslG/+Y/3bL+DHQ==}
-    engines: {node: '>=18'}
-    cpu: [x64]
-    os: [win32]
-
-  '@esbuild/win32-x64@0.27.0':
-    resolution: {integrity: sha512-aIitBcjQeyOhMTImhLZmtxfdOcuNRpwlPNmlFKPcHQYPhEssw75Cl1TSXJXpMkzaua9FUetx/4OQKq7eJul5Cg==}
-    engines: {node: '>=18'}
-    cpu: [x64]
-    os: [win32]
-
-  '@eslint-community/eslint-utils@4.9.0':
-    resolution: {integrity: sha512-ayVFHdtZ+hsq1t2Dy24wCmGXGe4q9Gu3smhLYALJrr473ZH27MsnSL+LKUlimp4BWJqMDMLmPpx/Q9R3OAlL4g==}
-    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
-    peerDependencies:
-      eslint: ^6.0.0 || ^7.0.0 || >=8.0.0
-
-  '@eslint-community/regexpp@4.12.1':
-    resolution: {integrity: sha512-CCZCDJuduB9OUkFkY2IgppNZMi2lBQgD2qzwXkEia16cge2pijY/aXi96CJMquDMn3nJdlPV1A5KrJEXwfLNzQ==}
-    engines: {node: ^12.0.0 || ^14.0.0 || >=16.0.0}
-
-  '@eslint/config-array@0.21.1':
-    resolution: {integrity: sha512-aw1gNayWpdI/jSYVgzN5pL0cfzU02GT3NBpeT/DXbx1/1x7ZKxFPd9bwrzygx/qiwIQiJ1sw/zD8qY/kRvlGHA==}
-    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
-
-  '@eslint/config-helpers@0.4.2':
-    resolution: {integrity: sha512-gBrxN88gOIf3R7ja5K9slwNayVcZgK6SOUORm2uBzTeIEfeVaIhOpCtTox3P6R7o2jLFwLFTLnC7kU/RGcYEgw==}
-    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
-
-  '@eslint/core@0.17.0':
-    resolution: {integrity: sha512-yL/sLrpmtDaFEiUj1osRP4TI2MDz1AddJL+jZ7KSqvBuliN4xqYY54IfdN8qD8Toa6g1iloph1fxQNkjOxrrpQ==}
-    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
-
-  '@eslint/eslintrc@3.3.1':
-    resolution: {integrity: sha512-gtF186CXhIl1p4pJNGZw8Yc6RlshoePRvE0X91oPGb3vZ8pM3qOS9W9NGPat9LziaBV7XrJWGylNQXkGcnM3IQ==}
-    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
-
-  '@eslint/js@9.39.2':
-    resolution: {integrity: sha512-q1mjIoW1VX4IvSocvM/vbTiveKC4k9eLrajNEuSsmjymSDEbpGddtpfOoN7YGAqBK3NG+uqo8ia4PDTt8buCYA==}
-    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
-
-  '@eslint/object-schema@2.1.7':
-    resolution: {integrity: sha512-VtAOaymWVfZcmZbp6E2mympDIHvyjXs/12LqWYjVw6qjrfF+VK+fyG33kChz3nnK+SU5/NeHOqrTEHS8sXO3OA==}
-    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
-
-  '@eslint/plugin-kit@0.4.1':
-    resolution: {integrity: sha512-43/qtrDUokr7LJqoF2c3+RInu/t4zfrpYdoSDfYyhg52rwLV6TnOvdG4fXm7IkSB3wErkcmJS9iEhjVtOSEjjA==}
-    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
-
-  '@humanfs/core@0.19.1':
-    resolution: {integrity: sha512-5DyQ4+1JEUzejeK1JGICcideyfUbGixgS9jNgex5nqkW+cY7WZhxBigmieN5Qnw9ZosSNVC9KQKyb+GUaGyKUA==}
-    engines: {node: '>=18.18.0'}
-
-  '@humanfs/node@0.16.6':
-    resolution: {integrity: sha512-YuI2ZHQL78Q5HbhDiBA1X4LmYdXCKCMQIfw0pw7piHJwyREFebJUvrQN4cMssyES6x+vfUbx1CIpaQUKYdQZOw==}
-    engines: {node: '>=18.18.0'}
-
-  '@humanwhocodes/module-importer@1.0.1':
-    resolution: {integrity: sha512-bxveV4V8v5Yb4ncFTT3rPSgZBOpCkjfK0y4oVVVJwIuDVBRMDXrPyXRL988i5ap9m9bnyEEjWfm5WkBmtffLfA==}
-    engines: {node: '>=12.22'}
-
-  '@humanwhocodes/retry@0.3.1':
-    resolution: {integrity: sha512-JBxkERygn7Bv/GbN5Rv8Ul6LVknS+5Bp6RgDC/O8gEBU/yeH5Ui5C/OlWrTb6qct7LjjfT6Re2NxB0ln0yYybA==}
-    engines: {node: '>=18.18'}
-
-  '@humanwhocodes/retry@0.4.2':
-    resolution: {integrity: sha512-xeO57FpIu4p1Ri3Jq/EXq4ClRm86dVF2z/+kvFnyqVYRavTZmaFaUBbWCOuuTh0o/g7DSsk6kc2vrS4Vl5oPOQ==}
-    engines: {node: '>=18.18'}
-
-  '@img/colour@1.0.0':
-    resolution: {integrity: sha512-A5P/LfWGFSl6nsckYtjw9da+19jB8hkJ6ACTGcDfEJ0aE+l2n2El7dsVM7UVHZQ9s2lmYMWlrS21YLy2IR1LUw==}
+  '@img/colour@1.1.0':
+    resolution: {integrity: sha512-Td76q7j57o/tLVdgS746cYARfSyxk8iEfRxewL9h4OMzYhbW4TAcppl0mT4eyqXddh6L/jwoM75mo7ixa/pCeQ==}
     engines: {node: '>=18'}
 
   '@img/sharp-darwin-arm64@0.34.5':
@@ -1291,89 +869,105 @@ packages:
     resolution: {integrity: sha512-excjX8DfsIcJ10x1Kzr4RcWe1edC9PquDRRPx3YVCvQv+U5p7Yin2s32ftzikXojb1PIFc/9Mt28/y+iRklkrw==}
     cpu: [arm64]
     os: [linux]
+    libc: [glibc]
 
   '@img/sharp-libvips-linux-arm@1.2.4':
     resolution: {integrity: sha512-bFI7xcKFELdiNCVov8e44Ia4u2byA+l3XtsAj+Q8tfCwO6BQ8iDojYdvoPMqsKDkuoOo+X6HZA0s0q11ANMQ8A==}
     cpu: [arm]
     os: [linux]
+    libc: [glibc]
 
   '@img/sharp-libvips-linux-ppc64@1.2.4':
     resolution: {integrity: sha512-FMuvGijLDYG6lW+b/UvyilUWu5Ayu+3r2d1S8notiGCIyYU/76eig1UfMmkZ7vwgOrzKzlQbFSuQfgm7GYUPpA==}
     cpu: [ppc64]
     os: [linux]
+    libc: [glibc]
 
   '@img/sharp-libvips-linux-riscv64@1.2.4':
     resolution: {integrity: sha512-oVDbcR4zUC0ce82teubSm+x6ETixtKZBh/qbREIOcI3cULzDyb18Sr/Wcyx7NRQeQzOiHTNbZFF1UwPS2scyGA==}
     cpu: [riscv64]
     os: [linux]
+    libc: [glibc]
 
   '@img/sharp-libvips-linux-s390x@1.2.4':
     resolution: {integrity: sha512-qmp9VrzgPgMoGZyPvrQHqk02uyjA0/QrTO26Tqk6l4ZV0MPWIW6LTkqOIov+J1yEu7MbFQaDpwdwJKhbJvuRxQ==}
     cpu: [s390x]
     os: [linux]
+    libc: [glibc]
 
   '@img/sharp-libvips-linux-x64@1.2.4':
     resolution: {integrity: sha512-tJxiiLsmHc9Ax1bz3oaOYBURTXGIRDODBqhveVHonrHJ9/+k89qbLl0bcJns+e4t4rvaNBxaEZsFtSfAdquPrw==}
     cpu: [x64]
     os: [linux]
+    libc: [glibc]
 
   '@img/sharp-libvips-linuxmusl-arm64@1.2.4':
     resolution: {integrity: sha512-FVQHuwx1IIuNow9QAbYUzJ+En8KcVm9Lk5+uGUQJHaZmMECZmOlix9HnH7n1TRkXMS0pGxIJokIVB9SuqZGGXw==}
     cpu: [arm64]
     os: [linux]
+    libc: [musl]
 
   '@img/sharp-libvips-linuxmusl-x64@1.2.4':
     resolution: {integrity: sha512-+LpyBk7L44ZIXwz/VYfglaX/okxezESc6UxDSoyo2Ks6Jxc4Y7sGjpgU9s4PMgqgjj1gZCylTieNamqA1MF7Dg==}
     cpu: [x64]
     os: [linux]
+    libc: [musl]
 
   '@img/sharp-linux-arm64@0.34.5':
     resolution: {integrity: sha512-bKQzaJRY/bkPOXyKx5EVup7qkaojECG6NLYswgktOZjaXecSAeCWiZwwiFf3/Y+O1HrauiE3FVsGxFg8c24rZg==}
     engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
     cpu: [arm64]
     os: [linux]
+    libc: [glibc]
 
   '@img/sharp-linux-arm@0.34.5':
     resolution: {integrity: sha512-9dLqsvwtg1uuXBGZKsxem9595+ujv0sJ6Vi8wcTANSFpwV/GONat5eCkzQo/1O6zRIkh0m/8+5BjrRr7jDUSZw==}
     engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
     cpu: [arm]
     os: [linux]
+    libc: [glibc]
 
   '@img/sharp-linux-ppc64@0.34.5':
     resolution: {integrity: sha512-7zznwNaqW6YtsfrGGDA6BRkISKAAE1Jo0QdpNYXNMHu2+0dTrPflTLNkpc8l7MUP5M16ZJcUvysVWWrMefZquA==}
     engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
     cpu: [ppc64]
     os: [linux]
+    libc: [glibc]
 
   '@img/sharp-linux-riscv64@0.34.5':
     resolution: {integrity: sha512-51gJuLPTKa7piYPaVs8GmByo7/U7/7TZOq+cnXJIHZKavIRHAP77e3N2HEl3dgiqdD/w0yUfiJnII77PuDDFdw==}
     engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
     cpu: [riscv64]
     os: [linux]
+    libc: [glibc]
 
   '@img/sharp-linux-s390x@0.34.5':
     resolution: {integrity: sha512-nQtCk0PdKfho3eC5MrbQoigJ2gd1CgddUMkabUj+rBevs8tZ2cULOx46E7oyX+04WGfABgIwmMC0VqieTiR4jg==}
     engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
     cpu: [s390x]
     os: [linux]
+    libc: [glibc]
 
   '@img/sharp-linux-x64@0.34.5':
     resolution: {integrity: sha512-MEzd8HPKxVxVenwAa+JRPwEC7QFjoPWuS5NZnBt6B3pu7EG2Ge0id1oLHZpPJdn3OQK+BQDiw9zStiHBTJQQQQ==}
     engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
     cpu: [x64]
     os: [linux]
+    libc: [glibc]
 
   '@img/sharp-linuxmusl-arm64@0.34.5':
     resolution: {integrity: sha512-fprJR6GtRsMt6Kyfq44IsChVZeGN97gTD331weR1ex1c1rypDEABN6Tm2xa1wE6lYb5DdEnk03NZPqA7Id21yg==}
     engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
     cpu: [arm64]
     os: [linux]
+    libc: [musl]
 
   '@img/sharp-linuxmusl-x64@0.34.5':
     resolution: {integrity: sha512-Jg8wNT1MUzIvhBFxViqrEhWDGzqymo3sV7z7ZsaWbZNDLXRJZoRGrjulp60YYtV4wfY8VIKcWidjojlLcWrd8Q==}
     engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
     cpu: [x64]
     os: [linux]
+    libc: [musl]
 
   '@img/sharp-wasm32@0.34.5':
     resolution: {integrity: sha512-OdWTEiVkY2PHwqkbBI8frFxQQFekHaSSkUIJkwzclWZe64O1X4UlUjqqqLaPbUpMOQk6FBu/HtlGXNblIs0huw==}
@@ -1398,150 +992,142 @@ packages:
     cpu: [x64]
     os: [win32]
 
-  '@inquirer/ansi@1.0.2':
-    resolution: {integrity: sha512-S8qNSZiYzFd0wAcyG5AXCvUHC5Sr7xpZ9wZ2py9XR88jUz8wooStVx5M6dRzczbBWjic9NP7+rY0Xi7qqK/aMQ==}
-    engines: {node: '>=18'}
+  '@inquirer/ansi@2.0.7':
+    resolution: {integrity: sha512-3eTuUO1vH2cZm2ZKHeQxnOqlTi9EfZDGgIe3BL3I4u+rJHocr9Fz86M4fjYABPvFnQG/gGK551HqDiIcETwU6Q==}
+    engines: {node: '>=23.5.0 || ^22.13.0 || ^20.17.0'}
 
-  '@inquirer/checkbox@4.3.2':
-    resolution: {integrity: sha512-VXukHf0RR1doGe6Sm4F0Em7SWYLTHSsbGfJdS9Ja2bX5/D5uwVOEjr07cncLROdBvmnvCATYEWlHqYmXv2IlQA==}
-    engines: {node: '>=18'}
+  '@inquirer/checkbox@5.2.1':
+    resolution: {integrity: sha512-b6xmA/VlTe0ZgDQHDui+Nav470u7u49nRd8/iuhOcQPO9Ch7lGuogydhi2VOmNlZ+zXcM8IcPuNSwQcdJaF/kw==}
+    engines: {node: '>=23.5.0 || ^22.13.0 || ^20.17.0'}
     peerDependencies:
       '@types/node': '>=18'
     peerDependenciesMeta:
       '@types/node':
         optional: true
 
-  '@inquirer/confirm@5.1.21':
-    resolution: {integrity: sha512-KR8edRkIsUayMXV+o3Gv+q4jlhENF9nMYUZs9PA2HzrXeHI8M5uDag70U7RJn9yyiMZSbtF5/UexBtAVtZGSbQ==}
-    engines: {node: '>=18'}
+  '@inquirer/confirm@6.1.1':
+    resolution: {integrity: sha512-eb8DBZcz/2qHWQda4rk2JiQk5h9QV/cVHi1yjt0f69WFZMRFn0sJTye3EAP8icut8UDMjQPsaH5KbcOogefrFQ==}
+    engines: {node: '>=23.5.0 || ^22.13.0 || ^20.17.0'}
     peerDependencies:
       '@types/node': '>=18'
     peerDependenciesMeta:
       '@types/node':
         optional: true
 
-  '@inquirer/core@10.3.2':
-    resolution: {integrity: sha512-43RTuEbfP8MbKzedNqBrlhhNKVwoK//vUFNW3Q3vZ88BLcrs4kYpGg+B2mm5p2K/HfygoCxuKwJJiv8PbGmE0A==}
-    engines: {node: '>=18'}
+  '@inquirer/core@11.2.1':
+    resolution: {integrity: sha512-Qd6GJT1yVyrZZCfN8W2qKF5ApmqryXRhRKCuip8h01x2w/esJQ2XIYc6f9abMIHgKQdBfFTSOdbHRLAhuM09UA==}
+    engines: {node: '>=23.5.0 || ^22.13.0 || ^20.17.0'}
     peerDependencies:
       '@types/node': '>=18'
     peerDependenciesMeta:
       '@types/node':
         optional: true
 
-  '@inquirer/editor@4.2.23':
-    resolution: {integrity: sha512-aLSROkEwirotxZ1pBaP8tugXRFCxW94gwrQLxXfrZsKkfjOYC1aRvAZuhpJOb5cu4IBTJdsCigUlf2iCOu4ZDQ==}
-    engines: {node: '>=18'}
+  '@inquirer/editor@5.2.2':
+    resolution: {integrity: sha512-ZRVd/oD+sYsUd5zVm0NflqEzlqfYCyHNsqkHl2oWXEUHs12tCbcSFi+wVFEvD8+LGRaMUsVrE7qeo6lSG/S1Vg==}
+    engines: {node: '>=23.5.0 || ^22.13.0 || ^20.17.0'}
     peerDependencies:
       '@types/node': '>=18'
     peerDependenciesMeta:
       '@types/node':
         optional: true
 
-  '@inquirer/expand@4.0.23':
-    resolution: {integrity: sha512-nRzdOyFYnpeYTTR2qFwEVmIWypzdAx/sIkCMeTNTcflFOovfqUk+HcFhQQVBftAh9gmGrpFj6QcGEqrDMDOiew==}
-    engines: {node: '>=18'}
+  '@inquirer/expand@5.1.1':
+    resolution: {integrity: sha512-YmQpenjbFSHAK3sOd44puHh3V1KXXr+JiNpUztoSQ4drLh2rTVzTap/YtlAVu/5xavifIlBfNEzJ/neZJ1a/1g==}
+    engines: {node: '>=23.5.0 || ^22.13.0 || ^20.17.0'}
     peerDependencies:
       '@types/node': '>=18'
     peerDependenciesMeta:
       '@types/node':
         optional: true
 
-  '@inquirer/external-editor@1.0.3':
-    resolution: {integrity: sha512-RWbSrDiYmO4LbejWY7ttpxczuwQyZLBUyygsA9Nsv95hpzUWwnNTVQmAq3xuh7vNwCp07UTmE5i11XAEExx4RA==}
-    engines: {node: '>=18'}
+  '@inquirer/external-editor@3.0.3':
+    resolution: {integrity: sha512-6thf5I8q7lZwzGLAxPaaGEREEkZ3nyePPDQ1oyobblxmEE8mqTLguScP7pDjUTAibiyb4hfXl+qjUEJ+di/aNA==}
+    engines: {node: '>=23.5.0 || ^22.13.0 || ^20.17.0'}
     peerDependencies:
       '@types/node': '>=18'
     peerDependenciesMeta:
       '@types/node':
         optional: true
 
-  '@inquirer/figures@1.0.15':
-    resolution: {integrity: sha512-t2IEY+unGHOzAaVM5Xx6DEWKeXlDDcNPeDyUpsRc6CUhBfU3VQOEl+Vssh7VNp1dR8MdUJBWhuObjXCsVpjN5g==}
-    engines: {node: '>=18'}
+  '@inquirer/figures@2.0.7':
+    resolution: {integrity: sha512-aJ8TBPOGB6f/2qziPfElISTCEd5XOYTFckA2SGjhNmiKzfK/u4ot3v0DUzGVdUnKjN10EqnnEPck36BkyfLnJw==}
+    engines: {node: '>=23.5.0 || ^22.13.0 || ^20.17.0'}
 
-  '@inquirer/input@4.3.1':
-    resolution: {integrity: sha512-kN0pAM4yPrLjJ1XJBjDxyfDduXOuQHrBB8aLDMueuwUGn+vNpF7Gq7TvyVxx8u4SHlFFj4trmj+a2cbpG4Jn1g==}
-    engines: {node: '>=18'}
+  '@inquirer/input@5.1.2':
+    resolution: {integrity: sha512-9K/DDBSQpOyZSkt6sOVP9Vo0TR7atX2kuILsUu0x3wVcVbe97lJwIJKMLdMw25tDYuXl/qp6erT0Xs1rfmcfZg==}
+    engines: {node: '>=23.5.0 || ^22.13.0 || ^20.17.0'}
     peerDependencies:
       '@types/node': '>=18'
     peerDependenciesMeta:
       '@types/node':
         optional: true
 
-  '@inquirer/number@3.0.23':
-    resolution: {integrity: sha512-5Smv0OK7K0KUzUfYUXDXQc9jrf8OHo4ktlEayFlelCjwMXz0299Y8OrI+lj7i4gCBY15UObk76q0QtxjzFcFcg==}
-    engines: {node: '>=18'}
+  '@inquirer/number@4.1.1':
+    resolution: {integrity: sha512-XF4IXAbPnGPgw0wsbC/i2tPcyfdZgDpUlhsqU0SfT4IRIGWha6Xm9VRgN5yYxJq+jnyXlfXI/nQ3ulfk0iEICA==}
+    engines: {node: '>=23.5.0 || ^22.13.0 || ^20.17.0'}
     peerDependencies:
       '@types/node': '>=18'
     peerDependenciesMeta:
       '@types/node':
         optional: true
 
-  '@inquirer/password@4.0.23':
-    resolution: {integrity: sha512-zREJHjhT5vJBMZX/IUbyI9zVtVfOLiTO66MrF/3GFZYZ7T4YILW5MSkEYHceSii/KtRk+4i3RE7E1CUXA2jHcA==}
-    engines: {node: '>=18'}
+  '@inquirer/password@5.1.1':
+    resolution: {integrity: sha512-3XBfF7DAsp5qeDsvN5Rd1HmbNokVvEQoUM0QLrRcybC9nX96w3Pbmu7qUsb3IT3J3jBvs2+mTXaKHOUsgHMLzg==}
+    engines: {node: '>=23.5.0 || ^22.13.0 || ^20.17.0'}
     peerDependencies:
       '@types/node': '>=18'
     peerDependenciesMeta:
       '@types/node':
         optional: true
 
-  '@inquirer/prompts@7.10.1':
-    resolution: {integrity: sha512-Dx/y9bCQcXLI5ooQ5KyvA4FTgeo2jYj/7plWfV5Ak5wDPKQZgudKez2ixyfz7tKXzcJciTxqLeK7R9HItwiByg==}
-    engines: {node: '>=18'}
+  '@inquirer/prompts@8.5.2':
+    resolution: {integrity: sha512-IYR/3C/paEVVQYQvdDlFZVjRCJVYHHON0XXMH91KO9GSxs0TdKYWlUdvfQl2EfAHDxUaN3IBffkE/BDTh5nJ6g==}
+    engines: {node: '>=23.5.0 || ^22.13.0 || ^20.17.0'}
     peerDependencies:
       '@types/node': '>=18'
     peerDependenciesMeta:
       '@types/node':
         optional: true
 
-  '@inquirer/rawlist@4.1.11':
-    resolution: {integrity: sha512-+LLQB8XGr3I5LZN/GuAHo+GpDJegQwuPARLChlMICNdwW7OwV2izlCSCxN6cqpL0sMXmbKbFcItJgdQq5EBXTw==}
-    engines: {node: '>=18'}
+  '@inquirer/rawlist@5.3.1':
+    resolution: {integrity: sha512-QqdTqQddL3qPX/PPrjobpsO25NZ4dWXgTLenrR445L2ptLEYE6Z+PD5c5CNDJNx4ugRgELAIpSIJxZaO2jJ2Og==}
+    engines: {node: '>=23.5.0 || ^22.13.0 || ^20.17.0'}
     peerDependencies:
       '@types/node': '>=18'
     peerDependenciesMeta:
       '@types/node':
         optional: true
 
-  '@inquirer/search@3.2.2':
-    resolution: {integrity: sha512-p2bvRfENXCZdWF/U2BXvnSI9h+tuA8iNqtUKb9UWbmLYCRQxd8WkvwWvYn+3NgYaNwdUkHytJMGG4MMLucI1kA==}
-    engines: {node: '>=18'}
+  '@inquirer/search@4.2.1':
+    resolution: {integrity: sha512-xJj8QWKRSrfKoBIITLZK61dD3zwo0Rz11fgDImku30/Oe81zMdIdGgrLY2h6RkJ+KZ/GhNYIRMKnH/62qBTA5g==}
+    engines: {node: '>=23.5.0 || ^22.13.0 || ^20.17.0'}
     peerDependencies:
       '@types/node': '>=18'
     peerDependenciesMeta:
       '@types/node':
         optional: true
 
-  '@inquirer/select@4.4.2':
-    resolution: {integrity: sha512-l4xMuJo55MAe+N7Qr4rX90vypFwCajSakx59qe/tMaC1aEHWLyw68wF4o0A4SLAY4E0nd+Vt+EyskeDIqu1M6w==}
-    engines: {node: '>=18'}
+  '@inquirer/select@5.2.1':
+    resolution: {integrity: sha512-FlDndEUww8m7BfukO2nJa25vhD+H5jxxCv4oGioKqzyWz3nPHhhw4LKdYRSlXuAx7DsdWia7iyaBPKKS95Evfw==}
+    engines: {node: '>=23.5.0 || ^22.13.0 || ^20.17.0'}
     peerDependencies:
       '@types/node': '>=18'
     peerDependenciesMeta:
       '@types/node':
         optional: true
 
-  '@inquirer/type@3.0.10':
-    resolution: {integrity: sha512-BvziSRxfz5Ov8ch0z/n3oijRSEcEsHnhggm4xFZe93DHcUCTlutlq9Ox4SVENAfcRD22UQq7T/atg9Wr3k09eA==}
-    engines: {node: '>=18'}
+  '@inquirer/type@4.0.7':
+    resolution: {integrity: sha512-t28inv14nMQ1PhKpsJPY+kEs/c00qzeCOS2gTNRyTjG5d6qsVA2fItxW4hkvGZ5lvanGLdtCzVIx5dwdRpN1+g==}
+    engines: {node: '>=23.5.0 || ^22.13.0 || ^20.17.0'}
     peerDependencies:
       '@types/node': '>=18'
     peerDependenciesMeta:
       '@types/node':
         optional: true
 
-  '@isaacs/cliui@8.0.2':
-    resolution: {integrity: sha512-O8jcjabXaleOG9DQ0+ARXWZBTfnP4WNAqzuiJK7ll44AmxGKv/J2M4TPjxjY3znBCfvBXFzucm1twdyFybFqEA==}
-    engines: {node: '>=12'}
-
-  '@jridgewell/gen-mapping@0.3.12':
-    resolution: {integrity: sha512-OuLGC46TjB5BbN1dH8JULVVZY4WTdkF7tV9Ys6wLL1rubZnCMstOhNHueU5bLCrnRuDhKPDM4g6sw4Bel5Gzqg==}
-
-  '@jridgewell/gen-mapping@0.3.5':
-    resolution: {integrity: sha512-IzL8ZoEDIBRWEzlCcRhOaCupYyN5gdIK+Q6fbFdPDg6HqX6jpkItn7DFIpW9LQzXG6Df9sA7+OKnq0qlz/GaQg==}
-    engines: {node: '>=6.0.0'}
+  '@jridgewell/gen-mapping@0.3.13':
+    resolution: {integrity: sha512-2kkt/7niJ6MgEPxF0bYdQ6etZaA+fQvDcLKckhy1yIQOzaoKjBBjSj63/aLVjYE3qhRt5dvM+uUyfCg6UKCBbA==}
 
   '@jridgewell/remapping@2.3.5':
     resolution: {integrity: sha512-LI9u/+laYG4Ds1TDKSJW2YPrIlcVYOwi2fUC6xB43lueCjgxV4lffOCZCtYFiH6TNOX+tQKXx97T4IKHbhyHEQ==}
@@ -1550,28 +1136,21 @@ packages:
     resolution: {integrity: sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==}
     engines: {node: '>=6.0.0'}
 
-  '@jridgewell/set-array@1.2.1':
-    resolution: {integrity: sha512-R8gLRTZeyp03ymzP/6Lil/28tGeGEzhx1q2k703KGWRAI1VdvPIXdG70VJc2pAMw3NA6JKL5hhFu1sJX0Mnn/A==}
-    engines: {node: '>=6.0.0'}
-
-  '@jridgewell/source-map@0.3.6':
-    resolution: {integrity: sha512-1ZJTZebgqllO79ue2bm3rIGud/bOe0pP5BjSRCRxxYkEZS8STV7zN84UBbiYu7jy+eCKSnVIUgoWWE/tt+shMQ==}
+  '@jridgewell/source-map@0.3.11':
+    resolution: {integrity: sha512-ZMp1V8ZFcPG5dIWnQLr3NSI1MiCU7UETdS/A0G8V/XWHvJv3ZsFqutJn1Y5RPmAPX6F3BiE397OqveU/9NCuIA==}
 
   '@jridgewell/sourcemap-codec@1.5.5':
     resolution: {integrity: sha512-cYQ9310grqxueWbl+WuIUIaiUaDcj7WOq5fVhEljNVgRfOUhY9fy2zTvfoqWsnebh8Sl70VScFbICvJnLKB0Og==}
 
-  '@jridgewell/trace-mapping@0.3.25':
-    resolution: {integrity: sha512-vNk6aEwybGtawWmy/PzwnGDOjCkLWSD2wqvjGGAgOAwCGWySYXfYoxt00IJkTF+8Lb57DwOb3Aa0o9CApepiYQ==}
+  '@jridgewell/trace-mapping@0.3.31':
+    resolution: {integrity: sha512-zzNR+SdQSDJzc8joaeP8QQoCQr8NuYx2dIIytl1QeBEZHJ9uW6hebsrYgbz8hJwUQao3TWCMtmfV8Nu1twOLAw==}
 
-  '@jridgewell/trace-mapping@0.3.29':
-    resolution: {integrity: sha512-uw6guiW/gcAGPDhLmd77/6lW8QLeiV5RUTsAX46Db6oLhGaVj4lhnPwb184s1bkc8kdVg/+h988dro8GRDpmYQ==}
-
-  '@napi-rs/cli@3.4.1':
-    resolution: {integrity: sha512-ayhm+NfrP5Hmh7vy5pfyYm/ktYtLh2PrgdLuqHTAubO7RoO2JkUE4F991AtgYxNewwXI8+guZLxU8itV7QnDrQ==}
+  '@napi-rs/cli@3.7.4':
+    resolution: {integrity: sha512-idELIUceJ9zPgx/shcMt1fSSsteFG68v56RIXi4qUm7OYuJOt7CoMj2KnHVmbOqXgUHWQU1lCULrtQdZDG4F5A==}
     engines: {node: '>= 16'}
     hasBin: true
     peerDependencies:
-      '@emnapi/runtime': ^1.5.0
+      '@emnapi/runtime': ^1.7.1
     peerDependenciesMeta:
       '@emnapi/runtime':
         optional: true
@@ -1652,42 +1231,49 @@ packages:
     engines: {node: '>= 10'}
     cpu: [arm64]
     os: [linux]
+    libc: [glibc]
 
   '@napi-rs/lzma-linux-arm64-musl@1.4.5':
     resolution: {integrity: sha512-yWjcPDgJ2nIL3KNvi4536dlT/CcCWO0DUyEOlBs/SacG7BeD6IjGh6yYzd3/X1Y3JItCbZoDoLUH8iB1lTXo3w==}
     engines: {node: '>= 10'}
     cpu: [arm64]
     os: [linux]
+    libc: [musl]
 
   '@napi-rs/lzma-linux-ppc64-gnu@1.4.5':
     resolution: {integrity: sha512-0XRhKuIU/9ZjT4WDIG/qnX7Xz7mSQHYZo9Gb3MP2gcvBgr6BA4zywQ9k3gmQaPn9ECE+CZg2V7DV7kT+x2pUMQ==}
     engines: {node: '>= 10'}
     cpu: [ppc64]
     os: [linux]
+    libc: [glibc]
 
   '@napi-rs/lzma-linux-riscv64-gnu@1.4.5':
     resolution: {integrity: sha512-QrqDIPEUUB23GCpyQj/QFyMlr8SGxxyExeZz9OWFnHfb70kXdTLWrHS/hEI1Ru+lSbQ/6xRqeoGyQ4Aqdg+/RA==}
     engines: {node: '>= 10'}
     cpu: [riscv64]
     os: [linux]
+    libc: [glibc]
 
   '@napi-rs/lzma-linux-s390x-gnu@1.4.5':
     resolution: {integrity: sha512-k8RVM5aMhW86E9H0QXdquwojew4H3SwPxbRVbl49/COJQWCUjGi79X6mYruMnMPEznZinUiT1jgKbFo2A00NdA==}
     engines: {node: '>= 10'}
     cpu: [s390x]
     os: [linux]
+    libc: [glibc]
 
   '@napi-rs/lzma-linux-x64-gnu@1.4.5':
     resolution: {integrity: sha512-6rMtBgnIq2Wcl1rQdZsnM+rtCcVCbws1nF8S2NzaUsVaZv8bjrPiAa0lwg4Eqnn1d9lgwqT+cZgm5m+//K08Kw==}
     engines: {node: '>= 10'}
     cpu: [x64]
     os: [linux]
+    libc: [glibc]
 
   '@napi-rs/lzma-linux-x64-musl@1.4.5':
     resolution: {integrity: sha512-eiadGBKi7Vd0bCArBUOO/qqRYPHt/VQVvGyYvDFt6C2ZSIjlD+HuOl+2oS1sjf4CFjK4eDIog6EdXnL0NE6iyQ==}
     engines: {node: '>= 10'}
     cpu: [x64]
     os: [linux]
+    libc: [musl]
 
   '@napi-rs/lzma-wasm32-wasi@1.4.5':
     resolution: {integrity: sha512-+VyHHlr68dvey6fXc2hehw9gHVFIW3TtGF1XkcbAu65qVXsA9D/T+uuoRVqhE+JCyFHFrO0ixRbZDRK1XJt1sA==}
@@ -1757,36 +1343,42 @@ packages:
     engines: {node: '>= 10'}
     cpu: [arm64]
     os: [linux]
+    libc: [glibc]
 
   '@napi-rs/tar-linux-arm64-musl@1.1.0':
     resolution: {integrity: sha512-L/y1/26q9L/uBqiW/JdOb/Dc94egFvNALUZV2WCGKQXc6UByPBMgdiEyW2dtoYxYYYYc+AKD+jr+wQPcvX2vrQ==}
     engines: {node: '>= 10'}
     cpu: [arm64]
     os: [linux]
+    libc: [musl]
 
   '@napi-rs/tar-linux-ppc64-gnu@1.1.0':
     resolution: {integrity: sha512-EPE1K/80RQvPbLRJDJs1QmCIcH+7WRi0F73+oTe1582y9RtfGRuzAkzeBuAGRXAQEjRQw/RjtNqr6UTJ+8UuWQ==}
     engines: {node: '>= 10'}
     cpu: [ppc64]
     os: [linux]
+    libc: [glibc]
 
   '@napi-rs/tar-linux-s390x-gnu@1.1.0':
     resolution: {integrity: sha512-B2jhWiB1ffw1nQBqLUP1h4+J1ovAxBOoe5N2IqDMOc63fsPZKNqF1PvO/dIem8z7LL4U4bsfmhy3gBfu547oNQ==}
     engines: {node: '>= 10'}
     cpu: [s390x]
     os: [linux]
+    libc: [glibc]
 
   '@napi-rs/tar-linux-x64-gnu@1.1.0':
     resolution: {integrity: sha512-tbZDHnb9617lTnsDMGo/eAMZxnsQFnaRe+MszRqHguKfMwkisc9CCJnks/r1o84u5fECI+J/HOrKXgczq/3Oww==}
     engines: {node: '>= 10'}
     cpu: [x64]
     os: [linux]
+    libc: [glibc]
 
   '@napi-rs/tar-linux-x64-musl@1.1.0':
     resolution: {integrity: sha512-dV6cODlzbO8u6Anmv2N/ilQHq/AWz0xyltuXoLU3yUyXbZcnWYZuB2rL8OBGPmqNcD+x9NdScBNXh7vWN0naSQ==}
     engines: {node: '>= 10'}
     cpu: [x64]
     os: [linux]
+    libc: [musl]
 
   '@napi-rs/tar-wasm32-wasi@1.1.0':
     resolution: {integrity: sha512-jIa9nb2HzOrfH0F8QQ9g3WE4aMH5vSI5/1NYVNm9ysCmNjCCtMXCAhlI3WKCdm/DwHf0zLqdrrtDFXODcNaqMw==}
@@ -1815,8 +1407,18 @@ packages:
     resolution: {integrity: sha512-7cmzIu+Vbupriudo7UudoMRH2OA3cTw67vva8MxeoAe5S7vPFI7z0vp0pMXiA25S8IUJefImQ90FeJjl8fjEaQ==}
     engines: {node: '>= 10'}
 
-  '@napi-rs/wasm-runtime@1.1.1':
-    resolution: {integrity: sha512-p64ah1M1ld8xjWv3qbvFwHiFVWrq1yFvV4f7w+mzaqiR4IlSgkqhcRdHwsGgomwzBH51sRY4NEowLxnaBjcW/A==}
+  '@napi-rs/wasm-runtime@1.1.4':
+    resolution: {integrity: sha512-3NQNNgA1YSlJb/kMH1ildASP9HW7/7kYnRI2szWJaofaS1hWmbGI4H+d3+22aGzXXN9IJ+n+GiFVcGipJP18ow==}
+    peerDependencies:
+      '@emnapi/core': ^1.7.1
+      '@emnapi/runtime': ^1.7.1
+
+  '@napi-rs/wasm-runtime@1.2.2':
+    resolution: {integrity: sha512-JfB4kuJQjaoHuCTseIINHtHWeJnvgEcxjwA5t/Y00ZgaOO1Crz3fjT/p8kT28zA/Caz7oiUMn3d6H2yOVCVwuw==}
+    engines: {node: ^20.19.0 || ^22.13.0 || >=23.5.0}
+    peerDependencies:
+      '@emnapi/core': ^1.7.1 || ^2.0.0-alpha.3
+      '@emnapi/runtime': ^1.7.1 || ^2.0.0-alpha.3
 
   '@napi-rs/wasm-tools-android-arm-eabi@1.0.1':
     resolution: {integrity: sha512-lr07E/l571Gft5v4aA1dI8koJEmF1F0UigBbsqg9OWNzg80H3lDPO+auv85y3T/NHE3GirDk7x/D3sLO57vayw==}
@@ -1853,24 +1455,28 @@ packages:
     engines: {node: '>= 10'}
     cpu: [arm64]
     os: [linux]
+    libc: [glibc]
 
   '@napi-rs/wasm-tools-linux-arm64-musl@1.0.1':
     resolution: {integrity: sha512-jAasbIvjZXCgX0TCuEFQr+4D6Lla/3AAVx2LmDuMjgG4xoIXzjKWl7c4chuaD+TI+prWT0X6LJcdzFT+ROKGHQ==}
     engines: {node: '>= 10'}
     cpu: [arm64]
     os: [linux]
+    libc: [musl]
 
   '@napi-rs/wasm-tools-linux-x64-gnu@1.0.1':
     resolution: {integrity: sha512-Plgk5rPqqK2nocBGajkMVbGm010Z7dnUgq0wtnYRZbzWWxwWcXfZMPa8EYxrK4eE8SzpI7VlZP1tdVsdjgGwMw==}
     engines: {node: '>= 10'}
     cpu: [x64]
     os: [linux]
+    libc: [glibc]
 
   '@napi-rs/wasm-tools-linux-x64-musl@1.0.1':
     resolution: {integrity: sha512-GW7AzGuWxtQkyHknHWYFdR0CHmW6is8rG2Rf4V6GNmMpmwtXt/ItWYWtBe4zqJWycMNazpfZKSw/BpT7/MVCXQ==}
     engines: {node: '>= 10'}
     cpu: [x64]
     os: [linux]
+    libc: [musl]
 
   '@napi-rs/wasm-tools-wasm32-wasi@1.0.1':
     resolution: {integrity: sha512-/nQVSTrqSsn7YdAc2R7Ips/tnw5SPUcl3D7QrXCNGPqjbatIspnaexvaOYNyKMU6xPu+pc0BTnKVmqhlJJCPLA==}
@@ -1899,56 +1505,57 @@ packages:
     resolution: {integrity: sha512-enkZYyuCdo+9jneCPE/0fjIta4wWnvVN9hBo2HuiMpRF0q3lzv1J6b/cl7i0mxZUKhBrV3aCKDBQnCOhwKbPmQ==}
     engines: {node: '>= 10'}
 
-  '@next/env@16.1.6':
-    resolution: {integrity: sha512-N1ySLuZjnAtN3kFnwhAwPvZah8RJxKasD7x1f8shFqhncnWZn4JMfg37diLNuoHsLAlrDfM3g4mawVdtAG8XLQ==}
+  '@next/env@16.2.7':
+    resolution: {integrity: sha512-tMJizPlj6ZYpBMMdK8S0LJufrP4QTdR6pcv9KQ/bVETPAmg0j1mlHE9G2c38UyGHxoBapgwuj7XjbGJ2RcDFOg==}
 
-  '@next/eslint-plugin-next@16.1.6':
-    resolution: {integrity: sha512-/Qq3PTagA6+nYVfryAtQ7/9FEr/6YVyvOtl6rZnGsbReGLf0jZU6gkpr1FuChAQpvV46a78p4cmHOVP8mbfSMQ==}
-
-  '@next/swc-darwin-arm64@16.1.6':
-    resolution: {integrity: sha512-wTzYulosJr/6nFnqGW7FrG3jfUUlEf8UjGA0/pyypJl42ExdVgC6xJgcXQ+V8QFn6niSG2Pb8+MIG1mZr2vczw==}
+  '@next/swc-darwin-arm64@16.2.7':
+    resolution: {integrity: sha512-vm1EDI/pVaBNNiychmxk3fft+OhQPVD9cIM/tReLZIQ3TfQ4kqI9DwKk00dzuS1ulC7icbrzCFrmRRlk9PfNdw==}
     engines: {node: '>= 10'}
     cpu: [arm64]
     os: [darwin]
 
-  '@next/swc-darwin-x64@16.1.6':
-    resolution: {integrity: sha512-BLFPYPDO+MNJsiDWbeVzqvYd4NyuRrEYVB5k2N3JfWncuHAy2IVwMAOlVQDFjj+krkWzhY2apvmekMkfQR0CUQ==}
+  '@next/swc-darwin-x64@16.2.7':
+    resolution: {integrity: sha512-O3IRSv1ZBL1zs0WrIgefTEcTKFVn+ryxBNe54erJ6KsD+2f/Mmt7g2jOYh8PSBdUwPtKQJuCsTMlZ7tIu2AcsQ==}
     engines: {node: '>= 10'}
     cpu: [x64]
     os: [darwin]
 
-  '@next/swc-linux-arm64-gnu@16.1.6':
-    resolution: {integrity: sha512-OJYkCd5pj/QloBvoEcJ2XiMnlJkRv9idWA/j0ugSuA34gMT6f5b7vOiCQHVRpvStoZUknhl6/UxOXL4OwtdaBw==}
+  '@next/swc-linux-arm64-gnu@16.2.7':
+    resolution: {integrity: sha512-Re6PZtjBDd0aMU+VcZcC/PrIvj4WhrjDYtMhhCVQamWN4L90EVP0pcEOBQD25prSlw7OzNw5QpHLWMilRLsRNw==}
     engines: {node: '>= 10'}
     cpu: [arm64]
     os: [linux]
+    libc: [glibc]
 
-  '@next/swc-linux-arm64-musl@16.1.6':
-    resolution: {integrity: sha512-S4J2v+8tT3NIO9u2q+S0G5KdvNDjXfAv06OhfOzNDaBn5rw84DGXWndOEB7d5/x852A20sW1M56vhC/tRVbccQ==}
+  '@next/swc-linux-arm64-musl@16.2.7':
+    resolution: {integrity: sha512-qyogG9QtBzWxgJfeGBvOEHI3851gTfCF3wLZ5RDLTBJGAmE9p1qDwKCOdrBrvBzRvYDT+gUDp72pzlSEfAXgNA==}
     engines: {node: '>= 10'}
     cpu: [arm64]
     os: [linux]
+    libc: [musl]
 
-  '@next/swc-linux-x64-gnu@16.1.6':
-    resolution: {integrity: sha512-2eEBDkFlMMNQnkTyPBhQOAyn2qMxyG2eE7GPH2WIDGEpEILcBPI/jdSv4t6xupSP+ot/jkfrCShLAa7+ZUPcJQ==}
+  '@next/swc-linux-x64-gnu@16.2.7':
+    resolution: {integrity: sha512-Vhe4ZDuBpmMogrGi5D4R2Kq4JAQlj6+wvgaFYy31zfES0zPmt6TLA+cuYpM/OLrPZjo2MYQTHVqNUSCR6+fDZQ==}
     engines: {node: '>= 10'}
     cpu: [x64]
     os: [linux]
+    libc: [glibc]
 
-  '@next/swc-linux-x64-musl@16.1.6':
-    resolution: {integrity: sha512-oicJwRlyOoZXVlxmIMaTq7f8pN9QNbdes0q2FXfRsPhfCi8n8JmOZJm5oo1pwDaFbnnD421rVU409M3evFbIqg==}
+  '@next/swc-linux-x64-musl@16.2.7':
+    resolution: {integrity: sha512-srvian89JahFLw1YLBEuhvPJ0DO5lpUeJQMXy4xYo7g628ZlNgXdNkqoxSAv9OYrBfByh6vxISMwW/mRbzCY+g==}
     engines: {node: '>= 10'}
     cpu: [x64]
     os: [linux]
+    libc: [musl]
 
-  '@next/swc-win32-arm64-msvc@16.1.6':
-    resolution: {integrity: sha512-gQmm8izDTPgs+DCWH22kcDmuUp7NyiJgEl18bcr8irXA5N2m2O+JQIr6f3ct42GOs9c0h8QF3L5SzIxcYAAXXw==}
+  '@next/swc-win32-arm64-msvc@16.2.7':
+    resolution: {integrity: sha512-GX3wvLpULFuRFJzwHaKfm7QZJ18F4ZSuxlPJ96BoBglCzBmdSjyeBKF+ZhWhvL/ckxNfLnNa7bsObO2ipYpszw==}
     engines: {node: '>= 10'}
     cpu: [arm64]
     os: [win32]
 
-  '@next/swc-win32-x64-msvc@16.1.6':
-    resolution: {integrity: sha512-NRfO39AIrzBnixKbjuo2YiYhB6o9d8v/ymU9m/Xk8cyVk+k7XylniXkHwjs4s70wedVffc6bQNbufk5v0xEm0A==}
+  '@next/swc-win32-x64-msvc@16.2.7':
+    resolution: {integrity: sha512-J4WlM72NMk076Qsg0jTdK3SNXatlSdnjW7L7oNGLst1tAGjHrJh/FYi+pw9wyIjEtGRKDNzD0zuiY16oWYWVaw==}
     engines: {node: '>= 10'}
     cpu: [x64]
     os: [win32]
@@ -1965,10 +1572,6 @@ packages:
     resolution: {integrity: sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==}
     engines: {node: '>= 8'}
 
-  '@nolyfill/is-core-module@1.0.39':
-    resolution: {integrity: sha512-nn5ozdjYQpUCZlWGuxcJY/KpxkWQs4DcbMCmKojjyrYDEAGy4Ce19NN4v5MduafTwJlbKc99UA8YhSVqq9yPZA==}
-    engines: {node: '>=12.4.0'}
-
   '@octokit/auth-token@6.0.0':
     resolution: {integrity: sha512-P4YJBPdPSpWTQ1NU4XYdvHvXJJDxM6YwpS0FZHRgP7YFkdVxsWcpWGy/NVqlAA7PcPCnMacXlRm1y2PFZRWL/w==}
     engines: {node: '>= 20'}
@@ -1977,8 +1580,8 @@ packages:
     resolution: {integrity: sha512-DhGl4xMVFGVIyMwswXeyzdL4uXD5OGILGX5N8Y+f6W7LhC1Ze2poSNrkF/fedpVDHEEZ+PHFW0vL14I+mm8K3Q==}
     engines: {node: '>= 20'}
 
-  '@octokit/endpoint@11.0.2':
-    resolution: {integrity: sha512-4zCpzP1fWc7QlqunZ5bSEjxc6yLAlRTnDwKtgXfcI/FxxGoqedDG8V2+xJ60bV2kODqcGB+nATdtap/XYq2NZQ==}
+  '@octokit/endpoint@11.0.3':
+    resolution: {integrity: sha512-FWFlNxghg4HrXkD3ifYbS/IdL/mDHjh9QcsNyhQjN8dplUoZbejsdpmuqdA76nxj2xoWPs7p8uX2SNr9rYu0Ag==}
     engines: {node: '>= 20'}
 
   '@octokit/graphql@9.0.3':
@@ -2010,8 +1613,8 @@ packages:
     resolution: {integrity: sha512-KMQIfq5sOPpkQYajXHwnhjCC0slzCNScLHs9JafXc4RAJI+9f+jNDlBNaIMTvazOPLgb4BnlhGJOTbnN0wIjPw==}
     engines: {node: '>= 20'}
 
-  '@octokit/request@10.0.7':
-    resolution: {integrity: sha512-v93h0i1yu4idj8qFPZwjehoJx4j3Ntn+JhXsdJrG9pYaX6j/XRz2RmasMUHtNgQD39nrv/VwTWSqK0RNXR8upA==}
+  '@octokit/request@10.0.9':
+    resolution: {integrity: sha512-o8Bi3f608eyM+7BmBiUWxFsdjLb3/ym1cQek5LZOv9KkZcxRrHCPhhRzm6xjO6HVZ85ItD6+sTsjxo821SVa/A==}
     engines: {node: '>= 20'}
 
   '@octokit/rest@22.0.1':
@@ -2021,486 +1624,487 @@ packages:
   '@octokit/types@16.0.0':
     resolution: {integrity: sha512-sKq+9r1Mm4efXW1FCk7hFSeJo4QKreL/tTbR0rz/qx/r1Oa2VV83LTA/H/MuCOX7uCIJmQVRKBcbmWoySjAnSg==}
 
-  '@oven/bun-darwin-aarch64@1.3.9':
-    resolution: {integrity: sha512-df7smckMWSUfaT5mzwN9Lfpd3ZGkOqo+vmQ8VV2a32gl14v6uZ/qeeo+1RlANXn8M0uzXPWWCkrKZIWSZUR0qw==}
+  '@oven/bun-darwin-aarch64@1.3.14':
+    resolution: {integrity: sha512-Omj20SuiHBOUjUBIyqtkNjSUIjOtEOJwmbix/ZyFH4BaQ6OZTaaRWIR4TjHVz0yadHgli6lLTiAh1uarnvD49A==}
     cpu: [arm64]
     os: [darwin]
 
-  '@oven/bun-darwin-x64-baseline@1.3.9':
-    resolution: {integrity: sha512-XbhsA2XAFzvFr0vPSV6SNqGxab4xHKdPmVTLqoSHAx9tffrSq/012BDptOskulwnD+YNsrJUx2D2Ve1xvfgGcg==}
+  '@oven/bun-darwin-x64-baseline@1.3.14':
+    resolution: {integrity: sha512-OSfsTZstc898HHElhU4NccaBGOSSDn5VfahiVTnidZ9B/+wb7WTyfZJaBeJcfjwJ9H2W9uTh2TGtl3UfcXgV9g==}
     cpu: [x64]
     os: [darwin]
 
-  '@oven/bun-darwin-x64@1.3.9':
-    resolution: {integrity: sha512-YiLxfsPzQqaVvT2a+nxH9do0YfUjrlxF3tKP0b1DDgvfgCcVKGsrQH3Wa82qHgL4dnT8h2bqi94JxXESEuPmcA==}
+  '@oven/bun-darwin-x64@1.3.14':
+    resolution: {integrity: sha512-FFj3QdU/OhlDyZOJ8CWfN5eWLpRlT4qjZg7lMQi7jA6GuoY5ajlO1zWLP/MuHYRSbXQUvV52RejNi8DVnAp13w==}
     cpu: [x64]
     os: [darwin]
 
-  '@oven/bun-linux-aarch64-musl@1.3.9':
-    resolution: {integrity: sha512-t8uimCVBTw5f9K2QTZE5wN6UOrFETNrh/Xr7qtXT9nAOzaOnIFvYA+HcHbGfi31fRlCVfTxqm/EiCwJ1gEw9YQ==}
+  '@oven/bun-freebsd-aarch64@1.3.14':
+    resolution: {integrity: sha512-LIKrXaFxAHybVO5Pf+9XP2FHUj/5APvXTUKk9dqHm5iFz4oH+W24cmhjkJirNujh9hKeTyrpWSe3no9JZKowIw==}
+    cpu: [arm64]
+    os: [freebsd]
+
+  '@oven/bun-freebsd-x64@1.3.14':
+    resolution: {integrity: sha512-uwD+fGUH1ADpIF3B1U2jWzzb20QwRLZfj5QZ28GUCGrAJ/nTmWrD6YYGsblCY1wuhldRez3lU40AyuvSCyLYmw==}
+    cpu: [x64]
+    os: [freebsd]
+
+  '@oven/bun-linux-aarch64-android@1.3.14':
+    resolution: {integrity: sha512-y4kq5b85lsrmFb9Xvi4w9mA5IEFJkLMrSmYn06q24KjL9rUWDWO3VFZEtteZxUN5+ec3Zm5S8OnJw1umaCbVjA==}
+    cpu: [arm64]
+    os: [android]
+
+  '@oven/bun-linux-aarch64-musl@1.3.14':
+    resolution: {integrity: sha512-jmqOA92Cd1NL/1XBd4bFkJLxQ86K0RW7ohxS2qzzAvuitO4JiIxjjTeCspoU44zCozH72HpfZfUE2On31OjnWA==}
     cpu: [arm64]
     os: [linux]
 
-  '@oven/bun-linux-aarch64@1.3.9':
-    resolution: {integrity: sha512-VaNQTu0Up4gnwZLQ6/Hmho6jAlLxTQ1PwxEth8EsXHf82FOXXPV5OCQ6KC9mmmocjKlmWFaIGebThrOy8DUo4g==}
+  '@oven/bun-linux-aarch64@1.3.14':
+    resolution: {integrity: sha512-X5SsPZHs+iYO8R/efIcRtc7gT2Q2DgPfliCxEkx4cXBumwkw0c/EsHMNwH3EgGpCDaZ7IYVPhpCG/xBOQHEwZw==}
     cpu: [arm64]
     os: [linux]
 
-  '@oven/bun-linux-x64-baseline@1.3.9':
-    resolution: {integrity: sha512-nZ12g22cy7pEOBwAxz2tp0wVqekaCn9QRKuGTHqOdLlyAqR4SCdErDvDhUWd51bIyHTQoCmj72TegGTgG0WNPw==}
+  '@oven/bun-linux-x64-android@1.3.14':
+    resolution: {integrity: sha512-qe9e1d+3VAEU7nAA2ol9Jvmy/o99PVMSgZhHn7Q/9O3YcDrfEqyQ8zm4zoe5qTEo8HZH0dN03Le0Ys2eQPs7eg==}
+    cpu: [x64]
+    os: [android]
+
+  '@oven/bun-linux-x64-baseline@1.3.14':
+    resolution: {integrity: sha512-q/8EdOC0yUE8FPeoOVq8/Pw5I9/tJaYmUfO/uDUAREx8IUnOJH1RJ5A3BjFqre8pvJoiZA9AovPJq5FnNNjSxA==}
     cpu: [x64]
     os: [linux]
 
-  '@oven/bun-linux-x64-musl-baseline@1.3.9':
-    resolution: {integrity: sha512-3FXQgtYFsT0YOmAdMcJn56pLM5kzSl6y942rJJIl5l2KummB9Ea3J/vMJMzQk7NCAGhleZGWU/pJSS/uXKGa7w==}
+  '@oven/bun-linux-x64-musl-baseline@1.3.14':
+    resolution: {integrity: sha512-n6iE71G4lQE4XkrZhQQcL5YUlxDbnq6nqV7zeQi33PMsLT/0kYE+RvHOtBWZ3w0wMdXZfINmp63hIb9ijUBGtw==}
     cpu: [x64]
     os: [linux]
 
-  '@oven/bun-linux-x64-musl@1.3.9':
-    resolution: {integrity: sha512-4ZjIUgCxEyKwcKXideB5sX0KJpnHTZtu778w73VNq2uNH2fNpMZv98+DBgJyQ9OfFoRhmKn1bmLmSefvnHzI9w==}
+  '@oven/bun-linux-x64-musl@1.3.14':
+    resolution: {integrity: sha512-GBCB/k/sIqcr06eTNgg7g46qiUv35Jasx4XiccJ/n7RGqrE4RWUD/XJBbWFprVPjvqd59+QtSnS99XGqvftHfg==}
     cpu: [x64]
     os: [linux]
 
-  '@oven/bun-linux-x64@1.3.9':
-    resolution: {integrity: sha512-oQyAW3+ugulvXTZ+XYeUMmNPR94sJeMokfHQoKwPvVwhVkgRuMhcLGV2ZesHCADVu30Oz2MFXbgdC8x4/o9dRg==}
+  '@oven/bun-linux-x64@1.3.14':
+    resolution: {integrity: sha512-7OVTAKvwfPmSbIV1HpdOoVVx5VRc427GuPPne93N6vk4eQBPId9nXmZDh9/zGaKPdbVjVtQSZafWQoUjx38Utw==}
     cpu: [x64]
     os: [linux]
 
-  '@oven/bun-windows-x64-baseline@1.3.9':
-    resolution: {integrity: sha512-a/+hSrrDpMD7THyXvE2KJy1skxzAD0cnW4K1WjuI/91VqsphjNzvf5t/ZgxEVL4wb6f+hKrSJ5J3aH47zPr61g==}
+  '@oven/bun-windows-aarch64@1.3.14':
+    resolution: {integrity: sha512-T7s3x/BsVKQObGU6QDkZeI6wKynzqGbBH1yI77jrrj5siElclxr3DQrDIk8CV4G5/SJq2HHq4kpLyYY2DKCSmA==}
+    cpu: [arm64]
+    os: [win32]
+
+  '@oven/bun-windows-x64-baseline@1.3.14':
+    resolution: {integrity: sha512-uIjLUC1S9DWgICzuoMba7vurBJnBruE4S5CxnvmZkdqWVXRzx1Rgu636HoH+k0qeaQCFh3jeG3JQ1y6fRHv0sw==}
     cpu: [x64]
     os: [win32]
 
-  '@oven/bun-windows-x64@1.3.9':
-    resolution: {integrity: sha512-/d6vAmgKvkoYlsGPsRPlPmOK1slPis/F40UG02pYwypTH0wmY0smgzdFqR4YmryxFh17XrW1kITv+U99Oajk9Q==}
+  '@oven/bun-windows-x64@1.3.14':
+    resolution: {integrity: sha512-mUFWL3BoYkNpjd8e9PqROiFF/1Xeotq20mABJsiQH62jM1g5zqWh4khw1RZ6bX8Q8fWvlPaxG1PjofkmjUi3vg==}
     cpu: [x64]
     os: [win32]
 
-  '@oxc-project/runtime@0.115.0':
-    resolution: {integrity: sha512-Rg8Wlt5dCbXhQnsXPrkOjL1DTSvXLgb2R/KYfnf1/K+R0k6UMLEmbQXPM+kwrWqSmWA2t0B1EtHy2/3zikQpvQ==}
-    engines: {node: ^20.19.0 || >=22.12.0}
+  '@oxc-project/types@0.142.0':
+    resolution: {integrity: sha512-7W+2q5AKQVU36fkaryontrHn3YDt1RyUYXatw9i5H8ocYe2sPKSFB6eS8WNPeRKiN1qAWWZUPm7gwFzJGrccqQ==}
 
-  '@oxc-project/types@0.115.0':
-    resolution: {integrity: sha512-4n91DKnebUS4yjUHl2g3/b2T+IUdCfmoZGhmwsovZCDaJSs+QkVAM+0AqqTxHSsHfeiMuueT75cZaZcT/m0pSw==}
-
-  '@parcel/watcher-android-arm64@2.5.0':
-    resolution: {integrity: sha512-qlX4eS28bUcQCdribHkg/herLe+0A9RyYC+mm2PXpncit8z5b3nSqGVzMNR3CmtAOgRutiZ02eIJJgP/b1iEFQ==}
+  '@parcel/watcher-android-arm64@2.6.0':
+    resolution: {integrity: sha512-trgpLSCKRC/huFjXX/Smh+0sWe4+YtKfktIToiMl59ghz7z+qkH6kMvNnUbLyRs9N11t8l4svSCs1+5B3rOAhA==}
     engines: {node: '>= 10.0.0'}
     cpu: [arm64]
     os: [android]
 
-  '@parcel/watcher-android-arm64@2.5.1':
-    resolution: {integrity: sha512-KF8+j9nNbUN8vzOFDpRMsaKBHZ/mcjEjMToVMJOhTozkDonQFFrRcfdLWn6yWKCmJKmdVxSgHiYvTCef4/qcBA==}
-    engines: {node: '>= 10.0.0'}
-    cpu: [arm64]
-    os: [android]
-
-  '@parcel/watcher-darwin-arm64@2.5.0':
-    resolution: {integrity: sha512-hyZ3TANnzGfLpRA2s/4U1kbw2ZI4qGxaRJbBH2DCSREFfubMswheh8TeiC1sGZ3z2jUf3s37P0BBlrD3sjVTUw==}
+  '@parcel/watcher-darwin-arm64@2.6.0':
+    resolution: {integrity: sha512-Y3QV0gl7Q1zbfueunkWIERICbEojQFCgpyG7YqOGNFLsckXyI1xu9mAIUpKY9QBYzBtSkN8dBPwd3yiAO9ovMw==}
     engines: {node: '>= 10.0.0'}
     cpu: [arm64]
     os: [darwin]
 
-  '@parcel/watcher-darwin-arm64@2.5.1':
-    resolution: {integrity: sha512-eAzPv5osDmZyBhou8PoF4i6RQXAfeKL9tjb3QzYuccXFMQU0ruIc/POh30ePnaOyD1UXdlKguHBmsTs53tVoPw==}
-    engines: {node: '>= 10.0.0'}
-    cpu: [arm64]
-    os: [darwin]
-
-  '@parcel/watcher-darwin-arm64@2.5.6':
-    resolution: {integrity: sha512-Z2ZdrnwyXvvvdtRHLmM4knydIdU9adO3D4n/0cVipF3rRiwP+3/sfzpAwA/qKFL6i1ModaabkU7IbpeMBgiVEA==}
-    engines: {node: '>= 10.0.0'}
-    os: [darwin]
-
-  '@parcel/watcher-darwin-x64@2.5.0':
-    resolution: {integrity: sha512-9rhlwd78saKf18fT869/poydQK8YqlU26TMiNg7AIu7eBp9adqbJZqmdFOsbZ5cnLp5XvRo9wcFmNHgHdWaGYA==}
+  '@parcel/watcher-darwin-x64@2.6.0':
+    resolution: {integrity: sha512-Ohv6OpzhUfKYD7Beb8kDvG0jbIxORCYY1JRdZnaBtnjjkJxgD7ZVL0nw2sCYd0yTMKTvz3nnTnOF3cDifK+kvw==}
     engines: {node: '>= 10.0.0'}
     cpu: [x64]
     os: [darwin]
 
-  '@parcel/watcher-darwin-x64@2.5.1':
-    resolution: {integrity: sha512-1ZXDthrnNmwv10A0/3AJNZ9JGlzrF82i3gNQcWOzd7nJ8aj+ILyW1MTxVk35Db0u91oD5Nlk9MBiujMlwmeXZg==}
-    engines: {node: '>= 10.0.0'}
-    cpu: [x64]
-    os: [darwin]
-
-  '@parcel/watcher-darwin-x64@2.5.6':
-    resolution: {integrity: sha512-HgvOf3W9dhithcwOWX9uDZyn1lW9R+7tPZ4sug+NGrGIo4Rk1hAXLEbcH1TQSqxts0NYXXlOWqVpvS1SFS4fRg==}
-    engines: {node: '>= 10.0.0'}
-    os: [darwin]
-
-  '@parcel/watcher-freebsd-x64@2.5.0':
-    resolution: {integrity: sha512-syvfhZzyM8kErg3VF0xpV8dixJ+RzbUaaGaeb7uDuz0D3FK97/mZ5AJQ3XNnDsXX7KkFNtyQyFrXZzQIcN49Tw==}
+  '@parcel/watcher-freebsd-x64@2.6.0':
+    resolution: {integrity: sha512-5HmXvDgs8VK+74jF9y9/2FE3/OnlcKmc56tjmSrEuZjpSZOGL+fvAu+HKJBdPs9uwoP2hE6TlSUpXZ/C5jUFmQ==}
     engines: {node: '>= 10.0.0'}
     cpu: [x64]
     os: [freebsd]
 
-  '@parcel/watcher-freebsd-x64@2.5.1':
-    resolution: {integrity: sha512-SI4eljM7Flp9yPuKi8W0ird8TI/JK6CSxju3NojVI6BjHsTyK7zxA9urjVjEKJ5MBYC+bLmMcbAWlZ+rFkLpJQ==}
-    engines: {node: '>= 10.0.0'}
-    cpu: [x64]
-    os: [freebsd]
-
-  '@parcel/watcher-linux-arm-glibc@2.5.0':
-    resolution: {integrity: sha512-0VQY1K35DQET3dVYWpOaPFecqOT9dbuCfzjxoQyif1Wc574t3kOSkKevULddcR9znz1TcklCE7Ht6NIxjvTqLA==}
+  '@parcel/watcher-linux-arm-glibc@2.6.0':
+    resolution: {integrity: sha512-Ps/hui3A+vMbjdqlqAowK2ZL8+BO8dBjxeWXj6npTBs3jx4wWmbPpaLuqwrQrSqIVMCnpWo238bJ1U37GhQOYg==}
     engines: {node: '>= 10.0.0'}
     cpu: [arm]
     os: [linux]
+    libc: [glibc]
 
-  '@parcel/watcher-linux-arm-glibc@2.5.1':
-    resolution: {integrity: sha512-RCdZlEyTs8geyBkkcnPWvtXLY44BCeZKmGYRtSgtwwnHR4dxfHRG3gR99XdMEdQ7KeiDdasJwwvNSF5jKtDwdA==}
+  '@parcel/watcher-linux-arm-musl@2.6.0':
+    resolution: {integrity: sha512-9c6AUHgHoG+IY88MRIHupztQiQnrbqHYQjkM2btA+Bf/wQnQMuiD0Wfk1EVv3TlNT3x41uU71rn6E4xh/+zvkw==}
     engines: {node: '>= 10.0.0'}
     cpu: [arm]
     os: [linux]
+    libc: [musl]
 
-  '@parcel/watcher-linux-arm-musl@2.5.0':
-    resolution: {integrity: sha512-6uHywSIzz8+vi2lAzFeltnYbdHsDm3iIB57d4g5oaB9vKwjb6N6dRIgZMujw4nm5r6v9/BQH0noq6DzHrqr2pA==}
-    engines: {node: '>= 10.0.0'}
-    cpu: [arm]
-    os: [linux]
-
-  '@parcel/watcher-linux-arm-musl@2.5.1':
-    resolution: {integrity: sha512-6E+m/Mm1t1yhB8X412stiKFG3XykmgdIOqhjWj+VL8oHkKABfu/gjFj8DvLrYVHSBNC+/u5PeNrujiSQ1zwd1Q==}
-    engines: {node: '>= 10.0.0'}
-    cpu: [arm]
-    os: [linux]
-
-  '@parcel/watcher-linux-arm64-glibc@2.5.0':
-    resolution: {integrity: sha512-BfNjXwZKxBy4WibDb/LDCriWSKLz+jJRL3cM/DllnHH5QUyoiUNEp3GmL80ZqxeumoADfCCP19+qiYiC8gUBjA==}
+  '@parcel/watcher-linux-arm64-glibc@2.6.0':
+    resolution: {integrity: sha512-yHRqS2owEXe6Hic9z6Mh1ECsCd+ODVOGvZDyciqRd21+v+o+DnXMOrw50DSpIG2sb8GPEaPPmfeCAWKPJdq46g==}
     engines: {node: '>= 10.0.0'}
     cpu: [arm64]
     os: [linux]
 
-  '@parcel/watcher-linux-arm64-glibc@2.5.1':
-    resolution: {integrity: sha512-LrGp+f02yU3BN9A+DGuY3v3bmnFUggAITBGriZHUREfNEzZh/GO06FF5u2kx8x+GBEUYfyTGamol4j3m9ANe8w==}
+  '@parcel/watcher-linux-arm64-musl@2.6.0':
+    resolution: {integrity: sha512-WhB2e/V7rqdHHWZusBSPuy5Ei8S6lSz6FE5TKKQz5h3a0O+C+mhY7vxU9b/stqvMb8beLnPY82ZrFTLKs+SrKA==}
     engines: {node: '>= 10.0.0'}
     cpu: [arm64]
     os: [linux]
 
-  '@parcel/watcher-linux-arm64-glibc@2.5.6':
-    resolution: {integrity: sha512-f2g/DT3NhGPdBmMWYoxixqYr3v/UXcmLOYy16Bx0TM20Tchduwr4EaCbmxh1321TABqPGDpS8D/ggOTaljijOA==}
-    engines: {node: '>= 10.0.0'}
-    os: [linux]
-
-  '@parcel/watcher-linux-arm64-musl@2.5.0':
-    resolution: {integrity: sha512-S1qARKOphxfiBEkwLUbHjCY9BWPdWnW9j7f7Hb2jPplu8UZ3nes7zpPOW9bkLbHRvWM0WDTsjdOTUgW0xLBN1Q==}
-    engines: {node: '>= 10.0.0'}
-    cpu: [arm64]
-    os: [linux]
-
-  '@parcel/watcher-linux-arm64-musl@2.5.1':
-    resolution: {integrity: sha512-cFOjABi92pMYRXS7AcQv9/M1YuKRw8SZniCDw0ssQb/noPkRzA+HBDkwmyOJYp5wXcsTrhxO0zq1U11cK9jsFg==}
-    engines: {node: '>= 10.0.0'}
-    cpu: [arm64]
-    os: [linux]
-
-  '@parcel/watcher-linux-arm64-musl@2.5.6':
-    resolution: {integrity: sha512-qb6naMDGlbCwdhLj6hgoVKJl2odL34z2sqkC7Z6kzir8b5W65WYDpLB6R06KabvZdgoHI/zxke4b3zR0wAbDTA==}
-    engines: {node: '>= 10.0.0'}
-    os: [linux]
-
-  '@parcel/watcher-linux-x64-glibc@2.5.0':
-    resolution: {integrity: sha512-d9AOkusyXARkFD66S6zlGXyzx5RvY+chTP9Jp0ypSTC9d4lzyRs9ovGf/80VCxjKddcUvnsGwCHWuF2EoPgWjw==}
+  '@parcel/watcher-linux-x64-glibc@2.6.0':
+    resolution: {integrity: sha512-ulGE6x6Oz6iAwg75T8YQSoguBWasniIbX+QWpaYPcCnDOpdWX3k+4xbEYPZVLxOuoJI+svJJPD3sEj8G7lrQ3A==}
     engines: {node: '>= 10.0.0'}
     cpu: [x64]
     os: [linux]
 
-  '@parcel/watcher-linux-x64-glibc@2.5.1':
-    resolution: {integrity: sha512-GcESn8NZySmfwlTsIur+49yDqSny2IhPeZfXunQi48DMugKeZ7uy1FX83pO0X22sHntJ4Ub+9k34XQCX+oHt2A==}
+  '@parcel/watcher-linux-x64-musl@2.6.0':
+    resolution: {integrity: sha512-tkBYKt7YQrjIJWYDnto2YgO8MRkjlMTSNoRHzsXinBqbLdeOM3L32wPZJvIZxqaLMfSlS/4sUjH/6STVP/XDLw==}
     engines: {node: '>= 10.0.0'}
     cpu: [x64]
     os: [linux]
 
-  '@parcel/watcher-linux-x64-glibc@2.5.6':
-    resolution: {integrity: sha512-kbT5wvNQlx7NaGjzPFu8nVIW1rWqV780O7ZtkjuWaPUgpv2NMFpjYERVi0UYj1msZNyCzGlaCWEtzc+exjMGbQ==}
-    engines: {node: '>= 10.0.0'}
-    os: [linux]
-
-  '@parcel/watcher-linux-x64-musl@2.5.0':
-    resolution: {integrity: sha512-iqOC+GoTDoFyk/VYSFHwjHhYrk8bljW6zOhPuhi5t9ulqiYq1togGJB5e3PwYVFFfeVgc6pbz3JdQyDoBszVaA==}
-    engines: {node: '>= 10.0.0'}
-    cpu: [x64]
-    os: [linux]
-
-  '@parcel/watcher-linux-x64-musl@2.5.1':
-    resolution: {integrity: sha512-n0E2EQbatQ3bXhcH2D1XIAANAcTZkQICBPVaxMeaCVBtOpBZpWJuf7LwyWPSBDITb7In8mqQgJ7gH8CILCURXg==}
-    engines: {node: '>= 10.0.0'}
-    cpu: [x64]
-    os: [linux]
-
-  '@parcel/watcher-linux-x64-musl@2.5.6':
-    resolution: {integrity: sha512-1JRFeC+h7RdXwldHzTsmdtYR/Ku8SylLgTU/reMuqdVD7CtLwf0VR1FqeprZ0eHQkO0vqsbvFLXUmYm/uNKJBg==}
-    engines: {node: '>= 10.0.0'}
-    os: [linux]
-
-  '@parcel/watcher-wasm@2.5.0':
-    resolution: {integrity: sha512-Z4ouuR8Pfggk1EYYbTaIoxc+Yv4o7cGQnH0Xy8+pQ+HbiW+ZnwhcD2LPf/prfq1nIWpAxjOkQ8uSMFWMtBLiVQ==}
+  '@parcel/watcher-wasm@2.5.6':
+    resolution: {integrity: sha512-byAiBZ1t3tXQvc8dMD/eoyE7lTXYorhn+6uVW5AC+JGI1KtJC/LvDche5cfUE+qiefH+Ybq0bUCJU0aB1cSHUA==}
     engines: {node: '>= 10.0.0'}
     bundledDependencies:
       - napi-wasm
 
-  '@parcel/watcher-win32-arm64@2.5.0':
-    resolution: {integrity: sha512-twtft1d+JRNkM5YbmexfcH/N4znDtjgysFaV9zvZmmJezQsKpkfLYJ+JFV3uygugK6AtIM2oADPkB2AdhBrNig==}
+  '@parcel/watcher-win32-arm64@2.6.0':
+    resolution: {integrity: sha512-gIZAP23jaHjGWasY/TY6yL7NHFClf0Ga7FN+iINvk+KN94rhm94lYZhFsbYFNcA04/onvGD9kKmiJLJB2HbNwQ==}
     engines: {node: '>= 10.0.0'}
     cpu: [arm64]
     os: [win32]
 
-  '@parcel/watcher-win32-arm64@2.5.1':
-    resolution: {integrity: sha512-RFzklRvmc3PkjKjry3hLF9wD7ppR4AKcWNzH7kXR7GUe0Igb3Nz8fyPwtZCSquGrhU5HhUNDr/mKBqj7tqA2Vw==}
-    engines: {node: '>= 10.0.0'}
-    cpu: [arm64]
-    os: [win32]
-
-  '@parcel/watcher-win32-ia32@2.5.0':
-    resolution: {integrity: sha512-+rgpsNRKwo8A53elqbbHXdOMtY/tAtTzManTWShB5Kk54N8Q9mzNWV7tV+IbGueCbcj826MfWGU3mprWtuf1TA==}
-    engines: {node: '>= 10.0.0'}
-    cpu: [ia32]
-    os: [win32]
-
-  '@parcel/watcher-win32-ia32@2.5.1':
-    resolution: {integrity: sha512-c2KkcVN+NJmuA7CGlaGD1qJh1cLfDnQsHjE89E60vUEMlqduHGCdCLJCID5geFVM0dOtA3ZiIO8BoEQmzQVfpQ==}
-    engines: {node: '>= 10.0.0'}
-    cpu: [ia32]
-    os: [win32]
-
-  '@parcel/watcher-win32-x64@2.5.0':
-    resolution: {integrity: sha512-lPrxve92zEHdgeff3aiu4gDOIt4u7sJYha6wbdEZDCDUhtjTsOMiaJzG5lMY4GkWH8p0fMmO2Ppq5G5XXG+DQw==}
+  '@parcel/watcher-win32-x64@2.6.0':
+    resolution: {integrity: sha512-cA+/pXV2YkfxlIcXOQ5fSWqAzzPyD78/x5qbK/I0vUkrlYHA8TIz+MXjAbGouguKVSI4bOmkTSJ1/poVSsgt+A==}
     engines: {node: '>= 10.0.0'}
     cpu: [x64]
     os: [win32]
 
-  '@parcel/watcher-win32-x64@2.5.1':
-    resolution: {integrity: sha512-9lHBdJITeNR++EvSQVUcaZoWupyHfXe1jZvGZ06O/5MflPcuPLtEphScIBL+AiCWBO46tDSHzWyD0uDmmZqsgA==}
-    engines: {node: '>= 10.0.0'}
-    cpu: [x64]
-    os: [win32]
-
-  '@parcel/watcher-win32-x64@2.5.6':
-    resolution: {integrity: sha512-hbQlYcCq5dlAX9Qx+kFb0FHue6vbjlf0FrNzSKdYK2APUf7tGfGxQCk2ihEREmbR6ZMc0MVAD5RIX/41gpUzTw==}
-    engines: {node: '>= 10.0.0'}
-    os: [win32]
-
-  '@parcel/watcher@2.5.0':
-    resolution: {integrity: sha512-i0GV1yJnm2n3Yq1qw6QrUrd/LI9bE8WEBOTtOkpCXHHdyN3TAGgqAK/DAT05z4fq2x04cARXt2pDmjWjL92iTQ==}
+  '@parcel/watcher@2.6.0':
+    resolution: {integrity: sha512-7FNeNl8NCE7aINx7WXiKQrPYZWC/hvrTsmk6zmxbI7LTXE7hVek/n8AfVgpe2y82zl3w0HvCHN0bVKMBoJcC0w==}
     engines: {node: '>= 10.0.0'}
 
-  '@parcel/watcher@2.5.1':
-    resolution: {integrity: sha512-dfUnCxiN9H4ap84DvD2ubjw+3vUNpstxa0TneY/Paat8a3R4uQZDLSvWjmznAY/DoahqTHl9V46HF/Zs3F29pg==}
-    engines: {node: '>= 10.0.0'}
-
-  '@pkgjs/parseargs@0.11.0':
-    resolution: {integrity: sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==}
-    engines: {node: '>=14'}
-
-  '@playwright/test@1.58.0':
-    resolution: {integrity: sha512-fWza+Lpbj6SkQKCrU6si4iu+fD2dD3gxNHFhUPxsfXBPhnv3rRSQVd0NtBUT9Z/RhF/boCBcuUaMUSTRTopjZg==}
-    engines: {node: '>=18'}
+  '@playwright/test@1.62.1':
+    resolution: {integrity: sha512-DTcUc8qii+cpHvtOwggMtBRMjKZHXYWdw8syRYu2vtzuq4Wxphqq4NfCs5Zt44L6mA8rfDfj+PHnxFc/FeK6mQ==}
+    engines: {node: '>=20'}
     hasBin: true
 
-  '@rolldown/binding-android-arm64@1.0.0-rc.9':
-    resolution: {integrity: sha512-lcJL0bN5hpgJfSIz/8PIf02irmyL43P+j1pTCfbD1DbLkmGRuFIA4DD3B3ZOvGqG0XiVvRznbKtN0COQVaKUTg==}
+  '@rolldown/binding-android-arm64@1.2.1':
+    resolution: {integrity: sha512-02hOeOSryYxVrOIphmLAsqnCJWxwlzFk+pEt/N/i6OgT3lShHO7xGCU5cpgchRDHboAEbSjzgGh+O/u1GswQmA==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [arm64]
     os: [android]
 
-  '@rolldown/binding-darwin-arm64@1.0.0-rc.9':
-    resolution: {integrity: sha512-J7Zk3kLYFsLtuH6U+F4pS2sYVzac0qkjcO5QxHS7OS7yZu2LRs+IXo+uvJ/mvpyUljDJ3LROZPoQfgBIpCMhdQ==}
+  '@rolldown/binding-darwin-arm64@1.2.1':
+    resolution: {integrity: sha512-fMsTOnN0OjFm3CyppWPitKnc8UlliVARUULW6cfU6AIqjdtgmSFWSk9vecHzZduv/yMWIHDlRhM1e8Iff9uAfA==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [arm64]
     os: [darwin]
 
-  '@rolldown/binding-darwin-x64@1.0.0-rc.9':
-    resolution: {integrity: sha512-iwtmmghy8nhfRGeNAIltcNXzD0QMNaaA5U/NyZc1Ia4bxrzFByNMDoppoC+hl7cDiUq5/1CnFthpT9n+UtfFyg==}
+  '@rolldown/binding-darwin-x64@1.2.1':
+    resolution: {integrity: sha512-1wjKdz/XLGKHaTNHjQveQ/B23TKx4ItAqm1JbyVuvNPc4Ze0Fb48s49TAd/2zcplPl8okE/UbTgmlVfwT7eFeQ==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [x64]
     os: [darwin]
 
-  '@rolldown/binding-freebsd-x64@1.0.0-rc.9':
-    resolution: {integrity: sha512-DLFYI78SCiZr5VvdEplsVC2Vx53lnA4/Ga5C65iyldMVaErr86aiqCoNBLl92PXPfDtUYjUh+xFFor40ueNs4Q==}
+  '@rolldown/binding-freebsd-x64@1.2.1':
+    resolution: {integrity: sha512-Fa0jHR07E7YBN4vOEsbVf2briYNsuOowfLJaXULZM0ldMlaCaj2LJgLMbMe4iacRyZmvR8efFhgR9wKuGclQUg==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [x64]
     os: [freebsd]
 
-  '@rolldown/binding-linux-arm-gnueabihf@1.0.0-rc.9':
-    resolution: {integrity: sha512-CsjTmTwd0Hri6iTw/DRMK7kOZ7FwAkrO4h8YWKoX/kcj833e4coqo2wzIFywtch/8Eb5enQ/lwLM7w6JX1W5RQ==}
+  '@rolldown/binding-linux-arm-gnueabihf@1.2.1':
+    resolution: {integrity: sha512-pzkgu1SSHGgRRyRZ4fbmSgmajbVt+epaLP99NDjFft69v/ypfTi6swBMiVdh2EkQ0OSnHE1lZDM7DRGkyAzUpA==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [arm]
     os: [linux]
 
-  '@rolldown/binding-linux-arm64-gnu@1.0.0-rc.9':
-    resolution: {integrity: sha512-2x9O2JbSPxpxMDhP9Z74mahAStibTlrBMW0520+epJH5sac7/LwZW5Bmg/E6CXuEF53JJFW509uP+lSedaUNxg==}
+  '@rolldown/binding-linux-arm64-gnu@1.2.1':
+    resolution: {integrity: sha512-QI5SEDY8cbiYWHx0VO4vIc3UlS6a32vXHjU8Qy/17adEmZIPuByJg13UEvo9c/UCiUkdcVWY83C+b+JrwnNyUg==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [arm64]
     os: [linux]
+    libc: [glibc]
 
-  '@rolldown/binding-linux-arm64-musl@1.0.0-rc.9':
-    resolution: {integrity: sha512-JA1QRW31ogheAIRhIg9tjMfsYbglXXYGNPLdPEYrwFxdbkQCAzvpSCSHCDWNl4hTtrol8WeboCSEpjdZK8qrCg==}
+  '@rolldown/binding-linux-arm64-musl@1.2.1':
+    resolution: {integrity: sha512-Sm41FyCeXqmYcERoYOCbGIL5hNfd8w9LQ7Y61Bev48HkcjaJqV/iiVOaiDxjVTRMS+QKrZmD8cfPt4uMVnvM+A==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [arm64]
     os: [linux]
+    libc: [musl]
 
-  '@rolldown/binding-linux-ppc64-gnu@1.0.0-rc.9':
-    resolution: {integrity: sha512-aOKU9dJheda8Kj8Y3w9gnt9QFOO+qKPAl8SWd7JPHP+Cu0EuDAE5wokQubLzIDQWg2myXq2XhTpOVS07qqvT+w==}
+  '@rolldown/binding-linux-ppc64-gnu@1.2.1':
+    resolution: {integrity: sha512-2x+WhXTGl9yJYPbltW/BSEPTVz9OIWQyER4N+gJEDWkkn904eRcBzELqh/Hf7K0w/ubGbKNMv0ZC+94QK/IFEg==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [ppc64]
     os: [linux]
+    libc: [glibc]
 
-  '@rolldown/binding-linux-s390x-gnu@1.0.0-rc.9':
-    resolution: {integrity: sha512-OalO94fqj7IWRn3VdXWty75jC5dk4C197AWEuMhIpvVv2lw9fiPhud0+bW2ctCxb3YoBZor71QHbY+9/WToadA==}
+  '@rolldown/binding-linux-s390x-gnu@1.2.1':
+    resolution: {integrity: sha512-eEjmQpuRQayHPWWnywaWHkFT3ToPbP3RYy42VVd/B9aBGDA+Ol25EIWHxKQST3IiWJjikCWUF7KtbfqwZrzVwQ==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [s390x]
     os: [linux]
+    libc: [glibc]
 
-  '@rolldown/binding-linux-x64-gnu@1.0.0-rc.9':
-    resolution: {integrity: sha512-cVEl1vZtBsBZna3YMjGXNvnYYrOJ7RzuWvZU0ffvJUexWkukMaDuGhUXn0rjnV0ptzGVkvc+vW9Yqy6h8YX4pg==}
+  '@rolldown/binding-linux-x64-gnu@1.2.1':
+    resolution: {integrity: sha512-/Orga1fZYkLc/56jBICcHrKchl8Z2UKdDSr3LG9ToWO1lQ6a4Livk9Xz+9WN91zsz5QR3XQz2NNoSDEvP6qadw==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [x64]
     os: [linux]
+    libc: [glibc]
 
-  '@rolldown/binding-linux-x64-musl@1.0.0-rc.9':
-    resolution: {integrity: sha512-UzYnKCIIc4heAKgI4PZ3dfBGUZefGCJ1TPDuLHoCzgrMYPb5Rv6TLFuYtyM4rWyHM7hymNdsg5ik2C+UD9VDbA==}
+  '@rolldown/binding-linux-x64-musl@1.2.1':
+    resolution: {integrity: sha512-xxBJRL+0q0Kce7orznGWLuylHDY65vuARXZRpX+hPdv+DqK2c3NlCsVA98tlWzWNEE7yPqA/1NQ5nnCrj49Y5A==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [x64]
     os: [linux]
+    libc: [musl]
 
-  '@rolldown/binding-openharmony-arm64@1.0.0-rc.9':
-    resolution: {integrity: sha512-+6zoiF+RRyf5cdlFQP7nm58mq7+/2PFaY2DNQeD4B87N36JzfF/l9mdBkkmTvSYcYPE8tMh/o3cRlsx1ldLfog==}
+  '@rolldown/binding-openharmony-arm64@1.2.1':
+    resolution: {integrity: sha512-M6AdXIXw3s+/8XpKMzdGDEXGS1S7kwUsy+rcTIUIOx5Ge4nXKCtAFHFV9YKkXvGcC5WMoTjAteLzlsQROVI0Yw==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [arm64]
     os: [openharmony]
 
-  '@rolldown/binding-wasm32-wasi@1.0.0-rc.9':
-    resolution: {integrity: sha512-rgFN6sA/dyebil3YTlL2evvi/M+ivhfnyxec7AccTpRPccno/rPoNlqybEZQBkcbZu8Hy+eqNJCqfBR8P7Pg8g==}
-    engines: {node: '>=14.0.0'}
-    cpu: [wasm32]
+  '@rolldown/binding-wasm32-wasi@1.2.1':
+    resolution: {integrity: sha512-/TX0SoRGojHzSAHpfVBbavRVSazg5U3h3Y3VXfcc0cdugq6kxdqw8LPGFiPr+/7gE/60zRcsOY2Vi9b9eT0jww==}
+    engines: {node: ^20.19.0 || ^22.13.0 || >=23.5.0}
 
-  '@rolldown/binding-win32-arm64-msvc@1.0.0-rc.9':
-    resolution: {integrity: sha512-lHVNUG/8nlF1IQk1C0Ci574qKYyty2goMiPlRqkC5R+3LkXDkL5Dhx8ytbxq35m+pkHVIvIxviD+TWLdfeuadA==}
+  '@rolldown/binding-win32-arm64-msvc@1.2.1':
+    resolution: {integrity: sha512-EvRrivJieyHG+AO9lleZWgq+g0+S7oV2C51yuqlcyU/R9net+sI4Pj0F+lUoP2bEr6TWX3SqFaaS0SzfLxSzkw==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [arm64]
     os: [win32]
 
-  '@rolldown/binding-win32-x64-msvc@1.0.0-rc.9':
-    resolution: {integrity: sha512-G0oA4+w1iY5AGi5HcDTxWsoxF509hrFIPB2rduV5aDqS9FtDg1CAfa7V34qImbjfhIcA8C+RekocJZA96EarwQ==}
+  '@rolldown/binding-win32-x64-msvc@1.2.1':
+    resolution: {integrity: sha512-Z4eCmn5QJ/5+azF9knpLWKfVd9aidn0mAe9TpJgvBLId9Ax3t0+JVxBmT25Bv7NBbVW1TZyKjQjQReouMeH5UQ==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [x64]
     os: [win32]
 
-  '@rolldown/pluginutils@1.0.0-rc.2':
-    resolution: {integrity: sha512-izyXV/v+cHiRfozX62W9htOAvwMo4/bXKDrQ+vom1L1qRuexPock/7VZDAhnpHCLNejd3NJ6hiab+tO0D44Rgw==}
+  '@rolldown/pluginutils@1.0.1':
+    resolution: {integrity: sha512-2j9bGt5Jh8hj+vPtgzPtl72j0yRxHAyumoo6TNfAjsLB04UtpSvPbPcDcBMxz7n+9CYB0c1GxQFxYRg2jimqGw==}
 
-  '@rolldown/pluginutils@1.0.0-rc.9':
-    resolution: {integrity: sha512-w6oiRWgEBl04QkFZgmW+jnU1EC9b57Oihi2ot3HNWIQRqgHp5PnYDia5iZ5FF7rpa4EQdiqMDXjlqKGXBhsoXw==}
-
-  '@rollup/rollup-android-arm-eabi@4.44.0':
-    resolution: {integrity: sha512-xEiEE5oDW6tK4jXCAyliuntGR+amEMO7HLtdSshVuhFnKTYoeYMyXQK7pLouAJJj5KHdwdn87bfHAR2nSdNAUA==}
+  '@rollup/rollup-android-arm-eabi@4.60.4':
+    resolution: {integrity: sha512-F5QXMSiFebS9hKZj02XhWLLnRpJ3B3AROP0tWbFBSj+6kCbg5m9j5JoHKd4mmSVy5mS/IMQloYgYxCuJC0fxEQ==}
     cpu: [arm]
     os: [android]
 
-  '@rollup/rollup-android-arm64@4.44.0':
-    resolution: {integrity: sha512-uNSk/TgvMbskcHxXYHzqwiyBlJ/lGcv8DaUfcnNwict8ba9GTTNxfn3/FAoFZYgkaXXAdrAA+SLyKplyi349Jw==}
+  '@rollup/rollup-android-arm64@4.60.4':
+    resolution: {integrity: sha512-GxxTKApUpzRhof7poWvCJHRF51C67u1R7D6DiluBE8wKU1u5GWE8t+v81JvJYtbawoBFX1hLv5Ei4eVjkWokaw==}
     cpu: [arm64]
     os: [android]
 
-  '@rollup/rollup-darwin-arm64@4.44.0':
-    resolution: {integrity: sha512-VGF3wy0Eq1gcEIkSCr8Ke03CWT+Pm2yveKLaDvq51pPpZza3JX/ClxXOCmTYYq3us5MvEuNRTaeyFThCKRQhOA==}
+  '@rollup/rollup-darwin-arm64@4.60.4':
+    resolution: {integrity: sha512-tua0TaJxMOB1R0V0RS1jFZ/RpURFDJIOR2A6jWwQeawuFyS4gBW+rntLRaQd0EQ4bd6Vp44Z2rXW+YYDBsj6IA==}
     cpu: [arm64]
     os: [darwin]
 
-  '@rollup/rollup-darwin-x64@4.44.0':
-    resolution: {integrity: sha512-fBkyrDhwquRvrTxSGH/qqt3/T0w5Rg0L7ZIDypvBPc1/gzjJle6acCpZ36blwuwcKD/u6oCE/sRWlUAcxLWQbQ==}
+  '@rollup/rollup-darwin-x64@4.60.4':
+    resolution: {integrity: sha512-CSKq7MsP+5PFIcydhAiR1K0UhEI1A2jWXVKHPCBZ151yOutENwvnPocgVHkivu2kviURtCEB6zUQw0vs8RrhMg==}
     cpu: [x64]
     os: [darwin]
 
-  '@rollup/rollup-freebsd-arm64@4.44.0':
-    resolution: {integrity: sha512-u5AZzdQJYJXByB8giQ+r4VyfZP+walV+xHWdaFx/1VxsOn6eWJhK2Vl2eElvDJFKQBo/hcYIBg/jaKS8ZmKeNQ==}
+  '@rollup/rollup-freebsd-arm64@4.60.4':
+    resolution: {integrity: sha512-+O8OkVdyvXMtJEciu2wS/pzm1IxntEEQx3z5TAVy4l32G0etZn+RsA48ARRrFm6Ri8fvqPQfgrvNxSjKAbnd3g==}
     cpu: [arm64]
     os: [freebsd]
 
-  '@rollup/rollup-freebsd-x64@4.44.0':
-    resolution: {integrity: sha512-qC0kS48c/s3EtdArkimctY7h3nHicQeEUdjJzYVJYR3ct3kWSafmn6jkNCA8InbUdge6PVx6keqjk5lVGJf99g==}
+  '@rollup/rollup-freebsd-x64@4.60.4':
+    resolution: {integrity: sha512-Iw3oMskH3AfNuhU0MSN7vNbdi4me/NiYo2azqPz/Le16zHSa+3RRmliCMWWQmh4lcndccU40xcJuTYJZxNo/lw==}
     cpu: [x64]
     os: [freebsd]
 
-  '@rollup/rollup-linux-arm-gnueabihf@4.44.0':
-    resolution: {integrity: sha512-x+e/Z9H0RAWckn4V2OZZl6EmV0L2diuX3QB0uM1r6BvhUIv6xBPL5mrAX2E3e8N8rEHVPwFfz/ETUbV4oW9+lQ==}
+  '@rollup/rollup-linux-arm-gnueabihf@4.60.4':
+    resolution: {integrity: sha512-EIPRXTVQpHyF8WOo219AD2yEltPehLTcTMz2fn6JsatLYSzQf00hj3rulF+yauOlF9/FtM2WpkT/hJh/KJFGhA==}
     cpu: [arm]
     os: [linux]
+    libc: [glibc]
 
-  '@rollup/rollup-linux-arm-musleabihf@4.44.0':
-    resolution: {integrity: sha512-1exwiBFf4PU/8HvI8s80icyCcnAIB86MCBdst51fwFmH5dyeoWVPVgmQPcKrMtBQ0W5pAs7jBCWuRXgEpRzSCg==}
+  '@rollup/rollup-linux-arm-musleabihf@4.60.4':
+    resolution: {integrity: sha512-J3Yh9PzzF1Ovah2At+lHiGQdsYgArxBbXv/zHfSyaiFQEqvNv7DcW98pCrmdjCZBrqBiKrKKe2V+aaSGWuBe/w==}
     cpu: [arm]
     os: [linux]
+    libc: [musl]
 
-  '@rollup/rollup-linux-arm64-gnu@4.44.0':
-    resolution: {integrity: sha512-ZTR2mxBHb4tK4wGf9b8SYg0Y6KQPjGpR4UWwTFdnmjB4qRtoATZ5dWn3KsDwGa5Z2ZBOE7K52L36J9LueKBdOQ==}
+  '@rollup/rollup-linux-arm64-gnu@4.60.4':
+    resolution: {integrity: sha512-BFDEZMYfUvLn37ONE1yMBojPxnMlTFsdyNoqncT0qFq1mAfllL+ATMMJd8TeuVMiX84s1KbcxcZbXInmcO2mRg==}
     cpu: [arm64]
     os: [linux]
+    libc: [glibc]
 
-  '@rollup/rollup-linux-arm64-musl@4.44.0':
-    resolution: {integrity: sha512-GFWfAhVhWGd4r6UxmnKRTBwP1qmModHtd5gkraeW2G490BpFOZkFtem8yuX2NyafIP/mGpRJgTJ2PwohQkUY/Q==}
+  '@rollup/rollup-linux-arm64-musl@4.60.4':
+    resolution: {integrity: sha512-pc9EYOSlOgdQ2uPl1o9PF6/kLSgaUosia7gOuS8mB69IxJvlclko1MECXysjs5ryez1/5zjYqx3+xYU0TU6R1A==}
     cpu: [arm64]
     os: [linux]
+    libc: [musl]
 
-  '@rollup/rollup-linux-loongarch64-gnu@4.44.0':
-    resolution: {integrity: sha512-xw+FTGcov/ejdusVOqKgMGW3c4+AgqrfvzWEVXcNP6zq2ue+lsYUgJ+5Rtn/OTJf7e2CbgTFvzLW2j0YAtj0Gg==}
+  '@rollup/rollup-linux-loong64-gnu@4.60.4':
+    resolution: {integrity: sha512-NxnomyxYerDh5n4iLrNa+sH+Z+U4BMEE46V2PgQ/hoB909i8gV1M5wPojWg9fk1jWpO3IQnOs20K4wyZuFLEFQ==}
     cpu: [loong64]
     os: [linux]
+    libc: [glibc]
 
-  '@rollup/rollup-linux-powerpc64le-gnu@4.44.0':
-    resolution: {integrity: sha512-bKGibTr9IdF0zr21kMvkZT4K6NV+jjRnBoVMt2uNMG0BYWm3qOVmYnXKzx7UhwrviKnmK46IKMByMgvpdQlyJQ==}
+  '@rollup/rollup-linux-loong64-musl@4.60.4':
+    resolution: {integrity: sha512-nbJnQ8a3z1mtmrwImCYhc6BGpThAyYVRQxw9uKSKG4wR6aAYno9sVjJ0zaZcW9BPJX1GbrDPf+SvdWjgTuDmnw==}
+    cpu: [loong64]
+    os: [linux]
+    libc: [musl]
+
+  '@rollup/rollup-linux-ppc64-gnu@4.60.4':
+    resolution: {integrity: sha512-2EU6acNrQLd8tYvo/LXW535wupT3m6fo7HKo6lr7ktQoItxTyOL1ZCR/GfGCuXl2vR+zmfI6eRXkSemafv+iVg==}
     cpu: [ppc64]
     os: [linux]
+    libc: [glibc]
 
-  '@rollup/rollup-linux-riscv64-gnu@4.44.0':
-    resolution: {integrity: sha512-vV3cL48U5kDaKZtXrti12YRa7TyxgKAIDoYdqSIOMOFBXqFj2XbChHAtXquEn2+n78ciFgr4KIqEbydEGPxXgA==}
+  '@rollup/rollup-linux-ppc64-musl@4.60.4':
+    resolution: {integrity: sha512-WeBtoMuaMxiiIrO2IYP3xs6GMWkJP2C0EoT8beTLkUPmzV1i/UcOSVw1d5r9KBODtHKilG5yFxsGRnBbK3wJ4A==}
+    cpu: [ppc64]
+    os: [linux]
+    libc: [musl]
+
+  '@rollup/rollup-linux-riscv64-gnu@4.60.4':
+    resolution: {integrity: sha512-FJHFfqpKUI3A10WrWKiFbBZ7yVbGT4q4B5o1qKFFojqpaYoh9LrQgqWCmmcxQzVSXYtyB5bzkXrYzlHTs21MYA==}
     cpu: [riscv64]
     os: [linux]
+    libc: [glibc]
 
-  '@rollup/rollup-linux-riscv64-musl@4.44.0':
-    resolution: {integrity: sha512-TDKO8KlHJuvTEdfw5YYFBjhFts2TR0VpZsnLLSYmB7AaohJhM8ctDSdDnUGq77hUh4m/djRafw+9zQpkOanE2Q==}
+  '@rollup/rollup-linux-riscv64-musl@4.60.4':
+    resolution: {integrity: sha512-mcEl6CUT5IAUmQf1m9FYSmVqCJlpQ8r8eyftFUHG8i9OhY7BkBXSUdnLH5DOf0wCOjcP9v/QO93zpmF1SptCCw==}
     cpu: [riscv64]
     os: [linux]
+    libc: [musl]
 
-  '@rollup/rollup-linux-s390x-gnu@4.44.0':
-    resolution: {integrity: sha512-8541GEyktXaw4lvnGp9m84KENcxInhAt6vPWJ9RodsB/iGjHoMB2Pp5MVBCiKIRxrxzJhGCxmNzdu+oDQ7kwRA==}
+  '@rollup/rollup-linux-s390x-gnu@4.60.4':
+    resolution: {integrity: sha512-ynt3JxVd2w2buzoKDWIyiV1pJW93xlQic1THVLXilz429oijRpSHivZAgp65KBu+cMcgf1eVVjdnTLvPxgCuoQ==}
     cpu: [s390x]
     os: [linux]
+    libc: [glibc]
 
-  '@rollup/rollup-linux-x64-gnu@4.44.0':
-    resolution: {integrity: sha512-iUVJc3c0o8l9Sa/qlDL2Z9UP92UZZW1+EmQ4xfjTc1akr0iUFZNfxrXJ/R1T90h/ILm9iXEY6+iPrmYB3pXKjw==}
+  '@rollup/rollup-linux-x64-gnu@4.60.4':
+    resolution: {integrity: sha512-Boiz5+MsaROEWDf+GGEwF8VMHGhlUoQMtIPjOgA5fv4osupqTVnJteQNKJwUcnUog2G55jYXH7KZFFiJe0TEzQ==}
     cpu: [x64]
     os: [linux]
+    libc: [glibc]
 
-  '@rollup/rollup-linux-x64-musl@4.44.0':
-    resolution: {integrity: sha512-PQUobbhLTQT5yz/SPg116VJBgz+XOtXt8D1ck+sfJJhuEsMj2jSej5yTdp8CvWBSceu+WW+ibVL6dm0ptG5fcA==}
+  '@rollup/rollup-linux-x64-musl@4.60.4':
+    resolution: {integrity: sha512-+qfSY27qIrFfI/Hom04KYFw3GKZSGU4lXus51wsb5EuySfFlWRwjkKWoE9emgRw/ukoT4Udsj4W/+xxG8VbPKg==}
     cpu: [x64]
     os: [linux]
+    libc: [musl]
 
-  '@rollup/rollup-win32-arm64-msvc@4.44.0':
-    resolution: {integrity: sha512-M0CpcHf8TWn+4oTxJfh7LQuTuaYeXGbk0eageVjQCKzYLsajWS/lFC94qlRqOlyC2KvRT90ZrfXULYmukeIy7w==}
+  '@rollup/rollup-openbsd-x64@4.60.4':
+    resolution: {integrity: sha512-VpTfOPHgVXEBeeR8hZ2O0F3aSso+JDWqTWmTmzcQKted54IAdUVbxE+j/MVxUsKa8L20HJhv3vUezVPoquqWjA==}
+    cpu: [x64]
+    os: [openbsd]
+
+  '@rollup/rollup-openharmony-arm64@4.60.4':
+    resolution: {integrity: sha512-IPOsh5aRYuLv/nkU51X10Bf75Bsf6+gZdx1X+QP5QM6lIJFHHqbHLG0uJn/hWthzo13UAc2umiUorqZy3axoZg==}
+    cpu: [arm64]
+    os: [openharmony]
+
+  '@rollup/rollup-win32-arm64-msvc@4.60.4':
+    resolution: {integrity: sha512-4QzE9E81OohJ/HKzHhsqU+zcYYojVOXlFMs1DdyMT6qXl/niOH7AVElmmEdUNHHS/oRkc++d5k6Vy85zFs0DEw==}
     cpu: [arm64]
     os: [win32]
 
-  '@rollup/rollup-win32-ia32-msvc@4.44.0':
-    resolution: {integrity: sha512-3XJ0NQtMAXTWFW8FqZKcw3gOQwBtVWP/u8TpHP3CRPXD7Pd6s8lLdH3sHWh8vqKCyyiI8xW5ltJScQmBU9j7WA==}
+  '@rollup/rollup-win32-ia32-msvc@4.60.4':
+    resolution: {integrity: sha512-zTPgT1YuHHcd+Tmx7h8aml0FWFVelV5N54oHow9SLj+GfoDy/huQ+UV396N/C7KpMDMiPspRktzM1/0r1usYEA==}
     cpu: [ia32]
     os: [win32]
 
-  '@rollup/rollup-win32-x64-msvc@4.44.0':
-    resolution: {integrity: sha512-Q2Mgwt+D8hd5FIPUuPDsvPR7Bguza6yTkJxspDGkZj7tBRn2y4KSWYuIXpftFSjBra76TbKerCV7rgFPQrn+wQ==}
+  '@rollup/rollup-win32-x64-gnu@4.60.4':
+    resolution: {integrity: sha512-DRS4G7mi9lJxqEDezIkKCaUIKCrLUUDCUaCsTPCi/rtqaC6D/jjwslMQyiDU50Ka0JKpeXeRBFBAXwArY52vBw==}
     cpu: [x64]
     os: [win32]
 
-  '@rtsao/scc@1.1.0':
-    resolution: {integrity: sha512-zt6OdqaDoOnJ1ZYsCYGt9YmWzDXl4vQdKTyJev62gFhRGKdx7mcT54V9KIjg+d2wi9EXsPvAPKe7i7WjfVWB8g==}
+  '@rollup/rollup-win32-x64-msvc@4.60.4':
+    resolution: {integrity: sha512-QVTUovf40zgTqlFVrKA1uXMVvU2QWEFWfAH8Wdc48IxLvrJMQVMBRjuQyUpzZCDkakImib9eVazbWlC6ksWtJw==}
+    cpu: [x64]
+    os: [win32]
+
+  '@rspack/binding-darwin-arm64@2.0.2':
+    resolution: {integrity: sha512-0o7lbgBBsDlICWdjIH0q3e0BsSco4GRiImHWVfZSVEG+q2+ykZJvSvYCVhPM1Co375Z0S3VMPa/8SjcY1FHwlw==}
+    cpu: [arm64]
+    os: [darwin]
+
+  '@rspack/binding-darwin-x64@2.0.2':
+    resolution: {integrity: sha512-tOwxZpoPlTlRs/w6UyUinXJ4TYRVHMlR7+eQxO1R3muKpixvhXQjtvoaY16HuFyTVky5F0IfOoWr3x9FEsgdLg==}
+    cpu: [x64]
+    os: [darwin]
+
+  '@rspack/binding-linux-arm64-gnu@2.0.2':
+    resolution: {integrity: sha512-1ZD4YFhG1rmgqj+W8hfwHyKV8xDxGsc/3KgU0FwmiVEX7JfzhCkgBO/xlCG79kRKSrzuVzt4icO/G3cCKn0pag==}
+    cpu: [arm64]
+    os: [linux]
+    libc: [glibc]
+
+  '@rspack/binding-linux-arm64-musl@2.0.2':
+    resolution: {integrity: sha512-/PtTkM/DsDLjeuXTmeJeRfbjCDbcL9jvoVgZrgxYFZ28y2cdLvbChbW9uigOzs5dQEs1CIBQXMTTj7KhdBTuQg==}
+    cpu: [arm64]
+    os: [linux]
+    libc: [musl]
+
+  '@rspack/binding-linux-x64-gnu@2.0.2':
+    resolution: {integrity: sha512-bBjsZxMHRaPo6X9SokApm6ucs+UhXtAJFyJJyuk2BH4XJsLeCU9Dz1vMwioeohFbJUUeTASVPm6/BL+RhSaunw==}
+    cpu: [x64]
+    os: [linux]
+    libc: [glibc]
+
+  '@rspack/binding-linux-x64-musl@2.0.2':
+    resolution: {integrity: sha512-HjlpInqzabDNkhVsUJpsHPqa9QYVWBViJoyWNjzXCAW0vKMDvwaphyUvokSinX8FGTlZi/sr5UEaHJo6XtQ35g==}
+    cpu: [x64]
+    os: [linux]
+    libc: [musl]
+
+  '@rspack/binding-wasm32-wasi@2.0.2':
+    resolution: {integrity: sha512-YaRYNFLJRpkGfYjSWR7n9f+nQKtrlmrrffpAn/blc2geHcRvXoBc5SCs1idPtsLhj7H9qWWhs7ucjyHy4csWFg==}
+    cpu: [wasm32]
+
+  '@rspack/binding-win32-arm64-msvc@2.0.2':
+    resolution: {integrity: sha512-d/3kTEKq+asLjRFPO96t+wfWiM7DLN76VQEPDD9bc1kdsZXlVJBuvyXfsgK8bbEvKplWXYcSsokhmEnuXrLOpg==}
+    cpu: [arm64]
+    os: [win32]
+
+  '@rspack/binding-win32-ia32-msvc@2.0.2':
+    resolution: {integrity: sha512-161cWineq3RW+Jdm1FAfSpXeUtYWvhB3kAbm46vNT9h/YYz+spwsFMvveAZ1nsVSVL0IC5lDBGUte7yUAY8K2g==}
+    cpu: [ia32]
+    os: [win32]
+
+  '@rspack/binding-win32-x64-msvc@2.0.2':
+    resolution: {integrity: sha512-y7Q0S1FE+OlkL5GMqLG0PwxrPw6E1r892KhGrGKE1Vdufe5YTEx6xTPxzZ+b7N2KPD7s9G1/iJmWHQxb1+Bjkg==}
+    cpu: [x64]
+    os: [win32]
+
+  '@rspack/binding@2.0.2':
+    resolution: {integrity: sha512-0kZPplW9GWx8mfC6DfsaRY3QBIYPuUs42JfmSM6aSb8tMHZAXQeLeMB8M+h8i4SeI+aFtCgO6UuYGtyWf7+L+A==}
+
+  '@rspack/core@2.0.2':
+    resolution: {integrity: sha512-VM3UHOo26uC+4QSqY5tU1ybI7KuXY5rTof8nhFOaBY9SYau0Smvr+hMSAPmrmHwknB6dXT8yaNVxrj7I+qxE1Q==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    peerDependencies:
+      '@module-federation/runtime-tools': ^0.24.1 || ^2.0.0
+      '@swc/helpers': '>=0.5.1'
+    peerDependenciesMeta:
+      '@module-federation/runtime-tools':
+        optional: true
+      '@swc/helpers':
+        optional: true
 
   '@sindresorhus/merge-streams@4.0.0':
     resolution: {integrity: sha512-tlqY9xq5ukxTUZBmoOp+m61cqwQD5pHJtFY3Mn8CA8ps6yghLH/Hw8UPdqg4OLmFW3IFlcXnQNmo/dh8HzXYIQ==}
     engines: {node: '>=18'}
 
-  '@standard-schema/spec@1.0.0':
-    resolution: {integrity: sha512-m2bOd0f2RT9k8QJx1JN85cZYyH1RqFBdlwtkSlf4tBDYLCiiZnv1fIIwacK6cqwXavOydf0NPToMQgpKq+dVlA==}
+  '@standard-schema/spec@1.1.0':
+    resolution: {integrity: sha512-l2aFy5jALhniG5HgqrD6jXLi/rUWrKvqN/qJx6yoJsgKhblVd+iqqU4RCXavm/jPityDo5TCvKMnpjKnOriy0w==}
 
   '@swc/helpers@0.5.15':
     resolution: {integrity: sha512-JQ5TuMi45Owi4/BIMAJBoSQoOJu12oOk/gADqlcUL9JEdHB8vyjUSsxqeNXnmXHjYKMi2WcYtezGEEhqUI/E2g==}
@@ -2515,28 +2119,46 @@ packages:
     peerDependencies:
       tailwindcss: '>=3.0.0 || >= 3.0.0-alpha.1 || >= 4.0.0-alpha.20 || >= 4.0.0-beta.1'
 
-  '@tailwindcss/typography@0.5.19':
-    resolution: {integrity: sha512-w31dd8HOx3k9vPtcQh5QHP9GwKcgbMp87j58qi6xgiBnFFtKEAgCWnDw4qUT8aHwkCp8bKvb/KGKWWHedP0AAg==}
+  '@tailwindcss/typography@0.5.20':
+    resolution: {integrity: sha512-hwbzQuNUfcPvbegQFatVPl/MY/tcM9KLl963hQ5laJKPh81TEZ1+dNG9PirGvcaDBkp+BCshExAyKVPW91dozw==}
     peerDependencies:
-      tailwindcss: '>=3.0.0 || insiders || >=4.0.0-alpha.20 || >=4.0.0-beta.1'
+      tailwindcss: '>=3.0.0 || >=4.0.0 || insiders'
 
-  '@tybys/wasm-util@0.10.1':
-    resolution: {integrity: sha512-9tTaPJLSiejZKx+Bmog4uSubteqTvFrVrURwkmHixBo0G4seD0zUxp98E1DzUBJxLQ3NPwXrGKDiVjwx/DpPsg==}
+  '@turbo/darwin-64@2.10.8':
+    resolution: {integrity: sha512-po+7rfJfUnFXjWlcoN2RwhErgzCdRtBc1T26vYPcywHlggmCQiQe1uWaE4j+BibI2uY9/2pDoFzMN0rmSaPFOw==}
+    cpu: [x64]
+    os: [darwin]
 
-  '@types/babel__core@7.20.5':
-    resolution: {integrity: sha512-qoQprZvz5wQFJwMDqeseRXWv3rqMvhgpbXFfVyWhbx9X47POIA6i/+dXefEmZKoAgOaTdaIgNSMqMIU61yRyzA==}
+  '@turbo/darwin-arm64@2.10.8':
+    resolution: {integrity: sha512-+zB2btDJ00lnPRuqOvpVvgl4x34k/djZQGZTTCfjn7JgNCl8QFY5Njo5+dqkY1g/+9gbbsnAvWm9CmJg9ebcXA==}
+    cpu: [arm64]
+    os: [darwin]
 
-  '@types/babel__generator@7.6.8':
-    resolution: {integrity: sha512-ASsj+tpEDsEiFr1arWrlN6V3mdfjRMZt6LtK/Vp/kreFLnr5QH5+DhvD5nINYZXzwJvXeGq+05iUXcAzVrqWtw==}
+  '@turbo/linux-64@2.10.8':
+    resolution: {integrity: sha512-K1dxqiVisyN7cViVsfQLs6xscQbYuI8aO2nbUhFURDACgEDfZRdP/b4CCxeosBJpcMfhYyiibWqJorCnvz9kKg==}
+    cpu: [x64]
+    os: [android, linux]
 
-  '@types/babel__template@7.4.4':
-    resolution: {integrity: sha512-h/NUaSyG5EyxBIp8YRxo4RMe2/qQgvyowRwVMzhYhBCONbW8PUsg4lkFMrhgZhUe5z3L3MiLDuvyJ/CaPa2A8A==}
+  '@turbo/linux-arm64@2.10.8':
+    resolution: {integrity: sha512-Gi77ibVnrE1fEmvr+/wBD/yvRqhwp/RQuCp2+//lv1U1wNFFyVg0V7Wj8FG9FXPFAw5QHReo8rxc9+wBSDZjzA==}
+    cpu: [arm64]
+    os: [android, linux]
 
-  '@types/babel__traverse@7.20.6':
-    resolution: {integrity: sha512-r1bzfrm0tomOI8g1SzvCaQHo6Lcv6zu0EA+W2kHrt8dyrHQxGzBBL4kdkzIS+jBMV+EYcMAEAqXqYaLJq5rOZg==}
+  '@turbo/windows-64@2.10.8':
+    resolution: {integrity: sha512-znnLO1haJPYTHoKMKwlAvlkjRiYbbhBzME6wIGaMd+fwir23U6jVd1ecaTWWi1fbnRVqxMfgDBKseQ/hLKb83g==}
+    cpu: [x64]
+    os: [win32]
 
-  '@types/bun@1.3.9':
-    resolution: {integrity: sha512-KQ571yULOdWJiMH+RIWIOZ7B2RXQGpL1YQrBtLIV3FqDcCu6FsbFUBwhdKUlCKUpS3PJDsHlJ1QKlpxoVR+xtw==}
+  '@turbo/windows-arm64@2.10.8':
+    resolution: {integrity: sha512-VN30vh3b3Czh2WzYHNTfF1FE0YMZ5aHsLO8dBMGHJewA6792wX6iJR8ZxlzFW6WdOu0gEAKIvlYhfyT81Wkm4Q==}
+    cpu: [arm64]
+    os: [win32]
+
+  '@tybys/wasm-util@0.10.3':
+    resolution: {integrity: sha512-F3fo1MYrRJYL3zER0OUOmkutjr1Vp23m7OsSgp7nq4SP6OqX6C/56XFIPAl5bt3zaBRjmW7SGz3u/6LwFpYcOg==}
+
+  '@types/bun@1.3.14':
+    resolution: {integrity: sha512-h1hFqFVcvAvD9j9K7ZW7vd82aSA+rTdznZa+5bwvCwqSB1jmmfLcbIWhOLx1/+boy/xmjgCs/OMUL8hRJSmnPw==}
 
   '@types/chai@5.2.3':
     resolution: {integrity: sha512-Mw558oeA9fFbv65/y4mHtXDs9bPnFMZAL/jxdPFUpOHHIXX91mcgEHbS5Lahr+pwZFR8A7GQleRWeI6cGFC2UA==}
@@ -2544,23 +2166,20 @@ packages:
   '@types/deep-eql@4.0.2':
     resolution: {integrity: sha512-c9h9dVVMigMPc4bwTvC5dxqtqJZwQPePsWjPlpSOnojbor6pGqdk541lfA7AqFQr5pB1BRdq0juY9db81BwyFw==}
 
-  '@types/eslint-scope@3.7.7':
-    resolution: {integrity: sha512-MzMFlSLBqNF2gcHWO0G1vP/YQyfvrxZ0bF+u7mzUdZ1/xK4A4sru+nraZz5i3iEIk1l1uyicaDVTB4QbbEkAYg==}
-
-  '@types/eslint@9.6.1':
-    resolution: {integrity: sha512-FXx2pKgId/WyYo2jXw63kk7/+TY7u7AziEJxJAnSFzHlqTAS3Ync6SvgYAN/k4/PQpnnVuzoMuVnByKK2qp0ag==}
-
   '@types/estree@1.0.8':
     resolution: {integrity: sha512-dWHzHa2WqEXI/O1E9OjrocMTKJl2mSrEolh1Iomrv6U+JuNwaHXsXx9bLu5gG7BUWFIN0skIQJQ/L1rIex4X6w==}
 
+  '@types/estree@1.0.9':
+    resolution: {integrity: sha512-GhdPgy1el4/ImP05X05Uw4cw2/M93BCUmnEvWZNStlCzEKME4Fkk+YpoA5OiHNQmoS7Cafb8Xa3Pya8m1Qrzeg==}
+
   '@types/json-schema@7.0.15':
     resolution: {integrity: sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==}
 
-  '@types/json5@0.0.29':
-    resolution: {integrity: sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ==}
+  '@types/node@22.20.1':
+    resolution: {integrity: sha512-EANqOCF9QFyra+4pfxUcX9STKJpCLjMbObVzljIJomAWSnuSIEAvyzEU53GaajbXJEgdh0iEcPL+DGvpUd4k1Q==}
 
-  '@types/node@20.19.1':
-    resolution: {integrity: sha512-jJD50LtlD2dodAEO653i3YF04NWak6jN3ky+Ri3Em3mGR39/glWiboM/IePaRbgwSfqM1TpGXfAg8ohn/4dTgA==}
+  '@types/node@25.9.1':
+    resolution: {integrity: sha512-xfrlY7UD5rMJk3ZVJP8BNzS28J36YJg+xp+LPXV1TdWxr8uMH5A860QNxYDGQe/ylDSgjxE52Q9VnO7p75tJxg==}
 
   '@types/postcss-import@14.0.3':
     resolution: {integrity: sha512-raZhRVTf6Vw5+QbmQ7LOHSDML71A5rj4+EqDzAbrZPfxfoGzFxMHRCq16VlddGIZpHELw0BG4G0YE2ANkdZiIQ==}
@@ -2570,105 +2189,53 @@ packages:
     peerDependencies:
       '@types/react': ^19.2.0
 
-  '@types/react@19.2.14':
-    resolution: {integrity: sha512-ilcTH/UniCkMdtexkoCN0bI7pMcJDvmQFPvuPvmEaYA/NSfFTAgdUSLAoVjaRJm7+6PvcM+q1zYOwS4wTYMF9w==}
+  '@types/react@19.2.15':
+    resolution: {integrity: sha512-eRwcGNHve+E8qtEQSSRl6urh+rFop4v8gm6O8rGv25CodbvFdLjA1vVQ1KkiFE0w0UPOnb8tDiFKL5lp0rtY5Q==}
 
-  '@types/semver@7.7.1':
-    resolution: {integrity: sha512-FmgJfu+MOcQ370SD0ev7EI8TlCAfKYU+B4m5T3yXc1CiRN94g/SZPtsCkk506aUDtlMnFZvasDwHHUcZUEaYuA==}
+  '@types/semver@7.8.0':
+    resolution: {integrity: sha512-1mAINjtQCXXeLkJ9ehXkwOcBpqtLxiVtKhpUf83DdRNdQKV0iXZpaHYqRr7nj+wvxuJzoAmAwXI+sCNMv1CzLQ==}
 
-  '@typescript-eslint/eslint-plugin@8.47.0':
-    resolution: {integrity: sha512-fe0rz9WJQ5t2iaLfdbDc9T80GJy0AeO453q8C3YCilnGozvOyCG5t+EZtg7j7D88+c3FipfP/x+wzGnh1xp8ZA==}
-    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
-    peerDependencies:
-      '@typescript-eslint/parser': ^8.47.0
-      eslint: ^8.57.0 || ^9.0.0
-      typescript: '>=4.8.4 <6.0.0'
-
-  '@typescript-eslint/parser@8.47.0':
-    resolution: {integrity: sha512-lJi3PfxVmo0AkEY93ecfN+r8SofEqZNGByvHAI3GBLrvt1Cw6H5k1IM02nSzu0RfUafr2EvFSw0wAsZgubNplQ==}
-    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
-    peerDependencies:
-      eslint: ^8.57.0 || ^9.0.0
-      typescript: '>=4.8.4 <6.0.0'
-
-  '@typescript-eslint/project-service@8.47.0':
-    resolution: {integrity: sha512-2X4BX8hUeB5JcA1TQJ7GjcgulXQ+5UkNb0DL8gHsHUHdFoiCTJoYLTpib3LtSDPZsRET5ygN4qqIWrHyYIKERA==}
-    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
-    peerDependencies:
-      typescript: '>=4.8.4 <6.0.0'
-
-  '@typescript-eslint/scope-manager@8.47.0':
-    resolution: {integrity: sha512-a0TTJk4HXMkfpFkL9/WaGTNuv7JWfFTQFJd6zS9dVAjKsojmv9HT55xzbEpnZoY+VUb+YXLMp+ihMLz/UlZfDg==}
-    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
-
-  '@typescript-eslint/tsconfig-utils@8.47.0':
-    resolution: {integrity: sha512-ybUAvjy4ZCL11uryalkKxuT3w3sXJAuWhOoGS3T/Wu+iUu1tGJmk5ytSY8gbdACNARmcYEB0COksD2j6hfGK2g==}
-    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
-    peerDependencies:
-      typescript: '>=4.8.4 <6.0.0'
-
-  '@typescript-eslint/type-utils@8.47.0':
-    resolution: {integrity: sha512-QC9RiCmZ2HmIdCEvhd1aJELBlD93ErziOXXlHEZyuBo3tBiAZieya0HLIxp+DoDWlsQqDawyKuNEhORyku+P8A==}
-    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
-    peerDependencies:
-      eslint: ^8.57.0 || ^9.0.0
-      typescript: '>=4.8.4 <6.0.0'
-
-  '@typescript-eslint/types@8.47.0':
-    resolution: {integrity: sha512-nHAE6bMKsizhA2uuYZbEbmp5z2UpffNrPEqiKIeN7VsV6UY/roxanWfoRrf6x/k9+Obf+GQdkm0nPU+vnMXo9A==}
-    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
-
-  '@typescript-eslint/typescript-estree@8.47.0':
-    resolution: {integrity: sha512-k6ti9UepJf5NpzCjH31hQNLHQWupTRPhZ+KFF8WtTuTpy7uHPfeg2NM7cP27aCGajoEplxJDFVCEm9TGPYyiVg==}
-    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
-    peerDependencies:
-      typescript: '>=4.8.4 <6.0.0'
-
-  '@typescript-eslint/utils@8.47.0':
-    resolution: {integrity: sha512-g7XrNf25iL4TJOiPqatNuaChyqt49a/onq5YsJ9+hXeugK+41LVg7AxikMfM02PC6jbNtZLCJj6AUcQXJS/jGQ==}
-    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
-    peerDependencies:
-      eslint: ^8.57.0 || ^9.0.0
-      typescript: '>=4.8.4 <6.0.0'
-
-  '@typescript-eslint/visitor-keys@8.47.0':
-    resolution: {integrity: sha512-SIV3/6eftCy1bNzCQoPmbWsRLujS8t5iDIZ4spZOBHqrM+yfX2ogg8Tt3PDTAVKw3sSCiUgg30uOAvK2r9zGjQ==}
-    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
-
-  '@vitejs/plugin-react@5.1.3':
-    resolution: {integrity: sha512-NVUnA6gQCl8jfoYqKqQU5Clv0aPw14KkZYCsX6T9Lfu9slI0LOU10OTwFHS/WmptsMMpshNd/1tuWsHQ2Uk+cg==}
+  '@vitejs/plugin-react@6.0.2':
+    resolution: {integrity: sha512-DlSMqo4WhThw4vB8Mpn0Woe9J+Jfq1geJ61AKW0QEgLzGMNwtIMdxbDUzLxcun8W7NbJO0e2Jg/Nxm3cCSVzzg==}
     engines: {node: ^20.19.0 || >=22.12.0}
     peerDependencies:
-      vite: ^4.2.0 || ^5.0.0 || ^6.0.0 || ^7.0.0
+      '@rolldown/plugin-babel': ^0.1.7 || ^0.2.0
+      babel-plugin-react-compiler: ^1.0.0
+      vite: ^8.0.0
+    peerDependenciesMeta:
+      '@rolldown/plugin-babel':
+        optional: true
+      babel-plugin-react-compiler:
+        optional: true
 
-  '@vitest/expect@4.0.18':
-    resolution: {integrity: sha512-8sCWUyckXXYvx4opfzVY03EOiYVxyNrHS5QxX3DAIi5dpJAAkyJezHCP77VMX4HKA2LDT/Jpfo8i2r5BE3GnQQ==}
+  '@vitest/expect@4.1.10':
+    resolution: {integrity: sha512-YsCn+qAk1GWjQOWFEsEcL2gNQ0zmVmQu3T03qP6UyjhtmdtwtbuI+DASn/7iQB3HGTXkdBwGddzxPlmiql5vlA==}
 
-  '@vitest/mocker@4.0.18':
-    resolution: {integrity: sha512-HhVd0MDnzzsgevnOWCBj5Otnzobjy5wLBe4EdeeFGv8luMsGcYqDuFRMcttKWZA5vVO8RFjexVovXvAM4JoJDQ==}
+  '@vitest/mocker@4.1.10':
+    resolution: {integrity: sha512-v0xaezt+DKEmKfaxg133ldzADrwLGd7Ze1MfQQTYfvs8OqZIwbxyxaYURivwV7sWy5fqn3rH5uOrSp07bp44Ow==}
     peerDependencies:
       msw: ^2.4.9
-      vite: ^6.0.0 || ^7.0.0-0
+      vite: ^6.0.0 || ^7.0.0 || ^8.0.0
     peerDependenciesMeta:
       msw:
         optional: true
       vite:
         optional: true
 
-  '@vitest/pretty-format@4.0.18':
-    resolution: {integrity: sha512-P24GK3GulZWC5tz87ux0m8OADrQIUVDPIjjj65vBXYG17ZeU3qD7r+MNZ1RNv4l8CGU2vtTRqixrOi9fYk/yKw==}
+  '@vitest/pretty-format@4.1.10':
+    resolution: {integrity: sha512-W1HsjSH4MXQ9YfmmhLAoIYf1HRfekQCGngeIgcei6MP5QQGWUe0gkopdZQaVCFO+JDJMrAJGwa5pRpNpvy4P8Q==}
 
-  '@vitest/runner@4.0.18':
-    resolution: {integrity: sha512-rpk9y12PGa22Jg6g5M3UVVnTS7+zycIGk9ZNGN+m6tZHKQb7jrP7/77WfZy13Y/EUDd52NDsLRQhYKtv7XfPQw==}
+  '@vitest/runner@4.1.10':
+    resolution: {integrity: sha512-IKI6kpIH+LmpROplyLwBBaCfMgOZOMsygVa6BARD6ahA04VRuJSa6OaVG7kRvSEMD870Vd91rSSw0eegtWyLGg==}
 
-  '@vitest/snapshot@4.0.18':
-    resolution: {integrity: sha512-PCiV0rcl7jKQjbgYqjtakly6T1uwv/5BQ9SwBLekVg/EaYeQFPiXcgrC2Y7vDMA8dM1SUEAEV82kgSQIlXNMvA==}
+  '@vitest/snapshot@4.1.10':
+    resolution: {integrity: sha512-xRkfOT1qpTAi/Ti4Y1LtfRc3kEuqxGw59eN2jN9pRWMtS/XDevekhcFSqvQqjUNGksfjMJu3Y+oJ+4Ypn2OaJw==}
 
-  '@vitest/spy@4.0.18':
-    resolution: {integrity: sha512-cbQt3PTSD7P2OARdVW3qWER5EGq7PHlvE+QfzSC0lbwO+xnt7+XH06ZzFjFRgzUX//JmpxrCu92VdwvEPlWSNw==}
+  '@vitest/spy@4.1.10':
+    resolution: {integrity: sha512-PLf/Ugvoq5wO/b4rwYCR1h2PSIdXz7wnkQFMiUpLdtM7l6pqVFcQIBEHyT1+l+cj7mNwAfZHzqXqDyjvOuwbDw==}
 
-  '@vitest/utils@4.0.18':
-    resolution: {integrity: sha512-msMRKLMVLWygpK3u2Hybgi4MNjcYJvwTb0Ru09+fOyCXIgT5raYP041DRRdiJiI3k/2U6SEbAETB3YtBrUkCFA==}
+  '@vitest/utils@4.1.10':
+    resolution: {integrity: sha512-fy9am/HWxbaGt/Sawrp90vt6Y6jQwf1RX77cz3uwoJwJVMli/e1IEwRPnMNJ7vKfPTwo0diXifkpPvwH9v7nGA==}
 
   '@webassemblyjs/ast@1.14.1':
     resolution: {integrity: sha512-nuBEDgQfm1ccRp/8bCQrx1frohyufl4JlbMMZ4P1wpeOfDhF6FQkxZJ1b/e+PLwr6X1Nhw6OLme5usuBWYBvuQ==}
@@ -2721,24 +2288,8 @@ packages:
   '@xtuc/long@4.2.2':
     resolution: {integrity: sha512-NuHqBY1PB/D8xU6s/thBgOAiAP7HOYDQ32+BFZILJ8ivkUkAHQnWfn6WhL79Owj1qmUnoN/YPhktdIoucipkAQ==}
 
-  acorn-import-phases@1.0.4:
-    resolution: {integrity: sha512-wKmbr/DDiIXzEOiWrTTUcDm24kQ2vGfZQvM2fwg2vXqR5uW6aapr7ObPtj1th32b9u90/Pf4AItvdTh42fBmVQ==}
-    engines: {node: '>=10.13.0'}
-    peerDependencies:
-      acorn: ^8.14.0
-
-  acorn-jsx@5.3.2:
-    resolution: {integrity: sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==}
-    peerDependencies:
-      acorn: ^6.0.0 || ^7.0.0 || ^8.0.0
-
-  acorn@8.14.0:
-    resolution: {integrity: sha512-cl669nCJTZBsL97OF4kUQm5g5hC2uihk0NxY3WENAC0TYdILVkAyHymAntgxGkl7K+t0cXIrH5siy5S4XkFycA==}
-    engines: {node: '>=0.4.0'}
-    hasBin: true
-
-  acorn@8.15.0:
-    resolution: {integrity: sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==}
+  acorn@8.16.0:
+    resolution: {integrity: sha512-UVJyE9MttOsBQIDKw1skb9nAwQuR5wuGD3+82K6JgJlm/Y+KI92oNsMNGZCYdDsVtRHSak0pcV5Dno5+4jh9sw==}
     engines: {node: '>=0.4.0'}
     hasBin: true
 
@@ -2755,27 +2306,8 @@ packages:
     peerDependencies:
       ajv: ^8.8.2
 
-  ajv@6.12.6:
-    resolution: {integrity: sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==}
-
-  ajv@8.17.1:
-    resolution: {integrity: sha512-B/gBuNg5SiMTrPkC+A2+cW0RszwxYmn6VYxB/inlBStS5nx6xHIt/ehKRhIMhqusl7a8LjQoZnjCs5vhwxOQ1g==}
-
-  ansi-regex@5.0.1:
-    resolution: {integrity: sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==}
-    engines: {node: '>=8'}
-
-  ansi-regex@6.0.1:
-    resolution: {integrity: sha512-n5M855fKb2SsfMIiFFoVrABHJC8QtHwVx+mHWP3QcEqBHYienj5dHSgjbxtC0WEZXYt4wcD6zrQElDPhFuZgfA==}
-    engines: {node: '>=12'}
-
-  ansi-styles@4.3.0:
-    resolution: {integrity: sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==}
-    engines: {node: '>=8'}
-
-  ansi-styles@6.2.1:
-    resolution: {integrity: sha512-bN798gFfQX+viw3R7yrGWRqnrN2oRkEkUjjl4JNn4E8GxxbjtG3FbrEIIY3l8/hrwUwIeCZvi4QuOTP4MErVug==}
-    engines: {node: '>=12'}
+  ajv@8.20.0:
+    resolution: {integrity: sha512-Thbli+OlOj+iMPYFBVBfJ3OmCAnaSyNn4M1vz9T6Gka5Jt9ba/HIR56joy65tY6kx/FCF5VXNB819Y7/GUrBGA==}
 
   any-promise@1.3.0:
     resolution: {integrity: sha512-7UvmKalWRt1wgjL1RrGxoSJW/0QZFIegpeGvZG9kjp8vrRu55XTHbwnqq2GpXm9uLbcuhxm3IqX9OB4MZR1b2A==}
@@ -2790,77 +2322,20 @@ packages:
   argparse@2.0.1:
     resolution: {integrity: sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==}
 
-  aria-query@5.3.2:
-    resolution: {integrity: sha512-COROpnaoap1E2F000S62r6A60uHZnmlvomhfyT2DlTcrY1OrBKn2UhH7qn5wTC9zMvD0AY7csdPSNwKP+7WiQw==}
-    engines: {node: '>= 0.4'}
-
-  array-buffer-byte-length@1.0.2:
-    resolution: {integrity: sha512-LHE+8BuR7RYGDKvnrmcuSq3tDcKv9OFEXQt/HpbZhY7V6h0zlUXutnAD82GiFx9rdieCMjkvtcsPqBwgUl1Iiw==}
-    engines: {node: '>= 0.4'}
-
-  array-includes@3.1.9:
-    resolution: {integrity: sha512-FmeCCAenzH0KH381SPT5FZmiA/TmpndpcaShhfgEN9eCVjnFBqq3l1xrI42y8+PPLI6hypzou4GXw00WHmPBLQ==}
-    engines: {node: '>= 0.4'}
-
-  array.prototype.findlast@1.2.5:
-    resolution: {integrity: sha512-CVvd6FHg1Z3POpBLxO6E6zr+rSKEQ9L6rZHAaY7lLfhKsWYUBBOuMs0e9o24oopj6H+geRCX0YJ+TJLBK2eHyQ==}
-    engines: {node: '>= 0.4'}
-
-  array.prototype.findlastindex@1.2.6:
-    resolution: {integrity: sha512-F/TKATkzseUExPlfvmwQKGITM3DGTK+vkAsCZoDc5daVygbJBnjEUCbgkAvVFsgfXfX4YIqZ/27G3k3tdXrTxQ==}
-    engines: {node: '>= 0.4'}
-
-  array.prototype.flat@1.3.3:
-    resolution: {integrity: sha512-rwG/ja1neyLqCuGZ5YYrznA62D4mZXg0i1cIskIUKSiqF3Cje9/wXAls9B9s1Wa2fomMsIv8czB8jZcPmxCXFg==}
-    engines: {node: '>= 0.4'}
-
-  array.prototype.flatmap@1.3.3:
-    resolution: {integrity: sha512-Y7Wt51eKJSyi80hFrJCePGGNo5ktJCslFuboqJsbf57CCPcm5zztluPlc4/aD8sWsKvlwatezpV4U1efk8kpjg==}
-    engines: {node: '>= 0.4'}
-
-  array.prototype.tosorted@1.1.4:
-    resolution: {integrity: sha512-p6Fx8B7b7ZhL/gmUsAy0D15WhvDccw3mnGNbZpi3pmeJdxtWsj2jEaI4Y6oo3XiHfzuSgPwKc04MYt6KgvC/wA==}
-    engines: {node: '>= 0.4'}
-
-  arraybuffer.prototype.slice@1.0.4:
-    resolution: {integrity: sha512-BNoCY6SXXPQ7gF2opIP4GBE+Xw7U+pHMYKuzjgCN3GwiaIR09UUeKfheyIry77QtrCBlC0KK0q5/TER/tYh3PQ==}
-    engines: {node: '>= 0.4'}
-
   assertion-error@2.0.1:
     resolution: {integrity: sha512-Izi8RQcffqCeNVgFigKli1ssklIbpHnCYc6AknXGYoB6grJqyeby7jv12JUQgmTAnIDnbck1uxksT4dzN3PWBA==}
     engines: {node: '>=12'}
 
-  ast-types-flow@0.0.8:
-    resolution: {integrity: sha512-OH/2E5Fg20h2aPrbe+QL8JZQFko0YZaF+j4mnQ7BGhfavO7OpSLa8a0y9sBwomHdSbkhTS8TQNayBfnW5DwbvQ==}
-
-  autoprefixer@10.4.24:
-    resolution: {integrity: sha512-uHZg7N9ULTVbutaIsDRoUkoS8/h3bdsmVJYZ5l3wv8Cp/6UIIoRDm90hZ+BwxUj/hGBEzLxdHNSKuFpn8WOyZw==}
+  autoprefixer@10.5.0:
+    resolution: {integrity: sha512-FMhOoZV4+qR6aTUALKX2rEqGG+oyATvwBt9IIzVR5rMa2HRWPkxf+P+PAJLD1I/H5/II+HuZcBJYEFBpq39ong==}
     engines: {node: ^10 || ^12 || >=14}
     hasBin: true
     peerDependencies:
       postcss: ^8.1.0
 
-  available-typed-arrays@1.0.7:
-    resolution: {integrity: sha512-wvUjBtSGN7+7SjNpq/9M2Tg350UZD3q62IFZLbRAR1bSMlCo1ZaeW+BJ+D090e4hIIZLBcTDWe4Mh4jvUDajzQ==}
-    engines: {node: '>= 0.4'}
-
-  axe-core@4.10.2:
-    resolution: {integrity: sha512-RE3mdQ7P3FRSe7eqCWoeQ/Z9QXrtniSjp1wUjt5nRC3WIpz5rSCve6o3fsZ2aCpJtrZjSZgjwXAoTO5k4tEI0w==}
-    engines: {node: '>=4'}
-
-  axobject-query@4.1.0:
-    resolution: {integrity: sha512-qIj0G9wZbMGNLjLmg1PT6v2mE9AH2zlnADJD/2tC6E00hgmhUOfEB6greHPAfLRSufHqROIUTkw6E+M3lH0PTQ==}
-    engines: {node: '>= 0.4'}
-
-  balanced-match@1.0.2:
-    resolution: {integrity: sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==}
-
-  baseline-browser-mapping@2.8.29:
-    resolution: {integrity: sha512-sXdt2elaVnhpDNRDz+1BDx1JQoJRuNk7oVlAlbGiFkLikHCAQiccexF/9e91zVi6RCgqspl04aP+6Cnl9zRLrA==}
-    hasBin: true
-
-  baseline-browser-mapping@2.9.11:
-    resolution: {integrity: sha512-Sg0xJUNDU1sJNGdfGWhVHX0kkZ+HWcvmVymJbj6NSgZZmW/8S9Y2HQ5euytnIgakgxN6papOAWiwDo1ctFDcoQ==}
+  baseline-browser-mapping@2.10.31:
+    resolution: {integrity: sha512-MujYO3eP72uvmSE0i4wltsodRfIpZATP3jvzRNRGGxgzId7aVocVJJV3nf01qnzzKFGxQVC9bpWxl5cjxTr/7Q==}
+    engines: {node: '>=6.0.0'}
     hasBin: true
 
   before-after-hook@4.0.0:
@@ -2870,35 +2345,25 @@ packages:
     resolution: {integrity: sha512-Ceh+7ox5qe7LJuLHoY0feh3pHuUDHAcRUeyL2VYghZwfpkNIy/+8Ocg0a3UuSoYzavmylwuLWQOf3hl0jjMMIw==}
     engines: {node: '>=8'}
 
-  brace-expansion@1.1.11:
-    resolution: {integrity: sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==}
-
-  brace-expansion@2.0.1:
-    resolution: {integrity: sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==}
-
   braces@3.0.3:
     resolution: {integrity: sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==}
     engines: {node: '>=8'}
 
-  browserslist@4.28.0:
-    resolution: {integrity: sha512-tbydkR/CxfMwelN0vwdP/pLkDwyAASZ+VfWm4EOwlB6SWhx1sYnWLqo8N5j0rAzPfzfRaxt0mM/4wPU/Su84RQ==}
-    engines: {node: ^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7}
-    hasBin: true
-
-  browserslist@4.28.1:
-    resolution: {integrity: sha512-ZC5Bd0LgJXgwGqUknZY/vkUQ04r8NXnJZ3yYi4vDmSiZmC/pdSN0NbNRPxZpbtO4uAfDUAFffO8IZoM3Gj8IkA==}
+  browserslist@4.28.2:
+    resolution: {integrity: sha512-48xSriZYYg+8qXna9kwqjIVzuQxi+KYWp2+5nCYnYKPTr0LvD89Jqk2Or5ogxz0NUMfIjhh2lIUX/LyX9B4oIg==}
     engines: {node: ^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7}
     hasBin: true
 
   buffer-from@1.1.2:
     resolution: {integrity: sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ==}
 
-  bun-types@1.3.9:
-    resolution: {integrity: sha512-+UBWWOakIP4Tswh0Bt0QD0alpTY8cb5hvgiYeWCMet9YukHbzuruIEeXC2D7nMJPB12kbh8C7XJykSexEqGKJg==}
+  bun-types@1.3.14:
+    resolution: {integrity: sha512-4N0ig0fEomHt5R0KCFWjovxow98rIoRwKolrYdCcknNwMekCXRnWEUvgu5soYV8QXtVsrUD8B95MBOZGPvr6KQ==}
 
-  bun@1.3.9:
-    resolution: {integrity: sha512-v5hkh1us7sMNjfimWE70flYbD5I1/qWQaqmJ45q2qk5H/7muQVa478LSVRSFyGTBUBog2LsPQnfIRdjyWJRY+A==}
-    os: [darwin, linux, win32]
+  bun@1.3.14:
+    resolution: {integrity: sha512-aB6GVd42x1Y5ie1K16SF+oLGtgSkwX9hgoDdIW88pjvfTccU8F1vfpoOt34QLv0dZ1v3XimtaxPlZUG81Gx9Zg==}
+    cpu: [arm64, x64]
+    os: [darwin, linux, android, freebsd, win32]
     hasBin: true
 
   bundle-require@5.1.0:
@@ -2911,40 +2376,17 @@ packages:
     resolution: {integrity: sha512-b6Ilus+c3RrdDk+JhLKUAQfzzgLEPy6wcXqS7f/xe1EETvsDP6GORG7SFuOs6cID5YkqchW/LXZbX5bc8j7ZcQ==}
     engines: {node: '>=8'}
 
-  call-bind-apply-helpers@1.0.2:
-    resolution: {integrity: sha512-Sp1ablJ0ivDkSzjcaJdxEunN5/XvksFJ2sMBFfq6x0ryhQV/2b/KwFe21cMpmHtPOSij8K99/wSfoEuTObmuMQ==}
-    engines: {node: '>= 0.4'}
-
-  call-bind@1.0.8:
-    resolution: {integrity: sha512-oKlSFMcMwpUg2ednkhQ454wfWiU/ul3CkJe/PEHcTKuiX6RpbehUiFMXu13HalGZxfUwCQzZG747YXBn1im9ww==}
-    engines: {node: '>= 0.4'}
-
-  call-bound@1.0.4:
-    resolution: {integrity: sha512-+ys997U96po4Kx/ABpBCqhA9EuxJaQWDQg7295H4hBphv3IZg0boBKuwYpt4YXp6MZ5AmZQnU/tyMTlRpaSejg==}
-    engines: {node: '>= 0.4'}
-
-  callsites@3.1.0:
-    resolution: {integrity: sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==}
-    engines: {node: '>=6'}
-
   camelcase-css@2.0.1:
     resolution: {integrity: sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==}
     engines: {node: '>= 6'}
 
-  caniuse-lite@1.0.30001761:
-    resolution: {integrity: sha512-JF9ptu1vP2coz98+5051jZ4PwQgd2ni8A+gYSN7EA7dPKIMf0pDlSUxhdmVOaV3/fYK5uWBkgSXJaRLr4+3A6g==}
+  caniuse-lite@1.0.30001793:
+    resolution: {integrity: sha512-iwSsYWaCOoh26cV8NwNRViHlrfUvYsHDfRVcbtmw0Kg6PJIZZXwMkj1442FYLBGkeUf1juAsU3DTfxW579mrPA==}
 
-  caniuse-lite@1.0.30001769:
-    resolution: {integrity: sha512-BCfFL1sHijQlBGWBMuJyhZUhzo7wer5sVj9hqekB/7xn0Ypy+pER/edCYQm4exbXj4WiySGp40P8UuTh6w1srg==}
-
-  chai@6.2.1:
-    resolution: {integrity: sha512-p4Z49OGG5W/WBCPSS/dH3jQ73kD6tiMmUM+bckNK6Jr5JHMG3k9bg/BvKR8lKmtVBKmOiuVaV2ws8s9oSbwysg==}
+  chai@6.2.2:
+    resolution: {integrity: sha512-NUPRluOfOiTKBKvWPtSD4PhFvWCqOi0BGStNWs57X9js7XGTprSmFoz5F0tWhR4WPjNeR9jXqdC7/UpSJTnlRg==}
     engines: {node: '>=18'}
 
-  chalk@4.1.2:
-    resolution: {integrity: sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==}
-    engines: {node: '>=10'}
-
   chardet@2.1.1:
     resolution: {integrity: sha512-PsezH1rqdV9VvyNhxxOW32/d75r01NY7TQCmOqomRo15ZSOKbpTFVsfjghxo6JloQUCGnH4k1LGu0R4yCLlWQQ==}
 
@@ -2960,8 +2402,8 @@ packages:
     resolution: {integrity: sha512-rNjApaLzuwaOTjCiT8lSDdGN1APCiqkChLMJxJPWLunPAt5fy8xgU9/jNOchV84wfIxrA0lRQB7oCT8jrn/wrQ==}
     engines: {node: '>=6.0'}
 
-  citty@0.1.6:
-    resolution: {integrity: sha512-tskPPKEs8D2KPafUypv2gxwJP8h/OaJmC82QQGGDQcHvXX43xF2VDACcJVmZ0EuSxkpO9Kc4MlrA3q0+FG58AQ==}
+  citty@0.2.2:
+    resolution: {integrity: sha512-+6vJA3L98yv+IdfKGZHBNiGW5KHn22e/JwID0Strsz8h4S/csAu/OuICwxrg44k5MRiZHWIo8XXuJgQTriRP4w==}
 
   cli-width@4.1.0:
     resolution: {integrity: sha512-ouuZd4/dm2Sw5Gmqy6bGyNNNe1qt9RpmxveLSO7KcgsTnU7RXfsw+/bukWGo1abgBiMAic068rclZsO4IWmmxQ==}
@@ -2975,17 +2417,6 @@ packages:
     peerDependencies:
       typanion: '*'
 
-  clipboardy@4.0.0:
-    resolution: {integrity: sha512-5mOlNS0mhX0707P2I0aZ2V/cmHUEO/fL7VFLqszkhUsxt7RwnmrInf/eEQKlf5GzvYeHIjT+Ov1HRfNmymlG0w==}
-    engines: {node: '>=18'}
-
-  color-convert@2.0.1:
-    resolution: {integrity: sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==}
-    engines: {node: '>=7.0.0'}
-
-  color-name@1.1.4:
-    resolution: {integrity: sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==}
-
   colorette@2.0.20:
     resolution: {integrity: sha512-IfEDxwoWIjkeXL1eXcDiow4UbKjhLdq6/EuSVR9GMN7KVH3r9gQ83e73hsz1Nd1T3ijd5xv1wcWRYO+D6kCI2w==}
 
@@ -2996,36 +2427,34 @@ packages:
     resolution: {integrity: sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==}
     engines: {node: '>= 6'}
 
-  concat-map@0.0.1:
-    resolution: {integrity: sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==}
-
   confbox@0.1.8:
     resolution: {integrity: sha512-RMtmw0iFkeR4YV+fUOSucriAQNb9g8zFR52MWCtl+cCZOFRNL6zeB395vPzFhEjjn4fMxXudmELnl/KF/WrK6w==}
 
-  consola@3.2.3:
-    resolution: {integrity: sha512-I5qxpzLv+sJhTVEoLYNcTW+bThDCPsit0vLNKShZx6rLtpilNpmmeTPaeqJb9ZE9dV3DGaeby6Vuhrw38WjeyQ==}
+  consola@3.4.2:
+    resolution: {integrity: sha512-5IKcdX0nnYavi6G7TtOhwkYzyjfJlatbjMjuLSfE2kYT5pMDOilZ4OvMhi637CcDICTmz3wARPoyhqyX1Y+XvA==}
     engines: {node: ^14.18.0 || >=16.10.0}
 
-  consola@3.4.0:
-    resolution: {integrity: sha512-EiPU8G6dQG0GFHNR8ljnZFki/8a+cQwEQ+7wpxdChl02Q8HXlwEZWD5lqAF8vC2sEC3Tehr8hy7vErz88LHyUA==}
-    engines: {node: ^14.18.0 || >=16.10.0}
+  content-type@2.0.0:
+    resolution: {integrity: sha512-j/O/d7GcZCyNl7/hwZAb606rzqkyvaDctLmckbxLzHvFBzTJHuGEdodATcP3yIRoDrLHkIATJuvzbFlp/ki2cQ==}
+    engines: {node: '>=18'}
 
   convert-source-map@2.0.0:
     resolution: {integrity: sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==}
 
-  cookie-es@1.2.2:
-    resolution: {integrity: sha512-+W7VmiVINB+ywl1HGXJXmrqkOhpKrIiVZV6tQuV54ZyQC7MMuBt81Vc336GMLoHBq5hV/F9eXgt5Mnx0Rha5Fg==}
-
-  cross-spawn@7.0.6:
-    resolution: {integrity: sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==}
-    engines: {node: '>= 8'}
-
-  crossws@0.3.1:
-    resolution: {integrity: sha512-HsZgeVYaG+b5zA+9PbIPGq4+J/CJynJuearykPsXx4V/eMhyQ5EDVg3Ak2FBZtVXCiOLu/U7IiwDHTr9MA+IKw==}
+  cookie-es@1.2.3:
+    resolution: {integrity: sha512-lXVyvUvrNXblMqzIRrxHb57UUVmqsSWlxqt3XIjCkUP0wDAf6uicO6KMbEgYrMNtEvWgWHwe42CKxPu9MYAnWw==}
 
   crossws@0.3.5:
     resolution: {integrity: sha512-ojKiDvcmByhwa8YYqbQI/hg7MEU0NC03+pSdEq4ZUnZR9xXpwk7E43SMNGkn+JxJGPFtNvQ48+vV2p+P1ml5PA==}
 
+  crossws@0.4.10:
+    resolution: {integrity: sha512-pz3oubH/dt12KjqsUB0IuXW4nwRDQ583iDsP4555Cpdqx0NoU7pGlWBcayyFI8f/l/idRpgjMEfwuOxSWJYlIA==}
+    peerDependencies:
+      srvx: '>=0.11.5'
+    peerDependenciesMeta:
+      srvx:
+        optional: true
+
   cssesc@3.0.0:
     resolution: {integrity: sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==}
     engines: {node: '>=4'}
@@ -3034,29 +2463,6 @@ packages:
   csstype@3.2.3:
     resolution: {integrity: sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ==}
 
-  damerau-levenshtein@1.0.8:
-    resolution: {integrity: sha512-sdQSFB7+llfUcQHUQO3+B8ERRj0Oa4w9POWMI/puGtuf7gFywGmkaLCElnudfTiKZV+NvHqL0ifzdrI8Ro7ESA==}
-
-  data-view-buffer@1.0.2:
-    resolution: {integrity: sha512-EmKO5V3OLXh1rtK2wgXRansaK1/mtVdTUEiEI0W8RkvgT05kfxaH29PliLnpLP73yYO6142Q72QNa8Wx/A5CqQ==}
-    engines: {node: '>= 0.4'}
-
-  data-view-byte-length@1.0.2:
-    resolution: {integrity: sha512-tuhGbE6CfTM9+5ANGf+oQb72Ky/0+s3xKUpHvShfiz2RxMFgFPjsXuRLBVMtvMs15awe45SRb83D6wH4ew6wlQ==}
-    engines: {node: '>= 0.4'}
-
-  data-view-byte-offset@1.0.1:
-    resolution: {integrity: sha512-BS8PfmtDGnrgYdOonGZQdLZslWIeCGFP9tpan0hi1Co2Zr2NKADsvGYA8XxuG/4UWgJ6Cjtv+YJnB6MM69QGlQ==}
-    engines: {node: '>= 0.4'}
-
-  debug@3.2.7:
-    resolution: {integrity: sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==}
-    peerDependencies:
-      supports-color: '*'
-    peerDependenciesMeta:
-      supports-color:
-        optional: true
-
   debug@4.4.3:
     resolution: {integrity: sha512-RGwwWnwQvkVfavKVt22FGLw+xYSdzARwm0ru6DhTVA3umU5hZc28V3kO4stgYryrTlLpuvgI9GiijltAjNbcqA==}
     engines: {node: '>=6.0'}
@@ -3066,27 +2472,16 @@ packages:
       supports-color:
         optional: true
 
-  dedent@1.7.1:
-    resolution: {integrity: sha512-9JmrhGZpOlEgOLdQgSm0zxFaYoQon408V1v49aqTWuXENVlnCuY9JBZcXZiCsZQWDjTm5Qf/nIvAy77mXDAjEg==}
+  dedent@1.7.2:
+    resolution: {integrity: sha512-WzMx3mW98SN+zn3hgemf4OzdmyNhhhKz5Ay0pUfQiMQ3e1g+xmTJWp/pKdwKVXhdSkAEGIIzqeuWrL3mV/AXbA==}
     peerDependencies:
       babel-plugin-macros: ^3.1.0
     peerDependenciesMeta:
       babel-plugin-macros:
         optional: true
 
-  deep-is@0.1.4:
-    resolution: {integrity: sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==}
-
-  define-data-property@1.1.4:
-    resolution: {integrity: sha512-rBMvIzlpA8v6E+SJZoo++HAYqsLrkg7MSfIinMPFhmkorw7X+dOXVJQs+QT69zGkzMyfDnIMN2Wid1+NbL3T+A==}
-    engines: {node: '>= 0.4'}
-
-  define-properties@1.2.1:
-    resolution: {integrity: sha512-8QmQKqEASLd5nx0U1B1okLElbUuuttJ/AnYmRXbbbGDWh6uS208EjD4Xqq/I9wK7u0v6O08XhTWnt5XtEbR6Dg==}
-    engines: {node: '>= 0.4'}
-
-  defu@6.1.4:
-    resolution: {integrity: sha512-mEQCMmwJu317oSz8CwdIOdwf3xMif1ttiM8LTufzc3g6kR+9Pe236twL8j3IYT1F7GfRgGcW6MWxzZjLIkuHIg==}
+  defu@6.1.7:
+    resolution: {integrity: sha512-7z22QmUWiQ/2d0KkdYmANbRUVABpZ9SNYyH5vx6PZ+nE5bcC0l7uFvEfHlyld/HcGBFTL536ClDt3DEcSlEJAQ==}
 
   destr@2.0.5:
     resolution: {integrity: sha512-ugFTXCtDZunbzasqBxrK93Ik/DRYsO6S/fedkWEMKqt04xZ4csmnmwGDBAb07QWNaGMAmnTIemsYZCksjATwsA==}
@@ -3106,94 +2501,33 @@ packages:
   dlv@1.1.3:
     resolution: {integrity: sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==}
 
-  doctrine@2.1.0:
-    resolution: {integrity: sha512-35mSku4ZXK0vfCuHEDAwt55dg2jNajHZ1odvF+8SSr82EsZY4QmXfuWso8oEd8zRhVObSN18aM0CjSdoBX7zIw==}
-    engines: {node: '>=0.10.0'}
+  electron-to-chromium@1.5.361:
+    resolution: {integrity: sha512-Q6Hts7N9FnJc5LeGRINFvLhCI9xZmNtTDe5ZbcVezQz7cU4a8Aua3GH1b8J2XY8Al9PF+OCwYqhgsOOheMdvkA==}
 
-  dunder-proto@1.0.1:
-    resolution: {integrity: sha512-KIN/nDJBQRcXw0MLVhZE9iQHmG68qAVIBg9CqmUYjmQIhgij9U5MFvrqkUL5FbtyyzZuOeOt0zdeRe4UY7ct+A==}
-    engines: {node: '>= 0.4'}
-
-  eastasianwidth@0.2.0:
-    resolution: {integrity: sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==}
-
-  electron-to-chromium@1.5.255:
-    resolution: {integrity: sha512-Z9oIp4HrFF/cZkDPMpz2XSuVpc1THDpT4dlmATFlJUIBVCy9Vap5/rIXsASP1CscBacBqhabwh8vLctqBwEerQ==}
-
-  electron-to-chromium@1.5.267:
-    resolution: {integrity: sha512-0Drusm6MVRXSOJpGbaSVgcQsuB4hEkMpHXaVstcPmhu5LIedxs1xNK/nIxmQIU/RPC0+1/o0AVZfBTkTNJOdUw==}
-
-  emnapi@1.8.1:
-    resolution: {integrity: sha512-34i2BbgHx1LnEO4JCGQYo6h6s4e4KrdWtdTHfllBNLbXSHPmdIHplxKejfabsRK+ukNciqVdalB+fxMibqHdaQ==}
+  emnapi@1.11.3:
+    resolution: {integrity: sha512-+/ZS90YK/rYfVOHtGLHkGffVsnmD/MAKaBHio+Y4XAtg75RLr4cveV/w0jTkUdLM1CcAlaRgG76mpIemWAlk0A==}
     peerDependencies:
       node-addon-api: '>= 6.1.0'
     peerDependenciesMeta:
       node-addon-api:
         optional: true
 
-  emoji-regex@8.0.0:
-    resolution: {integrity: sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==}
-
-  emoji-regex@9.2.2:
-    resolution: {integrity: sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==}
-
-  enhanced-resolve@5.19.0:
-    resolution: {integrity: sha512-phv3E1Xl4tQOShqSte26C7Fl84EwUdZsyOuSSk9qtAGyyQs2s3jJzComh+Abf4g187lUUAvH+H26omrqia2aGg==}
+  enhanced-resolve@5.24.5:
+    resolution: {integrity: sha512-L1l8TNvomm6UVW5B253AGxQagSQr+vGwhMlrrfRS2qmhx46AMpMVJKQYLvWYbysTMY8VoicOvzHzoHMbyzB+4A==}
     engines: {node: '>=10.13.0'}
 
-  es-abstract@1.24.0:
-    resolution: {integrity: sha512-WSzPgsdLtTcQwm4CROfS5ju2Wa1QQcVeT37jFjYzdFz1r9ahadC8B8/a4qxJxM+09F18iumCdRmlr96ZYkQvEg==}
-    engines: {node: '>= 0.4'}
-
-  es-define-property@1.0.1:
-    resolution: {integrity: sha512-e3nRfgfUZ4rNGL232gUgX06QNyyez04KdjFrF+LTRoOXmrOgFKDg4BCdsjW8EnT69eqdYGmRpJwiPVYNrCaW3g==}
-    engines: {node: '>= 0.4'}
-
   es-errors@1.3.0:
     resolution: {integrity: sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==}
     engines: {node: '>= 0.4'}
 
-  es-iterator-helpers@1.1.0:
-    resolution: {integrity: sha512-/SurEfycdyssORP/E+bj4sEu1CWw4EmLDsHynHwSXQ7utgbrMRWW195pTrCjFgFCddf/UkYm3oqKPRq5i8bJbw==}
-    engines: {node: '>= 0.4'}
+  es-module-lexer@2.1.0:
+    resolution: {integrity: sha512-n27zTYMjYu1aj4MjCWzSP7G9r75utsaoc8m61weK+W8JMBGGQybd43GstCXZ3WNmSFtGT9wi59qQTW6mhTR5LQ==}
 
-  es-module-lexer@1.7.0:
-    resolution: {integrity: sha512-jEQoCwk8hyb2AZziIOLhDqpm5+2ww5uIE6lkO/6jcOCusfk6LhMHpXXfBLXTZ7Ydyt0j4VoUQv6uGNYbdW+kBA==}
+  es-toolkit@1.50.0:
+    resolution: {integrity: sha512-OyZKhUVvEep9ITEiwHn8GKnMRQIVqoSIX7WnRbkWgJkllCujilqP2rD0u979tkl8wqyc8ICwlc1UBVv/Sl1G6w==}
 
-  es-module-lexer@2.0.0:
-    resolution: {integrity: sha512-5POEcUuZybH7IdmGsD8wlf0AI55wMecM9rVBTI/qEAy2c1kTOm3DjFYjrBdI2K3BaJjJYfYFeRtM0t9ssnRuxw==}
-
-  es-object-atoms@1.1.1:
-    resolution: {integrity: sha512-FGgH2h8zKNim9ljj7dankFPcICIK9Cp5bm+c2gQSYePhpaG5+esrLODihIorn+Pe6FGJzWhXQotPv73jTaldXA==}
-    engines: {node: '>= 0.4'}
-
-  es-set-tostringtag@2.1.0:
-    resolution: {integrity: sha512-j6vWzfrGVfyXxge+O0x5sh6cvxAog0a/4Rdd2K36zCMV5eJ+/+tOAngRO8cODMNWbVRdVlmGZQL2YS3yR8bIUA==}
-    engines: {node: '>= 0.4'}
-
-  es-shim-unscopables@1.1.0:
-    resolution: {integrity: sha512-d9T8ucsEhh8Bi1woXCf+TIKDIROLG5WCkxg8geBCbvk22kzwC5G2OnXVMO6FUsvQlgUUXQ2itephWDLqDzbeCw==}
-    engines: {node: '>= 0.4'}
-
-  es-to-primitive@1.3.0:
-    resolution: {integrity: sha512-w+5mJ3GuFL+NjVtJlvydShqE1eN3h3PbI7/5LAsYJP/2qtuMXjfL2LpHSRqo4b4eSF5K/DH1JXKUAHSB2UW50g==}
-    engines: {node: '>= 0.4'}
-
-  es-toolkit@1.43.0:
-    resolution: {integrity: sha512-SKCT8AsWvYzBBuUqMk4NPwFlSdqLpJwmy6AP322ERn8W2YLIB6JBXnwMI2Qsh2gfphT3q7EKAxKb23cvFHFwKA==}
-
-  esbuild@0.23.1:
-    resolution: {integrity: sha512-VVNz/9Sa0bs5SELtn3f7qhJCDPCF5oMEl5cO9/SSinpE9hbPVvxbd572HH5AKiP7WD8INO53GgfDDhRjkylHEg==}
-    engines: {node: '>=18'}
-    hasBin: true
-
-  esbuild@0.25.0:
-    resolution: {integrity: sha512-BXq5mqc8ltbaN34cDqWuYKyNhX8D/Z0J1xdtdQ8UcIIIyJyz+ZMKUt58tF3SrZ85jcfN/PZYhjR5uDQAYNVbuw==}
-    engines: {node: '>=18'}
-    hasBin: true
-
-  esbuild@0.27.0:
-    resolution: {integrity: sha512-jd0f4NHbD6cALCyGElNpGAOtWxSq46l9X/sWB0Nzd5er4Kz2YTm+Vl0qKFT9KUJvD8+fiO8AvoHhFvEatfVixA==}
+  esbuild@0.27.7:
+    resolution: {integrity: sha512-IxpibTjyVnmrIQo5aqNpCgoACA/dTKLTlhMHihVHhdkxKyPO1uBBthumT0rdHmcsk9uMonIWS0m4FljWzILh3w==}
     engines: {node: '>=18'}
     hasBin: true
 
@@ -3201,118 +2535,10 @@ packages:
     resolution: {integrity: sha512-WUj2qlxaQtO4g6Pq5c29GTcWGDyd8itL8zTlipgECz3JesAiiOKotd8JU6otB3PACgG6xkJUyVhboMS+bje/jA==}
     engines: {node: '>=6'}
 
-  escape-string-regexp@4.0.0:
-    resolution: {integrity: sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==}
-    engines: {node: '>=10'}
-
-  eslint-config-next@16.1.6:
-    resolution: {integrity: sha512-vKq40io2B0XtkkNDYyleATwblNt8xuh3FWp8SpSz3pt7P01OkBFlKsJZ2mWt5WsCySlDQLckb1zMY9yE9Qy0LA==}
-    peerDependencies:
-      eslint: '>=9.0.0'
-      typescript: '>=3.3.1'
-    peerDependenciesMeta:
-      typescript:
-        optional: true
-
-  eslint-import-resolver-node@0.3.9:
-    resolution: {integrity: sha512-WFj2isz22JahUv+B788TlO3N6zL3nNJGU8CcZbPZvVEkBPaJdCV4vy5wyghty5ROFbCRnm132v8BScu5/1BQ8g==}
-
-  eslint-import-resolver-typescript@3.6.3:
-    resolution: {integrity: sha512-ud9aw4szY9cCT1EWWdGv1L1XR6hh2PaRWif0j2QjQ0pgTY/69iw+W0Z4qZv5wHahOl8isEr+k/JnyAqNQkLkIA==}
-    engines: {node: ^14.18.0 || >=16.0.0}
-    peerDependencies:
-      eslint: '*'
-      eslint-plugin-import: '*'
-      eslint-plugin-import-x: '*'
-    peerDependenciesMeta:
-      eslint-plugin-import:
-        optional: true
-      eslint-plugin-import-x:
-        optional: true
-
-  eslint-module-utils@2.12.1:
-    resolution: {integrity: sha512-L8jSWTze7K2mTg0vos/RuLRS5soomksDPoJLXIslC7c8Wmut3bx7CPpJijDcBZtxQ5lrbUdM+s0OlNbz0DCDNw==}
-    engines: {node: '>=4'}
-    peerDependencies:
-      '@typescript-eslint/parser': '*'
-      eslint: '*'
-      eslint-import-resolver-node: '*'
-      eslint-import-resolver-typescript: '*'
-      eslint-import-resolver-webpack: '*'
-    peerDependenciesMeta:
-      '@typescript-eslint/parser':
-        optional: true
-      eslint:
-        optional: true
-      eslint-import-resolver-node:
-        optional: true
-      eslint-import-resolver-typescript:
-        optional: true
-      eslint-import-resolver-webpack:
-        optional: true
-
-  eslint-plugin-import@2.32.0:
-    resolution: {integrity: sha512-whOE1HFo/qJDyX4SnXzP4N6zOWn79WhnCUY/iDR0mPfQZO8wcYE4JClzI2oZrhBnnMUCBCHZhO6VQyoBU95mZA==}
-    engines: {node: '>=4'}
-    peerDependencies:
-      '@typescript-eslint/parser': '*'
-      eslint: ^2 || ^3 || ^4 || ^5 || ^6 || ^7.2.0 || ^8 || ^9
-    peerDependenciesMeta:
-      '@typescript-eslint/parser':
-        optional: true
-
-  eslint-plugin-jsx-a11y@6.10.1:
-    resolution: {integrity: sha512-zHByM9WTUMnfsDTafGXRiqxp6lFtNoSOWBY6FonVRn3A+BUwN1L/tdBXT40BcBJi0cZjOGTXZ0eD/rTG9fEJ0g==}
-    engines: {node: '>=4.0'}
-    peerDependencies:
-      eslint: ^3 || ^4 || ^5 || ^6 || ^7 || ^8 || ^9
-
-  eslint-plugin-react-hooks@7.0.1:
-    resolution: {integrity: sha512-O0d0m04evaNzEPoSW+59Mezf8Qt0InfgGIBJnpC0h3NH/WjUAR7BIKUfysC6todmtiZ/A0oUVS8Gce0WhBrHsA==}
-    engines: {node: '>=18'}
-    peerDependencies:
-      eslint: ^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0-0 || ^9.0.0
-
-  eslint-plugin-react@7.37.2:
-    resolution: {integrity: sha512-EsTAnj9fLVr/GZleBLFbj/sSuXeWmp1eXIN60ceYnZveqEaUCyW4X+Vh4WTdUhCkW4xutXYqTXCUSyqD4rB75w==}
-    engines: {node: '>=4'}
-    peerDependencies:
-      eslint: ^3 || ^4 || ^5 || ^6 || ^7 || ^8 || ^9.7
-
   eslint-scope@5.1.1:
     resolution: {integrity: sha512-2NxwbF/hZ0KpepYN0cNbo+FN6XoK7GaHlQhgx/hIZl6Va0bF45RQOOwhLIy8lQDbuCiadSLCBnH2CFYquit5bw==}
     engines: {node: '>=8.0.0'}
 
-  eslint-scope@8.4.0:
-    resolution: {integrity: sha512-sNXOfKCn74rt8RICKMvJS7XKV/Xk9kA7DyJr8mJik3S7Cwgy3qlkkmyS2uQB3jiJg6VNdZd/pDBJu0nvG2NlTg==}
-    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
-
-  eslint-visitor-keys@3.4.3:
-    resolution: {integrity: sha512-wpc+LXeiyiisxPlEkUzU6svyS1frIO3Mgxj1fdy7Pm8Ygzguax2N3Fa/D/ag1WqbOprdI+uY6wMUl8/a2G+iag==}
-    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
-
-  eslint-visitor-keys@4.2.1:
-    resolution: {integrity: sha512-Uhdk5sfqcee/9H/rCOJikYz67o0a2Tw2hGRPOG2Y1R2dg7brRe1uG0yaNQDHu+TO/uQPF/5eCapvYSmHUjt7JQ==}
-    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
-
-  eslint@9.39.2:
-    resolution: {integrity: sha512-LEyamqS7W5HB3ujJyvi0HQK/dtVINZvd5mAAp9eT5S/ujByGjiZLCzPcHVzuXbpJDJF/cxwHlfceVUDZ2lnSTw==}
-    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
-    hasBin: true
-    peerDependencies:
-      jiti: '*'
-    peerDependenciesMeta:
-      jiti:
-        optional: true
-
-  espree@10.4.0:
-    resolution: {integrity: sha512-j6PAQ2uUr79PZhBjP5C5fhl8e39FmRnOjsD5lGnWrFU8i2G776tBK7+nP8KuQUTTyAZUwfQqXAgrVH5MbH9CYQ==}
-    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
-
-  esquery@1.6.0:
-    resolution: {integrity: sha512-ca9pw9fomFcKPvFLXhBKUK90ZvGibiGOvRJNbjljY7s7uq/5YO4BOzcYtJqExdx99rF6aAcnRxHmcUHcz6sQsg==}
-    engines: {node: '>=0.10'}
-
   esrecurse@4.3.0:
     resolution: {integrity: sha512-KmfKL3b6G+RXvP8N1vr3Tq1kL/oCFgn2NYXEtqP8/L3pKapUA4G8cFVaoF3SU323CD4XypR/ffioHmkti6/Tag==}
     engines: {node: '>=4.0'}
@@ -3328,20 +2554,12 @@ packages:
   estree-walker@3.0.3:
     resolution: {integrity: sha512-7RUKfXgSMMkzt6ZuXmqapOurLGPPfgj6l9uRZ7lRGolvk0y2yocc35LdcxKC5PQZdn2DMqioAQ2NoWcrTKmm6g==}
 
-  esutils@2.0.3:
-    resolution: {integrity: sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==}
-    engines: {node: '>=0.10.0'}
-
   events@3.3.0:
     resolution: {integrity: sha512-mQw+2fkQbALzQ7V0MY0IqdnXNOeTtP4r0lN9z7AAawCXgqea7bDii20AYrIBrFd/Hx0M2Ocz6S111CaFkUcb0Q==}
     engines: {node: '>=0.8.x'}
 
-  execa@8.0.1:
-    resolution: {integrity: sha512-VyhnebXciFV2DESc+p6B+y0LjSm0krU4OgJN44qFAhBY0TJ+1V61tYD2+wHusZ6F9n5K+vl8k0sTy7PEfV4qpg==}
-    engines: {node: '>=16.17'}
-
-  expect-type@1.2.2:
-    resolution: {integrity: sha512-JhFGDVJ7tmDJItKhYgJCGLOWjuK9vPxiXoUFLwLDc99NlmklilbiQJwoctZtt13+xMw91MCk/REan6MWHqDjyA==}
+  expect-type@1.3.0:
+    resolution: {integrity: sha512-knvyeauYhqjOYvQ66MznSMs83wmHrCycNEN6Ao+2AeYEfxUIkuiVxdEa1qlGEPK+We3n0THiDciYSsCcgW/DoA==}
     engines: {node: '>=12.0.0'}
 
   fast-content-type-parse@3.0.0:
@@ -3354,36 +2572,27 @@ packages:
     resolution: {integrity: sha512-jt2DW/aNFNwke7AUd+Z+e6pz39KO5rzdbbFCg2sGafS4mk13MI7Z8O5z9cADNn5lhGODIgLwug6TZO2ctf7kcw==}
     engines: {node: '>=6.0.0'}
 
-  fast-glob@3.3.1:
-    resolution: {integrity: sha512-kNFPyjhh5cKjrUltxs+wFx+ZkbRaxxmZ+X0ZU31SOsxCEtP9VPgtq2teZw1DebupL5GmDaNQ6yKMMVcM41iqDg==}
-    engines: {node: '>=8.6.0'}
-
   fast-glob@3.3.3:
     resolution: {integrity: sha512-7MptL8U0cqcFdzIzwOTHoilX9x5BrNqye7Z/LuC7kCMRio1EMSyqRK3BEAUD7sXRq4iT4AzTVuZdhgQ2TCvYLg==}
     engines: {node: '>=8.6.0'}
 
-  fast-json-stable-stringify@2.1.0:
-    resolution: {integrity: sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==}
+  fast-string-truncated-width@3.0.3:
+    resolution: {integrity: sha512-0jjjIEL6+0jag3l2XWWizO64/aZVtpiGE3t0Zgqxv0DPuxiMjvB3M24fCyhZUO4KomJQPj3LTSUnDP3GpdwC0g==}
 
-  fast-levenshtein@2.0.6:
-    resolution: {integrity: sha512-DCXu6Ifhqcks7TZKY3Hxp3y6qphY5SJZmrWMDrKcERSOXWQdMhU9Ig/PYrzyw/ul9jOIyh0N4M0tbC5hodg8dw==}
+  fast-string-width@3.0.2:
+    resolution: {integrity: sha512-gX8LrtNEI5hq8DVUfRQMbr5lpaS4nMIWV+7XEbXk2b8kiQIizgnlr12B4dA3ZEx3308ze0O4Q1R+cHts8kyUJg==}
 
   fast-stringify@4.0.0:
     resolution: {integrity: sha512-lE2DIivBaLysf6hK5WH/VfMgqRbvBVHcpGVVTmA5Zi8oWIjq9YxIt6lYGdUgP1HNSXxTIat7HEIDnrSvXSeKQw==}
 
-  fast-uri@3.1.0:
-    resolution: {integrity: sha512-iPeeDKJSWf4IEOasVVrknXpaBV0IApz/gp7S2bb7Z4Lljbl2MGJRqInZiUrQwV16cpzw/D3S5j5Julj/gT52AA==}
+  fast-uri@3.1.2:
+    resolution: {integrity: sha512-rVjf7ArG3LTk+FS6Yw81V1DLuZl1bRbNrev6Tmd/9RaroeeRRJhAt7jg/6YFxbvAQXUCavSoZhPPj6oOx+5KjQ==}
 
-  fastq@1.17.1:
-    resolution: {integrity: sha512-sRVD3lWVIXWg6By68ZN7vho9a1pQcN/WBFaAAsDDFzlJjvoGx0P8z7V1t72grFJfJhu3YPZBuu25f7Kaw2jN1w==}
+  fast-wrap-ansi@0.2.2:
+    resolution: {integrity: sha512-7F2Fl+TjRSenLqlU3UjSH0iyqopqoZIu7eZVpEirP2g1GtWa2G/ecEmBdgz31+Mxr+ELclgg6sokpSFIQiZ02Q==}
 
-  fdir@6.4.6:
-    resolution: {integrity: sha512-hiFoqpyZcfNm1yc4u8oWCf9A2c4D3QjCrks3zmoVKVxpQRzmPNar1hUJcBG2RQHvEVGDN+Jm81ZheVLAQMK6+w==}
-    peerDependencies:
-      picomatch: ^3 || ^4
-    peerDependenciesMeta:
-      picomatch:
-        optional: true
+  fastq@1.20.1:
+    resolution: {integrity: sha512-GGToxJ/w1x32s/D2EKND7kTil4n8OVk/9mycTc4VDza13lOvpUZTGX3mFSCtV9ksdGBVzvsyAVLM6mHFThxXxw==}
 
   fdir@6.5.0:
     resolution: {integrity: sha512-tIbYtZbucOs0BRGqPJkshJUYdL+SDH7dVM8gjy+ERp3WAUjLEFJE+02kanyHtwjWOnwrKYBiwAmM0p4kLJAnXg==}
@@ -3394,40 +2603,17 @@ packages:
       picomatch:
         optional: true
 
-  file-entry-cache@8.0.0:
-    resolution: {integrity: sha512-XXTUwCvisa5oacNGRP9SfNtYBNAMi+RPwBFmblZEF7N7swHYQS6/Zfk7SRwx4D5j3CH211YNRco1DEMNVfZCnQ==}
-    engines: {node: '>=16.0.0'}
-
   fill-range@7.1.1:
     resolution: {integrity: sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==}
     engines: {node: '>=8'}
 
-  find-up-simple@1.0.0:
-    resolution: {integrity: sha512-q7Us7kcjj2VMePAa02hDAF6d+MzsdsAWEwYyOpwUtlerRBkOEPBCRZrAV4XfcSN8fHAgaD0hP7miwoay6DCprw==}
+  find-up-simple@1.0.1:
+    resolution: {integrity: sha512-afd4O7zpqHeRyg4PfDQsXmlDe2PfdHtJt6Akt8jOWaApLOZk5JXs6VMR29lz03pRe9mpykrRCYIYxaJYcfpncQ==}
     engines: {node: '>=18'}
 
-  find-up@5.0.0:
-    resolution: {integrity: sha512-78/PXT1wlLLDgTzDs7sjq9hzz0vXD+zn+7wypEe4fXQxCmdmqfGsEPQxmiCSQI3ajFV91bVSsvNtrJRiW6nGng==}
-    engines: {node: '>=10'}
-
   fix-dts-default-cjs-exports@1.0.1:
     resolution: {integrity: sha512-pVIECanWFC61Hzl2+oOCtoJ3F17kglZC/6N94eRWycFgBH35hHx0Li604ZIzhseh97mf2p0cv7vVrOZGoqhlEg==}
 
-  flat-cache@4.0.1:
-    resolution: {integrity: sha512-f7ccFPK3SXFHpx15UIGyRJ/FJQctuKZ0zVuN3frBo4HnK3cay9VEW0R6yPYFHC0AgqhukPzKjq22t5DmAyqGyw==}
-    engines: {node: '>=16'}
-
-  flatted@3.3.1:
-    resolution: {integrity: sha512-X8cqMLLie7KsNUDSdzeN8FYK9rEt4Dt67OsG/DNGnYTSDBG4uFAJFBnUeiV+zCVAvwFy56IjM9sH51jVaEhNxw==}
-
-  for-each@0.3.5:
-    resolution: {integrity: sha512-dKx12eRCVIzqCxFGplyFKJMPvLEWgmNtUrpTiJIR5u97zEhRG8ySrtboPHZXx7daLxQVrl643cTzbab2tkQjxg==}
-    engines: {node: '>= 0.4'}
-
-  foreground-child@3.3.0:
-    resolution: {integrity: sha512-Ld2g8rrAyMYFXBhEqMz8ZAHBi4J4uS1i/CxGMDnjyFWddMXLVcDp051DZfu+t7+ab7Wv6SMqpWmyFIj5UbfFvg==}
-    engines: {node: '>=14'}
-
   fraction.js@5.3.4:
     resolution: {integrity: sha512-1X1NTtiJphryn/uLQz3whtY6jK3fTqoE3ohKs0tT+Ujr1W59oopxmoEh7Lu5p6vBaPbgoM0bzveAW4Qi5RyWDQ==}
 
@@ -3444,38 +2630,8 @@ packages:
   function-bind@1.1.2:
     resolution: {integrity: sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==}
 
-  function.prototype.name@1.1.8:
-    resolution: {integrity: sha512-e5iwyodOHhbMr/yNrc7fDYG4qlbIvI5gajyzPnb5TCwyhjApznQh1BMFou9b30SevY43gCJKXycoCBjMbsuW0Q==}
-    engines: {node: '>= 0.4'}
-
-  functions-have-names@1.2.3:
-    resolution: {integrity: sha512-xckBUXyTIqT97tq2x2AMb+g163b5JFysYk0x4qxNFwbfQkmNZoiRHb6sPzI9/QV33WeuvVYBUIiD4NzNIyqaRQ==}
-
-  gensync@1.0.0-beta.2:
-    resolution: {integrity: sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg==}
-    engines: {node: '>=6.9.0'}
-
-  get-intrinsic@1.3.0:
-    resolution: {integrity: sha512-9fSjSaos/fRIVIp+xSJlE6lfwhES7LNtKaCBIamHsjr2na1BiABJPo0mOjjz8GJDURarmCPGqaiVg5mfjb98CQ==}
-    engines: {node: '>= 0.4'}
-
-  get-port-please@3.1.2:
-    resolution: {integrity: sha512-Gxc29eLs1fbn6LQ4jSU4vXjlwyZhF5HsGuMAa7gqBP4Rw4yxxltyDUuF5MBclFzDTXO+ACchGQoeela4DSfzdQ==}
-
-  get-proto@1.0.1:
-    resolution: {integrity: sha512-sTSfBjoXBp89JvIKIefqw7U2CCebsc74kiY6awiGogKtoSGbgjYE/G/+l9sF3MWFPNc9IcoOC4ODfKHfxFmp0g==}
-    engines: {node: '>= 0.4'}
-
-  get-stream@8.0.1:
-    resolution: {integrity: sha512-VaUJspBffn/LMCJVoMvSAdmscJyS1auj5Zulnn5UoYcY531UWmdwhRWkcGKnGU93m5HSXP9LP2usOryrBtQowA==}
-    engines: {node: '>=16'}
-
-  get-symbol-description@1.1.0:
-    resolution: {integrity: sha512-w9UMqWwJxHNOvoNzSJ2oPF5wvYcvP7jUvYzhp67yEhTi17ZDBBC1z9pTdGuzjD+EFIqLSYRweZjqfiPzQ06Ebg==}
-    engines: {node: '>= 0.4'}
-
-  get-tsconfig@4.10.0:
-    resolution: {integrity: sha512-kGzZ3LWWQcGIAmg6iWvXn0ei6WDtV26wzHRMwDSzmAbcXrTEXxHy6IehI6/4eT6VRKyMP1eF1VqwrVUmE/LR7A==}
+  get-port-please@3.2.0:
+    resolution: {integrity: sha512-I9QVvBw5U/hw3RmWpYKRumUeaDgxTPd401x364rLmWBJcOQ753eov1eTgzDqRG9bqFIfDc7gfzcQEWrUri3o1A==}
 
   glob-parent@5.1.2:
     resolution: {integrity: sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==}
@@ -3485,443 +2641,184 @@ packages:
     resolution: {integrity: sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==}
     engines: {node: '>=10.13.0'}
 
-  glob-to-regexp@0.4.1:
-    resolution: {integrity: sha512-lkX1HJXwyMcprw/5YUZc2s7DrpAiHB21/V+E1rHUrVNokkvB6bqMzT0VfV6/86ZNabt1k14YOIaT7nDvOX3Iiw==}
-
-  glob@10.4.5:
-    resolution: {integrity: sha512-7Bv8RF0k6xjo7d4A/PxYLbUCfb6c+Vpd2/mB2yRDlew7Jb5hEXiCD9ibfO7wpk8i4sevK6DFny9h7EYbM3/sHg==}
-    deprecated: Old versions of glob are not supported, and contain widely publicized security vulnerabilities, which have been fixed in the current version. Please update. Support for old versions may be purchased (at exorbitant rates) by contacting i@izs.me
-    hasBin: true
-
-  globals@14.0.0:
-    resolution: {integrity: sha512-oahGvuMGQlPw/ivIYBjVSrWAfWLBeku5tpPE2fOPLi+WHffIWbuh2tCjhyQhTBPMf5E9jDEH4FOmTYgYwbKwtQ==}
-    engines: {node: '>=18'}
-
-  globals@16.4.0:
-    resolution: {integrity: sha512-ob/2LcVVaVGCYN+r14cnwnoDPUufjiYgSqRhiFD0Q1iI4Odora5RE8Iv1D24hAz5oMophRGkGz+yuvQmmUMnMw==}
-    engines: {node: '>=18'}
-
-  globalthis@1.0.4:
-    resolution: {integrity: sha512-DpLKbNU4WylpxJykQujfCcwYWiV/Jhm50Goo0wrVILAv5jOr9d+H+UR3PhSCD2rCCEIg0uc+G+muBTwD54JhDQ==}
-    engines: {node: '>= 0.4'}
-
-  globby@15.0.0:
-    resolution: {integrity: sha512-oB4vkQGqlMl682wL1IlWd02tXCbquGWM4voPEI85QmNKCaw8zGTm1f1rubFgkg3Eli2PtKlFgrnmUqasbQWlkw==}
+  globby@16.2.2:
+    resolution: {integrity: sha512-NLvV9ubZ6NDsJaOpKPy3cQeJpKi9DcWiyCiFUpJPA0YihRqiE6RWaLUmgNNPr8MgPpLZjnBjSmou7uZBRJv9wA==}
     engines: {node: '>=20'}
 
-  gopd@1.2.0:
-    resolution: {integrity: sha512-ZUKRh6/kUFoAiTAtTYPZJ3hw9wNxx+BIBOijnlG9PnrJsCcSjs1wyyD6vJpaYtgnzDrKYRSqf3OO6Rfa93xsRg==}
-    engines: {node: '>= 0.4'}
-
   graceful-fs@4.2.11:
     resolution: {integrity: sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==}
 
-  graphemer@1.4.0:
-    resolution: {integrity: sha512-EtKwoO6kxCL9WO5xipiHTZlSzBm7WLT627TqC/uVRd0HKmq8NXyebnNYxDoBi7wt8eTWrUrKXCOVaFq9x1kgag==}
-
-  h3@1.15.5:
-    resolution: {integrity: sha512-xEyq3rSl+dhGX2Lm0+eFQIAzlDN6Fs0EcC4f7BNUmzaRX/PTzeuM+Tr2lHB8FoXggsQIeXLj8EDVgs5ywxyxmg==}
-
-  has-bigints@1.0.2:
-    resolution: {integrity: sha512-tSvCKtBr9lkF0Ex0aQiP9N+OpV4zi2r/Nee5VkRDbaqv35RLYMzbwQfFSZZH0kR+Rd6302UJZ2p/bJCEoR3VoQ==}
+  h3@1.15.11:
+    resolution: {integrity: sha512-L3THSe2MPeBwgIZVSH5zLdBBU90TOxarvhK9d04IDY2AmVS8j2Jz2LIWtwsGOU3lu2I5jCN7FNvVfY2+XyF+mg==}
 
   has-flag@4.0.0:
     resolution: {integrity: sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==}
     engines: {node: '>=8'}
 
-  has-property-descriptors@1.0.2:
-    resolution: {integrity: sha512-55JNKuIW+vq4Ke1BjOTjM2YctQIvCT7GFzHwmfZPGo5wnrgkid0YQtnAleFSqumZm4az3n2BS+erby5ipJdgrg==}
-
-  has-proto@1.2.0:
-    resolution: {integrity: sha512-KIL7eQPfHQRC8+XluaIw7BHUwwqL19bQn4hzNgdr+1wXoU0KKj6rufu47lhY7KbJR2C6T6+PfyN0Ea7wkSS+qQ==}
+  hasown@2.0.3:
+    resolution: {integrity: sha512-ej4AhfhfL2Q2zpMmLo7U1Uv9+PyhIZpgQLGT1F9miIGmiCJIoCgSmczFdrc97mWT4kVY72KA+WnnhJ5pghSvSg==}
     engines: {node: '>= 0.4'}
 
-  has-symbols@1.1.0:
-    resolution: {integrity: sha512-1cDNdwJ2Jaohmb3sg4OmKaMBwuC48sYni5HUw2DvsC8LjGTLK9h+eb1X6RyuOHe4hT0ULCW68iomhjUoKUqlPQ==}
-    engines: {node: '>= 0.4'}
-
-  has-tostringtag@1.0.2:
-    resolution: {integrity: sha512-NqADB8VjPFLM2V0VvHUewwwsw0ZWBaIdgo+ieHtK3hasLz4qeCRjYcqfB6AQrBggRKppKF8L52/VqdVsO47Dlw==}
-    engines: {node: '>= 0.4'}
-
-  hasown@2.0.2:
-    resolution: {integrity: sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==}
-    engines: {node: '>= 0.4'}
-
-  hermes-estree@0.25.1:
-    resolution: {integrity: sha512-0wUoCcLp+5Ev5pDW2OriHC2MJCbwLwuRx+gAqMTOkGKJJiBCLjtrvy4PWUGn6MIVefecRpzoOZ/UV6iGdOr+Cw==}
-
-  hermes-parser@0.25.1:
-    resolution: {integrity: sha512-6pEjquH3rqaI6cYAXYPcz9MS4rY6R4ngRgrgfDshRptUZIc3lw0MCIJIGDj9++mfySOuPTHB4nrSW99BCvOPIA==}
-
   http-shutdown@1.2.2:
     resolution: {integrity: sha512-S9wWkJ/VSY9/k4qcjG318bqJNruzE4HySUhFYknwmu6LBP97KLLfwNf+n4V1BHurvFNkSKLFnK/RsuUnRTf9Vw==}
     engines: {iojs: '>= 1.0.0', node: '>= 0.12.0'}
 
-  human-signals@5.0.0:
-    resolution: {integrity: sha512-AXcZb6vzzrFAUE61HnN4mpLqd/cSIwNQjtNWR0euPm6y0iqx3G4gOXaIDdtdDwZmhwe82LA6+zinmW4UBWVePQ==}
-    engines: {node: '>=16.17.0'}
-
-  iconv-lite@0.7.0:
-    resolution: {integrity: sha512-cf6L2Ds3h57VVmkZe+Pn+5APsT7FpqJtEhhieDCvrE2MK5Qk9MyffgQyuxQTm6BChfeZNtcOLHp9IcWRVcIcBQ==}
+  iconv-lite@0.7.2:
+    resolution: {integrity: sha512-im9DjEDQ55s9fL4EYzOAv0yMqmMBSZp6G0VvFyTMPKWxiSBHUj9NW/qqLmXUwXrrM7AvqSlTCfvqRb0cM8yYqw==}
     engines: {node: '>=0.10.0'}
 
-  ignore@5.3.2:
-    resolution: {integrity: sha512-hsBTNUqQTDwkWtcdYI2i06Y/nUBEsNEDJKjWdigLvegy8kDuJAS8uRlpkkcQpyEXL0Z/pjDy5HBmMjRCJ2gq+g==}
-    engines: {node: '>= 4'}
-
   ignore@7.0.5:
     resolution: {integrity: sha512-Hs59xBNfUIunMFgWAbGX5cq6893IbWg4KnrjbYwX3tx0ztorVgTDA6B2sxf8ejHJ4wz8BqGUMYlnzNBer5NvGg==}
     engines: {node: '>= 4'}
 
-  import-fresh@3.3.0:
-    resolution: {integrity: sha512-veYYhQa+D1QBKznvhUHxb8faxlrwUnxseDAbAp457E0wLNio2bOSKnjYDhMj+YiAq61xrMGhQk9iXVk5FzgQMw==}
-    engines: {node: '>=6'}
-
-  imurmurhash@0.1.4:
-    resolution: {integrity: sha512-JmXMZ6wuvDmLiHEml9ykzqO6lwFbof0GG4IkcGaENdCRDDmMVnny7s5HsIgHCbaq0w2MyPhDqkhTUgS2LU2PHA==}
-    engines: {node: '>=0.8.19'}
-
-  internal-slot@1.1.0:
-    resolution: {integrity: sha512-4gd7VpWNQNB4UKKCFFVcp1AVv+FMOgs9NKzjHKusc8jTMhd5eL1NqQqOpE0KzMds804/yHlglp3uxgluOqAPLw==}
-    engines: {node: '>= 0.4'}
-
   iron-webcrypto@1.2.1:
     resolution: {integrity: sha512-feOM6FaSr6rEABp/eDfVseKyTMDt+KGpeB35SkVn9Tyn0CqvVsY3EwI0v5i8nMHyJnzCIQf7nsy3p41TPkJZhg==}
 
-  is-array-buffer@3.0.5:
-    resolution: {integrity: sha512-DDfANUiiG2wC1qawP66qlTugJeL5HyzMpfr8lLK+jMQirGzNod0B12cFB/9q838Ru27sBwfw78/rdoU7RERz6A==}
-    engines: {node: '>= 0.4'}
-
-  is-async-function@2.0.0:
-    resolution: {integrity: sha512-Y1JXKrfykRJGdlDwdKlLpLyMIiWqWvuSd17TvZk68PLAOGOoF4Xyav1z0Xhoi+gCYjZVeC5SI+hYFOfvXmGRCA==}
-    engines: {node: '>= 0.4'}
-
-  is-bigint@1.1.0:
-    resolution: {integrity: sha512-n4ZT37wG78iz03xPRKJrHTdZbe3IicyucEtdRsV5yglwc3GyUfbAfpSeD0FJ41NbUNSt5wbhqfp1fS+BgnvDFQ==}
-    engines: {node: '>= 0.4'}
-
   is-binary-path@2.1.0:
     resolution: {integrity: sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==}
     engines: {node: '>=8'}
 
-  is-boolean-object@1.2.2:
-    resolution: {integrity: sha512-wa56o2/ElJMYqjCjGkXri7it5FbebW5usLw/nPmCMs5DeZ7eziSYZhSmPRn0txqeW4LnAmQQU7FgqLpsEFKM4A==}
+  is-core-module@2.16.2:
+    resolution: {integrity: sha512-evOr8xfXKxE6qSR0hSXL2r3sd7ALj8+7jQEUvPYcm5sgZFdJ+AYzT6yNmJenvIYQBgIGwfwz08sL8zoL7yq2BA==}
     engines: {node: '>= 0.4'}
 
-  is-bun-module@1.2.1:
-    resolution: {integrity: sha512-AmidtEM6D6NmUiLOvvU7+IePxjEjOzra2h0pSrsfSAcXwl/83zLLXDByafUJy9k/rKK0pvXMLdwKwGHlX2Ke6Q==}
-
-  is-callable@1.2.7:
-    resolution: {integrity: sha512-1BC0BVFhS/p0qtw6enp8e+8OD0UrK0oFLztSjNzhcKA3WDuJxxAPXzPuPtKkjEY9UUoEWlX/8fgKeu2S8i9JTA==}
-    engines: {node: '>= 0.4'}
-
-  is-core-module@2.15.1:
-    resolution: {integrity: sha512-z0vtXSwucUJtANQWldhbtbt7BnL0vxiFjIdDLAatwhDYty2bad6s+rijD6Ri4YuYJubLzIJLUidCh09e1djEVQ==}
-    engines: {node: '>= 0.4'}
-
-  is-core-module@2.16.1:
-    resolution: {integrity: sha512-UfoeMA6fIJ8wTYFEUjelnaGI67v6+N7qXJEvQuIGa99l4xsCruSYOVSQ0uPANn4dAzm8lkYPaKLrrijLq7x23w==}
-    engines: {node: '>= 0.4'}
-
-  is-data-view@1.0.2:
-    resolution: {integrity: sha512-RKtWF8pGmS87i2D6gqQu/l7EYRlVdfzemCJN/P3UOs//x1QE7mfhvzHIApBTRf7axvT6DMGwSwBXYCT0nfB9xw==}
-    engines: {node: '>= 0.4'}
-
-  is-date-object@1.1.0:
-    resolution: {integrity: sha512-PwwhEakHVKTdRNVOw+/Gyh0+MzlCl4R6qKvkhuvLtPMggI1WAHt9sOwZxQLSGpUaDnrdyDsomoRgNnCfKNSXXg==}
-    engines: {node: '>= 0.4'}
-
-  is-docker@3.0.0:
-    resolution: {integrity: sha512-eljcgEDlEns/7AXFosB5K/2nCM4P7FQPkGc/DWLy5rmFEWvZayGrik1d9/QIY5nJ4f9YsVvBkA6kJpHn9rISdQ==}
-    engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
-    hasBin: true
-
   is-extglob@2.1.1:
     resolution: {integrity: sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==}
     engines: {node: '>=0.10.0'}
 
-  is-finalizationregistry@1.1.1:
-    resolution: {integrity: sha512-1pC6N8qWJbWoPtEjgcL2xyhQOP491EQjeUo3qTKcmV8YSDDJrOepfG8pcC7h/QgnQHYSv0mJ3Z/ZWxmatVrysg==}
-    engines: {node: '>= 0.4'}
-
-  is-fullwidth-code-point@3.0.0:
-    resolution: {integrity: sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==}
-    engines: {node: '>=8'}
-
-  is-generator-function@1.0.10:
-    resolution: {integrity: sha512-jsEjy9l3yiXEQ+PsXdmBwEPcOxaXWLspKdplFUVI9vq1iZgIekeC0L167qeu86czQaxed3q/Uzuw0swL0irL8A==}
-    engines: {node: '>= 0.4'}
-
   is-glob@4.0.3:
     resolution: {integrity: sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==}
     engines: {node: '>=0.10.0'}
 
-  is-inside-container@1.0.0:
-    resolution: {integrity: sha512-KIYLCCJghfHZxqjYBE7rEy0OBuTd5xCHS7tHVgvCLkx7StIoaxwNW3hCALgEUjFfeRk+MG/Qxmp/vtETEF3tRA==}
-    engines: {node: '>=14.16'}
-    hasBin: true
-
-  is-map@2.0.3:
-    resolution: {integrity: sha512-1Qed0/Hr2m+YqxnM09CjA2d/i6YZNfF6R2oRAOj36eUdS6qIV/huPJNSEpKbupewFs+ZsJlxsjjPbc0/afW6Lw==}
-    engines: {node: '>= 0.4'}
-
-  is-negative-zero@2.0.3:
-    resolution: {integrity: sha512-5KoIu2Ngpyek75jXodFvnafB6DJgr3u8uuK0LEZJjrU19DrMD3EVERaR8sjz8CCGgpZvxPl9SuE1GMVPFHx1mw==}
-    engines: {node: '>= 0.4'}
-
-  is-number-object@1.1.1:
-    resolution: {integrity: sha512-lZhclumE1G6VYD8VHe35wFaIif+CTy5SJIi5+3y4psDgWu4wPDoBhF8NxUOinEc7pHgiTsT6MaBb92rKhhD+Xw==}
-    engines: {node: '>= 0.4'}
-
   is-number@7.0.0:
     resolution: {integrity: sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==}
     engines: {node: '>=0.12.0'}
 
-  is-regex@1.2.1:
-    resolution: {integrity: sha512-MjYsKHO5O7mCsmRGxWcLWheFqN9DJ/2TmngvjKXihe6efViPqc274+Fx/4fYj/r03+ESvBdTXK0V6tA3rgez1g==}
-    engines: {node: '>= 0.4'}
-
-  is-set@2.0.3:
-    resolution: {integrity: sha512-iPAjerrse27/ygGLxw+EBR9agv9Y6uLeYVJMu+QNCoouJ1/1ri0mGrcWpfCqFZuzzx3WjtwxG098X+n4OuRkPg==}
-    engines: {node: '>= 0.4'}
-
-  is-shared-array-buffer@1.0.4:
-    resolution: {integrity: sha512-ISWac8drv4ZGfwKl5slpHG9OwPNty4jOWPRIhBpxOoD+hqITiwuipOQ2bNthAzwA3B4fIjO4Nln74N0S9byq8A==}
-    engines: {node: '>= 0.4'}
-
-  is-stream@3.0.0:
-    resolution: {integrity: sha512-LnQR4bZ9IADDRSkvpqMGvt/tEJWclzklNgSw48V5EAaAeDd6qGvN8ei6k5p0tvxSR171VmGyHuTiAOfxAbr8kA==}
-    engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
-
-  is-string@1.1.1:
-    resolution: {integrity: sha512-BtEeSsoaQjlSPBemMQIrY1MY0uM6vnS1g5fmufYOtnxLGUZM2178PKbhsk7Ffv58IX+ZtcvoGwccYsh0PglkAA==}
-    engines: {node: '>= 0.4'}
-
-  is-symbol@1.1.1:
-    resolution: {integrity: sha512-9gGx6GTtCQM73BgmHQXfDmLtfjjTUDSyoxTCbp5WtoixAhfgsDirWIcVQ/IHpvI5Vgd5i/J5F7B9cN/WlVbC/w==}
-    engines: {node: '>= 0.4'}
-
-  is-typed-array@1.1.15:
-    resolution: {integrity: sha512-p3EcsicXjit7SaskXHs1hA91QxgTw46Fv6EFKKGS5DRFLD8yKnohjF3hxoju94b/OcMZoQukzpPpBE9uLVKzgQ==}
-    engines: {node: '>= 0.4'}
-
-  is-weakmap@2.0.2:
-    resolution: {integrity: sha512-K5pXYOm9wqY1RgjpL3YTkF39tni1XajUIkawTLUo9EZEVUFga5gSQJF8nNS7ZwJQ02y+1YCNYcMh+HIf1ZqE+w==}
-    engines: {node: '>= 0.4'}
-
-  is-weakref@1.1.1:
-    resolution: {integrity: sha512-6i9mGWSlqzNMEqpCp93KwRS1uUOodk2OJ6b+sq7ZPDSy2WuI5NFIxp/254TytR8ftefexkWn5xNiHUNpPOfSew==}
-    engines: {node: '>= 0.4'}
-
-  is-weakset@2.0.3:
-    resolution: {integrity: sha512-LvIm3/KWzS9oRFHugab7d+M/GcBXuXX5xZkzPmN+NxihdQlZUQ4dWuSV1xR/sq6upL1TJEDrfBgRepHFdBtSNQ==}
-    engines: {node: '>= 0.4'}
-
-  is-wsl@3.1.0:
-    resolution: {integrity: sha512-UcVfVfaK4Sc4m7X3dUSoHoozQGBEFeDC+zVo06t98xe8CzHSZZBekNXH+tu0NalHolcJ/QAGqS46Hef7QXBIMw==}
-    engines: {node: '>=16'}
-
-  is64bit@2.0.0:
-    resolution: {integrity: sha512-jv+8jaWCl0g2lSBkNSVXdzfBA0npK1HGC2KtWM9FumFRoGS94g3NbCCLVnCYHLjp4GrW2KZeeSTMo5ddtznmGw==}
-    engines: {node: '>=18'}
-
-  isarray@2.0.5:
-    resolution: {integrity: sha512-xHjhDr3cNBK0BzdUJSPXZntQUx/mwMS5Rw4A7lPJ90XGAO6ISP/ePDNuo0vhqOZU+UD5JoodwCAAoZQd3FeAKw==}
-
-  isexe@2.0.0:
-    resolution: {integrity: sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==}
-
-  iterator.prototype@1.1.3:
-    resolution: {integrity: sha512-FW5iMbeQ6rBGm/oKgzq2aW4KvAGpxPzYES8N4g4xNXUKpL1mclMvOe+76AcLDTvD+Ze+sOpVhgdAQEKF4L9iGQ==}
-    engines: {node: '>= 0.4'}
-
-  jackspeak@3.4.3:
-    resolution: {integrity: sha512-OGlZQpz2yfahA/Rd1Y8Cd9SIEsqvXkLVoSw/cgwhnhFMDbsQFeZYoJJ7bIZBS9BcamUW96asq/npPWugM+RQBw==}
+  is-path-inside@4.0.0:
+    resolution: {integrity: sha512-lJJV/5dYS+RcL8uQdBDW9c9uWFLLBNRyFhnAKXw5tVqLlKZ4RMGZKv+YQ/IA3OhD+RpbJa1LLFM1FQPGyIXvOA==}
+    engines: {node: '>=12'}
 
   jest-worker@27.5.1:
     resolution: {integrity: sha512-7vuh85V5cdDofPyxn58nrPjBktZo0u9x1g8WtjQol+jZDaE+fhN+cIvTj11GndBnMnyfrUOG1sZQxCdjKh+DKg==}
     engines: {node: '>= 10.13.0'}
 
-  jiti@1.21.6:
-    resolution: {integrity: sha512-2yTgeWTWzMWkHu6Jp9NKgePDaYHbntiwvYuuJLbbN9vl7DC9DvXKOB2BC3ZZ92D3cvV/aflH0osDfwpHepQ53w==}
+  jiti@1.21.7:
+    resolution: {integrity: sha512-/imKNG4EbWNrVjoNC/1H5/9GFy+tqjGBHCaSsN+P2RnPqjsLmv6UD3Ej+Kj8nBWaRAwyk7kK5ZUc+OEatnTR3A==}
     hasBin: true
 
-  jiti@2.4.2:
-    resolution: {integrity: sha512-rg9zJN+G4n2nfJl5MW3BMygZX56zKPNVEYYqq7adpmMh4Jn2QNEwhvQlFy6jPVdcod7txZtKHWnyZiA3a0zP7A==}
-    hasBin: true
-
-  jiti@2.6.1:
-    resolution: {integrity: sha512-ekilCSN1jwRvIbgeg/57YFh8qQDNbwDb9xT/qu2DAHbFFZUicIl4ygVaAvzveMhMVr3LnpSKTNnwt8PoOfmKhQ==}
+  jiti@2.7.0:
+    resolution: {integrity: sha512-AC/7JofJvZGrrneWNaEnJeOLUx+JlGt7tNa0wZiRPT4MY1wmfKjt2+6O2p2uz2+skll8OZZmJMNqeke7kKbNgQ==}
     hasBin: true
 
   joycon@3.1.1:
     resolution: {integrity: sha512-34wB/Y7MW7bzjKRjUKTa46I2Z7eV62Rkhva+KkopW7Qvv/OSWBqvkSY7vusOPrNuZcUG3tApvdVgNB8POj3SPw==}
     engines: {node: '>=10'}
 
-  js-tokens@4.0.0:
-    resolution: {integrity: sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==}
-
-  js-yaml@4.1.0:
-    resolution: {integrity: sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==}
+  js-yaml@4.3.1:
+    resolution: {integrity: sha512-CY6crGq313MX8GkwvB7tzgp99vjQxY1++5y10/BKN/GUfHqWaOGQMNZkBvqSzsZKWk/ijwHlWzzkLulsGHhjWQ==}
     hasBin: true
 
-  jsesc@3.1.0:
-    resolution: {integrity: sha512-/sM3dO2FOzXjKQhJuo0Q173wf2KOo8t4I8vHy6lF9poUp7bKT0/NHE8fPX23PwfhnykfqnC2xRxOnVw5XuGIaA==}
-    engines: {node: '>=6'}
-    hasBin: true
-
-  json-buffer@3.0.1:
-    resolution: {integrity: sha512-4bV5BfR2mqfQTJm+V5tPPdf+ZpuhiIvTuAB5g8kcrXOZpTT/QwwVRWBywX1ozr6lEuPdbHxwaJlm9G6mI2sfSQ==}
-
-  json-parse-even-better-errors@2.3.1:
-    resolution: {integrity: sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w==}
-
-  json-schema-traverse@0.4.1:
-    resolution: {integrity: sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==}
-
   json-schema-traverse@1.0.0:
     resolution: {integrity: sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==}
 
-  json-stable-stringify-without-jsonify@1.0.1:
-    resolution: {integrity: sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw==}
+  json-with-bigint@3.5.8:
+    resolution: {integrity: sha512-eq/4KP6K34kwa7TcFdtvnftvHCD9KvHOGGICWwMFc4dOOKF5t4iYqnfLK8otCRCRv06FXOzGGyqE8h8ElMvvdw==}
 
-  json5@1.0.2:
-    resolution: {integrity: sha512-g1MWMLBiz8FKi1e4w0UyVL3w+iJceWAFBAaBnnGKOpNa5f8TLktkbre1+s6oICydWAm+HRUGTmI+//xv2hvXYA==}
-    hasBin: true
-
-  json5@2.2.3:
-    resolution: {integrity: sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==}
-    engines: {node: '>=6'}
-    hasBin: true
-
-  jsx-ast-utils@3.3.5:
-    resolution: {integrity: sha512-ZZow9HBI5O6EPgSJLUb8n2NKgmVWTwCvHGwFuJlMjvLFqlGG6pjirPhtdsseaLZjSibD8eegzmYpUZwoIlj2cQ==}
-    engines: {node: '>=4.0'}
-
-  keyv@4.5.4:
-    resolution: {integrity: sha512-oxVHkHR/EJf2CNXnWxRLW6mg7JyCCUcG0DtEGmL2ctUo1PNTin1PUil+r/+4r5MpVgC/fn1kjsx7mjSujKqIpw==}
-
-  language-subtag-registry@0.3.23:
-    resolution: {integrity: sha512-0K65Lea881pHotoGEa5gDlMxt3pctLi2RplBb7Ezh4rRdLEOtgi7n4EwK9lamnUCkKBqaeKRVebTq6BAxSkpXQ==}
-
-  language-tags@1.0.9:
-    resolution: {integrity: sha512-MbjN408fEndfiQXbFQ1vnd+1NoLDsnQW41410oQBXiyXDMYH5z505juWa4KUE1LqxRC7DgOgZDbKLxHIwm27hA==}
-    engines: {node: '>=0.10'}
-
-  levn@0.4.1:
-    resolution: {integrity: sha512-+bT2uH4E5LGE7h/n3evcS/sQlJXCpIp6ym8OWJ5eV6+67Dsql/LaaT7qJBAt2rzfoa/5QBGBhxDix1dMt2kQKQ==}
-    engines: {node: '>= 0.8.0'}
-
-  lightningcss-android-arm64@1.32.0:
-    resolution: {integrity: sha512-YK7/ClTt4kAK0vo6w3X+Pnm0D2cf2vPHbhOXdoNti1Ga0al1P4TBZhwjATvjNwLEBCnKvjJc2jQgHXH0NEwlAg==}
+  lightningcss-android-arm64@1.33.0:
+    resolution: {integrity: sha512-gEpRTalKdosp4Bb8qWtc2iOgE5SeIHlpS1up9bFq2wAyYhl1UdTObYiHe98zEM9SQvSoqQZ1IQD0JNpg3Ml5pg==}
     engines: {node: '>= 12.0.0'}
     cpu: [arm64]
     os: [android]
 
-  lightningcss-darwin-arm64@1.32.0:
-    resolution: {integrity: sha512-RzeG9Ju5bag2Bv1/lwlVJvBE3q6TtXskdZLLCyfg5pt+HLz9BqlICO7LZM7VHNTTn/5PRhHFBSjk5lc4cmscPQ==}
+  lightningcss-darwin-arm64@1.33.0:
+    resolution: {integrity: sha512-Sciaz8eenNTKn9b3t7+xr0ipTp9YxKQY4npwQ3mrRuL0BAVHBLyZxofhaKBAVtzmtRZ/zTyo0/to4B1uWG/Djg==}
     engines: {node: '>= 12.0.0'}
+    cpu: [arm64]
     os: [darwin]
 
-  lightningcss-darwin-x64@1.32.0:
-    resolution: {integrity: sha512-U+QsBp2m/s2wqpUYT/6wnlagdZbtZdndSmut/NJqlCcMLTWp5muCrID+K5UJ6jqD2BFshejCYXniPDbNh73V8w==}
+  lightningcss-darwin-x64@1.33.0:
+    resolution: {integrity: sha512-Z5UPAxzrjlWNNyGy6i65cJzzvgJ5D3T6wMvs+gWpY9d7qRhANrxqAp6LhxIgZhWEw18RfJTGcRxjuLIBr+m8XQ==}
     engines: {node: '>= 12.0.0'}
+    cpu: [x64]
     os: [darwin]
 
-  lightningcss-freebsd-x64@1.32.0:
-    resolution: {integrity: sha512-JCTigedEksZk3tHTTthnMdVfGf61Fky8Ji2E4YjUTEQX14xiy/lTzXnu1vwiZe3bYe0q+SpsSH/CTeDXK6WHig==}
+  lightningcss-freebsd-x64@1.33.0:
+    resolution: {integrity: sha512-QQM/Ti/hQajJwCY+RiWuCZ9sdtI/XQk7nDK5vC8kkdwixezOlDgvDx7+RT+QjK6FcFT4MpsuoBnHIo/O3StRRg==}
     engines: {node: '>= 12.0.0'}
     cpu: [x64]
     os: [freebsd]
 
-  lightningcss-linux-arm-gnueabihf@1.32.0:
-    resolution: {integrity: sha512-x6rnnpRa2GL0zQOkt6rts3YDPzduLpWvwAF6EMhXFVZXD4tPrBkEFqzGowzCsIWsPjqSK+tyNEODUBXeeVHSkw==}
+  lightningcss-linux-arm-gnueabihf@1.33.0:
+    resolution: {integrity: sha512-N7FVBe6iS24MlM6R/4RBTxGhQheZGs7tiQ9U32UtF75NzP5Q7xWPRqLBCKxlRQRk3rY1jCIPLzx7WzOhuUIRLQ==}
     engines: {node: '>= 12.0.0'}
     cpu: [arm]
     os: [linux]
 
-  lightningcss-linux-arm64-gnu@1.32.0:
-    resolution: {integrity: sha512-0nnMyoyOLRJXfbMOilaSRcLH3Jw5z9HDNGfT/gwCPgaDjnx0i8w7vBzFLFR1f6CMLKF8gVbebmkUN3fa/kQJpQ==}
+  lightningcss-linux-arm64-gnu@1.33.0:
+    resolution: {integrity: sha512-j2v/itmy4HlNxlc6voKXYgBqNi0Ng2LShg4z7GufpEgs05P+2suBVyi9I6YHq5uoVFx9ETin3eCEhLVyXGQnKg==}
     engines: {node: '>= 12.0.0'}
+    cpu: [arm64]
     os: [linux]
 
-  lightningcss-linux-arm64-musl@1.32.0:
-    resolution: {integrity: sha512-UpQkoenr4UJEzgVIYpI80lDFvRmPVg6oqboNHfoH4CQIfNA+HOrZ7Mo7KZP02dC6LjghPQJeBsvXhJod/wnIBg==}
+  lightningcss-linux-arm64-musl@1.33.0:
+    resolution: {integrity: sha512-yiO5ROMuYQgXbC60yjZU5CYSFZGKXL0HFATXt9mHJn1+zW55oCtMI9NfcVhYLMFDL7gV7oBPon/EmMMGg2OvtQ==}
     engines: {node: '>= 12.0.0'}
+    cpu: [arm64]
     os: [linux]
 
-  lightningcss-linux-x64-gnu@1.32.0:
-    resolution: {integrity: sha512-V7Qr52IhZmdKPVr+Vtw8o+WLsQJYCTd8loIfpDaMRWGUZfBOYEJeyJIkqGIDMZPwPx24pUMfwSxxI8phr/MbOA==}
+  lightningcss-linux-x64-gnu@1.33.0:
+    resolution: {integrity: sha512-ar+Ju7LmcN0Jo4FpL4hpFybwNG9/3A/Br5KW2n2jyODg3MEZXaDYADdemoNS+BDNfMgKvylJLj4S5tyRActuAg==}
     engines: {node: '>= 12.0.0'}
+    cpu: [x64]
     os: [linux]
 
-  lightningcss-linux-x64-musl@1.32.0:
-    resolution: {integrity: sha512-bYcLp+Vb0awsiXg/80uCRezCYHNg1/l3mt0gzHnWV9XP1W5sKa5/TCdGWaR/zBM2PeF/HbsQv/j2URNOiVuxWg==}
+  lightningcss-linux-x64-musl@1.33.0:
+    resolution: {integrity: sha512-RYiYbkokw0trfKqqzfF55lginwEPrD3OJDfTuJzFs1MK6iFnDenaz1fqLLtX4ITG3OktJQXOeTaw1awrBAlZPw==}
     engines: {node: '>= 12.0.0'}
+    cpu: [x64]
     os: [linux]
 
-  lightningcss-win32-arm64-msvc@1.32.0:
-    resolution: {integrity: sha512-8SbC8BR40pS6baCM8sbtYDSwEVQd4JlFTOlaD3gWGHfThTcABnNDBda6eTZeqbofalIJhFx0qKzgHJmcPTnGdw==}
+  lightningcss-win32-arm64-msvc@1.33.0:
+    resolution: {integrity: sha512-1K+MPfLSFVpphzpdbfkhlWk6wBrTObBzS2T6db10PNOZgR9GoVsAWzwNyuhUYYbTp23j+4RrncfujZ4uAzXvwA==}
     engines: {node: '>= 12.0.0'}
     cpu: [arm64]
     os: [win32]
 
-  lightningcss-win32-x64-msvc@1.32.0:
-    resolution: {integrity: sha512-Amq9B/SoZYdDi1kFrojnoqPLxYhQ4Wo5XiL8EVJrVsB8ARoC1PWW6VGtT0WKCemjy8aC+louJnjS7U18x3b06Q==}
+  lightningcss-win32-x64-msvc@1.33.0:
+    resolution: {integrity: sha512-OlEICDx/Xl0FqSp4bry8zFnCvGpig3Gl4gCquvYwHuqJKEC1+n9NgDniFvqHGmMv1ZkqDJrDqKKSykTDX+ehuA==}
     engines: {node: '>= 12.0.0'}
+    cpu: [x64]
     os: [win32]
 
-  lightningcss@1.32.0:
-    resolution: {integrity: sha512-NXYBzinNrblfraPGyrbPoD19C1h9lfI/1mzgWYvXUTe414Gz/X1FD2XBZSZM7rRTrMA8JL3OtAaGifrIKhQ5yQ==}
+  lightningcss@1.33.0:
+    resolution: {integrity: sha512-WkUDrojuJs0xkgGf2udWxa3yGBRxPtxUkB79i6aCZLRgc7PM8fZe9TosfPDcvEpQZbuFASnHYmRLBLUbmLOIIA==}
     engines: {node: '>= 12.0.0'}
 
-  lilconfig@2.1.0:
-    resolution: {integrity: sha512-utWOt/GHzuUxnLKxB6dk81RoOeoNeHgbrXiuGk4yyF5qlRz+iIVWu56E2fqGHFrXz0QNUhLB/8nKqvRH66JKGQ==}
-    engines: {node: '>=10'}
-
-  lilconfig@3.1.2:
-    resolution: {integrity: sha512-eop+wDAvpItUys0FWkHIKeC9ybYrTGbU41U5K7+bttZZeohvnY7M9dZ5kB21GNWiFT2q1OoPTvncPCgSOVO5ow==}
+  lilconfig@3.1.3:
+    resolution: {integrity: sha512-/vlFKAoH5Cgt3Ie+JLhRbwOsCQePABiU3tJ1egGvyQ+33R/vcwM2Zl2QR/LzjsBeItPt3oSVXapn+m4nQDvpzw==}
     engines: {node: '>=14'}
 
   lines-and-columns@1.2.4:
     resolution: {integrity: sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==}
 
-  listhen@1.9.0:
-    resolution: {integrity: sha512-I8oW2+QL5KJo8zXNWX046M134WchxsXC7SawLPvRQpogCbkyQIaFxPE89A2HiwR7vAK2Dm2ERBAmyjTYGYEpBg==}
+  listhen@1.10.1:
+    resolution: {integrity: sha512-6nt/86SkqUQSLW1ofz8MxC6RhRMqOl3ONISe6qqvJ3xj09aJWQx6DhgSZpugs3PX4PXdOas/WD6A9jx6J2N19A==}
     hasBin: true
+    peerDependencies:
+      '@parcel/watcher': ^2.5.6
+    peerDependenciesMeta:
+      '@parcel/watcher':
+        optional: true
 
   load-tsconfig@0.2.5:
     resolution: {integrity: sha512-IXO6OCs9yg8tMKzfPZ1YmheJbZCiEsnBdcB03l0OcfK9prKnJb96siuHCr5Fl37/yo9DnKU+TLpxzTUspw9shg==}
     engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
 
-  loader-runner@4.3.1:
-    resolution: {integrity: sha512-IWqP2SCPhyVFTBtRcgMHdzlf9ul25NwaFx4wCEH/KjAXuuHY4yNjvPXsBokp8jCB936PyWRaPKUNh8NvylLp2Q==}
-    engines: {node: '>=6.11.5'}
-
-  locate-path@6.0.0:
-    resolution: {integrity: sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==}
-    engines: {node: '>=10'}
-
-  lodash.merge@4.6.2:
-    resolution: {integrity: sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==}
-
-  loose-envify@1.4.0:
-    resolution: {integrity: sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==}
-    hasBin: true
-
-  lru-cache@10.4.3:
-    resolution: {integrity: sha512-JNAzZcXrCt42VGLuYz0zfAzDfAvJWW6AfYlDBQyDV5DClI2m5sAmK+OIO7s59XfsRsWHp02jAJrRadPRGTt6SQ==}
-
-  lru-cache@5.1.1:
-    resolution: {integrity: sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==}
-
   magic-string@0.30.21:
     resolution: {integrity: sha512-vd2F4YUyEXKGcLHoq+TEyCjxueSeHnFxyyjNp80yg0XV4vUhnDer/lvvlqM/arB5bXQN5K2/3oinyCRyx8T2CQ==}
 
-  math-intrinsics@1.1.0:
-    resolution: {integrity: sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g==}
-    engines: {node: '>= 0.4'}
+  magic-string@1.1.0:
+    resolution: {integrity: sha512-kS3VHe0nEPST2saQV4Rbkchcd3UBRkVTQHo1D3h/ZTwFDhai/mfKkmtPAtD129EOI7K3HlHIsFOt0WrI2/oU9g==}
 
   merge-stream@2.0.0:
     resolution: {integrity: sha512-abv/qOcuPfk3URPfDzmZU1LKmuw8kT+0nIHvKrKgFrwifol/doWcdA4ZqsWQ8ENrFKkd67Mfpo/LovbIUsbt3w==}
@@ -3933,49 +2830,63 @@ packages:
   micro-memoize@5.1.1:
     resolution: {integrity: sha512-QDwluos8YeMijiKxZGwaV4f4tzj0soS6+xcsJhJ3+4wdEIHMyKbIKVUziebOgWX3e6yiijdoaHo+9tyhbnaWXA==}
 
-  micromatch@4.0.7:
-    resolution: {integrity: sha512-LPP/3KorzCwBxfeUuZmaR6bG2kdeHSbe0P2tY3FLRU4vYrjYz5hI4QZwV0njUx3jeuKe67YukQ1LSPZBKDqO/Q==}
-    engines: {node: '>=8.6'}
-
   micromatch@4.0.8:
     resolution: {integrity: sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==}
     engines: {node: '>=8.6'}
 
-  mime-db@1.52.0:
-    resolution: {integrity: sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==}
+  mime-db@1.54.0:
+    resolution: {integrity: sha512-aU5EJuIN2WDemCcAp2vFBfp/m4EAhWJnUNSSw0ixs7/kXbd6Pg64EmwJkNdFhB8aWt1sH2CTXrLxo/iAGV3oPQ==}
     engines: {node: '>= 0.6'}
 
-  mime-types@2.1.35:
-    resolution: {integrity: sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==}
-    engines: {node: '>= 0.6'}
-
-  mimic-fn@4.0.0:
-    resolution: {integrity: sha512-vqiC06CuhBTUdZH+RYl8sFrL096vA45Ok5ISO6sE/Mr1jRbGH4Csnhi8f3wKVl7x8mO4Au7Ir9D3Oyv1VYMFJw==}
-    engines: {node: '>=12'}
-
   mini-svg-data-uri@1.4.4:
     resolution: {integrity: sha512-r9deDe9p5FJUPZAk3A59wGH7Ii9YrjjWw0jmw/liSbHl2CHiyXj6FcDXDu2K3TjVAXqiJdaw3xxwlZZr9E6nHg==}
     hasBin: true
 
-  minimatch@3.1.2:
-    resolution: {integrity: sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==}
+  minimizer-webpack-plugin@5.6.1:
+    resolution: {integrity: sha512-DoeAZz8Q1C1znwsUzej1fdoi4jCf7/+Em27ouLqfK/+3m8G+D7yDhUwrc3CNhjSzGUN1kn7Iv4sWmjflQHenpw==}
+    engines: {node: '>= 10.13.0'}
+    peerDependencies:
+      '@minify-html/node': '*'
+      '@swc/core': '*'
+      '@swc/css': '*'
+      '@swc/html': '*'
+      clean-css: '*'
+      cssnano: '*'
+      csso: '*'
+      esbuild: '*'
+      html-minifier-terser: '*'
+      lightningcss: '*'
+      postcss: '*'
+      uglify-js: '*'
+      webpack: ^5.1.0
+    peerDependenciesMeta:
+      '@minify-html/node':
+        optional: true
+      '@swc/core':
+        optional: true
+      '@swc/css':
+        optional: true
+      '@swc/html':
+        optional: true
+      clean-css:
+        optional: true
+      cssnano:
+        optional: true
+      csso:
+        optional: true
+      esbuild:
+        optional: true
+      html-minifier-terser:
+        optional: true
+      lightningcss:
+        optional: true
+      postcss:
+        optional: true
+      uglify-js:
+        optional: true
 
-  minimatch@9.0.5:
-    resolution: {integrity: sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow==}
-    engines: {node: '>=16 || 14 >=14.17'}
-
-  minimist@1.2.8:
-    resolution: {integrity: sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==}
-
-  minipass@7.1.2:
-    resolution: {integrity: sha512-qOOzS1cBTWYF4BH8fVePDBOO9iptMnGUEZwNc/cMWnTV2nVLZ7VoNWEPHkYczZA0pdoA7dl6e7FL659nX9S2aw==}
-    engines: {node: '>=16 || 14 >=14.17'}
-
-  mlly@1.7.3:
-    resolution: {integrity: sha512-xUsx5n/mN0uQf4V548PKQ+YShA4/IW0KI1dZhrNrPCLG+xizETbHTkOa1f8/xut9JRPp8kQuMnz0oqwkTiLo/A==}
-
-  mlly@1.7.4:
-    resolution: {integrity: sha512-qmdSIPC4bDJXgZTCR7XosJiNKySV7O215tsPtDN9iEO/7q/76b/ijtgRu/+epFXSJhijtTCCGp3DWS549P3xKw==}
+  mlly@1.8.2:
+    resolution: {integrity: sha512-d+ObxMQFmbt10sretNDytwt85VrbkhhUA/JBGm1MPaWJ65Cl4wOgLaB1NYvJSZ0Ef03MMEU/0xpPMXUIQ29UfA==}
 
   mri@1.2.0:
     resolution: {integrity: sha512-tzzskb3bG8LvYGFF/mDTpq3jpI6Q9wc3LEmBaghu+DdCssd1FakN7Bc0hVNmEyGq1bq3RgfkCb3cmQLpNPOroA==}
@@ -3984,26 +2895,28 @@ packages:
   ms@2.1.3:
     resolution: {integrity: sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==}
 
-  mute-stream@2.0.0:
-    resolution: {integrity: sha512-WWdIxpyjEn+FhQJQQv9aQAYlHoNVdzIzUySNV1gHUPDSdZJ3yZn7pAAbQcV7B56Mvu881q9FZV+0Vx2xC44VWA==}
-    engines: {node: ^18.17.0 || >=20.5.0}
+  mute-stream@3.0.0:
+    resolution: {integrity: sha512-dkEJPVvun4FryqBmZ5KhDo0K9iDXAwn08tMLDinNdRBNPcYEDiWYysLcc6k3mjTMlbP9KyylvRpd4wFtwrT9rw==}
+    engines: {node: ^20.17.0 || >=22.9.0}
 
   mz@2.7.0:
     resolution: {integrity: sha512-z81GNO7nnYMEhrGh9LeymoE4+Yr0Wn5McHIZMK5cfQCl+NDX08sCZgUc9/6MHni9IWuFLm1Z3HTCXu2z9fN62Q==}
 
-  nanoid@3.3.11:
-    resolution: {integrity: sha512-N8SpfPUnUp1bK+PMYW8qSWdl9U+wwNWI4QKxOYDy9JAro3WMX7p2OeVRF9v+347pnakNevPmiHhNmZ2HbFA76w==}
+  nanoid@3.3.12:
+    resolution: {integrity: sha512-ZB9RH/39qpq5Vu6Y+NmUaFhQR6pp+M2Xt76XBnEwDaGcVAqhlvxrl3B2bKS5D3NH3QR76v3aSrKaF/Kiy7lEtQ==}
     engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1}
     hasBin: true
 
-  natural-compare@1.4.0:
-    resolution: {integrity: sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==}
+  nanoid@3.3.16:
+    resolution: {integrity: sha512-bzlKTyNJ7+LdGIIwy8ijFpIqEQIvafahV7eYykJ8Cvh42EdJeODoJ6gUJXpQJvej1BddH8OqTXZNE/KfbWAu8Q==}
+    engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1}
+    hasBin: true
 
   neo-async@2.6.2:
     resolution: {integrity: sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw==}
 
-  next@16.1.6:
-    resolution: {integrity: sha512-hkyRkcu5x/41KoqnROkfTm2pZVbKxvbZRuNvKXLRXxs3VfyO0WhY50TQS40EuKO9SW3rBj/sF3WbVwDACeMZyw==}
+  next@16.2.7:
+    resolution: {integrity: sha512-eMJxgjRzBaj3olkP4cBamHDXL79A8FC6u1GcsO1D1Tsx8bw/LLXUJCaoajVxtnhD3A1IJqIT8IcRJjgBIPJq4w==}
     engines: {node: '>=20.9.0'}
     hasBin: true
     peerDependencies:
@@ -4026,22 +2939,14 @@ packages:
   node-addon-api@7.1.1:
     resolution: {integrity: sha512-5m3bsyrjFWE1xf7nz7YXdN4udnVtXK6/Yfgn5qnahL6bCkf2yKt4k3nuTKAtT4r3IG8JNR2ncsIMdZuAzJjHQQ==}
 
-  node-addon-api@8.2.2:
-    resolution: {integrity: sha512-9emqXAKhVoNrQ792nLI/wpzPpJ/bj/YXxW0CvAau1+RdGBcCRF1Dmz7719zgVsQNrzHl9Tzn3ImZ4qWFarWL0A==}
+  node-addon-api@8.7.0:
+    resolution: {integrity: sha512-9MdFxmkKaOYVTV+XVRG8ArDwwQ77XIgIPyKASB1k3JPq3M8fGQQQE3YpMOrKm6g//Ktx8ivZr8xo1Qmtqub+GA==}
     engines: {node: ^18 || ^20 || >= 21}
 
-  node-addon-api@8.3.0:
-    resolution: {integrity: sha512-8VOpLHFrOQlAH+qA0ZzuGRlALRA6/LVh8QJldbrC4DY0hXoMP0l4Acq8TzFC018HztWiRqyCEj2aTWY2UvnJUg==}
-    engines: {node: ^18 || ^20 || >= 21}
-
-  node-forge@1.3.1:
-    resolution: {integrity: sha512-dPEtOeMvF9VMcYV/1Wb8CPoVAXtp6MKMlcbAt4ddqmGqUJ6fQZFXkNZNkNlfevtNkGtaSoXf/vNNNSvgrdXwtA==}
+  node-forge@1.4.0:
+    resolution: {integrity: sha512-LarFH0+6VfriEhqMMcLX2F7SwSXeWwnEAJEsYm5QKWchiVYVvJyV9v7UDvUv+w5HO23ZpQTXDv/GxdDdMyOuoQ==}
     engines: {node: '>= 6.13.0'}
 
-  node-gyp-build@4.8.2:
-    resolution: {integrity: sha512-IRUxE4BVsHWXkV/SFOut4qTlagw2aM8T5/vnTsmrHJvVoKueJHRc/JaFND7QDDc61kLYUJ6qlZM3sqTSyx2dTw==}
-    hasBin: true
-
   node-gyp-build@4.8.4:
     resolution: {integrity: sha512-LA4ZjwlnUblHVgq0oBF3Jl/6h/Nvs5fzBLwdEF4nuxnFdsfajde4WfxtJr3CaiH+F6ewcIB/q4jQ4UzPyid+CQ==}
     hasBin: true
@@ -4049,17 +2954,14 @@ packages:
   node-mock-http@1.0.4:
     resolution: {integrity: sha512-8DY+kFsDkNXy1sJglUfuODx1/opAGJGyrTuFqEoN90oRc2Vk0ZbD4K2qmKXBBEhZQzdKHIVfEJpDU8Ak2NJEvQ==}
 
-  node-releases@2.0.27:
-    resolution: {integrity: sha512-nmh3lCkYZ3grZvqcCH+fjmQ7X+H0OeZgP40OierEaAptX4XofMh5kwNbWh7lBduUzCcV/8kZ+NDLCwm2iorIlA==}
+  node-releases@2.0.46:
+    resolution: {integrity: sha512-GYVXHE2KnrzAfsAjl4uP++evGFCrAU1jta4ubEjIG7YWt/64Gqv66a30yKwWczVjA6j3bM4nBwH7Pk1JmDHaxQ==}
+    engines: {node: '>=18'}
 
   normalize-path@3.0.0:
     resolution: {integrity: sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==}
     engines: {node: '>=0.10.0'}
 
-  npm-run-path@5.3.0:
-    resolution: {integrity: sha512-ppwTtiJZq0O/ai0z7yfudtBpWIoxM8yE6nHi1X47eFR2EWORqfbu6CnPlNsjeN683eT0qG6H/Pyf9fCcvjnnnQ==}
-    engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
-
   object-assign@4.1.1:
     resolution: {integrity: sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==}
     engines: {node: '>=0.10.0'}
@@ -4068,137 +2970,59 @@ packages:
     resolution: {integrity: sha512-RSn9F68PjH9HqtltsSnqYC1XXoWe9Bju5+213R98cNGttag9q9yAOTzdbsqvIa7aNm5WffBZFpWYr2aWrklWAw==}
     engines: {node: '>= 6'}
 
-  object-inspect@1.13.4:
-    resolution: {integrity: sha512-W67iLl4J2EXEGTbfeHCffrjDfitvLANg0UlX3wFUUSTx92KXRFegMHUVgSqE+wvhAbi4WqjGg9czysTV2Epbew==}
-    engines: {node: '>= 0.4'}
-
-  object-keys@1.1.1:
-    resolution: {integrity: sha512-NuAESUOUMrlIXOfHKzD6bpPu3tYt3xvjNdRIQ+FeT0lNb4K8WR70CaDxhuNguS2XG+GjkyMwOzsN5ZktImfhLA==}
-    engines: {node: '>= 0.4'}
-
-  object.assign@4.1.7:
-    resolution: {integrity: sha512-nK28WOo+QIjBkDduTINE4JkF/UJJKyf2EJxvJKfblDpyg0Q+pkOHNTL0Qwy6NP6FhE/EnzV73BxxqcJaXY9anw==}
-    engines: {node: '>= 0.4'}
-
-  object.entries@1.1.8:
-    resolution: {integrity: sha512-cmopxi8VwRIAw/fkijJohSfpef5PdN0pMQJN6VC/ZKvn0LIknWD8KtgY6KlQdEc4tIjcQ3HxSMmnvtzIscdaYQ==}
-    engines: {node: '>= 0.4'}
-
-  object.fromentries@2.0.8:
-    resolution: {integrity: sha512-k6E21FzySsSK5a21KRADBd/NGneRegFO5pLHfdQLpRDETUNJueLXs3WCzyQ3tFRDYgbq3KHGXfTbi2bs8WQ6rQ==}
-    engines: {node: '>= 0.4'}
-
-  object.groupby@1.0.3:
-    resolution: {integrity: sha512-+Lhy3TQTuzXI5hevh8sBGqbmurHbbIjAi0Z4S63nthVLmLxfbj4T54a4CfZrXIrt9iP4mVAPYMo/v99taj3wjQ==}
-    engines: {node: '>= 0.4'}
-
-  object.values@1.2.1:
-    resolution: {integrity: sha512-gXah6aZrcUxjWg2zR2MwouP2eHlCBzdV4pygudehaKXSGW4v2AsRQUK+lwwXhii6KFZcunEnmSUoYp5CXibxtA==}
-    engines: {node: '>= 0.4'}
-
   obug@2.1.1:
     resolution: {integrity: sha512-uTqF9MuPraAQ+IsnPf366RG4cP9RtUi7MLO1N3KEc+wb0a6yKpeL0lmk2IB1jY5KHPAlTc6T/JRdC/YqxHNwkQ==}
 
-  onetime@6.0.0:
-    resolution: {integrity: sha512-1FlR+gjXK7X+AsAHso35MnyN5KqGwJRi/31ft6x0M194ht7S+rWAvd7PHss9xSKMzE0asv1pyIHaJYq+BbacAQ==}
-    engines: {node: '>=12'}
-
-  optionator@0.9.4:
-    resolution: {integrity: sha512-6IpQ7mKUxRcZNLIObR0hz7lxsapSSIYNZJwXPGeF0mTVqGKFIXj1DQcMoT22S3ROcLyY/rz0PWaWZ9ayWmad9g==}
-    engines: {node: '>= 0.8.0'}
-
-  own-keys@1.0.1:
-    resolution: {integrity: sha512-qFOyK5PjiWZd+QQIh+1jhdb9LpxTF0qs7Pm8o5QHYZ0M3vKqSqzsZaEB6oWlxZ+q2sJBMI/Ktgd2N5ZwQoRHfg==}
-    engines: {node: '>= 0.4'}
-
-  p-limit@3.1.0:
-    resolution: {integrity: sha512-TYOanM3wGwNGsZN2cVTYPArw454xnXj5qmWF1bEoAc4+cU/ol7GVh7odevjp1FNHduHc3KZMcFduxU5Xc6uJRQ==}
-    engines: {node: '>=10'}
-
-  p-locate@5.0.0:
-    resolution: {integrity: sha512-LaNjtRWUBY++zB5nE/NwcaoMylSPk+S+ZHNB1TzdbMJMny6dynpAGt7X/tl/QYq3TIeE6nxHppbo2LGymrG5Pw==}
-    engines: {node: '>=10'}
-
-  package-json-from-dist@1.0.1:
-    resolution: {integrity: sha512-UEZIS3/by4OC8vL3P2dTXRETpebLI2NiI5vIrjaD/5UtrkFX/tNbwjTSRAGC/+7CAo2pIcBaRgWmcBBHcsaCIw==}
+  obug@2.1.4:
+    resolution: {integrity: sha512-4a+OsYv9UktOJKE+l1A4OufDgdRF9PifWj+tJnHURo/P+WOxpG4GzUFL9qCalmWauao6ogiG+QvnCovwPoyAWA==}
+    engines: {node: '>=12.20.0'}
 
   package-up@5.0.0:
     resolution: {integrity: sha512-MQEgDUvXCa3sGvqHg3pzHO8e9gqTCMPVrWUko3vPQGntwegmFo52mZb2abIVTjFnUcW0BcPz0D93jV5Cas1DWA==}
     engines: {node: '>=18'}
 
-  parent-module@1.0.1:
-    resolution: {integrity: sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==}
-    engines: {node: '>=6'}
-
-  path-exists@4.0.0:
-    resolution: {integrity: sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==}
-    engines: {node: '>=8'}
-
-  path-key@3.1.1:
-    resolution: {integrity: sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==}
-    engines: {node: '>=8'}
-
-  path-key@4.0.0:
-    resolution: {integrity: sha512-haREypq7xkM7ErfgIyA0z+Bj4AGKlMSdlQE2jvJo6huWD1EdkKYV+G/T4nq0YEF2vgTT8kqMFKo1uHn950r4SQ==}
-    engines: {node: '>=12'}
-
   path-parse@1.0.7:
     resolution: {integrity: sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==}
 
-  path-scurry@1.11.1:
-    resolution: {integrity: sha512-Xa4Nw17FS9ApQFJ9umLiJS4orGjm7ZzwUrwamcGQuHSzDyth9boKDaycYdDcZDuqYATXw4HFXgaqWTctW/v1HA==}
-    engines: {node: '>=16 || 14 >=14.18'}
-
-  path-type@6.0.0:
-    resolution: {integrity: sha512-Vj7sf++t5pBD637NSfkxpHSMfWaeig5+DKWLhcqIYx6mWQz5hdJTGDVMQiJcw1ZYkhs7AazKDGpRVji1LJCZUQ==}
-    engines: {node: '>=18'}
-
-  pathe@1.1.2:
-    resolution: {integrity: sha512-whLdWMYL2TwI08hn8/ZqAbrVemu0LNaNNJZX73O6qaIdCTfXutsLhMkjdENX0qhsQ9uIimo4/aQOmXkoon2nDQ==}
-
   pathe@2.0.3:
     resolution: {integrity: sha512-WUjGcAqP1gQacoQe+OBJsFA7Ld4DyXuUIjZ5cc75cLHvJ7dtNsTugphxIADwspS+AraAUePCKrSVtPLFj/F88w==}
 
   picocolors@1.1.1:
     resolution: {integrity: sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==}
 
-  picomatch@2.3.1:
-    resolution: {integrity: sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==}
+  picomatch@2.3.2:
+    resolution: {integrity: sha512-V7+vQEJ06Z+c5tSye8S+nHUfI51xoXIXjHQ99cQtKUkQqqO1kO/KCJUfZXuB47h/YBlDhah2H3hdUGXn8ie0oA==}
     engines: {node: '>=8.6'}
 
-  picomatch@4.0.2:
-    resolution: {integrity: sha512-M7BAV6Rlcy5u+m6oPhAPFgJTzAioX/6B0DxyvDlo9l8+T3nLKbrczg2WLUyzd45L8RqfUMyGPzekbMvX2Ldkwg==}
+  picomatch@4.0.4:
+    resolution: {integrity: sha512-QP88BAKvMam/3NxH6vj2o21R6MjxZUAd6nlwAS/pnGvN9IVLocLHxGYIzFhg6fUQ+5th6P4dv4eW9jX3DSIj7A==}
     engines: {node: '>=12'}
 
-  picomatch@4.0.3:
-    resolution: {integrity: sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==}
+  picomatch@4.0.5:
+    resolution: {integrity: sha512-RvwwcruNjI1ncT5xRakeyS9Lf8lcItv34KD+aif+VH9kduAyfYBipGh12274xtenIPZ119/R9BdTBa8gAwSh0A==}
     engines: {node: '>=12'}
 
   pify@2.3.0:
     resolution: {integrity: sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==}
     engines: {node: '>=0.10.0'}
 
-  pirates@4.0.6:
-    resolution: {integrity: sha512-saLsH7WeYYPiD25LDuLRRY/i+6HaPYr6G1OUlN39otzkSTxKnubR9RTxS3/Kk50s1g2JTgFwWQDQyplC5/SHZg==}
+  pirates@4.0.7:
+    resolution: {integrity: sha512-TfySrs/5nm8fQJDcBDuUng3VOUKsd7S+zqvbOTiGXHfxX4wK31ard+hoNuvkicM/2YFzlpDgABOevKSsB4G/FA==}
     engines: {node: '>= 6'}
 
-  pkg-types@1.3.0:
-    resolution: {integrity: sha512-kS7yWjVFCkIw9hqdJBoMxDdzEngmkr5FXeWZZfQ6GoYacjVnsW6l2CcYW/0ThD0vF4LPJgVYnrg4d0uuhwYQbg==}
+  pkg-types@1.3.1:
+    resolution: {integrity: sha512-/Jm5M4RvtBFVkKWRu2BLUTNP8/M2a+UwuAX+ae4770q1qVGtfjG+WTCupoZixokjmHiry8uI+dlY8KXYV5HVVQ==}
 
-  playwright-core@1.58.0:
-    resolution: {integrity: sha512-aaoB1RWrdNi3//rOeKuMiS65UCcgOVljU46At6eFcOFPFHWtd2weHRRow6z/n+Lec0Lvu0k9ZPKJSjPugikirw==}
-    engines: {node: '>=18'}
+  playwright-core@1.62.1:
+    resolution: {integrity: sha512-wPYSwEBJY9GHraISXqyqtx0na0LpO3XEX7jNDhntbex7tzUS7kLnZsOlFruFJB4Hi/rhDMjXGqHewDZ68nYZVw==}
+    engines: {node: '>=20'}
     hasBin: true
 
-  playwright@1.58.0:
-    resolution: {integrity: sha512-2SVA0sbPktiIY/MCOPX8e86ehA/e+tDNq+e5Y8qjKYti2Z/JG7xnronT/TXTIkKbYGWlCbuucZ6dziEgkoEjQQ==}
-    engines: {node: '>=18'}
+  playwright@1.62.1:
+    resolution: {integrity: sha512-0M+L3LAD8/nm554LOla9Ayx0j0tmFZ0FBcoQ7F1VuVHpM/XpiC8RcDzBQB8W5+hA8L22THxELzeF+2WcUzvcLg==}
+    engines: {node: '>=20'}
     hasBin: true
 
-  possible-typed-array-names@1.0.0:
-    resolution: {integrity: sha512-d7Uw+eZoloe0EHDIYoe+bQ5WXnGMOpmiZFTuMWCwpjzzkL2nTjcKiAk4hh8TjnGye2TwWOk3UXucZ+3rbmBa8Q==}
-    engines: {node: '>= 0.4'}
-
   postcss-import@15.1.0:
     resolution: {integrity: sha512-hpr+J05B2FVYUAXHeK1YyI267J/dDDhMU6B6civm8hSY1jYJnBXxzKDKDswzJmtLHryrjhnDjqqp/49t8FALew==}
     engines: {node: '>=14.0.0'}
@@ -4211,24 +3035,12 @@ packages:
     peerDependencies:
       postcss: ^8.0.0
 
-  postcss-js@4.0.1:
-    resolution: {integrity: sha512-dDLF8pEO191hJMtlHFPRa8xsizHaM82MLfNkUHdUtVEV3tgTp5oj+8qbEqYM57SLfc74KSbw//4SeJma2LRVIw==}
+  postcss-js@4.1.0:
+    resolution: {integrity: sha512-oIAOTqgIo7q2EOwbhb8UalYePMvYoIeRY2YKntdpFQXNosSu3vLrniGgmH9OKs/qAkfoj5oB3le/7mINW1LCfw==}
     engines: {node: ^12 || ^14 || >= 16}
     peerDependencies:
       postcss: ^8.4.21
 
-  postcss-load-config@4.0.2:
-    resolution: {integrity: sha512-bSVhyJGL00wMVoPUzAVAnbEoWyqRxkjv64tUl427SKnPrENtq6hJwUojroMz2VB+Q1edmi4IfrAPpami5VVgMQ==}
-    engines: {node: '>= 14'}
-    peerDependencies:
-      postcss: '>=8.0.9'
-      ts-node: '>=9.0.0'
-    peerDependenciesMeta:
-      postcss:
-        optional: true
-      ts-node:
-        optional: true
-
   postcss-load-config@6.0.1:
     resolution: {integrity: sha512-oPtTM4oerL+UXmx+93ytZVN82RrlY/wPUV8IeDxFrzIjXOLF1pN+EmKPLbubvKHT2HC20xXsCAH2Z+CKV6Oz/g==}
     engines: {node: '>= 18'}
@@ -4261,8 +3073,8 @@ packages:
     resolution: {integrity: sha512-Q8qQfPiZ+THO/3ZrOrO0cJJKfpYCagtMUkXbnEfmgUjwXg6z/WBeOyS9APBBPCTSiDV+s4SwQGu8yFsiMRIudg==}
     engines: {node: '>=4'}
 
-  postcss-selector-parser@7.1.1:
-    resolution: {integrity: sha512-orRsuYpJVw8LdAwqqLykBj9ecS5/cRHlI5+nvTo8LcCKmzDmqVORXtOIYEEQuL9D4BxtA1lm5isAqzQZCoQ6Eg==}
+  postcss-selector-parser@7.1.4:
+    resolution: {integrity: sha512-HeP7D2wyhkR+XaK6v4W8oRF62Dsz4flyuczALJp61GckGm42u1saSSJ/0auvcBqxs3jMRFEcPK34At/0JBKdOg==}
     engines: {node: '>=4'}
 
   postcss-value-parser@4.2.0:
@@ -4272,18 +3084,14 @@ packages:
     resolution: {integrity: sha512-PS08Iboia9mts/2ygV3eLpY5ghnUcfLV/EXTOW1E2qYxJKGGBUtNjN76FYHnMs36RmARn41bC0AZmn+rR0OVpQ==}
     engines: {node: ^10 || ^12 || >=14}
 
-  postcss@8.5.6:
-    resolution: {integrity: sha512-3Ybi1tAuwAP9s0r1UQ2J4n5Y0G05bJkpUIO0/bI9MhwmD70S5aTWbXGBwxHrelT+XM1k6dM0pk+SwNkpTRN7Pg==}
+  postcss@8.5.16:
+    resolution: {integrity: sha512-vuwillviilfKZsg0VGj5R/YwwcHx4SLsIOI/7K6mQkWx+l5cUHTjj5g0AasTBcyXsbfTgrwsUNmVUb5xVwyPwg==}
     engines: {node: ^10 || ^12 || >=14}
 
-  postcss@8.5.8:
-    resolution: {integrity: sha512-OW/rX8O/jXnm82Ey1k44pObPtdblfiuWnrd8X7GJ7emImCOstunGbXUpp7HdBrFQX6rJzn3sPT397Wp5aCwCHg==}
+  postcss@8.5.25:
+    resolution: {integrity: sha512-DTPx3RWSSnWyzLxQnlH0rJP+EW5ekl16ZU4/psbIhA0e53kJfdgaN5vKM+xP7yJtXVu+nfdVFmlgFDEKAe4Pyw==}
     engines: {node: ^10 || ^12 || >=14}
 
-  prelude-ls@1.2.1:
-    resolution: {integrity: sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==}
-    engines: {node: '>= 0.8.0'}
-
   prettier-plugin-embed@0.5.1:
     resolution: {integrity: sha512-2Ege8gIlLNTvHElUeU5XcFsD7/dbDXkQA6H9TczHSJAGxB58nNjjifk/dlRMS5E29eqQx/z+ToA4ZVMWzjME/A==}
 
@@ -4297,41 +3105,33 @@ packages:
       vue-tsc:
         optional: true
 
-  prettier@3.8.1:
-    resolution: {integrity: sha512-UOnG6LftzbdaHZcKoPFtOcCKztrQ57WkHDeRD9t/PTQtmT0NHSeWWepj6pS0z/N7+08BHFDQVUrfmfMRcZwbMg==}
+  prettier@3.9.6:
+    resolution: {integrity: sha512-OpN0zzVdiaiAhxpuuj5efpIS4sY9j7bY6uR5mnj5yPzGkdkjNKSJeUThPb60Jw29QuAZgA4o+/iB49kFiaBX6g==}
     engines: {node: '>=14'}
     hasBin: true
 
-  prop-types@15.8.1:
-    resolution: {integrity: sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==}
-
-  punycode@2.3.1:
-    resolution: {integrity: sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==}
-    engines: {node: '>=6'}
-
   queue-microtask@1.2.3:
     resolution: {integrity: sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==}
 
   radix3@1.1.2:
     resolution: {integrity: sha512-b484I/7b8rDEdSDKckSSBA8knMpcdsXudlE/LNL639wFoHKwLbEkQFZHWEYwDC0wa0FKUcCY+GAF73Z7wxNVFA==}
 
-  randombytes@2.1.0:
-    resolution: {integrity: sha512-vYl3iOX+4CKUWuxGi9Ukhie6fsqXqS9FE2Zaic4tNFD2N2QQaXOMFbuKK4QmDHC0JO6B1Zp41J0LpT0oR68amQ==}
-
-  react-dom@19.2.4:
-    resolution: {integrity: sha512-AXJdLo8kgMbimY95O2aKQqsz2iWi9jMgKJhRBAxECE4IFxfcazB2LmzloIoibJI3C12IlY20+KFaLv+71bUJeQ==}
+  react-dom@19.2.6:
+    resolution: {integrity: sha512-0prMI+hvBbPjsWnxDLxlCGyM8PN6UuWjEUCYmZhO67xIV9Xasa/r/vDnq+Xyq4Lo27g8QSbO5YzARu0D1Sps3g==}
     peerDependencies:
-      react: ^19.2.4
+      react: ^19.2.6
 
-  react-is@16.13.1:
-    resolution: {integrity: sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==}
+  react-dom@19.2.7:
+    resolution: {integrity: sha512-t0BRVXvbiE/o20Hfw669rLbMCDWtYZLvmJigy2f0MxsXF+71pxhR3xOkspmsO8h3ZlNzyibAmtCa3l4lYKk6gQ==}
+    peerDependencies:
+      react: ^19.2.7
 
-  react-refresh@0.18.0:
-    resolution: {integrity: sha512-QgT5//D3jfjJb6Gsjxv0Slpj23ip+HtOpnNgnb2S5zU3CB26G/IDPGoy4RJB42wzFE46DRsstbW6tKHoKbhAxw==}
+  react@19.2.6:
+    resolution: {integrity: sha512-sfWGGfavi0xr8Pg0sVsyHMAOziVYKgPLNrS7ig+ivMNb3wbCBw3KxtflsGBAwD3gYQlE/AEZsTLgToRrSCjb0Q==}
     engines: {node: '>=0.10.0'}
 
-  react@19.2.4:
-    resolution: {integrity: sha512-9nfp2hYpCwOjAN+8TZFGhtWEwgvWHXqESH8qT89AT/lWklpLON22Lc8pEtnpsZz7VmawabSU0gCjnj8aC0euHQ==}
+  react@19.2.7:
+    resolution: {integrity: sha512-HNe9WslTbXmFK8o8cmwgAeJFSBvt1bPdHCVKtaaV+WlAN36mpT4hcRpwbf3fY56ar2oIXzsBpOAiIRHAdY0OlQ==}
     engines: {node: '>=0.10.0'}
 
   read-cache@1.0.0:
@@ -4341,73 +3141,40 @@ packages:
     resolution: {integrity: sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==}
     engines: {node: '>=8.10.0'}
 
-  readdirp@4.1.1:
-    resolution: {integrity: sha512-h80JrZu/MHUZCyHu5ciuoI0+WxsCxzxJTILn6Fs8rxSnFPh+UVHYfeIxK1nVGugMqkfC4vJcBOYbkfkwYK0+gw==}
+  readdirp@4.1.2:
+    resolution: {integrity: sha512-GDhwkLfywWL2s6vEjyhri+eXmfH6j1L7JE27WhqLeYzoh/A3DBaYGEj2H/HFZCn/kMfim73FXxEJTw06WtxQwg==}
     engines: {node: '>= 14.18.0'}
 
-  reflect.getprototypeof@1.0.10:
-    resolution: {integrity: sha512-00o4I+DVrefhv+nX0ulyi3biSHCPDe+yLv5o/p6d/UVlirijB8E16FtfwSAi4g3tcqrQ4lRAqQSoFEZJehYEcw==}
-    engines: {node: '>= 0.4'}
-
-  regexp.prototype.flags@1.5.4:
-    resolution: {integrity: sha512-dYqgNSZbDwkaJ2ceRd9ojCGjBq+mOm9LmtXnAnEGyHhN/5R7iDW2TRw3h+o/jCFxus3P2LfWIIiwowAjANm7IA==}
-    engines: {node: '>= 0.4'}
-
   require-from-string@2.0.2:
     resolution: {integrity: sha512-Xf0nWe6RseziFMu+Ap9biiUbmplq6S9/p+7w7YXP/JBHhrUDDUhwa+vANyubuqfZWTveU//DYVGsDG7RKL/vEw==}
     engines: {node: '>=0.10.0'}
 
-  resolve-from@4.0.0:
-    resolution: {integrity: sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==}
-    engines: {node: '>=4'}
-
   resolve-from@5.0.0:
     resolution: {integrity: sha512-qYg9KP24dD5qka9J47d0aVky0N+b4fTU89LN9iDnjB5waksiC49rvMB0PrUJQGoTmH50XPiqOvAjDfaijGxYZw==}
     engines: {node: '>=8'}
 
-  resolve-pkg-maps@1.0.0:
-    resolution: {integrity: sha512-seS2Tj26TBVOC2NIc2rOe2y2ZO7efxITtLZcGSOnHHNOQ7CkiUBfw0Iw2ck6xkIhPwLhKNLS8BO+hEpngQlqzw==}
-
-  resolve@1.22.8:
-    resolution: {integrity: sha512-oKWePCxqpd6FlLvGV1VU0x7bkPmmCNolxzjMf4NczoDnQcIWrAF+cPtZn5i6n+RfD2d9i0tzpKnG6Yk168yIyw==}
+  resolve@1.22.12:
+    resolution: {integrity: sha512-TyeJ1zif53BPfHootBGwPRYT1RUt6oGWsaQr8UyZW/eAm9bKoijtvruSDEmZHm92CwS9nj7/fWttqPCgzep8CA==}
+    engines: {node: '>= 0.4'}
     hasBin: true
 
-  resolve@2.0.0-next.5:
-    resolution: {integrity: sha512-U7WjGVG9sH8tvjW5SmGbQuui75FiyjAX72HX15DwBBwF9dNiQZRQAg9nnPhYy+TUnE0+VcrttuvNI8oSxZcocA==}
-    hasBin: true
-
-  reusify@1.0.4:
-    resolution: {integrity: sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw==}
+  reusify@1.1.0:
+    resolution: {integrity: sha512-g6QUff04oZpHs0eG5p83rFLhHeV00ug/Yf9nZM6fLeUrPguBTkTQOdpAWWspMh55TZfVQDPaN3NQJfbVRAxdIw==}
     engines: {iojs: '>=1.0.0', node: '>=0.10.0'}
 
-  rolldown@1.0.0-rc.9:
-    resolution: {integrity: sha512-9EbgWge7ZH+yqb4d2EnELAntgPTWbfL8ajiTW+SyhJEC4qhBbkCKbqFV4Ge4zmu5ziQuVbWxb/XwLZ+RIO7E8Q==}
+  rolldown@1.2.1:
+    resolution: {integrity: sha512-4FKJhg8d3OiyQOA6Q1Q0hoFFpW9/OoX+VsHzpECsdsIZoOArrAK90gl59YK/Z+gnDel45bgJZK03ozH/9bCqEw==}
     engines: {node: ^20.19.0 || >=22.12.0}
     hasBin: true
 
-  rollup@4.44.0:
-    resolution: {integrity: sha512-qHcdEzLCiktQIfwBq420pn2dP+30uzqYxv9ETm91wdt2R9AFcWfjNAmje4NWlnCIQ5RMTzVf0ZyisOKqHR6RwA==}
+  rollup@4.60.4:
+    resolution: {integrity: sha512-WHeFSbZYsPu3+bLoNRUuAO+wavNlocOPf3wSHTP7hcFKVnJeWsYlCDbr3mTS14FCizf9ccIxXA8sGL8zKeQN3g==}
     engines: {node: '>=18.0.0', npm: '>=8.0.0'}
     hasBin: true
 
   run-parallel@1.2.0:
     resolution: {integrity: sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==}
 
-  safe-array-concat@1.1.3:
-    resolution: {integrity: sha512-AURm5f0jYEOydBj7VQlVvDrjeFgthDdEF5H1dP+6mNpoXOMo1quQqJ4wvJDyRZ9+pO3kGWoOdmV08cSv2aJV6Q==}
-    engines: {node: '>=0.4'}
-
-  safe-buffer@5.2.1:
-    resolution: {integrity: sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==}
-
-  safe-push-apply@1.0.0:
-    resolution: {integrity: sha512-iKE9w/Z7xCzUMIZqdBsp6pEQvwuEebH4vdpjcDWnyzaI6yl6O9FHvVpmGelvEHNsoY6wGblkxR6Zty/h00WiSA==}
-    engines: {node: '>= 0.4'}
-
-  safe-regex-test@1.1.0:
-    resolution: {integrity: sha512-x/+Cz4YrimQxQccJf5mKEbIa1NzeCRNI5Ecl/ekmlYaampdNLPalVyIcCZNNH3MvmqBugV5TMYZXv0ljslUlaw==}
-    engines: {node: '>= 0.4'}
-
   safer-buffer@2.1.2:
     resolution: {integrity: sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==}
 
@@ -4418,63 +3185,15 @@ packages:
     resolution: {integrity: sha512-eflK8wEtyOE6+hsaRVPxvUKYCpRgzLqDTb8krvAsRIwOGlHoSgYLgBXoubGgLd2fT41/OUYdb48v4k4WWHQurA==}
     engines: {node: '>= 10.13.0'}
 
-  semver@6.3.1:
-    resolution: {integrity: sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==}
-    hasBin: true
-
-  semver@7.7.3:
-    resolution: {integrity: sha512-SdsKMrI9TdgjdweUSR9MweHA4EJ8YxHn8DFaDisvhVlUOe4BF1tLD7GAj0lIqWVl+dPb/rExr0Btby5loQm20Q==}
+  semver@7.8.5:
+    resolution: {integrity: sha512-Y7/KDsb8LjooZpwaqGyulO6DQlksgCncchHGk+sZIY4SBvUocMBEFH5Ur1fI4dV+Jvl0w6cjvucaIi40puRioA==}
     engines: {node: '>=10'}
     hasBin: true
 
-  semver@7.7.4:
-    resolution: {integrity: sha512-vFKC2IEtQnVhpT78h1Yp8wzwrf8CM+MzKMHGJZfBtzhZNycRFnXsHk6E5TxIkkMsgNS7mdX3AGB7x2QM2di4lA==}
-    engines: {node: '>=10'}
-    hasBin: true
-
-  serialize-javascript@6.0.2:
-    resolution: {integrity: sha512-Saa1xPByTTq2gdeFZYLLo+RFE35NHZkAbqZeWNd3BpzppeVisAqpDjcp8dyf6uIvEqJRd46jemmyA4iFIeVk8g==}
-
-  set-function-length@1.2.2:
-    resolution: {integrity: sha512-pgRc4hJ4/sNjWCSS9AmnS40x3bNMDTknHgL5UaMBTMyJnU90EgWh1Rz+MC9eFu4BuN/UwZjKQuY/1v3rM7HMfg==}
-    engines: {node: '>= 0.4'}
-
-  set-function-name@2.0.2:
-    resolution: {integrity: sha512-7PGFlmtwsEADb0WYyvCMa1t+yke6daIG4Wirafur5kcf+MhUnPms1UeR0CKQdTZD81yESwMHbtn+TR+dMviakQ==}
-    engines: {node: '>= 0.4'}
-
-  set-proto@1.0.0:
-    resolution: {integrity: sha512-RJRdvCo6IAnPdsvP/7m6bsQqNnn1FCBX5ZNtFL98MmFF/4xAIJTIg1YbHW5DC2W5SKZanrC6i4HsJqlajw/dZw==}
-    engines: {node: '>= 0.4'}
-
   sharp@0.34.5:
     resolution: {integrity: sha512-Ou9I5Ft9WNcCbXrU9cMgPBcCK8LiwLqcbywW3t4oDV37n1pzpuNLsYiAV8eODnjbtQlSDwZ2cUEeQz4E54Hltg==}
     engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
 
-  shebang-command@2.0.0:
-    resolution: {integrity: sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==}
-    engines: {node: '>=8'}
-
-  shebang-regex@3.0.0:
-    resolution: {integrity: sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==}
-    engines: {node: '>=8'}
-
-  side-channel-list@1.0.0:
-    resolution: {integrity: sha512-FCLHtRD/gnpCiCHEiJLOwdmFP+wzCmDEkc9y7NsYxeF4u7Btsn1ZuwgwJGxImImHicJArLP4R0yX4c2KCrMrTA==}
-    engines: {node: '>= 0.4'}
-
-  side-channel-map@1.0.1:
-    resolution: {integrity: sha512-VCjCNfgMsby3tTdo02nbjtM/ewra6jPHmpThenkTYh8pG9ucZ/1P8So4u4FGBek/BjpOVsDCMoLA/iuBKIFXRA==}
-    engines: {node: '>= 0.4'}
-
-  side-channel-weakmap@1.0.2:
-    resolution: {integrity: sha512-WPS/HvHQTYnHisLo9McqBHOJk2FkHO/tlpvldyrnem4aeQp4hai3gythswg6p01oSoTl58rcpiFAjF2br2Ak2A==}
-    engines: {node: '>= 0.4'}
-
-  side-channel@1.1.0:
-    resolution: {integrity: sha512-ZX99e6tRweoUXqR+VBrslhda51Nh5MTQwou5tnUDgbtyM0dBgmhEDtWGP/xbKn6hqfPRHujUNwz5fy/wbbhnpw==}
-    engines: {node: '>= 0.4'}
-
   siginfo@2.0.0:
     resolution: {integrity: sha512-ybx0WO1/8bSBLEWXZvEd7gMW3Sn3JFlW3TvX1nREbDLRNQNaeNN8WK0meBwPdAaOI7TtRRRJn/Es1zhrrCHu7g==}
 
@@ -4504,66 +3223,11 @@ packages:
   stackback@0.0.2:
     resolution: {integrity: sha512-1XMJE5fQo1jGH6Y/7ebnwPOBEkIEnT4QF32d5R1+VXdXveM0IBMJt8zfaxX1P3QhVwrYe+576+jkANtSS2mBbw==}
 
-  std-env@3.10.0:
-    resolution: {integrity: sha512-5GS12FdOZNliM5mAOxFRg7Ir0pWz8MdpYm6AY6VPkGpbA7ZzmbzNcBJQ0GPvvyWgcY7QAhCgf9Uy89I03faLkg==}
+  std-env@4.1.0:
+    resolution: {integrity: sha512-Rq7ybcX2RuC55r9oaPVEW7/xu3tj8u4GeBYHBWCychFtzMIr86A7e3PPEBPT37sHStKX3+TiX/Fr/ACmJLVlLQ==}
 
-  std-env@3.7.0:
-    resolution: {integrity: sha512-JPbdCEQLj1w5GilpiHAx3qJvFndqybBysA3qUOnznweH4QbNYUsW/ea8QzSrnh0vNsezMMw5bcVool8lM0gwzg==}
-
-  stop-iteration-iterator@1.1.0:
-    resolution: {integrity: sha512-eLoXW/DHyl62zxY4SCaIgnRhuMr6ri4juEYARS8E6sCEqzKpOiE521Ucofdx+KnDZl5xmvGYaaKCk5FEOxJCoQ==}
-    engines: {node: '>= 0.4'}
-
-  string-width@4.2.3:
-    resolution: {integrity: sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==}
-    engines: {node: '>=8'}
-
-  string-width@5.1.2:
-    resolution: {integrity: sha512-HnLOCR3vjcY8beoNLtcjZ5/nxn2afmME6lhrDrebokqMap+XbeW8n9TXpPDOqdGK5qcI3oT0GKTW6wC7EMiVqA==}
-    engines: {node: '>=12'}
-
-  string.prototype.includes@2.0.1:
-    resolution: {integrity: sha512-o7+c9bW6zpAdJHTtujeePODAhkuicdAryFsfVKwA+wGw89wJ4GTY484WTucM9hLtDEOpOvI+aHnzqnC5lHp4Rg==}
-    engines: {node: '>= 0.4'}
-
-  string.prototype.matchall@4.0.11:
-    resolution: {integrity: sha512-NUdh0aDavY2og7IbBPenWqR9exH+E26Sv8e0/eTe1tltDGZL+GtBkDAnnyBtmekfK6/Dq3MkcGtzXFEd1LQrtg==}
-    engines: {node: '>= 0.4'}
-
-  string.prototype.repeat@1.0.0:
-    resolution: {integrity: sha512-0u/TldDbKD8bFCQ/4f5+mNRrXwZ8hg2w7ZR8wa16e8z9XpePWl3eGEcUD0OXpEH/VJH/2G3gjUtR3ZOiBe2S/w==}
-
-  string.prototype.trim@1.2.10:
-    resolution: {integrity: sha512-Rs66F0P/1kedk5lyYyH9uBzuiI/kNRmwJAR9quK6VOtIpZ2G+hMZd+HQbbv25MgCA6gEffoMZYxlTod4WcdrKA==}
-    engines: {node: '>= 0.4'}
-
-  string.prototype.trimend@1.0.9:
-    resolution: {integrity: sha512-G7Ok5C6E/j4SGfyLCloXTrngQIQU3PWtXGst3yM7Bea9FRURf1S42ZHlZZtsNque2FN2PoUhfZXYLNWwEr4dLQ==}
-    engines: {node: '>= 0.4'}
-
-  string.prototype.trimstart@1.0.8:
-    resolution: {integrity: sha512-UXSH262CSZY1tfu3G3Secr6uGLCFVPMhIqHjlgCUtCCcgihYc/xKs9djMTMUOb2j1mVSeU8EU6NWc/iQKU6Gfg==}
-    engines: {node: '>= 0.4'}
-
-  strip-ansi@6.0.1:
-    resolution: {integrity: sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==}
-    engines: {node: '>=8'}
-
-  strip-ansi@7.1.0:
-    resolution: {integrity: sha512-iq6eVVI64nQQTRYq2KtEg2d2uU7LElhTJwsH4YzIHZshxlgZms/wIc4VoDQTlG/IvVIrBKG06CrZnp0qv7hkcQ==}
-    engines: {node: '>=12'}
-
-  strip-bom@3.0.0:
-    resolution: {integrity: sha512-vavAMRXOgBVNF6nyEEmL3DBK19iRpDcoIwW+swQ+CbGiu7lju6t+JklA1MHweoWtadgt4ISVUsXLyDq34ddcwA==}
-    engines: {node: '>=4'}
-
-  strip-final-newline@3.0.0:
-    resolution: {integrity: sha512-dOESqjYr96iWYylGObzd39EuNTa5VJxyvVAEm5Jnh7KGo75V43Hk1odPQkNDyXNmUR6k+gEiDVXnjB8HJ3crXw==}
-    engines: {node: '>=12'}
-
-  strip-json-comments@3.1.1:
-    resolution: {integrity: sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==}
-    engines: {node: '>=8'}
+  std-env@4.2.0:
+    resolution: {integrity: sha512-oCUKSupKTHX53EyjDtuZQ64pjLJ6yYCtpmEw0goYxtjG9KpbRe8KAsl2tBUGU9DyMcJ0RwJ8GqJAFzMXcXW1Rw==}
 
   styled-jsx@5.1.6:
     resolution: {integrity: sha512-qSVyDTeMotdvQYoHWLNGwRFJHC+i+ZvdBRYosOFgC+Wg1vx4frN2/RG/NA7SYqqvKNLf39P2LSRA2pu6n0XYZA==}
@@ -4578,15 +3242,11 @@ packages:
       babel-plugin-macros:
         optional: true
 
-  sucrase@3.35.0:
-    resolution: {integrity: sha512-8EbVDiu9iN/nESwxeSxDKe0dunta1GOlHufmSSXxMD2z2/tMZpDMpvXQGsc+ajGo8y2uYUmixaSRUc/QPoQ0GA==}
+  sucrase@3.35.1:
+    resolution: {integrity: sha512-DhuTmvZWux4H1UOnWMB3sk0sbaCVOoQZjv8u1rDoTV0HTdGem9hkAZtl4JZy8P2z4Bg0nT+YMeOFyVr4zcG5Tw==}
     engines: {node: '>=16 || 14 >=14.17'}
     hasBin: true
 
-  supports-color@7.2.0:
-    resolution: {integrity: sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==}
-    engines: {node: '>=8'}
-
   supports-color@8.1.1:
     resolution: {integrity: sha512-MpUEN2OodtUzxvKQl72cUF7RQ5EiHsGvSsVG0ia9c5RbWGL2CI4C7EpPS8UTBIplnlzZiNuV56w+FuNxy3ty2Q==}
     engines: {node: '>=10'}
@@ -4595,41 +3255,21 @@ packages:
     resolution: {integrity: sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==}
     engines: {node: '>= 0.4'}
 
-  system-architecture@0.1.0:
-    resolution: {integrity: sha512-ulAk51I9UVUyJgxlv9M6lFot2WP3e7t8Kz9+IS6D4rVba1tR9kON+Ey69f+1R4Q8cd45Lod6a4IcJIxnzGc/zA==}
-    engines: {node: '>=18'}
-
   tagged-tag@1.0.0:
     resolution: {integrity: sha512-yEFYrVhod+hdNyx7g5Bnkkb0G6si8HJurOoOEgC8B/O0uXLHlaey/65KRv6cuWBNhBgHKAROVpc7QyYqE5gFng==}
     engines: {node: '>=20'}
 
-  tailwindcss@3.4.14:
-    resolution: {integrity: sha512-IcSvOcTRcUtQQ7ILQL5quRDg7Xs93PdJEk1ZLbhhvJc7uj/OAhYOnruEiwnGgBvUtaUAJ8/mhSw1o8L2jCiENA==}
+  tailwindcss@3.4.19:
+    resolution: {integrity: sha512-3ofp+LL8E+pK/JuPLPggVAIaEuhvIz4qNcf3nA1Xn2o/7fb7s/TYpHhwGDv1ZU3PkBluUVaF8PyCHcm48cKLWQ==}
     engines: {node: '>=14.0.0'}
     hasBin: true
 
-  tapable@2.3.0:
-    resolution: {integrity: sha512-g9ljZiwki/LfxmQADO3dEY1CbpmXT5Hm2fJ+QaGKwSXUylMybePR7/67YW7jOrrvjEgL1Fmz5kzyAjWVWLlucg==}
+  tapable@2.3.3:
+    resolution: {integrity: sha512-uxc/zpqFg6x7C8vOE7lh6Lbda8eEL9zmVm/PLeTPBRhh1xCgdWaQ+J1CUieGpIfm2HdtsUpRv+HshiasBMcc6A==}
     engines: {node: '>=6'}
 
-  terser-webpack-plugin@5.3.16:
-    resolution: {integrity: sha512-h9oBFCWrq78NyWWVcSwZarJkZ01c2AyGrzs1crmHZO3QUg9D61Wu4NPjBy69n7JqylFF5y+CsUZYmYEIZ3mR+Q==}
-    engines: {node: '>= 10.13.0'}
-    peerDependencies:
-      '@swc/core': '*'
-      esbuild: '*'
-      uglify-js: '*'
-      webpack: ^5.1.0
-    peerDependenciesMeta:
-      '@swc/core':
-        optional: true
-      esbuild:
-        optional: true
-      uglify-js:
-        optional: true
-
-  terser@5.31.6:
-    resolution: {integrity: sha512-PQ4DAriWzKj+qgehQ7LK5bQqCFNMmlhjR2PFFLuqGCpuCAauxemVBWwWOxo3UIwWQx8+Pr61Df++r76wDmkQBg==}
+  terser@5.48.0:
+    resolution: {integrity: sha512-J/9An6vs9Us6wKRriSFXBWdRZapREHqFzdNUKk0pmu804EMR6dr6winwo7e5JDxN4xahxQsuysyYFwlwj4XN/Q==}
     engines: {node: '>=10'}
     hasBin: true
 
@@ -4646,23 +3286,27 @@ packages:
   tinybench@2.9.0:
     resolution: {integrity: sha512-0+DUvqWMValLmha6lr4kD8iAMK1HzV0/aKnCtWb9v9641TnP/MFb7Pc2bxoxQjTXAErryXVgUOfv2YqNllqGeg==}
 
+  tinyclip@0.1.15:
+    resolution: {integrity: sha512-uo33abH+Ays0xYaDysoBt494Hb3hsEczMpcC0MwFl773pazORx4fmvKhclhR1wonUbB6vvpRsvVMwnhfqeMc+A==}
+    engines: {node: ^16.14.0 || >= 17.3.0}
+
   tinyexec@0.3.2:
     resolution: {integrity: sha512-KQQR9yN7R5+OSwaK0XQoj22pwHoTlgYqmUscPYoknOoWCWfj/5/ABTMRi69FrKU5ffPVh5QcFikpWJI/P1ocHA==}
 
-  tinyexec@1.0.2:
-    resolution: {integrity: sha512-W/KYk+NFhkmsYpuHq5JykngiOCnxeVL8v8dFnqxSD8qEEdRfXk1SDM6JzNqcERbcGYj9tMrDQBYV9cjgnunFIg==}
+  tinyexec@1.1.2:
+    resolution: {integrity: sha512-dAqSqE/RabpBKI8+h26GfLq6Vb3JVXs30XYQjdMjaj/c2tS8IYYMbIzP599KtRj7c57/wYApb3QjgRgXmrCukA==}
     engines: {node: '>=18'}
 
-  tinyglobby@0.2.14:
-    resolution: {integrity: sha512-tX5e7OM1HnYr2+a2C/4V0htOcSQcoSTH9KgJnVvNm5zm/cyEWKJ7j7YutsH9CxMdtOkkLFy2AHrMci9IM8IPZQ==}
+  tinyglobby@0.2.16:
+    resolution: {integrity: sha512-pn99VhoACYR8nFHhxqix+uvsbXineAasWm5ojXoN8xEwK5Kd3/TrhNn1wByuD52UxWRLy8pu+kRMniEi6Eq9Zg==}
     engines: {node: '>=12.0.0'}
 
-  tinyglobby@0.2.15:
-    resolution: {integrity: sha512-j2Zq4NyQYG5XMST4cbs02Ak8iJUdxRM0XI5QyxXuZOzKOINmWurp3smXu3y5wDcJrptwpSjgXHzIQxR0omXljQ==}
+  tinyglobby@0.2.17:
+    resolution: {integrity: sha512-wXR/dYpcqKmfWpEdZjiKJOwCNFndD0DMnrW/cYjVGttEkBfVgcLFHoNrlj47mjOVic9yyNu65alsgF4NQyTa2g==}
     engines: {node: '>=12.0.0'}
 
-  tinyrainbow@3.0.3:
-    resolution: {integrity: sha512-PSkbLUoxOFRzJYjjxHJt9xro7D+iilgMX/C9lawzVuYiIdcihh9DXmVibBe8lmcFrRi/VzlPjBxbN7rH24q8/Q==}
+  tinyrainbow@3.1.0:
+    resolution: {integrity: sha512-Bf+ILmBgretUrdJxzXM0SgXLZ3XfiaUuOj/IKQHuTXip+05Xn+uyEYdVg0kYDipTBcLrCVyUzAPz7QmArb0mmw==}
     engines: {node: '>=14.0.0'}
 
   to-regex-range@5.0.1:
@@ -4689,21 +3333,12 @@ packages:
       tree-sitter:
         optional: true
 
-  tree-sitter@0.22.4:
-    resolution: {integrity: sha512-usbHZP9/oxNsUY65MQUsduGRqDHQOou1cagUSwjhoSYAmSahjQDAVsh9s+SlZkn8X8+O1FULRGwHu7AFP3kjzg==}
-
-  ts-api-utils@2.1.0:
-    resolution: {integrity: sha512-CUgTZL1irw8u29bzrOD/nH85jqyc74D6SshFgujOIA7osm2Rz7dYH77agkx7H4FBNxDq7Cjf+IjaX/8zwFW+ZQ==}
-    engines: {node: '>=18.12'}
-    peerDependencies:
-      typescript: '>=4.8.4'
+  tree-sitter@0.25.1:
+    resolution: {integrity: sha512-mrcEdkYtHfrK1A6fs3O6FxkBo0Qig5XUXqHhxUOQu0bmPo00QF4XaSx4edpazdHwxnSCjlGKGgIqWdaN4dvTLA==}
 
   ts-interface-checker@0.1.13:
     resolution: {integrity: sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==}
 
-  tsconfig-paths@3.15.0:
-    resolution: {integrity: sha512-2Ac2RgzDe/cn48GvOe3M+o82pEFewD3UPbyoUHHdKasHwJKjds4fLXWf/Ux5kATBKN20oaFGu+jbElp1pos0mg==}
-
   tslib@2.8.1:
     resolution: {integrity: sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==}
 
@@ -4726,101 +3361,29 @@ packages:
       typescript:
         optional: true
 
-  tsx@4.19.1:
-    resolution: {integrity: sha512-0flMz1lh74BR4wOvBjuh9olbnwqCPc35OOlfyzHba0Dc+QNUeWX/Gq2YTbnwcWPO3BMd8fkzRVrHcsR+a7z7rA==}
-    engines: {node: '>=18.0.0'}
-    hasBin: true
-
-  turbo-darwin-64@2.7.6:
-    resolution: {integrity: sha512-bYu0qnWju2Ha3EbIkPCk1SMLT3sltKh1P/Jy5FER6BmH++H5z+T5MHh3W1Xoers9rk4N1VdKvog9FO1pxQyjhw==}
-    cpu: [x64]
-    os: [darwin]
-
-  turbo-darwin-arm64@2.7.6:
-    resolution: {integrity: sha512-KCxTf3Y1hgNLYIWRLw8bwH8Zie9RyCGoxAlXYsCBI/YNqBSR+ZZK9KYzFxAqDaVaNvTwLFv3rJRGsXOFWg4+Uw==}
-    cpu: [arm64]
-    os: [darwin]
-
-  turbo-linux-64@2.7.6:
-    resolution: {integrity: sha512-vjoU8zIfNgvJR3cMitgw7inEoi6bmuVuFawDl5yKtxjAEhDktFdRBpGS3WojD4l3BklBbIK689ssXcGf21LxRA==}
-    cpu: [x64]
-    os: [linux]
-
-  turbo-linux-arm64@2.7.6:
-    resolution: {integrity: sha512-TcMpBvTqZf+1DptrVYLbZls7WY1UVNDTGaf0bo7/GCgWYv5eZHCVo4Td7kCJeDU4glbXg67REX0md0S0V6ghMg==}
-    cpu: [arm64]
-    os: [linux]
-
-  turbo-windows-64@2.7.6:
-    resolution: {integrity: sha512-1/MhkYldiihjneY8QnnDMbAkHXn/udTWSVYS94EMlkE9AShozsLTTOT1gDOpX06EfEW5njP09suhMvxbvwuwpQ==}
-    cpu: [x64]
-    os: [win32]
-
-  turbo-windows-arm64@2.7.6:
-    resolution: {integrity: sha512-0wDVnUJLFAWm4ZzOQFDkbyyUqaszorTGf3Rdc22IRIyJTTLd6ajqdb+cWD89UZ1RKr953+PZR1gqgWQY4PDuhA==}
-    cpu: [arm64]
-    os: [win32]
-
-  turbo@2.7.6:
-    resolution: {integrity: sha512-PO9AvJLEsNLO+EYhF4zB+v10hOjsJe5kJW+S6tTbRv+TW7gf1Qer4mfjP9h3/y9h8ZiPvOrenxnEgDtFgaM5zw==}
+  turbo@2.10.8:
+    resolution: {integrity: sha512-9+8YX5QOkGXzZxcIykTHgaooRHGMWO+jfdyRK0o+rN0U7hBIig2MrJ8r/aNzIPDPhdA73SGb0O+tIztaModTMg==}
     hasBin: true
 
   typanion@3.14.0:
     resolution: {integrity: sha512-ZW/lVMRabETuYCd9O9ZvMhAh8GslSqaUjxmK/JLPCh6l73CvLBiuXswj/+7LdnWOgYsQ130FqLzFz5aGT4I3Ug==}
 
-  type-check@0.4.0:
-    resolution: {integrity: sha512-XleUoc9uwGXqjWwXaUTZAmzMcFZ5858QA2vvx1Ur5xIcixXIP+8LnFDgRplU30us6teqdlskFfu+ae4K79Ooew==}
-    engines: {node: '>= 0.8.0'}
-
-  type-fest@5.3.1:
-    resolution: {integrity: sha512-VCn+LMHbd4t6sF3wfU/+HKT63C9OoyrSIf4b+vtWHpt2U7/4InZG467YDNMFMR70DdHjAdpPWmw2lzRdg0Xqqg==}
+  type-fest@5.6.0:
+    resolution: {integrity: sha512-8ZiHFm91orbSAe2PSAiSVBVko18pbhbiB3U9GglSzF/zCGkR+rxpHx6sEMCUm4kxY4LjDIUGgCfUMtwfZfjfUA==}
     engines: {node: '>=20'}
 
-  typed-array-buffer@1.0.3:
-    resolution: {integrity: sha512-nAYYwfY3qnzX30IkA6AQZjVbtK6duGontcQm1WSG1MD94YLqK0515GNApXkoxKOWMusVssAHWLh9SeaoefYFGw==}
-    engines: {node: '>= 0.4'}
-
-  typed-array-byte-length@1.0.3:
-    resolution: {integrity: sha512-BaXgOuIxz8n8pIq3e7Atg/7s+DpiYrxn4vdot3w9KbnBhcRQq6o3xemQdIfynqSeXeDrF32x+WvfzmOjPiY9lg==}
-    engines: {node: '>= 0.4'}
-
-  typed-array-byte-offset@1.0.4:
-    resolution: {integrity: sha512-bTlAFB/FBYMcuX81gbL4OcpH5PmlFHqlCCpAl8AlEzMz5k53oNDvN8p1PNOWLEmI2x4orp3raOFB51tv9X+MFQ==}
-    engines: {node: '>= 0.4'}
-
-  typed-array-length@1.0.7:
-    resolution: {integrity: sha512-3KS2b+kL7fsuk/eJZ7EQdnEmQoaho/r6KUef7hxvltNA5DR8NAUM+8wJMbJyZ4G9/7i3v5zPBIMN5aybAh2/Jg==}
-    engines: {node: '>= 0.4'}
-
-  typescript-eslint@8.47.0:
-    resolution: {integrity: sha512-Lwe8i2XQ3WoMjua/r1PHrCTpkubPYJCAfOurtn+mtTzqB6jNd+14n9UN1bJ4s3F49x9ixAm0FLflB/JzQ57M8Q==}
-    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
-    peerDependencies:
-      eslint: ^8.57.0 || ^9.0.0
-      typescript: '>=4.8.4 <6.0.0'
-
-  typescript@5.5.4:
-    resolution: {integrity: sha512-Mtq29sKDAEYP7aljRgtPOpTvOfbwRWlS6dPRzwjdE+C0R4brX/GUyhHSecbHMFLNBLcJIPt9nl9yG5TZ1weH+Q==}
-    engines: {node: '>=14.17'}
-    hasBin: true
-
   typescript@5.9.3:
     resolution: {integrity: sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==}
     engines: {node: '>=14.17'}
     hasBin: true
 
-  ufo@1.5.4:
-    resolution: {integrity: sha512-UsUk3byDzKd04EyoZ7U4DOlxQaD14JUKQl6/P7wiX4FNvUfm3XL246n9W5AmqwW5RSFJ27NAuM0iLscAOYUiGQ==}
+  typescript@6.0.3:
+    resolution: {integrity: sha512-y2TvuxSZPDyQakkFRPZHKFm+KKVqIisdg9/CZwm9ftvKXLP8NRWj38/ODjNbr43SsoXqNuAisEf1GdCxqWcdBw==}
+    engines: {node: '>=14.17'}
+    hasBin: true
 
-  ufo@1.6.1:
-    resolution: {integrity: sha512-9a4/uxlTWJ4+a5i0ooc1rU7C7YOw3wT+UGqdeNNHWnOF9qcMBgLRS+4IYUqbczewFx4mLEig6gawh7X6mFlEkA==}
-
-  ufo@1.6.3:
-    resolution: {integrity: sha512-yDJTmhydvl5lJzBmy/hyOAA0d+aqCBuwl818haVdYCRrWV84o7YyeVm4QlVHStqNrrJSTb6jKuFAVqAFsr+K3Q==}
-
-  unbox-primitive@1.1.0:
-    resolution: {integrity: sha512-nWJ91DjeOkej/TA8pXQ3myruKpKEYgqvpw9lz4OPHj/NWFNluYrjbz9j01CJ8yKQd2g4jFoOkINCTW2I5LEEyw==}
-    engines: {node: '>= 0.4'}
+  ufo@1.6.4:
+    resolution: {integrity: sha512-JFNbkD1Svwe0KvGi8GOeLcP4kAWQ609twvCdcHxq1oSL8svv39ZuSvajcD8B+5D0eL4+s1Is2D/O6KN3qcTeRA==}
 
   uncrypto@0.1.3:
     resolution: {integrity: sha512-Ql87qFHB3s/De2ClA9e0gsnS6zXG27SkTiSJwjCc9MebbfapQfuPzumMIUMi38ezPZVNFcHI9sUIepeQfw8J8Q==}
@@ -4828,86 +3391,40 @@ packages:
   undici-types@6.21.0:
     resolution: {integrity: sha512-iwDZqg0QAGrg9Rav5H4n0M64c3mkR59cJ6wQp+7C4nI0gsmExaedaYLNO44eT4AtBBwjbTiGPMlt2Md0T9H9JQ==}
 
-  unicorn-magic@0.3.0:
-    resolution: {integrity: sha512-+QBBXBCvifc56fsbuxZQ6Sic3wqqc3WWaqxs58gvJrcOuN83HGTCwz3oS5phzU9LthRNE9VrJCFCLUgHeeFnfA==}
-    engines: {node: '>=18'}
+  undici-types@7.24.6:
+    resolution: {integrity: sha512-WRNW+sJgj5OBN4/0JpHFqtqzhpbnV0GuB+OozA9gCL7a993SmU+1JBZCzLNxYsbMfIeDL+lTsphD5jN5N+n0zg==}
 
-  universal-user-agent@7.0.2:
-    resolution: {integrity: sha512-0JCqzSKnStlRRQfCdowvqy3cy0Dvtlb8xecj/H8JFZuCze4rwjPZQOgvFvn0Ws/usCHQFGpyr+pB9adaGwXn4Q==}
+  unicorn-magic@0.4.0:
+    resolution: {integrity: sha512-wH590V9VNgYH9g3lH9wWjTrUoKsjLF6sGLjhR4sH1LWpLmCOH0Zf7PukhDA8BiS7KHe4oPNkcTHqYkj7SOGUOw==}
+    engines: {node: '>=20'}
 
-  untun@0.1.3:
-    resolution: {integrity: sha512-4luGP9LMYszMRZwsvyUd9MrxgEGZdZuZgpVQHEEX0lCYFESasVRvZd0EYpCkOIbJKHMuv0LskpXc/8Un+MJzEQ==}
+  universal-user-agent@7.0.3:
+    resolution: {integrity: sha512-TmnEAEAsBJVZM/AADELsK76llnwcf9vMKuPz8JflO1frO8Lchitr0fNaN9d+Ap0BjKtqWqd/J17qeDnXh8CL2A==}
+
+  untun@0.2.2:
+    resolution: {integrity: sha512-+NnOJcSiEtYsVgJmXUzQbJeRAFXJC4yPJYuh6kF9B0Rm6zunXcs/3GZOTllyocSbUDIxD6Bj7e/4ATw7sph1Sw==}
     hasBin: true
 
-  update-browserslist-db@1.1.4:
-    resolution: {integrity: sha512-q0SPT4xyU84saUX+tomz1WLkxUbuaJnR1xWt17M7fJtEJigJeWUNGUqrauFXsHnqev9y9JTRGwk13tFBuKby4A==}
-    hasBin: true
-    peerDependencies:
-      browserslist: '>= 4.21.0'
-
   update-browserslist-db@1.2.3:
     resolution: {integrity: sha512-Js0m9cx+qOgDxo0eMiFGEueWztz+d4+M3rGlmKPT+T4IS/jP4ylw3Nwpu6cpTTP8R1MAC1kF4VbdLt3ARf209w==}
     hasBin: true
     peerDependencies:
       browserslist: '>= 4.21.0'
 
-  uqr@0.1.2:
-    resolution: {integrity: sha512-MJu7ypHq6QasgF5YRTjqscSzQp/W11zoUk6kvmlH+fmWEs63Y0Eib13hYFwAzagRJcVY8WVnlV+eBDUGMJ5IbA==}
-
-  uri-js@4.4.1:
-    resolution: {integrity: sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==}
+  uqr@0.1.3:
+    resolution: {integrity: sha512-0rjE8iEJe4YmT9TOhwsZtqCMRLc5DXZUI2UEYUUg63ikBkqqE5EYWaI0etFe/5KUcmcYwLih2RND1kq+hrUJXA==}
 
   util-deprecate@1.0.2:
     resolution: {integrity: sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==}
 
-  vite@7.0.0:
-    resolution: {integrity: sha512-ixXJB1YRgDIw2OszKQS9WxGHKwLdCsbQNkpJN171udl6szi/rIySHL6/Os3s2+oE4P/FLD4dxg4mD7Wust+u5g==}
+  vite@8.2.0:
+    resolution: {integrity: sha512-pn+CFpM0lwDeKwmOq1ZaBK/9sjorZcgqxki6MbY/jPEVd9vichIlmlD4HmQ5wdP5EgqQCFRaACBxMC7uEGc6lQ==}
     engines: {node: ^20.19.0 || >=22.12.0}
     hasBin: true
     peerDependencies:
       '@types/node': ^20.19.0 || >=22.12.0
-      jiti: '>=1.21.0'
-      less: ^4.0.0
-      lightningcss: ^1.21.0
-      sass: ^1.70.0
-      sass-embedded: ^1.70.0
-      stylus: '>=0.54.8'
-      sugarss: ^5.0.0
-      terser: ^5.16.0
-      tsx: ^4.8.1
-      yaml: ^2.4.2
-    peerDependenciesMeta:
-      '@types/node':
-        optional: true
-      jiti:
-        optional: true
-      less:
-        optional: true
-      lightningcss:
-        optional: true
-      sass:
-        optional: true
-      sass-embedded:
-        optional: true
-      stylus:
-        optional: true
-      sugarss:
-        optional: true
-      terser:
-        optional: true
-      tsx:
-        optional: true
-      yaml:
-        optional: true
-
-  vite@8.0.0:
-    resolution: {integrity: sha512-fPGaRNj9Zytaf8LEiBhY7Z6ijnFKdzU/+mL8EFBaKr7Vw1/FWcTBAMW0wLPJAGMPX38ZPVCVgLceWiEqeoqL2Q==}
-    engines: {node: ^20.19.0 || >=22.12.0}
-    hasBin: true
-    peerDependencies:
-      '@types/node': ^20.19.0 || >=22.12.0
-      '@vitejs/devtools': ^0.0.0-alpha.31
-      esbuild: ^0.27.0
+      '@vitejs/devtools': ^0.4.0
+      esbuild: ^0.27.0 || ^0.28.0
       jiti: '>=1.21.0'
       less: ^4.0.0
       sass: ^1.70.0
@@ -4943,20 +3460,23 @@ packages:
       yaml:
         optional: true
 
-  vitest@4.0.18:
-    resolution: {integrity: sha512-hOQuK7h0FGKgBAas7v0mSAsnvrIgAvWmRFjmzpJ7SwFHH3g1k2u37JtYwOwmEKhK6ZO3v9ggDBBm0La1LCK4uQ==}
+  vitest@4.1.10:
+    resolution: {integrity: sha512-R9jUTe5S4Qb0HCd4TNqpC7oGcrMssMRGXLW80ubjWsW9VH5GF8y1Y0SFLY9AbqSk6nt0PnOx4H4WNJYZ13GUPw==}
     engines: {node: ^20.0.0 || ^22.0.0 || >=24.0.0}
     hasBin: true
     peerDependencies:
       '@edge-runtime/vm': '*'
       '@opentelemetry/api': ^1.9.0
       '@types/node': ^20.0.0 || ^22.0.0 || >=24.0.0
-      '@vitest/browser-playwright': 4.0.18
-      '@vitest/browser-preview': 4.0.18
-      '@vitest/browser-webdriverio': 4.0.18
-      '@vitest/ui': 4.0.18
+      '@vitest/browser-playwright': 4.1.10
+      '@vitest/browser-preview': 4.1.10
+      '@vitest/browser-webdriverio': 4.1.10
+      '@vitest/coverage-istanbul': 4.1.10
+      '@vitest/coverage-v8': 4.1.10
+      '@vitest/ui': 4.1.10
       happy-dom: '*'
       jsdom: '*'
+      vite: ^6.0.0 || ^7.0.0 || ^8.0.0
     peerDependenciesMeta:
       '@edge-runtime/vm':
         optional: true
@@ -4970,6 +3490,10 @@ packages:
         optional: true
       '@vitest/browser-webdriverio':
         optional: true
+      '@vitest/coverage-istanbul':
+        optional: true
+      '@vitest/coverage-v8':
+        optional: true
       '@vitest/ui':
         optional: true
       happy-dom:
@@ -4977,16 +3501,16 @@ packages:
       jsdom:
         optional: true
 
-  watchpack@2.5.1:
-    resolution: {integrity: sha512-Zn5uXdcFNIA1+1Ei5McRd+iRzfhENPCe7LeABkJtNulSxjma+l7ltNx55BWZkRlwRnpOgHqxnjyaDgJnNXnqzg==}
+  watchpack@2.5.2:
+    resolution: {integrity: sha512-6i/00NBjP4yGPs+caKSyRfpTF/8Torsu0MOW3mMzIbhgISFder8i7xbqgHlLMwJrdiN8ndBV3UA1/AfzPSr+jg==}
     engines: {node: '>=10.13.0'}
 
-  webpack-sources@3.3.3:
-    resolution: {integrity: sha512-yd1RBzSGanHkitROoPFd6qsrxt+oFhg/129YzheDGqeustzX0vTZJZsSsQjVQC4yzBQ56K55XU8gaNCtIzOnTg==}
+  webpack-sources@3.5.1:
+    resolution: {integrity: sha512-jyuiGJdtvY434z5bUZrjz67v76/ePNvFZTp9Mdz29IlH4+GPsgyGjiv0fKI+M7BdkU6ADjulUcKAd3tUK3WlEw==}
     engines: {node: '>=10.13.0'}
 
-  webpack@5.104.1:
-    resolution: {integrity: sha512-Qphch25abbMNtekmEGJmeRUhLDbe+QfiWTiqpKYkpCOWY64v9eyl+KRRLmqOFA2AvKPpc9DC6+u2n76tQLBoaA==}
+  webpack@5.109.2:
+    resolution: {integrity: sha512-U9/cvLzxObKNEZ9+TtdqrHM5/9z3lgl2c+c4BzbqGxFQvQvBAq87yql5A8pQ+rrMbS496MZJeF5enVBndIy2hw==}
     engines: {node: '>=10.13.0'}
     hasBin: true
     peerDependencies:
@@ -4995,588 +3519,144 @@ packages:
       webpack-cli:
         optional: true
 
-  which-boxed-primitive@1.1.1:
-    resolution: {integrity: sha512-TbX3mj8n0odCBFVlY8AxkqcHASw3L60jIuF8jFP78az3C2YhmGvqbHBpAjTRH2/xqYunrJ9g1jSyjCjpoWzIAA==}
-    engines: {node: '>= 0.4'}
-
-  which-builtin-type@1.2.1:
-    resolution: {integrity: sha512-6iBczoX+kDQ7a3+YJBnh3T+KZRxM/iYNPXicqk66/Qfm1b93iu+yOImkg0zHbj5LNOcNv1TEADiZ0xa34B4q6Q==}
-    engines: {node: '>= 0.4'}
-
-  which-collection@1.0.2:
-    resolution: {integrity: sha512-K4jVyjnBdgvc86Y6BkaLZEN933SwYOuBFkdmBu9ZfkcAbdVbpITnDmjvZ/aQjRXQrv5EPkTnD1s39GiiqbngCw==}
-    engines: {node: '>= 0.4'}
-
-  which-typed-array@1.1.19:
-    resolution: {integrity: sha512-rEvr90Bck4WZt9HHFC4DJMsjvu7x+r6bImz0/BrbWb7A2djJ8hnZMrWnHo9F8ssv0OMErasDhftrfROTyqSDrw==}
-    engines: {node: '>= 0.4'}
-
-  which@2.0.2:
-    resolution: {integrity: sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==}
-    engines: {node: '>= 8'}
-    hasBin: true
-
   why-is-node-running@2.3.0:
     resolution: {integrity: sha512-hUrmaWBdVDcxvYqnyh09zunKzROWjbZTiNy8dBEjkS7ehEDQibXJ7XvlmtbwuTclUiIyN+CyXQD4Vmko8fNm8w==}
     engines: {node: '>=8'}
     hasBin: true
 
-  word-wrap@1.2.5:
-    resolution: {integrity: sha512-BN22B5eaMMI9UMtjrGd5g5eCYPpCPDUy0FJXbYsaT5zYxjFOckS53SQDE3pWkVoWpHXVb3BrYcEN4Twa55B5cA==}
-    engines: {node: '>=0.10.0'}
-
-  wrap-ansi@6.2.0:
-    resolution: {integrity: sha512-r6lPcBGxZXlIcymEu7InxDMhdW0KDxpLgoFLcguasxCaJ/SOIZwINatK9KY/tf+ZrlywOKU0UDj3ATXUBfxJXA==}
-    engines: {node: '>=8'}
-
-  wrap-ansi@7.0.0:
-    resolution: {integrity: sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==}
-    engines: {node: '>=10'}
-
-  wrap-ansi@8.1.0:
-    resolution: {integrity: sha512-si7QWI6zUMq56bESFvagtmzMdGOtoxfR+Sez11Mobfc7tm+VkUckk9bW2UeffTGVUbOksxmSw0AA2gs8g71NCQ==}
-    engines: {node: '>=12'}
-
-  yallist@3.1.1:
-    resolution: {integrity: sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==}
-
-  yaml@2.6.0:
-    resolution: {integrity: sha512-a6ae//JvKDEra2kdi1qzCyrJW/WZCgFi8ydDV+eXExl95t+5R+ijnqHJbz9tmMh8FUjx3iv2fCQ4dclAQlO2UQ==}
-    engines: {node: '>= 14'}
+  yaml@2.9.0:
+    resolution: {integrity: sha512-2AvhNX3mb8zd6Zy7INTtSpl1F15HW6Wnqj0srWlkKLcpYl/gMIMJiyuGq2KeI2YFxUPjdlB+3Lc10seMLtL4cA==}
+    engines: {node: '>= 14.6'}
     hasBin: true
 
-  yocto-queue@0.1.0:
-    resolution: {integrity: sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==}
-    engines: {node: '>=10'}
-
-  yoctocolors-cjs@2.1.3:
-    resolution: {integrity: sha512-U/PBtDf35ff0D8X8D0jfdzHYEPFxAI7jJlxZXwCSez5M3190m+QobIfh+sWDWSHMCWWJN2AWamkegn6vr6YBTw==}
-    engines: {node: '>=18'}
-
-  zod-validation-error@4.0.2:
-    resolution: {integrity: sha512-Q6/nZLe6jxuU80qb/4uJ4t5v2VEZ44lzQjPDhYJNztRQ4wyWc6VF3D3Kb/fAuPetZQnhS3hnajCf9CsWesghLQ==}
-    engines: {node: '>=18.0.0'}
-    peerDependencies:
-      zod: ^3.25.0 || ^4.0.0
-
-  zod@4.1.12:
-    resolution: {integrity: sha512-JInaHOamG8pt5+Ey8kGmdcAcg3OL9reK8ltczgHTAwNhMys/6ThXHityHxVV2p3fkw/c+MAvBHFVYHFZDmjMCQ==}
-
 snapshots:
 
   '@alloc/quick-lru@5.2.0': {}
 
-  '@babel/code-frame@7.27.1':
+  '@emnapi/core@1.10.0':
     dependencies:
-      '@babel/helper-validator-identifier': 7.28.5
-      js-tokens: 4.0.0
-      picocolors: 1.1.1
+      '@emnapi/wasi-threads': 1.2.1
+      tslib: 2.8.1
+    optional: true
 
-  '@babel/code-frame@7.29.0':
+  '@emnapi/core@1.11.3':
     dependencies:
-      '@babel/helper-validator-identifier': 7.28.5
-      js-tokens: 4.0.0
-      picocolors: 1.1.1
-
-  '@babel/compat-data@7.27.5': {}
-
-  '@babel/compat-data@7.29.0': {}
-
-  '@babel/core@7.28.5':
-    dependencies:
-      '@babel/code-frame': 7.27.1
-      '@babel/generator': 7.28.5
-      '@babel/helper-compilation-targets': 7.27.2
-      '@babel/helper-module-transforms': 7.28.3(@babel/core@7.28.5)
-      '@babel/helpers': 7.28.4
-      '@babel/parser': 7.28.5
-      '@babel/template': 7.27.2
-      '@babel/traverse': 7.28.5
-      '@babel/types': 7.28.5
-      '@jridgewell/remapping': 2.3.5
-      convert-source-map: 2.0.0
-      debug: 4.4.3
-      gensync: 1.0.0-beta.2
-      json5: 2.2.3
-      semver: 6.3.1
-    transitivePeerDependencies:
-      - supports-color
-
-  '@babel/core@7.29.0':
-    dependencies:
-      '@babel/code-frame': 7.29.0
-      '@babel/generator': 7.29.1
-      '@babel/helper-compilation-targets': 7.28.6
-      '@babel/helper-module-transforms': 7.28.6(@babel/core@7.29.0)
-      '@babel/helpers': 7.28.6
-      '@babel/parser': 7.29.0
-      '@babel/template': 7.28.6
-      '@babel/traverse': 7.29.0
-      '@babel/types': 7.29.0
-      '@jridgewell/remapping': 2.3.5
-      convert-source-map: 2.0.0
-      debug: 4.4.3
-      gensync: 1.0.0-beta.2
-      json5: 2.2.3
-      semver: 6.3.1
-    transitivePeerDependencies:
-      - supports-color
-
-  '@babel/generator@7.28.5':
-    dependencies:
-      '@babel/parser': 7.28.5
-      '@babel/types': 7.28.5
-      '@jridgewell/gen-mapping': 0.3.12
-      '@jridgewell/trace-mapping': 0.3.29
-      jsesc: 3.1.0
-
-  '@babel/generator@7.29.1':
-    dependencies:
-      '@babel/parser': 7.29.0
-      '@babel/types': 7.29.0
-      '@jridgewell/gen-mapping': 0.3.12
-      '@jridgewell/trace-mapping': 0.3.29
-      jsesc: 3.1.0
-
-  '@babel/helper-compilation-targets@7.27.2':
-    dependencies:
-      '@babel/compat-data': 7.27.5
-      '@babel/helper-validator-option': 7.27.1
-      browserslist: 4.28.0
-      lru-cache: 5.1.1
-      semver: 6.3.1
-
-  '@babel/helper-compilation-targets@7.28.6':
-    dependencies:
-      '@babel/compat-data': 7.29.0
-      '@babel/helper-validator-option': 7.27.1
-      browserslist: 4.28.1
-      lru-cache: 5.1.1
-      semver: 6.3.1
-
-  '@babel/helper-globals@7.28.0': {}
-
-  '@babel/helper-module-imports@7.27.1':
-    dependencies:
-      '@babel/traverse': 7.28.5
-      '@babel/types': 7.28.5
-    transitivePeerDependencies:
-      - supports-color
-
-  '@babel/helper-module-imports@7.28.6':
-    dependencies:
-      '@babel/traverse': 7.29.0
-      '@babel/types': 7.29.0
-    transitivePeerDependencies:
-      - supports-color
-
-  '@babel/helper-module-transforms@7.28.3(@babel/core@7.28.5)':
-    dependencies:
-      '@babel/core': 7.28.5
-      '@babel/helper-module-imports': 7.27.1
-      '@babel/helper-validator-identifier': 7.28.5
-      '@babel/traverse': 7.28.5
-    transitivePeerDependencies:
-      - supports-color
-
-  '@babel/helper-module-transforms@7.28.6(@babel/core@7.29.0)':
-    dependencies:
-      '@babel/core': 7.29.0
-      '@babel/helper-module-imports': 7.28.6
-      '@babel/helper-validator-identifier': 7.28.5
-      '@babel/traverse': 7.29.0
-    transitivePeerDependencies:
-      - supports-color
-
-  '@babel/helper-plugin-utils@7.27.1': {}
-
-  '@babel/helper-string-parser@7.27.1': {}
-
-  '@babel/helper-validator-identifier@7.28.5': {}
-
-  '@babel/helper-validator-option@7.27.1': {}
-
-  '@babel/helpers@7.28.4':
-    dependencies:
-      '@babel/template': 7.27.2
-      '@babel/types': 7.28.5
-
-  '@babel/helpers@7.28.6':
-    dependencies:
-      '@babel/template': 7.28.6
-      '@babel/types': 7.29.0
-
-  '@babel/parser@7.28.5':
-    dependencies:
-      '@babel/types': 7.28.5
-
-  '@babel/parser@7.29.0':
-    dependencies:
-      '@babel/types': 7.29.0
-
-  '@babel/plugin-transform-react-jsx-self@7.27.1(@babel/core@7.29.0)':
-    dependencies:
-      '@babel/core': 7.29.0
-      '@babel/helper-plugin-utils': 7.27.1
-
-  '@babel/plugin-transform-react-jsx-source@7.27.1(@babel/core@7.29.0)':
-    dependencies:
-      '@babel/core': 7.29.0
-      '@babel/helper-plugin-utils': 7.27.1
-
-  '@babel/template@7.27.2':
-    dependencies:
-      '@babel/code-frame': 7.27.1
-      '@babel/parser': 7.28.5
-      '@babel/types': 7.28.5
-
-  '@babel/template@7.28.6':
-    dependencies:
-      '@babel/code-frame': 7.29.0
-      '@babel/parser': 7.29.0
-      '@babel/types': 7.29.0
-
-  '@babel/traverse@7.28.5':
-    dependencies:
-      '@babel/code-frame': 7.27.1
-      '@babel/generator': 7.28.5
-      '@babel/helper-globals': 7.28.0
-      '@babel/parser': 7.28.5
-      '@babel/template': 7.27.2
-      '@babel/types': 7.28.5
-      debug: 4.4.3
-    transitivePeerDependencies:
-      - supports-color
-
-  '@babel/traverse@7.29.0':
-    dependencies:
-      '@babel/code-frame': 7.29.0
-      '@babel/generator': 7.29.1
-      '@babel/helper-globals': 7.28.0
-      '@babel/parser': 7.29.0
-      '@babel/template': 7.28.6
-      '@babel/types': 7.29.0
-      debug: 4.4.3
-    transitivePeerDependencies:
-      - supports-color
-
-  '@babel/types@7.28.5':
-    dependencies:
-      '@babel/helper-string-parser': 7.27.1
-      '@babel/helper-validator-identifier': 7.28.5
-
-  '@babel/types@7.29.0':
-    dependencies:
-      '@babel/helper-string-parser': 7.27.1
-      '@babel/helper-validator-identifier': 7.28.5
-
-  '@emnapi/core@1.7.1':
-    dependencies:
-      '@emnapi/wasi-threads': 1.1.0
+      '@emnapi/wasi-threads': 1.2.3
       tslib: 2.8.1
 
-  '@emnapi/core@1.8.1':
+  '@emnapi/core@2.0.0-alpha.3':
     dependencies:
-      '@emnapi/wasi-threads': 1.1.0
+      '@emnapi/wasi-threads': 2.0.1
       tslib: 2.8.1
+    optional: true
 
-  '@emnapi/runtime@1.7.1':
+  '@emnapi/runtime@1.10.0':
+    dependencies:
+      tslib: 2.8.1
+    optional: true
+
+  '@emnapi/runtime@1.11.3':
     dependencies:
       tslib: 2.8.1
 
-  '@emnapi/runtime@1.8.1':
+  '@emnapi/runtime@2.0.0-alpha.3':
+    dependencies:
+      tslib: 2.8.1
+    optional: true
+
+  '@emnapi/wasi-threads@1.2.1':
+    dependencies:
+      tslib: 2.8.1
+    optional: true
+
+  '@emnapi/wasi-threads@1.2.3':
     dependencies:
       tslib: 2.8.1
 
-  '@emnapi/wasi-threads@1.1.0':
+  '@emnapi/wasi-threads@2.0.1':
     dependencies:
       tslib: 2.8.1
-
-  '@esbuild/aix-ppc64@0.23.1':
-    optional: true
-
-  '@esbuild/aix-ppc64@0.25.0':
-    optional: true
-
-  '@esbuild/aix-ppc64@0.27.0':
-    optional: true
-
-  '@esbuild/android-arm64@0.23.1':
-    optional: true
-
-  '@esbuild/android-arm64@0.25.0':
-    optional: true
-
-  '@esbuild/android-arm64@0.27.0':
-    optional: true
-
-  '@esbuild/android-arm@0.23.1':
-    optional: true
-
-  '@esbuild/android-arm@0.25.0':
-    optional: true
-
-  '@esbuild/android-arm@0.27.0':
-    optional: true
-
-  '@esbuild/android-x64@0.23.1':
-    optional: true
-
-  '@esbuild/android-x64@0.25.0':
-    optional: true
-
-  '@esbuild/android-x64@0.27.0':
-    optional: true
-
-  '@esbuild/darwin-arm64@0.23.1':
-    optional: true
-
-  '@esbuild/darwin-arm64@0.25.0':
-    optional: true
-
-  '@esbuild/darwin-arm64@0.27.0':
-    optional: true
-
-  '@esbuild/darwin-x64@0.23.1':
-    optional: true
-
-  '@esbuild/darwin-x64@0.25.0':
-    optional: true
-
-  '@esbuild/darwin-x64@0.27.0':
-    optional: true
-
-  '@esbuild/freebsd-arm64@0.23.1':
-    optional: true
-
-  '@esbuild/freebsd-arm64@0.25.0':
-    optional: true
-
-  '@esbuild/freebsd-arm64@0.27.0':
-    optional: true
-
-  '@esbuild/freebsd-x64@0.23.1':
-    optional: true
-
-  '@esbuild/freebsd-x64@0.25.0':
-    optional: true
-
-  '@esbuild/freebsd-x64@0.27.0':
-    optional: true
-
-  '@esbuild/linux-arm64@0.23.1':
     optional: true
 
-  '@esbuild/linux-arm64@0.25.0':
+  '@esbuild/aix-ppc64@0.27.7':
     optional: true
 
-  '@esbuild/linux-arm64@0.27.0':
+  '@esbuild/android-arm64@0.27.7':
     optional: true
 
-  '@esbuild/linux-arm@0.23.1':
+  '@esbuild/android-arm@0.27.7':
     optional: true
 
-  '@esbuild/linux-arm@0.25.0':
+  '@esbuild/android-x64@0.27.7':
     optional: true
 
-  '@esbuild/linux-arm@0.27.0':
+  '@esbuild/darwin-arm64@0.27.7':
     optional: true
 
-  '@esbuild/linux-ia32@0.23.1':
+  '@esbuild/darwin-x64@0.27.7':
     optional: true
 
-  '@esbuild/linux-ia32@0.25.0':
+  '@esbuild/freebsd-arm64@0.27.7':
     optional: true
 
-  '@esbuild/linux-ia32@0.27.0':
+  '@esbuild/freebsd-x64@0.27.7':
     optional: true
 
-  '@esbuild/linux-loong64@0.23.1':
+  '@esbuild/linux-arm64@0.27.7':
     optional: true
 
-  '@esbuild/linux-loong64@0.25.0':
+  '@esbuild/linux-arm@0.27.7':
     optional: true
 
-  '@esbuild/linux-loong64@0.27.0':
+  '@esbuild/linux-ia32@0.27.7':
     optional: true
 
-  '@esbuild/linux-mips64el@0.23.1':
+  '@esbuild/linux-loong64@0.27.7':
     optional: true
 
-  '@esbuild/linux-mips64el@0.25.0':
+  '@esbuild/linux-mips64el@0.27.7':
     optional: true
 
-  '@esbuild/linux-mips64el@0.27.0':
+  '@esbuild/linux-ppc64@0.27.7':
     optional: true
 
-  '@esbuild/linux-ppc64@0.23.1':
+  '@esbuild/linux-riscv64@0.27.7':
     optional: true
 
-  '@esbuild/linux-ppc64@0.25.0':
+  '@esbuild/linux-s390x@0.27.7':
     optional: true
 
-  '@esbuild/linux-ppc64@0.27.0':
+  '@esbuild/linux-x64@0.27.7':
     optional: true
 
-  '@esbuild/linux-riscv64@0.23.1':
+  '@esbuild/netbsd-arm64@0.27.7':
     optional: true
 
-  '@esbuild/linux-riscv64@0.25.0':
+  '@esbuild/netbsd-x64@0.27.7':
     optional: true
 
-  '@esbuild/linux-riscv64@0.27.0':
+  '@esbuild/openbsd-arm64@0.27.7':
     optional: true
 
-  '@esbuild/linux-s390x@0.23.1':
+  '@esbuild/openbsd-x64@0.27.7':
     optional: true
 
-  '@esbuild/linux-s390x@0.25.0':
+  '@esbuild/openharmony-arm64@0.27.7':
     optional: true
 
-  '@esbuild/linux-s390x@0.27.0':
+  '@esbuild/sunos-x64@0.27.7':
     optional: true
 
-  '@esbuild/linux-x64@0.23.1':
+  '@esbuild/win32-arm64@0.27.7':
     optional: true
 
-  '@esbuild/linux-x64@0.25.0':
+  '@esbuild/win32-ia32@0.27.7':
     optional: true
 
-  '@esbuild/linux-x64@0.27.0':
+  '@esbuild/win32-x64@0.27.7':
     optional: true
 
-  '@esbuild/netbsd-arm64@0.25.0':
-    optional: true
-
-  '@esbuild/netbsd-arm64@0.27.0':
-    optional: true
-
-  '@esbuild/netbsd-x64@0.23.1':
-    optional: true
-
-  '@esbuild/netbsd-x64@0.25.0':
-    optional: true
-
-  '@esbuild/netbsd-x64@0.27.0':
-    optional: true
-
-  '@esbuild/openbsd-arm64@0.23.1':
-    optional: true
-
-  '@esbuild/openbsd-arm64@0.25.0':
-    optional: true
-
-  '@esbuild/openbsd-arm64@0.27.0':
-    optional: true
-
-  '@esbuild/openbsd-x64@0.23.1':
-    optional: true
-
-  '@esbuild/openbsd-x64@0.25.0':
-    optional: true
-
-  '@esbuild/openbsd-x64@0.27.0':
-    optional: true
-
-  '@esbuild/openharmony-arm64@0.27.0':
-    optional: true
-
-  '@esbuild/sunos-x64@0.23.1':
-    optional: true
-
-  '@esbuild/sunos-x64@0.25.0':
-    optional: true
-
-  '@esbuild/sunos-x64@0.27.0':
-    optional: true
-
-  '@esbuild/win32-arm64@0.23.1':
-    optional: true
-
-  '@esbuild/win32-arm64@0.25.0':
-    optional: true
-
-  '@esbuild/win32-arm64@0.27.0':
-    optional: true
-
-  '@esbuild/win32-ia32@0.23.1':
-    optional: true
-
-  '@esbuild/win32-ia32@0.25.0':
-    optional: true
-
-  '@esbuild/win32-ia32@0.27.0':
-    optional: true
-
-  '@esbuild/win32-x64@0.23.1':
-    optional: true
-
-  '@esbuild/win32-x64@0.25.0':
-    optional: true
-
-  '@esbuild/win32-x64@0.27.0':
-    optional: true
-
-  '@eslint-community/eslint-utils@4.9.0(eslint@9.39.2(jiti@2.6.1))':
-    dependencies:
-      eslint: 9.39.2(jiti@2.6.1)
-      eslint-visitor-keys: 3.4.3
-
-  '@eslint-community/regexpp@4.12.1': {}
-
-  '@eslint/config-array@0.21.1':
-    dependencies:
-      '@eslint/object-schema': 2.1.7
-      debug: 4.4.3
-      minimatch: 3.1.2
-    transitivePeerDependencies:
-      - supports-color
-
-  '@eslint/config-helpers@0.4.2':
-    dependencies:
-      '@eslint/core': 0.17.0
-
-  '@eslint/core@0.17.0':
-    dependencies:
-      '@types/json-schema': 7.0.15
-
-  '@eslint/eslintrc@3.3.1':
-    dependencies:
-      ajv: 6.12.6
-      debug: 4.4.3
-      espree: 10.4.0
-      globals: 14.0.0
-      ignore: 5.3.2
-      import-fresh: 3.3.0
-      js-yaml: 4.1.0
-      minimatch: 3.1.2
-      strip-json-comments: 3.1.1
-    transitivePeerDependencies:
-      - supports-color
-
-  '@eslint/js@9.39.2': {}
-
-  '@eslint/object-schema@2.1.7': {}
-
-  '@eslint/plugin-kit@0.4.1':
-    dependencies:
-      '@eslint/core': 0.17.0
-      levn: 0.4.1
-
-  '@humanfs/core@0.19.1': {}
-
-  '@humanfs/node@0.16.6':
-    dependencies:
-      '@humanfs/core': 0.19.1
-      '@humanwhocodes/retry': 0.3.1
-
-  '@humanwhocodes/module-importer@1.0.1': {}
-
-  '@humanwhocodes/retry@0.3.1': {}
-
-  '@humanwhocodes/retry@0.4.2': {}
-
-  '@img/colour@1.0.0':
+  '@img/colour@1.1.0':
     optional: true
 
   '@img/sharp-darwin-arm64@0.34.5':
@@ -5661,7 +3741,7 @@ snapshots:
 
   '@img/sharp-wasm32@0.34.5':
     dependencies:
-      '@emnapi/runtime': 1.8.1
+      '@emnapi/runtime': 1.11.3
     optional: true
 
   '@img/sharp-win32-arm64@0.34.5':
@@ -5673,194 +3753,167 @@ snapshots:
   '@img/sharp-win32-x64@0.34.5':
     optional: true
 
-  '@inquirer/ansi@1.0.2': {}
+  '@inquirer/ansi@2.0.7': {}
 
-  '@inquirer/checkbox@4.3.2(@types/node@20.19.1)':
+  '@inquirer/checkbox@5.2.1(@types/node@25.9.1)':
     dependencies:
-      '@inquirer/ansi': 1.0.2
-      '@inquirer/core': 10.3.2(@types/node@20.19.1)
-      '@inquirer/figures': 1.0.15
-      '@inquirer/type': 3.0.10(@types/node@20.19.1)
-      yoctocolors-cjs: 2.1.3
+      '@inquirer/ansi': 2.0.7
+      '@inquirer/core': 11.2.1(@types/node@25.9.1)
+      '@inquirer/figures': 2.0.7
+      '@inquirer/type': 4.0.7(@types/node@25.9.1)
     optionalDependencies:
-      '@types/node': 20.19.1
+      '@types/node': 25.9.1
 
-  '@inquirer/confirm@5.1.21(@types/node@20.19.1)':
+  '@inquirer/confirm@6.1.1(@types/node@25.9.1)':
     dependencies:
-      '@inquirer/core': 10.3.2(@types/node@20.19.1)
-      '@inquirer/type': 3.0.10(@types/node@20.19.1)
+      '@inquirer/core': 11.2.1(@types/node@25.9.1)
+      '@inquirer/type': 4.0.7(@types/node@25.9.1)
     optionalDependencies:
-      '@types/node': 20.19.1
+      '@types/node': 25.9.1
 
-  '@inquirer/core@10.3.2(@types/node@20.19.1)':
+  '@inquirer/core@11.2.1(@types/node@25.9.1)':
     dependencies:
-      '@inquirer/ansi': 1.0.2
-      '@inquirer/figures': 1.0.15
-      '@inquirer/type': 3.0.10(@types/node@20.19.1)
+      '@inquirer/ansi': 2.0.7
+      '@inquirer/figures': 2.0.7
+      '@inquirer/type': 4.0.7(@types/node@25.9.1)
       cli-width: 4.1.0
-      mute-stream: 2.0.0
+      fast-wrap-ansi: 0.2.2
+      mute-stream: 3.0.0
       signal-exit: 4.1.0
-      wrap-ansi: 6.2.0
-      yoctocolors-cjs: 2.1.3
     optionalDependencies:
-      '@types/node': 20.19.1
+      '@types/node': 25.9.1
 
-  '@inquirer/editor@4.2.23(@types/node@20.19.1)':
+  '@inquirer/editor@5.2.2(@types/node@25.9.1)':
     dependencies:
-      '@inquirer/core': 10.3.2(@types/node@20.19.1)
-      '@inquirer/external-editor': 1.0.3(@types/node@20.19.1)
-      '@inquirer/type': 3.0.10(@types/node@20.19.1)
+      '@inquirer/core': 11.2.1(@types/node@25.9.1)
+      '@inquirer/external-editor': 3.0.3(@types/node@25.9.1)
+      '@inquirer/type': 4.0.7(@types/node@25.9.1)
     optionalDependencies:
-      '@types/node': 20.19.1
+      '@types/node': 25.9.1
 
-  '@inquirer/expand@4.0.23(@types/node@20.19.1)':
+  '@inquirer/expand@5.1.1(@types/node@25.9.1)':
     dependencies:
-      '@inquirer/core': 10.3.2(@types/node@20.19.1)
-      '@inquirer/type': 3.0.10(@types/node@20.19.1)
-      yoctocolors-cjs: 2.1.3
+      '@inquirer/core': 11.2.1(@types/node@25.9.1)
+      '@inquirer/type': 4.0.7(@types/node@25.9.1)
     optionalDependencies:
-      '@types/node': 20.19.1
+      '@types/node': 25.9.1
 
-  '@inquirer/external-editor@1.0.3(@types/node@20.19.1)':
+  '@inquirer/external-editor@3.0.3(@types/node@25.9.1)':
     dependencies:
       chardet: 2.1.1
-      iconv-lite: 0.7.0
+      iconv-lite: 0.7.2
     optionalDependencies:
-      '@types/node': 20.19.1
+      '@types/node': 25.9.1
 
-  '@inquirer/figures@1.0.15': {}
+  '@inquirer/figures@2.0.7': {}
 
-  '@inquirer/input@4.3.1(@types/node@20.19.1)':
+  '@inquirer/input@5.1.2(@types/node@25.9.1)':
     dependencies:
-      '@inquirer/core': 10.3.2(@types/node@20.19.1)
-      '@inquirer/type': 3.0.10(@types/node@20.19.1)
+      '@inquirer/core': 11.2.1(@types/node@25.9.1)
+      '@inquirer/type': 4.0.7(@types/node@25.9.1)
     optionalDependencies:
-      '@types/node': 20.19.1
+      '@types/node': 25.9.1
 
-  '@inquirer/number@3.0.23(@types/node@20.19.1)':
+  '@inquirer/number@4.1.1(@types/node@25.9.1)':
     dependencies:
-      '@inquirer/core': 10.3.2(@types/node@20.19.1)
-      '@inquirer/type': 3.0.10(@types/node@20.19.1)
+      '@inquirer/core': 11.2.1(@types/node@25.9.1)
+      '@inquirer/type': 4.0.7(@types/node@25.9.1)
     optionalDependencies:
-      '@types/node': 20.19.1
+      '@types/node': 25.9.1
 
-  '@inquirer/password@4.0.23(@types/node@20.19.1)':
+  '@inquirer/password@5.1.1(@types/node@25.9.1)':
     dependencies:
-      '@inquirer/ansi': 1.0.2
-      '@inquirer/core': 10.3.2(@types/node@20.19.1)
-      '@inquirer/type': 3.0.10(@types/node@20.19.1)
+      '@inquirer/ansi': 2.0.7
+      '@inquirer/core': 11.2.1(@types/node@25.9.1)
+      '@inquirer/type': 4.0.7(@types/node@25.9.1)
     optionalDependencies:
-      '@types/node': 20.19.1
+      '@types/node': 25.9.1
 
-  '@inquirer/prompts@7.10.1(@types/node@20.19.1)':
+  '@inquirer/prompts@8.5.2(@types/node@25.9.1)':
     dependencies:
-      '@inquirer/checkbox': 4.3.2(@types/node@20.19.1)
-      '@inquirer/confirm': 5.1.21(@types/node@20.19.1)
-      '@inquirer/editor': 4.2.23(@types/node@20.19.1)
-      '@inquirer/expand': 4.0.23(@types/node@20.19.1)
-      '@inquirer/input': 4.3.1(@types/node@20.19.1)
-      '@inquirer/number': 3.0.23(@types/node@20.19.1)
-      '@inquirer/password': 4.0.23(@types/node@20.19.1)
-      '@inquirer/rawlist': 4.1.11(@types/node@20.19.1)
-      '@inquirer/search': 3.2.2(@types/node@20.19.1)
-      '@inquirer/select': 4.4.2(@types/node@20.19.1)
+      '@inquirer/checkbox': 5.2.1(@types/node@25.9.1)
+      '@inquirer/confirm': 6.1.1(@types/node@25.9.1)
+      '@inquirer/editor': 5.2.2(@types/node@25.9.1)
+      '@inquirer/expand': 5.1.1(@types/node@25.9.1)
+      '@inquirer/input': 5.1.2(@types/node@25.9.1)
+      '@inquirer/number': 4.1.1(@types/node@25.9.1)
+      '@inquirer/password': 5.1.1(@types/node@25.9.1)
+      '@inquirer/rawlist': 5.3.1(@types/node@25.9.1)
+      '@inquirer/search': 4.2.1(@types/node@25.9.1)
+      '@inquirer/select': 5.2.1(@types/node@25.9.1)
     optionalDependencies:
-      '@types/node': 20.19.1
+      '@types/node': 25.9.1
 
-  '@inquirer/rawlist@4.1.11(@types/node@20.19.1)':
+  '@inquirer/rawlist@5.3.1(@types/node@25.9.1)':
     dependencies:
-      '@inquirer/core': 10.3.2(@types/node@20.19.1)
-      '@inquirer/type': 3.0.10(@types/node@20.19.1)
-      yoctocolors-cjs: 2.1.3
+      '@inquirer/core': 11.2.1(@types/node@25.9.1)
+      '@inquirer/type': 4.0.7(@types/node@25.9.1)
     optionalDependencies:
-      '@types/node': 20.19.1
+      '@types/node': 25.9.1
 
-  '@inquirer/search@3.2.2(@types/node@20.19.1)':
+  '@inquirer/search@4.2.1(@types/node@25.9.1)':
     dependencies:
-      '@inquirer/core': 10.3.2(@types/node@20.19.1)
-      '@inquirer/figures': 1.0.15
-      '@inquirer/type': 3.0.10(@types/node@20.19.1)
-      yoctocolors-cjs: 2.1.3
+      '@inquirer/core': 11.2.1(@types/node@25.9.1)
+      '@inquirer/figures': 2.0.7
+      '@inquirer/type': 4.0.7(@types/node@25.9.1)
     optionalDependencies:
-      '@types/node': 20.19.1
+      '@types/node': 25.9.1
 
-  '@inquirer/select@4.4.2(@types/node@20.19.1)':
+  '@inquirer/select@5.2.1(@types/node@25.9.1)':
     dependencies:
-      '@inquirer/ansi': 1.0.2
-      '@inquirer/core': 10.3.2(@types/node@20.19.1)
-      '@inquirer/figures': 1.0.15
-      '@inquirer/type': 3.0.10(@types/node@20.19.1)
-      yoctocolors-cjs: 2.1.3
+      '@inquirer/ansi': 2.0.7
+      '@inquirer/core': 11.2.1(@types/node@25.9.1)
+      '@inquirer/figures': 2.0.7
+      '@inquirer/type': 4.0.7(@types/node@25.9.1)
     optionalDependencies:
-      '@types/node': 20.19.1
+      '@types/node': 25.9.1
 
-  '@inquirer/type@3.0.10(@types/node@20.19.1)':
+  '@inquirer/type@4.0.7(@types/node@25.9.1)':
     optionalDependencies:
-      '@types/node': 20.19.1
+      '@types/node': 25.9.1
 
-  '@isaacs/cliui@8.0.2':
-    dependencies:
-      string-width: 5.1.2
-      string-width-cjs: string-width@4.2.3
-      strip-ansi: 7.1.0
-      strip-ansi-cjs: strip-ansi@6.0.1
-      wrap-ansi: 8.1.0
-      wrap-ansi-cjs: wrap-ansi@7.0.0
-
-  '@jridgewell/gen-mapping@0.3.12':
+  '@jridgewell/gen-mapping@0.3.13':
     dependencies:
       '@jridgewell/sourcemap-codec': 1.5.5
-      '@jridgewell/trace-mapping': 0.3.29
-
-  '@jridgewell/gen-mapping@0.3.5':
-    dependencies:
-      '@jridgewell/set-array': 1.2.1
-      '@jridgewell/sourcemap-codec': 1.5.5
-      '@jridgewell/trace-mapping': 0.3.25
+      '@jridgewell/trace-mapping': 0.3.31
 
   '@jridgewell/remapping@2.3.5':
     dependencies:
-      '@jridgewell/gen-mapping': 0.3.12
-      '@jridgewell/trace-mapping': 0.3.29
+      '@jridgewell/gen-mapping': 0.3.13
+      '@jridgewell/trace-mapping': 0.3.31
 
   '@jridgewell/resolve-uri@3.1.2': {}
 
-  '@jridgewell/set-array@1.2.1': {}
-
-  '@jridgewell/source-map@0.3.6':
+  '@jridgewell/source-map@0.3.11':
     dependencies:
-      '@jridgewell/gen-mapping': 0.3.12
-      '@jridgewell/trace-mapping': 0.3.29
+      '@jridgewell/gen-mapping': 0.3.13
+      '@jridgewell/trace-mapping': 0.3.31
 
   '@jridgewell/sourcemap-codec@1.5.5': {}
 
-  '@jridgewell/trace-mapping@0.3.25':
+  '@jridgewell/trace-mapping@0.3.31':
     dependencies:
       '@jridgewell/resolve-uri': 3.1.2
       '@jridgewell/sourcemap-codec': 1.5.5
 
-  '@jridgewell/trace-mapping@0.3.29':
+  '@napi-rs/cli@3.7.4(patch_hash=9912bf0a9c2cef8329d11c41fbce4d33ce2bdcf660a630b258c962c0a3c44bed)(@emnapi/core@1.11.3)(@emnapi/runtime@1.11.3)(@types/node@25.9.1)(node-addon-api@8.7.0)':
     dependencies:
-      '@jridgewell/resolve-uri': 3.1.2
-      '@jridgewell/sourcemap-codec': 1.5.5
-
-  '@napi-rs/cli@3.4.1(@emnapi/runtime@1.8.1)(@types/node@20.19.1)(node-addon-api@8.3.0)':
-    dependencies:
-      '@inquirer/prompts': 7.10.1(@types/node@20.19.1)
-      '@napi-rs/cross-toolchain': 1.0.3
-      '@napi-rs/wasm-tools': 1.0.1
+      '@inquirer/prompts': 8.5.2(@types/node@25.9.1)
+      '@napi-rs/cross-toolchain': 1.0.3(@emnapi/core@1.11.3)(@emnapi/runtime@1.11.3)
+      '@napi-rs/wasm-tools': 1.0.1(@emnapi/core@1.11.3)(@emnapi/runtime@1.11.3)
       '@octokit/rest': 22.0.1
       clipanion: 4.0.0-rc.4(typanion@3.14.0)
       colorette: 2.0.20
-      debug: 4.4.3
-      emnapi: 1.8.1(node-addon-api@8.3.0)
-      es-toolkit: 1.43.0
-      js-yaml: 4.1.0
-      semver: 7.7.3
+      emnapi: 1.11.3(node-addon-api@8.7.0)
+      es-toolkit: 1.50.0
+      js-yaml: 4.3.1
+      obug: 2.1.4
+      semver: 7.8.5
       typanion: 3.14.0
     optionalDependencies:
-      '@emnapi/runtime': 1.8.1
+      '@emnapi/runtime': 1.11.3
     transitivePeerDependencies:
+      - '@emnapi/core'
       - '@napi-rs/cross-toolchain-arm64-target-aarch64'
       - '@napi-rs/cross-toolchain-arm64-target-armv7'
       - '@napi-rs/cross-toolchain-arm64-target-ppc64le'
@@ -5875,12 +3928,14 @@ snapshots:
       - node-addon-api
       - supports-color
 
-  '@napi-rs/cross-toolchain@1.0.3':
+  '@napi-rs/cross-toolchain@1.0.3(@emnapi/core@1.11.3)(@emnapi/runtime@1.11.3)':
     dependencies:
-      '@napi-rs/lzma': 1.4.5
-      '@napi-rs/tar': 1.1.0
+      '@napi-rs/lzma': 1.4.5(@emnapi/core@1.11.3)(@emnapi/runtime@1.11.3)
+      '@napi-rs/tar': 1.1.0(@emnapi/core@1.11.3)(@emnapi/runtime@1.11.3)
       debug: 4.4.3
     transitivePeerDependencies:
+      - '@emnapi/core'
+      - '@emnapi/runtime'
       - supports-color
 
   '@napi-rs/lzma-android-arm-eabi@1.4.5':
@@ -5922,9 +3977,12 @@ snapshots:
   '@napi-rs/lzma-linux-x64-musl@1.4.5':
     optional: true
 
-  '@napi-rs/lzma-wasm32-wasi@1.4.5':
+  '@napi-rs/lzma-wasm32-wasi@1.4.5(@emnapi/core@1.11.3)(@emnapi/runtime@1.11.3)':
     dependencies:
-      '@napi-rs/wasm-runtime': 1.1.1
+      '@napi-rs/wasm-runtime': 1.2.2(@emnapi/core@1.11.3)(@emnapi/runtime@1.11.3)
+    transitivePeerDependencies:
+      - '@emnapi/core'
+      - '@emnapi/runtime'
     optional: true
 
   '@napi-rs/lzma-win32-arm64-msvc@1.4.5':
@@ -5936,7 +3994,7 @@ snapshots:
   '@napi-rs/lzma-win32-x64-msvc@1.4.5':
     optional: true
 
-  '@napi-rs/lzma@1.4.5':
+  '@napi-rs/lzma@1.4.5(@emnapi/core@1.11.3)(@emnapi/runtime@1.11.3)':
     optionalDependencies:
       '@napi-rs/lzma-android-arm-eabi': 1.4.5
       '@napi-rs/lzma-android-arm64': 1.4.5
@@ -5951,10 +4009,13 @@ snapshots:
       '@napi-rs/lzma-linux-s390x-gnu': 1.4.5
       '@napi-rs/lzma-linux-x64-gnu': 1.4.5
       '@napi-rs/lzma-linux-x64-musl': 1.4.5
-      '@napi-rs/lzma-wasm32-wasi': 1.4.5
+      '@napi-rs/lzma-wasm32-wasi': 1.4.5(@emnapi/core@1.11.3)(@emnapi/runtime@1.11.3)
       '@napi-rs/lzma-win32-arm64-msvc': 1.4.5
       '@napi-rs/lzma-win32-ia32-msvc': 1.4.5
       '@napi-rs/lzma-win32-x64-msvc': 1.4.5
+    transitivePeerDependencies:
+      - '@emnapi/core'
+      - '@emnapi/runtime'
 
   '@napi-rs/tar-android-arm-eabi@1.1.0':
     optional: true
@@ -5992,9 +4053,12 @@ snapshots:
   '@napi-rs/tar-linux-x64-musl@1.1.0':
     optional: true
 
-  '@napi-rs/tar-wasm32-wasi@1.1.0':
+  '@napi-rs/tar-wasm32-wasi@1.1.0(@emnapi/core@1.11.3)(@emnapi/runtime@1.11.3)':
     dependencies:
-      '@napi-rs/wasm-runtime': 1.1.1
+      '@napi-rs/wasm-runtime': 1.2.2(@emnapi/core@1.11.3)(@emnapi/runtime@1.11.3)
+    transitivePeerDependencies:
+      - '@emnapi/core'
+      - '@emnapi/runtime'
     optional: true
 
   '@napi-rs/tar-win32-arm64-msvc@1.1.0':
@@ -6006,7 +4070,7 @@ snapshots:
   '@napi-rs/tar-win32-x64-msvc@1.1.0':
     optional: true
 
-  '@napi-rs/tar@1.1.0':
+  '@napi-rs/tar@1.1.0(@emnapi/core@1.11.3)(@emnapi/runtime@1.11.3)':
     optionalDependencies:
       '@napi-rs/tar-android-arm-eabi': 1.1.0
       '@napi-rs/tar-android-arm64': 1.1.0
@@ -6020,16 +4084,33 @@ snapshots:
       '@napi-rs/tar-linux-s390x-gnu': 1.1.0
       '@napi-rs/tar-linux-x64-gnu': 1.1.0
       '@napi-rs/tar-linux-x64-musl': 1.1.0
-      '@napi-rs/tar-wasm32-wasi': 1.1.0
+      '@napi-rs/tar-wasm32-wasi': 1.1.0(@emnapi/core@1.11.3)(@emnapi/runtime@1.11.3)
       '@napi-rs/tar-win32-arm64-msvc': 1.1.0
       '@napi-rs/tar-win32-ia32-msvc': 1.1.0
       '@napi-rs/tar-win32-x64-msvc': 1.1.0
+    transitivePeerDependencies:
+      - '@emnapi/core'
+      - '@emnapi/runtime'
 
-  '@napi-rs/wasm-runtime@1.1.1':
+  '@napi-rs/wasm-runtime@1.1.4(@emnapi/core@1.10.0)(@emnapi/runtime@1.10.0)':
     dependencies:
-      '@emnapi/core': 1.7.1
-      '@emnapi/runtime': 1.7.1
-      '@tybys/wasm-util': 0.10.1
+      '@emnapi/core': 1.10.0
+      '@emnapi/runtime': 1.10.0
+      '@tybys/wasm-util': 0.10.3
+    optional: true
+
+  '@napi-rs/wasm-runtime@1.2.2(@emnapi/core@1.11.3)(@emnapi/runtime@1.11.3)':
+    dependencies:
+      '@emnapi/core': 1.11.3
+      '@emnapi/runtime': 1.11.3
+      '@tybys/wasm-util': 0.10.3
+
+  '@napi-rs/wasm-runtime@1.2.2(@emnapi/core@2.0.0-alpha.3)(@emnapi/runtime@2.0.0-alpha.3)':
+    dependencies:
+      '@emnapi/core': 2.0.0-alpha.3
+      '@emnapi/runtime': 2.0.0-alpha.3
+      '@tybys/wasm-util': 0.10.3
+    optional: true
 
   '@napi-rs/wasm-tools-android-arm-eabi@1.0.1':
     optional: true
@@ -6058,9 +4139,12 @@ snapshots:
   '@napi-rs/wasm-tools-linux-x64-musl@1.0.1':
     optional: true
 
-  '@napi-rs/wasm-tools-wasm32-wasi@1.0.1':
+  '@napi-rs/wasm-tools-wasm32-wasi@1.0.1(@emnapi/core@1.11.3)(@emnapi/runtime@1.11.3)':
     dependencies:
-      '@napi-rs/wasm-runtime': 1.1.1
+      '@napi-rs/wasm-runtime': 1.2.2(@emnapi/core@1.11.3)(@emnapi/runtime@1.11.3)
+    transitivePeerDependencies:
+      - '@emnapi/core'
+      - '@emnapi/runtime'
     optional: true
 
   '@napi-rs/wasm-tools-win32-arm64-msvc@1.0.1':
@@ -6072,7 +4156,7 @@ snapshots:
   '@napi-rs/wasm-tools-win32-x64-msvc@1.0.1':
     optional: true
 
-  '@napi-rs/wasm-tools@1.0.1':
+  '@napi-rs/wasm-tools@1.0.1(@emnapi/core@1.11.3)(@emnapi/runtime@1.11.3)':
     optionalDependencies:
       '@napi-rs/wasm-tools-android-arm-eabi': 1.0.1
       '@napi-rs/wasm-tools-android-arm64': 1.0.1
@@ -6083,39 +4167,38 @@ snapshots:
       '@napi-rs/wasm-tools-linux-arm64-musl': 1.0.1
       '@napi-rs/wasm-tools-linux-x64-gnu': 1.0.1
       '@napi-rs/wasm-tools-linux-x64-musl': 1.0.1
-      '@napi-rs/wasm-tools-wasm32-wasi': 1.0.1
+      '@napi-rs/wasm-tools-wasm32-wasi': 1.0.1(@emnapi/core@1.11.3)(@emnapi/runtime@1.11.3)
       '@napi-rs/wasm-tools-win32-arm64-msvc': 1.0.1
       '@napi-rs/wasm-tools-win32-ia32-msvc': 1.0.1
       '@napi-rs/wasm-tools-win32-x64-msvc': 1.0.1
+    transitivePeerDependencies:
+      - '@emnapi/core'
+      - '@emnapi/runtime'
 
-  '@next/env@16.1.6': {}
+  '@next/env@16.2.7': {}
 
-  '@next/eslint-plugin-next@16.1.6':
-    dependencies:
-      fast-glob: 3.3.1
-
-  '@next/swc-darwin-arm64@16.1.6':
+  '@next/swc-darwin-arm64@16.2.7':
     optional: true
 
-  '@next/swc-darwin-x64@16.1.6':
+  '@next/swc-darwin-x64@16.2.7':
     optional: true
 
-  '@next/swc-linux-arm64-gnu@16.1.6':
+  '@next/swc-linux-arm64-gnu@16.2.7':
     optional: true
 
-  '@next/swc-linux-arm64-musl@16.1.6':
+  '@next/swc-linux-arm64-musl@16.2.7':
     optional: true
 
-  '@next/swc-linux-x64-gnu@16.1.6':
+  '@next/swc-linux-x64-gnu@16.2.7':
     optional: true
 
-  '@next/swc-linux-x64-musl@16.1.6':
+  '@next/swc-linux-x64-musl@16.2.7':
     optional: true
 
-  '@next/swc-win32-arm64-msvc@16.1.6':
+  '@next/swc-win32-arm64-msvc@16.2.7':
     optional: true
 
-  '@next/swc-win32-x64-msvc@16.1.6':
+  '@next/swc-win32-x64-msvc@16.2.7':
     optional: true
 
   '@nodelib/fs.scandir@2.1.5':
@@ -6128,9 +4211,7 @@ snapshots:
   '@nodelib/fs.walk@1.2.8':
     dependencies:
       '@nodelib/fs.scandir': 2.1.5
-      fastq: 1.17.1
-
-  '@nolyfill/is-core-module@1.0.39': {}
+      fastq: 1.20.1
 
   '@octokit/auth-token@6.0.0': {}
 
@@ -6138,22 +4219,22 @@ snapshots:
     dependencies:
       '@octokit/auth-token': 6.0.0
       '@octokit/graphql': 9.0.3
-      '@octokit/request': 10.0.7
+      '@octokit/request': 10.0.9
       '@octokit/request-error': 7.1.0
       '@octokit/types': 16.0.0
       before-after-hook: 4.0.0
-      universal-user-agent: 7.0.2
+      universal-user-agent: 7.0.3
 
-  '@octokit/endpoint@11.0.2':
+  '@octokit/endpoint@11.0.3':
     dependencies:
       '@octokit/types': 16.0.0
-      universal-user-agent: 7.0.2
+      universal-user-agent: 7.0.3
 
   '@octokit/graphql@9.0.3':
     dependencies:
-      '@octokit/request': 10.0.7
+      '@octokit/request': 10.0.9
       '@octokit/types': 16.0.0
-      universal-user-agent: 7.0.2
+      universal-user-agent: 7.0.3
 
   '@octokit/openapi-types@27.0.0': {}
 
@@ -6175,13 +4256,15 @@ snapshots:
     dependencies:
       '@octokit/types': 16.0.0
 
-  '@octokit/request@10.0.7':
+  '@octokit/request@10.0.9':
     dependencies:
-      '@octokit/endpoint': 11.0.2
+      '@octokit/endpoint': 11.0.3
       '@octokit/request-error': 7.1.0
       '@octokit/types': 16.0.0
+      content-type: 2.0.0
       fast-content-type-parse: 3.0.0
-      universal-user-agent: 7.0.2
+      json-with-bigint: 3.5.8
+      universal-user-agent: 7.0.3
 
   '@octokit/rest@22.0.1':
     dependencies:
@@ -6194,305 +4277,296 @@ snapshots:
     dependencies:
       '@octokit/openapi-types': 27.0.0
 
-  '@oven/bun-darwin-aarch64@1.3.9':
+  '@oven/bun-darwin-aarch64@1.3.14':
     optional: true
 
-  '@oven/bun-darwin-x64-baseline@1.3.9':
+  '@oven/bun-darwin-x64-baseline@1.3.14':
     optional: true
 
-  '@oven/bun-darwin-x64@1.3.9':
+  '@oven/bun-darwin-x64@1.3.14':
     optional: true
 
-  '@oven/bun-linux-aarch64-musl@1.3.9':
+  '@oven/bun-freebsd-aarch64@1.3.14':
     optional: true
 
-  '@oven/bun-linux-aarch64@1.3.9':
+  '@oven/bun-freebsd-x64@1.3.14':
     optional: true
 
-  '@oven/bun-linux-x64-baseline@1.3.9':
+  '@oven/bun-linux-aarch64-android@1.3.14':
     optional: true
 
-  '@oven/bun-linux-x64-musl-baseline@1.3.9':
+  '@oven/bun-linux-aarch64-musl@1.3.14':
     optional: true
 
-  '@oven/bun-linux-x64-musl@1.3.9':
+  '@oven/bun-linux-aarch64@1.3.14':
     optional: true
 
-  '@oven/bun-linux-x64@1.3.9':
+  '@oven/bun-linux-x64-android@1.3.14':
     optional: true
 
-  '@oven/bun-windows-x64-baseline@1.3.9':
+  '@oven/bun-linux-x64-baseline@1.3.14':
     optional: true
 
-  '@oven/bun-windows-x64@1.3.9':
+  '@oven/bun-linux-x64-musl-baseline@1.3.14':
     optional: true
 
-  '@oxc-project/runtime@0.115.0': {}
-
-  '@oxc-project/types@0.115.0': {}
-
-  '@parcel/watcher-android-arm64@2.5.0':
+  '@oven/bun-linux-x64-musl@1.3.14':
     optional: true
 
-  '@parcel/watcher-android-arm64@2.5.1':
+  '@oven/bun-linux-x64@1.3.14':
     optional: true
 
-  '@parcel/watcher-darwin-arm64@2.5.0':
+  '@oven/bun-windows-aarch64@1.3.14':
     optional: true
 
-  '@parcel/watcher-darwin-arm64@2.5.1':
+  '@oven/bun-windows-x64-baseline@1.3.14':
     optional: true
 
-  '@parcel/watcher-darwin-arm64@2.5.6': {}
-
-  '@parcel/watcher-darwin-x64@2.5.0':
+  '@oven/bun-windows-x64@1.3.14':
     optional: true
 
-  '@parcel/watcher-darwin-x64@2.5.1':
+  '@oxc-project/types@0.142.0': {}
+
+  '@parcel/watcher-android-arm64@2.6.0':
     optional: true
 
-  '@parcel/watcher-darwin-x64@2.5.6': {}
+  '@parcel/watcher-darwin-arm64@2.6.0': {}
 
-  '@parcel/watcher-freebsd-x64@2.5.0':
+  '@parcel/watcher-darwin-x64@2.6.0': {}
+
+  '@parcel/watcher-freebsd-x64@2.6.0':
     optional: true
 
-  '@parcel/watcher-freebsd-x64@2.5.1':
+  '@parcel/watcher-linux-arm-glibc@2.6.0':
     optional: true
 
-  '@parcel/watcher-linux-arm-glibc@2.5.0':
+  '@parcel/watcher-linux-arm-musl@2.6.0':
     optional: true
 
-  '@parcel/watcher-linux-arm-glibc@2.5.1':
-    optional: true
+  '@parcel/watcher-linux-arm64-glibc@2.6.0': {}
 
-  '@parcel/watcher-linux-arm-musl@2.5.0':
-    optional: true
+  '@parcel/watcher-linux-arm64-musl@2.6.0': {}
 
-  '@parcel/watcher-linux-arm-musl@2.5.1':
-    optional: true
+  '@parcel/watcher-linux-x64-glibc@2.6.0': {}
 
-  '@parcel/watcher-linux-arm64-glibc@2.5.0':
-    optional: true
+  '@parcel/watcher-linux-x64-musl@2.6.0': {}
 
-  '@parcel/watcher-linux-arm64-glibc@2.5.1':
-    optional: true
-
-  '@parcel/watcher-linux-arm64-glibc@2.5.6': {}
-
-  '@parcel/watcher-linux-arm64-musl@2.5.0':
-    optional: true
-
-  '@parcel/watcher-linux-arm64-musl@2.5.1':
-    optional: true
-
-  '@parcel/watcher-linux-arm64-musl@2.5.6': {}
-
-  '@parcel/watcher-linux-x64-glibc@2.5.0':
-    optional: true
-
-  '@parcel/watcher-linux-x64-glibc@2.5.1':
-    optional: true
-
-  '@parcel/watcher-linux-x64-glibc@2.5.6': {}
-
-  '@parcel/watcher-linux-x64-musl@2.5.0':
-    optional: true
-
-  '@parcel/watcher-linux-x64-musl@2.5.1':
-    optional: true
-
-  '@parcel/watcher-linux-x64-musl@2.5.6': {}
-
-  '@parcel/watcher-wasm@2.5.0':
+  '@parcel/watcher-wasm@2.5.6':
     dependencies:
       is-glob: 4.0.3
-      micromatch: 4.0.7
+      picomatch: 4.0.5
 
-  '@parcel/watcher-win32-arm64@2.5.0':
+  '@parcel/watcher-win32-arm64@2.6.0':
     optional: true
 
-  '@parcel/watcher-win32-arm64@2.5.1':
-    optional: true
+  '@parcel/watcher-win32-x64@2.6.0': {}
 
-  '@parcel/watcher-win32-ia32@2.5.0':
-    optional: true
-
-  '@parcel/watcher-win32-ia32@2.5.1':
-    optional: true
-
-  '@parcel/watcher-win32-x64@2.5.0':
-    optional: true
-
-  '@parcel/watcher-win32-x64@2.5.1':
-    optional: true
-
-  '@parcel/watcher-win32-x64@2.5.6': {}
-
-  '@parcel/watcher@2.5.0':
+  '@parcel/watcher@2.6.0(patch_hash=705ce75ccea54337110c4d7fe0a8b421658ea0c23e1a77c1fa890a86041179da)':
     dependencies:
-      detect-libc: 1.0.3
+      detect-libc: 2.1.2
       is-glob: 4.0.3
-      micromatch: 4.0.7
       node-addon-api: 7.1.1
+      picomatch: 4.0.5
     optionalDependencies:
-      '@parcel/watcher-android-arm64': 2.5.0
-      '@parcel/watcher-darwin-arm64': 2.5.0
-      '@parcel/watcher-darwin-x64': 2.5.0
-      '@parcel/watcher-freebsd-x64': 2.5.0
-      '@parcel/watcher-linux-arm-glibc': 2.5.0
-      '@parcel/watcher-linux-arm-musl': 2.5.0
-      '@parcel/watcher-linux-arm64-glibc': 2.5.0
-      '@parcel/watcher-linux-arm64-musl': 2.5.0
-      '@parcel/watcher-linux-x64-glibc': 2.5.0
-      '@parcel/watcher-linux-x64-musl': 2.5.0
-      '@parcel/watcher-win32-arm64': 2.5.0
-      '@parcel/watcher-win32-ia32': 2.5.0
-      '@parcel/watcher-win32-x64': 2.5.0
+      '@parcel/watcher-android-arm64': 2.6.0
+      '@parcel/watcher-darwin-arm64': 2.6.0
+      '@parcel/watcher-darwin-x64': 2.6.0
+      '@parcel/watcher-freebsd-x64': 2.6.0
+      '@parcel/watcher-linux-arm-glibc': 2.6.0
+      '@parcel/watcher-linux-arm-musl': 2.6.0
+      '@parcel/watcher-linux-arm64-glibc': 2.6.0
+      '@parcel/watcher-linux-arm64-musl': 2.6.0
+      '@parcel/watcher-linux-x64-glibc': 2.6.0
+      '@parcel/watcher-linux-x64-musl': 2.6.0
+      '@parcel/watcher-win32-arm64': 2.6.0
+      '@parcel/watcher-win32-x64': 2.6.0
 
-  '@parcel/watcher@2.5.1(patch_hash=p6xahr7zs4c5qsorj3exeppxhm)':
+  '@playwright/test@1.62.1':
     dependencies:
-      detect-libc: 1.0.3
-      is-glob: 4.0.3
-      micromatch: 4.0.8
-      node-addon-api: 7.1.1
+      playwright: 1.62.1
+
+  '@rolldown/binding-android-arm64@1.2.1':
+    optional: true
+
+  '@rolldown/binding-darwin-arm64@1.2.1':
+    optional: true
+
+  '@rolldown/binding-darwin-x64@1.2.1':
+    optional: true
+
+  '@rolldown/binding-freebsd-x64@1.2.1':
+    optional: true
+
+  '@rolldown/binding-linux-arm-gnueabihf@1.2.1':
+    optional: true
+
+  '@rolldown/binding-linux-arm64-gnu@1.2.1':
+    optional: true
+
+  '@rolldown/binding-linux-arm64-musl@1.2.1':
+    optional: true
+
+  '@rolldown/binding-linux-ppc64-gnu@1.2.1':
+    optional: true
+
+  '@rolldown/binding-linux-s390x-gnu@1.2.1':
+    optional: true
+
+  '@rolldown/binding-linux-x64-gnu@1.2.1':
+    optional: true
+
+  '@rolldown/binding-linux-x64-musl@1.2.1':
+    optional: true
+
+  '@rolldown/binding-openharmony-arm64@1.2.1':
+    optional: true
+
+  '@rolldown/binding-wasm32-wasi@1.2.1':
+    dependencies:
+      '@emnapi/core': 2.0.0-alpha.3
+      '@emnapi/runtime': 2.0.0-alpha.3
+      '@napi-rs/wasm-runtime': 1.2.2(@emnapi/core@2.0.0-alpha.3)(@emnapi/runtime@2.0.0-alpha.3)
+    optional: true
+
+  '@rolldown/binding-win32-arm64-msvc@1.2.1':
+    optional: true
+
+  '@rolldown/binding-win32-x64-msvc@1.2.1':
+    optional: true
+
+  '@rolldown/pluginutils@1.0.1': {}
+
+  '@rollup/rollup-android-arm-eabi@4.60.4':
+    optional: true
+
+  '@rollup/rollup-android-arm64@4.60.4':
+    optional: true
+
+  '@rollup/rollup-darwin-arm64@4.60.4':
+    optional: true
+
+  '@rollup/rollup-darwin-x64@4.60.4':
+    optional: true
+
+  '@rollup/rollup-freebsd-arm64@4.60.4':
+    optional: true
+
+  '@rollup/rollup-freebsd-x64@4.60.4':
+    optional: true
+
+  '@rollup/rollup-linux-arm-gnueabihf@4.60.4':
+    optional: true
+
+  '@rollup/rollup-linux-arm-musleabihf@4.60.4':
+    optional: true
+
+  '@rollup/rollup-linux-arm64-gnu@4.60.4':
+    optional: true
+
+  '@rollup/rollup-linux-arm64-musl@4.60.4':
+    optional: true
+
+  '@rollup/rollup-linux-loong64-gnu@4.60.4':
+    optional: true
+
+  '@rollup/rollup-linux-loong64-musl@4.60.4':
+    optional: true
+
+  '@rollup/rollup-linux-ppc64-gnu@4.60.4':
+    optional: true
+
+  '@rollup/rollup-linux-ppc64-musl@4.60.4':
+    optional: true
+
+  '@rollup/rollup-linux-riscv64-gnu@4.60.4':
+    optional: true
+
+  '@rollup/rollup-linux-riscv64-musl@4.60.4':
+    optional: true
+
+  '@rollup/rollup-linux-s390x-gnu@4.60.4':
+    optional: true
+
+  '@rollup/rollup-linux-x64-gnu@4.60.4':
+    optional: true
+
+  '@rollup/rollup-linux-x64-musl@4.60.4':
+    optional: true
+
+  '@rollup/rollup-openbsd-x64@4.60.4':
+    optional: true
+
+  '@rollup/rollup-openharmony-arm64@4.60.4':
+    optional: true
+
+  '@rollup/rollup-win32-arm64-msvc@4.60.4':
+    optional: true
+
+  '@rollup/rollup-win32-ia32-msvc@4.60.4':
+    optional: true
+
+  '@rollup/rollup-win32-x64-gnu@4.60.4':
+    optional: true
+
+  '@rollup/rollup-win32-x64-msvc@4.60.4':
+    optional: true
+
+  '@rspack/binding-darwin-arm64@2.0.2':
+    optional: true
+
+  '@rspack/binding-darwin-x64@2.0.2':
+    optional: true
+
+  '@rspack/binding-linux-arm64-gnu@2.0.2':
+    optional: true
+
+  '@rspack/binding-linux-arm64-musl@2.0.2':
+    optional: true
+
+  '@rspack/binding-linux-x64-gnu@2.0.2':
+    optional: true
+
+  '@rspack/binding-linux-x64-musl@2.0.2':
+    optional: true
+
+  '@rspack/binding-wasm32-wasi@2.0.2':
+    dependencies:
+      '@emnapi/core': 1.10.0
+      '@emnapi/runtime': 1.10.0
+      '@napi-rs/wasm-runtime': 1.1.4(@emnapi/core@1.10.0)(@emnapi/runtime@1.10.0)
+    optional: true
+
+  '@rspack/binding-win32-arm64-msvc@2.0.2':
+    optional: true
+
+  '@rspack/binding-win32-ia32-msvc@2.0.2':
+    optional: true
+
+  '@rspack/binding-win32-x64-msvc@2.0.2':
+    optional: true
+
+  '@rspack/binding@2.0.2':
     optionalDependencies:
-      '@parcel/watcher-android-arm64': 2.5.1
-      '@parcel/watcher-darwin-arm64': 2.5.1
-      '@parcel/watcher-darwin-x64': 2.5.1
-      '@parcel/watcher-freebsd-x64': 2.5.1
-      '@parcel/watcher-linux-arm-glibc': 2.5.1
-      '@parcel/watcher-linux-arm-musl': 2.5.1
-      '@parcel/watcher-linux-arm64-glibc': 2.5.1
-      '@parcel/watcher-linux-arm64-musl': 2.5.1
-      '@parcel/watcher-linux-x64-glibc': 2.5.1
-      '@parcel/watcher-linux-x64-musl': 2.5.1
-      '@parcel/watcher-win32-arm64': 2.5.1
-      '@parcel/watcher-win32-ia32': 2.5.1
-      '@parcel/watcher-win32-x64': 2.5.1
+      '@rspack/binding-darwin-arm64': 2.0.2
+      '@rspack/binding-darwin-x64': 2.0.2
+      '@rspack/binding-linux-arm64-gnu': 2.0.2
+      '@rspack/binding-linux-arm64-musl': 2.0.2
+      '@rspack/binding-linux-x64-gnu': 2.0.2
+      '@rspack/binding-linux-x64-musl': 2.0.2
+      '@rspack/binding-wasm32-wasi': 2.0.2
+      '@rspack/binding-win32-arm64-msvc': 2.0.2
+      '@rspack/binding-win32-ia32-msvc': 2.0.2
+      '@rspack/binding-win32-x64-msvc': 2.0.2
 
-  '@pkgjs/parseargs@0.11.0':
-    optional: true
-
-  '@playwright/test@1.58.0':
+  '@rspack/core@2.0.2(@swc/helpers@0.5.15)':
     dependencies:
-      playwright: 1.58.0
-
-  '@rolldown/binding-android-arm64@1.0.0-rc.9':
-    optional: true
-
-  '@rolldown/binding-darwin-arm64@1.0.0-rc.9':
-    optional: true
-
-  '@rolldown/binding-darwin-x64@1.0.0-rc.9':
-    optional: true
-
-  '@rolldown/binding-freebsd-x64@1.0.0-rc.9':
-    optional: true
-
-  '@rolldown/binding-linux-arm-gnueabihf@1.0.0-rc.9':
-    optional: true
-
-  '@rolldown/binding-linux-arm64-gnu@1.0.0-rc.9':
-    optional: true
-
-  '@rolldown/binding-linux-arm64-musl@1.0.0-rc.9':
-    optional: true
-
-  '@rolldown/binding-linux-ppc64-gnu@1.0.0-rc.9':
-    optional: true
-
-  '@rolldown/binding-linux-s390x-gnu@1.0.0-rc.9':
-    optional: true
-
-  '@rolldown/binding-linux-x64-gnu@1.0.0-rc.9':
-    optional: true
-
-  '@rolldown/binding-linux-x64-musl@1.0.0-rc.9':
-    optional: true
-
-  '@rolldown/binding-openharmony-arm64@1.0.0-rc.9':
-    optional: true
-
-  '@rolldown/binding-wasm32-wasi@1.0.0-rc.9':
-    dependencies:
-      '@napi-rs/wasm-runtime': 1.1.1
-    optional: true
-
-  '@rolldown/binding-win32-arm64-msvc@1.0.0-rc.9':
-    optional: true
-
-  '@rolldown/binding-win32-x64-msvc@1.0.0-rc.9':
-    optional: true
-
-  '@rolldown/pluginutils@1.0.0-rc.2': {}
-
-  '@rolldown/pluginutils@1.0.0-rc.9': {}
-
-  '@rollup/rollup-android-arm-eabi@4.44.0':
-    optional: true
-
-  '@rollup/rollup-android-arm64@4.44.0':
-    optional: true
-
-  '@rollup/rollup-darwin-arm64@4.44.0':
-    optional: true
-
-  '@rollup/rollup-darwin-x64@4.44.0':
-    optional: true
-
-  '@rollup/rollup-freebsd-arm64@4.44.0':
-    optional: true
-
-  '@rollup/rollup-freebsd-x64@4.44.0':
-    optional: true
-
-  '@rollup/rollup-linux-arm-gnueabihf@4.44.0':
-    optional: true
-
-  '@rollup/rollup-linux-arm-musleabihf@4.44.0':
-    optional: true
-
-  '@rollup/rollup-linux-arm64-gnu@4.44.0':
-    optional: true
-
-  '@rollup/rollup-linux-arm64-musl@4.44.0':
-    optional: true
-
-  '@rollup/rollup-linux-loongarch64-gnu@4.44.0':
-    optional: true
-
-  '@rollup/rollup-linux-powerpc64le-gnu@4.44.0':
-    optional: true
-
-  '@rollup/rollup-linux-riscv64-gnu@4.44.0':
-    optional: true
-
-  '@rollup/rollup-linux-riscv64-musl@4.44.0':
-    optional: true
-
-  '@rollup/rollup-linux-s390x-gnu@4.44.0':
-    optional: true
-
-  '@rollup/rollup-linux-x64-gnu@4.44.0':
-    optional: true
-
-  '@rollup/rollup-linux-x64-musl@4.44.0':
-    optional: true
-
-  '@rollup/rollup-win32-arm64-msvc@4.44.0':
-    optional: true
-
-  '@rollup/rollup-win32-ia32-msvc@4.44.0':
-    optional: true
-
-  '@rollup/rollup-win32-x64-msvc@4.44.0':
-    optional: true
-
-  '@rtsao/scc@1.1.0': {}
+      '@rspack/binding': 2.0.2
+    optionalDependencies:
+      '@swc/helpers': 0.5.15
 
   '@sindresorhus/merge-streams@4.0.0': {}
 
-  '@standard-schema/spec@1.0.0': {}
+  '@standard-schema/spec@1.1.0': {}
 
   '@swc/helpers@0.5.15':
     dependencies:
@@ -6507,39 +4581,36 @@ snapshots:
       mini-svg-data-uri: 1.4.4
       tailwindcss: link:packages/tailwindcss
 
-  '@tailwindcss/typography@0.5.19(tailwindcss@packages+tailwindcss)':
+  '@tailwindcss/typography@0.5.20(tailwindcss@packages+tailwindcss)':
     dependencies:
       postcss-selector-parser: 6.0.10
       tailwindcss: link:packages/tailwindcss
 
-  '@tybys/wasm-util@0.10.1':
+  '@turbo/darwin-64@2.10.8':
+    optional: true
+
+  '@turbo/darwin-arm64@2.10.8':
+    optional: true
+
+  '@turbo/linux-64@2.10.8':
+    optional: true
+
+  '@turbo/linux-arm64@2.10.8':
+    optional: true
+
+  '@turbo/windows-64@2.10.8':
+    optional: true
+
+  '@turbo/windows-arm64@2.10.8':
+    optional: true
+
+  '@tybys/wasm-util@0.10.3':
     dependencies:
       tslib: 2.8.1
 
-  '@types/babel__core@7.20.5':
+  '@types/bun@1.3.14':
     dependencies:
-      '@babel/parser': 7.29.0
-      '@babel/types': 7.29.0
-      '@types/babel__generator': 7.6.8
-      '@types/babel__template': 7.4.4
-      '@types/babel__traverse': 7.20.6
-
-  '@types/babel__generator@7.6.8':
-    dependencies:
-      '@babel/types': 7.29.0
-
-  '@types/babel__template@7.4.4':
-    dependencies:
-      '@babel/parser': 7.29.0
-      '@babel/types': 7.29.0
-
-  '@types/babel__traverse@7.20.6':
-    dependencies:
-      '@babel/types': 7.29.0
-
-  '@types/bun@1.3.9':
-    dependencies:
-      bun-types: 1.3.9
+      bun-types: 1.3.14
 
   '@types/chai@5.2.3':
     dependencies:
@@ -6548,183 +4619,79 @@ snapshots:
 
   '@types/deep-eql@4.0.2': {}
 
-  '@types/eslint-scope@3.7.7':
-    dependencies:
-      '@types/eslint': 9.6.1
-      '@types/estree': 1.0.8
-
-  '@types/eslint@9.6.1':
-    dependencies:
-      '@types/estree': 1.0.8
-      '@types/json-schema': 7.0.15
-
   '@types/estree@1.0.8': {}
 
+  '@types/estree@1.0.9': {}
+
   '@types/json-schema@7.0.15': {}
 
-  '@types/json5@0.0.29': {}
-
-  '@types/node@20.19.1':
+  '@types/node@22.20.1':
     dependencies:
       undici-types: 6.21.0
 
+  '@types/node@25.9.1':
+    dependencies:
+      undici-types: 7.24.6
+
   '@types/postcss-import@14.0.3':
     dependencies:
-      postcss: 8.5.6
+      postcss: 8.5.25
 
-  '@types/react-dom@19.2.3(@types/react@19.2.14)':
+  '@types/react-dom@19.2.3(@types/react@19.2.15)':
     dependencies:
-      '@types/react': 19.2.14
+      '@types/react': 19.2.15
 
-  '@types/react@19.2.14':
+  '@types/react@19.2.15':
     dependencies:
       csstype: 3.2.3
 
-  '@types/semver@7.7.1': {}
+  '@types/semver@7.8.0': {}
 
-  '@typescript-eslint/eslint-plugin@8.47.0(@typescript-eslint/parser@8.47.0(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3))(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3)':
+  '@vitejs/plugin-react@6.0.2(vite@8.2.0(@types/node@25.9.1)(esbuild@0.27.7)(jiti@2.7.0)(terser@5.48.0)(yaml@2.9.0))':
     dependencies:
-      '@eslint-community/regexpp': 4.12.1
-      '@typescript-eslint/parser': 8.47.0(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3)
-      '@typescript-eslint/scope-manager': 8.47.0
-      '@typescript-eslint/type-utils': 8.47.0(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3)
-      '@typescript-eslint/utils': 8.47.0(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3)
-      '@typescript-eslint/visitor-keys': 8.47.0
-      eslint: 9.39.2(jiti@2.6.1)
-      graphemer: 1.4.0
-      ignore: 7.0.5
-      natural-compare: 1.4.0
-      ts-api-utils: 2.1.0(typescript@5.9.3)
-      typescript: 5.9.3
-    transitivePeerDependencies:
-      - supports-color
+      '@rolldown/pluginutils': 1.0.1
+      vite: 8.2.0(@types/node@25.9.1)(esbuild@0.27.7)(jiti@2.7.0)(terser@5.48.0)(yaml@2.9.0)
 
-  '@typescript-eslint/parser@8.47.0(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3)':
+  '@vitest/expect@4.1.10':
     dependencies:
-      '@typescript-eslint/scope-manager': 8.47.0
-      '@typescript-eslint/types': 8.47.0
-      '@typescript-eslint/typescript-estree': 8.47.0(typescript@5.9.3)
-      '@typescript-eslint/visitor-keys': 8.47.0
-      debug: 4.4.3
-      eslint: 9.39.2(jiti@2.6.1)
-      typescript: 5.9.3
-    transitivePeerDependencies:
-      - supports-color
-
-  '@typescript-eslint/project-service@8.47.0(typescript@5.9.3)':
-    dependencies:
-      '@typescript-eslint/tsconfig-utils': 8.47.0(typescript@5.9.3)
-      '@typescript-eslint/types': 8.47.0
-      debug: 4.4.3
-      typescript: 5.9.3
-    transitivePeerDependencies:
-      - supports-color
-
-  '@typescript-eslint/scope-manager@8.47.0':
-    dependencies:
-      '@typescript-eslint/types': 8.47.0
-      '@typescript-eslint/visitor-keys': 8.47.0
-
-  '@typescript-eslint/tsconfig-utils@8.47.0(typescript@5.9.3)':
-    dependencies:
-      typescript: 5.9.3
-
-  '@typescript-eslint/type-utils@8.47.0(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3)':
-    dependencies:
-      '@typescript-eslint/types': 8.47.0
-      '@typescript-eslint/typescript-estree': 8.47.0(typescript@5.9.3)
-      '@typescript-eslint/utils': 8.47.0(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3)
-      debug: 4.4.3
-      eslint: 9.39.2(jiti@2.6.1)
-      ts-api-utils: 2.1.0(typescript@5.9.3)
-      typescript: 5.9.3
-    transitivePeerDependencies:
-      - supports-color
-
-  '@typescript-eslint/types@8.47.0': {}
-
-  '@typescript-eslint/typescript-estree@8.47.0(typescript@5.9.3)':
-    dependencies:
-      '@typescript-eslint/project-service': 8.47.0(typescript@5.9.3)
-      '@typescript-eslint/tsconfig-utils': 8.47.0(typescript@5.9.3)
-      '@typescript-eslint/types': 8.47.0
-      '@typescript-eslint/visitor-keys': 8.47.0
-      debug: 4.4.3
-      fast-glob: 3.3.3
-      is-glob: 4.0.3
-      minimatch: 9.0.5
-      semver: 7.7.4
-      ts-api-utils: 2.1.0(typescript@5.9.3)
-      typescript: 5.9.3
-    transitivePeerDependencies:
-      - supports-color
-
-  '@typescript-eslint/utils@8.47.0(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3)':
-    dependencies:
-      '@eslint-community/eslint-utils': 4.9.0(eslint@9.39.2(jiti@2.6.1))
-      '@typescript-eslint/scope-manager': 8.47.0
-      '@typescript-eslint/types': 8.47.0
-      '@typescript-eslint/typescript-estree': 8.47.0(typescript@5.9.3)
-      eslint: 9.39.2(jiti@2.6.1)
-      typescript: 5.9.3
-    transitivePeerDependencies:
-      - supports-color
-
-  '@typescript-eslint/visitor-keys@8.47.0':
-    dependencies:
-      '@typescript-eslint/types': 8.47.0
-      eslint-visitor-keys: 4.2.1
-
-  '@vitejs/plugin-react@5.1.3(vite@8.0.0(@types/node@20.19.1)(esbuild@0.27.0)(jiti@2.6.1)(terser@5.31.6)(tsx@4.19.1)(yaml@2.6.0))':
-    dependencies:
-      '@babel/core': 7.29.0
-      '@babel/plugin-transform-react-jsx-self': 7.27.1(@babel/core@7.29.0)
-      '@babel/plugin-transform-react-jsx-source': 7.27.1(@babel/core@7.29.0)
-      '@rolldown/pluginutils': 1.0.0-rc.2
-      '@types/babel__core': 7.20.5
-      react-refresh: 0.18.0
-      vite: 8.0.0(@types/node@20.19.1)(esbuild@0.27.0)(jiti@2.6.1)(terser@5.31.6)(tsx@4.19.1)(yaml@2.6.0)
-    transitivePeerDependencies:
-      - supports-color
-
-  '@vitest/expect@4.0.18':
-    dependencies:
-      '@standard-schema/spec': 1.0.0
+      '@standard-schema/spec': 1.1.0
       '@types/chai': 5.2.3
-      '@vitest/spy': 4.0.18
-      '@vitest/utils': 4.0.18
-      chai: 6.2.1
-      tinyrainbow: 3.0.3
+      '@vitest/spy': 4.1.10
+      '@vitest/utils': 4.1.10
+      chai: 6.2.2
+      tinyrainbow: 3.1.0
 
-  '@vitest/mocker@4.0.18(vite@7.0.0(@types/node@20.19.1)(jiti@2.6.1)(lightningcss@1.32.0(patch_hash=mz3chiqe2jbihxa25xumd4ogum))(terser@5.31.6)(tsx@4.19.1)(yaml@2.6.0))':
+  '@vitest/mocker@4.1.10(vite@8.2.0(@types/node@22.20.1)(esbuild@0.27.7)(jiti@2.7.0)(terser@5.48.0)(yaml@2.9.0))':
     dependencies:
-      '@vitest/spy': 4.0.18
+      '@vitest/spy': 4.1.10
       estree-walker: 3.0.3
       magic-string: 0.30.21
     optionalDependencies:
-      vite: 7.0.0(@types/node@20.19.1)(jiti@2.6.1)(lightningcss@1.32.0(patch_hash=mz3chiqe2jbihxa25xumd4ogum))(terser@5.31.6)(tsx@4.19.1)(yaml@2.6.0)
+      vite: 8.2.0(@types/node@22.20.1)(esbuild@0.27.7)(jiti@2.7.0)(terser@5.48.0)(yaml@2.9.0)
 
-  '@vitest/pretty-format@4.0.18':
+  '@vitest/pretty-format@4.1.10':
     dependencies:
-      tinyrainbow: 3.0.3
+      tinyrainbow: 3.1.0
 
-  '@vitest/runner@4.0.18':
+  '@vitest/runner@4.1.10':
     dependencies:
-      '@vitest/utils': 4.0.18
+      '@vitest/utils': 4.1.10
       pathe: 2.0.3
 
-  '@vitest/snapshot@4.0.18':
+  '@vitest/snapshot@4.1.10':
     dependencies:
-      '@vitest/pretty-format': 4.0.18
+      '@vitest/pretty-format': 4.1.10
+      '@vitest/utils': 4.1.10
       magic-string: 0.30.21
       pathe: 2.0.3
 
-  '@vitest/spy@4.0.18': {}
+  '@vitest/spy@4.1.10': {}
 
-  '@vitest/utils@4.0.18':
+  '@vitest/utils@4.1.10':
     dependencies:
-      '@vitest/pretty-format': 4.0.18
-      tinyrainbow: 3.0.3
+      '@vitest/pretty-format': 4.1.10
+      convert-source-map: 2.0.0
+      tinyrainbow: 3.1.0
 
   '@webassemblyjs/ast@1.14.1':
     dependencies:
@@ -6806,249 +4773,101 @@ snapshots:
 
   '@xtuc/long@4.2.2': {}
 
-  acorn-import-phases@1.0.4(acorn@8.15.0):
-    dependencies:
-      acorn: 8.15.0
+  acorn@8.16.0: {}
 
-  acorn-jsx@5.3.2(acorn@8.15.0):
-    dependencies:
-      acorn: 8.15.0
-
-  acorn@8.14.0: {}
-
-  acorn@8.15.0: {}
-
-  ajv-formats@2.1.1(ajv@8.17.1):
+  ajv-formats@2.1.1(ajv@8.20.0):
     optionalDependencies:
-      ajv: 8.17.1
+      ajv: 8.20.0
 
-  ajv-keywords@5.1.0(ajv@8.17.1):
+  ajv-keywords@5.1.0(ajv@8.20.0):
     dependencies:
-      ajv: 8.17.1
+      ajv: 8.20.0
       fast-deep-equal: 3.1.3
 
-  ajv@6.12.6:
+  ajv@8.20.0:
     dependencies:
       fast-deep-equal: 3.1.3
-      fast-json-stable-stringify: 2.1.0
-      json-schema-traverse: 0.4.1
-      uri-js: 4.4.1
-
-  ajv@8.17.1:
-    dependencies:
-      fast-deep-equal: 3.1.3
-      fast-uri: 3.1.0
+      fast-uri: 3.1.2
       json-schema-traverse: 1.0.0
       require-from-string: 2.0.2
 
-  ansi-regex@5.0.1: {}
-
-  ansi-regex@6.0.1: {}
-
-  ansi-styles@4.3.0:
-    dependencies:
-      color-convert: 2.0.1
-
-  ansi-styles@6.2.1: {}
-
   any-promise@1.3.0: {}
 
   anymatch@3.1.3:
     dependencies:
       normalize-path: 3.0.0
-      picomatch: 2.3.1
+      picomatch: 2.3.2
 
   arg@5.0.2: {}
 
   argparse@2.0.1: {}
 
-  aria-query@5.3.2: {}
-
-  array-buffer-byte-length@1.0.2:
-    dependencies:
-      call-bound: 1.0.4
-      is-array-buffer: 3.0.5
-
-  array-includes@3.1.9:
-    dependencies:
-      call-bind: 1.0.8
-      call-bound: 1.0.4
-      define-properties: 1.2.1
-      es-abstract: 1.24.0
-      es-object-atoms: 1.1.1
-      get-intrinsic: 1.3.0
-      is-string: 1.1.1
-      math-intrinsics: 1.1.0
-
-  array.prototype.findlast@1.2.5:
-    dependencies:
-      call-bind: 1.0.8
-      define-properties: 1.2.1
-      es-abstract: 1.24.0
-      es-errors: 1.3.0
-      es-object-atoms: 1.1.1
-      es-shim-unscopables: 1.1.0
-
-  array.prototype.findlastindex@1.2.6:
-    dependencies:
-      call-bind: 1.0.8
-      call-bound: 1.0.4
-      define-properties: 1.2.1
-      es-abstract: 1.24.0
-      es-errors: 1.3.0
-      es-object-atoms: 1.1.1
-      es-shim-unscopables: 1.1.0
-
-  array.prototype.flat@1.3.3:
-    dependencies:
-      call-bind: 1.0.8
-      define-properties: 1.2.1
-      es-abstract: 1.24.0
-      es-shim-unscopables: 1.1.0
-
-  array.prototype.flatmap@1.3.3:
-    dependencies:
-      call-bind: 1.0.8
-      define-properties: 1.2.1
-      es-abstract: 1.24.0
-      es-shim-unscopables: 1.1.0
-
-  array.prototype.tosorted@1.1.4:
-    dependencies:
-      call-bind: 1.0.8
-      define-properties: 1.2.1
-      es-abstract: 1.24.0
-      es-errors: 1.3.0
-      es-shim-unscopables: 1.1.0
-
-  arraybuffer.prototype.slice@1.0.4:
-    dependencies:
-      array-buffer-byte-length: 1.0.2
-      call-bind: 1.0.8
-      define-properties: 1.2.1
-      es-abstract: 1.24.0
-      es-errors: 1.3.0
-      get-intrinsic: 1.3.0
-      is-array-buffer: 3.0.5
-
   assertion-error@2.0.1: {}
 
-  ast-types-flow@0.0.8: {}
-
-  autoprefixer@10.4.24(postcss@8.5.6):
+  autoprefixer@10.5.0(postcss@8.5.25):
     dependencies:
-      browserslist: 4.28.1
-      caniuse-lite: 1.0.30001769
+      browserslist: 4.28.2
+      caniuse-lite: 1.0.30001793
       fraction.js: 5.3.4
       picocolors: 1.1.1
-      postcss: 8.5.6
+      postcss: 8.5.25
       postcss-value-parser: 4.2.0
 
-  available-typed-arrays@1.0.7:
-    dependencies:
-      possible-typed-array-names: 1.0.0
-
-  axe-core@4.10.2: {}
-
-  axobject-query@4.1.0: {}
-
-  balanced-match@1.0.2: {}
-
-  baseline-browser-mapping@2.8.29: {}
-
-  baseline-browser-mapping@2.9.11: {}
+  baseline-browser-mapping@2.10.31: {}
 
   before-after-hook@4.0.0: {}
 
   binary-extensions@2.3.0: {}
 
-  brace-expansion@1.1.11:
-    dependencies:
-      balanced-match: 1.0.2
-      concat-map: 0.0.1
-
-  brace-expansion@2.0.1:
-    dependencies:
-      balanced-match: 1.0.2
-
   braces@3.0.3:
     dependencies:
       fill-range: 7.1.1
 
-  browserslist@4.28.0:
+  browserslist@4.28.2:
     dependencies:
-      baseline-browser-mapping: 2.8.29
-      caniuse-lite: 1.0.30001769
-      electron-to-chromium: 1.5.255
-      node-releases: 2.0.27
-      update-browserslist-db: 1.1.4(browserslist@4.28.0)
-
-  browserslist@4.28.1:
-    dependencies:
-      baseline-browser-mapping: 2.9.11
-      caniuse-lite: 1.0.30001761
-      electron-to-chromium: 1.5.267
-      node-releases: 2.0.27
-      update-browserslist-db: 1.2.3(browserslist@4.28.1)
+      baseline-browser-mapping: 2.10.31
+      caniuse-lite: 1.0.30001793
+      electron-to-chromium: 1.5.361
+      node-releases: 2.0.46
+      update-browserslist-db: 1.2.3(browserslist@4.28.2)
 
   buffer-from@1.1.2: {}
 
-  bun-types@1.3.9:
+  bun-types@1.3.14:
     dependencies:
-      '@types/node': 20.19.1
+      '@types/node': 25.9.1
 
-  bun@1.3.9:
+  bun@1.3.14:
     optionalDependencies:
-      '@oven/bun-darwin-aarch64': 1.3.9
-      '@oven/bun-darwin-x64': 1.3.9
-      '@oven/bun-darwin-x64-baseline': 1.3.9
-      '@oven/bun-linux-aarch64': 1.3.9
-      '@oven/bun-linux-aarch64-musl': 1.3.9
-      '@oven/bun-linux-x64': 1.3.9
-      '@oven/bun-linux-x64-baseline': 1.3.9
-      '@oven/bun-linux-x64-musl': 1.3.9
-      '@oven/bun-linux-x64-musl-baseline': 1.3.9
-      '@oven/bun-windows-x64': 1.3.9
-      '@oven/bun-windows-x64-baseline': 1.3.9
+      '@oven/bun-darwin-aarch64': 1.3.14
+      '@oven/bun-darwin-x64': 1.3.14
+      '@oven/bun-darwin-x64-baseline': 1.3.14
+      '@oven/bun-freebsd-aarch64': 1.3.14
+      '@oven/bun-freebsd-x64': 1.3.14
+      '@oven/bun-linux-aarch64': 1.3.14
+      '@oven/bun-linux-aarch64-android': 1.3.14
+      '@oven/bun-linux-aarch64-musl': 1.3.14
+      '@oven/bun-linux-x64': 1.3.14
+      '@oven/bun-linux-x64-android': 1.3.14
+      '@oven/bun-linux-x64-baseline': 1.3.14
+      '@oven/bun-linux-x64-musl': 1.3.14
+      '@oven/bun-linux-x64-musl-baseline': 1.3.14
+      '@oven/bun-windows-aarch64': 1.3.14
+      '@oven/bun-windows-x64': 1.3.14
+      '@oven/bun-windows-x64-baseline': 1.3.14
 
-  bundle-require@5.1.0(esbuild@0.27.0):
+  bundle-require@5.1.0(esbuild@0.27.7):
     dependencies:
-      esbuild: 0.27.0
+      esbuild: 0.27.7
       load-tsconfig: 0.2.5
 
   cac@6.7.14: {}
 
-  call-bind-apply-helpers@1.0.2:
-    dependencies:
-      es-errors: 1.3.0
-      function-bind: 1.1.2
-
-  call-bind@1.0.8:
-    dependencies:
-      call-bind-apply-helpers: 1.0.2
-      es-define-property: 1.0.1
-      get-intrinsic: 1.3.0
-      set-function-length: 1.2.2
-
-  call-bound@1.0.4:
-    dependencies:
-      call-bind-apply-helpers: 1.0.2
-      get-intrinsic: 1.3.0
-
-  callsites@3.1.0: {}
-
   camelcase-css@2.0.1: {}
 
-  caniuse-lite@1.0.30001761: {}
+  caniuse-lite@1.0.30001793: {}
 
-  caniuse-lite@1.0.30001769: {}
-
-  chai@6.2.1: {}
-
-  chalk@4.1.2:
-    dependencies:
-      ansi-styles: 4.3.0
-      supports-color: 7.2.0
+  chai@6.2.2: {}
 
   chardet@2.1.1: {}
 
@@ -7066,13 +4885,11 @@ snapshots:
 
   chokidar@4.0.3:
     dependencies:
-      readdirp: 4.1.1
+      readdirp: 4.1.2
 
   chrome-trace-event@1.0.4: {}
 
-  citty@0.1.6:
-    dependencies:
-      consola: 3.2.3
+  citty@0.2.2: {}
 
   cli-width@4.1.0: {}
 
@@ -7082,99 +4899,39 @@ snapshots:
     dependencies:
       typanion: 3.14.0
 
-  clipboardy@4.0.0:
-    dependencies:
-      execa: 8.0.1
-      is-wsl: 3.1.0
-      is64bit: 2.0.0
-
-  color-convert@2.0.1:
-    dependencies:
-      color-name: 1.1.4
-
-  color-name@1.1.4: {}
-
   colorette@2.0.20: {}
 
   commander@2.20.3: {}
 
   commander@4.1.1: {}
 
-  concat-map@0.0.1: {}
-
   confbox@0.1.8: {}
 
-  consola@3.2.3: {}
+  consola@3.4.2: {}
 
-  consola@3.4.0: {}
+  content-type@2.0.0: {}
 
   convert-source-map@2.0.0: {}
 
-  cookie-es@1.2.2: {}
-
-  cross-spawn@7.0.6:
-    dependencies:
-      path-key: 3.1.1
-      shebang-command: 2.0.0
-      which: 2.0.2
-
-  crossws@0.3.1:
-    dependencies:
-      uncrypto: 0.1.3
+  cookie-es@1.2.3: {}
 
   crossws@0.3.5:
     dependencies:
       uncrypto: 0.1.3
 
+  crossws@0.4.10: {}
+
   cssesc@3.0.0: {}
 
   csstype@3.2.3: {}
 
-  damerau-levenshtein@1.0.8: {}
-
-  data-view-buffer@1.0.2:
-    dependencies:
-      call-bound: 1.0.4
-      es-errors: 1.3.0
-      is-data-view: 1.0.2
-
-  data-view-byte-length@1.0.2:
-    dependencies:
-      call-bound: 1.0.4
-      es-errors: 1.3.0
-      is-data-view: 1.0.2
-
-  data-view-byte-offset@1.0.1:
-    dependencies:
-      call-bound: 1.0.4
-      es-errors: 1.3.0
-      is-data-view: 1.0.2
-
-  debug@3.2.7:
-    dependencies:
-      ms: 2.1.3
-
   debug@4.4.3:
     dependencies:
       ms: 2.1.3
 
-  dedent@1.7.1: {}
+  dedent@1.7.2: {}
 
-  deep-is@0.1.4: {}
-
-  define-data-property@1.1.4:
-    dependencies:
-      es-define-property: 1.0.1
-      es-errors: 1.3.0
-      gopd: 1.2.0
-
-  define-properties@1.2.1:
-    dependencies:
-      define-data-property: 1.1.4
-      has-property-descriptors: 1.0.2
-      object-keys: 1.1.1
-
-  defu@6.1.4: {}
+  defu@6.1.7: {}
 
   destr@2.0.5: {}
 
@@ -7186,510 +4943,59 @@ snapshots:
 
   dlv@1.1.3: {}
 
-  doctrine@2.1.0:
-    dependencies:
-      esutils: 2.0.3
+  electron-to-chromium@1.5.361: {}
 
-  dunder-proto@1.0.1:
-    dependencies:
-      call-bind-apply-helpers: 1.0.2
-      es-errors: 1.3.0
-      gopd: 1.2.0
-
-  eastasianwidth@0.2.0: {}
-
-  electron-to-chromium@1.5.255: {}
-
-  electron-to-chromium@1.5.267: {}
-
-  emnapi@1.8.1(node-addon-api@8.3.0):
+  emnapi@1.11.3(node-addon-api@8.7.0):
     optionalDependencies:
-      node-addon-api: 8.3.0
+      node-addon-api: 8.7.0
 
-  emoji-regex@8.0.0: {}
-
-  emoji-regex@9.2.2: {}
-
-  enhanced-resolve@5.19.0:
+  enhanced-resolve@5.24.5:
     dependencies:
       graceful-fs: 4.2.11
-      tapable: 2.3.0
-
-  es-abstract@1.24.0:
-    dependencies:
-      array-buffer-byte-length: 1.0.2
-      arraybuffer.prototype.slice: 1.0.4
-      available-typed-arrays: 1.0.7
-      call-bind: 1.0.8
-      call-bound: 1.0.4
-      data-view-buffer: 1.0.2
-      data-view-byte-length: 1.0.2
-      data-view-byte-offset: 1.0.1
-      es-define-property: 1.0.1
-      es-errors: 1.3.0
-      es-object-atoms: 1.1.1
-      es-set-tostringtag: 2.1.0
-      es-to-primitive: 1.3.0
-      function.prototype.name: 1.1.8
-      get-intrinsic: 1.3.0
-      get-proto: 1.0.1
-      get-symbol-description: 1.1.0
-      globalthis: 1.0.4
-      gopd: 1.2.0
-      has-property-descriptors: 1.0.2
-      has-proto: 1.2.0
-      has-symbols: 1.1.0
-      hasown: 2.0.2
-      internal-slot: 1.1.0
-      is-array-buffer: 3.0.5
-      is-callable: 1.2.7
-      is-data-view: 1.0.2
-      is-negative-zero: 2.0.3
-      is-regex: 1.2.1
-      is-set: 2.0.3
-      is-shared-array-buffer: 1.0.4
-      is-string: 1.1.1
-      is-typed-array: 1.1.15
-      is-weakref: 1.1.1
-      math-intrinsics: 1.1.0
-      object-inspect: 1.13.4
-      object-keys: 1.1.1
-      object.assign: 4.1.7
-      own-keys: 1.0.1
-      regexp.prototype.flags: 1.5.4
-      safe-array-concat: 1.1.3
-      safe-push-apply: 1.0.0
-      safe-regex-test: 1.1.0
-      set-proto: 1.0.0
-      stop-iteration-iterator: 1.1.0
-      string.prototype.trim: 1.2.10
-      string.prototype.trimend: 1.0.9
-      string.prototype.trimstart: 1.0.8
-      typed-array-buffer: 1.0.3
-      typed-array-byte-length: 1.0.3
-      typed-array-byte-offset: 1.0.4
-      typed-array-length: 1.0.7
-      unbox-primitive: 1.1.0
-      which-typed-array: 1.1.19
-
-  es-define-property@1.0.1: {}
+      tapable: 2.3.3
 
   es-errors@1.3.0: {}
 
-  es-iterator-helpers@1.1.0:
-    dependencies:
-      call-bind: 1.0.8
-      define-properties: 1.2.1
-      es-abstract: 1.24.0
-      es-errors: 1.3.0
-      es-set-tostringtag: 2.1.0
-      function-bind: 1.1.2
-      get-intrinsic: 1.3.0
-      globalthis: 1.0.4
-      has-property-descriptors: 1.0.2
-      has-proto: 1.2.0
-      has-symbols: 1.1.0
-      internal-slot: 1.1.0
-      iterator.prototype: 1.1.3
-      safe-array-concat: 1.1.3
+  es-module-lexer@2.1.0: {}
 
-  es-module-lexer@1.7.0: {}
+  es-toolkit@1.50.0: {}
 
-  es-module-lexer@2.0.0: {}
-
-  es-object-atoms@1.1.1:
-    dependencies:
-      es-errors: 1.3.0
-
-  es-set-tostringtag@2.1.0:
-    dependencies:
-      es-errors: 1.3.0
-      get-intrinsic: 1.3.0
-      has-tostringtag: 1.0.2
-      hasown: 2.0.2
-
-  es-shim-unscopables@1.1.0:
-    dependencies:
-      hasown: 2.0.2
-
-  es-to-primitive@1.3.0:
-    dependencies:
-      is-callable: 1.2.7
-      is-date-object: 1.1.0
-      is-symbol: 1.1.1
-
-  es-toolkit@1.43.0: {}
-
-  esbuild@0.23.1:
+  esbuild@0.27.7:
     optionalDependencies:
-      '@esbuild/aix-ppc64': 0.23.1
-      '@esbuild/android-arm': 0.23.1
-      '@esbuild/android-arm64': 0.23.1
-      '@esbuild/android-x64': 0.23.1
-      '@esbuild/darwin-arm64': 0.23.1
-      '@esbuild/darwin-x64': 0.23.1
-      '@esbuild/freebsd-arm64': 0.23.1
-      '@esbuild/freebsd-x64': 0.23.1
-      '@esbuild/linux-arm': 0.23.1
-      '@esbuild/linux-arm64': 0.23.1
-      '@esbuild/linux-ia32': 0.23.1
-      '@esbuild/linux-loong64': 0.23.1
-      '@esbuild/linux-mips64el': 0.23.1
-      '@esbuild/linux-ppc64': 0.23.1
-      '@esbuild/linux-riscv64': 0.23.1
-      '@esbuild/linux-s390x': 0.23.1
-      '@esbuild/linux-x64': 0.23.1
-      '@esbuild/netbsd-x64': 0.23.1
-      '@esbuild/openbsd-arm64': 0.23.1
-      '@esbuild/openbsd-x64': 0.23.1
-      '@esbuild/sunos-x64': 0.23.1
-      '@esbuild/win32-arm64': 0.23.1
-      '@esbuild/win32-ia32': 0.23.1
-      '@esbuild/win32-x64': 0.23.1
-    optional: true
-
-  esbuild@0.25.0:
-    optionalDependencies:
-      '@esbuild/aix-ppc64': 0.25.0
-      '@esbuild/android-arm': 0.25.0
-      '@esbuild/android-arm64': 0.25.0
-      '@esbuild/android-x64': 0.25.0
-      '@esbuild/darwin-arm64': 0.25.0
-      '@esbuild/darwin-x64': 0.25.0
-      '@esbuild/freebsd-arm64': 0.25.0
-      '@esbuild/freebsd-x64': 0.25.0
-      '@esbuild/linux-arm': 0.25.0
-      '@esbuild/linux-arm64': 0.25.0
-      '@esbuild/linux-ia32': 0.25.0
-      '@esbuild/linux-loong64': 0.25.0
-      '@esbuild/linux-mips64el': 0.25.0
-      '@esbuild/linux-ppc64': 0.25.0
-      '@esbuild/linux-riscv64': 0.25.0
-      '@esbuild/linux-s390x': 0.25.0
-      '@esbuild/linux-x64': 0.25.0
-      '@esbuild/netbsd-arm64': 0.25.0
-      '@esbuild/netbsd-x64': 0.25.0
-      '@esbuild/openbsd-arm64': 0.25.0
-      '@esbuild/openbsd-x64': 0.25.0
-      '@esbuild/sunos-x64': 0.25.0
-      '@esbuild/win32-arm64': 0.25.0
-      '@esbuild/win32-ia32': 0.25.0
-      '@esbuild/win32-x64': 0.25.0
-
-  esbuild@0.27.0:
-    optionalDependencies:
-      '@esbuild/aix-ppc64': 0.27.0
-      '@esbuild/android-arm': 0.27.0
-      '@esbuild/android-arm64': 0.27.0
-      '@esbuild/android-x64': 0.27.0
-      '@esbuild/darwin-arm64': 0.27.0
-      '@esbuild/darwin-x64': 0.27.0
-      '@esbuild/freebsd-arm64': 0.27.0
-      '@esbuild/freebsd-x64': 0.27.0
-      '@esbuild/linux-arm': 0.27.0
-      '@esbuild/linux-arm64': 0.27.0
-      '@esbuild/linux-ia32': 0.27.0
-      '@esbuild/linux-loong64': 0.27.0
-      '@esbuild/linux-mips64el': 0.27.0
-      '@esbuild/linux-ppc64': 0.27.0
-      '@esbuild/linux-riscv64': 0.27.0
-      '@esbuild/linux-s390x': 0.27.0
-      '@esbuild/linux-x64': 0.27.0
-      '@esbuild/netbsd-arm64': 0.27.0
-      '@esbuild/netbsd-x64': 0.27.0
-      '@esbuild/openbsd-arm64': 0.27.0
-      '@esbuild/openbsd-x64': 0.27.0
-      '@esbuild/openharmony-arm64': 0.27.0
-      '@esbuild/sunos-x64': 0.27.0
-      '@esbuild/win32-arm64': 0.27.0
-      '@esbuild/win32-ia32': 0.27.0
-      '@esbuild/win32-x64': 0.27.0
+      '@esbuild/aix-ppc64': 0.27.7
+      '@esbuild/android-arm': 0.27.7
+      '@esbuild/android-arm64': 0.27.7
+      '@esbuild/android-x64': 0.27.7
+      '@esbuild/darwin-arm64': 0.27.7
+      '@esbuild/darwin-x64': 0.27.7
+      '@esbuild/freebsd-arm64': 0.27.7
+      '@esbuild/freebsd-x64': 0.27.7
+      '@esbuild/linux-arm': 0.27.7
+      '@esbuild/linux-arm64': 0.27.7
+      '@esbuild/linux-ia32': 0.27.7
+      '@esbuild/linux-loong64': 0.27.7
+      '@esbuild/linux-mips64el': 0.27.7
+      '@esbuild/linux-ppc64': 0.27.7
+      '@esbuild/linux-riscv64': 0.27.7
+      '@esbuild/linux-s390x': 0.27.7
+      '@esbuild/linux-x64': 0.27.7
+      '@esbuild/netbsd-arm64': 0.27.7
+      '@esbuild/netbsd-x64': 0.27.7
+      '@esbuild/openbsd-arm64': 0.27.7
+      '@esbuild/openbsd-x64': 0.27.7
+      '@esbuild/openharmony-arm64': 0.27.7
+      '@esbuild/sunos-x64': 0.27.7
+      '@esbuild/win32-arm64': 0.27.7
+      '@esbuild/win32-ia32': 0.27.7
+      '@esbuild/win32-x64': 0.27.7
 
   escalade@3.2.0: {}
 
-  escape-string-regexp@4.0.0: {}
-
-  eslint-config-next@16.1.6(@typescript-eslint/parser@8.47.0(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3))(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3):
-    dependencies:
-      '@next/eslint-plugin-next': 16.1.6
-      eslint: 9.39.2(jiti@2.6.1)
-      eslint-import-resolver-node: 0.3.9
-      eslint-import-resolver-typescript: 3.6.3(@typescript-eslint/parser@8.47.0(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.32.0(@typescript-eslint/parser@8.47.0(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3))(eslint@9.39.2(jiti@2.6.1)))(eslint@9.39.2(jiti@2.6.1))
-      eslint-plugin-import: 2.32.0(@typescript-eslint/parser@8.47.0(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3))(eslint-import-resolver-typescript@3.6.3(@typescript-eslint/parser@8.47.0(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.32.0(@typescript-eslint/parser@8.47.0(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3))(eslint@9.39.2(jiti@2.6.1)))(eslint@9.39.2(jiti@2.6.1)))(eslint@9.39.2(jiti@2.6.1))
-      eslint-plugin-jsx-a11y: 6.10.1(eslint@9.39.2(jiti@2.6.1))
-      eslint-plugin-react: 7.37.2(eslint@9.39.2(jiti@2.6.1))
-      eslint-plugin-react-hooks: 7.0.1(eslint@9.39.2(jiti@2.6.1))
-      globals: 16.4.0
-      typescript-eslint: 8.47.0(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3)
-    optionalDependencies:
-      typescript: 5.9.3
-    transitivePeerDependencies:
-      - '@typescript-eslint/parser'
-      - eslint-import-resolver-webpack
-      - eslint-plugin-import-x
-      - supports-color
-
-  eslint-config-next@16.1.6(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3):
-    dependencies:
-      '@next/eslint-plugin-next': 16.1.6
-      eslint: 9.39.2(jiti@2.6.1)
-      eslint-import-resolver-node: 0.3.9
-      eslint-import-resolver-typescript: 3.6.3(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.32.0)(eslint@9.39.2(jiti@2.6.1))
-      eslint-plugin-import: 2.32.0(eslint-import-resolver-typescript@3.6.3)(eslint@9.39.2(jiti@2.6.1))
-      eslint-plugin-jsx-a11y: 6.10.1(eslint@9.39.2(jiti@2.6.1))
-      eslint-plugin-react: 7.37.2(eslint@9.39.2(jiti@2.6.1))
-      eslint-plugin-react-hooks: 7.0.1(eslint@9.39.2(jiti@2.6.1))
-      globals: 16.4.0
-      typescript-eslint: 8.47.0(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3)
-    optionalDependencies:
-      typescript: 5.9.3
-    transitivePeerDependencies:
-      - '@typescript-eslint/parser'
-      - eslint-import-resolver-webpack
-      - eslint-plugin-import-x
-      - supports-color
-
-  eslint-import-resolver-node@0.3.9:
-    dependencies:
-      debug: 3.2.7
-      is-core-module: 2.16.1
-      resolve: 1.22.8
-    transitivePeerDependencies:
-      - supports-color
-
-  eslint-import-resolver-typescript@3.6.3(@typescript-eslint/parser@8.47.0(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.32.0(@typescript-eslint/parser@8.47.0(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3))(eslint@9.39.2(jiti@2.6.1)))(eslint@9.39.2(jiti@2.6.1)):
-    dependencies:
-      '@nolyfill/is-core-module': 1.0.39
-      debug: 4.4.3
-      enhanced-resolve: 5.19.0
-      eslint: 9.39.2(jiti@2.6.1)
-      eslint-module-utils: 2.12.1(@typescript-eslint/parser@8.47.0(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.3(@typescript-eslint/parser@8.47.0(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.32.0(@typescript-eslint/parser@8.47.0(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3))(eslint@9.39.2(jiti@2.6.1)))(eslint@9.39.2(jiti@2.6.1)))(eslint@9.39.2(jiti@2.6.1))
-      fast-glob: 3.3.3
-      get-tsconfig: 4.10.0
-      is-bun-module: 1.2.1
-      is-glob: 4.0.3
-    optionalDependencies:
-      eslint-plugin-import: 2.32.0(@typescript-eslint/parser@8.47.0(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3))(eslint-import-resolver-typescript@3.6.3(@typescript-eslint/parser@8.47.0(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.32.0(@typescript-eslint/parser@8.47.0(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3))(eslint@9.39.2(jiti@2.6.1)))(eslint@9.39.2(jiti@2.6.1)))(eslint@9.39.2(jiti@2.6.1))
-    transitivePeerDependencies:
-      - '@typescript-eslint/parser'
-      - eslint-import-resolver-node
-      - eslint-import-resolver-webpack
-      - supports-color
-
-  eslint-import-resolver-typescript@3.6.3(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.32.0)(eslint@9.39.2(jiti@2.6.1)):
-    dependencies:
-      '@nolyfill/is-core-module': 1.0.39
-      debug: 4.4.3
-      enhanced-resolve: 5.19.0
-      eslint: 9.39.2(jiti@2.6.1)
-      eslint-module-utils: 2.12.1(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.3(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.32.0)(eslint@9.39.2(jiti@2.6.1)))(eslint@9.39.2(jiti@2.6.1))
-      fast-glob: 3.3.3
-      get-tsconfig: 4.10.0
-      is-bun-module: 1.2.1
-      is-glob: 4.0.3
-    optionalDependencies:
-      eslint-plugin-import: 2.32.0(eslint-import-resolver-typescript@3.6.3)(eslint@9.39.2(jiti@2.6.1))
-    transitivePeerDependencies:
-      - '@typescript-eslint/parser'
-      - eslint-import-resolver-node
-      - eslint-import-resolver-webpack
-      - supports-color
-
-  eslint-module-utils@2.12.1(@typescript-eslint/parser@8.47.0(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.3(@typescript-eslint/parser@8.47.0(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.32.0(@typescript-eslint/parser@8.47.0(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3))(eslint@9.39.2(jiti@2.6.1)))(eslint@9.39.2(jiti@2.6.1)))(eslint@9.39.2(jiti@2.6.1)):
-    dependencies:
-      debug: 3.2.7
-    optionalDependencies:
-      '@typescript-eslint/parser': 8.47.0(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3)
-      eslint: 9.39.2(jiti@2.6.1)
-      eslint-import-resolver-node: 0.3.9
-      eslint-import-resolver-typescript: 3.6.3(@typescript-eslint/parser@8.47.0(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.32.0(@typescript-eslint/parser@8.47.0(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3))(eslint@9.39.2(jiti@2.6.1)))(eslint@9.39.2(jiti@2.6.1))
-    transitivePeerDependencies:
-      - supports-color
-
-  eslint-module-utils@2.12.1(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.3(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.32.0)(eslint@9.39.2(jiti@2.6.1)))(eslint@9.39.2(jiti@2.6.1)):
-    dependencies:
-      debug: 3.2.7
-    optionalDependencies:
-      eslint: 9.39.2(jiti@2.6.1)
-      eslint-import-resolver-node: 0.3.9
-      eslint-import-resolver-typescript: 3.6.3(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.32.0)(eslint@9.39.2(jiti@2.6.1))
-    transitivePeerDependencies:
-      - supports-color
-
-  eslint-plugin-import@2.32.0(@typescript-eslint/parser@8.47.0(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3))(eslint-import-resolver-typescript@3.6.3(@typescript-eslint/parser@8.47.0(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.32.0(@typescript-eslint/parser@8.47.0(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3))(eslint@9.39.2(jiti@2.6.1)))(eslint@9.39.2(jiti@2.6.1)))(eslint@9.39.2(jiti@2.6.1)):
-    dependencies:
-      '@rtsao/scc': 1.1.0
-      array-includes: 3.1.9
-      array.prototype.findlastindex: 1.2.6
-      array.prototype.flat: 1.3.3
-      array.prototype.flatmap: 1.3.3
-      debug: 3.2.7
-      doctrine: 2.1.0
-      eslint: 9.39.2(jiti@2.6.1)
-      eslint-import-resolver-node: 0.3.9
-      eslint-module-utils: 2.12.1(@typescript-eslint/parser@8.47.0(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.3(@typescript-eslint/parser@8.47.0(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.32.0(@typescript-eslint/parser@8.47.0(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3))(eslint@9.39.2(jiti@2.6.1)))(eslint@9.39.2(jiti@2.6.1)))(eslint@9.39.2(jiti@2.6.1))
-      hasown: 2.0.2
-      is-core-module: 2.16.1
-      is-glob: 4.0.3
-      minimatch: 3.1.2
-      object.fromentries: 2.0.8
-      object.groupby: 1.0.3
-      object.values: 1.2.1
-      semver: 6.3.1
-      string.prototype.trimend: 1.0.9
-      tsconfig-paths: 3.15.0
-    optionalDependencies:
-      '@typescript-eslint/parser': 8.47.0(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3)
-    transitivePeerDependencies:
-      - eslint-import-resolver-typescript
-      - eslint-import-resolver-webpack
-      - supports-color
-
-  eslint-plugin-import@2.32.0(eslint-import-resolver-typescript@3.6.3)(eslint@9.39.2(jiti@2.6.1)):
-    dependencies:
-      '@rtsao/scc': 1.1.0
-      array-includes: 3.1.9
-      array.prototype.findlastindex: 1.2.6
-      array.prototype.flat: 1.3.3
-      array.prototype.flatmap: 1.3.3
-      debug: 3.2.7
-      doctrine: 2.1.0
-      eslint: 9.39.2(jiti@2.6.1)
-      eslint-import-resolver-node: 0.3.9
-      eslint-module-utils: 2.12.1(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.3(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.32.0)(eslint@9.39.2(jiti@2.6.1)))(eslint@9.39.2(jiti@2.6.1))
-      hasown: 2.0.2
-      is-core-module: 2.16.1
-      is-glob: 4.0.3
-      minimatch: 3.1.2
-      object.fromentries: 2.0.8
-      object.groupby: 1.0.3
-      object.values: 1.2.1
-      semver: 6.3.1
-      string.prototype.trimend: 1.0.9
-      tsconfig-paths: 3.15.0
-    transitivePeerDependencies:
-      - eslint-import-resolver-typescript
-      - eslint-import-resolver-webpack
-      - supports-color
-
-  eslint-plugin-jsx-a11y@6.10.1(eslint@9.39.2(jiti@2.6.1)):
-    dependencies:
-      aria-query: 5.3.2
-      array-includes: 3.1.9
-      array.prototype.flatmap: 1.3.3
-      ast-types-flow: 0.0.8
-      axe-core: 4.10.2
-      axobject-query: 4.1.0
-      damerau-levenshtein: 1.0.8
-      emoji-regex: 9.2.2
-      es-iterator-helpers: 1.1.0
-      eslint: 9.39.2(jiti@2.6.1)
-      hasown: 2.0.2
-      jsx-ast-utils: 3.3.5
-      language-tags: 1.0.9
-      minimatch: 3.1.2
-      object.fromentries: 2.0.8
-      safe-regex-test: 1.1.0
-      string.prototype.includes: 2.0.1
-
-  eslint-plugin-react-hooks@7.0.1(eslint@9.39.2(jiti@2.6.1)):
-    dependencies:
-      '@babel/core': 7.28.5
-      '@babel/parser': 7.28.5
-      eslint: 9.39.2(jiti@2.6.1)
-      hermes-parser: 0.25.1
-      zod: 4.1.12
-      zod-validation-error: 4.0.2(zod@4.1.12)
-    transitivePeerDependencies:
-      - supports-color
-
-  eslint-plugin-react@7.37.2(eslint@9.39.2(jiti@2.6.1)):
-    dependencies:
-      array-includes: 3.1.9
-      array.prototype.findlast: 1.2.5
-      array.prototype.flatmap: 1.3.3
-      array.prototype.tosorted: 1.1.4
-      doctrine: 2.1.0
-      es-iterator-helpers: 1.1.0
-      eslint: 9.39.2(jiti@2.6.1)
-      estraverse: 5.3.0
-      hasown: 2.0.2
-      jsx-ast-utils: 3.3.5
-      minimatch: 3.1.2
-      object.entries: 1.1.8
-      object.fromentries: 2.0.8
-      object.values: 1.2.1
-      prop-types: 15.8.1
-      resolve: 2.0.0-next.5
-      semver: 6.3.1
-      string.prototype.matchall: 4.0.11
-      string.prototype.repeat: 1.0.0
-
   eslint-scope@5.1.1:
     dependencies:
       esrecurse: 4.3.0
       estraverse: 4.3.0
 
-  eslint-scope@8.4.0:
-    dependencies:
-      esrecurse: 4.3.0
-      estraverse: 5.3.0
-
-  eslint-visitor-keys@3.4.3: {}
-
-  eslint-visitor-keys@4.2.1: {}
-
-  eslint@9.39.2(jiti@2.6.1):
-    dependencies:
-      '@eslint-community/eslint-utils': 4.9.0(eslint@9.39.2(jiti@2.6.1))
-      '@eslint-community/regexpp': 4.12.1
-      '@eslint/config-array': 0.21.1
-      '@eslint/config-helpers': 0.4.2
-      '@eslint/core': 0.17.0
-      '@eslint/eslintrc': 3.3.1
-      '@eslint/js': 9.39.2
-      '@eslint/plugin-kit': 0.4.1
-      '@humanfs/node': 0.16.6
-      '@humanwhocodes/module-importer': 1.0.1
-      '@humanwhocodes/retry': 0.4.2
-      '@types/estree': 1.0.8
-      ajv: 6.12.6
-      chalk: 4.1.2
-      cross-spawn: 7.0.6
-      debug: 4.4.3
-      escape-string-regexp: 4.0.0
-      eslint-scope: 8.4.0
-      eslint-visitor-keys: 4.2.1
-      espree: 10.4.0
-      esquery: 1.6.0
-      esutils: 2.0.3
-      fast-deep-equal: 3.1.3
-      file-entry-cache: 8.0.0
-      find-up: 5.0.0
-      glob-parent: 6.0.2
-      ignore: 5.3.2
-      imurmurhash: 0.1.4
-      is-glob: 4.0.3
-      json-stable-stringify-without-jsonify: 1.0.1
-      lodash.merge: 4.6.2
-      minimatch: 3.1.2
-      natural-compare: 1.4.0
-      optionator: 0.9.4
-    optionalDependencies:
-      jiti: 2.6.1
-    transitivePeerDependencies:
-      - supports-color
-
-  espree@10.4.0:
-    dependencies:
-      acorn: 8.15.0
-      acorn-jsx: 5.3.2(acorn@8.15.0)
-      eslint-visitor-keys: 4.2.1
-
-  esquery@1.6.0:
-    dependencies:
-      estraverse: 5.3.0
-
   esrecurse@4.3.0:
     dependencies:
       estraverse: 5.3.0
@@ -7700,25 +5006,11 @@ snapshots:
 
   estree-walker@3.0.3:
     dependencies:
-      '@types/estree': 1.0.8
-
-  esutils@2.0.3: {}
+      '@types/estree': 1.0.9
 
   events@3.3.0: {}
 
-  execa@8.0.1:
-    dependencies:
-      cross-spawn: 7.0.6
-      get-stream: 8.0.1
-      human-signals: 5.0.0
-      is-stream: 3.0.0
-      merge-stream: 2.0.0
-      npm-run-path: 5.3.0
-      onetime: 6.0.0
-      signal-exit: 4.1.0
-      strip-final-newline: 3.0.0
-
-  expect-type@1.2.2: {}
+  expect-type@1.3.0: {}
 
   fast-content-type-parse@3.0.0: {}
 
@@ -7726,14 +5018,6 @@ snapshots:
 
   fast-equals@5.4.0: {}
 
-  fast-glob@3.3.1:
-    dependencies:
-      '@nodelib/fs.stat': 2.0.5
-      '@nodelib/fs.walk': 1.2.8
-      glob-parent: 5.1.2
-      merge2: 1.4.1
-      micromatch: 4.0.8
-
   fast-glob@3.3.3:
     dependencies:
       '@nodelib/fs.stat': 2.0.5
@@ -7742,62 +5026,43 @@ snapshots:
       merge2: 1.4.1
       micromatch: 4.0.8
 
-  fast-json-stable-stringify@2.1.0: {}
+  fast-string-truncated-width@3.0.3: {}
 
-  fast-levenshtein@2.0.6: {}
+  fast-string-width@3.0.2:
+    dependencies:
+      fast-string-truncated-width: 3.0.3
 
   fast-stringify@4.0.0: {}
 
-  fast-uri@3.1.0: {}
+  fast-uri@3.1.2: {}
 
-  fastq@1.17.1:
+  fast-wrap-ansi@0.2.2:
     dependencies:
-      reusify: 1.0.4
+      fast-string-width: 3.0.2
 
-  fdir@6.4.6(picomatch@4.0.2):
-    optionalDependencies:
-      picomatch: 4.0.2
-
-  fdir@6.5.0(picomatch@4.0.3):
-    optionalDependencies:
-      picomatch: 4.0.3
-
-  file-entry-cache@8.0.0:
+  fastq@1.20.1:
     dependencies:
-      flat-cache: 4.0.1
+      reusify: 1.1.0
+
+  fdir@6.5.0(picomatch@4.0.4):
+    optionalDependencies:
+      picomatch: 4.0.4
+
+  fdir@6.5.0(picomatch@4.0.5):
+    optionalDependencies:
+      picomatch: 4.0.5
 
   fill-range@7.1.1:
     dependencies:
       to-regex-range: 5.0.1
 
-  find-up-simple@1.0.0: {}
-
-  find-up@5.0.0:
-    dependencies:
-      locate-path: 6.0.0
-      path-exists: 4.0.0
+  find-up-simple@1.0.1: {}
 
   fix-dts-default-cjs-exports@1.0.1:
     dependencies:
       magic-string: 0.30.21
-      mlly: 1.7.4
-      rollup: 4.44.0
-
-  flat-cache@4.0.1:
-    dependencies:
-      flatted: 3.3.1
-      keyv: 4.5.4
-
-  flatted@3.3.1: {}
-
-  for-each@0.3.5:
-    dependencies:
-      is-callable: 1.2.7
-
-  foreground-child@3.3.0:
-    dependencies:
-      cross-spawn: 7.0.6
-      signal-exit: 4.1.0
+      mlly: 1.8.2
+      rollup: 4.60.4
 
   fraction.js@5.3.4: {}
 
@@ -7809,50 +5074,7 @@ snapshots:
 
   function-bind@1.1.2: {}
 
-  function.prototype.name@1.1.8:
-    dependencies:
-      call-bind: 1.0.8
-      call-bound: 1.0.4
-      define-properties: 1.2.1
-      functions-have-names: 1.2.3
-      hasown: 2.0.2
-      is-callable: 1.2.7
-
-  functions-have-names@1.2.3: {}
-
-  gensync@1.0.0-beta.2: {}
-
-  get-intrinsic@1.3.0:
-    dependencies:
-      call-bind-apply-helpers: 1.0.2
-      es-define-property: 1.0.1
-      es-errors: 1.3.0
-      es-object-atoms: 1.1.1
-      function-bind: 1.1.2
-      get-proto: 1.0.1
-      gopd: 1.2.0
-      has-symbols: 1.1.0
-      hasown: 2.0.2
-      math-intrinsics: 1.1.0
-
-  get-port-please@3.1.2: {}
-
-  get-proto@1.0.1:
-    dependencies:
-      dunder-proto: 1.0.1
-      es-object-atoms: 1.1.1
-
-  get-stream@8.0.1: {}
-
-  get-symbol-description@1.1.0:
-    dependencies:
-      call-bound: 1.0.4
-      es-errors: 1.3.0
-      get-intrinsic: 1.3.0
-
-  get-tsconfig@4.10.0:
-    dependencies:
-      resolve-pkg-maps: 1.0.0
+  get-port-please@3.2.0: {}
 
   glob-parent@5.1.2:
     dependencies:
@@ -7862,410 +5084,161 @@ snapshots:
     dependencies:
       is-glob: 4.0.3
 
-  glob-to-regexp@0.4.1: {}
-
-  glob@10.4.5:
-    dependencies:
-      foreground-child: 3.3.0
-      jackspeak: 3.4.3
-      minimatch: 9.0.5
-      minipass: 7.1.2
-      package-json-from-dist: 1.0.1
-      path-scurry: 1.11.1
-
-  globals@14.0.0: {}
-
-  globals@16.4.0: {}
-
-  globalthis@1.0.4:
-    dependencies:
-      define-properties: 1.2.1
-      gopd: 1.2.0
-
-  globby@15.0.0:
+  globby@16.2.2:
     dependencies:
       '@sindresorhus/merge-streams': 4.0.0
       fast-glob: 3.3.3
       ignore: 7.0.5
-      path-type: 6.0.0
+      is-path-inside: 4.0.0
       slash: 5.1.0
-      unicorn-magic: 0.3.0
-
-  gopd@1.2.0: {}
+      unicorn-magic: 0.4.0
 
   graceful-fs@4.2.11: {}
 
-  graphemer@1.4.0: {}
-
-  h3@1.15.5:
+  h3@1.15.11:
     dependencies:
-      cookie-es: 1.2.2
+      cookie-es: 1.2.3
       crossws: 0.3.5
-      defu: 6.1.4
+      defu: 6.1.7
       destr: 2.0.5
       iron-webcrypto: 1.2.1
       node-mock-http: 1.0.4
       radix3: 1.1.2
-      ufo: 1.6.3
+      ufo: 1.6.4
       uncrypto: 0.1.3
 
-  has-bigints@1.0.2: {}
-
   has-flag@4.0.0: {}
 
-  has-property-descriptors@1.0.2:
-    dependencies:
-      es-define-property: 1.0.1
-
-  has-proto@1.2.0:
-    dependencies:
-      dunder-proto: 1.0.1
-
-  has-symbols@1.1.0: {}
-
-  has-tostringtag@1.0.2:
-    dependencies:
-      has-symbols: 1.1.0
-
-  hasown@2.0.2:
+  hasown@2.0.3:
     dependencies:
       function-bind: 1.1.2
 
-  hermes-estree@0.25.1: {}
-
-  hermes-parser@0.25.1:
-    dependencies:
-      hermes-estree: 0.25.1
-
   http-shutdown@1.2.2: {}
 
-  human-signals@5.0.0: {}
-
-  iconv-lite@0.7.0:
+  iconv-lite@0.7.2:
     dependencies:
       safer-buffer: 2.1.2
 
-  ignore@5.3.2: {}
-
   ignore@7.0.5: {}
 
-  import-fresh@3.3.0:
-    dependencies:
-      parent-module: 1.0.1
-      resolve-from: 4.0.0
-
-  imurmurhash@0.1.4: {}
-
-  internal-slot@1.1.0:
-    dependencies:
-      es-errors: 1.3.0
-      hasown: 2.0.2
-      side-channel: 1.1.0
-
   iron-webcrypto@1.2.1: {}
 
-  is-array-buffer@3.0.5:
-    dependencies:
-      call-bind: 1.0.8
-      call-bound: 1.0.4
-      get-intrinsic: 1.3.0
-
-  is-async-function@2.0.0:
-    dependencies:
-      has-tostringtag: 1.0.2
-
-  is-bigint@1.1.0:
-    dependencies:
-      has-bigints: 1.0.2
-
   is-binary-path@2.1.0:
     dependencies:
       binary-extensions: 2.3.0
 
-  is-boolean-object@1.2.2:
+  is-core-module@2.16.2:
     dependencies:
-      call-bound: 1.0.4
-      has-tostringtag: 1.0.2
-
-  is-bun-module@1.2.1:
-    dependencies:
-      semver: 7.7.4
-
-  is-callable@1.2.7: {}
-
-  is-core-module@2.15.1:
-    dependencies:
-      hasown: 2.0.2
-
-  is-core-module@2.16.1:
-    dependencies:
-      hasown: 2.0.2
-
-  is-data-view@1.0.2:
-    dependencies:
-      call-bound: 1.0.4
-      get-intrinsic: 1.3.0
-      is-typed-array: 1.1.15
-
-  is-date-object@1.1.0:
-    dependencies:
-      call-bound: 1.0.4
-      has-tostringtag: 1.0.2
-
-  is-docker@3.0.0: {}
+      hasown: 2.0.3
 
   is-extglob@2.1.1: {}
 
-  is-finalizationregistry@1.1.1:
-    dependencies:
-      call-bound: 1.0.4
-
-  is-fullwidth-code-point@3.0.0: {}
-
-  is-generator-function@1.0.10:
-    dependencies:
-      has-tostringtag: 1.0.2
-
   is-glob@4.0.3:
     dependencies:
       is-extglob: 2.1.1
 
-  is-inside-container@1.0.0:
-    dependencies:
-      is-docker: 3.0.0
-
-  is-map@2.0.3: {}
-
-  is-negative-zero@2.0.3: {}
-
-  is-number-object@1.1.1:
-    dependencies:
-      call-bound: 1.0.4
-      has-tostringtag: 1.0.2
-
   is-number@7.0.0: {}
 
-  is-regex@1.2.1:
-    dependencies:
-      call-bound: 1.0.4
-      gopd: 1.2.0
-      has-tostringtag: 1.0.2
-      hasown: 2.0.2
-
-  is-set@2.0.3: {}
-
-  is-shared-array-buffer@1.0.4:
-    dependencies:
-      call-bound: 1.0.4
-
-  is-stream@3.0.0: {}
-
-  is-string@1.1.1:
-    dependencies:
-      call-bound: 1.0.4
-      has-tostringtag: 1.0.2
-
-  is-symbol@1.1.1:
-    dependencies:
-      call-bound: 1.0.4
-      has-symbols: 1.1.0
-      safe-regex-test: 1.1.0
-
-  is-typed-array@1.1.15:
-    dependencies:
-      which-typed-array: 1.1.19
-
-  is-weakmap@2.0.2: {}
-
-  is-weakref@1.1.1:
-    dependencies:
-      call-bound: 1.0.4
-
-  is-weakset@2.0.3:
-    dependencies:
-      call-bind: 1.0.8
-      get-intrinsic: 1.3.0
-
-  is-wsl@3.1.0:
-    dependencies:
-      is-inside-container: 1.0.0
-
-  is64bit@2.0.0:
-    dependencies:
-      system-architecture: 0.1.0
-
-  isarray@2.0.5: {}
-
-  isexe@2.0.0: {}
-
-  iterator.prototype@1.1.3:
-    dependencies:
-      define-properties: 1.2.1
-      get-intrinsic: 1.3.0
-      has-symbols: 1.1.0
-      reflect.getprototypeof: 1.0.10
-      set-function-name: 2.0.2
-
-  jackspeak@3.4.3:
-    dependencies:
-      '@isaacs/cliui': 8.0.2
-    optionalDependencies:
-      '@pkgjs/parseargs': 0.11.0
+  is-path-inside@4.0.0: {}
 
   jest-worker@27.5.1:
     dependencies:
-      '@types/node': 20.19.1
+      '@types/node': 25.9.1
       merge-stream: 2.0.0
       supports-color: 8.1.1
 
-  jiti@1.21.6: {}
+  jiti@1.21.7: {}
 
-  jiti@2.4.2: {}
-
-  jiti@2.6.1: {}
+  jiti@2.7.0: {}
 
   joycon@3.1.1: {}
 
-  js-tokens@4.0.0: {}
-
-  js-yaml@4.1.0:
+  js-yaml@4.3.1:
     dependencies:
       argparse: 2.0.1
 
-  jsesc@3.1.0: {}
-
-  json-buffer@3.0.1: {}
-
-  json-parse-even-better-errors@2.3.1: {}
-
-  json-schema-traverse@0.4.1: {}
-
   json-schema-traverse@1.0.0: {}
 
-  json-stable-stringify-without-jsonify@1.0.1: {}
+  json-with-bigint@3.5.8: {}
 
-  json5@1.0.2:
-    dependencies:
-      minimist: 1.2.8
-
-  json5@2.2.3: {}
-
-  jsx-ast-utils@3.3.5:
-    dependencies:
-      array-includes: 3.1.9
-      array.prototype.flat: 1.3.3
-      object.assign: 4.1.7
-      object.values: 1.2.1
-
-  keyv@4.5.4:
-    dependencies:
-      json-buffer: 3.0.1
-
-  language-subtag-registry@0.3.23: {}
-
-  language-tags@1.0.9:
-    dependencies:
-      language-subtag-registry: 0.3.23
-
-  levn@0.4.1:
-    dependencies:
-      prelude-ls: 1.2.1
-      type-check: 0.4.0
-
-  lightningcss-android-arm64@1.32.0:
+  lightningcss-android-arm64@1.33.0:
     optional: true
 
-  lightningcss-darwin-arm64@1.32.0: {}
+  lightningcss-darwin-arm64@1.33.0: {}
 
-  lightningcss-darwin-x64@1.32.0: {}
+  lightningcss-darwin-x64@1.33.0: {}
 
-  lightningcss-freebsd-x64@1.32.0:
+  lightningcss-freebsd-x64@1.33.0:
     optional: true
 
-  lightningcss-linux-arm-gnueabihf@1.32.0:
+  lightningcss-linux-arm-gnueabihf@1.33.0:
     optional: true
 
-  lightningcss-linux-arm64-gnu@1.32.0: {}
+  lightningcss-linux-arm64-gnu@1.33.0: {}
 
-  lightningcss-linux-arm64-musl@1.32.0: {}
+  lightningcss-linux-arm64-musl@1.33.0: {}
 
-  lightningcss-linux-x64-gnu@1.32.0: {}
+  lightningcss-linux-x64-gnu@1.33.0: {}
 
-  lightningcss-linux-x64-musl@1.32.0: {}
+  lightningcss-linux-x64-musl@1.33.0: {}
 
-  lightningcss-win32-arm64-msvc@1.32.0:
+  lightningcss-win32-arm64-msvc@1.33.0:
     optional: true
 
-  lightningcss-win32-x64-msvc@1.32.0: {}
+  lightningcss-win32-x64-msvc@1.33.0: {}
 
-  lightningcss@1.32.0(patch_hash=mz3chiqe2jbihxa25xumd4ogum):
+  lightningcss@1.33.0(patch_hash=1d4a8800d60d13d42887b88b3a86576df4b451670308145fb432ec8abbf40930):
     dependencies:
       detect-libc: 2.1.2
     optionalDependencies:
-      lightningcss-android-arm64: 1.32.0
-      lightningcss-darwin-arm64: 1.32.0
-      lightningcss-darwin-x64: 1.32.0
-      lightningcss-freebsd-x64: 1.32.0
-      lightningcss-linux-arm-gnueabihf: 1.32.0
-      lightningcss-linux-arm64-gnu: 1.32.0
-      lightningcss-linux-arm64-musl: 1.32.0
-      lightningcss-linux-x64-gnu: 1.32.0
-      lightningcss-linux-x64-musl: 1.32.0
-      lightningcss-win32-arm64-msvc: 1.32.0
-      lightningcss-win32-x64-msvc: 1.32.0
+      lightningcss-android-arm64: 1.33.0
+      lightningcss-darwin-arm64: 1.33.0
+      lightningcss-darwin-x64: 1.33.0
+      lightningcss-freebsd-x64: 1.33.0
+      lightningcss-linux-arm-gnueabihf: 1.33.0
+      lightningcss-linux-arm64-gnu: 1.33.0
+      lightningcss-linux-arm64-musl: 1.33.0
+      lightningcss-linux-x64-gnu: 1.33.0
+      lightningcss-linux-x64-musl: 1.33.0
+      lightningcss-win32-arm64-msvc: 1.33.0
+      lightningcss-win32-x64-msvc: 1.33.0
 
-  lilconfig@2.1.0: {}
-
-  lilconfig@3.1.2: {}
+  lilconfig@3.1.3: {}
 
   lines-and-columns@1.2.4: {}
 
-  listhen@1.9.0:
+  listhen@1.10.1(@parcel/watcher@2.6.0(patch_hash=705ce75ccea54337110c4d7fe0a8b421658ea0c23e1a77c1fa890a86041179da)):
     dependencies:
-      '@parcel/watcher': 2.5.0
-      '@parcel/watcher-wasm': 2.5.0
-      citty: 0.1.6
-      clipboardy: 4.0.0
-      consola: 3.2.3
-      crossws: 0.3.1
-      defu: 6.1.4
-      get-port-please: 3.1.2
-      h3: 1.15.5
+      '@parcel/watcher-wasm': 2.5.6
+      citty: 0.2.2
+      consola: 3.4.2
+      crossws: 0.4.10
+      defu: 6.1.7
+      get-port-please: 3.2.0
+      h3: 1.15.11
       http-shutdown: 1.2.2
-      jiti: 2.4.2
-      mlly: 1.7.3
-      node-forge: 1.3.1
-      pathe: 1.1.2
-      std-env: 3.7.0
-      ufo: 1.5.4
-      untun: 0.1.3
-      uqr: 0.1.2
+      jiti: 2.7.0
+      node-forge: 1.4.0
+      pathe: 2.0.3
+      std-env: 4.2.0
+      tinyclip: 0.1.15
+      ufo: 1.6.4
+      untun: 0.2.2
+      uqr: 0.1.3
+    optionalDependencies:
+      '@parcel/watcher': 2.6.0(patch_hash=705ce75ccea54337110c4d7fe0a8b421658ea0c23e1a77c1fa890a86041179da)
+    transitivePeerDependencies:
+      - srvx
 
   load-tsconfig@0.2.5: {}
 
-  loader-runner@4.3.1: {}
-
-  locate-path@6.0.0:
-    dependencies:
-      p-locate: 5.0.0
-
-  lodash.merge@4.6.2: {}
-
-  loose-envify@1.4.0:
-    dependencies:
-      js-tokens: 4.0.0
-
-  lru-cache@10.4.3: {}
-
-  lru-cache@5.1.1:
-    dependencies:
-      yallist: 3.1.1
-
   magic-string@0.30.21:
     dependencies:
       '@jridgewell/sourcemap-codec': 1.5.5
 
-  math-intrinsics@1.1.0: {}
+  magic-string@1.1.0:
+    dependencies:
+      '@jridgewell/sourcemap-codec': 1.5.5
 
   merge-stream@2.0.0: {}
 
@@ -8276,57 +5249,38 @@ snapshots:
       fast-equals: 5.4.0
       fast-stringify: 4.0.0
 
-  micromatch@4.0.7:
-    dependencies:
-      braces: 3.0.3
-      picomatch: 2.3.1
-
   micromatch@4.0.8:
     dependencies:
       braces: 3.0.3
-      picomatch: 2.3.1
+      picomatch: 2.3.2
 
-  mime-db@1.52.0: {}
-
-  mime-types@2.1.35:
-    dependencies:
-      mime-db: 1.52.0
-
-  mimic-fn@4.0.0: {}
+  mime-db@1.54.0: {}
 
   mini-svg-data-uri@1.4.4: {}
 
-  minimatch@3.1.2:
+  minimizer-webpack-plugin@5.6.1(esbuild@0.27.7)(postcss@8.5.25)(webpack@5.109.2(esbuild@0.27.7)(postcss@8.5.25)):
     dependencies:
-      brace-expansion: 1.1.11
+      '@jridgewell/trace-mapping': 0.3.31
+      jest-worker: 27.5.1
+      schema-utils: 4.3.3
+      terser: 5.48.0
+      webpack: 5.109.2(esbuild@0.27.7)(postcss@8.5.25)
+    optionalDependencies:
+      esbuild: 0.27.7
+      postcss: 8.5.25
 
-  minimatch@9.0.5:
+  mlly@1.8.2:
     dependencies:
-      brace-expansion: 2.0.1
-
-  minimist@1.2.8: {}
-
-  minipass@7.1.2: {}
-
-  mlly@1.7.3:
-    dependencies:
-      acorn: 8.14.0
-      pathe: 1.1.2
-      pkg-types: 1.3.0
-      ufo: 1.6.1
-
-  mlly@1.7.4:
-    dependencies:
-      acorn: 8.15.0
+      acorn: 8.16.0
       pathe: 2.0.3
-      pkg-types: 1.3.0
-      ufo: 1.6.1
+      pkg-types: 1.3.1
+      ufo: 1.6.4
 
   mri@1.2.0: {}
 
   ms@2.1.3: {}
 
-  mute-stream@2.0.0: {}
+  mute-stream@3.0.0: {}
 
   mz@2.7.0:
     dependencies:
@@ -8334,32 +5288,32 @@ snapshots:
       object-assign: 4.1.1
       thenify-all: 1.6.0
 
-  nanoid@3.3.11: {}
+  nanoid@3.3.12: {}
 
-  natural-compare@1.4.0: {}
+  nanoid@3.3.16: {}
 
   neo-async@2.6.2: {}
 
-  next@16.1.6(@babel/core@7.28.5)(@playwright/test@1.58.0)(react-dom@19.2.4(react@19.2.4))(react@19.2.4):
+  next@16.2.7(@playwright/test@1.62.1)(react-dom@19.2.7(react@19.2.7))(react@19.2.7):
     dependencies:
-      '@next/env': 16.1.6
+      '@next/env': 16.2.7
       '@swc/helpers': 0.5.15
-      baseline-browser-mapping: 2.9.11
-      caniuse-lite: 1.0.30001761
+      baseline-browser-mapping: 2.10.31
+      caniuse-lite: 1.0.30001793
       postcss: 8.4.31
-      react: 19.2.4
-      react-dom: 19.2.4(react@19.2.4)
-      styled-jsx: 5.1.6(@babel/core@7.28.5)(react@19.2.4)
+      react: 19.2.7
+      react-dom: 19.2.7(react@19.2.7)
+      styled-jsx: 5.1.6(react@19.2.7)
     optionalDependencies:
-      '@next/swc-darwin-arm64': 16.1.6
-      '@next/swc-darwin-x64': 16.1.6
-      '@next/swc-linux-arm64-gnu': 16.1.6
-      '@next/swc-linux-arm64-musl': 16.1.6
-      '@next/swc-linux-x64-gnu': 16.1.6
-      '@next/swc-linux-x64-musl': 16.1.6
-      '@next/swc-win32-arm64-msvc': 16.1.6
-      '@next/swc-win32-x64-msvc': 16.1.6
-      '@playwright/test': 1.58.0
+      '@next/swc-darwin-arm64': 16.2.7
+      '@next/swc-darwin-x64': 16.2.7
+      '@next/swc-linux-arm64-gnu': 16.2.7
+      '@next/swc-linux-arm64-musl': 16.2.7
+      '@next/swc-linux-x64-gnu': 16.2.7
+      '@next/swc-linux-x64-musl': 16.2.7
+      '@next/swc-win32-arm64-msvc': 16.2.7
+      '@next/swc-win32-x64-msvc': 16.2.7
+      '@playwright/test': 1.62.1
       sharp: 0.34.5
     transitivePeerDependencies:
       - '@babel/core'
@@ -8367,193 +5321,98 @@ snapshots:
 
   node-addon-api@7.1.1: {}
 
-  node-addon-api@8.2.2: {}
+  node-addon-api@8.7.0: {}
 
-  node-addon-api@8.3.0: {}
-
-  node-forge@1.3.1: {}
-
-  node-gyp-build@4.8.2: {}
+  node-forge@1.4.0: {}
 
   node-gyp-build@4.8.4: {}
 
   node-mock-http@1.0.4: {}
 
-  node-releases@2.0.27: {}
+  node-releases@2.0.46: {}
 
   normalize-path@3.0.0: {}
 
-  npm-run-path@5.3.0:
-    dependencies:
-      path-key: 4.0.0
-
   object-assign@4.1.1: {}
 
   object-hash@3.0.0: {}
 
-  object-inspect@1.13.4: {}
-
-  object-keys@1.1.1: {}
-
-  object.assign@4.1.7:
-    dependencies:
-      call-bind: 1.0.8
-      call-bound: 1.0.4
-      define-properties: 1.2.1
-      es-object-atoms: 1.1.1
-      has-symbols: 1.1.0
-      object-keys: 1.1.1
-
-  object.entries@1.1.8:
-    dependencies:
-      call-bind: 1.0.8
-      define-properties: 1.2.1
-      es-object-atoms: 1.1.1
-
-  object.fromentries@2.0.8:
-    dependencies:
-      call-bind: 1.0.8
-      define-properties: 1.2.1
-      es-abstract: 1.24.0
-      es-object-atoms: 1.1.1
-
-  object.groupby@1.0.3:
-    dependencies:
-      call-bind: 1.0.8
-      define-properties: 1.2.1
-      es-abstract: 1.24.0
-
-  object.values@1.2.1:
-    dependencies:
-      call-bind: 1.0.8
-      call-bound: 1.0.4
-      define-properties: 1.2.1
-      es-object-atoms: 1.1.1
-
   obug@2.1.1: {}
 
-  onetime@6.0.0:
-    dependencies:
-      mimic-fn: 4.0.0
-
-  optionator@0.9.4:
-    dependencies:
-      deep-is: 0.1.4
-      fast-levenshtein: 2.0.6
-      levn: 0.4.1
-      prelude-ls: 1.2.1
-      type-check: 0.4.0
-      word-wrap: 1.2.5
-
-  own-keys@1.0.1:
-    dependencies:
-      get-intrinsic: 1.3.0
-      object-keys: 1.1.1
-      safe-push-apply: 1.0.0
-
-  p-limit@3.1.0:
-    dependencies:
-      yocto-queue: 0.1.0
-
-  p-locate@5.0.0:
-    dependencies:
-      p-limit: 3.1.0
-
-  package-json-from-dist@1.0.1: {}
+  obug@2.1.4: {}
 
   package-up@5.0.0:
     dependencies:
-      find-up-simple: 1.0.0
-
-  parent-module@1.0.1:
-    dependencies:
-      callsites: 3.1.0
-
-  path-exists@4.0.0: {}
-
-  path-key@3.1.1: {}
-
-  path-key@4.0.0: {}
+      find-up-simple: 1.0.1
 
   path-parse@1.0.7: {}
 
-  path-scurry@1.11.1:
-    dependencies:
-      lru-cache: 10.4.3
-      minipass: 7.1.2
-
-  path-type@6.0.0: {}
-
-  pathe@1.1.2: {}
-
   pathe@2.0.3: {}
 
   picocolors@1.1.1: {}
 
-  picomatch@2.3.1: {}
+  picomatch@2.3.2: {}
 
-  picomatch@4.0.2: {}
+  picomatch@4.0.4: {}
 
-  picomatch@4.0.3: {}
+  picomatch@4.0.5: {}
 
   pify@2.3.0: {}
 
-  pirates@4.0.6: {}
+  pirates@4.0.7: {}
 
-  pkg-types@1.3.0:
+  pkg-types@1.3.1:
     dependencies:
       confbox: 0.1.8
-      mlly: 1.7.3
-      pathe: 1.1.2
+      mlly: 1.8.2
+      pathe: 2.0.3
 
-  playwright-core@1.58.0: {}
+  playwright-core@1.62.1: {}
 
-  playwright@1.58.0:
+  playwright@1.62.1:
     dependencies:
-      playwright-core: 1.58.0
+      playwright-core: 1.62.1
     optionalDependencies:
       fsevents: 2.3.2
 
-  possible-typed-array-names@1.0.0: {}
-
-  postcss-import@15.1.0(postcss@8.5.6):
+  postcss-import@15.1.0(postcss@8.5.16):
     dependencies:
-      postcss: 8.5.6
+      postcss: 8.5.16
       postcss-value-parser: 4.2.0
       read-cache: 1.0.0
-      resolve: 1.22.8
+      resolve: 1.22.12
 
-  postcss-import@16.1.1(postcss@8.5.6):
+  postcss-import@16.1.1(postcss@8.5.25):
     dependencies:
-      postcss: 8.5.6
+      postcss: 8.5.25
       postcss-value-parser: 4.2.0
       read-cache: 1.0.0
-      resolve: 1.22.8
+      resolve: 1.22.12
 
-  postcss-js@4.0.1(postcss@8.5.6):
+  postcss-js@4.1.0(postcss@8.5.16):
     dependencies:
       camelcase-css: 2.0.1
-      postcss: 8.5.6
+      postcss: 8.5.16
 
-  postcss-load-config@4.0.2(postcss@8.5.6):
+  postcss-load-config@6.0.1(jiti@1.21.7)(postcss@8.5.16)(yaml@2.9.0):
     dependencies:
-      lilconfig: 3.1.2
-      yaml: 2.6.0
+      lilconfig: 3.1.3
     optionalDependencies:
-      postcss: 8.5.6
+      jiti: 1.21.7
+      postcss: 8.5.16
+      yaml: 2.9.0
 
-  postcss-load-config@6.0.1(jiti@2.6.1)(postcss@8.5.6)(tsx@4.19.1)(yaml@2.6.0):
+  postcss-load-config@6.0.1(jiti@2.7.0)(postcss@8.5.25)(yaml@2.9.0):
     dependencies:
-      lilconfig: 3.1.2
+      lilconfig: 3.1.3
     optionalDependencies:
-      jiti: 2.6.1
-      postcss: 8.5.6
-      tsx: 4.19.1
-      yaml: 2.6.0
+      jiti: 2.7.0
+      postcss: 8.5.25
+      yaml: 2.9.0
 
-  postcss-nested@6.2.0(postcss@8.5.6):
+  postcss-nested@6.2.0(postcss@8.5.16):
     dependencies:
-      postcss: 8.5.6
+      postcss: 8.5.16
       postcss-selector-parser: 6.1.2
 
   postcss-selector-parser@6.0.10:
@@ -8566,7 +5425,7 @@ snapshots:
       cssesc: 3.0.0
       util-deprecate: 1.0.2
 
-  postcss-selector-parser@7.1.1:
+  postcss-selector-parser@7.1.4:
     dependencies:
       cssesc: 3.0.0
       util-deprecate: 1.0.2
@@ -8575,68 +5434,57 @@ snapshots:
 
   postcss@8.4.31:
     dependencies:
-      nanoid: 3.3.11
+      nanoid: 3.3.12
       picocolors: 1.1.1
       source-map-js: 1.2.1
 
-  postcss@8.5.6:
+  postcss@8.5.16:
     dependencies:
-      nanoid: 3.3.11
+      nanoid: 3.3.12
       picocolors: 1.1.1
       source-map-js: 1.2.1
 
-  postcss@8.5.8:
+  postcss@8.5.25:
     dependencies:
-      nanoid: 3.3.11
+      nanoid: 3.3.16
       picocolors: 1.1.1
       source-map-js: 1.2.1
 
-  prelude-ls@1.2.1: {}
-
   prettier-plugin-embed@0.5.1:
     dependencies:
-      '@types/estree': 1.0.8
-      dedent: 1.7.1
+      '@types/estree': 1.0.9
+      dedent: 1.7.2
       micro-memoize: 5.1.1
       package-up: 5.0.0
       tiny-jsonc: 1.0.2
-      type-fest: 5.3.1
+      type-fest: 5.6.0
     transitivePeerDependencies:
       - babel-plugin-macros
 
-  prettier-plugin-organize-imports@4.3.0(prettier@3.8.1)(typescript@5.5.4):
+  prettier-plugin-organize-imports@4.3.0(prettier@3.9.6)(typescript@5.9.3):
     dependencies:
-      prettier: 3.8.1
-      typescript: 5.5.4
+      prettier: 3.9.6
+      typescript: 5.9.3
 
-  prettier@3.8.1: {}
-
-  prop-types@15.8.1:
-    dependencies:
-      loose-envify: 1.4.0
-      object-assign: 4.1.1
-      react-is: 16.13.1
-
-  punycode@2.3.1: {}
+  prettier@3.9.6: {}
 
   queue-microtask@1.2.3: {}
 
   radix3@1.1.2: {}
 
-  randombytes@2.1.0:
+  react-dom@19.2.6(react@19.2.6):
     dependencies:
-      safe-buffer: 5.2.1
-
-  react-dom@19.2.4(react@19.2.4):
-    dependencies:
-      react: 19.2.4
+      react: 19.2.6
       scheduler: 0.27.0
 
-  react-is@16.13.1: {}
+  react-dom@19.2.7(react@19.2.7):
+    dependencies:
+      react: 19.2.7
+      scheduler: 0.27.0
 
-  react-refresh@0.18.0: {}
+  react@19.2.6: {}
 
-  react@19.2.4: {}
+  react@19.2.7: {}
 
   read-cache@1.0.0:
     dependencies:
@@ -8644,124 +5492,79 @@ snapshots:
 
   readdirp@3.6.0:
     dependencies:
-      picomatch: 2.3.1
+      picomatch: 2.3.2
 
-  readdirp@4.1.1: {}
-
-  reflect.getprototypeof@1.0.10:
-    dependencies:
-      call-bind: 1.0.8
-      define-properties: 1.2.1
-      es-abstract: 1.24.0
-      es-errors: 1.3.0
-      es-object-atoms: 1.1.1
-      get-intrinsic: 1.3.0
-      get-proto: 1.0.1
-      which-builtin-type: 1.2.1
-
-  regexp.prototype.flags@1.5.4:
-    dependencies:
-      call-bind: 1.0.8
-      define-properties: 1.2.1
-      es-errors: 1.3.0
-      get-proto: 1.0.1
-      gopd: 1.2.0
-      set-function-name: 2.0.2
+  readdirp@4.1.2: {}
 
   require-from-string@2.0.2: {}
 
-  resolve-from@4.0.0: {}
-
   resolve-from@5.0.0: {}
 
-  resolve-pkg-maps@1.0.0: {}
-
-  resolve@1.22.8:
+  resolve@1.22.12:
     dependencies:
-      is-core-module: 2.15.1
+      es-errors: 1.3.0
+      is-core-module: 2.16.2
       path-parse: 1.0.7
       supports-preserve-symlinks-flag: 1.0.0
 
-  resolve@2.0.0-next.5:
-    dependencies:
-      is-core-module: 2.16.1
-      path-parse: 1.0.7
-      supports-preserve-symlinks-flag: 1.0.0
+  reusify@1.1.0: {}
 
-  reusify@1.0.4: {}
-
-  rolldown@1.0.0-rc.9:
+  rolldown@1.2.1:
     dependencies:
-      '@oxc-project/types': 0.115.0
-      '@rolldown/pluginutils': 1.0.0-rc.9
+      '@oxc-project/types': 0.142.0
+      '@rolldown/pluginutils': 1.0.1
     optionalDependencies:
-      '@rolldown/binding-android-arm64': 1.0.0-rc.9
-      '@rolldown/binding-darwin-arm64': 1.0.0-rc.9
-      '@rolldown/binding-darwin-x64': 1.0.0-rc.9
-      '@rolldown/binding-freebsd-x64': 1.0.0-rc.9
-      '@rolldown/binding-linux-arm-gnueabihf': 1.0.0-rc.9
-      '@rolldown/binding-linux-arm64-gnu': 1.0.0-rc.9
-      '@rolldown/binding-linux-arm64-musl': 1.0.0-rc.9
-      '@rolldown/binding-linux-ppc64-gnu': 1.0.0-rc.9
-      '@rolldown/binding-linux-s390x-gnu': 1.0.0-rc.9
-      '@rolldown/binding-linux-x64-gnu': 1.0.0-rc.9
-      '@rolldown/binding-linux-x64-musl': 1.0.0-rc.9
-      '@rolldown/binding-openharmony-arm64': 1.0.0-rc.9
-      '@rolldown/binding-wasm32-wasi': 1.0.0-rc.9
-      '@rolldown/binding-win32-arm64-msvc': 1.0.0-rc.9
-      '@rolldown/binding-win32-x64-msvc': 1.0.0-rc.9
+      '@rolldown/binding-android-arm64': 1.2.1
+      '@rolldown/binding-darwin-arm64': 1.2.1
+      '@rolldown/binding-darwin-x64': 1.2.1
+      '@rolldown/binding-freebsd-x64': 1.2.1
+      '@rolldown/binding-linux-arm-gnueabihf': 1.2.1
+      '@rolldown/binding-linux-arm64-gnu': 1.2.1
+      '@rolldown/binding-linux-arm64-musl': 1.2.1
+      '@rolldown/binding-linux-ppc64-gnu': 1.2.1
+      '@rolldown/binding-linux-s390x-gnu': 1.2.1
+      '@rolldown/binding-linux-x64-gnu': 1.2.1
+      '@rolldown/binding-linux-x64-musl': 1.2.1
+      '@rolldown/binding-openharmony-arm64': 1.2.1
+      '@rolldown/binding-wasm32-wasi': 1.2.1
+      '@rolldown/binding-win32-arm64-msvc': 1.2.1
+      '@rolldown/binding-win32-x64-msvc': 1.2.1
 
-  rollup@4.44.0:
+  rollup@4.60.4:
     dependencies:
       '@types/estree': 1.0.8
     optionalDependencies:
-      '@rollup/rollup-android-arm-eabi': 4.44.0
-      '@rollup/rollup-android-arm64': 4.44.0
-      '@rollup/rollup-darwin-arm64': 4.44.0
-      '@rollup/rollup-darwin-x64': 4.44.0
-      '@rollup/rollup-freebsd-arm64': 4.44.0
-      '@rollup/rollup-freebsd-x64': 4.44.0
-      '@rollup/rollup-linux-arm-gnueabihf': 4.44.0
-      '@rollup/rollup-linux-arm-musleabihf': 4.44.0
-      '@rollup/rollup-linux-arm64-gnu': 4.44.0
-      '@rollup/rollup-linux-arm64-musl': 4.44.0
-      '@rollup/rollup-linux-loongarch64-gnu': 4.44.0
-      '@rollup/rollup-linux-powerpc64le-gnu': 4.44.0
-      '@rollup/rollup-linux-riscv64-gnu': 4.44.0
-      '@rollup/rollup-linux-riscv64-musl': 4.44.0
-      '@rollup/rollup-linux-s390x-gnu': 4.44.0
-      '@rollup/rollup-linux-x64-gnu': 4.44.0
-      '@rollup/rollup-linux-x64-musl': 4.44.0
-      '@rollup/rollup-win32-arm64-msvc': 4.44.0
-      '@rollup/rollup-win32-ia32-msvc': 4.44.0
-      '@rollup/rollup-win32-x64-msvc': 4.44.0
+      '@rollup/rollup-android-arm-eabi': 4.60.4
+      '@rollup/rollup-android-arm64': 4.60.4
+      '@rollup/rollup-darwin-arm64': 4.60.4
+      '@rollup/rollup-darwin-x64': 4.60.4
+      '@rollup/rollup-freebsd-arm64': 4.60.4
+      '@rollup/rollup-freebsd-x64': 4.60.4
+      '@rollup/rollup-linux-arm-gnueabihf': 4.60.4
+      '@rollup/rollup-linux-arm-musleabihf': 4.60.4
+      '@rollup/rollup-linux-arm64-gnu': 4.60.4
+      '@rollup/rollup-linux-arm64-musl': 4.60.4
+      '@rollup/rollup-linux-loong64-gnu': 4.60.4
+      '@rollup/rollup-linux-loong64-musl': 4.60.4
+      '@rollup/rollup-linux-ppc64-gnu': 4.60.4
+      '@rollup/rollup-linux-ppc64-musl': 4.60.4
+      '@rollup/rollup-linux-riscv64-gnu': 4.60.4
+      '@rollup/rollup-linux-riscv64-musl': 4.60.4
+      '@rollup/rollup-linux-s390x-gnu': 4.60.4
+      '@rollup/rollup-linux-x64-gnu': 4.60.4
+      '@rollup/rollup-linux-x64-musl': 4.60.4
+      '@rollup/rollup-openbsd-x64': 4.60.4
+      '@rollup/rollup-openharmony-arm64': 4.60.4
+      '@rollup/rollup-win32-arm64-msvc': 4.60.4
+      '@rollup/rollup-win32-ia32-msvc': 4.60.4
+      '@rollup/rollup-win32-x64-gnu': 4.60.4
+      '@rollup/rollup-win32-x64-msvc': 4.60.4
       fsevents: 2.3.3
 
   run-parallel@1.2.0:
     dependencies:
       queue-microtask: 1.2.3
 
-  safe-array-concat@1.1.3:
-    dependencies:
-      call-bind: 1.0.8
-      call-bound: 1.0.4
-      get-intrinsic: 1.3.0
-      has-symbols: 1.1.0
-      isarray: 2.0.5
-
-  safe-buffer@5.2.1: {}
-
-  safe-push-apply@1.0.0:
-    dependencies:
-      es-errors: 1.3.0
-      isarray: 2.0.5
-
-  safe-regex-test@1.1.0:
-    dependencies:
-      call-bound: 1.0.4
-      es-errors: 1.3.0
-      is-regex: 1.2.1
-
   safer-buffer@2.1.2: {}
 
   scheduler@0.27.0: {}
@@ -8769,47 +5572,17 @@ snapshots:
   schema-utils@4.3.3:
     dependencies:
       '@types/json-schema': 7.0.15
-      ajv: 8.17.1
-      ajv-formats: 2.1.1(ajv@8.17.1)
-      ajv-keywords: 5.1.0(ajv@8.17.1)
+      ajv: 8.20.0
+      ajv-formats: 2.1.1(ajv@8.20.0)
+      ajv-keywords: 5.1.0(ajv@8.20.0)
 
-  semver@6.3.1: {}
-
-  semver@7.7.3: {}
-
-  semver@7.7.4: {}
-
-  serialize-javascript@6.0.2:
-    dependencies:
-      randombytes: 2.1.0
-
-  set-function-length@1.2.2:
-    dependencies:
-      define-data-property: 1.1.4
-      es-errors: 1.3.0
-      function-bind: 1.1.2
-      get-intrinsic: 1.3.0
-      gopd: 1.2.0
-      has-property-descriptors: 1.0.2
-
-  set-function-name@2.0.2:
-    dependencies:
-      define-data-property: 1.1.4
-      es-errors: 1.3.0
-      functions-have-names: 1.2.3
-      has-property-descriptors: 1.0.2
-
-  set-proto@1.0.0:
-    dependencies:
-      dunder-proto: 1.0.1
-      es-errors: 1.3.0
-      es-object-atoms: 1.1.1
+  semver@7.8.5: {}
 
   sharp@0.34.5:
     dependencies:
-      '@img/colour': 1.0.0
+      '@img/colour': 1.1.0
       detect-libc: 2.1.2
-      semver: 7.7.4
+      semver: 7.8.5
     optionalDependencies:
       '@img/sharp-darwin-arm64': 0.34.5
       '@img/sharp-darwin-x64': 0.34.5
@@ -8837,40 +5610,6 @@ snapshots:
       '@img/sharp-win32-x64': 0.34.5
     optional: true
 
-  shebang-command@2.0.0:
-    dependencies:
-      shebang-regex: 3.0.0
-
-  shebang-regex@3.0.0: {}
-
-  side-channel-list@1.0.0:
-    dependencies:
-      es-errors: 1.3.0
-      object-inspect: 1.13.4
-
-  side-channel-map@1.0.1:
-    dependencies:
-      call-bound: 1.0.4
-      es-errors: 1.3.0
-      get-intrinsic: 1.3.0
-      object-inspect: 1.13.4
-
-  side-channel-weakmap@1.0.2:
-    dependencies:
-      call-bound: 1.0.4
-      es-errors: 1.3.0
-      get-intrinsic: 1.3.0
-      object-inspect: 1.13.4
-      side-channel-map: 1.0.1
-
-  side-channel@1.1.0:
-    dependencies:
-      es-errors: 1.3.0
-      object-inspect: 1.13.4
-      side-channel-list: 1.0.0
-      side-channel-map: 1.0.1
-      side-channel-weakmap: 1.0.2
-
   siginfo@2.0.0: {}
 
   signal-exit@4.1.0: {}
@@ -8890,122 +5629,34 @@ snapshots:
 
   stackback@0.0.2: {}
 
-  std-env@3.10.0: {}
+  std-env@4.1.0: {}
 
-  std-env@3.7.0: {}
+  std-env@4.2.0: {}
 
-  stop-iteration-iterator@1.1.0:
-    dependencies:
-      es-errors: 1.3.0
-      internal-slot: 1.1.0
-
-  string-width@4.2.3:
-    dependencies:
-      emoji-regex: 8.0.0
-      is-fullwidth-code-point: 3.0.0
-      strip-ansi: 6.0.1
-
-  string-width@5.1.2:
-    dependencies:
-      eastasianwidth: 0.2.0
-      emoji-regex: 9.2.2
-      strip-ansi: 7.1.0
-
-  string.prototype.includes@2.0.1:
-    dependencies:
-      call-bind: 1.0.8
-      define-properties: 1.2.1
-      es-abstract: 1.24.0
-
-  string.prototype.matchall@4.0.11:
-    dependencies:
-      call-bind: 1.0.8
-      define-properties: 1.2.1
-      es-abstract: 1.24.0
-      es-errors: 1.3.0
-      es-object-atoms: 1.1.1
-      get-intrinsic: 1.3.0
-      gopd: 1.2.0
-      has-symbols: 1.1.0
-      internal-slot: 1.1.0
-      regexp.prototype.flags: 1.5.4
-      set-function-name: 2.0.2
-      side-channel: 1.1.0
-
-  string.prototype.repeat@1.0.0:
-    dependencies:
-      define-properties: 1.2.1
-      es-abstract: 1.24.0
-
-  string.prototype.trim@1.2.10:
-    dependencies:
-      call-bind: 1.0.8
-      call-bound: 1.0.4
-      define-data-property: 1.1.4
-      define-properties: 1.2.1
-      es-abstract: 1.24.0
-      es-object-atoms: 1.1.1
-      has-property-descriptors: 1.0.2
-
-  string.prototype.trimend@1.0.9:
-    dependencies:
-      call-bind: 1.0.8
-      call-bound: 1.0.4
-      define-properties: 1.2.1
-      es-object-atoms: 1.1.1
-
-  string.prototype.trimstart@1.0.8:
-    dependencies:
-      call-bind: 1.0.8
-      define-properties: 1.2.1
-      es-object-atoms: 1.1.1
-
-  strip-ansi@6.0.1:
-    dependencies:
-      ansi-regex: 5.0.1
-
-  strip-ansi@7.1.0:
-    dependencies:
-      ansi-regex: 6.0.1
-
-  strip-bom@3.0.0: {}
-
-  strip-final-newline@3.0.0: {}
-
-  strip-json-comments@3.1.1: {}
-
-  styled-jsx@5.1.6(@babel/core@7.28.5)(react@19.2.4):
+  styled-jsx@5.1.6(react@19.2.7):
     dependencies:
       client-only: 0.0.1
-      react: 19.2.4
-    optionalDependencies:
-      '@babel/core': 7.28.5
+      react: 19.2.7
 
-  sucrase@3.35.0:
+  sucrase@3.35.1:
     dependencies:
-      '@jridgewell/gen-mapping': 0.3.5
+      '@jridgewell/gen-mapping': 0.3.13
       commander: 4.1.1
-      glob: 10.4.5
       lines-and-columns: 1.2.4
       mz: 2.7.0
-      pirates: 4.0.6
+      pirates: 4.0.7
+      tinyglobby: 0.2.16
       ts-interface-checker: 0.1.13
 
-  supports-color@7.2.0:
-    dependencies:
-      has-flag: 4.0.0
-
   supports-color@8.1.1:
     dependencies:
       has-flag: 4.0.0
 
   supports-preserve-symlinks-flag@1.0.0: {}
 
-  system-architecture@0.1.0: {}
-
   tagged-tag@1.0.0: {}
 
-  tailwindcss@3.4.14:
+  tailwindcss@3.4.19(yaml@2.9.0):
     dependencies:
       '@alloc/quick-lru': 5.2.0
       arg: 5.0.2
@@ -9015,40 +5666,30 @@ snapshots:
       fast-glob: 3.3.3
       glob-parent: 6.0.2
       is-glob: 4.0.3
-      jiti: 1.21.6
-      lilconfig: 2.1.0
-      micromatch: 4.0.7
+      jiti: 1.21.7
+      lilconfig: 3.1.3
+      micromatch: 4.0.8
       normalize-path: 3.0.0
       object-hash: 3.0.0
       picocolors: 1.1.1
-      postcss: 8.5.6
-      postcss-import: 15.1.0(postcss@8.5.6)
-      postcss-js: 4.0.1(postcss@8.5.6)
-      postcss-load-config: 4.0.2(postcss@8.5.6)
-      postcss-nested: 6.2.0(postcss@8.5.6)
+      postcss: 8.5.16
+      postcss-import: 15.1.0(postcss@8.5.16)
+      postcss-js: 4.1.0(postcss@8.5.16)
+      postcss-load-config: 6.0.1(jiti@1.21.7)(postcss@8.5.16)(yaml@2.9.0)
+      postcss-nested: 6.2.0(postcss@8.5.16)
       postcss-selector-parser: 6.1.2
-      resolve: 1.22.8
-      sucrase: 3.35.0
+      resolve: 1.22.12
+      sucrase: 3.35.1
     transitivePeerDependencies:
-      - ts-node
+      - tsx
+      - yaml
 
-  tapable@2.3.0: {}
+  tapable@2.3.3: {}
 
-  terser-webpack-plugin@5.3.16(esbuild@0.27.0)(webpack@5.104.1(esbuild@0.27.0)):
+  terser@5.48.0:
     dependencies:
-      '@jridgewell/trace-mapping': 0.3.29
-      jest-worker: 27.5.1
-      schema-utils: 4.3.3
-      serialize-javascript: 6.0.2
-      terser: 5.31.6
-      webpack: 5.104.1(esbuild@0.27.0)
-    optionalDependencies:
-      esbuild: 0.27.0
-
-  terser@5.31.6:
-    dependencies:
-      '@jridgewell/source-map': 0.3.6
-      acorn: 8.15.0
+      '@jridgewell/source-map': 0.3.11
+      acorn: 8.16.0
       commander: 2.20.3
       source-map-support: 0.5.21
 
@@ -9064,21 +5705,23 @@ snapshots:
 
   tinybench@2.9.0: {}
 
+  tinyclip@0.1.15: {}
+
   tinyexec@0.3.2: {}
 
-  tinyexec@1.0.2: {}
+  tinyexec@1.1.2: {}
 
-  tinyglobby@0.2.14:
+  tinyglobby@0.2.16:
     dependencies:
-      fdir: 6.4.6(picomatch@4.0.2)
-      picomatch: 4.0.2
+      fdir: 6.5.0(picomatch@4.0.4)
+      picomatch: 4.0.4
 
-  tinyglobby@0.2.15:
+  tinyglobby@0.2.17:
     dependencies:
-      fdir: 6.5.0(picomatch@4.0.3)
-      picomatch: 4.0.3
+      fdir: 6.5.0(picomatch@4.0.5)
+      picomatch: 4.0.5
 
-  tinyrainbow@3.0.3: {}
+  tinyrainbow@3.1.0: {}
 
   to-regex-range@5.0.1:
     dependencies:
@@ -9086,399 +5729,203 @@ snapshots:
 
   tree-kill@1.2.2: {}
 
-  tree-sitter-javascript@0.23.1(tree-sitter@0.22.4):
+  tree-sitter-javascript@0.23.1(tree-sitter@0.25.1):
     dependencies:
-      node-addon-api: 8.2.2
-      node-gyp-build: 4.8.2
-    optionalDependencies:
-      tree-sitter: 0.22.4
-
-  tree-sitter-typescript@0.23.2(tree-sitter@0.22.4):
-    dependencies:
-      node-addon-api: 8.2.2
-      node-gyp-build: 4.8.2
-      tree-sitter-javascript: 0.23.1(tree-sitter@0.22.4)
-    optionalDependencies:
-      tree-sitter: 0.22.4
-
-  tree-sitter@0.22.4:
-    dependencies:
-      node-addon-api: 8.3.0
+      node-addon-api: 8.7.0
       node-gyp-build: 4.8.4
+    optionalDependencies:
+      tree-sitter: 0.25.1
 
-  ts-api-utils@2.1.0(typescript@5.9.3):
+  tree-sitter-typescript@0.23.2(tree-sitter@0.25.1):
     dependencies:
-      typescript: 5.9.3
+      node-addon-api: 8.7.0
+      node-gyp-build: 4.8.4
+      tree-sitter-javascript: 0.23.1(tree-sitter@0.25.1)
+    optionalDependencies:
+      tree-sitter: 0.25.1
+
+  tree-sitter@0.25.1:
+    dependencies:
+      node-addon-api: 8.7.0
+      node-gyp-build: 4.8.4
 
   ts-interface-checker@0.1.13: {}
 
-  tsconfig-paths@3.15.0:
-    dependencies:
-      '@types/json5': 0.0.29
-      json5: 1.0.2
-      minimist: 1.2.8
-      strip-bom: 3.0.0
-
   tslib@2.8.1: {}
 
-  tsup@8.5.1(jiti@2.6.1)(postcss@8.5.6)(tsx@4.19.1)(typescript@5.5.4)(yaml@2.6.0):
+  tsup@8.5.1(jiti@2.7.0)(postcss@8.5.25)(typescript@5.9.3)(yaml@2.9.0):
     dependencies:
-      bundle-require: 5.1.0(esbuild@0.27.0)
+      bundle-require: 5.1.0(esbuild@0.27.7)
       cac: 6.7.14
       chokidar: 4.0.3
-      consola: 3.4.0
+      consola: 3.4.2
       debug: 4.4.3
-      esbuild: 0.27.0
+      esbuild: 0.27.7
       fix-dts-default-cjs-exports: 1.0.1
       joycon: 3.1.1
       picocolors: 1.1.1
-      postcss-load-config: 6.0.1(jiti@2.6.1)(postcss@8.5.6)(tsx@4.19.1)(yaml@2.6.0)
+      postcss-load-config: 6.0.1(jiti@2.7.0)(postcss@8.5.25)(yaml@2.9.0)
       resolve-from: 5.0.0
-      rollup: 4.44.0
+      rollup: 4.60.4
       source-map: 0.7.6
-      sucrase: 3.35.0
+      sucrase: 3.35.1
       tinyexec: 0.3.2
-      tinyglobby: 0.2.14
+      tinyglobby: 0.2.16
       tree-kill: 1.2.2
     optionalDependencies:
-      postcss: 8.5.6
-      typescript: 5.5.4
+      postcss: 8.5.25
+      typescript: 5.9.3
     transitivePeerDependencies:
       - jiti
       - supports-color
       - tsx
       - yaml
 
-  tsx@4.19.1:
-    dependencies:
-      esbuild: 0.23.1
-      get-tsconfig: 4.10.0
+  turbo@2.10.8:
     optionalDependencies:
-      fsevents: 2.3.3
-    optional: true
-
-  turbo-darwin-64@2.7.6:
-    optional: true
-
-  turbo-darwin-arm64@2.7.6:
-    optional: true
-
-  turbo-linux-64@2.7.6:
-    optional: true
-
-  turbo-linux-arm64@2.7.6:
-    optional: true
-
-  turbo-windows-64@2.7.6:
-    optional: true
-
-  turbo-windows-arm64@2.7.6:
-    optional: true
-
-  turbo@2.7.6:
-    optionalDependencies:
-      turbo-darwin-64: 2.7.6
-      turbo-darwin-arm64: 2.7.6
-      turbo-linux-64: 2.7.6
-      turbo-linux-arm64: 2.7.6
-      turbo-windows-64: 2.7.6
-      turbo-windows-arm64: 2.7.6
+      '@turbo/darwin-64': 2.10.8
+      '@turbo/darwin-arm64': 2.10.8
+      '@turbo/linux-64': 2.10.8
+      '@turbo/linux-arm64': 2.10.8
+      '@turbo/windows-64': 2.10.8
+      '@turbo/windows-arm64': 2.10.8
 
   typanion@3.14.0: {}
 
-  type-check@0.4.0:
-    dependencies:
-      prelude-ls: 1.2.1
-
-  type-fest@5.3.1:
+  type-fest@5.6.0:
     dependencies:
       tagged-tag: 1.0.0
 
-  typed-array-buffer@1.0.3:
-    dependencies:
-      call-bound: 1.0.4
-      es-errors: 1.3.0
-      is-typed-array: 1.1.15
-
-  typed-array-byte-length@1.0.3:
-    dependencies:
-      call-bind: 1.0.8
-      for-each: 0.3.5
-      gopd: 1.2.0
-      has-proto: 1.2.0
-      is-typed-array: 1.1.15
-
-  typed-array-byte-offset@1.0.4:
-    dependencies:
-      available-typed-arrays: 1.0.7
-      call-bind: 1.0.8
-      for-each: 0.3.5
-      gopd: 1.2.0
-      has-proto: 1.2.0
-      is-typed-array: 1.1.15
-      reflect.getprototypeof: 1.0.10
-
-  typed-array-length@1.0.7:
-    dependencies:
-      call-bind: 1.0.8
-      for-each: 0.3.5
-      gopd: 1.2.0
-      is-typed-array: 1.1.15
-      possible-typed-array-names: 1.0.0
-      reflect.getprototypeof: 1.0.10
-
-  typescript-eslint@8.47.0(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3):
-    dependencies:
-      '@typescript-eslint/eslint-plugin': 8.47.0(@typescript-eslint/parser@8.47.0(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3))(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3)
-      '@typescript-eslint/parser': 8.47.0(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3)
-      '@typescript-eslint/typescript-estree': 8.47.0(typescript@5.9.3)
-      '@typescript-eslint/utils': 8.47.0(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3)
-      eslint: 9.39.2(jiti@2.6.1)
-      typescript: 5.9.3
-    transitivePeerDependencies:
-      - supports-color
-
-  typescript@5.5.4: {}
-
   typescript@5.9.3: {}
 
-  ufo@1.5.4: {}
+  typescript@6.0.3: {}
 
-  ufo@1.6.1: {}
-
-  ufo@1.6.3: {}
-
-  unbox-primitive@1.1.0:
-    dependencies:
-      call-bound: 1.0.4
-      has-bigints: 1.0.2
-      has-symbols: 1.1.0
-      which-boxed-primitive: 1.1.1
+  ufo@1.6.4: {}
 
   uncrypto@0.1.3: {}
 
   undici-types@6.21.0: {}
 
-  unicorn-magic@0.3.0: {}
+  undici-types@7.24.6: {}
 
-  universal-user-agent@7.0.2: {}
+  unicorn-magic@0.4.0: {}
 
-  untun@0.1.3:
+  universal-user-agent@7.0.3: {}
+
+  untun@0.2.2: {}
+
+  update-browserslist-db@1.2.3(browserslist@4.28.2):
     dependencies:
-      citty: 0.1.6
-      consola: 3.2.3
-      pathe: 1.1.2
-
-  update-browserslist-db@1.1.4(browserslist@4.28.0):
-    dependencies:
-      browserslist: 4.28.0
+      browserslist: 4.28.2
       escalade: 3.2.0
       picocolors: 1.1.1
 
-  update-browserslist-db@1.2.3(browserslist@4.28.1):
-    dependencies:
-      browserslist: 4.28.1
-      escalade: 3.2.0
-      picocolors: 1.1.1
-
-  uqr@0.1.2: {}
-
-  uri-js@4.4.1:
-    dependencies:
-      punycode: 2.3.1
+  uqr@0.1.3: {}
 
   util-deprecate@1.0.2: {}
 
-  vite@7.0.0(@types/node@20.19.1)(jiti@2.6.1)(lightningcss@1.32.0(patch_hash=mz3chiqe2jbihxa25xumd4ogum))(terser@5.31.6)(tsx@4.19.1)(yaml@2.6.0):
+  vite@8.2.0(@types/node@22.20.1)(esbuild@0.27.7)(jiti@2.7.0)(terser@5.48.0)(yaml@2.9.0):
     dependencies:
-      esbuild: 0.25.0
-      fdir: 6.5.0(picomatch@4.0.3)
-      picomatch: 4.0.3
-      postcss: 8.5.6
-      rollup: 4.44.0
-      tinyglobby: 0.2.15
+      lightningcss: 1.33.0(patch_hash=1d4a8800d60d13d42887b88b3a86576df4b451670308145fb432ec8abbf40930)
+      picomatch: 4.0.5
+      postcss: 8.5.25
+      rolldown: 1.2.1
+      tinyglobby: 0.2.17
     optionalDependencies:
-      '@types/node': 20.19.1
+      '@types/node': 22.20.1
+      esbuild: 0.27.7
       fsevents: 2.3.3
-      jiti: 2.6.1
-      lightningcss: 1.32.0(patch_hash=mz3chiqe2jbihxa25xumd4ogum)
-      terser: 5.31.6
-      tsx: 4.19.1
-      yaml: 2.6.0
+      jiti: 2.7.0
+      terser: 5.48.0
+      yaml: 2.9.0
 
-  vite@8.0.0(@types/node@20.19.1)(esbuild@0.27.0)(jiti@2.6.1)(terser@5.31.6)(tsx@4.19.1)(yaml@2.6.0):
+  vite@8.2.0(@types/node@25.9.1)(esbuild@0.27.7)(jiti@2.7.0)(terser@5.48.0)(yaml@2.9.0):
     dependencies:
-      '@oxc-project/runtime': 0.115.0
-      lightningcss: 1.32.0(patch_hash=mz3chiqe2jbihxa25xumd4ogum)
-      picomatch: 4.0.3
-      postcss: 8.5.8
-      rolldown: 1.0.0-rc.9
-      tinyglobby: 0.2.15
+      lightningcss: 1.33.0(patch_hash=1d4a8800d60d13d42887b88b3a86576df4b451670308145fb432ec8abbf40930)
+      picomatch: 4.0.5
+      postcss: 8.5.25
+      rolldown: 1.2.1
+      tinyglobby: 0.2.17
     optionalDependencies:
-      '@types/node': 20.19.1
-      esbuild: 0.27.0
+      '@types/node': 25.9.1
+      esbuild: 0.27.7
       fsevents: 2.3.3
-      jiti: 2.6.1
-      terser: 5.31.6
-      tsx: 4.19.1
-      yaml: 2.6.0
+      jiti: 2.7.0
+      terser: 5.48.0
+      yaml: 2.9.0
 
-  vitest@4.0.18(@types/node@20.19.1)(jiti@2.6.1)(lightningcss@1.32.0(patch_hash=mz3chiqe2jbihxa25xumd4ogum))(terser@5.31.6)(tsx@4.19.1)(yaml@2.6.0):
+  vitest@4.1.10(@types/node@22.20.1)(vite@8.2.0(@types/node@22.20.1)(esbuild@0.27.7)(jiti@2.7.0)(terser@5.48.0)(yaml@2.9.0)):
     dependencies:
-      '@vitest/expect': 4.0.18
-      '@vitest/mocker': 4.0.18(vite@7.0.0(@types/node@20.19.1)(jiti@2.6.1)(lightningcss@1.32.0(patch_hash=mz3chiqe2jbihxa25xumd4ogum))(terser@5.31.6)(tsx@4.19.1)(yaml@2.6.0))
-      '@vitest/pretty-format': 4.0.18
-      '@vitest/runner': 4.0.18
-      '@vitest/snapshot': 4.0.18
-      '@vitest/spy': 4.0.18
-      '@vitest/utils': 4.0.18
-      es-module-lexer: 1.7.0
-      expect-type: 1.2.2
+      '@vitest/expect': 4.1.10
+      '@vitest/mocker': 4.1.10(vite@8.2.0(@types/node@22.20.1)(esbuild@0.27.7)(jiti@2.7.0)(terser@5.48.0)(yaml@2.9.0))
+      '@vitest/pretty-format': 4.1.10
+      '@vitest/runner': 4.1.10
+      '@vitest/snapshot': 4.1.10
+      '@vitest/spy': 4.1.10
+      '@vitest/utils': 4.1.10
+      es-module-lexer: 2.1.0
+      expect-type: 1.3.0
       magic-string: 0.30.21
       obug: 2.1.1
       pathe: 2.0.3
-      picomatch: 4.0.3
-      std-env: 3.10.0
+      picomatch: 4.0.4
+      std-env: 4.1.0
       tinybench: 2.9.0
-      tinyexec: 1.0.2
-      tinyglobby: 0.2.15
-      tinyrainbow: 3.0.3
-      vite: 7.0.0(@types/node@20.19.1)(jiti@2.6.1)(lightningcss@1.32.0(patch_hash=mz3chiqe2jbihxa25xumd4ogum))(terser@5.31.6)(tsx@4.19.1)(yaml@2.6.0)
+      tinyexec: 1.1.2
+      tinyglobby: 0.2.17
+      tinyrainbow: 3.1.0
+      vite: 8.2.0(@types/node@22.20.1)(esbuild@0.27.7)(jiti@2.7.0)(terser@5.48.0)(yaml@2.9.0)
       why-is-node-running: 2.3.0
     optionalDependencies:
-      '@types/node': 20.19.1
+      '@types/node': 22.20.1
     transitivePeerDependencies:
-      - jiti
-      - less
-      - lightningcss
       - msw
-      - sass
-      - sass-embedded
-      - stylus
-      - sugarss
-      - terser
-      - tsx
-      - yaml
 
-  watchpack@2.5.1:
+  watchpack@2.5.2:
     dependencies:
-      glob-to-regexp: 0.4.1
       graceful-fs: 4.2.11
 
-  webpack-sources@3.3.3: {}
+  webpack-sources@3.5.1: {}
 
-  webpack@5.104.1(esbuild@0.27.0):
+  webpack@5.109.2(esbuild@0.27.7)(postcss@8.5.25):
     dependencies:
-      '@types/eslint-scope': 3.7.7
-      '@types/estree': 1.0.8
+      '@types/estree': 1.0.9
       '@types/json-schema': 7.0.15
       '@webassemblyjs/ast': 1.14.1
       '@webassemblyjs/wasm-edit': 1.14.1
       '@webassemblyjs/wasm-parser': 1.14.1
-      acorn: 8.15.0
-      acorn-import-phases: 1.0.4(acorn@8.15.0)
-      browserslist: 4.28.1
+      acorn: 8.16.0
+      browserslist: 4.28.2
       chrome-trace-event: 1.0.4
-      enhanced-resolve: 5.19.0
-      es-module-lexer: 2.0.0
+      enhanced-resolve: 5.24.5
+      es-module-lexer: 2.1.0
       eslint-scope: 5.1.1
       events: 3.3.0
-      glob-to-regexp: 0.4.1
       graceful-fs: 4.2.11
-      json-parse-even-better-errors: 2.3.1
-      loader-runner: 4.3.1
-      mime-types: 2.1.35
+      mime-db: 1.54.0
+      minimizer-webpack-plugin: 5.6.1(esbuild@0.27.7)(postcss@8.5.25)(webpack@5.109.2(esbuild@0.27.7)(postcss@8.5.25))
       neo-async: 2.6.2
       schema-utils: 4.3.3
-      tapable: 2.3.0
-      terser-webpack-plugin: 5.3.16(esbuild@0.27.0)(webpack@5.104.1(esbuild@0.27.0))
-      watchpack: 2.5.1
-      webpack-sources: 3.3.3
+      tapable: 2.3.3
+      watchpack: 2.5.2
+      webpack-sources: 3.5.1
     transitivePeerDependencies:
+      - '@minify-html/node'
       - '@swc/core'
+      - '@swc/css'
+      - '@swc/html'
+      - clean-css
+      - cssnano
+      - csso
       - esbuild
+      - html-minifier-terser
+      - lightningcss
+      - postcss
       - uglify-js
 
-  which-boxed-primitive@1.1.1:
-    dependencies:
-      is-bigint: 1.1.0
-      is-boolean-object: 1.2.2
-      is-number-object: 1.1.1
-      is-string: 1.1.1
-      is-symbol: 1.1.1
-
-  which-builtin-type@1.2.1:
-    dependencies:
-      call-bound: 1.0.4
-      function.prototype.name: 1.1.8
-      has-tostringtag: 1.0.2
-      is-async-function: 2.0.0
-      is-date-object: 1.1.0
-      is-finalizationregistry: 1.1.1
-      is-generator-function: 1.0.10
-      is-regex: 1.2.1
-      is-weakref: 1.1.1
-      isarray: 2.0.5
-      which-boxed-primitive: 1.1.1
-      which-collection: 1.0.2
-      which-typed-array: 1.1.19
-
-  which-collection@1.0.2:
-    dependencies:
-      is-map: 2.0.3
-      is-set: 2.0.3
-      is-weakmap: 2.0.2
-      is-weakset: 2.0.3
-
-  which-typed-array@1.1.19:
-    dependencies:
-      available-typed-arrays: 1.0.7
-      call-bind: 1.0.8
-      call-bound: 1.0.4
-      for-each: 0.3.5
-      get-proto: 1.0.1
-      gopd: 1.2.0
-      has-tostringtag: 1.0.2
-
-  which@2.0.2:
-    dependencies:
-      isexe: 2.0.0
-
   why-is-node-running@2.3.0:
     dependencies:
       siginfo: 2.0.0
       stackback: 0.0.2
 
-  word-wrap@1.2.5: {}
-
-  wrap-ansi@6.2.0:
-    dependencies:
-      ansi-styles: 4.3.0
-      string-width: 4.2.3
-      strip-ansi: 6.0.1
-
-  wrap-ansi@7.0.0:
-    dependencies:
-      ansi-styles: 4.3.0
-      string-width: 4.2.3
-      strip-ansi: 6.0.1
-
-  wrap-ansi@8.1.0:
-    dependencies:
-      ansi-styles: 6.2.1
-      string-width: 5.1.2
-      strip-ansi: 7.1.0
-
-  yallist@3.1.1: {}
-
-  yaml@2.6.0: {}
-
-  yocto-queue@0.1.0: {}
-
-  yoctocolors-cjs@2.1.3: {}
-
-  zod-validation-error@4.0.2(zod@4.1.12):
-    dependencies:
-      zod: 4.1.12
-
-  zod@4.1.12: {}
+  yaml@2.9.0: {}
diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml
index 3f6cb5d7f..bcddef126 100644
--- a/pnpm-workspace.yaml
+++ b/pnpm-workspace.yaml
@@ -5,16 +5,50 @@ packages:
   - 'playgrounds/*'
   - 'integrations'
 
+patchedDependencies:
+  '@napi-rs/cli@3.7.4': patches/@napi-rs__cli@3.7.4.patch
+  '@parcel/watcher@2.6.0': patches/@parcel__watcher@2.6.0.patch
+  lightningcss@1.33.0: patches/lightningcss@1.33.0.patch
+
 catalog:
-  '@types/node': ^20.19.0
-  prettier: 3.8.1
-  vite: ^8.0.0
-  webpack: ^5
-  lightningcss: 1.32.0
-  lightningcss-darwin-arm64: 1.32.0
-  lightningcss-darwin-x64: 1.32.0
-  lightningcss-linux-arm64-gnu: 1.32.0
-  lightningcss-linux-arm64-musl: 1.32.0
-  lightningcss-linux-x64-gnu: 1.32.0
-  lightningcss-linux-x64-musl: 1.32.0
-  lightningcss-win32-x64-msvc: 1.32.0
+  '@types/node': 22.20.1
+  dedent: 1.7.2
+  enhanced-resolve: ^5.24.5
+  lightningcss-darwin-arm64: 1.33.0
+  lightningcss-darwin-x64: 1.33.0
+  lightningcss-linux-arm64-gnu: 1.33.0
+  lightningcss-linux-arm64-musl: 1.33.0
+  lightningcss-linux-x64-gnu: 1.33.0
+  lightningcss-linux-x64-musl: 1.33.0
+  lightningcss-win32-x64-msvc: 1.33.0
+  lightningcss: 1.33.0
+  '@parcel/watcher-darwin-arm64': 2.6.0
+  '@parcel/watcher-darwin-x64': 2.6.0
+  '@parcel/watcher-linux-arm64-glibc': 2.6.0
+  '@parcel/watcher-linux-arm64-musl': 2.6.0
+  '@parcel/watcher-linux-x64-glibc': 2.6.0
+  '@parcel/watcher-linux-x64-musl': 2.6.0
+  '@parcel/watcher-win32-x64': 2.6.0
+  '@parcel/watcher': 2.6.0
+  postcss: ^8.5.25
+  prettier: 3.9.6
+  vite: ^8.2.0
+  webpack: ^5.109.2
+
+onlyBuiltDependencies:
+  - '@parcel/watcher'
+  - bun
+  - esbuild
+  - sharp
+  - tree-sitter
+  - tree-sitter-javascript
+  - tree-sitter-typescript
+
+allowBuilds:
+  '@parcel/watcher': true
+  bun: true
+  esbuild: true
+  sharp: true
+  tree-sitter: true
+  tree-sitter-javascript: true
+  tree-sitter-typescript: true
diff --git a/rust-toolchain.toml b/rust-toolchain.toml
index aaba1588e..f92020c65 100644
--- a/rust-toolchain.toml
+++ b/rust-toolchain.toml
@@ -1,3 +1,3 @@
 [toolchain]
-channel = "1.85.0"
+channel = "1.95.0"
 profile = "default"
diff --git a/scripts/pack-packages.mjs b/scripts/pack-packages.mjs
index a3d34da6f..2b0b9f15d 100644
--- a/scripts/pack-packages.mjs
+++ b/scripts/pack-packages.mjs
@@ -21,18 +21,25 @@ let workspaces = new Map()
 for (let path of paths) {
   let pkg = await fs.readFile(path, 'utf8').then(JSON.parse)
   if (pkg.private) continue
-  workspaces.set(pkg.name, { version: pkg.version ?? '', dir: dirname(path) })
+  workspaces.set(pkg.name, {
+    version: pkg.version ?? '',
+    dir: dirname(path),
+    hasBundledDependencies: pkg.bundledDependencies?.length > 0 ?? false,
+  })
 }
 
 // Clean dist folder
 await fs.rm(path.join(root, 'dist'), { recursive: true, force: true })
 
 Promise.all(
-  [...workspaces.entries()].map(async ([name, { dir }]) => {
+  [...workspaces.entries()].map(async ([name, { dir, hasBundledDependencies }]) => {
     function pack() {
       return new Promise((resolve) => {
+        // `bundledDependencies` can only be packed with the hoisted node linker
+        // since pnpm v10. We opt into it for those packages only, instead of
+        // changing the node linker for the entire workspace.
         exec(
-          `pnpm pack --pack-gzip-level=0 --pack-destination="${path.join(root, 'dist').replace(/\\/g, '\\\\')}"`,
+          `pnpm pack --pack-gzip-level=0 --pack-destination="${path.join(root, 'dist').replace(/\\/g, '\\\\')}"${hasBundledDependencies ? ' --config.node-linker=hoisted' : ''}`,
           { cwd: dir },
           (err, stdout, stderr) => {
             if (err) {
diff --git a/turbo.json b/turbo.json
index 87eba2732..c48410b29 100644
--- a/turbo.json
+++ b/turbo.json
@@ -1,5 +1,5 @@
 {
-  "$schema": "https://turbo.build/schema.json",
+  "$schema": "https://v2-10-8.turborepo.dev/schema.json",
   "ui": "tui",
   "tasks": {
     "@tailwindcss/oxide#build": {
diff --git a/vitest.config.ts b/vitest.config.mts
similarity index 100%
rename from vitest.config.ts
rename to vitest.config.mts