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

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

@@ -0,0 +1,16 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getHash = void 0;
+const node_crypto_1 = __importDefault(require("node:crypto"));
+function getHash(node, context) {
+    const fileName = context.getFileName(node.getSourceFile().fileName);
+    return node_crypto_1.default
+        .createHash('md5')
+        .update(fileName + node.pos) // file name + position should be unique and repeatable
+        .digest('hex')
+        .substring(0, 6);
+}
+exports.getHash = getHash;

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

@@ -0,0 +1,17 @@
+import ts from 'typescript';
+/**
+ * This function returns a calculated name of a node by walking up the AST and looking for nodes
+ * with a `name` property that has an `Identifier` node type. The result is dash-case. This is
+ * useful for automatically generating variable names based on a TS file.
+ *
+ * In the following example, the `baz` node would have a name of `foo-bar-baz`.
+ * ```ts
+ * const foo = {
+ *   bar: {
+ *     baz: ''
+ *   }
+ * }
+ * ```
+ */
+export declare function getVarName(node: ts.Node, parts?: string[]): string;
+//# sourceMappingURL=getVarName.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"getVarName.d.ts","sourceRoot":"","sources":["../../../../lib/utils/getVarName.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,YAAY,CAAC;AAE5B;;;;;;;;;;;;;GAaG;AACH,wBAAgB,UAAU,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,EAAE,KAAK,GAAE,MAAM,EAAO,GAAG,MAAM,CAetE"}

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

@@ -0,0 +1,34 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getVarName = void 0;
+const typescript_1 = __importDefault(require("typescript"));
+/**
+ * This function returns a calculated name of a node by walking up the AST and looking for nodes
+ * with a `name` property that has an `Identifier` node type. The result is dash-case. This is
+ * useful for automatically generating variable names based on a TS file.
+ *
+ * In the following example, the `baz` node would have a name of `foo-bar-baz`.
+ * ```ts
+ * const foo = {
+ *   bar: {
+ *     baz: ''
+ *   }
+ * }
+ * ```
+ */
+function getVarName(node, parts = []) {
+    // base case. Join all the parts
+    if (!node.parent || node.kind === typescript_1.default.SyntaxKind.VariableStatement) {
+        return parts.join('.');
+    }
+    // Any node with a `name` property that is an identifier can add to the var name
+    if (node.name &&
+        (typescript_1.default.isIdentifier(node.name) || typescript_1.default.isStringLiteral(node.name))) {
+        return getVarName(node.parent, [node.name.text, ...parts]);
+    }
+    return getVarName(node.parent, parts);
+}
+exports.getVarName = getVarName;

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

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

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

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

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

@@ -0,0 +1,33 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.handleCalc = void 0;
+const typescript_1 = __importDefault(require("typescript"));
+const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
+const createPropertyTransform_1 = require("../createPropertyTransform");
+const parseNodeToStaticValue_1 = require("./parseNodeToStaticValue");
+exports.handleCalc = (0, createPropertyTransform_1.createPropertyTransform)((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)) {
+        function toStaticValue(node) {
+            return (0, parseNodeToStaticValue_1.parseNodeToStaticValue)(node, context);
+        }
+        const args = node.arguments;
+        const method = node.expression.name.text;
+        if (method === 'add' || method === 'subtract') {
+            return canvas_kit_styling_1.calc[method](toStaticValue(args[0]).toString(), toStaticValue(args[1]).toString());
+        }
+        if (method === 'multiply' || method === 'divide') {
+            return canvas_kit_styling_1.calc[method](toStaticValue(args[0]).toString(), toStaticValue(args[1]));
+        }
+        if (method === 'negate') {
+            return canvas_kit_styling_1.calc.negate(toStaticValue(args[0]).toString());
+        }
+    }
+    return;
+});

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

@@ -0,0 +1,7 @@
+import { NodeTransformer, TransformerContext } from './types';
+/**
+ * Handle all arguments of the CallExpression `createStencil()`
+ */
+export declare const handleCreateStencil: NodeTransformer;
+export declare function getClassName(name: string, { prefix }: TransformerContext): string;
+//# sourceMappingURL=handleCreateStencil.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"handleCreateStencil.d.ts","sourceRoot":"","sources":["../../../../lib/utils/handleCreateStencil.ts"],"names":[],"mappings":"AAQA,OAAO,EAAoB,eAAe,EAAE,kBAAkB,EAAC,MAAM,SAAS,CAAC;AAI/E;;GAEG;AACH,eAAO,MAAM,mBAAmB,EAAE,eAwTjC,CAAC;AAuFF,wBAAgB,YAAY,CAAC,IAAI,EAAE,MAAM,EAAE,EAAC,MAAM,EAAC,EAAE,kBAAkB,GAAG,MAAM,CAW/E"}

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

@@ -0,0 +1,309 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getClassName = exports.handleCreateStencil = void 0;
+const typescript_1 = __importDefault(require("typescript"));
+const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
+const getVarName_1 = require("./getVarName");
+const parseObjectToStaticValue_1 = require("./parseObjectToStaticValue");
+const createStyleObjectNode_1 = require("./createStyleObjectNode");
+const parseNodeToStaticValue_1 = require("./parseNodeToStaticValue");
+const isImportedFromStyling_1 = require("./isImportedFromStyling");
+const getHash_1 = require("./getHash");
+/**
+ * Handle all arguments of the CallExpression `createStencil()`
+ */
+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 (typescript_1.default.isCallExpression(node) &&
+        typescript_1.default.isIdentifier(node.expression) &&
+        node.expression.text === 'createStencil' &&
+        (0, isImportedFromStyling_1.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 = (0, getVarName_1.getVarName)(node.expression);
+        const stencilHash = (0, getHash_1.getHash)(node, context);
+        if (typescript_1.default.isObjectLiteralExpression(config)) {
+            config.properties.forEach(property => {
+                if (typescript_1.default.isPropertyAssignment(property) &&
+                    property.name &&
+                    typescript_1.default.isIdentifier(property.name) &&
+                    property.name.text === 'extends' &&
+                    typescript_1.default.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
+                        (0, parseNodeToStaticValue_1.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 &&
+                    typescript_1.default.isIdentifier(property.name) &&
+                    property.name.text === 'vars' &&
+                    typescript_1.default.isPropertyAssignment(property));
+            });
+            function extractNames(node) {
+                if (typescript_1.default.isPropertyAssignment(node) && typescript_1.default.isIdentifier(node.name)) {
+                    if (typescript_1.default.isObjectLiteralExpression(node.initializer)) {
+                        return node.initializer.properties.map(extractNames);
+                    }
+                    const varName = (0, getVarName_1.getVarName)(node.name);
+                    const varValue = `--${getClassName(varName, context)}`;
+                    names[varName] = `--${node.name.text}-${(0, canvas_kit_styling_1.slugify)(stencilName).replace('-stencil', '')}-${stencilHash}`;
+                    names[node.name.text] = names[varName];
+                    extractedNames[names[varName]] = varValue;
+                    // Evaluate the variable defaults
+                    const value = (0, parseNodeToStaticValue_1.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((0, parseObjectToStaticValue_1.maybeWrapCSSVariables)(value, names));
+                    }
+                }
+            }
+            if (varsConfig && typescript_1.default.isObjectLiteralExpression(varsConfig.initializer)) {
+                varsConfig.initializer.properties.forEach(variable => {
+                    extractNames(variable);
+                });
+            }
+            const configProperties = config.properties.map((property, index, properties) => {
+                if (property.name && typescript_1.default.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((0, getVarName_1.getVarName)(property.name), context), context);
+                            return updateStyleProperty(property, initializer);
+                        }
+                    }
+                    // modifiers config object
+                    if (property.name.text === 'modifiers' &&
+                        typescript_1.default.isPropertyAssignment(property) &&
+                        typescript_1.default.isObjectLiteralExpression(property.initializer)) {
+                        // modifier key
+                        return typescript_1.default.factory.updatePropertyAssignment(property, property.name, typescript_1.default.factory.updateObjectLiteralExpression(property.initializer, property.initializer.properties.map(modifierProperty => {
+                            if (typescript_1.default.isPropertyAssignment(modifierProperty) &&
+                                modifierProperty.name &&
+                                typescript_1.default.isIdentifier(modifierProperty.name) &&
+                                typescript_1.default.isObjectLiteralExpression(modifierProperty.initializer)) {
+                                // modifier value
+                                return typescript_1.default.factory.updatePropertyAssignment(modifierProperty, modifierProperty.name, typescript_1.default.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((0, getVarName_1.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' &&
+                        typescript_1.default.isPropertyAssignment(property) &&
+                        typescript_1.default.isArrayLiteralExpression(property.initializer)) {
+                        return typescript_1.default.factory.updatePropertyAssignment(property, property.name, typescript_1.default.factory.updateArrayLiteralExpression(property.initializer, property.initializer.elements.map(element => {
+                            if (typescript_1.default.isObjectLiteralExpression(element)) {
+                                const selectors = [];
+                                selectors.push(`.${getClassName(stencilName, context)}`);
+                                return typescript_1.default.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 &&
+                                        typescript_1.default.isIdentifier(compoundProperty.name) &&
+                                        compoundProperty.name.text === 'modifiers' &&
+                                        typescript_1.default.isPropertyAssignment(compoundProperty) &&
+                                        typescript_1.default.isObjectLiteralExpression(compoundProperty.initializer)) {
+                                        compoundProperty.initializer.properties.forEach(modifier => {
+                                            if (typescript_1.default.isPropertyAssignment(modifier)) {
+                                                let className = '';
+                                                if (typescript_1.default.isIdentifier(modifier.name)) {
+                                                    className = (0, canvas_kit_styling_1.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 (typescript_1.default.isStringLiteral(modifier.initializer)) {
+                                                    className += `-${modifier.initializer.text}`;
+                                                }
+                                                selectors.push(className);
+                                            }
+                                        });
+                                        return compoundProperty;
+                                    }
+                                    // styles key
+                                    if (compoundProperty.name &&
+                                        typescript_1.default.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 = (0, createStyleObjectNode_1.serializeStyles)(compoundProperty, styleObj, `${selectors.join('.')}{%s}`, context);
+                                            const initializer = (0, createStyleObjectNode_1.createStyleObjectNode)(serialized.styles, serialized.name);
+                                            return updateStyleProperty(compoundProperty, initializer);
+                                        }
+                                    }
+                                    return compoundProperty;
+                                }));
+                            }
+                            return element;
+                        })));
+                    }
+                }
+                return property;
+            });
+            return typescript_1.default.factory.updateCallExpression(node, node.expression, undefined, [
+                typescript_1.default.factory.updateObjectLiteralExpression(config, configProperties),
+                typescript_1.default.factory.createStringLiteral(`${(0, canvas_kit_styling_1.slugify)(stencilName).replace('-stencil', '')}-${stencilHash}`),
+            ]);
+        }
+    }
+    return;
+};
+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, context, stencilName) {
+    let styleObj;
+    if (typescript_1.default.isPropertyAssignment(property)) {
+        if (typescript_1.default.isObjectLiteralExpression(property.initializer)) {
+            styleObj = (0, parseObjectToStaticValue_1.parseObjectToStaticValue)(property.initializer, {
+                ...context,
+                nameScope: `${stencilName}.vars.`,
+            });
+        }
+        if (isFunctionLikeDeclaration(property.initializer)) {
+            const returnNode = getReturnStatement(property.initializer);
+            if (returnNode) {
+                styleObj = (0, parseObjectToStaticValue_1.parseObjectToStaticValue)(returnNode, {
+                    ...context,
+                    nameScope: `${stencilName}.vars.`,
+                });
+            }
+        }
+    }
+    if (isFunctionLikeDeclaration(property)) {
+        const returnNode = getReturnStatement(property);
+        if (returnNode) {
+            styleObj = (0, parseObjectToStaticValue_1.parseObjectToStaticValue)(returnNode, {
+                ...context,
+                nameScope: `${stencilName}.vars.`,
+            });
+        }
+    }
+    return styleObj;
+}
+function getReturnStatement(node) {
+    if (node.body && typescript_1.default.isParenthesizedExpression(node.body)) {
+        return node.body.expression;
+    }
+    if (node.body && typescript_1.default.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 (typescript_1.default.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 = (0, createStyleObjectNode_1.serializeStyles)(node, styleObj, `.${className}{%s}`, context);
+    const varName = (0, getVarName_1.getVarName)(node);
+    const value = `css-${serialized.name}`;
+    names[varName] = value;
+    extractedNames[value] = getClassName(varName, context);
+    return (0, createStyleObjectNode_1.createStyleObjectNode)(serialized.styles, serialized.name);
+}
+function getClassName(name, { prefix }) {
+    return (`${prefix}-` +
+        (0, canvas_kit_styling_1.slugify)(name)
+            .replace('-vars', '')
+            .replace('-stencil', '')
+            .replace('-base', '')
+            .replace('-modifiers', '-')
+            .replace('-true', '')
+            .replace('-compound', ''));
+}
+exports.getClassName = getClassName;
+/**
+ * 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 (typescript_1.default.isPropertyAssignment(property)) {
+        return typescript_1.default.factory.updatePropertyAssignment(property, property.name, initializer);
+    }
+    return typescript_1.default.factory.createPropertyAssignment(property.name, initializer);
+}

package/dist/commonjs/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/commonjs/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/commonjs/lib/utils/handleCreateStyles.js

@@ -0,0 +1,86 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.handleCreateStyles = void 0;
+const typescript_1 = __importDefault(require("typescript"));
+const parseObjectToStaticValue_1 = require("./parseObjectToStaticValue");
+const createStyleObjectNode_1 = require("./createStyleObjectNode");
+const isImportedFromStyling_1 = require("./isImportedFromStyling");
+const getVarName_1 = require("./getVarName");
+const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
+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 (typescript_1.default.isCallExpression(node) &&
+        typescript_1.default.isIdentifier(node.expression) &&
+        node.expression.text === 'createStyles' &&
+        (0, isImportedFromStyling_1.isImportedFromStyling)(node.expression, checker) &&
+        node.arguments.length > 0) {
+        const cssClassName = `${prefix}-${(0, canvas_kit_styling_1.slugify)((0, getVarName_1.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 (typescript_1.default.isObjectLiteralExpression(arg)) {
+                const styleObj = (0, parseObjectToStaticValue_1.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 (typescript_1.default.isIdentifier(arg)) {
+                const type = checker.getTypeAtLocation(arg);
+                // `createStyles` accepts strings as class names. If the class name is
+                if (type.isStringLiteral() || type.getFlags() & typescript_1.default.TypeFlags.String) {
+                    return arg;
+                }
+                // The type must be a object
+                const styleObj = (0, parseObjectToStaticValue_1.parseStyleObjFromType)(type, context);
+                return createStyleReplacementNode(node, styleObj, cssClassName, context);
+            }
+            return arg;
+        });
+        return typescript_1.default.factory.updateCallExpression(node, node.expression, [], newArguments);
+    }
+    return;
+};
+exports.handleCreateStyles = handleCreateStyles;
+function createStyleReplacementNode(node, styleObj, className, context) {
+    const serialized = (0, createStyleObjectNode_1.serializeStyles)(node, styleObj, `.${className}{%s}`, context);
+    return (0, createStyleObjectNode_1.createStyleObjectNode)(serialized.styles, serialized.name);
+}

package/dist/commonjs/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/commonjs/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/commonjs/lib/utils/handleCreateVars.js

@@ -0,0 +1,65 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.handleCreateVars = void 0;
+const typescript_1 = __importDefault(require("typescript"));
+const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
+const getVarName_1 = require("./getVarName");
+const getHash_1 = require("./getHash");
+const handleCreateVars = (node, context) => {
+    /**
+     * This will create a variable
+     */
+    if (typescript_1.default.isCallExpression(node) &&
+        typescript_1.default.isIdentifier(node.expression) &&
+        node.expression.text === 'createVars') {
+        const { id, vars } = addNames(node, context);
+        return typescript_1.default.factory.updateCallExpression(node, node.expression, [], [
+            typescript_1.default.factory.createObjectLiteralExpression([
+                typescript_1.default.factory.createPropertyAssignment(typescript_1.default.factory.createIdentifier('id'), typescript_1.default.factory.createStringLiteral(id)),
+                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),
+        ]);
+    }
+    /**
+     * 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 (typescript_1.default.isObjectLiteralExpression(node)) {
+        node.properties.forEach(property => {
+            if (typescript_1.default.isPropertyAssignment(property) &&
+                typescript_1.default.isCallExpression(property.initializer) &&
+                typescript_1.default.isIdentifier(property.initializer.expression) &&
+                property.initializer.expression.text === 'createVars') {
+                addNames(property.initializer, context);
+            }
+        });
+    }
+    return;
+};
+exports.handleCreateVars = handleCreateVars;
+function addNames(node, context) {
+    const { prefix, names, extractedNames } = context;
+    const hash = (0, getHash_1.getHash)(node, context);
+    const varNamePrefix = (0, getVarName_1.getVarName)(node);
+    const vars = node.arguments
+        .map(arg => typescript_1.default.isStringLiteral(arg) && arg.text)
+        .filter(Boolean);
+    vars.forEach(v => {
+        const varName = `${varNamePrefix}.${v}`;
+        names[varName] = `--${v}-${hash}`;
+        extractedNames[names[varName]] = `--${prefix}-${(0, canvas_kit_styling_1.slugify)(varName).replace('-vars', '')}`;
+    });
+    return { id: hash, vars };
+}

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

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

package/dist/commonjs/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/commonjs/lib/utils/handleCssVar.js

@@ -0,0 +1,19 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.handleCssVar = void 0;
+const typescript_1 = __importDefault(require("typescript"));
+const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
+const createPropertyTransform_1 = require("../createPropertyTransform");
+const parseNodeToStaticValue_1 = require("./parseNodeToStaticValue");
+exports.handleCssVar = (0, createPropertyTransform_1.createPropertyTransform)((node, context) => {
+    if (typescript_1.default.isCallExpression(node) &&
+        typescript_1.default.isIdentifier(node.expression) &&
+        node.expression.text === 'cssVar') {
+        const args = node.arguments.map(arg => (0, parseNodeToStaticValue_1.parseNodeToStaticValue)(arg, context));
+        return (0, canvas_kit_styling_1.cssVar)(args[0], args[1] || context.names[args[0]]);
+    }
+    return;
+});

package/dist/commonjs/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/commonjs/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"}