@atlaskit/codemod-cli 0.14.0 → 0.16.0

package/dist/cjs/types.js

@@ -16,7 +16,7 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Re
 /** Converts required args to optional if they have a default
  * Example: export type UserFlags = Default<Flags, keyof typeof defaultFlags>;
  */
-var ValidationError = /*#__PURE__*/function (_Error) {
+var ValidationError = exports.ValidationError = /*#__PURE__*/function (_Error) {
   (0, _inherits2.default)(ValidationError, _Error);
   var _super = _createSuper(ValidationError);
   function ValidationError() {
@@ -25,8 +25,7 @@ var ValidationError = /*#__PURE__*/function (_Error) {
   }
   return (0, _createClass2.default)(ValidationError);
 }( /*#__PURE__*/(0, _wrapNativeSuper2.default)(Error));
-exports.ValidationError = ValidationError;
-var NoTransformsExistError = /*#__PURE__*/function (_Error2) {
+var NoTransformsExistError = exports.NoTransformsExistError = /*#__PURE__*/function (_Error2) {
   (0, _inherits2.default)(NoTransformsExistError, _Error2);
   var _super2 = _createSuper(NoTransformsExistError);
   function NoTransformsExistError() {
@@ -34,5 +33,4 @@ var NoTransformsExistError = /*#__PURE__*/function (_Error2) {
     return _super2.apply(this, arguments);
   }
   return (0, _createClass2.default)(NoTransformsExistError);
-}( /*#__PURE__*/(0, _wrapNativeSuper2.default)(Error));
-exports.NoTransformsExistError = NoTransformsExistError;
+}( /*#__PURE__*/(0, _wrapNativeSuper2.default)(Error));

package/dist/cjs/utils.js

@@ -36,7 +36,7 @@ var getLineEndingRegex = function getLineEndingRegex(type) {
     return '\r\n';
   }
 };
-var fixLineEnding = function fixLineEnding(source, lineEnding) {
+var fixLineEnding = exports.fixLineEnding = function fixLineEnding(source, lineEnding) {
   var current = returnLineEnding(source);
   if (current === lineEnding) {
     return source;
@@ -47,5 +47,4 @@ var fixLineEnding = function fixLineEnding(source, lineEnding) {
     return source.replace(new RegExp(regexCurrentLineEnding, 'g'), regexLineEnding);
   }
   return source;
-};
-exports.fixLineEnding = fixLineEnding;
+};

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

@@ -1,71 +1,14 @@
 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';
-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 = {
+import { isColorRelatedProperty, isCssDeclaration, splitCssValue } from './lib/declaration';
+import { getBaseDeclarationMeta } from './lib/meta';
+import findToken from './lib/tokens';
+import parseValue from './lib/value';
+const POSTCSS_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) {
-  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);
-}
-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') {
-    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
@@ -73,69 +16,62 @@ const plugin = () => {
   const processed = Symbol('processed');
   return {
     postcssPlugin: 'UsingTokens',
-    Declaration: decl => {
+    AtRule(atRule, helper) {
       // @ts-expect-error
-      if (decl[processed]) {
+      if (atRule[processed]) {
         return;
       }
-      if (!isColorProperty(decl.prop)) {
+
+      // @ts-expect-error: The 'variable' property does not exist on 'AtRule' according to the TypeScript definitions.
+      // However, the 'postcss-less' library adds a 'variable' property to 'AtRule' when parsing LESS variables.
+      // This property indicates whether the 'AtRule' is a LESS variable.
+      if (atRule.variable) {
+        // TODO https://hello.atlassian.net/browse/DCA11Y-637
+      }
+
+      // @ts-expect-error
+      atRule[processed] = true;
+    },
+    Declaration: decl => {
+      // @ts-expect-error
+      if (decl[processed]) {
         return;
       }
       if (decl.value === 'none') {
         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))) {
+      const baseMeta = getBaseDeclarationMeta(decl);
+      if (isCssDeclaration(decl.prop)) {
+        // TODO https://hello.atlassian.net/browse/DCA11Y-637
+      }
+      if (isColorRelatedProperty(decl.prop)) {
+        const values = splitCssValue(decl.value);
+        if (!values) {
           return;
         }
-        searchTerms.push(...((_getMetaFromCssVar = getMetaFromCssVar(stripVar(match))) !== null && _getMetaFromCssVar !== void 0 ? _getMetaFromCssVar : []));
-      }
-
-      // Less variables
-      const lessVarMatch = decl.value.match(lessVarRe);
-      if (lessVarMatch) {
-        var _getMetaFromCssVar2;
-        match = lessVarMatch[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) {
-        // eslint-disable-next-line no-console
-        console.warn(`Unable to find match for declaration: ${decl.prop}: ${decl.value}`);
-        return;
-      }
-      const cleanSearchTerms = cleanMeta(searchTerms).join(' ');
-      const results = search.get(cleanSearchTerms);
-      const candidates = results.map(result => result[1]);
-      const replacement = candidates.length ? designTokens[candidates[0]] : 'MISSING_TOKEN';
-      if (decl.prop === 'box-shadow') {
-        decl.value = `var(${replacement}, ${decl.value})`;
-      } else {
-        decl.value = decl.value.split(match).join(`var(${replacement}, ${match})`);
+        switch (decl.prop) {
+          case 'box-shadow':
+            const meta = values.reduce((acc, curr) => {
+              const parsedValue = parseValue(curr);
+              if (!parsedValue) {
+                return acc;
+              }
+              return [...acc, ...parsedValue.getMeta()];
+            }, baseMeta);
+            const token = findToken(meta);
+            decl.value = `var(${token}, ${decl.value})`;
+            break;
+          default:
+            const replacedValues = values.map(value => {
+              const parsedValue = parseValue(value);
+              if (!parsedValue) {
+                return value;
+              }
+              return parsedValue.getReplacement(baseMeta);
+            });
+            decl.value = replacedValues.join(' ');
+            break;
+        }
       }
 
       // @ts-expect-error
@@ -148,6 +84,6 @@ export default async function transformer(file) {
   const src = typeof file === 'string' ? file : file.source;
   const {
     css
-  } = await processor.process(src, options);
+  } = await processor.process(src, POSTCSS_OPTIONS);
   return css;
 }

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

@@ -0,0 +1,34 @@
+import { knownNamedColors, knownVariables } from './legacy-colors';
+const NAMED_COLORS = Object.keys(knownNamedColors);
+const GRADIENT_TYPES = ['linear', 'radial', 'conic'];
+const LESS_COLOR_FUNCTIONS = ['lighten', 'darken', 'saturate', 'desaturate', 'fadein', 'fadeout', 'fade', 'spin', 'mix', 'greyscale', 'contrast', 'multiply', 'screen', 'overlay', 'softlight', 'hardlight', 'difference', 'exclusion', 'average', 'negation', 'tint', 'shade', 'luma', 'hue', 'saturation', 'lightness', 'alpha', 'red', 'green', 'blue'];
+const REGEXES = {
+  // The CSS regular expression matches CSS variable declarations.
+  // It looks for the string "var(" followed by any characters except a closing parenthesis, and ending with a closing parenthesis.
+  CSS: /var\([^\)]+\)/g,
+  // The RAW_COLOR regular expression matches various CSS color formats including hexadecimal, RGB(A), HSL(A), LAB, LCH, and HWB.
+  // It allows for optional leading and trailing white spaces.
+  // For RGBA and HSLA, it allows any number (including negative numbers and numbers greater than 1) for the alpha channel.
+  // For RGB, HSL, LAB, LCH, and HWB, it expects three comma-separated values.
+  // It also allows optional white spaces around the commas and the values.
+  RAW_COLOR: /^\s*(#([0-9a-f]{3}){1,2}|(rgba|hsla)\(\s*\d{1,3}%?\s*(,\s*\d{1,3}%?\s*){2},\s*-?\d*\.?\d+\s*\)|(rgb|hsl)\(\s*\d{1,3}%?\s*(,\s*\d{1,3}%?\s*){2}\)\s*|(lab|lch)\(\s*\d{1,3}%?\s+\d{1,3}%?\s+\d{1,3}%?\s*\)|hwb\(\s*\d{1,3}\s+\d{1,3}%?\s+\d{1,3}%?\s*\))\s*$/i
+};
+export function isKnownCssVariable(value) {
+  return value in knownVariables;
+}
+export function isRawColor(value) {
+  return REGEXES.RAW_COLOR.test(value);
+}
+export function isNamedColor(value) {
+  return NAMED_COLORS.includes(value);
+}
+export function isGradient(value) {
+  return GRADIENT_TYPES.some(gradient => value.startsWith(`${gradient}-gradient(`));
+}
+export function extractBetweenParentheses(value) {
+  const match = value.match(/\((.*?)\)/);
+  return match ? match[1] : '';
+}
+export function isLessFunction(value) {
+  return LESS_COLOR_FUNCTIONS.some(func => value.startsWith(`${func}(`));
+}

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

@@ -0,0 +1,17 @@
+const COLOR_PROPERTIES = ['color', 'background', 'background-color', 'box-shadow', 'border', 'border-left', 'border-right', 'border-top', 'border-bottom', 'border-color', 'border-left-color', 'border-right-color', 'border-top-color', 'border-bottom-color', 'outline', 'outline-color', 'accent-color', 'caret-color', 'scrollbar-color', 'text-stroke'];
+export function isColorRelatedProperty(prop) {
+  return COLOR_PROPERTIES.some(property => property === prop);
+}
+export function isCssDeclaration(prop) {
+  return prop.startsWith('--');
+}
+export function extractCssVarName(prop) {
+  return prop.substring(prop.indexOf('(') + 1).split(/\,|\)/)[0];
+}
+export function extractLessVarName(prop) {
+  return prop.substring(1);
+}
+export function splitCssValue(value) {
+  const regex = /(?:[^\s()]+|\((?:[^()]+|\([^()]*\))*\))+/g;
+  return value.match(regex);
+}

package/dist/es2019/presets/css-to-design-tokens/{utils → lib}/legacy-colors.js

@@ -163,7 +163,7 @@ export const knownVariables = {
   '--jpo-border-default-color': ['border'],
   '--jpo-border-secondary-color': ['border', 'subtle']
 };
-export const knownColors = {
+export const knownNamedColors = {
   aliceblue: ['blue'],
   antiquewhite: [],
   aqua: ['teal'],
@@ -183,7 +183,7 @@ export const knownColors = {
   coral: [],
   cornflowerblue: ['blue'],
   cornsilk: [],
-  crimson: ['accent', 'red'],
+  crimson: ['red'],
   cyan: ['accent', 'teal', 'subtle'],
   darkblue: ['accent', 'blue', 'bold'],
   darkcyan: ['accent', 'teal', 'bold'],
@@ -237,11 +237,11 @@ export const knownColors = {
   lightgoldenrodyellow: [],
   lightgray: [],
   lightgrey: [],
-  lightgreen: ['green'],
+  lightgreen: ['green', 'accent'],
   lightpink: ['magenta'],
   lightsalmon: ['pink', 'subtler'],
   lightseagreen: ['green'],
-  lightskyblue: ['blue'],
+  lightskyblue: ['blue', 'accent'],
   lightslategray: [],
   lightslategrey: [],
   lightsteelblue: ['blue'],
@@ -283,7 +283,8 @@ export const knownColors = {
   plum: [],
   powderblue: ['blue', 'subtle'],
   purple: ['purple'],
-  red: ['accent', 'red', 'subtle'],
+  rebeccapurple: ['purple', 'accent'],
+  red: ['red', 'accent'],
   rosybrown: [],
   royalblue: [],
   saddlebrown: [],
@@ -313,10 +314,9 @@ export const knownColors = {
   yellowgreen: ['yellow']
 };
 export const knownRawColors = {
-  '#000000': ['text'],
-  '#cccccc': ['border'],
-  '#aaaaaa': ['border'],
-  '#bbbbbb': ['border'],
+  '#cccccc': ['gray'],
+  '#aaaaaa': ['gray', 'subtlest'],
+  '#bbbbbb': ['gray', 'subtle'],
   '#ffffff': ['elevation', 'surface'],
   '#f0f0f0': ['elevation', 'surface'],
   '#eeeeee': ['elevation', 'surface', 'sunken'],
@@ -325,7 +325,6 @@ export const knownRawColors = {
   '#c00c00': ['danger'],
   '#5243aa': ['discovery'],
   '#ffc712': ['warning'],
-  '#292929': ['text'],
   '#00f00f': ['brand'],
   '#3b73af': ['brand'],
   '#326ca6': ['brand'],

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

@@ -0,0 +1,11 @@
+import chalk from 'chalk';
+export const logger = {
+  warn(message) {
+    // eslint-disable-next-line no-console
+    console.warn(chalk.yellow('WARNING'), message);
+  },
+  error(message) {
+    // eslint-disable-next-line no-console
+    console.error(chalk.red('ERROR'), message);
+  }
+};

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

@@ -0,0 +1,133 @@
+import designTokens from '@atlaskit/tokens/token-names';
+import { extractCssVarName } from './declaration';
+import { knownVariables, knownRawColors, knownNamedColors } from './legacy-colors';
+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;
+  });
+}
+const REPLACEMENTS = {
+  ':': '',
+  ',': '',
+  texts: 'text',
+  error: 'danger',
+  invalid: 'danger',
+  removed: 'danger',
+  removal: 'danger',
+  remove: 'danger',
+  focus: 'focused',
+  valid: 'success',
+  successful: 'success',
+  risk: 'warning',
+  caution: 'warning',
+  warn: 'warning',
+  primary: 'bold',
+  info: 'bold',
+  secondary: 'subtle',
+  hyperlink: 'link',
+  anchor: 'link',
+  active: 'pressed',
+  hover: 'hovered',
+  dragged: 'overlay',
+  dragging: 'overlay',
+  drag: 'overlay',
+  'background-color': 'background',
+  color: 'text',
+  icons: 'icon',
+  arrow: 'icon',
+  glyph: 'icon',
+  stroke: 'border',
+  'border-left': 'border',
+  'border-right': 'border',
+  'border-top': 'border',
+  'border-bottom': 'border',
+  'box-shadow': 'shadow'
+};
+const ADDITIONAL_META = {
+  grey: 'neutral',
+  red: 'danger'
+};
+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) => {
+    if (val in ADDITIONAL_META) {
+      accum.push(val, ADDITIONAL_META[val]);
+    } else {
+      accum.push(val);
+    }
+    accum.push(val in REPLACEMENTS ? REPLACEMENTS[val] : val);
+    return accum;
+  }, []).filter(val => getUniqueWordsFromTokens.includes(val)).reduce((accum, val) => {
+    if (!accum.includes(val)) {
+      accum.push(val);
+    }
+    return accum;
+  }, []);
+  return filterDuplciateFoundations(cleanMeta);
+}
+export function getBaseDeclarationMeta(decl) {
+  const parentSelectors = getParentSelectors(decl).split(/\-|\.|\,|\ |\:|\&/).filter(Boolean);
+  return [getPropertyMeta(decl.prop), ...parentSelectors];
+}
+function getPropertyMeta(prop) {
+  if (prop === 'color') {
+    return 'text';
+  }
+  if (prop.startsWith('background')) {
+    return 'background';
+  }
+  if (prop.includes('shadow')) {
+    return 'shadow';
+  }
+  if (prop.includes('border')) {
+    return 'border';
+  }
+  return '';
+}
+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 '';
+}
+export function getCssVarMeta(cssVariable) {
+  const tokenName = extractCssVarName(cssVariable);
+  const meta = knownVariables[tokenName];
+  if (!meta || meta.length === 0) {
+    return tokenName.split('-');
+  }
+  return meta;
+}
+export function getRawColorMeta(rawColor) {
+  var _knownRawColors$clean;
+  let cleanColor = rawColor.toLowerCase();
+  if (cleanColor.length === 4) {
+    cleanColor = cleanColor + cleanColor.substring(cleanColor.indexOf('#') + 1);
+  }
+  return (_knownRawColors$clean = knownRawColors[cleanColor]) !== null && _knownRawColors$clean !== void 0 ? _knownRawColors$clean : [];
+}
+export function getNamedColorMeta(namedColor) {
+  var _knownNamedColors$nam;
+  return (_knownNamedColors$nam = knownNamedColors[namedColor]) !== null && _knownNamedColors$nam !== void 0 ? _knownNamedColors$nam : [];
+}

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

@@ -0,0 +1,24 @@
+import designTokens from '@atlaskit/tokens/token-names';
+import { light as rawTokens } from '@atlaskit/tokens/tokens-raw';
+import Search from '../../theme-to-design-tokens/utils/fuzzy-search';
+import { cleanMeta } from './meta';
+const MISSING_TOKEN_NAME = 'MISSING_TOKEN';
+const ACTIVE_TOKENS = rawTokens.filter(token => token.attributes.state === 'active').map(token => token.name.replace(/\.\[default\]/g, '')).filter(token => !token.includes('UNSAFE') && !token.includes('interaction'));
+const COLOR_TOKEN_SEARCH_TYPES = ['text', 'link', 'icon', 'border', 'background', 'blanket', 'skeleton', 'chart', 'surface', 'shadow'];
+const createFuzzySearch = tokens => Search(tokens, false);
+function filterTokens(meta) {
+  const commonSearchTypes = COLOR_TOKEN_SEARCH_TYPES.filter(type => meta.includes(type));
+  return commonSearchTypes.length !== 0 ? ACTIVE_TOKENS.filter(token => commonSearchTypes.some(type => token.startsWith(`color.${type}`) || token.startsWith(`elevation.${type}`))) : ACTIVE_TOKENS;
+}
+export default function findToken(meta) {
+  const filteredTokens = filterTokens(meta);
+  const tokenFuzzySearch = createFuzzySearch(filteredTokens);
+  const cleanSearchTerms = cleanMeta(meta).join(' ');
+  const results = tokenFuzzySearch.get(cleanSearchTerms);
+  if (!results) {
+    return MISSING_TOKEN_NAME;
+  }
+  const candidates = results.map(result => result[1]);
+  const bestCandidate = designTokens[candidates[0]];
+  return bestCandidate;
+}

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

@@ -0,0 +1,68 @@
+import { extractBetweenParentheses, isGradient, isKnownCssVariable, isLessFunction, isNamedColor, isRawColor } from './colors';
+import { extractCssVarName } from './declaration';
+import { getCssVarMeta, getNamedColorMeta, getRawColorMeta } from './meta';
+import findToken from './tokens';
+import { logger } from './logger';
+export default function parseValue(value) {
+  if (isLessFunction(value)) {
+    logger.warn('Cannot parse - less function detected, would cause compilation error');
+    return null;
+  }
+  if (isGradient(value)) {
+    return {
+      getReplacement(additionalMeta = []) {
+        const gradientContent = extractBetweenParentheses(value);
+        const values = gradientContent.split(',');
+        const replacedValues = values.map(val => {
+          const parsedValue = parseValue(val.trim());
+          return parsedValue ? parsedValue.getReplacement(additionalMeta) : val;
+        });
+        return value.replace(gradientContent, replacedValues.join(', '));
+      },
+      getMeta() {
+        const BASE_META = [];
+        const gradientContent = extractBetweenParentheses(value);
+        const values = gradientContent.split(',');
+        const metas = values.reduce((acc, val) => {
+          const parsedValue = parseValue(val.trim());
+          return parsedValue ? [...acc, ...parsedValue.getMeta()] : acc;
+        }, BASE_META);
+        return metas;
+      }
+    };
+  }
+  if (isKnownCssVariable(extractCssVarName(value))) {
+    return {
+      getReplacement(additionalMeta = []) {
+        const token = findToken([...additionalMeta, ...this.getMeta()]);
+        return `var(${token}, ${value})`;
+      },
+      getMeta() {
+        return getCssVarMeta(value);
+      }
+    };
+  }
+  if (isRawColor(value)) {
+    return {
+      getReplacement(additionalMeta = []) {
+        const token = findToken([...additionalMeta, ...this.getMeta()]);
+        return `var(${token}, ${value})`;
+      },
+      getMeta() {
+        return getRawColorMeta(value);
+      }
+    };
+  }
+  if (isNamedColor(value)) {
+    return {
+      getReplacement(additionalMeta = []) {
+        const token = findToken([...additionalMeta, ...this.getMeta()]);
+        return `var(${token}, ${value})`;
+      },
+      getMeta() {
+        return getNamedColorMeta(value);
+      }
+    };
+  }
+  return null;
+}

package/dist/es2019/presets/index.js

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