Fix: Failed to read the 'cssRules'#51
Merged
Merged
Conversation
…SS, avoiding CORS issues
Coverage summary from CodacySee diff coverage on Codacy
Coverage variation details
Coverage variation is the difference between the coverage for the head and common ancestor commits of the pull request branch: Diff coverage details
Diff coverage is the percentage of lines that are covered by tests out of the coverable lines that the pull request added or modified: See your quality gate settings Change summary preferences |
…ing of Google Fonts
…tch and parse external font stylesheets, and update _initializeExternalFontSheets to manage parsed results.
|
on related PR at the plugin , we need to confirm that we fixed the double reqqquest mentioned here https://group-onecom.slack.com/archives/C08F4LZB2QG/p1747644521126159 |
wordpressfan
approved these changes
May 21, 2025
jeawhanlee
added a commit
that referenced
this pull request
Jun 2, 2025
* Added preload fonts beacon * Updated beacon manager and entry point * Updated test * Added test * Remove comment * Updated docblock * Updated doc block * Updated property * Updated logger method * Use updated method * Added more tests * Added more tests * Updated entry point * Added yet more test * Fixed codacy critical issues * Fixed codacy critical issues * Try to fix medium codacy issue * Added logic to return font urls * Updated test * Added preconnect beacon * Added test * Added doc block * Updated test * Update to use set to remove duplicate entries * Added test * Wait for fonts to be loaded * Updated test * Updated conditional to check if stylesheet is internal * Added test * Make font extensions exclusions dynamic * Merge pull request #48 from wp-media/enhancement/47-exclusions-part refactor system fonts to be generic exclusions list * Closes #7289: 3.19 Preconnect to external domains - exclusions filter (#52) * Updated exclusions logic to be compatible with array of strings pattern * Updated tests * Updated test data * Store the url origin in the final result instead of hostname (PR #55) * Fix: Failed to read the 'cssRules' (#51) * Implement inlineGoogleFonts method to fetch and inline Google Fonts CSS, avoiding CORS issues * Add tests for inlineGoogleFonts method to validate fetching and inlining of Google Fonts * Refactor font handling: Implement externalStylesheetsDoc method to fetch and parse external font stylesheets, and update _initializeExternalFontSheets to manage parsed results. * remove external urls from stylesheets * fix test * add Adame's suggestion and it is working --------- Co-authored-by: WordPressFan <[email protected]> Co-authored-by: Michael Lee <[email protected]> * Add font family to allFonts object and push new variation only if matching url is valid (#56) --------- Co-authored-by: Michael Lee <[email protected]> Co-authored-by: Michael Lee <[email protected]> Co-authored-by: Gaël Robin <[email protected]>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
4 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Description
Fixes #(issue number)
Fix the CORS issue leading to
SecurityError: Failed to read the 'cssRules' property from 'CSSStyleSheet': Cannot access rulesType of change
Detailed scenario
What was tested
The beacon script
How to test
Load a page with a google font loaded externally
Technical description
Documentation
This pull request introduces a new feature to the
BeaconPreloadFontsclass that inlines Google Fonts CSS to avoid CORS issues during font loading. The changes ensure smoother font rendering by preloading and inlining external stylesheets.New Feature: Inlining Google Fonts CSS
inlineGoogleFontsto theBeaconPreloadFontsclass insrc/BeaconPreloadFonts.js. This method fetches and inlines Google Fonts CSS, deduplicates stylesheets, and removes external link elements to prevent CORS issues.runmethod inBeaconPreloadFontsto callinlineGoogleFontsbefore waiting for fonts to load, ensuring that the inlined styles are applied early in the font loading process.New dependencies
None
Risks
None
Mandatory Checklist
Code validation
Code style