Package.json: update gulp-autoprefixer to version 10 (#31787)

Author: pharret31

packages/devextreme-scss/.browserslistrc

@@ -1,4 +1,8 @@
-last 2 versions
- ios > 9
-> 1%
+last 2 Chrome versions
+last 2 Firefox versions
+last 2 Safari versions
+last 2 Edge versions
+last 2 Opera versions
+last 2 iOS versions
+last 2 ChromeAndroid versions
 not dead

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

@@ -1,8 +1,11 @@
-'use strict';
+import path, { dirname } from 'path';
+import fs from 'fs';
+import sass from 'sass-embedded';
+import { fileURLToPath } from 'url';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
 
-const path = require('path');
-const fs = require('fs');
-const sass = require('sass-embedded');
 const dataUriRegex = /data-uri\((?:'(image\/svg\+xml;charset=UTF-8)',\s)?['"]?([^)'"]+)['"]?\)/g;
 
 const svg = (buffer, svgEncoding) => {
@@ -34,9 +37,8 @@ const sassFunction = (args) => {
     return new sass.SassString(handler(null, encoding, url), { quotes: false });
 };
 
-module.exports = {
-    resolveDataUri: (content) => content.replace(dataUriRegex, handler),
-    sassFunctions: {
-        'data-uri($args...)': sassFunction,
-    }
+export const resolveDataUri = (content) => content.replace(dataUriRegex, handler);
+
+export const sassFunctions = {
+    'data-uri($args...)': sassFunction,
 };

packages/devextreme-scss/build/style-compiler.js

@@ -1,22 +1,32 @@
-'use strict';
-
-const { task, src, parallel, series, dest, watch } = require('gulp');
-const { join } = require('path');
-const { existsSync, readFileSync, writeFileSync, mkdirSync } = require('fs');
-const replace = require('gulp-replace');
-const plumber = require('gulp-plumber');
-const sass = require('gulp-sass')(require('sass-embedded'));
-
-const CleanCss = require('clean-css');
-const through = require('through2');
-const autoPrefix = require('gulp-autoprefixer');
-const parseArguments = require('minimist');
-
+import gulp from 'gulp';
+const { task, src, parallel, series, dest, watch } = gulp;
+
+import { join } from 'path';
+import { existsSync, readFileSync, writeFileSync, mkdirSync } from 'fs';
+import replace from 'gulp-replace';
+import plumber from 'gulp-plumber';
+import gulpSass from 'gulp-sass';
+import sassEmbedded from 'sass-embedded';
+import CleanCss from 'clean-css';
+import through from 'through2';
+import parseArguments from 'minimist';
+import autoprefixer from 'gulp-autoprefixer';
+import { createRequire } from 'module';
+import { fileURLToPath } from 'url';
+import { dirname } from 'path';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+
+const require = createRequire(import.meta.url);
 const cleanCssSanitizeOptions = require('./clean-css-options.json');
 const cleanCssOptions = require('../../devextreme-themebuilder/src/data/clean-css-options.json');
-const { getThemes } = require('./theme-options');
-const functions = require('./gulp-data-uri').sassFunctions;
-const starLicense = require('../../devextreme/build/gulp/header-pipes').starLicense;
+const { starLicense } = require('../../devextreme/build/gulp/header-pipes.js');
+
+const { getThemes } = require('./theme-options.cjs');
+import { sassFunctions } from './gulp-data-uri.js';
+
+const sass = gulpSass(sassEmbedded);
 
 const cssArtifactsPath = join(process.cwd(), '..', 'devextreme', 'artifacts', 'css');
 
@@ -45,9 +55,9 @@ const compileBundles = (bundles, isDevBundle) => {
         }))
         .on('data', (chunk) => console.log('Build: ', chunk.path))
         .pipe(sass({
-            functions
+            functions: sassFunctions
         }))
-        .pipe(autoPrefix())
+        .pipe(autoprefixer())
         .pipe(through.obj((file, enc, callback) => {
             const content = file.contents.toString();
             new CleanCss(isDevBundle ? cleanCssOptions : cleanCssSanitizeOptions).minify(content, (_, css) => {

…s/devextreme-scss/build/theme-options.js …/devextreme-scss/build/theme-options.cjspackages/devextreme-scss/build/theme-options.js renamed to packages/devextreme-scss/build/theme-options.cjs packages/devextreme-scss/build/theme-options.js renamed to packages/devextreme-scss/build/theme-options.cjs

@@ -1,32 +1,35 @@
 /* eslint-env node */
 /* eslint-disable no-console */
 
-const gulp = require('gulp');
-const env = require('../devextreme/build/gulp/env-variables');
-const cache = require('gulp-cache');
-const shell = require('gulp-shell');
+import gulp from 'gulp';
+import cache from 'gulp-cache';
+import { createRequire } from 'module';
+
+const require = createRequire(import.meta.url);
+const env = require('../devextreme/build/gulp/env-variables.js');
+const del = require('del');
 
 gulp.task('clean', function(callback) {
-    require('del').sync([
+    del.sync([
         '../devextreme/artifacts/css/**',
         '../devextreme/scss/bundles/**'
     ], { force: true });
     cache.clearAll();
     callback();
 });
 
-require('./build/style-compiler');
+import './build/style-compiler.js';
 
 if(env.TEST_CI) {
     console.warn('Using test CI mode!');
 }
 
 function createStyleCompilerBatch() {
     return gulp.series(
-      'clean',
-      env.TEST_CI
-        ? ['style-compiler-themes-ci']
-        : ['style-compiler-themes']
+        'clean',
+        env.TEST_CI
+            ? ['style-compiler-themes-ci']
+            : ['style-compiler-themes']
     );
 }
 

packages/devextreme-scss/gulpfile.js

@@ -1,10 +1,11 @@
 {
   "name": "devextreme-scss",
+  "type": "module",
   "devDependencies": {
     "clean-css": "5.3.3",
     "del": "2.2.2",
     "gulp": "4.0.2",
-    "gulp-autoprefixer": "8.0.0",
+    "gulp-autoprefixer": "10.0.0",
     "gulp-cache": "1.1.3",
     "gulp-plumber": "1.2.1",
     "gulp-replace": "0.6.1",

packages/devextreme-scss/package.json

@@ -24,7 +24,7 @@
     "bootstrap": "^5.3.8"
   },
   "dependencies": {
-    "autoprefixer": "^10.4.7",
+    "autoprefixer": "^10.4.21",
     "clean-css": "^5.3.0",
     "postcss": "^8.2.6",
     "sass-embedded": "1.66.0"

packages/devextreme-themebuilder/package.json

@@ -3,7 +3,7 @@ import * as path from 'path';
 import MetadataCollector from './collector';
 import DependencyCollector from './dependency-collector';
 import { version } from '../../../devextreme/build/gulp/context';
-import { resolveDataUri } from '../../../devextreme-scss/build/gulp-data-uri';
+import { resolveDataUri } from '../../../devextreme/build/gulp/gulp-data-uri';
 import { browserslist } from '../../../devextreme/package.json';
 
 const stylesDirectory = path.resolve(__dirname, '../../../devextreme-scss/scss');

packages/devextreme-themebuilder/src/metadata/generate.ts

@@ -1,5 +1,5 @@
 /* eslint no-console: 0 */
-import { getThemes } from '../../../devextreme-scss/build/theme-options';
+const { getThemes } = require('../../../devextreme-scss/build/theme-options.cjs');
 import themes from '../../src/modules/themes';
 
 describe('Themes', () => {

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

@@ -159,19 +159,21 @@ it('should work regardless of registration order', () => {
 
 describe('dependency cycle', () => {
   class MyClass1 {
-    // @ts-expect-error
-    // eslint-disable-next-line @typescript-eslint/no-use-before-define
-    static dependencies = [MyClass2] as const;
+    static dependencies: readonly any[] = [];
 
-    constructor(private readonly myClass2: MyClass2) {}
+    constructor(private readonly myClass2?: MyClass2) {}
   }
+
   class MyClass2 {
     static dependencies = [MyClass1] as const;
 
     constructor(private readonly myClass1: MyClass1) {}
   }
 
+  MyClass1.dependencies = [MyClass2] as const;
+
   const ctx = new DIContext();
+  // @ts-expect-error
   ctx.register(MyClass1);
   ctx.register(MyClass2);