Restrict VanillaExtract plugin to playroom's source .css.ts files only

[AntoLepejian]

Problem

Playroom uses VanillaExtract to extract and process CSS files, specifically .css.ts files. While the webpack loader rule correctly limits the scope of this loader on playroom's own source code, the plugin itself isn't scoped, and as such, it sends up processing every single .css.[t|j]s file it can find, including those from the consumer's codebase, node_modules, etc..

This problematic, and leads to a whole range of issues, making Playroom unusable if your UI Library has .css.[j|t]s files, or even if one of your dependencies has it.

I haven't found any mention of the plugin being scoped to the entire project by default, as their documentation page is non-exhaustive, however I can confirm this to be the case.

Solution

Correctly scope the plugin to Playroom's own .css.ts files only.

[changeset-bot]

🦋 Changeset detected

Latest commit: f48d80d

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

This PR includes changesets to release 1 package

Name	Type
playroom	Patch

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

[AntoLepejian]

@askoufis I have one more here :)

[askoufis]

We've never had any issues using playroom alongside a library that contains .css.ts files. However, this change seems sensible regardless of that fact. Thanks.