WIP: impl replacement for url() in css

package.json

@@ -194,6 +194,7 @@
     "react-frame-component": "^4.0.0",
     "react-i18next": "=7.13.0",
     "react-waypoint": "^8.1.0",
+    "replacestream": "^4.0.3",
     "reveal.js": "^3.5.0",
     "sass-loader": "^7.1.0",
     "simple-load-script": "^1.0.2",

resource/cdn-resources.js

@@ -82,5 +82,12 @@ module.exports = {
         integrity: ''
       },
     },
+    {
+      name: 'jquery-ui',
+      url: 'https://cdn.jsdelivr.net/jquery.ui/1.11.4/jquery-ui.min.css',
+      args: {
+        integrity: ''
+      },
+    }
   ]
 };

src/lib/service/cdn-resources-service.js

@@ -1,6 +1,9 @@
 const axios = require('axios');
+const path = require('path');
+const URL = require('url');
 const urljoin = require('url-join');
 const fs = require('graceful-fs');
+const replaceStream = require('replacestream');
 
 const helpers = require('@commons/util/helpers');
 const cdnLocalScriptRoot = 'public/js/cdn';
@@ -21,24 +24,46 @@ class CdnResourcesService {
     this.logger.debug('meta data loaded : ', this.cdnResources);
   }
 
-  async downloadAndWrite(url, file) {
+  async downloadAndWrite(url, file, replacestream) {
     // get
     const response = await axios.get(url, { responseType: 'stream' });
-    // write
-    await response.data.pipe(fs.createWriteStream(file));
+    // replace and write
+    let stream = response.data;
+    if (replacestream != null) {
+      stream = response.data.pipe(replacestream);
+    }
+    return stream.pipe(fs.createWriteStream(file));
   }
 
   async downloadAndWriteAll() {
+    // scripts
     const promisesForScript = this.cdnResources.js.map(resource => {
-      return this.downloadAndWrite(resource.url, helpers.root(cdnLocalScriptRoot, `${resource.name}.js`));
+      return this.downloadAndWrite(
+        resource.url,
+        helpers.root(cdnLocalScriptRoot, `${resource.name}.js`));
     });
+    // styles
     const promisesForStyle = this.cdnResources.style.map(resource => {
-      return this.downloadAndWrite(resource.url, helpers.root(cdnLocalStyleRoot, `${resource.name}.css`));
+      return this.downloadAndWrite(
+        resource.url,
+        helpers.root(cdnLocalStyleRoot, `${resource.name}.css`),
+        replaceStream(
+          /url\((?!"data:)["']?(.+?)["']?\)/g, (match, m1) => {   // https://regex101.com/r/Sds38A/2
+            const url = new URL(m1);
+            const basename = path.basename(url.pathname(m1));
+            console.log(m1, basename);
+            return `url()`;
+          })
+      );
     });
 
     return Promise.all([promisesForScript, promisesForStyle]);
   }
 
+  async downloadAssets() {
+
+  }
+
   /**
    * Generate script tag string
    *
@@ -106,7 +131,7 @@ class CdnResourcesService {
       ? urljoin(cdnLocalStyleWebRoot, resource.name) + '.css'
       : resource.url;
 
-    return `<link href="${url}" ${attrs.join(' ')}>`;
+    return `<link rel="stylesheet" href="${url}" ${attrs.join(' ')}>`;
   }
 
   getStyleTagByName(name) {

yarn.lock

@@ -3082,7 +3082,7 @@ escape-html@~1.0.3:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/escape-html/-/escape-html-1.0.3.tgz#0258eae4d3d0c0974de1c169188ef0051d1d1988"
 
-escape-string-regexp@1.0.5, escape-string-regexp@^1.0.2, escape-string-regexp@^1.0.5:
+escape-string-regexp@1.0.5, escape-string-regexp@^1.0.2, escape-string-regexp@^1.0.3, escape-string-regexp@^1.0.5:
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz#1b61c0562190a8dff6ae3bb2cf0200ca130b86d4"
 
@@ -7772,6 +7772,14 @@ repeating@^2.0.0:
   dependencies:
     is-finite "^1.0.0"
 
+replacestream@^4.0.3:
+  version "4.0.3"
+  resolved "https://registry.yarnpkg.com/replacestream/-/replacestream-4.0.3.tgz#3ee5798092be364b1cdb1484308492cb3dff2f36"
+  dependencies:
+    escape-string-regexp "^1.0.3"
+    object-assign "^4.0.1"
+    readable-stream "^2.0.2"
+
 request@2:
   version "2.83.0"
   resolved "https://registry.yarnpkg.com/request/-/request-2.83.0.tgz#ca0b65da02ed62935887808e6f510381034e3356"