fix(css-module): dynamic import css module

crates/mako/src/transformers/transform_dep_replacer.rs

@@ -14,7 +14,7 @@ use crate::module::{Dependency, ModuleId};
 use crate::plugins::css::is_url_ignored;
 use crate::plugins::javascript::{is_commonjs_require, is_dynamic_import};
 use crate::task::parse_path;
-use crate::transformers::transform_virtual_css_modules::is_css_path;
+use crate::transformers::transform_virtual_css_modules::{is_css_modules_path, is_css_path};
 
 pub struct DepReplacer<'a> {
     pub module_id: &'a ModuleId,
@@ -111,45 +111,35 @@ impl VisitMut for DepReplacer<'_> {
                         }
                     }
 
-                    let is_dep_replaceable = if let Some((_, raw_id)) =
-                        self.to_replace.resolved.get(&source_string)
-                    {
+                    if let Some((_, raw_id)) = self.to_replace.resolved.get(&source_string) {
                         let file_request = parse_path(raw_id).unwrap();
-                        is_css_path(&file_request.path)
-                            && (file_request.query.is_empty() || file_request.has_query("modules"))
-                    } else {
-                        false
-                    };
-
-                    if is_dep_replaceable {
-                        // remove `require('./xxx.css');`
-                        if is_commonjs_require_flag {
-                            *expr = Expr::Lit(quote_str!("").into());
-                            return;
-                        } else {
-                            // `import('./xxx.css')` 中的 css 模块会被拆分到单独的 chunk, 这里需要改为加载 css chunk
-                            let module_graph = self.context.module_graph.read().unwrap();
-                            let dep_module_id = module_graph
-                                .get_dependency_module_by_source(self.module_id, &source_string);
+                        let will_replace = is_css_path(&file_request.path)
+                            && (file_request.query.is_empty() || file_request.has_query("modules"));
+
+                        if will_replace {
+                            // remove `require('./xxx.css');`
+                            if is_commonjs_require_flag {
+                                *expr = Expr::Lit(quote_str!("").into());
+                                return;
+                            }
 
-                            if let Some(dep_module_id) = dep_module_id {
+                            // replace `import("./xxx.css")`
+                            let is_css_module =
+                                file_request.has_query("asmodule") || is_css_modules_path(raw_id);
+                            if !is_css_module {
                                 let chunk_graph = self.context.chunk_graph.read().unwrap();
                                 let chunk =
-                                    chunk_graph.get_chunk_for_module(&dep_module_id.clone());
+                                    chunk_graph.get_chunk_for_module(&raw_id.clone().into());
 
                                 if let Some(chunk) = chunk {
-                                    let chunk_id = chunk.id.id.clone();
-                                    // `import('./xxx.css')` => `__mako_require__.ensure('./xxx.css')`
-                                    *expr = member_expr!(DUMMY_SP, __mako_require__.ensure)
-                                        .as_call(DUMMY_SP, vec![quote_str!(chunk_id).as_arg()]);
+                                    *expr = Self::dynamic_css_import_replacement(&chunk.id.id);
                                     return;
                                 } else {
                                     *expr = Expr::Lit(quote_str!("").into());
                                     return;
                                 }
                             } else {
-                                *expr = Expr::Lit(quote_str!("").into());
-                                return;
+                                // dynamic css module import will be handled by DynamicImport transformer
                             }
                         }
                     }
@@ -179,6 +169,17 @@ impl VisitMut for DepReplacer<'_> {
 }
 
 impl DepReplacer<'_> {
+    /*
+        import('./xxx.css')
+          ||
+          \/
+        __mako_require__.ensure('chunk_id')
+    */
+    fn dynamic_css_import_replacement(chunk_id: &str) -> Expr {
+        member_expr!(DUMMY_SP, __mako_require__.ensure)
+            .as_call(DUMMY_SP, vec![quote_str!(chunk_id.to_owned()).as_arg()])
+    }
+
     fn replace_source(&mut self, source: &mut Str) {
         let to_replace =
             if let Some(replacement) = self.to_replace.resolved.get(&source.value.to_string()) {

crates/mako/src/transformers/transform_virtual_css_modules.rs

@@ -5,6 +5,8 @@ use mako_core::regex::Regex;
 use mako_core::swc_common::Mark;
 use mako_core::swc_ecma_ast::{ImportDecl, Str};
 use mako_core::swc_ecma_visit::{VisitMut, VisitMutWith};
+use swc_core::ecma::ast::{CallExpr, ExprOrSpread, Lit};
+use swc_core::ecma::utils::{quote_str, ExprFactory};
 
 use crate::compiler::Context;
 
@@ -18,7 +20,7 @@ lazy_static! {
     static ref CSS_PATH_REGEX: Regex = Regex::new(r#"\.(css|less)$"#).unwrap();
 }
 
-fn is_css_modules_path(path: &str) -> bool {
+pub fn is_css_modules_path(path: &str) -> bool {
     CSS_MODULES_PATH_REGEX.is_match(path)
 }
 
@@ -27,6 +29,21 @@ pub fn is_css_path(path: &str) -> bool {
 }
 
 impl VisitMut for VirtualCSSModules<'_> {
+    fn visit_mut_call_expr(&mut self, n: &mut CallExpr) {
+        if n.args.len() == 1 {
+            if n.callee.is_import() {
+                self.replace_first_arg(&mut n.args);
+            } else if let Some(call_expr) = n.callee.as_expr()
+                && let Some(callee_ident) = call_expr.as_ident()
+                && callee_ident.span.ctxt.outer() == self.unresolved_mark
+                && callee_ident.sym.as_str() == "require"
+            {
+                self.replace_first_arg(&mut n.args);
+            }
+        }
+
+        n.visit_mut_children_with(self);
+    }
     fn visit_mut_import_decl(&mut self, import_decl: &mut ImportDecl) {
         if is_css_modules_path(&import_decl.src.value)
             || (self.context.config.auto_css_modules
@@ -40,10 +57,101 @@ impl VisitMut for VirtualCSSModules<'_> {
 }
 
 impl VirtualCSSModules<'_> {
+    fn replace_first_arg(&mut self, args: &mut [ExprOrSpread]) {
+        if let Some(first_arg) = args.get_mut(0) {
+            if let Some(lit) = first_arg.expr.as_lit()
+                && let Lit::Str(import_str) = lit
+            {
+                let origin_import_str = import_str.value.as_str();
+
+                if is_css_modules_path(origin_import_str) {
+                    let replaced = format!("{}?asmodule", origin_import_str);
+                    *first_arg = quote_str!(replaced).as_arg();
+                }
+            }
+        }
+    }
+
     fn replace_source(&mut self, source: &mut Str) {
         let to_replace = format!("{}?asmodule", &source.value.to_string());
         let span = source.span;
         *source = Str::from(to_replace);
         source.span = span;
     }
 }
+
+#[cfg(test)]
+mod tests {
+    use std::sync::Arc;
+
+    use swc_core::common::GLOBALS;
+    use swc_core::ecma::transforms::base::resolver;
+    use swc_core::ecma::visit::VisitMutWith;
+
+    use crate::ast::{build_js_ast, js_ast_to_code};
+    use crate::compiler::Context;
+    use crate::transformers::transform_virtual_css_modules::VirtualCSSModules;
+
+    #[test]
+    fn test_dynamic_import_css_module() {
+        let code = act_replace(
+            r#"
+            import('./styles.module.css').then();
+            "#,
+        );
+
+        assert_eq!(
+            code.trim(),
+            r#"import("./styles.module.css?asmodule").then();"#
+        )
+    }
+
+    #[test]
+    fn test_dynamic_import_non_css_module() {
+        let code = act_replace(
+            r#"
+            import("./styles.css").then();
+            "#,
+        );
+
+        assert_eq!(code.trim(), r#"import("./styles.css").then();"#)
+    }
+
+    #[test]
+    fn test_require_css_module() {
+        let code = act_replace(r#"require("./style.module.css")"#);
+
+        assert_eq!(code.trim(), r#"require("./style.module.css?asmodule");"#)
+    }
+
+    #[test]
+    fn test_require_no_css_module() {
+        let code = act_replace(r#"require("./style.css")"#);
+
+        assert_eq!(code.trim(), r#"require("./style.css");"#)
+    }
+
+    fn act_replace(code: &str) -> String {
+        let mut context: Context = Default::default();
+        context.config.devtool = None;
+        let context: Arc<Context> = Arc::new(context);
+
+        let mut ast = build_js_ast("sut.js", code, &context).unwrap();
+
+        GLOBALS.set(&context.meta.script.globals, || {
+            ast.ast.visit_mut_with(&mut resolver(
+                ast.unresolved_mark,
+                ast.top_level_mark,
+                false,
+            ));
+
+            ast.ast.visit_mut_with(&mut VirtualCSSModules {
+                context: &context,
+                unresolved_mark: ast.unresolved_mark,
+            });
+        });
+
+        let (code, _) = js_ast_to_code(&ast.ast, &context, "sut.js").unwrap();
+        code
+    }
+}

e2e/fixtures/css.css-modules.dynamic-import-by-file-name/config.ts

@@ -0,0 +1,3 @@
+export default {
+  autoCSSModules: false,
+};

e2e/fixtures/css.css-modules.dynamic-import-by-file-name/expect.js

@@ -0,0 +1,17 @@
+const assert = require("assert");
+
+const { parseBuildResult, trim } = require("../../../scripts/test-utils");
+const { files } = parseBuildResult(__dirname);
+
+let cssFile = Object.keys(files).filter(k=> k.endsWith(".css"))[0];
+assert(files[cssFile].match(/\.container-\S*/), 'should contains postfixed classname')
+
+assert(
+  trim(files["index.js"]).includes(`__mako_require__.ensure("src/index.module.css?asmodule")`),
+  "should find ensure chunk"
+);
+
+assert(
+  files["index.js"].includes(`__mako_require__.bind(__mako_require__, "src/index.module.css?asmodule")`),
+  "should find reuquire module"
+);

e2e/fixtures/css.css-modules.dynamic-import-by-file-name/mako.config.json

@@ -0,0 +1 @@
+{ "autoCSSModules": false, "minify": false }

e2e/fixtures/css.css-modules.dynamic-import-by-file-name/src/index.tsx

@@ -0,0 +1 @@
+import('./index.module.css');

e2e/fixtures/css.css-modules.required-by-file-name/config.ts

@@ -0,0 +1,3 @@
+export default {
+  autoCSSModules: false,
+};

e2e/fixtures/css.css-modules.required-by-file-name/expect.js

@@ -0,0 +1,17 @@
+const assert = require("assert");
+
+const { parseBuildResult, trim } = require("../../../scripts/test-utils");
+const { files } = parseBuildResult(__dirname);
+
+let cssFile = Object.keys(files).filter(k=> k.endsWith(".css"))[0];
+assert(files[cssFile].match(/\.container-\S*/), 'should contains postfixed classname')
+
+assert(
+  files["index.js"].includes(`"src/index.module.css?asmodule":`),
+  "should tree css file as css module"
+);
+
+assert(
+  files["index.js"].includes(`__mako_require__("src/index.module.css?asmodule")`),
+  "should reuquire css module with query"
+);

e2e/fixtures/css.css-modules.required-by-file-name/mako.config.json

@@ -0,0 +1 @@
+{ "autoCSSModules": false, "minify": false }

e2e/fixtures/css.css-modules.required-by-file-name/src/index.module.css

@@ -0,0 +1,3 @@
+.container {
+  padding-top: 80px;
+}

e2e/fixtures/css.css-modules.required-by-file-name/src/index.tsx

@@ -0,0 +1 @@
+console.log(require('./index.module.css').default);

e2e/fixtures/css.css-modules.required-by-file-name/typings.d.ts

@@ -0,0 +1 @@
+declare module "*.css";

e2e/fixtures/css.css-modules/expect.js

@@ -28,3 +28,8 @@ assert(
   trim(files["index.css"]).includes(`.e{`),
   "const e = require('./e.css') should not be css modules"
 );
+
+assert(
+  files["index.js"].includes(`__mako_require__.ensure("src/f.css").then((f)=>f);`),
+  "import('./f.css') should ensure chunk first"
+);

e2e/fixtures/css.css-modules/src/index.tsx

@@ -1,13 +1,16 @@
+// css module
 import styles from "./index.css";
 console.log(styles);
 
+
+// non css module
 import('./a.css');
 require('./b.css');
 import "./c.css";
-
-// css modules
-import d from './d.css';
-d;
 const e = require('./e.css');
-e;
-// import('./f.css').then(f => f);
+import('./f.css').then(f => f);
+
+console.log (e);
+
+
+