@atlaskit/navigation-system
Version:
The latest navigation system for Atlassian apps.
33 lines (31 loc) • 1.11 kB
JavaScript
import React from 'react';
// eslint-disable-next-line @atlaskit/design-system/no-emotion-primitives -- TODO: migrate to @atlaskit/primitives/compiled
const getCssStringValue = value => typeof value === 'number' ? `${value}px` : value;
export const DangerouslyHoistCssVarToDocumentRoot = ({
variableName,
value,
mediaQuery,
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>
*/
let style = `:root { ${variableName}: ${getCssStringValue(value)} }`;
if (mediaQuery && responsiveValue) {
style += ` ${mediaQuery} { :root { ${variableName}: ${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)
);
};