Adds the ability to define a custom jss prefix for better application...

Adds the ability to define a custom jss prefix for better application namespacing and removed css-ns dependency

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

src/components/App.js

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

src/config/css-ns.js

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

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

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