Stylelint --fix gets stuck with React.js inline styles

[RyanPWalker]

Error:

TypeError: Cannot read property 'lastIndexOf' of undefined
    at fix (/Users/blahblah/node_modules/stylelint/lib/rules/no-eol-whitespace/index.js:216:25)
    at /Users/blahblah/node_modules/stylelint/lib/rules/no-eol-whitespace/index.js:78:7
    at performRules.push.Promise.all.postcssRoots.map.postcssRoot (/Users/blahblah/node_modules/stylelint/lib/lintSource.js:247:13)
    at Array.map (<anonymous>)
    at rules.forEach.ruleName (/Users/blahblah/node_modules/stylelint/lib/lintSource.js:243:22)
    at Array.forEach (<anonymous>)
    at lintPostcssResult (/Users/blahblah/node_modules/stylelint/lib/lintSource.js:203:9)
    at stylelint._getPostcssResult.then.postcssResult (/Users/blahblah/node_modules/stylelint/lib/lintSource.js:155:18)

Node: 10.16.3
Stylelint npms:

        "stylelint": "^11.0.0",
        "stylelint-config-standard": "^19.0.0",
        "stylelint-order": "^3.1.1",

.stylelintrc

{
  "extends": "stylelint-config-standard",
  "ignoreFiles": ["node_modules/**", "**/*.json", "**/*.test.js", "**/*.html", "**/*.svg", "**/*.png", "**/*.jpg"],
  "plugins": [
    "stylelint-order"
  ],
  "rules": {
    "indentation": "tab",
    "order/properties-alphabetical-order": true
  }
}

Command run: stylelint ./src --fix

Inside the npm code under stylelint/lib/rules/no-eol-whitespace/index.js:216:25 I logged out root.raws and instead of something like { semicolon: true, after: '\n' } it would log out as

{ node:
   Node {
     type: 'ObjectExpression',
     start: 1020,
     end: 1069,
     loc:
      SourceLocation {
        start: [Position],
        end: [Position],
        filename:
         '/Users/blahblah/src/js/landingPage/BottomApply.js' },
     properties: [ [Node], [Node] ],
     leadingComments: undefined,
     innerComments: undefined,
     trailingComments: undefined },
  beforeStart:
   'import React from \'react\'; BottomApply = props => (\n    <div className="bottom-apply">\n        <h3 className="landing-header">Design Your Home Today!</h3>\n        <div className="buttons">\n            <button\n                type="button"\n                tabIndex={0}\n                onClick={() => openLink1(props)}\n                onKeyPress={() => openLink1(props)}\n                className="btn grey"\n            >\n                Apply Now\n            </button>\n            <button\n                type="button"\n                tabIndex={0}\n                onClick={openLink2}\n                onKeyPress={openLink2}\n                className="btn clear"\n                style={'
}

Looks like it got stuck on style={ so I commented out that line and it got stuck on the next file that had a variable inline style like const styledThing = {'.

Not sure if I'm missing some sort of React stylelint package, but --fix gets stuck on React inline styles.

[ntwb]

Have you looked at https://github.com/kristerkari/stylelint-react-native and https://github.com/kristerkari/stylelint-config-react-native-css-modules

I've not looked at these myself, on my to do list, they or the docs there might be of help

[vankop]

I will do fix for that

[vankop]

@RyanPWalker could you provide reproducible example (creating small repo or using stylelint demo page).
We need add tests to fix.

[RyanPWalker]

@vankop sorry for the delayed response, I've been very busy. Thank you for addressing this so quickly. I will try and set up a small repo for you later today

[RyanPWalker]

I am having trouble reproducing the issue in a new repo at home... maybe it has something to do with my company's npmrc using a different package behind the scenes. No idea which one or which version, but will continue to investigate...

[RyanPWalker]

Thanks, I can confirm that version 11.1.1 has fixed this.