@atlaskit/tokens 1.35.0 → 1.37.0

package/codemods/css-to-design-tokens/lib/value.tsx

@@ -0,0 +1,85 @@
+import {
+  extractBetweenParentheses,
+  isGradient,
+  isKnownCssVariable,
+  isLessFunction,
+  isNamedColor,
+  isRawColor,
+} from './colors';
+import { extractCssVarName } from './declaration';
+import { getCssVarMeta, getNamedColorMeta, getRawColorMeta } from './meta';
+import findToken from './tokens';
+
+interface Value {
+  getReplacement: (additionalMeta?: string[]) => string;
+  getMeta: () => string[];
+}
+
+export default function parseValue(value: string): Value | null {
+  if (isLessFunction(value)) {
+    // eslint-disable-next-line no-console
+    console.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: string[] = [];
+        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/codemods/css-to-design-tokens/transform.tsx

@@ -0,0 +1,99 @@
+import type { FileInfo } from 'jscodeshift';
+import postcss, { Plugin } from 'postcss';
+// @ts-ignore
+import lessSyntax from 'postcss-less';
+
+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
+const plugin = (): Plugin => {
+  const processed = Symbol('processed');
+
+  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
+      atRule[processed] = true;
+    },
+    Declaration: (decl) => {
+      // @ts-expect-error
+      if (decl[processed]) {
+        return;
+      }
+      if (decl.value === 'none') {
+        return;
+      }
+
+      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: 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;
+              }
+
+              return parsedValue.getReplacement(baseMeta);
+            });
+            decl.value = replacedValues.join(' ');
+            break;
+        }
+      }
+
+      // @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;
+}

package/codemods/hypermod.config.tsx

@@ -0,0 +1,9 @@
+import cssToDesignTokens from './css-to-design-tokens/transform';
+import themeToDesignTokens from './theme-to-design-tokens/transform';
+
+export default {
+  presets: {
+    'theme-to-design-tokens': themeToDesignTokens,
+    'css-to-design-tokens': cssToDesignTokens,
+  },
+};