@atlaskit/primitives/dist/es2019/xcss/xcss.js

Primitives are token-backed low-level building blocks.

/* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
import { css as cssEmotion } from '@emotion/react';

// eslint-disable-next-line import/no-extraneous-dependencies

import { backgroundColorMap, borderColorMap, borderRadiusMap, borderWidthMap, dimensionMap, layerMap, opacityMap, shadowMap, spaceMap, textColorMap } from './style-maps.partial';
const tokensMap = {
  backgroundColor: backgroundColorMap,
  blockSize: dimensionMap,
  borderBlockColor: borderColorMap,
  borderBlockEndColor: borderColorMap,
  borderBlockEndWidth: borderWidthMap,
  borderBlockStartColor: borderColorMap,
  borderBlockStartWidth: borderWidthMap,
  borderBlockWidth: borderWidthMap,
  borderBottomColor: borderColorMap,
  borderBottomLeftRadius: borderRadiusMap,
  borderBottomRightRadius: borderRadiusMap,
  borderBottomWidth: borderWidthMap,
  borderColor: borderColorMap,
  borderEndEndRadius: borderRadiusMap,
  borderEndStartRadius: borderRadiusMap,
  borderInlineColor: borderColorMap,
  borderInlineEndColor: borderColorMap,
  borderInlineEndWidth: borderWidthMap,
  borderInlineStartColor: borderColorMap,
  borderInlineStartWidth: borderWidthMap,
  borderInlineWidth: borderWidthMap,
  borderLeftColor: borderColorMap,
  borderLeftWidth: borderWidthMap,
  borderRadius: borderRadiusMap,
  borderRightColor: borderColorMap,
  borderRightWidth: borderWidthMap,
  borderStartEndRadius: borderRadiusMap,
  borderStartStartRadius: borderRadiusMap,
  borderTopColor: borderColorMap,
  borderTopLeftRadius: borderRadiusMap,
  borderTopRightRadius: borderRadiusMap,
  borderTopWidth: borderWidthMap,
  borderWidth: borderWidthMap,
  bottom: spaceMap,
  boxShadow: shadowMap,
  color: textColorMap,
  columnGap: spaceMap,
  gap: spaceMap,
  height: dimensionMap,
  inlineSize: dimensionMap,
  inset: spaceMap,
  insetBlock: spaceMap,
  insetBlockEnd: spaceMap,
  insetBlockStart: spaceMap,
  insetInline: spaceMap,
  insetInlineEnd: spaceMap,
  insetInlineStart: spaceMap,
  left: spaceMap,
  margin: spaceMap,
  marginBlock: spaceMap,
  marginBlockEnd: spaceMap,
  marginBlockStart: spaceMap,
  marginBottom: spaceMap,
  marginInline: spaceMap,
  marginInlineEnd: spaceMap,
  marginInlineStart: spaceMap,
  marginLeft: spaceMap,
  marginRight: spaceMap,
  marginTop: spaceMap,
  maxBlockSize: dimensionMap,
  maxHeight: dimensionMap,
  maxInlineSize: dimensionMap,
  maxWidth: dimensionMap,
  minBlockSize: dimensionMap,
  minHeight: dimensionMap,
  minInlineSize: dimensionMap,
  minWidth: dimensionMap,
  opacity: opacityMap,
  outlineColor: borderColorMap,
  outlineOffset: spaceMap,
  outlineWidth: borderWidthMap,
  padding: spaceMap,
  paddingBlock: spaceMap,
  paddingBlockEnd: spaceMap,
  paddingBlockStart: spaceMap,
  paddingBottom: spaceMap,
  paddingInline: spaceMap,
  paddingInlineEnd: spaceMap,
  paddingInlineStart: spaceMap,
  paddingLeft: spaceMap,
  paddingRight: spaceMap,
  paddingTop: spaceMap,
  right: spaceMap,
  rowGap: spaceMap,
  top: spaceMap,
  width: dimensionMap,
  zIndex: layerMap
};
const uniqueSymbol = Symbol('UNSAFE_INTERNAL_styles');
const isSafeEnvToThrow = () => typeof process === 'object' && typeof process.env === 'object' && process.env.NODE_ENV !== 'production';
const reNestedSelectors = /(\.|\s|&+|\*\>|#|\[.*\])/;
const safeSelectors = /^@media .*$|^::?.*$|^@supports .*$/;
const transformStyles = styleObj => {
  if (!styleObj || typeof styleObj !== 'object') {
    return styleObj;
  }

  // If styles are defined as a CSSObject[], recursively call on each element until we reach CSSObject
  if (Array.isArray(styleObj)) {
    return styleObj.map(transformStyles);
  }

  // Modifies styleObj in place. Be careful.
  Object.entries(styleObj).forEach(([key, value]) => {
    // If key is a pseudo class or a pseudo element, then value should be an object.
    // So, call transformStyles on the value
    if (typeof value === 'object' && safeSelectors.test(key)) {
      styleObj[key] = transformStyles(value);
      return;
    }
    if (isSafeEnvToThrow()) {
      // We don't support `.class`, `[data-testid]`, `> *`, `#some-id`
      if (reNestedSelectors.test(key)) {
        throw new Error(`Styles not supported for key '${key}'.`);
      }
    }

    // We have now dealt with all the special cases, so,
    // check whether what remains is a style property
    // that can be transformed.
    if (!(key in tokensMap)) {
      return;
    }
    const tokenValue = tokensMap[key][value];
    styleObj[key] = tokenValue !== null && tokenValue !== void 0 ? tokenValue : value;
  });
  return styleObj;
};
const baseXcss = style => {
  const transformedStyles = transformStyles(style);
  return {
    [uniqueSymbol]: cssEmotion(transformedStyles)
  };
};

/**
 * @internal used in primitives
 * @returns a collection of styles that can be applied to the respective primitive
 */

export const parseXcss = args => {
  if (Array.isArray(args)) {
    return args.map(x => x && parseXcss(x)).filter(Boolean);
  }
  const {
    [uniqueSymbol]: styles
  } = args;
  if (typeof process && process.env.NODE_ENV === 'development' && typeof styles === 'undefined') {
    throw new Error('Styles generated from unsafe source, use the `xcss` export from `@atlaskit/primitives`.');
  }
  return styles;
};

// Media queries should not contain nested media queries

// Pseudos should not contain nested pseudos, or media queries

/**
 * ### xcss
 *
 * `xcss` is a safer, tokens-first approach to CSS-in-JS. It allows token-backed values for
 * CSS application.
 *
 * ```tsx
 * const styles = xcss({
 *   padding: 'space.100'
 * })
 * ```
 */
export function xcss(style) {
  return baseXcss(style);
}