Add noClean option for devextreme-themebuilder (#11790)

themebuilder/modules/less-template-loader.js

@@ -50,10 +50,11 @@ class LessMetadataPreCompiler {
 }
 
 class LessMetadataPostCompiler {
-    constructor(compiledMetadata, swatchSelector, colorScheme) {
+    constructor(compiledMetadata, swatchSelector, colorScheme, noClean) {
         this._metadata = compiledMetadata;
         this.swatchSelector = swatchSelector;
         this.colorScheme = colorScheme;
+        this.useCleanCss = !noClean;
     }
 
     process(css) {
@@ -81,7 +82,9 @@ class LessMetadataPostCompiler {
                 .replace(themeMarkerRegex, '$1' + this.colorScheme + '$3');
         }
 
-        css = new CleanCss(cleanCssOptions).minify(css).styles;
+        if(this.useCleanCss) {
+            css = new CleanCss(cleanCssOptions).minify(css).styles;
+        }
 
         return css.replace(metadataRegex, '');
     }
@@ -110,6 +113,7 @@ class LessTemplateLoader {
         this.swatchSelector = config.makeSwatch ? SWATCH_SELECTOR_PREFIX + config.outColorScheme : '';
         this.outColorScheme = config.outColorScheme;
         this.version = version;
+        this.noClean = config.noClean;
     }
 
     load(theme, colorScheme, metadata, modifiedItems, widgets) {
@@ -157,7 +161,7 @@ class LessTemplateLoader {
             };
 
             const preCompiler = new LessMetadataPreCompiler(metadata, this.swatchSelector, modifyVars);
-            const postCompiler = new LessMetadataPostCompiler(compiledMetadata, this.swatchSelector, this.outColorScheme);
+            const postCompiler = new LessMetadataPostCompiler(compiledMetadata, this.swatchSelector, this.outColorScheme, this.noClean);
 
             less = preCompiler.process(less);
 

themebuilder/tests/less-template-loader-spec.js

@@ -588,4 +588,52 @@ describe('LessTemplateLoader', () => {
             assert.equal(data.version, version);
         });
     });
+
+    it('clean-css works with noClean = false', () => {
+        const config = {
+            isBootstrap: false,
+            lessCompiler: lessCompiler,
+            reader: path => {
+                assert.equal(path, 'devextreme-themebuilder/data/less/bundles/dx.light.less');
+                return new Promise(resolve => {
+                    resolve('@base-bg: #fff;@base-font-family:\'default\';@base-text-color:#0f0;div { font: 14px/1 DXIcons; font-size: 20px; line-height: 20px; }');
+                });
+            }
+        };
+
+        const lessTemplateLoader = new LessTemplateLoader(config);
+        lessTemplateLoader._makeInfoHeader = emptyHeader;
+
+        const promises = [];
+
+        promises.push(lessTemplateLoader.load(
+            themeName,
+            colorScheme,
+            metadata,
+            []
+        ).then(data => {
+            assert.equal(data.css, `div {
+  font: 20px/20px DXIcons;
+}`);
+        }));
+
+        config.noClean = true;
+        const lessTemplateLoaderNoClean = new LessTemplateLoader(config);
+        lessTemplateLoaderNoClean._makeInfoHeader = emptyHeader;
+        promises.push(lessTemplateLoaderNoClean.load(
+            themeName,
+            colorScheme,
+            metadata,
+            []
+        ).then(data => {
+            assert.equal(data.css, `div {
+  font: 14px/1 DXIcons;
+  font-size: 20px;
+  line-height: 20px;
+}
+`);
+        }));
+
+        return promises;
+    });
 });