Fix T1206534 - ThemeBuilder - fontfamily field incorrectly wraps inpu… (

#26406)

packages/devextreme-themebuilder/src/modules/parse-value.ts

@@ -38,11 +38,21 @@ export const parseString = (str: string): sass.Value => {
   let result: sass.Value;
 
   try {
-    sass.compileString(`$_: ___(${str});`, {
+    sass.compileString(`$_: ___([${str}]);`, {
       functions: {
-        '___($value)': (args) => {
-          // eslint-disable-next-line prefer-destructuring
-          result = args[0];
+        '___($value)': ([listValue]) => {
+          if (listValue.asList.size > 1) {
+            result = new sass.SassList(
+                listValue.asList,
+                {
+                  brackets: false,
+                  separator: listValue.separator,
+                }
+            );
+          } else {
+            result = listValue.get(0);
+          }
+
           return result;
         },
       },

packages/devextreme-themebuilder/tests/data/compilation-results/no-changes-css.ts

@@ -1,5 +1,5 @@
 export default `.dx-accordion {
-  background-color: "Helvetica Neue","Segoe UI",helvetica,verdana,sans-serif;
+  font-family: "Helvetica Neue","Segoe UI",helvetica,verdana,sans-serif;
   color: #337ab7;
   background-image: url(icons/icons.woff2);
 }

packages/devextreme-themebuilder/tests/data/scss/widgets/generic/accordion/_index.scss

@@ -9,7 +9,7 @@
 $font-file: "icons";
 
 .dx-accordion {
-  background-color: $base-font-family;
+  font-family: $base-font-family;
   color: $accordion-title-color;
   background-image: url(icons/#{$font-file}.woff2);
 

packages/devextreme-themebuilder/tests/modules/compile-manager.test.ts

@@ -51,7 +51,7 @@ describe('Compile manager - integration test on test sass', () => {
       outColorScheme: 'test-theme',
     }).then((result) => {
       expect(result.css).toBe(`.dx-swatch-test-theme .dx-accordion {
-  background-color: "Helvetica Neue","Segoe UI",helvetica,verdana,sans-serif;
+  font-family: "Helvetica Neue","Segoe UI",helvetica,verdana,sans-serif;
   color: #337ab7;
   background-image: url(icons/icons.woff2);
 }
@@ -69,7 +69,7 @@ describe('Compile manager - integration test on test sass', () => {
       assetsBasePath: 'base-path',
     }).then((result) => {
       expect(result.css).toBe(`.dx-accordion {
-  background-color: "Helvetica Neue","Segoe UI",helvetica,verdana,sans-serif;
+  font-family: "Helvetica Neue","Segoe UI",helvetica,verdana,sans-serif;
   color: #337ab7;
   background-image: url(base-path/icons/icons.woff2);
 }
@@ -102,7 +102,7 @@ describe('Compile manager - integration test on test sass', () => {
       data: '@brand-primary: red;',
     }).then((result) => {
       expect(result.css).toBe(`.dx-accordion {
-  background-color: "Helvetica Neue","Segoe UI",helvetica,verdana,sans-serif;
+  font-family: "Helvetica Neue","Segoe UI",helvetica,verdana,sans-serif;
   color: red;
   background-image: url(icons/icons.woff2);
 }
@@ -128,7 +128,7 @@ describe('Compile manager - integration test on test sass', () => {
       data: '$primary: red;$font-family-sans-serif: sans-serif;',
     }).then((result) => {
       expect(result.css).toBe(`.dx-accordion {
-  background-color: sans-serif;
+  font-family: sans-serif;
   color: red;
   background-image: url(icons/icons.woff2);
 }
@@ -152,7 +152,7 @@ describe('Compile manager - integration test on test sass', () => {
       noClean: true,
     }).then((result) => {
       expect(result.css).toBe(`.dx-accordion {
-  background-color: "Helvetica Neue", "Segoe UI", helvetica, verdana, sans-serif;
+  font-family: "Helvetica Neue", "Segoe UI", helvetica, verdana, sans-serif;
   color: #337ab7;
   background-image: url(icons/icons.woff2);
 }

packages/devextreme-themebuilder/tests/modules/compiler.test.ts

@@ -17,50 +17,73 @@ const defaultIndexFileContent = fs.readFileSync(indexFileName, 'utf8');
 const includePaths = [path.join(dataPath, 'scss', 'widgets', 'generic'), path.join(dataPath, 'scss', 'bundles')];
 const file = path.join(dataPath, 'scss', 'bundles', 'dx.light.scss');
 
+const expectedCss = ({
+                       fontFamily = '"Helvetica Neue", "Segoe UI", helvetica, verdana, sans-serif',
+                       color = '#337ab7',
+                       bgColor = 'transparent'
+} = {}) => `.dx-accordion {
+  font-family: ${fontFamily};
+  color: ${color};
+  background-image: url(icons/icons.woff2);
+}
+.dx-accordion .from-base {
+  background-color: ${bgColor};
+  color: ${color};
+}`
+
 describe('compile', () => {
   test('Compile with empty modifications (check that items can be undefined)', async () => {
     const compiler = new Compiler();
     compiler.indexFileContent = defaultIndexFileContent;
-    return compiler.compile(file, null, {
+    return compiler.compile(file, [], {
       loadPaths: [...includePaths],
     }).then((data) => {
       // compiled css
-      expect(data.result.css.toString()).toBe(`.dx-accordion {
-  background-color: "Helvetica Neue", "Segoe UI", helvetica, verdana, sans-serif;
-  color: #337ab7;
-  background-image: url(icons/icons.woff2);
-}
-.dx-accordion .from-base {
-  background-color: transparent;
-  color: #337ab7;
-}`);
+      expect(data.result.css.toString()).toBe(expectedCss());
       // collected variables
       expect(data.changedVariables).toEqual(noModificationsMeta);
     });
   });
 
-  test('Compile with one base and one accordion items modified', async () => {
+  test('Compile with base and one accordion items modified (wrong value)', async () => {
     const compiler = new Compiler();
     compiler.indexFileContent = defaultIndexFileContent;
     return compiler.compile(file, [
+      { key: '$base-font-family', value: '' },
+    ], {
+      loadPaths: [...includePaths],
+    }).then((data) => {
+      // compiled css
+      expect(data.result.css.toString()).toBe(expectedCss({ fontFamily: '""' }));
+      // collected variables
+      expect(data.changedVariables).toEqual({
+        ...noModificationsMeta,
+        '$base-font-family': '""',
+      });
+    });
+  });
+
+  test('Compile with base and one accordion items modified', async () => {
+    const compiler = new Compiler();
+    compiler.indexFileContent = defaultIndexFileContent;
+    return compiler.compile(file, [
+      { key: '$base-font-family', value: '"Segoe UI", helvetica, verdana, sans-serif' },
       { key: '$base-accent', value: 'red' },
       { key: '$accordion-item-title-opened-bg', value: 'green' },
     ], {
       loadPaths: [...includePaths],
     }).then((data) => {
       // compiled css
-      expect(data.result.css.toString()).toBe(`.dx-accordion {
-  background-color: "Helvetica Neue", "Segoe UI", helvetica, verdana, sans-serif;
-  color: red;
-  background-image: url(icons/icons.woff2);
-}
-.dx-accordion .from-base {
-  background-color: green;
-  color: red;
-}`);
+      expect(data.result.css.toString()).toBe(expectedCss(
+          {
+            fontFamily: '"Segoe UI", helvetica, verdana, sans-serif',
+            color: 'red',
+            bgColor: 'green'
+          }
+      ));
       // collected variables
       expect(data.changedVariables).toEqual({
-        '$base-font-family': '"Helvetica Neue", "Segoe UI", helvetica, verdana, sans-serif',
+        '$base-font-family': '"Segoe UI", helvetica, verdana, sans-serif',
         '$base-accent': '#ff0000',
         '$accordion-title-color': '#ff0000',
         '$accordion-item-title-opened-bg': '#008000',
@@ -94,7 +117,7 @@ describe('compile', () => {
     ).then((data) => {
       // compiled css
       expect(data.result.css.toString()).toBe(
-        '.dx-accordion{background-color:'
+        '.dx-accordion{font-family:'
         + '"Helvetica Neue","Segoe UI",helvetica,verdana,sans-serif;'
         + 'color:#337ab7;background-image:url(icons/icons.woff2)}.dx-accordion '
         + '.from-base{background-color:transparent;color:#337ab7}.extra-class{color:red}',