From bc385413e671a9d17f6196e4986d2ae0e4ccddc9 Mon Sep 17 00:00:00 2001
From: Jack Reed <phillipjreed@gmail.com>
Date: Wed, 29 Apr 2020 08:03:02 -0600
Subject: [PATCH] Adds the ability to define a custom jss prefix for better
 application namespacing and removed css-ns dependency

---
 package.json           |  1 -
 src/components/App.js  | 15 ++++++++++++---
 src/config/css-ns.js   | 10 +++++-----
 src/config/settings.js |  1 +
 src/containers/App.js  |  1 +
 5 files changed, 19 insertions(+), 9 deletions(-)

diff --git a/package.json b/package.json
index 07dc95cbd..ebd3fdb19 100644
--- a/package.json
+++ b/package.json
@@ -37,7 +37,6 @@
     "@researchgate/react-intersection-observer": "^1.0.0",
     "classnames": "^2.2.6",
     "clsx": "^1.0.4",
-    "css-ns": "^1.2.2",
     "deepmerge": "^3.3.0",
     "dompurify": "^1.0.11",
     "downshift": "^3.2.10",
diff --git a/src/components/App.js b/src/components/App.js
index 1a125a4c1..2f7c67313 100644
--- a/src/components/App.js
+++ b/src/components/App.js
@@ -1,7 +1,7 @@
 import React, { Component, lazy, Suspense } from 'react';
 import PropTypes from 'prop-types';
 import {
-  ThemeProvider, StylesProvider, createMuiTheme, jssPreset,
+  ThemeProvider, StylesProvider, createMuiTheme, jssPreset, createGenerateClassName,
 } from '@material-ui/core/styles';
 import Fullscreen from 'react-full-screen';
 import { create } from 'jss';
@@ -52,9 +52,13 @@ export class App extends Component {
    */
   render() {
     const {
-      isFullscreenEnabled, setWorkspaceFullscreen, theme, translations,
+      classPrefix, isFullscreenEnabled, setWorkspaceFullscreen, theme, translations,
     } = this.props;
 
+    const generateClassName = createGenerateClassName({
+      productionPrefix: classPrefix,
+    });
+
     Object.keys(translations).forEach((lng) => {
       this.i18n.addResourceBundle(lng, 'translation', translations[lng], true, true);
     });
@@ -69,7 +73,10 @@ export class App extends Component {
             <ThemeProvider
               theme={createMuiTheme(theme)}
             >
-              <StylesProvider jss={create({ plugins: [...jssPreset().plugins, rtl()] })}>
+              <StylesProvider
+                jss={create({ plugins: [...jssPreset().plugins, rtl()] })}
+                generateClassName={generateClassName}
+              >
                 <AuthenticationSender />
                 <AccessTokenSender />
                 <Suspense
@@ -87,6 +94,7 @@ export class App extends Component {
 }
 
 App.propTypes = {
+  classPrefix: PropTypes.string,
   isFullscreenEnabled: PropTypes.bool,
   language: PropTypes.string.isRequired,
   setWorkspaceFullscreen: PropTypes.func.isRequired,
@@ -96,5 +104,6 @@ App.propTypes = {
 };
 
 App.defaultProps = {
+  classPrefix: '',
   isFullscreenEnabled: false,
 };
diff --git a/src/config/css-ns.js b/src/config/css-ns.js
index 77ad4b4c9..5e551b7ce 100644
--- a/src/config/css-ns.js
+++ b/src/config/css-ns.js
@@ -1,10 +1,10 @@
-import { createCssNs } from 'css-ns';
-
+import settings from './settings'
+import flatten from 'lodash/flatten';
 /**
  * export ns - sets up css namespacing for everything to be `mirador-`
  */
-const ns = className => createCssNs({
-  namespace: 'mirador',
-})(className);
+const ns = classNames => flatten([classNames]).map(
+  className => [settings.classPrefix, className].join('-')
+).join(' ');
 
 export default ns;
diff --git a/src/config/settings.js b/src/config/settings.js
index 814b2c4ef..13f64480c 100644
--- a/src/config/settings.js
+++ b/src/config/settings.js
@@ -214,6 +214,7 @@ export default {
   annotations: {
     filteredMotivations: ['oa:commenting', 'sc:painting', 'commenting'],
   },
+  classPrefix: 'mirador',
   displayAllAnnotations: false, // Configure if annotations to be displayed on the canvas by default when fetched
   resourceHeaders: {}, // Headers to send with IIIF Presentation API resource requests
   translations: { // Translations can be added to inject new languages or override existing labels
diff --git a/src/containers/App.js b/src/containers/App.js
index 8c11f4b23..855b83c21 100644
--- a/src/containers/App.js
+++ b/src/containers/App.js
@@ -13,6 +13,7 @@ import { App } from '../components/App';
  */
 const mapStateToProps = state => (
   {
+    classPrefix: state.config.classPrefix,
     isFullscreenEnabled: state.workspace.isFullscreenEnabled,
     language: state.config.language,
     theme: getTheme(state),
-- 
GitLab