@atlaskit/navigation-system
Version:
The latest navigation system for Atlassian apps.
34 lines (32 loc) • 1.33 kB
JavaScript
import React from '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;
};
export var 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.createElement("style", null, style)
);
};