const Container = styled.View<{ $marginBottom?: number }>(
  ({ $marginBottom }) => css`
    /* LINTS HERE */
    flex-direction: row;
    align-items: center;
    ${$marginBottom && css`
      /* DOESN'T LINT HERE */
      margin-bottom: ${$marginBottom};
    `}
  `
);

July 24, 2020 at 7:47am

Nick Ribal@elektronik

7:47am

I think that's a limitation of stylelint and there's a longstanding github issue about it. While it may not work as it is in your example, if you convert the inline conditional to a function, thereby removing the nesting, it should work. I find that also more readable. :)

Dawid Krajewski@dawid-krajewski

11:16am

@elektronik

could you please share a link to that issue? I cannot find it. Also could you please show what do you mean by converting inline conditional to a function, I'm not sure if I understand you right.

Nick Ribal@elektronik

11:31am

This is the closest thing I found: https://github.com/stylelint/stylelint/issues/4119. The issue description includes the suggested workaround.

In general, the right repo for these issues is https://github.com/styled-components/stylelint-processor-styled-components

Dawid Krajewski@dawid-krajewski

11:35am

@elektronik

thank you very much! <3