@workday/canvas-kit-styling-transform 13.2.0 → 13.2.2

package/lib/utils/handleKeyframes.ts

@@ -0,0 +1,60 @@
+import ts from 'typescript';
+
+import {NestedStyleObject, NodeTransformer, TransformerContext} from './types';
+import {parseNodeToStaticValue} from './parseNodeToStaticValue';
+import {getVarName} from './getVarName';
+import {createStyleObjectNode, serializeStyles} from './createStyleObjectNode';
+import {isImportedFromStyling} from './isImportedFromStyling';
+import {parseObjectToStaticValue} from './parseObjectToStaticValue';
+
+export const handleKeyframes: NodeTransformer = (node, context) => {
+  const {checker} = context;
+  // keyframes`css`
+  if (
+    ts.isTaggedTemplateExpression(node) &&
+    ts.isIdentifier(node.tag) &&
+    node.tag.text === 'keyframes' &&
+    isImportedFromStyling(node.tag, checker)
+  ) {
+    // parseNodeToStaticValue can parse templates. Pass it through there to get a single static string
+    const styleObj = parseNodeToStaticValue(node.template, context).toString();
+    const identifierName = getVarName(node);
+
+    return ts.factory.createCallExpression(node.tag, undefined, [
+      createStyleReplacementNode(node, styleObj, identifierName, context),
+    ]);
+  }
+
+  // keyframes({})
+  if (
+    ts.isCallExpression(node) &&
+    ts.isIdentifier(node.expression) &&
+    node.expression.text === 'keyframes' &&
+    isImportedFromStyling(node.expression, checker)
+  ) {
+    if (ts.isObjectLiteralExpression(node.arguments[0])) {
+      const styleObj = parseObjectToStaticValue(node.arguments[0], context);
+      const identifierName = getVarName(node);
+
+      return ts.factory.updateCallExpression(node, node.expression, undefined, [
+        createStyleReplacementNode(node, styleObj, identifierName, context),
+      ]);
+    }
+  }
+
+  return;
+};
+
+function createStyleReplacementNode(
+  node: ts.Node,
+  styleObj: NestedStyleObject | string,
+  identifierName: string,
+  context: TransformerContext
+) {
+  const serialized = serializeStyles(node, styleObj, `@keyframes animation-%n{%s}`, context);
+  const animationName = `animation-${serialized.name}`;
+
+  context.names[identifierName] = animationName;
+
+  return createStyleObjectNode(serialized.styles, serialized.name);
+}

package/lib/utils/handleParentModifier.ts

@@ -0,0 +1,29 @@
+import ts from 'typescript';
+
+import {parentModifier} from '@workday/canvas-kit-styling';
+import {createPropertyTransform} from '../createPropertyTransform';
+import {parseNodeToStaticValue} from './parseNodeToStaticValue';
+
+export const handleParentModifier = createPropertyTransform((node, context) => {
+  const {names, extractedNames} = context;
+
+  if (
+    ts.isComputedPropertyName(node) &&
+    ts.isCallExpression(node.expression) &&
+    ts.isIdentifier(node.expression.expression) &&
+    node.expression.expression.text === 'parentModifier'
+  ) {
+    const args = node.expression.arguments.map(arg => parseNodeToStaticValue(arg, context));
+    const hash = args[0].toString().replace('css-', 'm');
+
+    // add a mapping from `css-{hash}` to `{hash}` for extraction string replacement
+    names[args[0]] = hash;
+
+    // map the `{hash}` to the extracted CSS class name
+    extractedNames[hash] = extractedNames[args[0]];
+
+    return parentModifier(args[0].toString());
+  }
+
+  return;
+});

package/lib/utils/handlePx2Rem.ts

@@ -0,0 +1,22 @@
+import ts from 'typescript';
+
+import {px2rem} from '@workday/canvas-kit-styling';
+import {createPropertyTransform} from '../createPropertyTransform';
+import {parseNodeToStaticValue} from './parseNodeToStaticValue';
+
+export const handlePx2Rem = createPropertyTransform((node, context) => {
+  if (
+    ts.isCallExpression(node) &&
+    ts.isIdentifier(node.expression) &&
+    node.expression.text === 'px2rem'
+  ) {
+    const args = node.arguments.map(arg => parseNodeToStaticValue(arg, context));
+
+    return px2rem(
+      parseFloat(args[0] as string),
+      args[1] ? parseFloat(args[1] as string) : undefined
+    );
+  }
+
+  return;
+});

package/lib/utils/injectStyles.ts

@@ -0,0 +1,14 @@
+import {TransformerContext} from './types';
+
+export function injectStyles(
+  {styles, cache}: TransformerContext,
+  fileName: string,
+  hash: string,
+  styleOutput: string
+) {
+  if (!cache[hash]) {
+    styles[fileName] = styles[fileName] || [];
+    styles[fileName].push(styleOutput);
+    cache[hash] = styleOutput;
+  }
+}

package/lib/utils/isImportedFromStyling.ts

@@ -0,0 +1,21 @@
+import ts from 'typescript';
+
+/**
+ * Checks if the node was imported from '@workday/canvas-kit-styling'. This is useful if you want to
+ * limit transformation to only styling imports.
+ */
+export function isImportedFromStyling(node: ts.Node, checker: ts.TypeChecker) {
+  const symbol = checker.getSymbolAtLocation(node);
+  const declaration = symbol?.valueDeclaration || symbol?.declarations?.[0];
+
+  if (
+    declaration &&
+    ts.isImportSpecifier(declaration) &&
+    ts.isStringLiteral(declaration.parent.parent.parent.moduleSpecifier) &&
+    declaration.parent.parent.parent.moduleSpecifier.text === '@workday/canvas-kit-styling'
+  ) {
+    return true;
+  }
+
+  return false;
+}

package/lib/utils/parseNodeToStaticValue.ts

@@ -0,0 +1,281 @@
+import ts from 'typescript';
+
+import {getErrorMessage} from './getErrorMessage';
+import {TransformerContext} from './types';
+
+function handlePropertyTransforms(node: ts.Node, context: TransformerContext): string | undefined {
+  return context.propertyTransforms.reduce((result, transformer) => {
+    return result || transformer(node, context) || undefined;
+  }, undefined as undefined | string);
+}
+
+/**
+ * This is the workhorse of statically analyzing style values
+ */
+export function parseNodeToStaticValue(
+  node: ts.Node,
+  context: TransformerContext
+): string | number {
+  const {checker} = context;
+
+  const value = handlePropertyTransforms(node, context);
+  if (value) {
+    return value;
+  }
+
+  /**
+   * String literals like 'red' or empty Template Expressions like `red`
+   */
+  if (ts.isStringLiteral(node) || ts.isNoSubstitutionTemplateLiteral(node)) {
+    return node.text;
+  }
+
+  // 12
+  if (ts.isNumericLiteral(node)) {
+    return parseFloat(node.text);
+  }
+
+  // -12
+  if (
+    ts.isPrefixUnaryExpression(node) &&
+    node.operator === ts.SyntaxKind.MinusToken &&
+    ts.isNumericLiteral(node.operand)
+  ) {
+    return -parseFloat(node.operand.text);
+  }
+
+  // undefined
+  if (ts.isIdentifier(node) && node.text === 'undefined') {
+    return 'undefined';
+  }
+
+  // a.b
+  if (ts.isPropertyAccessExpression(node)) {
+    getPropertyAccessExpressionText(node);
+    const varName = getPropertyAccessExpressionText(node);
+
+    const value =
+      getValueFromProcessedNodes(varName, context) ||
+      getValueFromAliasedSymbol(node, varName, context);
+
+    if (value) {
+      return value;
+    }
+  }
+
+  if (ts.isComputedPropertyName(node) && ts.isIdentifier(node.expression)) {
+    const varName = node.expression.text;
+
+    const value =
+      getValueFromProcessedNodes(varName, context) ||
+      getValueFromAliasedSymbol(node, varName, context);
+
+    if (value) {
+      return value;
+    }
+  }
+
+  // [a.b]
+  if (ts.isComputedPropertyName(node) && ts.isPropertyAccessExpression(node.expression)) {
+    const varName = getPropertyAccessExpressionText(node.expression);
+
+    const value =
+      getValueFromProcessedNodes(varName, context) ||
+      getValueFromAliasedSymbol(node, varName, context);
+
+    if (value) {
+      return value;
+    }
+  }
+
+  // [`${a.b} &`]
+  if (ts.isComputedPropertyName(node) && ts.isTemplateExpression(node.expression)) {
+    return getStyleValueFromTemplateExpression(node.expression, context);
+  }
+
+  /**
+   * ```ts
+   * `border 1px ${myVars.colors.border}`
+   * ```
+   */
+  if (ts.isTemplateExpression(node)) {
+    return getStyleValueFromTemplateExpression(node, context);
+  }
+
+  /**
+   * An Identifier is a simple variable. It may represent a variable, so we'll check it before
+   * moving on. This typically happens in stencils.
+   */
+  if (ts.isIdentifier(node)) {
+    const value =
+      getValueFromProcessedNodes(node.text, context) ||
+      getValueFromAliasedSymbol(node, node.text, context);
+
+    if (value) {
+      return value;
+    }
+  }
+
+  if (ts.isElementAccessExpression(node)) {
+    const value = parseTypeToStaticValue(checker.getTypeAtLocation(node));
+
+    if (value) {
+      return value;
+    }
+  }
+
+  // If we got here, we cannot statically analyze by the AST alone. We have to check the type of the
+  // correct AST Node
+
+  if (ts.isIdentifier(node) || ts.isPropertyAccessExpression(node)) {
+    const value = parseTypeToStaticValue(checker.getTypeAtLocation(node));
+    if (value) {
+      return value;
+    }
+  }
+
+  if (ts.isComputedPropertyName(node)) {
+    const value = parseTypeToStaticValue(checker.getTypeAtLocation(node.expression));
+    if (value) {
+      return value;
+    }
+  }
+
+  // we don't know what this is, we need to throw an error
+  const type = checker.getTypeAtLocation(node);
+
+  const typeValue = checker.typeToString(type);
+
+  throw new Error(
+    `Unknown type at: "${node.getText()}". Received "${typeValue}"\n${getErrorMessage(
+      node,
+      context
+    )}\nFor static analysis of styles, please make sure all types resolve to string or numeric literals. Please use 'const' instead of 'let'. If using an object, cast using "as const" or use an interface with string or numeric literals.`
+  );
+}
+
+function parseTypeToStaticValue(type: ts.Type): string | number | void {
+  if (type.isStringLiteral()) {
+    return type.value;
+  }
+
+  if (type.isNumberLiteral()) {
+    return type.value;
+  }
+}
+
+/**
+ * A `PropertyExpression` is an expression with a dot in it. Like `a.b.c`. It may be nested. This
+ * function will walk the AST and create a string like `a.b.c` to be passed on to variable name
+ * generation. This will be used for CSS variable lookups.
+ */
+function getPropertyAccessExpressionText(node: ts.PropertyAccessExpression): string {
+  if (ts.isIdentifier(node.name)) {
+    if (ts.isIdentifier(node.expression)) {
+      return `${node.expression.text}.${node.name.text}`;
+    }
+    if (ts.isPropertyAccessExpression(node.expression)) {
+      return `${getPropertyAccessExpressionText(node.expression)}.${node.name.text}`;
+    }
+  }
+  return '';
+}
+
+/**
+ * Gets a static string value from a template expression. It could recurse.
+ */
+function getStyleValueFromTemplateExpression(
+  node: ts.Node | undefined,
+  context: TransformerContext
+): string {
+  if (!node) {
+    return '';
+  }
+  if (ts.isTemplateExpression(node)) {
+    return (
+      getStyleValueFromTemplateExpression(node.head, context) +
+      node.templateSpans.map(value => getStyleValueFromTemplateExpression(value, context)).join('')
+    );
+  }
+
+  if (ts.isTemplateHead(node) || ts.isTemplateTail(node) || ts.isTemplateMiddle(node)) {
+    return node.text;
+  }
+
+  if (ts.isTemplateSpan(node)) {
+    return (
+      parseNodeToStaticValue(node.expression, context) +
+      getStyleValueFromTemplateExpression(node.literal, context)
+    );
+  }
+
+  return '';
+}
+
+/**
+ * Get a value from an aliased symbol, if it exists. An aliased symbol comes from
+ */
+export function getValueFromAliasedSymbol(
+  node: ts.Node,
+  varName: string,
+  context: TransformerContext
+): string | void {
+  const {checker, transform} = context;
+  let symbolNode: ts.Node | undefined;
+
+  if (ts.isIdentifier(node)) {
+    // base case is the node is an identifier
+    symbolNode = node;
+  }
+
+  if (ts.isPropertyAccessExpression(node) && ts.isIdentifier(node.name)) {
+    return getValueFromAliasedSymbol(node.expression, varName, context);
+  }
+
+  if (ts.isComputedPropertyName(node)) {
+    return getValueFromAliasedSymbol(node.expression, varName, context);
+  }
+
+  if (symbolNode) {
+    const symbol = checker.getSymbolAtLocation(symbolNode);
+    let declaration: ts.Declaration | undefined;
+
+    if (symbol?.valueDeclaration) {
+      // If the symbol has a value declaration, we'll use that declaration
+      declaration = symbol.valueDeclaration;
+    } else if (symbol && symbol.getFlags() & ts.SymbolFlags.Alias) {
+      // If the symbol does not have a value declaration, we'll check if there's a aliased symbol
+      // linking to the value declaration.
+      declaration = checker.getAliasedSymbol(symbol).valueDeclaration;
+    }
+    // If there is an aliased symbol and it is a variable declaration, try to resolve the
+    if (declaration && hasExpression(declaration)) {
+      if (declaration.initializer) {
+        // Update the `prefix` to the alias declaration's source file.
+        const aliasFileContext = {
+          ...context,
+          prefix: context.getPrefix(declaration.getSourceFile().fileName),
+        };
+        transform(declaration.initializer, aliasFileContext);
+
+        return getValueFromProcessedNodes(varName, aliasFileContext);
+      }
+    }
+  }
+}
+
+function getValueFromProcessedNodes(varName: string, context: TransformerContext): string | void {
+  const {names} = context;
+
+  if (context.nameScope && names[`${context.nameScope}${varName}`]) {
+    return names[`${context.nameScope}${varName}`];
+  }
+
+  if (names[varName]) {
+    return names[varName];
+  }
+}
+
+function hasExpression(node: ts.Node): node is ts.Node & {initializer: ts.Expression} {
+  return 'initializer' in node;
+}

package/lib/utils/parseObjectToStaticValue.ts

@@ -0,0 +1,201 @@
+import ts from 'typescript';
+import {getFallbackVariable} from './getFallbackVariable';
+
+import {parseNodeToStaticValue} from './parseNodeToStaticValue';
+import {NestedStyleObject, TransformerContext} from './types';
+
+export function parseObjectToStaticValue(
+  node: ts.Node,
+  context: TransformerContext
+): NestedStyleObject {
+  let styleObj: NestedStyleObject = {};
+
+  if (ts.isObjectLiteralExpression(node)) {
+    node.properties.forEach(property => {
+      styleObj = {...styleObj, ...parsePropertyToStaticValue(property, context)};
+    });
+  }
+
+  return wrapStyleObj(styleObj, context);
+}
+
+/**
+ * Wrap all values and nested object values with a maybeWrapCSSVariables call
+ */
+function wrapStyleObj(styleObj: NestedStyleObject, context: TransformerContext): NestedStyleObject {
+  for (const key in styleObj) {
+    if (styleObj.hasOwnProperty(key)) {
+      const value = styleObj[key];
+      if (typeof value === 'object') {
+        styleObj[key] = wrapStyleObj(value, context);
+      }
+      if (typeof value === 'string') {
+        styleObj[key] = maybeWrapCSSVariables(value, context.names);
+      }
+    }
+  }
+
+  return styleObj;
+}
+
+function handleObjectTransforms(
+  node: ts.Node,
+  context: TransformerContext
+): NestedStyleObject | undefined {
+  return context.objectTransforms.reduce((result, transformer) => {
+    return result || transformer(node, context) || undefined;
+  }, undefined as undefined | NestedStyleObject);
+}
+
+function parsePropertyToStaticValue(node: ts.Node, context: TransformerContext): NestedStyleObject {
+  const styleObj: NestedStyleObject = {};
+
+  // check to see if there's an object transform for this node
+  const obj = handleObjectTransforms(node, context);
+  if (obj) {
+    return obj;
+  }
+
+  // If there's a spread, we're expecting an object to be returned. We'll see if there's an object transform for this node
+  if (ts.isSpreadAssignment(node)) {
+    const obj = handleObjectTransforms(node.expression, context);
+
+    if (obj) {
+      return obj;
+    }
+  }
+
+  // {...{key: 'value'}}
+  if (ts.isSpreadAssignment(node) && ts.isObjectLiteralExpression(node.expression)) {
+    // recurse to parse a nested ObjectLiteralExpression
+    return parseObjectToStaticValue(node.expression, context);
+  }
+
+  // { name: value }
+  if (ts.isPropertyAssignment(node)) {
+    const key = ts.isIdentifier(node.name)
+      ? node.name.text
+      : parseNodeToStaticValue(node.name, context);
+    if (key) {
+      if (ts.isObjectLiteralExpression(node.initializer)) {
+        // nested
+        styleObj[key] = parseObjectToStaticValue(node.initializer, context);
+      } else {
+        styleObj[key] = parseNodeToStaticValue(node.initializer, context);
+      }
+
+      return styleObj;
+    }
+  }
+
+  // { name: value } (types)
+  if (ts.isPropertySignature(node)) {
+    const key = ts.isIdentifier(node.name)
+      ? node.name.text
+      : parseNodeToStaticValue(node.name, context).toString();
+    if (key) {
+      if (key.includes('&') || key.startsWith(':')) {
+        // nested
+        styleObj[key] = parseObjectToStaticValue(node.type!, context);
+      } else {
+        styleObj[key] = parseNodeToStaticValue(node.type!, context).toString() || '';
+      }
+
+      return styleObj;
+    }
+  }
+
+  // { name }
+  if (ts.isShorthandPropertyAssignment(node)) {
+    const key = node.name.text;
+
+    styleObj[key] = parseNodeToStaticValue(node.name, context).toString() || '';
+
+    return styleObj;
+  }
+
+  // { ...value }
+  if (ts.isSpreadAssignment(node)) {
+    // Spread assignments are a bit complicated to use the AST to figure out, so we'll ask the
+    // TypeScript type checker.
+    const type = context.checker.getTypeAtLocation(node.expression);
+    return parseStyleObjFromType(type, context);
+  }
+
+  return styleObj;
+}
+
+/**
+ * If we're here, we have a `ts.Type` that represents a style object. We try to parse a style object
+ * from the AST, but we might have something that is more complicated like a function call or an
+ * identifier that represents an object. It could be imported from another file.
+ */
+export function parseStyleObjFromType(type: ts.Type, context: TransformerContext) {
+  const styleObj: Record<string, any> = {};
+
+  // Gets all the properties of the type object
+  return type.getProperties().reduce((result, property) => {
+    const declaration = property.valueDeclaration;
+
+    if (!declaration) {
+      return result;
+    }
+
+    // we might have generics, so we'll use the type of the symbol instead of the type at the
+    // declaration. This resolves generics like `T` into literal values if they exist.
+    const propType = context.checker.getTypeOfSymbolAtLocation(property, declaration);
+
+    if (propType.isStringLiteral()) {
+      // This isn't a component variable, it is a static CSS variable
+      result[property.name] = propType.value;
+      return result;
+    }
+
+    if (propType.isNumberLiteral()) {
+      result[property.name] = propType.value;
+      return result;
+    }
+
+    return {
+      ...result,
+      ...parsePropertyToStaticValue(declaration, context),
+    };
+  }, styleObj);
+}
+
+/**
+ * Wrap all unwrapped CSS Variables. For example, `{padding: '--foo'}` will be replaced with
+ * `{padding: 'var(--foo)'}`. It also works on variables in the middle of the property.
+ */
+export function maybeWrapCSSVariables(
+  input: string | number,
+  names: Record<string, string>
+): string | number {
+  if (typeof input === 'number') {
+    return input;
+  }
+  // matches an string starting with `--` that isn't already wrapped in a `var()`. It tries to match
+  // any character that isn't a valid separator in CSS
+  return input.replace(
+    /([a-z]*[ (]*)(--[^\s;,'})]+)(\){0,1})/gi,
+    (match: string, prefix: string, variable: string, postfix: string) => {
+      // shortcut for var() wrappers that already have a fallback
+      if (prefix.startsWith('var(') && postfix !== ')') {
+        return match;
+      }
+
+      // find a possible fallback
+      const fallbackVariable = getFallbackVariable(variable, names);
+      const fallback = fallbackVariable
+        ? `, ${maybeWrapCSSVariables(fallbackVariable, names)}`
+        : '';
+
+      // if this a var wrapper without a fallback
+      if (prefix.startsWith('var(') && postfix === ')') {
+        return `${prefix}${variable}${fallback}${postfix}`;
+      }
+      // if this is not a var wrapper at all
+      return `${prefix}var(${variable}${fallback})${postfix}`;
+    }
+  );
+}

package/lib/utils/stylisFns.ts

@@ -0,0 +1,56 @@
+/* eslint-disable no-param-reassign */
+/* eslint-disable no-fallthrough */
+/* eslint-disable default-case */
+import {
+  COMMENT,
+  DECLARATION,
+  IMPORT,
+  KEYFRAMES,
+  LAYER,
+  Middleware,
+  RULESET,
+  serialize,
+  Element,
+} from 'stylis';
+
+function strlen(input: string): number {
+  return input.length;
+}
+
+export const prettyStringify: Middleware = (element, index, children, callback) => {
+  switch (element.type) {
+    case LAYER:
+      if (element.children.length) {
+        break;
+      }
+    case IMPORT:
+    case DECLARATION:
+      return (element.return =
+        element.return ||
+        '  ' + element.value.replace(':', ': ') + (index === children.length - 1 ? '' : '\n'));
+    case COMMENT:
+      return `${element.value}\n`;
+    case KEYFRAMES:
+      return (
+        (element.return =
+          element.value +
+          ' {\n' +
+          serialize(element.children as Element[], callback)
+            .split('\n')
+            .map(i => `  ${i}`)
+            .join('\n') +
+          '}').replace(/\s\s\}$/, '}') + '\n'
+      );
+    case RULESET:
+      if (!strlen((element.value = (element.props as string[]).join(', ')))) {
+        return '';
+      }
+  }
+
+  const childStr = serialize(element.children as Element[], callback);
+  if (childStr) {
+    element.return = `${element.value} {\n${childStr}\n}\n\n`;
+    return element.return;
+  }
+  return '';
+};