@workday/canvas-kit-react/dist/es6/layout/lib/utils/mergeStyles.js

The parent module that contains all Workday Canvas Kit React components

import { handleCsProp } from '@workday/canvas-kit-styling';
import { boxStyleFn } from '../Box';
import { backgroundStyleFnConfigs } from './background';
import { borderStyleFnConfigs } from './border';
import { colorStyleFnConfigs } from './color';
import { depthStyleFnConfigs } from './depth';
import { flex, flexStyleFnConfigs } from './flex';
import { flexItemStyleFnConfigs } from './flexItem';
import { grid, gridStyleFnConfigs } from './grid';
import { gridItemStyleFnConfigs } from './gridItem';
import { layoutStyleFnConfigs } from './layout';
import { otherStyleFnConfigs } from './other';
import { positionStyleFnConfigs } from './position';
import { spaceStyleFnConfigs } from './space';
import { textStyleFnConfigs } from './text';
// get a hash of all the style props for a faster lookup
const stylePropHash = [
    ...backgroundStyleFnConfigs,
    ...borderStyleFnConfigs,
    ...colorStyleFnConfigs,
    ...depthStyleFnConfigs,
    ...flexStyleFnConfigs,
    ...flexItemStyleFnConfigs,
    ...gridStyleFnConfigs,
    ...gridItemStyleFnConfigs,
    ...layoutStyleFnConfigs,
    ...otherStyleFnConfigs,
    ...positionStyleFnConfigs,
    ...spaceStyleFnConfigs,
    ...textStyleFnConfigs,
].reduce((result, prop) => {
    //@ts-ignore
    result[prop.name] = true;
    return result;
}, {});
function isStyleProps(prop) {
    return stylePropHash[prop] || false;
}
/**
 * This function has the same signature as {@link handleCsProp} and also calls `handleCsProps`, but
 * adds support for style props. It can be used as a drop-in replacement for `handleCsProps`.
 */
export function mergeStyles(
/**
 * All the props to be spread onto an element. The `cs` prop will be removed an reduced to
 * `className` and `style` props which should be safe on every element.
 */
allProps, 
/**
 * Optional local style created by `createStyles`. Using this parameter, you can style your
 * element while supporting proper style merging order.
 */
localCs) {
    const styleProps = {};
    let shouldRuntimeMergeStyles = false;
    // separate style props from all other props. `cs` is special and should be forwarded to the
    // `handleCsProp` function.
    const elemProps = Object.keys(allProps).reduce((result, prop) => {
        if (isStyleProps(prop)) {
            shouldRuntimeMergeStyles = true;
            // @ts-ignore
            styleProps[prop] = allProps[prop];
        }
        else {
            // @ts-ignore
            result[prop] = allProps[prop];
        }
        return result;
    }, {});
    let styles = {};
    // We have style props currently and we will need to create style and merge with our `csToProps` to get the correct
    // merging order for styles. This includes box, flex and grid styles.
    if (shouldRuntimeMergeStyles) {
        styles = { ...boxStyleFn(styleProps), ...flex(styleProps), ...grid(styleProps) };
    }
    return handleCsProp(elemProps, [localCs, styles]);
}