@workday/canvas-kit-styling-transform 10.3.0-649-next.0 → 10.3.0-655-next.0

package/dist/commonjs/lib/styleTransform.d.ts

@@ -1,11 +1,12 @@
 import ts from 'typescript';
-import { NodeTransformer } from './utils/types';
+import { NodeTransformer, TransformerContext } from './utils/types';
 export declare type NestedStyleObject = {
     [key: string]: string | NestedStyleObject;
 };
 export interface StyleTransformerOptions {
     prefix: string;
-    variables: Record<string, string>;
+    variables: TransformerContext['variables'];
+    keyframes: TransformerContext['keyframes'];
     fallbackFiles?: string[];
     transformers?: NodeTransformer[];
 }
@@ -13,10 +14,10 @@ export interface StyleTransformerOptions {
  * The reset is used in tests and should not be called normally.
  */
 export declare function _reset(): void;
-export default function styleTransformer(program: ts.Program, { prefix, variables, fallbackFiles, transformers, }?: Partial<StyleTransformerOptions>): ts.TransformerFactory<ts.SourceFile>;
+export default function styleTransformer(program: ts.Program, { variables, fallbackFiles, transformers, ...transformContext }?: Partial<StyleTransformerOptions>): ts.TransformerFactory<ts.SourceFile>;
 /**
  * This function is useful for tests or a custom build. The `styleTransformer` function is used by
  * the https://www.npmjs.com/package/ttypescript package.
  */
-export declare function transform(program: ts.Program, fileName: string, options?: Partial<StyleTransformerOptions>, transformers?: NodeTransformer[]): string;
+export declare function transform(program: ts.Program, fileName: string, options?: Partial<StyleTransformerOptions>): string;
 //# sourceMappingURL=styleTransform.d.ts.map

package/dist/commonjs/lib/styleTransform.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"styleTransform.d.ts","sourceRoot":"","sources":["../../../lib/styleTransform.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,MAAM,YAAY,CAAC;AAW5B,OAAO,EAAC,eAAe,EAAC,MAAM,eAAe,CAAC;AAE9C,oBAAY,iBAAiB,GAAG;IAAC,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,GAAG,iBAAiB,CAAA;CAAC,CAAC;AAE5E,MAAM,WAAW,uBAAuB;IACtC,MAAM,EAAE,MAAM,CAAC;IACf,SAAS,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAClC,aAAa,CAAC,EAAE,MAAM,EAAE,CAAC;IACzB,YAAY,CAAC,EAAE,eAAe,EAAE,CAAC;CAClC;AAKD;;GAEG;AACH,wBAAgB,MAAM,SAGrB;AAeD,MAAM,CAAC,OAAO,UAAU,gBAAgB,CACtC,OAAO,EAAE,EAAE,CAAC,OAAO,EACnB,EACE,MAAc,EACd,SAAc,EACd,aAAkB,EAClB,YAAkC,GACnC,GAAE,OAAO,CAAC,uBAAuB,CAIjC,GACA,EAAE,CAAC,kBAAkB,CAAC,EAAE,CAAC,UAAU,CAAC,CAgCtC;AAED;;;GAGG;AACH,wBAAgB,SAAS,CACvB,OAAO,EAAE,EAAE,CAAC,OAAO,EACnB,QAAQ,EAAE,MAAM,EAChB,OAAO,CAAC,EAAE,OAAO,CAAC,uBAAuB,CAAC,EAC1C,YAAY,CAAC,EAAE,eAAe,EAAE,UAYjC"}
+{"version":3,"file":"styleTransform.d.ts","sourceRoot":"","sources":["../../../lib/styleTransform.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,MAAM,YAAY,CAAC;AAW5B,OAAO,EAAC,eAAe,EAAE,kBAAkB,EAAC,MAAM,eAAe,CAAC;AAGlE,oBAAY,iBAAiB,GAAG;IAAC,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,GAAG,iBAAiB,CAAA;CAAC,CAAC;AAE5E,MAAM,WAAW,uBAAuB;IACtC,MAAM,EAAE,MAAM,CAAC;IACf,SAAS,EAAE,kBAAkB,CAAC,WAAW,CAAC,CAAC;IAC3C,SAAS,EAAE,kBAAkB,CAAC,WAAW,CAAC,CAAC;IAC3C,aAAa,CAAC,EAAE,MAAM,EAAE,CAAC;IACzB,YAAY,CAAC,EAAE,eAAe,EAAE,CAAC;CAClC;AAMD;;GAEG;AACH,wBAAgB,MAAM,SAIrB;AAgBD,MAAM,CAAC,OAAO,UAAU,gBAAgB,CACtC,OAAO,EAAE,EAAE,CAAC,OAAO,EACnB,EACE,SAAc,EACd,aAAkB,EAClB,YAAkC,EAClC,GAAG,gBAAgB,EACpB,GAAE,OAAO,CAAC,uBAAuB,CAKjC,GACA,EAAE,CAAC,kBAAkB,CAAC,EAAE,CAAC,UAAU,CAAC,CAsCtC;AAED;;;GAGG;AACH,wBAAgB,SAAS,CACvB,OAAO,EAAE,EAAE,CAAC,OAAO,EACnB,QAAQ,EAAE,MAAM,EAChB,OAAO,CAAC,EAAE,OAAO,CAAC,uBAAuB,CAAC,UAY3C"}

package/dist/commonjs/lib/styleTransform.js

@@ -15,13 +15,16 @@ const handleCalc_1 = require("./utils/handleCalc");
 const handlePx2Rem_1 = require("./utils/handlePx2Rem");
 const handleFocusRing_1 = require("./utils/handleFocusRing");
 const handleCssVar_1 = require("./utils/handleCssVar");
+const handleKeyframes_1 = require("./utils/handleKeyframes");
 let vars = {};
+let keyframes = {};
 let loadedFallbacks = false;
 /**
  * The reset is used in tests and should not be called normally.
  */
 function _reset() {
     vars = {};
+    keyframes = {};
     loadedFallbacks = false;
 }
 exports._reset = _reset;
@@ -33,13 +36,15 @@ const defaultTransformers = [
     handleFocusRing_1.handleFocusRing,
     handleCalc_1.handleCalc,
     handlePx2Rem_1.handlePx2Rem,
+    handleKeyframes_1.handleKeyframes,
     handleCreateVars_1.handleCreateVars,
     handleCreateStyles_1.handleCreateStyles,
     handleCreateStencil_1.handleCreateStencil,
 ];
-function styleTransformer(program, { prefix = 'css', variables = {}, fallbackFiles = [], transformers = defaultTransformers, } = {
+function styleTransformer(program, { variables = {}, fallbackFiles = [], transformers = defaultTransformers, ...transformContext } = {
     prefix: 'css',
     variables: {},
+    keyframes: {},
     transformers: defaultTransformers,
 }) {
     if (!loadedFallbacks) {
@@ -64,7 +69,13 @@ function styleTransformer(program, { prefix = 'css', variables = {}, fallbackFil
         const visit = node => {
             // eslint-disable-next-line no-param-reassign
             node = typescript_1.default.visitEachChild(node, visit, context);
-            return handleTransformers(node, checker, prefix, vars)(transformers);
+            return handleTransformers(node, {
+                checker,
+                prefix: 'css',
+                variables: vars,
+                keyframes,
+                ...transformContext,
+            })(transformers);
         };
         return node => typescript_1.default.visitNode(node, visit);
     };
@@ -74,19 +85,19 @@ exports.default = styleTransformer;
  * This function is useful for tests or a custom build. The `styleTransformer` function is used by
  * the https://www.npmjs.com/package/ttypescript package.
  */
-function transform(program, fileName, options, transformers) {
+function transform(program, fileName, options) {
     const source = program.getSourceFile(fileName) || typescript_1.default.createSourceFile(fileName, '', typescript_1.default.ScriptTarget.ES2019);
     const printer = typescript_1.default.createPrinter();
     return printer.printFile(typescript_1.default
-        .transform(source, [styleTransformer(program, { ...options, transformers })])
+        .transform(source, [styleTransformer(program, options)])
         .transformed.find(s => s.fileName === fileName) || source);
 }
 exports.transform = transform;
-const handleTransformers = (node, checker, prefix, variables) => (transformers) => {
+const handleTransformers = (node, context) => (transformers) => {
     return (transformers.reduce((result, transformer) => {
         if (result) {
             return result;
         }
-        return transformer(node, checker, prefix, variables);
+        return transformer(node, context);
     }, undefined) || node);
 };

package/dist/commonjs/lib/utils/createStyleObjectNode.d.ts

@@ -5,6 +5,14 @@ import { NestedStyleObject } from './parseObjectToStaticValue';
  * string, styles: serializedStyles}`. The `name` is hard-coded here to work with both server-side
  * and client-side style injection. This results in a stable style key for Emotion while also
  * optimizing style serialization.
+ *
+ * If `name` is provided, the name will be whatever `name` is, replacing "{hash}" with the hash
+ * created via `serializeStyles`. For example: 'animation-{hash}' will be converted into
+ * 'animation-abc123'
  */
-export declare function createStyleObjectNode(styleObj: NestedStyleObject): ts.ObjectLiteralExpression;
+export declare function createStyleObjectNode(styleObj: NestedStyleObject | string, name?: string): ts.ObjectLiteralExpression;
+/**
+ * Returns the name created by `createStyleObjectNode`
+ */
+export declare function getStaticCssClassName(node: ts.Node): string;
 //# sourceMappingURL=createStyleObjectNode.d.ts.map

package/dist/commonjs/lib/utils/createStyleObjectNode.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"createStyleObjectNode.d.ts","sourceRoot":"","sources":["../../../../lib/utils/createStyleObjectNode.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,YAAY,CAAC;AAK5B,OAAO,EAAC,iBAAiB,EAAC,MAAM,4BAA4B,CAAC;AAE7D;;;;;GAKG;AACH,wBAAgB,qBAAqB,CAAC,QAAQ,EAAE,iBAAiB,8BAqBhE"}
+{"version":3,"file":"createStyleObjectNode.d.ts","sourceRoot":"","sources":["../../../../lib/utils/createStyleObjectNode.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,YAAY,CAAC;AAK5B,OAAO,EAAC,iBAAiB,EAAC,MAAM,4BAA4B,CAAC;AAE7D;;;;;;;;;GASG;AACH,wBAAgB,qBAAqB,CAAC,QAAQ,EAAE,iBAAiB,GAAG,MAAM,EAAE,IAAI,CAAC,EAAE,MAAM,8BAuBxF;AAED;;GAEG;AACH,wBAAgB,qBAAqB,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,GAAG,MAAM,CAS3D"}

package/dist/commonjs/lib/utils/createStyleObjectNode.js

@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.createStyleObjectNode = void 0;
+exports.getStaticCssClassName = exports.createStyleObjectNode = void 0;
 const typescript_1 = __importDefault(require("typescript"));
 const serialize_1 = require("@emotion/serialize");
 const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
@@ -12,8 +12,12 @@ const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
  * string, styles: serializedStyles}`. The `name` is hard-coded here to work with both server-side
  * and client-side style injection. This results in a stable style key for Emotion while also
  * optimizing style serialization.
+ *
+ * If `name` is provided, the name will be whatever `name` is, replacing "{hash}" with the hash
+ * created via `serializeStyles`. For example: 'animation-{hash}' will be converted into
+ * 'animation-abc123'
  */
-function createStyleObjectNode(styleObj) {
+function createStyleObjectNode(styleObj, name) {
     const serialized = serialize_1.serializeStyles([styleObj]);
     const styleText = serialized.styles;
     const styleExpression = typescript_1.default.factory.createStringLiteral(styleText);
@@ -22,10 +26,22 @@ function createStyleObjectNode(styleObj) {
     return typescript_1.default.factory.createObjectLiteralExpression([
         typescript_1.default.factory.createPropertyAssignment(typescript_1.default.factory.createIdentifier('name'), 
         // TODO - we may need this to be a static variable for the CSS package
-        typescript_1.default.factory.createStringLiteral(canvas_kit_styling_1.generateUniqueId()) // We might be using values that are resolved at runtime, but should still be static. We're only supporting the `cs` function running once per file, so a stable id based on a hash is not necessary
+        typescript_1.default.factory.createStringLiteral(name ? name.replace('{hash}', serialized.name) : canvas_kit_styling_1.generateUniqueId()) // We might be using values that are resolved at runtime, but should still be static. We're only supporting the `cs` function running once per file, so a stable id based on a hash is not necessary
         ),
         typescript_1.default.factory.createPropertyAssignment(typescript_1.default.factory.createIdentifier('styles'), styleExpression // In the future we can extract CSS from here by running the `stylis` compiler directly. Emotion does this here: https://github.com/emotion-js/emotion/blob/f3b268f7c52103979402da919c9c0dd3f9e0e189/packages/cache/src/index.js#L188-L245
         ),
     ], false);
 }
 exports.createStyleObjectNode = createStyleObjectNode;
+/**
+ * Returns the name created by `createStyleObjectNode`
+ */
+function getStaticCssClassName(node) {
+    if (typescript_1.default.isObjectLiteralExpression(node) &&
+        typescript_1.default.isPropertyAssignment(node.properties[0]) &&
+        typescript_1.default.isStringLiteral(node.properties[0].initializer)) {
+        return node.properties[0].initializer.text;
+    }
+    return '';
+}
+exports.getStaticCssClassName = getStaticCssClassName;

package/dist/commonjs/lib/utils/handleCalc.js

@@ -22,13 +22,13 @@ const isImportedFromStyling_1 = require("./isImportedFromStyling");
  * etc. The transform can handle template string literals with different spans, so we'll convert to
  * those as an intermediate step.
  */
-const handleCalc = (node, checker) => {
+const handleCalc = (node, context) => {
     if (typescript_1.default.isCallExpression(node) &&
         typescript_1.default.isPropertyAccessExpression(node.expression) &&
         typescript_1.default.isIdentifier(node.expression.expression) &&
         node.expression.expression.text === 'calc' &&
         typescript_1.default.isIdentifier(node.expression.name) &&
-        isImportedFromStyling_1.isImportedFromStyling(node.expression.expression, checker)) {
+        isImportedFromStyling_1.isImportedFromStyling(node.expression.expression, context.checker)) {
         if (node.expression.name.text === 'add') {
             return replaceWithTemplateString(node.arguments[0], node.arguments[1], ' + ');
         }

package/dist/commonjs/lib/utils/handleCreateStencil.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"handleCreateStencil.d.ts","sourceRoot":"","sources":["../../../../lib/utils/handleCreateStencil.ts"],"names":[],"mappings":"AASA,OAAO,EAAC,eAAe,EAAC,MAAM,SAAS,CAAC;AAGxC;;GAEG;AACH,eAAO,MAAM,mBAAmB,EAAE,eA8LjC,CAAC"}
+{"version":3,"file":"handleCreateStencil.d.ts","sourceRoot":"","sources":["../../../../lib/utils/handleCreateStencil.ts"],"names":[],"mappings":"AASA,OAAO,EAAC,eAAe,EAAqB,MAAM,SAAS,CAAC;AAG5D;;GAEG;AACH,eAAO,MAAM,mBAAmB,EAAE,eAqLjC,CAAC"}

package/dist/commonjs/lib/utils/handleCreateStencil.js

@@ -15,7 +15,8 @@ const isImportedFromStyling_1 = require("./isImportedFromStyling");
 /**
  * Handle all arguments of the CallExpression `createStencil()`
  */
-const handleCreateStencil = (node, checker, prefix = 'css', variables = {}) => {
+const handleCreateStencil = (node, context) => {
+    const { checker, prefix, variables } = context;
     /**
      * This will match whenever a `createStencil()` call expression is encountered. It will loop
      * over all the config to extract variables and styles.
@@ -66,7 +67,7 @@ const handleCreateStencil = (node, checker, prefix = 'css', variables = {}) => {
                     variables[makeEmotionSafe_1.makeEmotionSafe(node.name.text)] = varValue;
                     tempVariables[makeEmotionSafe_1.makeEmotionSafe(node.name.text)] = varValue;
                     // Evaluate the variable defaults
-                    stencilVariables[varValue] = parseNodeToStaticValue_1.parseNodeToStaticValue(node.initializer, checker, prefix, variables);
+                    stencilVariables[varValue] = parseNodeToStaticValue_1.parseNodeToStaticValue(node.initializer, context);
                 }
             }
             if (varsConfig && typescript_1.default.isObjectLiteralExpression(varsConfig.initializer)) {
@@ -78,7 +79,7 @@ const handleCreateStencil = (node, checker, prefix = 'css', variables = {}) => {
                 if (property.name && typescript_1.default.isIdentifier(property.name)) {
                     // base config object
                     if (property.name.text === 'base') {
-                        const styleObj = parseStyleBlock(property, checker, prefix, variables);
+                        const styleObj = parseStyleBlock(property, context);
                         if (styleObj) {
                             // The `as any` are necessary because the properties are readonly, even though they
                             // can be changed in transformers.
@@ -101,7 +102,7 @@ const handleCreateStencil = (node, checker, prefix = 'css', variables = {}) => {
                                 typescript_1.default.isPropertyAssignment(modifierProperty) &&
                                 typescript_1.default.isObjectLiteralExpression(modifierProperty.initializer)) {
                                 modifierProperty.initializer.properties.forEach((modifier, index, modifiers) => {
-                                    const styleObj = parseStyleBlock(modifier, checker, prefix, variables);
+                                    const styleObj = parseStyleBlock(modifier, context);
                                     if (styleObj && modifier.name) {
                                         // The `as any` are necessary because the properties are readonly, even though they
                                         // can be changed in transformers.
@@ -125,7 +126,7 @@ const handleCreateStencil = (node, checker, prefix = 'css', variables = {}) => {
                                     if (compoundProperty.name &&
                                         typescript_1.default.isIdentifier(compoundProperty.name) &&
                                         compoundProperty.name.text === 'styles') {
-                                        const styleObj = parseStyleBlock(compoundProperty, checker, prefix, variables);
+                                        const styleObj = parseStyleBlock(compoundProperty, context);
                                         if (styleObj) {
                                             // The `as any` are necessary because the properties are readonly, even though they
                                             // can be changed in transformers.
@@ -159,23 +160,23 @@ exports.handleCreateStencil = handleCreateStencil;
  * A style block is a `base`, `modifier`, or `compoundModifier` style block. It could be an ObjectLiteralExpression,
  * an ArrowFunction, MethodDeclaration, etc.
  */
-function parseStyleBlock(property, checker, prefix, variables) {
+function parseStyleBlock(property, context) {
     let styleObj;
     if (typescript_1.default.isPropertyAssignment(property)) {
         if (typescript_1.default.isObjectLiteralExpression(property.initializer)) {
-            styleObj = parseObjectToStaticValue_1.parseObjectToStaticValue(property.initializer, checker, prefix, variables);
+            styleObj = parseObjectToStaticValue_1.parseObjectToStaticValue(property.initializer, context);
         }
         if (isFunctionLikeDeclaration(property.initializer)) {
             const returnNode = getReturnStatement(property.initializer);
             if (returnNode) {
-                styleObj = parseObjectToStaticValue_1.parseObjectToStaticValue(returnNode, checker, prefix, variables);
+                styleObj = parseObjectToStaticValue_1.parseObjectToStaticValue(returnNode, context);
             }
         }
     }
     if (isFunctionLikeDeclaration(property)) {
         const returnNode = getReturnStatement(property);
         if (returnNode) {
-            styleObj = parseObjectToStaticValue_1.parseObjectToStaticValue(returnNode, checker, prefix, variables);
+            styleObj = parseObjectToStaticValue_1.parseObjectToStaticValue(returnNode, context);
         }
     }
     return styleObj;

package/dist/commonjs/lib/utils/handleCreateStyles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"handleCreateStyles.d.ts","sourceRoot":"","sources":["../../../../lib/utils/handleCreateStyles.ts"],"names":[],"mappings":"AAIA,OAAO,EAAC,eAAe,EAAC,MAAM,SAAS,CAAC;AAGxC,eAAO,MAAM,kBAAkB,EAAE,eA2GhC,CAAC"}
+{"version":3,"file":"handleCreateStyles.d.ts","sourceRoot":"","sources":["../../../../lib/utils/handleCreateStyles.ts"],"names":[],"mappings":"AAIA,OAAO,EAAC,eAAe,EAAC,MAAM,SAAS,CAAC;AAGxC,eAAO,MAAM,kBAAkB,EAAE,eA4GhC,CAAC"}

package/dist/commonjs/lib/utils/handleCreateStyles.js

@@ -8,7 +8,8 @@ const typescript_1 = __importDefault(require("typescript"));
 const parseObjectToStaticValue_1 = require("./parseObjectToStaticValue");
 const createStyleObjectNode_1 = require("./createStyleObjectNode");
 const isImportedFromStyling_1 = require("./isImportedFromStyling");
-const handleCreateStyles = (node, checker, prefix, variables) => {
+const handleCreateStyles = (node, context) => {
+    const { checker } = context;
     /**
      * Check if the node is a call expression that looks like:
      *
@@ -50,7 +51,7 @@ const handleCreateStyles = (node, checker, prefix, variables) => {
             // An `ObjectLiteralExpression` is an object like `{foo:'bar'}`:
             // https://ts-ast-viewer.com/#code/MYewdgzgLgBFCmBbADjAvDA3gKBjAZiCAFwwDkARgIYBOZ2AvkA
             if (typescript_1.default.isObjectLiteralExpression(arg)) {
-                const styleObj = parseObjectToStaticValue_1.parseObjectToStaticValue(arg, checker, prefix, variables);
+                const styleObj = parseObjectToStaticValue_1.parseObjectToStaticValue(arg, context);
                 return createStyleObjectNode_1.createStyleObjectNode(styleObj);
             }
             // An Identifier is a variable. It could come from anywhere - imports, earlier
@@ -63,7 +64,7 @@ const handleCreateStyles = (node, checker, prefix, variables) => {
                     return arg;
                 }
                 // The type must be a object
-                const styleObj = parseObjectToStaticValue_1.parseStyleObjFromType(type, checker, prefix, variables);
+                const styleObj = parseObjectToStaticValue_1.parseStyleObjFromType(type, context);
                 return createStyleObjectNode_1.createStyleObjectNode(styleObj);
             }
             return arg;

package/dist/commonjs/lib/utils/handleCreateVars.js

@@ -8,7 +8,7 @@ const typescript_1 = __importDefault(require("typescript"));
 const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
 const getVarName_1 = require("./getVarName");
 const makeEmotionSafe_1 = require("./makeEmotionSafe");
-const handleCreateVars = (node, _checker, prefix, vars) => {
+const handleCreateVars = (node, { prefix, variables }) => {
     /**
      * This will create a variable
      */
@@ -16,16 +16,16 @@ const handleCreateVars = (node, _checker, prefix, vars) => {
         typescript_1.default.isIdentifier(node.expression) &&
         node.expression.text === 'createVars') {
         const id = canvas_kit_styling_1.slugify(getVarName_1.getVarName(node)).replace('-vars', '');
-        const variables = node.arguments
+        const vars = node.arguments
             .map(arg => typescript_1.default.isStringLiteral(arg) && arg.text)
             .filter(Boolean);
-        variables.forEach(v => {
-            vars[`${id}-${makeEmotionSafe_1.makeEmotionSafe(v)}`] = `--${prefix}-${id}-${makeEmotionSafe_1.makeEmotionSafe(v)}`;
+        vars.forEach(v => {
+            variables[`${id}-${makeEmotionSafe_1.makeEmotionSafe(v)}`] = `--${prefix}-${id}-${makeEmotionSafe_1.makeEmotionSafe(v)}`;
         });
         return typescript_1.default.factory.createCallExpression(node.expression, [], [
             typescript_1.default.factory.createObjectLiteralExpression([
                 typescript_1.default.factory.createPropertyAssignment(typescript_1.default.factory.createIdentifier('id'), typescript_1.default.factory.createStringLiteral(`${prefix}-${id}`)),
-                typescript_1.default.factory.createPropertyAssignment(typescript_1.default.factory.createIdentifier('args'), typescript_1.default.factory.createArrayLiteralExpression(variables.map(val => typescript_1.default.factory.createStringLiteral(val)), false)),
+                typescript_1.default.factory.createPropertyAssignment(typescript_1.default.factory.createIdentifier('args'), typescript_1.default.factory.createArrayLiteralExpression(vars.map(val => typescript_1.default.factory.createStringLiteral(val)), false)),
             ], false),
         ]);
     }

package/dist/commonjs/lib/utils/handleCssVar.js

@@ -14,7 +14,7 @@ const typescript_1 = __importDefault(require("typescript"));
  * The value parser will figure out what to do from there. We don't have access to variables at this
  * point, so we forward CallExpression arguments in ways the value parser understands.
  */
-const handleCssVar = (node, checker, prefix, vars) => {
+const handleCssVar = node => {
     // cssVar(a)
     // cssVar(a, b)
     if (typescript_1.default.isCallExpression(node) &&

package/dist/commonjs/lib/utils/handleFocusRing.js

@@ -7,7 +7,7 @@ exports.handleFocusRing = void 0;
 const typescript_1 = __importDefault(require("typescript"));
 const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
 const parseNodeToStaticValue_1 = require("./parseNodeToStaticValue");
-const handleFocusRing = (node, checker, prefix, vars) => {
+const handleFocusRing = (node, context) => {
     // { ...focusRing() }
     /**
      * A spread assignment looks like:
@@ -45,7 +45,7 @@ const handleFocusRing = (node, checker, prefix, vars) => {
                     }
                 });
             }
-            const inset = parseNodeToStaticValue_1.parseNodeToStaticValue(defaults.inset, checker, prefix, vars);
+            const inset = parseNodeToStaticValue_1.parseNodeToStaticValue(defaults.inset, context);
             let boxShadow;
             switch (inset) {
                 case 'outer':

package/dist/commonjs/lib/utils/handleKeyframes.d.ts

@@ -0,0 +1,3 @@
+import { NodeTransformer } from './types';
+export declare const handleKeyframes: NodeTransformer;
+//# sourceMappingURL=handleKeyframes.d.ts.map

package/dist/commonjs/lib/utils/handleKeyframes.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"handleKeyframes.d.ts","sourceRoot":"","sources":["../../../../lib/utils/handleKeyframes.ts"],"names":[],"mappings":"AAEA,OAAO,EAAC,eAAe,EAAC,MAAM,SAAS,CAAC;AAOxC,eAAO,MAAM,eAAe,EAAE,eA+C7B,CAAC"}

package/dist/commonjs/lib/utils/handleKeyframes.js

@@ -0,0 +1,47 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.handleKeyframes = void 0;
+const typescript_1 = __importDefault(require("typescript"));
+const parseNodeToStaticValue_1 = require("./parseNodeToStaticValue");
+const getVarName_1 = require("./getVarName");
+const createStyleObjectNode_1 = require("./createStyleObjectNode");
+const isImportedFromStyling_1 = require("./isImportedFromStyling");
+const parseObjectToStaticValue_1 = require("./parseObjectToStaticValue");
+const handleKeyframes = (node, context) => {
+    const { checker, keyframes } = context;
+    // keyframes`css`
+    if (typescript_1.default.isTaggedTemplateExpression(node) &&
+        typescript_1.default.isIdentifier(node.tag) &&
+        node.tag.text === 'keyframes' &&
+        isImportedFromStyling_1.isImportedFromStyling(node.tag, checker)) {
+        // parseNodeToStaticValue can parse templates. Pass it through there to get a single static string
+        const styleObjNode = createStyleObjectNode_1.createStyleObjectNode(parseNodeToStaticValue_1.parseNodeToStaticValue(node.template, context), '{hash}');
+        const identifierName = getVarName_1.getVarName(node);
+        const name = createStyleObjectNode_1.getStaticCssClassName(styleObjNode);
+        keyframes[identifierName] = `animation-${name}`;
+        return typescript_1.default.factory.createCallExpression(typescript_1.default.factory.createIdentifier('keyframes'), undefined, [
+            styleObjNode,
+        ]);
+    }
+    // keyframes({})
+    if (typescript_1.default.isCallExpression(node) &&
+        typescript_1.default.isIdentifier(node.expression) &&
+        node.expression.text === 'keyframes' &&
+        isImportedFromStyling_1.isImportedFromStyling(node.expression, checker)) {
+        if (typescript_1.default.isObjectLiteralExpression(node.arguments[0])) {
+            const styleObj = parseObjectToStaticValue_1.parseObjectToStaticValue(node.arguments[0], context);
+            const styleObjNode = createStyleObjectNode_1.createStyleObjectNode(styleObj, '{hash}');
+            const identifierName = getVarName_1.getVarName(node);
+            const name = createStyleObjectNode_1.getStaticCssClassName(styleObjNode);
+            keyframes[identifierName] = `animation-${name}`;
+            return typescript_1.default.factory.createCallExpression(typescript_1.default.factory.createIdentifier('keyframes'), undefined, [
+                styleObjNode,
+            ]);
+        }
+    }
+    return;
+};
+exports.handleKeyframes = handleKeyframes;

package/dist/commonjs/lib/utils/handlePx2Rem.js

@@ -9,11 +9,11 @@ const isImportedFromStyling_1 = require("./isImportedFromStyling");
 /**
  * Handle the CallExpression `px2rem` to do static conversion and remove the CallExpression.
  */
-const handlePx2Rem = (node, checker) => {
+const handlePx2Rem = (node, context) => {
     if (typescript_1.default.isCallExpression(node) &&
         typescript_1.default.isIdentifier(node.expression) &&
         node.expression.text === 'px2rem' &&
-        isImportedFromStyling_1.isImportedFromStyling(node.expression, checker)) {
+        isImportedFromStyling_1.isImportedFromStyling(node.expression, context.checker)) {
         const [pxArgument, baseArgument] = node.arguments;
         const base = baseArgument && typescript_1.default.isNumericLiteral(baseArgument) ? parseFloat(baseArgument.text) : 16;
         if (typescript_1.default.isNumericLiteral(pxArgument)) {

package/dist/commonjs/lib/utils/parseNodeToStaticValue.d.ts

@@ -1,6 +1,7 @@
 import ts from 'typescript';
+import { TransformerContext } from './types';
 /**
  * This is the workhorse of statically analyzing style values
  */
-export declare function parseNodeToStaticValue(node: ts.Node, checker: ts.TypeChecker, prefix?: string, variables?: Record<string, string>): string;
+export declare function parseNodeToStaticValue(node: ts.Node, context: TransformerContext): string;
 //# sourceMappingURL=parseNodeToStaticValue.d.ts.map

package/dist/commonjs/lib/utils/parseNodeToStaticValue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"parseNodeToStaticValue.d.ts","sourceRoot":"","sources":["../../../../lib/utils/parseNodeToStaticValue.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,YAAY,CAAC;AAO5B;;GAEG;AACH,wBAAgB,sBAAsB,CACpC,IAAI,EAAE,EAAE,CAAC,IAAI,EACb,OAAO,EAAE,EAAE,CAAC,WAAW,EACvB,MAAM,GAAE,MAAc,EACtB,SAAS,GAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAM,GACrC,MAAM,CAsFR"}
+{"version":3,"file":"parseNodeToStaticValue.d.ts","sourceRoot":"","sources":["../../../../lib/utils/parseNodeToStaticValue.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,YAAY,CAAC;AAM5B,OAAO,EAAC,kBAAkB,EAAC,MAAM,SAAS,CAAC;AAE3C;;GAEG;AACH,wBAAgB,sBAAsB,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,EAAE,OAAO,EAAE,kBAAkB,GAAG,MAAM,CAuGzF"}

package/dist/commonjs/lib/utils/parseNodeToStaticValue.js

@@ -11,7 +11,8 @@ const getErrorMessage_1 = require("./getErrorMessage");
 /**
  * This is the workhorse of statically analyzing style values
  */
-function parseNodeToStaticValue(node, checker, prefix = 'css', variables = {}) {
+function parseNodeToStaticValue(node, context) {
+    const { checker, variables, keyframes } = context;
     /**
      * String literals like 'red' or empty Template Expressions like `red`
      */
@@ -32,6 +33,9 @@ function parseNodeToStaticValue(node, checker, prefix = 'css', variables = {}) {
         if (variables[varName]) {
             return variables[varName];
         }
+        if (keyframes[varName]) {
+            return keyframes[varName];
+        }
     }
     // [a.b]
     if (typescript_1.default.isComputedPropertyName(node) && typescript_1.default.isPropertyAccessExpression(node.expression)) {
@@ -39,6 +43,9 @@ function parseNodeToStaticValue(node, checker, prefix = 'css', variables = {}) {
         if (variables[varName]) {
             return variables[varName];
         }
+        if (keyframes[varName]) {
+            return keyframes[varName];
+        }
     }
     /**
      * ```ts
@@ -46,7 +53,7 @@ function parseNodeToStaticValue(node, checker, prefix = 'css', variables = {}) {
      * ```
      */
     if (typescript_1.default.isTemplateExpression(node)) {
-        return getStyleValueFromTemplateExpression(node, checker, prefix, variables);
+        return getStyleValueFromTemplateExpression(node, context);
     }
     /**
      * An Identifier is a simple variable. It may represent a variable, so we'll check it before
@@ -56,6 +63,15 @@ function parseNodeToStaticValue(node, checker, prefix = 'css', variables = {}) {
         if (variables[node.text]) {
             return variables[node.text];
         }
+        if (keyframes[node.text]) {
+            return keyframes[node.text];
+        }
+    }
+    if (typescript_1.default.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
@@ -74,7 +90,7 @@ function parseNodeToStaticValue(node, checker, prefix = 'css', variables = {}) {
     // 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_1.getErrorMessage(node)}\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. Variables: ${JSON.stringify(variables, null, '  ')}`);
+    throw new Error(`Unknown type at: "${node.getText()}". Received "${typeValue}"\n${getErrorMessage_1.getErrorMessage(node)}\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.`);
 }
 exports.parseNodeToStaticValue = parseNodeToStaticValue;
 function parseTypeToStaticValue(type) {
@@ -114,22 +130,20 @@ function getVariableNameParts(input) {
 /**
  * Gets a static string value from a template expression. It could recurse.
  */
-function getStyleValueFromTemplateExpression(node, checker, prefix = 'css', variables = {}) {
+function getStyleValueFromTemplateExpression(node, context) {
     if (!node) {
         return '';
     }
     if (typescript_1.default.isTemplateExpression(node)) {
-        return (getStyleValueFromTemplateExpression(node.head, checker, prefix, variables) +
-            node.templateSpans
-                .map(value => getStyleValueFromTemplateExpression(value, checker, prefix, variables))
-                .join(''));
+        return (getStyleValueFromTemplateExpression(node.head, context) +
+            node.templateSpans.map(value => getStyleValueFromTemplateExpression(value, context)).join(''));
     }
     if (typescript_1.default.isTemplateHead(node) || typescript_1.default.isTemplateTail(node) || typescript_1.default.isTemplateMiddle(node)) {
         return node.text;
     }
     if (typescript_1.default.isTemplateSpan(node)) {
-        return (parseNodeToStaticValue(node.expression, checker, prefix, variables) +
-            getStyleValueFromTemplateExpression(node.literal, checker, prefix, variables));
+        return (parseNodeToStaticValue(node.expression, context) +
+            getStyleValueFromTemplateExpression(node.literal, context));
     }
     return '';
 }

package/dist/commonjs/lib/utils/parseObjectToStaticValue.d.ts

@@ -1,12 +1,13 @@
 import ts from 'typescript';
+import { TransformerContext } from './types';
 export declare type NestedStyleObject = {
     [key: string]: string | NestedStyleObject;
 };
-export declare function parseObjectToStaticValue(node: ts.Node, checker: ts.TypeChecker, prefix?: string, variables?: Record<string, string>): NestedStyleObject;
+export declare function parseObjectToStaticValue(node: ts.Node, context: TransformerContext): NestedStyleObject;
 /**
  * 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 declare function parseStyleObjFromType(type: ts.Type, checker: ts.TypeChecker, prefix: string, variables: Record<string, string>): Record<string, any>;
+export declare function parseStyleObjFromType(type: ts.Type, context: TransformerContext): Record<string, any>;
 //# sourceMappingURL=parseObjectToStaticValue.d.ts.map

package/dist/commonjs/lib/utils/parseObjectToStaticValue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"parseObjectToStaticValue.d.ts","sourceRoot":"","sources":["../../../../lib/utils/parseObjectToStaticValue.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,YAAY,CAAC;AAK5B,oBAAY,iBAAiB,GAAG;IAAC,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,GAAG,iBAAiB,CAAA;CAAC,CAAC;AAE5E,wBAAgB,wBAAwB,CACtC,IAAI,EAAE,EAAE,CAAC,IAAI,EACb,OAAO,EAAE,EAAE,CAAC,WAAW,EACvB,MAAM,SAAQ,EACd,SAAS,GAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAM,GACrC,iBAAiB,CAUnB;AAsED;;;;GAIG;AACH,wBAAgB,qBAAqB,CACnC,IAAI,EAAE,EAAE,CAAC,IAAI,EACb,OAAO,EAAE,EAAE,CAAC,WAAW,EACvB,MAAM,EAAE,MAAM,EACd,SAAS,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,uBA2BlC"}
+{"version":3,"file":"parseObjectToStaticValue.d.ts","sourceRoot":"","sources":["../../../../lib/utils/parseObjectToStaticValue.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,YAAY,CAAC;AAI5B,OAAO,EAAC,kBAAkB,EAAC,MAAM,SAAS,CAAC;AAE3C,oBAAY,iBAAiB,GAAG;IAAC,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,GAAG,iBAAiB,CAAA;CAAC,CAAC;AAE5E,wBAAgB,wBAAwB,CACtC,IAAI,EAAE,EAAE,CAAC,IAAI,EACb,OAAO,EAAE,kBAAkB,GAC1B,iBAAiB,CAUnB;AA+DD;;;;GAIG;AACH,wBAAgB,qBAAqB,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,EAAE,OAAO,EAAE,kBAAkB,uBA0B/E"}