@atlaskit/codemod-cli 0.13.4 → 0.15.0

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

@@ -1,82 +1,17 @@
 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 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';
-var tokens = rawTokens.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 = 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];
-    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];
-}
+import { isColorRelatedProperty, isCssDeclaration, splitCssValue } from './lib/declaration';
+import { getBaseDeclarationMeta } from './lib/meta';
+import findToken from './lib/tokens';
+import parseValue from './lib/value';
+var POSTCSS_OPTIONS = {
+  syntax: lessSyntax,
+  from: undefined
+};
 
 // https://github.com/postcss/postcss/blob/main/docs/writing-a-plugin.md
 // https://astexplorer.net/#/2uBU1BLuJ1
@@ -84,70 +19,62 @@ var plugin = function plugin() {
   var processed = Symbol('processed');
   return {
     postcssPlugin: 'UsingTokens',
-    Declaration: function Declaration(decl) {
+    AtRule: function AtRule(atRule, helper) {
       // @ts-expect-error
-      if (decl[processed]) {
-        return;
-      }
-      if (!isColorProperty(decl.prop)) {
+      if (atRule[processed]) {
         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 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
-      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 : []));
+      // @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
       }
 
-      // 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
-      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 : []));
+      // @ts-expect-error
+      atRule[processed] = true;
+    },
+    Declaration: function Declaration(decl) {
+      // @ts-expect-error
+      if (decl[processed]) {
+        return;
       }
-      if (!match) {
-        // eslint-disable-next-line no-console
-        console.warn("Unable to find match for declaration: ".concat(decl.prop, ": ").concat(decl.value));
+      if (decl.value === 'none') {
         return;
       }
-      var cleanSearchTerms = cleanMeta(searchTerms).join(' ');
-      var results = search.get(cleanSearchTerms);
-      var candidates = results.map(function (result) {
-        return result[1];
-      });
-      var replacement = candidates.length ? designTokens[candidates[0]] : 'MISSING_TOKEN';
-      if (decl.prop === 'box-shadow') {
-        decl.value = "var(".concat(replacement, ", ").concat(decl.value, ")");
-      } else {
-        decl.value = decl.value.split(match).join("var(".concat(replacement, ", ").concat(match, ")"));
+      var baseMeta = getBaseDeclarationMeta(decl);
+      if (isCssDeclaration(decl.prop)) {
+        // TODO https://hello.atlassian.net/browse/DCA11Y-637
+      }
+      if (isColorRelatedProperty(decl.prop)) {
+        var values = splitCssValue(decl.value);
+        if (!values) {
+          return;
+        }
+        switch (decl.prop) {
+          case 'box-shadow':
+            var meta = values.reduce(function (acc, curr) {
+              var parsedValue = parseValue(curr);
+              if (!parsedValue) {
+                return acc;
+              }
+              return [].concat(_toConsumableArray(acc), _toConsumableArray(parsedValue.getMeta()));
+            }, baseMeta);
+            var token = findToken(meta);
+            decl.value = "var(".concat(token, ", ").concat(decl.value, ")");
+            break;
+          default:
+            var replacedValues = values.map(function (value) {
+              var parsedValue = parseValue(value);
+              if (!parsedValue) {
+                return value;
+              }
+              return parsedValue.getReplacement(baseMeta);
+            });
+            decl.value = replacedValues.join(' ');
+            break;
+        }
       }
 
       // @ts-expect-error
@@ -160,16 +87,19 @@ export default function transformer(_x) {
 }
 function _transformer() {
   _transformer = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(file) {
+    var processor, src, _yield$processor$proc, css;
     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:
+          processor = postcss([plugin()]);
+          src = typeof file === 'string' ? file : file.source;
+          _context.next = 4;
+          return processor.process(src, POSTCSS_OPTIONS);
+        case 4:
+          _yield$processor$proc = _context.sent;
+          css = _yield$processor$proc.css;
+          return _context.abrupt("return", css);
+        case 7:
         case "end":
           return _context.stop();
       }

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

@@ -0,0 +1,38 @@
+import { knownNamedColors, knownVariables } from './legacy-colors';
+var NAMED_COLORS = Object.keys(knownNamedColors);
+var GRADIENT_TYPES = ['linear', 'radial', 'conic'];
+var 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'];
+var 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(function (gradient) {
+    return value.startsWith("".concat(gradient, "-gradient("));
+  });
+}
+export function extractBetweenParentheses(value) {
+  var match = value.match(/\((.*?)\)/);
+  return match ? match[1] : '';
+}
+export function isLessFunction(value) {
+  return LESS_COLOR_FUNCTIONS.some(function (func) {
+    return value.startsWith("".concat(func, "("));
+  });
+}

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

@@ -0,0 +1,19 @@
+var 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(function (property) {
+    return 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) {
+  var regex = /(?:[^\s()]+|\((?:[^()]+|\([^()]*\))*\))+/g;
+  return value.match(regex);
+}

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

@@ -163,7 +163,7 @@ export var knownVariables = {
   '--jpo-border-default-color': ['border'],
   '--jpo-border-secondary-color': ['border', 'subtle']
 };
-export var knownColors = {
+export var knownNamedColors = {
   aliceblue: ['blue'],
   antiquewhite: [],
   aqua: ['teal'],
@@ -183,7 +183,7 @@ export var 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 var 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 var 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 var knownColors = {
   yellowgreen: ['yellow']
 };
 export var 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 var knownRawColors = {
   '#c00c00': ['danger'],
   '#5243aa': ['discovery'],
   '#ffc712': ['warning'],
-  '#292929': ['text'],
   '#00f00f': ['brand'],
   '#3b73af': ['brand'],
   '#326ca6': ['brand'],

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

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

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

@@ -0,0 +1,146 @@
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
+import designTokens from '@atlaskit/tokens/token-names';
+import { extractCssVarName } from './declaration';
+import { knownVariables, knownRawColors, knownNamedColors } from './legacy-colors';
+var getUniqueWordsFromTokens = Object.keys(designTokens).reduce(function (accum, val) {
+  return [].concat(_toConsumableArray(accum), _toConsumableArray(val.split('.')));
+}, []).reduce(function (accum, val) {
+  return [].concat(_toConsumableArray(accum), _toConsumableArray(val.split(/(?=[A-Z])/g).map(function (e) {
+    return e.toLowerCase();
+  })));
+}, []).reduce(function (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) {
+    if (!hasFoundation && foundations.includes(val)) {
+      hasFoundation = true;
+      return true;
+    }
+    if (hasFoundation && foundations.includes(val)) {
+      return false;
+    }
+    return true;
+  });
+}
+var 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'
+};
+var ADDITIONAL_META = {
+  grey: 'neutral',
+  red: 'danger'
+};
+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) {
+      return e.toLowerCase();
+    }) : []));
+  }, []).reduce(function (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(function (val) {
+    return getUniqueWordsFromTokens.includes(val);
+  }).reduce(function (accum, val) {
+    if (!accum.includes(val)) {
+      accum.push(val);
+    }
+    return accum;
+  }, []);
+  return filterDuplciateFoundations(cleanMeta);
+}
+export function getBaseDeclarationMeta(decl) {
+  var parentSelectors = getParentSelectors(decl).split(/\-|\.|\,|\ |\:|\&/).filter(Boolean);
+  return [getPropertyMeta(decl.prop)].concat(_toConsumableArray(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) {
+  var tokenName = extractCssVarName(cssVariable);
+  var meta = knownVariables[tokenName];
+  if (!meta || meta.length === 0) {
+    return tokenName.split('-');
+  }
+  return meta;
+}
+export function getRawColorMeta(rawColor) {
+  var _knownRawColors$clean;
+  var 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/esm/presets/css-to-design-tokens/lib/tokens.js

@@ -0,0 +1,40 @@
+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';
+var MISSING_TOKEN_NAME = 'MISSING_TOKEN';
+var ACTIVE_TOKENS = rawTokens.filter(function (token) {
+  return token.attributes.state === 'active';
+}).map(function (token) {
+  return token.name.replace(/\.\[default\]/g, '');
+}).filter(function (token) {
+  return !token.includes('UNSAFE') && !token.includes('interaction');
+});
+var COLOR_TOKEN_SEARCH_TYPES = ['text', 'link', 'icon', 'border', 'background', 'blanket', 'skeleton', 'chart', 'surface', 'shadow'];
+var createFuzzySearch = function createFuzzySearch(tokens) {
+  return Search(tokens, false);
+};
+function filterTokens(meta) {
+  var commonSearchTypes = COLOR_TOKEN_SEARCH_TYPES.filter(function (type) {
+    return meta.includes(type);
+  });
+  return commonSearchTypes.length !== 0 ? ACTIVE_TOKENS.filter(function (token) {
+    return commonSearchTypes.some(function (type) {
+      return token.startsWith("color.".concat(type)) || token.startsWith("elevation.".concat(type));
+    });
+  }) : ACTIVE_TOKENS;
+}
+export default function findToken(meta) {
+  var filteredTokens = filterTokens(meta);
+  var tokenFuzzySearch = createFuzzySearch(filteredTokens);
+  var cleanSearchTerms = cleanMeta(meta).join(' ');
+  var results = tokenFuzzySearch.get(cleanSearchTerms);
+  if (!results) {
+    return MISSING_TOKEN_NAME;
+  }
+  var candidates = results.map(function (result) {
+    return result[1];
+  });
+  var bestCandidate = designTokens[candidates[0]];
+  return bestCandidate;
+}

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

@@ -0,0 +1,73 @@
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
+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: function getReplacement() {
+        var additionalMeta = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+        var gradientContent = extractBetweenParentheses(value);
+        var values = gradientContent.split(',');
+        var replacedValues = values.map(function (val) {
+          var parsedValue = parseValue(val.trim());
+          return parsedValue ? parsedValue.getReplacement(additionalMeta) : val;
+        });
+        return value.replace(gradientContent, replacedValues.join(', '));
+      },
+      getMeta: function getMeta() {
+        var BASE_META = [];
+        var gradientContent = extractBetweenParentheses(value);
+        var values = gradientContent.split(',');
+        var metas = values.reduce(function (acc, val) {
+          var parsedValue = parseValue(val.trim());
+          return parsedValue ? [].concat(_toConsumableArray(acc), _toConsumableArray(parsedValue.getMeta())) : acc;
+        }, BASE_META);
+        return metas;
+      }
+    };
+  }
+  if (isKnownCssVariable(extractCssVarName(value))) {
+    return {
+      getReplacement: function getReplacement() {
+        var additionalMeta = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+        var token = findToken([].concat(_toConsumableArray(additionalMeta), _toConsumableArray(this.getMeta())));
+        return "var(".concat(token, ", ").concat(value, ")");
+      },
+      getMeta: function getMeta() {
+        return getCssVarMeta(value);
+      }
+    };
+  }
+  if (isRawColor(value)) {
+    return {
+      getReplacement: function getReplacement() {
+        var additionalMeta = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+        var token = findToken([].concat(_toConsumableArray(additionalMeta), _toConsumableArray(this.getMeta())));
+        return "var(".concat(token, ", ").concat(value, ")");
+      },
+      getMeta: function getMeta() {
+        return getRawColorMeta(value);
+      }
+    };
+  }
+  if (isNamedColor(value)) {
+    return {
+      getReplacement: function getReplacement() {
+        var additionalMeta = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+        var token = findToken([].concat(_toConsumableArray(additionalMeta), _toConsumableArray(this.getMeta())));
+        return "var(".concat(token, ", ").concat(value, ")");
+      },
+      getMeta: function getMeta() {
+        return getNamedColorMeta(value);
+      }
+    };
+  }
+  return null;
+}