[wp-trac] [WordPress Trac] #55142: Custom, external or 3rd party styles are not loaded inside the preview iframe

[WordPress Trac]

#55142: Custom, external or 3rd party styles are not loaded inside the preview
iframe
-----------------------------+-----------------------------
 Reporter:  Nenad Obradovic  |      Owner:  (none)
     Type:  defect (bug)     |     Status:  new
 Priority:  normal           |  Milestone:  Awaiting Review
Component:  Editor           |    Version:  5.9
 Severity:  normal           |   Keywords:
  Focuses:                   |
-----------------------------+-----------------------------
 Hello,

 Unfortunately, you messed a lot of things with the new iframe editor
 preview, conditional you set are "crazy" and work only for your cases
 otherwise you blocked or removed any custom/external/3rd party scripts.

 In this file src/components/iframe/index.js you made function
 **styleSheetsCompat** and that function has 2 problems:
 1. If we include any external CSS file that file will not be loaded
 because of this case
 {{{
 try {
         // May fail for external styles.
         // eslint-disable-next-line no-unused-expressions
         styleSheet.cssRules;
 } catch ( e ) {
         return;
 }
 }}}

 External files on Chrome browser will be blocked and cssRules result will
 be "Failed to read the 'cssRules' property from 'CSSStyleSheet': Cannot
 access rules at CSSStyleSheet" -
 https://stackoverflow.com/questions/48753691/cannot-access-cssrules-from-
 local-css-file-in-chrome-64/49160760#49160760

 Please check Google Font file issue - https://imgur.com/a/SPIPNvZ

 2. The Second problem is 3rd party styles or theme custom styles. In the
 same file -> same function -> you can find this piece of code
 {{{
 const isMatch = Array.from( cssRules ).find(
         ( { selectorText } ) =>
                 selectorText &&
                 ( selectorText.includes( `.${ BODY_CLASS_NAME }` ) ||
                         selectorText.includes( `.${ BLOCK_PREFIX }` ) )
 );
 }}}
 where
 {{{
 const BODY_CLASS_NAME = 'editor-styles-wrapper';
 const BLOCK_PREFIX = 'wp-block';
 }}}

 If we have for example 3rd party style - Swiper.css you will block it
 because inside that file there is no **editor-styles-wrapper** or **wp-
 block** classes as selector https://www.screencast.com/t/YxASDqA97u0 and
 that file will not be executed/loaded.

 The same issue is with any custom theme or plugin styles that don't
 contain these classes. In my case, I have several CSS files which don't
 contain these classes and all files are blocked.

 Could you please consider changing this logic or adding some hooks/JS
 variables so we can be able to extend/change or add our items?

 Best regards,
 Nenad Obradovic

-- 
Ticket URL: <https://core.trac.wordpress.org/ticket/55142>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform