@workday/canvas-kit-codemod 14.1.8 → 14.1.9

package/dist/es6/v13.2/migrateDepthTokens.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"migrateDepthTokens.d.ts","sourceRoot":"","sources":["../../../lib/v13.2/migrateDepthTokens.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAC,MAAM,aAAa,CAAC;AAWtC,QAAA,MAAM,SAAS,EAAE,SA6KhB,CAAC;AAEF,eAAe,SAAS,CAAC"}
+{"version":3,"file":"migrateDepthTokens.d.ts","sourceRoot":"","sources":["../../../lib/v13.2/migrateDepthTokens.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAC,MAAM,aAAa,CAAC;AAatC,QAAA,MAAM,SAAS,EAAE,SAqLhB,CAAC;AAEF,eAAe,SAAS,CAAC"}

package/dist/es6/v13.2/migrateDepthTokens.js

@@ -4,6 +4,7 @@ const canvasImportSources = [
     '@workday/canvas-kit-react/tokens',
     '@workday/canvas-depth-web',
 ];
+const depthValues = ['0', '1', '2', '3', '4', '5', '6'];
 const transform = (file, api) => {
     const j = api.jscodeshift;
     const root = j(file.source);
@@ -28,24 +29,26 @@ const transform = (file, api) => {
                 name: (name) => importDeclaration[name] === 'depth',
             },
             property: {
-                type: 'NumericLiteral',
+                type: (type) => type === 'NumericLiteral' || type === 'StringLiteral',
+                value: (value) => ['0', '1', '2', '3', '4', '5', '6'].includes(`${value}`),
             },
         },
     })
         .replaceWith(nodePath => {
         const argument = nodePath.value.argument;
-        if (argument.type === 'MemberExpression' && argument.property.type === 'NumericLiteral') {
+        if (argument.type === 'MemberExpression' &&
+            (argument.property.type === 'NumericLiteral' || argument.property.type === 'StringLiteral')) {
             const depthValue = argument.property.value;
-            const isDepthNotZero = depthValue > 0;
+            const isDepthNotZero = `${depthValue}` !== '0';
             addMissingImports({ j, root }, { importPath: '@workday/canvas-tokens-web', specifiers: ['system'] });
             if (isDepthNotZero) {
                 addMissingImports({ j, root }, { importPath: '@workday/canvas-kit-styling', specifiers: ['cssVar'] });
             }
-            return isDepthNotZero
-                ? j.objectProperty(j.identifier('boxShadow'), j.callExpression(j.identifier('cssVar'), [
-                    j.memberExpression(j.memberExpression(j.identifier('system'), j.identifier('depth')), j.numericLiteral(depthValue), true),
-                ]))
-                : j.objectProperty(j.identifier('boxShadow'), j.literal('none'));
+            return j.objectProperty(j.identifier('boxShadow'), isDepthNotZero
+                ? j.callExpression(j.identifier('cssVar'), [
+                    j.memberExpression(j.memberExpression(j.identifier('system'), j.identifier('depth')), j.numericLiteral(parseInt(`${depthValue}`, 10)), true),
+                ])
+                : j.literal('none'));
         }
         return nodePath.value;
     });
@@ -58,16 +61,19 @@ const transform = (file, api) => {
         .replaceWith(nodePath => {
         if (nodePath.value.object.type === 'MemberExpression' &&
             nodePath.value.object.object.type === 'Identifier' &&
-            nodePath.value.object.property.type === 'NumericLiteral') {
+            (nodePath.value.object.property.type === 'NumericLiteral' ||
+                (nodePath.value.object.property.type === 'StringLiteral' &&
+                    depthValues.includes(nodePath.value.object.property.value)))) {
             const value = nodePath.value.object.property.value;
-            if (value.toString() !== '0') {
+            const isNotZero = `${value}` !== '0';
+            if (isNotZero) {
                 addMissingImports({ j, root }, { importPath: '@workday/canvas-kit-styling', specifiers: ['cssVar'] });
                 addMissingImports({ j, root }, { importPath: '@workday/canvas-tokens-web', specifiers: ['system'] });
             }
-            return value.toString() === '0'
+            return !isNotZero
                 ? j.literal('none')
                 : j.callExpression(j.identifier('cssVar'), [
-                    j.memberExpression(j.memberExpression(j.identifier('system'), j.identifier('depth')), j.numericLiteral(value), true),
+                    j.memberExpression(j.memberExpression(j.identifier('system'), j.identifier('depth')), j.numericLiteral(parseInt(`${value}`, 10)), true),
                 ]);
         }
         return nodePath.value;
@@ -82,13 +88,11 @@ const transform = (file, api) => {
     })
         .replaceWith(nodePath => {
         const mainWrapper = nodePath.value.object;
-        if (mainWrapper.type === 'Identifier' && importDeclaration[mainWrapper.name] !== 'type') {
-            const mainObject = mainWrapper;
-            const mainName = mainObject.name;
+        if (mainWrapper.type === 'Identifier' && importDeclaration[mainWrapper.name] === 'depth') {
             const lowestProperty = nodePath.value.property;
-            const importedName = importDeclaration[mainName];
-            if (importedName === 'depth' && lowestProperty.type === 'NumericLiteral') {
-                const isZero = lowestProperty.value.toString() === '0';
+            if (lowestProperty.type === 'NumericLiteral' ||
+                (lowestProperty.type === 'StringLiteral' && depthValues.includes(lowestProperty.value))) {
+                const isZero = `${lowestProperty.value}` === '0';
                 if (!isZero) {
                     addMissingImports({ j, root }, { importPath: '@workday/canvas-kit-styling', specifiers: ['cssVar'] });
                     addMissingImports({ j, root }, { importPath: '@workday/canvas-tokens-web', specifiers: ['system'] });
@@ -97,7 +101,7 @@ const transform = (file, api) => {
                     j.property('init', j.identifier('boxShadow'), isZero
                         ? j.literal('none')
                         : j.callExpression(j.identifier('cssVar'), [
-                            j.memberExpression(j.memberExpression(j.identifier('system'), j.identifier('depth')), j.numericLiteral(lowestProperty.value), true),
+                            j.memberExpression(j.memberExpression(j.identifier('system'), j.identifier('depth')), j.numericLiteral(parseInt(`${lowestProperty.value}`, 10)), true),
                         ])),
                 ]);
             }

package/dist/es6/v13.2/utils/transformObjectPropertyRecursively.js

@@ -165,9 +165,6 @@ export const transformObjectPropertyRecursively = ({ j, root }, property, import
             }
         }
     }
-    if (property.type === 'ObjectProperty' && property.value.type === 'ObjectExpression') {
-        return createObjectProperty(property.key, j.objectExpression(property.value.properties.map((prop) => transformObjectPropertyRecursively({ j, root }, prop, importDeclaration, isCanvasKitStyling, tokenTypes))));
-    }
     if (property.type === 'ObjectProperty' &&
         property.key.type === 'Identifier' &&
         property.value.type === 'MemberExpression' &&
@@ -190,5 +187,8 @@ export const transformObjectPropertyRecursively = ({ j, root }, property, import
             }
         }
     }
+    if (property.type === 'ObjectProperty' && property.value.type === 'ObjectExpression') {
+        return createObjectProperty(property.key, j.objectExpression(property.value.properties.map((prop) => transformObjectPropertyRecursively({ j, root }, prop, importDeclaration, isCanvasKitStyling, tokenTypes))));
+    }
     return property;
 };

package/dist/es6/v14-tokens/migrateColorTokens.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"migrateColorTokens.d.ts","sourceRoot":"","sources":["../../../lib/v14-tokens/migrateColorTokens.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,SAAS,EAAC,MAAM,aAAa,CAAC;AAUlD,QAAA,MAAM,SAAS,EAAE,SAwHhB,CAAC;AAEF,eAAe,SAAS,CAAC"}
+{"version":3,"file":"migrateColorTokens.d.ts","sourceRoot":"","sources":["../../../lib/v14-tokens/migrateColorTokens.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,SAAS,EAAC,MAAM,aAAa,CAAC;AASlD,QAAA,MAAM,SAAS,EAAE,SA6GhB,CAAC;AAEF,eAAe,SAAS,CAAC"}

package/dist/es6/v14-tokens/migrateColorTokens.js

@@ -1,6 +1,5 @@
-import { addMissingImports, filterOutImports, getImports } from '../v13.2/utils';
+import { addMissingImports, getImports } from '../v13.2/utils';
 import { transformObjectPropertyRecursively } from './utils/transformObjectPropertyRecursively';
-import { mapping } from '../v13.2/mapping';
 import baseMapping from './baseMapping';
 const canvasImportSources = ['@workday/canvas-kit-styling', '@workday/canvas-tokens-web'];
 const transform = (file, api) => {
@@ -39,7 +38,8 @@ const transform = (file, api) => {
         .find(j.MemberExpression, (value) => {
         return (value.type === 'MemberExpression' &&
             checkImport(value.object.name) &&
-            Object.keys(baseMapping).includes(value.property.name));
+            Object.keys(baseMapping).includes(value.property.name) &&
+            importDeclaration[value.object.name] === 'base');
     })
         .replaceWith(nodePath => {
         const mainWrapper = nodePath.value.object;
@@ -47,17 +47,15 @@ const transform = (file, api) => {
             const mainObject = mainWrapper;
             const mainName = mainObject.name;
             const lowestProperty = nodePath.value.property;
-            const importedName = importDeclaration[mainName];
-            const map = importedName === 'base' ? { type: 'base' } : mapping[importedName];
-            if (map.type === 'base' && lowestProperty.type === 'Identifier') {
+            if (lowestProperty.type === 'Identifier') {
                 const colorName = baseMapping[lowestProperty.name];
-                if (mainName === 'base') {
+                if (mainName === 'base' && colorName) {
                     addMissingImports({ j, root }, { importPath: '@workday/canvas-tokens-web', specifiers: ['base'] });
-                    return j.memberExpression(j.identifier(map.type), j.identifier(colorName));
+                    return j.memberExpression(j.identifier('base'), j.identifier(colorName));
                 }
             }
         }
-        return nodePath;
+        return nodePath.value;
     });
     // Filter out base imports if no base tokens are used
     root
@@ -85,13 +83,6 @@ const transform = (file, api) => {
             return true;
         });
     });
-    root
-        .find(j.ImportDeclaration, {
-        source: { value: (value) => canvasImportSources.includes(value) },
-    })
-        .forEach(nodePath => {
-        filterOutImports({ root, j }, nodePath, 'colors');
-    });
     return root.toSource();
 };
 export default transform;

package/dist/es6/v14-tokens/utils/transformObjectPropertyRecursively.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"transformObjectPropertyRecursively.d.ts","sourceRoot":"","sources":["../../../../lib/v14-tokens/utils/transformObjectPropertyRecursively.ts"],"names":[],"mappings":"AAiDA,eAAO,MAAM,kCAAkC,gBAClC,GAAG,YACJ,GAAG;;wBAEQ,OAAO,KAC3B,GAuNF,CAAC"}
+{"version":3,"file":"transformObjectPropertyRecursively.d.ts","sourceRoot":"","sources":["../../../../lib/v14-tokens/utils/transformObjectPropertyRecursively.ts"],"names":[],"mappings":"AAiDA,eAAO,MAAM,kCAAkC,gBAClC,GAAG,YACJ,GAAG;;wBAEQ,OAAO,KAC3B,GA6MF,CAAC"}

package/dist/es6/v14-tokens/utils/transformObjectPropertyRecursively.js

@@ -30,40 +30,43 @@ const updateArguments = ({ j, root }, expr, property, importDeclaration) => {
 };
 export const transformObjectPropertyRecursively = ({ j, root }, property, importDeclaration, isCanvasKitStyling) => {
     var _a;
+    const createObjectProperty = (key, value) => {
+        var _a, _b, _c;
+        const prop = j.objectProperty(key, value);
+        // Preserve computed flag: if explicitly true, or if key is not a simple literal/identifier
+        if (property.computed === true ||
+            (((_a = property.key) === null || _a === void 0 ? void 0 : _a.type) !== 'Identifier' &&
+                ((_b = property.key) === null || _b === void 0 ? void 0 : _b.type) !== 'StringLiteral' &&
+                ((_c = property.key) === null || _c === void 0 ? void 0 : _c.type) !== 'NumericLiteral')) {
+            prop.computed = true;
+        }
+        return prop;
+    };
     if (property.type === 'ObjectProperty' &&
         property.key.type === 'Identifier' &&
-        property.value.type === 'MemberExpression' &&
+        ((_a = property.value) === null || _a === void 0 ? void 0 : _a.type) === 'MemberExpression' &&
         property.value.object.type === 'Identifier' &&
         property.value.property.type === 'Identifier') {
         const cssProperty = property.key.name;
-        const tokens = (_a = Object.entries(systemColors).find(([blockKey]) => blockKey.split(',').some(prop => prop === cssProperty))) === null || _a === void 0 ? void 0 : _a[1];
-        const { property: value, object: { name }, } = property.value;
-        const colorToken = tokens === null || tokens === void 0 ? void 0 : tokens[value.name];
-        if (colorToken) {
-            if (importDeclaration[name] === 'colors') {
-                if (!isCanvasKitStyling) {
-                    addMissingImports({ j, root }, { importPath: '@workday/canvas-kit-styling', specifiers: ['cssVar'] });
-                }
-                addMissingImports({ j, root }, { importPath: '@workday/canvas-tokens-web', specifiers: ['system'] });
-                return j.objectProperty(j.identifier(cssProperty), isCanvasKitStyling
-                    ? varToMemberExpression(j, colorToken)
-                    : j.callExpression(j.identifier('cssVar'), [varToMemberExpression(j, colorToken)]));
-            }
-            if (importDeclaration[property.value.object.name] === 'base') {
-                addMissingImports({ j, root }, { importPath: '@workday/canvas-tokens-web', specifiers: ['system'] });
-                return j.objectProperty(j.identifier(cssProperty), varToMemberExpression(j, colorToken));
-            }
+        const propsName = Object.keys(systemColors).find(blockKey => blockKey.split(',').some(prop => prop === cssProperty));
+        const tokens = propsName ? systemColors[propsName] : null;
+        const propertyName = property.value.object.name;
+        const valueName = property.value.property.name;
+        if (!(tokens && importDeclaration[propertyName] === 'base')) {
+            return property;
         }
-        else {
-            const baseToken = baseMapping[property.value.property.name];
-            if (baseToken) {
-                addMissingImports({ j, root }, { importPath: '@workday/canvas-tokens-web', specifiers: ['base'] });
-                return j.objectProperty(j.identifier(cssProperty), j.memberExpression(j.identifier('base'), j.identifier(baseToken)));
-            }
+        const colorToken = tokens[valueName];
+        const baseToken = baseMapping[valueName];
+        if (colorToken || baseToken) {
+            addMissingImports({ j, root }, { importPath: '@workday/canvas-tokens-web', specifiers: [colorToken ? 'system' : 'base'] });
+            const newToken = colorToken
+                ? varToMemberExpression(j, colorToken)
+                : j.memberExpression(j.identifier('base'), j.identifier(baseToken));
+            return createObjectProperty(j.identifier(cssProperty), isCanvasKitStyling ? newToken : j.callExpression(j.identifier('cssVar'), [newToken]));
         }
         return property;
     }
-    if (property.value.type === 'CallExpression') {
+    if (property.type === 'ObjectProperty' && property.value.type === 'CallExpression') {
         property.value.arguments = updateArguments({ j, root }, property.value, property, importDeclaration);
     }
     if (property.type === 'ObjectProperty' && property.value.type === 'TemplateLiteral') {
@@ -95,7 +98,7 @@ export const transformObjectPropertyRecursively = ({ j, root }, property, import
             }
             return expr;
         });
-        return j.objectProperty(property.key, j.templateLiteral(transformedQuasis, transformedExpressions));
+        return createObjectProperty(property.key, j.templateLiteral(transformedQuasis, transformedExpressions));
     }
     if (property.type === 'ObjectProperty' && property.value.type === 'ConditionalExpression') {
         const { test, consequent, alternate } = property.value;
@@ -132,10 +135,10 @@ export const transformObjectPropertyRecursively = ({ j, root }, property, import
         if (alternate.type === 'CallExpression') {
             alternate.arguments = updateArguments({ j, root }, alternate, property, importDeclaration);
         }
-        return j.objectProperty(property.key, j.conditionalExpression(test, consequentNode, alternateNode));
+        return createObjectProperty(property.key, j.conditionalExpression(test, consequentNode, alternateNode));
     }
     if (property.type === 'ObjectProperty' && property.value.type === 'ObjectExpression') {
-        return j.objectProperty(property.key, j.objectExpression(property.value.properties.map((prop) => transformObjectPropertyRecursively({ j, root }, prop, importDeclaration, isCanvasKitStyling))));
+        return createObjectProperty(property.key, j.objectExpression(property.value.properties.map((prop) => transformObjectPropertyRecursively({ j, root }, prop, importDeclaration, isCanvasKitStyling))));
     }
     return property;
 };

package/package.json

@@ -2,7 +2,7 @@
   "name": "@workday/canvas-kit-codemod",
   "author": "Workday, Inc. (https://www.workday.com)",
   "license": "Apache-2.0",
-  "version": "14.1.8",
+  "version": "14.1.9",
   "description": "A collection of codemods for use on Workday Canvas Kit packages.",
   "main": "dist/es6/index.js",
   "sideEffects": false,
@@ -46,5 +46,5 @@
   "resolutions": {
     "recast": "0.20.4"
   },
-  "gitHead": "ff982533fc1812c0ef704246fe432f9ec1164098"
+  "gitHead": "5c2ed669b828845673b6eac948b98b43da3286e2"
 }