Fix #5188: Generates the primereact.css so it can prevent FOUC

api-generator/build-css.js

@@ -0,0 +1,72 @@
+const gulp = require('gulp');
+const fs = require('fs');
+const path = require('path');
+const uglifycss = require('gulp-uglifycss');
+const rename = require('gulp-rename');
+
+// directories
+const rootDir = path.resolve(__dirname, '../');
+const distDir = path.resolve(rootDir, 'dist/resources');
+const libDir = path.resolve(rootDir, 'components/lib');
+
+function findFilesWithExtension(directory, extension) {
+    if (!fs.existsSync(directory)) {
+        console.error(`Directory "${directory}" does not exist.`);
+        return;
+    }
+
+    const filesAndSubdirs = fs.readdirSync(directory);
+
+    filesAndSubdirs.forEach((item) => {
+        const itemPath = path.join(directory, item);
+
+        if (fs.statSync(itemPath).isFile()) {
+            if (item.endsWith(extension)) {
+                // Process the file and extract styles
+                processFile(itemPath);
+            }
+        } else if (fs.statSync(itemPath).isDirectory()) {
+            findFilesWithExtension(itemPath, extension);
+        }
+    });
+}
+
+function processFile(filePath) {
+    try {
+        const fileContent = fs.readFileSync(filePath, 'utf8');
+        const regex = /const styles = `([\s\S]*?)`/s;
+        const matches = regex.exec(fileContent);
+
+        if (matches && matches[1]) {
+            const styles = matches[1];
+            // Append the styles to the primereact.css file
+            fs.appendFileSync(path.resolve(distDir, 'primereact.css'), styles);
+            console.log(`Styles from ${filePath} added to primereact.css`);
+        }
+    } catch (err) {
+        console.error(`Error processing file ${filePath}: ${err.message}`);
+    }
+}
+
+const fileExtensionToFind = 'Base.js';
+
+// Clear the existing primereact.css file
+!fs.existsSync(distDir) && fs.mkdirSync(distDir);
+fs.writeFileSync(path.resolve(distDir, 'primereact.css'), '');
+
+findFilesWithExtension(libDir, fileExtensionToFind);
+
+// Create a Gulp task to minimize the generated CSS
+gulp.task('minify-css', function () {
+    return gulp
+        .src(path.resolve(distDir, 'primereact.css'))
+        .pipe(uglifycss())
+        .pipe(rename('primereact.min.css')) // Renaming the file
+        .pipe(gulp.dest('./dist/resources/'))
+        .on('end', function () {
+            console.log('CSS file minimized and saved as primereact.css');
+        });
+});
+
+// Run the Gulp 'minify-css' task
+gulp.series('minify-css')();

gulpfile.js

@@ -6,21 +6,6 @@ var gulp = require('gulp'),
     rename = require('gulp-rename'),
     flatten = require('gulp-flatten');
 
-/** @deprecated */
-gulp.task('build-css', function () {
-    return gulp
-        .src([process.env.INPUT_DIR + 'common/Common.css', process.env.INPUT_DIR + '**/*.css'])
-        .pipe(concat('primereact.css'))
-        .pipe(gulp.dest(process.env.OUTPUT_DIR + 'resources'))
-        .pipe(uglifycss({ uglyComments: true }))
-        .pipe(rename('primereact.min.css'))
-        .pipe(gulp.dest(process.env.OUTPUT_DIR + 'resources'));
-});
-
-gulp.task('build-primereactcss', function () {
-    return gulp.src(['./styles/primereact.css']).pipe(concat('primereact.css')).pipe(gulp.dest('dist/resources')).pipe(rename('primereact.min.css')).pipe(gulp.dest('dist/resources'));
-});
-
 gulp.task('build-themes', function () {
     return (
         gulp
@@ -46,20 +31,6 @@ gulp.task('build-meta', function () {
     return gulp.src(['README.md', 'LICENSE.md']).pipe(gulp.dest(process.env.OUTPUT_DIR));
 });
 
-/** @deprecated */
-gulp.task('copy-css', function () {
-    return gulp
-        .src([process.env.INPUT_DIR + '**/Common.css', process.env.INPUT_DIR + '**/*.css'])
-        .pipe(uglifycss({ uglyComments: true }))
-        .pipe(
-            rename(function (path) {
-                path.basename = path.basename.toLowerCase();
-                path.extname = '.min' + path.extname;
-            })
-        )
-        .pipe(gulp.dest('./' + process.env.OUTPUT_DIR));
-});
-
 gulp.task('copy-d.ts', function () {
     return gulp
         .src(process.env.INPUT_DIR + '**/*.d.ts')
@@ -77,4 +48,4 @@ gulp.task('copy-package.json', function () {
 
 //Building project with run sequence
 gulp.task('copy-files', gulp.series('copy-d.ts', 'copy-package.json'));
-gulp.task('build-resources', gulp.series('build-primereactcss', 'images', 'build-themes', 'build-meta', 'copy-files'));
+gulp.task('build-resources', gulp.series('images', 'build-themes', 'build-meta', 'copy-files'));

package.json

@@ -6,8 +6,9 @@
         "dev": "next dev",
         "start": "next start",
         "build": "next build",
+        "build:css": "node ./api-generator/build-css.js",
         "build:lib": "NODE_ENV=production INPUT_DIR=components/lib/ OUTPUT_DIR=dist/ npm run build:package",
-        "build:package": "npm run build:check && rollup -c && gulp build-resources && npm run build:api",
+        "build:package": "npm run build:check && rollup -c && gulp build-resources && npm run build:css && npm run build:api",
         "build:api": "npm run apiwebtypes && npm run apidoc",
         "build:check": "npm run lint && npm run format:check && npm run type:check && npm run security:check && (NODE_ENV=test npm run test:check)",
         "security:check": "npm audit --production --audit-level high",