@plaidev/karte-action-sdk 1.1.96 → 1.1.97

package/dist/hydrate/index.es.d.ts

@@ -701,7 +701,7 @@ declare function applyCss(css: string): Promise<any>;
  *
  * @param {string} href Link of style file
  */
-declare function loadStyle(href: string): Promise<any>;
+declare function loadStyle(href: string): Promise<void>;
 // -------- The following codes are deprecated --------
 declare const showModal: typeof create; // @deprecated
 type ModalOptions<Props, Variables> = ActionOptions<Props, Variables>; // @deprecated
@@ -1333,7 +1333,7 @@ declare namespace widget {
      *
      * @param {string} href Link of style file
      */
-    function loadStyle(href: string): Promise<any>;
+    function loadStyle(href: string): Promise<void>;
     // -------- The following codes are deprecated --------
     const showModal: typeof create; // @deprecated
     type ModalOptions<Props, Variables> = ActionOptions<Props, Variables>; // @deprecated

package/dist/hydrate/index.es.js

@@ -963,23 +963,63 @@ async function applyCss(css) {
         style.addEventListener('error', () => reject(style));
     });
 }
+async function fixFontFaceIssue(href, cssRules) {
+    const css = new CSSStyleSheet();
+    // @ts-ignore
+    await css.replace(cssRules);
+    const rules = [];
+    const fixedRules = [];
+    Array.from(css.cssRules).forEach(cssRule => {
+        if (cssRule.type != 5) {
+            rules.push(cssRule.cssText);
+        }
+        // type 5 is @font-face
+        const split = href.split('/');
+        const stylePath = split.slice(0, split.length - 1).join('/');
+        const cssText = cssRule.cssText;
+        const newCssText = cssText.replace(
+        // relative paths
+        /url\s*\(\s*['"]?(?!((\/)|((?:https?:)?\/\/)|(?:data:?:)))([^'")]+)['"]?\s*\)/g, `url("${stylePath}/$4")`);
+        if (cssText === newCssText)
+            return;
+        fixedRules.push(newCssText);
+    });
+    return [rules.join('\n'), fixedRules.join('\n')];
+}
 /**
  * {@link loadStyle} load global style to KARTE action.
  *
  * @param {string} href Link of style file
  */
 async function loadStyle(href) {
-    return new Promise((resolve, reject) => {
-        const link = document.createElement('link');
-        link.rel = 'stylesheet';
-        link.href = href;
-        const shadowRoot = getActionShadowRoot();
-        if (!shadowRoot)
-            return;
-        shadowRoot.append(link);
-        link.addEventListener('load', () => resolve(link));
-        link.addEventListener('error', () => reject(link));
-    });
+    const sr = getActionShadowRoot();
+    if (!sr)
+        return;
+    let cssRules = '';
+    try {
+        const res = await fetch(href);
+        cssRules = await res.text();
+    }
+    catch (e) {
+        // pass
+    }
+    if (!cssRules)
+        return;
+    // Chromeのバグで、Shadow Rootの@font-faceを絶対パスで指定する必要がある
+    // @see https://stackoverflow.com/a/63717709
+    const [rules, fontFaceRules] = await fixFontFaceIssue(href, cssRules);
+    const css = new CSSStyleSheet();
+    // @ts-ignore
+    await css.replace(rules);
+    const fontFaceCss = new CSSStyleSheet();
+    // @ts-ignore
+    await fontFaceCss.replace(fontFaceRules);
+    // @ts-ignore
+    sr.adoptedStyleSheets = [...sr.adoptedStyleSheets, css, fontFaceCss];
+    // Chromeのバグで、ページとShadow Rootの両方に、@font-faceを設定する必要がある
+    // @see https://stackoverflow.com/a/63717709
+    // @ts-ignore
+    document.adoptedStyleSheets = [...document.adoptedStyleSheets, css, fontFaceCss];
 }
 // -------- The following codes are deprecated --------
 const showModal = create; // @deprecated

package/dist/index.es.d.ts

@@ -701,7 +701,7 @@ declare function applyCss(css: string): Promise<any>;
  *
  * @param {string} href Link of style file
  */
-declare function loadStyle(href: string): Promise<any>;
+declare function loadStyle(href: string): Promise<void>;
 // -------- The following codes are deprecated --------
 declare const showModal: typeof create; // @deprecated
 type ModalOptions<Props, Variables> = ActionOptions<Props, Variables>; // @deprecated
@@ -1333,7 +1333,7 @@ declare namespace widget {
      *
      * @param {string} href Link of style file
      */
-    function loadStyle(href: string): Promise<any>;
+    function loadStyle(href: string): Promise<void>;
     // -------- The following codes are deprecated --------
     const showModal: typeof create; // @deprecated
     type ModalOptions<Props, Variables> = ActionOptions<Props, Variables>; // @deprecated

package/dist/index.es.js

@@ -1077,23 +1077,63 @@ async function applyCss(css) {
         style.addEventListener('error', () => reject(style));
     });
 }
+async function fixFontFaceIssue(href, cssRules) {
+    const css = new CSSStyleSheet();
+    // @ts-ignore
+    await css.replace(cssRules);
+    const rules = [];
+    const fixedRules = [];
+    Array.from(css.cssRules).forEach(cssRule => {
+        if (cssRule.type != 5) {
+            rules.push(cssRule.cssText);
+        }
+        // type 5 is @font-face
+        const split = href.split('/');
+        const stylePath = split.slice(0, split.length - 1).join('/');
+        const cssText = cssRule.cssText;
+        const newCssText = cssText.replace(
+        // relative paths
+        /url\s*\(\s*['"]?(?!((\/)|((?:https?:)?\/\/)|(?:data:?:)))([^'")]+)['"]?\s*\)/g, `url("${stylePath}/$4")`);
+        if (cssText === newCssText)
+            return;
+        fixedRules.push(newCssText);
+    });
+    return [rules.join('\n'), fixedRules.join('\n')];
+}
 /**
  * {@link loadStyle} load global style to KARTE action.
  *
  * @param {string} href Link of style file
  */
 async function loadStyle(href) {
-    return new Promise((resolve, reject) => {
-        const link = document.createElement('link');
-        link.rel = 'stylesheet';
-        link.href = href;
-        const shadowRoot = getActionShadowRoot();
-        if (!shadowRoot)
-            return;
-        shadowRoot.append(link);
-        link.addEventListener('load', () => resolve(link));
-        link.addEventListener('error', () => reject(link));
-    });
+    const sr = getActionShadowRoot();
+    if (!sr)
+        return;
+    let cssRules = '';
+    try {
+        const res = await fetch(href);
+        cssRules = await res.text();
+    }
+    catch (e) {
+        // pass
+    }
+    if (!cssRules)
+        return;
+    // Chromeのバグで、Shadow Rootの@font-faceを絶対パスで指定する必要がある
+    // @see https://stackoverflow.com/a/63717709
+    const [rules, fontFaceRules] = await fixFontFaceIssue(href, cssRules);
+    const css = new CSSStyleSheet();
+    // @ts-ignore
+    await css.replace(rules);
+    const fontFaceCss = new CSSStyleSheet();
+    // @ts-ignore
+    await fontFaceCss.replace(fontFaceRules);
+    // @ts-ignore
+    sr.adoptedStyleSheets = [...sr.adoptedStyleSheets, css, fontFaceCss];
+    // Chromeのバグで、ページとShadow Rootの両方に、@font-faceを設定する必要がある
+    // @see https://stackoverflow.com/a/63717709
+    // @ts-ignore
+    document.adoptedStyleSheets = [...document.adoptedStyleSheets, css, fontFaceCss];
 }
 // -------- The following codes are deprecated --------
 const showModal = create; // @deprecated

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@plaidev/karte-action-sdk",
-  "version": "1.1.96",
+  "version": "1.1.97",
   "author": "Plaid Inc.",
   "license": "Apache-2.0",
   "module": "./dist/index.es.js",
@@ -27,8 +27,8 @@
     "LICENSE"
   ],
   "devDependencies": {
-    "@plaidev/action-compiler": "0.4.201",
-    "@plaidev/sender-types": "^0.4.140",
+    "@plaidev/action-compiler": "workspace:*",
+    "@plaidev/sender-types": "workspace:*",
     "@rollup/plugin-alias": "^4.0.0",
     "@rollup/plugin-commonjs": "^23.0.1",
     "@rollup/plugin-json": "^5.0.0",