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

Primitives are token-backed low-level building blocks.

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.xcss = xcss;
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
var _react = require("@emotion/react");
var _tokensMap = require("./tokens-map");
var _uniqueSymbol = require("./unique-symbol");
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766

var isSafeEnvToThrow = function isSafeEnvToThrow() {
  return (typeof process === "undefined" ? "undefined" : (0, _typeof2.default)(process)) === 'object' && (0, _typeof2.default)(process.env) === 'object' && process.env.NODE_ENV !== 'production';
};
var reNestedSelectors = /(\.|\s|&+|\*\>|#|\[.*\])/;
var safeSelectors = /^@media .*$|^::?.*$|^@supports .*$/;
var _transformStyles = function transformStyles(styleObj) {
  if (!styleObj || (0, _typeof2.default)(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(function (_ref) {
    var _ref2 = (0, _slicedToArray2.default)(_ref, 2),
      key = _ref2[0],
      value = _ref2[1];
    // If key is a pseudo class or a pseudo element, then value should be an object.
    // So, call transformStyles on the value
    if ((0, _typeof2.default)(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 '".concat(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.tokensMap)) {
      return;
    }
    var tokenValue = _tokensMap.tokensMap[key][value];
    styleObj[key] = tokenValue !== null && tokenValue !== void 0 ? tokenValue : value;
  });
  return styleObj;
};
var baseXcss = function baseXcss(style) {
  var transformedStyles = _transformStyles(style);
  return (0, _defineProperty2.default)({}, _uniqueSymbol.uniqueSymbol, (0, _react.css)(transformedStyles));
};

// Media queries should not contain nested media queries

// Allow only a specific subset of chained selectors to maintain workable TypeScript performance

// 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'
 * })
 * ```
 *
 * @deprecated Use `@atlaskit/css` with `@atlaskit/primitives/compiled` instead.
 * {@link https://hello.atlassian.net/wiki/spaces/DST/pages/4992259434/Guidance+Migrating+to+atlaskit+css+from+xcss Internal documentation for migration; no external access}
 */
// eslint-disable-next-line @atlaskit/volt-strict-mode/no-multiple-exports
function xcss(style) {
  return baseXcss(style);
}