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",