Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Support dynamic value #3146

Open
wants to merge 9 commits into
base: main
Choose a base branch
from
Open

Support dynamic value #3146

Show file tree
Hide file tree
Changes from 5 commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
94483fa
support dynamic value
siriwatknp Jan 3, 2024
cde4175
add types
siriwatknp Jan 8, 2024
bc31fed
skip if mergedProps is undefined
siriwatknp Jan 8, 2024
0d553be
set default type to prevent breaking change
siriwatknp Jan 8, 2024
2ab577f
add test for number as a result from the callback
siriwatknp Jan 8, 2024
cc913db
fix types
siriwatknp Jan 8, 2024
8869037
simplify types and add more tests
siriwatknp Jan 8, 2024
27b03d8
apply review suggestion
siriwatknp Jan 8, 2024
2fb22d4
remove props arg from CSSInterpolation
siriwatknp Jan 9, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
3 changes: 3 additions & 0 deletions packages/serialize/src/index.js
View file
Open in desktop
Expand Up @@ -239,6 +239,9 @@ function createStringFromObject(
} else {
for (let key in obj) {
let value = obj[key]
if (typeof value === 'function' && mergedProps !== undefined) {
value = value(mergedProps)
}
if (typeof value !== 'object') {
if (registered != null && registered[value] !== undefined) {
string += `${key}{${registered[value]}}`
Expand Down
35 changes: 21 additions & 14 deletions packages/serialize/types/index.d.ts
View file
Open in desktop
siriwatknp marked this conversation as resolved.
Show resolved Hide resolved
Expand Up @@ -7,18 +7,21 @@ import * as CSS from 'csstype'
export { RegisteredCache, SerializedStyles }

export type CSSProperties = CSS.PropertiesFallback<number | string>
export type CSSPropertiesWithMultiValues = {
export type CSSPropertiesWithMultiValues<Props = unknown> = {
[K in keyof CSSProperties]:
| CSSProperties[K]
| ReadonlyArray<Extract<CSSProperties[K], string>>
| ((props: Props) => number | string)
siriwatknp marked this conversation as resolved.
Show resolved Hide resolved
Andarist marked this conversation as resolved.
Show resolved Hide resolved
}

export type CSSPseudos = { [K in CSS.Pseudos]?: CSSObject }
export type CSSPseudos<Props = unknown> = {
[K in CSS.Pseudos]?: CSSObject<Props>
}

export interface ArrayCSSInterpolation
extends ReadonlyArray<CSSInterpolation> {}
export interface ArrayCSSInterpolation<Props = unknown>
extends ReadonlyArray<CSSInterpolation<Props>> {}

export type InterpolationPrimitive =
export type InterpolationPrimitive<Props = unknown> =
| null
| undefined
| boolean
Expand All @@ -27,18 +30,22 @@ export type InterpolationPrimitive =
| ComponentSelector
| Keyframes
| SerializedStyles
| CSSObject
| CSSObject<Props>

export type CSSInterpolation = InterpolationPrimitive | ArrayCSSInterpolation
export type CSSInterpolation<Props = unknown> =
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This one actually shouldn't end up including functions in CSSObject. We have 2 flavors of those interpolations:

  • the ones that u can pass to css
  • and the ones that you can pass to styled and similar

The difference is that css is a context-less call. We don't get access to any props there (and we don't defer css resolution) so this should be an error:

css({
  display: () => 'flex'
})

That's why we have both ArrayInterpolation and ArrayCSSInterpolation here. A similar distinction should be introduced for those object styles.

But now... I'm not sure if this would satisfy your original goal.

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I see, I will revert this. I think it should be fine since we focus only for styled.

Copy link
Author

@siriwatknp siriwatknp Jan 9, 2024 •
edited

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Done! see 2fb22d4

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think it should be fine since we focus only for styled.

Cool! ❤️

Done! see 2fb22d4

Thanks. I'm soft-approving this PR now. I think we still need to tweak types a little bit but honestly - I need to give it more thought to determine how to do it in the least disruptive way. So I think, it's best for me to do it soon-ish since I don't have concrete advice right now on how this should be done.

I'll also give @emmatown a couple of days to give their opinion about this. If we don't merge it this week - please ping me later.

| InterpolationPrimitive<Props>
| ArrayCSSInterpolation<Props>

export interface CSSOthersObject {
[propertiesName: string]: CSSInterpolation
export interface CSSOthersObject<Props = unknown> {
[propertiesName: string]:
| CSSInterpolation<Props>
| ((props: Props) => number | string)
}

export interface CSSObject
extends CSSPropertiesWithMultiValues,
CSSPseudos,
CSSOthersObject {}
export interface CSSObject<Props = unknown>
siriwatknp marked this conversation as resolved.
Show resolved Hide resolved
extends CSSPropertiesWithMultiValues<Props>,
CSSPseudos<Props>,
CSSOthersObject<Props> {}

export interface ComponentSelector {
__emotion_styles: any
Expand All @@ -59,7 +66,7 @@ export interface FunctionInterpolation<Props> {
}

export type Interpolation<Props> =
| InterpolationPrimitive
| InterpolationPrimitive<Props>
| ArrayInterpolation<Props>
| FunctionInterpolation<Props>

Expand Down
12 changes: 12 additions & 0 deletions packages/serialize/types/tests.ts
View file
Open in desktop
Expand Up @@ -37,6 +37,18 @@ serializeStyles(
{}
)
// $ExpectType SerializedStyles
serializeStyles<{ vars: { background: string; foreground: string } }>([
siriwatknp marked this conversation as resolved.
Show resolved Hide resolved
{
backgroundColor: ({ vars }) => vars.background,
color: ({ vars }) => vars.foreground,
lineHeight: ({ vars }) => 1.2,
'&:hover': {
backgroundColor: ({ vars }) => vars.foreground,
color: ({ vars }) => vars.background
}
}
])
// $ExpectType SerializedStyles
serializeStyles([testTemplateStringsArray, 5, '4px'], {}, {})

// $ExpectError
Expand Down
12 changes: 12 additions & 0 deletions packages/styled/__tests__/__snapshots__/styled.js.snap
View file
Open in desktop
Expand Up @@ -483,6 +483,18 @@ exports[`styled objects 1`] = `
</h1>
`;

exports[`styled objects with dynamic value 1`] = `
.emotion-0 {
padding: 0.5rem;
}

<h1
className="emotion-0"
>
hello world
</h1>
`;

exports[`styled objects with spread properties 1`] = `
.emotion-0 {
font-size: 20px;
Expand Down
7 changes: 7 additions & 0 deletions packages/styled/__tests__/styled.js
View file
Open in desktop
Expand Up @@ -437,6 +437,13 @@ describe('styled', () => {
expect(tree).toMatchSnapshot()
})

test('objects with dynamic value', () => {
const H1 = styled('h1')({ padding: props => props.padding || '1rem' })
const tree = renderer.create(<H1 padding="0.5rem">hello world</H1>).toJSON()

expect(tree).toMatchSnapshot()
})

test('composing components', () => {
const Button = styled.button`
color: green;
Expand Down