@atlaskit/codemod-cli 0.11.4 → 0.12.0

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

@@ -1,5 +1,5 @@
-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';
@@ -8,82 +8,63 @@ import { knownVariables, knownColors, knownRawColors } from './utils/legacy-colo
 import { cleanMeta } from './utils/meta';
 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) {
   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(([_, value]) => tokenName === value));
 }
-
 function getMetaFromCssVar(tokenName) {
   const meta = knownVariables[tokenName];
-
   if (!meta || meta.length === 0) {
     return tokenName.split('-');
   }
-
   return meta;
 }
-
 function getMetaFromRawColor(rawColor) {
   let 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
 const plugin = () => {
   const processed = Symbol('processed');
   return {
@@ -93,80 +74,67 @@ const plugin = () => {
       if (decl[processed]) {
         return;
       }
-
       if (!isColorProperty(decl.prop)) {
         return;
       }
-
       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 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 = getMetaFromCssVar(stripVar(match))) !== null && _getMetaFromCssVar !== void 0 ? _getMetaFromCssVar : []));
-      } // Less variables
-
+      }
 
+      // Less variables
       const lassVarMatch = decl.value.match(lessVarRe);
-
       if (lassVarMatch) {
         var _getMetaFromCssVar2;
-
         match = lassVarMatch[0];
         searchTerms.push(...((_getMetaFromCssVar2 = getMetaFromCssVar(`--${stripLessVar(match)}`)) !== null && _getMetaFromCssVar2 !== void 0 ? _getMetaFromCssVar2 : []));
-      } // Raw colors
-
+      }
 
+      // Raw colors
       const rawColorMatch = decl.value.match(rawColorRe);
-
       if (rawColorMatch) {
         var _getMetaFromRawColor;
-
         match = rawColorMatch[0];
         searchTerms.push(...((_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(...((_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: ${decl.prop}: ${decl.value}`);
         return;
       }
-
       const cleanSearchTerms = cleanMeta(searchTerms).join(' ');
       const results = search.get(cleanSearchTerms);
-      const replacement = results ? results.map(result => result[1]) : ['utility.UNSAFE_util.MISSING_TOKEN'];
-
+      const candidates = results.map(result => result[1]);
+      const replacement = candidates.length ? designTokens[candidates[0]] : 'MISSING_TOKEN';
       if (decl.prop === 'box-shadow') {
-        decl.value = `var(${designTokens[replacement[0]]}, ${decl.value})`;
+        decl.value = `var(${replacement}, ${decl.value})`;
       } else {
-        decl.value = decl.value.split(match).join(`var(${designTokens[replacement[0]]}, ${match})`);
-      } // @ts-expect-error
-
+        decl.value = decl.value.split(match).join(`var(${replacement}, ${match})`);
+      }
 
+      // @ts-expect-error
       decl[processed] = true;
     }
   };
 };
-
 export default async function transformer(file) {
   return await postcss([plugin()]).process(file.source, {
     syntax: lessSyntax

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

@@ -150,7 +150,6 @@ export const 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/es2019/presets/css-to-design-tokens/utils/meta.js

@@ -3,10 +3,8 @@ const getUniqueWordsFromTokens = Object.keys(designTokens).reduce((accum, val) =
   if (!accum.includes(val)) {
     accum.push(val);
   }
-
   return accum;
 }, []);
-
 function filterDuplciateFoundations(meta) {
   const foundations = ['text', 'background', 'shadow', 'border'];
   let hasFoundation = false;
@@ -15,15 +13,12 @@ function filterDuplciateFoundations(meta) {
       hasFoundation = true;
       return true;
     }
-
     if (hasFoundation && foundations.includes(val)) {
       return false;
     }
-
     return true;
   });
 }
-
 export function cleanMeta(meta) {
   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'));
@@ -32,7 +27,6 @@ export function cleanMeta(meta) {
     if (!accum.includes(val)) {
       accum.push(val);
     }
-
     return accum;
   }, []);
   return filterDuplciateFoundations(cleanMeta);

package/dist/es2019/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/es2019/presets/styled-to-emotion/styled-to-emotion.js

@@ -6,12 +6,10 @@ function buildCoreImportDeclaration(j, path) {
   });
   return specifiers.length ? j.importDeclaration(specifiers, j.literal('@emotion/core')) : null;
 }
-
 function buildStyledImportDeclaration(j, path) {
   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) {
   const themingExports = ['ThemeProvider', 'withTheme'];
   const specifiers = [];
@@ -20,11 +18,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, {
   jscodeshift: j
 }, options) {

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

@@ -1,4 +1,5 @@
 /* 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';
@@ -6,11 +7,9 @@ import Search from './utils/fuzzy-search';
 import { legacyColorMetaMap } from './utils/legacy-colors';
 import { tokens } from './utils/tokens';
 const search = Search(tokens, false);
-
 function hasImportDeclaration(j, source, sourcePath) {
   return !!source.find(j.ImportDeclaration).filter(path => path.node.source.value === sourcePath).length;
 }
-
 function hasImportSpecifier(j, source, specifier, sourcePath) {
   return !!source.find(j.ImportDeclaration).filter(path => path.node.source.value === sourcePath).find(j.ImportSpecifier, {
     local: {
@@ -18,39 +17,33 @@ function hasImportSpecifier(j, source, specifier, sourcePath) {
     }
   }).length;
 }
-
 function insertTokenImport(j, source) {
   if (hasImportDeclaration(j, source, '@atlaskit/tokens')) {
     return;
   }
-
   const newImport = j.importDeclaration([j.importSpecifier(j.identifier('token'))], j.stringLiteral('@atlaskit/tokens'));
   source.get().node.program.body.unshift(newImport);
 }
-
 function buildToken(j, tokenId, node) {
   const callExpr = j.callExpression(j.identifier('token'), [j.stringLiteral(tokenId), node].filter(Boolean));
   return callExpr;
 }
-
 function getTokenFromNode(j, path, baseMeta = []) {
   const foundMeta = getMetaFromAncestors(j, path);
   const meta = cleanMeta([...foundMeta, ...baseMeta]);
   const results = search.get(meta.join(' '));
-  let tokenId = ['utility.UNSAFE_util.MISSING_TOKEN'];
-
+  let tokenId = ['MISSING_TOKEN'];
   if (results) {
     tokenId = results.map(result => result[1]);
   }
-
   return tokenId[0];
 }
-
 export default function transformer(file, api, debug = false) {
   const j = api.jscodeshift;
   const source = j(file.source);
   let transformed = false;
-  source // Handle colors.N100
+  source
+  // Handle colors.N100
   .find(j.MemberExpression).filter(path => {
     return path.value.object.type === 'Identifier' && path.value.object.name === 'colors' && path.value.property.type === 'Identifier' && isLegacyColor(path.value.property.name);
   }).filter(path => !isDecendantOfToken(j, path)).forEach(path => {
@@ -81,7 +74,6 @@ export default function transformer(file, api, debug = false) {
   });
   source.find(j.Literal).filter(path => typeof path.value.value === 'string' && (includesHardCodedColor(path.value.value) || isHardCodedColor(path.value.value))).filter(path => !isDecendantOfToken(j, path)).forEach(path => {
     var _path$value, _path$value$value;
-
     debug && console.log('file:', file.path);
     insertTokenImport(j, source);
     const 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();
@@ -91,10 +83,8 @@ export default function transformer(file, api, debug = false) {
     j(path).replaceWith(isDecendantOfType(j, path, j.JSXAttribute) ? j.jsxExpressionContainer(tokenNode) : tokenNode);
     transformed = true;
   });
-
   if (transformed) {
     return source.toSource();
   }
-
   return file.source;
 }

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

@@ -2,27 +2,23 @@ import { getUniqueWordsFromTokens } from './tokens';
 export function getMetaFromAncestors(j, path, meta = []) {
   const parent = path.parentPath;
   const grandParent = parent && parent.parentPath;
-
   if (parent && parent.value.type === 'ObjectProperty') {
     let 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') {
     const expressionIndex = grandParent.value.expressions.findIndex(exp => exp.name === path.value.name);
     const quasi = grandParent.value.quasis[expressionIndex];
     const propertyName = (quasi.value.cooked || quasi.value.raw || '').replace(/\n/g, '').split(/;|{|}/).filter(el => !el.match(/\.|\@|\(|\)/)).pop().split(/:/g)[0].trim();
-    grandParent.value.quasis.slice(0, expressionIndex + 1).map(q => q.value.cooked) // We reverse so the most nested one is first which we're more likely than not interested in
+    grandParent.value.quasis.slice(0, expressionIndex + 1).map(q => q.value.cooked)
+    // We reverse so the most nested one is first which we're more likely than not interested in
     .reverse().some(str => {
       const result = /(hover|active|disabled|focus)/.exec(str.toLowerCase());
-
       if (result) {
         meta.push(result[0]);
         return true;
@@ -30,21 +26,17 @@ export function getMetaFromAncestors(j, path, meta = []) {
     });
     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) {
@@ -57,7 +49,6 @@ export function cleanMeta(meta) {
     if (!accum.includes(val)) {
       accum.push(val);
     }
-
     return accum;
   }, []);
 }

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

@@ -4,32 +4,27 @@ export const isLegacyColor = value => legacyColors.includes(value);
 export const isLegacyNamedColor = value => legacyColorMixins.includes(value);
 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())) {
     return true;
   }
-
   for (let i = 0; i < namedColors.length; i++) {
     if (value.includes(`${namedColors[i]};`)) {
       return true;
     }
   }
-
   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(')) {
     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;
 };