emotion-js / emotion-js/facepaint

CSS Property Filter Throws Type Error

Open
#22 0 comments 0 reactions 0 assignees View on GitHub
Dominant language
JavaScript
Stars
594
Forks
12
PR merge metrics
No merged PRs in 30d

Description

**Type of issue**:
potential bug in type definition file

**Current behavior**:
![image](https://user-images.githubusercontent.com/1215159/74211815-8c705e80-4c5f-11ea-9255-cc6af6e339d5.png)

**Expected behavior**:
No type errors

**Solution that I've found**:
In the type definition file, if you change the `args` type (`Arg[]` to `Arg`), the type error is fixed.

Current Type Definition file:
```typescript
interface DynamicStyleFunction {
(...args: Arg[]): DynamicStyle[];
}
```

After my fix:
```typescript
interface DynamicStyleFunction {
(...args: Arg): DynamicStyle[];
}
```

**To reproduce**:
```javascript
const mq = facepaint([
'@media(max-width: 767px)',
'@media(min-width: 768px)',
])

const Background = styled.div<{ src: string }>`
${({ src }) =>
mq({
background: [null, null, `url(${src}) no-repeat`],
backgroundSize: [null, null, '100% 100%'],
filter: [null, null, 'blur(10px)'],
})
}`
```

**Environment information**:
`react` v16.12.0
`@emotion/core` v10.0.27
`@emotion/styled` v10.0.27
`facepaint` v1.2.1
`@types/facepaint` v1.2.1

Contributor guide

No contributing guide indexed for this repository

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.