Implement #120v5.4.0-beta.1

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 @@
+/**
+ * Script to get information on which selectors use the brand color.
+ * This is needed to provide the accent color feature - the feature will create CSS rules
+ * to overwrite the color of these selectors.
+ */
+const css = require('css');
+const fs = require('fs-extra');
+const path = require('path');
+
+// Colors that should be replaced with the accent color
+const accentColors = [
+  '#7367f0',
+  '#5e50ee',
+];
+
+const cssFile = path.join(__dirname, '../../', 'build', 'styles', 'main.css');
+const outputFile = path.join(__dirname, '../', 'assets', 'themeInfo.json');
+
+// Parse and extract the rules from a CSS stylesheet file
+async function getRulesFromCssFile(file) {
+  const cssSrc = (await fs.readFile(file)).toString();
+  const cssTree = css.parse(cssSrc);
+
+  return cssTree.stylesheet.rules;
+}
+
+/**
+ * Get all selectors from a list of parsed CSS rules that set any property to one of the specified
+ * values.
+ * 
+ * This function will output an object in this format:
+ * {
+ *  'property-name': [ array of selectors ]
+ * }
+ * 
+ * e.g.
+ * {
+ *  'background-color': [
+ *   '.background',
+ *   '.input-dark'
+ *  ]
+ * }
+ * 
+ * @param {Array} rules Rules as outputted by the `css` module
+ * @param {Array} values Array of values that should be searched for
+ */
+function getSelectorsDeclaringValues(rules, values) {
+  const output = {};
+
+  rules.forEach((rule) => {
+    if (rule.declarations) {
+      rule.declarations.forEach((declaration) => {
+        if (declaration.type === 'declaration'
+            && values.includes(declaration.value.toLowerCase())) {
+          if (!output[declaration.property]) {
+            output[declaration.property] = [];
+          }
+          output[declaration.property] = output[declaration.property].concat(rule.selectors);
+        }
+      });
+    }
+  });
+
+  return output;
+}
+
+async function generateThemeInfo() {
+  if (!await fs.pathExists(cssFile)) {
+    console.log('Please make sure to build the project first.');
+    return;
+  }
+
+  // Read and parse css bundle
+  const rules = await getRulesFromCssFile(cssFile);
+
+  console.log(`Found ${rules.length} rules`);
+
+  // Get rules specifying the brand colors
+  const brandRules = getSelectorsDeclaringValues(rules, accentColors);
+
+  console.log(`Found ${Object.keys(brandRules).join(', ')} properties that set color to brand color`);
+
+  // Join array of declarations into a single string
+  Object.keys(brandRules).forEach((rule) => {
+    brandRules[rule] = brandRules[rule].join(', ');
+  });
+
+  // Write object with theme info to file
+  fs.writeFile(
+    outputFile,
+    JSON.stringify(brandRules),
+  );
+}
+
+generateThemeInfo();