@atlaskit/codemod-cli 0.11.4 → 0.12.0

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

@@ -2,8 +2,8 @@ import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
 import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _regeneratorRuntime from "@babel/runtime/regenerator";
-import postcss from 'postcss'; // @ts-ignore
-
+import postcss from 'postcss';
+// @ts-ignore
 import lessSyntax from 'postcss-less';
 import { light as rawTokens } from '@atlaskit/tokens/tokens-raw';
 import designTokens from '@atlaskit/tokens/token-names';
@@ -18,88 +18,68 @@ var tokens = rawTokens.filter(function (t) {
   return !t.includes('UNSAFE') && !t.includes('interaction');
 });
 var search = Search(tokens, false);
-
 function isRule(node) {
   return node.type === 'rule';
 }
-
 function getParentSelectors(node) {
   if (isRule(node)) {
     // @ts-expect-error
     return getParentSelectors(node.parent) + ' ' + node.selector;
   }
-
   if (node.parent) {
     return getParentSelectors(node.parent);
   }
-
   return '';
 }
-
 function stripVar(prop) {
   return prop.substring(prop.indexOf('(') + 1).split(/\,|\)/)[0];
 }
-
 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';
 }
-
 function getDeclarationMeta(decl) {
   if (decl.prop === 'color') {
     return 'text';
   }
-
   if (decl.prop.startsWith('background')) {
     return 'background';
   }
-
   if (decl.prop.includes('shadow')) {
     return 'shadow';
   }
-
   if (decl.prop.includes('border')) {
     return 'border';
   }
-
   return '';
 }
-
 function isDesignToken(tokenName) {
   return Boolean(Object.entries(designTokens).find(function (_ref) {
     var _ref2 = _slicedToArray(_ref, 2),
-        _ = _ref2[0],
-        value = _ref2[1];
-
+      _ = _ref2[0],
+      value = _ref2[1];
     return tokenName === value;
   }));
 }
-
 function getMetaFromCssVar(tokenName) {
   var meta = knownVariables[tokenName];
-
   if (!meta || meta.length === 0) {
     return tokenName.split('-');
   }
-
   return meta;
 }
-
 function getMetaFromRawColor(rawColor) {
   var cleanColor = rawColor.toLowerCase();
-
   if (cleanColor.length === 4) {
     cleanColor = cleanColor + cleanColor.substring(cleanColor.indexOf('#') + 1);
   }
-
   return knownRawColors[cleanColor];
-} // https://github.com/postcss/postcss/blob/main/docs/writing-a-plugin.md
-// https://astexplorer.net/#/2uBU1BLuJ1
-
+}
 
+// https://github.com/postcss/postcss/blob/main/docs/writing-a-plugin.md
+// https://astexplorer.net/#/2uBU1BLuJ1
 var plugin = function plugin() {
   var processed = Symbol('processed');
   return {
@@ -109,106 +89,88 @@ var plugin = function plugin() {
       if (decl[processed]) {
         return;
       }
-
       if (!isColorProperty(decl.prop)) {
         return;
       }
-
       var searchTerms = [getDeclarationMeta(decl)].concat(_toConsumableArray(getParentSelectors(decl).split(/\-|\.|\,|\ |\:|\&/).filter(function (el) {
         return !!el;
       })));
       var match;
       var cssVarRe = /var\([^\)]+\)/g;
       var lessVarRe = /@[a-zA-Z0-9-]+/g;
-      var rawColorRe = /(#([0-9a-f]{3}){1,2}|(rgba|hsla)\(\d{1,3}%?(,\s?\d{1,3}%?){2},\s?(1|0|0?\.\d+)\)|(rgb|hsl)\(\d{1,3}%?(,\s?\d{1,3}%?){2}\))/i; // CSS variables
+      var rawColorRe = /(#([0-9a-f]{3}){1,2}|(rgba|hsla)\(\d{1,3}%?(,\s?\d{1,3}%?){2},\s?(1|0|0?\.\d+)\)|(rgb|hsl)\(\d{1,3}%?(,\s?\d{1,3}%?){2}\))/i;
 
+      // CSS variables
       var cssVarMatch = decl.value.match(cssVarRe);
-
       if (cssVarMatch) {
         var _getMetaFromCssVar;
-
         match = cssVarMatch[0];
-
         if (isDesignToken(stripVar(match))) {
           return;
         }
-
         searchTerms.push.apply(searchTerms, _toConsumableArray((_getMetaFromCssVar = getMetaFromCssVar(stripVar(match))) !== null && _getMetaFromCssVar !== void 0 ? _getMetaFromCssVar : []));
-      } // Less variables
-
+      }
 
+      // Less variables
       var lassVarMatch = decl.value.match(lessVarRe);
-
       if (lassVarMatch) {
         var _getMetaFromCssVar2;
-
         match = lassVarMatch[0];
         searchTerms.push.apply(searchTerms, _toConsumableArray((_getMetaFromCssVar2 = getMetaFromCssVar("--".concat(stripLessVar(match)))) !== null && _getMetaFromCssVar2 !== void 0 ? _getMetaFromCssVar2 : []));
-      } // Raw colors
-
+      }
 
+      // Raw colors
       var rawColorMatch = decl.value.match(rawColorRe);
-
       if (rawColorMatch) {
         var _getMetaFromRawColor;
-
         match = rawColorMatch[0];
         searchTerms.push.apply(searchTerms, _toConsumableArray((_getMetaFromRawColor = getMetaFromRawColor(match)) !== null && _getMetaFromRawColor !== void 0 ? _getMetaFromRawColor : []));
-      } // Named colors
-
+      }
 
+      // Named colors
       if (knownColors.hasOwnProperty(decl.value)) {
         var _knownColors$decl$val;
-
         match = decl.value;
         searchTerms.push.apply(searchTerms, _toConsumableArray((_knownColors$decl$val = knownColors[decl.value.toLowerCase()]) !== null && _knownColors$decl$val !== void 0 ? _knownColors$decl$val : []));
       }
-
       if (!match) {
         console.warn("Unable to find match for declaration: ".concat(decl.prop, ": ").concat(decl.value));
         return;
       }
-
       var cleanSearchTerms = cleanMeta(searchTerms).join(' ');
       var results = search.get(cleanSearchTerms);
-      var replacement = results ? results.map(function (result) {
+      var candidates = results.map(function (result) {
         return result[1];
-      }) : ['utility.UNSAFE_util.MISSING_TOKEN'];
-
+      });
+      var replacement = candidates.length ? designTokens[candidates[0]] : 'MISSING_TOKEN';
       if (decl.prop === 'box-shadow') {
-        decl.value = "var(".concat(designTokens[replacement[0]], ", ").concat(decl.value, ")");
+        decl.value = "var(".concat(replacement, ", ").concat(decl.value, ")");
       } else {
-        decl.value = decl.value.split(match).join("var(".concat(designTokens[replacement[0]], ", ").concat(match, ")"));
-      } // @ts-expect-error
-
+        decl.value = decl.value.split(match).join("var(".concat(replacement, ", ").concat(match, ")"));
+      }
 
+      // @ts-expect-error
       decl[processed] = true;
     }
   };
 };
-
 export default function transformer(_x) {
   return _transformer.apply(this, arguments);
 }
-
 function _transformer() {
   _transformer = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(file) {
     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:
-          case "end":
-            return _context.stop();
-        }
+      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:
+        case "end":
+          return _context.stop();
       }
     }, _callee);
   }));

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

@@ -150,7 +150,6 @@ export var knownVariables = {
   '--adg3-color-green-light': ['accent', 'subtler', 'green'],
   '--adg3-color-green-dark': ['accent', 'bolder', 'green'],
   '--adg3-color-N20-transparent': [],
-
   /* Alias variables */
   '--jpo-theme-color': ['brand'],
   '--jpo-text-default-color': ['text'],

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

@@ -10,10 +10,8 @@ var getUniqueWordsFromTokens = Object.keys(designTokens).reduce(function (accum,
   if (!accum.includes(val)) {
     accum.push(val);
   }
-
   return accum;
 }, []);
-
 function filterDuplciateFoundations(meta) {
   var foundations = ['text', 'background', 'shadow', 'border'];
   var hasFoundation = false;
@@ -22,15 +20,12 @@ function filterDuplciateFoundations(meta) {
       hasFoundation = true;
       return true;
     }
-
     if (hasFoundation && foundations.includes(val)) {
       return false;
     }
-
     return true;
   });
 }
-
 export function cleanMeta(meta) {
   var cleanMeta = meta.reduce(function (accum, val) {
     return [].concat(_toConsumableArray(accum), _toConsumableArray(typeof val === 'string' ? val.split(/(?=[A-Z])/g).map(function (e) {
@@ -45,7 +40,6 @@ export function cleanMeta(meta) {
     if (!accum.includes(val)) {
       accum.push(val);
     }
-
     return accum;
   }, []);
   return filterDuplciateFoundations(cleanMeta);

package/dist/esm/presets/index.js

@@ -1,9 +1,9 @@
 import path from 'path';
+
 /**
  * Manually import presets to make sure typescript includes them
  * in the final bundle
  */
-
 import './styled-to-emotion/styled-to-emotion';
 import './theme-to-design-tokens/theme-to-design-tokens';
 import './css-to-design-tokens/css-to-design-tokens';

package/dist/esm/presets/styled-to-emotion/styled-to-emotion.js

@@ -8,14 +8,12 @@ function buildCoreImportDeclaration(j, path) {
   });
   return specifiers.length ? j.importDeclaration(specifiers, j.literal('@emotion/core')) : null;
 }
-
 function buildStyledImportDeclaration(j, path) {
   var specifier = j(path).find(j.ImportDefaultSpecifier).filter(function (specifier) {
     return specifier.value.local.name === 'styled';
   });
   return specifier && specifier.length ? j.importDeclaration([j.importDefaultSpecifier(j.identifier(specifier.get(0).node.local.name))], j.literal('@emotion/styled')) : null;
 }
-
 function buildThemingImportDeclaration(j, path) {
   var themingExports = ['ThemeProvider', 'withTheme'];
   var specifiers = [];
@@ -26,11 +24,10 @@ function buildThemingImportDeclaration(j, path) {
   });
   return specifiers && specifiers.length ? j.importDeclaration(specifiers, j.literal('emotion-theming')) : null;
 }
+
 /**
  * Converts all imports of `styled-components` to `@emotion/styled`
  */
-
-
 export default function transformer(fileInfo, _ref, options) {
   var j = _ref.jscodeshift;
   var source = j(fileInfo.source).find(j.ImportDeclaration).filter(function (path) {

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

@@ -1,6 +1,6 @@
 import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
-
 /* eslint-disable no-console */
+
 import { isDecendantOfToken, isDecendantOfType } from './utils/ast';
 import { cleanMeta, getMetaFromAncestors } from './utils/ast-meta';
 import { includesHardCodedColor, isHardCodedColor, isLegacyColor, isLegacyNamedColor } from './utils/color';
@@ -8,13 +8,11 @@ import Search from './utils/fuzzy-search';
 import { legacyColorMetaMap } from './utils/legacy-colors';
 import { tokens } from './utils/tokens';
 var search = Search(tokens, false);
-
 function hasImportDeclaration(j, source, sourcePath) {
   return !!source.find(j.ImportDeclaration).filter(function (path) {
     return path.node.source.value === sourcePath;
   }).length;
 }
-
 function hasImportSpecifier(j, source, specifier, sourcePath) {
   return !!source.find(j.ImportDeclaration).filter(function (path) {
     return path.node.source.value === sourcePath;
@@ -24,43 +22,37 @@ function hasImportSpecifier(j, source, specifier, sourcePath) {
     }
   }).length;
 }
-
 function insertTokenImport(j, source) {
   if (hasImportDeclaration(j, source, '@atlaskit/tokens')) {
     return;
   }
-
   var newImport = j.importDeclaration([j.importSpecifier(j.identifier('token'))], j.stringLiteral('@atlaskit/tokens'));
   source.get().node.program.body.unshift(newImport);
 }
-
 function buildToken(j, tokenId, node) {
   var callExpr = j.callExpression(j.identifier('token'), [j.stringLiteral(tokenId), node].filter(Boolean));
   return callExpr;
 }
-
 function getTokenFromNode(j, path) {
   var baseMeta = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : [];
   var foundMeta = getMetaFromAncestors(j, path);
   var meta = cleanMeta([].concat(_toConsumableArray(foundMeta), _toConsumableArray(baseMeta)));
   var results = search.get(meta.join(' '));
-  var tokenId = ['utility.UNSAFE_util.MISSING_TOKEN'];
-
+  var tokenId = ['MISSING_TOKEN'];
   if (results) {
     tokenId = results.map(function (result) {
       return result[1];
     });
   }
-
   return tokenId[0];
 }
-
 export default 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;
-  source // Handle colors.N100
+  source
+  // Handle colors.N100
   .find(j.MemberExpression).filter(function (path) {
     return path.value.object.type === 'Identifier' && path.value.object.name === 'colors' && path.value.property.type === 'Identifier' && isLegacyColor(path.value.property.name);
   }).filter(function (path) {
@@ -111,7 +103,6 @@ export default function transformer(file, api) {
     return !isDecendantOfToken(j, path);
   }).forEach(function (path) {
     var _path$value, _path$value$value;
-
     debug && console.log('file:', file.path);
     insertTokenImport(j, source);
     var value = path === null || path === void 0 ? void 0 : (_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.toString();
@@ -121,10 +112,8 @@ export default function transformer(file, api) {
     j(path).replaceWith(isDecendantOfType(j, path, j.JSXAttribute) ? j.jsxExpressionContainer(tokenNode) : tokenNode);
     transformed = true;
   });
-
   if (transformed) {
     return source.toSource();
   }
-
   return file.source;
 }

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

@@ -4,19 +4,15 @@ export function getMetaFromAncestors(j, path) {
   var meta = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : [];
   var parent = path.parentPath;
   var grandParent = parent && parent.parentPath;
-
   if (parent && parent.value.type === 'ObjectProperty') {
     var value = '';
-
     if (parent.value.key.type === 'Literal' || parent.value.key.type === 'StringLiteral' || parent.value.key.type === 'NumericLiteral') {
       value = parent.value.key.value.toString();
     } else {
       value = parent.value.key.name;
     }
-
     meta.push(value);
   }
-
   if (parent && grandParent && grandParent.value.type === 'TemplateLiteral') {
     var expressionIndex = grandParent.value.expressions.findIndex(function (exp) {
       return exp.name === path.value.name;
@@ -27,10 +23,10 @@ export function getMetaFromAncestors(j, path) {
     }).pop().split(/:/g)[0].trim();
     grandParent.value.quasis.slice(0, expressionIndex + 1).map(function (q) {
       return q.value.cooked;
-    }) // We reverse so the most nested one is first which we're more likely than not interested in
+    })
+    // We reverse so the most nested one is first which we're more likely than not interested in
     .reverse().some(function (str) {
       var result = /(hover|active|disabled|focus)/.exec(str.toLowerCase());
-
       if (result) {
         meta.push(result[0]);
         return true;
@@ -38,21 +34,17 @@ export function getMetaFromAncestors(j, path) {
     });
     meta.push(propertyName);
   }
-
   if (parent && parent.value.type === 'JSXAttribute') {
     if (!['css', 'styles', 'style'].includes(parent.value.name.name)) {
       meta.push(parent.value.name.name);
     }
   }
-
   if (parent && parent.value.type === 'VariableDeclarator') {
     meta.push(parent.value.id.name);
   }
-
   if (parent) {
     return getMetaFromAncestors(j, parent, meta);
   }
-
   return meta;
 }
 export function cleanMeta(meta) {
@@ -69,7 +61,6 @@ export function cleanMeta(meta) {
     if (!accum.includes(val)) {
       accum.push(val);
     }
-
     return accum;
   }, []);
 }

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

@@ -8,32 +8,27 @@ export var isLegacyNamedColor = function isLegacyNamedColor(value) {
 };
 export 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())) {
     return true;
   }
-
   for (var i = 0; i < namedColors.length; i++) {
     if (value.includes("".concat(namedColors[i], ";"))) {
       return true;
     }
   }
-
   return false;
 };
 export var isHardCodedColor = function 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(')) {
     return true;
   }
-
-  if (value.startsWith('#') && ( // short hex, hex, or hex with alpha
+  if (value.startsWith('#') && (
+  // short hex, hex, or hex with alpha
   value.length === 4 || value.length === 7 || value.length === 9)) {
     return true;
   }
-
   return false;
 };