jsx-no-literals: HTML entities in allowedValues are ignored

[joeattardi]

Hello! I'm using the jsx-no-literals rule with some exceptions (in the allowedStrings option). In particular I want to allow the — literal. However, the rule is still flagging the usage as an error even with this set.

Consider this simple file:

<div>&mdash;</div>

And the following configuration:

{
  noStrings: true,
  allowedStrings: [
    '—',
   ],
}

This will result in an error:

  {
    ruleId: 'jsx-no-literals',
    severity: 1,
    message: 'Strings not allowed in JSX files: "—"',
    line: 2,
    column: 14,
    nodeType: 'JSXText',
    messageId: 'noStringsInJSX',
    endLine: 2,
    endColumn: 21
  }

I took a quick look at the code for this rule.

• When the JSXText check is done, node.value no longer is — but rather the actual symbol it represents (—). This causes the error
• Later when the Literal check is done, node.value is the original —. This passes the check.

So the JSXText check causes the rule to flag the error.

If I change the check, in the getValidation function, in jsx-no-literals.js to this:

      if (config.allowedStrings.has(trimIfString(node.raw)))

then node.raw is still — even for the JSXText check. This small change seems to fix the issue, but I was hesitant to submit a PR because I'm not sure what other implications using the raw vs. the value has.

For what it's worth, after this change, all the test cases for jsx-no-literals still pass.

[ljharb]

What happens if you put an actual em dash in the config?