Remove stylelint-processor-styled-components in stylelint section

[LoicGoyet]

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

[koba04]

stylelint-processor-styled-components still uses the old @babel/parser and a PR to update it is not accepted a long time. https://github.com/styled-components/stylelint-processor-styled-components/pull/296 It means that we cannot use new ES syntaxes and TypeScript syntaxes with stylelint-processor-styled-components. I think this is a pit fall for styled-components users, so I hope to update the documentation.

I'll be happy to work on this if no one work on it.

[jasonwilliams]

Hey @LoicGoyet @koba04 It would be great if one of you could do a PR to change the documentation on the website! Once that's done I can help get it merged.

In the meantime, I've already contacted @probablyup about having https://github.com/styled-components/stylelint-processor-styled-components closed or deprecated

[mattdarveniza]

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?

[jasonwilliams]

@alexander-akait @chinesedfan ? ^

[paulobarcelos]

I am also looking everywhere to understand how to configure stylelint with styled-components. :/ @mattdarveniza did you manage to figure something out and are willing to share?

[mattdarveniza]

Nope! Have more or less given up on linting styled-components given the state of documentation in this project.

[paulobarcelos]

Thanks for the promt reply. What a pity, but yeah, I am about to give up too :(

[aacgn]

Hi, everyone. After some research, I found a configuration that allows me to use stylint with styled-components with the auto-fix feature.

I'm using the postcss-jsx library as my customSyntax analyzer over the stylelint-processor-styled-components and stylelint-config-styled-components.

I just needed to follow the steps below:

1. Install dependencies

yarn add -D stylelint stylelint-config-concentric-order postcss-jsx postcss-syntax 

2. Create .stylintrc file at root folder and add some configurations

# stylelint.rc

{
  "extends": ["stylelint-config-concentric-order", "stylelint-config-prettier"],
  "customSyntax": "postcss-jsx"
}

3. Add scripts to your package.json

# package.json

{ 
    "scripts": {
        "stylelint": "stylelint '**/styles.ts'",
        "stylelint:fix": "stylelint --fix '**/styles.ts'",
    }
}

4. Run the scripts

yarn stylelint 

Enjoy ;)

[aacgn]

@paulobarcelos @mattdarveniza, maybe my comment above could help you two.

[dgattey]

@aacgn thanks for the help - but with your config there's a lot of false positives still, like this:

Expected "${Math.max" to be "${math.max"  function-name-case

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.

[william-hotmart]

That configuration works for me:

.stylelintrc.json

{
  "extends": ["stylelint-config-recommended", "stylelint-config-styled-components"],
  "customSyntax": "@stylelint/postcss-css-in-js"
  ...
}

package.json

  "scripts": {
    ...
    "stylelint-check": "stylelint './src/**/*.{js,ts,tsx}'",
    "stylelint-check:fix": "stylelint './src/**/*.{js,ts,tsx}' --fix",
    ...
  },
  "devDependencies": {
     ...
     "@stylelint/postcss-css-in-js": "~0.37.2",
     "postcss": "~8.4.6",
     "postcss-syntax": "~0.36.2",
     "stylelint": "~14.2.0",
     "stylelint-config-recommended": "~6.0.0",
     "stylelint-config-styled-components": "~0.1.1",     
     ...
  }

Hope it helps!

[dgattey]

@william-hotmart thanks for the config! With it + @shopify/stylelint-plugin, stylelint does run and process my files, but I'm getting errors like:

src/components/shared/ui/button/BrandButton.tsx
 23:16  ✖  Expected "shopifyAppTheme.color.white" to be "shopifyapptheme.color.white"                  value-keyword-case
 23:46  ✖  Expected "shopifyAppTheme.color.brandRegular}" to be "shopifyapptheme.color.brandregular}"  value-keyword-case
 25:16  ✖  Expected "shopifyAppTheme.color.brandDark" to be "shopifyapptheme.color.branddark"          value-keyword-case
 25:50  ✖  Expected "shopifyAppTheme.color.white}" to be "shopifyapptheme.color.white}"                value-keyword-case
 30:31  ✖  Expected "shopifyAppTheme.color.white" to be "shopifyapptheme.color.white"                  value-keyword-case

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']}`};
  }
`;

[william-hotmart]

@dgattey Sorry, but not. Now that the project which I work are increasing we start to have some problems with that config too 😞

[krnl0138]

Just spent 3 hours trying to understand what's going on because of those misleading docs. Please fix.

[peturaron]

@aacgn Are you also able to highlight the stylelint errors in tsx files in the ide (I'm using vscode) ? 🥇