fix executor for dex-scss

Author: GoodDayForSurf

packages/devextreme-themebuilder/src/modules/compile-manager.ts

@@ -69,7 +69,7 @@ export default class CompileManager {
         css = removeExternalResources(css);
       }
 
-      css = addInfoHeader(css, version);
+      css = addInfoHeader(css, version, true);
 
       return {
         compiledMetadata: compileData.changedVariables,

packages/devextreme-themebuilder/src/modules/post-compiler.ts

@@ -10,19 +10,39 @@ export function addBasePath(css: string | Buffer, basePath: string): string {
   return css.toString().replace(/(url\()("|')?(icons|fonts)/g, `$1$2${normalizedPath}$3`);
 }
 
-export function addInfoHeader(css: string | Buffer, version: string): string {
+function buildThemeBuilderInfoHeader(version: string): string {
   const generatedBy = '* Generated by the DevExpress ThemeBuilder';
   const versionString = `* Version: ${version}`;
   const link = '* http://js.devexpress.com/ThemeBuilder/';
 
-  const header = `/*${generatedBy}\n${versionString}\n${link}\n*/\n\n`;
+  return `/*${generatedBy}\n${versionString}\n${link}\n*/\n\n`;
+}
+
+export function addInfoHeader(
+  css: string | Buffer,
+  version: string,
+  appendInfoHeaderAfterBody = false,
+): string {
+  const header = buildThemeBuilderInfoHeader(version);
   const source = css.toString();
   const encoding = '@charset "UTF-8";';
 
-  if (source.startsWith(encoding)) {
-    return `${encoding}\n${header}${source.replace(`${encoding}\n`, '')}`;
+  // clean-css may emit @charset immediately followed by :root / @import with no newline.
+  const charsetPrefix = /^@charset\s+"utf-8";\s*/i;
+  const match = source.match(charsetPrefix);
+  if (match) {
+    const rest = source.slice(match[0].length).trimStart();
+
+    if (appendInfoHeaderAfterBody) {
+      const joined = `${encoding.trimEnd()}${rest}`.replace(
+        /^(@charset\s+"utf-8";)\s+/i,
+        '$1',
+      );
+      return `${joined}\n${header}`;
+    }
+    return `${encoding}\n${header}${rest}`;
   }
-  return `${header}${css}`;
+  return `${header}${source}`;
 }
 
 export async function cleanCss(css: string): Promise<string> {

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

@@ -16,7 +16,7 @@ function createMockModules(workspaceRoot: string, projectRoot: string): void {
       '}',
       'module.exports = {',
       '  SassString,',
-      "  compile: () => ({ css: '@charset \"UTF-8\"; .a{display:flex}' })",
+      '  compile: () => ({ css: \'@charset "UTF-8"; .a{display:flex}\' })',
       '};',
       '',
     ].join('\n'),
@@ -102,8 +102,14 @@ async function setupProjectStructure(workspaceRoot: string): Promise<string> {
     ].join('\n'),
   );
 
-  await writeFileText(path.join(buildDir, 'bundle-template.common.scss'), '.common { color: red; }');
-  await writeFileText(path.join(buildDir, 'bundle-template.generic.scss'), '.generic-$COLOR { color: red; }');
+  await writeFileText(
+    path.join(buildDir, 'bundle-template.common.scss'),
+    '.common { color: red; }',
+  );
+  await writeFileText(
+    path.join(buildDir, 'bundle-template.generic.scss'),
+    '.generic-$COLOR { color: red; }',
+  );
 
   createMockModules(workspaceRoot, projectRoot);
   return projectRoot;

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

@@ -29,7 +29,7 @@ const EULA_URL = 'https://js.devexpress.com/Licensing/';
 interface BuildDependencies {
   sass: any;
   postcss: any;
-  autoprefixer: () => any;
+  autoprefixer: (options?: { overrideBrowserslist?: string[] }) => any;
   CleanCss: new (options: unknown) => { minify: (input: string) => { styles: string } };
   themeOptions: { getThemes: () => Array<[string, string, string, string?]> };
   cleanCssSanitizeOptions: unknown;
@@ -51,9 +51,13 @@ function resolveDataUri(filePath: string, svgEncoding?: string): string {
   return `data:image/${ext};base64,${data.toString('base64')}`;
 }
 
-function createLicenseHeader(fileName: string, version: string): string {
+/**
+ * Same shape as `packages/devextreme/build/gulp/license-header.txt` with
+ * `gulp-header` `commentType: '*'` (starLicense) — matches legacy Gulp output.
+ */
+function createStarLicenseHeader(fileName: string, version: string): string {
   return [
-    '/*!',
+    '/**',
     `* DevExtreme (${fileName.replace(/\\/g, '/')})`,
     `* Version: ${version}`,
     `* Build date: ${new Date().toDateString()}`,
@@ -65,24 +69,24 @@ function createLicenseHeader(fileName: string, version: string): string {
   ].join('\n');
 }
 
-function moveCharsetToTop(css: string): string {
-  const match = css.match(/@charset\s+[^;]+;\s*/);
-  if (!match) {
-    return css;
-  }
-
-  const charset = match[0];
-  const withoutCharset = css.replace(charset, '');
-  return charset + withoutCharset;
+/**
+ * Mirrors `style-compiler.js`: starLicense prepend, then
+ * `.replace(/([\s\S]*)(@charset.*?;\s)/, '$2$1')` so `@charset` is the first bytes of output.
+ */
+function prependLicenseAndMoveCharsetFirst(minifiedCss: string, license: string): string {
+  const withLicense = `${license}${minifiedCss}`;
+  return withLicense.replace(/([\s\S]*)(@charset[^;]+;\s*)/, '$2$1');
 }
 
 function generateBundleName(theme: string, size: string, color: string, mode?: string): string {
-  return 'dx'
+  return (
+    'dx'
     + (theme === 'material' || theme === 'fluent' ? `.${theme}` : '')
     + `.${color}`
     + (mode ? `.${mode}` : '')
     + (size === 'default' ? '' : '.compact')
-    + '.scss';
+    + '.scss'
+  );
 }
 
 async function generateScssBundles(
@@ -100,7 +104,10 @@ async function generateScssBundles(
   const themes = deps.themeOptions.getThemes();
   for (const [theme, size, color, mode] of themes) {
     const template = await readTemplate(theme);
-    const content = template.replace('$COLOR', color).replace('$SIZE', size).replace('$MODE', mode || '');
+    const content = template
+      .replace('$COLOR', color)
+      .replace('$SIZE', size)
+      .replace('$MODE', mode || '');
     const fileName = generateBundleName(theme, size, color, mode);
     await writeFileText(path.join(resolvedBundlesDir, fileName), content);
   }
@@ -121,11 +128,14 @@ function loadDependencies(projectRoot: string): BuildDependencies {
     themeOptions: projectRequire(path.resolve(projectRoot, 'build/theme-options.cjs')) as {
       getThemes: () => Array<[string, string, string, string?]>;
     },
-    cleanCssSanitizeOptions: projectRequire(path.resolve(projectRoot, 'build/clean-css-options.json')),
+    cleanCssSanitizeOptions: projectRequire(
+      path.resolve(projectRoot, 'build/clean-css-options.json'),
+    ),
     cleanCssDevOptions: workspaceRequire(
       path.resolve(projectRoot, '../devextreme-themebuilder/src/data/clean-css-options.json'),
     ),
-    devextremeVersion: workspaceRequire(path.resolve(projectRoot, '../devextreme/package.json')).version,
+    devextremeVersion: workspaceRequire(path.resolve(projectRoot, '../devextreme/package.json'))
+      .version,
   };
 }
 
@@ -188,15 +198,17 @@ async function compileFile(
 
   const postcssFactory = (deps.postcss as unknown as { default?: any }).default || deps.postcss;
   const prefixed = await postcssFactory([deps.autoprefixer()]).process(compiled.css, {
-    from: undefined,
+    from: sourceFile,
   });
 
-  const minifierOptions = minifyProfile === 'ci' ? deps.cleanCssDevOptions : deps.cleanCssSanitizeOptions;
+  const minifierOptions =
+    minifyProfile === 'ci' ? deps.cleanCssDevOptions : deps.cleanCssSanitizeOptions;
   const minifier = new deps.CleanCss(minifierOptions);
   const minified = minifier.minify(prefixed.css).styles;
 
   const outFileName = path.basename(sourceFile, '.scss') + '.css';
-  const withHeader = createLicenseHeader(outFileName, deps.devextremeVersion) + moveCharsetToTop(minified);
+  const license = createStarLicenseHeader(outFileName, deps.devextremeVersion);
+  const withHeader = prependLicenseAndMoveCharsetFirst(minified, license);
   await writeFileText(path.join(outputDir, outFileName), withHeader);
 }
 
@@ -319,16 +331,12 @@ async function runWatchBuild(
       }, 200);
     };
 
-    const watcher = fs.watch(
-      watchDir,
-      { recursive: true },
-      (_eventType, fileName) => {
-        if (!fileName || !fileName.endsWith('.scss')) {
-          return;
-        }
-        scheduleRebuild();
-      },
-    );
+    const watcher = fs.watch(watchDir, { recursive: true }, (_eventType, fileName) => {
+      if (!fileName || !fileName.endsWith('.scss')) {
+        return;
+      }
+      scheduleRebuild();
+    });
 
     const stopWatcher = () => {
       watcher.close();