Replace CSS comment extraction with data URL imports for Turbopack compatibility

[jantimon]

Currently, next-yak extracts CSS from tagged template literals through our SWC plugin, which adds CSS as comments in the output JS file. A custom webpack loader then extracts these comments and processes them through the CSS module system. This works but relies on webpack-specific syntax (!=!) and a complex extraction mechanism.

Turbopack is planning to support CSS modules via direct data URL imports. We should investigate replacing the comment extraction approach with data URL imports to simplify our architecture and prepare for Turbopack compatibility:

Instead of generating:

/*YAK Extracted CSS: .button { color: red; } */

import styles from "./Component.yak.module.css!=!./Component?./Component.yak.module.css";

We would generate:

import styles from "data:text/css+module,.button{color:red}";

This would eliminate our custom comment serialization and parsing steps, use standard module loading, and align with Turbopack's architecture. So the SWC plugin would generate these imports directly with one single compile step

Some important considerations:

• Our cross-file dependency resolution would need reworking
• Data URL encoding must properly handle CSS escaping
• We need to verify Next.js's CSS module system works with this approach

This might solve #112 and could help us in future as this format is supported by webpack turbopack rspack and vite

[jantimon]

It looks like webpack supports it but next.js does not (at least by now) - turbopack will probably add better support soon:
vercel/next.js#78096