aboutsummaryrefslogtreecommitdiffstats
path: root/scripts/build-theme-info.js
diff options
context:
space:
mode:
Diffstat (limited to 'scripts/build-theme-info.js')
-rw-r--r--scripts/build-theme-info.js103
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 */
6const css = require('css');
7const fs = require('fs-extra');
8const path = require('path');
9const theme = require('@meetfranz/theme');
10
11// Colors that should be replaced with the accent color
12const accentColors = [
13 theme.DEFAULT_ACCENT_COLOR.toLowerCase(),
14 '#7367f0',
15 '#5e50ee',
16];
17
18const cssFile = path.join(__dirname, '..', '..', 'build', 'styles', 'main.css');
19const outputFile = path.join(__dirname, '..', 'assets', 'themeInfo.json');
20
21// Parse and extract the rules from a CSS stylesheet file
22async 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 */
49function 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
74async 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
103generateThemeInfo();