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);
//         });




export default 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);
    }
}