False positive at function-allowed-list and CssSyntaxError rule.

[carloslibardo]

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)

[hudochenkov]

First example is parsed correctly. So it's up to Stylelint to ignore non-standard rules. Most of the rules do ignore CSS-in-JS interpolation. So it's kind of a standard procedure for Stylelint to do.

Second example is indeed a parsing issue. I'll see what I can do about it. But I think not much. css helper, I believe, is not intended to be used inside interpolations for a property value. And to be honest, I can't imaging why use css`${WIDTH - 190}px` instead of `${WIDTH - 190}px`.