@linaria/react 3.0.0-beta.15 → 3.0.0-beta.17

package/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [3.0.0-beta.17](https://github.com/callstack/linaria/compare/v3.0.0-beta.16...v3.0.0-beta.17) (2021-12-27)
+
+
+### Bug Fixes
+
+* **react:** refactored types for styled function (fixes [#872](https://github.com/callstack/linaria/issues/872)) ([#887](https://github.com/callstack/linaria/issues/887)) ([7b8b129](https://github.com/callstack/linaria/commit/7b8b12937f9a0d1730d908e7cebad1684ccb03c3))
+
+
+
+
+
 # [3.0.0-beta.15](https://github.com/callstack/linaria/compare/v3.0.0-beta.14...v3.0.0-beta.15) (2021-11-29)
 
 

package/esm/styled.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/styled.ts"],"names":["React","validAttr","cx","restOp","obj","keys","res","key","indexOf","warnIfInvalid","value","componentName","process","env","NODE_ENV","isFinite","stringified","JSON","stringify","String","console","warn","styled","tag","options","Array","isArray","Error","render","props","ref","as","component","class","className","rest","filteredProps","vars","style","name","variable","result","unit","ownStyle","Object","length","forEach","__linaria","createElement","Result","forwardRef","innerRef","displayName","extends","Proxy","get","o","prop"],"mappings":"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","sourcesContent":["/**\n * This file contains an runtime version of `styled` component. Responsibilities of the component are:\n * - returns ReactElement based on HTML tag used with `styled` or custom React Component\n * - injects classNames for the returned component\n * - injects CSS variables used to define dynamic styles based on props\n */\nimport React from 'react';\nimport validAttr from '@emotion/is-prop-valid';\nimport { cx } from '@linaria/core';\nimport type { CSSProperties, StyledMeta } from '@linaria/core';\n\nexport type NoInfer<A extends any> = [A][A extends any ? 0 : never];\n\ntype Options = {\n  name: string;\n  class: string;\n  vars?: {\n    [key: string]: [\n      string | number | ((props: unknown) => string | number),\n      string | void\n    ];\n  };\n};\n\ninterface CustomOmit {\n  <T extends object, K extends [...(keyof T)[]]>(obj: T, keys: K): {\n    [K2 in Exclude<keyof T, K[number]>]: T[K2];\n  };\n}\n\n// Workaround for rest operator\nexport const restOp: CustomOmit = (obj, keys) => {\n  const res = {} as { [K in keyof typeof obj]: typeof obj[K] };\n  let key: keyof typeof obj;\n  for (key in obj) {\n    if (keys.indexOf(key) === -1) {\n      res[key] = obj[key];\n    }\n  }\n  return res;\n};\n\nconst warnIfInvalid = (value: any, componentName: string) => {\n  if (process.env.NODE_ENV !== 'production') {\n    if (\n      typeof value === 'string' ||\n      // eslint-disable-next-line no-self-compare\n      (typeof value === 'number' && isFinite(value))\n    ) {\n      return;\n    }\n\n    const stringified =\n      typeof value === 'object' ? JSON.stringify(value) : String(value);\n\n    // eslint-disable-next-line no-console\n    console.warn(\n      `An interpolation evaluated to '${stringified}' in the component '${componentName}', which is probably a mistake. You should explicitly cast or transform the value to a string.`\n    );\n  }\n};\n\ninterface IProps {\n  className?: string;\n  style?: Record<string, string>;\n  [props: string]: unknown;\n}\n\n// If styled wraps custom component, that component should have className property\nfunction styled<TConstructor extends React.ComponentType<any>>(\n  tag: TConstructor extends React.ComponentType<infer T>\n    ? [T] extends [{ className?: string | undefined }]\n      ? TConstructor\n      : never\n    : never\n): ComponentStyledTag<TConstructor>;\nfunction styled<T>(\n  tag: [T] extends [{ className?: string | undefined }]\n    ? React.ComponentType<T>\n    : never\n): ComponentStyledTag<T>;\nfunction styled<TName extends keyof JSX.IntrinsicElements>(\n  tag: TName\n): HtmlStyledTag<TName>;\nfunction styled(tag: any): any {\n  return (options: Options) => {\n    if (process.env.NODE_ENV !== 'production') {\n      if (Array.isArray(options)) {\n        // We received a strings array since it's used as a tag\n        throw new Error(\n          'Using the \"styled\" tag in runtime is not supported. Make sure you have set up the Babel plugin correctly. See https://github.com/callstack/linaria#setup'\n        );\n      }\n    }\n\n    const render = (props: any, ref: any) => {\n      const { as: component = tag, class: className } = props;\n      const rest = restOp(props, ['as', 'class']);\n      let filteredProps: IProps;\n\n      // Check if it's an HTML tag and not a custom element\n      if (typeof component === 'string' && component.indexOf('-') === -1) {\n        filteredProps = {} as { [key: string]: any };\n\n        // eslint-disable-next-line guard-for-in\n        for (const key in rest) {\n          if (key === 'as' || validAttr(key)) {\n            // Don't pass through invalid attributes to HTML elements\n            filteredProps[key] = rest[key];\n          }\n        }\n      } else {\n        filteredProps = rest;\n      }\n\n      filteredProps.ref = ref;\n      filteredProps.className = cx(\n        filteredProps.className || className,\n        options.class\n      );\n\n      const { vars } = options;\n\n      if (vars) {\n        const style: { [key: string]: string } = {};\n\n        // eslint-disable-next-line guard-for-in\n        for (const name in vars) {\n          const variable = vars[name];\n          const result = variable[0];\n          const unit = variable[1] || '';\n          const value = typeof result === 'function' ? result(props) : result;\n\n          warnIfInvalid(value, options.name);\n\n          style[`--${name}`] = `${value}${unit}`;\n        }\n\n        const ownStyle = filteredProps.style || {};\n        const keys = Object.keys(ownStyle);\n        if (keys.length > 0) {\n          keys.forEach((key) => {\n            style[key] = ownStyle[key];\n          });\n        }\n\n        filteredProps.style = style;\n      }\n\n      if ((tag as any).__linaria && tag !== component) {\n        // If the underlying tag is a styled component, forward the `as` prop\n        // Otherwise the styles from the underlying component will be ignored\n        filteredProps.as = component;\n\n        return React.createElement(tag, filteredProps);\n      }\n      return React.createElement(component, filteredProps);\n    };\n\n    const Result = React.forwardRef\n      ? React.forwardRef(render)\n      : // React.forwardRef won't available on older React versions and in Preact\n        // Fallback to a innerRef prop in that case\n        (props: any) => {\n          const rest = restOp(props, ['innerRef']);\n          return render(rest, props.innerRef);\n        };\n\n    (Result as any).displayName = options.name;\n\n    // These properties will be read by the babel plugin for interpolation\n    (Result as any).__linaria = {\n      className: options.class,\n      extends: tag,\n    };\n\n    return Result;\n  };\n}\n\ntype StyledComponent<T> = StyledMeta &\n  ([T] extends [React.FunctionComponent<any>]\n    ? T\n    : React.FunctionComponent<T & { as?: React.ElementType }>);\n\ntype StaticPlaceholder = string | number | CSSProperties | StyledMeta;\n\ntype HtmlStyledTag<TName extends keyof JSX.IntrinsicElements> = <\n  TAdditionalProps = {}\n>(\n  strings: TemplateStringsArray,\n  ...exprs: Array<\n    | StaticPlaceholder\n    | ((\n        // Without Omit here TS tries to infer TAdditionalProps\n        // from a component passed for interpolation\n        props: JSX.IntrinsicElements[TName] & Omit<TAdditionalProps, never>\n      ) => string | number)\n  >\n) => StyledComponent<JSX.IntrinsicElements[TName] & TAdditionalProps>;\n\ntype ComponentStyledTag<T> = <\n  OwnProps = {},\n  TrgProps = [T] extends [React.FunctionComponent<infer TProps>] ? TProps : T\n>(\n  strings: TemplateStringsArray,\n  // Expressions can contain functions only if wrapped component has style property\n  ...exprs: TrgProps extends { style?: React.CSSProperties | undefined }\n    ? Array<\n        | StaticPlaceholder\n        | ((props: NoInfer<OwnProps & TrgProps>) => string | number)\n      >\n    : StaticPlaceholder[]\n) => keyof OwnProps extends never\n  ? [T] extends [React.FunctionComponent<any>]\n    ? StyledMeta & T\n    : StyledComponent<TrgProps>\n  : StyledComponent<OwnProps & TrgProps>;\n\ntype StyledJSXIntrinsics = {\n  readonly [P in keyof JSX.IntrinsicElements]: HtmlStyledTag<P>;\n};\n\nexport type Styled = typeof styled & StyledJSXIntrinsics;\n\nexport default (process.env.NODE_ENV !== 'production'\n  ? new Proxy(styled, {\n      get(o, prop: keyof JSX.IntrinsicElements) {\n        return o(prop);\n      },\n    })\n  : styled) as Styled;\n"],"file":"styled.js"}
+{"version":3,"sources":["../src/styled.ts"],"names":["React","validAttr","cx","restOp","obj","keys","res","key","indexOf","warnIfInvalid","value","componentName","process","env","NODE_ENV","isFinite","stringified","JSON","stringify","String","console","warn","styled","tag","options","Array","isArray","Error","render","props","ref","as","component","class","className","rest","filteredProps","vars","style","name","variable","result","unit","ownStyle","Object","length","forEach","__linaria","createElement","Result","forwardRef","innerRef","displayName","extends","Proxy","get","o","prop"],"mappings":"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","sourcesContent":["/**\n * This file contains an runtime version of `styled` component. Responsibilities of the component are:\n * - returns ReactElement based on HTML tag used with `styled` or custom React Component\n * - injects classNames for the returned component\n * - injects CSS variables used to define dynamic styles based on props\n */\nimport React from 'react';\nimport validAttr from '@emotion/is-prop-valid';\nimport { cx } from '@linaria/core';\nimport type { CSSProperties, StyledMeta } from '@linaria/core';\n\nexport type NoInfer<A extends any> = [A][A extends any ? 0 : never];\n\ntype Component<TProps> =\n  | ((props: TProps) => unknown)\n  | { new (props: TProps): unknown };\n\ntype Has<T, TObj> = [T] extends [TObj] ? T : T & TObj;\n\ntype Options = {\n  name: string;\n  class: string;\n  vars?: {\n    [key: string]: [\n      string | number | ((props: unknown) => string | number),\n      string | void\n    ];\n  };\n};\n\n// Workaround for rest operator\nexport const restOp = <T extends object, TKeys extends [...(keyof T)[]]>(\n  obj: T,\n  keys: TKeys\n) => {\n  const res = {} as { [K in keyof T]: T[K] };\n  let key: keyof typeof obj;\n  for (key in obj) {\n    if (keys.indexOf(key) === -1) {\n      res[key] = obj[key];\n    }\n  }\n  return res;\n};\n\nconst warnIfInvalid = (value: any, componentName: string) => {\n  if (process.env.NODE_ENV !== 'production') {\n    if (\n      typeof value === 'string' ||\n      // eslint-disable-next-line no-self-compare\n      (typeof value === 'number' && isFinite(value))\n    ) {\n      return;\n    }\n\n    const stringified =\n      typeof value === 'object' ? JSON.stringify(value) : String(value);\n\n    // eslint-disable-next-line no-console\n    console.warn(\n      `An interpolation evaluated to '${stringified}' in the component '${componentName}', which is probably a mistake. You should explicitly cast or transform the value to a string.`\n    );\n  }\n};\n\ninterface IProps {\n  className?: string;\n  style?: Record<string, string>;\n  [props: string]: unknown;\n}\n\n// Property-based interpolation is allowed only if `style` property exists\nfunction styled<\n  TProps extends Has<TMustHave, { style?: React.CSSProperties }>,\n  TMustHave extends { style?: React.CSSProperties },\n  TConstructor extends Component<TProps>\n>(\n  componentWithStyle: TConstructor & Component<TProps>\n): ComponentStyledTagWithInterpolation<TProps, TConstructor>;\n// If styled wraps custom component, that component should have className property\nfunction styled<\n  TProps extends Has<TMustHave, { className?: string }>,\n  TMustHave extends { className?: string },\n  TConstructor extends Component<TProps>\n>(\n  componentWithoutStyle: TConstructor & Component<TProps>\n): ComponentStyledTagWithoutInterpolation<TConstructor>;\nfunction styled<TName extends keyof JSX.IntrinsicElements>(\n  tag: TName\n): HtmlStyledTag<TName>;\nfunction styled(\n  component: 'The target component should have a className prop'\n): never;\nfunction styled(tag: any): any {\n  return (options: Options) => {\n    if (process.env.NODE_ENV !== 'production') {\n      if (Array.isArray(options)) {\n        // We received a strings array since it's used as a tag\n        throw new Error(\n          'Using the \"styled\" tag in runtime is not supported. Make sure you have set up the Babel plugin correctly. See https://github.com/callstack/linaria#setup'\n        );\n      }\n    }\n\n    const render = (props: any, ref: any) => {\n      const { as: component = tag, class: className } = props;\n      const rest = restOp(props, ['as', 'class']);\n      let filteredProps: IProps;\n\n      // Check if it's an HTML tag and not a custom element\n      if (typeof component === 'string' && component.indexOf('-') === -1) {\n        filteredProps = {} as { [key: string]: any };\n\n        // eslint-disable-next-line guard-for-in\n        for (const key in rest) {\n          if (key === 'as' || validAttr(key)) {\n            // Don't pass through invalid attributes to HTML elements\n            filteredProps[key] = rest[key];\n          }\n        }\n      } else {\n        filteredProps = rest;\n      }\n\n      filteredProps.ref = ref;\n      filteredProps.className = cx(\n        filteredProps.className || className,\n        options.class\n      );\n\n      const { vars } = options;\n\n      if (vars) {\n        const style: { [key: string]: string } = {};\n\n        // eslint-disable-next-line guard-for-in\n        for (const name in vars) {\n          const variable = vars[name];\n          const result = variable[0];\n          const unit = variable[1] || '';\n          const value = typeof result === 'function' ? result(props) : result;\n\n          warnIfInvalid(value, options.name);\n\n          style[`--${name}`] = `${value}${unit}`;\n        }\n\n        const ownStyle = filteredProps.style || {};\n        const keys = Object.keys(ownStyle);\n        if (keys.length > 0) {\n          keys.forEach((key) => {\n            style[key] = ownStyle[key];\n          });\n        }\n\n        filteredProps.style = style;\n      }\n\n      if ((tag as any).__linaria && tag !== component) {\n        // If the underlying tag is a styled component, forward the `as` prop\n        // Otherwise the styles from the underlying component will be ignored\n        filteredProps.as = component;\n\n        return React.createElement(tag, filteredProps);\n      }\n      return React.createElement(component, filteredProps);\n    };\n\n    const Result = React.forwardRef\n      ? React.forwardRef(render)\n      : // React.forwardRef won't available on older React versions and in Preact\n        // Fallback to a innerRef prop in that case\n        (props: any) => {\n          const rest = restOp(props, ['innerRef']);\n          return render(rest, props.innerRef);\n        };\n\n    (Result as any).displayName = options.name;\n\n    // These properties will be read by the babel plugin for interpolation\n    (Result as any).__linaria = {\n      className: options.class,\n      extends: tag,\n    };\n\n    return Result;\n  };\n}\n\ntype StyledComponent<T> = StyledMeta &\n  ([T] extends [React.FunctionComponent<any>]\n    ? T\n    : React.FunctionComponent<T & { as?: React.ElementType }>);\n\ntype StaticPlaceholder = string | number | CSSProperties | StyledMeta;\n\ntype HtmlStyledTag<TName extends keyof JSX.IntrinsicElements> = <\n  TAdditionalProps = {}\n>(\n  strings: TemplateStringsArray,\n  ...exprs: Array<\n    | StaticPlaceholder\n    | ((\n        // Without Omit here TS tries to infer TAdditionalProps\n        // from a component passed for interpolation\n        props: JSX.IntrinsicElements[TName] & Omit<TAdditionalProps, never>\n      ) => string | number)\n  >\n) => StyledComponent<JSX.IntrinsicElements[TName] & TAdditionalProps>;\n\ntype ComponentStyledTagWithoutInterpolation<TOrigCmp> = (\n  strings: TemplateStringsArray,\n  ...exprs: Array<\n    | StaticPlaceholder\n    | ((props: 'The target component should have a style prop') => never)\n  >\n) => StyledMeta & TOrigCmp;\n\ntype ComponentStyledTagWithInterpolation<TTrgProps, TOrigCmp> = <OwnProps = {}>(\n  strings: TemplateStringsArray,\n  ...exprs: Array<\n    | StaticPlaceholder\n    | ((props: NoInfer<OwnProps & TTrgProps>) => string | number)\n  >\n) => keyof OwnProps extends never\n  ? StyledMeta & TOrigCmp\n  : StyledComponent<OwnProps & TTrgProps>;\n\ntype StyledJSXIntrinsics = {\n  readonly [P in keyof JSX.IntrinsicElements]: HtmlStyledTag<P>;\n};\n\nexport type Styled = typeof styled & StyledJSXIntrinsics;\n\nexport default (process.env.NODE_ENV !== 'production'\n  ? new Proxy(styled, {\n      get(o, prop: keyof JSX.IntrinsicElements) {\n        return o(prop);\n      },\n    })\n  : styled) as Styled;\n"],"file":"styled.js"}

package/lib/styled.js

@@ -92,11 +92,10 @@ function styled(tag) {
         }
 
         var ownStyle = filteredProps.style || {};
+        var keys = Object.keys(ownStyle);
 
-        var _keys = Object.keys(ownStyle);
-
-        if (_keys.length > 0) {
-          _keys.forEach(function (key) {
+        if (keys.length > 0) {
+          keys.forEach(function (key) {
             style[key] = ownStyle[key];
           });
         }

package/lib/styled.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/styled.ts"],"names":["restOp","obj","keys","res","key","indexOf","warnIfInvalid","value","componentName","process","env","NODE_ENV","isFinite","stringified","JSON","stringify","String","console","warn","styled","tag","options","Array","isArray","Error","render","props","ref","as","component","className","class","rest","filteredProps","vars","style","name","variable","result","unit","ownStyle","Object","length","forEach","__linaria","React","createElement","Result","forwardRef","innerRef","displayName","extends","Proxy","get","o","prop"],"mappings":"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","sourcesContent":["/**\n * This file contains an runtime version of `styled` component. Responsibilities of the component are:\n * - returns ReactElement based on HTML tag used with `styled` or custom React Component\n * - injects classNames for the returned component\n * - injects CSS variables used to define dynamic styles based on props\n */\nimport React from 'react';\nimport validAttr from '@emotion/is-prop-valid';\nimport { cx } from '@linaria/core';\nimport type { CSSProperties, StyledMeta } from '@linaria/core';\n\nexport type NoInfer<A extends any> = [A][A extends any ? 0 : never];\n\ntype Options = {\n  name: string;\n  class: string;\n  vars?: {\n    [key: string]: [\n      string | number | ((props: unknown) => string | number),\n      string | void\n    ];\n  };\n};\n\ninterface CustomOmit {\n  <T extends object, K extends [...(keyof T)[]]>(obj: T, keys: K): {\n    [K2 in Exclude<keyof T, K[number]>]: T[K2];\n  };\n}\n\n// Workaround for rest operator\nexport const restOp: CustomOmit = (obj, keys) => {\n  const res = {} as { [K in keyof typeof obj]: typeof obj[K] };\n  let key: keyof typeof obj;\n  for (key in obj) {\n    if (keys.indexOf(key) === -1) {\n      res[key] = obj[key];\n    }\n  }\n  return res;\n};\n\nconst warnIfInvalid = (value: any, componentName: string) => {\n  if (process.env.NODE_ENV !== 'production') {\n    if (\n      typeof value === 'string' ||\n      // eslint-disable-next-line no-self-compare\n      (typeof value === 'number' && isFinite(value))\n    ) {\n      return;\n    }\n\n    const stringified =\n      typeof value === 'object' ? JSON.stringify(value) : String(value);\n\n    // eslint-disable-next-line no-console\n    console.warn(\n      `An interpolation evaluated to '${stringified}' in the component '${componentName}', which is probably a mistake. You should explicitly cast or transform the value to a string.`\n    );\n  }\n};\n\ninterface IProps {\n  className?: string;\n  style?: Record<string, string>;\n  [props: string]: unknown;\n}\n\n// If styled wraps custom component, that component should have className property\nfunction styled<TConstructor extends React.ComponentType<any>>(\n  tag: TConstructor extends React.ComponentType<infer T>\n    ? [T] extends [{ className?: string | undefined }]\n      ? TConstructor\n      : never\n    : never\n): ComponentStyledTag<TConstructor>;\nfunction styled<T>(\n  tag: [T] extends [{ className?: string | undefined }]\n    ? React.ComponentType<T>\n    : never\n): ComponentStyledTag<T>;\nfunction styled<TName extends keyof JSX.IntrinsicElements>(\n  tag: TName\n): HtmlStyledTag<TName>;\nfunction styled(tag: any): any {\n  return (options: Options) => {\n    if (process.env.NODE_ENV !== 'production') {\n      if (Array.isArray(options)) {\n        // We received a strings array since it's used as a tag\n        throw new Error(\n          'Using the \"styled\" tag in runtime is not supported. Make sure you have set up the Babel plugin correctly. See https://github.com/callstack/linaria#setup'\n        );\n      }\n    }\n\n    const render = (props: any, ref: any) => {\n      const { as: component = tag, class: className } = props;\n      const rest = restOp(props, ['as', 'class']);\n      let filteredProps: IProps;\n\n      // Check if it's an HTML tag and not a custom element\n      if (typeof component === 'string' && component.indexOf('-') === -1) {\n        filteredProps = {} as { [key: string]: any };\n\n        // eslint-disable-next-line guard-for-in\n        for (const key in rest) {\n          if (key === 'as' || validAttr(key)) {\n            // Don't pass through invalid attributes to HTML elements\n            filteredProps[key] = rest[key];\n          }\n        }\n      } else {\n        filteredProps = rest;\n      }\n\n      filteredProps.ref = ref;\n      filteredProps.className = cx(\n        filteredProps.className || className,\n        options.class\n      );\n\n      const { vars } = options;\n\n      if (vars) {\n        const style: { [key: string]: string } = {};\n\n        // eslint-disable-next-line guard-for-in\n        for (const name in vars) {\n          const variable = vars[name];\n          const result = variable[0];\n          const unit = variable[1] || '';\n          const value = typeof result === 'function' ? result(props) : result;\n\n          warnIfInvalid(value, options.name);\n\n          style[`--${name}`] = `${value}${unit}`;\n        }\n\n        const ownStyle = filteredProps.style || {};\n        const keys = Object.keys(ownStyle);\n        if (keys.length > 0) {\n          keys.forEach((key) => {\n            style[key] = ownStyle[key];\n          });\n        }\n\n        filteredProps.style = style;\n      }\n\n      if ((tag as any).__linaria && tag !== component) {\n        // If the underlying tag is a styled component, forward the `as` prop\n        // Otherwise the styles from the underlying component will be ignored\n        filteredProps.as = component;\n\n        return React.createElement(tag, filteredProps);\n      }\n      return React.createElement(component, filteredProps);\n    };\n\n    const Result = React.forwardRef\n      ? React.forwardRef(render)\n      : // React.forwardRef won't available on older React versions and in Preact\n        // Fallback to a innerRef prop in that case\n        (props: any) => {\n          const rest = restOp(props, ['innerRef']);\n          return render(rest, props.innerRef);\n        };\n\n    (Result as any).displayName = options.name;\n\n    // These properties will be read by the babel plugin for interpolation\n    (Result as any).__linaria = {\n      className: options.class,\n      extends: tag,\n    };\n\n    return Result;\n  };\n}\n\ntype StyledComponent<T> = StyledMeta &\n  ([T] extends [React.FunctionComponent<any>]\n    ? T\n    : React.FunctionComponent<T & { as?: React.ElementType }>);\n\ntype StaticPlaceholder = string | number | CSSProperties | StyledMeta;\n\ntype HtmlStyledTag<TName extends keyof JSX.IntrinsicElements> = <\n  TAdditionalProps = {}\n>(\n  strings: TemplateStringsArray,\n  ...exprs: Array<\n    | StaticPlaceholder\n    | ((\n        // Without Omit here TS tries to infer TAdditionalProps\n        // from a component passed for interpolation\n        props: JSX.IntrinsicElements[TName] & Omit<TAdditionalProps, never>\n      ) => string | number)\n  >\n) => StyledComponent<JSX.IntrinsicElements[TName] & TAdditionalProps>;\n\ntype ComponentStyledTag<T> = <\n  OwnProps = {},\n  TrgProps = [T] extends [React.FunctionComponent<infer TProps>] ? TProps : T\n>(\n  strings: TemplateStringsArray,\n  // Expressions can contain functions only if wrapped component has style property\n  ...exprs: TrgProps extends { style?: React.CSSProperties | undefined }\n    ? Array<\n        | StaticPlaceholder\n        | ((props: NoInfer<OwnProps & TrgProps>) => string | number)\n      >\n    : StaticPlaceholder[]\n) => keyof OwnProps extends never\n  ? [T] extends [React.FunctionComponent<any>]\n    ? StyledMeta & T\n    : StyledComponent<TrgProps>\n  : StyledComponent<OwnProps & TrgProps>;\n\ntype StyledJSXIntrinsics = {\n  readonly [P in keyof JSX.IntrinsicElements]: HtmlStyledTag<P>;\n};\n\nexport type Styled = typeof styled & StyledJSXIntrinsics;\n\nexport default (process.env.NODE_ENV !== 'production'\n  ? new Proxy(styled, {\n      get(o, prop: keyof JSX.IntrinsicElements) {\n        return o(prop);\n      },\n    })\n  : styled) as Styled;\n"],"file":"styled.js"}
+{"version":3,"sources":["../src/styled.ts"],"names":["restOp","obj","keys","res","key","indexOf","warnIfInvalid","value","componentName","process","env","NODE_ENV","isFinite","stringified","JSON","stringify","String","console","warn","styled","tag","options","Array","isArray","Error","render","props","ref","as","component","className","class","rest","filteredProps","vars","style","name","variable","result","unit","ownStyle","Object","length","forEach","__linaria","React","createElement","Result","forwardRef","innerRef","displayName","extends","Proxy","get","o","prop"],"mappings":"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","sourcesContent":["/**\n * This file contains an runtime version of `styled` component. Responsibilities of the component are:\n * - returns ReactElement based on HTML tag used with `styled` or custom React Component\n * - injects classNames for the returned component\n * - injects CSS variables used to define dynamic styles based on props\n */\nimport React from 'react';\nimport validAttr from '@emotion/is-prop-valid';\nimport { cx } from '@linaria/core';\nimport type { CSSProperties, StyledMeta } from '@linaria/core';\n\nexport type NoInfer<A extends any> = [A][A extends any ? 0 : never];\n\ntype Component<TProps> =\n  | ((props: TProps) => unknown)\n  | { new (props: TProps): unknown };\n\ntype Has<T, TObj> = [T] extends [TObj] ? T : T & TObj;\n\ntype Options = {\n  name: string;\n  class: string;\n  vars?: {\n    [key: string]: [\n      string | number | ((props: unknown) => string | number),\n      string | void\n    ];\n  };\n};\n\n// Workaround for rest operator\nexport const restOp = <T extends object, TKeys extends [...(keyof T)[]]>(\n  obj: T,\n  keys: TKeys\n) => {\n  const res = {} as { [K in keyof T]: T[K] };\n  let key: keyof typeof obj;\n  for (key in obj) {\n    if (keys.indexOf(key) === -1) {\n      res[key] = obj[key];\n    }\n  }\n  return res;\n};\n\nconst warnIfInvalid = (value: any, componentName: string) => {\n  if (process.env.NODE_ENV !== 'production') {\n    if (\n      typeof value === 'string' ||\n      // eslint-disable-next-line no-self-compare\n      (typeof value === 'number' && isFinite(value))\n    ) {\n      return;\n    }\n\n    const stringified =\n      typeof value === 'object' ? JSON.stringify(value) : String(value);\n\n    // eslint-disable-next-line no-console\n    console.warn(\n      `An interpolation evaluated to '${stringified}' in the component '${componentName}', which is probably a mistake. You should explicitly cast or transform the value to a string.`\n    );\n  }\n};\n\ninterface IProps {\n  className?: string;\n  style?: Record<string, string>;\n  [props: string]: unknown;\n}\n\n// Property-based interpolation is allowed only if `style` property exists\nfunction styled<\n  TProps extends Has<TMustHave, { style?: React.CSSProperties }>,\n  TMustHave extends { style?: React.CSSProperties },\n  TConstructor extends Component<TProps>\n>(\n  componentWithStyle: TConstructor & Component<TProps>\n): ComponentStyledTagWithInterpolation<TProps, TConstructor>;\n// If styled wraps custom component, that component should have className property\nfunction styled<\n  TProps extends Has<TMustHave, { className?: string }>,\n  TMustHave extends { className?: string },\n  TConstructor extends Component<TProps>\n>(\n  componentWithoutStyle: TConstructor & Component<TProps>\n): ComponentStyledTagWithoutInterpolation<TConstructor>;\nfunction styled<TName extends keyof JSX.IntrinsicElements>(\n  tag: TName\n): HtmlStyledTag<TName>;\nfunction styled(\n  component: 'The target component should have a className prop'\n): never;\nfunction styled(tag: any): any {\n  return (options: Options) => {\n    if (process.env.NODE_ENV !== 'production') {\n      if (Array.isArray(options)) {\n        // We received a strings array since it's used as a tag\n        throw new Error(\n          'Using the \"styled\" tag in runtime is not supported. Make sure you have set up the Babel plugin correctly. See https://github.com/callstack/linaria#setup'\n        );\n      }\n    }\n\n    const render = (props: any, ref: any) => {\n      const { as: component = tag, class: className } = props;\n      const rest = restOp(props, ['as', 'class']);\n      let filteredProps: IProps;\n\n      // Check if it's an HTML tag and not a custom element\n      if (typeof component === 'string' && component.indexOf('-') === -1) {\n        filteredProps = {} as { [key: string]: any };\n\n        // eslint-disable-next-line guard-for-in\n        for (const key in rest) {\n          if (key === 'as' || validAttr(key)) {\n            // Don't pass through invalid attributes to HTML elements\n            filteredProps[key] = rest[key];\n          }\n        }\n      } else {\n        filteredProps = rest;\n      }\n\n      filteredProps.ref = ref;\n      filteredProps.className = cx(\n        filteredProps.className || className,\n        options.class\n      );\n\n      const { vars } = options;\n\n      if (vars) {\n        const style: { [key: string]: string } = {};\n\n        // eslint-disable-next-line guard-for-in\n        for (const name in vars) {\n          const variable = vars[name];\n          const result = variable[0];\n          const unit = variable[1] || '';\n          const value = typeof result === 'function' ? result(props) : result;\n\n          warnIfInvalid(value, options.name);\n\n          style[`--${name}`] = `${value}${unit}`;\n        }\n\n        const ownStyle = filteredProps.style || {};\n        const keys = Object.keys(ownStyle);\n        if (keys.length > 0) {\n          keys.forEach((key) => {\n            style[key] = ownStyle[key];\n          });\n        }\n\n        filteredProps.style = style;\n      }\n\n      if ((tag as any).__linaria && tag !== component) {\n        // If the underlying tag is a styled component, forward the `as` prop\n        // Otherwise the styles from the underlying component will be ignored\n        filteredProps.as = component;\n\n        return React.createElement(tag, filteredProps);\n      }\n      return React.createElement(component, filteredProps);\n    };\n\n    const Result = React.forwardRef\n      ? React.forwardRef(render)\n      : // React.forwardRef won't available on older React versions and in Preact\n        // Fallback to a innerRef prop in that case\n        (props: any) => {\n          const rest = restOp(props, ['innerRef']);\n          return render(rest, props.innerRef);\n        };\n\n    (Result as any).displayName = options.name;\n\n    // These properties will be read by the babel plugin for interpolation\n    (Result as any).__linaria = {\n      className: options.class,\n      extends: tag,\n    };\n\n    return Result;\n  };\n}\n\ntype StyledComponent<T> = StyledMeta &\n  ([T] extends [React.FunctionComponent<any>]\n    ? T\n    : React.FunctionComponent<T & { as?: React.ElementType }>);\n\ntype StaticPlaceholder = string | number | CSSProperties | StyledMeta;\n\ntype HtmlStyledTag<TName extends keyof JSX.IntrinsicElements> = <\n  TAdditionalProps = {}\n>(\n  strings: TemplateStringsArray,\n  ...exprs: Array<\n    | StaticPlaceholder\n    | ((\n        // Without Omit here TS tries to infer TAdditionalProps\n        // from a component passed for interpolation\n        props: JSX.IntrinsicElements[TName] & Omit<TAdditionalProps, never>\n      ) => string | number)\n  >\n) => StyledComponent<JSX.IntrinsicElements[TName] & TAdditionalProps>;\n\ntype ComponentStyledTagWithoutInterpolation<TOrigCmp> = (\n  strings: TemplateStringsArray,\n  ...exprs: Array<\n    | StaticPlaceholder\n    | ((props: 'The target component should have a style prop') => never)\n  >\n) => StyledMeta & TOrigCmp;\n\ntype ComponentStyledTagWithInterpolation<TTrgProps, TOrigCmp> = <OwnProps = {}>(\n  strings: TemplateStringsArray,\n  ...exprs: Array<\n    | StaticPlaceholder\n    | ((props: NoInfer<OwnProps & TTrgProps>) => string | number)\n  >\n) => keyof OwnProps extends never\n  ? StyledMeta & TOrigCmp\n  : StyledComponent<OwnProps & TTrgProps>;\n\ntype StyledJSXIntrinsics = {\n  readonly [P in keyof JSX.IntrinsicElements]: HtmlStyledTag<P>;\n};\n\nexport type Styled = typeof styled & StyledJSXIntrinsics;\n\nexport default (process.env.NODE_ENV !== 'production'\n  ? new Proxy(styled, {\n      get(o, prop: keyof JSX.IntrinsicElements) {\n        return o(prop);\n      },\n    })\n  : styled) as Styled;\n"],"file":"styled.js"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@linaria/react",
-  "version": "3.0.0-beta.15",
+  "version": "3.0.0-beta.17",
   "publishConfig": {
     "access": "public"
   },
@@ -50,5 +50,5 @@
   "peerDependencies": {
     "react": ">=16"
   },
-  "gitHead": "a8ada3794c6e13231f70711d92b516d57677a5b1"
+  "gitHead": "5084f5e4421d3ea60659e767410526875c50f7ba"
 }

package/types/styled.d.ts

@@ -7,27 +7,30 @@
 import React from 'react';
 import type { CSSProperties, StyledMeta } from '@linaria/core';
 export declare type NoInfer<A extends any> = [A][A extends any ? 0 : never];
-interface CustomOmit {
-    <T extends object, K extends [...(keyof T)[]]>(obj: T, keys: K): {
-        [K2 in Exclude<keyof T, K[number]>]: T[K2];
-    };
-}
-export declare const restOp: CustomOmit;
-declare function styled<TConstructor extends React.ComponentType<any>>(tag: TConstructor extends React.ComponentType<infer T> ? [T] extends [{
-    className?: string | undefined;
-}] ? TConstructor : never : never): ComponentStyledTag<TConstructor>;
-declare function styled<T>(tag: [T] extends [{
-    className?: string | undefined;
-}] ? React.ComponentType<T> : never): ComponentStyledTag<T>;
+declare type Component<TProps> = ((props: TProps) => unknown) | {
+    new (props: TProps): unknown;
+};
+declare type Has<T, TObj> = [T] extends [TObj] ? T : T & TObj;
+export declare const restOp: <T extends object, TKeys extends (keyof T)[]>(obj: T, keys: TKeys) => { [K in keyof T]: T[K]; };
+declare function styled<TProps extends Has<TMustHave, {
+    style?: React.CSSProperties;
+}>, TMustHave extends {
+    style?: React.CSSProperties;
+}, TConstructor extends Component<TProps>>(componentWithStyle: TConstructor & Component<TProps>): ComponentStyledTagWithInterpolation<TProps, TConstructor>;
+declare function styled<TProps extends Has<TMustHave, {
+    className?: string;
+}>, TMustHave extends {
+    className?: string;
+}, TConstructor extends Component<TProps>>(componentWithoutStyle: TConstructor & Component<TProps>): ComponentStyledTagWithoutInterpolation<TConstructor>;
 declare function styled<TName extends keyof JSX.IntrinsicElements>(tag: TName): HtmlStyledTag<TName>;
+declare function styled(component: 'The target component should have a className prop'): never;
 declare type StyledComponent<T> = StyledMeta & ([T] extends [React.FunctionComponent<any>] ? T : React.FunctionComponent<T & {
     as?: React.ElementType;
 }>);
 declare type StaticPlaceholder = string | number | CSSProperties | StyledMeta;
 declare type HtmlStyledTag<TName extends keyof JSX.IntrinsicElements> = <TAdditionalProps = {}>(strings: TemplateStringsArray, ...exprs: Array<StaticPlaceholder | ((props: JSX.IntrinsicElements[TName] & Omit<TAdditionalProps, never>) => string | number)>) => StyledComponent<JSX.IntrinsicElements[TName] & TAdditionalProps>;
-declare type ComponentStyledTag<T> = <OwnProps = {}, TrgProps = [T] extends [React.FunctionComponent<infer TProps>] ? TProps : T>(strings: TemplateStringsArray, ...exprs: TrgProps extends {
-    style?: React.CSSProperties | undefined;
-} ? Array<StaticPlaceholder | ((props: NoInfer<OwnProps & TrgProps>) => string | number)> : StaticPlaceholder[]) => keyof OwnProps extends never ? [T] extends [React.FunctionComponent<any>] ? StyledMeta & T : StyledComponent<TrgProps> : StyledComponent<OwnProps & TrgProps>;
+declare type ComponentStyledTagWithoutInterpolation<TOrigCmp> = (strings: TemplateStringsArray, ...exprs: Array<StaticPlaceholder | ((props: 'The target component should have a style prop') => never)>) => StyledMeta & TOrigCmp;
+declare type ComponentStyledTagWithInterpolation<TTrgProps, TOrigCmp> = <OwnProps = {}>(strings: TemplateStringsArray, ...exprs: Array<StaticPlaceholder | ((props: NoInfer<OwnProps & TTrgProps>) => string | number)>) => keyof OwnProps extends never ? StyledMeta & TOrigCmp : StyledComponent<OwnProps & TTrgProps>;
 declare type StyledJSXIntrinsics = {
     readonly [P in keyof JSX.IntrinsicElements]: HtmlStyledTag<P>;
 };