title: How can I add some custom polyfill in my gatsby application?
body: <p>So, I want to add polyfill for CSS variables in my gatsby application and I got <a href="https://codepen.io/aaronbarker/pen/MeaRmL?__cf_chl_jschl_tk__=ada3f4dda337d1666d885d75668e8e9097fccfaf-1592569884-0-Abr6sX7EzmDn7FNUhaVLicjhee_UuK2IdBXzlO9N74q13cvxMjRAUV2-j-NZ1QlEAZeGY9Mor78gSn6O8ZdHe9nxPv_XCZUPZF-nRWH2JXodQDTJ0JElmjcNUe31REHn50CSmiQG6V0VZdlcuCWjDp0E3TUK2b0HZTu8AFBClprL3BS2K6637bK83TilXxnh47eIP4QNKXjdjYlEVhftu7bjZjjHW1wTLSd2eY5VklNfR3q6W9aOdYmfx_0naQAxoQa7JeM8jIPhqq9GWy5v-gziceNsuo6DGccGKGHIUd3JLtJMmavFnfnA42YlKGw2ZzF5bO4W-dG8sy2DTdB2kqfRRF3AVmHO3SCl091dzC6y" rel="nofollow noreferrer">this</a>. So, how can I now add this file to the project as polyfill.</p>
  
  <p>PS: Adding HTML for polyfill just beacasue its not letting me post the codepen link without code.</p>
  
  <pre><code>  &lt;h1&gt;CSS Variables Polyfill&lt;/h1&gt;
    &lt;p&gt;This is now managed (and available for PRs) at &lt;a href="https://github.com/aaronbarker/css-variables-polyfill"&gt;https://github.com/aaronbarker/css-variables-polyfill&lt;/a&gt;.&lt;/p&gt;
    &lt;p&gt;
      This is an attempt at a very basic &lt;a href="https://drafts.csswg.org/css-variables/"&gt;CSS variables (custom properties)&lt;/a&gt; polyfil. In reality this is more of a &lt;em&gt;partial&lt;/em&gt; polyfill as it will not cover variables inside of variables, DOM scoping or anything else "fancy". Just taking variables declared anywhere in the CSS and
      then re-parsing the CSS for var() statements and replacing them in browsers that don't natively support CSS variables.
    &lt;/p&gt;
    &lt;p&gt;According to &lt;a href="http://caniuse.com/#feat=css-variables"&gt;caniuse.com&lt;/a&gt;, of current browsers only IE, Edge and Opera Mini do not support CSS variables. This polyfil appears to work on all three really well. I don't see why this wouldn't work on older browsers as well, but I haven't been able to test it on them yet.&lt;/p&gt;
  
    &lt;p&gt;As far as we can tell your browser &lt;span class="supports"&gt;does &lt;span class="no"&gt;not&lt;/span&gt; support&lt;/span&gt; native CSS variables. &lt;span class="showforpolyfill"&gt;That means if you see green tests results below, it is thanks to the polyfill :).&lt;/span&gt; &lt;span class="hideforpolyfill"&gt;All the green test results below are actually native CSS Variable support.  Good job using a good browser :)&lt;/span&gt;&lt;/p&gt;
  
    &lt;h3&gt;Does this work on externally CSS files?&lt;/h3&gt;
    &lt;p&gt;Yes!&lt;/p&gt;
    &lt;h3&gt;Even ones loaded from another domain?&lt;/h3&gt;
    &lt;p&gt;To go across domain, CSS needs to be served up with &lt;code&gt;Access-Control-Allow-Origin:*&lt;/code&gt; headers.&lt;/p&gt;
  
  &lt;/div&gt;
  &lt;a href="#d" class="hide-docs"&gt;Toggle documentation&lt;/a&gt; (for Opera Mini vs Codepen issue)
  &lt;style&gt;
    :root {
      --newcolor: #0f0;
    }
  
    .inlineoverlink {
      color: var(--success2);
    }
  &lt;/style&gt;
  &lt;h2&gt;Tests&lt;/h2&gt;
  &lt;p&gt;On mosts tests (unless otherwise noted) success will be green text. We start with a &lt;code&gt;color:red;&lt;/code&gt; and then override it with a &lt;code&gt;color:var(--success);&lt;/code&gt; (or similar) which is green.&lt;/p&gt;
  &lt;ul&gt;
    &lt;li&gt;&lt;span class="samename"&gt;declare same variable over and over&lt;/span&gt;&lt;/li&gt;
    &lt;li&gt;&lt;span class="demo1"&gt;no whitespace on var() calls&lt;/span&gt;&lt;/li&gt;
    &lt;li&gt;&lt;span class="demo2"&gt;whitespace on var() calls&lt;/span&gt;&lt;/li&gt;
    &lt;li&gt;&lt;span class="demo3"&gt;Multiple variables in same call. orange means first var worked, green var worked&lt;/span&gt;&lt;/li&gt;
    &lt;li&gt;&lt;span class="inlineoverlink"&gt;orange if link won, green if style after link won&lt;/span&gt;&lt;/li&gt;
    &lt;li&gt;&lt;span class="lower"&gt;--foo: lowercase foo&lt;/span&gt;&lt;/li&gt;
    &lt;li&gt;&lt;span class="upper"&gt;--FOO: uppercase FOO&lt;/span&gt;&lt;/li&gt;
    &lt;li&gt;&lt;span class="fallback"&gt;uses fallback &lt;code&gt;--var(--wrongname, green)&lt;/code&gt;&lt;/span&gt;&lt;/li&gt;
    &lt;li&gt;&lt;span class="demo-import"&gt;css declared in an &lt;code&gt;@import&lt;/code&gt;&lt;/span&gt; - not polyfilled yet. &lt;a href="https://gist.github.com/stramel/91d05253f801f771da38b3bc7d3c765f#gistcomment-2258818"&gt;Identfied with a suggested fix&lt;/a&gt;, but will require a bit of a re-write (to use document.styleSheets), so haven't done it yet.&lt;/li&gt;
  &lt;/ul&gt;
  
  
  &lt;h2&gt;Tests on external, cross-domain file&lt;/h2&gt;
  &lt;div class="documentation"&gt;
    &lt;p&gt;&lt;strong&gt;Edge&lt;/strong&gt; appears to be working well on Edge 13. Edge 12 was having some problems.&lt;/p&gt;
    &lt;p&gt;&lt;strong&gt;Opera mini&lt;/strong&gt; seems to work well too. This demo fails because not all the page is displayed, but I think that is a codepen issue, not a polyfill issue.  When the upper documentation is removed, all tests display well.&lt;/p&gt;
    &lt;p&gt;&lt;strong&gt;IE 11&lt;/strong&gt; seems to do fine.&lt;/p&gt;
  &lt;/div&gt;
  
  &lt;ul&gt;
    &lt;li&gt;&lt;span class="demo4"&gt;Gets stuff from external .css file. Should start red and change to green on LINK load. border proves the CSS loaded, missing colors means script didn't get parsed and reinserted&lt;/span&gt;&lt;/li&gt;
    &lt;li&gt;&lt;span class="externalcolor"&gt;--externalcolor: should start red and change to green on LINK load&lt;/span&gt;&lt;/li&gt;
    &lt;li&gt;&lt;span class="externalfallback"&gt;uses fallback. should be green&lt;/span&gt;&lt;/li&gt;
  &lt;/ul&gt;
  
  &lt;p&gt;Another set of text under the test for Opera Mini testing.&lt;/p  &gt;
  </code></pre>