Remove stylelint-processor-styled-components in stylelint section

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

[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 

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

# stylelint.rc

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

1. Add scripts to your package.json

# package.json

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

1. Run the scripts

yarn stylelint 

Enjoy 😉

[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!