Browser Mode: toHaveStyle() should support partial matching of values

Clear and concise description of the problem

When asserting the styles of an HTML element in Vitest Browser Mode with toHaveStyle(), the CSS property values can only be matched exactly. When using CSS Modules, certain values like an animation name include a hash and can't therefore be verified directly:

expect.element(screen.getByRole("img")).toHaveStyle({
  animationName: "spin", // doesn't work with CSS modules
});

Suggested solution

toHaveStyle() should either support RegEx or expect.*

expect.element(...).toHaveStyle({ animationName: expect.stringContaining("spin") });
expect.element(...).toHaveStyle({ animationName: /spin/ });

Alternative

It's possible to import the CSS module in the test and compare against the hashed animation name, but I would like to avoid importing CSS file in tests.

Additional context

Discussion on Discord

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that requests the same feature to avoid creating a duplicate.

Start by locating the Browser Mode implementation and tests for toHaveStyle(), then trace how property values are compared. Add coverage for partial matching with expect.stringContaining("spin") and /spin/, and consider the work done when these cases pass without requiring CSS module imports.