fix(fonts): prettier

VLK-STUDIO · Jun 7, 2021 · c97f825 · c97f825
1 parent 68ba391
commit c97f825
Show file tree

Hide file tree

Showing 8 changed files with 102 additions and 91 deletions.
diff --git a/apps/svelte-sandbox/src/main.js b/apps/svelte-sandbox/src/main.js
@@ -5,12 +5,14 @@ import { lightTheme } from './theme';
 
 loadFont({
   importFontFace: true,
-  urls: [{
-    url: 'https://fonts.googleapis.com/css2?family=Roboto:wght@400&display=swap'
-  }],
+  urls: [
+    {
+      url: 'https://fonts.googleapis.com/css2?family=Roboto:wght@400&display=swap',
+    },
+  ],
   name: 'regular',
   family: 'Roboto',
-})
+});
 enableMorfeoDevTool();
 resetCss();
 theme.set(lightTheme);

diff --git a/apps/web-sandbox/src/theme.ts b/apps/web-sandbox/src/theme.ts
@@ -46,13 +46,13 @@ export const lightTheme = {
     m: '100px',
   },
   lineHeights: {
-    s: 1.7
+    s: 1.7,
   },
   letterSpacings: {
-    s: 1.6
+    s: 1.6,
   },
   fontSizes: {
-    s: '14px'
+    s: '14px',
   },
   sizes: {
     s: '10px',
@@ -153,7 +153,7 @@ export const lightTheme = {
         fontFamily: 'regular',
         fontSize: 's',
         lineHeight: 's',
-        letterSpacing: 's'
+        letterSpacing: 's',
       },
       variants: {
         h1: {

diff --git a/packages/fonts/src/index.ts b/packages/fonts/src/index.ts
@@ -1 +1 @@
-export * from './mountFont';
+export * from './mountFont';
diff --git a/packages/fonts/src/mountFont.ts b/packages/fonts/src/mountFont.ts
@@ -6,7 +6,7 @@ export type FontUrl = {
 };
 
 export type MountFontParams = {
-  name: string; 
+  name: string;
   urls: FontUrl[];
   family: string;
   /**
@@ -23,15 +23,15 @@ export function unmountFont(name: string) {
   if (currentFontStyle) {
     currentFontStyle.remove();
   }
-} 
+}
 
 /**
  * Mount a fontFace on document head style
- * 
+ *
  * ---
- * 
+ *
  * ### mount a google font
- * 
+ *
  * ```ts
  * mountFont({
  *   urls: [{
@@ -42,11 +42,11 @@ export function unmountFont(name: string) {
  *   name: 'bold',
  * })
  * ```
- * 
+ *
  * ---
- * 
+ *
  * ### mount a local font
- * 
+ *
  *  ```ts
  * mountFont({
  *   urls: [
@@ -68,15 +68,11 @@ export function unmountFont(name: string) {
 
 export function mountFont(font: MountFontParams) {
   let newFontFaceContent = '';
-
 
   if (font.importFontFace) {
     newFontFaceContent += `
-    @import ${font.urls.reduce(
-          (_, value) => `url(${value.url})`,
-          '',
-        )}
-    `
+    @import ${font.urls.reduce((_, value) => `url(${value.url})`, '')}
+    `;
   }
 
   if (!font.importFontFace) {
@@ -85,7 +81,10 @@ export function mountFont(font: MountFontParams) {
       font-family: ${font.family};
       ${font.weight ? `font-weight: ${font.weight};` : ''}
       url: ${font.urls.reduce(
-        (acc, value) => `${acc ? acc + '\n' : acc} url('${value.url}') ${value.format ? `format('${value.format}')` : ''}`,
+        (acc, value) =>
+          `${acc ? acc + '\n' : acc} url('${value.url}') ${
+            value.format ? `format('${value.format}')` : ''
+          }`,
         '',
       )}
     }
@@ -96,9 +95,9 @@ export function mountFont(font: MountFontParams) {
     <style id="font-${font.name}">
       ${newFontFaceContent}
     </style>
-  `
+  `;
 
-  unmountFont(font.name)
+  unmountFont(font.name);
 
-  document.head.innerHTML += newFontStyle
-}
+  document.head.innerHTML += newFontStyle;
+}
diff --git a/packages/fonts/tests/mountFont.test.ts b/packages/fonts/tests/mountFont.test.ts
@@ -2,58 +2,65 @@ import { mountFont, MountFontParams } from '../src';
 
 const newImportedFontFace: MountFontParams = {
   importFontFace: true,
-  urls: [{
-    url: 'https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap'
-  }],
+  urls: [
+    {
+      url: 'https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap',
+    },
+  ],
   name: 'bold',
   family: 'Roboto',
-}
+};
 
 const newFontFace: MountFontParams = {
-  urls: [{
-    url: 'https://fonts.googleapis.com/css2?family=Roboto:wght@700&display=swap',
-  }],
+  urls: [
+    {
+      url: 'https://fonts.googleapis.com/css2?family=Roboto:wght@700&display=swap',
+    },
+  ],
   name: 'bold',
   family: 'Roboto',
-}
+};
 
 const newFontWithFormat: MountFontParams = {
-  urls: [{
-    url: 'https://fonts.googleapis.com/css2?family=Roboto:wght@700&display=swap',
-    format: 'woff'
-  }, {
-    url: 'https://fonts.googleapis.com/css2?family=Roboto:wght@700&display=swap',
-    format: 'woff2'
-  }],
+  urls: [
+    {
+      url: 'https://fonts.googleapis.com/css2?family=Roboto:wght@700&display=swap',
+      format: 'woff',
+    },
+    {
+      url: 'https://fonts.googleapis.com/css2?family=Roboto:wght@700&display=swap',
+      format: 'woff2',
+    },
+  ],
   name: 'bold',
   family: 'Roboto',
-}
+};
 
 describe('mountFont', () => {
   describe('new fontFace', () => {
     test('should add a style with the fontFace definition', () => {
-      mountFont(newFontFace)
+      mountFont(newFontFace);
       const boldStyle = document.getElementById('font-bold');
       expect(boldStyle?.textContent).toContain('@fontFace');
-    })
+    });
 
     test('should set a style that contain font-weight', () => {
-      mountFont({ ...newFontFace, weight: 'bold' })
+      mountFont({ ...newFontFace, weight: 'bold' });
       const boldStyle = document.getElementById('font-bold');
       expect(boldStyle?.textContent).toContain('font-weight: bold');
-    })
+    });
 
     test('should set a style that contain format', () => {
-      mountFont(newFontWithFormat)
+      mountFont(newFontWithFormat);
       const boldStyle = document.getElementById('font-bold');
-      expect(boldStyle?.textContent).toContain('format(\'woff\')');
-    })
-  })
+      expect(boldStyle?.textContent).toContain("format('woff')");
+    });
+  });
   describe('imported fontFace', () => {
     test('should add a style with the fontface import', () => {
-      mountFont(newImportedFontFace)
+      mountFont(newImportedFontFace);
       const boldStyle = document.getElementById('font-bold');
       expect(boldStyle?.textContent).toContain('@import');
-    })
-  })
-})
+    });
+  });
+});
diff --git a/packages/web/src/index.ts b/packages/web/src/index.ts
@@ -2,7 +2,6 @@ import { parsers, Property } from '@morfeo/core';
 import { pseudosParses, gradientParsers } from './parsers';
 import { pseudosProperties } from './properties';
 
-
 pseudosProperties.forEach(property => {
   parsers.add(property as Property, pseudosParses[property] as any);
 });
@@ -20,4 +19,4 @@ export * from '@morfeo/core';
 /** re-export of @morfeo/jss */
 export * from '@morfeo/jss';
 /** re-export of @morfeo/fonts */
-export * from '@morfeo/fonts'
+export * from '@morfeo/fonts';
diff --git a/packages/web/src/utils/loadFont.ts b/packages/web/src/utils/loadFont.ts
@@ -1,14 +1,14 @@
-import { theme, Font } from "@morfeo/core";
+import { theme, Font } from '@morfeo/core';
 import { MountFontParams, mountFont } from '@morfeo/fonts';
 
-export type LoadFontParams = Omit<MountFontParams, 'name'> & { name: Font }
+export type LoadFontParams = Omit<MountFontParams, 'name'> & { name: Font };
 /**
  * Load a fontFace on document head style and add it to the morfeo theme
- * 
+ *
  * ---
- * 
+ *
  * ### load a google font
- * 
+ *
  * ```ts
  * loadFont({
  *   urls: [{
@@ -19,11 +19,11 @@ export type LoadFontParams = Omit<MountFontParams, 'name'> & { name: Font }
  *   name: 'bold',
  * })
  * ```
- * 
+ *
  * ---
- * 
+ *
  * ### load a local font
- * 
+ *
  *  ```ts
  * loadFont({
  *   urls: [
@@ -43,7 +43,7 @@ export type LoadFontParams = Omit<MountFontParams, 'name'> & { name: Font }
  * ```
  */
 
- export function loadFont(font: LoadFontParams) {
-  mountFont(font)
-  theme.setValue('fonts', font.name, font.family)
-};
+export function loadFont(font: LoadFontParams) {
+  mountFont(font);
+  theme.setValue('fonts', font.name, font.family);
+}
diff --git a/packages/web/tests/loadFont.test.ts b/packages/web/tests/loadFont.test.ts
@@ -3,37 +3,41 @@ import { theme } from '@morfeo/core';
 
 const newImportedFontFace: LoadFontParams = {
   importFontFace: true,
-  urls: [{
-    url: 'https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap'
-  }],
+  urls: [
+    {
+      url: 'https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap',
+    },
+  ],
   name: 'regular',
   family: 'Roboto',
-}
+};
 
 const newFontFace: LoadFontParams = {
-  urls: [{
-    url: 'https://fonts.googleapis.com/css2?family=Roboto:wght@700&display=swap',
-  }],
+  urls: [
+    {
+      url: 'https://fonts.googleapis.com/css2?family=Roboto:wght@700&display=swap',
+    },
+  ],
   name: 'bold',
   family: 'Roboto',
-}
+};
 
 beforeEach(() => {
-  theme.reset()
-})
+  theme.reset();
+});
 describe('loadFont', () => {
   describe('new fontFace', () => {
     test('should add a font on theme', () => {
-      loadFont(newFontFace)
-      const themeFont = theme.getValue('fonts', newFontFace.name)
-      expect(themeFont).toBe(newFontFace.family)
-    })
-  })
+      loadFont(newFontFace);
+      const themeFont = theme.getValue('fonts', newFontFace.name);
+      expect(themeFont).toBe(newFontFace.family);
+    });
+  });
   describe('imported fontFace', () => {
     test('should add a font on theme', () => {
-      loadFont(newImportedFontFace)
-      const themeFont = theme.getValue('fonts', newImportedFontFace.name)
-      expect(themeFont).toBe(newImportedFontFace.family)
-    })
-  })
-})
+      loadFont(newImportedFontFace);
+      const themeFont = theme.getValue('fonts', newImportedFontFace.name);
+      expect(themeFont).toBe(newImportedFontFace.family);
+    });
+  });
+});
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		export * from './mountFont';
		export * from './mountFont';