page size handling

Author: Artmann

build/esbuild/build.ts

@@ -9,6 +9,9 @@ import { lessLoader } from 'esbuild-plugin-less';
 import fs from 'fs-extra';
 import { getZeroMQPreBuildsFoldersToKeep, getBundleConfiguration, bundleConfiguration } from '../webpack/common';
 import ImportGlobPlugin from 'esbuild-plugin-import-glob';
+import postcss from 'postcss';
+import tailwindcss from '@tailwindcss/postcss';
+import autoprefixer from 'autoprefixer';
 const plugin = require('node-stdlib-browser/helpers/esbuild/plugin');
 const stdLibBrowser = require('node-stdlib-browser');
 
@@ -86,7 +89,11 @@ const loader: { [ext: string]: Loader } = {
 
 // https://github.com/evanw/esbuild/issues/20#issuecomment-802269745
 // https://github.com/hyrious/esbuild-plugin-style
-function style({ minify = true, charset = 'utf8' }: StylePluginOptions = {}): Plugin {
+function style({
+    minify = true,
+    charset = 'utf8',
+    enableTailwind = false
+}: StylePluginOptions & { enableTailwind?: boolean } = {}): Plugin {
     return {
         name: 'style',
         setup({ onResolve, onLoad }) {
@@ -132,6 +139,27 @@ function style({ minify = true, charset = 'utf8' }: StylePluginOptions = {}): Pl
             }));
 
             onLoad({ filter: /.*/, namespace: 'style-content' }, async (args) => {
+                // Process with PostCSS/Tailwind if enabled and file exists
+                if (enableTailwind && args.path.includes('tailwind.css') && fs.existsSync(args.path)) {
+                    const cssContent = await fs.readFile(args.path, 'utf8');
+                    const result = await postcss([tailwindcss, autoprefixer]).process(cssContent, {
+                        from: args.path,
+                        to: args.path
+                    });
+
+                    const options = { ...opt, stdin: { contents: result.css, loader: 'css' } };
+                    options.loader = options.loader || {};
+                    // Add the same loaders we add for other places
+                    Object.keys(loader).forEach((key) => {
+                        if (options.loader && !options.loader[key]) {
+                            options.loader[key] = loader[key];
+                        }
+                    });
+                    const { errors, warnings, outputFiles } = await esbuild.build(options);
+                    return { errors, warnings, contents: outputFiles![0].text, loader: 'text' };
+                }
+
+                // Default behavior for other CSS files
                 const options = { entryPoints: [args.path], ...opt };
                 options.loader = options.loader || {};
                 // Add the same loaders we add for other places
@@ -158,7 +186,9 @@ function createConfig(
     const plugins: Plugin[] = [];
     let define: SameShape<BuildOptions, BuildOptions>['define'] = undefined;
     if (target === 'web') {
-        plugins.push(style());
+        // Enable Tailwind processing for dataframe renderer
+        const enableTailwind = source.includes(path.join('dataframe-renderer', 'index.ts'));
+        plugins.push(style({ enableTailwind }));
         plugins.push(lessLoader());
 
         define = {