{"version":3,"file":"index.mjs","sources":["../src/Context.ts","../src/Root.tsx","../src/Slot.tsx","../src/internal/css.ts","../src/Style.tsx","../src/styled.tsx"],"sourcesContent":["import { createContext } from \"react\";\n\nexport default createContext<{\n  scope: number;\n  shadowRoot: ShadowRoot;\n}>({\n  scope: null,\n  shadowRoot: null\n});\n","import * as React from \"react\";\nimport { createPortal } from \"react-dom\";\nimport Context from \"./Context\";\n\ntype Props<T extends keyof JSX.IntrinsicElements> = {\n  tag?: T;\n} & React.ComponentProps<T>;\n\ntype State = {\n  shadowRoot?: Node;\n};\n\nconst isNodeOrPolyfill =\n  typeof HTMLSlotElement === \"undefined\" ||\n  HTMLSlotElement.toString().indexOf(\"native code\") === -1;\n\nexport class Root<\n  T extends keyof JSX.IntrinsicElements = \"div\"\n> extends React.Component<Props<T>, State> {\n  static defaultProps: Props<\"div\"> = {\n    tag: \"div\"\n  };\n\n  // Number that increments for each used scope.\n  static scope: number = 0;\n\n  // The scope that was assigned to this instance.\n  scope: number = 0;\n\n  state = {\n    shadowRoot: null\n  };\n\n  constructor(props) {\n    super(props);\n    this.scope = ++Root.scope;\n  }\n\n  attachShadow = (e: HTMLElement): void => {\n    if (e) {\n      const shadowRoot = e.attachShadow({ mode: \"open\" });\n      this.setState({ shadowRoot });\n    }\n  };\n\n  render() {\n    const { attachShadow, props, state } = this;\n    const { tag, ...rest } = this.props;\n    const Tag: string = tag;\n    return (\n      <Context.Provider\n        value={{\n          scope: isNodeOrPolyfill ? this.scope : null,\n          shadowRoot: state.shadowRoot\n        }}\n      >\n        <Tag\n          {...rest}\n          __ssr_scope={isNodeOrPolyfill ? this.scope : undefined}\n          ref={attachShadow}\n        >\n          {state.shadowRoot\n            ? createPortal(props.children, state.shadowRoot)\n            : props.children}\n        </Tag>\n      </Context.Provider>\n    );\n  }\n}\n","import * as React from \"react\";\nimport { createPortal } from \"react-dom\";\nimport Context from \"./Context\";\n\ntype Props = {\n  children?: React.ReactNode;\n};\n\nexport class Slot extends React.Component<Props> {\n  static slot: number = 0;\n  slotName: string;\n  constructor(props: Props) {\n    super(props);\n    this.slotName = `slot-${Slot.slot++}`;\n  }\n  render() {\n    const { children } = this.props;\n    const childrenMapped = React.Children.map(\n      children,\n      (child: React.ReactChild) => {\n        return typeof child === \"string\" || typeof child === \"number\" ? (\n          <span slot={this.slotName}>{child}</span>\n        ) : (\n          React.cloneElement(child, {\n            slot: this.slotName\n          })\n        );\n      }\n    );\n    return (\n      <Context.Consumer>\n        {({ shadowRoot }) => (\n          <slot name={this.slotName}>\n            {shadowRoot\n              ? createPortal(childrenMapped, shadowRoot.host)\n              : childrenMapped}\n          </slot>\n        )}\n      </Context.Consumer>\n    );\n  }\n}\n","import { StyleProps, StyleRules, StyleValue } from \"./types\";\n\nconst regexHostContext = /:host-context\\(([^)]+)\\)/g;\nconst regexHostSelector = /:host\\(([^)]+)\\)/g;\n\nfunction dashcase(str: string) {\n  return str.replace(/([A-Z]{1})/g, (match, parens, offset) => {\n    return `${offset ? \"-\" : \"\"}${parens.toLowerCase()}`;\n  });\n}\n\nfunction ensurePx(value: number | string) {\n  return typeof value === \"number\" ? `${value}px` : value;\n}\n\nfunction ensureVal<T>(value: StyleValue, props: T) {\n  return typeof value === \"function\" ? value(props) : value;\n}\n\nfunction scopeSelector(selector: string, scope: number) {\n  const attr = `[__ssr_scope=\"${scope}\"]`;\n  const hostContextOrSelector = selector.substring(0, 6);\n\n  if (selector === \":host\") {\n    return attr;\n  }\n\n  if (hostContextOrSelector === \":host(\") {\n    return selector.replace(regexHostSelector, `${attr}$1`);\n  }\n\n  if (hostContextOrSelector === \":host-\") {\n    return selector.replace(regexHostContext, `$1 ${attr}`);\n  }\n\n  return `${attr} > ${selector}, ${attr} :not(slot) ${selector}`;\n}\n\nfunction styleValue<T>(value: StyleValue, props: T): string {\n  return Array.isArray(value)\n    ? value.map(v => styleValue(v, props)).join(\" \")\n    : ensurePx(ensureVal(value, props));\n}\n\nfunction styleProps<T>(css: StyleProps, props: T): string {\n  return Object.keys(css).reduce(\n    (p, c) => p + `${dashcase(c)}:${ensurePx(styleValue(css[c], props))};`,\n    \"\"\n  );\n}\n\nexport function styleRules<T>(\n  css: StyleRules,\n  props: T,\n  scope: number = null\n): string {\n  return Object.keys(css || {}).reduce((p, c) => {\n    const scopedSelector = scope ? scopeSelector(c, scope) : c;\n    return (\n      p + `${scopedSelector}{${styleProps(ensureVal(css[c], props), props)}}`\n    );\n  }, \"\");\n}\n","import * as React from \"react\";\nimport Context from \"./Context\";\nimport { styleRules } from \"./internal/css\";\nimport { StyleRules } from \"./internal/types\";\n\ntype Props = {\n  [s: string]: any;\n  children?: StyleRules;\n};\n\nexport function Style({ children, ...props }: Props) {\n  return (\n    <Context.Consumer>\n      {({ scope }) => {\n        const css = styleRules(children, props, scope);\n        return css ? <style dangerouslySetInnerHTML={{ __html: css }} /> : \"\";\n      }}\n    </Context.Consumer>\n  );\n}\n","import * as React from \"react\";\nimport { Root } from \"./Root\";\nimport { Slot } from \"./Slot\";\nimport { Style } from \"./Style\";\nimport { StyleRules } from \"./internal/types\";\n\ntype Tag = string | ((props: { [s: string]: any }) => string);\ntype Props = { children?: React.ReactNode };\n\nfunction createTag(name, props) {\n  return typeof name === \"function\" ? name(props) : name;\n}\n\nexport const styled = (tag: Tag = \"div\", css: StyleRules) => ({\n  children,\n  ...props\n}: Props) => {\n  return (\n    <Root tag={createTag(tag, props)} {...props}>\n      <Style {...props}>{css}</Style>\n      {children ? <Slot>{children}</Slot> : null}\n    </Root>\n  );\n};\n"],"names":["createContext","scope","shadowRoot","isNodeOrPolyfill","HTMLSlotElement","toString","indexOf","Root","props","e","attachShadow","mode","setState","React","this","state","tag","rest","Context","Provider","value","__ssr_scope","undefined","ref","createPortal","children","Slot","slotName","slot","childrenMapped","map","child","_this2","Consumer","name","host","regexHostContext","regexHostSelector","ensurePx","ensureVal","Style","css","Object","keys","reduce","p","c","scopedSelector","selector","attr","hostContextOrSelector","substring","replace","scopeSelector","str","match","parens","offset","toLowerCase","styleValue","Array","isArray","v","join","styleProps","styleRules","dangerouslySetInnerHTML","__html","createTag","styled"],"mappings":"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"}