Emotion: Add Using with Stylelint section

[ai]

• emotion version: github

What you did:

Open github.com/tkh44/emotion

What happened:

I saw great docs, but without docs how to add linter for CSS

Suggested solution:

Something similar to styled-components docs

[tkh44]

I think we could potentially do this during compile and put it behind a lint flag. @ai we are using postcss-js internally to compile the styles, but we could lint the raw strings. I'm not sure there is a style lint for objects, although that would be a great feature.

[ai]

It is even better 😄

Using standard PostCSS parser instead of postcss-scss will be better, because you will be able to lint spaces. Is it possible to change parser?

[ai]

Maybe we can use styled-components stylelint plugin? I will check on next week.

[ai]

I tried styled-components stylelint plugin and everything works (it is compatible with Emotion as well)

[severen]

Is it compatible with object styles though? Remember, Emotion doesn't only support string literal styles.

[vhlongon]

@ai can you please show me your config? I am trying to make stylelint works with emotion, but no luck yet :|

[jhwohlgemuth]

@vhlongon

This issue might shed some light on why you cannot get it to work. It lists the config:

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

I can confirm that this config works as expected with stylelint v9.1.3 (but not v9.2.0)

I lost some time wrestling with linting css-in-js with stylelint, so I thought I would share 😅

[vhlongon]

@jhwohlgemuth dude, thanks a bunch! Works like a charm now!

[gucong3000]

Related: #686

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed in 7 days if no further activity occurs. Thank you for your contributions.

[ilias-t]

This issue issue should probably be reopened. There is currently no documentation on how to lint emotion.

[montezume]

With the latest version of stylelint it's pretty straightforward. What are you having trouble with?

I have a repo open with it setup. The .stylelintrc file is here

[nhooyr]

@montezume how does your stylelintrc work? It doesn't use the styled-components processor.

[montezume]

The styled-components processor isn't required anymore thanks to the native support for CSS in JS in stylelint.

I wrote a blog post about it if you want to check it out

What errors / problems are you having with stylelint and emotion? Are you running the latest version of stylelint?

[nhooyr]

Its currently broken when u have a babel config for some reason. There's an issue on the stylelint repo.