<p dir="auto">Forgive me if it is possible, but I cannot find any documentation on it.</p>
<p dir="auto">Here's what I want to do: Write a babel plugin that transcompiles <code class="notranslate">.css</code> files (but not only, in general any file other than .js) to es6 module, as so babel can track dependencies when this file is changes, and webpack can later tree shake it, and there's no inlining duplication.</p>
<blockquote>
<p dir="auto">Q: Why babel plugin and not webpack loader? A: To support server-side rendering</p>
</blockquote>
<p dir="auto">To give an example, I want to transcompile following <code class="notranslate">style.css</code>:</p>
<div class="highlight highlight-source-css notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content=".foo {
  color: red;
}"><pre class="notranslate">.<span class="pl-c1">foo</span> {
  <span class="pl-c1">color</span><span class="pl-kos">:</span> red;
}</pre></div>
<p dir="auto">to</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="export const foo = {
  color: 'red';
}"><pre class="notranslate"><span class="pl-k">export</span> <span class="pl-k">const</span> <span class="pl-s1">foo</span> <span class="pl-c1">=</span> <span class="pl-kos">{</span>
  <span class="pl-c1">color</span>: <span class="pl-s">'red'</span><span class="pl-kos">;</span>
<span class="pl-kos">}</span></pre></div>
<p dir="auto">and then somewhere else do:</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="import { foo } from 'foo.css';"><pre class="notranslate"><span class="pl-k">import</span> <span class="pl-kos">{</span> <span class="pl-s1">foo</span> <span class="pl-kos">}</span> <span class="pl-k">from</span> <span class="pl-s">'foo.css'</span><span class="pl-kos">;</span></pre></div>
<p dir="auto">I have also other use-cases for it, but all of them have following in common: <strong>I don't want to inline these files</strong> similarly to how for example <a href="https://www.npmjs.com/package/babel-plugin-inline-import" rel="nofollow">babel-plugin-inline-import</a> works. I want to transcompile file to es6 module, or to put it differently, I want babel to use totally custom syntax per file extension (such syntax would be able to convert some raw like .css or .json into babel's ast). This way I could achieve following:</p>
<ol dir="auto">
<li>The same raw file can be re-used by different .js files (with inlining I get duplication)</li>
<li>Babel can track changes in raw file, and track it as dependency of any .js files that import it (with inlining the dependency link is lost, and changing raw file doesn't reload anything)</li>
<li>Webpack can additionally tree shake this dependency, if I decide to use it</li>
</ol>
<p dir="auto">From my current understanding babel uses the same syntax  for all files (it can be extended with plugins), but you cannot change it based on imported file extension.</p>
<p dir="auto">Could you guide me how to write such plugin? How to change used syntax per-extension?</p>
<h2 dir="auto">Bug Report</h2>
<p dir="auto"><strong>Current Behavior</strong><br>
With <code class="notranslate">plugin-transform-runtime</code> causes <code class="notranslate">Object doesn't support property or method 'Symbol(Symbol.iterator)_4.d7pjr549xf3'</code> in IE 11 when using <code class="notranslate">for of</code> from <code class="notranslate">function*</code> generators. <code class="notranslate">for await</code> with <code class="notranslate">async function*</code> works fine though.</p>
<p dir="auto"><strong>Input Code</strong></p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="function* generator()
{
    yield 1;
}

for (let iterator of generator())
{
    console.log(iterator);
}"><pre class="notranslate"><span class="pl-k">function</span><span class="pl-c1">*</span> <span class="pl-s1">generator</span><span class="pl-kos">(</span><span class="pl-kos">)</span>
<span class="pl-kos">{</span>
    <span class="pl-k">yield</span> <span class="pl-c1">1</span><span class="pl-kos">;</span>
<span class="pl-kos">}</span>

<span class="pl-k">for</span> <span class="pl-kos">(</span><span class="pl-k">let</span> <span class="pl-s1">iterator</span> <span class="pl-k">of</span> <span class="pl-en">generator</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">)</span>
<span class="pl-kos">{</span>
    <span class="pl-smi">console</span><span class="pl-kos">.</span><span class="pl-en">log</span><span class="pl-kos">(</span><span class="pl-s1">iterator</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
<span class="pl-kos">}</span></pre></div>
<p dir="auto"><strong>Expected behavior/code</strong><br>
logs <code class="notranslate">1</code></p>
<p dir="auto"><strong>Babel Configuration (.babelrc, package.json, cli command)</strong></p>
<details>
 <summary>
 package.json 
</summary>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="{
  &quot;devDependencies&quot;: {
    &quot;@babel/core&quot;: &quot;^7.4.4&quot;,
    &quot;@babel/plugin-transform-runtime&quot;: &quot;^7.4.4&quot;,
    &quot;@orange-games/phaser-input&quot;: &quot;^2.0.5&quot;,
    &quot;@types/parcel-env&quot;: &quot;^0.0.0&quot;,
    &quot;parcel-bundler&quot;: &quot;^1.12.3&quot;,
    &quot;typescript&quot;: &quot;^3.3.3333&quot;
  },
  &quot;dependencies&quot;: {
    &quot;@babel/polyfill&quot;: &quot;^7.4.4&quot;,
    &quot;@babel/runtime&quot;: &quot;^7.4.4&quot;,
    &quot;phaser-ce&quot;: &quot;^2.12.0&quot;
  }
}"><pre class="notranslate"><span class="pl-kos">{</span>
  <span class="pl-s">"devDependencies"</span>: <span class="pl-kos">{</span>
    <span class="pl-s">"@babel/core"</span>: <span class="pl-s">"^7.4.4"</span><span class="pl-kos">,</span>
    <span class="pl-s">"@babel/plugin-transform-runtime"</span>: <span class="pl-s">"^7.4.4"</span><span class="pl-kos">,</span>
    <span class="pl-s">"@orange-games/phaser-input"</span>: <span class="pl-s">"^2.0.5"</span><span class="pl-kos">,</span>
    <span class="pl-s">"@types/parcel-env"</span>: <span class="pl-s">"^0.0.0"</span><span class="pl-kos">,</span>
    <span class="pl-s">"parcel-bundler"</span>: <span class="pl-s">"^1.12.3"</span><span class="pl-kos">,</span>
    <span class="pl-s">"typescript"</span>: <span class="pl-s">"^3.3.3333"</span>
  <span class="pl-kos">}</span><span class="pl-kos">,</span>
  <span class="pl-s">"dependencies"</span>: <span class="pl-kos">{</span>
    <span class="pl-s">"@babel/polyfill"</span>: <span class="pl-s">"^7.4.4"</span><span class="pl-kos">,</span>
    <span class="pl-s">"@babel/runtime"</span>: <span class="pl-s">"^7.4.4"</span><span class="pl-kos">,</span>
    <span class="pl-s">"phaser-ce"</span>: <span class="pl-s">"^2.12.0"</span>
  <span class="pl-kos">}</span>
<span class="pl-kos">}</span></pre></div>
</details>
<details>
 <summary>
.babelrc
</summary>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="{
  &quot;plugins&quot;: [
    [
      &quot;@babel/plugin-transform-runtime&quot;,
    ]
  ],
  &quot;presets&quot;: [
    [
      &quot;@babel/preset-env&quot;,
      {
        &quot;targets&quot;: {
          &quot;ie&quot;: &quot;11&quot;
        }
      }
    ]
  ]
}"><pre class="notranslate"><span class="pl-kos">{</span>
  <span class="pl-s">"plugins"</span>: <span class="pl-kos">[</span>
    <span class="pl-kos">[</span>
      <span class="pl-s">"@babel/plugin-transform-runtime"</span><span class="pl-kos">,</span>
    <span class="pl-kos">]</span>
  <span class="pl-kos">]</span><span class="pl-kos">,</span>
  <span class="pl-s">"presets"</span>: <span class="pl-kos">[</span>
    <span class="pl-kos">[</span>
      <span class="pl-s">"@babel/preset-env"</span><span class="pl-kos">,</span>
      <span class="pl-kos">{</span>
        <span class="pl-s">"targets"</span>: <span class="pl-kos">{</span>
          <span class="pl-s">"ie"</span>: <span class="pl-s">"11"</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>
</details>
<p dir="auto"><strong>Environment</strong></p>
<ul dir="auto">
<li>Babel version(s): 7.4.4</li>
<li>Node/npm version: v10.14.1</li>
<li>OS: Windows 10</li>
<li>How you are using Babel: With ParcelJS</li>
</ul>
<p dir="auto"><strong>Possible Solution</strong><br>
Remove "@babel/plugin-transform-runtime" or turn off regenerator of "@babel/plugin-transform-runtime" in <code class="notranslate">.babelrc</code>.</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="&quot;@babel/plugin-transform-runtime&quot;,
{
    &quot;regenerator&quot;: false,
}"><pre class="notranslate"><span class="pl-s">"@babel/plugin-transform-runtime"</span><span class="pl-kos">,</span>
<span class="pl-kos">{</span>
    <span class="pl-s">"regenerator"</span>: <span class="pl-c1">false</span><span class="pl-kos">,</span>
<span class="pl-kos">}</span></pre></div>