Fix false usage of themeMap (#25)

* Fix false usage of themeMap * Simplify and format code Co-authored-by: Teemu Taskula <[email protected]>
Temzasse · Jun 5, 2022 · 300f515 · 300f515
1 parent f555d71
commit 300f515
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 13 deletions.
diff --git a/src/internals/constants.js b/src/internals/constants.js
@@ -102,18 +102,18 @@ export const BORDER_STYLE_PROPERTIES = {
 };
 
 export const DEFAULT_THEME_MAP = {
-  borderStyles: BORDER_STYLE_PROPERTIES,
-  borderWidths: BORDER_WIDTH_PROPERTIES,
-  colors: COLOR_PROPERTIES,
-  fonts: FONT_PROPERTIES,
-  fontSizes: FONT_SIZE_PROPERTIES,
-  fontWeights: FONT_WEIGHT_PROPERTIES,
-  letterSpacings: LETTER_SPACING_PROPERTIES,
-  lineHeights: LINE_HEIGHT_PROPERTIES,
-  radii: RADII_PROPERTIES,
-  sizes: SIZE_PROPERTIES,
-  space: SPACE_PROPERTIES,
-  zIndices: Z_INDEX_PROPERTIES,
+  ...BORDER_STYLE_PROPERTIES,
+  ...BORDER_WIDTH_PROPERTIES,
+  ...COLOR_PROPERTIES,
+  ...FONT_PROPERTIES,
+  ...FONT_SIZE_PROPERTIES,
+  ...FONT_WEIGHT_PROPERTIES,
+  ...LETTER_SPACING_PROPERTIES,
+  ...LINE_HEIGHT_PROPERTIES,
+  ...RADII_PROPERTIES,
+  ...SIZE_PROPERTIES,
+  ...SPACE_PROPERTIES,
+  ...Z_INDEX_PROPERTIES,
 };
 
 const THEME_VALUES = {

diff --git a/src/internals/utils.js b/src/internals/utils.js
@@ -58,6 +58,22 @@ export function resolveMediaRangeQuery(query, windowWidth) {
   return result;
 }
 
+export function processThemeMap(themeMap) {
+  const definition = {};
+
+  Object.keys(themeMap).forEach((token) => {
+    const scale = themeMap[token];
+
+    if (!definition[scale]) {
+      definition[scale] = {};
+    }
+
+    definition[scale][token] = scale;
+  });
+
+  return definition;
+}
+
 export function processTheme(theme) {
   const definition = {};
   const values = {};
@@ -88,7 +104,8 @@ export function processTheme(theme) {
 }
 
 export function processStyles({ styles, theme, config }) {
-  const { utils, themeMap = DEFAULT_THEME_MAP } = config;
+  const { utils, themeMap: customThemeMap } = config;
+  const themeMap = processThemeMap(customThemeMap || DEFAULT_THEME_MAP);
 
   return Object.entries(styles).reduce((acc, [key, val]) => {
     if (utils && key in utils) {