@atlaskit/codemod-cli 0.13.4 → 0.14.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @atlaskit/codemod-cli
 
+## 0.14.0
+
+### Minor Changes
+
+- [`26d4e25c2b3`](https://bitbucket.org/atlassian/atlassian-frontend/commits/26d4e25c2b3) - replace strings that contain only the color name; replace hard-coded colors in template literals that have CSS declarations; better color names for literals that have multiple expressions; replace full value of box-shadow in template literals
+
 ## 0.13.4
 
 ### Patch Changes

package/dist/cjs/main.js

@@ -298,7 +298,7 @@ function _main() {
         case 4:
           _yield$parseArgs = _context5.sent;
           packages = _yield$parseArgs.packages;
-          _process$env$_PACKAGE = "0.13.4", _PACKAGE_VERSION_ = _process$env$_PACKAGE === void 0 ? '0.0.0-dev' : _process$env$_PACKAGE;
+          _process$env$_PACKAGE = "0.14.0", _PACKAGE_VERSION_ = _process$env$_PACKAGE === void 0 ? '0.0.0-dev' : _process$env$_PACKAGE;
           logger.log(_chalk.default.bgBlue(_chalk.default.black("\uD83D\uDCDA Atlassian-Frontend codemod library @ ".concat(_PACKAGE_VERSION_, " \uD83D\uDCDA"))));
           if (packages && packages.length > 0) {
             logger.log(_chalk.default.gray("Searching for codemods for newer versions of the following packages: ".concat(packages.map(function (pkg) {

package/dist/cjs/presets/css-to-design-tokens/css-to-design-tokens.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = transformer;
+exports.isColorProperty = isColorProperty;
 var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
 var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
@@ -18,6 +19,10 @@ var _legacyColors = require("./utils/legacy-colors");
 var _meta = require("./utils/meta");
 // @ts-ignore
 
+var options = {
+  syntax: _postcssLess.default,
+  from: undefined
+};
 var tokens = _tokensRaw.light.filter(function (t) {
   return t.attributes.state === 'active';
 }).map(function (t) {
@@ -46,7 +51,7 @@ function stripLessVar(prop) {
   return prop.substring(1);
 }
 function isColorProperty(prop) {
-  return prop === 'color' || prop === 'background' || prop === 'background-color' || prop === 'box-shadow' || prop === 'border' || prop === 'border-left' || prop === 'border-right' || prop === 'border-top' || prop === 'border-bottom' || prop === 'border-color';
+  return prop === 'color' || prop === 'background' || prop === 'background-color' || prop === 'box-shadow' || prop === 'border' || prop === 'border-left' || prop === 'border-right' || prop === 'border-top' || prop === 'border-bottom' || prop === 'border-color' || prop === 'outline';
 }
 function getDeclarationMeta(decl) {
   if (decl.prop === 'color') {
@@ -100,6 +105,9 @@ var plugin = function plugin() {
       if (!isColorProperty(decl.prop)) {
         return;
       }
+      if (decl.value === 'none') {
+        return;
+      }
       var searchTerms = [getDeclarationMeta(decl)].concat((0, _toConsumableArray2.default)(getParentSelectors(decl).split(/\-|\.|\,|\ |\:|\&/).filter(function (el) {
         return !!el;
       })));
@@ -120,10 +128,10 @@ var plugin = function plugin() {
       }
 
       // Less variables
-      var lassVarMatch = decl.value.match(lessVarRe);
-      if (lassVarMatch) {
+      var lessVarMatch = decl.value.match(lessVarRe);
+      if (lessVarMatch) {
         var _getMetaFromCssVar2;
-        match = lassVarMatch[0];
+        match = lessVarMatch[0];
         searchTerms.push.apply(searchTerms, (0, _toConsumableArray2.default)((_getMetaFromCssVar2 = getMetaFromCssVar("--".concat(stripLessVar(match)))) !== null && _getMetaFromCssVar2 !== void 0 ? _getMetaFromCssVar2 : []));
       }
 
@@ -168,16 +176,19 @@ function transformer(_x) {
 }
 function _transformer() {
   _transformer = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(file) {
+    var processor, src, _yield$processor$proc, css;
     return _regenerator.default.wrap(function _callee$(_context) {
       while (1) switch (_context.prev = _context.next) {
         case 0:
-          _context.next = 2;
-          return (0, _postcss.default)([plugin()]).process(file.source, {
-            syntax: _postcssLess.default
-          }).css;
-        case 2:
-          return _context.abrupt("return", _context.sent);
-        case 3:
+          processor = (0, _postcss.default)([plugin()]);
+          src = typeof file === 'string' ? file : file.source;
+          _context.next = 4;
+          return processor.process(src, options);
+        case 4:
+          _yield$processor$proc = _context.sent;
+          css = _yield$processor$proc.css;
+          return _context.abrupt("return", css);
+        case 7:
         case "end":
           return _context.stop();
       }

package/dist/cjs/presets/theme-to-design-tokens/theme-to-design-tokens.js

@@ -5,6 +5,9 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = transformer;
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _utils = require("@codeshift/utils");
 var _ast = require("./utils/ast");
@@ -13,17 +16,12 @@ var _color = require("./utils/color");
 var _fuzzySearch = _interopRequireDefault(require("./utils/fuzzy-search"));
 var _legacyColors = require("./utils/legacy-colors");
 var _tokens = require("./utils/tokens");
-/* eslint-disable no-console */
-
-var kebabize = function kebabize(str) {
-  return str.replace(/[A-Z]+(?![a-z])|[A-Z]/g, function ($, ofs) {
-    return (ofs ? '-' : '') + $.toLowerCase();
-  });
-};
-function isBoldColor(color) {
-  var number = parseInt(color.replace(/^./, ''), 10);
-  return number > 300;
-}
+var _stringUtils = require("./utils/string-utils");
+var _cssUtils = require("./utils/css-utils");
+var _cssToDesignTokens = _interopRequireDefault(require("../css-to-design-tokens/css-to-design-tokens"));
+function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it.return != null) it.return(); } finally { if (didErr) throw err; } } }; }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; } /* eslint-disable no-console */
 function insertTokenImport(j, source) {
   if ((0, _utils.hasImportDeclaration)(j, source, '@atlaskit/tokens')) {
     return;
@@ -35,6 +33,24 @@ function buildToken(j, tokenId, node) {
   var callExpr = j.callExpression(j.identifier('token'), [j.stringLiteral(tokenId), node].filter(Boolean));
   return callExpr;
 }
+
+// Wrap over the j.templateElement builder to provide a more convenient API.
+function buildTemplateElement(j, text) {
+  var options = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {
+    tail: false,
+    fromNode: null
+  };
+  var tail;
+  if (options.fromNode) {
+    tail = options.fromNode.tail;
+  } else {
+    tail = !!options.tail;
+  }
+  return j.templateElement({
+    raw: text,
+    cooked: null
+  }, tail);
+}
 function getColorFromIdentifier(expression) {
   var value = '';
   if (expression.type === 'Identifier') {
@@ -50,8 +66,8 @@ function getColorFromIdentifier(expression) {
 }
 function getTokenFromNode(j, path, value, propertyName) {
   var valueMeta = (0, _astMeta.cleanMeta)(_legacyColors.legacyColorMetaMap[value] || []);
-  var ancestorMeta = (0, _astMeta.cleanMeta)([].concat((0, _toConsumableArray2.default)((0, _astMeta.getMetaFromAncestors)(j, path)), (0, _toConsumableArray2.default)(kebabize(propertyName).split('-'))) || []);
-  var property = (0, _astMeta.cleanMeta)([kebabize(propertyName)])[0];
+  var ancestorMeta = (0, _astMeta.cleanMeta)([].concat((0, _toConsumableArray2.default)((0, _astMeta.getMetaFromAncestors)(j, path)), (0, _toConsumableArray2.default)((0, _stringUtils.kebabize)(propertyName).split('-'))) || []);
+  var property = (0, _astMeta.cleanMeta)([(0, _stringUtils.kebabize)(propertyName)])[0];
 
   // Attempt to find a property from ancestors if one is not found
   if (!property || !['border', 'icon', 'background', 'text'].includes(property)) {
@@ -100,7 +116,7 @@ function getTokenFromNode(j, path, value, propertyName) {
     } else if (value.includes('N0')) {
       // default surface
       meta.push('elevation', 'surface');
-    } else if (valueMeta.includes('neutral') && isBoldColor(value)) {
+    } else if (valueMeta.includes('neutral') && (0, _color.isBoldColor)(value)) {
       // bold netural backgrounds
       meta.push('background', 'neutral', 'bold');
     } else if (valueMeta.includes('neutral')) {
@@ -146,100 +162,328 @@ function getTokenFromNode(j, path, value, propertyName) {
 }
 function parseCSSPropertyName(cssString) {
   var lastColonIndex = cssString.lastIndexOf(':');
-  var propertyNameEndIndex = Math.max(cssString.lastIndexOf(';', lastColonIndex), cssString.lastIndexOf(' ', lastColonIndex));
-  return cssString.slice(propertyNameEndIndex + 1, lastColonIndex).trim();
+  if (lastColonIndex === -1) {
+    return {
+      colonIndex: null,
+      cssPropertyName: null
+    };
+  }
+  var propertyNameEndIndex = Math.max(cssString.lastIndexOf(';', lastColonIndex), cssString.lastIndexOf(' ', lastColonIndex), -1);
+  var startIndex = propertyNameEndIndex + 1;
+  return {
+    cssPropertyName: cssString.slice(startIndex, lastColonIndex).trim(),
+    colonIndex: lastColonIndex
+  };
+}
+function transformer(_x, _x2) {
+  return _transformer.apply(this, arguments);
 }
-function transformer(file, api) {
-  var debug = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
-  var j = api.jscodeshift;
-  var source = j(file.source);
-  var transformed = false;
+function _transformer() {
+  _transformer = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(file, api) {
+    var debug,
+      j,
+      source,
+      transformed,
+      templateLiteralPaths,
+      _iterator,
+      _step,
+      _loop,
+      replaceStringLiteralIfItConsistsOnlyOfColor,
+      replaceTemplateLiteralExpression,
+      _args2 = arguments;
+    return _regenerator.default.wrap(function _callee$(_context2) {
+      while (1) switch (_context2.prev = _context2.next) {
+        case 0:
+          replaceTemplateLiteralExpression = function _replaceTemplateLiter(j, mainPath, expressionPath, expressionIndex) {
+            var expression = expressionPath.value;
+            if (!(expression.type === 'MemberExpression' || expression.type === 'Identifier')) {
+              return false;
+            }
+            if ((0, _ast.isDecendantOfToken)(j, expressionPath)) {
+              return false;
+            }
+            var value = getColorFromIdentifier(expression);
+            if (!value || !(0, _color.includesHardCodedColor)(value) && !(0, _color.isHardCodedColor)(value) && !(0, _color.isLegacyColor)(value) && !(0, _color.isLegacyNamedColor)(value)) {
+              return false;
+            }
+            var precedingQuasi = mainPath.value.quasis[expressionIndex];
+            var precedingQuasiText = precedingQuasi.value.raw;
+            var _parseCSSPropertyName = parseCSSPropertyName(precedingQuasiText),
+              cssPropertyName = _parseCSSPropertyName.cssPropertyName,
+              colonIndex = _parseCSSPropertyName.colonIndex;
+            if (!cssPropertyName) {
+              return false;
+            }
+            var tokenId = getTokenFromNode(j, expressionPath, value, cssPropertyName);
+            insertTokenImport(j, source);
+            var newQuasis = (0, _toConsumableArray2.default)(mainPath.value.quasis);
+            var newExpressions = (0, _toConsumableArray2.default)(mainPath.value.expressions);
+            if (cssPropertyName !== 'box-shadow') {
+              var tokenExpression = buildToken(j, tokenId, expressionPath.value);
+              newExpressions[expressionIndex] = tokenExpression;
+            } else {
+              // box-shadow is a multi-part property where the color can appear at any
+              // part position (even though the standard suggests that color comes
+              // last, browsers' CSS parsers are more lax). If we get here, then the
+              // color part is replaceable.  Textually, it's something like:
+              //
+              // <rules before>; box-shadow: 0 1px ${colors.N50} 2rem; <rules after>
+              //
+              // the fallback value will be multipart, i.e. the token call is
+              //
+              // token(<replacedValue>, `0 1px ${colors.N50} 2rem`)
+              //
+              // and it's wrapped in a substitution like this:
+              //
+              // <rules before>; box-shadow: ${token(<...>)}; <rules after>
+              //
+              // We stich the fallback from the last part of preceding quasi (after
+              // colon) and the first part of the following quasi (before ';' or '}').
+              //
+              // If multiple box-shadows are comma-separated but only one of them has a
+              // replaceable color and others are hard-coded, this logic would still
+              // work. When multiple shadows have expressions, it's unfortunately not
+              // possible to proceed because we cannot find where the value ends from a
+              // single following quasi.
+              var valueStartIndex = (0, _stringUtils.findFirstNonspaceIndexAfter)(precedingQuasiText, colonIndex);
+              var _splitAtIndex = (0, _stringUtils.splitAtIndex)(precedingQuasiText, valueStartIndex),
+                _splitAtIndex2 = (0, _slicedToArray2.default)(_splitAtIndex, 2),
+                newPrecedingQuasiText = _splitAtIndex2[0],
+                partialValueBeginning = _splitAtIndex2[1];
+              var followingQuasi = mainPath.value.quasis[expressionIndex + 1];
+              var followingQuasiText = followingQuasi.value.raw;
+              var valueEndIndex = (0, _cssUtils.findEndIndexOfCSSExpression)(followingQuasiText, followingQuasi.tail);
+              if (!valueEndIndex) {
+                console.warn('cannot find end of box-shadow value, please check manually');
+                return false;
+              }
+              var _splitAtIndex3 = (0, _stringUtils.splitAtIndex)(followingQuasiText, valueEndIndex + 1),
+                _splitAtIndex4 = (0, _slicedToArray2.default)(_splitAtIndex3, 2),
+                partialValueEnd = _splitAtIndex4[0],
+                newFollowingQuasiText = _splitAtIndex4[1];
+              var internalQuasis = [buildTemplateElement(j, partialValueBeginning, {
+                tail: false
+              }), buildTemplateElement(j, partialValueEnd, {
+                tail: true
+              })];
+              var internalExpressions = [expressionPath.value];
+              var newFallback = j.templateLiteral(internalQuasis, internalExpressions);
+              var newExpression = buildToken(j, tokenId, newFallback);
+              newQuasis[expressionIndex] = buildTemplateElement(j, newPrecedingQuasiText, {
+                fromNode: newQuasis[expressionIndex]
+              });
+              newExpressions[expressionIndex] = newExpression;
+              newQuasis[expressionIndex + 1] = buildTemplateElement(j, newFollowingQuasiText, {
+                fromNode: newQuasis[expressionIndex]
+              });
+            }
+            mainPath.replace(j.templateLiteral(newQuasis, newExpressions));
+            return true;
+          };
+          replaceStringLiteralIfItConsistsOnlyOfColor = function _replaceStringLiteral(j, path, value) {
+            if ((0, _ast.isDecendantOfToken)(j, path)) {
+              return false;
+            }
+            if ((0, _color.isHardCodedColor)(value) && !(0, _color.isLegacyColor)(value) && !(0, _color.isLegacyNamedColor)(value)) {
+              var parent = path.parent.value;
+              var key = '';
+              if (parent.type === 'VariableDeclarator') {
+                key = parent.id.name;
+              }
+              var tokenId = getTokenFromNode(j, path, value, key);
+              insertTokenImport(j, source);
+              j(path).replaceWith(buildToken(j, tokenId, path.value));
+              return true;
+            }
+            return false;
+          };
+          debug = _args2.length > 2 && _args2[2] !== undefined ? _args2[2] : false;
+          j = api.jscodeshift;
+          source = j(file.source);
+          transformed = false; // Objects
+          source.find(j.ObjectProperty).forEach(function (path) {
+            if (path.value.value.type === 'ObjectExpression') {
+              return;
+            }
 
-  // Objects
-  source.find(j.ObjectProperty).forEach(function (path) {
-    if (path.value.value.type === 'ObjectExpression') {
-      return;
-    }
+            // Avoid transforming objects that are default arguments
+            if (path.parent.parent.value.type === 'ArrowFunctionExpression' || path.parent.parent.value.type === 'FunctionDeclaration') {
+              return;
+            }
+            if ((0, _ast.isParentOfToken)(j, path.value.value)) {
+              return;
+            }
+            var value = getColorFromIdentifier(path.value.value);
+            if (!value || !(0, _color.includesHardCodedColor)(value) && !(0, _color.isHardCodedColor)(value) && !(0, _color.isLegacyColor)(value) && !(0, _color.isLegacyNamedColor)(value)) {
+              return;
+            }
+            var key;
+            if (path.value.key.type === 'NumericLiteral' || path.value.key.type === 'StringLiteral') {
+              key = path.value.key.value.toString();
+            }
+            if (path.value.key.type === 'Identifier') {
+              key = path.value.key.name;
+            }
 
-    // Avoid transforming objects that are default arguments
-    if (path.parent.parent.value.type === 'ArrowFunctionExpression' || path.parent.parent.value.type === 'FunctionDeclaration') {
-      return;
-    }
-    if ((0, _ast.isParentOfToken)(j, path.value.value)) {
-      return;
-    }
-    var value = getColorFromIdentifier(path.value.value);
-    if (!value || !(0, _color.includesHardCodedColor)(value) && !(0, _color.isHardCodedColor)(value) && !(0, _color.isLegacyColor)(value) && !(0, _color.isLegacyNamedColor)(value)) {
-      return;
-    }
-    var key;
-    if (path.value.key.type === 'NumericLiteral' || path.value.key.type === 'StringLiteral') {
-      key = path.value.key.value.toString();
-    }
-    if (path.value.key.type === 'Identifier') {
-      key = path.value.key.name;
-    }
+            // Key is a node type we do not support
+            if (!key) {
+              return;
+            }
+            var tokenId = getTokenFromNode(j, path, value, key);
+            insertTokenImport(j, source);
+            j(path).replaceWith(j.objectProperty(path.value.key, buildToken(j, tokenId, path.value.value)));
+            transformed = true;
+          });
 
-    // Key is a node type we do not support
-    if (!key) {
-      return;
-    }
-    var tokenId = getTokenFromNode(j, path, value, key);
-    insertTokenImport(j, source);
-    j(path).replaceWith(j.objectProperty(path.value.key, buildToken(j, tokenId, path.value.value)));
-    transformed = true;
-  });
+          // JSX props
+          source.find(j.JSXAttribute).forEach(function (path) {
+            var _path$value, _path$value$value;
+            if (((_path$value = path.value) === null || _path$value === void 0 ? void 0 : (_path$value$value = _path$value.value) === null || _path$value$value === void 0 ? void 0 : _path$value$value.type) !== 'JSXExpressionContainer') {
+              return;
+            }
+            if ((0, _ast.isParentOfToken)(j, path)) {
+              return;
+            }
+            var expression = path.value.value.expression;
+            var value = getColorFromIdentifier(expression);
+            if (!value || !(0, _color.includesHardCodedColor)(value) && !(0, _color.isHardCodedColor)(value) && !(0, _color.isLegacyColor)(value) && !(0, _color.isLegacyNamedColor)(value)) {
+              return;
+            }
+            var tokenId = getTokenFromNode(j, path, value, path.value.name.name);
+            insertTokenImport(j, source);
+            j(path).find(j.JSXExpressionContainer).forEach(function (path) {
+              var tokenNode = buildToken(j, tokenId, path.value.expression);
+              j(path).replaceWith(j.jsxExpressionContainer(tokenNode));
+            });
+            transformed = true;
+          });
 
-  // Template literals
-  source.find(j.TemplateLiteral).forEach(function (path) {
-    function replaceTemplateLiteralExpressions(j, expression, index) {
-      if ((0, _ast.isDecendantOfToken)(j, expression)) {
-        return;
-      }
-      if (index >= path.value.quasis.length) {
-        return;
-      }
-      var quasi = path.value.quasis[index];
-      var value = getColorFromIdentifier(expression.value);
-      if (!value || !(0, _color.includesHardCodedColor)(value) && !(0, _color.isHardCodedColor)(value) && !(0, _color.isLegacyColor)(value) && !(0, _color.isLegacyNamedColor)(value)) {
-        return;
-      }
-      var tokenId = getTokenFromNode(j, expression, value, parseCSSPropertyName(quasi.value.cooked || ''));
-      insertTokenImport(j, source);
-      expression.replace(buildToken(j, tokenId, expression.value));
-    }
-    j(path).find(j.Identifier).filter(function (expression) {
-      return !(0, _utils.isDecendantOfType)(j, expression, j.MemberExpression);
-    }).forEach(function (expression, i) {
-      return replaceTemplateLiteralExpressions(j, expression, i);
-    });
-    j(path).find(j.MemberExpression).forEach(function (expression, i) {
-      return replaceTemplateLiteralExpressions(j, expression, i);
-    });
-    transformed = true;
-  });
+          // Strings
+          source.find(j.StringLiteral).forEach(function (path) {
+            j(path).filter(function (expression) {
+              return !(0, _utils.isDecendantOfType)(j, expression, j.ObjectExpression);
+            }).forEach(function (path) {
+              var value = path.value.value;
+              if (replaceStringLiteralIfItConsistsOnlyOfColor(j, path, value)) {
+                transformed = true;
+              }
+            });
+          });
+          templateLiteralPaths = source.find(j.TemplateLiteral).paths();
+          _iterator = _createForOfIteratorHelper(templateLiteralPaths);
+          _context2.prev = 11;
+          _loop = /*#__PURE__*/_regenerator.default.mark(function _loop() {
+            var path, text, quasiPaths, _iterator2, _step2, quasiPath, _text, newCSS;
+            return _regenerator.default.wrap(function _loop$(_context) {
+              while (1) switch (_context.prev = _context.next) {
+                case 0:
+                  path = _step.value;
+                  // Background: a 'type: TemplateLiteral' Node has quasis and expressions
+                  // (see ast-types/src/gen/namedTypes.ts), and invariant holds that
+                  // quasis.length === expression.length + 1.
+                  //
+                  // eg `${foo}bar` has quasis [Node(''), Node('bar')] and expressions
+                  // [Node('foo')]. Each quasi has type: 'TemplateElement'; expressions are
+                  // probably safe to treat as subtypes of Expression, though ast-types
+                  // codebase has a more involved definition.
+                  if (path.value.expressions.length === 0) {
+                    // A single-quasi (equivalently, no-expression) template literal is
+                    // basically just a string literal, possibly multi-line. We handle the
+                    // simple `#ababab` case here, and the multi-line case after.
+                    text = path.value.quasis[0].value.raw;
+                    if (replaceStringLiteralIfItConsistsOnlyOfColor(j, path, text)) {
+                      transformed = true;
+                    }
+                  } else {
+                    j(path).find(j.Expression).filter(function (expressionPath) {
+                      // jscodeshift walks over the whole tree; we are interested only in
+                      // the direct children: i.e. top-level expressions appearing in ${}.
+                      return expressionPath.parent === path;
+                    }).forEach(function (expressionPath, expressionIndex) {
+                      if (replaceTemplateLiteralExpression(j, path, expressionPath, expressionIndex)) {
+                        transformed = true;
+                      }
+                    });
+                  }
 
-  // JSX props
-  source.find(j.JSXAttribute).forEach(function (path) {
-    var _path$value, _path$value$value;
-    if (((_path$value = path.value) === null || _path$value === void 0 ? void 0 : (_path$value$value = _path$value.value) === null || _path$value$value === void 0 ? void 0 : _path$value$value.type) !== 'JSXExpressionContainer') {
-      return;
-    }
-    if ((0, _ast.isParentOfToken)(j, path)) {
-      return;
-    }
-    var expression = path.value.value.expression;
-    var value = getColorFromIdentifier(expression);
-    if (!value || !(0, _color.includesHardCodedColor)(value) && !(0, _color.isHardCodedColor)(value) && !(0, _color.isLegacyColor)(value) && !(0, _color.isLegacyNamedColor)(value)) {
-      return;
-    }
-    var tokenId = getTokenFromNode(j, path, value, path.value.name.name);
-    insertTokenImport(j, source);
-    j(path).find(j.JSXExpressionContainer).forEach(function (path) {
-      var tokenNode = buildToken(j, tokenId, path.value.expression);
-      j(path).replaceWith(j.jsxExpressionContainer(tokenNode));
-    });
-    transformed = true;
-  });
-  return transformed ? source.toSource() : file.source;
+                  // No matter if we have one big quasi or many small chunks between
+                  // expressions (which potentially have been transformed), try to pass them
+                  // through the CSS transformer; it's robust enough to understand malformed
+                  // CSS that would result if we split e.g. this template:
+                  //
+                  // `${gridSize}px; color: red;`, giving `px; color: red;` as input; or
+                  // `@media ${mobile} { color: red }`, giving `{ color: red }`.
+                  quasiPaths = j(path).find(j.TemplateElement).filter(function (quasiPath) {
+                    return quasiPath.parent === path;
+                  }).paths();
+                  _iterator2 = _createForOfIteratorHelper(quasiPaths);
+                  _context.prev = 4;
+                  _iterator2.s();
+                case 6:
+                  if ((_step2 = _iterator2.n()).done) {
+                    _context.next = 17;
+                    break;
+                  }
+                  quasiPath = _step2.value;
+                  _text = quasiPath.value.value.raw;
+                  if (!((0, _color.includesHardCodedColor)(_text) && (0, _cssUtils.containsReplaceableCSSDeclarations)(_text))) {
+                    _context.next = 15;
+                    break;
+                  }
+                  _context.next = 12;
+                  return (0, _cssToDesignTokens.default)(_text);
+                case 12:
+                  newCSS = _context.sent;
+                  j(quasiPath).replaceWith(buildTemplateElement(j, newCSS));
+                  transformed = true;
+                case 15:
+                  _context.next = 6;
+                  break;
+                case 17:
+                  _context.next = 22;
+                  break;
+                case 19:
+                  _context.prev = 19;
+                  _context.t0 = _context["catch"](4);
+                  _iterator2.e(_context.t0);
+                case 22:
+                  _context.prev = 22;
+                  _iterator2.f();
+                  return _context.finish(22);
+                case 25:
+                case "end":
+                  return _context.stop();
+              }
+            }, _loop, null, [[4, 19, 22, 25]]);
+          });
+          _iterator.s();
+        case 14:
+          if ((_step = _iterator.n()).done) {
+            _context2.next = 18;
+            break;
+          }
+          return _context2.delegateYield(_loop(), "t0", 16);
+        case 16:
+          _context2.next = 14;
+          break;
+        case 18:
+          _context2.next = 23;
+          break;
+        case 20:
+          _context2.prev = 20;
+          _context2.t1 = _context2["catch"](11);
+          _iterator.e(_context2.t1);
+        case 23:
+          _context2.prev = 23;
+          _iterator.f();
+          return _context2.finish(23);
+        case 26:
+          return _context2.abrupt("return", transformed ? source.toSource() : file.source);
+        case 27:
+        case "end":
+          return _context2.stop();
+      }
+    }, _callee, null, [[11, 20, 23, 26]]);
+  }));
+  return _transformer.apply(this, arguments);
 }

package/dist/cjs/presets/theme-to-design-tokens/utils/ast.js

@@ -8,7 +8,7 @@ exports.isDecendantOfToken = isDecendantOfToken;
 exports.isParentOfToken = isParentOfToken;
 var _utils = require("@codeshift/utils");
 function isDecendantOfToken(j, path) {
-  if (path.type === 'CallExpression' && path.callee.type === 'Identifier' && path.callee.name === 'token') {
+  if ('type' in path && path.type === 'CallExpression' && path.callee.type === 'Identifier' && path.callee.name === 'token') {
     return true;
   }
   return j(path).closest(j.CallExpression, {