Skip to content

Turbopack: support for CSS Modules in Data URLs #78040

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Apr 11, 2025

Conversation

jantimon
Copy link
Contributor

@jantimon jantimon commented Apr 10, 2025

For Contributors

Adding a feature

  • Implements turbopack support for CSS Modules in Data URLs
  • Adds test cases to verify functionality

What?

This PR adds support for CSS Modules in Data URLs by adding the text/css+module content type to the module rules that handle CSS modules

Why?

This enables new use cases for CSS Modules without requiring physical files, which is particularly useful for tooling that needs to generate CSS Modules programmatically

How?

The implementation extends existing rule conditions in the Turbopack module options to recognize the "text/css+module" content type, following the same pattern used for regular CSS in data URLs. Test cases have been added to verify both regular and base64-encoded CSS module data URLs work correctly

@ijjk
Copy link
Member

ijjk commented Apr 10, 2025

Allow CI Workflow Run

  • approve CI run for commit: f861fdb

Note: this should only be enabled once the PR is ready to go and can only be enabled by a maintainer

Sorry, something went wrong.

@sokra sokra changed the title turbopack: support for CSS Modules in Data URLs Turbopack: support for CSS Modules in Data URLs Apr 11, 2025
@mischnic mischnic enabled auto-merge (squash) April 11, 2025 09:09
@ijjk
Copy link
Member

ijjk commented Apr 11, 2025

Tests Passed

@mischnic mischnic merged commit aebf26f into vercel:canary Apr 11, 2025
207 of 212 checks passed
@jantimon jantimon deleted the data-url-css-modules branch April 11, 2025 12:24
@dlehmhus
Copy link
Contributor

@jantimon / @sokra are CSS Modules in Data URLs supposed to work in server components or is it just a client component thing? For server components I can see the classname getting applied to the element, but the CSS is not being loaded.

Copy link
Member

sokra commented Apr 12, 2025

It's supposed to work, but I guess we don't test this case yet and it might be broken...

@dlehmhus
Copy link
Contributor

@sokra thanks for the quick reply. I created a bugticket for that issue: #78096.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

5 participants