Fix: fonts.css template doesn't correctly parse the style or `weigh…

…t` options (#1399)

.changeset/two-islands-dance.md

@@ -0,0 +1,5 @@
+---
+'style-dictionary': patch
+---
+
+Fix font-style and font-weight logic for fonts.css.template.js

__tests__/formats/__snapshots__/fontsCSS.test.snap.js

@@ -0,0 +1,35 @@
+/* @web/test-runner snapshot v1 */
+export const snapshots = {};
+
+snapshots["formats fonts/css should produce a valid css font-face declaration without weight or style defined"] = 
+`@font-face {
+  font-family: "font";
+  src: url('../font.ttf') format('truetype');
+}`;
+/* end snapshot formats fonts/css should produce a valid css font-face declaration without weight or style defined */
+
+snapshots["formats fonts/css should produce a valid css font-face declaration with a weight defined"] = 
+`@font-face {
+  font-family: "font";
+  src: url('../font.ttf') format('truetype');
+  font-weight: 400;
+}`;
+/* end snapshot formats fonts/css should produce a valid css font-face declaration with a weight defined */
+
+snapshots["formats fonts/css should produce a valid css font-face declaration with a style defined"] = 
+`@font-face {
+  font-family: "font";
+  src: url('../font.ttf') format('truetype');
+  font-style: normal;
+}`;
+/* end snapshot formats fonts/css should produce a valid css font-face declaration with a style defined */
+
+snapshots["formats fonts/css should produce a valid css font-face declaration with both style and weight defined"] = 
+`@font-face {
+  font-family: "font";
+  src: url('../font.ttf') format('truetype');
+  font-style: normal;
+  font-weight: 400;
+}`;
+/* end snapshot formats fonts/css should produce a valid css font-face declaration with both style and weight defined */
+

__tests__/formats/fontsCSS.test.js

@@ -0,0 +1,102 @@
+import { expect } from 'chai';
+import cssFontsTemplate from '../../lib/common/templates/css/fonts.css.template.js';
+
+describe('formats', () => {
+  describe('fonts/css', () => {
+    it('should produce a valid css font-face declaration without weight or style defined', async () => {
+      const tokens = {
+        asset: {
+          font: {
+            myFont: {
+              name: {
+                value: 'font',
+                type: 'fontFamily',
+              },
+              ttf: {
+                value: 'font.ttf',
+                type: 'asset',
+              },
+            },
+          },
+        },
+      };
+      const output = cssFontsTemplate(tokens);
+      await expect(output).to.matchSnapshot();
+    });
+
+    it('should produce a valid css font-face declaration with a weight defined', async () => {
+      const tokens = {
+        asset: {
+          font: {
+            myFont: {
+              name: {
+                value: 'font',
+                type: 'fontFamily',
+              },
+              ttf: {
+                value: 'font.ttf',
+                type: 'asset',
+              },
+              weight: {
+                value: 400,
+              },
+            },
+          },
+        },
+      };
+      const output = cssFontsTemplate(tokens);
+      await expect(output).to.matchSnapshot();
+    });
+
+    it('should produce a valid css font-face declaration with a style defined', async () => {
+      const tokens = {
+        asset: {
+          font: {
+            myFont: {
+              name: {
+                value: 'font',
+                type: 'fontFamily',
+              },
+              ttf: {
+                value: 'font.ttf',
+                type: 'asset',
+              },
+              style: {
+                value: 'normal',
+              },
+            },
+          },
+        },
+      };
+      const output = cssFontsTemplate(tokens);
+      await expect(output).to.matchSnapshot();
+    });
+
+    it('should produce a valid css font-face declaration with both style and weight defined', async () => {
+      const tokens = {
+        asset: {
+          font: {
+            myFont: {
+              name: {
+                value: 'font',
+                type: 'fontFamily',
+              },
+              ttf: {
+                value: 'font.ttf',
+                type: 'asset',
+              },
+              style: {
+                value: 'normal',
+              },
+              weight: {
+                value: 400,
+              },
+            },
+          },
+        },
+      };
+      const output = cssFontsTemplate(tokens);
+      await expect(output).to.matchSnapshot();
+    });
+  });
+});

lib/common/templates/css/fonts.css.template.js

@@ -39,7 +39,7 @@ export default (tokens) =>
     return `@font-face {
   font-family: "${font.name.value}";
   src: ${fileFormatArr.join(',\n\t\t')};
-${font.style ?? `\n  font-style: ${font.style.value};`}${
-      font.weight ?? `\n  font-weight: ${font.weight.value};`
+${font.style ? `  font-style: ${font.style.value};\n` : ''}${
+      font.weight ? `  font-weight: ${font.weight.value};\n` : ''
     }}`;
   })}`;