css-tag-hook.js

import { useEffect, useState, useLayoutEffect, useRef } from '../lib/react.js';
import compileStyles from './compile-styles.js';

let globalIdentifier = 0;

function css(strings, ...expressions) {
  const styleElementRef = useRef(document.createElement('style'));
  const compiledStyles = compileStyles(strings, ...expressions);
  const [className, setClassName] = useState();

  useLayoutEffect(() => {
    setClassName(`sl-${globalIdentifier}`);
    globalIdentifier += 1;
  }, []);

  useEffect(() => {
    document.head.appendChild(styleElementRef.current);
    return () => {
      styleElementRef.current.remove();
    };
  }, []);

  useLayoutEffect(() => {
    if (className !== undefined) {
      const style = `.${className} {${compiledStyles}}`;
      styleElementRef.current.innerHTML = style;
    }
  }, [className, compiledStyles]);

  return className;
}

export default css;