@linaria/react 4.5.1 → 4.5.3
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.
- package/dist/index.js.map +1 -1
- package/dist/index.mjs.map +1 -1
- package/dist/processors/styled.js +3 -3
- package/dist/processors/styled.js.map +1 -1
- package/dist/processors/styled.mjs +1 -3
- package/dist/processors/styled.mjs.map +1 -1
- package/package.json +5 -5
- package/types/index.d.ts +1 -1
- package/types/styled.d.ts +1 -1
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 { StyledMeta } from '@linaria/tags';\n","/* eslint-disable @typescript-eslint/no-explicit-any */\n/**\n * This file contains an runtime version of `styled` component. Responsibilities of the component are:\n * - returns ReactElement based on HTML tag used with `styled` or custom React Component\n * - injects classNames for the returned component\n * - injects CSS variables used to define dynamic styles based on props\n */\nimport validAttr from '@emotion/is-prop-valid';\nimport React from 'react';\n\nimport { cx } from '@linaria/core';\nimport type { CSSProperties } from '@linaria/core';\nimport type { StyledMeta } from '@linaria/tags';\n\nexport type NoInfer<A> = [A][A extends any ? 0 : never];\n\ntype Component<TProps> =\n | ((props: TProps) => unknown)\n | { new (props: TProps): unknown };\n\ntype Has<T, TObj> = [T] extends [TObj] ? T : T & TObj;\n\ntype Options = {\n 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"]}
|
|
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"]}
|
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';\nimport type { StyledMeta } from '@linaria/tags';\n\nexport type NoInfer<A> = [A][A extends any ? 0 : never];\n\ntype Component<TProps> =\n | ((props: TProps) => unknown)\n | { new (props: TProps): unknown };\n\ntype Has<T, TObj> = [T] extends [TObj] ? T : T & TObj;\n\ntype Options = {\n 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":";AAOA,OAAO,eAAe;AACtB,OAAO,WAAW;AAElB,SAAS,UAAU;AAyBnB,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,OAAO,IAAI;AAAA,EACjB,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;AAAA,MACvB;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,YAEhB,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,kCAAkC;AAAA,IACtE;AAAA,EACF;AACF;AAQA,IAAI,MAAM;AA4BV,SAAS,OAAO,KAAe;AAvI/B;AAwIE,MAAI,cAAc;AAElB,MAAI,QAAQ,IAAI,aAAa,QAAQ;AAEnC,mBAAe,iBAAiB;AAChC,SAAI,gCAAK,cAAL,mBAAgB,WAAW;AAC7B,qBAAe,IAAI,IAAI,UAAU;AAAA,IACnC;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,EAAE,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;AACtB,gBAAM,SAAS,SAAS;AACxB,gBAAM,OAAO,SAAS,MAAM;AAC5B,gBAAM,QAAQ,OAAO,WAAW,aAAa,OAAO,KAAK,IAAI;AAE7D,wBAAc,OAAO,QAAQ,IAAI;AAEjC,gBAAM,KAAK,UAAU,GAAG,QAAQ;AAAA,QAClC;AAEA,cAAM,WAAW,cAAc,SAAS,CAAC;AACzC,cAAM,OAAO,OAAO,KAAK,QAAQ;AACjC,YAAI,KAAK,SAAS,GAAG;AACnB,eAAK,QAAQ,CAAC,QAAQ;AACpB,kBAAM,OAAO,SAAS;AAAA,UACxB,CAAC;AAAA,QACH;AAEA,sBAAc,QAAQ;AAAA,MACxB;AAEA,UAAK,IAAY,aAAa,QAAQ,WAAW;AAG/C,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,IAGvB,CAAC,UAAe;AACd,YAAM,OAAO,KAAK,OAAO,CAAC,UAAU,CAAC;AACrC,aAAO,OAAO,MAAM,MAAM,QAAQ;AAAA,IACpC;AAEJ,IAAC,OAAe,cAAc,QAAQ;AAGtC,IAAC,OAAe,YAAY;AAAA,MAC1B,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 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":[]}
|
|
@@ -101,9 +101,9 @@ var StyledProcessor = class extends import_tags.TaggedTemplateProcessor {
|
|
|
101
101
|
let component;
|
|
102
102
|
if (tagOp[0] === "call" && tagOp.length === 2) {
|
|
103
103
|
const value = tagOp[1];
|
|
104
|
-
if (value.kind ===
|
|
104
|
+
if (value.kind === import_utils.ValueType.FUNCTION) {
|
|
105
105
|
component = "FunctionalComponent";
|
|
106
|
-
} else if (value.kind ===
|
|
106
|
+
} else if (value.kind === import_utils.ValueType.CONST) {
|
|
107
107
|
component = typeof value.value === "string" ? value.value : void 0;
|
|
108
108
|
} else {
|
|
109
109
|
if ((_a = value.importedFrom) == null ? void 0 : _a.length) {
|
|
@@ -182,7 +182,7 @@ var StyledProcessor = class extends import_tags.TaggedTemplateProcessor {
|
|
|
182
182
|
const rules = {};
|
|
183
183
|
let selector = `.${this.className}`;
|
|
184
184
|
let value = typeof this.component === "string" || this.component.nonLinaria ? null : valueCache.get(this.component.node.name);
|
|
185
|
-
while ((0,
|
|
185
|
+
while ((0, import_utils.hasMeta)(value)) {
|
|
186
186
|
selector += `.${value.__linaria.className}`;
|
|
187
187
|
value = value.__linaria.extends;
|
|
188
188
|
}
|
|
@@ -1 +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 hasMeta,\n TaggedTemplateProcessor,\n validateParams,\n ValueType,\n toValidCSSIdentifier,\n} from '@linaria/tags';\nimport type { IVariableContext } from '@linaria/utils';\nimport { findPackageJSON, slugify } 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":["html","_a"]}
|
|
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":["html","_a"]}
|
|
@@ -45,13 +45,11 @@ import { minimatch } from "minimatch";
|
|
|
45
45
|
import html from "react-html-attributes";
|
|
46
46
|
import {
|
|
47
47
|
buildSlug,
|
|
48
|
-
hasMeta,
|
|
49
48
|
TaggedTemplateProcessor,
|
|
50
49
|
validateParams,
|
|
51
|
-
ValueType,
|
|
52
50
|
toValidCSSIdentifier
|
|
53
51
|
} from "@linaria/tags";
|
|
54
|
-
import { findPackageJSON, slugify } from "@linaria/utils";
|
|
52
|
+
import { findPackageJSON, hasMeta, slugify, ValueType } from "@linaria/utils";
|
|
55
53
|
var isNotNull = (x) => x !== null;
|
|
56
54
|
var allTagsSet = /* @__PURE__ */ new Set([...html.elements.html, html.elements.svg]);
|
|
57
55
|
var singleQuotedStringLiteral = (value) => ({
|
|
@@ -1 +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 hasMeta,\n TaggedTemplateProcessor,\n validateParams,\n ValueType,\n toValidCSSIdentifier,\n} from '@linaria/tags';\nimport type { IVariableContext } from '@linaria/utils';\nimport { findPackageJSON, slugify } 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"]}
|
|
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"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@linaria/react",
|
|
3
|
-
"version": "4.5.
|
|
3
|
+
"version": "4.5.3",
|
|
4
4
|
"description": "Blazing fast zero-runtime CSS in JS library",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"css",
|
|
@@ -52,12 +52,12 @@
|
|
|
52
52
|
"minimatch": "^9.0.3",
|
|
53
53
|
"react-html-attributes": "^1.4.6",
|
|
54
54
|
"ts-invariant": "^0.10.3",
|
|
55
|
-
"@linaria/core": "^4.5.
|
|
56
|
-
"@linaria/tags": "^4.5.
|
|
57
|
-
"@linaria/utils": "^4.5.
|
|
55
|
+
"@linaria/core": "^4.5.3",
|
|
56
|
+
"@linaria/tags": "^4.5.3",
|
|
57
|
+
"@linaria/utils": "^4.5.2"
|
|
58
58
|
},
|
|
59
59
|
"devDependencies": {
|
|
60
|
-
"@babel/types": "^7.
|
|
60
|
+
"@babel/types": "^7.22.5",
|
|
61
61
|
"@types/babel__core": "^7.1.19",
|
|
62
62
|
"@types/node": "^17.0.39",
|
|
63
63
|
"@types/react": ">=16",
|
package/types/index.d.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
export { default as styled } from './styled';
|
|
2
2
|
export type { HtmlStyledTag, StyledComponent, StyledJSXIntrinsics, Styled, } from './styled';
|
|
3
3
|
export type { CSSProperties } from '@linaria/core';
|
|
4
|
-
export type { StyledMeta } from '@linaria/
|
|
4
|
+
export type { StyledMeta } from '@linaria/utils';
|
package/types/styled.d.ts
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import type { CSSProperties } from '@linaria/core';
|
|
3
|
-
import type { StyledMeta } from '@linaria/
|
|
3
|
+
import type { StyledMeta } from '@linaria/utils';
|
|
4
4
|
export declare type NoInfer<A> = [A][A extends any ? 0 : never];
|
|
5
5
|
declare type Component<TProps> = ((props: TProps) => unknown) | {
|
|
6
6
|
new (props: TProps): unknown;
|