@atlaskit/tokens 1.49.1 → 1.50.0

package/codemods/css-to-design-tokens/transform.tsx

@@ -1,13 +1,9 @@
 import type { FileInfo } from 'jscodeshift';
-import postcss, { Plugin } from 'postcss';
+import postcss, { type Plugin } from 'postcss';
 // @ts-ignore
 import lessSyntax from 'postcss-less';
 
-import {
-  isColorRelatedProperty,
-  isCssDeclaration,
-  splitCssValue,
-} from './lib/declaration';
+import { isColorRelatedProperty, isCssDeclaration, splitCssValue } from './lib/declaration';
 import { getBaseDeclarationMeta } from './lib/meta';
 import findToken from './lib/tokens';
 import parseValue from './lib/value';
@@ -17,83 +13,83 @@ const POSTCSS_OPTIONS = { syntax: lessSyntax, from: undefined };
 // https://github.com/postcss/postcss/blob/main/docs/writing-a-plugin.md
 // https://astexplorer.net/#/2uBU1BLuJ1
 const plugin = (): Plugin => {
-  const processed = Symbol('processed');
+	const processed = Symbol('processed');
 
-  return {
-    postcssPlugin: 'UsingTokens',
-    AtRule(atRule) {
-      // @ts-expect-error
-      if (atRule[processed]) {
-        return;
-      }
+	return {
+		postcssPlugin: 'UsingTokens',
+		AtRule(atRule) {
+			// @ts-expect-error
+			if (atRule[processed]) {
+				return;
+			}
 
-      // @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: 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: (decl) => {
-      // @ts-expect-error
-      if (decl[processed]) {
-        return;
-      }
-      if (decl.value === 'none') {
-        return;
-      }
+			// @ts-expect-error
+			atRule[processed] = true;
+		},
+		Declaration: (decl) => {
+			// @ts-expect-error
+			if (decl[processed]) {
+				return;
+			}
+			if (decl.value === 'none') {
+				return;
+			}
 
-      const baseMeta = getBaseDeclarationMeta(decl);
+			const baseMeta = getBaseDeclarationMeta(decl);
 
-      if (isCssDeclaration(decl.prop)) {
-        // TODO https://hello.atlassian.net/browse/DCA11Y-637
-      }
+			if (isCssDeclaration(decl.prop)) {
+				// TODO https://hello.atlassian.net/browse/DCA11Y-637
+			}
 
-      if (isColorRelatedProperty(decl.prop)) {
-        const values = splitCssValue(decl.value);
-        if (!values) {
-          return;
-        }
+			if (isColorRelatedProperty(decl.prop)) {
+				const values = splitCssValue(decl.value);
+				if (!values) {
+					return;
+				}
 
-        switch (decl.prop) {
-          case 'box-shadow':
-            const meta = values.reduce((acc: string[], curr: string) => {
-              const parsedValue = parseValue(curr);
-              if (!parsedValue) {
-                return acc;
-              }
-              return [...acc, ...parsedValue.getMeta()];
-            }, baseMeta);
+				switch (decl.prop) {
+					case 'box-shadow':
+						const meta = values.reduce((acc: string[], curr: string) => {
+							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;
-              }
+						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;
-        }
-      }
+							return parsedValue.getReplacement(baseMeta);
+						});
+						decl.value = replacedValues.join(' ');
+						break;
+				}
+			}
 
-      // @ts-expect-error
-      decl[processed] = true;
-    },
-  };
+			// @ts-expect-error
+			decl[processed] = true;
+		},
+	};
 };
 
 export default async function transformer(file: FileInfo | string) {
-  const processor = postcss([plugin()]);
-  const src = typeof file === 'string' ? file : file.source;
-  const { css } = await processor.process(src, POSTCSS_OPTIONS);
-  return css;
+	const processor = postcss([plugin()]);
+	const src = typeof file === 'string' ? file : file.source;
+	const { css } = await processor.process(src, POSTCSS_OPTIONS);
+	return css;
 }

package/codemods/hypermod.config.tsx

@@ -3,9 +3,9 @@ import removeFallbacksColor from './remove-fallbacks-color/transform';
 import themeToDesignTokens from './theme-to-design-tokens/transform';
 
 export default {
-  presets: {
-    'theme-to-design-tokens': themeToDesignTokens,
-    'css-to-design-tokens': cssToDesignTokens,
-    'remove-fallbacks-color': removeFallbacksColor,
-  },
+	presets: {
+		'theme-to-design-tokens': themeToDesignTokens,
+		'css-to-design-tokens': cssToDesignTokens,
+		'remove-fallbacks-color': removeFallbacksColor,
+	},
 };

package/codemods/remove-fallbacks-color/transform.tsx

@@ -2,25 +2,23 @@ import { hasImportDeclaration } from '@hypermod/utils';
 import type { API, FileInfo } from 'jscodeshift';
 
 export default async function transformer(file: FileInfo, api: API) {
-  const j = api.jscodeshift;
-  const source = j(file.source);
+	const j = api.jscodeshift;
+	const source = j(file.source);
 
-  if (!hasImportDeclaration(j, source, '@atlaskit/tokens')) {
-    return file.source;
-  }
+	if (!hasImportDeclaration(j, source, '@atlaskit/tokens')) {
+		return file.source;
+	}
 
-  source
-    .find(j.CallExpression, { callee: { name: 'token' } })
-    .forEach((path) => {
-      if (
-        path.node.arguments.length > 1 &&
-        j.StringLiteral.check(path.node.arguments[0]) &&
-        /^color\.|elevation/.test(path.node.arguments[0].value)
-      ) {
-        // Remove the second argument
-        path.node.arguments.splice(1, 1);
-      }
-    });
+	source.find(j.CallExpression, { callee: { name: 'token' } }).forEach((path) => {
+		if (
+			path.node.arguments.length > 1 &&
+			j.StringLiteral.check(path.node.arguments[0]) &&
+			/^color\.|elevation/.test(path.node.arguments[0].value)
+		) {
+			// Remove the second argument
+			path.node.arguments.splice(1, 1);
+		}
+	});
 
-  return source.toSource();
+	return source.toSource();
 }