Add inline CSS options (#187)

package.json

@@ -7,7 +7,7 @@
  "url": "https://github.com/transcend-io/consent-manager-ui.git"
  },
  "homepage": "https://github.com/transcend-io/consent-manager-ui",
- "version": "4.19.1",
+ "version": "4.20.0",
  "license": "MIT",
  "main": "build/ui",
  "files": [

src/config.ts

@@ -21,6 +21,7 @@ const {
  languages,
  dismissedViewState = 'Hidden',
  nonce,
+ inlineCss
 } = settings;
 
 /**
@@ -210,3 +211,6 @@ if (CSP_NONCE) {
  delete currentScriptDataset.nonce;
  }
 }
+
+export const ALLOW_INLINE_CSS = inlineCss !== 'off';
+export const EXTERNALIZE_INLINE_CSS = inlineCss === 'data:';

src/consent-manager.tsx

@@ -6,7 +6,13 @@ import type {
 import { App } from './components/App';
 import { logger } from './logger';
 import { createHTMLElement } from './utils/create-html-element';
-import { CSP_NONCE, getMergedConfig } from './config';
+import {
+ ALLOW_INLINE_CSS,
+ CSP_NONCE,
+ EXTERNALIZE_INLINE_CSS,
+ getMergedConfig,
+} from './config';
+import { CSS_RESET } from './constants';
 
 // The `transcend` API: methods which we'll create inside Preact and pass back out here via callback
 let consentManagerAPI: ConsentManagerAPI | null = null;
@@ -31,6 +37,11 @@ export const injectConsentManagerApp = async (
  consentManager.style.zIndex = mergedConfig.config.uiZIndex ?? '2147483647';
  consentManager.id = 'transcend-consent-manager';
 
+ const attachToDoc = (): void => {
+ // Append UI container to doc to activate style.sheet
+ (document.documentElement || document).append(consentManager);
+ };
+
  try {
  const shadowRoot =
  consentManager?.attachShadow?.({
@@ -46,27 +57,38 @@ export const injectConsentManagerApp = async (
  appContainer ??= createHTMLElement('div');
  shadowRoot.appendChild(appContainer);
 
- // Don't inherit global styles
- const style = createHTMLElement<HTMLStyleElement>('style');
+ if (ALLOW_INLINE_CSS) {
+ // Don't inherit global styles
+ const style = createHTMLElement<HTMLStyleElement | HTMLLinkElement>(
+ EXTERNALIZE_INLINE_CSS ? 'link' : 'style',
+ );
 
- if (CSP_NONCE) {
- style.nonce = CSP_NONCE;
- }
+  if (CSP_NONCE) {
+  style.nonce = CSP_NONCE;
+  }
 
- appContainer.appendChild(style);
+ if (EXTERNALIZE_INLINE_CSS) {
+ (style as HTMLLinkElement).rel = 'stylesheet';
+ (style as HTMLLinkElement).href = `data:text/css,${encodeURIComponent(
+ CSS_RESET,
+ )}`;
+ }
 
- // Append UI container to doc to activate style.sheet
- (document.documentElement || document).append(consentManager);
+ // activate stylesheet
+ // we want to activate AFTER setup for external and BEFORE setup for inline
+ appContainer.appendChild(style);
+ attachToDoc();
 
- if (CSP_NONCE) {
- style.nonce = CSP_NONCE;
+ if (!EXTERNALIZE_INLINE_CSS) {
+ // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+ (style as HTMLStyleElement)
+ .sheet! // 1st rule so subsequent properties are reset
+ .insertRule(CSS_RESET);
+ }
+ } else {
+ attachToDoc();
  }
 
- // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
- style
- .sheet! // 1st rule so subsequent properties are reset
- .insertRule(':host { all: initial }');
-
  // Wait for the instantiated Consent Manager API from Preact
  consentManagerAPI = await new Promise<ConsentManagerAPI>((resolve) => {
  // Render Preact app inside the shadow DOM component

src/constants.ts

@@ -1,2 +1,3 @@
 export const VERSION = process.env.VERSION as string;
 export const CONSENT_OPTIONS = { confirmed: true, prompted: true };
+export const CSS_RESET = ':host{all:initial}';