Frontend
Public
Commits
Gantner, Florian Klaus authored and github-actions[bot] committed c4a60abd650
| 19 19 | export class CSSVariableService { |
| 20 20 | isSameDomain = (styleSheet) => { |
| 21 21 | // Internal style blocks won't have an href value |
| 22 22 | if (!styleSheet.href) { |
| 23 23 | return true; |
| 24 24 | } |
| 25 25 | |
| 26 26 | return styleSheet.href.indexOf(window.location.origin) === 0; |
| 27 27 | }; |
| 28 28 | |
| 29 + | /** |
| 30 + | * Checks whether the specific stylesheet object has the property cssRules |
| 31 + | * @param styleSheet The stylesheet |
| 32 + | */ |
| 33 + | hasCssRules = (styleSheet) => { |
| 34 + | // Injected styles might have no css rules value |
| 35 + | return styleSheet.hasOwnProperty('cssRules') && styleSheet.cssRules; |
| 36 + | }; |
| 37 + | |
| 38 + | |
| 39 + | |
| 29 40 | /* |
| 30 41 | Determine if the given rule is a CSSStyleRule |
| 31 42 | See: https://developer.mozilla.org/en-US/docs/Web/API/CSSRule#Type_constants |
| 32 43 | */ |
| 33 44 | isStyleRule = (rule) => rule.type === 1; |
| 34 45 | |
| 35 46 | constructor( |
| 36 47 | protected store: Store<AppState>) { |
| 37 48 | } |
| 38 49 | |
| 86 97 | |
| 87 98 | /** |
| 88 99 | * Get all custom properties on a page |
| 89 100 | * @return array<KeyValuePair<string, string>> |
| 90 101 | * ex; [{key: "--color-accent", value: "#b9f500"}, {key: "--color-text", value: "#252525"}, ...] |
| 91 102 | */ |
| 92 103 | getCSSVariablesFromStylesheets(document: Document): KeyValuePair<string, string>[] { |
| 93 104 | if (isNotEmpty(document.styleSheets)) { |
| 94 105 | // styleSheets is array-like, so we convert it to an array. |
| 95 106 | // Filter out any stylesheets not on this domain |
| 107 + | // Filter out any stylesheets that have no cssRules property |
| 96 108 | return [document.styleSheets] |
| 97 109 | .filter(this.isSameDomain) |
| 110 + | .filter(this.hasCssRules) |
| 98 111 | .reduce( |
| 99 112 | (finalArr, sheet) => |
| 100 113 | finalArr.concat( |
| 101 114 | // cssRules is array-like, so we convert it to an array |
| 102 115 | [sheet.cssRules].filter(this.isStyleRule).reduce((propValArr, rule: any) => { |
| 103 116 | const props = [rule.style] |
| 104 117 | .map((propName) => { |
| 105 118 | return { |
| 106 119 | key: propName.trim(), |
| 107 120 | value: rule.style.getPropertyValue(propName).trim() |