<h2 dir="auto">Feature request</h2>
<p dir="auto">Author of Sass here <g-emoji class="g-emoji" alias="wave" fallback-src="https://github.githubassets.com/images/icons/emoji/unicode/1f44b.png">👋</g-emoji>! I'm talking with <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/markwhitfeld/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/markwhitfeld">@markwhitfeld</a> about trying to get Dart Sass's JS output running in the browser, and we're running into some hassles with Webpack in particular that I think a new feature could address.</p>
<p dir="auto"><strong>What is the expected behavior?</strong></p>
<p dir="auto">I need to meet all the following requirements:</p>
<ol dir="auto">
<li>I want to be able to distribute a single npm package with minimal duplication...</li>
<li>that works on both Node.js and the web...</li>
<li>with nothing more complicated than <code class="notranslate">npm i sass</code> and <code class="notranslate">require('sass')</code>...</li>
<li>and plays nicely with Webpack bundling on both platforms...</li>
<li>without needing any special configuration...</li>
<li>and uses some libraries that are only available on Node...</li>
<li>while gracefully degrading when those libraries aren't available on the web.</li>
</ol>
<p dir="auto">As a special bonus non-requirement, it would be <em>nice</em> if the JS file we generate can be used as-is on web pages <em>without</em> bundling.</p>
<p dir="auto"><strong>What is motivation or use case for adding/changing the behavior?</strong></p>
<p dir="auto">As far as I can tell, there's no way to meet all of the above requirements right now. If I didn't have to worry about Webpack, I'd just write</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="const chokidar = typeof window === 'undefined' ? require('chokidar') : null;"><pre class="notranslate"><span class="pl-k">const</span> <span class="pl-s1">chokidar</span> <span class="pl-c1">=</span> <span class="pl-k">typeof</span> <span class="pl-smi">window</span> <span class="pl-c1">===</span> <span class="pl-s">'undefined'</span> ? <span class="pl-en">require</span><span class="pl-kos">(</span><span class="pl-s">'chokidar'</span><span class="pl-kos">)</span> : <span class="pl-c1">null</span><span class="pl-kos">;</span></pre></div>
<p dir="auto">and be on my merry way, but that won't actually prevent webpack from bundling the dependency's code when targeting a browser so it fails requirement 4.</p>
<p dir="auto"><strong>How should this be implemented in your opinion?</strong></p>
<p dir="auto">I'm agnostic on the best way to make this work, as long as it satisfies the requirements outlined above. The simplest solution might be to recognize <code class="notranslate">typeof window === 'undefined</code>' as a magic check that can be inlined and used for constant-folding. A more explicit solution might be to provide a <code class="notranslate">__webpack_target_browser__</code> constant that explicitly indicates whether the platform is a browser.</p>
<p dir="auto"><strong>Are you willing to work on this yourself?</strong></p>
<p dir="auto">No.</p>
<p dir="auto">I see alot of prs to upgrade to es6. Some noise might be reduced if you set eslint to require let and const, then allow eslint to auto fix the errors..</p>