feat: add open type formatter utility

README.md

@@ -9,13 +9,13 @@ This is a collection of transforms and formatters for adding support for `sets`
 
 for yarn:
 
-```
+```shell
 yarn add style-dictionary-sets
 ```
 
 for npm:
 
-```
+```shell
 npm install style-dictionary-sets
 ```
 
@@ -44,7 +44,7 @@ module.exports = {
 
 ```
 
-This will add the a `sets` array property to the `attributes` object on [`DesignToken`](https://github.com/amzn/style-dictionary/blob/main/types/DesignToken.d.ts) if a token path contains the keyword `sets`. The value added to the `sets` array is the subsequent string in the `path` object.
+This will add the `sets` array property to the `attributes` object on [`DesignToken`](https://github.com/amzn/style-dictionary/blob/main/types/DesignToken.d.ts) if a token path contains the keyword `sets`. The value added to the `sets` array is the subsequent string in the `path` object.
 
 #### Examples
 
@@ -181,3 +181,40 @@ Some of this functionality is still being updated and refined for specific uses.
 ### `css/sets` formatter
 
 WIP
+
+### `font/openType` formatter
+
+This utility converts font-weight values from standard [Open Type syntax](https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight#common_weight_name_mapping) into a CSS-safe format.
+
+| Value | Common weight name |
+| -- | -- |
+| 100 | Thin (Hairline) |
+| 200 | Extra Light (Ultra Light) |
+| 300 | Light |
+| 400 | Normal (Regular) |
+| 500 | Medium |
+| 600 | Semi Bold (Demi Bold) |
+| 700 | Bold |
+| 800 | Extra Bold (Ultra Bold) |
+| 900 | Black (Heavy) |
+| 950 | Extra Black (Ultra Black) |
+
+In the `config.js` bring in the transform, register it to Style Dictionary and add it to the `transforms` array.
+
+```js
+const StyleDictionary = require("style-dictionary");
+const CSSOpenTypeFormatter = require("style-dictionary-sets").CSSOpenTypeFormatter;
+
+StyleDictionary.registerTransform(CSSOpenTypeFormatter);
+
+module.exports = {
+  source: ["tokens/**/*.json"],
+  platforms: {
+    JSON: {
+      buildPath: "dist/json/",
+      transforms: [CSSOpenTypeFormatter.name],
+      files: ...
+    },
+  },
+};
+```

index.js

@@ -2,12 +2,14 @@ const JsonSetsFormatter = require("./lib/json-sets-formatter");
 const AttributeSetsTransform = require("./lib/attribute-sets-transform");
 const NameKebabTransfom = require("./lib/name-kebab-transform");
 const CSSSetsFormatter = require("./lib/css-sets-formatter.js");
+const CSSOpenTypeFormatter = require("./lib/css-font-open-type-formatter.js");
 const DroverJsonFormatter = require("./lib/drover-json-formatter.js");
 
 module.exports = {
   JsonSetsFormatter,
   AttributeSetsTransform,
   NameKebabTransfom,
   CSSSetsFormatter,
+  CSSOpenTypeFormatter,
   DroverJsonFormatter,
 };

lib/css-font-open-type-formatter.js

@@ -0,0 +1,18 @@
+module.exports = {
+  type: "value",
+  name: "font/openType",
+  matcher: (token) => token.name.includes("font-weight"),
+  transformer: (token) => {
+    return {
+      "light": "300",
+      "regular": "400",
+      "medium": "500",
+      "semibold": "600",
+      "semi-bold": "600",
+      "bold": "700",
+      "extrabold": "800",
+      "extra-bold": "800",
+      "black": "900"
+    }[token.value] || token.value;
+  },
+};

tests/css-formatter.test.js

@@ -2,13 +2,15 @@ const StyleDictionary = require("style-dictionary");
 const CSSSetsFormatter = require("../index").CSSSetsFormatter;
 const NameKebabTransfom = require("../index").NameKebabTransfom;
 const AttributeSetsTransform = require("../index").AttributeSetsTransform;
+const CSSOpenTypeFormatter = require("../index").CSSOpenTypeFormatter;
 const helpers = require("./helpers");
 
 const fs = require("fs");
 const path = require("path");
 
 StyleDictionary.registerTransform(NameKebabTransfom);
 StyleDictionary.registerTransform(AttributeSetsTransform);
+StyleDictionary.registerTransform(CSSOpenTypeFormatter);
 StyleDictionary.registerFormat(CSSSetsFormatter);
 
 const generateConfig = (filename) => {
@@ -17,7 +19,7 @@ const generateConfig = (filename) => {
     platforms: {
       CSS: {
         buildPath: helpers.outputDir,
-        transforms: [AttributeSetsTransform.name, NameKebabTransfom.name],
+        transforms: [AttributeSetsTransform.name, NameKebabTransfom.name, CSSOpenTypeFormatter.name],
         files: [
           {
             destination: `${filename}.css`,

tests/expected/basic.css

@@ -1,3 +1,4 @@
 :root {
   --component-size: 12px;
+  --component-black-font-weight: 900;
 }

tests/expected/basic.json

@@ -29,6 +29,23 @@
           "path": ["component", "size", "sets", "desktop"]
         }
       }
+    },
+    "black-font-weight": {
+      "sets": {
+        "spectrum": {
+          "attributes": {
+            "sets": ["spectrum"]
+          },
+          "filePath": "tests/fixtures/basic.json",
+          "isSource": true,
+          "original": {
+            "value": "black"
+          },
+          "name": "component-black-font-weight-sets-spectrum",
+          "path": ["component", "black-font-weight", "sets", "spectrum"],
+          "value": "black"
+        }
+      }
     }
   }
 }

tests/fixtures/basic.json

@@ -9,6 +9,13 @@
           "value": "12px"
         }
       }
+    },
+    "black-font-weight": {
+      "sets": {
+        "spectrum": {
+          "value": "black"
+        }
+      }
     }
   }
 }