feat: options.utilityClasses.[].property supports array of values

lib/design-token-utils.js

@@ -55,14 +55,21 @@ module.exports = (
  * @param  {Object} obj
  * @return  {Rule}
  */
-function generateUtilityClassRule(
+function generateUtilityClassRules(
   classObject,
   { Rule, Declaration, selector = ({ selectorBase }) => `.${selectorBase}` },
 ) {
   const { selectorBase, prop, value } = classObject;
-  const rule = new Rule({ selector: selector(classObject) });
-  rule.append(new Declaration({ prop, value: /** @type {string} */ (value) }));
-  return rule;
+
+  const properties = Array.isArray(prop) ? prop : [prop];
+
+  return properties.map((prop) => {
+    const rule = new Rule({ selector: selector(classObject) });
+    rule.append(
+      new Declaration({ prop, value: /** @type {string} */ (value) }),
+    );
+    return rule;
+  });
 }
 
 function insertUtilityClasses(
@@ -84,8 +91,8 @@ function insertUtilityClasses(
       return;
     }
 
-    const rules = classObjects.map((c) =>
-      generateUtilityClassRule(c, {
+    const rules = classObjects.flatMap((c) =>
+      generateUtilityClassRules(c, {
         Rule,
         Declaration,
         selector: ({ selectorBase }) => `.${selectorBase}`,
@@ -98,12 +105,12 @@ function insertUtilityClasses(
         params: `(min-width: ${mqParams})`,
       });
       const rules = classObjects
-        .map((c) => {
+        .flatMap((c) => {
           if (c.skipViewportVariant) {
             return;
           }
 
-          const rule = generateUtilityClassRule(c, {
+          const rule = generateUtilityClassRules(c, {
             Rule,
             Declaration,
             selector: ({ selectorBase }) =>

test/utility-classes.test.mjs

@@ -35,6 +35,25 @@ test("Generate with prefix", async (t) => {
   );
 });
 
+test("Generate with multiple properties", async (t) => {
+  const tokens = { space: { m: "1rem", l: "2rem" } };
+  const input = `@design-token-utils (utility-classes);`;
+  const options = {
+    utilityClasses: [
+      {
+        id: "space",
+        prefix: "margin-y",
+        property: ["margin-top", "margin-bottom"],
+      },
+    ],
+  };
+  const res = await run(tokens, input, options);
+  t.is(
+    res.css,
+    `.margin-y-m{margin-bottom:var(--space-m);margin-top:var(--space-m)}.margin-y-l{margin-bottom:var(--space-l);margin-top:var(--space-l)}`,
+  );
+});
+
 test("Generate with responsive variants", async (t) => {
   const tokens = { color: { accent: "#ff0" } };
   const input = `@design-token-utils (utility-classes);`;