packages/shared/lib/logical/logical.tsx

   1 const ending = '.ltr.css';
   2
   3 const getIsNonEnding = (src: string) => {
   4     const targetOrigin = window.location.origin;
   5     const url = new URL(src, targetOrigin);
   6     return url.origin === targetOrigin && url.pathname.endsWith('.css') && !url.pathname.endsWith(ending);
   7 };
   8
   9 export const queryLocalLinkElements = () => {
  10     return [...document.querySelectorAll<HTMLLinkElement>('link[rel=stylesheet]')].filter((node) => {
  11         return getIsNonEnding(node.href);
  12     });
  13 };
  14
  15 const mutateLinkElement = (el: HTMLLinkElement) => {
  16     el.href = el.href.replace(/\.css/, ending);
  17 };
  18
  19 const getIsNonEndingLinkElement = (node: Node): node is HTMLLinkElement => {
  20     return (
  21         node &&
  22         node.nodeType === 1 &&
  23         node instanceof HTMLLinkElement &&
  24         node.tagName === 'LINK' &&
  25         node.rel === 'stylesheet' &&
  26         getIsNonEnding(node.href)
  27     );
  28 };
  29
  30 const initLogicalProperties = () => {
  31     if (CSS.supports('(border-start-start-radius: 1em)')) {
  32         return;
  33     }
  34
  35     const observer = new MutationObserver((mutations) => {
  36         mutations.forEach((mutation) => {
  37             mutation.addedNodes.forEach((node) => {
  38                 if (getIsNonEndingLinkElement(node)) {
  39                     mutateLinkElement(node);
  40                 }
  41             });
  42         });
  43     });
  44
  45     queryLocalLinkElements().forEach(mutateLinkElement);
  46
  47     observer.observe(document.head, {
  48         childList: true,
  49         subtree: true,
  50     });
  51 };
  52
  53 export default initLogicalProperties;