Prefix all CSS classes with hxr- (#205)

* Prefix all CSS classes with `hxr-`

Avoid collisioning with other CSS frameworks/themes/etc.

See executablebooks/sphinx-book-theme#577
Closes #180

* Update tests to use the prefix `hxr-`

* Refactor code to use CSS prefix variable

Author: humitos

hoverxref/_static/css/tooltipster.custom.css renamed to hoverxref/_static/css/tooltipster.custom.css_t

@@ -1,4 +1,4 @@
-.hoverxref {
+.{{ hoverxref_css_class_prefix }}hoverxref {
     border-bottom: 1px dotted;
     border-color: gray;
 }

hoverxref/_static/js/hoverxref.js_t

@@ -96,9 +96,9 @@ $(document).ready(function() {
     // Remove ``title=`` attribute for intersphinx nodes that have hoverxref enabled.
     // It doesn't make sense the browser shows the default tooltip (browser's built-in)
     // and immediately after that our tooltip was shown.
-    $('.hoverxref.external').each(function () { $(this).removeAttr('title') });
+    $('.{{ hoverxref_css_class_prefix }}hoverxref.external').each(function () { $(this).removeAttr('title') });
 
-    $('.hoverxref.tooltip').tooltipster({
+    $('.{{ hoverxref_css_class_prefix }}hoverxref.{{ hoverxref_css_class_prefix }}tooltip').tooltipster({
         theme: {{ hoverxref_tooltip_theme }},
         interactive: {{ 'true' if hoverxref_tooltip_interactive else 'false' }},
         maxWidth: {{ hoverxref_tooltip_maxwidth }},
@@ -235,7 +235,7 @@ $(document).ready(function() {
     };
 
     var delay = {{ hoverxref_modal_hover_delay }}, setTimeoutConst;
-    $('.hoverxref.modal').hover(function(event) {
+    $('.{{ hoverxref_css_class_prefix }}hoverxref.{{ hoverxref_css_class_prefix }}modal').hover(function(event) {
         var element = $(this);
         console.debug('Event: ' + event + ' Element: ' + element);
         event.preventDefault();

hoverxref/domains.py

@@ -14,14 +14,15 @@ class HoverXRefBaseDomain:
     )
 
     def _inject_hoverxref_data(self, env, refnode, typ):
-        classes = ['hoverxref']
+        from .extension import CSS_CLASSES, CSS_DEFAULT_CLASS
+
+        classes = [CSS_DEFAULT_CLASS]
         type_class = None
         if typ == 'hoverxreftooltip':
             type_class = 'tooltip'
-            classes.append(type_class)
         elif typ == 'hoverxrefmodal':
             type_class = 'modal'
-            classes.append(type_class)
+
         if not type_class:
             type_class = env.config.hoverxref_role_types.get(typ)
             if not type_class:
@@ -33,7 +34,9 @@ def _inject_hoverxref_data(self, env, refnode, typ):
                     default,
                     typ,
                 )
-            classes.append(type_class)
+
+        # Examples: hxr-tooltip, hxr-modal
+        classes.append(CSS_CLASSES[type_class])
 
         refnode.replace_attr('classes', classes)
         # TODO: log something else here, so we can unique identify this node

hoverxref/extension.py

@@ -19,6 +19,12 @@
 
 logger = logging.getLogger(__name__)
 
+CSS_CLASS_PREFIX = 'hxr-'
+CSS_DEFAULT_CLASS = f'{CSS_CLASS_PREFIX}hoverxref'
+CSS_CLASSES = {
+    'tooltip': f'{CSS_CLASS_PREFIX}tooltip',
+    'modal': f'{CSS_CLASS_PREFIX}modal',
+}
 
 HOVERXREF_ASSETS_FILES = [
     'js/hoverxref.js_t',  # ``_t`` tells Sphinx this is a template
@@ -27,7 +33,7 @@
 TOOLTIP_ASSETS_FILES = [
     # Tooltipster's Styles
     'js/tooltipster.bundle.min.js',
-    'css/tooltipster.custom.css',
+    'css/tooltipster.custom.css_t',
     'css/tooltipster.bundle.min.css',
 
     # Tooltipster's Themes
@@ -65,6 +71,7 @@ def copy_asset_files(app, exception):
                 # Then, add the values that the user overrides
                 context[attr] = getattr(app.config, attr)
 
+        context['hoverxref_css_class_prefix'] = CSS_CLASS_PREFIX
         context['http_hoverxref_version'] = __version__
 
         # Finally, add some non-hoverxref extra configs
@@ -73,10 +80,13 @@ def copy_asset_files(app, exception):
             context[attr] = getattr(app.config, attr)
 
         for f in ASSETS_FILES:
+            # Example: "./_static/js/hoverxref.js_t"
             path = os.path.join(os.path.dirname(__file__), '_static', f)
+            # Example: "<app.outdir>/_static/css" or "<app.outdir>/_static/js"
+            output = os.path.join(app.outdir, '_static', f.split('/')[0])
             copy_asset(
                 path,
-                os.path.join(app.outdir, '_static', f.split('.')[-1].replace('js_t', 'js')),
+                output,
                 context=context,
             )
 
@@ -264,7 +274,7 @@ def missing_reference(app, env, node, contnode):
         hoverxref_type = hoverxref_type or app.config.hoverxref_default_type
 
         classes = newnode.get('classes')
-        classes.extend(['hoverxref', hoverxref_type])
+        classes.extend([CSS_DEFAULT_CLASS, CSS_CLASSES[hoverxref_type]])
         newnode.replace_attr('classes', classes)
 
     return newnode
@@ -374,11 +384,13 @@ def setup(app):
 
     app.connect('missing-reference', missing_reference)
 
+    # Include all assets previously copied/rendered by ``copy_asset_files`` as
+    # Javascript and CSS files into the Sphinx application
     for f in ASSETS_FILES:
         if f.endswith('.js') or f.endswith('.js_t'):
             app.add_js_file(f.replace('.js_t', '.js'))
-        if f.endswith('.css'):
-            app.add_css_file(f)
+        if f.endswith('.css') or f.endswith('.css_t'):
+            app.add_css_file(f.replace('.css_t', '.css'))
 
     return {
         'version': __version__,