fix: use kebab-case instead of camelCase for variable extensions

Utilities generated by extensions were `camelCased`, they are now `kebabCased`
innocenzi · May 28, 2020 · b4fa030 · b4fa030
1 parent dc29036
commit b4fa030
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 1 deletion.
diff --git a/src/theme/variable.ts b/src/theme/variable.ts
@@ -54,7 +54,7 @@ export class Variable {
       return '';
     }
 
-    return `${this._path}.${_.camelCase(this._name)}`;
+    return `${this._path}.${_.kebabCase(this._name)}`;
   }
 
   /**

diff --git a/test/unit/generateTailwindConfiguration.test.ts b/test/unit/generateTailwindConfiguration.test.ts
@@ -82,3 +82,14 @@ it('extends Tailwind', () => {
     },
   });
 });
+
+it('handles multi-word variable names', () => {
+  testExtendOutput(
+    new Theme().setVariable('sans-serif', ['Roboto', 'Arial'], 'fontFamily', 'font'),
+    {
+      fontFamily: {
+        'sans-serif': 'var(--font-sans-serif)',
+      },
+    }
+  );
+});