@workday/canvas-kit-styling-transform 10.3.16 → 11.0.0-alpha.590-next.0

package/dist/commonjs/index.d.ts

@@ -0,0 +1,3 @@
+import styleTransformer from './lib/styleTransform';
+export default styleTransformer;
+//# sourceMappingURL=index.d.ts.map

package/dist/commonjs/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../index.ts"],"names":[],"mappings":"AAAA,OAAO,gBAAgB,MAAM,sBAAsB,CAAC;AAEpD,eAAe,gBAAgB,CAAC"}

package/dist/commonjs/index.js

@@ -0,0 +1,7 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const styleTransform_1 = __importDefault(require("./lib/styleTransform"));
+exports.default = styleTransform_1.default;

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

@@ -0,0 +1,5 @@
+import { Element } from 'stylis';
+export declare function getVariablesFromFiles(files: string[]): Record<string, string>;
+export declare function extractVariables(blocks: Element[] | string, variables?: Record<string, string>): Record<string, string>;
+export declare function getFallbackVariable(variableName: string, variables: Record<string, string>): string | undefined;
+//# sourceMappingURL=getCssVariables.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"getCssVariables.d.ts","sourceRoot":"","sources":["../../../lib/getCssVariables.ts"],"names":[],"mappings":"AAAA,OAAO,EAAU,OAAO,EAAC,MAAM,QAAQ,CAAC;AAExC,wBAAgB,qBAAqB,CAAC,KAAK,EAAE,MAAM,EAAE,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAK7E;AAED,wBAAgB,gBAAgB,CAC9B,MAAM,EAAE,OAAO,EAAE,GAAG,MAAM,EAC1B,SAAS,GAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAM,GACrC,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAuBxB;AAED,wBAAgB,mBAAmB,CACjC,YAAY,EAAE,MAAM,EACpB,SAAS,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,GAChC,MAAM,GAAG,SAAS,CAwBpB"}

package/dist/commonjs/lib/getCssVariables.js

@@ -0,0 +1,51 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getFallbackVariable = exports.extractVariables = exports.getVariablesFromFiles = void 0;
+const stylis_1 = require("stylis");
+function getVariablesFromFiles(files) {
+    return files.reduce((result, file) => {
+        extractVariables(stylis_1.compile(file));
+        return { ...result, ...extractVariables(stylis_1.compile(file)) };
+    }, {});
+}
+exports.getVariablesFromFiles = getVariablesFromFiles;
+function extractVariables(blocks, variables = {}) {
+    if (typeof blocks === 'string') {
+        return variables;
+    }
+    return blocks
+        .filter(block => block.type === 'rule')
+        .reduce((result, rule) => {
+        if (Array.isArray(rule.children)) {
+            rule.children.forEach(child => {
+                if (typeof child.props === 'string' &&
+                    child.props.startsWith('--') &&
+                    typeof child.children === 'string') {
+                    result[child.props] = child.children;
+                }
+            });
+        }
+        return result;
+    }, { ...variables });
+}
+exports.extractVariables = extractVariables;
+function getFallbackVariable(variableName, variables) {
+    const variable = variableName.includes('var(') ? variableName : variables[variableName];
+    if (variable && variable.includes('var(')) {
+        return variable.replace(/(var\(([A-Za-z0-9\-_]+)\))/, (
+        /** matched substring "var(--var-name)" */ _, 
+        /** the full match of the first group "var(--var-name)" */ varMatch, 
+        /** the variable name  - match of the second group "--var-name" */ cssVarName, ...args) => {
+            const value = variables[cssVarName];
+            if (value && value.startsWith('var')) {
+                return getFallbackVariable(value, variables);
+            }
+            return value || varMatch;
+        });
+    }
+    if (variable) {
+        return variable;
+    }
+    return;
+}
+exports.getFallbackVariable = getFallbackVariable;

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

@@ -0,0 +1,12 @@
+import ts from 'typescript';
+export declare type NestedStyleObject = {
+    [key: string]: string | NestedStyleObject;
+};
+export interface StyleTransformerOptions {
+    prefix: string;
+    variables: Record<string, string>;
+    fallbackFiles?: string[];
+}
+export default function styleTransformer(program: ts.Program, { prefix, variables, fallbackFiles }?: Partial<StyleTransformerOptions>): ts.TransformerFactory<ts.SourceFile>;
+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

@@ -0,0 +1 @@
+{"version":3,"file":"styleTransform.d.ts","sourceRoot":"","sources":["../../../lib/styleTransform.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,MAAM,YAAY,CAAC;AAe5B,oBAAY,iBAAiB,GAAG;IAAC,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,GAAG,iBAAiB,CAAA;CAAC,CAAC;AAmZ5E,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;CAC1B;AAED,MAAM,CAAC,OAAO,UAAU,gBAAgB,CACtC,OAAO,EAAE,EAAE,CAAC,OAAO,EACnB,EAAC,MAAc,EAAE,SAAc,EAAE,aAAa,EAAC,GAAE,OAAO,CAAC,uBAAuB,CAG/E,GACA,EAAE,CAAC,kBAAkB,CAAC,EAAE,CAAC,UAAU,CAAC,CAgLtC;AAGD,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

@@ -0,0 +1,545 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.transform = void 0;
+/// <reference types="node" />
+const typescript_1 = __importDefault(require("typescript"));
+const serialize_1 = require("@emotion/serialize");
+const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
+const node_path_1 = __importDefault(require("node:path"));
+const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
+const getCssVariables_1 = require("./getCssVariables");
+const styleExpressionName = 'createStyles';
+const cssVarExpressionName = 'cssVar';
+const createVarExpressionName = 'createVars';
+const styleImportString = '@workday/canvas-kit-styling';
+const vars = {};
+function getStyleValueFromType(node, type, checker) {
+    const value = getCSSValueAtLocation(node, checker, type);
+    if (value) {
+        if (value.startsWith('--')) {
+            return `var(${value})`;
+        }
+        return value;
+    }
+    const typeValue = checker.typeToString(type);
+    throw new Error(`Unknown type at: "${node.getText()}". Received "${typeValue}"\n${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.`);
+}
+/**
+ * A `PropertyExpression` is an expression with a dot in it. Like `a.b.c`. It may be nested. This
+ * function will walk the AST and create a string like `a.b.c` to be passed on to variable name
+ * generation. This will be used for CSS variable lookups.
+ */
+function getPropertyAccessExpressionText(node) {
+    if (typescript_1.default.isIdentifier(node.name)) {
+        if (typescript_1.default.isIdentifier(node.expression)) {
+            return `${node.expression.text}.${node.name.text}`;
+        }
+        if (typescript_1.default.isPropertyAccessExpression(node.expression)) {
+            return `${getPropertyAccessExpressionText(node.expression)}.${node.name.text}`;
+        }
+    }
+    return '';
+}
+function parseStyleObjValue(initializer, variables, checker) {
+    /**
+     * String literals like 'red' or empty Template Expressions like `red`
+     */
+    if (typescript_1.default.isStringLiteral(initializer) || typescript_1.default.isNoSubstitutionTemplateLiteral(initializer)) {
+        return initializer.text;
+    }
+    // numeric literal values like `12`
+    if (typescript_1.default.isNumericLiteral(initializer)) {
+        return `${initializer.text}px`;
+    }
+    // The source file is using an identifier which will be known at runtime, we'll try to
+    // determine the type
+    if (typescript_1.default.isIdentifier(initializer)) {
+        const type = checker.getTypeAtLocation(initializer);
+        return getStyleValueFromType(initializer, type, checker);
+    }
+    /**
+     * ```ts
+     * PropertyAccessExpressions are dot-notation
+     *
+     * foo.bar.baz
+     * ```
+     */
+    if (typescript_1.default.isPropertyAccessExpression(initializer)) {
+        const type = checker.getTypeAtLocation(initializer);
+        return getStyleValueFromType(initializer, type, checker);
+    }
+    /**
+     * This will find patterns like:
+     *
+     * ```ts
+     * cssVar(myVars.color);
+     * cssVar(myVars.colors.background);
+     * cssVar(myVars.colors.background, 'red')
+     * ```
+     */
+    if (typescript_1.default.isCallExpression(initializer) &&
+        typescript_1.default.isIdentifier(initializer.expression) &&
+        initializer.expression.text === cssVarExpressionName) {
+        const value = getCSSValueAtLocation(initializer.arguments[0], checker);
+        const value2 = initializer.arguments[1]
+            ? parseStyleObjValue(initializer.arguments[1], variables, checker)
+            : undefined;
+        // handle fallback variables
+        const fallbackValue = getCssVariables_1.getFallbackVariable(value, variables);
+        if (value && (value2 || fallbackValue)) {
+            return `var(${value}, ${((value2 === null || value2 === void 0 ? void 0 : value2.startsWith('--')) ? `var(${value2})` : value2) || fallbackValue})`;
+        }
+        if (value) {
+            return `var(${value})`;
+        }
+    }
+    /**
+     * ```ts
+     * `border 1px ${myVars.colors.border}`
+     * ```
+     */
+    if (typescript_1.default.isTemplateExpression(initializer)) {
+        return getStyleValueFromTemplateExpression(initializer, variables, checker);
+    }
+    return '';
+}
+/**
+ * Gets a static string value from a template expression. It could recurse.
+ */
+function getStyleValueFromTemplateExpression(node, variables, checker) {
+    if (!node) {
+        return '';
+    }
+    if (typescript_1.default.isTemplateExpression(node)) {
+        return (getStyleValueFromTemplateExpression(node.head, variables, checker) +
+            node.templateSpans
+                .map(value => getStyleValueFromTemplateExpression(value, variables, checker))
+                .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 (parseStyleObjValue(node.expression, variables, checker) +
+            getStyleValueFromTemplateExpression(node.literal, variables, checker));
+    }
+    return '';
+}
+/**
+ * Gets a CSS value from an AST node
+ */
+function getCSSValueAtLocation(node, checker, 
+/**
+ * Optional type. This works for cases where the node is a TypeNode or TypeScript infers the Type
+ * via a generic resolution. For example:
+ * ```ts
+ * function someFn<T extends string>(input: T): {fontSize: T} {
+ *   return { fontSize: input }
+ * }
+ *
+ * // in styles
+ * ...someFn('12px')
+ * ```
+ *
+ * If we don't pass a type of the property given by `type.getProperties()`, TypeScript will
+ * resolve the type at the value node as `T` instead of `12px`. Allowing for a type override is
+ * useful when the caller may have more context about the type at a given node than we do.
+ */
+type = checker.getTypeAtLocation(node)) {
+    const varsKey = getVarsKeyFromNode(node);
+    if (vars[varsKey]) {
+        return vars[varsKey];
+    }
+    if (type.isStringLiteral()) {
+        // This isn't a component variable, it is a static CSS variable
+        return type.value;
+    }
+    if (type.isNumberLiteral()) {
+        return `${type.value}px`;
+    }
+    if (node && typescript_1.default.isPropertyAccessExpression(node)) {
+        return getPropertyAccessExpressionText(node);
+    }
+    return '';
+}
+function getModuleSpecifierFromDeclaration(node) {
+    if (!node) {
+        return undefined;
+    }
+    if (typescript_1.default.isImportSpecifier(node) && typescript_1.default.isStringLiteral(node.parent.parent.parent.moduleSpecifier)) {
+        return node.parent.parent.parent.moduleSpecifier.text;
+    }
+    return undefined;
+}
+function getStyleFromProperty(property, prefix, variables, checker) {
+    if (typescript_1.default.isPropertyAssignment(property)) {
+        // All properties should be non-objects
+        // {foo: 'bar'}
+        if (typescript_1.default.isIdentifier(property.name)) {
+            const value = parseStyleObjValue(property.initializer, variables, checker);
+            if (value) {
+                return { [property.name.text]: value };
+            }
+        }
+        if (typescript_1.default.isComputedPropertyName(property.name)) {
+            if (typescript_1.default.isPropertyAccessExpression(property.name.expression)) {
+                const value = parseStyleObjValue(property.initializer, variables, checker);
+                if (value) {
+                    // test if the property is a static value
+                    getPropertyAccessExpressionText(property.name.expression);
+                    const type = checker.getTypeAtLocation(property.name.expression);
+                    checker.typeToString(type);
+                    if (type.isStringLiteral()) {
+                        return { [type.value]: value };
+                    }
+                    else {
+                        const expressionText = getPropertyAccessExpressionText(property.name.expression);
+                        const [id, name] = getVariableNameParts(expressionText);
+                        return { [`--${prefix}-${canvas_kit_styling_1.slugify(id)}-${name}`]: value };
+                    }
+                }
+            }
+        }
+        // String literal property names are special selectors with more styles
+        // {'&:hover': {}}
+        if (typescript_1.default.isStringLiteral(property.name)) {
+            return {
+                [property.name.text]: parseStyleObjFromNode(property.initializer, prefix, variables, checker),
+            };
+        }
+    }
+    /**
+     * A spread assignment looks like:
+     *
+     * ```ts
+     * {
+     *   ...styles
+     * }
+     * ```
+     *
+     * https://ts-ast-viewer.com/#code/MYewdgzgLgBFCmBbADjAvDA3gMxCAXDAOQBGAhgE5EC+AUKJLAigEzpYB0Xzy1QA
+     */
+    if (typescript_1.default.isSpreadAssignment(property)) {
+        // Detect `focusRing` calls. This is temporary until we figure out a better way to do focus
+        // rings that doesn't require a special entry in the transform function.
+        //
+        // TODO: implement a fully working type resolver for CSS variables or remove support for them an
+        // remove all uses of `focusRing` from new styling code
+        if (typescript_1.default.isCallExpression(property.expression) &&
+            typescript_1.default.isIdentifier(property.expression.expression) &&
+            property.expression.expression.text === 'focusRing') {
+            const argumentObject = property.expression.arguments[0];
+            // defaults
+            const defaults = {
+                width: '2px',
+                separation: '0px',
+                inset: undefined,
+                innerColor: `var(${canvas_tokens_web_1.base.frenchVanilla100}, rgba(255,255,255,1))`,
+                outerColor: `var(${canvas_tokens_web_1.brand.common.focusOutline}, rgba(8,117,225,1))`,
+            };
+            if (argumentObject && typescript_1.default.isObjectLiteralExpression(argumentObject)) {
+                argumentObject.properties.forEach(property => {
+                    if (typescript_1.default.isPropertyAssignment(property) && typescript_1.default.isIdentifier(property.name)) {
+                        defaults[property.name.text] = parseStyleObjValue(property.initializer, variables, checker);
+                    }
+                });
+                let boxShadow;
+                switch (defaults.inset) {
+                    case 'outer':
+                        boxShadow = `inset 0 0 0 ${defaults.separation} ${defaults.outerColor}, inset 0 0 0 calc(${defaults.width} + ${defaults.separation}) ${defaults.innerColor}`;
+                        break;
+                    case 'inner':
+                        boxShadow = `inset 0 0 0 ${defaults.separation} ${defaults.innerColor}, 0 0 0 ${defaults.width} ${defaults.outerColor}`;
+                        break;
+                    default:
+                        boxShadow = `0 0 0 ${defaults.separation} ${defaults.innerColor}, 0 0 0 calc(${defaults.width} + ${defaults.separation}) ${defaults.outerColor}`;
+                        break;
+                }
+                return { boxShadow };
+            }
+        }
+        // Spread assignments are a bit complicated to use the AST to figure out, so we'll ask the
+        // TypeScript type checker.
+        const type = checker.getTypeAtLocation(property.expression);
+        checker.typeToString(type); //?
+        return parseStyleObjFromType(type, prefix, variables, checker);
+    }
+    return {};
+}
+/**
+ * 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.
+ */
+function parseStyleObjFromType(type, prefix, variables, checker) {
+    const styleObj = {};
+    // Gets all the properties of the type object
+    return type.getProperties().reduce((result, property) => {
+        const declaration = property.declarations[0];
+        if (declaration) {
+            const propType = checker.getTypeOfSymbolAtLocation(property, declaration);
+            return {
+                ...result,
+                [property.name]: getStyleValueFromType(declaration, propType, checker),
+            };
+        }
+        return result;
+    }, styleObj);
+}
+/**
+ * If the node is an `ObjectLiteralExpression`, we'll walk the `properties` of the AST node and
+ * create a style object for each property we find.
+ */
+function parseStyleObjFromNode(node, prefix, variables, checker) {
+    const styleObj = {};
+    if (typescript_1.default.isObjectLiteralExpression(node)) {
+        return node.properties.reduce((result, property) => {
+            return { ...result, ...getStyleFromProperty(property, prefix, variables, checker) };
+        }, styleObj);
+    }
+    return styleObj;
+}
+/**
+ * Creates an AST node representation of the passed in `styleObj`, but in the format of `{name:
+ * 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.
+ */
+function createStyleObjectNode(styleObj) {
+    const serialized = serialize_1.serializeStyles([styleObj]);
+    const styleText = serialized.styles;
+    const styleExpression = typescript_1.default.factory.createStringLiteral(styleText);
+    // create an emotion-optimized object: https://github.com/emotion-js/emotion/blob/f3b268f7c52103979402da919c9c0dd3f9e0e189/packages/serialize/src/index.js#L315-L322
+    // Looks like: `{name: $hash, styles: $styleText }`
+    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.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);
+}
+function styleTransformer(program, { prefix = 'css', variables = {}, fallbackFiles } = {
+    prefix: 'css',
+    variables: {},
+}) {
+    if (fallbackFiles) {
+        const files = fallbackFiles
+            .filter(file => file) // don't process empty files
+            .map(file => {
+            // Find the fully-qualified path name. This could error which should give "module not found" errors
+            return file.startsWith('.') ? node_path_1.default.resolve(process.cwd(), file) : require.resolve(file);
+        })
+            .map(file => typescript_1.default.sys.readFile(file) || '');
+        // eslint-disable-next-line no-param-reassign
+        variables = getCssVariables_1.getVariablesFromFiles(files);
+    }
+    const checker = program.getTypeChecker();
+    return context => {
+        const visit = node => {
+            // eslint-disable-next-line no-param-reassign
+            node = typescript_1.default.visitEachChild(node, visit, 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 === styleExpressionName &&
+                node.arguments.length > 0) {
+                // get the declaration of the symbol of the styleExpression
+                const symbol = checker.getSymbolAtLocation(node.expression);
+                const declaration = symbol === null || symbol === void 0 ? void 0 : symbol.declarations[0];
+                if (getModuleSpecifierFromDeclaration(declaration) === styleImportString) {
+                    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 = parseStyleObjFromNode(arg, prefix, variables, checker);
+                            return createStyleObjectNode(styleObj);
+                        }
+                        // 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 = parseStyleObjFromType(type, prefix, variables, checker);
+                            return createStyleObjectNode(styleObj);
+                        }
+                        return arg;
+                    });
+                    newArguments.forEach(argument => {
+                        // TypeScript isn't expecting us to mutate arguments arguments and when emitting will
+                        // try to do something where it checks the `parent` node of the argument. Using
+                        // `ts.factory.create*`, the `parent` is `undefined` and this check will throw an error.
+                        // In order to get past this error, we manually update the `parent` node of each
+                        // argument to reference the existing call expression. This allows TypeScript to fully
+                        // type check and/or emit.
+                        argument.parent = node;
+                    });
+                    /**
+                     * We're not supposed to mutate arguments since it is supposed to be read-only. But, if I
+                     * return a new callExpression, there is no parent and it is no longer linked to the
+                     * import module. This causes incorrect code when the module export type is `commonjs`.
+                     * For example:
+                     *
+                     * ```ts
+                     * // with new callExpression
+                     * const canvas_kit_styling_1 = require(...)
+                     *
+                     * createStyles({...})
+                     *
+                     * // if we instead mutate arguments
+                     * const canvas_kit_styling_1 = require(...)
+                     *
+                     * canvas_kit_styling_1.createStyles({...})
+                     * ```
+                     *
+                     * My best guess as to why it fails when creating a new callExpression is the node's
+                     * symbol declaration link gets lost. TypeScript then has no idea `createStyles` comes
+                     * from an `ImportDeclaration` declaration node and when emitting `commonjs`, it doesn't
+                     * prefix with the `canvas_kit_styling_1`. This is hacky, but the only thing that works
+                     * correctly.
+                     */
+                    node.arguments = newArguments;
+                    return node;
+                }
+            }
+            /**
+             * This will create a variable
+             */
+            if (typescript_1.default.isCallExpression(node) &&
+                typescript_1.default.isIdentifier(node.expression) &&
+                node.expression.text === createVarExpressionName) {
+                const id = canvas_kit_styling_1.slugify(getVarName(node));
+                const variables = node.arguments
+                    .map(arg => typescript_1.default.isStringLiteral(arg) && arg.text)
+                    .filter(Boolean);
+                variables.forEach(v => {
+                    vars[`${id}-${v}`] = `--${prefix}-${id}-${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)),
+                    ], false),
+                ]);
+            }
+            return node;
+        };
+        return node => typescript_1.default.visitNode(node, visit);
+    };
+}
+exports.default = styleTransformer;
+// This should only be used for tests
+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)])
+        .transformed.find(s => (s.fileName = fileName)) || source);
+}
+exports.transform = transform;
+function getVarName(node) {
+    const parent = node.parent;
+    if (typescript_1.default.isVariableDeclaration(parent) && typescript_1.default.isIdentifier(parent.name)) {
+        return parent.name.text;
+    }
+    if (typescript_1.default.isPropertyAssignment(parent) && typescript_1.default.isIdentifier(parent.name)) {
+        return `${getVarName(parent.parent)}-${parent.name.text}`;
+    }
+    return '';
+}
+/**
+ * Creates an error message around a node. It will look something like:
+ *
+ * ```
+ * Unknown type at: "fontSize".
+ * File: test.ts, Line: 6, Character: 17.
+ * const styles = createStyles({
+ *   fontSize: fontSize
+ *             ========
+ * })
+ * ```
+ */
+function getErrorMessage(node) {
+    const sourceFile = node.getSourceFile();
+    const { line } = node.getSourceFile().getLineAndCharacterOfPosition(node.pos);
+    const lineStarts = sourceFile.getLineStarts();
+    const lineStartIndex = lineStarts.findIndex(s => s >= node.pos) - 1;
+    // get a whole line's text given a lineStarts index
+    function getLine(sourceFile, startIndex) {
+        const lineStarts = sourceFile.getLineStarts();
+        return sourceFile.text.substring(lineStarts[Math.max(0, startIndex)], startIndex + 1 >= lineStarts.length ? undefined : lineStarts[startIndex + 1]);
+    }
+    // Create a full context message with source code and highlighting
+    const lineBefore = getLine(sourceFile, lineStartIndex - 1);
+    const lineCurrent = getLine(sourceFile, lineStartIndex);
+    const lineAfter = getLine(sourceFile, lineStartIndex + 1);
+    const highlightedLine = ''
+        .padStart(node.getStart() - lineStarts[lineStartIndex], ' ')
+        .padEnd(node.getStart() - lineStarts[lineStartIndex] + node.getWidth(), '=') + '\n';
+    /** This should look something like:
+     * ```
+     * const styles = createStyles({
+     *   fontSize: fontSize
+     *             ========
+     * })
+     * ```
+     */
+    const fullContext = lineBefore + lineCurrent + highlightedLine + lineAfter;
+    const character = node.getStart() - lineStarts[lineStartIndex] + 1;
+    return `File: ${sourceFile.fileName}:${line + 1}:${character}.\n${fullContext}`;
+}
+function getVariableNameParts(input) {
+    const parts = input.split('.');
+    // grab the last item in the array. This will also mutate the array, removing the last item
+    const variable = parts.pop();
+    return [parts.join('.'), variable];
+}
+function getVarsKeyFromNode(node) {
+    if (typescript_1.default.isIdentifier(node)) {
+        return canvas_kit_styling_1.slugify(node.text);
+    }
+    if (typescript_1.default.isPropertyAccessExpression(node) && typescript_1.default.isIdentifier(node.name)) {
+        return `${getVarsKeyFromNode(node.expression)}-${node.name.text}`;
+    }
+    return '';
+}

package/dist/es6/index.d.ts

@@ -0,0 +1,3 @@
+import styleTransformer from './lib/styleTransform';
+export default styleTransformer;
+//# sourceMappingURL=index.d.ts.map

package/dist/es6/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../index.ts"],"names":[],"mappings":"AAAA,OAAO,gBAAgB,MAAM,sBAAsB,CAAC;AAEpD,eAAe,gBAAgB,CAAC"}

package/dist/es6/index.js

@@ -0,0 +1,2 @@
+import styleTransformer from './lib/styleTransform';
+export default styleTransformer;

package/dist/es6/lib/getCssVariables.d.ts

@@ -0,0 +1,5 @@
+import { Element } from 'stylis';
+export declare function getVariablesFromFiles(files: string[]): Record<string, string>;
+export declare function extractVariables(blocks: Element[] | string, variables?: Record<string, string>): Record<string, string>;
+export declare function getFallbackVariable(variableName: string, variables: Record<string, string>): string | undefined;
+//# sourceMappingURL=getCssVariables.d.ts.map

package/dist/es6/lib/getCssVariables.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"getCssVariables.d.ts","sourceRoot":"","sources":["../../../lib/getCssVariables.ts"],"names":[],"mappings":"AAAA,OAAO,EAAU,OAAO,EAAC,MAAM,QAAQ,CAAC;AAExC,wBAAgB,qBAAqB,CAAC,KAAK,EAAE,MAAM,EAAE,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAK7E;AAED,wBAAgB,gBAAgB,CAC9B,MAAM,EAAE,OAAO,EAAE,GAAG,MAAM,EAC1B,SAAS,GAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAM,GACrC,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAuBxB;AAED,wBAAgB,mBAAmB,CACjC,YAAY,EAAE,MAAM,EACpB,SAAS,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,GAChC,MAAM,GAAG,SAAS,CAwBpB"}