diff --git a/docs/rules/jsx-curly-brace-presence.md b/docs/rules/jsx-curly-brace-presence.md
index 00ba0e74a1..c4cd5ae683 100644
--- a/docs/rules/jsx-curly-brace-presence.md
+++ b/docs/rules/jsx-curly-brace-presence.md
@@ -139,12 +139,18 @@ will warned and fixed to:
* If the rule is set to get rid of unnecessary curly braces(JSX expression) and there are characters that need to be escaped in its JSX form, such as quote characters, [forbidden JSX text characters](https://facebook.github.io/jsx/), escaped characters and anything that looks like HTML entity names, the code will not be warned because the fix may make the code less readable.
-The following pattern will **not** be given a warning even if `'never'` is passed.
+The following patterns will **not** be given a warning even if `'never'` is passed.
```jsx
{"Hello \u00b7 world"};
;
+/**
+ * there's no way to inject a whitespace into jsx without a container so this
+ * will always be allowed.
+ */
+{' '}
+{' '}
```
## When Not To Use It
diff --git a/lib/rules/jsx-curly-brace-presence.js b/lib/rules/jsx-curly-brace-presence.js
index 15b00be551..27ba7fd5f8 100644
--- a/lib/rules/jsx-curly-brace-presence.js
+++ b/lib/rules/jsx-curly-brace-presence.js
@@ -99,6 +99,14 @@ module.exports = {
);
}
+ function containsWhitespaceExpression(child) {
+ if (child.type === 'JSXExpressionContainer') {
+ const value = child.expression.value;
+ return value ? !(/\S/.test(value)) : false;
+ }
+ return false;
+ }
+
/**
* Report and fix an unnecessary curly brace violation on a node
* @param {ASTNode} node - The AST node with an unnecessary JSX expression
@@ -204,11 +212,27 @@ module.exports = {
return false;
}
+ if (
+ parent.children
+ && parent.children.length === 1
+ && containsWhitespaceExpression(parent.children[0])
+ ) {
+ return false;
+ }
+
return areRuleConditionsSatisfied(parentType, config, OPTION_NEVER);
}
- function shouldCheckForMissingCurly(parentType, config) {
- return areRuleConditionsSatisfied(parentType, config, OPTION_ALWAYS);
+ function shouldCheckForMissingCurly(parent, config) {
+ if (
+ parent.children
+ && parent.children.length === 1
+ && containsWhitespaceExpression(parent.children[0])
+ ) {
+ return false;
+ }
+
+ return areRuleConditionsSatisfied(parent.type, config, OPTION_ALWAYS);
}
// --------------------------------------------------------------------------
@@ -223,7 +247,7 @@ module.exports = {
},
Literal: node => {
- if (shouldCheckForMissingCurly(node.parent.type, userConfig)) {
+ if (shouldCheckForMissingCurly(node.parent, userConfig)) {
reportMissingCurly(node);
}
}
diff --git a/tests/lib/rules/jsx-curly-brace-presence.js b/tests/lib/rules/jsx-curly-brace-presence.js
index 959bf079a1..59d6563c7d 100644
--- a/tests/lib/rules/jsx-curly-brace-presence.js
+++ b/tests/lib/rules/jsx-curly-brace-presence.js
@@ -36,6 +36,32 @@ ruleTester.run('jsx-curly-brace-presence', rule, {
code: 'foo',
options: [{props: 'never'}]
},
+ /*
+ * There is no way to inject the space into JSX without an expression container
+ * so this format should always be allowed regardless of the `children` option.
+ */
+ {
+ code: '{\' \'}'
+ },
+ {
+ code: '{\' \'}'
+ },
+ {
+ code: '{\' \'}',
+ options: [{children: 'never'}]
+ },
+ {
+ code: '{\' \'}',
+ options: [{children: 'never'}]
+ },
+ {
+ code: '{\' \'}',
+ options: [{children: 'always'}]
+ },
+ {
+ code: '{\' \'}',
+ options: [{children: 'always'}]
+ },
{
code: 'foo',
options: [{props: 'always'}]