“unexpected keyword 'import'” error

I have recently made a change to a SCSS file which contains @import "./fonts.scss"; at the top. My actual changes were further down the file as I was editing some styling. As part of the pre-commit git hook with Husky, it checks changed files.

When I commit, i get the error message:

Stylelint found some errors. Please fix them and try committing again. Unexpected keyword ‘import’

File changed and referenced in error above

public/style.scss file:

// unchanged here, just part of linting entire file
@import "./fonts.scss";
@import "./info.scss";
@import "./item.scss";

// actual changes made below:
.class-style {
  color: red;
}

.stylintrc file config:

{
  "processors": [
    "stylelint-processor-styled-components"
  ],
  "extends": [
    "stylelint-config-recommended",
    "stylelint-config-styled-components"
  ],
  rules: {
    "block-no-empty": null,
    "font-family-no-missing-generic-family-keyword": null
  }
}

lintstagedrc file:

{
  "*.scss": [
    "stylelint --syntax=scss",
    "prettier --write",
    "git add"
  ],
  "*.css.js": [
    "prettier --write",
    "git add"
  ],  
  "*.js": [
    "eslint --fix",
    "prettier --write",
    "git add"
  ]
}

I tried also installing stylelint-config-recommended-scss and stylelint-scss as recommended, but that did not fix it.

I tried to disable the stylelint-config-styled-components extends plugin, but then I get an error of “Unexpected empty-source”

I appreciate any insight.

EDIT: I should have noted that this is a mono-repo. We have a main folder with project sub folders.

root
|_ .eslintrc (base settings)
|_ .lintstagedrc
|_ .stylelintrc (base settings)
|_ .prettierrc
|__project1
    |_ .eslintrc (project specific settings)
    |_ .prettierrc
|__project2
    |_ .eslintrc (project specific settings)
    |_ .prettierrc

[JoaquimEsteves]

I’m also facing this issue.

My current solution is similar to chadlof’s, basically setup two different config and run the linting separately.

"lint:css": "stylelint src_with_scss/ --config path1 && stylelint src_with_styled/ --config path2",

Here’s a link to a more detailed explanation

This is…inelegant to say the least! But it looks like the folks that are handling the styled-components processor say that it’s basically impossible to have both.

[lucksp]

OK! I have replicated this. I think this relates to having a combo of SCSS & Styled (*.css.js) JS files being linted at the same time when processor: "stylelint-processor-styled-components" is used.

How can I break up/apart SCSS & Styled logic?