1export function pathToHtmlSafeName(path: string) {
2  return path.replace(/[^a-zA-Z0-9_]/g, '_');
3}
4
5export function getHotReplaceTemplate(id: string) {
6  // In dev mode, we need to replace the style tag instead of appending it
7  // use the path as the expo-css-hmr attribute to find the style tag
8  // to replace.
9  const attr = JSON.stringify(pathToHtmlSafeName(id));
10  return `style.setAttribute('data-expo-css-hmr', ${attr});
11  const previousStyle = document.querySelector('[data-expo-css-hmr=${attr}]');
12  if (previousStyle) {
13    previousStyle.parentNode.removeChild(previousStyle);
14  }`;
15}
16
17export function wrapDevelopmentCSS(props: { src: string; filename: string }) {
18  return `(() => {
19  if (typeof document === 'undefined') {
20    return
21  }
22  const head = document.head || document.getElementsByTagName('head')[0];
23  const style = document.createElement('style');
24  ${getHotReplaceTemplate(props.filename)}
25  style.setAttribute('data-expo-loader', 'css');
26  head.appendChild(style);
27  const css = \`${props.src.replace(/`/, '`')}\`;
28  if (style.styleSheet){
29    style.styleSheet.cssText = css;
30  } else {
31    style.appendChild(document.createTextNode(css));
32  }
33})();`;
34}
35