From e5108c4b64724928b32537ee47af7423d339c4ac Mon Sep 17 00:00:00 2001
From: Lewis Dale <lewis.dale@fortacode.co.uk>
Date: Sun, 1 Dec 2024 21:27:25 +0000
Subject: [PATCH] test: add tests for font.css.template changes

---
 .changeset/two-islands-dance.md               |   5 +
 .../__snapshots__/fontsCSS.test.snap.js       |  35 ++++++
 __tests__/formats/fontsCSS.test.js            | 102 ++++++++++++++++++
 .../templates/css/fonts.css.template.js       |   4 +-
 4 files changed, 144 insertions(+), 2 deletions(-)
 create mode 100644 .changeset/two-islands-dance.md
 create mode 100644 __tests__/formats/__snapshots__/fontsCSS.test.snap.js
 create mode 100644 __tests__/formats/fontsCSS.test.js

diff --git a/.changeset/two-islands-dance.md b/.changeset/two-islands-dance.md
new file mode 100644
index 000000000..85b586a84
--- /dev/null
+++ b/.changeset/two-islands-dance.md
@@ -0,0 +1,5 @@
+---
+'style-dictionary': patch
+---
+
+Fix font-style and font-weight logic for fonts.css.template.js
diff --git a/__tests__/formats/__snapshots__/fontsCSS.test.snap.js b/__tests__/formats/__snapshots__/fontsCSS.test.snap.js
new file mode 100644
index 000000000..5f5f1f662
--- /dev/null
+++ b/__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 */
+
diff --git a/__tests__/formats/fontsCSS.test.js b/__tests__/formats/fontsCSS.test.js
new file mode 100644
index 000000000..bc7474525
--- /dev/null
+++ b/__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();
+    });
+  });
+});
diff --git a/lib/common/templates/css/fonts.css.template.js b/lib/common/templates/css/fonts.css.template.js
index 31ba104c5..31efab3ac 100644
--- a/lib/common/templates/css/fonts.css.template.js
+++ b/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` : ''
     }}`;
   })}`;