add: variable font support

Author: alexandrstudio

.gitignore

@@ -1,3 +1,4 @@
+.DS_Store
 node_modules/
 npm-debug.log
 yarn-error.log

CHANGELOG.md

@@ -5,7 +5,11 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
-## [Unreleased]
+## [1.1.0] - 2023-04-08
+
+### Added
+
+- Variable font support.
 
 ## [1.0.3] - 2023-04-06
 

README.md

@@ -6,8 +6,26 @@
 
 Only font files with extensions woff2, woff, ttf, and otf will be recognized and used by the plugin. Any other files with different extensions in the same directory will not be considered. Additionally, the files in the directory must be named in accordance with a specific convention.
 
+### Filename convetion
+
 The filename should have two parts. The first part should consist of the font name or font names written without any spaces and with the first letter of each word capitalized. The second part should be separated by a hyphen sign (-) and should contain the font weight and font style. The font style should only be included when the font is italic. The font weight can be one of the following: `Thin`, `ExtraLight`, `Light`, `Regular`, `Medium`, `SemiBold`, `Bold`, `ExtraBold` and `Black`. The two parts should be separated again by a capital letter. For example: `PragueSpecial-SemiBoldItalic.woff2.`
 
+### Variable fonts
+
+Fontify supports Variable Fonts, a new font technology that enables designers and developers to create a single font file with multiple variations of the font, including different weights, styles, and other properties. This technology allows for a more efficient and flexible way of delivering fonts to websites and other digital applications, reducing the file size and allowing for a more customized user experience.
+
+The Variable Fonts page on the Adobe Type team's official website provides a more detailed explanation and examples: [https://typekit.com/variablefonts](https://typekit.com/variablefonts).
+
+To correctly define the @font-face, Variable Fonts are only supported in the `woff2` format and require additional information about the `font-weight` range, which is expressed as number values. The name convention for Variable Fonts requires the keyword 'Var' followed by the font-weight start and end value, separated by an underscore.
+
+If you need to determine which weights your Variable Fonts support or convert Variable font `ttf` to `woff2`, here are some helpful links:
+
+- [Axis Praxis](https://www.axis-praxis.org/) A website for playing with OpenType Variable Fonts
+- [Wakamai Fondue](https://wakamaifondue.com/) A tool for revealing all font information
+- [V-Fonts](https://v-fonts.com/) A simple resource for finding and trying variable fonts
+- [Every Things Fonts](https://everythingfonts.com/ttf-to-woff2)A font converter and compression tool
+- [Woff2 Converter](https://github.com/google/woff2) A command line font compression tool from Google
+
 ## Input
 
 From the font files in the specified folder:
@@ -21,6 +39,7 @@ From the font files in the specified folder:
 │   │   ├── PragueSpecial-SemiBoldItalic.ttf
 │   │   ├── PragueSpecial-SemiBold.woff2
 │   │   ├── PragueSpecial-SemiBold.woff
+│   │   ├── PragueVariable-Var100_900.woff2
 ```
 
 ## Output
@@ -48,6 +67,15 @@ The following `@font-face` declaration is created:
   font-weight: 600;
   font-display: swap;
 }
+
+@font-face {
+  family-name: "Prague Variable";
+  src: local("Prague Variable"),
+       url("/fonts/PragueVariable-SemiBold.woff2") format("woff2-variations");
+  font-style: normal;
+  font-weight: 100 900;
+  font-display: swap;
+}
 ```
 
 The font folder can contain multiple font files with the same name and different formats. They will be all used in the `src` property.

fonts/PragueSpecial/PragueSpecial-ExtraLightItalic.eot renamed to fonts/Prague/Prague-Var.woff2

@@ -27,7 +27,7 @@ module.exports = (opts = {}) => {
   };
 
   return {
-    postcssPlugin: 'postcss-font-face-generator',
+    postcssPlugin: 'postcss-fontify',
 
     Root (root, postcss) {
         const fontsDir = options.fontsDir;
@@ -39,51 +39,60 @@ module.exports = (opts = {}) => {
 
         const fontFamilies = new Map();
 
-        fontFiles.forEach((file) => {
-          const ext = path.extname(file);
-          const fontName = path.basename(file, ext);
+        fontFiles.forEach(file => {
+          const extension = path.extname(file);
+          const fileName = path.basename(file, extension);
           const relativePath = path.relative(fontsDir, file);
-          const fontFilePath = path.join(options.fontPath, relativePath);
+          const srcPath = path.join(options.fontPath, relativePath);
 
+          let [font, style] = fileName.split('-');
+          const fontFamily = font.replace(/([a-z])([A-Z])/g, '$1 $2');
           let fontWeight = '400';
           let fontStyle = 'normal';
-          let fontFamily = fontName;
+          let srcFormat = extension;
 
-          if (fontName.includes('-')) {
-            const parts = fontName.split('-');
-            fontFamily = parts[0];
+          if (style && style.includes('Italic')) {
+            fontStyle = 'italic';
+            style = style.replace('Italic', '');
+          }
+
+          if (style && style.includes('Var')) {
+            const [start = Number.NaN, end = Number.NaN] = style.split('Var')[1].split('_').map(x => x === '' ? Number.NaN : Number(x));
 
-            if (parts[1].includes('Italic')) {
-              fontStyle = 'italic';
-              fontWeight = parts[1].replace('Italic', '');
-            } else {
-              fontWeight = parts[1];
+            if (!Object.is(start, Number.NaN) && !Object.is(end, Number.NaN)) {
+              fontWeight = `${start} ${end}`;
             }
 
-            fontWeightMap[fontWeight] ? fontWeight = fontWeightMap[fontWeight] : fontWeight;
+            if (!Object.is(start, Number.NaN) && Object.is(end, Number.NaN)) {
+              fontWeight = `${start}`;
+            }
+
+            srcFormat = 'woff2-variations';
           }
 
-          fontFamily = fontFamily.replace(/([a-z])([A-Z])/g, '$1 $2');
+          if (style && fontWeightMap[style]) {
+            fontWeight = fontWeightMap[style];
+          }
 
-          if (!fontFamilies.has(fontName)) {
-            fontFamilies.set(fontName, {
+          if (!fontFamilies.has(fileName)) {
+            fontFamilies.set(fileName, {
               fontFamily,
-              fontFile: [{ ext, fontFilePath }],
+              fontSrc: [{ srcFormat, srcPath }],
               fontWeight,
               fontStyle
             });
           } else {
-            const font = fontFamilies.get(fontName);
+            const font = fontFamilies.get(fileName);
 
-            if (!font.fontFile.some(obj => obj.ext === ext)) {
-              font.fontFile.push({ ext, fontFilePath });
+            if (!font.fontSrc.some(obj => obj.srcFormat === srcFormat)) {
+              font.fontSrc.push({ srcFormat, srcPath });
             }
-            fontFamilies.set(fontName, font);
+            fontFamilies.set(fileName, font);
           }
         });
 
         fontFamilies.forEach((fontFace) => {
-          let fontSrc = fontFace.fontFile.sort(sortFiles).map((fontFile) => `url("${fontFile.fontFilePath}") format("${fontFile.ext.slice(1)}")`).join(', ').toString();
+          let fontSrc = fontFace.fontSrc.sort(sortFiles).map((src) => `url("${src.srcPath}") format("${src.srcFormat.slice(1)}")`).join(', ').toString();
 
           if (options.local) {
             fontSrc = `local("${fontFace.fontFamily}"), ${fontSrc}`;

fonts/readme.md renamed to fonts/Prague/Prague-Var0_1000.woff2

@@ -12,45 +12,45 @@ async function run (input, output, opts = {}) {
 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' },
+      { name: 'file1', srcFormat: 'ttf' },
+      { name: 'file2', srcFormat: 'woff2' },
+      { name: 'file3', srcFormat: 'woff' },
+      { name: 'file4', srcFormat: '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' },
+      { name: 'file2', srcFormat: 'woff2' },
+      { name: 'file3', srcFormat: 'woff' },
+      { name: 'file1', srcFormat: 'ttf' },
+      { name: 'file4', srcFormat: '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' },
+      { name: 'file1', srcFormat: 'woff' },
+      { name: 'file2', srcFormat: 'woff2' },
+      { name: 'file3', srcFormat: 'otf' },
+      { name: 'file4', srcFormat: 'ttf' },
+      { name: 'file5', srcFormat: 'woff2' },
+      { name: 'file6', srcFormat: 'ttf' },
+      { name: 'file7', srcFormat: 'woff' },
+      { name: 'file8', srcFormat: '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' },
+      { name: 'file2', srcFormat: 'woff2' },
+      { name: 'file5', srcFormat: 'woff2' },
+      { name: 'file1', srcFormat: 'woff' },
+      { name: 'file7', srcFormat: 'woff' },
+      { name: 'file4', srcFormat: 'ttf' },
+      { name: 'file6', srcFormat: 'ttf' },
+      { name: 'file3', srcFormat: 'otf' },
+      { name: 'file8', srcFormat: 'otf' },
     ]);
   });
 });
@@ -68,6 +68,34 @@ it('Create default output from files in font folder', async () => {
     font-weight: 900;
     font-style: normal;
     font-display: swap
+}
+@font-face {
+    font-family: "Prague";
+    src: local("Prague"), url("/fonts/Prague-Var.woff2") format("off2-variations");
+    font-weight: 400;
+    font-style: normal;
+    font-display: swap
+}
+@font-face {
+    font-family: "Prague";
+    src: local("Prague"), url("/fonts/Prague-Var0_1000.woff2") format("off2-variations");
+    font-weight: 0 1000;
+    font-style: normal;
+    font-display: swap
+}
+@font-face {
+    font-family: "Prague";
+    src: local("Prague"), url("/fonts/Prague-Var0_1000Italic.woff2") format("off2-variations");
+    font-weight: 0 1000;
+    font-style: italic;
+    font-display: swap
+}
+@font-face {
+    font-family: "Prague";
+    src: local("Prague"), url("/fonts/Prague-Var300.woff2") format("off2-variations");
+    font-weight: 300;
+    font-style: normal;
+    font-display: swap
 }`;
   await run('', output, { fontsDir: './fonts/Prague/' });
 });