@linaria/react 3.0.0-airbnb.0

package/CHANGELOG.md

@@ -0,0 +1,99 @@
+# 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.18](https://github.com/callstack/linaria/compare/v3.0.0-beta.17...v3.0.0-beta.18) (2022-04-01)
+
+**Note:** Version bump only for package @linaria/react
+
+
+
+
+
+# [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)
+
+
+### 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/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2017 Callstack
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

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/index.js

@@ -0,0 +1,2 @@
+export { default as styled } from './styled';
+//# sourceMappingURL=index.js.map

package/esm/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.ts"],"names":["default","styled"],"mappings":"AAAA,SAASA,OAAO,IAAIC,MAApB,QAAkC,UAAlC","sourcesContent":["export { default as styled } from './styled';\nexport type { CSSProperties } from '@linaria/core';\n"],"file":"index.js"}

package/esm/styled.js

@@ -0,0 +1,128 @@
+/**
+ * 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
+ * - injects classNames for the returned component
+ * - injects CSS variables used to define dynamic styles based on props
+ */
+import React from 'react';
+import validAttr from '@emotion/is-prop-valid';
+import { cx } from '@linaria/core';
+
+const isCapital = ch => ch.toUpperCase() === ch;
+
+const filterKey = keys => key => keys.indexOf(key) === -1;
+
+export const omit = (obj, keys) => {
+  const res = {};
+  Object.keys(obj).filter(filterKey(keys)).forEach(key => {
+    res[key] = obj[key];
+  });
+  return res;
+};
+
+function filterProps(component, props, omitKeys) {
+  const filteredProps = omit(props, omitKeys); // Check if it's an HTML tag and not a custom element
+
+  if (typeof component === 'string' && component.indexOf('-') === -1 && !isCapital(component[0])) {
+    Object.keys(filteredProps).forEach(key => {
+      if (!validAttr(key)) {
+        // Don't pass through invalid attributes to HTML elements
+        delete filteredProps[key];
+      }
+    });
+  }
+
+  return filteredProps;
+}
+
+const 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
+
+    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.`);
+  }
+};
+
+function styled(tag) {
+  return options => {
+    if (process.env.NODE_ENV !== 'production') {
+      if (Array.isArray(options)) {
+        // We received a strings array since it's used as a tag
+        throw new Error('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');
+      }
+    }
+
+    const render = (props, ref) => {
+      const {
+        as: component = tag,
+        class: className
+      } = props;
+      let filteredProps = filterProps(component, props, ['as', 'class']);
+      filteredProps.ref = ref;
+      filteredProps.className = options.atomic ? cx(options.class, filteredProps.className || className) : cx(filteredProps.className || className, options.class);
+      const {
+        vars
+      } = options;
+
+      if (vars) {
+        const 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;
+          warnIfInvalid(value, options.name);
+          style[`--${name}`] = `${value}${unit}`;
+        }
+
+        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) {
+        // 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.createElement(component, filteredProps);
+    };
+
+    const Result = React.forwardRef ? /*#__PURE__*/React.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 = omit(props, ['innerRef']);
+      return render(rest, props.innerRef);
+    };
+    Result.displayName = options.name; // These properties will be read by the babel plugin for interpolation
+
+    Result.__linaria = {
+      className: options.class,
+      extends: tag
+    };
+    return Result;
+  };
+}
+
+export default process.env.NODE_ENV !== 'production' ? new Proxy(styled, {
+  get(o, prop) {
+    return o(prop);
+  }
+
+}) : styled;
+//# sourceMappingURL=styled.js.map

package/esm/styled.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/styled.ts"],"names":["React","validAttr","cx","isCapital","ch","toUpperCase","filterKey","keys","key","indexOf","omit","obj","res","Object","filter","forEach","filterProps","component","props","omitKeys","filteredProps","warnIfInvalid","value","componentName","process","env","NODE_ENV","isFinite","stringified","JSON","stringify","String","console","warn","styled","tag","options","Array","isArray","Error","render","ref","as","class","className","atomic","vars","style","name","variable","result","unit","ownStyle","length","__linaria","createElement","Result","forwardRef","rest","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  atomic?: boolean;\n  vars?: {\n    [key: string]: [\n      string | number | ((props: unknown) => string | number),\n      string | void\n    ];\n  };\n};\n\nconst isCapital = (ch: string): boolean => ch.toUpperCase() === ch;\nconst filterKey =\n  <TExclude extends keyof any>(keys: TExclude[]) =>\n  <TAll extends keyof any>(key: TAll): key is Exclude<TAll, TExclude> =>\n    keys.indexOf(key as any) === -1;\n\nexport const omit = <T extends Record<string, unknown>, TKeys extends keyof T>(\n  obj: T,\n  keys: TKeys[]\n): Omit<T, TKeys> => {\n  const res = {} as Omit<T, TKeys>;\n  Object.keys(obj)\n    .filter(filterKey(keys))\n    .forEach((key) => {\n      res[key] = obj[key];\n    });\n\n  return res;\n};\n\nfunction filterProps<T extends Record<string, unknown>, TKeys extends keyof T>(\n  component: string | unknown,\n  props: T,\n  omitKeys: TKeys[]\n): Partial<Omit<T, TKeys>> {\n  const filteredProps = omit(props, omitKeys) as Partial<T>;\n\n  // Check if it's an HTML tag and not a custom element\n  if (\n    typeof component === 'string' &&\n    component.indexOf('-') === -1 &&\n    !isCapital(component[0])\n  ) {\n    Object.keys(filteredProps).forEach((key) => {\n      if (!validAttr(key)) {\n        // Don't pass through invalid attributes to HTML elements\n        delete filteredProps[key];\n      }\n    });\n  }\n\n  return filteredProps;\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      let filteredProps: IProps = filterProps(component, props, [\n        'as',\n        'class',\n      ]);\n\n      filteredProps.ref = ref;\n      filteredProps.className = options.atomic\n        ? cx(options.class, filteredProps.className || className)\n        : cx(filteredProps.className || className, options.class);\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 = omit(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/index.js

@@ -0,0 +1,11 @@
+"use strict";
+
+exports.__esModule = true;
+exports.styled = void 0;
+
+var _styled = _interopRequireDefault(require("./styled"));
+
+exports.styled = _styled.default;
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+//# sourceMappingURL=index.js.map

package/lib/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.ts"],"names":[],"mappings":";;;;;AAAA","sourcesContent":["export { default as styled } from './styled';\nexport type { CSSProperties } from '@linaria/core';\n"],"file":"index.js"}

package/lib/styled.js

@@ -0,0 +1,143 @@
+"use strict";
+
+exports.__esModule = true;
+exports.default = exports.omit = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _isPropValid = _interopRequireDefault(require("@emotion/is-prop-valid"));
+
+var _core = require("@linaria/core");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+/**
+ * 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
+ * - injects classNames for the returned component
+ * - injects CSS variables used to define dynamic styles based on props
+ */
+var isCapital = function isCapital(ch) {
+  return ch.toUpperCase() === ch;
+};
+
+var filterKey = function filterKey(keys) {
+  return function (key) {
+    return keys.indexOf(key) === -1;
+  };
+};
+
+var omit = function omit(obj, keys) {
+  var res = {};
+  Object.keys(obj).filter(filterKey(keys)).forEach(function (key) {
+    res[key] = obj[key];
+  });
+  return res;
+};
+
+exports.omit = omit;
+
+function filterProps(component, props, omitKeys) {
+  var filteredProps = omit(props, omitKeys); // Check if it's an HTML tag and not a custom element
+
+  if (typeof component === 'string' && component.indexOf('-') === -1 && !isCapital(component[0])) {
+    Object.keys(filteredProps).forEach(function (key) {
+      if (!(0, _isPropValid.default)(key)) {
+        // Don't pass through invalid attributes to HTML elements
+        delete filteredProps[key];
+      }
+    });
+  }
+
+  return filteredProps;
+}
+
+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;
+    }
+
+    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.");
+  }
+};
+
+function styled(tag) {
+  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
+        throw new Error('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');
+      }
+    }
+
+    var render = function render(props, ref) {
+      var _props$as = props.as,
+          component = _props$as === void 0 ? tag : _props$as,
+          className = props.class;
+      var filteredProps = filterProps(component, props, ['as', 'class']);
+      filteredProps.ref = ref;
+      filteredProps.className = options.atomic ? (0, _core.cx)(options.class, filteredProps.className || className) : (0, _core.cx)(filteredProps.className || className, options.class);
+      var vars = options.vars;
+
+      if (vars) {
+        var style = {}; // eslint-disable-next-line guard-for-in
+
+        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;
+        }
+
+        var ownStyle = filteredProps.style || {};
+        var keys = Object.keys(ownStyle);
+
+        if (keys.length > 0) {
+          keys.forEach(function (key) {
+            style[key] = ownStyle[key];
+          });
+        }
+
+        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.default.createElement(tag, filteredProps);
+      }
+
+      return /*#__PURE__*/_react.default.createElement(component, filteredProps);
+    };
+
+    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
+    function (props) {
+      var rest = omit(props, ['innerRef']);
+      return render(rest, props.innerRef);
+    };
+    Result.displayName = options.name; // These properties will be read by the babel plugin for interpolation
+
+    Result.__linaria = {
+      className: options.class,
+      extends: tag
+    };
+    return Result;
+  };
+}
+
+var _default = process.env.NODE_ENV !== 'production' ? new Proxy(styled, {
+  get: function get(o, prop) {
+    return o(prop);
+  }
+}) : styled;
+
+exports.default = _default;
+//# sourceMappingURL=styled.js.map

package/lib/styled.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/styled.ts"],"names":["isCapital","ch","toUpperCase","filterKey","keys","key","indexOf","omit","obj","res","Object","filter","forEach","filterProps","component","props","omitKeys","filteredProps","warnIfInvalid","value","componentName","process","env","NODE_ENV","isFinite","stringified","JSON","stringify","String","console","warn","styled","tag","options","Array","isArray","Error","render","ref","as","className","class","atomic","vars","style","name","variable","result","unit","ownStyle","length","__linaria","React","createElement","Result","forwardRef","rest","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  atomic?: boolean;\n  vars?: {\n    [key: string]: [\n      string | number | ((props: unknown) => string | number),\n      string | void\n    ];\n  };\n};\n\nconst isCapital = (ch: string): boolean => ch.toUpperCase() === ch;\nconst filterKey =\n  <TExclude extends keyof any>(keys: TExclude[]) =>\n  <TAll extends keyof any>(key: TAll): key is Exclude<TAll, TExclude> =>\n    keys.indexOf(key as any) === -1;\n\nexport const omit = <T extends Record<string, unknown>, TKeys extends keyof T>(\n  obj: T,\n  keys: TKeys[]\n): Omit<T, TKeys> => {\n  const res = {} as Omit<T, TKeys>;\n  Object.keys(obj)\n    .filter(filterKey(keys))\n    .forEach((key) => {\n      res[key] = obj[key];\n    });\n\n  return res;\n};\n\nfunction filterProps<T extends Record<string, unknown>, TKeys extends keyof T>(\n  component: string | unknown,\n  props: T,\n  omitKeys: TKeys[]\n): Partial<Omit<T, TKeys>> {\n  const filteredProps = omit(props, omitKeys) as Partial<T>;\n\n  // Check if it's an HTML tag and not a custom element\n  if (\n    typeof component === 'string' &&\n    component.indexOf('-') === -1 &&\n    !isCapital(component[0])\n  ) {\n    Object.keys(filteredProps).forEach((key) => {\n      if (!validAttr(key)) {\n        // Don't pass through invalid attributes to HTML elements\n        delete filteredProps[key];\n      }\n    });\n  }\n\n  return filteredProps;\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      let filteredProps: IProps = filterProps(component, props, [\n        'as',\n        'class',\n      ]);\n\n      filteredProps.ref = ref;\n      filteredProps.className = options.atomic\n        ? cx(options.class, filteredProps.className || className)\n        : cx(filteredProps.className || className, options.class);\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 = omit(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

@@ -0,0 +1,54 @@
+{
+  "name": "@linaria/react",
+  "version": "3.0.0-airbnb.0",
+  "publishConfig": {
+    "access": "public"
+  },
+  "description": "Blazing fast zero-runtime CSS in JS library",
+  "sideEffects": false,
+  "main": "lib/index.js",
+  "module": "esm/index.js",
+  "types": "types/index.d.ts",
+  "files": [
+    "types/",
+    "lib/",
+    "esm/"
+  ],
+  "license": "MIT",
+  "repository": "git@github.com:callstack/linaria.git",
+  "bugs": {
+    "url": "https://github.com/callstack/linaria/issues"
+  },
+  "homepage": "https://github.com/callstack/linaria#readme",
+  "keywords": [
+    "react",
+    "linaria",
+    "css",
+    "css-in-js",
+    "styled-components"
+  ],
+  "scripts": {
+    "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",
+    "prepare": "yarn build && yarn build:declarations",
+    "test": "jest --config ../../jest.config.js --rootDir .",
+    "test:dts": "dtslint --localTs ../../node_modules/typescript/lib __dtslint__",
+    "typecheck": "tsc --noEmit --composite false",
+    "watch": "yarn build --watch"
+  },
+  "devDependencies": {
+    "@types/react": ">=16",
+    "react": "^16.13.1",
+    "react-test-renderer": "^16.8.3"
+  },
+  "dependencies": {
+    "@emotion/is-prop-valid": "^0.8.8",
+    "@linaria/core": "^3.0.0-airbnb.0"
+  },
+  "peerDependencies": {
+    "react": ">=16"
+  },
+  "gitHead": "1c8bd4331b152498dd76e3f137940f43bd30e7b0"
+}

package/types/index.d.ts

@@ -0,0 +1,2 @@
+export { default as styled } from './styled';
+export type { CSSProperties } from '@linaria/core';

package/types/styled.d.ts

@@ -0,0 +1,39 @@
+/**
+ * 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
+ * - injects classNames for the returned component
+ * - injects CSS variables used to define dynamic styles based on props
+ */
+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 type Component<TProps> = ((props: TProps) => unknown) | {
+    new (props: TProps): unknown;
+};
+declare type Has<T, TObj> = [T] extends [TObj] ? T : T & TObj;
+export declare const omit: <T extends Record<string, unknown>, TKeys extends keyof T>(obj: T, keys: TKeys[]) => Omit<T, TKeys>;
+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 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>;
+};
+export declare type Styled = typeof styled & StyledJSXIntrinsics;
+declare const _default: Styled;
+export default _default;