@linaria/react 4.5.4 → 5.0.1

package/dist/index.js

@@ -18,6 +18,10 @@ var __copyProps = (to, from, except, desc) => {
   return to;
 };
 var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
   isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
   mod
 ));
@@ -57,7 +61,8 @@ function filterProps(asIs, props, omitKeys) {
 }
 var warnIfInvalid = (value, componentName) => {
   if (process.env.NODE_ENV !== "production") {
-    if (typeof value === "string" || typeof value === "number" && isFinite(value)) {
+    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);
@@ -68,11 +73,10 @@ var warnIfInvalid = (value, componentName) => {
 };
 var idx = 0;
 function styled(tag) {
-  var _a;
   let mockedClass = "";
   if (process.env.NODE_ENV === "test") {
     mockedClass += `mocked-styled-${idx++}`;
-    if ((_a = tag == null ? void 0 : tag.__linaria) == null ? void 0 : _a.className) {
+    if (tag?.__linaria?.className) {
       mockedClass += ` ${tag.__linaria.className}`;
     }
   }
@@ -119,10 +123,14 @@ function styled(tag) {
       }
       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);
-    };
+    const Result = import_react.default.forwardRef ? import_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;
     Result.__linaria = {
       className: options.class || mockedClass,

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.ts","../src/styled.ts"],"sourcesContent":["export { default as styled } from './styled';\nexport type {\n  HtmlStyledTag,\n  StyledComponent,\n  StyledJSXIntrinsics,\n  Styled,\n} from './styled';\nexport type { CSSProperties } from '@linaria/core';\nexport type { StyledMeta } from '@linaria/utils';\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/utils';\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  atomic?: boolean;\n  class: string;\n  name: string;\n  propsAsIs: 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  asIs: boolean,\n  props: T,\n  omitKeys: TKeys[]\n): Partial<Omit<T, TKeys>> {\n  const filteredProps = omit(props, omitKeys) as Partial<T>;\n\n  if (!asIs) {\n    /**\n     * A failsafe check for esModule import issues\n     * if validAttr !== 'function' then it is an object of { default: Fn }\n     */\n    const interopValidAttr =\n      typeof validAttr === 'function' ? { default: validAttr } : validAttr;\n\n    Object.keys(filteredProps).forEach((key) => {\n      if (!interopValidAttr.default(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\nlet idx = 0;\n\n// Components with props are not allowed\nfunction styled(\n  componentWithStyle: () => any\n): (error: 'The target component should have a className prop') => void;\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  let mockedClass = '';\n\n  if (process.env.NODE_ENV === 'test') {\n    // eslint-disable-next-line no-plusplus\n    mockedClass += `mocked-styled-${idx++}`;\n    if (tag?.__linaria?.className) {\n      mockedClass += ` ${tag.__linaria.className}`;\n    }\n  }\n\n  return (options: Options) => {\n    if (\n      process.env.NODE_ENV !== 'production' &&\n      process.env.NODE_ENV !== 'test'\n    ) {\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 = mockedClass } = props;\n      const shouldKeepProps =\n        options.propsAsIs === undefined\n          ? !(\n              typeof component === 'string' &&\n              component.indexOf('-') === -1 &&\n              !isCapital(component[0])\n            )\n          : options.propsAsIs;\n      const filteredProps: IProps = filterProps(shouldKeepProps, 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: Record<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 || mockedClass,\n      extends: tag,\n    };\n\n    return Result;\n  };\n}\n\nexport type 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\nexport type HtmlStyledTag<TName extends keyof JSX.IntrinsicElements> = <\n  TAdditionalProps = Record<never, 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"]}
+{"version":3,"sources":["../src/index.ts","../src/styled.ts"],"sourcesContent":["export { default as styled } from './styled';\nexport type {\n  HtmlStyledTag,\n  StyledComponent,\n  StyledJSXIntrinsics,\n  Styled,\n} from './styled';\nexport type { CSSProperties } from '@linaria/core';\nexport type { StyledMeta } from '@linaria/utils';\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/utils';\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  atomic?: boolean;\n  class: string;\n  name: string;\n  propsAsIs: 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  asIs: boolean,\n  props: T,\n  omitKeys: TKeys[]\n): Partial<Omit<T, TKeys>> {\n  const filteredProps = omit(props, omitKeys) as Partial<T>;\n\n  if (!asIs) {\n    /**\n     * A failsafe check for esModule import issues\n     * if validAttr !== 'function' then it is an object of { default: Fn }\n     */\n    const interopValidAttr =\n      typeof validAttr === 'function' ? { default: validAttr } : validAttr;\n\n    Object.keys(filteredProps).forEach((key) => {\n      if (!interopValidAttr.default(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  [props: string]: unknown;\n  className?: string;\n  style?: Record<string, string>;\n}\n\nlet idx = 0;\n\n// Components with props are not allowed\nfunction styled(\n  componentWithStyle: () => any\n): (error: 'The target component should have a className prop') => void;\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  let mockedClass = '';\n\n  if (process.env.NODE_ENV === 'test') {\n    // eslint-disable-next-line no-plusplus\n    mockedClass += `mocked-styled-${idx++}`;\n    if (tag?.__linaria?.className) {\n      mockedClass += ` ${tag.__linaria.className}`;\n    }\n  }\n\n  return (options: Options) => {\n    if (\n      process.env.NODE_ENV !== 'production' &&\n      process.env.NODE_ENV !== 'test'\n    ) {\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 = mockedClass } = props;\n      const shouldKeepProps =\n        options.propsAsIs === undefined\n          ? !(\n              typeof component === 'string' &&\n              component.indexOf('-') === -1 &&\n              !isCapital(component[0])\n            )\n          : options.propsAsIs;\n      const filteredProps: IProps = filterProps(shouldKeepProps, 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: Record<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 || mockedClass,\n      extends: tag,\n    };\n\n    return Result;\n  };\n}\n\nexport type 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\nexport type HtmlStyledTag<TName extends keyof JSX.IntrinsicElements> = <\n  TAdditionalProps = Record<never, 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"]}

package/dist/index.mjs

@@ -25,7 +25,8 @@ function filterProps(asIs, props, omitKeys) {
 }
 var warnIfInvalid = (value, componentName) => {
   if (process.env.NODE_ENV !== "production") {
-    if (typeof value === "string" || typeof value === "number" && isFinite(value)) {
+    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);
@@ -36,11 +37,10 @@ var warnIfInvalid = (value, componentName) => {
 };
 var idx = 0;
 function styled(tag) {
-  var _a;
   let mockedClass = "";
   if (process.env.NODE_ENV === "test") {
     mockedClass += `mocked-styled-${idx++}`;
-    if ((_a = tag == null ? void 0 : tag.__linaria) == null ? void 0 : _a.className) {
+    if (tag?.__linaria?.className) {
       mockedClass += ` ${tag.__linaria.className}`;
     }
   }
@@ -87,10 +87,14 @@ function styled(tag) {
       }
       return React.createElement(component, filteredProps);
     };
-    const Result = React.forwardRef ? React.forwardRef(render) : (props) => {
-      const rest = omit(props, ["innerRef"]);
-      return render(rest, props.innerRef);
-    };
+    const Result = React.forwardRef ? 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;
     Result.__linaria = {
       className: options.class || mockedClass,

package/dist/index.mjs.map

@@ -1 +1 @@
-{"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/utils';\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  atomic?: boolean;\n  class: string;\n  name: string;\n  propsAsIs: 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  asIs: boolean,\n  props: T,\n  omitKeys: TKeys[]\n): Partial<Omit<T, TKeys>> {\n  const filteredProps = omit(props, omitKeys) as Partial<T>;\n\n  if (!asIs) {\n    /**\n     * A failsafe check for esModule import issues\n     * if validAttr !== 'function' then it is an object of { default: Fn }\n     */\n    const interopValidAttr =\n      typeof validAttr === 'function' ? { default: validAttr } : validAttr;\n\n    Object.keys(filteredProps).forEach((key) => {\n      if (!interopValidAttr.default(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\nlet idx = 0;\n\n// Components with props are not allowed\nfunction styled(\n  componentWithStyle: () => any\n): (error: 'The target component should have a className prop') => void;\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  let mockedClass = '';\n\n  if (process.env.NODE_ENV === 'test') {\n    // eslint-disable-next-line no-plusplus\n    mockedClass += `mocked-styled-${idx++}`;\n    if (tag?.__linaria?.className) {\n      mockedClass += ` ${tag.__linaria.className}`;\n    }\n  }\n\n  return (options: Options) => {\n    if (\n      process.env.NODE_ENV !== 'production' &&\n      process.env.NODE_ENV !== 'test'\n    ) {\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 = mockedClass } = props;\n      const shouldKeepProps =\n        options.propsAsIs === undefined\n          ? !(\n              typeof component === 'string' &&\n              component.indexOf('-') === -1 &&\n              !isCapital(component[0])\n            )\n          : options.propsAsIs;\n      const filteredProps: IProps = filterProps(shouldKeepProps, 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: Record<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 || mockedClass,\n      extends: tag,\n    };\n\n    return Result;\n  };\n}\n\nexport type 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\nexport type HtmlStyledTag<TName extends keyof JSX.IntrinsicElements> = <\n  TAdditionalProps = Record<never, 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":[]}
+{"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/utils';\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  atomic?: boolean;\n  class: string;\n  name: string;\n  propsAsIs: 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  asIs: boolean,\n  props: T,\n  omitKeys: TKeys[]\n): Partial<Omit<T, TKeys>> {\n  const filteredProps = omit(props, omitKeys) as Partial<T>;\n\n  if (!asIs) {\n    /**\n     * A failsafe check for esModule import issues\n     * if validAttr !== 'function' then it is an object of { default: Fn }\n     */\n    const interopValidAttr =\n      typeof validAttr === 'function' ? { default: validAttr } : validAttr;\n\n    Object.keys(filteredProps).forEach((key) => {\n      if (!interopValidAttr.default(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  [props: string]: unknown;\n  className?: string;\n  style?: Record<string, string>;\n}\n\nlet idx = 0;\n\n// Components with props are not allowed\nfunction styled(\n  componentWithStyle: () => any\n): (error: 'The target component should have a className prop') => void;\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  let mockedClass = '';\n\n  if (process.env.NODE_ENV === 'test') {\n    // eslint-disable-next-line no-plusplus\n    mockedClass += `mocked-styled-${idx++}`;\n    if (tag?.__linaria?.className) {\n      mockedClass += ` ${tag.__linaria.className}`;\n    }\n  }\n\n  return (options: Options) => {\n    if (\n      process.env.NODE_ENV !== 'production' &&\n      process.env.NODE_ENV !== 'test'\n    ) {\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 = mockedClass } = props;\n      const shouldKeepProps =\n        options.propsAsIs === undefined\n          ? !(\n              typeof component === 'string' &&\n              component.indexOf('-') === -1 &&\n              !isCapital(component[0])\n            )\n          : options.propsAsIs;\n      const filteredProps: IProps = filterProps(shouldKeepProps, 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: Record<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 || mockedClass,\n      extends: tag,\n    };\n\n    return Result;\n  };\n}\n\nexport type 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\nexport type HtmlStyledTag<TName extends keyof JSX.IntrinsicElements> = <\n  TAdditionalProps = Record<never, 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":[]}

package/dist/processors/styled.js

@@ -5,7 +5,6 @@ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
 var __getProtoOf = Object.getPrototypeOf;
 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 });
@@ -19,40 +18,14 @@ var __copyProps = (to, from, except, desc) => {
   return to;
 };
 var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
   isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
   mod
 ));
 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 = {};
@@ -76,10 +49,11 @@ var singleQuotedStringLiteral = (value) => ({
     raw: `'${value}'`
   }
 });
-var _variableIdx, _variablesCache;
 var StyledProcessor = class extends import_tags.TaggedTemplateProcessor {
+  component;
+  #variableIdx = 0;
+  #variablesCache = /* @__PURE__ */ new Map();
   constructor(params, ...args) {
-    var _a;
     (0, import_tags.validateParams)(
       params,
       ["callee", "*", "..."],
@@ -95,9 +69,6 @@ var StyledProcessor = class extends import_tags.TaggedTemplateProcessor {
       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];
@@ -106,17 +77,16 @@ var StyledProcessor = class extends import_tags.TaggedTemplateProcessor {
       } else if (value.kind === import_utils.ValueType.CONST) {
         component = typeof value.value === "string" ? value.value : void 0;
       } else {
-        if ((_a = value.importedFrom) == null ? void 0 : _a.length) {
+        if (value.importedFrom?.length) {
           const selfPkg = (0, import_utils.findPackageJSON)(".", this.context.filename);
           const isSomeMatched = value.importedFrom.some((importedFrom) => {
-            var _a2;
             const importedPkg = (0, import_utils.findPackageJSON)(
               importedFrom,
               this.context.filename
             );
             if (importedPkg) {
               const packageJSON = JSON.parse((0, import_fs.readFileSync)(importedPkg, "utf8"));
-              let mask = (_a2 = packageJSON == null ? void 0 : packageJSON.linaria) == null ? void 0 : _a2.components;
+              let mask = packageJSON?.linaria?.components;
               if (importedPkg === selfPkg && mask === void 0) {
                 mask = "**/*";
               }
@@ -157,6 +127,46 @@ var StyledProcessor = class extends import_tags.TaggedTemplateProcessor {
     }
     this.component = component;
   }
+  get asSelector() {
+    return `.${this.className}`;
+  }
+  get value() {
+    const t = this.astService;
+    const extendsNode = typeof this.component === "string" || this.component.nonLinaria ? 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()
+          )
+        ])
+      )
+    ]);
+  }
+  get tagExpression() {
+    const t = this.astService;
+    return t.callExpression(this.callee, [this.tagExpressionArgument]);
+  }
+  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), []);
+  }
   addInterpolation(node, precedingCss, source, unit = "") {
     const id = this.getVariableId(source, unit, precedingCss);
     this.interpolations.push({
@@ -190,50 +200,10 @@ var StyledProcessor = class extends import_tags.TaggedTemplateProcessor {
       cssText,
       className: this.className,
       displayName: this.displayName,
-      start: (loc == null ? void 0 : loc.start) ?? null
+      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.callee, [this.tagExpressionArgument]);
-  }
-  get value() {
-    const t = this.astService;
-    const extendsNode = typeof this.component === "string" || this.component.nonLinaria ? 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") {
@@ -250,7 +220,7 @@ var StyledProcessor = class extends import_tags.TaggedTemplateProcessor {
     if (!customSlugFn) {
       return void 0;
     }
-    return typeof customSlugFn === "function" ? customSlugFn(context) : (0, import_tags.buildSlug)(customSlugFn, context);
+    return typeof customSlugFn === "function" ? customSlugFn(context) : (0, import_tags.buildSlug)(customSlugFn, { ...context });
   }
   getProps() {
     const propsObj = {
@@ -298,7 +268,7 @@ var StyledProcessor = class extends import_tags.TaggedTemplateProcessor {
   }
   getVariableContext(source, unit, precedingCss) {
     const getIndex = () => {
-      return __privateWrapper(this, _variableIdx)._++;
+      return this.#variableIdx++;
     };
     return {
       componentName: this.displayName,
@@ -315,19 +285,15 @@ var StyledProcessor = class extends import_tags.TaggedTemplateProcessor {
   }
   getVariableId(source, unit, precedingCss) {
     const value = source + unit;
-    if (!__privateGet(this, _variablesCache).has(value)) {
+    if (!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}`);
+      this.#variablesCache.set(value, `${this.slug}-${context.index}`);
     }
-    return __privateGet(this, _variablesCache).get(value);
+    return 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

package/dist/processors/styled.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/processors/styled.ts"],"sourcesContent":["import { readFileSync } from 'fs';\nimport { dirname, join, sep } from 'path';\n\nimport type {\n  CallExpression,\n  Expression,\n  ObjectExpression,\n  SourceLocation,\n  StringLiteral,\n} from '@babel/types';\nimport { minimatch } from 'minimatch';\nimport html from 'react-html-attributes';\n\nimport type {\n  Params,\n  Rules,\n  TailProcessorParams,\n  ValueCache,\n  WrappedNode,\n} from '@linaria/tags';\nimport {\n  buildSlug,\n  TaggedTemplateProcessor,\n  validateParams,\n  toValidCSSIdentifier,\n} from '@linaria/tags';\nimport type { IVariableContext } from '@linaria/utils';\nimport { findPackageJSON, hasMeta, slugify, ValueType } from '@linaria/utils';\n\nconst isNotNull = <T>(x: T | null): x is T => x !== null;\n\nconst allTagsSet = new Set([...html.elements.html, html.elements.svg]);\n\nexport interface IProps {\n  atomic?: boolean;\n  class?: string;\n  name: string;\n  propsAsIs: boolean;\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    // Should have at least two params and the first one should be a callee.\n    validateParams(\n      params,\n      ['callee', '*', '...'],\n      TaggedTemplateProcessor.SKIP\n    );\n\n    validateParams(\n      params,\n      ['callee', ['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 if (value.kind === ValueType.CONST) {\n        component = typeof value.value === 'string' ? value.value : undefined;\n      } else {\n        if (value.importedFrom?.length) {\n          const selfPkg = findPackageJSON('.', this.context.filename);\n\n          // Check if at least one used identifier is a Linaria component.\n          const isSomeMatched = value.importedFrom.some((importedFrom) => {\n            const importedPkg = findPackageJSON(\n              importedFrom,\n              this.context.filename\n            );\n\n            if (importedPkg) {\n              const packageJSON = JSON.parse(readFileSync(importedPkg, 'utf8'));\n              let mask: string | undefined = packageJSON?.linaria?.components;\n              if (importedPkg === selfPkg && mask === undefined) {\n                // If mask is not specified for the local package, all components are treated as styled.\n                mask = '**/*';\n              }\n\n              if (mask) {\n                const packageDir = dirname(importedPkg);\n                const normalizedMask = mask.replace(/\\//g, sep);\n                const fullMask = join(packageDir, normalizedMask);\n                const fileWithComponent = require.resolve(importedFrom, {\n                  paths: [dirname(this.context.filename!)],\n                });\n\n                return minimatch(fileWithComponent, fullMask);\n              }\n            }\n\n            return false;\n          });\n\n          if (!isSomeMatched) {\n            component = {\n              node: value.ex,\n              nonLinaria: true,\n              source: value.source,\n            };\n          }\n        }\n\n        if (component === undefined) {\n          component = {\n            node: value.ex,\n            source: value.source,\n          };\n\n          this.dependencies.push(value);\n        }\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' || this.component.nonLinaria\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.callee, [this.tagExpressionArgument]);\n  }\n\n  public override get value(): ObjectExpression {\n    const t = this.astService;\n    const extendsNode =\n      typeof this.component === 'string' || this.component.nonLinaria\n        ? null\n        : 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      propsAsIs:\n        typeof this.component !== 'string' || !allTagsSet.has(this.component),\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 === undefined) {\n          return null;\n        }\n\n        const keyNode = t.identifier(key);\n\n        if (value === null) {\n          return t.objectProperty(keyNode, t.nullLiteral());\n        }\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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,gBAA6B;AAC7B,kBAAmC;AASnC,uBAA0B;AAC1B,mCAAiB;AASjB,kBAKO;AAEP,mBAA6D;AAE7D,IAAM,YAAY,CAAI,MAAwB,MAAM;AAEpD,IAAM,aAAa,oBAAI,IAAI,CAAC,GAAG,6BAAAA,QAAK,SAAS,MAAM,6BAAAA,QAAK,SAAS,GAAG,CAAC;AAUrE,IAAM,4BAA4B,CAAC,WAAkC;AAAA,EACnE,MAAM;AAAA,EACN;AAAA,EACA,OAAO;AAAA,IACL,UAAU;AAAA,IACV,KAAK,IAAI;AAAA,EACX;AACF;AAhDA;AAkDA,IAAqB,kBAArB,cAA6C,oCAAwB;AAAA,EAOnE,YAAY,WAAmB,MAA2B;AAzD5D;AA2DI;AAAA,MACE;AAAA,MACA,CAAC,UAAU,KAAK,KAAK;AAAA,MACrB,oCAAwB;AAAA,IAC1B;AAEA;AAAA,MACE;AAAA,MACA,CAAC,UAAU,CAAC,QAAQ,QAAQ,GAAG,CAAC,YAAY,MAAM,CAAC;AAAA,MACnD;AAAA,IACF;AAEA,UAAM,CAAC,KAAK,OAAO,QAAQ,IAAI;AAE/B,QAAI,SAAS,OAAO,QAAQ;AAG1B,YAAM,oCAAwB;AAAA,IAChC;AAEA,UAAM,CAAC,KAAK,QAAQ,GAAG,GAAG,IAAI;AA5BhC,wBAAO;AAEP,qCAAe;AAEf,wCAAkB,oBAAI,IAAoB;AA0BxC,QAAI;AACJ,QAAI,MAAM,OAAO,UAAU,MAAM,WAAW,GAAG;AAC7C,YAAM,QAAQ,MAAM;AACpB,UAAI,MAAM,SAAS,uBAAU,UAAU;AACrC,oBAAY;AAAA,MACd,WAAW,MAAM,SAAS,uBAAU,OAAO;AACzC,oBAAY,OAAO,MAAM,UAAU,WAAW,MAAM,QAAQ;AAAA,MAC9D,OAAO;AACL,aAAI,WAAM,iBAAN,mBAAoB,QAAQ;AAC9B,gBAAM,cAAU,8BAAgB,KAAK,KAAK,QAAQ,QAAQ;AAG1D,gBAAM,gBAAgB,MAAM,aAAa,KAAK,CAAC,iBAAiB;AA7F1E,gBAAAC;AA8FY,kBAAM,kBAAc;AAAA,cAClB;AAAA,cACA,KAAK,QAAQ;AAAA,YACf;AAEA,gBAAI,aAAa;AACf,oBAAM,cAAc,KAAK,UAAM,wBAAa,aAAa,MAAM,CAAC;AAChE,kBAAI,QAA2BA,MAAA,2CAAa,YAAb,gBAAAA,IAAsB;AACrD,kBAAI,gBAAgB,WAAW,SAAS,QAAW;AAEjD,uBAAO;AAAA,cACT;AAEA,kBAAI,MAAM;AACR,sBAAM,iBAAa,qBAAQ,WAAW;AACtC,sBAAM,iBAAiB,KAAK,QAAQ,OAAO,eAAG;AAC9C,sBAAM,eAAW,kBAAK,YAAY,cAAc;AAChD,sBAAM,oBAAoB,QAAQ,QAAQ,cAAc;AAAA,kBACtD,OAAO,KAAC,qBAAQ,KAAK,QAAQ,QAAS,CAAC;AAAA,gBACzC,CAAC;AAED,2BAAO,4BAAU,mBAAmB,QAAQ;AAAA,cAC9C;AAAA,YACF;AAEA,mBAAO;AAAA,UACT,CAAC;AAED,cAAI,CAAC,eAAe;AAClB,wBAAY;AAAA,cACV,MAAM,MAAM;AAAA,cACZ,YAAY;AAAA,cACZ,QAAQ,MAAM;AAAA,YAChB;AAAA,UACF;AAAA,QACF;AAEA,YAAI,cAAc,QAAW;AAC3B,sBAAY;AAAA,YACV,MAAM,MAAM;AAAA,YACZ,QAAQ,MAAM;AAAA,UAChB;AAEA,eAAK,aAAa,KAAK,KAAK;AAAA,QAC9B;AAAA,MACF;AAAA,IACF;AAEA,QAAI,MAAM,OAAO,UAAU;AACzB,OAAC,EAAE,SAAS,IAAI;AAAA,IAClB;AAEA,QAAI,CAAC,WAAW;AACd,YAAM,IAAI,MAAM,+BAA+B;AAAA,IACjD;AAEA,SAAK,YAAY;AAAA,EACnB;AAAA,EAEgB,iBACd,MACA,cACA,QACA,OAAO,IACC;AACR,UAAM,KAAK,KAAK,cAAc,QAAQ,MAAM,YAAY;AAExD,SAAK,eAAe,KAAK;AAAA,MACvB;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF,CAAC;AAED,WAAO;AAAA,EACT;AAAA,EAEgB,wBAA8B;AAC5C,SAAK,SAAS,KAAK,OAAO,KAAK;AAAA,EACjC;AAAA,EAEgB,uBAA6B;AAC3C,UAAM,IAAI,KAAK;AAEf,UAAM,QAAQ,KAAK,SAAS;AAE5B,SAAK;AAAA,MACH,EAAE,eAAe,KAAK,eAAe,CAAC,KAAK,qBAAqB,KAAK,CAAC,CAAC;AAAA,MACvE;AAAA,IACF;AAAA,EACF;AAAA,EAEgB,aACd,YACA,SACA,KACO;AACP,UAAM,QAAe,CAAC;AAEtB,QAAI,WAAW,IAAI,KAAK;AAKxB,QAAI,QACF,OAAO,KAAK,cAAc,YAAY,KAAK,UAAU,aACjD,OACA,WAAW,IAAI,KAAK,UAAU,KAAK,IAAI;AAC7C,eAAO,sBAAQ,KAAK,GAAG;AACrB,kBAAY,IAAI,MAAM,UAAU;AAChC,cAAQ,MAAM,UAAU;AAAA,IAC1B;AAEA,UAAM,YAAY;AAAA,MAChB;AAAA,MACA,WAAW,KAAK;AAAA,MAChB,aAAa,KAAK;AAAA,MAClB,QAAO,2BAAK,UAAS;AAAA,IACvB;AAEA,WAAO;AAAA,EACT;AAAA,EAEA,IAAoB,aAAqB;AACvC,WAAO,IAAI,KAAK;AAAA,EAClB;AAAA,EAEA,IAAc,wBAAoC;AAChD,UAAM,IAAI,KAAK;AACf,QAAI,OAAO,KAAK,cAAc,UAAU;AACtC,UAAI,KAAK,cAAc,uBAAuB;AAC5C,eAAO,EAAE,wBAAwB,CAAC,GAAG,EAAE,eAAe,CAAC,CAAC,CAAC;AAAA,MAC3D;AAEA,aAAO,0BAA0B,KAAK,SAAS;AAAA,IACjD;AAEA,WAAO,EAAE,eAAe,EAAE,WAAW,KAAK,UAAU,KAAK,IAAI,GAAG,CAAC,CAAC;AAAA,EACpE;AAAA,EAEA,IAAc,gBAAgC;AAC5C,UAAM,IAAI,KAAK;AACf,WAAO,EAAE,eAAe,KAAK,QAAQ,CAAC,KAAK,qBAAqB,CAAC;AAAA,EACnE;AAAA,EAEA,IAAoB,QAA0B;AAC5C,UAAM,IAAI,KAAK;AACf,UAAM,cACJ,OAAO,KAAK,cAAc,YAAY,KAAK,UAAU,aACjD,OACA,KAAK,UAAU,KAAK;AAE1B,WAAO,EAAE,iBAAiB;AAAA,MACxB,EAAE;AAAA,QACA,EAAE,cAAc,aAAa;AAAA,QAC7B,EAAE,cAAc,KAAK,WAAW;AAAA,MAClC;AAAA,MACA,EAAE;AAAA,QACA,EAAE,cAAc,WAAW;AAAA,QAC3B,EAAE,iBAAiB;AAAA,UACjB,EAAE;AAAA,YACA,EAAE,cAAc,WAAW;AAAA,YAC3B,EAAE,cAAc,KAAK,SAAS;AAAA,UAChC;AAAA,UACA,EAAE;AAAA,YACA,EAAE,cAAc,SAAS;AAAA,YACzB,cACI,EAAE,eAAe,EAAE,WAAW,WAAW,GAAG,CAAC,CAAC,IAC9C,EAAE,YAAY;AAAA,UACpB;AAAA,QACF,CAAC;AAAA,MACH;AAAA,IACF,CAAC;AAAA,EACH;AAAA,EAEgB,WAAmB;AACjC,UAAM,MAAM,CAAC,QAAgB,GAAG,KAAK,cAAc,KAAK;AAExD,QAAI,OAAO,KAAK,cAAc,UAAU;AACtC,UAAI,KAAK,cAAc,uBAAuB;AAC5C,eAAO,IAAI,gBAAW;AAAA,MACxB;AAEA,aAAO,IAAI,IAAI,KAAK,YAAY;AAAA,IAClC;AAEA,WAAO,IAAI,KAAK,UAAU,MAAM;AAAA,EAClC;AAAA,EAEU,oBACR,QACA,MACA,cACA;AACA,UAAM,UAAU,KAAK,mBAAmB,QAAQ,MAAM,YAAY;AAClE,UAAM,eAAe,KAAK,QAAQ;AAClC,QAAI,CAAC,cAAc;AACjB,aAAO;AAAA,IACT;AAEA,WAAO,OAAO,iBAAiB,aAC3B,aAAa,OAAO,QACpB,uBAAU,cAAc,OAAO;AAAA,EACrC;AAAA,EAEU,WAAmB;AAC3B,UAAM,WAAmB;AAAA,MACvB,MAAM,KAAK;AAAA,MACX,OAAO,KAAK;AAAA,MACZ,WACE,OAAO,KAAK,cAAc,YAAY,CAAC,WAAW,IAAI,KAAK,SAAS;AAAA,IACxE;AAGA,QAAI,KAAK,eAAe,QAAQ;AAC9B,eAAS,OAAO,CAAC;AACjB,WAAK,eAAe,QAAQ,CAAC,EAAE,IAAI,MAAM,KAAK,MAAM;AAClD,cAAM,QAAsB,CAAC,KAAK,WAAW,eAAe,MAAM,CAAC,CAAC,CAAC;AAErE,YAAI,MAAM;AACR,gBAAM,KAAK,KAAK,WAAW,cAAc,IAAI,CAAC;AAAA,QAChD;AAEA,iBAAS,KAAM,MAAM;AAAA,MACvB,CAAC;AAAA,IACH;AAEA,WAAO;AAAA,EACT;AAAA,EAEU,qBAAqB,OAAiC;AAC9D,UAAM,IAAI,KAAK;AAEf,UAAM,kBAAkB,OAAO,QAAQ,KAAK,EACzC,IAAI,CAAC,CAAC,KAAK,KAAK,MAAkD;AACjE,UAAI,UAAU,QAAW;AACvB,eAAO;AAAA,MACT;AAEA,YAAM,UAAU,EAAE,WAAW,GAAG;AAEhC,UAAI,UAAU,MAAM;AAClB,eAAO,EAAE,eAAe,SAAS,EAAE,YAAY,CAAC;AAAA,MAClD;AAEA,UAAI,OAAO,UAAU,UAAU;AAC7B,eAAO,EAAE,eAAe,SAAS,EAAE,cAAc,KAAK,CAAC;AAAA,MACzD;AAEA,UAAI,OAAO,UAAU,WAAW;AAC9B,eAAO,EAAE,eAAe,SAAS,EAAE,eAAe,KAAK,CAAC;AAAA,MAC1D;AAEA,YAAM,OAAO,OAAO,QAAQ,KAAK,EAAE,IAAI,CAAC,CAAC,UAAU,SAAS,MAAM;AAChE,eAAO,EAAE;AAAA,UACP,EAAE,cAAc,QAAQ;AAAA,UACxB,EAAE,gBAAgB,SAAS;AAAA,QAC7B;AAAA,MACF,CAAC;AAED,aAAO,EAAE,eAAe,SAAS,EAAE,iBAAiB,IAAI,CAAC;AAAA,IAC3D,CAAC,EACA,OAAO,SAAS;AAEnB,WAAO,EAAE,iBAAiB,eAAe;AAAA,EAC3C;AAAA,EAEU,mBACR,QACA,MACA,cACkB;AAClB,UAAM,WAAW,MAAM;AAErB,aAAO,uBAAK,cAAL;AAAA,IACT;AAEA,WAAO;AAAA,MACL,eAAe,KAAK;AAAA,MACpB,eAAe,KAAK;AAAA,MACpB,IAAI,QAAQ;AACV,eAAO,SAAS;AAAA,MAClB;AAAA,MACA;AAAA,MACA,WAAW,KAAK,YAAY;AAAA,MAC5B;AAAA,MACA;AAAA,MACA,eAAW,sBAAQ,SAAS,IAAI;AAAA,IAClC;AAAA,EACF;AAAA,EAEU,cACR,QACA,MACA,cACQ;AACR,UAAM,QAAQ,SAAS;AACvB,QAAI,CAAC,mBAAK,iBAAgB,IAAI,KAAK,GAAG;AACpC,YAAM,KAAK,KAAK,oBAAoB,QAAQ,MAAM,YAAY;AAC9D,UAAI,IAAI;AACN,mBAAO,kCAAqB,EAAE;AAAA,MAChC;AAEA,YAAM,UAAU,KAAK,mBAAmB,QAAQ,MAAM,YAAY;AAGlE,yBAAK,iBAAgB,IAAI,OAAO,GAAG,KAAK,QAAQ,QAAQ,OAAO;AAAA,IACjE;AAEA,WAAO,mBAAK,iBAAgB,IAAI,KAAK;AAAA,EACvC;AACF;AAhWE;AAEA;","names":["html","_a"]}
+{"version":3,"sources":["../../src/processors/styled.ts"],"sourcesContent":["import { readFileSync } from 'fs';\nimport { dirname, join, sep } from 'path';\n\nimport type {\n  CallExpression,\n  Expression,\n  ObjectExpression,\n  SourceLocation,\n  StringLiteral,\n} from '@babel/types';\nimport { minimatch } from 'minimatch';\nimport html from 'react-html-attributes';\n\nimport type {\n  Params,\n  Rules,\n  TailProcessorParams,\n  ValueCache,\n  WrappedNode,\n} from '@linaria/tags';\nimport {\n  buildSlug,\n  TaggedTemplateProcessor,\n  validateParams,\n  toValidCSSIdentifier,\n} from '@linaria/tags';\nimport type { IVariableContext } from '@linaria/utils';\nimport { findPackageJSON, hasMeta, slugify, ValueType } from '@linaria/utils';\n\nconst isNotNull = <T>(x: T | null): x is T => x !== null;\n\nconst allTagsSet = new Set([...html.elements.html, html.elements.svg]);\n\nexport interface IProps {\n  atomic?: boolean;\n  class?: string;\n  name: string;\n  propsAsIs: boolean;\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    // Should have at least two params and the first one should be a callee.\n    validateParams(\n      params,\n      ['callee', '*', '...'],\n      TaggedTemplateProcessor.SKIP\n    );\n\n    validateParams(\n      params,\n      ['callee', ['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 if (value.kind === ValueType.CONST) {\n        component = typeof value.value === 'string' ? value.value : undefined;\n      } else {\n        if (value.importedFrom?.length) {\n          const selfPkg = findPackageJSON('.', this.context.filename);\n\n          // Check if at least one used identifier is a Linaria component.\n          const isSomeMatched = value.importedFrom.some((importedFrom) => {\n            const importedPkg = findPackageJSON(\n              importedFrom,\n              this.context.filename\n            );\n\n            if (importedPkg) {\n              const packageJSON = JSON.parse(readFileSync(importedPkg, 'utf8'));\n              let mask: string | undefined = packageJSON?.linaria?.components;\n              if (importedPkg === selfPkg && mask === undefined) {\n                // If mask is not specified for the local package, all components are treated as styled.\n                mask = '**/*';\n              }\n\n              if (mask) {\n                const packageDir = dirname(importedPkg);\n                const normalizedMask = mask.replace(/\\//g, sep);\n                const fullMask = join(packageDir, normalizedMask);\n                const fileWithComponent = require.resolve(importedFrom, {\n                  paths: [dirname(this.context.filename!)],\n                });\n\n                return minimatch(fileWithComponent, fullMask);\n              }\n            }\n\n            return false;\n          });\n\n          if (!isSomeMatched) {\n            component = {\n              node: value.ex,\n              nonLinaria: true,\n              source: value.source,\n            };\n          }\n        }\n\n        if (component === undefined) {\n          component = {\n            node: value.ex,\n            source: value.source,\n          };\n\n          this.dependencies.push(value);\n        }\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 get asSelector(): string {\n    return `.${this.className}`;\n  }\n\n  public override get value(): ObjectExpression {\n    const t = this.astService;\n    const extendsNode =\n      typeof this.component === 'string' || this.component.nonLinaria\n        ? null\n        : 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  protected get tagExpression(): CallExpression {\n    const t = this.astService;\n    return t.callExpression(this.callee, [this.tagExpressionArgument]);\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  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' || this.component.nonLinaria\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 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      propsAsIs:\n        typeof this.component !== 'string' || !allTagsSet.has(this.component),\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 === undefined) {\n          return null;\n        }\n\n        const keyNode = t.identifier(key);\n\n        if (value === null) {\n          return t.objectProperty(keyNode, t.nullLiteral());\n        }\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":["html"]}

package/dist/processors/styled.mjs

@@ -1,41 +1,9 @@
-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 __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require : typeof Proxy !== "undefined" ? new Proxy(x, {
   get: (a, b) => (typeof require !== "undefined" ? require : a)[b]
 }) : x)(function(x) {
   if (typeof require !== "undefined")
     return require.apply(this, arguments);
-  throw new Error('Dynamic require of "' + x + '" is not supported');
-});
-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);
-  }
+  throw Error('Dynamic require of "' + x + '" is not supported');
 });
 
 // src/processors/styled.ts
@@ -60,10 +28,11 @@ var singleQuotedStringLiteral = (value) => ({
     raw: `'${value}'`
   }
 });
-var _variableIdx, _variablesCache;
 var StyledProcessor = class extends TaggedTemplateProcessor {
+  component;
+  #variableIdx = 0;
+  #variablesCache = /* @__PURE__ */ new Map();
   constructor(params, ...args) {
-    var _a;
     validateParams(
       params,
       ["callee", "*", "..."],
@@ -79,9 +48,6 @@ var StyledProcessor = class extends TaggedTemplateProcessor {
       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];
@@ -90,17 +56,16 @@ var StyledProcessor = class extends TaggedTemplateProcessor {
       } else if (value.kind === ValueType.CONST) {
         component = typeof value.value === "string" ? value.value : void 0;
       } else {
-        if ((_a = value.importedFrom) == null ? void 0 : _a.length) {
+        if (value.importedFrom?.length) {
           const selfPkg = findPackageJSON(".", this.context.filename);
           const isSomeMatched = value.importedFrom.some((importedFrom) => {
-            var _a2;
             const importedPkg = findPackageJSON(
               importedFrom,
               this.context.filename
             );
             if (importedPkg) {
               const packageJSON = JSON.parse(readFileSync(importedPkg, "utf8"));
-              let mask = (_a2 = packageJSON == null ? void 0 : packageJSON.linaria) == null ? void 0 : _a2.components;
+              let mask = packageJSON?.linaria?.components;
               if (importedPkg === selfPkg && mask === void 0) {
                 mask = "**/*";
               }
@@ -141,6 +106,46 @@ var StyledProcessor = class extends TaggedTemplateProcessor {
     }
     this.component = component;
   }
+  get asSelector() {
+    return `.${this.className}`;
+  }
+  get value() {
+    const t = this.astService;
+    const extendsNode = typeof this.component === "string" || this.component.nonLinaria ? 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()
+          )
+        ])
+      )
+    ]);
+  }
+  get tagExpression() {
+    const t = this.astService;
+    return t.callExpression(this.callee, [this.tagExpressionArgument]);
+  }
+  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), []);
+  }
   addInterpolation(node, precedingCss, source, unit = "") {
     const id = this.getVariableId(source, unit, precedingCss);
     this.interpolations.push({
@@ -174,50 +179,10 @@ var StyledProcessor = class extends TaggedTemplateProcessor {
       cssText,
       className: this.className,
       displayName: this.displayName,
-      start: (loc == null ? void 0 : loc.start) ?? null
+      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.callee, [this.tagExpressionArgument]);
-  }
-  get value() {
-    const t = this.astService;
-    const extendsNode = typeof this.component === "string" || this.component.nonLinaria ? 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") {
@@ -234,7 +199,7 @@ var StyledProcessor = class extends TaggedTemplateProcessor {
     if (!customSlugFn) {
       return void 0;
     }
-    return typeof customSlugFn === "function" ? customSlugFn(context) : buildSlug(customSlugFn, context);
+    return typeof customSlugFn === "function" ? customSlugFn(context) : buildSlug(customSlugFn, { ...context });
   }
   getProps() {
     const propsObj = {
@@ -282,7 +247,7 @@ var StyledProcessor = class extends TaggedTemplateProcessor {
   }
   getVariableContext(source, unit, precedingCss) {
     const getIndex = () => {
-      return __privateWrapper(this, _variableIdx)._++;
+      return this.#variableIdx++;
     };
     return {
       componentName: this.displayName,
@@ -299,19 +264,17 @@ var StyledProcessor = class extends TaggedTemplateProcessor {
   }
   getVariableId(source, unit, precedingCss) {
     const value = source + unit;
-    if (!__privateGet(this, _variablesCache).has(value)) {
+    if (!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}`);
+      this.#variablesCache.set(value, `${this.slug}-${context.index}`);
     }
-    return __privateGet(this, _variablesCache).get(value);
+    return this.#variablesCache.get(value);
   }
 };
-_variableIdx = new WeakMap();
-_variablesCache = new WeakMap();
 export {
   StyledProcessor as default
 };

package/dist/processors/styled.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/processors/styled.ts"],"sourcesContent":["import { readFileSync } from 'fs';\nimport { dirname, join, sep } from 'path';\n\nimport type {\n  CallExpression,\n  Expression,\n  ObjectExpression,\n  SourceLocation,\n  StringLiteral,\n} from '@babel/types';\nimport { minimatch } from 'minimatch';\nimport html from 'react-html-attributes';\n\nimport type {\n  Params,\n  Rules,\n  TailProcessorParams,\n  ValueCache,\n  WrappedNode,\n} from '@linaria/tags';\nimport {\n  buildSlug,\n  TaggedTemplateProcessor,\n  validateParams,\n  toValidCSSIdentifier,\n} from '@linaria/tags';\nimport type { IVariableContext } from '@linaria/utils';\nimport { findPackageJSON, hasMeta, slugify, ValueType } from '@linaria/utils';\n\nconst isNotNull = <T>(x: T | null): x is T => x !== null;\n\nconst allTagsSet = new Set([...html.elements.html, html.elements.svg]);\n\nexport interface IProps {\n  atomic?: boolean;\n  class?: string;\n  name: string;\n  propsAsIs: boolean;\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    // Should have at least two params and the first one should be a callee.\n    validateParams(\n      params,\n      ['callee', '*', '...'],\n      TaggedTemplateProcessor.SKIP\n    );\n\n    validateParams(\n      params,\n      ['callee', ['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 if (value.kind === ValueType.CONST) {\n        component = typeof value.value === 'string' ? value.value : undefined;\n      } else {\n        if (value.importedFrom?.length) {\n          const selfPkg = findPackageJSON('.', this.context.filename);\n\n          // Check if at least one used identifier is a Linaria component.\n          const isSomeMatched = value.importedFrom.some((importedFrom) => {\n            const importedPkg = findPackageJSON(\n              importedFrom,\n              this.context.filename\n            );\n\n            if (importedPkg) {\n              const packageJSON = JSON.parse(readFileSync(importedPkg, 'utf8'));\n              let mask: string | undefined = packageJSON?.linaria?.components;\n              if (importedPkg === selfPkg && mask === undefined) {\n                // If mask is not specified for the local package, all components are treated as styled.\n                mask = '**/*';\n              }\n\n              if (mask) {\n                const packageDir = dirname(importedPkg);\n                const normalizedMask = mask.replace(/\\//g, sep);\n                const fullMask = join(packageDir, normalizedMask);\n                const fileWithComponent = require.resolve(importedFrom, {\n                  paths: [dirname(this.context.filename!)],\n                });\n\n                return minimatch(fileWithComponent, fullMask);\n              }\n            }\n\n            return false;\n          });\n\n          if (!isSomeMatched) {\n            component = {\n              node: value.ex,\n              nonLinaria: true,\n              source: value.source,\n            };\n          }\n        }\n\n        if (component === undefined) {\n          component = {\n            node: value.ex,\n            source: value.source,\n          };\n\n          this.dependencies.push(value);\n        }\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' || this.component.nonLinaria\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.callee, [this.tagExpressionArgument]);\n  }\n\n  public override get value(): ObjectExpression {\n    const t = this.astService;\n    const extendsNode =\n      typeof this.component === 'string' || this.component.nonLinaria\n        ? null\n        : 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      propsAsIs:\n        typeof this.component !== 'string' || !allTagsSet.has(this.component),\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 === undefined) {\n          return null;\n        }\n\n        const keyNode = t.identifier(key);\n\n        if (value === null) {\n          return t.objectProperty(keyNode, t.nullLiteral());\n        }\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":["_a"]}
+{"version":3,"sources":["../../src/processors/styled.ts"],"sourcesContent":["import { readFileSync } from 'fs';\nimport { dirname, join, sep } from 'path';\n\nimport type {\n  CallExpression,\n  Expression,\n  ObjectExpression,\n  SourceLocation,\n  StringLiteral,\n} from '@babel/types';\nimport { minimatch } from 'minimatch';\nimport html from 'react-html-attributes';\n\nimport type {\n  Params,\n  Rules,\n  TailProcessorParams,\n  ValueCache,\n  WrappedNode,\n} from '@linaria/tags';\nimport {\n  buildSlug,\n  TaggedTemplateProcessor,\n  validateParams,\n  toValidCSSIdentifier,\n} from '@linaria/tags';\nimport type { IVariableContext } from '@linaria/utils';\nimport { findPackageJSON, hasMeta, slugify, ValueType } from '@linaria/utils';\n\nconst isNotNull = <T>(x: T | null): x is T => x !== null;\n\nconst allTagsSet = new Set([...html.elements.html, html.elements.svg]);\n\nexport interface IProps {\n  atomic?: boolean;\n  class?: string;\n  name: string;\n  propsAsIs: boolean;\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    // Should have at least two params and the first one should be a callee.\n    validateParams(\n      params,\n      ['callee', '*', '...'],\n      TaggedTemplateProcessor.SKIP\n    );\n\n    validateParams(\n      params,\n      ['callee', ['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 if (value.kind === ValueType.CONST) {\n        component = typeof value.value === 'string' ? value.value : undefined;\n      } else {\n        if (value.importedFrom?.length) {\n          const selfPkg = findPackageJSON('.', this.context.filename);\n\n          // Check if at least one used identifier is a Linaria component.\n          const isSomeMatched = value.importedFrom.some((importedFrom) => {\n            const importedPkg = findPackageJSON(\n              importedFrom,\n              this.context.filename\n            );\n\n            if (importedPkg) {\n              const packageJSON = JSON.parse(readFileSync(importedPkg, 'utf8'));\n              let mask: string | undefined = packageJSON?.linaria?.components;\n              if (importedPkg === selfPkg && mask === undefined) {\n                // If mask is not specified for the local package, all components are treated as styled.\n                mask = '**/*';\n              }\n\n              if (mask) {\n                const packageDir = dirname(importedPkg);\n                const normalizedMask = mask.replace(/\\//g, sep);\n                const fullMask = join(packageDir, normalizedMask);\n                const fileWithComponent = require.resolve(importedFrom, {\n                  paths: [dirname(this.context.filename!)],\n                });\n\n                return minimatch(fileWithComponent, fullMask);\n              }\n            }\n\n            return false;\n          });\n\n          if (!isSomeMatched) {\n            component = {\n              node: value.ex,\n              nonLinaria: true,\n              source: value.source,\n            };\n          }\n        }\n\n        if (component === undefined) {\n          component = {\n            node: value.ex,\n            source: value.source,\n          };\n\n          this.dependencies.push(value);\n        }\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 get asSelector(): string {\n    return `.${this.className}`;\n  }\n\n  public override get value(): ObjectExpression {\n    const t = this.astService;\n    const extendsNode =\n      typeof this.component === 'string' || this.component.nonLinaria\n        ? null\n        : 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  protected get tagExpression(): CallExpression {\n    const t = this.astService;\n    return t.callExpression(this.callee, [this.tagExpressionArgument]);\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  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' || this.component.nonLinaria\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 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      propsAsIs:\n        typeof this.component !== 'string' || !allTagsSet.has(this.component),\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 === undefined) {\n          return null;\n        }\n\n        const keyNode = t.identifier(key);\n\n        if (value === null) {\n          return t.objectProperty(keyNode, t.nullLiteral());\n        }\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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@linaria/react",
-  "version": "4.5.4",
+  "version": "5.0.1",
   "description": "Blazing fast zero-runtime CSS in JS library",
   "keywords": [
     "css",
@@ -52,13 +52,13 @@
     "minimatch": "^9.0.3",
     "react-html-attributes": "^1.4.6",
     "ts-invariant": "^0.10.3",
-    "@linaria/core": "^4.5.4",
-    "@linaria/tags": "^4.5.4",
-    "@linaria/utils": "^4.5.3"
+    "@linaria/core": "^5.0.1",
+    "@linaria/tags": "^5.0.1",
+    "@linaria/utils": "^5.0.1"
   },
   "devDependencies": {
-    "@babel/types": "^7.22.5",
-    "@types/babel__core": "^7.1.19",
+    "@babel/types": "^7.22.15",
+    "@types/babel__core": "^7.20.1",
     "@types/node": "^17.0.39",
     "@types/react": ">=16",
     "react": "^16.14.0",
@@ -68,7 +68,7 @@
     "react": ">=16"
   },
   "engines": {
-    "node": "^12.16.0 || >=13.7.0"
+    "node": ">=16.0.0"
   },
   "publishConfig": {
     "access": "public"

package/types/processors/styled.d.ts

@@ -13,14 +13,14 @@ export default class StyledProcessor extends TaggedTemplateProcessor {
     #private;
     component: WrappedNode;
     constructor(params: Params, ...args: TailProcessorParams);
+    get asSelector(): string;
+    get value(): ObjectExpression;
+    protected get tagExpression(): CallExpression;
+    protected get tagExpressionArgument(): Expression;
     addInterpolation(node: Expression, precedingCss: string, source: string, unit?: string): string;
     doEvaltimeReplacement(): void;
     doRuntimeReplacement(): void;
     extractRules(valueCache: ValueCache, cssText: string, loc?: SourceLocation | null): Rules;
-    get asSelector(): string;
-    protected get tagExpressionArgument(): Expression;
-    protected get tagExpression(): CallExpression;
-    get value(): ObjectExpression;
     toString(): string;
     protected getCustomVariableId(source: string, unit: string, precedingCss: string): string | undefined;
     protected getProps(): IProps;

package/types/styled.d.ts

@@ -1,11 +1,11 @@
 import React from 'react';
 import type { CSSProperties } from '@linaria/core';
 import type { StyledMeta } from '@linaria/utils';
-export declare type NoInfer<A> = [A][A extends any ? 0 : never];
-declare type Component<TProps> = ((props: TProps) => unknown) | {
+export type NoInfer<A> = [A][A extends any ? 0 : never];
+type Component<TProps> = ((props: TProps) => unknown) | {
     new (props: TProps): unknown;
 };
-declare type Has<T, TObj> = [T] extends [TObj] ? T : T & TObj;
+type Has<T, TObj> = [T] extends [TObj] ? T : T & TObj;
 export declare const omit: <T extends Record<string, unknown>, TKeys extends keyof T>(obj: T, keys: TKeys[]) => Omit<T, TKeys>;
 declare function styled(componentWithStyle: () => any): (error: 'The target component should have a className prop') => void;
 declare function styled<TProps extends Has<TMustHave, {
@@ -20,16 +20,16 @@ declare function styled<TProps extends Has<TMustHave, {
 }, TConstructor extends Component<TProps>>(componentWithoutStyle: TConstructor & Component<TProps>): ComponentStyledTagWithoutInterpolation<TConstructor>;
 declare function styled<TName extends keyof JSX.IntrinsicElements>(tag: TName): HtmlStyledTag<TName>;
 declare function styled(component: 'The target component should have a className prop'): never;
-export declare type StyledComponent<T> = StyledMeta & ([T] extends [React.FunctionComponent<any>] ? T : React.FunctionComponent<T & {
+export type StyledComponent<T> = StyledMeta & ([T] extends [React.FunctionComponent<any>] ? T : React.FunctionComponent<T & {
     as?: React.ElementType;
 }>);
-declare type StaticPlaceholder = string | number | CSSProperties | StyledMeta;
-export declare type HtmlStyledTag<TName extends keyof JSX.IntrinsicElements> = <TAdditionalProps = Record<never, unknown>>(strings: TemplateStringsArray, ...exprs: Array<StaticPlaceholder | ((props: JSX.IntrinsicElements[TName] & Omit<TAdditionalProps, never>) => string | number)>) => StyledComponent<JSX.IntrinsicElements[TName] & TAdditionalProps>;
-declare type ComponentStyledTagWithoutInterpolation<TOrigCmp> = (strings: TemplateStringsArray, ...exprs: Array<StaticPlaceholder | ((props: 'The target component should have a style prop') => never)>) => StyledMeta & TOrigCmp;
-declare type ComponentStyledTagWithInterpolation<TTrgProps, TOrigCmp> = <OwnProps = {}>(strings: TemplateStringsArray, ...exprs: Array<StaticPlaceholder | ((props: NoInfer<OwnProps & TTrgProps>) => string | number)>) => keyof OwnProps extends never ? StyledMeta & TOrigCmp : StyledComponent<OwnProps & TTrgProps>;
-export declare type StyledJSXIntrinsics = {
+type StaticPlaceholder = string | number | CSSProperties | StyledMeta;
+export type HtmlStyledTag<TName extends keyof JSX.IntrinsicElements> = <TAdditionalProps = Record<never, unknown>>(strings: TemplateStringsArray, ...exprs: Array<StaticPlaceholder | ((props: JSX.IntrinsicElements[TName] & Omit<TAdditionalProps, never>) => string | number)>) => StyledComponent<JSX.IntrinsicElements[TName] & TAdditionalProps>;
+type ComponentStyledTagWithoutInterpolation<TOrigCmp> = (strings: TemplateStringsArray, ...exprs: Array<StaticPlaceholder | ((props: 'The target component should have a style prop') => never)>) => StyledMeta & TOrigCmp;
+type ComponentStyledTagWithInterpolation<TTrgProps, TOrigCmp> = <OwnProps = {}>(strings: TemplateStringsArray, ...exprs: Array<StaticPlaceholder | ((props: NoInfer<OwnProps & TTrgProps>) => string | number)>) => keyof OwnProps extends never ? StyledMeta & TOrigCmp : StyledComponent<OwnProps & TTrgProps>;
+export type StyledJSXIntrinsics = {
     readonly [P in keyof JSX.IntrinsicElements]: HtmlStyledTag<P>;
 };
-export declare type Styled = typeof styled & StyledJSXIntrinsics;
+export type Styled = typeof styled & StyledJSXIntrinsics;
 declare const _default: Styled;
 export default _default;