PR Changes

Author: MarcusNotheis

config/jestsetup.ts

@@ -1,5 +1,5 @@
-import contentLoaderSerializer from '@shared/tests/serializer/content-loader-serializer.js';
-import jssSerializer from '@shared/tests/serializer/jss-snapshot-serializer';
+import contentLoaderSerializer from '@shared/tests/serializer/content-loader-serializer.cjs';
+import jssSerializer from '@shared/tests/serializer/jss-snapshot-serializer.cjs';
 import '@testing-library/jest-dom';
 import Enzyme from 'enzyme';
 import Adapter from 'enzyme-adapter-react-16';
@@ -27,11 +27,17 @@ expect.addSnapshotSerializer(
   createSerializer({
     map: (el) => {
       // @ts-ignore
-      el.node && el.node.attribs && el.node.attribs.theme && delete el.node.attribs.theme;
+      el.node &&
+        el.node.attribs &&
+        el.node.attribs.theme &&
+        delete el.node.attribs.theme;
       // @ts-ignore
-      el.node && el.node.attribs && el.node.attribs.classes && delete el.node.attribs.classes;
+      el.node &&
+        el.node.attribs &&
+        el.node.attribs.classes &&
+        delete el.node.attribs.classes;
       return el;
-    }
+    },
   })
 );
 expect.addSnapshotSerializer(jssSerializer);
@@ -48,8 +54,8 @@ export const setupMatchMedia = () => {
       removeListener: jest.fn(), // deprecated
       addEventListener: jest.fn(),
       removeEventListener: jest.fn(),
-      dispatchEvent: jest.fn()
-    }))
+      dispatchEvent: jest.fn(),
+    })),
   });
 };
 

packages/base/scripts/cssVariables/parse.js

@@ -0,0 +1,29 @@
+const { writeFileSync } = require('fs');
+const {
+  root: ThemingParameters,
+} = require('@sap-theming/theming-base-content/content/Base/baseLib/sap_fiori_3/variables.json');
+const PATHS = require('../config/paths');
+const path = require('path');
+const prettier = require('prettier');
+const prettierConfig = require('../prettier.config');
+
+let fileContent = `/* eslint-disable camelcase */
+
+/* 
+ * ### WARNING ### 
+ * This is an autogenerated file, do not change manually. 
+ * In order to recreate this file, please run 'node scripts/generate-theming-parameters.js'
+ */
+
+`;
+
+fileContent += 'export const ThemingParameters = {\n';
+for (const variable in ThemingParameters) {
+  fileContent += `  '${variable}': 'var(--${variable})',\n`;
+}
+fileContent += '}\n';
+
+writeFileSync(
+  path.join(PATHS.packages, 'base', 'src', 'styling', 'ThemingParameters.ts'),
+  prettier.format(fileContent, { ...prettierConfig, parser: 'typescript' })
+);

scripts/generate-theming-parameters.js

@@ -0,0 +1,19 @@
+module.exports = {
+  test(value) {
+    return (value && typeof value === 'string' && /url\(/.test(value)) || /-aria$/.test(value) || /-diff$/.test(value);
+  },
+
+  print(value, serialize) {
+    if (/-aria$/.test(value)) {
+      value = 'TITLE_ARIA_ID';
+    }
+
+    value = value.replace(/url\((.*)\)/, 'STYLE-URL');
+
+    if (/-diff$/.test(value)) {
+      value = 'DIFF_ID';
+    }
+
+    return serialize(value);
+  }
+};

shared/tests/serializer/content-loader-serializer.cjs

@@ -52,21 +52,23 @@ const replaceJssClassNames = (elements) => {
   });
 };
 
-export function test(value) {
-  // apply the serializer only to react elements that we haven't marked(processed) before
-  return value && !value[MARKER] && value.$$typeof === Symbol.for('react.test.json');
-}
+module.exports = {
+  test(value) {
+    // apply the serializer only to react elements that we haven't marked(processed) before
+    return value && !value[MARKER] && value.$$typeof === Symbol.for('react.test.json');
+  },
 
-export function print(value, serialize) {
-  // collect all react element nodes in the tree of the value
-  const elements = collectElements(value);
+  print(value, serialize) {
+    // collect all react element nodes in the tree of the value
+    const elements = collectElements(value);
 
-  // mark the collected element nodes to avoid processing them several times
-  markElements(elements);
+    // mark the collected element nodes to avoid processing them several times
+    markElements(elements);
 
-  // remove the non-deterministic part from the JSS class names
-  // to keep the snapshots repeatable
-  replaceJssClassNames(elements);
+    // remove the non-deterministic part from the JSS class names
+    // to keep the snapshots repeatable
+    replaceJssClassNames(elements);
 
-  return serialize(value);
-}
+    return serialize(value);
+  }
+};