From bc4452940e800ed18fa0761644e4f4ef3e4fddf6 Mon Sep 17 00:00:00 2001
From: glromeo <CreditSuisse2014>
Date: Tue, 29 Mar 2022 01:01:46 +0100
Subject: [PATCH] unbound nonce, fixes #76

---
 README.md         | 13 +++++++++++++
 package.json      |  2 +-
 src/plugin.ts     |  6 +++---
 src/utils.ts      | 14 +++++++++++++-
 test/unit.test.ts | 20 ++++++++++++++++++++
 5 files changed, 50 insertions(+), 5 deletions(-)

diff --git a/README.md b/README.md
index 67f7e28..bbda700 100644
--- a/README.md
+++ b/README.md
@@ -136,6 +136,19 @@ in presence of Content-Security-Policy
 [(CSP)](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/style-src) 
 the `nonce` option allows to specify the nonce attribute for the dynamically generated `<style>`
 
+If the `nonce` string is a field access starting with `window`, `process` or `globalThis` it is left in the code without quotes.
+```javascript
+sassPlugin({
+  type: 'style',
+  nonce: 'window.__esbuild_nonce__'
+})
+```
+This allows to define it globally or to leave it for a subsequent build to resolve it using [esbuild define](https://esbuild.github.io/api/#define).
+```javascript
+define: {'window.__esbuild_nonce__': '"12345"'}
+```
+
+
 ### `importMapper`
 
 A function to customize/re-map the import path, both `import` statements in JavaScript/TypeScript code and `@import`
diff --git a/package.json b/package.json
index 10529fd..26e98ae 100755
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "esbuild-sass-plugin",
-  "version": "2.2.5",
+  "version": "2.2.6",
   "description": "esbuild plugin for sass/scss files supporting both css loader and css result import (lit-element)",
   "main": "lib/index.js",
   "keywords": [
diff --git a/src/plugin.ts b/src/plugin.ts
index 2083cdc..85d20af 100755
--- a/src/plugin.ts
+++ b/src/plugin.ts
@@ -1,7 +1,7 @@
 import {OnLoadResult, Plugin} from 'esbuild'
-import {dirname, resolve} from 'path'
+import {dirname} from 'path'
 import {SassPluginOptions} from './index'
-import {getContext, makeModule, modulesPaths, RELATIVE_PATH} from './utils'
+import {getContext, makeModule, modulesPaths, parseNonce} from './utils'
 import {useCache} from './cache'
 import {createRenderer} from './render'
 
@@ -31,7 +31,7 @@ export function sassPlugin(options: SassPluginOptions = {}): Plugin {
     console.log('The type array, exclude and picomatch options are no longer supported, please refer to the README for alternatives.')
   }
 
-  const nonce = options.nonce
+  const nonce = parseNonce(options.nonce)
 
   return {
     name: 'sass-plugin',
diff --git a/src/utils.ts b/src/utils.ts
index a968cae..d757f64 100755
--- a/src/utils.ts
+++ b/src/utils.ts
@@ -99,7 +99,7 @@ ${cssText.replace(/([$`\\])/g, '\\$1')}\`;
 const styleModule = (cssText:string, nonce?:string) => nonce ? `\
 const css = \`${cssText.replace(/([$`\\])/g, '\\$1')}\`;
 const style = document.createElement("style");
-style.setAttribute("nonce", "${nonce}");
+style.setAttribute("nonce", ${nonce});
 style.appendChild(document.createTextNode(css));
 document.head.appendChild(style);
 export {css};
@@ -119,6 +119,18 @@ export function makeModule(contents: string, type: Type, nonce?: string) {
   }
 }
 
+export function parseNonce(nonce: string | undefined): string | undefined {
+  if (nonce) {
+    if (nonce.startsWith("window.") || nonce.startsWith("process.") || nonce.startsWith("globalThis.")) {
+      return nonce
+    } else {
+      return JSON.stringify(nonce)
+    }
+  } else {
+    return nonce
+  }
+}
+
 export type PostcssModulesParams = Parameters<PostcssModulesPlugin>[0] & {
   basedir?: string
 };
diff --git a/test/unit.test.ts b/test/unit.test.ts
index 53f36d5..19ec27c 100644
--- a/test/unit.test.ts
+++ b/test/unit.test.ts
@@ -128,4 +128,24 @@ describe('unit tests', function () {
     expect(readTextFile('out/index.js')).to.equalIgnoreSpaces(readTextFile('snapshot.js'))
   })
 
+  it('if nonce starts with window, process or globalThis it is treated as a variable (ubound)', async function () {
+    const options = useFixture('nonce')
+
+    await esbuild.build({
+      ...options,
+      entryPoints: ['./index.js'],
+      outdir: './out',
+      bundle: true,
+      plugins: [
+        sassPlugin({
+          type: 'style',
+          nonce: 'window.__esbuild_nonce__'
+        })
+      ],
+      define: {'window.__esbuild_nonce__': '"12345"'}
+    })
+
+    expect(readTextFile('out/index.js')).to.equalIgnoreSpaces(readTextFile('snapshot.js'))
+  })
+
 })
\ No newline at end of file