unbound nonce, fixes #76

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`

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": [

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',

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
 };

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'))
+  })
+
 })