Styled-jsx: processor for stylelint

[lixiaoyan]

[giuseppeg]

I believe that you can get stylelint working if you use styled-jsx-postcss instead.

@rauchg I suppose that this is never going to happen in styled-jsx right? stylelint is based on PostCSS.

[thysultan]

@giuseppeg what about https://csstree.github.io/docs/validator.html?... or when the transformer is updated to v1.0 stylis you could register a custom linter as a plugin.

[rauchg]

It'd be cool to have support for linting, with stylis

[thysultan]

@rauchg working on v1.2 that will have better support for creating a linter plugin, will create a basic linter plugin after that is out.

[thysultan]

@rauchg This should now be possible with v1.2.0 relevant issue

[giuseppeg]

I think that this can be done as a plugin if/when #190 lands. Can we close it?

[rsternagel]

@lixiaoyan

Got it working!

On top of stylelint you need the "{at}mapbox/stylelint-processor-arbitrary-tags" processor and the "stylelint-config-css-modules" configuration (for allowing "global()"-syntax).

yarn add stylelint --dev
yarn add stylelint-config-standard --dev 
yarn add @mapbox/stylelint-processor-arbitrary-tags --dev
yarn add stylelint-config-css-modules --dev

XOR

npm i stylelint --save-dev
npm i stylelint-config-standard --save-dev
npm i @mapbox/stylelint-processor-arbitrary-tags --save-dev
npm i stylelint-config-css-modules --save-dev

.stylelintrc

{
  "extends": [
    "stylelint-config-standard",
    "stylelint-config-css-modules"
  ],
  "processors": [
    [ "@mapbox/stylelint-processor-arbitrary-tags", {
            "startTag": "\\s*<style jsx>{`",
            "endTag": "\\s*`}<\/style>"
      }
    ]
  ],
  "rules": {
    "no-empty-source": null
  }
}

Now lint code:

./node_modules/.bin/stylelint "src/**/*.js"

Of cource, this can be done nicer with a npm script...

IMO it's worth adding to the "readme.md". :)

[dmitrika]

@rauchg, @nkzawa, @giuseppegurgone

Can we use @rsternagel approach as the best one and add it to readme?
I was looking for linting support and found solution here, not in readme or wiki 🤓

[codeincontext]

@rsternagel Thank you for your example above. I get a CssSyntaxError in stylelint wherever I have an interpolated value in the styled-jsx string. eg: font-size: ${myVar};. Have you found a way to solve this?

[shallwefootball]

+1 error too

[flippidippi]

I'm getting that error also. It works fine if I don't use interpolated values though.

[giuseppeg]

Fixed by #291

I made a test plugin https://github.com/giuseppeg/styled-jsx-plugin-stylelint it is a proof of concept but you guys can start from there (contribute and make it better)