aico-image-editor/src/initStyles.js

Combine multiple image into and create single combined image

const urls = ['main.css', 'custom.css'];

//import mainSheet from '../output/css/main.css';
//import customSheet from '../output/css/custom.css';

// const observer = new MutationObserver((mutationsList, observer) => {
//     for(let mutation of mutationsList) {
//       if (mutation.type === 'childList') {
//         const xComponents = Array.from(mutation.target.querySelectorAll('x-component'));

//             for(const xComponent of xComponents) {
//                 if (xComponent && xComponent.shadowRoot) {
            
//                     // Your style loading code here
//                     observer.observe(xComponent.shadowRoot, { childList: true, subtree: true });
//                     const shadowRoot = xComponent.shadowRoot;
                    
//                     shadowRoot.adoptedStyleSheets = [mainSheet,customSheet];
                    
//                     //observer.disconnect();
//                 } 
//             }
//         }
//     }
// });
// observer.observe(document, { childList: true, subtree: true });
// window.observer = observer;


// retrive each font-face declaration from individual stylesheets as the @font-face won't apply here
// in shadow dom
// const element = document.createElement("style");
// [mainSheet,customSheet]
//         .flatMap(styleSheet => [...styleSheet.cssRules])
//         .filter(rule => rule.constructor === CSSFontFaceRule)
//         .map(rule => {
            
//             element.append(rule.cssText);
//             document.head.appendChild(element);
//         });


function findRoots(ele) {
    return [
        ele,
        ...ele.querySelectorAll('*')
    ].filter(e => !!e.shadowRoot)
        .flatMap(e => [e.shadowRoot, ...findRoots(e.shadowRoot)])
}





const initStyles = function(shadowRoot) {
    if(shadowRoot) {
        /**
         * this will work
            urls.forEach(function(url) {
                import("../output/css/" + url).then(({default: cssStyleSheetObject}) => {
                    shadowRoot.adoptedStyleSheets.push(cssStyleSheetObject)
                })
            })
         * 
         */

        /** but this won't when whole variable is used like url in import
         *  // whole variable won't work to separate out css into another chunk as
            // webpack can't analyze and know what will come there in place of module as variable(url here)
            // urls.forEach(function(url) {
            //     import(`${url}`).then(({default: cssStyleSheetObject}) => {
            //         shadowRoot.adoptedStyleSheets.push(cssStyleSheetObject)
            //     })
            // })
         */
        
        const imageEditorFontStyleEL = document.createElement("style");
       
        imageEditorFontStyleEL.classList.add('image-editor-font-styles');
       
        import(/* webpackMode: "eager" */'../output/css/main.css').then(mainCssModule => {
             const mainCssStyleSheet = mainCssModule.default;
             shadowRoot.adoptedStyleSheets.push(mainCssStyleSheet);
             [...mainCssStyleSheet.cssRules]
                .filter(rule => rule.constructor === CSSFontFaceRule)
                .map(rule => {
                    imageEditorFontStyleEL.append(rule.cssText);
                })
         }).then(function() {
            import(/* webpackMode: "eager" */'../output/css/custom.css').then(customCssModule => {
                const customCssStyleSheet = customCssModule.default;
                shadowRoot.adoptedStyleSheets.push(customCssStyleSheet);
                [...customCssStyleSheet.cssRules]
                    .filter(rule => rule.constructor === CSSFontFaceRule)
                    .map(rule => {
                        imageEditorFontStyleEL.append(rule.cssText);
                    })
             })
        })
        document.head.appendChild(imageEditorFontStyleEL);
 
    }
}


export default initStyles;

export const reApplyStyles = function(shadowRoot) {
    
    if(module.hot) {    
        module.hot.accept('../output/css/custom.css', function(mod) {
          console.log('custom css accepted')
        

            import(/* webpackMode: "eager" */'../output/css/custom.css').then(customCssModule => {
                const customCssStyleSheet = customCssModule.default;
                const shadowRoots = findRoots(document.documentElement)
                //console.log(shadowRoot.adoptedStyleSheets);

                shadowRoots.forEach(shadowRoot => {
                    //shadowRoot.adoptedStyleSheets[1] = customCssStyleSheet
                    //shadowRoot.adoptedStyleSheets.push(customCssStyleSheet);
        
                    shadowRoot.adoptedStyleSheets.splice(1,1)
                     shadowRoot.adoptedStyleSheets.push(customCssStyleSheet);
                })

               

                reApplyStyles()
                
            })
        });

        module.hot.accept('../output/css/main.css', function(mod) {
            console.log('custom css accepted')
          
  
              import(/* webpackMode: "eager" */'../output/css/main.css').then(mainCssModule => {
                  const mainCssStyleSheet = mainCssModule.default;
                  const shadowRoots = findRoots(document.documentElement)
                  //console.log(shadowRoot.adoptedStyleSheets);
  
                  shadowRoots.forEach(shadowRoot => {
                      //shadowRoot.adoptedStyleSheets[1] = customCssStyleSheet
                      //shadowRoot.adoptedStyleSheets.push(customCssStyleSheet);
          
                      shadowRoot.adoptedStyleSheets.splice(0,1)
                       shadowRoot.adoptedStyleSheets.unshift(mainCssStyleSheet);
                  })
  
                 
  
                  reApplyStyles()
                  
              })
          });
          
    }
    
};

reApplyStyles()