@atlaskit/codemod-cli 0.13.4 → 0.14.0

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

@@ -3,7 +3,9 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.isLegacyNamedColor = exports.isLegacyColor = exports.isHardCodedColor = exports.includesHardCodedColor = void 0;
+exports.includesHardCodedColor = void 0;
+exports.isBoldColor = isBoldColor;
+exports.isLegacyNamedColor = exports.isLegacyColor = exports.isHardCodedColor = void 0;
 var _legacyColors = require("./legacy-colors");
 var _namedColors = require("./named-colors");
 var isLegacyColor = function isLegacyColor(value) {
@@ -14,9 +16,10 @@ var isLegacyNamedColor = function isLegacyNamedColor(value) {
   return _legacyColors.legacyColorMixins.includes(value);
 };
 exports.isLegacyNamedColor = isLegacyNamedColor;
+var colorRegexp = /#(?:[a-f0-9]{3}|[a-f0-9]{6}|[a-f0-9]{8})\b|(?:rgb|rgba|hsl|hsla|lch|lab|color)\([^\)]*\)/;
 var includesHardCodedColor = function includesHardCodedColor(raw) {
   var value = raw.toLowerCase();
-  if (/#(?:[a-f0-9]{3}|[a-f0-9]{6}|[a-f0-9]{8})\b|(?:rgb|hsl)a?\([^\)]*\)/.exec(value.toLowerCase())) {
+  if (colorRegexp.exec(value)) {
     return true;
   }
   for (var i = 0; i < _namedColors.namedColors.length; i++) {
@@ -27,18 +30,19 @@ var includesHardCodedColor = function includesHardCodedColor(raw) {
   return false;
 };
 exports.includesHardCodedColor = includesHardCodedColor;
-var isHardCodedColor = function isHardCodedColor(value) {
-  if (_namedColors.namedColors.includes(value.toLowerCase())) {
-    return true;
-  }
-  if (value.startsWith('rgb(') || value.startsWith('rgba(') || value.startsWith('hsl(') || value.startsWith('hsla(') || value.startsWith('lch(') || value.startsWith('lab(') || value.startsWith('color(')) {
+var isHardCodedColor = function isHardCodedColor(raw) {
+  var value = raw.toLowerCase();
+  if (_namedColors.namedColors.includes(value)) {
     return true;
   }
-  if (value.startsWith('#') && (
-  // short hex, hex, or hex with alpha
-  value.length === 4 || value.length === 7 || value.length === 9)) {
+  var match = value.toLowerCase().match(colorRegexp);
+  if (match && match[0] === value) {
     return true;
   }
   return false;
 };
-exports.isHardCodedColor = isHardCodedColor;
+exports.isHardCodedColor = isHardCodedColor;
+function isBoldColor(color) {
+  var number = parseInt(color.replace(/^./, ''), 10);
+  return number > 300;
+}

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

@@ -0,0 +1,38 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.containsReplaceableCSSDeclarations = containsReplaceableCSSDeclarations;
+exports.findEndIndexOfCSSExpression = findEndIndexOfCSSExpression;
+var _cssToDesignTokens = require("../../css-to-design-tokens/css-to-design-tokens");
+function containsReplaceableCSSDeclarations(input) {
+  var cssPattern = /(\S+)\s*:/g;
+  var match;
+  while ((match = cssPattern.exec(input)) !== null) {
+    if ((0, _cssToDesignTokens.isColorProperty)(match[1])) {
+      return true;
+    }
+  }
+  return false;
+}
+function findEndIndexOfCSSExpression(text, isAtEndOfInput) {
+  // CSS expression can end *on* a semicolon or *before* a brace. In either
+  // case we treat the remaining part of the value to cover one character
+  // before that symbol.
+  var semicolonIndex = text.indexOf(';');
+  var braceIndex = text.indexOf('}');
+  if (semicolonIndex === -1 && braceIndex === -1) {
+    if (isAtEndOfInput) {
+      return text.length;
+    } else {
+      return null;
+    }
+  } else if (semicolonIndex === -1) {
+    return braceIndex - 1;
+  } else if (braceIndex === -1) {
+    return semicolonIndex - 1;
+  } else {
+    return Math.min(semicolonIndex, braceIndex) - 1;
+  }
+}

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

@@ -0,0 +1,26 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.findFirstNonspaceIndexAfter = findFirstNonspaceIndexAfter;
+exports.kebabize = void 0;
+exports.splitAtIndex = splitAtIndex;
+var kebabize = function kebabize(str) {
+  return str.replace(/[A-Z]+(?![a-z])|[A-Z]/g, function ($, ofs) {
+    return (ofs ? '-' : '') + $.toLowerCase();
+  });
+};
+exports.kebabize = kebabize;
+function findFirstNonspaceIndexAfter(text, index) {
+  var rest = text.slice(index + 1);
+  var indexInRest = rest.search(/\S/);
+  if (indexInRest === -1) {
+    return text.length;
+  } else {
+    return index + 1 + indexInRest;
+  }
+}
+function splitAtIndex(text, index) {
+  return [text.slice(0, index), text.slice(index)];
+}

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

@@ -6,6 +6,10 @@ import designTokens from '@atlaskit/tokens/token-names';
 import Search from '../theme-to-design-tokens/utils/fuzzy-search';
 import { knownVariables, knownColors, knownRawColors } from './utils/legacy-colors';
 import { cleanMeta } from './utils/meta';
+const options = {
+  syntax: lessSyntax,
+  from: undefined
+};
 const tokens = rawTokens.filter(t => t.attributes.state === 'active').map(t => t.name.replace(/\.\[default\]/g, '')).filter(t => !t.includes('UNSAFE') && !t.includes('interaction'));
 const search = Search(tokens, false);
 function isRule(node) {
@@ -27,8 +31,8 @@ function stripVar(prop) {
 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';
+export 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' || prop === 'outline';
 }
 function getDeclarationMeta(decl) {
   if (decl.prop === 'color') {
@@ -77,6 +81,9 @@ const plugin = () => {
       if (!isColorProperty(decl.prop)) {
         return;
       }
+      if (decl.value === 'none') {
+        return;
+      }
       const searchTerms = [getDeclarationMeta(decl), ...getParentSelectors(decl).split(/\-|\.|\,|\ |\:|\&/).filter(el => !!el)];
       let match;
       const cssVarRe = /var\([^\)]+\)/g;
@@ -95,10 +102,10 @@ const plugin = () => {
       }
 
       // Less variables
-      const lassVarMatch = decl.value.match(lessVarRe);
-      if (lassVarMatch) {
+      const lessVarMatch = decl.value.match(lessVarRe);
+      if (lessVarMatch) {
         var _getMetaFromCssVar2;
-        match = lassVarMatch[0];
+        match = lessVarMatch[0];
         searchTerms.push(...((_getMetaFromCssVar2 = getMetaFromCssVar(`--${stripLessVar(match)}`)) !== null && _getMetaFromCssVar2 !== void 0 ? _getMetaFromCssVar2 : []));
       }
 
@@ -137,7 +144,10 @@ const plugin = () => {
   };
 };
 export default async function transformer(file) {
-  return await postcss([plugin()]).process(file.source, {
-    syntax: lessSyntax
-  }).css;
+  const processor = postcss([plugin()]);
+  const src = typeof file === 'string' ? file : file.source;
+  const {
+    css
+  } = await processor.process(src, options);
+  return css;
 }

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

@@ -3,15 +3,13 @@
 import { isDecendantOfType, hasImportDeclaration } from '@codeshift/utils';
 import { isDecendantOfToken, isParentOfToken } from './utils/ast';
 import { cleanMeta, getMetaFromAncestors } from './utils/ast-meta';
-import { includesHardCodedColor, isHardCodedColor, isLegacyColor, isLegacyNamedColor } from './utils/color';
+import { includesHardCodedColor, isHardCodedColor, isLegacyColor, isLegacyNamedColor, isBoldColor } from './utils/color';
 import Search from './utils/fuzzy-search';
 import { legacyColorMetaMap } from './utils/legacy-colors';
 import { tokens } from './utils/tokens';
-const kebabize = str => str.replace(/[A-Z]+(?![a-z])|[A-Z]/g, ($, ofs) => (ofs ? '-' : '') + $.toLowerCase());
-function isBoldColor(color) {
-  const number = parseInt(color.replace(/^./, ''), 10);
-  return number > 300;
-}
+import { kebabize, findFirstNonspaceIndexAfter, splitAtIndex } from './utils/string-utils';
+import { containsReplaceableCSSDeclarations, findEndIndexOfCSSExpression } from './utils/css-utils';
+import CSSTransformer from '../css-to-design-tokens/css-to-design-tokens';
 function insertTokenImport(j, source) {
   if (hasImportDeclaration(j, source, '@atlaskit/tokens')) {
     return;
@@ -23,6 +21,23 @@ function buildToken(j, tokenId, node) {
   const 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, options = {
+  tail: false,
+  fromNode: null
+}) {
+  let tail;
+  if (options.fromNode) {
+    tail = options.fromNode.tail;
+  } else {
+    tail = !!options.tail;
+  }
+  return j.templateElement({
+    raw: text,
+    cooked: null
+  }, tail);
+}
 function getColorFromIdentifier(expression) {
   let value = '';
   if (expression.type === 'Identifier') {
@@ -126,10 +141,20 @@ function getTokenFromNode(j, path, value, propertyName) {
 }
 function parseCSSPropertyName(cssString) {
   const lastColonIndex = cssString.lastIndexOf(':');
-  const propertyNameEndIndex = Math.max(cssString.lastIndexOf(';', lastColonIndex), cssString.lastIndexOf(' ', lastColonIndex));
-  return cssString.slice(propertyNameEndIndex + 1, lastColonIndex).trim();
+  if (lastColonIndex === -1) {
+    return {
+      colonIndex: null,
+      cssPropertyName: null
+    };
+  }
+  const propertyNameEndIndex = Math.max(cssString.lastIndexOf(';', lastColonIndex), cssString.lastIndexOf(' ', lastColonIndex), -1);
+  const startIndex = propertyNameEndIndex + 1;
+  return {
+    cssPropertyName: cssString.slice(startIndex, lastColonIndex).trim(),
+    colonIndex: lastColonIndex
+  };
 }
-export default function transformer(file, api, debug = false) {
+export default async function transformer(file, api, debug = false) {
   const j = api.jscodeshift;
   const source = j(file.source);
   let transformed = false;
@@ -169,29 +194,6 @@ export default function transformer(file, api, debug = false) {
     transformed = true;
   });
 
-  // Template literals
-  source.find(j.TemplateLiteral).forEach(path => {
-    function replaceTemplateLiteralExpressions(j, expression, index) {
-      if (isDecendantOfToken(j, expression)) {
-        return;
-      }
-      if (index >= path.value.quasis.length) {
-        return;
-      }
-      const quasi = path.value.quasis[index];
-      const value = getColorFromIdentifier(expression.value);
-      if (!value || !includesHardCodedColor(value) && !isHardCodedColor(value) && !isLegacyColor(value) && !isLegacyNamedColor(value)) {
-        return;
-      }
-      const 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(expression => !isDecendantOfType(j, expression, j.MemberExpression)).forEach((expression, i) => replaceTemplateLiteralExpressions(j, expression, i));
-    j(path).find(j.MemberExpression).forEach((expression, i) => replaceTemplateLiteralExpressions(j, expression, i));
-    transformed = true;
-  });
-
   // JSX props
   source.find(j.JSXAttribute).forEach(path => {
     var _path$value, _path$value$value;
@@ -214,5 +216,162 @@ export default function transformer(file, api, debug = false) {
     });
     transformed = true;
   });
+
+  // Strings
+  source.find(j.StringLiteral).forEach(path => {
+    j(path).filter(expression => !isDecendantOfType(j, expression, j.ObjectExpression)).forEach(path => {
+      const value = path.value.value;
+      if (replaceStringLiteralIfItConsistsOnlyOfColor(j, path, value)) {
+        transformed = true;
+      }
+    });
+  });
+  const templateLiteralPaths = source.find(j.TemplateLiteral).paths();
+  for (const path of templateLiteralPaths) {
+    // 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.
+      const text = path.value.quasis[0].value.raw;
+      if (replaceStringLiteralIfItConsistsOnlyOfColor(j, path, text)) {
+        transformed = true;
+      }
+    } else {
+      j(path).find(j.Expression).filter(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((expressionPath, expressionIndex) => {
+        if (replaceTemplateLiteralExpression(j, path, expressionPath, expressionIndex)) {
+          transformed = true;
+        }
+      });
+    }
+
+    // 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 }`.
+    const quasiPaths = j(path).find(j.TemplateElement).filter(quasiPath => {
+      return quasiPath.parent === path;
+    }).paths();
+    for (const quasiPath of quasiPaths) {
+      const text = quasiPath.value.value.raw;
+      if (includesHardCodedColor(text) && containsReplaceableCSSDeclarations(text)) {
+        const newCSS = await CSSTransformer(text);
+        j(quasiPath).replaceWith(buildTemplateElement(j, newCSS));
+        transformed = true;
+      }
+    }
+  }
+  function replaceStringLiteralIfItConsistsOnlyOfColor(j, path, value) {
+    if (isDecendantOfToken(j, path)) {
+      return false;
+    }
+    if (isHardCodedColor(value) && !isLegacyColor(value) && !isLegacyNamedColor(value)) {
+      const parent = path.parent.value;
+      let key = '';
+      if (parent.type === 'VariableDeclarator') {
+        key = parent.id.name;
+      }
+      const tokenId = getTokenFromNode(j, path, value, key);
+      insertTokenImport(j, source);
+      j(path).replaceWith(buildToken(j, tokenId, path.value));
+      return true;
+    }
+    return false;
+  }
+  function replaceTemplateLiteralExpression(j, mainPath, expressionPath, expressionIndex) {
+    const expression = expressionPath.value;
+    if (!(expression.type === 'MemberExpression' || expression.type === 'Identifier')) {
+      return false;
+    }
+    if (isDecendantOfToken(j, expressionPath)) {
+      return false;
+    }
+    const value = getColorFromIdentifier(expression);
+    if (!value || !includesHardCodedColor(value) && !isHardCodedColor(value) && !isLegacyColor(value) && !isLegacyNamedColor(value)) {
+      return false;
+    }
+    const precedingQuasi = mainPath.value.quasis[expressionIndex];
+    const precedingQuasiText = precedingQuasi.value.raw;
+    const {
+      cssPropertyName,
+      colonIndex
+    } = parseCSSPropertyName(precedingQuasiText);
+    if (!cssPropertyName) {
+      return false;
+    }
+    const tokenId = getTokenFromNode(j, expressionPath, value, cssPropertyName);
+    insertTokenImport(j, source);
+    const newQuasis = [...mainPath.value.quasis];
+    const newExpressions = [...mainPath.value.expressions];
+    if (cssPropertyName !== 'box-shadow') {
+      const 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.
+      const valueStartIndex = findFirstNonspaceIndexAfter(precedingQuasiText, colonIndex);
+      const [newPrecedingQuasiText, partialValueBeginning] = splitAtIndex(precedingQuasiText, valueStartIndex);
+      const followingQuasi = mainPath.value.quasis[expressionIndex + 1];
+      const followingQuasiText = followingQuasi.value.raw;
+      const valueEndIndex = findEndIndexOfCSSExpression(followingQuasiText, followingQuasi.tail);
+      if (!valueEndIndex) {
+        console.warn('cannot find end of box-shadow value, please check manually');
+        return false;
+      }
+      const [partialValueEnd, newFollowingQuasiText] = splitAtIndex(followingQuasiText, valueEndIndex + 1);
+      const internalQuasis = [buildTemplateElement(j, partialValueBeginning, {
+        tail: false
+      }), buildTemplateElement(j, partialValueEnd, {
+        tail: true
+      })];
+      const internalExpressions = [expressionPath.value];
+      const newFallback = j.templateLiteral(internalQuasis, internalExpressions);
+      const 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;
+  }
   return transformed ? source.toSource() : file.source;
 }

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

@@ -1,6 +1,6 @@
 import { isDecendantOfType } from '@codeshift/utils';
 export 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, {

package/dist/es2019/presets/theme-to-design-tokens/utils/color.js

@@ -2,9 +2,10 @@ import { legacyColorMixins, legacyColors } from './legacy-colors';
 import { namedColors } from './named-colors';
 export const isLegacyColor = value => legacyColors.includes(value);
 export const isLegacyNamedColor = value => legacyColorMixins.includes(value);
+const colorRegexp = /#(?:[a-f0-9]{3}|[a-f0-9]{6}|[a-f0-9]{8})\b|(?:rgb|rgba|hsl|hsla|lch|lab|color)\([^\)]*\)/;
 export const includesHardCodedColor = raw => {
   const value = raw.toLowerCase();
-  if (/#(?:[a-f0-9]{3}|[a-f0-9]{6}|[a-f0-9]{8})\b|(?:rgb|hsl)a?\([^\)]*\)/.exec(value.toLowerCase())) {
+  if (colorRegexp.exec(value)) {
     return true;
   }
   for (let i = 0; i < namedColors.length; i++) {
@@ -14,17 +15,18 @@ export const includesHardCodedColor = raw => {
   }
   return false;
 };
-export const isHardCodedColor = value => {
-  if (namedColors.includes(value.toLowerCase())) {
-    return true;
-  }
-  if (value.startsWith('rgb(') || value.startsWith('rgba(') || value.startsWith('hsl(') || value.startsWith('hsla(') || value.startsWith('lch(') || value.startsWith('lab(') || value.startsWith('color(')) {
+export const isHardCodedColor = raw => {
+  const value = raw.toLowerCase();
+  if (namedColors.includes(value)) {
     return true;
   }
-  if (value.startsWith('#') && (
-  // short hex, hex, or hex with alpha
-  value.length === 4 || value.length === 7 || value.length === 9)) {
+  const match = value.toLowerCase().match(colorRegexp);
+  if (match && match[0] === value) {
     return true;
   }
   return false;
-};
+};
+export function isBoldColor(color) {
+  const number = parseInt(color.replace(/^./, ''), 10);
+  return number > 300;
+}

package/dist/es2019/presets/theme-to-design-tokens/utils/css-utils.js

@@ -0,0 +1,31 @@
+import { isColorProperty } from '../../css-to-design-tokens/css-to-design-tokens';
+export function containsReplaceableCSSDeclarations(input) {
+  const cssPattern = /(\S+)\s*:/g;
+  let match;
+  while ((match = cssPattern.exec(input)) !== null) {
+    if (isColorProperty(match[1])) {
+      return true;
+    }
+  }
+  return false;
+}
+export function findEndIndexOfCSSExpression(text, isAtEndOfInput) {
+  // CSS expression can end *on* a semicolon or *before* a brace. In either
+  // case we treat the remaining part of the value to cover one character
+  // before that symbol.
+  const semicolonIndex = text.indexOf(';');
+  const braceIndex = text.indexOf('}');
+  if (semicolonIndex === -1 && braceIndex === -1) {
+    if (isAtEndOfInput) {
+      return text.length;
+    } else {
+      return null;
+    }
+  } else if (semicolonIndex === -1) {
+    return braceIndex - 1;
+  } else if (braceIndex === -1) {
+    return semicolonIndex - 1;
+  } else {
+    return Math.min(semicolonIndex, braceIndex) - 1;
+  }
+}

package/dist/es2019/presets/theme-to-design-tokens/utils/string-utils.js

@@ -0,0 +1,13 @@
+export const kebabize = str => str.replace(/[A-Z]+(?![a-z])|[A-Z]/g, ($, ofs) => (ofs ? '-' : '') + $.toLowerCase());
+export function findFirstNonspaceIndexAfter(text, index) {
+  const rest = text.slice(index + 1);
+  const indexInRest = rest.search(/\S/);
+  if (indexInRest === -1) {
+    return text.length;
+  } else {
+    return index + 1 + indexInRest;
+  }
+}
+export function splitAtIndex(text, index) {
+  return [text.slice(0, index), text.slice(index)];
+}

package/dist/esm/main.js

@@ -291,7 +291,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.bgBlue(chalk.black("\uD83D\uDCDA Atlassian-Frontend codemod library @ ".concat(_PACKAGE_VERSION_, " \uD83D\uDCDA"))));
           if (packages && packages.length > 0) {
             logger.log(chalk.gray("Searching for codemods for newer versions of the following packages: ".concat(packages.map(function (pkg) {

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

@@ -10,6 +10,10 @@ import designTokens from '@atlaskit/tokens/token-names';
 import Search from '../theme-to-design-tokens/utils/fuzzy-search';
 import { knownVariables, knownColors, knownRawColors } from './utils/legacy-colors';
 import { cleanMeta } from './utils/meta';
+var options = {
+  syntax: lessSyntax,
+  from: undefined
+};
 var tokens = rawTokens.filter(function (t) {
   return t.attributes.state === 'active';
 }).map(function (t) {
@@ -37,8 +41,8 @@ function stripVar(prop) {
 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';
+export 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' || prop === 'outline';
 }
 function getDeclarationMeta(decl) {
   if (decl.prop === 'color') {
@@ -92,6 +96,9 @@ var plugin = function plugin() {
       if (!isColorProperty(decl.prop)) {
         return;
       }
+      if (decl.value === 'none') {
+        return;
+      }
       var searchTerms = [getDeclarationMeta(decl)].concat(_toConsumableArray(getParentSelectors(decl).split(/\-|\.|\,|\ |\:|\&/).filter(function (el) {
         return !!el;
       })));
@@ -112,10 +119,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, _toConsumableArray((_getMetaFromCssVar2 = getMetaFromCssVar("--".concat(stripLessVar(match)))) !== null && _getMetaFromCssVar2 !== void 0 ? _getMetaFromCssVar2 : []));
       }
 
@@ -160,16 +167,19 @@ export default function transformer(_x) {
 }
 function _transformer() {
   _transformer = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(file) {
+    var processor, src, _yield$processor$proc, css;
     return _regeneratorRuntime.wrap(function _callee$(_context) {
       while (1) switch (_context.prev = _context.next) {
         case 0:
-          _context.next = 2;
-          return postcss([plugin()]).process(file.source, {
-            syntax: lessSyntax
-          }).css;
-        case 2:
-          return _context.abrupt("return", _context.sent);
-        case 3:
+          processor = postcss([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();
       }