CSS modules #17958
CSS modules #17958
Conversation
|
Updated 10:18 PM PT - Mar 6th, 2025
❌ @zackradisic, your commit fb8ac4e has 1 failures in
🧪 try this PR locally: bunx bun-pr 17958 |
RiskyMH
added
the
release-notes
| @@ -462,14 +490,14 @@ pub fn hash(allocator: Allocator, comptime fmt: []const u8, args: anytype, at_st | |||
| var h_bytes: [4]u8 = undefined; | |||
| std.mem.writeInt(u32, &h_bytes, h, .little); | |||
|
|
|||
| const encode_len = bun.base64.encodeLen(h_bytes[0..]); | |||
| const encode_len = bun.base64.simdutfEncodeLenUrlSafe(h_bytes[0..].len); | |||
There was a problem hiding this comment.
did you check the code
the length here is usually done like len * 3 + 2 or something like that - it's not iterating through the contents so the simdutf special-casing is unlikely to be helpful
There was a problem hiding this comment.
we need to use this encode Len function because we use another encoding function which uses characters that look nicer in CSS source code
src/css/css_modules.zig
Outdated
| if (project_root) |root| { | ||
| if (bun.path.Platform.auto.isAbsolute(root)) { | ||
| alloced = true; | ||
| // TODO: should we use this allocator or something else | ||
| const relative_to_root = bun.path.relative(root, path); |
There was a problem hiding this comment.
we are calling bun.path.relative twice here
| @@ -138,71 +147,17 @@ pub const CssModule = struct { | |||
| } | |||
|
|
|||
| pub fn handleComposes( | |||
There was a problem hiding this comment.
Is this code supposed to do nothing?
src/css/properties/css_modules.zig
Outdated
| @@ -37,10 +37,12 @@ pub const Composes = struct { | |||
| /// Where the class names are composed from. | |||
| from: ?Specifier, | |||
| /// The source location of the `composes` property. | |||
| loc: Location, | |||
| loc: bun.logger.Loc, | |||
| loc2: Location, | |||
There was a problem hiding this comment.
Can you give a more descriptive name than "loc2"?
src/js_printer.zig
Outdated
| part.value.loc, | ||
| ), | ||
| .e_dot => brk: { | ||
| // TODO: handle this here |
There was a problem hiding this comment.
what does this mean?
There was a problem hiding this comment.
if I do styles["123456"] will it work
|
|
||
| ### Browser Compatibility | ||
|
|
||
| By default, Bun's CSS bundler targets the following browsers: |
There was a problem hiding this comment.
Show how this can be configured from Bun.build
Mention how we derive the list from the popular browserlist package and how we support that (right?)
There was a problem hiding this comment.
currently there is no api to configure it
| @@ -218,6 +218,9 @@ export default { | |||
| page("bundler/html", "Bundle frontend & static sites", { | |||
| description: `Zero-config HTML bundler for single-page apps and multi-page apps. Automatic bundling, TailwindCSS plugins, TypeScript, JSX, React support, and incredibly fast builds`, | |||
| }), | |||
| page("bundler/css", "Bundle, transpile, and minify CSS", { | |||
| description: `Production ready CSS bundler with support for modern CSS features, CSS modules, and more.`, | |||
There was a problem hiding this comment.
"Production ready"
Are you sure you want to word it that strongly right now?
src/css/properties/css_modules.zig
Outdated
| /// The referenced name comes from a source index (used during bundling). | ||
| source_index: u32, | ||
| // source_index: u32, |
There was a problem hiding this comment.
If you meant to keep this commented out, then please delete it so we don't confuse it in the future.
src/css/properties/css_modules.zig
Outdated
| file: []const u8, | ||
| /// | ||
| /// Is an import record index | ||
| file: u32, |
There was a problem hiding this comment.
Please call this import_record_index instead of file so that we are consistent with the rest of the codebase.
What does this PR do?
This implements support for CSS modules in Bun's bundlers.
The following features are supported right now:
.module.csssuffix are parsed as CSS modulescomposescomposes: foocomposes: foo from './foo.module.css'composes: foo from global:localor:globalFixes #16916