postcss-styled-syntax
postcss-styled-syntax copied to clipboard
False positive at function-allowed-list and CssSyntaxError rule.
What minimal example or steps are needed to reproduce the bug?
This component is getting this error, i think it's because ternary operator.
this function is not supported when using styled-components with React Native - function-allowed-list
export const MonthBalance = styled.View<{ isMonthFirstEntry: boolean }>`
margin-bottom: ${({ isMonthFirstEntry }) =>
isMonthFirstEntry ? theme.space('SPACE-32') : 0};
`;
And this component is getting this error, i think it's for the same reason.
Unknown word - CssSyntaxError
export const BalanceValue = styled(Text).attrs({
size: 18,
})<{
isBalanceNegative?: boolean;
}>`
width: ${({ isBalanceNegative }) =>
isBalanceNegative
? css`
${WIDTH - 190}px
`
: css`
${WIDTH - 150}px
`};
`;
What minimal configuration is needed to reproduce the bug?
my .stylelintrc:
{
"processors": ["stylelint-processor-styled-components"],
"extends": ["stylelint-config-react-native-styled-components"],
"plugins": ["stylelint-react-native"],
"customSyntax": "postcss-styled-syntax"
}
How did you run Stylelint?
stylelint './src/**/*.ts
Which Stylelint-related dependencies are you using?
"stylelint": "^16.2.1",
"stylelint-config-react-native-styled-components": "^0.7.0",
"stylelint-processor-styled-components": "^1.10.0",
"stylelint-react-native": "^2.7.0",
"postcss-styled-syntax": "^0.6.4",
What did you expect to happen?
stylelint works without error.
What actually happened?
I'm getting this error:
this function is not supported when using styled-components with React Native (function-allowed-list) and Unknown word (CssSyntaxError)