@atlaskit/navigation-system/dist/cjs/ui/page-layout/dangerously-hoist-css-var-to-document-root.js

The latest navigation system for Atlassian apps.

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.DangerouslyHoistCssVarToDocumentRoot = void 0;
var _react = _interopRequireDefault(require("react"));
// eslint-disable-next-line @atlaskit/design-system/no-emotion-primitives -- TODO: migrate to @atlaskit/primitives/compiled

var getCssStringValue = function getCssStringValue(value) {
  return typeof value === 'number' ? "".concat(value, "px") : value;
};
var DangerouslyHoistCssVarToDocumentRoot = exports.DangerouslyHoistCssVarToDocumentRoot = function DangerouslyHoistCssVarToDocumentRoot(_ref) {
  var variableName = _ref.variableName,
    value = _ref.value,
    mediaQuery = _ref.mediaQuery,
    responsiveValue = _ref.responsiveValue;
  /**
   * Note don't put multiple variables in multiple lines. eg
   * <style>
   *   {css1}
   *   {css2}
   * </style>
   *
   * React will insert an empty HTML comment in between the text in SSR.
   * This is not a valid tag and will break the page.
   * <style>foo<!-- -->bar</style>
   */
  var style = ":root { ".concat(variableName, ": ").concat(getCssStringValue(value), " }");
  if (mediaQuery && responsiveValue) {
    style += " ".concat(mediaQuery, " { :root { ").concat(variableName, ": ").concat(getCssStringValue(responsiveValue), " } }");
  }
  return (
    /*#__PURE__*/
    // Using a global style is required for SSR, as we can't use React hooks
    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-global-styles
    _react.default.createElement("style", null, style)
  );
};