Unable to lint CSS and Styled Components with processor enabled

[stramel]

Using v9.2.1 I am able to lint styled-components once again, however I am not able to lint CSS files while the processor is enabled.

[emilgoldsmith]

This was never possible, you will need to use a different Stylelint config that doesn't include our processor in order to lint CSS files

[stramel]

Dang, that makes it difficult for handling stylelint through vscode.

[emilgoldsmith]

Yeah, it sucks. If you want to there might be ways around it, if we could somehow detect whether a file is purely CSS and not JS, such as possibly look at the extension of a file, or use a library that can look at the statics of the code and check whether it parses correctly as CSS and then in that case not apply our processor to it but just pass it through to Stylelint as is. In that case it could probably work. Feel free to work on it and see if you can make it work

[brandonkal]

I would love to see this enhancement. Sometimes I just need plain CSS files in addition to styled components.

[emilgoldsmith]

If you want to try working on it feel free to ask any questions if you encounter any problems

[brandonkal]

I'm not even sure how I would begin. This is pretty complex because even if this processor could be bypassed when a CSS file is detected there is still the matter of getting stylelint to ignore the "stylelint-config-styled-components" extension. I am not sure if that is possible.

Right now I have it set up this way: most of my plain CSS is in one directory with its own .stylelintrc file.

In the package.json:

"lint:css": "stylelint 'src/**/*.{js,jsx}' && stylelint 'src/**/*.css' --config extras/.stylelintrc"

The main .stylelintrc file in the src root directory:

{
  "processors": ["stylelint-processor-styled-components"],
  "extends": [
    "stylelint-config-standard",
    "stylelint-config-prettier",
    "stylelint-config-styled-components"
  ]
}

And then inside the extras folder:

# This file is used by the stylelint CLI to lint CSS files.
# The .stylelintrc file in the project root directory is configured to lint
# CSS in JS within Styled Components
{
  "extends": [
    "stylelint-config-standard",
    "stylelint-config-prettier",
  ]
}

This works pretty well. Atom-lint will highlight CSS lint errors in the extras folder and JS files in the src directory. For all other CSS files, the package script must be run in the console.

[emilgoldsmith]

Oh that's interesting, yeah changing the rule config is probably not something you can get around without something hacky like that. Either you'd have to just let the rules we disable in the styled-components config still be disabled (they aren't generally super crucial?) or do something like the above.

[techieshark]

I like the lint script in package.json that @brandonkal shared, as a workaround to this problem. One little update folks might want, because && will not run the second command if the first fails (I'm assuming people actually want to see errors from either, but ultimately return an exit code if either fails):

"lint:css": "E=0; stylelint 'src/**/*.{js,jsx}'||E=$?; stylelint 'src/**/*.css' --config extras/.stylelintrc||E=$?; exit $E"

(Based on this from SO.)

[techieshark]

Stylelint can be used in VS Code, on both CSS and JS code, by using an npm script (similar to the above) to lint both .css and .js/.jsx files, and then setting up a VS Code task and problem matcher.

After setting up (description below), from the VS Code command palette, you'll run "run task > vscode:stylelint", and then you should see output like this:

In package.json:

"scripts": {
     "lint:css": "E=0; stylelint --config .stylelintrc-jsx.json $OUTFMT './src/**/*.{js,jsx}'||E=$?; stylelint --config .stylelintrc-css.json $OUTFMT './src/**/*.css'||E=$?; exit $E",
    "vscode:stylelint": "OUTFMT='-f compact' npm run lint:css"
}

Set up your CSS-in-JS stylelint config file (I added a -jsx.json to the default name to signify this) and another one for CSS (I appended -css.json on that one).

So .stylelintrc-jsx.json looks something like:

{
  "processors": ["stylelint-processor-styled-components"],
  "extends": [
    "stylelint-config-recommended",
    "stylelint-config-prettier",
    "stylelint-config-styled-components"
  ]
}

And .stylelintrc-css.json:

{
  "extends": [
    "stylelint-config-recommended",
    "stylelint-config-prettier"
  ]
}

Then create a Task for VS Code which calls your npm script.

In .vscode/tasks.json:

{
    // See https://go.microsoft.com/fwlink/?LinkId=733558
    // for the documentation about the tasks.json format
    "version": "2.0.0",
    "tasks": [
        {
            "type": "npm",
            "script": "vscode:stylelint",
            "problemMatcher": {
                "owner": "css",
                "fileLocation": "absolute",
                "pattern": {
                    "regexp": "^(.+):\\sline\\s(\\d+),\\scol\\s(\\d+),\\s(error|warning|info)\\s-\\s(.+)\\s\\((.+)\\)$",
                    "file": 1,
                    "line": 2,
                    "column": 3,
                    "severity": 4,
                    "message": 5,
                    "code": 6
                }
            }
        }
    ]
}

Note that this problem matcher is almost exactly the same as the built-in VS Code "$eslint-compact" matcher, and differs only in that the severity is lowercase in stylelint ("error" in stylelint vs "Error" from eslint). [If someone knows a simpler way to match, please let me know!]

That tells VS Code to match the "compact" stylelint output (-f compact, which you can see by running the task/script vscode:stylelint). An example of that output is like this:

Button.js: line 7, col 16, error - Unexpected missing generic font family (font-family-no-missing-generic-family-keyword)

An improvement on this would be making it run as a background task, perhaps with chokidar to re-run whenever any file changes. Currently you just have to run it manually, but it's still an improvement over just doing it on the command line because you can jump right to the problematic lines by clicking any of the problems shown in the VS Code Problems panel.

[jvega]

Yeah, it sucks. If you want to there might be ways around it, if we could somehow detect whether a file is purely CSS and not JS, such as possibly look at the extension of a file, or use a library that can look at the statics of the code and check whether it parses correctly as CSS and then in that case not apply our processor to it but just pass it through to Stylelint as is. In that case it could probably work. Feel free to work on it and see if you can make it work

Hi, @emilgoldsmith Do you accept a PR for that?
I need that PR gucong3000/postcss-syntax#36 gets accepted to make PR here
you can check the progress in my fork
BTW issues #163, #206 are related

[emilgoldsmith]

Yeah sure feel free to submit a PR like that

[schoenwaldnils]

Any updates on this?
It would be nice to have the ignoreFiles option in this processor 🤔
Like this:

processors: [
  {"stylelint-processor-styled-components", {
    "ignoreFiles": [
      "**/*.css",
    ]
  }}
],

[emilgoldsmith]

Not as far as I know. Feel free to implement it, shouldn't take long

[beausmith]

Thanks for the sample code solution @brandonkal!

[schoenwaldnils]

I added a PR for the ignoreFiles option #267

@emilgoldsmith I'd be happy if you could review it

[chinesedfan]

@schoenwaldnils Thank you! v1.8.0 released.

[utrumo]

Any updates on this?
It would be nice to have the ignoreFiles option in this processor
Like this:

processors: [
  {"stylelint-processor-styled-components", {
    "ignoreFiles": [
      "**/*.css",
    ]
  }}
],

You must add this to documentation.