diff options
Diffstat (limited to 'scripts/build-theme-info.js')
-rw-r--r-- | scripts/build-theme-info.js | 103 |
1 files changed, 0 insertions, 103 deletions
diff --git a/scripts/build-theme-info.js b/scripts/build-theme-info.js deleted file mode 100644 index 8aee96ab7..000000000 --- a/scripts/build-theme-info.js +++ /dev/null | |||
@@ -1,103 +0,0 @@ | |||
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 | const theme = require('@meetfranz/theme'); | ||
10 | |||
11 | // Colors that should be replaced with the accent color | ||
12 | const accentColors = [ | ||
13 | theme.DEFAULT_ACCENT_COLOR.toLowerCase(), | ||
14 | '#7367f0', | ||
15 | '#5e50ee', | ||
16 | ]; | ||
17 | |||
18 | const cssFile = path.join(__dirname, '..', '..', 'build', 'styles', 'main.css'); | ||
19 | const outputFile = path.join(__dirname, '..', 'assets', 'themeInfo.json'); | ||
20 | |||
21 | // Parse and extract the rules from a CSS stylesheet file | ||
22 | async function getRulesFromCssFile(file) { | ||
23 | const cssSrc = (await fs.readFile(file)).toString(); | ||
24 | const cssTree = css.parse(cssSrc); | ||
25 | |||
26 | return cssTree.stylesheet?.rules; | ||
27 | } | ||
28 | |||
29 | /** | ||
30 | * Get all selectors from a list of parsed CSS rules that set any property to one of the specified | ||
31 | * values. | ||
32 | * | ||
33 | * This function will output an object in this format: | ||
34 | * { | ||
35 | * 'property-name': [ array of selectors ] | ||
36 | * } | ||
37 | * | ||
38 | * e.g. | ||
39 | * { | ||
40 | * 'background-color': [ | ||
41 | * '.background', | ||
42 | * '.input-dark' | ||
43 | * ] | ||
44 | * } | ||
45 | * | ||
46 | * @param {Array} rules Rules as outputted by the `css` module | ||
47 | * @param {Array} values Array of values that should be searched for | ||
48 | */ | ||
49 | function getSelectorsDeclaringValues(rules, values) { | ||
50 | const output = {}; | ||
51 | |||
52 | for (const rule of rules) { | ||
53 | if (rule.declarations) { | ||
54 | for (const declaration of rule.declarations) { | ||
55 | if ( | ||
56 | declaration.type === 'declaration' && | ||
57 | values.includes(declaration.value.toLowerCase()) | ||
58 | ) { | ||
59 | if (!output[declaration.property]) { | ||
60 | output[declaration.property] = []; | ||
61 | } | ||
62 | // eslint-disable-next-line unicorn/prefer-spread | ||
63 | output[declaration.property] = output[declaration.property].concat( | ||
64 | rule.selectors, | ||
65 | ); | ||
66 | } | ||
67 | } | ||
68 | } | ||
69 | } | ||
70 | |||
71 | return output; | ||
72 | } | ||
73 | |||
74 | async function generateThemeInfo() { | ||
75 | if (!(await fs.pathExists(cssFile))) { | ||
76 | console.log('Please make sure to build the project first.'); | ||
77 | return; | ||
78 | } | ||
79 | |||
80 | // Read and parse css bundle | ||
81 | const rules = await getRulesFromCssFile(cssFile); | ||
82 | |||
83 | console.log(`Found ${rules?.length} rules`); | ||
84 | |||
85 | // Get rules specifying the brand colors | ||
86 | const brandRules = getSelectorsDeclaringValues(rules, accentColors); | ||
87 | |||
88 | console.log( | ||
89 | `Found ${Object.keys(brandRules).join( | ||
90 | ', ', | ||
91 | )} properties that set color to brand color`, | ||
92 | ); | ||
93 | |||
94 | // Join array of declarations into a single string | ||
95 | for (const rule of Object.keys(brandRules)) { | ||
96 | brandRules[rule] = brandRules[rule].join(', '); | ||
97 | } | ||
98 | |||
99 | // Write object with theme info to file | ||
100 | fs.writeFile(outputFile, JSON.stringify(brandRules)); | ||
101 | } | ||
102 | |||
103 | generateThemeInfo(); | ||