feat: allow custom casing option

.changeset/hip-rivers-occur.md

@@ -0,0 +1,5 @@
+---
+'@tokens-studio/sd-transforms': patch
+---
+
+Add option to easily change the casing of the output token names, without requiring to create a custom transform group.

README.md

@@ -151,6 +151,7 @@ Options:
 | name                          | type                     | required | default         | description                                                                                                                           |
 | ----------------------------- | ------------------------ | -------- | --------------- | ------------------------------------------------------------------------------------------------------------------------------------- |
 | excludeParentKeys             | boolean                  | ❌       | `false`         | Whether or not to exclude parent keys from your token files                                                                           |
+| casing                        | string                   | ❌       | `camel`         | What kind of casing to use for token names. Options: [`camel`, `pascal`, `snake`, `kebab`, `constant`]                                |
 | expand                        | boolean \| ExpandOptions | ❌       | See props below | `false` to not register the parser at all. By default, expands composition tokens. Optionally, border, shadow and typography as well. |
 | expand.composition            | boolean \| ExpandFilter  | ❌       | `true`          | Whether or not to expand compositions. Also allows a filter callback function to conditionally expand per token/filePath              |
 | expand.typography             | boolean \| ExpandFilter  | ❌       | `false`         | Whether or not to expand typography. Also allows a filter callback function to conditionally expand per token/filePath                |

src/TransformOptions.ts

@@ -31,6 +31,7 @@ export interface ColorModifierOptions {
 }
 
 export interface TransformOptions {
+  casing?: 'camel' | 'pascal' | 'snake' | 'kebab' | 'constant';
   expand?: ExpandOptions | false;
   excludeParentKeys?: boolean;
   ['ts/color/modifiers']?: ColorModifierOptions;

src/registerTransforms.ts

@@ -190,14 +190,16 @@ export async function registerTransforms(sd: Core, transformOpts?: TransformOpti
     transformer: token => transformColorModifiers(token, transformOpts?.['ts/color/modifiers']),
   });
 
+  const casing = transformOpts?.casing ?? 'camel';
+  const casingTransform = `name/cti/${casing}`;
   _sd.registerTransformGroup({
     name: 'tokens-studio',
     transforms: [
       ...transforms,
       // by default we go with camel, as having no default will likely give the user
       // errors straight away. This can be overridden by manually passing an array of transforms
       // instead of this transformGroup, or by doing a name conversion in your custom format
-      'name/cti/camel',
+      casingTransform,
     ],
   });
 }

test/integration/sd-transforms.test.ts

@@ -78,6 +78,50 @@ describe('sd-transforms smoke tests', () => {
   --sdBorder: 5px solid #000000;
   --sdColor: #FF00FF;
   --sdUsesColor: rgba(255, 0, 255, 1);
+}`);
+  });
+
+  it('allows easily changing the casing', async () => {
+    if (dict) {
+      cleanup(dict);
+    }
+    dict = init(cfg, { 'ts/color/modifiers': { format: 'hex' }, casing: 'kebab' });
+    const file = await promises.readFile(outputFilePath, 'utf-8');
+    expect(file).to.include(`:root {
+  --sd-dimension-scale: 2;
+  --sd-dimension-xs: 4px;
+  --sd-dimension-sm: 8px;
+  --sd-dimension-md: 16px;
+  --sd-dimension-lg: 32px;
+  --sd-dimension-xl: 64px;
+  --sd-opacity: 0.25;
+  --sd-spacing-sm: 8px;
+  --sd-spacing-xl: 64px;
+  --sd-spacing-multi-value: 8px 64px; /* You can have multiple values in a single spacing token. Read more on these: https://docs.tokens.studio/available-tokens/spacing-tokens#multi-value-spacing-tokens */
+  --sd-colors-black: #000000;
+  --sd-colors-white: #ffffff;
+  --sd-colors-blue: #0000FF;
+  --sd-colors-blue-alpha: rgba(0, 0, 255, 0.5);
+  --sd-colors-red-400: #f67474;
+  --sd-colors-red-500: #f56565;
+  --sd-colors-red-600: #dd5b5b;
+  --sd-line-heights-heading: 1.1;
+  --sd-line-heights-body: 1.4;
+  --sd-letter-spacing-default: 0;
+  --sd-letter-spacing-increased: 1.5em;
+  --sd-letter-spacing-decreased: -0.05em;
+  --sd-font-weights-heading-regular: 600;
+  --sd-font-weights-heading-bold: 700;
+  --sd-font-weights-body-regular: 400;
+  --sd-font-sizes-h6: 16px;
+  --sd-font-sizes-body: 16px;
+  --sd-heading-6: 700 16px/1 Arial;
+  --sd-shadow-blur: 10px;
+  --sd-shadow: inset 0 4px 10px 0 rgba(0,0,0,0.4);
+  --sd-border-width: 5px;
+  --sd-border: 5px solid #000000;
+  --sd-color: #FF00FF;
+  --sd-uses-color: rgba(255, 0, 255, 1);
 }`);
   });
 });