diff options
author | 2019-10-17 16:22:11 +0200 | |
---|---|---|
committer | 2019-10-17 16:22:11 +0200 | |
commit | 942466eb686c480133e1b0b8b9a2b975098b5bc4 (patch) | |
tree | 297a71efa4051949a4f2c411262558954c8c7d3a /src/scripts/build-theme-info.js | |
parent | Merge pull request #121 from getferdi/l10n_develop (diff) | |
download | ferdium-app-942466eb686c480133e1b0b8b9a2b975098b5bc4.tar.gz ferdium-app-942466eb686c480133e1b0b8b9a2b975098b5bc4.tar.zst ferdium-app-942466eb686c480133e1b0b8b9a2b975098b5bc4.zip |
Implement #120v5.4.0-beta.1
Diffstat (limited to 'src/scripts/build-theme-info.js')
-rw-r--r-- | src/scripts/build-theme-info.js | 95 |
1 files changed, 95 insertions, 0 deletions
diff --git a/src/scripts/build-theme-info.js b/src/scripts/build-theme-info.js new file mode 100644 index 000000000..4df5a022b --- /dev/null +++ b/src/scripts/build-theme-info.js | |||
@@ -0,0 +1,95 @@ | |||
1 | /** | ||
2 | * Script to get information on which selectors use the brand color. | ||
3 | * This is needed to provide the accent color feature - the feature will create CSS rules | ||
4 | * to overwrite the color of these selectors. | ||
5 | */ | ||
6 | const css = require('css'); | ||
7 | const fs = require('fs-extra'); | ||
8 | const path = require('path'); | ||
9 | |||
10 | // Colors that should be replaced with the accent color | ||
11 | const accentColors = [ | ||
12 | '#7367f0', | ||
13 | '#5e50ee', | ||
14 | ]; | ||
15 | |||
16 | const cssFile = path.join(__dirname, '../../', 'build', 'styles', 'main.css'); | ||
17 | const outputFile = path.join(__dirname, '../', 'assets', 'themeInfo.json'); | ||
18 | |||
19 | // Parse and extract the rules from a CSS stylesheet file | ||
20 | async function getRulesFromCssFile(file) { | ||
21 | const cssSrc = (await fs.readFile(file)).toString(); | ||
22 | const cssTree = css.parse(cssSrc); | ||
23 | |||
24 | return cssTree.stylesheet.rules; | ||
25 | } | ||
26 | |||
27 | /** | ||
28 | * Get all selectors from a list of parsed CSS rules that set any property to one of the specified | ||
29 | * values. | ||
30 | * | ||
31 | * This function will output an object in this format: | ||
32 | * { | ||
33 | * 'property-name': [ array of selectors ] | ||
34 | * } | ||
35 | * | ||
36 | * e.g. | ||
37 | * { | ||
38 | * 'background-color': [ | ||
39 | * '.background', | ||
40 | * '.input-dark' | ||
41 | * ] | ||
42 | * } | ||
43 | * | ||
44 | * @param {Array} rules Rules as outputted by the `css` module | ||
45 | * @param {Array} values Array of values that should be searched for | ||
46 | */ | ||
47 | function getSelectorsDeclaringValues(rules, values) { | ||
48 | const output = {}; | ||
49 | |||
50 | rules.forEach((rule) => { | ||
51 | if (rule.declarations) { | ||
52 | rule.declarations.forEach((declaration) => { | ||
53 | if (declaration.type === 'declaration' | ||
54 | && values.includes(declaration.value.toLowerCase())) { | ||
55 | if (!output[declaration.property]) { | ||
56 | output[declaration.property] = []; | ||
57 | } | ||
58 | output[declaration.property] = output[declaration.property].concat(rule.selectors); | ||
59 | } | ||
60 | }); | ||
61 | } | ||
62 | }); | ||
63 | |||
64 | return output; | ||
65 | } | ||
66 | |||
67 | async function generateThemeInfo() { | ||
68 | if (!await fs.pathExists(cssFile)) { | ||
69 | console.log('Please make sure to build the project first.'); | ||
70 | return; | ||
71 | } | ||
72 | |||
73 | // Read and parse css bundle | ||
74 | const rules = await getRulesFromCssFile(cssFile); | ||
75 | |||
76 | console.log(`Found ${rules.length} rules`); | ||
77 | |||
78 | // Get rules specifying the brand colors | ||
79 | const brandRules = getSelectorsDeclaringValues(rules, accentColors); | ||
80 | |||
81 | console.log(`Found ${Object.keys(brandRules).join(', ')} properties that set color to brand color`); | ||
82 | |||
83 | // Join array of declarations into a single string | ||
84 | Object.keys(brandRules).forEach((rule) => { | ||
85 | brandRules[rule] = brandRules[rule].join(', '); | ||
86 | }); | ||
87 | |||
88 | // Write object with theme info to file | ||
89 | fs.writeFile( | ||
90 | outputFile, | ||
91 | JSON.stringify(brandRules), | ||
92 | ); | ||
93 | } | ||
94 | |||
95 | generateThemeInfo(); | ||