Infix operators must be spaced for flow

[smdern]

Tell us about your environment

• ESLint Version:
  v3.5.0
• Node Version:
  v6.5.0
• npm Version:
  3.10.3

What parser (default, Babel-ESLint, etc.) are you using?
babel-eslint

Please show your full configuration:

module.exports = {
  parser: 'babel-eslint',
  extends: 'airbnb',
  plugins: [
    'flowtype',
  ],
  rules: {
    semi: ['error', 'never'],
    'no-use-before-define': 'off',
    // no-duplicate-imports does not work with flow, but import/no-duplicates does
    // https://github.com/babel/eslint-plugin-babel/issues/59
    'no-duplicate-imports': 'off',
    'no-multiple-empty-lines': ['error', { max: 1 }],
    // import/prefer-default-export does not work well with flow and we have
    // modules that only have named exports and we're okay with that
    'import/prefer-default-export': 'off',
    'import/no-duplicates': 'error',
    'import/no-extraneous-dependencies': ['error', { 'devDependencies': true }],
    'flowtype/boolean-style': ['error', 'boolean'],
    'flowtype/generic-spacing': ['error', 'never'],
    'flowtype/no-weak-types': 'warn',
    'flowtype/space-before-generic-bracket': ['error', 'never'],
    'flowtype/valid-syntax': 'error',
    'flowtype/use-flow-type': 'error',
    'radix': 'off',
    'react/jsx-filename-extension': ['error', { 'extensions': ['.js'] }],
    'react/require-extension': 'off',
    // disable for now until flow type support is in
    // https://github.com/yannickcr/eslint-plugin-react/issues/235
    'react/sort-comp': 'off',
    'camelcase': ['error', { 'properties': 'always'}],
  },
  settings: {
    'import/resolver': {
      webpack: {
        config: 'webpack.config.dev.js',
      },
    },
  },
}

What did you do? Please include the actual source code causing the issue.

// @flow

import type { StyleSheetDefinition, StyleDeclaration } from 'aphrodite'
import { StyleSheet } from 'aphrodite'
import * as colors from './constants/colors'

export type ThemeName = 'orange' | 'blue' | 'green'
type Theme = {
  primary: string,
  secondary: string,
  tertiary: string,
}

export type ThemedStyleThunk<T: StyleDeclaration> = (theme: Theme) => T
export type ThemedStyleSheet<T: StyleDeclaration> = {
  blue: StyleSheetDefinition<T>,
  green: StyleSheetDefinition<T>,
  orange: StyleSheetDefinition<T>,
}

export const themes = {
  blue: {
    primary: colors.blue,
    secondary: colors.darkBlue,
    tertiary: colors.lightBlue,
  },
  green: {
    primary: colors.green,
    secondary: colors.darkGreen,
    tertiary: colors.lightGreen,
  },
  orange: {
    primary: colors.orange,
    secondary: colors.darkOrange,
    tertiary: colors.lightOrange,
  },
}

export const makeThemedStyleSheet =
  <T: StyleDeclaration>(themeStyleThunk: ThemedStyleThunk<T>): ThemedStyleSheet<T> => ({
    blue: StyleSheet.create(themeStyleThunk(themes.blue)),
    green: StyleSheet.create(themeStyleThunk(themes.green)),
    orange: StyleSheet.create(themeStyleThunk(themes.orange)),
  })

What did you expect to happen?
Not get a linting error right after export const makeThemedStyleSheet = <T: StyleDeclarate>

What actually happened? Please include the actual, raw output from ESLint.
40:3 error Infix operators must be spaced space-infix-ops

[not-an-aardvark]

I can reproduce this. My guess is that the < before <T: StyleDeclaration> is getting interpreted by the rule as a less-than sign for some reason.

[not-an-aardvark]

Reduced test case:

Config:

{
    "parserOptions": {
        "ecmaFeatures": {
            "jsx": true
        }
    },
    "rules": {
        "space-infix-ops": 2
    },
    "parser": "babel-eslint"
}

Code:

const foo = <T: StyleDeclaration>(foo): bar<T> => 5

I don't know very much about JSX, but it seems like the syntax is invalid when babel-eslint is removed -- maybe that has something to do with it? There are a few ESLint rules that have false positives with babel's parser (see eslint-plugin-babel for some examples).

[vitorbal]

The default parser doesn't understand flowtype annotations, so it looks like it throws a parsing error because it thinks that code snippet is malformed JSX.

As for babel-eslint, I think this looks related to #6723, where the solution was to check for the typeAnnotation property and do an early return if present. @nzakas do you think we should add a check for this format of type annotations in space-infix-ops? We probably need this check anyway once #7129 is implemented, as far as I can tell.

[nzakas]

Yeah, we can't really address this until #7129 is done. Then it should be easy (I think).

[not-an-aardvark]

Is this still an issue in 4.0.0-alpha now that #7129 has been fixed?

[not-an-aardvark]

Closing because there was no response.