Add renderer option: wrapperClasses

This can be used to solve CSS style conflicts.

Signed-off-by: Jack Cherng <jfcherng@gmail.com>

Author: jfcherng

README.md

@@ -92,6 +92,8 @@ $rendererOptions = [
     // internally, ops (tags) are all int type but this is not good for human reading.
     // set this to "true" to convert them into string form before outputting.
     'outputTagAsString' => true,
+    // extra HTML classes added to the DOM of the diff container
+    'wrapperClasses' => ['diff-wrapper'],
 ];
 
 // one-line simply compare two files

example/demo.php

@@ -48,6 +48,8 @@
                 // internally, ops (tags) are all int type but this is not good for human reading.
                 // set this to "true" to convert them into string form before outputting.
                 'outputTagAsString' => false,
+                // extra HTML classes added to the DOM of the diff container
+                'wrapperClasses' => ['diff-wrapper'],
             ];
 
         ?>

example/diff-table.css

@@ -3,7 +3,7 @@
  *
  * - dart-sass v1.18.0
  */
-.diff {
+.diff-wrapper.diff {
   background-color: #fff;
   border-collapse: collapse;
   border-spacing: 0;
@@ -15,88 +15,88 @@
   width: 100%;
   word-break: break-all;
 }
-.diff th {
+.diff-wrapper.diff th {
   font-weight: 700;
 }
-.diff td,
-.diff th {
+.diff-wrapper.diff td,
+.diff-wrapper.diff th {
   border-collapse: separate;
   border: none;
   padding: 1px 2px;
   background: #fff;
 }
-.diff td a,
-.diff th a {
+.diff-wrapper.diff td a,
+.diff-wrapper.diff th a {
   color: #000;
   cursor: inherit;
   pointer-events: none;
 }
-.diff thead th {
+.diff-wrapper.diff thead th {
   background: #a6a6a6;
   border-bottom: 1px solid black;
   padding: 4px;
   text-align: left;
 }
-.diff tbody.skipped {
+.diff-wrapper.diff tbody.skipped {
   border-top: 1px solid black;
 }
-.diff tbody.skipped td,
-.diff tbody.skipped th {
+.diff-wrapper.diff tbody.skipped td,
+.diff-wrapper.diff tbody.skipped th {
   display: none;
 }
-.diff tbody th {
+.diff-wrapper.diff tbody th {
   background: #cccccc;
   border-right: 1px solid black;
   text-align: right;
   vertical-align: top;
   width: 4em;
 }
-.diff tbody th.sign {
+.diff-wrapper.diff tbody th.sign {
   background: #fff;
   border-right: none;
   padding: 1px 0;
   text-align: center;
   width: 1em;
 }
-.diff tbody th.sign.del {
+.diff-wrapper.diff tbody th.sign.del {
   background: #fbe1e1;
 }
-.diff tbody th.sign.ins {
+.diff-wrapper.diff tbody th.sign.ins {
   background: #e1fbe1;
 }
-.diff.diff-html {
+.diff-wrapper.diff.diff-html {
   white-space: pre-wrap;
 }
-.diff.diff-html .change.change-eq .old,
-.diff.diff-html .change.change-eq .new {
+.diff-wrapper.diff.diff-html .change.change-eq .old,
+.diff-wrapper.diff.diff-html .change.change-eq .new {
   background: #fff;
 }
-.diff.diff-html .change .old {
+.diff-wrapper.diff.diff-html .change .old {
   background: #fbe1e1;
 }
-.diff.diff-html .change .new {
+.diff-wrapper.diff.diff-html .change .new {
   background: #e1fbe1;
 }
-.diff.diff-html .change ins,
-.diff.diff-html .change del {
+.diff-wrapper.diff.diff-html .change ins,
+.diff-wrapper.diff.diff-html .change del {
   font-weight: 700;
   text-decoration: none;
 }
-.diff.diff-html .change ins {
+.diff-wrapper.diff.diff-html .change ins {
   background: #a0f1a0;
 }
-.diff.diff-html .change del {
+.diff-wrapper.diff.diff-html .change del {
   background: #f1a0a0;
 }
-.diff.diff-html .edit-container:hover {
+.diff-wrapper.diff.diff-html .edit-container:hover {
   box-shadow: 0 0 8px 2px #888;
   position: relative;
   z-index: 5;
 }
-.diff.diff-html .edit-container.edited {
+.diff-wrapper.diff.diff-html .edit-container.edited {
   background: #e1e1fb;
 }
-.diff.diff-html .edit {
+.diff-wrapper.diff.diff-html .edit {
   display: block;
   outline: none;
 }

example/diff-table.scss

@@ -4,7 +4,7 @@
  * - dart-sass v1.18.0
  */
 
-.diff {
+.diff-wrapper.diff {
   $bg-color: #fff;
   $text-color: invert($bg-color);
 

src/Renderer/AbstractRenderer.php

@@ -49,6 +49,8 @@ abstract class AbstractRenderer implements RendererInterface
         // internally, ops (tags) are all int type but this is not good for human reading.
         // set this to "true" to convert them into string form before outputting.
         'outputTagAsString' => false,
+        // extra HTML classes added to the DOM of the diff container
+        'wrapperClasses' => ['diff-wrapper'],
     ];
 
     /**

src/Renderer/Html/Inline.php

@@ -31,7 +31,12 @@ protected function renderWoker(Differ $differ): string
             return $this->getResultForIdenticals();
         }
 
-        $html = '<table class="diff diff-html diff-inline">';
+        $wrapperClasses = \array_merge(
+            $this->options['wrapperClasses'],
+            ['diff', 'diff-html', 'diff-inline']
+        );
+
+        $html = '<table class="' . \implode(' ', $wrapperClasses) . '">';
 
         $html .= $this->renderTableHeader();
 

src/Renderer/Html/SideBySide.php

@@ -31,7 +31,12 @@ protected function renderWoker(Differ $differ): string
             return $this->getResultForIdenticals();
         }
 
-        $html = '<table class="diff diff-html diff-side-by-side">';
+        $wrapperClasses = \array_merge(
+            $this->options['wrapperClasses'],
+            ['diff', 'diff-html', 'diff-side-by-side']
+        );
+
+        $html = '<table class="' . \implode(' ', $wrapperClasses) . '">';
 
         $html .= $this->renderTableHeader();