I am exporting a function to use as a mixin for styled components on React.
styles.ts
export const fontSize = (size: number) => `
font-size: ${(size / 16) * 100}%;
font-size: ${size / 16}rem;
`
button.tsx
import React, { FC } from 'react'
import styled from 'styled-components'
import { fontSize } from './styles'
type ButtonProps = {
onClick(): void
}
const StyledButton = styled.button`
background-color: #4f2e0e;
font-size: ${fontSize(18)};
cursor: pointer;
`
const Button: FC<ButtonProps> = (props) => (
<StyledButton>{props.children}</StyledButton>
)
export default Button
When I do, TypeScript warns:
@typescript-eslint/explicit-module-boundary-types: Missing return type on function.
I have tried to add allowExpressions: true to .eslintjs but is not working:
'@typescript-eslint/explicit-function-return-type': ['warn', { allowExpressions: true}]