chore: support insert true DTCG shadow, prep TODOs for next major

src/css/transformShadow.ts

@@ -1,19 +1,30 @@
-import { SingleBoxShadowToken, BoxShadowTypes } from '@tokens-studio/types';
+import { BoxShadowTypes, SingleBoxShadowToken, TokenBoxshadowValue } from '@tokens-studio/types';
 
 export function transformShadow(value: SingleBoxShadowToken['value']) {
-  const alignShadowType = (val: string) => {
-    return val === 'innerShadow' || val === 'inset' ? 'inset' : undefined;
+  /**
+   * @param {string} val
+   * @returns {BoxShadowTypes}
+   */
+  const alignShadowType = (val: TokenBoxshadowValue & { inset?: boolean }) => {
+    if ([BoxShadowTypes.INNER_SHADOW, 'inset'].includes(val.type)) {
+      val.inset = true;
+      // TODO: delete lines below in next major change, only have to set inset=true, nothing else
+      val.type = 'inset' as BoxShadowTypes;
+    } else if (val.type) {
+      val.type = undefined as BoxShadowTypes & undefined;
+    }
+
+    // TODO: enable line below in next major change
+    // delete (val as Partial<TokenBoxshadowValue>).type;
+    return val;
   };
 
   if (Array.isArray(value)) {
-    return value.map(v => ({
-      ...v,
-      type: alignShadowType(v.type),
-    }));
+    return value.map(alignShadowType);
   }
 
   if (typeof value === 'object') {
-    value.type = alignShadowType(value.type) as BoxShadowTypes;
+    return alignShadowType(value);
   }
   return value;
 }

test/spec/css/transformShadow.spec.ts

@@ -23,6 +23,7 @@ describe('transformShadow', () => {
       spread: '0',
       color: 'rgba(0,0,0,0.4)',
       type: 'inset',
+      inset: true,
     });
 
     expect(
@@ -42,6 +43,7 @@ describe('transformShadow', () => {
       spread: '0',
       color: 'rgba(0,0,0,0.4)',
       type: 'inset',
+      inset: true,
     });
   });
 
@@ -75,6 +77,7 @@ describe('transformShadow', () => {
         spread: '0',
         color: 'rgba(0,0,0,0.4)',
         type: 'inset',
+        inset: true,
       },
       {
         x: '2',
@@ -83,6 +86,7 @@ describe('transformShadow', () => {
         spread: '0',
         color: 'rgba(0,0,0,0.4)',
         type: 'inset',
+        inset: true,
       },
     ]);
   });