fix(vite): Fix CSS replacement in Vite HMR

[brijeshb42]

Also remove dependency on @rollup/plugin-utils

Motivation

This PR fixes an issue related to Vite plugin originally opened on Pigment CSS repo.

Summary

This change avoids the usage of css content slug in the filename and keeps the css filename unique just by using the path of the original js/ts file and using wyw-in-js prefix before the extension.
Using slug had an issue where if you removed a css property from your css definition, it would get applied in a new style tag during dev mode. Thus also keeping the old css in place which would result in overall css being applied from both old and new css content.

The fix instead keeps using the same filename regardless of the content and just pings the FE to reload the latest CSS content which it replaces in the existing style tag instead of adding a new one.

I also removed the explicit dependency of @rollup/plugin-utils since vite already re-exports those.

Test plan

Tested locally using this repo for the bug reproduction and fix.

[changeset-bot]

🦋 Changeset detected

Latest commit: 2e4e227

The changes in this PR will be included in the next version bump.

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR