pass custom stream css url through to html (#3039)

* pass custom stream css url through to html

* rename streamcssURL to customCSSURL

* only enable custom css query on stream route

* Update src/core/server/app/router/client.ts

Co-authored-by: Wyatt Johnson <wyattjoh@gmail.com>

* simplify template for client html

Co-authored-by: Wyatt Johnson <wyattjoh@gmail.com>

src/core/client/embed/Coral.ts

@@ -18,6 +18,7 @@ export interface Config {
   enableDeprecatedEvents?: boolean;
   /** Allow setting className of body tag inside iframe */
   bodyClassName?: string;
+  customCSSURL?: string;
 }
 
 export function createStreamEmbed(config: Config): StreamEmbed {
@@ -41,5 +42,6 @@ export function createStreamEmbed(config: Config): StreamEmbed {
     accessToken: config.accessToken,
     bodyClassName: config.bodyClassName,
     enableDeprecatedEvents: config.enableDeprecatedEvents,
+    customCSSURL: config.customCSSURL,
   });
 }

src/core/client/embed/StreamEmbed.ts

@@ -35,6 +35,7 @@ export interface StreamEmbedConfig {
   accessToken?: string;
   bodyClassName?: string;
   enableDeprecatedEvents?: boolean;
+  customCSSURL?: string;
 }
 
 export class StreamEmbed {
@@ -154,6 +155,7 @@ export class StreamEmbed {
       storyID: this.config.storyID,
       storyURL: this.config.storyURL,
       commentID: this.config.commentID,
+      customCSSURL: this.config.customCSSURL,
     });
 
     const url = `${ensureNoEndSlash(this.config.rootURL)}${urls.embed.stream}${

src/core/server/app/router/client.ts

@@ -54,6 +54,11 @@ export interface ClientTargetHandlerOptions {
    * available on the Tenant.
    */
   enableCustomCSS?: boolean;
+  /**
+   * enableCustomCSSQuery will insert the custom CSS into the template if it is
+   * passed through in a query string
+   */
+  enableCustomCSSQuery?: boolean;
 
   /**
    * cacheDuration is the cache duration that a given request should be cached for.
@@ -100,6 +105,7 @@ const clientHandler = ({
   staticURI,
   entrypoint,
   enableCustomCSS,
+  enableCustomCSSQuery,
   defaultLocale,
 }: ClientTargetHandlerOptions): RequestHandler => (req, res, next) => {
   // Provide configuration to the frontend in the HTML.
@@ -120,6 +126,7 @@ const clientHandler = ({
     enableCustomCSS,
     locale,
     config,
+    customCSSURL: enableCustomCSSQuery ? req.query.customCSSURL : null,
   });
 };
 
@@ -162,6 +169,7 @@ export function mountClientRoutes(
     createClientTargetRouter({
       ...options,
       enableCustomCSS: true,
+      enableCustomCSSQuery: true,
       entrypoint: entrypoints.get("stream"),
     })
   );

src/core/server/app/views/client.html

@@ -13,6 +13,9 @@
   {% if enableCustomCSS and tenant and tenant.customCSSURL %}
     {{ macros.preload(tenant.customCSSURL, "style") }}
   {% endif %}
+  {% if customCSSURL %}
+    {{ macros.preload(customCSSURL, "style") }}
+  {% endif %}
   {% if analytics and analytics.key and analytics.url and analytics.sdk %}
     {# If analytics is enabled and available, configure the rudderstack analytics to load #}
     <script type="text/javascript">