feat: add vanilla-extract support with Parcel 2.10.0 upgrade

[flex-minhyeok]

Summary

This PR adds support for vanilla-extract CSS-in-TypeScript library to Plasmo, enabling developers to write type-safe, zero-runtime CSS.

Changes

1. Custom Parcel Transformer (@plasmohq/parcel-transformer-vanilla-extract)

Created a new transformer package that:

• Uses official @vanilla-extract/integration for CSS compilation
• Processes .css.ts files at build time
• Generates scoped CSS with unique, hashed class names
• Returns TypeScript modules with class name mappings

Implementation: core/parcel-transformer-vanilla-extract/

2. Parcel Upgrade (2.9.3 → 2.10.0)

Upgraded Parcel to version 2.10.0 to enable node: protocol support, which is required for vanilla-extract dependencies.

Why this was necessary:

• vanilla-extract's dependency @vanilla-extract/integration uses mlly
• mlly imports Node.js builtins with the node: protocol (e.g., require('node:module'))
• Parcel 2.9.3 does not properly support node: prefix in module resolution
• Parcel 2.10.0 added this support via PR #9244 and PR #9250

See PARCEL_UPGRADE.md for detailed documentation of the upgrade rationale.

Changed packages:

• All @parcel/* packages upgraded from 2.9.3 to 2.10.0

3. Example: with-vanilla-extract

Added a complete example demonstrating:

• Type-safe CSS-in-TypeScript with vanilla-extract
• Custom .parcelrc configuration
• Styled popup component with hover effects
• Comprehensive documentation

Example structure:

examples/with-vanilla-extract/
├── .parcelrc           # Extends Plasmo config with transformer
├── package.json        # Dependencies
├── popup.tsx           # React component using styles
├── styles.css.ts       # Type-safe CSS definitions
├── tsconfig.json       # TypeScript config
├── .gitignore
└── README.md          # Documentation & requirements

4. Core Configuration Update

Modified core/parcel-config/index.json to include the vanilla-extract transformer in the default Plasmo configuration:

{
  "transformers": {
    "*.css.ts": ["@plasmohq/parcel-transformer-vanilla-extract"]
  }
}

5. Example

with-vanilla-extract example PR: PlasmoHQ/examples#86

Breaking Changes

None. The Parcel upgrade is backward compatible and all existing examples continue to work.

Related

• vanilla-extract documentation: https://vanilla-extract.style/
• Parcel 2.10.0 release: https://github.com/parcel-bundler/parcel/releases/tag/v2.10.0
• PR #9244: Support node: prefix for CJS dependencies parcel-bundler/parcel#9244
• PR #9250: node: should always be a builtin parcel-bundler/parcel#9250
• vanilla-extract Parcel support discussion: Parcel support? vanilla-extract-css/vanilla-extract#455

[flex-minhyeok]

@louisgv plz review this PR!

[flex-minhyeok]

@louisgv I'd appreciate it if you could review this PR.