-
-
Notifications
You must be signed in to change notification settings - Fork 440
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Remove stylelint-processor-styled-components in stylelint section #671
Comments
I'll be happy to work on this if no one work on it. |
Hey @LoicGoyet @koba04 In the meantime, I've already contacted @probablyup about having https://github.com/styled-components/stylelint-processor-styled-components closed or deprecated |
I would be more than happy to make a PR to update this documentation, however I actually can't figure out how you are supposed to configure stylelint with the css-in-js support in the first place. It seems to require https://github.com/stylelint/postcss-css-in-js but that is also poorly documented on how it is supposed to be configured. It's unfortunate that stylelint-processor-styled-components was archived before there were any instructions about what to use instead. Is there anyone out there actually using the new css-in-js syntax with SC that could help out with documentation? |
I am also looking everywhere to understand how to configure stylelint with styled-components. :/ |
Nope! Have more or less given up on linting styled-components given the state of documentation in this project. |
Thanks for the promt reply. What a pity, but yeah, I am about to give up too :(
|
Hi, everyone. After some research, I found a configuration that allows me to use I'm using the I just needed to follow the steps below:
yarn add -D stylelint stylelint-config-concentric-order postcss-jsx postcss-syntax
# stylelint.rc
{
"extends": ["stylelint-config-concentric-order", "stylelint-config-prettier"],
"customSyntax": "postcss-jsx"
}
# package.json
{
"scripts": {
"stylelint": "stylelint '**/styles.ts'",
"stylelint:fix": "stylelint --fix '**/styles.ts'",
}
}
yarn stylelint Enjoy ;) |
@paulobarcelos @mattdarveniza, maybe my comment above could help you two. |
@aacgn thanks for the help - but with your config there's a lot of false positives still, like this:
I haven't found a solution that works well with stylelint 14 + styled-components that actually turns on a bunch of real rules. Poor documentation all around. |
That configuration works for me: .stylelintrc.json
package.json
Hope it helps! |
@william-hotmart thanks for the config! With it +
Any idea why it might be (incorrectly) reading my TS as CSS and trying to lint it? It's rules from Shopify's plug-in I think, but they plug-in reported no errors with stylelint 13. That Typescript styled component in question looks like this (all variables exist and work): const StyledButton = styled(Button)<StyledButtonProps>`
background-color: ${({ $inverse }) =>
$inverse ? shopifyAppTheme.color.white : shopifyAppTheme.color.brandRegular};
color: ${({ $inverse }) =>
$inverse ? shopifyAppTheme.color.brandDark : shopifyAppTheme.color.white};
:hover {
background-color: ${({ $inverse }) =>
$inverse
? transparentize(0.1, shopifyAppTheme.color.white)
: `${theme.color.primary['900']}`};
}
`; |
@dgattey Sorry, but not. Now that the project which I work are increasing we start to have some problems with that config too 😞 |
Just spent 3 hours trying to understand what's going on because of those misleading docs. Please fix. |
@aacgn Are you also able to highlight the stylelint errors in tsx files in the ide (I'm using vscode) ? 🥇 |
According to those two GitHub issues
stylelint-processor-styled-components
is deprecated as it provokes bugs and stylelint now supports CSS-in-JS out of the box.I think we should update the documentation section to avoid newcomers to install it.
I could do the PR if you want to
The text was updated successfully, but these errors were encountered: