Frontend
Public
Commits
Tim Donohue authored and GitHub committed c3ee2ca6c18 Merge
| 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 29 | /* |
| 39 30 | Determine if the given rule is a CSSStyleRule |
| 40 31 | See: https://developer.mozilla.org/en-US/docs/Web/API/CSSRule#Type_constants |
| 41 32 | */ |
| 42 33 | isStyleRule = (rule) => rule.type === 1; |
| 43 34 | |
| 44 35 | constructor( |
| 45 36 | protected store: Store<AppState>) { |
| 46 37 | } |
| 47 38 | |
| 95 86 | |
| 96 87 | /** |
| 97 88 | * Get all custom properties on a page |
| 98 89 | * @return array<KeyValuePair<string, string>> |
| 99 90 | * ex; [{key: "--color-accent", value: "#b9f500"}, {key: "--color-text", value: "#252525"}, ...] |
| 100 91 | */ |
| 101 92 | getCSSVariablesFromStylesheets(document: Document): KeyValuePair<string, string>[] { |
| 102 93 | if (isNotEmpty(document.styleSheets)) { |
| 103 94 | // styleSheets is array-like, so we convert it to an array. |
| 104 95 | // Filter out any stylesheets not on this domain |
| 105 - | // Filter out any stylesheets that have no cssRules property |
| 106 96 | return [document.styleSheets] |
| 107 97 | .filter(this.isSameDomain) |
| 108 - | .filter(this.hasCssRules) |
| 109 98 | .reduce( |
| 110 99 | (finalArr, sheet) => |
| 111 100 | finalArr.concat( |
| 112 101 | // cssRules is array-like, so we convert it to an array |
| 113 102 | [sheet.cssRules].filter(this.isStyleRule).reduce((propValArr, rule: any) => { |
| 114 103 | const props = [rule.style] |
| 115 104 | .map((propName) => { |
| 116 105 | return { |
| 117 106 | key: propName.trim(), |
| 118 107 | value: rule.style.getPropertyValue(propName).trim() |