@atlaskit/codemod-cli 0.11.4 → 0.12.0

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

@@ -1,237 +1,146 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = transformer;
-
-var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
-
-var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
-
-var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
-
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-
 var _postcss = _interopRequireDefault(require("postcss"));
-
 var _postcssLess = _interopRequireDefault(require("postcss-less"));
-
 var _tokensRaw = require("@atlaskit/tokens/tokens-raw");
-
 var _tokenNames = _interopRequireDefault(require("@atlaskit/tokens/token-names"));
-
 var _fuzzySearch = _interopRequireDefault(require("../theme-to-design-tokens/utils/fuzzy-search"));
-
 var _legacyColors = require("./utils/legacy-colors");
-
 var _meta = require("./utils/meta");
-
 // @ts-ignore
-var tokens = _tokensRaw.light.filter(function (t) {
-  return t.attributes.state === 'active';
-}).map(function (t) {
-  return t.name.replace(/\.\[default\]/g, '');
-}).filter(function (t) {
-  return !t.includes('UNSAFE') && !t.includes('interaction');
-});
-
-var search = (0, _fuzzySearch.default)(tokens, false);
 
+const tokens = _tokensRaw.light.filter(t => t.attributes.state === 'active').map(t => t.name.replace(/\.\[default\]/g, '')).filter(t => !t.includes('UNSAFE') && !t.includes('interaction'));
+const search = (0, _fuzzySearch.default)(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(_tokenNames.default).find(function (_ref) {
-    var _ref2 = (0, _slicedToArray2.default)(_ref, 2),
-        _ = _ref2[0],
-        value = _ref2[1];
-
-    return tokenName === value;
-  }));
+  return Boolean(Object.entries(_tokenNames.default).find(([_, value]) => tokenName === value));
 }
-
 function getMetaFromCssVar(tokenName) {
-  var meta = _legacyColors.knownVariables[tokenName];
-
+  const meta = _legacyColors.knownVariables[tokenName];
   if (!meta || meta.length === 0) {
     return tokenName.split('-');
   }
-
   return meta;
 }
-
 function getMetaFromRawColor(rawColor) {
-  var cleanColor = rawColor.toLowerCase();
-
+  let cleanColor = rawColor.toLowerCase();
   if (cleanColor.length === 4) {
     cleanColor = cleanColor + cleanColor.substring(cleanColor.indexOf('#') + 1);
   }
-
   return _legacyColors.knownRawColors[cleanColor];
-} // https://github.com/postcss/postcss/blob/main/docs/writing-a-plugin.md
-// https://astexplorer.net/#/2uBU1BLuJ1
-
+}
 
-var plugin = function plugin() {
-  var processed = Symbol('processed');
+// https://github.com/postcss/postcss/blob/main/docs/writing-a-plugin.md
+// https://astexplorer.net/#/2uBU1BLuJ1
+const plugin = () => {
+  const processed = Symbol('processed');
   return {
     postcssPlugin: 'UsingTokens',
-    Declaration: function Declaration(decl) {
+    Declaration: decl => {
       // @ts-expect-error
       if (decl[processed]) {
         return;
       }
-
       if (!isColorProperty(decl.prop)) {
         return;
       }
-
-      var searchTerms = [getDeclarationMeta(decl)].concat((0, _toConsumableArray2.default)(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 cssVarMatch = decl.value.match(cssVarRe);
-
+      const searchTerms = [getDeclarationMeta(decl), ...getParentSelectors(decl).split(/\-|\.|\,|\ |\:|\&/).filter(el => !!el)];
+      let match;
+      const cssVarRe = /var\([^\)]+\)/g;
+      const lessVarRe = /@[a-zA-Z0-9-]+/g;
+      const 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
+      const cssVarMatch = decl.value.match(cssVarRe);
       if (cssVarMatch) {
-        var _getMetaFromCssVar;
-
         match = cssVarMatch[0];
-
         if (isDesignToken(stripVar(match))) {
           return;
         }
+        searchTerms.push(...(getMetaFromCssVar(stripVar(match)) ?? []));
+      }
 
-        searchTerms.push.apply(searchTerms, (0, _toConsumableArray2.default)((_getMetaFromCssVar = getMetaFromCssVar(stripVar(match))) !== null && _getMetaFromCssVar !== void 0 ? _getMetaFromCssVar : []));
-      } // Less variables
-
-
-      var lassVarMatch = decl.value.match(lessVarRe);
-
+      // Less variables
+      const lassVarMatch = decl.value.match(lessVarRe);
       if (lassVarMatch) {
-        var _getMetaFromCssVar2;
-
         match = lassVarMatch[0];
-        searchTerms.push.apply(searchTerms, (0, _toConsumableArray2.default)((_getMetaFromCssVar2 = getMetaFromCssVar("--".concat(stripLessVar(match)))) !== null && _getMetaFromCssVar2 !== void 0 ? _getMetaFromCssVar2 : []));
-      } // Raw colors
-
-
-      var rawColorMatch = decl.value.match(rawColorRe);
+        searchTerms.push(...(getMetaFromCssVar(`--${stripLessVar(match)}`) ?? []));
+      }
 
+      // Raw colors
+      const rawColorMatch = decl.value.match(rawColorRe);
       if (rawColorMatch) {
-        var _getMetaFromRawColor;
-
         match = rawColorMatch[0];
-        searchTerms.push.apply(searchTerms, (0, _toConsumableArray2.default)((_getMetaFromRawColor = getMetaFromRawColor(match)) !== null && _getMetaFromRawColor !== void 0 ? _getMetaFromRawColor : []));
-      } // Named colors
-
+        searchTerms.push(...(getMetaFromRawColor(match) ?? []));
+      }
 
+      // Named colors
       if (_legacyColors.knownColors.hasOwnProperty(decl.value)) {
-        var _knownColors$decl$val;
-
         match = decl.value;
-        searchTerms.push.apply(searchTerms, (0, _toConsumableArray2.default)((_knownColors$decl$val = _legacyColors.knownColors[decl.value.toLowerCase()]) !== null && _knownColors$decl$val !== void 0 ? _knownColors$decl$val : []));
+        searchTerms.push(...(_legacyColors.knownColors[decl.value.toLowerCase()] ?? []));
       }
-
       if (!match) {
-        console.warn("Unable to find match for declaration: ".concat(decl.prop, ": ").concat(decl.value));
+        console.warn(`Unable to find match for declaration: ${decl.prop}: ${decl.value}`);
         return;
       }
-
-      var cleanSearchTerms = (0, _meta.cleanMeta)(searchTerms).join(' ');
-      var results = search.get(cleanSearchTerms);
-      var replacement = results ? results.map(function (result) {
-        return result[1];
-      }) : ['utility.UNSAFE_util.MISSING_TOKEN'];
-
+      const cleanSearchTerms = (0, _meta.cleanMeta)(searchTerms).join(' ');
+      const results = search.get(cleanSearchTerms);
+      const candidates = results.map(result => result[1]);
+      const replacement = candidates.length ? _tokenNames.default[candidates[0]] : 'MISSING_TOKEN';
       if (decl.prop === 'box-shadow') {
-        decl.value = "var(".concat(_tokenNames.default[replacement[0]], ", ").concat(decl.value, ")");
+        decl.value = `var(${replacement}, ${decl.value})`;
       } else {
-        decl.value = decl.value.split(match).join("var(".concat(_tokenNames.default[replacement[0]], ", ").concat(match, ")"));
-      } // @ts-expect-error
-
+        decl.value = decl.value.split(match).join(`var(${replacement}, ${match})`);
+      }
 
+      // @ts-expect-error
       decl[processed] = true;
     }
   };
 };
-
-function transformer(_x) {
-  return _transformer.apply(this, arguments);
-}
-
-function _transformer() {
-  _transformer = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(file) {
-    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:
-          case "end":
-            return _context.stop();
-        }
-      }
-    }, _callee);
-  }));
-  return _transformer.apply(this, arguments);
+async function transformer(file) {
+  return await (0, _postcss.default)([plugin()]).process(file.source, {
+    syntax: _postcssLess.default
+  }).css;
 }

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

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.knownVariables = exports.knownRawColors = exports.knownColors = void 0;
-var knownVariables = {
+const knownVariables = {
   '--adg3-color-R50': ['danger'],
   '--adg3-color-R75': ['danger'],
   '--adg3-color-R100': ['danger'],
@@ -156,7 +156,6 @@ 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'],
@@ -171,7 +170,7 @@ var knownVariables = {
   '--jpo-border-secondary-color': ['border', 'subtle']
 };
 exports.knownVariables = knownVariables;
-var knownColors = {
+const knownColors = {
   aliceblue: ['blue'],
   antiquewhite: [],
   aqua: ['teal'],
@@ -321,7 +320,7 @@ var knownColors = {
   yellowgreen: ['yellow']
 };
 exports.knownColors = knownColors;
-var knownRawColors = {
+const knownRawColors = {
   '#000000': ['text'],
   '#cccccc': ['border'],
   '#aaaaaa': ['border'],

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

@@ -1,62 +1,39 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.cleanMeta = cleanMeta;
-
-var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
-
 var _tokenNames = _interopRequireDefault(require("@atlaskit/tokens/token-names"));
-
-var getUniqueWordsFromTokens = Object.keys(_tokenNames.default).reduce(function (accum, val) {
-  return [].concat((0, _toConsumableArray2.default)(accum), (0, _toConsumableArray2.default)(val.split('.')));
-}, []).reduce(function (accum, val) {
-  return [].concat((0, _toConsumableArray2.default)(accum), (0, _toConsumableArray2.default)(val.split(/(?=[A-Z])/g).map(function (e) {
-    return e.toLowerCase();
-  })));
-}, []).reduce(function (accum, val) {
+const getUniqueWordsFromTokens = Object.keys(_tokenNames.default).reduce((accum, val) => [...accum, ...val.split('.')], []).reduce((accum, val) => [...accum, ...val.split(/(?=[A-Z])/g).map(e => e.toLowerCase())], []).reduce((accum, val) => {
   if (!accum.includes(val)) {
     accum.push(val);
   }
-
   return accum;
 }, []);
-
 function filterDuplciateFoundations(meta) {
-  var foundations = ['text', 'background', 'shadow', 'border'];
-  var hasFoundation = false;
-  return meta.filter(function (val) {
+  const foundations = ['text', 'background', 'shadow', 'border'];
+  let hasFoundation = false;
+  return meta.filter(val => {
     if (!hasFoundation && foundations.includes(val)) {
       hasFoundation = true;
       return true;
     }
-
     if (hasFoundation && foundations.includes(val)) {
       return false;
     }
-
     return true;
   });
 }
-
 function cleanMeta(meta) {
-  var cleanMeta = meta.reduce(function (accum, val) {
-    return [].concat((0, _toConsumableArray2.default)(accum), (0, _toConsumableArray2.default)(typeof val === 'string' ? val.split(/(?=[A-Z])/g).map(function (e) {
-      return e.toLowerCase();
-    }) : []));
-  }, []).reduce(function (accum, val) {
+  const cleanMeta = meta.reduce((accum, val) => [...accum, ...(typeof val === 'string' ? val.split(/(?=[A-Z])/g).map(e => e.toLowerCase()) : [])], []).reduce((accum, val) => {
     accum.push(val.replace(/:/g, '').replace(/,/g, '').replace('grey', 'neutral').replace('texts', 'text').replace('red', 'danger').replace('error', 'danger').replace('invalid', 'danger').replace('removed', 'danger').replace('removal', 'danger').replace('remove', 'danger').replace('focus', 'focused').replace('valid', 'success').replace('successful', 'success').replace('risk', 'warning').replace('caution', 'warning').replace('warn', 'warning').replace('primary', 'bold').replace('info', 'bold').replace('secondary', 'subtle').replace('hyperlink', 'link').replace('anchor', 'link').replace('active', 'pressed').replace('hover', 'hovered').replace('dragged', 'overlay').replace('dragging', 'overlay').replace('drag', 'overlay').replace('background-color', 'background').replace('color', 'text').replace('icons', 'icon').replace('arrow', 'icon').replace('glyph', 'icon').replace('stroke', 'border').replace('border-left', 'border').replace('border-right', 'border').replace('border-top', 'border').replace('border-bottom', 'border').replace('box-shadow', 'shadow'));
     return accum;
-  }, []).filter(function (val) {
-    return getUniqueWordsFromTokens.includes(val);
-  }).reduce(function (accum, val) {
+  }, []).filter(val => getUniqueWordsFromTokens.includes(val)).reduce((accum, val) => {
     if (!accum.includes(val)) {
       accum.push(val);
     }
-
     return accum;
   }, []);
   return filterDuplciateFoundations(cleanMeta);

package/dist/cjs/presets/index.js

@@ -1,26 +1,19 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _path = _interopRequireDefault(require("path"));
-
 require("./styled-to-emotion/styled-to-emotion");
-
 require("./theme-to-design-tokens/theme-to-design-tokens");
-
 require("./css-to-design-tokens/css-to-design-tokens");
-
 /**
  * Manually import presets to make sure typescript includes them
  * in the final bundle
  */
-var presets = ['styled-to-emotion', 'theme-to-design-tokens', 'css-to-design-tokens'].map(function (preset) {
-  return _path.default.join(__dirname, preset, "".concat(preset, ".@(ts|js|tsx)"));
-});
+
+const presets = ['styled-to-emotion', 'theme-to-design-tokens', 'css-to-design-tokens'].map(preset => _path.default.join(__dirname, preset, `${preset}.@(ts|js|tsx)`));
 var _default = presets;
 exports.default = _default;

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

@@ -5,51 +5,39 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = transformer;
 exports.parser = void 0;
-
 function buildCoreImportDeclaration(j, path) {
-  var coreExports = ['css', 'keyframes'];
-  var specifiers = [];
-  j(path).find(j.ImportSpecifier).filter(function (specifier) {
-    return coreExports.includes(specifier.value.imported.name);
-  }).forEach(function (specifier) {
+  const coreExports = ['css', 'keyframes'];
+  const specifiers = [];
+  j(path).find(j.ImportSpecifier).filter(specifier => coreExports.includes(specifier.value.imported.name)).forEach(specifier => {
     specifiers.push(j.importSpecifier(j.identifier(specifier.value.imported.name)));
   });
   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';
-  });
+  const specifier = j(path).find(j.ImportDefaultSpecifier).filter(specifier => 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 = [];
-  j(path).find(j.ImportSpecifier).filter(function (specifier) {
-    return themingExports.includes(specifier.value.imported.name);
-  }).forEach(function (specifier) {
+  const themingExports = ['ThemeProvider', 'withTheme'];
+  const specifiers = [];
+  j(path).find(j.ImportSpecifier).filter(specifier => themingExports.includes(specifier.value.imported.name)).forEach(specifier => {
     specifiers.push(j.importSpecifier(j.identifier(specifier.value.imported.name)));
   });
   return specifiers && specifiers.length ? j.importDeclaration(specifiers, j.literal('emotion-theming')) : null;
 }
+
 /**
  * Converts all imports of `styled-components` to `@emotion/styled`
  */
-
-
-function transformer(fileInfo, _ref, options) {
-  var j = _ref.jscodeshift;
-  var source = j(fileInfo.source).find(j.ImportDeclaration).filter(function (path) {
-    return path.node.source.value === 'styled-components';
-  }).forEach(function (path) {
+function transformer(fileInfo, {
+  jscodeshift: j
+}, options) {
+  const source = j(fileInfo.source).find(j.ImportDeclaration).filter(path => path.node.source.value === 'styled-components').forEach(path => {
     j(path).replaceWith([buildCoreImportDeclaration(j, path), buildStyledImportDeclaration(j, path), buildThemingImportDeclaration(j, path)]);
   }).toSource(options.printOptions || {
     quote: 'single'
   });
   return source;
 }
-
-var parser = 'tsx';
+const parser = 'tsx';
 exports.parser = parser;