@atlaskit/codemod-cli 0.9.7 → 0.10.0

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

@@ -0,0 +1,170 @@
+import postcss from 'postcss'; // @ts-ignore
+
+import lessSyntax from 'postcss-less';
+import designTokens from '@atlaskit/tokens/token-names';
+import renameMapping from '@atlaskit/tokens/rename-mapping';
+import Search from '../theme-to-design-tokens/utils/fuzzy-search';
+import { knownVariables, knownColors, knownRawColors } from './utils/legacy-colors';
+import { cleanMeta } from './utils/meta';
+const tokens = Object.keys(designTokens).filter(t => !t.includes('UNSAFE') && !t.includes('interaction')).filter(t => !renameMapping.find(({
+  path
+}) => t === path.replace(/\.[default]\g/, '')));
+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 isColorProp(prop) {
+  return prop === 'color' || prop === 'background' || prop === 'background-color' || prop === 'box-shadow' || prop.includes('border');
+}
+
+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
+
+
+const plugin = () => {
+  const processed = Symbol('processed');
+  return {
+    postcssPlugin: 'UsingTokens',
+    Declaration: decl => {
+      // @ts-expect-error
+      if (decl[processed]) {
+        return;
+      }
+
+      if (!isColorProp(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 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
+
+
+      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
+
+
+      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
+
+
+      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'];
+      decl.value = decl.value.split(match).join(`var(${designTokens[replacement[0]]}, ${match})`); // @ts-expect-error
+
+      decl[processed] = true;
+    }
+  };
+};
+
+export default async function transformer(file) {
+  return await postcss([plugin()]).process(file.source, {
+    syntax: lessSyntax
+  }).css;
+}

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

@@ -0,0 +1,334 @@
+export const knownVariables = {
+  '--adg3-color-R50': ['danger'],
+  '--adg3-color-R75': ['danger'],
+  '--adg3-color-R100': ['danger'],
+  '--adg3-color-R200': ['danger'],
+  '--adg3-color-R300': ['danger'],
+  '--adg3-color-R400': ['danger'],
+  '--adg3-color-R500': ['danger'],
+  '--adg3-color-Y50': ['warning'],
+  '--adg3-color-Y75': ['warning'],
+  '--adg3-color-Y100': ['warning'],
+  '--adg3-color-Y200': ['warning'],
+  '--adg3-color-Y300': ['warning'],
+  '--adg3-color-Y400': ['warning'],
+  '--adg3-color-Y500': ['warning'],
+  '--adg3-color-G50': ['success'],
+  '--adg3-color-G75': ['success'],
+  '--adg3-color-G100': ['success'],
+  '--adg3-color-G200': ['success'],
+  '--adg3-color-G300': ['success'],
+  '--adg3-color-G400': ['success'],
+  '--adg3-color-G500': ['success'],
+  '--adg3-color-B50': ['brand'],
+  '--adg3-color-B75': ['brand'],
+  '--adg3-color-B100': ['brand'],
+  '--adg3-color-B200': ['brand'],
+  '--adg3-color-B300': ['brand'],
+  '--adg3-color-B400': ['brand'],
+  '--adg3-color-B500': ['brand'],
+  '--adg3-color-P50': ['discovery'],
+  '--adg3-color-P75': ['discovery'],
+  '--adg3-color-P100': ['discovery'],
+  '--adg3-color-P200': ['discovery'],
+  '--adg3-color-P300': ['discovery'],
+  '--adg3-color-P400': ['discovery'],
+  '--adg3-color-P500': ['discovery'],
+  '--adg3-color-T50': ['accent', 'teal'],
+  '--adg3-color-T75': ['accent', 'teal'],
+  '--adg3-color-T100': ['accent', 'teal'],
+  '--adg3-color-T200': ['accent', 'teal'],
+  '--adg3-color-T300': ['accent', 'teal'],
+  '--adg3-color-T400': ['accent', 'teal'],
+  '--adg3-color-T500': ['accent', 'teal'],
+  '--adg3-color-N0': ['inverse'],
+  '--adg3-color-N10': [],
+  '--adg3-color-N20': [],
+  '--adg3-color-N30': [],
+  '--adg3-color-N40': [],
+  '--adg3-color-N50': [],
+  '--adg3-color-N60': [],
+  '--adg3-color-N70': [],
+  '--adg3-color-N80': [],
+  '--adg3-color-N90': [],
+  '--adg3-color-N100': [],
+  '--adg3-color-N200': ['text', 'subtlest'],
+  '--adg3-color-N300': [],
+  '--adg3-color-N400': ['text', 'subtle'],
+  '--adg3-color-N500': [],
+  '--adg3-color-N600': [],
+  '--adg3-color-N700': ['text'],
+  '--adg3-color-N800': ['text'],
+  '--adg3-color-N900': ['text'],
+  '--adg3-color-N10A': [],
+  '--adg3-color-N20A': [],
+  '--adg3-color-N30A': [],
+  '--adg3-color-N40A': [],
+  '--adg3-color-N50A': [],
+  '--adg3-color-N60A': [],
+  '--adg3-color-N70A': [],
+  '--adg3-color-N80A': [],
+  '--adg3-color-N90A': [],
+  '--adg3-color-N100A': [],
+  '--adg3-color-N200A': [],
+  '--adg3-color-N300A': [],
+  '--adg3-color-N400A': [],
+  '--adg3-color-N500A': [],
+  '--adg3-color-N600A': [],
+  '--adg3-color-N700A': [],
+  '--adg3-color-N800A': [],
+  '--adg3-color-DN900': [],
+  '--adg3-color-DN800': [],
+  '--adg3-color-DN700': [],
+  '--adg3-color-DN600': [],
+  '--adg3-color-DN500': [],
+  '--adg3-color-DN400': [],
+  '--adg3-color-DN300': [],
+  '--adg3-color-DN200': [],
+  '--adg3-color-DN100': [],
+  '--adg3-color-DN90': [],
+  '--adg3-color-DN80': [],
+  '--adg3-color-DN70': [],
+  '--adg3-color-DN60': [],
+  '--adg3-color-DN50': [],
+  '--adg3-color-DN40': [],
+  '--adg3-color-DN30': [],
+  '--adg3-color-DN20': [],
+  '--adg3-color-DN10': [],
+  '--adg3-color-DN0': [],
+  '--adg3-color-DN800A': [],
+  '--adg3-color-DN700A': [],
+  '--adg3-color-DN600A': [],
+  '--adg3-color-DN500A': [],
+  '--adg3-color-DN400A': [],
+  '--adg3-color-DN300A': [],
+  '--adg3-color-DN200A': [],
+  '--adg3-color-DN100A': [],
+  '--adg3-color-DN90A': [],
+  '--adg3-color-DN80A': [],
+  '--adg3-color-DN70A': [],
+  '--adg3-color-DN60A': [],
+  '--adg3-color-DN50A': [],
+  '--adg3-color-DN40A': [],
+  '--adg3-color-DN30A': [],
+  '--adg3-color-DN20A': [],
+  '--adg3-color-DN10A': [],
+  '--adg3-color-background-light': ['elevation', 'surface'],
+  '--adg3-color-background-dark': ['elevation', 'surface'],
+  '--adg3-color-text-light': ['text'],
+  '--adg3-color-text-dark': ['text'],
+  '--adg3-color-subtleText-light': ['text', 'subtle'],
+  '--adg3-color-subtleText-dark': ['text', 'subtle'],
+  '--adg3-color-placeholderText-light': ['text', 'subtlest'],
+  '--adg3-color-placeholderText-dark': ['text', 'subtlest'],
+  '--adg3-color-heading-light': ['text'],
+  '--adg3-color-heading-dark': ['text'],
+  '--adg3-color-subtleHeading-light': ['text', 'subtle'],
+  '--adg3-color-subtleHeading-dark': ['text', 'subtle'],
+  '--adg3-color-codeBlock-light': ['elevation', 'surface', 'sunken'],
+  '--adg3-color-codeBlock-dark': ['elevation', 'surface', 'sunken'],
+  '--adg3-color-link-light': ['link'],
+  '--adg3-color-link-dark': ['link'],
+  '--adg3-color-linkHover-light': ['link'],
+  '--adg3-color-linkHover-dark': ['link'],
+  '--adg3-color-linkActive-light': ['link', 'pressed'],
+  '--adg3-color-linkActive-dark': ['link', 'pressed'],
+  '--adg3-color-linkOutline-light': ['link', 'focused'],
+  '--adg3-color-linkOutline-dark': ['link', 'focused'],
+  '--adg3-color-primary-light': ['brand'],
+  '--adg3-color-primary-dark': ['brand'],
+  '--adg3-color-blue-light': ['accent', 'subtler', 'blue'],
+  '--adg3-color-blue-dark': ['accent', 'bolder', 'blue'],
+  '--adg3-color-teal-light': ['accent', 'subtler', 'teal'],
+  '--adg3-color-teal-dark': ['accent', 'bolder', 'teal'],
+  '--adg3-color-purple-light': ['accent', 'subtler', 'purple'],
+  '--adg3-color-purple-dark': ['accent', 'bolder', 'purple'],
+  '--adg3-color-red-light': ['accent', 'subtler', 'red'],
+  '--adg3-color-red-dark': ['accent', 'bolder', 'red'],
+  '--adg3-color-yellow-light': ['accent', 'subtler', 'yellow'],
+  '--adg3-color-yellow-dark': ['accent', 'bolder', 'yellow'],
+  '--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'],
+  '--jpo-text-secondary-color': ['text', 'subtle'],
+  '--jpo-text-muted-color': ['text', 'disabled'],
+  '--jpo-text-error-color': ['text', 'danger'],
+  '--jpo-bg-default-color': ['elevation', 'surface'],
+  '--jpo-bg-reverse-color': ['background', 'inverse'],
+  '--jpo-bg-warning-color': ['background', 'warning', 'subtle'],
+  '--jpo-bg-dark-color': ['background', 'netural', 'bold'],
+  '--jpo-border-default-color': ['border'],
+  '--jpo-border-secondary-color': ['border', 'subtle']
+};
+export const knownColors = {
+  aliceblue: ['blue'],
+  antiquewhite: [],
+  aqua: ['teal'],
+  aquamarine: ['teal'],
+  azure: ['teal', 'subtlest'],
+  beige: [],
+  bisque: [],
+  black: [],
+  blanchedalmond: [],
+  blue: ['blue'],
+  blueviolet: ['blue'],
+  brown: [],
+  burlywood: [],
+  cadetblue: ['blue'],
+  chartreuse: [],
+  chocolate: [],
+  coral: [],
+  cornflowerblue: ['blue'],
+  cornsilk: [],
+  crimson: ['accent', 'red'],
+  cyan: ['accent', 'teal', 'subtle'],
+  darkblue: ['accent', 'blue', 'bold'],
+  darkcyan: ['accent', 'teal', 'bold'],
+  darkgoldenrod: [],
+  darkgray: [],
+  darkgrey: [],
+  darkgreen: ['green'],
+  darkkhaki: [],
+  darkmagenta: ['magenta', 'bold'],
+  darkolivegreen: ['green'],
+  darkorange: [],
+  darkorchid: [],
+  darkred: ['accent', 'red', 'bold'],
+  darksalmon: [],
+  darkseagreen: ['green'],
+  darkslateblue: [],
+  darkslategray: [],
+  darkslategrey: [],
+  darkturquoise: ['teal', 'bold'],
+  darkviolet: ['purple', 'bold'],
+  deeppink: ['magenta'],
+  deepskyblue: ['blue'],
+  dimgray: [],
+  dimgrey: [],
+  dodgerblue: [],
+  firebrick: ['red', 'bold'],
+  floralwhite: [],
+  forestgreen: ['green'],
+  fuchsia: ['magenta', 'subtle'],
+  gainsboro: [],
+  ghostwhite: [],
+  gold: ['yellow'],
+  goldenrod: [],
+  gray: [],
+  grey: [],
+  green: ['green'],
+  greenyellow: [],
+  honeydew: [],
+  hotpink: ['magenta'],
+  indianred: [],
+  indigo: ['purple'],
+  ivory: [],
+  khaki: [],
+  lavender: ['purple'],
+  lavenderblush: ['purple'],
+  lawngreen: ['green'],
+  lemonchiffon: [],
+  lightblue: [],
+  lightcoral: [],
+  lightcyan: [],
+  lightgoldenrodyellow: [],
+  lightgray: [],
+  lightgrey: [],
+  lightgreen: ['green'],
+  lightpink: ['magenta'],
+  lightsalmon: ['pink', 'subtler'],
+  lightseagreen: ['green'],
+  lightskyblue: ['blue'],
+  lightslategray: [],
+  lightslategrey: [],
+  lightsteelblue: ['blue'],
+  lightyellow: [],
+  lime: ['green', 'subtler'],
+  limegreen: ['green'],
+  linen: [],
+  magenta: ['magenta'],
+  maroon: [],
+  mediumaquamarine: [],
+  mediumblue: [],
+  mediumorchid: [],
+  mediumpurple: [],
+  mediumseagreen: ['green'],
+  mediumslateblue: [],
+  mediumspringgreen: ['green'],
+  mediumturquoise: [],
+  mediumvioletred: [],
+  midnightblue: [],
+  mintcream: [],
+  mistyrose: [],
+  moccasin: [],
+  navajowhite: [],
+  navy: ['blue', 'bold'],
+  oldlace: [],
+  olive: [],
+  olivedrab: [],
+  orange: [],
+  orangered: [],
+  orchid: ['purple'],
+  palegoldenrod: [],
+  palegreen: ['green'],
+  paleturquoise: [],
+  palevioletred: [],
+  papayawhip: [],
+  peachpuff: [],
+  peru: [],
+  pink: ['magenta'],
+  plum: [],
+  powderblue: ['blue', 'subtle'],
+  purple: ['purple'],
+  red: ['accent', 'red', 'subtle'],
+  rosybrown: [],
+  royalblue: [],
+  saddlebrown: [],
+  salmon: [],
+  sandybrown: [],
+  seagreen: ['green'],
+  seashell: [],
+  sienna: [],
+  silver: [],
+  skyblue: ['blue', 'subtlest'],
+  slateblue: [],
+  slategray: [],
+  slategrey: [],
+  snow: [],
+  springgreen: ['green'],
+  steelblue: ['blue'],
+  tan: [],
+  teal: ['accent', 'teal'],
+  thistle: [],
+  tomato: ['red'],
+  turquoise: [],
+  violet: ['purple'],
+  wheat: [],
+  white: ['elevation', 'surface'],
+  whitesmoke: [],
+  yellow: ['yellow'],
+  yellowgreen: ['yellow']
+};
+export const knownRawColors = {
+  '#000000': ['text'],
+  '#cccccc': ['border'],
+  '#aaaaaa': ['border'],
+  '#bbbbbb': ['border'],
+  '#ffffff': ['elevation', 'surface'],
+  '#f0f0f0': ['elevation', 'surface'],
+  '#eeeeee': ['elevation', 'surface', 'sunken'],
+  '#ff0000': ['danger'],
+  '#d04437': ['danger'],
+  '#c00c00': ['danger'],
+  '#5243aa': ['discovery'],
+  '#ffc712': ['warning'],
+  '#292929': ['text'],
+  '#00f00f': ['brand'],
+  '#3b73af': ['brand'],
+  '#326ca6': ['brand'],
+  '#0052cc': ['brand']
+};

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

@@ -0,0 +1,39 @@
+import designTokens from '@atlaskit/tokens/token-names';
+const getUniqueWordsFromTokens = Object.keys(designTokens).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) {
+  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;
+  });
+}
+
+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'));
+    return accum;
+  }, []).filter(val => getUniqueWordsFromTokens.includes(val)).reduce((accum, val) => {
+    if (!accum.includes(val)) {
+      accum.push(val);
+    }
+
+    return accum;
+  }, []);
+  return filterDuplciateFoundations(cleanMeta);
+}

package/dist/es2019/presets/index.js

@@ -6,5 +6,6 @@ import path from 'path';
 
 import './styled-to-emotion/styled-to-emotion';
 import './theme-to-design-tokens/theme-to-design-tokens';
-const presets = ['styled-to-emotion', 'theme-to-design-tokens'].map(preset => path.join(__dirname, preset, `${preset}.@(ts|js|tsx)`));
+import './css-to-design-tokens/css-to-design-tokens';
+const presets = ['styled-to-emotion', 'theme-to-design-tokens', 'css-to-design-tokens'].map(preset => path.join(__dirname, preset, `${preset}.@(ts|js|tsx)`));
 export default presets;

package/dist/es2019/version.json

@@ -1,4 +1,4 @@
 {
 	"name": "@atlaskit/codemod-cli",
-	"version": "0.9.7"
+	"version": "0.10.0"
 }

package/dist/esm/main.js

@@ -364,7 +364,7 @@ function _main() {
           case 4:
             _yield$parseArgs = _context5.sent;
             packages = _yield$parseArgs.packages;
-            _process$env$_PACKAGE = "0.9.7", _PACKAGE_VERSION_ = _process$env$_PACKAGE === void 0 ? '0.0.0-dev' : _process$env$_PACKAGE;
+            _process$env$_PACKAGE = "0.10.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) {