chore: script for å gjøre om fra json til css. Ikke ferdig.

SpareBank1 · Jan 7, 2025 · 1c77a33 · 1c77a33
1 parent 5288f8d
commit 1c77a33
Show file tree

Hide file tree

Showing 6 changed files with 18,703 additions and 25 deletions.
diff --git a/packages/ffe-core/scripts/build.js b/packages/ffe-core/scripts/build.js
@@ -1,11 +1,7 @@
 #!/usr/bin/env node
+const fs = require('fs');
 const path = require('path');
 
-const writeToFile = require('./lib/writeToFile');
-const renderLessVarsToCSSProps = require('./lib/renderLessVarsToCSSProps');
-const extractCustomProps = require('./lib/extractCustomProps');
-const { genTSSource, genTSModIndex } = require('./lib/genTypeScript');
-
 const configFilePath = process.argv[2];
 
 if (!configFilePath) {
@@ -14,25 +10,77 @@ if (!configFilePath) {
 }
 
 const config = require(path.resolve(configFilePath));
-const lessFiles = config.sources.map(p => path.resolve(p));
+const tokenFiles = fs
+    .readdirSync(path.resolve('tokens'))
+    .filter(file => file.endsWith('.json'));
 
-const basename = fname => path.basename(fname, '.less');
 const cssFilePathFor = fname =>
-    path.join(config.output.css, `${basename(fname)}.css`);
-const tsFilePathFor = fname =>
-    path.join(config.output.typescript, `${basename(fname)}.ts`);
-
-const pipeline = lessFile =>
-    renderLessVarsToCSSProps(lessFile)
-        .then(writeToFile(cssFilePathFor(lessFile)))
-        .then(extractCustomProps)
-        .then(genTSSource)
-        .then(writeToFile(tsFilePathFor(lessFile)));
-
-Promise.all(lessFiles.map(pipeline))
-    .then(() => genTSModIndex(lessFiles.map(basename)))
-    .then(writeToFile(path.join(config.output.typescript, 'index.ts')))
-    .catch(err => {
-        console.error(err);
-        process.exit(1);
-    });
+    path.join(config.output.css, `${path.basename(fname, '.json')}.css`);
+
+const convertPrimitivesJsonToCss = jsonFile => {
+    const jsonContent = JSON.parse(fs.readFileSync(jsonFile, 'utf8'));
+    const cssLines = [];
+
+    const processColorTokens = (obj, prefix = '') => {
+        for (const [key, value] of Object.entries(obj)) {
+            if (value.$type === 'color') {
+                const cssVarName = `--ffe-color-${prefix}${key}`.replace(
+                    /\./g,
+                    '-',
+                );
+                cssLines.push(`${cssVarName}: ${value.$value};`);
+            } else if (typeof value === 'object') {
+                processColorTokens(value, `${prefix}${key}-`);
+            }
+        }
+    };
+
+    if (jsonContent.color) {
+        processColorTokens(jsonContent.color);
+    }
+
+    const cssContent = `:root,\n:host {\n${cssLines.join('\n')}\n}`;
+    const cssFilePath = cssFilePathFor(jsonFile);
+
+    fs.writeFileSync(cssFilePath, cssContent);
+};
+
+const convertSemanticJsonToCss = jsonFile => {
+    const jsonContent = JSON.parse(fs.readFileSync(jsonFile, 'utf8'));
+    const cssLines = [];
+
+    const processColorTokens = (obj, prefix = '') => {
+        for (const [key, value] of Object.entries(obj)) {
+            if (value.$type === 'color') {
+                let cssVarName = `--ffe-${prefix}${key}`.replace(/\./g, '-');
+                cssVarName = cssVarName.replace(/-color-/g, '-');
+                const cssVarValue = value.$value.startsWith('{')
+                    ? `var(--ffe-${value.$value
+                          .slice(1, -1)
+                          .replace(/\./g, '-')
+                          .replace(/-color-/g, '-')})`
+                    : value.$value;
+                cssLines.push(`${cssVarName}: ${cssVarValue};`);
+            } else if (typeof value === 'object') {
+                processColorTokens(value, `${prefix}${key}-`);
+            }
+        }
+    };
+
+    processColorTokens(jsonContent);
+
+    const cssContent = `:root,\n:host {\n${cssLines.join('\n')}\n}`;
+    const cssFilePath = cssFilePathFor(jsonFile);
+
+    fs.writeFileSync(cssFilePath, cssContent);
+};
+
+tokenFiles.forEach(tokenFile => {
+    const jsonFilePath = path.resolve('tokens', tokenFile);
+    if (tokenFile.includes('Primitive')) {
+        console.log("Converting Primitives JSON to CSS");
+        convertPrimitivesJsonToCss(jsonFilePath);
+    } else if (tokenFile.includes('Semantic')) {
+        convertSemanticJsonToCss(jsonFilePath);
+    }
+});