feat: upgrade to latest SD and remove redundant options

.changeset/sweet-foxes-float.md

@@ -0,0 +1,27 @@
+---
+'@tokens-studio/sd-transforms': minor
+---
+
+BREAKING: remove options `addAttributeCTI` & `casing`.
+Since `transformGroup` can now be combined with `transforms`, this is now much easier to accomplish in Style-Dictionary without additional sd-transforms options.
+
+Before:
+
+```js
+registerTransforms(StyleDictionary, { addAttributeCTI: true, casing: 'kebab' });
+```
+
+After:
+
+```json
+{
+  "platforms": {
+    "css": {
+      "transformGroup": "tokens-studio",
+      "transforms": ["attribute/cti", "name/kebab"]
+    }
+  }
+}
+```
+
+> From this version onwards, Style-Dictionary v4.0.0-prerelease.19 minimum is required.

README.md

@@ -45,7 +45,7 @@ Android:
 
 - Transform typography objects to Android Compose shorthand -> `ts/typography/compose/shorthand`
 
-Registers the **generic** and **CSS** transforms, in addition to `name/cti/camel` for naming purposes, as a transform group called `tokens-studio`.
+Registers the **generic** and **CSS** transforms as a transform group called `tokens-studio`.
 
 ## Installation
 
@@ -72,6 +72,7 @@ const sd = StyleDictionary.extend({
   platforms: {
     css: {
       transformGroup: 'tokens-studio',
+      transforms: ['name/kebab'], // <-- add a token name transform for generating token names, default is camel
       buildPath: 'build/css/',
       files: [
         {
@@ -95,19 +96,17 @@ To run it use the following command
 node build-output.js
 ```
 
-> Note: make sure to choose either the full transformGroup, **OR** its separate transforms so you can adjust or add your own.
-> [Combining a transformGroup with a transforms array can give unexpected results](https://github.com/amzn/style-dictionary/issues/813).
+> From Style-Dictionary `4.0.0-prerelease.18`, [`transformGroup` and `transforms` can now be combined in a platform inside your config](https://github.com/amzn/style-dictionary/blob/v4/CHANGELOG.md#400-prerelease18).
 
 ### Using the transforms
 
-In your Style-Dictionary config, you can **either** use the `tokens-studio` transformGroup **or** the separate transforms (all of the names of those are listed):
-
 ```json
 {
   "source": ["**/*.tokens.json"],
   "platforms": {
     "css": {
       "transformGroup": "tokens-studio",
+      "transforms": ["name/kebab"],
       "buildPath": "build/css/",
       "files": [
         {
@@ -117,7 +116,7 @@ In your Style-Dictionary config, you can **either** use the `tokens-studio` tran
       ]
     },
     "css": {
-      "transforms": ["ts/size/px", "ts/opacity"],
+      "transforms": ["ts/size/px", "ts/opacity", "name/kebab"],
       "buildPath": "build/css/",
       "files": [
         {
@@ -148,26 +147,24 @@ StyleDictionary.registerTransform({
 
 ### Custom Transform Group
 
-In Style-Dictionary, [`transformGroup` and `transforms` cannot be combined in a platform inside your config](https://github.com/amzn/style-dictionary/issues/813).
+> From Style-Dictionary `4.0.0-prerelease.18`, [`transformGroup` and `transforms` can now be combined in a platform inside your config](https://github.com/amzn/style-dictionary/blob/v4/CHANGELOG.md#400-prerelease18).
 
-Therefore, if you wish to use the transform group, but adjust, add or remove a few transforms, your best option is to create a custom transform group:
+You can create a custom transformGroup that includes the individual transforms from this package.
+If you wish to use the transformGroup, but adjust or remove a few transforms, your best option is to create a custom transform group:
 
 ```js
 const { transforms } = require('@tokens-studio/sd-transforms');
 const StyleDictionary = require('style-dictionary');
 
 // Register custom tokens-studio transform group
 // without 'px' being added to numbers without a unit
-// and also adding 'name/cti/camel' for the token names
+// and also adding 'name/constant' for the token names
 StyleDictionary.registerTransformGroup({
   name: 'custom/tokens-studio',
-  transforms: [...transforms, 'name/cti/camel'].filter(transform => transform !== 'ts/size/px'),
+  transforms: [...transforms, 'name/constant'].filter(transform => transform !== 'ts/size/px'),
 });
 ```
 
-> Note: it is easy to change the casing or to add attributes/cti transform to the group, without needing to create a custom transform group.
-> For this, see section "Options" below for the `casing` and `addAttributeCTI` option.
-
 ### Options
 
 You can pass options to the `registerTransforms` function.
@@ -195,17 +192,14 @@ Options:
 | name                          | type                     | required | default         | description                                                                                                                           |
 | ----------------------------- | ------------------------ | -------- | --------------- | ------------------------------------------------------------------------------------------------------------------------------------- |
 | excludeParentKeys             | boolean                  | ❌       | `false`         | Whether or not to exclude parent keys from your token files                                                                           |
-| addAttributeCTI               | boolean                  | ❌       | `false`         | Whether or not to add `'attribute/cti'` predefined transform to the `tokens-studio` transformGroup                                    |
 | alwaysAddFontStyle            | boolean                  | ❌       | `false`         | Whether or not to always add a 'normal' fontStyle property to typography tokens which do not have explicit fontStyle                  |
-| 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                |
 | expand.shadow                 | boolean \| ExpandFilter  | ❌       | `false`         | Whether or not to expand shadows. Also allows a filter callback function to conditionally expand per token/filePath                   |
 | expand.border                 | boolean \| ExpandFilter  | ❌       | `false`         | Whether or not to expand borders. Also allows a filter callback function to conditionally expand per token/filePath                   |
 | ['ts/color/modifiers']        | ColorModifierOptions     | ❌       | See props below | Color modifier options                                                                                                                |
 | ['ts/color/modifiers'].format | ColorModifierFormat      | ❌       | `undefined`     | Color modifier output format override ('hex' \| 'hsl' \| 'lch' \| 'p3' \| 'srgb'), uses local format or modifier space as default     |
-|                               |
 
 > Note: you can also import and use the `parseTokens` function to run the parsing steps on your tokens object manually.
 > Handy if you have your own parsers set up (e.g. for JS files), and you want the parser-based features like composites-expansion to work there too.
@@ -238,6 +232,7 @@ async function run() {
     platforms: {
       css: {
         transformGroup: 'tokens-studio',
+        transforms: ['name/kebab'],
         files: [
           {
             destination: `vars-${theme.name}.css`,
@@ -368,6 +363,7 @@ async function run() {
     platforms: {
       css: {
         transformGroup: 'tokens-studio',
+        transforms: ['name/kebab'],
         files: [
           {
             destination: `vars-${name}.css`,

package.json

@@ -46,7 +46,7 @@
     "expr-eval-fork": "^2.0.2",
     "is-mergeable-object": "^1.1.1",
     "postcss-calc-ast-parser": "^0.1.4",
-    "style-dictionary": "^4.0.0-prerelease.16"
+    "style-dictionary": "^4.0.0-prerelease.19"
   },
   "devDependencies": {
     "@changesets/cli": "^2.26.0",

src/TransformOptions.ts

@@ -31,8 +31,6 @@ export interface ColorModifierOptions {
 }
 
 export interface TransformOptions {
-  addAttributeCTI?: boolean;
-  casing?: 'camel' | 'pascal' | 'snake' | 'kebab' | 'constant';
   alwaysAddFontStyle?: boolean;
   expand?: ExpandOptions | false;
   excludeParentKeys?: boolean;

src/registerTransforms.ts

@@ -205,17 +205,10 @@ export async function registerTransforms(
     transformer: token => transformColorModifiers(token, transformOpts?.['ts/color/modifiers']),
   });
 
-  const casing = transformOpts?.casing ?? 'camel';
-  const casingTransform = `name/cti/${casing}`;
   sd.registerTransformGroup({
     name: 'tokens-studio',
-    transforms: [
-      ...(transformOpts?.addAttributeCTI === true ? ['attribute/cti'] : []),
-      ...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
-      casingTransform,
-    ],
+    // add a default name transform, since this is almost always needed
+    // it's easy to override by users, adding their own "transforms"
+    transforms: [...transforms, 'name/camel'],
   });
 }

test/integration/output-references.test.ts

@@ -12,7 +12,7 @@ const cfg = {
   source: ['test/integration/tokens/output-references.tokens.json'],
   platforms: {
     css: {
-      transforms: ['ts/resolveMath', 'name/cti/kebab'],
+      transforms: ['ts/resolveMath', 'name/kebab'],
       prefix: 'sd',
       buildPath: outputDir,
       files: [

test/integration/sd-transforms.test.ts

@@ -82,7 +82,18 @@ describe('sd-transforms smoke tests', () => {
   it('allows easily changing the casing', async () => {
     await cleanup(dict);
 
-    dict = await init(cfg, { 'ts/color/modifiers': { format: 'hex' }, casing: 'kebab' });
+    dict = await init(
+      {
+        ...cfg,
+        platforms: {
+          css: {
+            ...cfg.platforms.css,
+            transforms: ['name/kebab'],
+          },
+        },
+      },
+      { 'ts/color/modifiers': { format: 'hex' } },
+    );
     const file = await promises.readFile(outputFilePath, 'utf-8');
     expect(file).to.include(`:root {
   --sd-dimension-scale: 2;
@@ -125,7 +136,18 @@ describe('sd-transforms smoke tests', () => {
 
   it('allows easily adding attribute/cti transform to tokens-studio group', async () => {
     await cleanup(dict);
-    dict = await init(cfg, { 'ts/color/modifiers': { format: 'hex' }, addAttributeCTI: true });
+    dict = await init(
+      {
+        ...cfg,
+        platforms: {
+          css: {
+            ...cfg.platforms.css,
+            transforms: ['attribute/cti'],
+          },
+        },
+      },
+      { 'ts/color/modifiers': { format: 'hex' } },
+    );
     const enrichedTokens = await dict?.exportPlatform('css'); // platform to parse for is 'css' in this case
     expect(enrichedTokens?.dimension.scale.attributes).to.eql({
       category: 'dimension',

test/integration/swift-UI-color.test.ts

@@ -30,7 +30,7 @@ const cfg = {
         'ts/color/modifiers',
         'attribute/cti',
         'transitive/color/UIColorSwift',
-        'name/cti/camel',
+        'name/camel',
       ],
       buildPath: outputDir,
       files: [

test/spec/parsers/add-font-styles.spec.ts

@@ -109,23 +109,13 @@ describe('add font style', () => {
       },
     };
 
-    // let error;
-    // try {
     addFontStyles(inputTokens as DeepKeyTokenMap<false>);
-    // } catch (e) {
-    //   if (e instanceof Error) {
-    //     error = e.message;
-    //   }
-    // }
     restore();
 
     expect(stub.calls.size).to.equal(1);
     expect(stub.firstCall?.args[0].message).to.equal(
-      `Reference doesn't exist: tries to reference fwRef, which is not defined.`,
+      `tries to reference fwRef, which is not defined.`,
     );
-    // expect(error).to.equal(
-    //   "Reference doesn't exist: tries to reference fwRef, which is not defined.",
-    // );
   });
 
   it(`allows always adding a default fontStyle`, () => {

test/spec/parsers/expand.spec.ts

@@ -707,8 +707,6 @@ describe('expand', () => {
 
   it(`should throw when token reference in a composite cannot be resolved`, () => {
     const stub = stubMethod(console, 'error');
-    // let error;
-    // try {
     expandComposites(
       {
         ref: {
@@ -723,22 +721,13 @@ describe('expand', () => {
       },
       'foo/bar.json',
     );
-    // } catch (e) {
-    //   if (e instanceof Error) {
-    //     error = e.message;
-    //   }
-    // }
 
     restore();
 
     expect(stub.calls.size).to.equal(1);
     expect(stub.firstCall?.args[0].message).to.equal(
-      `Reference doesn't exist: tries to reference typography.foo, which is not defined.`,
+      `tries to reference typography.foo, which is not defined.`,
     );
-
-    // expect(error).to.equal(
-    //   "Reference doesn't exist: tries to reference typography.foo, which is not defined.",
-    // );
   });
 
   it('should not trip up when the recursed token contains a primitive value', () => {