Linting .css files

[linonetwo]

Seems stylelint-processor-styled-components will cause stylelint fail in .css file

SyntaxError: Unexpected token, expected ( (1:8) at Parser.pp$5.raise (c:\Users\onetwo\Desktop\repo\itonnote\node_modules\babylon\lib\index.js:4443:13) at Parser.pp.unexpected (c:\Users\onetwo\Desktop\repo\itonnote\node_modules\babylon\lib\index.js:1755:8) at Parser.pp$3.parseExprAtom (c:\Users\onetwo

[JonWallsten]

Same here:

$ stylelint './packages/**/*.tsx'
SyntaxError: Unexpected token, expected , (155:10)
    at Parser.pp$5.raise (/Users/.../node_modules/babylon/lib/index.js:4452:13)
    at Parser.pp.unexpected (/Users/.../node_modules/babylon/lib/index.js:1761:8)
    at Parser.pp.expect (/Users/.../node_modules/babylon/lib/index.js:1749:33)
    at Parser.pp$3.parseParenAndDistinguishExpression (/Users/.../node_modules/babylon/lib/index.js:3812:12)
    at Parser.pp$3.parseExprAtom (/Users/.../node_modules/babylon/lib/index.js:3707:19)
    at Parser.parseExprAtom (/Users/.../node_modules/babylon/lib/index.js:7113:22)
    at Parser.pp$3.parseExprSubscripts (/Users/.../node_modules/babylon/lib/index.js:3492:19)
    at Parser.pp$3.parseMaybeUnary (/Users/.../node_modules/babylon/lib/index.js:3472:19)
    at Parser.pp$3.parseExprOps (/Users/.../node_modules/babylon/lib/index.js:3402:19)
    at Parser.pp$3.parseMaybeConditional (/Users/.../node_modules/babylon/lib/index.js:3379

Unfortunately no source file. So I don't know where to fix this.

[mxstbr]

@linonetwo Are you running this processor on a .css file? That probably won't work and is nothing we can support I don't think?

@JonWallsten your issue is that you're using TypeScript, but we're using Babylon for parsing which doesn't support Typescript 😢

[mxstbr]

I'll mark this as wontfix since you shouldn't run this processor when linting .css files, but maybe there's something I'm missing here!

[linonetwo]

The problem is that I didn't run stylelint by myself, I just run it via vscode's plugin, so it will run it against all file I guess.

[AntonioRedondo]

I've also came accross with this problem when linting jsx and scss files at the same time. Linting works as expected when only a kind of file is linted at once but this error arises when types are mixed up.

I think README.md should be updated to reflect that jsx/js files should be linted in a separated go than css/scss/less files. The below line appearing at the moment is confusing:

NOTE: Don't worry about passing in files that don't contain any styled-components code – we take care of that.

[emilgoldsmith]

Hmmm... I'm not quite an expert on stylelint, but I just searched a bit, and could it be true that there is no way to specify different stylelint configurations for different file types?

Because yeah, this processor as of right now only supports Javascript files.

@AntonioRedondo if it's true there is currently no way to specify different configs based on a regex, maybe you should open an issue with the Stylelint repo?

And yeah it definitely wouldn't hurt slightly updating the README to reflect that we truly only support Javascript files if that isn't clear enough, feel free to submit a PR with the clarifications you feel are needed :).

[ismay]

and could it be true that there is no way to specify different stylelint configurations for different file types?

The way I know of is to use the cli with the config flag:

stylelint "*.css" --config config-for-css.json
stylelint "*.jsx" --config config-for-jsx.json

However I think the node implementation of stylelint just looks for the standard config files.

[emilgoldsmith]

Yeah that's definitely a possibility.

But I guess that wouldn't work for for example text editor plugins.

You would need a webpack'ish implementation of

test: /\.jsx?/,
loader: [
  stylelint,
  config: { ... }
],
test: /\.css/,
loader: [
  stylelint,
  config: { ... }
]

implemented I guess, which would be a stylelint issue / PR that should be opened there.

[ismay]

Yeah. Nothing we can do about it anyway.

[ttraenkler]

Is there a way to configure stylelint differently for css and js files in the stylelint section of package json or is the only option to write a different config file and run stylelint twice?

[emilgoldsmith]

Currently Stylelint (as far as I know) doesn't allow putting in different configs for different files in an easy way, you could either get this to happen by contributing to #163 so we can get that merged, or helping get that implemented for Stylelint itself

[mribichich]

I ended up using the stylelint.config.js option to solve the problem, it solves it for the cmd and vscode:

// stylelint.config.js

const argv = require("yargs").argv;

const glob = argv["_"] && argv["_"][0];

const isJsTsxFiles = glob && /.{js,jsx,tsx}/.test(glob);

if (isJsTsxFiles) {
    module.exports = {
        extends: ["stylelint-config-standard", "stylelint-config-styled-components"],
        processors: ["stylelint-processor-styled-components"],
        plugins: ["stylelint-order"],
        rules: {
            "font-family-no-missing-generic-family-keyword": null,
            "order/properties-alphabetical-order": true,
            indentation: 4,
            "declaration-empty-line-before": null,
            "no-eol-whitespace": null
        }
    };
}

module.exports = {
    extends: ["stylelint-config-standard"],
    processors: [],
    plugins: ["stylelint-scss", "stylelint-order"],
    rules: {
        indentation: 4
    }
};

[chinesedfan]

Recently, we released v1.8.0(#267) which supports the option ignoreFiles to make the processor skip some files. Maybe it can help.