Way to support or ignore CSS-in-JS logic

I would like to be able to suppress errors when using CSS-in-JS logic.

Example:

export const MyButton = styled.button`
    font-size: ${({inherit}) => (inherit ? 'inherit' : tokens.fontMedium)};
`

With this ruleset:

"scale-unlimited/declaration-strict-value": "font-size"

I get the error:

Expected variable, function or keyword for "=>" of "font-size"       scale-unlimited/declaration-strict-value

Extracting to a named function works:

const getFontSize = ({inherit}) => (inherit ? 'inherit' : tokens.fontMedium)

export const MyButton = styled.button`
    font-size: ${getFontSize};
`

Would it be possible to ignore or allow any inline JS logic sections in CSS-in-JS styles? If this could be included with “ignoreFunctions: true” that would be great!

[wfortin]

I know it’s not officially supported but still works in most of the cases we need it fortunately.

[AndyOGo]

No worries. You can learn it, there are plenty of free online resources for handling ASTs. You are welcome to provide a PR.