menu
announcement

Spectrum is now read-only. Learn more about the decision in our official announcement.

styled-components

Visual primitives for the component age. Use the best bits of ES6 and CSS to style your apps without stress!

Channels
Team

Is it possible to force Stylelint to lint conditional blocks of styles?

July 23, 2020 at 3:03pm

Is it possible to force Stylelint to lint conditional blocks of styles?

July 23, 2020 at 3:03pm (Edited 2 years ago)
An example:
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
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. :)
like-fill
1
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.
This is the closest thing I found: https://github.com/stylelint/stylelint/issues/4119. The issue description includes the suggested workaround.
like-fill
1
thank you very much! <3
like-fill
1