fix: support require css modules #1501
Conversation
Walkthrough此次更改增强了 Changes
Assessment against linked issues
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (invoked as PR comments)
Additionally, you can add CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
Outside diff range, codebase verification and nitpick comments (1)
examples/dead-simple/foo/foo.js (1)
3-4: 当前的 Webpack 配置不支持直接加载 LESS 模块在
webpack.config.js中没有找到处理 LESS 文件的 loader 配置。因此，require('./example.module.less')语法无法正常工作。建议在 Webpack 配置中添加less-loader来正确处理 LESS 文件。
- 请在
webpack.config.js中添加less-loader以支持 LESS 文件的导入。Analysis chain
确认 require 语法的正确性
确保
require('./example.module.less')能够正确加载 LESS 模块并返回预期的数据。Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Description: Verify if the `require` statement correctly imports the LESS module. # Test: Check for the presence of the LESS module and its content. fd 'example.module.less' --exec catLength of output: 594
Script:
#!/bin/bash # Check for `webpack` or similar build configuration files that might handle LESS imports fd 'webpack.config.js' fd 'babel.config.js' fd 'package.json' --exec catLength of output: 23776
Script:
#!/bin/bash # Check the webpack configuration for LESS handling cat examples/tree-shaking/webpack.config.jsLength of output: 443
Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Files selected for processing (4)
- crates/mako/src/build/transform.rs (1 hunks)
- crates/mako/src/visitors/virtual_css_modules.rs (4 hunks)
- examples/dead-simple/foo/example.module.less (1 hunks)
- examples/dead-simple/foo/foo.js (1 hunks)
Files skipped from review due to trivial changes (1)
- examples/dead-simple/foo/example.module.less
Additional comments not posted (7)
examples/dead-simple/foo/foo.js (1)
4-4: 日志输出添加合理添加的
console.log('data', data);有助于调试和验证导入的数据。crates/mako/src/visitors/virtual_css_modules.rs (4)
1-9: 新增字段 unresolved_mark 合理在
VirtualCSSModules结构体中添加unresolved_mark字段有助于识别 CommonJS 和动态导入语句。
53-54: 确保 visit_mut_children_with 的调用确保在处理
CallExpr节点后，调用visit_mut_children_with以继续遍历子节点。
Line range hint
84-119:
测试用例覆盖合理新增的测试用例有效验证了对不同导入语句的处理，确保了功能的正确性。
32-54: 检查 visit_mut_call_expr 方法的逻辑请确认
visit_mut_call_expr方法正确识别和处理 CSS 模块路径。Verification successful
visit_mut_call_expr方法正确处理 CSS 模块路径经过验证，
visit_mut_call_expr方法中处理 CSS 模块路径的逻辑是正确的。该方法能够识别 CommonJS 的 require 或动态导入，并检查路径是否为 CSS 模块路径。
- 确认了
is_css_modules_path和is_css_path的使用来识别 CSS 模块路径。- 在识别为 CSS 模块路径后，调用
self.replace_source进行处理。Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Description: Verify the logic in `visit_mut_call_expr` for handling CSS module paths. # Test: Check for the presence of logic handling in the method. ast-grep --lang rust --pattern $'fn visit_mut_call_expr(&mut self, expr: &mut CallExpr) { $$$ if commonjs_require || dynamic_import { $$$ if is_css_modules { $$$ } $$$ } $$$ }'Length of output: 207
Script:
#!/bin/bash # Refined search for the `visit_mut_call_expr` function and its logic related to CSS module handling. # Search for the function definition and its logic related to CSS module handling. ast-grep --lang rust --pattern $'fn visit_mut_call_expr(&mut self, expr: &mut CallExpr) { $$$ let commonjs_require = $_; let dynamic_import = $_; if commonjs_require || dynamic_import { let args = $_; if args.len() == 1 && let Some(arg) = args.first_mut() && arg.spread.is_none() && let Some(lit) = arg.expr.as_mut_lit() && let Lit::Str(ref mut str) = lit { let ref_ = str.value.as_ref(); let is_css_modules = is_css_modules_path(ref_) || (self.auto_css_modules && is_css_path(ref_)); if is_css_modules { self.replace_source(str); } } } $$$ }'Length of output: 2656
crates/mako/src/build/transform.rs (2)
144-144: 一致使用 unresolved_mark 合理在
VirtualCSSModules和ContextModuleVisitor中一致使用unresolved_mark增强了处理未解析模块的能力。
144-144: 验证 unresolved_mark 在 transform 中的集成请确认
unresolved_mark在转换过程中的集成能正确影响模块的处理。Verification successful
确认
unresolved_mark在转换过程中的集成
unresolved_mark在crates/mako/src/build/transform.rs文件中被多次使用于visitors.push的上下文中，显示其在转换过程中被正确集成和使用。这表明它在不同的访问者实现中被一致地应用。
crates/mako/src/build/transform.rs:
- 声明：第 55 行
- 使用：第 130-134 行、142-145 行、155-159 行
这些实例表明
unresolved_mark在模块处理中的集成是正确的。Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Description: Verify the integration of `unresolved_mark` in the transform process. # Test: Check the instantiation and usage of `unresolved_mark` in the transform function. ast-grep --lang rust --pattern $'let unresolved_mark = $_; $$$; visitors.push(Box::new(VirtualCSSModules { $$$ unresolved_mark, $$$ })); $$$; visitors.push(Box::new(ContextModuleVisitor { unresolved_mark })); 'Length of output: 822
Script:
#!/bin/bash # Search for the declaration of `unresolved_mark` in the Rust codebase. ast-grep --lang rust --pattern 'let unresolved_mark = $_;' # Search for the usage of `unresolved_mark` in the context of `visitors.push` in the Rust codebase. ast-grep --lang rust --pattern 'visitors.push(Box::new($_ { $$$ unresolved_mark, $$$ }));'Length of output: 2353
There was a problem hiding this comment.
Actionable comments posted: 0
Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Files selected for processing (1)
- crates/mako/src/visitors/virtual_css_modules.rs (4 hunks)
Additional comments not posted (5)
crates/mako/src/visitors/virtual_css_modules.rs (5)
6-9: 新增字段unresolved_mark
VirtualCSSModules结构体中新增了unresolved_mark字段，这可能用于处理未解析的标识符，特别是在新的visit_mut_call_expr方法中。确保此字段在所有相关逻辑中正确使用。
32-54: 处理CallExpr节点的逻辑
visit_mut_call_expr方法专注于处理 CommonJSrequire和动态导入语句。逻辑上检查了调用表达式的参数，并替换了 CSS 模块的源路径。然而，目前不支持auto_css_modules的处理。确保在未来版本中明确此限制或进行相应扩展。
Line range hint
55-61:
确认replace_source方法的实现
replace_source方法通过在源字符串后附加?asmodule来修改 CSS 模块路径，确保路径正确转换。实现逻辑简单明了。
83-99: 测试用例覆盖全面
test_css_modules_virtual中的测试用例涵盖了import和require语句的各种场景，验证了新逻辑的预期行为。测试确保了 CSS 模块的正确处理。
111-119: 验证auto_css_modules的测试逻辑
test_css_modules_virtual_when_auto_css_modules的测试用例确保在启用auto_css_modules标志时，路径被正确修改。测试逻辑有效并验证了该标志的影响。
|
@bytemain dead-simple 下的改动 revert 下 |
|
auto css module 对 require("./xx.css") 不需要生效。 |
There was a problem hiding this comment.
Actionable comments posted: 0
Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Files selected for processing (1)
- crates/mako/src/visitors/virtual_css_modules.rs (4 hunks)
Files skipped from review as they are similar to previous changes (1)
- crates/mako/src/visitors/virtual_css_modules.rs
| if commonjs_require || dynamic_import { | ||
| let args = &mut expr.args; | ||
| if args.len() == 1 | ||
| && let Some(arg) = args.first_mut() |
There was a problem hiding this comment.
看上去可以借助 if let 模式匹配简化代码，类似：
mako/crates/mako/src/visitors/env_replacer.rs
Lines 84 to 92 in e6bf32c
close: #1500
require 和 import 语句暂时不支持 auto_css_module 的这个配置，做起来有点麻烦。
Summary by CodeRabbit
新功能
unresolved_mark参数，以增强VirtualCSSModules和ContextModuleVisitor的功能。visit_mut_call_expr方法，以便更智能地处理 CommonJS 和动态导入的 CSS 模块。样式
.debug_watch_variable类，用于调试界面的样式，使变量表现形式更加清晰可辨。其他
foo.js中添加了对 LESS 模块的导入，增强了文件的功能并提供了数据验证的方式。