@linaria/react 6.2.1 → 7.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/dist/index.js +4 -4
  2. package/dist/index.js.map +1 -1
  3. package/dist/index.mjs +4 -4
  4. package/dist/index.mjs.map +1 -1
  5. package/package.json +6 -6
  6. package/types/styled.d.ts +16 -4
package/dist/index.js CHANGED
@@ -36,7 +36,7 @@ module.exports = __toCommonJS(src_exports);
36
36
 
37
37
  // src/styled.ts
38
38
  var import_is_prop_valid = __toESM(require("@emotion/is-prop-valid"));
39
- var import_react = __toESM(require("react"));
39
+ var import_react = require("react");
40
40
  var import_core = require("@linaria/core");
41
41
  var isCapital = (ch) => ch.toUpperCase() === ch;
42
42
  var filterKey = (keys) => (key) => keys.indexOf(key) === -1;
@@ -119,11 +119,11 @@ function styled(tag) {
119
119
  }
120
120
  if (tag.__wyw_meta && tag !== component) {
121
121
  filteredProps.as = component;
122
- return import_react.default.createElement(tag, filteredProps);
122
+ return (0, import_react.createElement)(tag, filteredProps);
123
123
  }
124
- return import_react.default.createElement(component, filteredProps);
124
+ return (0, import_react.createElement)(component, filteredProps);
125
125
  };
126
- const Result = import_react.default.forwardRef ? import_react.default.forwardRef(render) : (
126
+ const Result = import_react.forwardRef ? (0, import_react.forwardRef)(render) : (
127
127
  // React.forwardRef won't available on older React versions and in Preact
128
128
  // Fallback to a innerRef prop in that case
129
129
  (props) => {
package/dist/index.js.map CHANGED
@@ -1 +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 { WYWEvalMeta } from '@wyw-in-js/shared';\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';\n\ntype WYWEvalMeta = { __wyw_meta: unknown }; // simplified version of WYWEvalMeta from @wyw-in-js/shared\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 && tag.__wyw_meta && tag.__wyw_meta.className) {\n mockedClass += ` ${tag.__wyw_meta.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).__wyw_meta && 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).__wyw_meta = {\n className: options.class || mockedClass,\n extends: tag,\n };\n\n return Result;\n };\n}\n\nexport type StyledComponent<T> = WYWEvalMeta &\n ([T] extends [React.FunctionComponent<any>]\n ? T\n : React.FunctionComponent<T & { as?: React.ElementType }>);\n\ntype StaticPlaceholder = string | number | CSSProperties | WYWEvalMeta;\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) => WYWEvalMeta & 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 ? WYWEvalMeta & 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"]}
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 { WYWEvalMeta } from '@wyw-in-js/shared';\n","/* eslint-disable @typescript-eslint/no-explicit-any */\n/**\n * This file contains a 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 { createElement, forwardRef } from 'react';\nimport type React from 'react';\n\nimport { cx } from '@linaria/core';\nimport type { CSSProperties } from '@linaria/core';\n\ntype WYWEvalMeta = { __wyw_meta: unknown }; // simplified version of WYWEvalMeta from @wyw-in-js/shared\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\ndeclare global {\n // eslint-disable-next-line @typescript-eslint/no-namespace\n namespace JSX {\n interface IntrinsicElements {}\n }\n}\n\nlet idx = 0;\n\n// eslint-disable-next-line @typescript-eslint/consistent-type-imports\ntype ReactIntrinsicElements = typeof import('react') extends {\n JSX: { IntrinsicElements: infer T };\n}\n ? T\n : never;\n\ntype IntrinsicElements = [ReactIntrinsicElements] extends [never]\n ? JSX.IntrinsicElements\n : ReactIntrinsicElements;\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 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 && tag.__wyw_meta && tag.__wyw_meta.className) {\n mockedClass += ` ${tag.__wyw_meta.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).__wyw_meta && 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 createElement(tag, filteredProps);\n }\n return createElement(component, filteredProps);\n };\n\n const Result = forwardRef\n ? 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).__wyw_meta = {\n className: options.class || mockedClass,\n extends: tag,\n };\n\n return Result;\n };\n}\n\nexport type StyledComponent<T> = WYWEvalMeta &\n ([T] extends [React.FunctionComponent<any>]\n ? T\n : React.FunctionComponent<T & { as?: React.ElementType }>);\n\ntype StaticPlaceholder = string | number | CSSProperties | WYWEvalMeta;\n\nexport type HtmlStyledTag<TName extends keyof 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: IntrinsicElements[TName] & Omit<TAdditionalProps, never>\n ) => string | number)\n >\n) => StyledComponent<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) => WYWEvalMeta & 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 ? WYWEvalMeta & TOrigCmp\n : StyledComponent<OwnProps & TTrgProps>;\n\nexport type StyledJSXIntrinsics = {\n readonly [P in keyof 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 IntrinsicElements) {\n return o(prop);\n },\n })\n : styled) as Styled;\n"],"mappings":"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","names":["validAttr"]}
package/dist/index.mjs CHANGED
@@ -1,6 +1,6 @@
1
1
  // src/styled.ts
2
2
  import validAttr from "@emotion/is-prop-valid";
3
- import React from "react";
3
+ import { createElement, forwardRef } from "react";
4
4
  import { cx } from "@linaria/core";
5
5
  var isCapital = (ch) => ch.toUpperCase() === ch;
6
6
  var filterKey = (keys) => (key) => keys.indexOf(key) === -1;
@@ -83,11 +83,11 @@ function styled(tag) {
83
83
  }
84
84
  if (tag.__wyw_meta && tag !== component) {
85
85
  filteredProps.as = component;
86
- return React.createElement(tag, filteredProps);
86
+ return createElement(tag, filteredProps);
87
87
  }
88
- return React.createElement(component, filteredProps);
88
+ return createElement(component, filteredProps);
89
89
  };
90
- const Result = React.forwardRef ? React.forwardRef(render) : (
90
+ const Result = forwardRef ? forwardRef(render) : (
91
91
  // React.forwardRef won't available on older React versions and in Preact
92
92
  // Fallback to a innerRef prop in that case
93
93
  (props) => {
package/dist/index.mjs.map CHANGED
@@ -1 +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';\n\ntype WYWEvalMeta = { __wyw_meta: unknown }; // simplified version of WYWEvalMeta from @wyw-in-js/shared\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 && tag.__wyw_meta && tag.__wyw_meta.className) {\n mockedClass += ` ${tag.__wyw_meta.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).__wyw_meta && 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).__wyw_meta = {\n className: options.class || mockedClass,\n extends: tag,\n };\n\n return Result;\n };\n}\n\nexport type StyledComponent<T> = WYWEvalMeta &\n ([T] extends [React.FunctionComponent<any>]\n ? T\n : React.FunctionComponent<T & { as?: React.ElementType }>);\n\ntype StaticPlaceholder = string | number | CSSProperties | WYWEvalMeta;\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) => WYWEvalMeta & 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 ? WYWEvalMeta & 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":";AAOA,OAAO,eAAe;AACtB,OAAO,WAAW;AAElB,SAAS,UAAU;AA0BnB,IAAM,YAAY,CAAC,OAAwB,GAAG,YAAY,MAAM;AAChE,IAAM,YACJ,CAA6B,SAC7B,CAAyB,QACvB,KAAK,QAAQ,GAAU,MAAM;AAE1B,IAAM,OAAO,CAClB,KACA,SACmB;AACnB,QAAM,MAAM,CAAC;AACb,SAAO,KAAK,GAAG,EACZ,OAAO,UAAU,IAAI,CAAC,EACtB,QAAQ,CAAC,QAAQ;AAChB,QAAI,GAAG,IAAI,IAAI,GAAG;AAAA,EACpB,CAAC;AAEH,SAAO;AACT;AAEA,SAAS,YACP,MACA,OACA,UACyB;AACzB,QAAM,gBAAgB,KAAK,OAAO,QAAQ;AAE1C,MAAI,CAAC,MAAM;AAKT,UAAM,mBACJ,OAAO,cAAc,aAAa,EAAE,SAAS,UAAU,IAAI;AAE7D,WAAO,KAAK,aAAa,EAAE,QAAQ,CAAC,QAAQ;AAC1C,UAAI,CAAC,iBAAiB,QAAQ,GAAG,GAAG;AAElC,eAAO,cAAc,GAAG;AAAA,MAC1B;AAAA,IACF,CAAC;AAAA,EACH;AAEA,SAAO;AACT;AAEA,IAAM,gBAAgB,CAAC,OAAgB,kBAA0B;AAC/D,MAAI,QAAQ,IAAI,aAAa,cAAc;AACzC,QACE,OAAO,UAAU;AAAA,IAEhB,OAAO,UAAU,YAAY,SAAS,KAAK,GAC5C;AACA;AAAA,IACF;AAEA,UAAM,cACJ,OAAO,UAAU,WAAW,KAAK,UAAU,KAAK,IAAI,OAAO,KAAK;AAGlE,YAAQ;AAAA,MACN,kCAAkC,WAAW,uBAAuB,aAAa;AAAA,IACnF;AAAA,EACF;AACF;AAQA,IAAI,MAAM;AA4BV,SAAS,OAAO,KAAe;AAC7B,MAAI,cAAc;AAElB,MAAI,QAAQ,IAAI,aAAa,QAAQ;AAEnC,mBAAe,iBAAiB,KAAK;AACrC,QAAI,OAAO,IAAI,cAAc,IAAI,WAAW,WAAW;AACrD,qBAAe,IAAI,IAAI,WAAW,SAAS;AAAA,IAC7C;AAAA,EACF;AAEA,SAAO,CAAC,YAAqB;AAC3B,QACE,QAAQ,IAAI,aAAa,gBACzB,QAAQ,IAAI,aAAa,QACzB;AACA,UAAI,MAAM,QAAQ,OAAO,GAAG;AAE1B,cAAM,IAAI;AAAA,UACR;AAAA,QACF;AAAA,MACF;AAAA,IACF;AAEA,UAAM,SAAS,CAAC,OAAY,QAAa;AACvC,YAAM,EAAE,IAAI,YAAY,KAAK,OAAO,YAAY,YAAY,IAAI;AAChE,YAAM,kBACJ,QAAQ,cAAc,SAClB,EACE,OAAO,cAAc,YACrB,UAAU,QAAQ,GAAG,MAAM,MAC3B,CAAC,UAAU,UAAU,CAAC,CAAC,KAEzB,QAAQ;AACd,YAAM,gBAAwB,YAAY,iBAAiB,OAAO;AAAA,QAChE;AAAA,QACA;AAAA,MACF,CAAC;AAED,oBAAc,MAAM;AACpB,oBAAc,YAAY,QAAQ,SAC9B,GAAG,QAAQ,OAAO,cAAc,aAAa,SAAS,IACtD,GAAG,cAAc,aAAa,WAAW,QAAQ,KAAK;AAE1D,YAAM,EAAE,KAAK,IAAI;AAEjB,UAAI,MAAM;AACR,cAAM,QAAgC,CAAC;AAGvC,mBAAW,QAAQ,MAAM;AACvB,gBAAM,WAAW,KAAK,IAAI;AAC1B,gBAAM,SAAS,SAAS,CAAC;AACzB,gBAAM,OAAO,SAAS,CAAC,KAAK;AAC5B,gBAAM,QAAQ,OAAO,WAAW,aAAa,OAAO,KAAK,IAAI;AAE7D,wBAAc,OAAO,QAAQ,IAAI;AAEjC,gBAAM,KAAK,IAAI,EAAE,IAAI,GAAG,KAAK,GAAG,IAAI;AAAA,QACtC;AAEA,cAAM,WAAW,cAAc,SAAS,CAAC;AACzC,cAAM,OAAO,OAAO,KAAK,QAAQ;AACjC,YAAI,KAAK,SAAS,GAAG;AACnB,eAAK,QAAQ,CAAC,QAAQ;AACpB,kBAAM,GAAG,IAAI,SAAS,GAAG;AAAA,UAC3B,CAAC;AAAA,QACH;AAEA,sBAAc,QAAQ;AAAA,MACxB;AAEA,UAAK,IAAY,cAAc,QAAQ,WAAW;AAGhD,sBAAc,KAAK;AAEnB,eAAO,MAAM,cAAc,KAAK,aAAa;AAAA,MAC/C;AACA,aAAO,MAAM,cAAc,WAAW,aAAa;AAAA,IACrD;AAEA,UAAM,SAAS,MAAM,aACjB,MAAM,WAAW,MAAM;AAAA;AAAA;AAAA,MAGvB,CAAC,UAAe;AACd,cAAM,OAAO,KAAK,OAAO,CAAC,UAAU,CAAC;AACrC,eAAO,OAAO,MAAM,MAAM,QAAQ;AAAA,MACpC;AAAA;AAEJ,IAAC,OAAe,cAAc,QAAQ;AAGtC,IAAC,OAAe,aAAa;AAAA,MAC3B,WAAW,QAAQ,SAAS;AAAA,MAC5B,SAAS;AAAA,IACX;AAEA,WAAO;AAAA,EACT;AACF;AAgDA,IAAO,iBAAS,QAAQ,IAAI,aAAa,eACrC,IAAI,MAAM,QAAQ;AAAA,EAChB,IAAI,GAAG,MAAmC;AACxC,WAAO,EAAE,IAAI;AAAA,EACf;AACF,CAAC,IACD;","names":[]}
1
+ {"version":3,"sources":["../src/styled.ts"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-explicit-any */\n/**\n * This file contains a 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 { createElement, forwardRef } from 'react';\nimport type React from 'react';\n\nimport { cx } from '@linaria/core';\nimport type { CSSProperties } from '@linaria/core';\n\ntype WYWEvalMeta = { __wyw_meta: unknown }; // simplified version of WYWEvalMeta from @wyw-in-js/shared\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\ndeclare global {\n // eslint-disable-next-line @typescript-eslint/no-namespace\n namespace JSX {\n interface IntrinsicElements {}\n }\n}\n\nlet idx = 0;\n\n// eslint-disable-next-line @typescript-eslint/consistent-type-imports\ntype ReactIntrinsicElements = typeof import('react') extends {\n JSX: { IntrinsicElements: infer T };\n}\n ? T\n : never;\n\ntype IntrinsicElements = [ReactIntrinsicElements] extends [never]\n ? JSX.IntrinsicElements\n : ReactIntrinsicElements;\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 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 && tag.__wyw_meta && tag.__wyw_meta.className) {\n mockedClass += ` ${tag.__wyw_meta.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).__wyw_meta && 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 createElement(tag, filteredProps);\n }\n return createElement(component, filteredProps);\n };\n\n const Result = forwardRef\n ? 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).__wyw_meta = {\n className: options.class || mockedClass,\n extends: tag,\n };\n\n return Result;\n };\n}\n\nexport type StyledComponent<T> = WYWEvalMeta &\n ([T] extends [React.FunctionComponent<any>]\n ? T\n : React.FunctionComponent<T & { as?: React.ElementType }>);\n\ntype StaticPlaceholder = string | number | CSSProperties | WYWEvalMeta;\n\nexport type HtmlStyledTag<TName extends keyof 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: IntrinsicElements[TName] & Omit<TAdditionalProps, never>\n ) => string | number)\n >\n) => StyledComponent<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) => WYWEvalMeta & 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 ? WYWEvalMeta & TOrigCmp\n : StyledComponent<OwnProps & TTrgProps>;\n\nexport type StyledJSXIntrinsics = {\n readonly [P in keyof 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 IntrinsicElements) {\n return o(prop);\n },\n })\n : styled) as Styled;\n"],"mappings":"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","names":[]}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@linaria/react",
3
- "version": "6.2.1",
3
+ "version": "7.0.0",
4
4
  "description": "Blazing fast zero-runtime CSS in JS library",
5
5
  "keywords": [
6
6
  "css",
@@ -49,13 +49,13 @@
49
49
  },
50
50
  "dependencies": {
51
51
  "@emotion/is-prop-valid": "^1.2.0",
52
- "@wyw-in-js/processor-utils": "^0.5.3",
53
- "@wyw-in-js/shared": "^0.5.3",
52
+ "@wyw-in-js/processor-utils": "^1.0.4",
53
+ "@wyw-in-js/shared": "^1.0.4",
54
54
  "minimatch": "^9.0.3",
55
55
  "react-html-attributes": "^1.4.6",
56
56
  "resolve": "^1.22.8",
57
57
  "ts-invariant": "^0.10.3",
58
- "@linaria/core": "^6.2.0"
58
+ "@linaria/core": "^7.0.0"
59
59
  },
60
60
  "devDependencies": {
61
61
  "@babel/types": "^7.23.5",
@@ -69,7 +69,7 @@
69
69
  "react": ">=16"
70
70
  },
71
71
  "engines": {
72
- "node": ">=16.0.0"
72
+ "node": ">=20.0.0"
73
73
  },
74
74
  "publishConfig": {
75
75
  "access": "public"
@@ -89,7 +89,7 @@
89
89
  "build:declarations": "tsc --emitDeclarationOnly --outDir types",
90
90
  "build:dist": "tsup --format cjs,esm",
91
91
  "test": "jest --config ../../jest.config.js --rootDir .",
92
- "test:dts": "dtslint --localTs ../../node_modules/typescript/lib __dtslint__",
92
+ "test:dts": "dtslint --localTs ../../node_modules/typescript/lib __dtslint__ && dtslint --localTs ../../node_modules/typescript/lib __dtslint-react17__",
93
93
  "typecheck": "tsc --noEmit --composite false",
94
94
  "watch": "pnpm build:dist --watch & pnpm build:declarations --watch"
95
95
  }
package/types/styled.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- import React from 'react';
1
+ import type React from 'react';
2
2
  import type { CSSProperties } from '@linaria/core';
3
3
  type WYWEvalMeta = {
4
4
  __wyw_meta: unknown;
@@ -9,6 +9,18 @@ type Component<TProps> = ((props: TProps) => unknown) | {
9
9
  };
10
10
  type Has<T, TObj> = [T] extends [TObj] ? T : T & TObj;
11
11
  export declare const omit: <T extends Record<string, unknown>, TKeys extends keyof T>(obj: T, keys: TKeys[]) => Omit<T, TKeys>;
12
+ declare global {
13
+ namespace JSX {
14
+ interface IntrinsicElements {
15
+ }
16
+ }
17
+ }
18
+ type ReactIntrinsicElements = typeof import('react') extends {
19
+ JSX: {
20
+ IntrinsicElements: infer T;
21
+ };
22
+ } ? T : never;
23
+ type IntrinsicElements = [ReactIntrinsicElements] extends [never] ? JSX.IntrinsicElements : ReactIntrinsicElements;
12
24
  declare function styled(componentWithStyle: () => any): (error: 'The target component should have a className prop') => void;
13
25
  declare function styled<TProps extends Has<TMustHave, {
14
26
  style?: React.CSSProperties;
@@ -20,17 +32,17 @@ declare function styled<TProps extends Has<TMustHave, {
20
32
  }>, TMustHave extends {
21
33
  className?: string;
22
34
  }, TConstructor extends Component<TProps>>(componentWithoutStyle: TConstructor & Component<TProps>): ComponentStyledTagWithoutInterpolation<TConstructor>;
23
- declare function styled<TName extends keyof JSX.IntrinsicElements>(tag: TName): HtmlStyledTag<TName>;
35
+ declare function styled<TName extends keyof IntrinsicElements>(tag: TName): HtmlStyledTag<TName>;
24
36
  declare function styled(component: 'The target component should have a className prop'): never;
25
37
  export type StyledComponent<T> = WYWEvalMeta & ([T] extends [React.FunctionComponent<any>] ? T : React.FunctionComponent<T & {
26
38
  as?: React.ElementType;
27
39
  }>);
28
40
  type StaticPlaceholder = string | number | CSSProperties | WYWEvalMeta;
29
- 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>;
41
+ export type HtmlStyledTag<TName extends keyof IntrinsicElements> = <TAdditionalProps = Record<never, unknown>>(strings: TemplateStringsArray, ...exprs: Array<StaticPlaceholder | ((props: IntrinsicElements[TName] & Omit<TAdditionalProps, never>) => string | number)>) => StyledComponent<IntrinsicElements[TName] & TAdditionalProps>;
30
42
  type ComponentStyledTagWithoutInterpolation<TOrigCmp> = (strings: TemplateStringsArray, ...exprs: Array<StaticPlaceholder | ((props: 'The target component should have a style prop') => never)>) => WYWEvalMeta & TOrigCmp;
31
43
  type ComponentStyledTagWithInterpolation<TTrgProps, TOrigCmp> = <OwnProps = {}>(strings: TemplateStringsArray, ...exprs: Array<StaticPlaceholder | ((props: NoInfer<OwnProps & TTrgProps>) => string | number)>) => keyof OwnProps extends never ? WYWEvalMeta & TOrigCmp : StyledComponent<OwnProps & TTrgProps>;
32
44
  export type StyledJSXIntrinsics = {
33
- readonly [P in keyof JSX.IntrinsicElements]: HtmlStyledTag<P>;
45
+ readonly [P in keyof IntrinsicElements]: HtmlStyledTag<P>;
34
46
  };
35
47
  export type Styled = typeof styled & StyledJSXIntrinsics;
36
48
  declare const _default: Styled;