chore: migrate to latest sass-embedded

apps/demos/.stylelintrc.json

@@ -16,6 +16,7 @@
         "shorthand-property-no-redundant-values": [ true, { "severity": "warning" }],
         "declaration-block-no-redundant-longhand-properties": [ true, { "severity": "warning" }],
         "media-feature-range-notation": null,
-        "selector-not-notation": null
+        "selector-not-notation": null,
+        "color-function-alias-notation": null
     }
 }

apps/demos/Demos/Scheduler/CellTemplates/Angular/app/app.component.css

@@ -1,3 +1,4 @@
+/* stylelint-disable-next-line at-rule-no-vendor-prefix, at-rule-prelude-no-invalid */
 @-moz-document url-prefix() {
   .dx-scheduler-work-space-month .dx-scheduler-date-table-cell {
     position: relative;

apps/demos/Demos/Scheduler/CellTemplates/React/styles.css

@@ -1,3 +1,4 @@
+/* stylelint-disable-next-line at-rule-no-vendor-prefix, at-rule-prelude-no-invalid */
 @-moz-document url-prefix() {
   .dx-scheduler-work-space-month .dx-scheduler-date-table-cell {
     position: relative;

apps/demos/Demos/Scheduler/CellTemplates/ReactJs/styles.css

@@ -1,3 +1,4 @@
+/* stylelint-disable-next-line at-rule-no-vendor-prefix, at-rule-prelude-no-invalid */
 @-moz-document url-prefix() {
   .dx-scheduler-work-space-month .dx-scheduler-date-table-cell {
     position: relative;

apps/demos/Demos/Scheduler/CellTemplates/Vue/styles.css

@@ -1,3 +1,4 @@
+/* stylelint-disable-next-line at-rule-no-vendor-prefix, at-rule-prelude-no-invalid */
 @-moz-document url-prefix() {
   .dx-scheduler-work-space-month .dx-scheduler-date-table-cell {
     position: relative;

apps/demos/Demos/Scheduler/CellTemplates/jQuery/styles.css

@@ -1,3 +1,4 @@
+/* stylelint-disable-next-line at-rule-no-vendor-prefix, at-rule-prelude-no-invalid */
 @-moz-document url-prefix() {
   .dx-scheduler-work-space-month .dx-scheduler-date-table-cell {
     position: relative;

apps/demos/package.json

@@ -145,9 +145,9 @@
         "rollup": "4.22.4",
         "serve-index": "1.9.1",
         "serve-static": "1.16.2",
-        "stylelint": "16.5.0",
-        "stylelint-config-recommended-vue": "1.5.0",
-        "stylelint-config-standard": "35.0.0",
+        "stylelint": "16.22.0",
+        "stylelint-config-recommended-vue": "1.6.1",
+        "stylelint-config-standard": "38.0.0",
         "systemjs-builder": "0.16.15",
         "testcafe": "3.7.2",
         "testcafe-reporter-spec-time": "4.0.0",

e2e/bundlers/project.json

@@ -47,13 +47,21 @@
       },
       "dependsOn": ["build"]
     },
+    "build-parcel-watcher": {
+      "executor": "nx:run-commands",
+      "options": {
+        "cwd": "{projectRoot}",
+        "command": "cross-env npm_config_build_from_source=true pnpm rebuild --recursive @parcel/watcher"
+      },
+      "dependsOn": ["build"]
+    },
     "test--parcel": {
       "executor": "nx:run-commands",
       "options": {
         "cwd": "{projectRoot}",
         "command": "parcel build ./entry/modules_esm.js --no-cache --dist-dir ./dist/dist_parsel"
       },
-      "dependsOn": ["build"]
+      "dependsOn": ["build-parcel-watcher"]
     },
     "test--browserify-cjs": {
       "executor": "nx:run-commands",
@@ -72,4 +80,4 @@
       "dependsOn": ["build"]
     }
   }
-}
+}

packages/devextreme-react/src/core/__tests__/nested-option.test.tsx

@@ -10,7 +10,7 @@ jest.useFakeTimers();
 
 const NestedComponent = function NestedComponent(props: any) {
   return (
-    <ConfigurationComponent<{ a: number } & React.PropsWithChildren>
+    <ConfigurationComponent<{ a: number } & React.PropsWithChildren<unknown>>
       elementDescriptor={{
         OptionName: 'option',
         ExpectedChildren: {
@@ -26,7 +26,7 @@ NestedComponent.componentType = 'option';
 
 const NestedComponentWithPredfeinedProps = function NestedComponentWithPredfeinedProps(props: any) {
   return (
-    <ConfigurationComponent<{ a: number } & React.PropsWithChildren>
+    <ConfigurationComponent<{ a: number } & React.PropsWithChildren<unknown>>
       elementDescriptor={{
         OptionName: 'option',
         PredefinedProps: {
@@ -1152,7 +1152,7 @@ describe('nested sub-option', () => {
   it('is pulled according to expectations', () => {
     const NestedComponentWithExpectations = function NestedComponentWithExpectations(props: any) {
       return (
-        <ConfigurationComponent<{ a: number } & React.PropsWithChildren>
+        <ConfigurationComponent<{ a: number } & React.PropsWithChildren<unknown>>
           elementDescriptor={{
             OptionName: 'option',
             ExpectedChildren: {

packages/devextreme-react/src/core/__tests__/props-updating.test.tsx

@@ -32,7 +32,7 @@ interface IControlledComponentProps {
   complexOption?: Record<string, unknown>;
 }
 
-const ControlledComponent = memo(function ControlledComponent(props: IControlledComponentProps & React.PropsWithChildren) {
+const ControlledComponent = memo(function ControlledComponent(props: IControlledComponentProps & React.PropsWithChildren<unknown>) {
   return (
     <TestComponent
       defaults={{
@@ -54,7 +54,7 @@ const NestedComponent = function NestedComponent(props: any) {
       complexValue?: Record<string, unknown>;
       value?: number;
       onValueChange?: (value: number) => void;
-    } & React.PropsWithChildren>
+    } & React.PropsWithChildren<unknown>>
       elementDescriptor={{
         OptionName: 'nestedOption',
         DefaultsProps: {
@@ -73,7 +73,7 @@ const CollectionNestedComponent = function CollectionNestedComponent(props: any)
     <ConfigurationComponent<{
       a?: number;
       onAChange?: (value: number) => void;
-    } & React.PropsWithChildren>
+    } & React.PropsWithChildren<unknown>>
       elementDescriptor={{
         OptionName: 'items',
         IsCollectionItem: true,

packages/devextreme-react/src/core/__tests__/template.test.tsx

@@ -637,7 +637,7 @@ describe('component/render in nested options', () => {
         item?: any;
         itemRender?: any;
         itemComponent?: any;
-      } & React.PropsWithChildren>
+      } & React.PropsWithChildren<unknown>>
         elementDescriptor={{
           OptionName: 'option',
           TemplateProps: [{
@@ -662,7 +662,7 @@ describe('component/render in nested options', () => {
         item?: any;
         itemRender?: any;
         itemComponent?: any;
-      } & React.PropsWithChildren>
+      } & React.PropsWithChildren<unknown>>
         elementDescriptor={{
           OptionName: 'leafOption',
           TemplateProps: [{
@@ -684,7 +684,7 @@ describe('component/render in nested options', () => {
         template?: any;
         render?: any;
         component?: any;
-      } & React.PropsWithChildren>
+      } & React.PropsWithChildren<unknown>>
         elementDescriptor={{
           OptionName: 'collection',
           IsCollectionItem: true,

packages/devextreme-scss/build/gulp-data-uri.js

@@ -30,9 +30,11 @@ const handler = (_, svgEncoding, fileName) => {
 };
 
 const sassFunction = (args) => {
-    const hasEncoding = args.getLength() === 2;
-    const encoding = hasEncoding ? args.getValue(0).getValue() : null;
-    const url = hasEncoding ? args.getValue(1).getValue() : args.getValue(0).getValue();
+    const getTextFromSass = (sassValue) => sassValue.assertString().text;
+    const argList = args[0].asList;
+    const hasEncoding = argList.size === 2;
+    const encoding = hasEncoding ? getTextFromSass(argList.get(0)) : null;
+    const url = getTextFromSass(argList.get(hasEncoding ? 1 : 0));
 
     return new sass.SassString(handler(null, encoding, url), { quotes: false });
 };

packages/devextreme-scss/package.json

@@ -9,10 +9,10 @@
     "gulp-cache": "1.1.3",
     "gulp-plumber": "1.2.1",
     "gulp-replace": "0.6.1",
-    "gulp-sass": "5.1.0",
+    "gulp-sass": "6.0.1",
     "gulp-shell": "0.8.0",
     "minimist": "1.2.8",
-    "sass-embedded": "1.59.2",
+    "sass-embedded": "1.97.1",
     "stylelint": "15.11.0",
     "stylelint-config-standard-scss": "9.0.0",
     "stylelint-scss": "6.10.0",

packages/devextreme-scss/scss/widgets/base/_gridBase.scss

@@ -1,3 +1,4 @@
+@use 'sass:math';
 @use "./mixins" as *;
 
 // adduse
@@ -662,7 +663,7 @@
 
     .dx-sort-indicator,
     .dx-header-filter-indicator {
-      max-width: calc(100% - #{round($grid-column-header-indicator-width + $grid-text-content-margin)});
+      max-width: calc(100% - #{math.round($grid-column-header-indicator-width + $grid-text-content-margin)});
 
       &.dx-text-content-alignment-left {
         margin-right: $grid-text-content-margin;
@@ -673,31 +674,31 @@
       }
 
       &.dx-text-content-alignment-left.dx-text-content-alignment-right {
-        max-width: calc(100% - #{round($grid-column-header-indicator-width * 2 + $grid-text-content-margin * 2)});
+        max-width: calc(100% - #{math.round($grid-column-header-indicator-width * 2 + $grid-text-content-margin * 2)});
       }
     }
 
     .dx-sort-indicator.dx-header-filter-indicator {
-      max-width: calc(100% - #{round($grid-column-header-indicator-width * 2 + $grid-text-content-margin)});
+      max-width: calc(100% - #{math.round($grid-column-header-indicator-width * 2 + $grid-text-content-margin)});
     }
 
     .dx-sort-indicator.dx-header-filter-indicator.dx-text-content-alignment-left.dx-text-content-alignment-right {
-      max-width: calc(100% - #{round($grid-column-header-indicator-width * 4 + $grid-text-content-margin * 2)});
+      max-width: calc(100% - #{math.round($grid-column-header-indicator-width * 4 + $grid-text-content-margin * 2)});
     }
 
     .dx-sort-indicator.dx-sort-index-indicator {
-      max-width: calc(100% - #{round($grid-column-header-indicator-width + $grid-text-content-margin + $grid-sort-index-width)});
+      max-width: calc(100% - #{math.round($grid-column-header-indicator-width + $grid-text-content-margin + $grid-sort-index-width)});
 
       &.dx-header-filter-indicator {
-        max-width: calc(100% - #{round($grid-column-header-indicator-width * 2 + $grid-text-content-margin + $grid-sort-index-width)});
+        max-width: calc(100% - #{math.round($grid-column-header-indicator-width * 2 + $grid-text-content-margin + $grid-sort-index-width)});
       }
 
       &.dx-text-content-alignment-left.dx-text-content-alignment-right {
-        max-width: calc(100% - #{round($grid-column-header-indicator-width * 2 + $grid-text-content-margin * 2 + $grid-sort-index-width)});
+        max-width: calc(100% - #{math.round($grid-column-header-indicator-width * 2 + $grid-text-content-margin * 2 + $grid-sort-index-width)});
       }
 
       &.dx-header-filter-indicator.dx-text-content-alignment-left.dx-text-content-alignment-right {
-        max-width: calc(100% - #{round($grid-column-header-indicator-width * 4 + $grid-text-content-margin * 2 + $grid-sort-index-width)});
+        max-width: calc(100% - #{math.round($grid-column-header-indicator-width * 4 + $grid-text-content-margin * 2 + $grid-sort-index-width)});
       }
     }
   }

packages/devextreme-scss/scss/widgets/base/_htmlEditor.scss

@@ -1,4 +1,6 @@
+@use "sass:list";
 @use "sass:math";
+@use "sass:selector";
 
 // adduse
 
@@ -52,7 +54,7 @@ $transparent-border: 1px solid transparent;
       counter-increment: list-#{$counter};
 
       &::before {
-        content: counter(list-#{$counter}, nth($list-style, ($counter % 3) + 1)) ". ";
+        content: counter(list-#{$counter}, list.nth($list-style, ($counter % 3) + 1)) ". ";
       }
     }
 
@@ -242,7 +244,7 @@ $transparent-border: 1px solid transparent;
     counter-increment: list-0;
 
     &::before {
-      content: counter(list-0, nth($list-style, 1)) ". ";
+      content: counter(list-0, list.nth($list-style, 1)) ". ";
     }
   }
 
@@ -430,7 +432,7 @@ $transparent-border: 1px solid transparent;
     height: $resize-handle-size;
     border-radius: 0;
 
-    @at-root #{selector-append(".dx-touch-device", &)} {
+    @at-root #{selector.append(".dx-touch-device", &)} {
       width: $touch-resize-handle-size;
       height: $touch-resize-handle-size;
     }
@@ -440,7 +442,7 @@ $transparent-border: 1px solid transparent;
   .dx-resizable-handle-corner-bottom-right {
     right: -$half-resize-handle-size;
 
-    @at-root #{selector-append(".dx-touch-device", &)} {
+    @at-root #{selector.append(".dx-touch-device", &)} {
       right: -$half-touch-resize-handle-size;
     }
   }
@@ -449,7 +451,7 @@ $transparent-border: 1px solid transparent;
   .dx-resizable-handle-corner-bottom-left {
     left: -$half-resize-handle-size;
 
-    @at-root #{selector-append(".dx-touch-device", &)} {
+    @at-root #{selector.append(".dx-touch-device", &)} {
       left: -$half-touch-resize-handle-size;
     }
   }
@@ -458,7 +460,7 @@ $transparent-border: 1px solid transparent;
   .dx-resizable-handle-corner-top-left {
     top: -$half-resize-handle-size;
 
-    @at-root #{selector-append(".dx-touch-device", &)} {
+    @at-root #{selector.append(".dx-touch-device", &)} {
       top: -$half-touch-resize-handle-size;
     }
   }
@@ -467,7 +469,7 @@ $transparent-border: 1px solid transparent;
   .dx-resizable-handle-corner-bottom-left {
     bottom: -$half-resize-handle-size;
 
-    @at-root #{selector-append(".dx-touch-device", &)} {
+    @at-root #{selector.append(".dx-touch-device", &)} {
       bottom: -$half-touch-resize-handle-size;
     }
   }
@@ -483,7 +485,7 @@ $transparent-border: 1px solid transparent;
       height: $resize-handle-size;
       border: 1px solid white;
 
-      @at-root #{selector-append(".dx-touch-device", &)} {
+      @at-root #{selector.append(".dx-touch-device", &)} {
         width: $touch-resize-handle-size;
         height: $touch-resize-handle-size;
       }
@@ -495,7 +497,7 @@ $transparent-border: 1px solid transparent;
     &::after {
       top: calc(50% - #{$half-resize-handle-size});
 
-      @at-root #{selector-append(".dx-touch-device", &)} {
+      @at-root #{selector.append(".dx-touch-device", &)} {
         top: calc(50% - #{$half-touch-resize-handle-size});
       }
     }
@@ -506,7 +508,7 @@ $transparent-border: 1px solid transparent;
     &::after {
       left: calc(50% - #{$half-resize-handle-size});
 
-      @at-root #{selector-append(".dx-touch-device", &)} {
+      @at-root #{selector.append(".dx-touch-device", &)} {
         left: calc(50% - #{$half-touch-resize-handle-size});
       }
     }
@@ -515,31 +517,31 @@ $transparent-border: 1px solid transparent;
   .dx-resizable-handle-right::after {
     right: -$half-resize-handle-size;
 
-    @at-root #{selector-append(".dx-touch-device", &)} {
+    @at-root #{selector.append(".dx-touch-device", &)} {
       right: -$half-touch-resize-handle-size;
     }
   }
 
   .dx-resizable-handle-left::after {
     left: -$half-resize-handle-size;
 
-    @at-root #{selector-append(".dx-touch-device", &)} {
+    @at-root #{selector.append(".dx-touch-device", &)} {
       left: -$half-touch-resize-handle-size;
     }
   }
 
   .dx-resizable-handle-top::after {
     top: -$half-resize-handle-size;
 
-    @at-root #{selector-append(".dx-touch-device", &)} {
+    @at-root #{selector.append(".dx-touch-device", &)} {
       top: -$half-touch-resize-handle-size;
     }
   }
 
   .dx-resizable-handle-bottom::after {
     bottom: -$half-resize-handle-size;
 
-    @at-root #{selector-append(".dx-touch-device", &)} {
+    @at-root #{selector.append(".dx-touch-device", &)} {
       bottom: -$half-touch-resize-handle-size;
     }
   }

packages/devextreme-scss/scss/widgets/base/_icon_fonts.scss

@@ -1,5 +1,6 @@
 @use "sass:math";
 @use "sass:map";
+@use "sass:selector";
 
 .dx-icon-plus,
 .dx-icon-overflow,
@@ -194,7 +195,7 @@
 @mixin dx-icon-sizing($icon-size, $container-size: $icon-size, $borders-size: 0) {
   $icon-paddings-dirty: $container-size - $icon-size;
   $icon-paddings: $icon-paddings-dirty - $borders-size;
-  $icon-padding: floor(math.div($icon-paddings, 2));
+  $icon-padding: math.floor(math.div($icon-paddings, 2));
 
   // Geometry
   width: $container-size;
@@ -229,7 +230,7 @@
   }
 
   @if $position == relative {
-    @at-root #{selector-append(".dx-rtl", &)},
+    @at-root #{selector.append(".dx-rtl", &)},
     .dx-rtl & {
       &::before {
         left: 0;