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

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

@@ -0,0 +1,301 @@
+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 { isImportedFromStyling } from './isImportedFromStyling';
+import { getHash } from './getHash';
+/**
+ * Handle all arguments of the CallExpression `createStencil()`
+ */
+export const handleCreateStencil = (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 = {};
+        // 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));
+            });
+            function extractNames(node) {
+                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 = [];
+                                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, context, stencilName) {
+    let styleObj;
+    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) {
+    if (node.body && ts.isParenthesizedExpression(node.body)) {
+        return node.body.expression;
+    }
+    if (node.body && ts.isBlock(node.body)) {
+        let returnNode;
+        // 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) {
+    return node.hasOwnProperty('body');
+}
+function createStyleReplacementNode(node, styleObj, className, context) {
+    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, { prefix }) {
+    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, initializer) {
+    if (ts.isPropertyAssignment(property)) {
+        return ts.factory.updatePropertyAssignment(property, property.name, initializer);
+    }
+    return ts.factory.createPropertyAssignment(property.name, initializer);
+}

package/dist/es6/lib/utils/handleCreateStyles.d.ts

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"handleCreateStyles.d.ts","sourceRoot":"","sources":["../../../../lib/utils/handleCreateStyles.ts"],"names":[],"mappings":"AAIA,OAAO,EAAoB,eAAe,EAAqB,MAAM,SAAS,CAAC;AAK/E,eAAO,MAAM,kBAAkB,EAAE,eA4EhC,CAAC"}

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

@@ -0,0 +1,79 @@
+import ts from 'typescript';
+import { parseObjectToStaticValue, parseStyleObjFromType } from './parseObjectToStaticValue';
+import { createStyleObjectNode, serializeStyles } from './createStyleObjectNode';
+import { isImportedFromStyling } from './isImportedFromStyling';
+import { getVarName } from './getVarName';
+import { slugify } from '@workday/canvas-kit-styling';
+export const handleCreateStyles = (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, styleObj, className, context) {
+    const serialized = serializeStyles(node, styleObj, `.${className}{%s}`, context);
+    return createStyleObjectNode(serialized.styles, serialized.name);
+}

package/dist/es6/lib/utils/handleCreateVars.d.ts

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

package/dist/es6/lib/utils/handleCreateVars.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"handleCreateVars.d.ts","sourceRoot":"","sources":["../../../../lib/utils/handleCreateVars.ts"],"names":[],"mappings":"AAKA,OAAO,EAAC,eAAe,EAAqB,MAAM,SAAS,CAAC;AAG5D,eAAO,MAAM,gBAAgB,EAAE,eA+D9B,CAAC"}

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

@@ -0,0 +1,58 @@
+import ts from 'typescript';
+import { slugify } from '@workday/canvas-kit-styling';
+import { getVarName } from './getVarName';
+import { getHash } from './getHash';
+export const handleCreateVars = (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, context) {
+    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);
+    vars.forEach(v => {
+        const varName = `${varNamePrefix}.${v}`;
+        names[varName] = `--${v}-${hash}`;
+        extractedNames[names[varName]] = `--${prefix}-${slugify(varName).replace('-vars', '')}`;
+    });
+    return { id: hash, vars };
+}

package/dist/es6/lib/utils/handleCssVar.d.ts

@@ -0,0 +1,2 @@
+export declare const handleCssVar: import("./types").PropertyTransform;
+//# sourceMappingURL=handleCssVar.d.ts.map

package/dist/es6/lib/utils/handleCssVar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"handleCssVar.d.ts","sourceRoot":"","sources":["../../../../lib/utils/handleCssVar.ts"],"names":[],"mappings":"AAMA,eAAO,MAAM,YAAY,qCAYvB,CAAC"}

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

@@ -0,0 +1,13 @@
+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], args[1] || context.names[args[0]]);
+    }
+    return;
+});

package/dist/es6/lib/utils/handleInjectGlobal.d.ts

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

package/dist/es6/lib/utils/handleInjectGlobal.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"handleInjectGlobal.d.ts","sourceRoot":"","sources":["../../../../lib/utils/handleInjectGlobal.ts"],"names":[],"mappings":"AAKA,OAAO,EAAoB,eAAe,EAAqB,MAAM,SAAS,CAAC;AAG/E,eAAO,MAAM,kBAAkB,EAAE,eAgChC,CAAC"}

package/dist/es6/lib/utils/handleInjectGlobal.js

@@ -0,0 +1,33 @@
+import ts from 'typescript';
+import { isImportedFromStyling } from './isImportedFromStyling';
+import { parseObjectToStaticValue } from './parseObjectToStaticValue';
+import { createStyleObjectNode, serializeStyles } from './createStyleObjectNode';
+import { parseNodeToStaticValue } from './parseNodeToStaticValue';
+export const handleInjectGlobal = (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, styleObj, context) {
+    const serialized = serializeStyles(node, styleObj, '%s', context);
+    return createStyleObjectNode(serialized.styles, serialized.name);
+}

package/dist/es6/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/es6/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,EAAoB,eAAe,EAAqB,MAAM,SAAS,CAAC;AAO/E,eAAO,MAAM,eAAe,EAAE,eAoC7B,CAAC"}

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

@@ -0,0 +1,41 @@
+import ts from 'typescript';
+import { parseNodeToStaticValue } from './parseNodeToStaticValue';
+import { getVarName } from './getVarName';
+import { createStyleObjectNode, serializeStyles } from './createStyleObjectNode';
+import { isImportedFromStyling } from './isImportedFromStyling';
+import { parseObjectToStaticValue } from './parseObjectToStaticValue';
+export const handleKeyframes = (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, styleObj, identifierName, context) {
+    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/dist/es6/lib/utils/handleParentModifier.d.ts

@@ -0,0 +1,2 @@
+export declare const handleParentModifier: import("./types").PropertyTransform;
+//# sourceMappingURL=handleParentModifier.d.ts.map

package/dist/es6/lib/utils/handleParentModifier.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"handleParentModifier.d.ts","sourceRoot":"","sources":["../../../../lib/utils/handleParentModifier.ts"],"names":[],"mappings":"AAMA,eAAO,MAAM,oBAAoB,qCAsB/B,CAAC"}

package/dist/es6/lib/utils/handleParentModifier.js

@@ -0,0 +1,20 @@
+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/dist/es6/lib/utils/handlePx2Rem.d.ts

@@ -0,0 +1,2 @@
+export declare const handlePx2Rem: import("./types").PropertyTransform;
+//# sourceMappingURL=handlePx2Rem.d.ts.map

package/dist/es6/lib/utils/handlePx2Rem.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"handlePx2Rem.d.ts","sourceRoot":"","sources":["../../../../lib/utils/handlePx2Rem.ts"],"names":[],"mappings":"AAMA,eAAO,MAAM,YAAY,qCAevB,CAAC"}

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

@@ -0,0 +1,13 @@
+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]), args[1] ? parseFloat(args[1]) : undefined);
+    }
+    return;
+});

package/dist/es6/lib/utils/injectStyles.d.ts

@@ -0,0 +1,3 @@
+import { TransformerContext } from './types';
+export declare function injectStyles({ styles, cache }: TransformerContext, fileName: string, hash: string, styleOutput: string): void;
+//# sourceMappingURL=injectStyles.d.ts.map

package/dist/es6/lib/utils/injectStyles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"injectStyles.d.ts","sourceRoot":"","sources":["../../../../lib/utils/injectStyles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,kBAAkB,EAAC,MAAM,SAAS,CAAC;AAE3C,wBAAgB,YAAY,CAC1B,EAAC,MAAM,EAAE,KAAK,EAAC,EAAE,kBAAkB,EACnC,QAAQ,EAAE,MAAM,EAChB,IAAI,EAAE,MAAM,EACZ,WAAW,EAAE,MAAM,QAOpB"}

package/dist/es6/lib/utils/injectStyles.js

@@ -0,0 +1,7 @@
+export function injectStyles({ styles, cache }, fileName, hash, styleOutput) {
+    if (!cache[hash]) {
+        styles[fileName] = styles[fileName] || [];
+        styles[fileName].push(styleOutput);
+        cache[hash] = styleOutput;
+    }
+}