@linaria/react - npm Package Compare versions

Comparing version 4.1.5 to 4.2.0

dist/index.js

+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var src_exports = {};
+__export(src_exports, {
+  styled: () => styled_default
+});
+module.exports = __toCommonJS(src_exports);
+
+// src/styled.ts
+var import_is_prop_valid = __toESM(require("@emotion/is-prop-valid"));
+var import_react = __toESM(require("react"));
+var import_core = require("@linaria/core");
+var isCapital = (ch) => ch.toUpperCase() === ch;
+var filterKey = (keys) => (key) => keys.indexOf(key) === -1;
+var 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);
+  if (typeof component === "string" && component.indexOf("-") === -1 && !isCapital(component[0])) {
+    Object.keys(filteredProps).forEach((key) => {
+      if (!(0, import_is_prop_valid.default)(key)) {
+        delete filteredProps[key];
+      }
+    });
+  }
+  return filteredProps;
+}
+var warnIfInvalid = (value, componentName) => {
+  if (process.env.NODE_ENV !== "production") {
+    if (typeof value === "string" || typeof value === "number" && isFinite(value)) {
+      return;
+    }
+    const stringified = typeof value === "object" ? JSON.stringify(value) : String(value);
+    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)) {
+        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;
+      const filteredProps = filterProps(component, props, [
+        "as",
+        "class"
+      ]);
+      filteredProps.ref = ref;
+      filteredProps.className = options.atomic ? (0, import_core.cx)(options.class, filteredProps.className || className) : (0, import_core.cx)(filteredProps.className || className, options.class);
+      const { vars } = options;
+      if (vars) {
+        const style = {};
+        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) {
+        filteredProps.as = component;
+        return import_react.default.createElement(tag, filteredProps);
+      }
+      return import_react.default.createElement(component, filteredProps);
+    };
+    const Result = import_react.default.forwardRef ? import_react.default.forwardRef(render) : (props) => {
+      const rest = omit(props, ["innerRef"]);
+      return render(rest, props.innerRef);
+    };
+    Result.displayName = options.name;
+    Result.__linaria = {
+      className: options.class,
+      extends: tag
+    };
+    return Result;
+  };
+}
+var styled_default = process.env.NODE_ENV !== "production" ? new Proxy(styled, {
+  get(o, prop) {
+    return o(prop);
+  }
+}) : styled;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  styled
+});
+//# sourceMappingURL=index.js.map

dist/index.js.map

+{"version":3,"sources":["../src/index.ts","../src/styled.ts"],"sourcesContent":["export { default as styled } from './styled';\nexport type { StyledJSXIntrinsics, Styled } from './styled';\nexport type { CSSProperties } from '@linaria/core';\nexport type { StyledMeta } from '@linaria/tags';\n","/* 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 } from '@linaria/core';\nimport type { StyledMeta } from '@linaria/tags';\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\nexport type 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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","names":["validAttr","React"]}

dist/index.mjs

+// src/styled.ts
+import validAttr from "@emotion/is-prop-valid";
+import React from "react";
+import { cx } from "@linaria/core";
+var isCapital = (ch) => ch.toUpperCase() === ch;
+var filterKey = (keys) => (key) => keys.indexOf(key) === -1;
+var 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);
+  if (typeof component === "string" && component.indexOf("-") === -1 && !isCapital(component[0])) {
+    Object.keys(filteredProps).forEach((key) => {
+      if (!validAttr(key)) {
+        delete filteredProps[key];
+      }
+    });
+  }
+  return filteredProps;
+}
+var warnIfInvalid = (value, componentName) => {
+  if (process.env.NODE_ENV !== "production") {
+    if (typeof value === "string" || typeof value === "number" && isFinite(value)) {
+      return;
+    }
+    const stringified = typeof value === "object" ? JSON.stringify(value) : String(value);
+    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)) {
+        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;
+      const 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 = {};
+        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) {
+        filteredProps.as = component;
+        return React.createElement(tag, filteredProps);
+      }
+      return React.createElement(component, filteredProps);
+    };
+    const Result = React.forwardRef ? React.forwardRef(render) : (props) => {
+      const rest = omit(props, ["innerRef"]);
+      return render(rest, props.innerRef);
+    };
+    Result.displayName = options.name;
+    Result.__linaria = {
+      className: options.class,
+      extends: tag
+    };
+    return Result;
+  };
+}
+var styled_default = process.env.NODE_ENV !== "production" ? new Proxy(styled, {
+  get(o, prop) {
+    return o(prop);
+  }
+}) : styled;
+export {
+  styled_default as styled
+};
+//# sourceMappingURL=index.mjs.map

dist/index.mjs.map

+{"version":3,"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 } from '@linaria/core';\nimport type { StyledMeta } from '@linaria/tags';\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\nexport type 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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","names":[]}

dist/processors/styled.js

+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var __publicField = (obj, key, value) => {
+  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+  return value;
+};
+var __accessCheck = (obj, member, msg) => {
+  if (!member.has(obj))
+    throw TypeError("Cannot " + msg);
+};
+var __privateGet = (obj, member, getter) => {
+  __accessCheck(obj, member, "read from private field");
+  return getter ? getter.call(obj) : member.get(obj);
+};
+var __privateAdd = (obj, member, value) => {
+  if (member.has(obj))
+    throw TypeError("Cannot add the same private member more than once");
+  member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
+};
+var __privateSet = (obj, member, value, setter) => {
+  __accessCheck(obj, member, "write to private field");
+  setter ? setter.call(obj, value) : member.set(obj, value);
+  return value;
+};
+var __privateWrapper = (obj, member, setter, getter) => ({
+  set _(value) {
+    __privateSet(obj, member, value, setter);
+  },
+  get _() {
+    return __privateGet(obj, member, getter);
+  }
+});
+
+// src/processors/styled.ts
+var styled_exports = {};
+__export(styled_exports, {
+  default: () => StyledProcessor
+});
+module.exports = __toCommonJS(styled_exports);
+var import_tags = require("@linaria/tags");
+var import_utils = require("@linaria/utils");
+var isNotNull = (x) => x !== null;
+var singleQuotedStringLiteral = (value) => ({
+  type: "StringLiteral",
+  value,
+  extra: {
+    rawValue: value,
+    raw: `'${value}'`
+  }
+});
+var _variableIdx, _variablesCache;
+var StyledProcessor = class extends import_tags.TaggedTemplateProcessor {
+  constructor(params, ...args) {
+    (0, import_tags.validateParams)(
+      params,
+      ["tag", ["call", "member"], ["template", "call"]],
+      "Invalid usage of `styled` tag"
+    );
+    const [tag, tagOp, template] = params;
+    if (template[0] === "call") {
+      throw import_tags.TaggedTemplateProcessor.SKIP;
+    }
+    super([tag, template], ...args);
+    __publicField(this, "component");
+    __privateAdd(this, _variableIdx, 0);
+    __privateAdd(this, _variablesCache, /* @__PURE__ */ new Map());
+    let component;
+    if (tagOp[0] === "call" && tagOp.length === 2) {
+      const value = tagOp[1];
+      if (value.kind === import_tags.ValueType.FUNCTION) {
+        component = "FunctionalComponent";
+      } else {
+        component = {
+          node: value.ex,
+          source: value.source
+        };
+        this.dependencies.push(value);
+      }
+    }
+    if (tagOp[0] === "member") {
+      [, component] = tagOp;
+    }
+    if (!component) {
+      throw new Error("Invalid usage of `styled` tag");
+    }
+    this.component = component;
+  }
+  addInterpolation(node, precedingCss, source, unit = "") {
+    const id = this.getVariableId(source, unit, precedingCss);
+    this.interpolations.push({
+      id,
+      node,
+      source,
+      unit
+    });
+    return id;
+  }
+  doEvaltimeReplacement() {
+    this.replacer(this.value, false);
+  }
+  doRuntimeReplacement() {
+    const t = this.astService;
+    const props = this.getProps();
+    this.replacer(
+      t.callExpression(this.tagExpression, [this.getTagComponentProps(props)]),
+      true
+    );
+  }
+  extractRules(valueCache, cssText, loc) {
+    const rules = {};
+    let selector = `.${this.className}`;
+    let value = typeof this.component === "string" ? null : valueCache.get(this.component.node.name);
+    while ((0, import_tags.hasMeta)(value)) {
+      selector += `.${value.__linaria.className}`;
+      value = value.__linaria.extends;
+    }
+    rules[selector] = {
+      cssText,
+      className: this.className,
+      displayName: this.displayName,
+      start: (loc == null ? void 0 : loc.start) ?? null
+    };
+    return rules;
+  }
+  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.callExpression(t.identifier(this.component.node.name), []);
+  }
+  get tagExpression() {
+    const t = this.astService;
+    return t.callExpression(this.tag, [this.tagExpressionArgument]);
+  }
+  get value() {
+    const t = this.astService;
+    const extendsNode = typeof this.component === "string" ? null : this.component.node.name;
+    return t.objectExpression([
+      t.objectProperty(
+        t.stringLiteral("displayName"),
+        t.stringLiteral(this.displayName)
+      ),
+      t.objectProperty(
+        t.stringLiteral("__linaria"),
+        t.objectExpression([
+          t.objectProperty(
+            t.stringLiteral("className"),
+            t.stringLiteral(this.className)
+          ),
+          t.objectProperty(
+            t.stringLiteral("extends"),
+            extendsNode ? t.callExpression(t.identifier(extendsNode), []) : t.nullLiteral()
+          )
+        ])
+      )
+    ]);
+  }
+  toString() {
+    const res = (arg) => `${this.tagSourceCode()}(${arg})\`\u2026\``;
+    if (typeof this.component === "string") {
+      if (this.component === "FunctionalComponent") {
+        return res("() => {\u2026}");
+      }
+      return res(`'${this.component}'`);
+    }
+    return res(this.component.source);
+  }
+  getCustomVariableId(source, unit, precedingCss) {
+    const context = this.getVariableContext(source, unit, precedingCss);
+    const customSlugFn = this.options.variableNameSlug;
+    if (!customSlugFn) {
+      return void 0;
+    }
+    return typeof customSlugFn === "function" ? customSlugFn(context) : (0, import_tags.buildSlug)(customSlugFn, context);
+  }
+  getProps() {
+    const propsObj = {
+      name: this.displayName,
+      class: this.className
+    };
+    if (this.interpolations.length) {
+      propsObj.vars = {};
+      this.interpolations.forEach(({ id, unit, node }) => {
+        const items = [this.astService.callExpression(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);
+  }
+  getVariableContext(source, unit, precedingCss) {
+    const getIndex = () => {
+      return __privateWrapper(this, _variableIdx)._++;
+    };
+    return {
+      componentName: this.displayName,
+      componentSlug: this.slug,
+      get index() {
+        return getIndex();
+      },
+      precedingCss,
+      processor: this.constructor.name,
+      source,
+      unit,
+      valueSlug: (0, import_utils.slugify)(source + unit)
+    };
+  }
+  getVariableId(source, unit, precedingCss) {
+    const value = source + unit;
+    if (!__privateGet(this, _variablesCache).has(value)) {
+      const id = this.getCustomVariableId(source, unit, precedingCss);
+      if (id) {
+        return (0, import_tags.toValidCSSIdentifier)(id);
+      }
+      const context = this.getVariableContext(source, unit, precedingCss);
+      __privateGet(this, _variablesCache).set(value, `${this.slug}-${context.index}`);
+    }
+    return __privateGet(this, _variablesCache).get(value);
+  }
+};
+_variableIdx = new WeakMap();
+_variablesCache = new WeakMap();
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {});
+//# sourceMappingURL=styled.js.map

dist/processors/styled.js.map

+{"version":3,"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 {\n  Params,\n  Rules,\n  TailProcessorParams,\n  ValueCache,\n  WrappedNode,\n} from '@linaria/tags';\nimport {\n  buildSlug,\n  hasMeta,\n  TaggedTemplateProcessor,\n  validateParams,\n  ValueType,\n  toValidCSSIdentifier,\n} from '@linaria/tags';\nimport type { IVariableContext } from '@linaria/utils';\nimport { slugify } from '@linaria/utils';\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 TaggedTemplateProcessor {\n  public component: WrappedNode;\n\n  #variableIdx = 0;\n\n  #variablesCache = new Map<string, string>();\n\n  constructor(params: Params, ...args: TailProcessorParams) {\n    validateParams(\n      params,\n      ['tag', ['call', 'member'], ['template', 'call']],\n      'Invalid usage of `styled` tag'\n    );\n\n    const [tag, tagOp, template] = params;\n\n    if (template[0] === 'call') {\n      // It is already transformed styled-literal. Skip it.\n      // eslint-disable-next-line @typescript-eslint/no-throw-literal\n      throw TaggedTemplateProcessor.SKIP;\n    }\n\n    super([tag, template], ...args);\n\n    let component: WrappedNode | undefined;\n    if (tagOp[0] === 'call' && tagOp.length === 2) {\n      const value = tagOp[1];\n      if (value.kind === ValueType.FUNCTION) {\n        component = 'FunctionalComponent';\n      } else {\n        component = {\n          node: value.ex,\n          source: value.source,\n        };\n\n        this.dependencies.push(value);\n      }\n    }\n\n    if (tagOp[0] === 'member') {\n      [, component] = tagOp;\n    }\n\n    if (!component) {\n      throw new Error('Invalid usage of `styled` tag');\n    }\n\n    this.component = component;\n  }\n\n  public override addInterpolation(\n    node: Expression,\n    precedingCss: string,\n    source: string,\n    unit = ''\n  ): string {\n    const id = this.getVariableId(source, unit, precedingCss);\n\n    this.interpolations.push({\n      id,\n      node,\n      source,\n      unit,\n    });\n\n    return id;\n  }\n\n  public override doEvaltimeReplacement(): void {\n    this.replacer(this.value, false);\n  }\n\n  public override doRuntimeReplacement(): void {\n    const t = this.astService;\n\n    const props = this.getProps();\n\n    this.replacer(\n      t.callExpression(this.tagExpression, [this.getTagComponentProps(props)]),\n      true\n    );\n  }\n\n  public override extractRules(\n    valueCache: ValueCache,\n    cssText: string,\n    loc?: SourceLocation | null\n  ): Rules {\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.name);\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;\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.callExpression(t.identifier(this.component.node.name), []);\n  }\n\n  protected get tagExpression(): CallExpression {\n    const t = this.astService;\n    return t.callExpression(this.tag, [this.tagExpressionArgument]);\n  }\n\n  public override get value(): ObjectExpression {\n    const t = this.astService;\n    const extendsNode =\n      typeof this.component === 'string' ? null : this.component.node.name;\n\n    return t.objectExpression([\n      t.objectProperty(\n        t.stringLiteral('displayName'),\n        t.stringLiteral(this.displayName)\n      ),\n      t.objectProperty(\n        t.stringLiteral('__linaria'),\n        t.objectExpression([\n          t.objectProperty(\n            t.stringLiteral('className'),\n            t.stringLiteral(this.className)\n          ),\n          t.objectProperty(\n            t.stringLiteral('extends'),\n            extendsNode\n              ? t.callExpression(t.identifier(extendsNode), [])\n              : t.nullLiteral()\n          ),\n        ])\n      ),\n    ]);\n  }\n\n  public override toString(): string {\n    const res = (arg: string) => `${this.tagSourceCode()}(${arg})\\`…\\``;\n\n    if (typeof this.component === 'string') {\n      if (this.component === 'FunctionalComponent') {\n        return res('() => {…}');\n      }\n\n      return res(`'${this.component}'`);\n    }\n\n    return res(this.component.source);\n  }\n\n  protected getCustomVariableId(\n    source: string,\n    unit: string,\n    precedingCss: string\n  ) {\n    const context = this.getVariableContext(source, unit, precedingCss);\n    const customSlugFn = this.options.variableNameSlug;\n    if (!customSlugFn) {\n      return undefined;\n    }\n\n    return typeof customSlugFn === 'function'\n      ? customSlugFn(context)\n      : buildSlug(customSlugFn, context);\n  }\n\n  protected getProps(): 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      this.interpolations.forEach(({ id, unit, node }) => {\n        const items: Expression[] = [this.astService.callExpression(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  protected getVariableContext(\n    source: string,\n    unit: string,\n    precedingCss: string\n  ): IVariableContext {\n    const getIndex = () => {\n      // eslint-disable-next-line no-plusplus\n      return this.#variableIdx++;\n    };\n\n    return {\n      componentName: this.displayName,\n      componentSlug: this.slug,\n      get index() {\n        return getIndex();\n      },\n      precedingCss,\n      processor: this.constructor.name,\n      source,\n      unit,\n      valueSlug: slugify(source + unit),\n    };\n  }\n\n  protected getVariableId(\n    source: string,\n    unit: string,\n    precedingCss: string\n  ): string {\n    const value = source + unit;\n    if (!this.#variablesCache.has(value)) {\n      const id = this.getCustomVariableId(source, unit, precedingCss);\n      if (id) {\n        return toValidCSSIdentifier(id);\n      }\n\n      const context = this.getVariableContext(source, unit, precedingCss);\n\n      // make the variable unique to this styled component\n      this.#variablesCache.set(value, `${this.slug}-${context.index}`);\n    }\n\n    return this.#variablesCache.get(value)!;\n  }\n}\n"],"mappings":"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","names":[]}

dist/processors/styled.mjs

+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => {
+  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+  return value;
+};
+var __accessCheck = (obj, member, msg) => {
+  if (!member.has(obj))
+    throw TypeError("Cannot " + msg);
+};
+var __privateGet = (obj, member, getter) => {
+  __accessCheck(obj, member, "read from private field");
+  return getter ? getter.call(obj) : member.get(obj);
+};
+var __privateAdd = (obj, member, value) => {
+  if (member.has(obj))
+    throw TypeError("Cannot add the same private member more than once");
+  member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
+};
+var __privateSet = (obj, member, value, setter) => {
+  __accessCheck(obj, member, "write to private field");
+  setter ? setter.call(obj, value) : member.set(obj, value);
+  return value;
+};
+var __privateWrapper = (obj, member, setter, getter) => ({
+  set _(value) {
+    __privateSet(obj, member, value, setter);
+  },
+  get _() {
+    return __privateGet(obj, member, getter);
+  }
+});
+
+// src/processors/styled.ts
+import {
+  buildSlug,
+  hasMeta,
+  TaggedTemplateProcessor,
+  validateParams,
+  ValueType,
+  toValidCSSIdentifier
+} from "@linaria/tags";
+import { slugify } from "@linaria/utils";
+var isNotNull = (x) => x !== null;
+var singleQuotedStringLiteral = (value) => ({
+  type: "StringLiteral",
+  value,
+  extra: {
+    rawValue: value,
+    raw: `'${value}'`
+  }
+});
+var _variableIdx, _variablesCache;
+var StyledProcessor = class extends TaggedTemplateProcessor {
+  constructor(params, ...args) {
+    validateParams(
+      params,
+      ["tag", ["call", "member"], ["template", "call"]],
+      "Invalid usage of `styled` tag"
+    );
+    const [tag, tagOp, template] = params;
+    if (template[0] === "call") {
+      throw TaggedTemplateProcessor.SKIP;
+    }
+    super([tag, template], ...args);
+    __publicField(this, "component");
+    __privateAdd(this, _variableIdx, 0);
+    __privateAdd(this, _variablesCache, /* @__PURE__ */ new Map());
+    let component;
+    if (tagOp[0] === "call" && tagOp.length === 2) {
+      const value = tagOp[1];
+      if (value.kind === ValueType.FUNCTION) {
+        component = "FunctionalComponent";
+      } else {
+        component = {
+          node: value.ex,
+          source: value.source
+        };
+        this.dependencies.push(value);
+      }
+    }
+    if (tagOp[0] === "member") {
+      [, component] = tagOp;
+    }
+    if (!component) {
+      throw new Error("Invalid usage of `styled` tag");
+    }
+    this.component = component;
+  }
+  addInterpolation(node, precedingCss, source, unit = "") {
+    const id = this.getVariableId(source, unit, precedingCss);
+    this.interpolations.push({
+      id,
+      node,
+      source,
+      unit
+    });
+    return id;
+  }
+  doEvaltimeReplacement() {
+    this.replacer(this.value, false);
+  }
+  doRuntimeReplacement() {
+    const t = this.astService;
+    const props = this.getProps();
+    this.replacer(
+      t.callExpression(this.tagExpression, [this.getTagComponentProps(props)]),
+      true
+    );
+  }
+  extractRules(valueCache, cssText, loc) {
+    const rules = {};
+    let selector = `.${this.className}`;
+    let value = typeof this.component === "string" ? null : valueCache.get(this.component.node.name);
+    while (hasMeta(value)) {
+      selector += `.${value.__linaria.className}`;
+      value = value.__linaria.extends;
+    }
+    rules[selector] = {
+      cssText,
+      className: this.className,
+      displayName: this.displayName,
+      start: (loc == null ? void 0 : loc.start) ?? null
+    };
+    return rules;
+  }
+  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.callExpression(t.identifier(this.component.node.name), []);
+  }
+  get tagExpression() {
+    const t = this.astService;
+    return t.callExpression(this.tag, [this.tagExpressionArgument]);
+  }
+  get value() {
+    const t = this.astService;
+    const extendsNode = typeof this.component === "string" ? null : this.component.node.name;
+    return t.objectExpression([
+      t.objectProperty(
+        t.stringLiteral("displayName"),
+        t.stringLiteral(this.displayName)
+      ),
+      t.objectProperty(
+        t.stringLiteral("__linaria"),
+        t.objectExpression([
+          t.objectProperty(
+            t.stringLiteral("className"),
+            t.stringLiteral(this.className)
+          ),
+          t.objectProperty(
+            t.stringLiteral("extends"),
+            extendsNode ? t.callExpression(t.identifier(extendsNode), []) : t.nullLiteral()
+          )
+        ])
+      )
+    ]);
+  }
+  toString() {
+    const res = (arg) => `${this.tagSourceCode()}(${arg})\`\u2026\``;
+    if (typeof this.component === "string") {
+      if (this.component === "FunctionalComponent") {
+        return res("() => {\u2026}");
+      }
+      return res(`'${this.component}'`);
+    }
+    return res(this.component.source);
+  }
+  getCustomVariableId(source, unit, precedingCss) {
+    const context = this.getVariableContext(source, unit, precedingCss);
+    const customSlugFn = this.options.variableNameSlug;
+    if (!customSlugFn) {
+      return void 0;
+    }
+    return typeof customSlugFn === "function" ? customSlugFn(context) : buildSlug(customSlugFn, context);
+  }
+  getProps() {
+    const propsObj = {
+      name: this.displayName,
+      class: this.className
+    };
+    if (this.interpolations.length) {
+      propsObj.vars = {};
+      this.interpolations.forEach(({ id, unit, node }) => {
+        const items = [this.astService.callExpression(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);
+  }
+  getVariableContext(source, unit, precedingCss) {
+    const getIndex = () => {
+      return __privateWrapper(this, _variableIdx)._++;
+    };
+    return {
+      componentName: this.displayName,
+      componentSlug: this.slug,
+      get index() {
+        return getIndex();
+      },
+      precedingCss,
+      processor: this.constructor.name,
+      source,
+      unit,
+      valueSlug: slugify(source + unit)
+    };
+  }
+  getVariableId(source, unit, precedingCss) {
+    const value = source + unit;
+    if (!__privateGet(this, _variablesCache).has(value)) {
+      const id = this.getCustomVariableId(source, unit, precedingCss);
+      if (id) {
+        return toValidCSSIdentifier(id);
+      }
+      const context = this.getVariableContext(source, unit, precedingCss);
+      __privateGet(this, _variablesCache).set(value, `${this.slug}-${context.index}`);
+    }
+    return __privateGet(this, _variablesCache).get(value);
+  }
+};
+_variableIdx = new WeakMap();
+_variablesCache = new WeakMap();
+export {
+  StyledProcessor as default
+};
+//# sourceMappingURL=styled.mjs.map

dist/processors/styled.mjs.map

+{"version":3,"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 {\n  Params,\n  Rules,\n  TailProcessorParams,\n  ValueCache,\n  WrappedNode,\n} from '@linaria/tags';\nimport {\n  buildSlug,\n  hasMeta,\n  TaggedTemplateProcessor,\n  validateParams,\n  ValueType,\n  toValidCSSIdentifier,\n} from '@linaria/tags';\nimport type { IVariableContext } from '@linaria/utils';\nimport { slugify } from '@linaria/utils';\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 TaggedTemplateProcessor {\n  public component: WrappedNode;\n\n  #variableIdx = 0;\n\n  #variablesCache = new Map<string, string>();\n\n  constructor(params: Params, ...args: TailProcessorParams) {\n    validateParams(\n      params,\n      ['tag', ['call', 'member'], ['template', 'call']],\n      'Invalid usage of `styled` tag'\n    );\n\n    const [tag, tagOp, template] = params;\n\n    if (template[0] === 'call') {\n      // It is already transformed styled-literal. Skip it.\n      // eslint-disable-next-line @typescript-eslint/no-throw-literal\n      throw TaggedTemplateProcessor.SKIP;\n    }\n\n    super([tag, template], ...args);\n\n    let component: WrappedNode | undefined;\n    if (tagOp[0] === 'call' && tagOp.length === 2) {\n      const value = tagOp[1];\n      if (value.kind === ValueType.FUNCTION) {\n        component = 'FunctionalComponent';\n      } else {\n        component = {\n          node: value.ex,\n          source: value.source,\n        };\n\n        this.dependencies.push(value);\n      }\n    }\n\n    if (tagOp[0] === 'member') {\n      [, component] = tagOp;\n    }\n\n    if (!component) {\n      throw new Error('Invalid usage of `styled` tag');\n    }\n\n    this.component = component;\n  }\n\n  public override addInterpolation(\n    node: Expression,\n    precedingCss: string,\n    source: string,\n    unit = ''\n  ): string {\n    const id = this.getVariableId(source, unit, precedingCss);\n\n    this.interpolations.push({\n      id,\n      node,\n      source,\n      unit,\n    });\n\n    return id;\n  }\n\n  public override doEvaltimeReplacement(): void {\n    this.replacer(this.value, false);\n  }\n\n  public override doRuntimeReplacement(): void {\n    const t = this.astService;\n\n    const props = this.getProps();\n\n    this.replacer(\n      t.callExpression(this.tagExpression, [this.getTagComponentProps(props)]),\n      true\n    );\n  }\n\n  public override extractRules(\n    valueCache: ValueCache,\n    cssText: string,\n    loc?: SourceLocation | null\n  ): Rules {\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.name);\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;\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.callExpression(t.identifier(this.component.node.name), []);\n  }\n\n  protected get tagExpression(): CallExpression {\n    const t = this.astService;\n    return t.callExpression(this.tag, [this.tagExpressionArgument]);\n  }\n\n  public override get value(): ObjectExpression {\n    const t = this.astService;\n    const extendsNode =\n      typeof this.component === 'string' ? null : this.component.node.name;\n\n    return t.objectExpression([\n      t.objectProperty(\n        t.stringLiteral('displayName'),\n        t.stringLiteral(this.displayName)\n      ),\n      t.objectProperty(\n        t.stringLiteral('__linaria'),\n        t.objectExpression([\n          t.objectProperty(\n            t.stringLiteral('className'),\n            t.stringLiteral(this.className)\n          ),\n          t.objectProperty(\n            t.stringLiteral('extends'),\n            extendsNode\n              ? t.callExpression(t.identifier(extendsNode), [])\n              : t.nullLiteral()\n          ),\n        ])\n      ),\n    ]);\n  }\n\n  public override toString(): string {\n    const res = (arg: string) => `${this.tagSourceCode()}(${arg})\\`…\\``;\n\n    if (typeof this.component === 'string') {\n      if (this.component === 'FunctionalComponent') {\n        return res('() => {…}');\n      }\n\n      return res(`'${this.component}'`);\n    }\n\n    return res(this.component.source);\n  }\n\n  protected getCustomVariableId(\n    source: string,\n    unit: string,\n    precedingCss: string\n  ) {\n    const context = this.getVariableContext(source, unit, precedingCss);\n    const customSlugFn = this.options.variableNameSlug;\n    if (!customSlugFn) {\n      return undefined;\n    }\n\n    return typeof customSlugFn === 'function'\n      ? customSlugFn(context)\n      : buildSlug(customSlugFn, context);\n  }\n\n  protected getProps(): 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      this.interpolations.forEach(({ id, unit, node }) => {\n        const items: Expression[] = [this.astService.callExpression(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  protected getVariableContext(\n    source: string,\n    unit: string,\n    precedingCss: string\n  ): IVariableContext {\n    const getIndex = () => {\n      // eslint-disable-next-line no-plusplus\n      return this.#variableIdx++;\n    };\n\n    return {\n      componentName: this.displayName,\n      componentSlug: this.slug,\n      get index() {\n        return getIndex();\n      },\n      precedingCss,\n      processor: this.constructor.name,\n      source,\n      unit,\n      valueSlug: slugify(source + unit),\n    };\n  }\n\n  protected getVariableId(\n    source: string,\n    unit: string,\n    precedingCss: string\n  ): string {\n    const value = source + unit;\n    if (!this.#variablesCache.has(value)) {\n      const id = this.getCustomVariableId(source, unit, precedingCss);\n      if (id) {\n        return toValidCSSIdentifier(id);\n      }\n\n      const context = this.getVariableContext(source, unit, precedingCss);\n\n      // make the variable unique to this styled component\n      this.#variablesCache.set(value, `${this.slug}-${context.index}`);\n    }\n\n    return this.#variablesCache.get(value)!;\n  }\n}\n"],"mappings":"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","names":[]}

package.json

 {
   "name": "@linaria/react",
   "description": "Blazing fast zero-runtime CSS in JS library",
-  "version": "4.1.5",
+  "version": "4.2.0",
   "bugs": "https://github.com/callstack/linaria/issues",
   "dependencies": {
     "@emotion/is-prop-valid": "^0.8.8",
-    "@linaria/core": "^4.1.4",
+    "@linaria/core": "^4.2.0",
     "@linaria/tags": "^4.1.4",
@@ -28,14 +28,13 @@ "@linaria/utils": "^4.2.2",
       "types": "./types/index.d.ts",
-      "import": "./esm/index.js",
-      "default": "./lib/index.js"
+      "import": "./dist/index.mjs",
+      "default": "./dist/index.js"
     },
     "./*": {
       "types": "./types/*.d.ts",
-      "import": "./esm/*.js",
-      "default": "./lib/*.js"
+      "import": "./dist/*.mjs",
+      "default": "./dist/*.js"
     }
   },
   "files": [
-    "esm/",
-    "lib/",
+    "dist/",
     "processors/",
@@ -55,7 +54,7 @@ "types/"
     "tags": {
-      "styled": "./lib/processors/styled.js"
+      "styled": "./dist/processors/styled.js"
     }
   },
-  "main": "lib/index.js",
-  "module": "esm/index.js",
+  "main": "dist/index.js",
+  "module": "dist/index.mjs",
   "peerDependencies": {
@@ -69,2 +68,11 @@ "react": ">=16"
   "sideEffects": false,
+  "tsup": {
+    "entry": [
+      "src/index.ts",
+      "src/processors/styled.ts"
+    ],
+    "splitting": false,
+    "sourcemap": true,
+    "clean": true
+  },
   "types": "types/index.d.ts",
@@ -79,7 +87,6 @@ "typesVersions": {
   "scripts": {
-    "build": "npm run build:lib && npm run build:esm && npm run build:declarations",
+    "build": "npm run build:dist && 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",
-    "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",
+    "build:dist": "tsup --format cjs,esm",
     "test": "jest --config ../../jest.config.js --rootDir .",
@@ -86,0 +93,0 @@ "test:dts": "dtslint --localTs ../../node_modules/typescript/lib __dtslint__",

processors/styled.js

@@ -5,2 +5,2 @@ Object.defineProperty(exports, '__esModule', {
 
-exports.default = require('../lib/processors/styled').default;
+exports.default = require('../dist/processors/styled').default;

esm/index.js

-export { default as styled } from './styled';
-//# sourceMappingURL=index.js.map

esm/index.js.map

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

esm/processors/styled.js

-import { buildSlug, hasMeta, TaggedTemplateProcessor, validateParams, ValueType, toValidCSSIdentifier } from '@linaria/tags';
-import { slugify } from '@linaria/utils';
-
-const isNotNull = x => x !== null;
-
-const singleQuotedStringLiteral = value => ({
-  type: 'StringLiteral',
-  value,
-  extra: {
-    rawValue: value,
-    raw: `'${value}'`
-  }
-});
-
-export default class StyledProcessor extends TaggedTemplateProcessor {
-  #variableIdx = 0;
-  #variablesCache = new Map();
-
-  constructor(params, ...args) {
-    validateParams(params, ['tag', ['call', 'member'], ['template', 'call']], 'Invalid usage of `styled` tag');
-    const [tag, tagOp, template] = params;
-
-    if (template[0] === 'call') {
-      // It is already transformed styled-literal. Skip it.
-      // eslint-disable-next-line @typescript-eslint/no-throw-literal
-      throw TaggedTemplateProcessor.SKIP;
-    }
-
-    super([tag, template], ...args);
-    let component;
-
-    if (tagOp[0] === 'call' && tagOp.length === 2) {
-      const value = tagOp[1];
-
-      if (value.kind === ValueType.FUNCTION) {
-        component = 'FunctionalComponent';
-      } else {
-        component = {
-          node: value.ex,
-          source: value.source
-        };
-        this.dependencies.push(value);
-      }
-    }
-
-    if (tagOp[0] === 'member') {
-      [, component] = tagOp;
-    }
-
-    if (!component) {
-      throw new Error('Invalid usage of `styled` tag');
-    }
-
-    this.component = component;
-  }
-
-  addInterpolation(node, precedingCss, source, unit = '') {
-    const id = this.getVariableId(source, unit, precedingCss);
-    this.interpolations.push({
-      id,
-      node,
-      source,
-      unit
-    });
-    return id;
-  }
-
-  doEvaltimeReplacement() {
-    this.replacer(this.value, false);
-  }
-
-  doRuntimeReplacement() {
-    const t = this.astService;
-    const props = this.getProps();
-    this.replacer(t.callExpression(this.tagExpression, [this.getTagComponentProps(props)]), true);
-  }
-
-  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.name);
-
-    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;
-  }
-
-  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.callExpression(t.identifier(this.component.node.name), []);
-  }
-
-  get tagExpression() {
-    const t = this.astService;
-    return t.callExpression(this.tag, [this.tagExpressionArgument]);
-  }
-
-  get value() {
-    const t = this.astService;
-    const extendsNode = typeof this.component === 'string' ? null : this.component.node.name;
-    return t.objectExpression([t.objectProperty(t.stringLiteral('displayName'), t.stringLiteral(this.displayName)), t.objectProperty(t.stringLiteral('__linaria'), t.objectExpression([t.objectProperty(t.stringLiteral('className'), t.stringLiteral(this.className)), t.objectProperty(t.stringLiteral('extends'), extendsNode ? t.callExpression(t.identifier(extendsNode), []) : t.nullLiteral())]))]);
-  }
-
-  toString() {
-    const res = arg => `${this.tagSourceCode()}(${arg})\`…\``;
-
-    if (typeof this.component === 'string') {
-      if (this.component === 'FunctionalComponent') {
-        return res('() => {…}');
-      }
-
-      return res(`'${this.component}'`);
-    }
-
-    return res(this.component.source);
-  }
-
-  getCustomVariableId(source, unit, precedingCss) {
-    const context = this.getVariableContext(source, unit, precedingCss);
-    const customSlugFn = this.options.variableNameSlug;
-
-    if (!customSlugFn) {
-      return undefined;
-    }
-
-    return typeof customSlugFn === 'function' ? customSlugFn(context) : buildSlug(customSlugFn, context);
-  }
-
-  getProps() {
-    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 = {};
-      this.interpolations.forEach(({
-        id,
-        unit,
-        node
-      }) => {
-        const items = [this.astService.callExpression(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);
-  }
-
-  getVariableContext(source, unit, precedingCss) {
-    const getIndex = () => {
-      // eslint-disable-next-line no-plusplus
-      return this.#variableIdx++;
-    };
-
-    return {
-      componentName: this.displayName,
-      componentSlug: this.slug,
-
-      get index() {
-        return getIndex();
-      },
-
-      precedingCss,
-      processor: this.constructor.name,
-      source,
-      unit,
-      valueSlug: slugify(source + unit)
-    };
-  }
-
-  getVariableId(source, unit, precedingCss) {
-    const value = source + unit;
-
-    if (!this.#variablesCache.has(value)) {
-      const id = this.getCustomVariableId(source, unit, precedingCss);
-
-      if (id) {
-        return toValidCSSIdentifier(id);
-      }
-
-      const context = this.getVariableContext(source, unit, precedingCss); // make the variable unique to this styled component
-
-      this.#variablesCache.set(value, `${this.slug}-${context.index}`);
-    }
-
-    return this.#variablesCache.get(value);
-  }
-
-}
-//# sourceMappingURL=styled.js.map

esm/processors/styled.js.map

-{"version":3,"file":"styled.js","names":["buildSlug","hasMeta","TaggedTemplateProcessor","validateParams","ValueType","toValidCSSIdentifier","slugify","isNotNull","x","singleQuotedStringLiteral","value","type","extra","rawValue","raw","StyledProcessor","variableIdx","variablesCache","Map","constructor","params","args","tag","tagOp","template","SKIP","component","length","kind","FUNCTION","node","ex","source","dependencies","push","Error","addInterpolation","precedingCss","unit","id","getVariableId","interpolations","doEvaltimeReplacement","replacer","doRuntimeReplacement","t","astService","props","getProps","callExpression","tagExpression","getTagComponentProps","extractRules","valueCache","cssText","loc","rules","selector","className","get","name","__linaria","extends","displayName","start","asSelector","tagExpressionArgument","arrowFunctionExpression","blockStatement","identifier","extendsNode","objectExpression","objectProperty","stringLiteral","nullLiteral","toString","res","arg","tagSourceCode","getCustomVariableId","context","getVariableContext","customSlugFn","options","variableNameSlug","undefined","propsObj","class","vars","forEach","items","propExpressions","Object","entries","map","key","keyNode","booleanLiteral","propName","propValue","arrayExpression","filter","getIndex","componentName","componentSlug","slug","index","processor","valueSlug","has","set"],"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 {\n  Params,\n  Rules,\n  TailProcessorParams,\n  ValueCache,\n  WrappedNode,\n} from '@linaria/tags';\nimport {\n  buildSlug,\n  hasMeta,\n  TaggedTemplateProcessor,\n  validateParams,\n  ValueType,\n  toValidCSSIdentifier,\n} from '@linaria/tags';\nimport type { IVariableContext } from '@linaria/utils';\nimport { slugify } from '@linaria/utils';\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 TaggedTemplateProcessor {\n  public component: WrappedNode;\n\n  #variableIdx = 0;\n\n  #variablesCache = new Map<string, string>();\n\n  constructor(params: Params, ...args: TailProcessorParams) {\n    validateParams(\n      params,\n      ['tag', ['call', 'member'], ['template', 'call']],\n      'Invalid usage of `styled` tag'\n    );\n\n    const [tag, tagOp, template] = params;\n\n    if (template[0] === 'call') {\n      // It is already transformed styled-literal. Skip it.\n      // eslint-disable-next-line @typescript-eslint/no-throw-literal\n      throw TaggedTemplateProcessor.SKIP;\n    }\n\n    super([tag, template], ...args);\n\n    let component: WrappedNode | undefined;\n    if (tagOp[0] === 'call' && tagOp.length === 2) {\n      const value = tagOp[1];\n      if (value.kind === ValueType.FUNCTION) {\n        component = 'FunctionalComponent';\n      } else {\n        component = {\n          node: value.ex,\n          source: value.source,\n        };\n\n        this.dependencies.push(value);\n      }\n    }\n\n    if (tagOp[0] === 'member') {\n      [, component] = tagOp;\n    }\n\n    if (!component) {\n      throw new Error('Invalid usage of `styled` tag');\n    }\n\n    this.component = component;\n  }\n\n  public override addInterpolation(\n    node: Expression,\n    precedingCss: string,\n    source: string,\n    unit = ''\n  ): string {\n    const id = this.getVariableId(source, unit, precedingCss);\n\n    this.interpolations.push({\n      id,\n      node,\n      source,\n      unit,\n    });\n\n    return id;\n  }\n\n  public override doEvaltimeReplacement(): void {\n    this.replacer(this.value, false);\n  }\n\n  public override doRuntimeReplacement(): void {\n    const t = this.astService;\n\n    const props = this.getProps();\n\n    this.replacer(\n      t.callExpression(this.tagExpression, [this.getTagComponentProps(props)]),\n      true\n    );\n  }\n\n  public override extractRules(\n    valueCache: ValueCache,\n    cssText: string,\n    loc?: SourceLocation | null\n  ): Rules {\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.name);\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;\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.callExpression(t.identifier(this.component.node.name), []);\n  }\n\n  protected get tagExpression(): CallExpression {\n    const t = this.astService;\n    return t.callExpression(this.tag, [this.tagExpressionArgument]);\n  }\n\n  public override get value(): ObjectExpression {\n    const t = this.astService;\n    const extendsNode =\n      typeof this.component === 'string' ? null : this.component.node.name;\n\n    return t.objectExpression([\n      t.objectProperty(\n        t.stringLiteral('displayName'),\n        t.stringLiteral(this.displayName)\n      ),\n      t.objectProperty(\n        t.stringLiteral('__linaria'),\n        t.objectExpression([\n          t.objectProperty(\n            t.stringLiteral('className'),\n            t.stringLiteral(this.className)\n          ),\n          t.objectProperty(\n            t.stringLiteral('extends'),\n            extendsNode\n              ? t.callExpression(t.identifier(extendsNode), [])\n              : t.nullLiteral()\n          ),\n        ])\n      ),\n    ]);\n  }\n\n  public override toString(): string {\n    const res = (arg: string) => `${this.tagSourceCode()}(${arg})\\`…\\``;\n\n    if (typeof this.component === 'string') {\n      if (this.component === 'FunctionalComponent') {\n        return res('() => {…}');\n      }\n\n      return res(`'${this.component}'`);\n    }\n\n    return res(this.component.source);\n  }\n\n  protected getCustomVariableId(\n    source: string,\n    unit: string,\n    precedingCss: string\n  ) {\n    const context = this.getVariableContext(source, unit, precedingCss);\n    const customSlugFn = this.options.variableNameSlug;\n    if (!customSlugFn) {\n      return undefined;\n    }\n\n    return typeof customSlugFn === 'function'\n      ? customSlugFn(context)\n      : buildSlug(customSlugFn, context);\n  }\n\n  protected getProps(): 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      this.interpolations.forEach(({ id, unit, node }) => {\n        const items: Expression[] = [this.astService.callExpression(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  protected getVariableContext(\n    source: string,\n    unit: string,\n    precedingCss: string\n  ): IVariableContext {\n    const getIndex = () => {\n      // eslint-disable-next-line no-plusplus\n      return this.#variableIdx++;\n    };\n\n    return {\n      componentName: this.displayName,\n      componentSlug: this.slug,\n      get index() {\n        return getIndex();\n      },\n      precedingCss,\n      processor: this.constructor.name,\n      source,\n      unit,\n      valueSlug: slugify(source + unit),\n    };\n  }\n\n  protected getVariableId(\n    source: string,\n    unit: string,\n    precedingCss: string\n  ): string {\n    const value = source + unit;\n    if (!this.#variablesCache.has(value)) {\n      const id = this.getCustomVariableId(source, unit, precedingCss);\n      if (id) {\n        return toValidCSSIdentifier(id);\n      }\n\n      const context = this.getVariableContext(source, unit, precedingCss);\n\n      // make the variable unique to this styled component\n      this.#variablesCache.set(value, `${this.slug}-${context.index}`);\n    }\n\n    return this.#variablesCache.get(value)!;\n  }\n}\n"],"mappings":"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"}

esm/styled.js

-/* 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 validAttr from '@emotion/is-prop-valid';
-import React from 'react';
-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,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.`);
-  }
-};
-
-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;
-      const 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,no-restricted-syntax
-
-        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

esm/styled.js.map

-{"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 } from '@linaria/core';\nimport type { StyledMeta } from '@linaria/tags';\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\nexport type 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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"}

lib/index.js

-"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

lib/index.js.map

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

lib/processors/styled.js

-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
-var _tags = require("@linaria/tags");
-
-var _utils = require("@linaria/utils");
-
-const isNotNull = x => x !== null;
-
-const singleQuotedStringLiteral = value => ({
-  type: 'StringLiteral',
-  value,
-  extra: {
-    rawValue: value,
-    raw: `'${value}'`
-  }
-});
-
-class StyledProcessor extends _tags.TaggedTemplateProcessor {
-  #variableIdx = 0;
-  #variablesCache = new Map();
-
-  constructor(params, ...args) {
-    (0, _tags.validateParams)(params, ['tag', ['call', 'member'], ['template', 'call']], 'Invalid usage of `styled` tag');
-    const [tag, tagOp, template] = params;
-
-    if (template[0] === 'call') {
-      // It is already transformed styled-literal. Skip it.
-      // eslint-disable-next-line @typescript-eslint/no-throw-literal
-      throw _tags.TaggedTemplateProcessor.SKIP;
-    }
-
-    super([tag, template], ...args);
-    let component;
-
-    if (tagOp[0] === 'call' && tagOp.length === 2) {
-      const value = tagOp[1];
-
-      if (value.kind === _tags.ValueType.FUNCTION) {
-        component = 'FunctionalComponent';
-      } else {
-        component = {
-          node: value.ex,
-          source: value.source
-        };
-        this.dependencies.push(value);
-      }
-    }
-
-    if (tagOp[0] === 'member') {
-      [, component] = tagOp;
-    }
-
-    if (!component) {
-      throw new Error('Invalid usage of `styled` tag');
-    }
-
-    this.component = component;
-  }
-
-  addInterpolation(node, precedingCss, source, unit = '') {
-    const id = this.getVariableId(source, unit, precedingCss);
-    this.interpolations.push({
-      id,
-      node,
-      source,
-      unit
-    });
-    return id;
-  }
-
-  doEvaltimeReplacement() {
-    this.replacer(this.value, false);
-  }
-
-  doRuntimeReplacement() {
-    const t = this.astService;
-    const props = this.getProps();
-    this.replacer(t.callExpression(this.tagExpression, [this.getTagComponentProps(props)]), true);
-  }
-
-  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.name);
-
-    while ((0, _tags.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;
-  }
-
-  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.callExpression(t.identifier(this.component.node.name), []);
-  }
-
-  get tagExpression() {
-    const t = this.astService;
-    return t.callExpression(this.tag, [this.tagExpressionArgument]);
-  }
-
-  get value() {
-    const t = this.astService;
-    const extendsNode = typeof this.component === 'string' ? null : this.component.node.name;
-    return t.objectExpression([t.objectProperty(t.stringLiteral('displayName'), t.stringLiteral(this.displayName)), t.objectProperty(t.stringLiteral('__linaria'), t.objectExpression([t.objectProperty(t.stringLiteral('className'), t.stringLiteral(this.className)), t.objectProperty(t.stringLiteral('extends'), extendsNode ? t.callExpression(t.identifier(extendsNode), []) : t.nullLiteral())]))]);
-  }
-
-  toString() {
-    const res = arg => `${this.tagSourceCode()}(${arg})\`…\``;
-
-    if (typeof this.component === 'string') {
-      if (this.component === 'FunctionalComponent') {
-        return res('() => {…}');
-      }
-
-      return res(`'${this.component}'`);
-    }
-
-    return res(this.component.source);
-  }
-
-  getCustomVariableId(source, unit, precedingCss) {
-    const context = this.getVariableContext(source, unit, precedingCss);
-    const customSlugFn = this.options.variableNameSlug;
-
-    if (!customSlugFn) {
-      return undefined;
-    }
-
-    return typeof customSlugFn === 'function' ? customSlugFn(context) : (0, _tags.buildSlug)(customSlugFn, context);
-  }
-
-  getProps() {
-    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 = {};
-      this.interpolations.forEach(({
-        id,
-        unit,
-        node
-      }) => {
-        const items = [this.astService.callExpression(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);
-  }
-
-  getVariableContext(source, unit, precedingCss) {
-    const getIndex = () => {
-      // eslint-disable-next-line no-plusplus
-      return this.#variableIdx++;
-    };
-
-    return {
-      componentName: this.displayName,
-      componentSlug: this.slug,
-
-      get index() {
-        return getIndex();
-      },
-
-      precedingCss,
-      processor: this.constructor.name,
-      source,
-      unit,
-      valueSlug: (0, _utils.slugify)(source + unit)
-    };
-  }
-
-  getVariableId(source, unit, precedingCss) {
-    const value = source + unit;
-
-    if (!this.#variablesCache.has(value)) {
-      const id = this.getCustomVariableId(source, unit, precedingCss);
-
-      if (id) {
-        return (0, _tags.toValidCSSIdentifier)(id);
-      }
-
-      const context = this.getVariableContext(source, unit, precedingCss); // make the variable unique to this styled component
-
-      this.#variablesCache.set(value, `${this.slug}-${context.index}`);
-    }
-
-    return this.#variablesCache.get(value);
-  }
-
-}
-
-exports.default = StyledProcessor;
-//# sourceMappingURL=styled.js.map

lib/processors/styled.js.map

-{"version":3,"file":"styled.js","names":["isNotNull","x","singleQuotedStringLiteral","value","type","extra","rawValue","raw","StyledProcessor","TaggedTemplateProcessor","variableIdx","variablesCache","Map","constructor","params","args","validateParams","tag","tagOp","template","SKIP","component","length","kind","ValueType","FUNCTION","node","ex","source","dependencies","push","Error","addInterpolation","precedingCss","unit","id","getVariableId","interpolations","doEvaltimeReplacement","replacer","doRuntimeReplacement","t","astService","props","getProps","callExpression","tagExpression","getTagComponentProps","extractRules","valueCache","cssText","loc","rules","selector","className","get","name","hasMeta","__linaria","extends","displayName","start","asSelector","tagExpressionArgument","arrowFunctionExpression","blockStatement","identifier","extendsNode","objectExpression","objectProperty","stringLiteral","nullLiteral","toString","res","arg","tagSourceCode","getCustomVariableId","context","getVariableContext","customSlugFn","options","variableNameSlug","undefined","buildSlug","propsObj","class","vars","forEach","items","propExpressions","Object","entries","map","key","keyNode","booleanLiteral","propName","propValue","arrayExpression","filter","getIndex","componentName","componentSlug","slug","index","processor","valueSlug","slugify","has","toValidCSSIdentifier","set"],"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 {\n  Params,\n  Rules,\n  TailProcessorParams,\n  ValueCache,\n  WrappedNode,\n} from '@linaria/tags';\nimport {\n  buildSlug,\n  hasMeta,\n  TaggedTemplateProcessor,\n  validateParams,\n  ValueType,\n  toValidCSSIdentifier,\n} from '@linaria/tags';\nimport type { IVariableContext } from '@linaria/utils';\nimport { slugify } from '@linaria/utils';\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 TaggedTemplateProcessor {\n  public component: WrappedNode;\n\n  #variableIdx = 0;\n\n  #variablesCache = new Map<string, string>();\n\n  constructor(params: Params, ...args: TailProcessorParams) {\n    validateParams(\n      params,\n      ['tag', ['call', 'member'], ['template', 'call']],\n      'Invalid usage of `styled` tag'\n    );\n\n    const [tag, tagOp, template] = params;\n\n    if (template[0] === 'call') {\n      // It is already transformed styled-literal. Skip it.\n      // eslint-disable-next-line @typescript-eslint/no-throw-literal\n      throw TaggedTemplateProcessor.SKIP;\n    }\n\n    super([tag, template], ...args);\n\n    let component: WrappedNode | undefined;\n    if (tagOp[0] === 'call' && tagOp.length === 2) {\n      const value = tagOp[1];\n      if (value.kind === ValueType.FUNCTION) {\n        component = 'FunctionalComponent';\n      } else {\n        component = {\n          node: value.ex,\n          source: value.source,\n        };\n\n        this.dependencies.push(value);\n      }\n    }\n\n    if (tagOp[0] === 'member') {\n      [, component] = tagOp;\n    }\n\n    if (!component) {\n      throw new Error('Invalid usage of `styled` tag');\n    }\n\n    this.component = component;\n  }\n\n  public override addInterpolation(\n    node: Expression,\n    precedingCss: string,\n    source: string,\n    unit = ''\n  ): string {\n    const id = this.getVariableId(source, unit, precedingCss);\n\n    this.interpolations.push({\n      id,\n      node,\n      source,\n      unit,\n    });\n\n    return id;\n  }\n\n  public override doEvaltimeReplacement(): void {\n    this.replacer(this.value, false);\n  }\n\n  public override doRuntimeReplacement(): void {\n    const t = this.astService;\n\n    const props = this.getProps();\n\n    this.replacer(\n      t.callExpression(this.tagExpression, [this.getTagComponentProps(props)]),\n      true\n    );\n  }\n\n  public override extractRules(\n    valueCache: ValueCache,\n    cssText: string,\n    loc?: SourceLocation | null\n  ): Rules {\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.name);\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;\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.callExpression(t.identifier(this.component.node.name), []);\n  }\n\n  protected get tagExpression(): CallExpression {\n    const t = this.astService;\n    return t.callExpression(this.tag, [this.tagExpressionArgument]);\n  }\n\n  public override get value(): ObjectExpression {\n    const t = this.astService;\n    const extendsNode =\n      typeof this.component === 'string' ? null : this.component.node.name;\n\n    return t.objectExpression([\n      t.objectProperty(\n        t.stringLiteral('displayName'),\n        t.stringLiteral(this.displayName)\n      ),\n      t.objectProperty(\n        t.stringLiteral('__linaria'),\n        t.objectExpression([\n          t.objectProperty(\n            t.stringLiteral('className'),\n            t.stringLiteral(this.className)\n          ),\n          t.objectProperty(\n            t.stringLiteral('extends'),\n            extendsNode\n              ? t.callExpression(t.identifier(extendsNode), [])\n              : t.nullLiteral()\n          ),\n        ])\n      ),\n    ]);\n  }\n\n  public override toString(): string {\n    const res = (arg: string) => `${this.tagSourceCode()}(${arg})\\`…\\``;\n\n    if (typeof this.component === 'string') {\n      if (this.component === 'FunctionalComponent') {\n        return res('() => {…}');\n      }\n\n      return res(`'${this.component}'`);\n    }\n\n    return res(this.component.source);\n  }\n\n  protected getCustomVariableId(\n    source: string,\n    unit: string,\n    precedingCss: string\n  ) {\n    const context = this.getVariableContext(source, unit, precedingCss);\n    const customSlugFn = this.options.variableNameSlug;\n    if (!customSlugFn) {\n      return undefined;\n    }\n\n    return typeof customSlugFn === 'function'\n      ? customSlugFn(context)\n      : buildSlug(customSlugFn, context);\n  }\n\n  protected getProps(): 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      this.interpolations.forEach(({ id, unit, node }) => {\n        const items: Expression[] = [this.astService.callExpression(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  protected getVariableContext(\n    source: string,\n    unit: string,\n    precedingCss: string\n  ): IVariableContext {\n    const getIndex = () => {\n      // eslint-disable-next-line no-plusplus\n      return this.#variableIdx++;\n    };\n\n    return {\n      componentName: this.displayName,\n      componentSlug: this.slug,\n      get index() {\n        return getIndex();\n      },\n      precedingCss,\n      processor: this.constructor.name,\n      source,\n      unit,\n      valueSlug: slugify(source + unit),\n    };\n  }\n\n  protected getVariableId(\n    source: string,\n    unit: string,\n    precedingCss: string\n  ): string {\n    const value = source + unit;\n    if (!this.#variablesCache.has(value)) {\n      const id = this.getCustomVariableId(source, unit, precedingCss);\n      if (id) {\n        return toValidCSSIdentifier(id);\n      }\n\n      const context = this.getVariableContext(source, unit, precedingCss);\n\n      // make the variable unique to this styled component\n      this.#variablesCache.set(value, `${this.slug}-${context.index}`);\n    }\n\n    return this.#variablesCache.get(value)!;\n  }\n}\n"],"mappings":"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"}

lib/styled.js

-"use strict";
-
-exports.__esModule = true;
-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 }; }
-
-/* 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
- */
-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,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.");
-  }
-};
-
-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;
-      const 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);
-      const {
-        vars
-      } = options;
-
-      if (vars) {
-        const style = {}; // eslint-disable-next-line guard-for-in,no-restricted-syntax
-
-        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.default.createElement(tag, filteredProps);
-      }
-
-      return /*#__PURE__*/_react.default.createElement(component, filteredProps);
-    };
-
-    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 = 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(o, prop) {
-    return o(prop);
-  }
-
-}) : styled;
-
-exports.default = _default;
-//# sourceMappingURL=styled.js.map

lib/styled.js.map

-{"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 } from '@linaria/core';\nimport type { StyledMeta } from '@linaria/tags';\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\nexport type 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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"}

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Environment variable access

Supply chain risk

Package accesses environment variables, which may be a sign of credential stuffing or data theft.

Found 1 instance in 1 package

URL strings

Supply chain risk

Package contains fragments of external URLs or IP addresses, which the package may be accessing at runtime.

Found 1 instance in 1 package

Fixed alerts

Environment variable access

Supply chain risk

Package accesses environment variables, which may be a sign of credential stuffing or data theft.

Found 1 instance in 1 package

Improved metrics

Lines of code

830

20.12%

Worsened metrics

Total package byte prevSize

83378

-10.96%

Number of package files

15

-21.05%

Number of low supply chain risk alerts

8

14.29%

Number of medium supply chain risk alerts

1

Infinity%

Dependency changes

• Updated

  @linaria/core@^4.2.0