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

package/CHANGELOG.md

@@ -0,0 +1,80 @@
+# Change Log
+
+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.15](https://github.com/callstack/linaria/compare/v3.0.0-beta.14...v3.0.0-beta.15) (2021-11-29)
+
+
+### Bug Fixes
+
+* **react:** fixed types for supporting class components (fixes [#730](https://github.com/callstack/linaria/issues/730)) ([#877](https://github.com/callstack/linaria/issues/877)) ([e637ecb](https://github.com/callstack/linaria/commit/e637ecb8946a8119cfbd039bfb65d42206e09c4e))
+
+
+
+
+
+# [3.0.0-beta.14](https://github.com/callstack/linaria/compare/v3.0.0-beta.13...v3.0.0-beta.14) (2021-11-05)
+
+
+### Bug Fixes
+
+* **react:** refactor/rest op ([#860](https://github.com/callstack/linaria/issues/860)) ([da94704](https://github.com/callstack/linaria/commit/da94704df8ca74d94fe57682e2557274cf2d4cb0))
+* **react:** unions in prop types are not resolved ([#844](https://github.com/callstack/linaria/issues/844)) ([62009e9](https://github.com/callstack/linaria/commit/62009e9184638fd8761f187c99e7ea434f364bee))
+
+
+
+
+
+# [3.0.0-beta.13](https://github.com/callstack/linaria/compare/v3.0.0-beta.12...v3.0.0-beta.13) (2021-09-13)
+
+
+### Bug Fixes
+
+* **react:** fixes for `--exactOptionalPropertyTypes` TS flag ([#827](https://github.com/callstack/linaria/issues/827)) ([eed92b1](https://github.com/callstack/linaria/commit/eed92b19e3b779b656fb780307bbab8a08d14ba2))
+
+
+
+
+
+# [3.0.0-beta.11](https://github.com/callstack/linaria/compare/v3.0.0-beta.10...v3.0.0-beta.11) (2021-08-08)
+
+
+### Bug Fixes
+
+* **styled:** remove unnecessary core-js polyfills  (fixes [#799](https://github.com/callstack/linaria/issues/799)) ([#814](https://github.com/callstack/linaria/issues/814)) ([6c3070a](https://github.com/callstack/linaria/commit/6c3070a47715022eb761567b8795f6918784ae4c))
+
+
+
+
+
+# [3.0.0-beta.7](https://github.com/callstack/linaria/compare/v3.0.0-beta.6...v3.0.0-beta.7) (2021-06-24)
+
+**Note:** Version bump only for package @linaria/react
+
+
+
+
+
+# [3.0.0-beta.4](https://github.com/callstack/linaria/compare/v3.0.0-beta.3...v3.0.0-beta.4) (2021-05-07)
+
+**Note:** Version bump only for package @linaria/react
+
+
+
+
+
+# [3.0.0-beta.3](https://github.com/callstack/linaria/compare/v3.0.0-beta.2...v3.0.0-beta.3) (2021-04-20)
+
+
+### Bug Fixes
+
+* **core,react:** make IE 11 compatible (fixes [#746](https://github.com/callstack/linaria/issues/746)) ([#750](https://github.com/callstack/linaria/issues/750)) ([922df95](https://github.com/callstack/linaria/commit/922df9576a430cdfe9b27aed5dc45c4f75917607))
+
+
+
+
+
+# [3.0.0-beta.2](https://github.com/callstack/linaria/compare/v3.0.0-beta.1...v3.0.0-beta.2) (2021-04-11)
+
+**Note:** Version bump only for package @linaria/react

package/README.md

@@ -0,0 +1,35 @@
+<p align="center">
+  <img alt="Linaria" src="https://raw.githubusercontent.com/callstack/linaria/HEAD/website/assets/linaria-logo@2x.png" width="496">
+</p>
+
+<p align="center">
+Zero-runtime CSS in JS library.
+</p>
+
+---
+
+### 📖 Please refer to the [GitHub](https://github.com/callstack/linaria#readme) for full documentation.
+
+## Features
+
+- Write CSS in JS, but with **zero runtime**, CSS is extracted to CSS files during build
+- Familiar **CSS syntax** with Sass like nesting
+- Use **dynamic prop based styles** with the React bindings, uses CSS variables behind the scenes
+- Easily find where the style was defined with **CSS sourcemaps**
+- **Lint your CSS** in JS with [stylelint](https://github.com/stylelint/stylelint)
+- Use **JavaScript for logic**, no CSS preprocessor needed
+- Optionally use any **CSS preprocessor** such as Sass or PostCSS
+
+**[Why use Linaria](../../docs/BENEFITS.md)**
+
+## Installation
+
+```sh
+npm install @linaria/core @linaria/react @linaria/babel-preset @linaria/shaker
+```
+
+or
+
+```sh
+yarn add @linaria/core @linaria/react @linaria/babel-preset @linaria/shaker
+```

package/esm/styled.js

@@ -4,15 +4,22 @@
  * - injects classNames for the returned component
  * - injects CSS variables used to define dynamic styles based on props
  */
-import * as React from 'react';
+import React from 'react';
 import validAttr from '@emotion/is-prop-valid';
 import { cx } from '@linaria/core';
-
 // Workaround for rest operator
-const restOp = (obj, keysToExclude) => Object.keys(obj).filter(prop => !keysToExclude.includes(prop)).reduce((acc, curr) => Object.assign(acc, {
-  [curr]: obj[curr]
-}), {}); // rest operator workaround
+export const restOp = (obj, keys) => {
+  const res = {};
+  let key;
+
+  for (key in obj) {
+    if (keys.indexOf(key) === -1) {
+      res[key] = obj[key];
+    }
+  }
 
+  return res;
+};
 
 const warnIfInvalid = (value, componentName) => {
   if (process.env.NODE_ENV !== 'production') {
@@ -25,8 +32,7 @@ const warnIfInvalid = (value, componentName) => {
 
     console.warn(`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.`);
   }
-}; // If styled wraps custom component, that component should have className property
-
+};
 
 function styled(tag) {
   return options => {
@@ -76,7 +82,16 @@ function styled(tag) {
           style[`--${name}`] = `${value}${unit}`;
         }
 
-        filteredProps.style = Object.assign(style, filteredProps.style);
+        const ownStyle = filteredProps.style || {};
+        const keys = Object.keys(ownStyle);
+
+        if (keys.length > 0) {
+          keys.forEach(key => {
+            style[key] = ownStyle[key];
+          });
+        }
+
+        filteredProps.style = style;
       }
 
       if (tag.__linaria && tag !== component) {

package/esm/styled.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/styled.ts"],"names":["React","validAttr","cx","restOp","obj","keysToExclude","Object","keys","filter","prop","includes","reduce","acc","curr","assign","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","indexOf","key","vars","style","name","variable","result","unit","__linaria","createElement","Result","forwardRef","innerRef","displayName","extends","Proxy","get","o"],"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 * as 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\n// Workaround for rest operator\nconst restOp = (\n  obj: { [key: string]: any },\n  keysToExclude: string[]\n): { [key: string]: any } =>\n  Object.keys(obj)\n    .filter((prop) => !keysToExclude.includes(prop))\n    .reduce((acc, curr) => Object.assign(acc, { [curr]: obj[curr] }), {}); // rest operator workaround\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\n// If styled wraps custom component, that component should have className property\nfunction styled<TConstructor extends React.FunctionComponent<any>>(\n  tag: TConstructor extends React.FunctionComponent<infer T>\n    ? T extends { className?: string }\n      ? TConstructor\n      : never\n    : never\n): ComponentStyledTag<TConstructor>;\nfunction styled<T>(\n  tag: T extends { className?: string } ? React.ComponentType<T> : 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;\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        filteredProps.style = Object.assign(style, filteredProps.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 }\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 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"}

package/lib/styled.js

@@ -1,9 +1,9 @@
 "use strict";
 
 exports.__esModule = true;
-exports.default = void 0;
+exports.default = exports.restOp = void 0;
 
-var React = _interopRequireWildcard(require("react"));
+var _react = _interopRequireDefault(require("react"));
 
 var _isPropValid = _interopRequireDefault(require("@emotion/is-prop-valid"));
 
@@ -11,10 +11,6 @@ var _core = require("@linaria/core");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
-
-function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
 /**
  * This file contains an runtime version of `styled` component. Responsibilities of the component are:
  * - returns ReactElement based on HTML tag used with `styled` or custom React Component
@@ -22,27 +18,36 @@ function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj;
  * - injects CSS variables used to define dynamic styles based on props
  */
 // Workaround for rest operator
-const restOp = (obj, keysToExclude) => Object.keys(obj).filter(prop => !keysToExclude.includes(prop)).reduce((acc, curr) => Object.assign(acc, {
-  [curr]: obj[curr]
-}), {}); // rest operator workaround
+var restOp = function restOp(obj, keys) {
+  var res = {};
+  var key;
+
+  for (key in obj) {
+    if (keys.indexOf(key) === -1) {
+      res[key] = obj[key];
+    }
+  }
+
+  return res;
+};
 
+exports.restOp = restOp;
 
-const warnIfInvalid = (value, componentName) => {
+var warnIfInvalid = function warnIfInvalid(value, componentName) {
   if (process.env.NODE_ENV !== 'production') {
     if (typeof value === 'string' || // eslint-disable-next-line no-self-compare
     typeof value === 'number' && isFinite(value)) {
       return;
     }
 
-    const stringified = typeof value === 'object' ? JSON.stringify(value) : String(value); // eslint-disable-next-line no-console
+    var stringified = typeof value === 'object' ? JSON.stringify(value) : String(value); // eslint-disable-next-line no-console
 
-    console.warn(`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.`);
+    console.warn("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.");
   }
-}; // If styled wraps custom component, that component should have className property
-
+};
 
 function styled(tag) {
-  return options => {
+  return function (options) {
     if (process.env.NODE_ENV !== 'production') {
       if (Array.isArray(options)) {
         // We received a strings array since it's used as a tag
@@ -50,21 +55,20 @@ function styled(tag) {
       }
     }
 
-    const render = (props, ref) => {
-      const {
-        as: component = tag,
-        class: className
-      } = props;
-      const rest = restOp(props, ['as', 'class']);
-      let filteredProps; // Check if it's an HTML tag and not a custom element
+    var render = function render(props, ref) {
+      var _props$as = props.as,
+          component = _props$as === void 0 ? tag : _props$as,
+          className = props.class;
+      var rest = restOp(props, ['as', 'class']);
+      var filteredProps; // Check if it's an HTML tag and not a custom element
 
       if (typeof component === 'string' && component.indexOf('-') === -1) {
         filteredProps = {}; // eslint-disable-next-line guard-for-in
 
-        for (const key in rest) {
-          if (key === 'as' || (0, _isPropValid.default)(key)) {
+        for (var _key in rest) {
+          if (_key === 'as' || (0, _isPropValid.default)(_key)) {
             // Don't pass through invalid attributes to HTML elements
-            filteredProps[key] = rest[key];
+            filteredProps[_key] = rest[_key];
           }
         }
       } else {
@@ -73,39 +77,47 @@ function styled(tag) {
 
       filteredProps.ref = ref;
       filteredProps.className = (0, _core.cx)(filteredProps.className || className, options.class);
-      const {
-        vars
-      } = options;
+      var vars = options.vars;
 
       if (vars) {
-        const style = {}; // eslint-disable-next-line guard-for-in
+        var style = {}; // eslint-disable-next-line guard-for-in
 
-        for (const name in vars) {
-          const variable = vars[name];
-          const result = variable[0];
-          const unit = variable[1] || '';
-          const value = typeof result === 'function' ? result(props) : result;
+        for (var name in vars) {
+          var variable = vars[name];
+          var result = variable[0];
+          var unit = variable[1] || '';
+          var value = typeof result === 'function' ? result(props) : result;
           warnIfInvalid(value, options.name);
-          style[`--${name}`] = `${value}${unit}`;
+          style["--" + name] = "" + value + unit;
+        }
+
+        var ownStyle = filteredProps.style || {};
+
+        var _keys = Object.keys(ownStyle);
+
+        if (_keys.length > 0) {
+          _keys.forEach(function (key) {
+            style[key] = ownStyle[key];
+          });
         }
 
-        filteredProps.style = Object.assign(style, filteredProps.style);
+        filteredProps.style = style;
       }
 
       if (tag.__linaria && tag !== component) {
         // If the underlying tag is a styled component, forward the `as` prop
         // Otherwise the styles from the underlying component will be ignored
         filteredProps.as = component;
-        return /*#__PURE__*/React.createElement(tag, filteredProps);
+        return /*#__PURE__*/_react.default.createElement(tag, filteredProps);
       }
 
-      return /*#__PURE__*/React.createElement(component, filteredProps);
+      return /*#__PURE__*/_react.default.createElement(component, filteredProps);
     };
 
-    const Result = React.forwardRef ? /*#__PURE__*/React.forwardRef(render) : // React.forwardRef won't available on older React versions and in Preact
+    var Result = _react.default.forwardRef ? /*#__PURE__*/_react.default.forwardRef(render) : // React.forwardRef won't available on older React versions and in Preact
     // Fallback to a innerRef prop in that case
-    props => {
-      const rest = restOp(props, ['innerRef']);
+    function (props) {
+      var rest = restOp(props, ['innerRef']);
       return render(rest, props.innerRef);
     };
     Result.displayName = options.name; // These properties will be read by the babel plugin for interpolation
@@ -119,10 +131,9 @@ function styled(tag) {
 }
 
 var _default = process.env.NODE_ENV !== 'production' ? new Proxy(styled, {
-  get(o, prop) {
+  get: function get(o, prop) {
     return o(prop);
   }
-
 }) : styled;
 
 exports.default = _default;

package/lib/styled.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/styled.ts"],"names":["restOp","obj","keysToExclude","Object","keys","filter","prop","includes","reduce","acc","curr","assign","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","indexOf","key","vars","style","name","variable","result","unit","__linaria","React","createElement","Result","forwardRef","innerRef","displayName","extends","Proxy","get","o"],"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 * as 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\n// Workaround for rest operator\nconst restOp = (\n  obj: { [key: string]: any },\n  keysToExclude: string[]\n): { [key: string]: any } =>\n  Object.keys(obj)\n    .filter((prop) => !keysToExclude.includes(prop))\n    .reduce((acc, curr) => Object.assign(acc, { [curr]: obj[curr] }), {}); // rest operator workaround\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\n// If styled wraps custom component, that component should have className property\nfunction styled<TConstructor extends React.FunctionComponent<any>>(\n  tag: TConstructor extends React.FunctionComponent<infer T>\n    ? T extends { className?: string }\n      ? TConstructor\n      : never\n    : never\n): ComponentStyledTag<TConstructor>;\nfunction styled<T>(\n  tag: T extends { className?: string } ? React.ComponentType<T> : 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;\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        filteredProps.style = Object.assign(style, filteredProps.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 }\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 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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@linaria/react",
-  "version": "3.0.0-beta.1",
+  "version": "3.0.0-beta.15",
   "publishConfig": {
     "access": "public"
   },
@@ -8,7 +8,7 @@
   "sideEffects": false,
   "main": "lib/index.js",
   "module": "esm/index.js",
-  "types": "types",
+  "types": "types/index.d.ts",
   "files": [
     "types/",
     "lib/",
@@ -28,7 +28,7 @@
     "styled-components"
   ],
   "scripts": {
-    "build:lib": "NODE_ENV=legacy babel src --out-dir lib --extensions '.js,.jsx,.ts,.tsx' --source-maps --delete-dir-on-start",
+    "build:lib": "cross-env NODE_ENV=legacy babel src --out-dir lib --extensions '.js,.jsx,.ts,.tsx' --source-maps --delete-dir-on-start",
     "build:esm": "babel src --out-dir esm --extensions '.js,.jsx,.ts,.tsx' --source-maps --delete-dir-on-start",
     "build": "yarn build:lib && yarn build:esm",
     "build:declarations": "tsc --emitDeclarationOnly --outDir types",
@@ -45,10 +45,10 @@
   },
   "dependencies": {
     "@emotion/is-prop-valid": "^0.8.8",
-    "@linaria/core": "^3.0.0-beta.1"
+    "@linaria/core": "^3.0.0-beta.15"
   },
   "peerDependencies": {
     "react": ">=16"
   },
-  "gitHead": "4ee73ae362ca775999bf71c93279db5268108d13"
+  "gitHead": "a8ada3794c6e13231f70711d92b516d57677a5b1"
 }

package/types/styled.d.ts

@@ -4,24 +4,30 @@
  * - injects classNames for the returned component
  * - injects CSS variables used to define dynamic styles based on props
  */
-import * as React from 'react';
+import React from 'react';
 import type { CSSProperties, StyledMeta } from '@linaria/core';
 export declare type NoInfer<A extends any> = [A][A extends any ? 0 : never];
-declare function styled<TConstructor extends React.FunctionComponent<any>>(tag: TConstructor extends React.FunctionComponent<infer T> ? T extends {
-    className?: string;
-} ? TConstructor : never : never): ComponentStyledTag<TConstructor>;
-declare function styled<T>(tag: T extends {
-    className?: string;
-} ? React.ComponentType<T> : never): ComponentStyledTag<T>;
+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 function styled<TName extends keyof JSX.IntrinsicElements>(tag: TName): HtmlStyledTag<TName>;
-declare type StyledComponent<T> = StyledMeta & (T extends React.FunctionComponent<any> ? T : React.FunctionComponent<T & {
+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;
-} ? 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 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 StyledJSXIntrinsics = {
     readonly [P in keyof JSX.IntrinsicElements]: HtmlStyledTag<P>;
 };