@atlaskit/codemod-cli 0.14.0 → 0.16.0

package/dist/es2019/presets/migrate-to-new-buttons/codemods/next-migrate-to-new-button-variants.js

@@ -0,0 +1,86 @@
+import { PRINT_SETTINGS, NEW_BUTTON_VARIANTS, entryPointsMapping, NEW_BUTTON_ENTRY_POINT } from '../utils/constants';
+const transformer = (file, api) => {
+  const j = api.jscodeshift;
+  const fileSource = j(file.source);
+  const buttonImports = fileSource.find(j.ImportDeclaration).filter(path => path.node.source.value === entryPointsMapping.Button || path.node.source.value === NEW_BUTTON_ENTRY_POINT);
+  if (!buttonImports.length) {
+    return fileSource.toSource();
+  }
+  const defaultButtonImport = buttonImports.find(j.Specifier).filter(path => path.node.type === 'ImportDefaultSpecifier');
+  if (defaultButtonImport.length === 0) {
+    return fileSource.toSource();
+  }
+  const specifierIdentifier = defaultButtonImport.get(0).node.local.name;
+  const attributes = fileSource.find(j.JSXElement).filter(path => path.value.openingElement.name.type === 'JSXIdentifier' && path.value.openingElement.name.name === specifierIdentifier).find(j.JSXAttribute);
+  const hasCustomComponent = attributes.filter(attribute => attribute.node.name.name === 'component').length > 0;
+  const hasCssProp = attributes.filter(attribute => attribute.node.name.name === 'css').length > 0;
+  if (hasCustomComponent || hasCssProp) {
+    return fileSource.toSource(PRINT_SETTINGS);
+  }
+  const checkIfVariantAlreadyImported = variant => fileSource.find(j.ImportDeclaration).filter(path => path.node.source.value === NEW_BUTTON_ENTRY_POINT).find(j.ImportSpecifier).filter(path => path.node.imported.name === variant).length > 0;
+  const generateNewElement = (variant, element) => {
+    const {
+      attributes
+    } = element.openingElement;
+    if (variant === NEW_BUTTON_VARIANTS.icon.as) {
+      const attr = attributes === null || attributes === void 0 ? void 0 : attributes.filter(attribute => attribute.type === 'JSXAttribute' && (attribute.name.name === 'iconBefore' || attribute.name.name === 'iconAfter'));
+      if (attr !== null && attr !== void 0 && attr.length && attr[0].type === 'JSXAttribute') {
+        attr[0].name.name = 'icon';
+      }
+    }
+    // self closing if it's an icon button or icon link button
+    const isSelfClosing = variant === NEW_BUTTON_VARIANTS.icon.as || variant === NEW_BUTTON_VARIANTS.linkIcon.as;
+    return j.jsxElement(j.jsxOpeningElement(j.jsxIdentifier(variant), attributes, isSelfClosing), isSelfClosing ? null : j.jsxClosingElement(j.jsxIdentifier(variant)), element.children);
+  };
+  let hasLinkIconButton = checkIfVariantAlreadyImported(NEW_BUTTON_VARIANTS.linkIcon.import);
+  let hasLinkButton = checkIfVariantAlreadyImported(NEW_BUTTON_VARIANTS.link.import);
+  let hasIconButton = checkIfVariantAlreadyImported(NEW_BUTTON_VARIANTS.icon.import);
+  const allButtons = fileSource.find(j.JSXElement).filter(path => path.value.openingElement.name.type === 'JSXIdentifier' && path.value.openingElement.name.name === specifierIdentifier);
+  allButtons.forEach(element => {
+    var _element$value$childr, _element$value$childr2;
+    const {
+      attributes
+    } = element.value.openingElement;
+    if (!attributes) {
+      return;
+    }
+    const buttonAttributes = attributes.map(node => node.type === 'JSXAttribute' && node.name.name);
+    const hasHref = buttonAttributes.includes('href');
+    const hasIcon = buttonAttributes.includes('iconBefore') || buttonAttributes.includes('iconAfter');
+    const isLinkIconButton = hasHref && hasIcon && ((_element$value$childr = element.value.children) === null || _element$value$childr === void 0 ? void 0 : _element$value$childr.length) === 0;
+    const isLinkButton = hasHref && !isLinkIconButton;
+    const isIconButton = !hasHref && hasIcon && ((_element$value$childr2 = element.value.children) === null || _element$value$childr2 === void 0 ? void 0 : _element$value$childr2.length) === 0;
+    if (isLinkIconButton) {
+      hasLinkIconButton = true;
+      j(element).replaceWith(generateNewElement(NEW_BUTTON_VARIANTS.linkIcon.as, element.value));
+    }
+    if (isIconButton) {
+      hasIconButton = true;
+      j(element).replaceWith(generateNewElement(NEW_BUTTON_VARIANTS.icon.as, element.value));
+    }
+    if (isLinkButton) {
+      hasLinkButton = true;
+      j(element).replaceWith(generateNewElement(NEW_BUTTON_VARIANTS.link.as, element.value));
+    }
+  });
+  const specifiers = [];
+  if (hasLinkButton) {
+    specifiers.push(j.importSpecifier(j.identifier(NEW_BUTTON_VARIANTS.link.import), j.identifier(NEW_BUTTON_VARIANTS.link.as)));
+  }
+  if (hasIconButton) {
+    specifiers.push(j.importSpecifier(j.identifier(NEW_BUTTON_VARIANTS.icon.import), j.identifier(NEW_BUTTON_VARIANTS.icon.as)));
+  }
+  if (hasLinkIconButton) {
+    specifiers.push(j.importSpecifier(j.identifier(NEW_BUTTON_VARIANTS.linkIcon.import), j.identifier(NEW_BUTTON_VARIANTS.linkIcon.as)));
+  }
+  const oldButtonImport = fileSource.find(j.ImportDeclaration).filter(path => path.node.source.value === NEW_BUTTON_ENTRY_POINT || path.node.source.value === entryPointsMapping.Button);
+  const leftButtons = fileSource.find(j.JSXElement).filter(path => path.value.openingElement.name.type === 'JSXIdentifier' && path.value.openingElement.name.name === specifierIdentifier).length > 0 || fileSource.find(j.CallExpression).filter(path => path.node.arguments.map(argument => argument.type === 'Identifier' && (argument === null || argument === void 0 ? void 0 : argument.name)).includes(specifierIdentifier)).length > 0;
+  if (specifiers.length || leftButtons) {
+    if (leftButtons) {
+      specifiers.push(j.importSpecifier(j.identifier(NEW_BUTTON_VARIANTS.default.import), j.identifier(specifierIdentifier)));
+    }
+    oldButtonImport.replaceWith(j.importDeclaration(specifiers, j.stringLiteral(NEW_BUTTON_ENTRY_POINT)));
+  }
+  return fileSource.toSource(PRINT_SETTINGS);
+};
+export default transformer;

package/dist/es2019/presets/migrate-to-new-buttons/codemods/next-split-imports.js

@@ -0,0 +1,44 @@
+import { PRINT_SETTINGS, entryPointsMapping, BUTTON_TYPES } from '../utils/constants';
+const transformer = (file, api) => {
+  const j = api.jscodeshift;
+  const fileSource = j(file.source);
+  const buttonImports = fileSource.find(j.ImportDeclaration).filter(path => {
+    var _path$node$source$val;
+    return (_path$node$source$val = path.node.source.value) === null || _path$node$source$val === void 0 ? void 0 : _path$node$source$val.includes('@atlaskit/button');
+  });
+  if (!buttonImports.length || buttonImports.every(node => node.node.source.value !== '@atlaskit/button')) {
+    return fileSource.toSource(PRINT_SETTINGS);
+  }
+  buttonImports.forEach(node => {
+    const {
+      specifiers
+    } = node.node;
+    const defaultSpecifier = specifiers === null || specifiers === void 0 ? void 0 : specifiers.find(specifier => specifier.type === 'ImportDefaultSpecifier');
+    if (defaultSpecifier && defaultSpecifier.local) {
+      const defaultButtonImport = j.importDeclaration([j.importDefaultSpecifier(j.identifier(defaultSpecifier.local.name))], j.stringLiteral(entryPointsMapping.Button));
+      j(node).insertAfter(defaultButtonImport);
+    }
+    const defaultTypeSpecifiers = specifiers === null || specifiers === void 0 ? void 0 : specifiers.filter(specifier => specifier.importKind === 'type');
+    if (defaultTypeSpecifiers !== null && defaultTypeSpecifiers !== void 0 && defaultTypeSpecifiers.length) {
+      const typeImport = j.importDeclaration(defaultTypeSpecifiers, j.stringLiteral('@atlaskit/button/types'));
+      j(node).insertAfter(typeImport);
+    }
+    const valueSpecifiers = specifiers === null || specifiers === void 0 ? void 0 : specifiers.filter(specifier => specifier.type === 'ImportSpecifier');
+    const otherTypeSpecifiers = valueSpecifiers === null || valueSpecifiers === void 0 ? void 0 : valueSpecifiers.filter(specifier => BUTTON_TYPES.includes(specifier.imported.name));
+    if (otherTypeSpecifiers !== null && otherTypeSpecifiers !== void 0 && otherTypeSpecifiers.length) {
+      const typeImport = j.importDeclaration(otherTypeSpecifiers, j.stringLiteral('@atlaskit/button'));
+      j(node).insertAfter(typeImport);
+    }
+    if (valueSpecifiers !== null && valueSpecifiers !== void 0 && valueSpecifiers.length) {
+      valueSpecifiers.forEach(specifier => {
+        if (specifier.local && specifier.type === 'ImportSpecifier' && specifier.local.name && entryPointsMapping[specifier.imported.name]) {
+          const newImport = j.importDeclaration([j.importDefaultSpecifier(j.identifier(specifier.local.name))], j.stringLiteral(entryPointsMapping[specifier.imported.name]));
+          j(node).insertAfter(newImport);
+        }
+      });
+    }
+    j(node).remove();
+  });
+  return fileSource.toSource(PRINT_SETTINGS);
+};
+export default transformer;

package/dist/es2019/presets/migrate-to-new-buttons/migrate-to-new-buttons.js

@@ -0,0 +1,19 @@
+import splitImportsTransformer from './codemods/next-split-imports';
+import migrateToNewButtonVariantsTransformer from './codemods/next-migrate-to-new-button-variants';
+export default async function transformer(file, api) {
+  const transformers = [splitImportsTransformer, migrateToNewButtonVariantsTransformer];
+  let src = file.source;
+  transformers.forEach(transformer => {
+    if (typeof src === 'undefined') {
+      return;
+    }
+    const nextSrc = transformer({
+      ...file,
+      source: src
+    }, api);
+    if (nextSrc) {
+      src = nextSrc;
+    }
+  });
+  return src;
+}

package/dist/es2019/presets/migrate-to-new-buttons/utils/constants.js

@@ -0,0 +1,29 @@
+export const PRINT_SETTINGS = {
+  quote: 'single'
+};
+export const NEW_BUTTON_VARIANTS = {
+  default: {
+    import: 'UNSAFE_BUTTON',
+    as: 'Button'
+  },
+  link: {
+    import: 'UNSAFE_LINK_BUTTON',
+    as: 'LinkButton'
+  },
+  icon: {
+    import: 'UNSAFE_ICON_BUTTON',
+    as: 'IconButton'
+  },
+  linkIcon: {
+    import: 'UNSAFE_LINK_ICON_BUTTON',
+    as: 'LinkIconButton'
+  }
+};
+export const NEW_BUTTON_ENTRY_POINT = '@atlaskit/button/unsafe';
+export const entryPointsMapping = {
+  Button: '@atlaskit/button/standard-button',
+  LoadingButton: '@atlaskit/button/loading-button',
+  ButtonGroup: '@atlaskit/button/button-group',
+  CustomThemeButton: '@atlaskit/button/custom-theme-button'
+};
+export const BUTTON_TYPES = ['Appearance', 'Spacing', 'BaseOwnProps', 'BaseProps', 'ButtonProps', 'LoadingButtonProps', 'LoadingButtonOwnProps', 'ThemeTokens', 'ThemeProps', 'InteractionState', 'CustomThemeButtonProps', 'CustomThemeButtonOwnProps'];

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

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