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

package/lib/utils/handleCreateStencil.ts

@@ -0,0 +1,442 @@
+import ts from 'typescript';
+
+import {slugify} from '@workday/canvas-kit-styling';
+
+import {getVarName} from './getVarName';
+import {maybeWrapCSSVariables, parseObjectToStaticValue} from './parseObjectToStaticValue';
+import {createStyleObjectNode, serializeStyles} from './createStyleObjectNode';
+import {getValueFromAliasedSymbol, parseNodeToStaticValue} from './parseNodeToStaticValue';
+import {NestedStyleObject, NodeTransformer, TransformerContext} from './types';
+import {isImportedFromStyling} from './isImportedFromStyling';
+import {getHash} from './getHash';
+
+/**
+ * Handle all arguments of the CallExpression `createStencil()`
+ */
+export const handleCreateStencil: NodeTransformer = (node, context) => {
+  const {checker, names, extractedNames} = context;
+  /**
+   * This will match whenever a `createStencil()` call expression is encountered. It will loop
+   * over all the config to extract variables and styles.
+   *
+   */
+  if (
+    ts.isCallExpression(node) &&
+    ts.isIdentifier(node.expression) &&
+    node.expression.text === 'createStencil' &&
+    isImportedFromStyling(node.expression, checker)
+  ) {
+    const config = node.arguments[0];
+
+    // We need to keep track of stencil variables and values to automatically merge into the base
+    // styles
+    const stencilVariables: Record<string, string> = {};
+
+    // Stencil name is the variable name
+    const stencilName = getVarName(node.expression);
+    const stencilHash = getHash(node, context);
+
+    if (ts.isObjectLiteralExpression(config)) {
+      config.properties.forEach(property => {
+        if (
+          ts.isPropertyAssignment(property) &&
+          property.name &&
+          ts.isIdentifier(property.name) &&
+          property.name.text === 'extends' &&
+          ts.isIdentifier(property.initializer)
+        ) {
+          const className = getClassName(property.initializer.text, context);
+          const extendsStencilName = property.initializer.text;
+
+          if (
+            !Object.values(context.styles).some(fileStyles => {
+              return fileStyles.some(rule => rule.includes(`.${className}`));
+            })
+          ) {
+            // Process the extended stencil since those styles haven't been processed yet
+            getValueFromAliasedSymbol(property.initializer, '', context);
+          }
+
+          // attach all variables from extends stencil
+          Object.keys(names).forEach(key => {
+            if (key.startsWith(`${extendsStencilName}.`)) {
+              // We want to copy a new entry into variables that is the extended stencil with the same variable name as the base variable name
+              names[key.replace(extendsStencilName, stencilName)] = names[key];
+            }
+          });
+        }
+      });
+
+      // get variables first
+      const varsConfig = config.properties.find(property => {
+        return (
+          property.name &&
+          ts.isIdentifier(property.name) &&
+          property.name.text === 'vars' &&
+          ts.isPropertyAssignment(property)
+        );
+      }) as ts.PropertyAssignment | undefined;
+
+      function extractNames(node: ts.Node): any {
+        if (ts.isPropertyAssignment(node) && ts.isIdentifier(node.name)) {
+          if (ts.isObjectLiteralExpression(node.initializer)) {
+            return node.initializer.properties.map(extractNames);
+          }
+
+          const varName = getVarName(node.name);
+          const varValue = `--${getClassName(varName, context)}`;
+          names[varName] = `--${node.name.text}-${slugify(stencilName).replace(
+            '-stencil',
+            ''
+          )}-${stencilHash}`;
+
+          names[node.name.text] = names[varName];
+          extractedNames[names[varName]] = varValue;
+
+          // Evaluate the variable defaults
+          const value = parseNodeToStaticValue(node.initializer, context).toString();
+          if (value) {
+            // Only add the stencil variable if there's a value. An empty string means no default.
+            stencilVariables[names[varName]] = String(maybeWrapCSSVariables(value, names));
+          }
+        }
+      }
+
+      if (varsConfig && ts.isObjectLiteralExpression(varsConfig.initializer)) {
+        varsConfig.initializer.properties.forEach(variable => {
+          extractNames(variable);
+        });
+      }
+
+      const configProperties = config.properties.map((property, index, properties) => {
+        if (property.name && ts.isIdentifier(property.name)) {
+          // base config object
+          if (property.name.text === 'base') {
+            const styleObj = parseStyleBlock(property, context, stencilName);
+
+            if (styleObj) {
+              const initializer = createStyleReplacementNode(
+                property,
+                {
+                  ...stencilVariables,
+                  boxSizing: 'border-box',
+                  ...styleObj,
+                },
+                getClassName(getVarName(property.name), context),
+                context
+              );
+
+              return updateStyleProperty(property, initializer);
+            }
+          }
+
+          // modifiers config object
+          if (
+            property.name.text === 'modifiers' &&
+            ts.isPropertyAssignment(property) &&
+            ts.isObjectLiteralExpression(property.initializer)
+          ) {
+            // modifier key
+            return ts.factory.updatePropertyAssignment(
+              property,
+              property.name,
+              ts.factory.updateObjectLiteralExpression(
+                property.initializer,
+                property.initializer.properties.map(modifierProperty => {
+                  if (
+                    ts.isPropertyAssignment(modifierProperty) &&
+                    modifierProperty.name &&
+                    ts.isIdentifier(modifierProperty.name) &&
+                    ts.isObjectLiteralExpression(modifierProperty.initializer)
+                  ) {
+                    // modifier value
+                    return ts.factory.updatePropertyAssignment(
+                      modifierProperty,
+                      modifierProperty.name,
+                      ts.factory.updateObjectLiteralExpression(
+                        modifierProperty.initializer,
+                        modifierProperty.initializer.properties.map(modifier => {
+                          const styleObj = parseStyleBlock(
+                            modifier,
+                            context,
+                            getClassName(stencilName, context)
+                          );
+
+                          if (styleObj && modifier.name) {
+                            const stencilClassName = getClassName(stencilName, context);
+                            const fullModifierName = getClassName(
+                              getVarName(modifier.name),
+                              context
+                            );
+                            const className = `${stencilClassName}.${fullModifierName.replace(
+                              `${stencilClassName}--`,
+                              ''
+                            )}`;
+                            const initializer = createStyleReplacementNode(
+                              modifier,
+                              styleObj,
+                              className,
+                              context
+                            );
+                            return updateStyleProperty(modifier, initializer);
+                          }
+
+                          return modifier;
+                        })
+                      )
+                    );
+                  }
+
+                  return property;
+                })
+              )
+            );
+          }
+
+          // compound config array
+          /**
+           * Compound config array. It looks like:
+           *
+           * ```ts
+           * compound: [
+           *   {
+           *     modifiers: { size: 'large', iconPosition: 'start' },
+           *     styles: { padding: 20 }
+           *   }
+           * ]
+           * ```
+           */
+          if (
+            property.name.text === 'compound' &&
+            ts.isPropertyAssignment(property) &&
+            ts.isArrayLiteralExpression(property.initializer)
+          ) {
+            return ts.factory.updatePropertyAssignment(
+              property,
+              property.name,
+              ts.factory.updateArrayLiteralExpression(
+                property.initializer,
+                property.initializer.elements.map(element => {
+                  if (ts.isObjectLiteralExpression(element)) {
+                    const selectors: string[] = [];
+
+                    selectors.push(`.${getClassName(stencilName, context)}`);
+
+                    return ts.factory.updateObjectLiteralExpression(
+                      element,
+                      element.properties.map((compoundProperty, index, compoundProperties) => {
+                        /**
+                         * If the property is `modifiers`, we want to extract selectors from it. For
+                         * example,
+                         *
+                         * ```ts
+                         * const button = createStencil({
+                         *   // other config
+                         *   compound: {
+                         *     modifiers: { size: 'large', inverse: true },
+                         *     styles: {}
+                         *   }
+                         * })
+                         * ```
+                         *
+                         * After this, `selectors` should contain ['.button--size-large',
+                         * '.button--inverse']
+                         */
+                        if (
+                          compoundProperty.name &&
+                          ts.isIdentifier(compoundProperty.name) &&
+                          compoundProperty.name.text === 'modifiers' &&
+                          ts.isPropertyAssignment(compoundProperty) &&
+                          ts.isObjectLiteralExpression(compoundProperty.initializer)
+                        ) {
+                          compoundProperty.initializer.properties.forEach(modifier => {
+                            if (ts.isPropertyAssignment(modifier)) {
+                              let className = '';
+                              if (ts.isIdentifier(modifier.name)) {
+                                className = slugify(modifier.name.text);
+                              }
+
+                              // The initializer should either be the `true` keyword or a string
+                              // literal. We don't add `-true` to the name.
+                              if (ts.isStringLiteral(modifier.initializer)) {
+                                className += `-${modifier.initializer.text}`;
+                              }
+
+                              selectors.push(className);
+                            }
+                          });
+                          return compoundProperty;
+                        }
+
+                        // styles key
+                        if (
+                          compoundProperty.name &&
+                          ts.isIdentifier(compoundProperty.name) &&
+                          compoundProperty.name.text === 'styles'
+                        ) {
+                          const styleObj = parseStyleBlock(compoundProperty, context, stencilName);
+
+                          if (styleObj) {
+                            // We need to inject compound style selectors into a file. We'll compound the
+                            // selectors with multiple class names. This will increase specificity of compound
+                            // selectors. This will be harder to override and we don't increase specificity in
+                            // the runtime implementation, but runtime creates an extra CSS class name that
+                            // isn't known to anyone. It seems unreasonable to expect CSS users to remember to
+                            // add compound modifier class names. We'll make it so it is easier to author
+                            // components in CSS and let them sort the specificity issues.
+                            const serialized = serializeStyles(
+                              compoundProperty,
+                              styleObj,
+                              `${selectors.join('.')}{%s}`,
+                              context
+                            );
+
+                            const initializer = createStyleObjectNode(
+                              serialized.styles,
+                              serialized.name
+                            );
+
+                            return updateStyleProperty(compoundProperty, initializer);
+                          }
+                        }
+
+                        return compoundProperty;
+                      })
+                    );
+                  }
+
+                  return element;
+                })
+              )
+            );
+          }
+        }
+
+        return property;
+      });
+
+      return ts.factory.updateCallExpression(node, node.expression, undefined, [
+        ts.factory.updateObjectLiteralExpression(config, configProperties),
+        ts.factory.createStringLiteral(
+          `${slugify(stencilName).replace('-stencil', '')}-${stencilHash}`
+        ),
+      ]);
+    }
+  }
+
+  return;
+};
+
+/**
+ * A style block is a `base`, `modifier`, or `compoundModifier` style block. It could be an ObjectLiteralExpression,
+ * an ArrowFunction, MethodDeclaration, etc.
+ */
+function parseStyleBlock(
+  property: ts.ObjectLiteralElementLike,
+  context: TransformerContext,
+  stencilName: string
+): NestedStyleObject | undefined {
+  let styleObj: NestedStyleObject | undefined;
+  if (ts.isPropertyAssignment(property)) {
+    if (ts.isObjectLiteralExpression(property.initializer)) {
+      styleObj = parseObjectToStaticValue(property.initializer, {
+        ...context,
+        nameScope: `${stencilName}.vars.`,
+      });
+    }
+
+    if (isFunctionLikeDeclaration(property.initializer)) {
+      const returnNode = getReturnStatement(property.initializer);
+      if (returnNode) {
+        styleObj = parseObjectToStaticValue(returnNode, {
+          ...context,
+          nameScope: `${stencilName}.vars.`,
+        });
+      }
+    }
+  }
+
+  if (isFunctionLikeDeclaration(property)) {
+    const returnNode = getReturnStatement(property);
+    if (returnNode) {
+      styleObj = parseObjectToStaticValue(returnNode, {
+        ...context,
+        nameScope: `${stencilName}.vars.`,
+      });
+    }
+  }
+
+  return styleObj;
+}
+
+function getReturnStatement(node: ts.FunctionLikeDeclaration): ts.Node | undefined {
+  if (node.body && ts.isParenthesizedExpression(node.body)) {
+    return node.body.expression;
+  }
+
+  if (node.body && ts.isBlock(node.body)) {
+    let returnNode: ts.Node | undefined;
+
+    // look for the return statement. It must be a top-level statement in the block
+    node.body.statements.forEach(statement => {
+      // () => { return {} }
+      if (ts.isReturnStatement(statement)) {
+        returnNode = statement.expression;
+      }
+    });
+
+    return returnNode;
+  }
+
+  return undefined;
+}
+
+function isFunctionLikeDeclaration(node: ts.Node): node is ts.FunctionLikeDeclaration {
+  return (node as Object).hasOwnProperty('body');
+}
+
+function createStyleReplacementNode(
+  node: ts.Node,
+  styleObj: NestedStyleObject,
+  className: string,
+  context: TransformerContext
+) {
+  const {names, extractedNames} = context;
+  const serialized = serializeStyles(node, styleObj, `.${className}{%s}`, context);
+
+  const varName = getVarName(node);
+  const value = `css-${serialized.name}`;
+  names[varName] = value;
+  extractedNames[value] = getClassName(varName, context);
+
+  return createStyleObjectNode(serialized.styles, serialized.name);
+}
+
+export function getClassName(name: string, {prefix}: TransformerContext): string {
+  return (
+    `${prefix}-` +
+    slugify(name)
+      .replace('-vars', '')
+      .replace('-stencil', '')
+      .replace('-base', '')
+      .replace('-modifiers', '-')
+      .replace('-true', '')
+      .replace('-compound', '')
+  );
+}
+
+/**
+ * If the property is a `PropertyAssignment`, use the TypeScript factory updater to maximize
+ * sourcemap use. Otherwise, return a new property assignment. For example, a Stencil could be using
+ * a `MethodDeclaration` which means we return a different node type: `base({color}) {}`
+ */
+function updateStyleProperty(
+  property: ts.ObjectLiteralElementLike,
+  initializer: ts.Expression
+): ts.PropertyAssignment {
+  if (ts.isPropertyAssignment(property)) {
+    return ts.factory.updatePropertyAssignment(property, property.name, initializer);
+  }
+
+  return ts.factory.createPropertyAssignment(property.name!, initializer);
+}

package/lib/utils/handleCreateStyles.ts

@@ -0,0 +1,97 @@
+import ts from 'typescript';
+
+import {parseObjectToStaticValue, parseStyleObjFromType} from './parseObjectToStaticValue';
+import {createStyleObjectNode, serializeStyles} from './createStyleObjectNode';
+import {NestedStyleObject, NodeTransformer, TransformerContext} from './types';
+import {isImportedFromStyling} from './isImportedFromStyling';
+import {getVarName} from './getVarName';
+import {slugify} from '@workday/canvas-kit-styling';
+
+export const handleCreateStyles: NodeTransformer = (node, context) => {
+  const {checker, prefix} = context;
+  /**
+   * Check if the node is a call expression that looks like:
+   *
+   * ```ts
+   * createStyles({
+   *   // properties
+   * })
+   * ```
+   *
+   * It will also make sure the `createStyles` function was imported from
+   * `@workday/canvas-kit-styling` to ensure we don't rewrite the AST of code we don't own.
+   *
+   * This transformation will pre-serialize the style objects and turn them into strings for
+   * faster runtime processing in Emotion. The following is an example of the transformation.
+   *
+   * ```ts
+   * // before transformation
+   * const myStyles = createStyles({
+   *   fontSize: '1rem'
+   * })
+   *
+   * // after transformation
+   * const myStyles = createStyles({
+   *   name: 'abc123',
+   *   styles: 'font-size: 1rem;'
+   * })
+   * ```
+   *
+   * The after transformation already serialized the styles and goes through a shortcut process
+   * in `@emotion/css` where only the Emotion cache is checked and styles are inserted if the
+   * cache key wasn't found.
+   */
+  if (
+    ts.isCallExpression(node) &&
+    ts.isIdentifier(node.expression) &&
+    node.expression.text === 'createStyles' &&
+    isImportedFromStyling(node.expression, checker) &&
+    node.arguments.length > 0
+  ) {
+    const cssClassName = `${prefix}-${slugify(getVarName(node.expression))
+      .replace('-styles', '')
+      .replace('-modifiers', '-')
+      .replace('-true', '')}`;
+
+    const newArguments = [...node.arguments].map(arg => {
+      // An `ObjectLiteralExpression` is an object like `{foo:'bar'}`:
+      // https://ts-ast-viewer.com/#code/MYewdgzgLgBFCmBbADjAvDA3gKBjAZiCAFwwDkARgIYBOZ2AvkA
+      if (ts.isObjectLiteralExpression(arg)) {
+        const styleObj = parseObjectToStaticValue(arg, context);
+        return createStyleReplacementNode(node, styleObj, cssClassName, context);
+      }
+      // An Identifier is a variable. It could come from anywhere - imports, earlier
+      // assignments, etc. The easiest thing to do is to ask the TypeScript type checker what
+      // the type representation is and go from there.
+      if (ts.isIdentifier(arg)) {
+        const type = checker.getTypeAtLocation(arg);
+
+        // `createStyles` accepts strings as class names. If the class name is
+        if (type.isStringLiteral() || type.getFlags() & ts.TypeFlags.String) {
+          return arg;
+        }
+
+        // The type must be a object
+        const styleObj = parseStyleObjFromType(type, context);
+
+        return createStyleReplacementNode(node, styleObj, cssClassName, context);
+      }
+      return arg;
+    });
+
+    return ts.factory.updateCallExpression(node, node.expression, [], newArguments);
+  }
+
+  return;
+};
+
+function createStyleReplacementNode(
+  node: ts.Node,
+  styleObj: NestedStyleObject,
+  className: string,
+  context: TransformerContext
+) {
+  const serialized = serializeStyles(node, styleObj, `.${className}{%s}`, context);
+
+  return createStyleObjectNode(serialized.styles, serialized.name);
+}

package/lib/utils/handleCreateVars.ts

@@ -0,0 +1,90 @@
+import ts from 'typescript';
+
+import {slugify} from '@workday/canvas-kit-styling';
+
+import {getVarName} from './getVarName';
+import {NodeTransformer, TransformerContext} from './types';
+import {getHash} from './getHash';
+
+export const handleCreateVars: NodeTransformer = (node, context) => {
+  /**
+   * This will create a variable
+   */
+  if (
+    ts.isCallExpression(node) &&
+    ts.isIdentifier(node.expression) &&
+    node.expression.text === 'createVars'
+  ) {
+    const {id, vars} = addNames(node, context);
+
+    return ts.factory.updateCallExpression(
+      node,
+      node.expression,
+      [],
+      [
+        ts.factory.createObjectLiteralExpression(
+          [
+            ts.factory.createPropertyAssignment(
+              ts.factory.createIdentifier('id'),
+              ts.factory.createStringLiteral(id)
+            ),
+            ts.factory.createPropertyAssignment(
+              ts.factory.createIdentifier('args'),
+              ts.factory.createArrayLiteralExpression(
+                vars.map(val => ts.factory.createStringLiteral(val)),
+                false
+              )
+            ),
+          ],
+          false
+        ),
+      ]
+    );
+  }
+
+  /**
+   * Check to see if this node is an ObjectLiteralExpression with properties with `createVars`
+   * values.
+   *
+   * ```ts
+   * const foo = {
+   *   bar: createVars('color')
+   * }
+   * ```
+   *
+   * This happens when names are imported from other files. We don't need to transform this, but
+   * we'll need to add names for property parsing.
+   */
+  if (ts.isObjectLiteralExpression(node)) {
+    node.properties.forEach(property => {
+      if (
+        ts.isPropertyAssignment(property) &&
+        ts.isCallExpression(property.initializer) &&
+        ts.isIdentifier(property.initializer.expression) &&
+        property.initializer.expression.text === 'createVars'
+      ) {
+        addNames(property.initializer, context);
+      }
+    });
+  }
+
+  return;
+};
+
+function addNames(node: ts.CallExpression, context: TransformerContext) {
+  const {prefix, names, extractedNames} = context;
+  const hash = getHash(node, context);
+
+  const varNamePrefix = getVarName(node);
+  const vars = node.arguments
+    .map(arg => ts.isStringLiteral(arg) && arg.text)
+    .filter(Boolean) as string[];
+
+  vars.forEach(v => {
+    const varName = `${varNamePrefix}.${v}`;
+    names[varName] = `--${v}-${hash}`;
+    extractedNames[names[varName]] = `--${prefix}-${slugify(varName).replace('-vars', '')}`;
+  });
+
+  return {id: hash, vars};
+}

package/lib/utils/handleCssVar.ts

@@ -0,0 +1,19 @@
+import ts from 'typescript';
+
+import {cssVar} from '@workday/canvas-kit-styling';
+import {createPropertyTransform} from '../createPropertyTransform';
+import {parseNodeToStaticValue} from './parseNodeToStaticValue';
+
+export const handleCssVar = createPropertyTransform((node, context) => {
+  if (
+    ts.isCallExpression(node) &&
+    ts.isIdentifier(node.expression) &&
+    node.expression.text === 'cssVar'
+  ) {
+    const args = node.arguments.map(arg => parseNodeToStaticValue(arg, context));
+
+    return cssVar(args[0] as string, (args[1] as string) || context.names[args[0]]);
+  }
+
+  return;
+});

package/lib/utils/handleInjectGlobal.ts

@@ -0,0 +1,51 @@
+import ts from 'typescript';
+
+import {isImportedFromStyling} from './isImportedFromStyling';
+import {parseObjectToStaticValue} from './parseObjectToStaticValue';
+import {createStyleObjectNode, serializeStyles} from './createStyleObjectNode';
+import {NestedStyleObject, NodeTransformer, TransformerContext} from './types';
+import {parseNodeToStaticValue} from './parseNodeToStaticValue';
+
+export const handleInjectGlobal: NodeTransformer = (node, context) => {
+  const {checker} = context;
+
+  if (
+    ts.isTaggedTemplateExpression(node) &&
+    ts.isIdentifier(node.tag) &&
+    node.tag.text === 'injectGlobal' &&
+    isImportedFromStyling(node.tag, checker)
+  ) {
+    const styleObj = parseNodeToStaticValue(node.template, context).toString();
+
+    return ts.factory.createCallExpression(node.tag, undefined, [
+      createStyleReplacementNode(node, styleObj, context),
+    ]);
+  }
+
+  if (
+    ts.isCallExpression(node) &&
+    ts.isIdentifier(node.expression) &&
+    node.expression.text === 'injectGlobal' &&
+    isImportedFromStyling(node.expression, checker)
+  ) {
+    if (ts.isObjectLiteralExpression(node.arguments[0])) {
+      const styleObj = parseObjectToStaticValue(node.arguments[0], context);
+
+      return ts.factory.updateCallExpression(node, node.expression, undefined, [
+        createStyleReplacementNode(node, styleObj, context),
+      ]);
+    }
+  }
+
+  return;
+};
+
+function createStyleReplacementNode(
+  node: ts.Node,
+  styleObj: NestedStyleObject | string,
+  context: TransformerContext
+) {
+  const serialized = serializeStyles(node, styleObj, '%s', context);
+
+  return createStyleObjectNode(serialized.styles, serialized.name);
+}