Skip to content

Commit ad4d257

Browse files
JakeLaneMonicaOlejniczak
JakeLane
and
MonicaOlejniczak
authoredApr 14, 2022
Adjust flow types to handle function calls (#1188)
* Adjust flow types to handle function calls * Add optional props to classnames * Add changeset * Update packages/react/src/styled/__tests__/types.test.js.flow Co-authored-by: Monica <molejniczak@atlassian.com> * Split classnames function decl for CSS * Test conditional logical expressions in styled Co-authored-by: Monica <molejniczak@atlassian.com>
·
@compiled/webpack-loader@0.19.5@compiled/babel-plugin@0.16.0
1 parent c4ce8a4 commit ad4d257

37 files changed

+383
-268
lines changed
 

‎.changeset/giant-olives-deny.md

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
---
2+
'@compiled/css': patch
3+
'@compiled/jest': patch
4+
'@compiled/react': patch
5+
'@compiled/webpack-loader': patch
6+
---
7+
8+
Update TypeScript and Flow types to support function calls and resolve incorrect typing

‎flow-typed/tokens.js

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
declare var layers: {
2+
modal: () => number,
3+
};
4+
5+
declare type Tokens = typeof tokens;
6+
declare type CSSTokenMap = {
7+
'elevation.surface': 'var(--ds-surface)',
8+
};
9+
declare var tokens: {
10+
+'elevation.surface': '--ds-surface',
11+
};
12+
declare type CSSToken = $ElementType<CSSTokenMap, $Keys<CSSTokenMap>>;
13+
declare function token<T: $Keys<Tokens>>(path: T, fallback?: string): $ElementType<CSSTokenMap, T>;

‎package.json

+2-2
Original file line numberDiff line numberDiff line change
@@ -97,8 +97,8 @@
9797
"eslint-plugin-json-files": "^1.3.0",
9898
"eslint-plugin-react": "^7.29.4",
9999
"eslint-plugin-react-hooks": "^4.4.0",
100-
"flow-bin": "^0.172.0",
101-
"flowgen": "^1.15.0",
100+
"flow-bin": "^0.174.1",
101+
"flowgen": "^1.17.0",
102102
"git-branch-is": "^4.0.0",
103103
"husky": "^4.3.8",
104104
"jest": "^26.6.3",

‎packages/jest/src/index.js.flow

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
/**
22
* Flowtype definitions for index
33
* Generated by Flowgen from a Typescript Definition
4-
* Flowgen v1.15.0
4+
* Flowgen v1.17.0
55
* @flow
66
*/
77
import type { MatchFilter } from './types';

‎packages/jest/src/matchers.js.flow

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
/**
22
* Flowtype definitions for matchers
33
* Generated by Flowgen from a Typescript Definition
4-
* Flowgen v1.15.0
4+
* Flowgen v1.17.0
55
* @flow
66
*/
77
import type { MatchFilter } from './types';

‎packages/jest/src/types.js.flow

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
/**
22
* Flowtype definitions for types
33
* Generated by Flowgen from a Typescript Definition
4-
* Flowgen v1.15.0
4+
* Flowgen v1.17.0
55
* @flow
66
*/
77
import type { Pseudos } from 'csstype';

‎packages/react/src/class-names/__tests__/types.test.js.flow

+10-3
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
// @flow strict-local
22
import React, { type Node } from 'react';
3-
import { ClassNames, type CssFunction } from '@compiled/react';
3+
import { ClassNames, type CssType } from '@compiled/react';
44

55
// Object call expression
66
({ children }: { children: Node }): React$Element<typeof ClassNames> => (
@@ -23,6 +23,13 @@ import { ClassNames, type CssFunction } from '@compiled/react';
2323

2424
// Array
2525
({ children }: { children: Node }): React$Element<typeof ClassNames> => {
26-
const classes: CssFunction<>[] = [{ fontSize: 12 }, `font-size: 12px`];
27-
return <ClassNames>{({ css }) => <span className={css(classes)}>{children}</span>}</ClassNames>;
26+
return (
27+
<ClassNames>
28+
{({ css }) => (
29+
<span className={css(([{ fontSize: 12 }, `font-size: 12px`]: CssType<void>[]))}>
30+
{children}
31+
</span>
32+
)}
33+
</ClassNames>
34+
);
2835
};

‎packages/react/src/class-names/index.js.flow

+29-20
Original file line numberDiff line numberDiff line change
@@ -1,45 +1,54 @@
11
/**
22
* Flowtype definitions for index
33
* Generated by Flowgen from a Typescript Definition
4-
* Flowgen v1.15.0
4+
* Flowgen v1.17.0
55
* @flow
66
*/
77
import type { Node } from 'react';
8-
import type { BasicTemplateInterpolations, CssFunction } from '../types';
9-
export type Interpolations = (BasicTemplateInterpolations | CssFunction<> | CssFunction<>[])[];
10-
export interface ClassNamesProps {
8+
import type { CssType, CssFunction } from '../types';
9+
export type ObjectInterpolation<TProps> = CssType<TProps> | CssType<TProps>[];
10+
export type TemplateStringsInterpolation<TProps> = CssFunction<TProps> | CssFunction<TProps>[];
11+
declare interface CssSignature<TProps> {
12+
(...interpolations: ObjectInterpolation<TProps>[]): string;
13+
(
14+
template: $ReadOnlyArray<string>,
15+
...interpolations: TemplateStringsInterpolation<TProps>[]
16+
): string;
17+
}
18+
export interface ClassNamesProps<TProps> {
1119
children: (opts: {
12-
css: (css: CssFunction<> | CssFunction<>[], ...interpolations: Interpolations) => string,
13-
style: {
14-
[key: string]: string,
15-
...
16-
},
20+
css: CssSignature<TProps>,
21+
style: $Shape<CSSStyleDeclaration>,
1722
...
1823
}) => Node;
1924
}
2025
/**
21-
* Use a component where styles are not necessarily tied to an element.
26+
* ## Class names
2227
*
23-
* ```
24-
* // Object CSS
28+
* Use a component where styles are not necessarily used on a JSX element.
29+
* For further details [read the documentation](https://compiledcssinjs.com/docs/api-class-names).
30+
*
31+
* ### Style with objects
32+
* @example ```
2533
* <ClassNames>
2634
* {({ css, style }) => children({ className: css({ fontSize: 12 }) })}
2735
* </ClassNames>
36+
* ```
2837
*
29-
* // Template literal CSS
38+
* ### Style with template literals
39+
* @example ```
3040
* <ClassNames>
3141
* {({ css, style }) => children({ className: css`font-size: 12px;` })}
3242
* </ClassNames>
43+
* ```
3344
*
34-
* // Array CSS
45+
* ### Compose styles with arrays
46+
* @example ```
3547
* <ClassNames>
3648
* {({ css, style }) =>
37-
* children({ className: css([{ fontSize: 12 }, `font-size: 12px`]) })}
49+
* children({ className: css([{ fontSize: 12 }, css`font-size: 12px`]) })}
3850
* </ClassNames>
3951
* ```
40-
*
41-
* For more help, read the docs:
42-
* https://compiledcssinjs.com/docs/api-class-names
43-
* @param props
4452
*/
45-
declare export function ClassNames(_: ClassNamesProps): React$Node;
53+
declare export function ClassNames<TProps>(x: ClassNamesProps<TProps>): React$Node;
54+
declare export {};

‎packages/react/src/class-names/index.ts

+15-9
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,21 @@
11
import type { ReactNode, CSSProperties } from 'react';
22

3-
import type { BasicTemplateInterpolations, CssFunction } from '../types';
3+
import type { CssType, CssFunction } from '../types';
44
import { createSetupError } from '../utils/error';
55

6-
export type Interpolations = (BasicTemplateInterpolations | CssFunction | CssFunction[])[];
6+
export type ObjectInterpolation<TProps> = CssType<TProps> | CssType<TProps>[];
7+
export type TemplateStringsInterpolation<TProps> = CssFunction<TProps> | CssFunction<TProps>[];
78

8-
export interface ClassNamesProps {
9-
children: (opts: {
10-
css: (css: CssFunction | CssFunction[], ...interpolations: Interpolations) => string;
11-
style: CSSProperties;
12-
}) => ReactNode;
9+
interface CssSignature<TProps> {
10+
(...interpolations: ObjectInterpolation<TProps>[]): string;
11+
(
12+
template: TemplateStringsArray,
13+
...interpolations: TemplateStringsInterpolation<TProps>[]
14+
): string;
15+
}
16+
17+
export interface ClassNamesProps<TProps> {
18+
children: (opts: { css: CssSignature<TProps>; style: CSSProperties }) => ReactNode;
1319
}
1420

1521
/**
@@ -46,8 +52,8 @@ export interface ClassNamesProps {
4652
* </ClassNames>
4753
* ```
4854
*/
49-
export function ClassNames({ children }: ClassNamesProps): JSX.Element;
55+
export function ClassNames<TProps = void>({ children }: ClassNamesProps<TProps>): JSX.Element;
5056

51-
export function ClassNames(_props: ClassNamesProps): JSX.Element {
57+
export function ClassNames<TProps = void>(_props: ClassNamesProps<TProps>): JSX.Element {
5258
throw createSetupError();
5359
}

‎packages/react/src/css/__tests__/types.test.js.flow

+25
Original file line numberDiff line numberDiff line change
@@ -15,3 +15,28 @@ import { css } from '@compiled/react';
1515
const styles = css({ color: 'red' });
1616
return <div css={styles}>red text</div>;
1717
};
18+
19+
// Object call with function call
20+
(): React$Element<'div'> => {
21+
const styles = css({
22+
backgroundColor: token('elevation.surface', 'white'),
23+
zIndex: layers.modal(),
24+
});
25+
return <div css={styles}>red text</div>;
26+
};
27+
28+
// Media query selector
29+
css({
30+
/* Style only for Google Chrome */
31+
'@media screen and (-webkit-min-device-pixel-ratio: 0)': {
32+
wordBreak: 'break-word',
33+
},
34+
/* Style only for Safari */
35+
'@media screen and (-webkit-transition)': {
36+
wordBreak: 'break-word',
37+
},
38+
/* Style only for Mozilla Firefox */
39+
'@-moz-document url-prefix()': {
40+
overflowWrap: 'anywhere',
41+
},
42+
});

‎packages/react/src/css/index.js.flow

+24-23
Original file line numberDiff line numberDiff line change
@@ -1,35 +1,36 @@
11
/**
22
* Flowtype definitions for index
33
* Generated by Flowgen from a Typescript Definition
4-
* Flowgen v1.15.0
4+
* Flowgen v1.17.0
55
* @flow
66
*/
7-
import type { BasicTemplateInterpolations, CSSProps, FunctionInterpolation } from '../types';
7+
import type { CSSProps, CssObject, CssFunction } from '../types';
88
/**
9-
* Create styles that can be re-used between components with a template literal.
9+
* ## CSS
1010
*
11-
* ```
12-
* css`color: red;`;
13-
* ```
11+
* Define styles that are statically typed and useable with other Compiled APIs.
12+
* For further details [read the documentation](https://compiledcssinjs.com/docs/api-css).
1413
*
15-
* For more help, read the docs:
16-
* https://compiledcssinjs.com/docs/api-css
17-
* @param css
18-
* @param values
19-
*/
20-
declare export default function css<T>(
21-
_css: $ReadOnlyArray<string>,
22-
..._values: (BasicTemplateInterpolations | FunctionInterpolation<T>)[]
23-
): CSSProps;
24-
/**
25-
* Create styles that can be re-used between components with an object
14+
* ### Style with objects
15+
* @example ```
16+
* const redText = css({
17+
* color: 'red',
18+
* });
2619
*
20+
* <div css={redText} />
2721
* ```
28-
* css({ color: 'red' });
29-
* ```
3022
*
31-
* For more help, read the docs:
32-
* https://compiledcssinjs.com/docs/api-css
33-
* @param css
23+
* ### Style with template literals
24+
* @example ```
25+
* const redText = css`
26+
* color: red;
27+
* `;
28+
*
29+
* <div css={redText} />
30+
* ```
3431
*/
35-
declare export default function css(_css: CSSProps): CSSProps;
32+
declare export default function css<TProps>(
33+
styles: $ReadOnlyArray<string>,
34+
...interpolations: CssFunction<TProps>[]
35+
): CSSProps<TProps>;
36+
declare export default function css<T>(styles: CssObject<T> | CssObject<T>[]): CSSProps<T>;

‎packages/react/src/css/index.ts

+8-13
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,6 @@
11
/* eslint-disable import/export */
22

3-
import type {
4-
AnyKeyCssProps,
5-
BasicTemplateInterpolations,
6-
CSSProps,
7-
FunctionInterpolation,
8-
} from '../types';
3+
import type { CSSProps, CssObject, CssFunction } from '../types';
94
import { createSetupError } from '../utils/error';
105

116
/**
@@ -36,16 +31,16 @@ import { createSetupError } from '../utils/error';
3631
* <div css={redText} />
3732
* ```
3833
*/
39-
export default function css<T = void>(
34+
export default function css<TProps = void>(
4035
styles: TemplateStringsArray,
41-
...interpolations: (BasicTemplateInterpolations | FunctionInterpolation<T>)[]
42-
): CSSProps;
36+
...interpolations: CssFunction<TProps>[]
37+
): CSSProps<TProps>;
4338

44-
export default function css(styles: AnyKeyCssProps<void> | CSSProps): CSSProps;
39+
export default function css<T = void>(styles: CssObject<T> | CssObject<T>[]): CSSProps<T>;
4540

4641
export default function css<T = void>(
47-
_styles: TemplateStringsArray | CSSProps,
48-
..._interpolations: (BasicTemplateInterpolations | FunctionInterpolation<T>)[]
49-
): CSSProps {
42+
_styles: TemplateStringsArray | CssObject<T> | CssObject<T>[],
43+
..._interpolations: CssFunction[]
44+
): CSSProps<T> {
5045
throw createSetupError();
5146
}

‎packages/react/src/index.js.flow

+4-7
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,12 @@
11
/**
2-
* THIS IS A MANUALLY CURATED FLOW FILE.
3-
*
4-
* Flowtype definitions for runtime
2+
* Flowtype definitions for index
53
* Generated by Flowgen from a Typescript Definition
6-
* Flowgen v1.15.0
4+
* Flowgen v1.17.0
75
* @flow
86
*/
9-
import type { CSSProps, CssFunction } from './types';
7+
import type { CssFunction, CSSProps, CssType } from './types';
8+
export type { CSSProps, CssFunction, CssType };
109
declare export { keyframes } from './keyframes';
1110
declare export { styled } from './styled';
1211
declare export { ClassNames } from './class-names';
1312
declare export { default as css } from './css';
14-
export type { CssFunction, CSSProps };
15-
export type { CssObject } from './styled';

‎packages/react/src/index.ts

+3-4
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,9 @@
11
import { createElement } from 'react';
22

33
import type { CompiledJSX } from './jsx/jsx-local-namespace';
4-
import type { CssFunction, CSSProps } from './types';
4+
import type { CssFunction, CSSProps, CssType } from './types';
5+
6+
export type { CSSProps, CssFunction, CssType };
57

68
export { keyframes } from './keyframes';
79
export { styled } from './styled';
@@ -12,9 +14,6 @@ export { default as css } from './css';
1214
// Compiled currently doesn't define its own and uses this purely to enable a local jsx namespace.
1315
export const jsx = createElement;
1416

15-
export type { CssFunction, CSSProps };
16-
export type { CssObject } from './styled';
17-
1817
export namespace jsx {
1918
export namespace JSX {
2019
export type Element = CompiledJSX.Element;

‎packages/react/src/jsx/jsx-local-namespace.ts

+2-2
Original file line numberDiff line numberDiff line change
@@ -41,7 +41,7 @@ type WithConditionalCSSProp<TProps> = 'className' extends keyof TProps
4141
* />
4242
* ```
4343
*/
44-
css?: CssFunction | CssFunction[];
44+
css?: CssFunction<void> | CssFunction<void>[];
4545
}
4646
: // eslint-disable-next-line @typescript-eslint/ban-types
4747
{}
@@ -69,7 +69,7 @@ export namespace CompiledJSX {
6969
export type IntrinsicClassAttributes<T> = ReactJSXIntrinsicClassAttributes<T>;
7070
export type IntrinsicElements = {
7171
[K in keyof ReactJSXIntrinsicElements]: ReactJSXIntrinsicElements[K] & {
72-
css?: CssFunction | CssFunction[];
72+
css?: CssFunction<void> | CssFunction<void>[];
7373
};
7474
};
7575
}

0 commit comments

Comments
 (0)
Please sign in to comment.