@linaria/react 3.0.0-beta.2 → 3.0.0-beta.22

package/README.md

@@ -1,5 +1,5 @@
 <p align="center">
-  <img alt="Linaria" src="../../website/assets/linaria-logo@2x.png" width="496">
+  <img alt="Linaria" src="https://raw.githubusercontent.com/callstack/linaria/HEAD/website/assets/linaria-logo@2x.png" width="496">
 </p>
 
 <p align="center">

package/esm/index.js.map

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

package/esm/processors/styled.js

@@ -0,0 +1,190 @@
+import BaseProcessor from '@linaria/core/processors/BaseProcessor';
+export function hasMeta(value) {
+  return typeof value === 'object' && value !== null && '__linaria' in value;
+}
+
+const isNotNull = x => x !== null;
+
+const singleQuotedStringLiteral = value => ({
+  type: 'StringLiteral',
+  value,
+  extra: {
+    rawValue: value,
+    raw: `'${value}'`
+  }
+});
+
+export default class StyledProcessor extends BaseProcessor {
+  constructor(...args) {
+    super(...args);
+    let component;
+    const [type, value, ...rest] = this.params[0] ?? [];
+
+    if (type === 'call' && rest.length === 0) {
+      const [source, path] = value;
+
+      if (path.node.type === 'StringLiteral') {
+        component = path.node.value;
+      } else if (path.node.type === 'ArrowFunctionExpression' || path.node.type === 'FunctionExpression') {
+        // Special case when styled wraps a function
+        // It's actually the same as wrapping a built-in tag
+        component = 'FunctionalComponent';
+      } else {
+        component = {
+          node: path.node,
+          source
+        };
+        this.dependencies.push({
+          ex: path,
+          source
+        });
+      }
+    }
+
+    if (type === 'member') {
+      if (value.node.type === 'Identifier') {
+        component = value.node.name;
+      } else if (value.node.type === 'StringLiteral') {
+        component = value.node.value;
+      }
+    }
+
+    if (!component || this.params.length > 1) {
+      throw new Error('Invalid usage of `styled` tag');
+    }
+
+    this.component = component;
+  }
+
+  addInterpolation(node, source) {
+    const id = this.getVariableId(source);
+    this.interpolations.push({
+      id,
+      node,
+      source,
+      unit: ''
+    });
+    return `var(--${id})`;
+  }
+
+  extractRules(valueCache, cssText, loc) {
+    const rules = {};
+    let selector = `.${this.className}`; // If `styled` wraps another component and not a primitive,
+    // get its class name to create a more specific selector
+    // it'll ensure that styles are overridden properly
+
+    let value = typeof this.component === 'string' ? null : valueCache.get(this.component.node);
+
+    while (hasMeta(value)) {
+      selector += `.${value.__linaria.className}`;
+      value = value.__linaria.extends;
+    }
+
+    rules[selector] = {
+      cssText,
+      className: this.className,
+      displayName: this.displayName,
+      start: loc?.start ?? null
+    };
+    return [rules, this.className];
+  }
+
+  getRuntimeReplacement(classes, uniqInterpolations) {
+    const t = this.astService;
+    const props = this.getProps(classes, uniqInterpolations);
+    return [t.callExpression(this.tagExpression, [this.getTagComponentProps(props)]), true];
+  }
+
+  get asSelector() {
+    return `.${this.className}`;
+  }
+
+  get tagExpressionArgument() {
+    const t = this.astService;
+
+    if (typeof this.component === 'string') {
+      if (this.component === 'FunctionalComponent') {
+        return t.arrowFunctionExpression([], t.blockStatement([]));
+      }
+
+      return singleQuotedStringLiteral(this.component);
+    }
+
+    return t.identifier(this.component.source);
+  }
+
+  get tagExpression() {
+    const t = this.astService;
+    return t.callExpression(this.tagExp, [this.tagExpressionArgument]);
+  }
+
+  get valueSource() {
+    const extendsNode = typeof this.component === 'string' ? null : this.component.source;
+    return `{
+    displayName: "${this.displayName}",
+    __linaria: {
+      className: "${this.className}",
+      extends: ${extendsNode}
+    }
+  }`;
+  }
+
+  getProps(classes, uniqInterpolations) {
+    const propsObj = {
+      name: this.displayName,
+      class: this.className
+    }; // If we found any interpolations, also pass them, so they can be applied
+
+    if (this.interpolations.length) {
+      propsObj.vars = {};
+      uniqInterpolations.forEach(({
+        id,
+        unit,
+        node
+      }) => {
+        const items = [node];
+
+        if (unit) {
+          items.push(this.astService.stringLiteral(unit));
+        }
+
+        propsObj.vars[id] = items;
+      });
+    }
+
+    return propsObj;
+  }
+
+  getTagComponentProps(props) {
+    const t = this.astService;
+    const propExpressions = Object.entries(props).map(([key, value]) => {
+      if (!value) {
+        return null;
+      }
+
+      const keyNode = t.identifier(key);
+
+      if (typeof value === 'string') {
+        return t.objectProperty(keyNode, t.stringLiteral(value));
+      }
+
+      if (typeof value === 'boolean') {
+        return t.objectProperty(keyNode, t.booleanLiteral(value));
+      }
+
+      const vars = Object.entries(value).map(([propName, propValue]) => {
+        return t.objectProperty(t.stringLiteral(propName), t.arrayExpression(propValue));
+      });
+      return t.objectProperty(keyNode, t.objectExpression(vars));
+    }).filter(isNotNull);
+    return t.objectExpression(propExpressions);
+  } // eslint-disable-next-line @typescript-eslint/no-unused-vars
+
+
+  getVariableId(value) {
+    // make the variable unique to this styled component
+    return `${this.slug}-${this.interpolations.length}`;
+  }
+
+}
+//# sourceMappingURL=styled.js.map

package/esm/processors/styled.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styled.js","names":["BaseProcessor","hasMeta","value","isNotNull","x","singleQuotedStringLiteral","type","extra","rawValue","raw","StyledProcessor","constructor","args","component","rest","params","length","source","path","node","dependencies","push","ex","name","Error","addInterpolation","id","getVariableId","interpolations","unit","extractRules","valueCache","cssText","loc","rules","selector","className","get","__linaria","extends","displayName","start","getRuntimeReplacement","classes","uniqInterpolations","t","astService","props","getProps","callExpression","tagExpression","getTagComponentProps","asSelector","tagExpressionArgument","arrowFunctionExpression","blockStatement","identifier","tagExp","valueSource","extendsNode","propsObj","class","vars","forEach","items","stringLiteral","propExpressions","Object","entries","map","key","keyNode","objectProperty","booleanLiteral","propName","propValue","arrayExpression","objectExpression","filter","slug"],"sources":["../../src/processors/styled.ts"],"sourcesContent":["import type {\n  CallExpression,\n  Expression,\n  ObjectExpression,\n  SourceLocation,\n  StringLiteral,\n} from '@babel/types';\n\nimport type { StyledMeta } from '@linaria/core';\nimport type { ProcessorParams } from '@linaria/core/processors/BaseProcessor';\nimport BaseProcessor from '@linaria/core/processors/BaseProcessor';\nimport type {\n  Rules,\n  WrappedNode,\n  IInterpolation,\n  ValueCache,\n} from '@linaria/core/processors/types';\n\nexport function hasMeta(value: unknown): value is StyledMeta {\n  return typeof value === 'object' && value !== null && '__linaria' in value;\n}\n\nconst isNotNull = <T>(x: T | null): x is T => x !== null;\n\nexport interface IProps {\n  atomic?: boolean;\n  class?: string;\n  name: string;\n  vars?: Record<string, Expression[]>;\n}\n\nconst singleQuotedStringLiteral = (value: string): StringLiteral => ({\n  type: 'StringLiteral',\n  value,\n  extra: {\n    rawValue: value,\n    raw: `'${value}'`,\n  },\n});\n\nexport default class StyledProcessor extends BaseProcessor {\n  public component: WrappedNode;\n\n  constructor(...args: ProcessorParams) {\n    super(...args);\n\n    let component: WrappedNode | undefined;\n    const [type, value, ...rest] = this.params[0] ?? [];\n    if (type === 'call' && rest.length === 0) {\n      const [source, path] = value;\n      if (path.node.type === 'StringLiteral') {\n        component = path.node.value;\n      } else if (\n        path.node.type === 'ArrowFunctionExpression' ||\n        path.node.type === 'FunctionExpression'\n      ) {\n        // Special case when styled wraps a function\n        // It's actually the same as wrapping a built-in tag\n        component = 'FunctionalComponent';\n      } else {\n        component = {\n          node: path.node,\n          source,\n        };\n        this.dependencies.push({\n          ex: path,\n          source,\n        });\n      }\n    }\n\n    if (type === 'member') {\n      if (value.node.type === 'Identifier') {\n        component = value.node.name;\n      } else if (value.node.type === 'StringLiteral') {\n        component = value.node.value;\n      }\n    }\n\n    if (!component || this.params.length > 1) {\n      throw new Error('Invalid usage of `styled` tag');\n    }\n\n    this.component = component;\n  }\n\n  public override addInterpolation(node: Expression, source: string) {\n    const id = this.getVariableId(source);\n\n    this.interpolations.push({\n      id,\n      node,\n      source,\n      unit: '',\n    });\n\n    return `var(--${id})`;\n  }\n\n  public override extractRules(\n    valueCache: ValueCache,\n    cssText: string,\n    loc?: SourceLocation | null\n  ): [Rules, string] {\n    const rules: Rules = {};\n\n    let selector = `.${this.className}`;\n\n    // If `styled` wraps another component and not a primitive,\n    // get its class name to create a more specific selector\n    // it'll ensure that styles are overridden properly\n    let value =\n      typeof this.component === 'string'\n        ? null\n        : valueCache.get(this.component.node);\n    while (hasMeta(value)) {\n      selector += `.${value.__linaria.className}`;\n      value = value.__linaria.extends;\n    }\n\n    rules[selector] = {\n      cssText,\n      className: this.className,\n      displayName: this.displayName,\n      start: loc?.start ?? null,\n    };\n\n    return [rules, this.className];\n  }\n\n  public override getRuntimeReplacement(\n    classes: string,\n    uniqInterpolations: IInterpolation[]\n  ): [Expression, boolean] {\n    const t = this.astService;\n\n    const props = this.getProps(classes, uniqInterpolations);\n\n    return [\n      t.callExpression(this.tagExpression, [this.getTagComponentProps(props)]),\n      true,\n    ];\n  }\n\n  public override get asSelector(): string {\n    return `.${this.className}`;\n  }\n\n  protected get tagExpressionArgument(): Expression {\n    const t = this.astService;\n    if (typeof this.component === 'string') {\n      if (this.component === 'FunctionalComponent') {\n        return t.arrowFunctionExpression([], t.blockStatement([]));\n      }\n\n      return singleQuotedStringLiteral(this.component);\n    }\n\n    return t.identifier(this.component.source);\n  }\n\n  protected get tagExpression(): CallExpression {\n    const t = this.astService;\n    return t.callExpression(this.tagExp, [this.tagExpressionArgument]);\n  }\n\n  public override get valueSource(): string {\n    const extendsNode =\n      typeof this.component === 'string' ? null : this.component.source;\n    return `{\n    displayName: \"${this.displayName}\",\n    __linaria: {\n      className: \"${this.className}\",\n      extends: ${extendsNode}\n    }\n  }`;\n  }\n\n  protected getProps(\n    classes: string,\n    uniqInterpolations: IInterpolation[]\n  ): IProps {\n    const propsObj: IProps = {\n      name: this.displayName,\n      class: this.className,\n    };\n\n    // If we found any interpolations, also pass them, so they can be applied\n    if (this.interpolations.length) {\n      propsObj.vars = {};\n      uniqInterpolations.forEach(({ id, unit, node }) => {\n        const items: Expression[] = [node];\n\n        if (unit) {\n          items.push(this.astService.stringLiteral(unit));\n        }\n\n        propsObj.vars![id] = items;\n      });\n    }\n\n    return propsObj;\n  }\n\n  protected getTagComponentProps(props: IProps): ObjectExpression {\n    const t = this.astService;\n\n    const propExpressions = Object.entries(props)\n      .map(([key, value]: [key: string, value: IProps[keyof IProps]]) => {\n        if (!value) {\n          return null;\n        }\n\n        const keyNode = t.identifier(key);\n\n        if (typeof value === 'string') {\n          return t.objectProperty(keyNode, t.stringLiteral(value));\n        }\n\n        if (typeof value === 'boolean') {\n          return t.objectProperty(keyNode, t.booleanLiteral(value));\n        }\n\n        const vars = Object.entries(value).map(([propName, propValue]) => {\n          return t.objectProperty(\n            t.stringLiteral(propName),\n            t.arrayExpression(propValue)\n          );\n        });\n\n        return t.objectProperty(keyNode, t.objectExpression(vars));\n      })\n      .filter(isNotNull);\n\n    return t.objectExpression(propExpressions);\n  }\n\n  // eslint-disable-next-line @typescript-eslint/no-unused-vars\n  protected getVariableId(value: string): string {\n    // make the variable unique to this styled component\n    return `${this.slug}-${this.interpolations.length}`;\n  }\n}\n"],"mappings":"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"}

package/esm/styled.js

@@ -1,22 +1,45 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+
 /**
  * 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 * as React from 'react';
 import validAttr from '@emotion/is-prop-valid';
+import React from 'react';
 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
+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
+    if (typeof value === 'string' || // eslint-disable-next-line no-self-compare,no-restricted-globals
     typeof value === 'number' && isFinite(value)) {
       return;
     }
@@ -25,8 +48,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 => {
@@ -42,30 +64,15 @@ function styled(tag) {
         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
-
-      if (typeof component === 'string' && component.indexOf('-') === -1) {
-        filteredProps = {}; // eslint-disable-next-line guard-for-in
-
-        for (const key in rest) {
-          if (key === 'as' || validAttr(key)) {
-            // Don't pass through invalid attributes to HTML elements
-            filteredProps[key] = rest[key];
-          }
-        }
-      } else {
-        filteredProps = rest;
-      }
-
+      const filteredProps = filterProps(component, props, ['as', 'class']);
       filteredProps.ref = ref;
-      filteredProps.className = cx(filteredProps.className || className, options.class);
+      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
+        const style = {}; // eslint-disable-next-line guard-for-in,no-restricted-syntax
 
         for (const name in vars) {
           const variable = vars[name];
@@ -76,7 +83,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) {
@@ -92,7 +108,7 @@ function styled(tag) {
     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 = restOp(props, ['innerRef']);
+      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

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,"file":"styled.js","names":["validAttr","React","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"],"sources":["../src/styled.ts"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-explicit-any */\n/**\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 validAttr from '@emotion/is-prop-valid';\nimport React from 'react';\n\nimport { cx } from '@linaria/core';\nimport type { CSSProperties, StyledMeta } from '@linaria/core';\n\nexport type NoInfer<A> = [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: unknown, componentName: string) => {\n  if (process.env.NODE_ENV !== 'production') {\n    if (\n      typeof value === 'string' ||\n      // eslint-disable-next-line no-self-compare,no-restricted-globals\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 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,no-restricted-syntax\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 = Record<string, unknown>\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\n// eslint-disable-next-line @typescript-eslint/ban-types\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"],"mappings":"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"}

package/lib/index.js

@@ -7,5 +7,4 @@ var _styled = _interopRequireDefault(require("./styled"));
 
 exports.styled = _styled.default;
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-//# sourceMappingURL=index.js.map
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/lib/index.js.map

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

package/lib/processors/styled.js

@@ -0,0 +1,207 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+exports.hasMeta = hasMeta;
+
+var _BaseProcessor = _interopRequireDefault(require("@linaria/core/processors/BaseProcessor"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function hasMeta(value) {
+  return typeof value === 'object' && value !== null && '__linaria' in value;
+}
+
+const isNotNull = x => x !== null;
+
+const singleQuotedStringLiteral = value => ({
+  type: 'StringLiteral',
+  value,
+  extra: {
+    rawValue: value,
+    raw: `'${value}'`
+  }
+});
+
+class StyledProcessor extends _BaseProcessor.default {
+  constructor(...args) {
+    var _this$params$;
+
+    super(...args);
+    let component;
+    const [type, value, ...rest] = (_this$params$ = this.params[0]) !== null && _this$params$ !== void 0 ? _this$params$ : [];
+
+    if (type === 'call' && rest.length === 0) {
+      const [source, path] = value;
+
+      if (path.node.type === 'StringLiteral') {
+        component = path.node.value;
+      } else if (path.node.type === 'ArrowFunctionExpression' || path.node.type === 'FunctionExpression') {
+        // Special case when styled wraps a function
+        // It's actually the same as wrapping a built-in tag
+        component = 'FunctionalComponent';
+      } else {
+        component = {
+          node: path.node,
+          source
+        };
+        this.dependencies.push({
+          ex: path,
+          source
+        });
+      }
+    }
+
+    if (type === 'member') {
+      if (value.node.type === 'Identifier') {
+        component = value.node.name;
+      } else if (value.node.type === 'StringLiteral') {
+        component = value.node.value;
+      }
+    }
+
+    if (!component || this.params.length > 1) {
+      throw new Error('Invalid usage of `styled` tag');
+    }
+
+    this.component = component;
+  }
+
+  addInterpolation(node, source) {
+    const id = this.getVariableId(source);
+    this.interpolations.push({
+      id,
+      node,
+      source,
+      unit: ''
+    });
+    return `var(--${id})`;
+  }
+
+  extractRules(valueCache, cssText, loc) {
+    var _loc$start;
+
+    const rules = {};
+    let selector = `.${this.className}`; // If `styled` wraps another component and not a primitive,
+    // get its class name to create a more specific selector
+    // it'll ensure that styles are overridden properly
+
+    let value = typeof this.component === 'string' ? null : valueCache.get(this.component.node);
+
+    while (hasMeta(value)) {
+      selector += `.${value.__linaria.className}`;
+      value = value.__linaria.extends;
+    }
+
+    rules[selector] = {
+      cssText,
+      className: this.className,
+      displayName: this.displayName,
+      start: (_loc$start = loc === null || loc === void 0 ? void 0 : loc.start) !== null && _loc$start !== void 0 ? _loc$start : null
+    };
+    return [rules, this.className];
+  }
+
+  getRuntimeReplacement(classes, uniqInterpolations) {
+    const t = this.astService;
+    const props = this.getProps(classes, uniqInterpolations);
+    return [t.callExpression(this.tagExpression, [this.getTagComponentProps(props)]), true];
+  }
+
+  get asSelector() {
+    return `.${this.className}`;
+  }
+
+  get tagExpressionArgument() {
+    const t = this.astService;
+
+    if (typeof this.component === 'string') {
+      if (this.component === 'FunctionalComponent') {
+        return t.arrowFunctionExpression([], t.blockStatement([]));
+      }
+
+      return singleQuotedStringLiteral(this.component);
+    }
+
+    return t.identifier(this.component.source);
+  }
+
+  get tagExpression() {
+    const t = this.astService;
+    return t.callExpression(this.tagExp, [this.tagExpressionArgument]);
+  }
+
+  get valueSource() {
+    const extendsNode = typeof this.component === 'string' ? null : this.component.source;
+    return `{
+    displayName: "${this.displayName}",
+    __linaria: {
+      className: "${this.className}",
+      extends: ${extendsNode}
+    }
+  }`;
+  }
+
+  getProps(classes, uniqInterpolations) {
+    const propsObj = {
+      name: this.displayName,
+      class: this.className
+    }; // If we found any interpolations, also pass them, so they can be applied
+
+    if (this.interpolations.length) {
+      propsObj.vars = {};
+      uniqInterpolations.forEach(({
+        id,
+        unit,
+        node
+      }) => {
+        const items = [node];
+
+        if (unit) {
+          items.push(this.astService.stringLiteral(unit));
+        }
+
+        propsObj.vars[id] = items;
+      });
+    }
+
+    return propsObj;
+  }
+
+  getTagComponentProps(props) {
+    const t = this.astService;
+    const propExpressions = Object.entries(props).map(([key, value]) => {
+      if (!value) {
+        return null;
+      }
+
+      const keyNode = t.identifier(key);
+
+      if (typeof value === 'string') {
+        return t.objectProperty(keyNode, t.stringLiteral(value));
+      }
+
+      if (typeof value === 'boolean') {
+        return t.objectProperty(keyNode, t.booleanLiteral(value));
+      }
+
+      const vars = Object.entries(value).map(([propName, propValue]) => {
+        return t.objectProperty(t.stringLiteral(propName), t.arrayExpression(propValue));
+      });
+      return t.objectProperty(keyNode, t.objectExpression(vars));
+    }).filter(isNotNull);
+    return t.objectExpression(propExpressions);
+  } // eslint-disable-next-line @typescript-eslint/no-unused-vars
+
+
+  getVariableId(value) {
+    // make the variable unique to this styled component
+    return `${this.slug}-${this.interpolations.length}`;
+  }
+
+}
+
+exports.default = StyledProcessor;
+//# sourceMappingURL=styled.js.map

package/lib/processors/styled.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styled.js","names":["hasMeta","value","isNotNull","x","singleQuotedStringLiteral","type","extra","rawValue","raw","StyledProcessor","BaseProcessor","constructor","args","component","rest","params","length","source","path","node","dependencies","push","ex","name","Error","addInterpolation","id","getVariableId","interpolations","unit","extractRules","valueCache","cssText","loc","rules","selector","className","get","__linaria","extends","displayName","start","getRuntimeReplacement","classes","uniqInterpolations","t","astService","props","getProps","callExpression","tagExpression","getTagComponentProps","asSelector","tagExpressionArgument","arrowFunctionExpression","blockStatement","identifier","tagExp","valueSource","extendsNode","propsObj","class","vars","forEach","items","stringLiteral","propExpressions","Object","entries","map","key","keyNode","objectProperty","booleanLiteral","propName","propValue","arrayExpression","objectExpression","filter","slug"],"sources":["../../src/processors/styled.ts"],"sourcesContent":["import type {\n  CallExpression,\n  Expression,\n  ObjectExpression,\n  SourceLocation,\n  StringLiteral,\n} from '@babel/types';\n\nimport type { StyledMeta } from '@linaria/core';\nimport type { ProcessorParams } from '@linaria/core/processors/BaseProcessor';\nimport BaseProcessor from '@linaria/core/processors/BaseProcessor';\nimport type {\n  Rules,\n  WrappedNode,\n  IInterpolation,\n  ValueCache,\n} from '@linaria/core/processors/types';\n\nexport function hasMeta(value: unknown): value is StyledMeta {\n  return typeof value === 'object' && value !== null && '__linaria' in value;\n}\n\nconst isNotNull = <T>(x: T | null): x is T => x !== null;\n\nexport interface IProps {\n  atomic?: boolean;\n  class?: string;\n  name: string;\n  vars?: Record<string, Expression[]>;\n}\n\nconst singleQuotedStringLiteral = (value: string): StringLiteral => ({\n  type: 'StringLiteral',\n  value,\n  extra: {\n    rawValue: value,\n    raw: `'${value}'`,\n  },\n});\n\nexport default class StyledProcessor extends BaseProcessor {\n  public component: WrappedNode;\n\n  constructor(...args: ProcessorParams) {\n    super(...args);\n\n    let component: WrappedNode | undefined;\n    const [type, value, ...rest] = this.params[0] ?? [];\n    if (type === 'call' && rest.length === 0) {\n      const [source, path] = value;\n      if (path.node.type === 'StringLiteral') {\n        component = path.node.value;\n      } else if (\n        path.node.type === 'ArrowFunctionExpression' ||\n        path.node.type === 'FunctionExpression'\n      ) {\n        // Special case when styled wraps a function\n        // It's actually the same as wrapping a built-in tag\n        component = 'FunctionalComponent';\n      } else {\n        component = {\n          node: path.node,\n          source,\n        };\n        this.dependencies.push({\n          ex: path,\n          source,\n        });\n      }\n    }\n\n    if (type === 'member') {\n      if (value.node.type === 'Identifier') {\n        component = value.node.name;\n      } else if (value.node.type === 'StringLiteral') {\n        component = value.node.value;\n      }\n    }\n\n    if (!component || this.params.length > 1) {\n      throw new Error('Invalid usage of `styled` tag');\n    }\n\n    this.component = component;\n  }\n\n  public override addInterpolation(node: Expression, source: string) {\n    const id = this.getVariableId(source);\n\n    this.interpolations.push({\n      id,\n      node,\n      source,\n      unit: '',\n    });\n\n    return `var(--${id})`;\n  }\n\n  public override extractRules(\n    valueCache: ValueCache,\n    cssText: string,\n    loc?: SourceLocation | null\n  ): [Rules, string] {\n    const rules: Rules = {};\n\n    let selector = `.${this.className}`;\n\n    // If `styled` wraps another component and not a primitive,\n    // get its class name to create a more specific selector\n    // it'll ensure that styles are overridden properly\n    let value =\n      typeof this.component === 'string'\n        ? null\n        : valueCache.get(this.component.node);\n    while (hasMeta(value)) {\n      selector += `.${value.__linaria.className}`;\n      value = value.__linaria.extends;\n    }\n\n    rules[selector] = {\n      cssText,\n      className: this.className,\n      displayName: this.displayName,\n      start: loc?.start ?? null,\n    };\n\n    return [rules, this.className];\n  }\n\n  public override getRuntimeReplacement(\n    classes: string,\n    uniqInterpolations: IInterpolation[]\n  ): [Expression, boolean] {\n    const t = this.astService;\n\n    const props = this.getProps(classes, uniqInterpolations);\n\n    return [\n      t.callExpression(this.tagExpression, [this.getTagComponentProps(props)]),\n      true,\n    ];\n  }\n\n  public override get asSelector(): string {\n    return `.${this.className}`;\n  }\n\n  protected get tagExpressionArgument(): Expression {\n    const t = this.astService;\n    if (typeof this.component === 'string') {\n      if (this.component === 'FunctionalComponent') {\n        return t.arrowFunctionExpression([], t.blockStatement([]));\n      }\n\n      return singleQuotedStringLiteral(this.component);\n    }\n\n    return t.identifier(this.component.source);\n  }\n\n  protected get tagExpression(): CallExpression {\n    const t = this.astService;\n    return t.callExpression(this.tagExp, [this.tagExpressionArgument]);\n  }\n\n  public override get valueSource(): string {\n    const extendsNode =\n      typeof this.component === 'string' ? null : this.component.source;\n    return `{\n    displayName: \"${this.displayName}\",\n    __linaria: {\n      className: \"${this.className}\",\n      extends: ${extendsNode}\n    }\n  }`;\n  }\n\n  protected getProps(\n    classes: string,\n    uniqInterpolations: IInterpolation[]\n  ): IProps {\n    const propsObj: IProps = {\n      name: this.displayName,\n      class: this.className,\n    };\n\n    // If we found any interpolations, also pass them, so they can be applied\n    if (this.interpolations.length) {\n      propsObj.vars = {};\n      uniqInterpolations.forEach(({ id, unit, node }) => {\n        const items: Expression[] = [node];\n\n        if (unit) {\n          items.push(this.astService.stringLiteral(unit));\n        }\n\n        propsObj.vars![id] = items;\n      });\n    }\n\n    return propsObj;\n  }\n\n  protected getTagComponentProps(props: IProps): ObjectExpression {\n    const t = this.astService;\n\n    const propExpressions = Object.entries(props)\n      .map(([key, value]: [key: string, value: IProps[keyof IProps]]) => {\n        if (!value) {\n          return null;\n        }\n\n        const keyNode = t.identifier(key);\n\n        if (typeof value === 'string') {\n          return t.objectProperty(keyNode, t.stringLiteral(value));\n        }\n\n        if (typeof value === 'boolean') {\n          return t.objectProperty(keyNode, t.booleanLiteral(value));\n        }\n\n        const vars = Object.entries(value).map(([propName, propValue]) => {\n          return t.objectProperty(\n            t.stringLiteral(propName),\n            t.arrayExpression(propValue)\n          );\n        });\n\n        return t.objectProperty(keyNode, t.objectExpression(vars));\n      })\n      .filter(isNotNull);\n\n    return t.objectExpression(propExpressions);\n  }\n\n  // eslint-disable-next-line @typescript-eslint/no-unused-vars\n  protected getVariableId(value: string): string {\n    // make the variable unique to this styled component\n    return `${this.slug}-${this.interpolations.length}`;\n  }\n}\n"],"mappings":"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"}

package/lib/styled.js

@@ -1,19 +1,17 @@
 "use strict";
 
 exports.__esModule = true;
-exports.default = void 0;
-
-var React = _interopRequireWildcard(require("react"));
+exports.omit = exports.default = void 0;
 
 var _isPropValid = _interopRequireDefault(require("@emotion/is-prop-valid"));
 
+var _react = _interopRequireDefault(require("react"));
+
 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; }
+/* eslint-disable @typescript-eslint/no-explicit-any */
 
 /**
  * This file contains an runtime version of `styled` component. Responsibilities of the component are:
@@ -21,25 +19,47 @@ function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj;
  * - injects classNames for the returned component
  * - 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
+const isCapital = ch => ch.toUpperCase() === ch;
+
+const filterKey = keys => key => keys.indexOf(key) === -1;
+
+const omit = (obj, keys) => {
+  const res = {};
+  Object.keys(obj).filter(filterKey(keys)).forEach(key => {
+    res[key] = obj[key];
+  });
+  return res;
+};
+
+exports.omit = omit;
+
+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 (!(0, _isPropValid.default)(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
+    if (typeof value === 'string' || // eslint-disable-next-line no-self-compare,no-restricted-globals
     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.`);
+    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 => {
@@ -55,30 +75,15 @@ function styled(tag) {
         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
-
-      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)) {
-            // Don't pass through invalid attributes to HTML elements
-            filteredProps[key] = rest[key];
-          }
-        }
-      } else {
-        filteredProps = rest;
-      }
-
+      const filteredProps = filterProps(component, props, ['as', 'class']);
       filteredProps.ref = ref;
-      filteredProps.className = (0, _core.cx)(filteredProps.className || className, options.class);
+      filteredProps.className = options.atomic ? (0, _core.cx)(options.class, filteredProps.className || className) : (0, _core.cx)(filteredProps.className || className, options.class);
       const {
         vars
       } = options;
 
       if (vars) {
-        const style = {}; // eslint-disable-next-line guard-for-in
+        const style = {}; // eslint-disable-next-line guard-for-in,no-restricted-syntax
 
         for (const name in vars) {
           const variable = vars[name];
@@ -86,26 +91,35 @@ function styled(tag) {
           const unit = variable[1] || '';
           const value = typeof result === 'function' ? result(props) : result;
           warnIfInvalid(value, options.name);
-          style[`--${name}`] = `${value}${unit}`;
+          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 = 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
+    const 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']);
+      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
@@ -125,5 +139,4 @@ var _default = process.env.NODE_ENV !== 'production' ? new Proxy(styled, {
 
 }) : styled;
 
-exports.default = _default;
-//# sourceMappingURL=styled.js.map
+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,"file":"styled.js","names":["isCapital","ch","toUpperCase","filterKey","keys","key","indexOf","omit","obj","res","Object","filter","forEach","filterProps","component","props","omitKeys","filteredProps","validAttr","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","cx","vars","style","name","variable","result","unit","ownStyle","length","__linaria","React","createElement","Result","forwardRef","rest","innerRef","displayName","extends","Proxy","get","o","prop"],"sources":["../src/styled.ts"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-explicit-any */\n/**\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 validAttr from '@emotion/is-prop-valid';\nimport React from 'react';\n\nimport { cx } from '@linaria/core';\nimport type { CSSProperties, StyledMeta } from '@linaria/core';\n\nexport type NoInfer<A> = [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: unknown, componentName: string) => {\n  if (process.env.NODE_ENV !== 'production') {\n    if (\n      typeof value === 'string' ||\n      // eslint-disable-next-line no-self-compare,no-restricted-globals\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 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,no-restricted-syntax\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 = Record<string, unknown>\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\n// eslint-disable-next-line @typescript-eslint/ban-types\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"],"mappings":"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"}

package/package.json

@@ -1,54 +1,84 @@
 {
   "name": "@linaria/react",
-  "version": "3.0.0-beta.2",
-  "publishConfig": {
-    "access": "public"
-  },
   "description": "Blazing fast zero-runtime CSS in JS library",
-  "sideEffects": false,
-  "main": "lib/index.js",
-  "module": "esm/index.js",
-  "types": "types",
+  "version": "3.0.0-beta.22",
+  "bugs": "https://github.com/callstack/linaria/issues",
+  "dependencies": {
+    "@emotion/is-prop-valid": "^0.8.8",
+    "@linaria/core": "^3.0.0-beta.22",
+    "ts-invariant": "^0.10.3"
+  },
+  "devDependencies": {
+    "@babel/types": "^7.18.4",
+    "@types/babel__core": "^7.1.19",
+    "@types/node": "^17.0.39",
+    "@types/react": ">=16",
+    "react": "^16.14.0",
+    "react-test-renderer": "^16.8.3"
+  },
+  "engines": {
+    "node": "^12.16.0 || >=13.7.0"
+  },
+  "exports": {
+    "./package.json": "./package.json",
+    ".": {
+      "types": "./types/index.d.ts",
+      "import": "./esm/index.js",
+      "default": "./lib/index.js"
+    },
+    "./*": {
+      "types": "./types/*.d.ts",
+      "import": "./esm/*.js",
+      "default": "./lib/*.js"
+    }
+  },
   "files": [
-    "types/",
+    "esm/",
     "lib/",
-    "esm/"
+    "processors/",
+    "types/"
   ],
-  "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",
+    "linaria",
+    "react",
     "styled-components"
   ],
+  "license": "MIT",
+  "linaria": {
+    "tags": {
+      "styled": "./lib/processors/styled.js"
+    }
+  },
+  "main": "lib/index.js",
+  "module": "esm/index.js",
+  "peerDependencies": {
+    "react": ">=16"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": "git@github.com:callstack/linaria.git",
+  "sideEffects": false,
+  "types": "types/index.d.ts",
+  "typesVersions": {
+    "*": {
+      "processors/*": [
+        "./types/processors/*.d.ts"
+      ]
+    }
+  },
   "scripts": {
-    "build:lib": "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": "npm run build:lib && npm run build:esm && npm run build:declarations",
+    "build:corejs-test": "cross-env NODE_ENV=legacy babel src --out-dir lib --extensions '.js,.jsx,.ts,.tsx' --ignore \"src/processors/**/*\"",
     "build:declarations": "tsc --emitDeclarationOnly --outDir types",
-    "prepare": "yarn build && yarn build:declarations",
+    "build:esm": "babel src --out-dir esm --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",
     "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-beta.2"
-  },
-  "peerDependencies": {
-    "react": ">=16"
-  },
-  "gitHead": "37c459ce01662a9b3df606e00db519f1db8c0665"
-}
+    "watch": "npm run build --watch"
+  }
+}

package/processors/styled.js

@@ -0,0 +1,5 @@
+Object.defineProperty(exports, '__esModule', {
+  value: true,
+});
+
+exports.default = require('../lib/processors/styled').default;

package/types/processors/styled.d.ts

@@ -0,0 +1,26 @@
+import type { CallExpression, Expression, ObjectExpression, SourceLocation } from '@babel/types';
+import type { StyledMeta } from '@linaria/core';
+import type { ProcessorParams } from '@linaria/core/processors/BaseProcessor';
+import BaseProcessor from '@linaria/core/processors/BaseProcessor';
+import type { Rules, WrappedNode, IInterpolation, ValueCache } from '@linaria/core/processors/types';
+export declare function hasMeta(value: unknown): value is StyledMeta;
+export interface IProps {
+    atomic?: boolean;
+    class?: string;
+    name: string;
+    vars?: Record<string, Expression[]>;
+}
+export default class StyledProcessor extends BaseProcessor {
+    component: WrappedNode;
+    constructor(...args: ProcessorParams);
+    addInterpolation(node: Expression, source: string): string;
+    extractRules(valueCache: ValueCache, cssText: string, loc?: SourceLocation | null): [Rules, string];
+    getRuntimeReplacement(classes: string, uniqInterpolations: IInterpolation[]): [Expression, boolean];
+    get asSelector(): string;
+    protected get tagExpressionArgument(): Expression;
+    protected get tagExpression(): CallExpression;
+    get valueSource(): string;
+    protected getProps(classes: string, uniqInterpolations: IInterpolation[]): IProps;
+    protected getTagComponentProps(props: IProps): ObjectExpression;
+    protected getVariableId(value: string): string;
+}

package/types/styled.d.ts

@@ -1,27 +1,30 @@
-/**
- * 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 * 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 {
+export declare type NoInfer<A> = [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;
-} ? TConstructor : never : never): ComponentStyledTag<TConstructor>;
-declare function styled<T>(tag: T extends {
+}>, TMustHave extends {
     className?: string;
-} ? React.ComponentType<T> : never): ComponentStyledTag<T>;
+}, TConstructor extends Component<TProps>>(componentWithoutStyle: TConstructor & Component<TProps>): ComponentStyledTagWithoutInterpolation<TConstructor>;
 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 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;
-} ? 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 HtmlStyledTag<TName extends keyof JSX.IntrinsicElements> = <TAdditionalProps = Record<string, unknown>>(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>;
 };

package/CHANGELOG.md

@@ -1,8 +0,0 @@
-# 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.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