fix review comments

Author: GoodDayForSurf

.github/workflows/themebuilder_tests.yml

@@ -52,7 +52,7 @@ jobs:
 
     - name: Build etalon bundles
       working-directory: ./packages/devextreme-scss
-      run: pnpm --workspace-root nx run devextreme-scss:build:ci
+      run: pnpm --workspace-root nx build:ci devextreme-scss
 
     - name: Build
       working-directory: ./packages/devextreme-themebuilder

packages/devextreme-scss/package.json

@@ -13,7 +13,7 @@
     "build": "pnpm --workspace-root nx build devextreme-scss",
     "lint": "stylelint scss/widgets",
     "test": "jest --no-coverage --runInBand --config=./tests/jest.config.json",
-    "watch": "pnpm --workspace-root nx run devextreme-scss:watch"
+    "watch": "pnpm --workspace-root nx run devextreme-scss --target=watch"
   },
   "version": "26.1.0"
 }

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

@@ -38,6 +38,23 @@ describe('PostCompiler', () => {
       + 'css');
   });
 
+  const themeBuilderInfoHeader = '/** Generated by the DevExpress ThemeBuilder\n'
+    + '* Version: 1.1.1\n'
+    + '* http://js.devexpress.com/ThemeBuilder/\n'
+    + '*/\n\n';
+
+  test('addInfoHeader - append after body, @charset glued to :root (CompileManager parity)', () => {
+    expect(addInfoHeader('@charset "utf-8";:root{}', '1.1.1', true))
+      .toBe('@charset "UTF-8";:root{}\n'
+      + themeBuilderInfoHeader);
+  });
+
+  test('addInfoHeader - append after body, strips newline between @charset and @import', () => {
+    expect(addInfoHeader('@charset "UTF-8";\n@import url(https://example.com/a.css);', '1.1.1', true))
+      .toBe('@charset "UTF-8";@import url(https://example.com/a.css);\n'
+      + themeBuilderInfoHeader);
+  });
+
   test('cleanCss', async () => {
     expect(await cleanCss('.c1 { color: #F00; } .c2 { color: #F00; }'))
       .toBe('.c1,\n.c2 {\n  color: red;\n}');

packages/devextreme/package.json

@@ -233,7 +233,7 @@
     "build:testcafe": "cross-env DEVEXTREME_TEST_CI=TRUE BUILD_ESM_PACKAGE=true BUILD_TESTCAFE=TRUE gulp default",
     "build-npm-devextreme": "cross-env BUILD_ESM_PACKAGE=true gulp default",
     "build-dist": "cross-env BUILD_ESM_PACKAGE=true gulp default --uglify",
-    "build-themes": "pnpm --workspace-root nx run devextreme-scss:build:themes && pnpm --workspace-root nx run devextreme-scss:copy:assets",
+    "build-themes": "pnpm --workspace-root nx build:themes devextreme-scss && pnpm --workspace-root nx copy:assets devextreme-scss",
     "build:react": "gulp generate-react",
     "build:react:watch": "gulp generate-react-watch",
     "build:react:typescript": "gulp generate-react-typescript",

packages/nx-infra-plugin/src/executors/scss-build/executor.e2e.spec.ts

@@ -64,6 +64,24 @@ function createMockModules(workspaceRoot: string, projectRoot: string): void {
     ].join('\n'),
     'utf8',
   );
+
+  const chokidarDir = path.join(workspaceNodeModules, 'chokidar');
+  fs.mkdirSync(chokidarDir, { recursive: true });
+  fs.writeFileSync(
+    path.join(chokidarDir, 'index.js'),
+    [
+      'module.exports = {',
+      '  watch: function watch() {',
+      '    return {',
+      '      on: function on() { return this; },',
+      '      close: function close() { return Promise.resolve(); },',
+      '    };',
+      '  },',
+      '};',
+      '',
+    ].join('\n'),
+    'utf8',
+  );
 }
 
 async function setupProjectStructure(workspaceRoot: string): Promise<string> {

packages/nx-infra-plugin/src/executors/scss-build/executor.ts

@@ -30,6 +30,15 @@ interface BuildDependencies {
   sass: any;
   postcss: any;
   autoprefixer: (options?: { overrideBrowserslist?: string[] }) => any;
+  chokidar: {
+    watch: (
+      paths: string | string[],
+      options?: Record<string, unknown>,
+    ) => {
+      on: (event: string, handler: (...args: any[]) => void) => unknown;
+      close: () => Promise<void> | void;
+    };
+  };
   CleanCss: new (options: unknown) => { minify: (input: string) => { styles: string } };
   themeOptions: { getThemes: () => Array<[string, string, string, string?]> };
   cleanCssSanitizeOptions: unknown;
@@ -124,6 +133,7 @@ function loadDependencies(projectRoot: string): BuildDependencies {
     sass: projectRequire('sass-embedded'),
     postcss: workspaceRequire('postcss'),
     autoprefixer: workspaceRequire('autoprefixer'),
+    chokidar: workspaceRequire('chokidar'),
     CleanCss: workspaceRequire('clean-css'),
     themeOptions: projectRequire(path.resolve(projectRoot, 'build/theme-options.cjs')) as {
       getThemes: () => Array<[string, string, string, string?]>;
@@ -288,14 +298,15 @@ async function runWatchBuild(
   const cssOutputDir = path.resolve(projectRoot, options.cssOutputDir || DEFAULT_CSS_OUTPUT_DIR);
   const watchDir = path.resolve(projectRoot, 'scss');
   const watchBundleNames = getWatchBundleNames(options);
+  const minifyProfile: MinifyProfile = options.mode === 'ci' ? 'ci' : 'all';
 
   const rebuild = async (): Promise<void> => {
     await generateScssBundles(projectRoot, bundlesDir, deps);
     await ensureDir(cssOutputDir);
 
     const sources = resolveSourcesByBundleNames(projectRoot, bundlesDir, watchBundleNames);
     for (const source of sources) {
-      await compileFile(source, cssOutputDir, 'all', deps, projectRoot);
+      await compileFile(source, cssOutputDir, minifyProfile, deps, projectRoot);
     }
 
     await copyAssets(projectRoot, cssOutputDir);
@@ -331,15 +342,13 @@ async function runWatchBuild(
       }, 200);
     };
 
-    const watcher = fs.watch(watchDir, { recursive: true }, (_eventType, fileName) => {
-      if (!fileName || !fileName.endsWith('.scss')) {
-        return;
-      }
-      scheduleRebuild();
+    const watcher = deps.chokidar.watch(path.join(watchDir, '**/*.scss'), {
+      ignoreInitial: true,
     });
+    watcher.on('all', scheduleRebuild);
 
     const stopWatcher = () => {
-      watcher.close();
+      void watcher.close();
       if (timer) {
         clearTimeout(timer);
       }