fix: support require css modules

crates/mako/src/build/transform.rs

@@ -141,6 +141,7 @@ impl Transform {
                     )));
                     visitors.push(Box::new(VirtualCSSModules {
                         auto_css_modules: context.config.auto_css_modules,
+                        unresolved_mark,
                     }));
                     // TODO: move ContextModuleVisitor out of plugin
                     visitors.push(Box::new(ContextModuleVisitor { unresolved_mark }));

crates/mako/src/visitors/virtual_css_modules.rs

@@ -1,8 +1,12 @@
-use swc_core::ecma::ast::{ImportDecl, Str};
+use swc_core::common::Mark;
+use swc_core::ecma::ast::{CallExpr, ImportDecl, Lit, Str};
 use swc_core::ecma::visit::{VisitMut, VisitMutWith};
 
+use crate::ast::utils::{is_commonjs_require, is_dynamic_import};
+
 pub struct VirtualCSSModules {
     pub auto_css_modules: bool,
+    pub unresolved_mark: Mark,
 }
 
 fn is_css_modules_path(path: &str) -> bool {
@@ -24,6 +28,30 @@ impl VisitMut for VirtualCSSModules {
         }
         import_decl.visit_mut_children_with(self);
     }
+
+    fn visit_mut_call_expr(&mut self, expr: &mut CallExpr) {
+        let commonjs_require = is_commonjs_require(expr, &self.unresolved_mark);
+        let dynamic_import = is_dynamic_import(expr);
+
+        if commonjs_require || dynamic_import {
+            let args = &mut expr.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);
+                }
+            }
+        }
+
+        expr.visit_mut_children_with(self);
+    }
 }
 
 impl VirtualCSSModules {
@@ -53,6 +81,22 @@ mod tests {
             run(r#"import "./foo.css";"#, false),
             r#"import "./foo.css";"#
         );
+        assert_eq!(
+            run(r#"import("./bar.module.css");"#, false),
+            r#"import("./bar.module.css?asmodule");"#
+        );
+        assert_eq!(
+            run(r#"import("./bar.css");"#, false),
+            r#"import("./bar.css");"#
+        );
+        assert_eq!(
+            run(r#"require("./baz.module.css");"#, false),
+            r#"require("./baz.module.css?asmodule");"#
+        );
+        assert_eq!(
+            run(r#"require("./baz.css");"#, false),
+            r#"require("./baz.css");"#
+        );
     }
 
     #[test]
@@ -65,13 +109,26 @@ mod tests {
             run(r#"import "./foo.css";"#, true),
             r#"import "./foo.css";"#
         );
+        assert_eq!(
+            run(r#"import("./bar.css");"#, true),
+            r#"import("./bar.css");"#
+        );
+        assert_eq!(
+            run(r#"require("./baz.css");"#, true),
+            r#"require("./baz.css");"#
+        );
     }
 
     fn run(js_code: &str, auto_css_modules: bool) -> String {
         let mut test_utils = TestUtils::gen_js_ast(js_code);
         let ast = test_utils.ast.js_mut();
+        let unresolved_mark = ast.unresolved_mark;
+
         GLOBALS.set(&test_utils.context.meta.script.globals, || {
-            let mut visitor = VirtualCSSModules { auto_css_modules };
+            let mut visitor = VirtualCSSModules {
+                auto_css_modules,
+                unresolved_mark,
+            };
             ast.ast.visit_mut_with(&mut visitor);
         });
         test_utils.js_ast_to_code()

examples/dead-simple/foo/example.module.less

@@ -0,0 +1,30 @@
+.debug_watch_variable {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    overflow: visible;
+    &.value {
+      color: var(--debugTokenExpression-value);
+    }
+
+    &.name {
+      color: var(--debugTokenExpression-name);
+    }
+
+    &.error {
+      color: var(--debugTokenExpression-error);
+    }
+
+    &.number {
+      color: var(--debugTokenExpression-number);
+    }
+
+    &.boolean {
+      color: var(--debugTokenExpression-boolean);
+    }
+
+    &.string {
+      color: var(--debugTokenExpression-string);
+    }
+  }
+

examples/dead-simple/foo/foo.js

@@ -1 +1,4 @@
 console.log('foo/foo');
+
+const data = require('./example.module.less');
+console.log('data', data);