fix: css url asset (farm-fe#827)

Co-authored-by: brightwwu <[email protected]>

.github/workflows/ci.yaml

@@ -97,7 +97,7 @@ jobs:
         run: npm run test -- --coverage
 
   check-core-artifacts:
-    name: Check Plugin React Artifacts
+    name: Check Core Artifacts
     runs-on: ubuntu-latest
     needs: call-rust-build
     steps:
@@ -112,7 +112,7 @@ jobs:
           done
 
   check-plugin-artifacts:
-    name: Check Plugin Sass Artifacts
+    name: Check ${{ matrix.settings.name }} Artifacts
     runs-on: ubuntu-latest
     needs: call-rust-build
     strategy:

crates/compiler/tests/css.rs

@@ -57,3 +57,31 @@ fn css_prefixer() {
     assert_compiler_result(&compiler, Some(&entry_name));
   });
 }
+
+#[test]
+fn css_url_replacer() {
+  fixture!(
+    "tests/fixtures/css/url_replacer/**/*.ts",
+    |file, crate_path| {
+      let cwd = file.parent().unwrap();
+
+      let entry_name = "index".to_string();
+
+      let compiler = create_css_compiler(
+        HashMap::from([(entry_name.clone(), "./index.ts".into())]),
+        cwd.to_path_buf(),
+        crate_path,
+        CssConfig {
+          prefixer: Some(CssPrefixerConfig {
+            targets: farmfe_toolkit::swc_css_prefixer::options::Options::default().env,
+          }),
+          ..Default::default()
+        },
+      );
+
+      compiler.compile().unwrap();
+
+      assert_compiler_result(&compiler, Some(&entry_name));
+    }
+  );
+}

crates/compiler/tests/fixtures/css/url_replacer/absolute/index.css

@@ -0,0 +1,3 @@
+body {
+    background-image: url(/font.ttf);
+}

crates/compiler/tests/fixtures/css/url_replacer/absolute/index.ts

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

crates/compiler/tests/fixtures/css/url_replacer/absolute/output.js

@@ -0,0 +1,42 @@
+//index.js:
+ (globalThis || window || self || global)['__farm_default_namespace__'] = {__FARM_TARGET_ENV__: 'browser'};(function (modules, entryModule) {
+            var cache = {};
+
+            function dynamicRequire(id) {
+              return Promise.resolve(require(id));
+            }
+
+            function require(id) {
+              if (cache[id]) return cache[id].exports;
+
+              var module = {
+                id: id,
+                exports: {}
+              };
+
+              modules[id](module, module.exports, require, dynamicRequire);
+              cache[id] = module;
+              return module.exports;
+            }
+
+            require(entryModule);
+          })({"ec853507": function(module, exports, farmRequire, farmDynamicRequire) {
+    "use strict";
+    console.log("runtime/index.js")(globalThis || window || self || global)["__farm_default_namespace__"].__farm_module_system__.setPlugins([]);
+},}, "ec853507");(function (modules) {
+            for (var key in modules) {
+              modules[key].__farm_resource_pot__ = 'index_dcdc.js';
+                (globalThis || window || self || global)['__farm_default_namespace__'].__farm_module_system__.register(key, modules[key]);
+            }
+        })({"b5d64806": function(module, exports, farmRequire, farmDynamicRequire) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", {
+        value: true
+    });
+    "";
+},});(globalThis || window || self || global)['__farm_default_namespace__'].__farm_module_system__.setInitialLoadedResources([]);(globalThis || window || self || global)['__farm_default_namespace__'].__farm_module_system__.setDynamicModuleResourcesMap({  });var farmModuleSystem = (globalThis || window || self || global)['__farm_default_namespace__'].__farm_module_system__;farmModuleSystem.bootstrap();var entry = farmModuleSystem.require("b5d64806");
+
+//index_337c.css:
+ body {
+  background-image: url("/font.ttf");
+}

crates/compiler/tests/fixtures/css/url_replacer/ignored/index.css

@@ -0,0 +1,3 @@
+body {
+    background-image: url(data:base64,xfsdfdsa);
+}

crates/compiler/tests/fixtures/css/url_replacer/ignored/index.ts

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

crates/compiler/tests/fixtures/css/url_replacer/ignored/output.js

@@ -0,0 +1,42 @@
+//index.js:
+ (globalThis || window || self || global)['__farm_default_namespace__'] = {__FARM_TARGET_ENV__: 'browser'};(function (modules, entryModule) {
+            var cache = {};
+
+            function dynamicRequire(id) {
+              return Promise.resolve(require(id));
+            }
+
+            function require(id) {
+              if (cache[id]) return cache[id].exports;
+
+              var module = {
+                id: id,
+                exports: {}
+              };
+
+              modules[id](module, module.exports, require, dynamicRequire);
+              cache[id] = module;
+              return module.exports;
+            }
+
+            require(entryModule);
+          })({"ec853507": function(module, exports, farmRequire, farmDynamicRequire) {
+    "use strict";
+    console.log("runtime/index.js")(globalThis || window || self || global)["__farm_default_namespace__"].__farm_module_system__.setPlugins([]);
+},}, "ec853507");(function (modules) {
+            for (var key in modules) {
+              modules[key].__farm_resource_pot__ = 'index_dcdc.js';
+                (globalThis || window || self || global)['__farm_default_namespace__'].__farm_module_system__.register(key, modules[key]);
+            }
+        })({"b5d64806": function(module, exports, farmRequire, farmDynamicRequire) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", {
+        value: true
+    });
+    "";
+},});(globalThis || window || self || global)['__farm_default_namespace__'].__farm_module_system__.setInitialLoadedResources([]);(globalThis || window || self || global)['__farm_default_namespace__'].__farm_module_system__.setDynamicModuleResourcesMap({  });var farmModuleSystem = (globalThis || window || self || global)['__farm_default_namespace__'].__farm_module_system__;farmModuleSystem.bootstrap();var entry = farmModuleSystem.require("b5d64806");
+
+//index_337c.css:
+ body {
+  background-image: url("data:base64,xfsdfdsa");
+}

crates/plugin_css/src/source_replacer.rs

@@ -45,7 +45,7 @@ impl<'a> VisitMut for SourceReplacer<'a> {
             for resource in self.resources_map.values() {
               if let ResourceOrigin::Module(m_id) = &resource.origin {
                 if &dep_module == m_id {
-                  return resource.name.clone();
+                  return format!("/{}", resource.name);
                 }
               }
             }
@@ -67,7 +67,7 @@ impl<'a> VisitMut for SourceReplacer<'a> {
 
           *value = Box::new(UrlValue::Str(Str {
             span: DUMMY_SP,
-            value: format!("/{}", resource_name).into(),
+            value: resource_name.into(),
             raw: None,
           }));
         }