<p dir="auto">Choose one: is this a bug report or feature request?</p>

<h3 dir="auto">Input Code</h3>


<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="let code = `class Demo extends React.Component {
    constructor(props) {
        super(props);
        this.state = {};
    }
    render() {

        return &lt;div&gt;
            &lt;div id=&quot;：&quot;&gt;&lt;/div&gt;
        &lt;/div&gt;;
    }
}`"><pre class="notranslate"><span class="pl-k">let</span> <span class="pl-s1">code</span> <span class="pl-c1">=</span> <span class="pl-s">`class Demo extends React.Component {</span>
<span class="pl-s">    constructor(props) {</span>
<span class="pl-s">        super(props);</span>
<span class="pl-s">        this.state = {};</span>
<span class="pl-s">    }</span>
<span class="pl-s">    render() {</span>
<span class="pl-s"></span>
<span class="pl-s">        return &lt;div&gt;</span>
<span class="pl-s">            &lt;div id="："&gt;&lt;/div&gt;</span>
<span class="pl-s">        &lt;/div&gt;;</span>
<span class="pl-s">    }</span>
<span class="pl-s">}`</span></pre></div>
<h3 dir="auto">Babel/Babylon Configuration (.babelrc, package.json, cli command)</h3>

<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="babel.transform(code, {
  compact: false,
  comments: true,
  plugins:  [&quot;syntax-jsx&quot;, &quot;syntax-object-rest-spread&quot;, function (babel) {
     return {
        visitor: {
           JSXOpeningElement: function ({node}) {
              // do something...
           }
        }
  }]
}"><pre class="notranslate"><span class="pl-s1">babel</span><span class="pl-kos">.</span><span class="pl-c1">transform</span><span class="pl-kos">(</span><span class="pl-s1">code</span><span class="pl-kos">,</span> <span class="pl-kos">{</span>
  <span class="pl-c1">compact</span>: <span class="pl-c1">false</span><span class="pl-kos">,</span>
  <span class="pl-c1">comments</span>: <span class="pl-c1">true</span><span class="pl-kos">,</span>
  <span class="pl-c1">plugins</span>:  <span class="pl-kos">[</span><span class="pl-s">"syntax-jsx"</span><span class="pl-kos">,</span> <span class="pl-s">"syntax-object-rest-spread"</span><span class="pl-kos">,</span> <span class="pl-k">function</span> <span class="pl-kos">(</span><span class="pl-s1">babel</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
     <span class="pl-k">return</span> <span class="pl-kos">{</span>
        <span class="pl-c1">visitor</span>: <span class="pl-kos">{</span>
           <span class="pl-en">JSXOpeningElement</span>: <span class="pl-k">function</span> <span class="pl-kos">(</span><span class="pl-kos">{</span>node<span class="pl-kos">}</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
              <span class="pl-c">// do something...</span>
           <span class="pl-kos">}</span>
        <span class="pl-kos">}</span>
  <span class="pl-kos">}</span><span class="pl-kos">]</span>
<span class="pl-kos">}</span></pre></div>
<h3 dir="auto">Expected Behavior</h3>

<p dir="auto">I want to preserve double byte chars, like this</p>

<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="class Demo extends React.Component {
    constructor(props) {
        super(props);
        this.state = {};
    }
    render() {

        return &lt;div&gt;
            &lt;div id=&quot;：&quot;&gt;&lt;/div&gt;
        &lt;/div&gt;;
    }
}"><pre class="notranslate"><span class="pl-k">class</span> <span class="pl-v">Demo</span> <span class="pl-k">extends</span> <span class="pl-v">React</span><span class="pl-kos">.</span><span class="pl-c1">Component</span> <span class="pl-kos">{</span>
    <span class="pl-en">constructor</span><span class="pl-kos">(</span><span class="pl-s1">props</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
        <span class="pl-smi">super</span><span class="pl-kos">(</span><span class="pl-s1">props</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
        <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">state</span> <span class="pl-c1">=</span> <span class="pl-kos">{</span><span class="pl-kos">}</span><span class="pl-kos">;</span>
    <span class="pl-kos">}</span>
    <span class="pl-en">render</span><span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>

        <span class="pl-k">return</span> <span class="pl-c1">&lt;</span><span class="pl-ent">div</span><span class="pl-c1">&gt;</span>
            <span class="pl-c1">&lt;</span><span class="pl-ent">div</span> <span class="pl-c1">id</span><span class="pl-c1">=</span><span class="pl-s">"："</span><span class="pl-c1">&gt;</span><span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">div</span><span class="pl-c1">&gt;</span>
        <span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">div</span><span class="pl-c1">&gt;</span><span class="pl-kos">;</span>
    <span class="pl-kos">}</span>
<span class="pl-kos">}</span></pre></div>
<h3 dir="auto">Current Behavior</h3>

<p dir="auto">but babel translates my double byte chars, "：" ===&gt; "\uFF1A"</p>

<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="class Demo extends React.Component {
    constructor(props) {
        super(props);
        this.state = {};
    }
    render() {

        return &lt;div&gt;
            &lt;div id=&quot;\uFF1A&quot;&gt;&lt;/div&gt;
        &lt;/div&gt;;
    }
}"><pre class="notranslate"><span class="pl-k">class</span> <span class="pl-v">Demo</span> <span class="pl-k">extends</span> <span class="pl-v">React</span><span class="pl-kos">.</span><span class="pl-c1">Component</span> <span class="pl-kos">{</span>
    <span class="pl-en">constructor</span><span class="pl-kos">(</span><span class="pl-s1">props</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
        <span class="pl-smi">super</span><span class="pl-kos">(</span><span class="pl-s1">props</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
        <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">state</span> <span class="pl-c1">=</span> <span class="pl-kos">{</span><span class="pl-kos">}</span><span class="pl-kos">;</span>
    <span class="pl-kos">}</span>
    <span class="pl-en">render</span><span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>

        <span class="pl-k">return</span> <span class="pl-c1">&lt;</span><span class="pl-ent">div</span><span class="pl-c1">&gt;</span>
            <span class="pl-c1">&lt;</span><span class="pl-ent">div</span> <span class="pl-c1">id</span><span class="pl-c1">=</span><span class="pl-s">"\uFF1A"</span><span class="pl-c1">&gt;</span><span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">div</span><span class="pl-c1">&gt;</span>
        <span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">div</span><span class="pl-c1">&gt;</span><span class="pl-kos">;</span>
    <span class="pl-kos">}</span>
<span class="pl-kos">}</span></pre></div>
<h3 dir="auto">Possible Solution</h3>


<h3 dir="auto">Context</h3>


<h3 dir="auto">Your Environment</h3>

<table role="table">
<thead>
<tr>
<th>software</th>
<th>version(s)</th>
</tr>
</thead>
<tbody>
<tr>
<td>Babel</td>
<td>6.26.0</td>
</tr>
<tr>
<td>Babylon</td>
<td></td>
</tr>
<tr>
<td>node</td>
<td>v7.7.4</td>
</tr>
<tr>
<td>npm</td>
<td>4.1.2</td>
</tr>
<tr>
<td>Operating System</td>
<td>mac os</td>
</tr>
</tbody>
</table>
<p dir="auto">After <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="175672408" data-permission-text="Title is private" data-url="https://github.com/babel/babel/issues/4478" data-hovercard-type="pull_request" data-hovercard-url="/babel/babel/pull/4478/hovercard" href="https://github.com/babel/babel/pull/4478">#4478</a> PR I discovered that Cyrillic text inside a jsx tag transpiled to <code class="notranslate">\uXXXX</code>-style escape sequences. This leads to issues in debug and growing output bundle size. But if I have JSXExpression with StringLiteral all works as expected and text stay unescaped.</p>
<h3 dir="auto">Input Code</h3>

<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="&lt;div&gt;
  &lt;Foo&gt;Привет&lt;/Foo&gt;
  &lt;Foo&gt;{&quot;Привет&quot;}&lt;/Foo&gt;
&lt;/div&gt;"><pre class="notranslate"><span class="pl-c1">&lt;</span><span class="pl-ent">div</span><span class="pl-c1">&gt;</span>
  <span class="pl-c1">&lt;</span><span class="pl-ent">Foo</span><span class="pl-c1">&gt;</span>Привет<span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">Foo</span><span class="pl-c1">&gt;</span>
  <span class="pl-c1">&lt;</span><span class="pl-ent">Foo</span><span class="pl-c1">&gt;</span><span class="pl-kos">{</span><span class="pl-s">"Привет"</span><span class="pl-kos">}</span><span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">Foo</span><span class="pl-c1">&gt;</span>
<span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">div</span><span class="pl-c1">&gt;</span></pre></div>
<h3 dir="auto">Babel Configuration (.babelrc, package.json, cli command)</h3>

<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="{
  &quot;presets&quot;: [
    &quot;react&quot;,
    [&quot;es2015&quot;, { &quot;loose&quot;: true, &quot;modules&quot;: &quot;commonjs&quot;, &quot;spec&quot;: true }],
    &quot;es2016&quot;,
    &quot;es2017&quot;
  ]
}"><pre class="notranslate"><span class="pl-kos">{</span>
  <span class="pl-s">"presets"</span>: <span class="pl-kos">[</span>
    <span class="pl-s">"react"</span><span class="pl-kos">,</span>
    <span class="pl-kos">[</span><span class="pl-s">"es2015"</span><span class="pl-kos">,</span> <span class="pl-kos">{</span> <span class="pl-s">"loose"</span>: <span class="pl-c1">true</span><span class="pl-kos">,</span> <span class="pl-s">"modules"</span>: <span class="pl-s">"commonjs"</span><span class="pl-kos">,</span> <span class="pl-s">"spec"</span>: <span class="pl-c1">true</span> <span class="pl-kos">}</span><span class="pl-kos">]</span><span class="pl-kos">,</span>
    <span class="pl-s">"es2016"</span><span class="pl-kos">,</span>
    <span class="pl-s">"es2017"</span>
  <span class="pl-kos">]</span>
<span class="pl-kos">}</span></pre></div>
<h3 dir="auto">Expected Behavior</h3>


<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="React.createElement(
  &quot;div&quot;,
  null,
  React.createElement(
    Foo,
    null,
    &quot;Привет&quot;
  ),
  React.createElement(
    Foo,
    null,
    &quot;Привет&quot;
  )
);"><pre class="notranslate"><span class="pl-v">React</span><span class="pl-kos">.</span><span class="pl-en">createElement</span><span class="pl-kos">(</span>
  <span class="pl-s">"div"</span><span class="pl-kos">,</span>
  <span class="pl-c1">null</span><span class="pl-kos">,</span>
  <span class="pl-v">React</span><span class="pl-kos">.</span><span class="pl-en">createElement</span><span class="pl-kos">(</span>
    <span class="pl-v">Foo</span><span class="pl-kos">,</span>
    <span class="pl-c1">null</span><span class="pl-kos">,</span>
    <span class="pl-s">"Привет"</span>
  <span class="pl-kos">)</span><span class="pl-kos">,</span>
  <span class="pl-v">React</span><span class="pl-kos">.</span><span class="pl-en">createElement</span><span class="pl-kos">(</span>
    <span class="pl-v">Foo</span><span class="pl-kos">,</span>
    <span class="pl-c1">null</span><span class="pl-kos">,</span>
    <span class="pl-s">"Привет"</span>
  <span class="pl-kos">)</span>
<span class="pl-kos">)</span><span class="pl-kos">;</span></pre></div>
<h3 dir="auto">Current Behavior</h3>


<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="React.createElement(
  &quot;div&quot;,
  null,
  React.createElement(
    Foo,
    null,
    &quot;\u041F\u0440\u0438\u0432\u0435\u0442&quot;
  ),
  React.createElement(
    Foo,
    null,
    &quot;Привет&quot;
  )
);"><pre class="notranslate"><span class="pl-v">React</span><span class="pl-kos">.</span><span class="pl-en">createElement</span><span class="pl-kos">(</span>
  <span class="pl-s">"div"</span><span class="pl-kos">,</span>
  <span class="pl-c1">null</span><span class="pl-kos">,</span>
  <span class="pl-v">React</span><span class="pl-kos">.</span><span class="pl-en">createElement</span><span class="pl-kos">(</span>
    <span class="pl-v">Foo</span><span class="pl-kos">,</span>
    <span class="pl-c1">null</span><span class="pl-kos">,</span>
    <span class="pl-s">"\u041F\u0440\u0438\u0432\u0435\u0442"</span>
  <span class="pl-kos">)</span><span class="pl-kos">,</span>
  <span class="pl-v">React</span><span class="pl-kos">.</span><span class="pl-en">createElement</span><span class="pl-kos">(</span>
    <span class="pl-v">Foo</span><span class="pl-kos">,</span>
    <span class="pl-c1">null</span><span class="pl-kos">,</span>
    <span class="pl-s">"Привет"</span>
  <span class="pl-kos">)</span>
<span class="pl-kos">)</span><span class="pl-kos">;</span></pre></div>
<h3 dir="auto">Possible Solution</h3>


<p dir="auto">Add option to disable generating ASCII-safe code or fix escaping behavior.</p>
<h3 dir="auto">Your Environment</h3>

<table role="table">
<thead>
<tr>
<th>software</th>
<th>version</th>
</tr>
</thead>
<tbody>
<tr>
<td>Babel</td>
<td>6.17.0</td>
</tr>
<tr>
<td>node</td>
<td>6.9.1</td>
</tr>
<tr>
<td>npm</td>
<td>3.10.8</td>
</tr>
<tr>
<td>Operating System</td>
<td>OS X 10.12.1</td>
</tr>
</tbody>
</table>