@atlaskit/codemod-cli 0.14.0 → 0.15.0

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/theme-to-design-tokens/utils/css-utils.js

@@ -1,9 +1,9 @@
-import { isColorProperty } from '../../css-to-design-tokens/css-to-design-tokens';
+import { isColorRelatedProperty } from '../../css-to-design-tokens/lib/declaration';
 export function containsReplaceableCSSDeclarations(input) {
   const cssPattern = /(\S+)\s*:/g;
   let match;
   while ((match = cssPattern.exec(input)) !== null) {
-    if (isColorProperty(match[1])) {
+    if (isColorRelatedProperty(match[1])) {
       return true;
     }
   }

package/dist/esm/main.js

@@ -5,8 +5,8 @@ function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol
 function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
 function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
 import _regeneratorRuntime from "@babel/runtime/regenerator";
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 import chalk from 'chalk';
 import fs from 'fs';
 import spawn from 'projector-spawn';
@@ -291,7 +291,7 @@ function _main() {
         case 4:
           _yield$parseArgs = _context5.sent;
           packages = _yield$parseArgs.packages;
-          _process$env$_PACKAGE = "0.14.0", _PACKAGE_VERSION_ = _process$env$_PACKAGE === void 0 ? '0.0.0-dev' : _process$env$_PACKAGE;
+          _process$env$_PACKAGE = "0.15.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) {
             logger.log(chalk.gray("Searching for codemods for newer versions of the following packages: ".concat(packages.map(function (pkg) {

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

@@ -1,86 +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 options = {
+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
 };
-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);
-}
-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(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];
-}
 
 // https://github.com/postcss/postcss/blob/main/docs/writing-a-plugin.md
 // https://astexplorer.net/#/2uBU1BLuJ1
@@ -88,73 +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]) {
+      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: function Declaration(decl) {
+      // @ts-expect-error
+      if (decl[processed]) {
         return;
       }
       if (decl.value === 'none') {
         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))) {
+      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;
         }
-        searchTerms.push.apply(searchTerms, _toConsumableArray((_getMetaFromCssVar = getMetaFromCssVar(stripVar(match))) !== null && _getMetaFromCssVar !== void 0 ? _getMetaFromCssVar : []));
-      }
-
-      // Less variables
-      var lessVarMatch = decl.value.match(lessVarRe);
-      if (lessVarMatch) {
-        var _getMetaFromCssVar2;
-        match = lessVarMatch[0];
-        searchTerms.push.apply(searchTerms, _toConsumableArray((_getMetaFromCssVar2 = getMetaFromCssVar("--".concat(stripLessVar(match)))) !== null && _getMetaFromCssVar2 !== void 0 ? _getMetaFromCssVar2 : []));
-      }
-
-      // 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 : []));
-      }
-      if (!match) {
-        // eslint-disable-next-line no-console
-        console.warn("Unable to find match for declaration: ".concat(decl.prop, ": ").concat(decl.value));
-        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, ")"));
+        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
@@ -174,7 +94,7 @@ function _transformer() {
           processor = postcss([plugin()]);
           src = typeof file === 'string' ? file : file.source;
           _context.next = 4;
-          return processor.process(src, options);
+          return processor.process(src, POSTCSS_OPTIONS);
         case 4:
           _yield$processor$proc = _context.sent;
           css = _yield$processor$proc.css;

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);
+}