@atlaskit/tokens 1.49.0 → 1.50.0

package/codemods/theme-to-design-tokens/utils/ast-meta.tsx

@@ -5,155 +5,147 @@ import { uniqueWordsFromTokens } from '../../utils/tokens';
 import { getClosestDecendantOfType } from './ast';
 
 export function getMetaFromAncestors(
-  j: core.JSCodeshift,
-  path: any,
-  meta: string[] = [],
+	j: core.JSCodeshift,
+	path: any,
+	meta: string[] = [],
 ): string[] {
-  const parent = path.parentPath;
-  const grandParent = parent && parent.parentPath;
-
-  if (parent && parent.value.type === 'ObjectProperty') {
-    let value = '';
-
-    if (
-      parent.value.key.type === 'Literal' ||
-      parent.value.key.type === 'StringLiteral' ||
-      parent.value.key.type === 'NumericLiteral'
-    ) {
-      value = parent.value.key.value.toString();
-    } else {
-      value = parent.value.key.name;
-    }
-
-    meta.push(value);
-  }
-
-  if (parent && grandParent && grandParent.value.type === 'TemplateLiteral') {
-    const expressionIndex = grandParent.value.expressions.findIndex(
-      (exp: any) => exp.name === path.value.name,
-    );
-    const quasi = grandParent.value.quasis[expressionIndex];
-    const propertyName = (quasi.value.cooked || quasi.value.raw || '')
-      .replace(/\n/g, '')
-      .split(/;|{|}/)
-      .filter((el: string) => !el.match(/\.|\@|\(|\)/))
-      .pop()
-      .split(/:/g)[0]
-      .trim();
-
-    grandParent.value.quasis
-      .slice(0, expressionIndex + 1)
-      .map((q: any) => q.value.cooked)
-      // We reverse so the most nested one is first which we're more likely than not interested in
-      .reverse()
-      .some((str: string) => {
-        const result = /(hover|active|disabled|focus)/.exec(str.toLowerCase());
-
-        if (result) {
-          meta.push(result[0]);
-          return true;
-        }
-      });
-
-    meta.push(propertyName);
-  }
-
-  if (parent && parent.value.type === 'JSXAttribute') {
-    if (
-      !['css', 'styles', 'style', 'fill', 'stopColor', 'startColor'].includes(
-        parent.value.name.name,
-      )
-    ) {
-      meta.push(parent.value.name.name);
-    }
-  }
-
-  const closestJSXElement = getClosestDecendantOfType(
-    j,
-    path,
-    j.JSXOpeningElement,
-  );
-
-  if (closestJSXElement) {
-    const jsxElementName = closestJSXElement.value.name.name;
-    const nameComponents = jsxElementName
-      .replace(/([a-z])([A-Z])/g, '$1 $2')
-      .split(' ');
-
-    meta.push(...nameComponents);
-  }
-
-  if (parent && parent.value.type === 'VariableDeclarator') {
-    meta.push(parent.value.id.name);
-  }
-
-  if (parent) {
-    return getMetaFromAncestors(j, parent, meta);
-  }
-
-  return meta;
+	const parent = path.parentPath;
+	const grandParent = parent && parent.parentPath;
+
+	if (parent && parent.value.type === 'ObjectProperty') {
+		let value = '';
+
+		if (
+			parent.value.key.type === 'Literal' ||
+			parent.value.key.type === 'StringLiteral' ||
+			parent.value.key.type === 'NumericLiteral'
+		) {
+			value = parent.value.key.value.toString();
+		} else {
+			value = parent.value.key.name;
+		}
+
+		meta.push(value);
+	}
+
+	if (parent && grandParent && grandParent.value.type === 'TemplateLiteral') {
+		const expressionIndex = grandParent.value.expressions.findIndex(
+			(exp: any) => exp.name === path.value.name,
+		);
+		const quasi = grandParent.value.quasis[expressionIndex];
+		const propertyName = (quasi.value.cooked || quasi.value.raw || '')
+			.replace(/\n/g, '')
+			.split(/;|{|}/)
+			.filter((el: string) => !el.match(/\.|\@|\(|\)/))
+			.pop()
+			.split(/:/g)[0]
+			.trim();
+
+		grandParent.value.quasis
+			.slice(0, expressionIndex + 1)
+			.map((q: any) => q.value.cooked)
+			// We reverse so the most nested one is first which we're more likely than not interested in
+			.reverse()
+			.some((str: string) => {
+				const result = /(hover|active|disabled|focus)/.exec(str.toLowerCase());
+
+				if (result) {
+					meta.push(result[0]);
+					return true;
+				}
+			});
+
+		meta.push(propertyName);
+	}
+
+	if (parent && parent.value.type === 'JSXAttribute') {
+		if (
+			!['css', 'styles', 'style', 'fill', 'stopColor', 'startColor'].includes(
+				parent.value.name.name,
+			)
+		) {
+			meta.push(parent.value.name.name);
+		}
+	}
+
+	const closestJSXElement = getClosestDecendantOfType(j, path, j.JSXOpeningElement);
+
+	if (closestJSXElement) {
+		const jsxElementName = closestJSXElement.value.name.name;
+		const nameComponents = jsxElementName.replace(/([a-z])([A-Z])/g, '$1 $2').split(' ');
+
+		meta.push(...nameComponents);
+	}
+
+	if (parent && parent.value.type === 'VariableDeclarator') {
+		meta.push(parent.value.id.name);
+	}
+
+	if (parent) {
+		return getMetaFromAncestors(j, parent, meta);
+	}
+
+	return meta;
 }
 
 export function cleanMeta(meta: string[]) {
-  return meta
-    .reduce<string[]>(
-      (accum, val) => [
-        ...accum,
-        ...(typeof val === 'string'
-          ? val.split(/(?=[A-Z])/g).map((e) => e.toLowerCase())
-          : []),
-      ],
-      [],
-    )
-    .reduce<string[]>((accum, val) => {
-      const cleanVal = val
-        .replace(/:/g, '')
-        .replace(/,/g, '')
-        .replace('grey', 'neutral')
-        .replace('skeleton', 'neutral')
-        .replace('texts', 'text')
-        .replace('red', 'danger')
-        .replace('error', 'danger')
-        .replace('invalid', 'danger')
-        .replace('removed', 'danger')
-        .replace('removal', 'danger')
-        .replace('remove', 'danger')
-        .replace('focus', 'focused')
-        .replace('valid', 'success')
-        .replace('successful', 'success')
-        .replace('risk', 'warning')
-        .replace('caution', 'warning')
-        .replace('primary', 'bold')
-        .replace('secondary', 'subtle')
-        .replace('hyperlink', 'link')
-        .replace('anchor', 'link')
-        .replace('active', 'pressed')
-        .replace('hover', 'hovered')
-        .replace('card', 'raised')
-        .replace('dragged', 'surface overlay')
-        .replace('dragging', 'surface overlay')
-        .replace('drag', 'surface overlay')
-        .replace('background-color', 'background')
-        .replace('color', 'text')
-        .replace('icons', 'icon')
-        .replace('glyph', 'icon')
-        .replace('stroke', 'border')
-        .replace('border-left', 'border')
-        .replace('border-right', 'border')
-        .replace('border-top', 'border')
-        .replace('border-bottom', 'border')
-        .replace('box-shadow', 'shadow');
-
-      accum.push(...cleanVal.split(' '));
-
-      return accum;
-    }, [])
-    .filter((val) => uniqueWordsFromTokens.includes(val))
-    .reduce<string[]>((accum, val) => {
-      if (!accum.includes(val)) {
-        accum.push(val);
-      }
-
-      return accum;
-    }, []);
+	return meta
+		.reduce<string[]>(
+			(accum, val) => [
+				...accum,
+				...(typeof val === 'string' ? val.split(/(?=[A-Z])/g).map((e) => e.toLowerCase()) : []),
+			],
+			[],
+		)
+		.reduce<string[]>((accum, val) => {
+			const cleanVal = val
+				.replace(/:/g, '')
+				.replace(/,/g, '')
+				.replace('grey', 'neutral')
+				.replace('skeleton', 'neutral')
+				.replace('texts', 'text')
+				.replace('red', 'danger')
+				.replace('error', 'danger')
+				.replace('invalid', 'danger')
+				.replace('removed', 'danger')
+				.replace('removal', 'danger')
+				.replace('remove', 'danger')
+				.replace('focus', 'focused')
+				.replace('valid', 'success')
+				.replace('successful', 'success')
+				.replace('risk', 'warning')
+				.replace('caution', 'warning')
+				.replace('primary', 'bold')
+				.replace('secondary', 'subtle')
+				.replace('hyperlink', 'link')
+				.replace('anchor', 'link')
+				.replace('active', 'pressed')
+				.replace('hover', 'hovered')
+				.replace('card', 'raised')
+				.replace('dragged', 'surface overlay')
+				.replace('dragging', 'surface overlay')
+				.replace('drag', 'surface overlay')
+				.replace('background-color', 'background')
+				.replace('color', 'text')
+				.replace('icons', 'icon')
+				.replace('glyph', 'icon')
+				.replace('stroke', 'border')
+				.replace('border-left', 'border')
+				.replace('border-right', 'border')
+				.replace('border-top', 'border')
+				.replace('border-bottom', 'border')
+				.replace('box-shadow', 'shadow');
+
+			accum.push(...cleanVal.split(' '));
+
+			return accum;
+		}, [])
+		.filter((val) => uniqueWordsFromTokens.includes(val))
+		.reduce<string[]>((accum, val) => {
+			if (!accum.includes(val)) {
+				accum.push(val);
+			}
+
+			return accum;
+		}, []);
 }

package/codemods/theme-to-design-tokens/utils/ast.tsx

@@ -1,46 +1,35 @@
 import { isDecendantOfType } from '@hypermod/utils';
 import type { ASTNode, ASTPath, JSCodeshift } from 'jscodeshift';
 
-export function isDecendantOfToken(
-  j: JSCodeshift,
-  path: ASTPath | ASTNode,
-): boolean {
-  if (
-    'type' in path &&
-    path.type === 'CallExpression' &&
-    path.callee.type === 'Identifier' &&
-    path.callee.name === 'token'
-  ) {
-    return true;
-  }
+export function isDecendantOfToken(j: JSCodeshift, path: ASTPath | ASTNode): boolean {
+	if (
+		'type' in path &&
+		path.type === 'CallExpression' &&
+		path.callee.type === 'Identifier' &&
+		path.callee.name === 'token'
+	) {
+		return true;
+	}
 
-  return (
-    j(path).closest(j.CallExpression, { callee: { name: 'token' } }).length > 0
-  );
+	return j(path).closest(j.CallExpression, { callee: { name: 'token' } }).length > 0;
 }
 
 export function isParentOfToken(j: JSCodeshift, path: any): boolean {
-  if (
-    path.type === 'CallExpression' &&
-    path.callee.type === 'Identifier' &&
-    path.callee.name === 'token'
-  ) {
-    return true;
-  }
+	if (
+		path.type === 'CallExpression' &&
+		path.callee.type === 'Identifier' &&
+		path.callee.name === 'token'
+	) {
+		return true;
+	}
 
-  return (
-    j(path).find(j.CallExpression, { callee: { name: 'token' } }).length > 0
-  );
+	return j(path).find(j.CallExpression, { callee: { name: 'token' } }).length > 0;
 }
 
-export function getClosestDecendantOfType(
-  j: JSCodeshift,
-  path: ASTPath<any>,
-  type: any,
-) {
-  if (!isDecendantOfType(j, path, type)) {
-    return;
-  }
+export function getClosestDecendantOfType(j: JSCodeshift, path: ASTPath<any>, type: any) {
+	if (!isDecendantOfType(j, path, type)) {
+		return;
+	}
 
-  return j(path).closest(type).get();
+	return j(path).closest(type).get();
 }

package/codemods/theme-to-design-tokens/utils/color.tsx

@@ -3,43 +3,42 @@ import { namedColors } from './named-colors';
 
 export const isLegacyColor = (value: string) => legacyColors.includes(value);
 
-export const isLegacyNamedColor = (value: string) =>
-  legacyColorMixins.includes(value);
+export const isLegacyNamedColor = (value: string) => legacyColorMixins.includes(value);
 
 const colorRegexp =
-  /#(?:[a-f0-9]{3}|[a-f0-9]{6}|[a-f0-9]{8})\b|(?:rgb|rgba|hsl|hsla|lch|lab|color)\([^\)]*\)/;
+	/#(?:[a-f0-9]{3}|[a-f0-9]{6}|[a-f0-9]{8})\b|(?:rgb|rgba|hsl|hsla|lch|lab|color)\([^\)]*\)/;
 
 export const includesHardCodedColor = (raw: string) => {
-  const value = raw.toLowerCase();
-  if (colorRegexp.exec(value)) {
-    return true;
-  }
-
-  for (let i = 0; i < namedColors.length; i++) {
-    if (value.includes(`${namedColors[i]};`)) {
-      return true;
-    }
-  }
-
-  return false;
+	const value = raw.toLowerCase();
+	if (colorRegexp.exec(value)) {
+		return true;
+	}
+
+	for (let i = 0; i < namedColors.length; i++) {
+		if (value.includes(`${namedColors[i]};`)) {
+			return true;
+		}
+	}
+
+	return false;
 };
 
 export const isHardCodedColor = (raw: string) => {
-  const value = raw.toLowerCase();
+	const value = raw.toLowerCase();
 
-  if (namedColors.includes(value)) {
-    return true;
-  }
+	if (namedColors.includes(value)) {
+		return true;
+	}
 
-  const match = value.toLowerCase().match(colorRegexp);
-  if (match && match[0] === value) {
-    return true;
-  }
+	const match = value.toLowerCase().match(colorRegexp);
+	if (match && match[0] === value) {
+		return true;
+	}
 
-  return false;
+	return false;
 };
 
 export function isBoldColor(color: string) {
-  const number = parseInt(color.replace(/^./, ''), 10);
-  return number > 300;
+	const number = parseInt(color.replace(/^./, ''), 10);
+	return number > 300;
 }

package/codemods/theme-to-design-tokens/utils/css-utils.tsx

@@ -1,38 +1,35 @@
 import { isColorRelatedProperty } from '../../css-to-design-tokens/lib/declaration';
 
 export function containsReplaceableCSSDeclarations(input: string) {
-  const cssPattern = /(\S+)\s*:/g;
+	const cssPattern = /(\S+)\s*:/g;
 
-  let match;
-  while ((match = cssPattern.exec(input)) !== null) {
-    if (isColorRelatedProperty(match[1])) {
-      return true;
-    }
-  }
-  return false;
+	let match;
+	while ((match = cssPattern.exec(input)) !== null) {
+		if (isColorRelatedProperty(match[1])) {
+			return true;
+		}
+	}
+	return false;
 }
 
-export function findEndIndexOfCSSExpression(
-  text: string,
-  isAtEndOfInput: boolean,
-): number | null {
-  // 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.
-  const semicolonIndex = text.indexOf(';');
-  const braceIndex = text.indexOf('}');
+export function findEndIndexOfCSSExpression(text: string, isAtEndOfInput: boolean): number | null {
+	// 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.
+	const semicolonIndex = text.indexOf(';');
+	const 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;
-  }
+	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;
+	}
 }