stylelint config for SCSS & StyledComponent

Question

Our repos have a mix of SCSS & newer StyledComponents and I believe having StyleLint try to manage both SCSS & *.css.js StyledComponents conflicts with rules/processors. I currently run this with lintstaged during a commit:

.lintstagedrc file:

{
  "**/*.(js|jsx|ts|tsx)": [
    "npm run lint:fix",
    "npm run prettier:write",
  ],
  "**/*.(css|less|scss)+?(.js)": [
    "npm run stylelint",
  ]
}

Let's say an SCSS file gets updated:

@import '../../../styles/variables.scss';

.account-search-list {
  color: $light-grey;
}

and here is my StyledComponent:

export const StyledData = styled.div`
  margin-bottom: 0.75rem;
`;

For example, if I try to use this stylelint config, I get an error :

{
  "processors": ["stylelint-processor-styled-components"],
  "extends": [
    "stylelint-config-sass-guidelines",
    "stylelint-config-recommended",
    "stylelint-config-styled-components"
  ],
  "plugins": ["stylelint-scss"],
  "syntax": "scss",
  "rules": {
    "scss/at-import-partial-extension": "always",
    "scss/at-import-partial-extension-blacklist": [".scss"],
    "max-nesting-depth": [3, { "ignore": "pseudo-classes", "ignoreAtRules": "media" }],
    "selector-max-compound-selectors": [4]
  }
}

This returns an error:

src/components/common/AccountSearchList/index.scss 1:1 ✖ Unexpected keyword 'import' (1:1)

Because this is an error with SCSS, let's remove the processors field for StyledComponents ‍♂️. Well that's good, the import error is gone!! But now there are StyledComponent issues:

7:3 ✖ Expected indentation of 4 spaces indentation

My ESLinter/Prettier formatter requires 2 spaces, but that's OK there's a stylelint rule for that, so I will add: indentation: 2 to the rules above, but that doesn't work either as the processor is missing and likely cannot pickup the JS rules.

So, how can I combine rules, or run certain rules for certain file types?

Thanks!

stylelint config for SCSS & StyledComponent

0 Answers