@atlaskit/codemod-cli 0.13.4 → 0.15.0

package/dist/cjs/presets/theme-to-design-tokens/utils/color.js

@@ -3,20 +3,21 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.isLegacyNamedColor = exports.isLegacyColor = exports.isHardCodedColor = exports.includesHardCodedColor = void 0;
+exports.includesHardCodedColor = void 0;
+exports.isBoldColor = isBoldColor;
+exports.isLegacyNamedColor = exports.isLegacyColor = exports.isHardCodedColor = void 0;
 var _legacyColors = require("./legacy-colors");
 var _namedColors = require("./named-colors");
-var isLegacyColor = function isLegacyColor(value) {
+var isLegacyColor = exports.isLegacyColor = function isLegacyColor(value) {
   return _legacyColors.legacyColors.includes(value);
 };
-exports.isLegacyColor = isLegacyColor;
-var isLegacyNamedColor = function isLegacyNamedColor(value) {
+var isLegacyNamedColor = exports.isLegacyNamedColor = function isLegacyNamedColor(value) {
   return _legacyColors.legacyColorMixins.includes(value);
 };
-exports.isLegacyNamedColor = isLegacyNamedColor;
-var includesHardCodedColor = function includesHardCodedColor(raw) {
+var colorRegexp = /#(?:[a-f0-9]{3}|[a-f0-9]{6}|[a-f0-9]{8})\b|(?:rgb|rgba|hsl|hsla|lch|lab|color)\([^\)]*\)/;
+var includesHardCodedColor = exports.includesHardCodedColor = function includesHardCodedColor(raw) {
   var value = raw.toLowerCase();
-  if (/#(?:[a-f0-9]{3}|[a-f0-9]{6}|[a-f0-9]{8})\b|(?:rgb|hsl)a?\([^\)]*\)/.exec(value.toLowerCase())) {
+  if (colorRegexp.exec(value)) {
     return true;
   }
   for (var i = 0; i < _namedColors.namedColors.length; i++) {
@@ -26,19 +27,18 @@ var includesHardCodedColor = function includesHardCodedColor(raw) {
   }
   return false;
 };
-exports.includesHardCodedColor = includesHardCodedColor;
-var isHardCodedColor = function isHardCodedColor(value) {
-  if (_namedColors.namedColors.includes(value.toLowerCase())) {
-    return true;
-  }
-  if (value.startsWith('rgb(') || value.startsWith('rgba(') || value.startsWith('hsl(') || value.startsWith('hsla(') || value.startsWith('lch(') || value.startsWith('lab(') || value.startsWith('color(')) {
+var isHardCodedColor = exports.isHardCodedColor = function isHardCodedColor(raw) {
+  var value = raw.toLowerCase();
+  if (_namedColors.namedColors.includes(value)) {
     return true;
   }
-  if (value.startsWith('#') && (
-  // short hex, hex, or hex with alpha
-  value.length === 4 || value.length === 7 || value.length === 9)) {
+  var match = value.toLowerCase().match(colorRegexp);
+  if (match && match[0] === value) {
     return true;
   }
   return false;
 };
-exports.isHardCodedColor = isHardCodedColor;
+function isBoldColor(color) {
+  var number = parseInt(color.replace(/^./, ''), 10);
+  return number > 300;
+}

package/dist/cjs/presets/theme-to-design-tokens/utils/css-utils.js

@@ -0,0 +1,38 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.containsReplaceableCSSDeclarations = containsReplaceableCSSDeclarations;
+exports.findEndIndexOfCSSExpression = findEndIndexOfCSSExpression;
+var _declaration = require("../../css-to-design-tokens/lib/declaration");
+function containsReplaceableCSSDeclarations(input) {
+  var cssPattern = /(\S+)\s*:/g;
+  var match;
+  while ((match = cssPattern.exec(input)) !== null) {
+    if ((0, _declaration.isColorRelatedProperty)(match[1])) {
+      return true;
+    }
+  }
+  return false;
+}
+function findEndIndexOfCSSExpression(text, isAtEndOfInput) {
+  // CSS expression can end *on* a semicolon or *before* a brace. In either
+  // case we treat the remaining part of the value to cover one character
+  // before that symbol.
+  var semicolonIndex = text.indexOf(';');
+  var braceIndex = text.indexOf('}');
+  if (semicolonIndex === -1 && braceIndex === -1) {
+    if (isAtEndOfInput) {
+      return text.length;
+    } else {
+      return null;
+    }
+  } else if (semicolonIndex === -1) {
+    return braceIndex - 1;
+  } else if (braceIndex === -1) {
+    return semicolonIndex - 1;
+  } else {
+    return Math.min(semicolonIndex, braceIndex) - 1;
+  }
+}

package/dist/cjs/presets/theme-to-design-tokens/utils/fuzzy-search.js

@@ -286,5 +286,4 @@ var FuzzySet = function FuzzySet() {
   }
   return fuzzyset;
 };
-var _default = FuzzySet;
-exports.default = _default;
+var _default = exports.default = FuzzySet;

package/dist/cjs/presets/theme-to-design-tokens/utils/legacy-colors.js

@@ -4,11 +4,9 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.legacyColors = exports.legacyColorMixins = exports.legacyColorMetaMap = void 0;
-var legacyColors = ['R50', 'R75', 'R100', 'R200', 'R300', 'R400', 'R500', 'Y50', 'Y75', 'Y100', 'Y200', 'Y300', 'Y400', 'Y500', 'G50', 'G75', 'G100', 'G200', 'G300', 'G400', 'G500', 'B50', 'B75', 'B100', 'B200', 'B300', 'B400', 'B500', 'P50', 'P75', 'P100', 'P200', 'P300', 'P400', 'P500', 'T50', 'T75', 'T100', 'T200', 'T300', 'T400', 'T500', 'N0', 'N10', 'N20', 'N30', 'N40', 'N50', 'N60', 'N70', 'N80', 'N90', 'N100', 'N200', 'N300', 'N400', 'N500', 'N600', 'N700', 'N800', 'N900', 'N10A', 'N20A', 'N30A', 'N40A', 'N50A', 'N60A', 'N70A', 'N80A', 'N90A', 'N100A', 'N200A', 'N300A', 'N400A', 'N500A', 'N600A', 'N700A', 'N800A', 'DN900', 'DN800', 'DN700', 'DN600', 'DN500', 'DN400', 'DN300', 'DN200', 'DN100', 'DN90', 'DN80', 'DN70', 'DN60', 'DN50', 'DN40', 'DN30', 'DN20', 'DN10', 'DN0', 'DN800A', 'DN700A', 'DN600A', 'DN500A', 'DN400A', 'DN300A', 'DN200A', 'DN100A', 'DN90A', 'DN80A', 'DN70A', 'DN60A', 'DN50A', 'DN40A', 'DN30A', 'DN20A', 'DN10A'];
-exports.legacyColors = legacyColors;
-var legacyColorMixins = ['background', 'backgroundActive', 'backgroundHover', 'backgroundOnLayer', 'text', 'textHover', 'textActive', 'subtleText', 'placeholderText', 'heading', 'subtleHeading', 'codeBlock', 'link', 'linkHover', 'linkActive', 'linkOutline', 'primary', 'blue', 'teal', 'purple', 'red', 'yellow', 'green', 'skeleton'];
-exports.legacyColorMixins = legacyColorMixins;
-var legacyColorMetaMap = {
+var legacyColors = exports.legacyColors = ['R50', 'R75', 'R100', 'R200', 'R300', 'R400', 'R500', 'Y50', 'Y75', 'Y100', 'Y200', 'Y300', 'Y400', 'Y500', 'G50', 'G75', 'G100', 'G200', 'G300', 'G400', 'G500', 'B50', 'B75', 'B100', 'B200', 'B300', 'B400', 'B500', 'P50', 'P75', 'P100', 'P200', 'P300', 'P400', 'P500', 'T50', 'T75', 'T100', 'T200', 'T300', 'T400', 'T500', 'N0', 'N10', 'N20', 'N30', 'N40', 'N50', 'N60', 'N70', 'N80', 'N90', 'N100', 'N200', 'N300', 'N400', 'N500', 'N600', 'N700', 'N800', 'N900', 'N10A', 'N20A', 'N30A', 'N40A', 'N50A', 'N60A', 'N70A', 'N80A', 'N90A', 'N100A', 'N200A', 'N300A', 'N400A', 'N500A', 'N600A', 'N700A', 'N800A', 'DN900', 'DN800', 'DN700', 'DN600', 'DN500', 'DN400', 'DN300', 'DN200', 'DN100', 'DN90', 'DN80', 'DN70', 'DN60', 'DN50', 'DN40', 'DN30', 'DN20', 'DN10', 'DN0', 'DN800A', 'DN700A', 'DN600A', 'DN500A', 'DN400A', 'DN300A', 'DN200A', 'DN100A', 'DN90A', 'DN80A', 'DN70A', 'DN60A', 'DN50A', 'DN40A', 'DN30A', 'DN20A', 'DN10A'];
+var legacyColorMixins = exports.legacyColorMixins = ['background', 'backgroundActive', 'backgroundHover', 'backgroundOnLayer', 'text', 'textHover', 'textActive', 'subtleText', 'placeholderText', 'heading', 'subtleHeading', 'codeBlock', 'link', 'linkHover', 'linkActive', 'linkOutline', 'primary', 'blue', 'teal', 'purple', 'red', 'yellow', 'green', 'skeleton'];
+var legacyColorMetaMap = exports.legacyColorMetaMap = {
   R50: ['danger'],
   R75: ['danger'],
   R100: ['danger'],
@@ -95,5 +93,4 @@ var legacyColorMetaMap = {
   grey: ['background', 'neutral'],
   skeleton: ['skeleton'],
   white: ['inverse']
-};
-exports.legacyColorMetaMap = legacyColorMetaMap;
+};

package/dist/cjs/presets/theme-to-design-tokens/utils/named-colors.js

@@ -4,5 +4,4 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.namedColors = void 0;
-var namedColors = ['black', 'silver', 'gray', 'white', 'maroon', 'red', 'purple', 'fuchsia', 'green', 'lime', 'olive', 'yellow', 'navy', 'blue', 'teal', 'aqua', 'orange', 'aliceblue', 'antiquewhite', 'aquamarine', 'azure', 'beige', 'bisque', 'blanchedalmond', 'blueviolet', 'brown', 'burlywood', 'cadetblue', 'chartreuse', 'chocolate', 'coral', 'cornflowerblue', 'cornsilk', 'crimson', 'cyan', 'darkblue', 'darkcyan', 'darkgoldenrod', 'darkgray', 'darkgreen', 'darkgrey', 'darkkhaki', 'darkmagenta', 'darkolivegreen', 'darkorange', 'darkorchid', 'darkred', 'darksalmon', 'darkseagreen', 'darkslateblue', 'darkslategray', 'darkslategrey', 'darkturquoise', 'darkviolet', 'deeppink', 'deepskyblue', 'dimgray', 'dimgrey', 'dodgerblue', 'firebrick', 'floralwhite', 'forestgreen', 'gainsboro', 'ghostwhite', 'gold', 'goldenrod', 'greenyellow', 'grey', 'honeydew', 'hotpink', 'indianred', 'indigo', 'ivory', 'khaki', 'lavender', 'lavenderblush', 'lawngreen', 'lemonchiffon', 'lightblue', 'lightcoral', 'lightcyan', 'lightgoldenrodyellow', 'lightgray', 'lightgreen', 'lightgrey', 'lightpink', 'lightsalmon', 'lightseagreen', 'lightskyblue', 'lightslategray', 'lightslategrey', 'lightsteelblue', 'lightyellow', 'limegreen', 'linen', 'magenta', 'mediumaquamarine', 'mediumblue', 'mediumorchid', 'mediumpurple', 'mediumseagreen', 'mediumslateblue', 'mediumspringgreen', 'mediumturquoise', 'mediumvioletred', 'midnightblue', 'mintcream', 'mistyrose', 'moccasin', 'navajowhite', 'oldlace', 'olivedrab', 'orangered', 'orchid', 'palegoldenrod', 'palegreen', 'paleturquoise', 'palevioletred', 'papayawhip', 'peachpuff', 'peru', 'pink', 'plum', 'powderblue', 'rosybrown', 'royalblue', 'saddlebrown', 'salmon', 'sandybrown', 'seagreen', 'seashell', 'sienna', 'skyblue', 'slateblue', 'slategray', 'slategrey', 'snow', 'springgreen', 'steelblue', 'tan', 'thistle', 'tomato', 'turquoise', 'violet', 'wheat', 'whitesmoke', 'yellowgreen', 'rebeccapurple'];
-exports.namedColors = namedColors;
+var namedColors = exports.namedColors = ['black', 'silver', 'gray', 'white', 'maroon', 'red', 'purple', 'fuchsia', 'green', 'lime', 'olive', 'yellow', 'navy', 'blue', 'teal', 'aqua', 'orange', 'aliceblue', 'antiquewhite', 'aquamarine', 'azure', 'beige', 'bisque', 'blanchedalmond', 'blueviolet', 'brown', 'burlywood', 'cadetblue', 'chartreuse', 'chocolate', 'coral', 'cornflowerblue', 'cornsilk', 'crimson', 'cyan', 'darkblue', 'darkcyan', 'darkgoldenrod', 'darkgray', 'darkgreen', 'darkgrey', 'darkkhaki', 'darkmagenta', 'darkolivegreen', 'darkorange', 'darkorchid', 'darkred', 'darksalmon', 'darkseagreen', 'darkslateblue', 'darkslategray', 'darkslategrey', 'darkturquoise', 'darkviolet', 'deeppink', 'deepskyblue', 'dimgray', 'dimgrey', 'dodgerblue', 'firebrick', 'floralwhite', 'forestgreen', 'gainsboro', 'ghostwhite', 'gold', 'goldenrod', 'greenyellow', 'grey', 'honeydew', 'hotpink', 'indianred', 'indigo', 'ivory', 'khaki', 'lavender', 'lavenderblush', 'lawngreen', 'lemonchiffon', 'lightblue', 'lightcoral', 'lightcyan', 'lightgoldenrodyellow', 'lightgray', 'lightgreen', 'lightgrey', 'lightpink', 'lightsalmon', 'lightseagreen', 'lightskyblue', 'lightslategray', 'lightslategrey', 'lightsteelblue', 'lightyellow', 'limegreen', 'linen', 'magenta', 'mediumaquamarine', 'mediumblue', 'mediumorchid', 'mediumpurple', 'mediumseagreen', 'mediumslateblue', 'mediumspringgreen', 'mediumturquoise', 'mediumvioletred', 'midnightblue', 'mintcream', 'mistyrose', 'moccasin', 'navajowhite', 'oldlace', 'olivedrab', 'orangered', 'orchid', 'palegoldenrod', 'palegreen', 'paleturquoise', 'palevioletred', 'papayawhip', 'peachpuff', 'peru', 'pink', 'plum', 'powderblue', 'rosybrown', 'royalblue', 'saddlebrown', 'salmon', 'sandybrown', 'seagreen', 'seashell', 'sienna', 'skyblue', 'slateblue', 'slategray', 'slategrey', 'snow', 'springgreen', 'steelblue', 'tan', 'thistle', 'tomato', 'turquoise', 'violet', 'wheat', 'whitesmoke', 'yellowgreen', 'rebeccapurple'];

package/dist/cjs/presets/theme-to-design-tokens/utils/string-utils.js

@@ -0,0 +1,25 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.findFirstNonspaceIndexAfter = findFirstNonspaceIndexAfter;
+exports.kebabize = void 0;
+exports.splitAtIndex = splitAtIndex;
+var kebabize = exports.kebabize = function kebabize(str) {
+  return str.replace(/[A-Z]+(?![a-z])|[A-Z]/g, function ($, ofs) {
+    return (ofs ? '-' : '') + $.toLowerCase();
+  });
+};
+function findFirstNonspaceIndexAfter(text, index) {
+  var rest = text.slice(index + 1);
+  var indexInRest = rest.search(/\S/);
+  if (indexInRest === -1) {
+    return text.length;
+  } else {
+    return index + 1 + indexInRest;
+  }
+}
+function splitAtIndex(text, index) {
+  return [text.slice(0, index), text.slice(index)];
+}

package/dist/cjs/presets/theme-to-design-tokens/utils/tokens.js

@@ -7,15 +7,14 @@ Object.defineProperty(exports, "__esModule", {
 exports.tokens = exports.getUniqueWordsFromTokens = void 0;
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _tokensRaw = require("@atlaskit/tokens/tokens-raw");
-var tokens = _tokensRaw.light.filter(function (t) {
+var tokens = exports.tokens = _tokensRaw.light.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') && !t.includes('chart') && !t.includes('elevation.shadow.overflow');
 });
-exports.tokens = tokens;
-var getUniqueWordsFromTokens = tokens.reduce(function (accum, val) {
+var getUniqueWordsFromTokens = exports.getUniqueWordsFromTokens = tokens.reduce(function (accum, val) {
   return [].concat((0, _toConsumableArray2.default)(accum), (0, _toConsumableArray2.default)(val.split('.')));
 }, []).reduce(function (accum, val) {
   return [].concat((0, _toConsumableArray2.default)(accum), (0, _toConsumableArray2.default)(val.split(/(?=[A-Z])/g).map(function (e) {
@@ -26,5 +25,4 @@ var getUniqueWordsFromTokens = tokens.reduce(function (accum, val) {
     accum.push(val);
   }
   return accum;
-}, []);
-exports.getUniqueWordsFromTokens = getUniqueWordsFromTokens;
+}, []);

package/dist/cjs/sinceRef.js

@@ -26,7 +26,7 @@ var parseDiffLine = function parseDiffLine(line) {
 /** Returns packages that have been upgraded in package.json since ref. The version refers to their previous
  * version
  */
-var getPackagesSinceRef = /*#__PURE__*/function () {
+var getPackagesSinceRef = exports.getPackagesSinceRef = /*#__PURE__*/function () {
   var _ref = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(ref) {
     var git, commit, diff, modifiedPackages, addedPackages, upgradedPackages;
     return _regenerator.default.wrap(function _callee$(_context) {
@@ -85,7 +85,6 @@ var getPackagesSinceRef = /*#__PURE__*/function () {
     return _ref.apply(this, arguments);
   };
 }();
-exports.getPackagesSinceRef = getPackagesSinceRef;
 if (require.main === module) {
   // eslint-disable-next-line no-console
   getPackagesSinceRef(process.argv[2]).then(function (res) {

package/dist/cjs/transforms.js

@@ -16,13 +16,12 @@ var basePath = function basePath(packages) {
   }).join(','), ",}")] : ['@{atlaskit,atlassian,atlassiansox}', '*'];
   return _path.default.join.apply(_path.default, [process.cwd(), 'node_modules'].concat(packageDirectory, ['codemods']));
 };
-var hasTransform = function hasTransform(transformPath) {
+var hasTransform = exports.hasTransform = function hasTransform(transformPath) {
   return _glob.default.sync(transformPath).length > 0;
 };
 
 /** Retrieves transforms for `packages` if provided, otherwise all transforms including presets */
-exports.hasTransform = hasTransform;
-var getTransforms = function getTransforms(packages) {
+var getTransforms = exports.getTransforms = function getTransforms(packages) {
   var transforms = [_path.default.join(basePath(packages), '*.@(ts|tsx|js)'), _path.default.join(basePath(packages), '*', 'index.@(ts|tsx|js)')];
   if (!packages) {
     transforms.unshift.apply(transforms, (0, _toConsumableArray2.default)(_presets.default));
@@ -35,25 +34,21 @@ var getTransforms = function getTransforms(packages) {
     return parseTransformPath(transform);
   }).filter(filterTransforms(packages)).sort();
 };
-exports.getTransforms = getTransforms;
-var parseTransformPath = function parseTransformPath(transformPath) {
+var parseTransformPath = exports.parseTransformPath = function parseTransformPath(transformPath) {
   return _path.default.parse(transformPath);
 };
-exports.parseTransformPath = parseTransformPath;
-var getTransformPath = function getTransformPath(_ref) {
+var getTransformPath = exports.getTransformPath = function getTransformPath(_ref) {
   var dir = _ref.dir,
     base = _ref.base;
   return "".concat(dir, "/").concat(base);
 };
-exports.getTransformPath = getTransformPath;
-var getTransformModule = function getTransformModule(transform) {
+var getTransformModule = exports.getTransformModule = function getTransformModule(transform) {
   var pathSegments = transform.dir.split(_path.default.sep);
   var nodeModulesIdx = pathSegments.indexOf('node_modules');
   // pathSegments will be of the form [node_modules, '@atlaskit', 'avatar', 'codemods']
   return pathSegments.slice(nodeModulesIdx + 1, nodeModulesIdx + 3).join('/');
 };
-exports.getTransformModule = getTransformModule;
-var getTransformVersion = function getTransformVersion(transform) {
+var getTransformVersion = exports.getTransformVersion = function getTransformVersion(transform) {
   var transformName = transform.base;
   if (transformName.startsWith('index.')) {
     var pathSegments = transform.dir.split(_path.default.sep);
@@ -61,7 +56,6 @@ var getTransformVersion = function getTransformVersion(transform) {
   }
   return transformName.split('-')[0];
 };
-exports.getTransformVersion = getTransformVersion;
 var filterTransforms = function filterTransforms(packages) {
   if (!packages || packages.length === 0) {
     return function () {

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,67 +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 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);
-}
-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(([_, 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];
-}
+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
+};
 
 // https://github.com/postcss/postcss/blob/main/docs/writing-a-plugin.md
 // https://astexplorer.net/#/2uBU1BLuJ1
@@ -69,66 +16,62 @@ const plugin = () => {
   const processed = Symbol('processed');
   return {
     postcssPlugin: 'UsingTokens',
-    Declaration: decl => {
+    AtRule(atRule, helper) {
       // @ts-expect-error
-      if (decl[processed]) {
-        return;
-      }
-      if (!isColorProperty(decl.prop)) {
+      if (atRule[processed]) {
         return;
       }
-      const searchTerms = [getDeclarationMeta(decl), ...getParentSelectors(decl).split(/\-|\.|\,|\ |\:|\&/).filter(el => !!el)];
-      let match;
-      const cssVarRe = /var\([^\)]+\)/g;
-      const lessVarRe = /@[a-zA-Z0-9-]+/g;
-      const rawColorRe = /(#([0-9a-f]{3}){1,2}|(rgba|hsla)\(\d{1,3}%?(,\s?\d{1,3}%?){2},\s?(1|0|0?\.\d+)\)|(rgb|hsl)\(\d{1,3}%?(,\s?\d{1,3}%?){2}\))/i;
-
-      // CSS variables
-      const cssVarMatch = decl.value.match(cssVarRe);
-      if (cssVarMatch) {
-        var _getMetaFromCssVar;
-        match = cssVarMatch[0];
-        if (isDesignToken(stripVar(match))) {
-          return;
-        }
-        searchTerms.push(...((_getMetaFromCssVar = getMetaFromCssVar(stripVar(match))) !== null && _getMetaFromCssVar !== void 0 ? _getMetaFromCssVar : []));
-      }
-
-      // Less variables
-      const lassVarMatch = decl.value.match(lessVarRe);
-      if (lassVarMatch) {
-        var _getMetaFromCssVar2;
-        match = lassVarMatch[0];
-        searchTerms.push(...((_getMetaFromCssVar2 = getMetaFromCssVar(`--${stripLessVar(match)}`)) !== null && _getMetaFromCssVar2 !== void 0 ? _getMetaFromCssVar2 : []));
-      }
 
-      // Raw colors
-      const rawColorMatch = decl.value.match(rawColorRe);
-      if (rawColorMatch) {
-        var _getMetaFromRawColor;
-        match = rawColorMatch[0];
-        searchTerms.push(...((_getMetaFromRawColor = getMetaFromRawColor(match)) !== null && _getMetaFromRawColor !== void 0 ? _getMetaFromRawColor : []));
+      // @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
       }
 
-      // 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 : []));
+      // @ts-expect-error
+      atRule[processed] = true;
+    },
+    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: ${decl.prop}: ${decl.value}`);
+      if (decl.value === 'none') {
         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})`);
+      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;
+        }
+        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
@@ -137,7 +80,10 @@ const plugin = () => {
   };
 };
 export default async function transformer(file) {
-  return await postcss([plugin()]).process(file.source, {
-    syntax: lessSyntax
-  }).css;
+  const processor = postcss([plugin()]);
+  const src = typeof file === 'string' ? file : file.source;
+  const {
+    css
+  } = 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'],