[Bug]: Trace Viewer doesn't surface `all: unset` styles correctly

[bmsuseluda]

Version

1.45.0

Steps to reproduce

1. Clone the repo https://github.com/bmsuseluda/playwright-ct-ui/tree/main
2. run pnpm install
3. run pnpm test-ct --ui
4. start test ButtonWithStyledComponents -> Button.spec.tsx -> Should render a Button with styled components

Expected behavior

The Button component should render with border-radius and padding, like in the generated snapshot.

Actual behavior

The css attributes are ordered incorrectly and therefore border-radius and padding will be overwritten by several unset statements.

Additional context

Please have a look at the Readme.md where i described the problem in more detail.

Environment

System:
    OS: Linux 5.15 Manjaro Linux
    CPU: (8) x64 11th Gen Intel(R) Core(TM) i7-1165G7 @ 2.80GHz
    Memory: 10.03 GB / 31.08 GB
    Container: Yes
  Binaries:
    Node: 18.16.0 - ~/.nvm/versions/node/v18.16.0/bin/node
    npm: 9.5.1 - ~/.nvm/versions/node/v18.16.0/bin/npm
    pnpm: 8.15.3 - ~/.nvm/versions/node/v18.16.0/bin/pnpm
  Languages:
    Bash: 5.2.26 - /usr/bin/bash
  npmPackages:
    @playwright/experimental-ct-react: ^1.45.0 => 1.45.0

[mxschmitt]

Upstream bug: https://issues.chromium.org/u/1/issues/41416124