From b7582e056215c6c908c0019fe9930f93f031ce71 Mon Sep 17 00:00:00 2001 From: melloware Date: Thu, 2 Nov 2023 16:49:07 -0400 Subject: [PATCH] Fix #5188: Generates the primereact.css so it can prevent FOUC --- api-generator/build-css.js | 72 ++++++++++++++++++++++++++++++++++++++ gulpfile.js | 31 +--------------- package.json | 3 +- 3 files changed, 75 insertions(+), 31 deletions(-) create mode 100644 api-generator/build-css.js diff --git a/api-generator/build-css.js b/api-generator/build-css.js new file mode 100644 index 0000000000..1df7d45bf1 --- /dev/null +++ b/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')(); diff --git a/gulpfile.js b/gulpfile.js index 5b1a1f76e0..83ee4d763e 100644 --- a/gulpfile.js +++ b/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')); diff --git a/package.json b/package.json index fb45b20bf4..8ce5efe214 100644 --- a/package.json +++ b/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",