Only add space between classes if preexisting class is present (#1124)

* Only add space between classes if preexisting class is present * Adapt expected output for layout test
ampproject · Jan 11, 2021 · ba1a176 · ba1a176
1 parent 881ffbd
commit ba1a176
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 3 deletions.
diff --git a/packages/optimizer/lib/transformers/ApplyLayout.js b/packages/optimizer/lib/transformers/ApplyLayout.js
@@ -48,7 +48,8 @@ function getAttributeOrNull(element, name) {
 }
 
 function addClass(node, value) {
-  node.attribs.class = hasAttribute(node, 'class') ? node.attribs.class + ' ' + value : value;
+  const existingClass = hasAttribute(node, 'class') ? node.attribs.class.trim() : '';
+  node.attribs.class = existingClass.length > 0 ? existingClass + ' ' + value : value;
 }
 
 function apply(layout, width, height, node) {

diff --git a/.../transformers/valid/ServerSideRendering/transforms_layout_responsive/expected_output.html b/.../transformers/valid/ServerSideRendering/transforms_layout_responsive/expected_output.html
@@ -7,10 +7,10 @@
     <i-amphtml-sizer style="display:block;padding-top:33.3333%"></i-amphtml-sizer>
   </amp-img>
   <!-- Auto adds responsive attribute if height, width and sizes -->
-  <amp-ad class=" i-amphtml-layout-responsive i-amphtml-layout-size-defined" type="taboola" data-block-on-consent="_till_responded" width="300" height="250" data-publisher="..." data-mode="thumbnails-a-amp" data-placement="Mobile Below Article Thumbnails AMP" data-article="auto" data-target_type="mix" layout="responsive" i-amphtml-layout="responsive">
+  <amp-ad class="i-amphtml-layout-responsive i-amphtml-layout-size-defined" type="taboola" data-block-on-consent="_till_responded" width="300" height="250" data-publisher="..." data-mode="thumbnails-a-amp" data-placement="Mobile Below Article Thumbnails AMP" data-article="auto" data-target_type="mix" layout="responsive" i-amphtml-layout="responsive">
     <i-amphtml-sizer style="display:block;padding-top:83.3333%"></i-amphtml-sizer>
     <!-- Auto adds responsive attribute if height, width and heights -->
-    <amp-ad class=" i-amphtml-layout-responsive i-amphtml-layout-size-defined" type="taboola" data-block-on-consent="_till_responded" width="300" height="250" data-publisher="..." data-mode="thumbnails-a-amp" data-placement="Mobile Below Article Thumbnails AMP" data-article="auto" data-target_type="mix" layout="responsive" i-amphtml-layout="responsive" id="i-amp-0">
+    <amp-ad class="i-amphtml-layout-responsive i-amphtml-layout-size-defined" type="taboola" data-block-on-consent="_till_responded" width="300" height="250" data-publisher="..." data-mode="thumbnails-a-amp" data-placement="Mobile Below Article Thumbnails AMP" data-article="auto" data-target_type="mix" layout="responsive" i-amphtml-layout="responsive" id="i-amp-0">
       <i-amphtml-sizer style="display:block;padding-top:83.3333%"></i-amphtml-sizer>
     </amp-ad>
   </amp-ad>