How to Use?

[khrome83]

I have everything setup according to the readme.md

{
  "presets": [
    "es2015",
    "react",
    [
      "next/babel",
      {
        "styled-jsx": {
          "plugins": [
            "styled-jsx-plugin-postcss",
            "styled-jsx-plugin-stylelint"
          ]
        }
      }
    ]
  ]
}

I am not seeing any errors with the plugin being added. I am not seeing any error output when i "break" the css.

I have tried creating non existing classes, adding extra lines, playing with selector definitions, creating fake properties, etc.

Any advice?

Also is there any way to run this via CLI / NPM? I want to lint as part of a CI without running npm run dev

[Darep]

Seems like you also need to create a .stylelintrc file in your project next to the .babelrc file. After that you should get linting in the console :)

[VinceBT]

@khrome83 I'm also interested in how you could run stylelint via CLI with the plugin enabled, did you eventually find out ?

[khrome83]

Nope. We did not figure it out. Thanks,

…

-- Zane Milakovic InsideRx.com m: 410.618.7727

On Feb 8, 2019, 10:21 AM -0600, VinceBT ***@***.***>, wrote: @khrome83 I'm also interested in how you could run stylelint via CLI with the plugin enabled, did you eventually find out ? — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub, or mute the thread.

[darbymanning]

Ditto to the above. I have a .stylelintrc file as @Darep mentioned, but it doesn't report any linting issues in within Styled JSX markup. Compared with creating a .css file, where it does report the errors in my IDE as expected.

Does anyone have an example project that can be shared where this is setup and working as expected?

[darbymanning]

I did some further troubleshooting on this. Managed to get it executing - but found it was hanging during build (for context, I am using Next.js). After some digging, I think it's a problem with the loopWhile function in linter.js (probably never resolves). I stripped this out, leaving the file contents as this:

const stylelint = require('stylelint')
const postcss = require('postcss')
const reporter = require('postcss-reporter')

module.exports = function linter(css, options) {
  postcss()
    .use(stylelint(options))
    .use(reporter())
    .process(css, { from: options.codeFilename }).then()
}

This now reports issues as expected, although I do seem to see the warnings appear twice so something's up there... at least it works. I'm not too sure what the purpose of the loop is...

In terms of getting this to work through the CLI, it's not really possible from what I can tell at the moment, as the actual CSS is provided to this plugin by styled-jsx. There'd need be some other way of extracting that from the JS (I guess reusing whatever method styled-jsx has to resolve them), to then parse. For me personally having this work via the CLI is a must-have, as I need to be able to run linting in CI for my projects.

@giuseppeg any thoughts on all of this?