fix: correct src file order by file compression value

Author: alexandrstudio

index.test.js

@@ -9,25 +9,53 @@ async function run (input, output, opts = {}) {
   expect(result.warnings()).toHaveLength(0);
 }
 
-test('sortFiles sorts files by extension alphabetically', () => {
-  const files = [
-    {name: 'file3', ext: 'c'},
-    {name: 'file1', ext: 'a'},
-    {name: 'file4', ext: 'd'},
-    {name: 'file5', ext: 'd'},
-    {name: 'file2', ext: 'b'},
-  ];
-  const expectedOrder = [
-    {name: 'file1', ext: 'a'},
-    {name: 'file2', ext: 'b'},
-    {name: 'file3', ext: 'c'},
-    {name: 'file4', ext: 'd'},
-    {name: 'file5', ext: 'd'},
-  ];
-  const sortedFiles = files.sort(sortFiles);
-  expect(sortedFiles).toEqual(expectedOrder);
+describe('sortFiles', () => {
+  it('should sort files based on weights', () => {
+    const files = [
+      { name: 'file1', ext: 'ttf' },
+      { name: 'file2', ext: 'woff2' },
+      { name: 'file3', ext: 'woff' },
+      { name: 'file4', ext: 'otf' },
+    ];
+
+    const sortedFiles = files.sort(sortFiles);
+
+    expect(sortedFiles).toEqual([
+      { name: 'file2', ext: 'woff2' },
+      { name: 'file3', ext: 'woff' },
+      { name: 'file1', ext: 'ttf' },
+      { name: 'file4', ext: 'otf' },
+    ]);
+  });
+
+  it('should sort files with the same weight based on extension', () => {
+    const files = [
+      { name: 'file1', ext: 'woff' },
+      { name: 'file2', ext: 'woff2' },
+      { name: 'file3', ext: 'otf' },
+      { name: 'file4', ext: 'ttf' },
+      { name: 'file5', ext: 'woff2' },
+      { name: 'file6', ext: 'ttf' },
+      { name: 'file7', ext: 'woff' },
+      { name: 'file8', ext: 'otf' },
+    ];
+
+    const sortedFiles = files.sort(sortFiles);
+
+    expect(sortedFiles).toEqual([
+      { name: 'file2', ext: 'woff2' },
+      { name: 'file5', ext: 'woff2' },
+      { name: 'file1', ext: 'woff' },
+      { name: 'file7', ext: 'woff' },
+      { name: 'file4', ext: 'ttf' },
+      { name: 'file6', ext: 'ttf' },
+      { name: 'file3', ext: 'otf' },
+      { name: 'file8', ext: 'otf' },
+    ]);
+  });
 });
 
+describe('Generate font-face', () => {
 it('The console should display a warning message when no font files are found in the given directory', async () => {
   const result = await postcss([plugin({ fontsDir: './fonts/empty/' })]).process('', { from: undefined });
   expect(result.warnings()).toHaveLength(1);
@@ -36,7 +64,7 @@ it('The console should display a warning message when no font files are found in
 it('Create default output from files in font folder', async () => {
   const output = `@font-face {
     font-family: "Prague";
-    src: local("Prague"), url("/fonts/Prague-Black.woff") format("woff"), url("/fonts/Prague-Black.woff2") format("woff2");
+    src: local("Prague"), url("/fonts/Prague-Black.woff2") format("woff2"), url("/fonts/Prague-Black.woff") format("woff");
     font-weight: 900;
     font-style: normal;
     font-display: swap
@@ -47,7 +75,7 @@ it('Create default output from files in font folder', async () => {
 it('Create output from files in font folder without swap option', async () => {
   const output = `@font-face {
     font-family: "Prague Special";
-    src: local("Prague Special"), url("/fonts/PragueSpecial-ExtraLightItalic.ttf") format("ttf"), url("/fonts/PragueSpecial-ExtraLightItalic.woff") format("woff"), url("/fonts/PragueSpecial-ExtraLightItalic.woff2") format("woff2");
+    src: local("Prague Special"), url("/fonts/PragueSpecial-ExtraLightItalic.woff2") format("woff2"), url("/fonts/PragueSpecial-ExtraLightItalic.woff") format("woff"), url("/fonts/PragueSpecial-ExtraLightItalic.ttf") format("ttf");
     font-weight: 200;
     font-style: italic
 }`;
@@ -57,9 +85,10 @@ it('Create output from files in font folder without swap option', async () => {
 it('Create output from files in font folder without swap and local option', async () => {
   const output = `@font-face {
     font-family: "Prague Special";
-    src: url("/fonts/PragueSpecial-ExtraLightItalic.ttf") format("ttf"), url("/fonts/PragueSpecial-ExtraLightItalic.woff") format("woff"), url("/fonts/PragueSpecial-ExtraLightItalic.woff2") format("woff2");
+    src: url("/fonts/PragueSpecial-ExtraLightItalic.woff2") format("woff2"), url("/fonts/PragueSpecial-ExtraLightItalic.woff") format("woff"), url("/fonts/PragueSpecial-ExtraLightItalic.ttf") format("ttf");
     font-weight: 200;
     font-style: italic
 }`;
   await run('', output, { fontsDir: './fonts/PragueSpecial/', swap: false, local: false });
 });
+});

package.json

@@ -1,6 +1,6 @@
 {
   "name": "postcss-fontify",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "description": "PostCSS plugin for generating font-face declarations from font files in a directory.",
   "keywords": [
     "postcss",

utils.js

@@ -1,12 +1,12 @@
 const sortFiles = (a, b) => {
-  if (a.ext < b.ext) {
-    return -1;
-  }
-  if (a.ext > b.ext) {
-    return 1;
+  const weights = { woff2: 4, woff: 3, ttf: 2, otf: 1 };
+  const weightA = weights[a.ext];
+  const weightB = weights[b.ext];
+
+  if (weightA !== weightB) {
+    return weightB - weightA;
   }
-  return 0;
-}
+};
 
 module.exports = {
   sortFiles,