import originalStyled from "@emotion/styled";
import { keyframes, css } from "@emotion/react";
import { nanoid } from "nanoid";
/**
 * This function allows to use components as selector without using @emotion/babel-plugin.
 * The babel plugin replaces the call of every styled function in the codebase. Adding a target value
 * (using the options object in the second argument) which is derived from the name of the variable in which the
 * component is defined.
 * Ex:
 * const ComponentWrapper = styled.div`...`
 * will be transformed by babel in something similar to this
 * const ComponentWrapper = styled("div", {target: 'component-wrapper-cxf123'})`...`
 *
 * To bypass the need of the babel plugin, this function asign a random value to the property target.
 * With this approach, we lose the some ability to debug some styles.
 */

function customStyled(tag) {
  return originalStyled(tag, {
    target: "cl-".concat(nanoid(8))
  });
}
/**
 * Assign properties to call the function using styled.tag instead of styled("tag") like
 * in the original styled function
 */


Object.keys(originalStyled).forEach(function (key) {
  if (typeof key === "string") {
    customStyled[key] = customStyled(key);
  }
});
var styled = customStyled;
export { keyframes, css };
export default styled;