1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
|
/*
* Copyright (C) 2021 Yomichan Authors
*
* This program is free software: you can redistribute it and/or modify
* it under the terms of the GNU General Public License as published by
* the Free Software Foundation, either version 3 of the License, or
* (at your option) any later version.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU General Public License for more details.
*
* You should have received a copy of the GNU General Public License
* along with this program. If not, see <https://www.gnu.org/licenses/>.
*/
/**
* This class is used to apply CSS styles to elements using a consistent method
* that is the same across different browsers.
*/
class CssStyleApplier {
/**
* Creates a new instance of the class.
* @param styleDataUrl The local URL to the JSON file continaing the style rules.
* The style rules should be of the format:
* [
* {
* selectors: [(selector:string)...],
* styles: [
* [(property:string), (value:string)]...
* ]
* }...
* ]
*/
constructor(styleDataUrl) {
this._styleDataUrl = styleDataUrl;
this._styleData = [];
this._cachedRules = new Map();
}
/**
* Loads the data file for use.
*/
async prepare() {
this._styleData = await this._fetchJsonAsset(this._styleDataUrl);
}
/**
* Applies CSS styles directly to the "style" attribute using the "class" attribute.
* This only works for elements with a single class.
* @param elements An iterable collection of HTMLElement objects.
*/
applyClassStyles(elements) {
const elementStyles = [];
for (const element of elements) {
const className = element.getAttribute('class');
if (className.length === 0) { continue; }
let cssTextNew = '';
for (const {selectorText, styles} of this._getRulesForClass(className)) {
if (!element.matches(selectorText)) { continue; }
cssTextNew += this._getCssText(styles);
}
cssTextNew += element.style.cssText;
elementStyles.push({element, style: cssTextNew});
}
for (const {element, style} of elementStyles) {
element.removeAttribute('class');
if (style.length > 0) {
element.setAttribute('style', style);
} else {
element.removeAttribute('style');
}
}
}
// Private
async _fetchJsonAsset(url) {
const response = await fetch(url, {
method: 'GET',
mode: 'no-cors',
cache: 'default',
credentials: 'omit',
redirect: 'follow',
referrerPolicy: 'no-referrer'
});
if (!response.ok) {
throw new Error(`Failed to fetch ${url}: ${response.status}`);
}
return await response.json();
}
_getRulesForClass(className) {
let rules = this._cachedRules.get(className);
if (typeof rules !== 'undefined') { return rules; }
rules = [];
this._cachedRules.set(className, rules);
const classNamePattern = new RegExp(`.${className}(?![0-9a-zA-Z-])`, '');
for (const {selectors, styles} of this._styleData) {
const selectorText = selectors.join(',');
if (!classNamePattern.test(selectorText)) { continue; }
rules.push({selectorText, styles});
}
return rules;
}
_getCssText(styles) {
let cssText = '';
for (const [property, value] of styles) {
cssText += `${property}:${value};`;
}
return cssText;
}
}
|