fix: cli handling of shadows fixed and shadow parser improved

VLK-STUDIO · Oct 10, 2021 · 7cc1a0a · 7cc1a0a
1 parent cb93138
commit 7cc1a0a
Show file tree

Hide file tree

Showing 6 changed files with 26 additions and 19 deletions.
diff --git a/packages/cli/src/commands/build.ts b/packages/cli/src/commands/build.ts
@@ -95,15 +95,15 @@ export default class Build extends Command {
       configPath: config,
     });
 
-    themeKeys.forEach(currentTheme => {
+    for (const currentTheme of themeKeys) {
       const localTheme = require(path.join(
         process.cwd(),
         allThemes[currentTheme],
       ));
-
+      theme.reset();
       theme.set(localTheme.default ? localTheme.default : localTheme);
       buildTheme({ ...buildConfiguration, name: currentTheme });
-    });
+    }
 
     console.clear();
 

diff --git a/packages/cli/src/constants/maps.ts b/packages/cli/src/constants/maps.ts
@@ -25,4 +25,9 @@ export const SLICES_TO_BE_PARSED: SliceToBeParsed[] = [
     styleProp: 'bgGradient',
     property: 'background',
   },
+  {
+    name: 'borders',
+    styleProp: 'border',
+    property: 'border',
+  },
 ];
diff --git a/packages/core/src/parsers/shadows.ts b/packages/core/src/parsers/shadows.ts
@@ -1,11 +1,11 @@
 import { ParserParams, SliceParsers } from '../types';
 import {
+  BorderWidth,
+  Opacity,
   Radius,
   Shadow,
   ShadowProperty,
   shadowsProperties,
-  Size,
-  Spacing,
 } from '@morfeo/spec';
 import { theme } from '../theme';
 
@@ -24,7 +24,9 @@ function firstValid(...params: (string | number | undefined)[]) {
 export function shadows({ value, property }: ParserParams<ShadowProperty>) {
   const config = theme.getValue('shadows', value as Shadow);
   if (!config) {
-    return {};
+    return {
+      [property]: value,
+    };
   }
 
   const color = config.color
@@ -33,13 +35,11 @@ export function shadows({ value, property }: ParserParams<ShadowProperty>) {
 
   const { width, height } = config.offset || { width: 0, height: 0 };
   const parsedWidth = firstValid(
-    theme.getValue('spacings', width as Spacing),
-    theme.getValue('sizes', width as Size),
+    theme.getValue('borderWidths', width as BorderWidth),
     width,
   );
   const parsedHeight = firstValid(
-    theme.getValue('spacings', height as Spacing),
-    theme.getValue('sizes', height as Size),
+    theme.getValue('borderWidths', height as BorderWidth),
     height,
   );
   const radius = firstValid(

diff --git a/packages/core/tests/parsers/shadows.test.ts b/packages/core/tests/parsers/shadows.test.ts
@@ -7,11 +7,9 @@ const THEME: Theme = {
     primary: 'white',
     secondary: 'white',
   },
-  spacings: {
+  borderWidths: {
     s: '10px',
     m: '20px',
-  },
-  sizes: {
     l: '30px',
     xl: '40px',
   },
@@ -79,9 +77,12 @@ describe('shadows', () => {
     });
   });
 
-  test('should return an empty object if the shadow is not found', () => {
-    const result = shadows({ property: 'boxShadow', value: 'none' });
-    expect(result).toEqual({});
+  test('should return the passed value if the shadow is not found', () => {
+    const result = shadows({
+      property: 'boxShadow',
+      value: 'invalid box shadow' as any,
+    });
+    expect(result).toEqual({ boxShadow: 'invalid box shadow' });
   });
 
   test('should use custom colors if they are not inside the theme', () => {

diff --git a/packages/spec/src/types/borders.ts b/packages/spec/src/types/borders.ts
@@ -49,6 +49,7 @@ export type BorderConfig = {
 };
 
 export interface Borders {
+  none: BorderConfig;
   primary: BorderConfig;
   secondary: BorderConfig;
 }

diff --git a/packages/spec/src/types/shadows.ts b/packages/spec/src/types/shadows.ts
@@ -1,14 +1,14 @@
 import { shadowsMap } from '../properties';
+import { BorderWidth } from './borders';
 import { Color } from './colors';
 import { Opacity } from './opacities';
 import { Radius } from './radii';
-import { Size } from './sizes';
 
 export interface ShadowConfig {
   color?: Color;
   offset?: {
-    width: Size;
-    height: Size;
+    width: BorderWidth;
+    height: BorderWidth;
   };
   radius?: Radius;
   opacity?: Opacity;