JS Package: Add Critical CSS Gen (#38429)

* Add initial files

* Fix types

* Add builds for browser and node

* Only build for node (for now)

* Update package.json type to module

* Unfix types (these are the original source files)

* Add rollup for browser version (not working properly)

* WIP

* Ping all package versions

* Fix build for browser

* add changelogs

* Remove postinstall scripts related to yalc

* Add missing dependency

* Don't specify moduleResolution in tsconfig

* Don't set module directly. Jetpack tooling already sets that

* Add build for browser version

* Fix JSDoc blocks

* Remove lock file

* Remove test package

* Update root pnpm-lock

* No useless constructor

* Fix root lock file out of date

* Fix pointing to unminified file for css gen package

* Add back-end/node build

* Fix map files

* Fix package entrypoints

* Remove unused dependencies

* Add tests

* Package resolution

* Fix lint issues

* Try to fix tests

* Remove global setup

* Add test env for jest

* Install chrome before running project tests

* Setup puppeteer envs

* Fix tests

* Update imports

* Fix incorrectly ignoring directories

* Remove build from npm test command

* I guess building is necessary...

Otherwise GH tests fail because the build is missing.

* Cleanup package dependencies

* Cleanup babel dependencies

* Cleanup root lock file

* More dependency cleanup

* Remove unused babel footprint

* Fix to remove duplicate puppeteer related dependencies

* Remove unused dependency

* Add express back
Update puppeteer to fix lock files check

* Fix incorrect package usage

* Fix jetpack entry file

* Remove unnecessary tsconfig

* Remove unused dependencies

* Update rollup to use the same version as everything else in the monorepo

* Update package vesion

* Update package to match monorepo

* Update package to match monorepo

* Update package version

* Update package version

* Cleanup eslint dependencies, since they are handled at monorepo level

* Dedupe packages

* Update build to use pnpm instead of npm

Co-authored-by: Brad Jorsch <[email protected]>

* Update test script to use pnpm instead of npm

Co-authored-by: Brad Jorsch <[email protected]>

* Use playwright instead of puppeteer

* Fix browser-interface-iframe tests

* Fix generate-critical-css not working with local files

* Add build before tests

* Remove chrome setup as puppeteer is no longer present

* Build before running tests

* Fix incorrectly parsing file paths

* Remove unused dependencies

* Remove peer dependencies meta property

* Update dependencies versions

* Replace node-fetch in favor of node 18.0.0s fetch

* Install browsers before running tests

* Update gitattributes

Co-authored-by: Brad Jorsch <[email protected]>

* Rename build folders to make sense at a glance

* Revert update to boost to use new package

We should release the package first then update Boost. That way
we can be sure that doing a new Boost release will not ship broken.

* Add a separate entry point for playwright interface

* Update node/browser entry files names

* Fix using incorrect entry file for browser build

* Remove unused globals from browser build

* Exclude browser config from production build

* Make playwright-core a required peer dependency

* Make playwright-core a production dependency

* Remove separate entry point for playwright

* Make playwright a dev depepdency

* Make playwright-core an optional peer dependency

---------

Co-authored-by: Brad Jorsch <[email protected]>

projects/js-packages/critical-css-gen/.gitattributes

@@ -0,0 +1,15 @@
+# Files not needed to be distributed in the package.
+.gitattributes         export-ignore
+node_modules           export-ignore
+
+# Files to include in the mirror repo
+/build-browser/**      production-include
+/build-node/**         production-include
+
+# Files to exclude from the mirror repo
+/changelog/**          production-exclude
+/src/**                production-exclude
+/tests/**              production-exclude
+/rollup.config.js      production-exclude
+/jest.config.cjs       production-exclude
+/tsconfig.browser.json production-exclude

projects/js-packages/critical-css-gen/.gitignore

@@ -0,0 +1,4 @@
+/vendor
+/node_modules
+/build-node
+/build-browser

projects/js-packages/critical-css-gen/CHANGELOG.md

@@ -0,0 +1,7 @@
+# Changelog
+
+All notable changes to this project will be documented in this file.
+
+The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/)
+and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
+

projects/js-packages/critical-css-gen/README.md

@@ -0,0 +1,24 @@
+# critical-css-gen
+
+A flexible Critical CSS Generator that supports multiple URLs and viewports, with both server-side and client-side generation capabilities.
+
+## How to install critical-css-gen
+
+### Installation From Git Repo
+
+## Contribute
+
+## Get Help
+
+## Using this package in your WordPress plugin
+
+If you plan on using this package in your WordPress plugin, we would recommend that you use [Jetpack Autoloader](https://packagist.org/packages/automattic/jetpack-autoloader) as your autoloader. This will allow for maximum interoperability with other plugins that use this package as well.
+
+## Security
+
+Need to report a security vulnerability? Go to [https://automattic.com/security/](https://automattic.com/security/) or directly to our security bug bounty site [https://hackerone.com/automattic](https://hackerone.com/automattic).
+
+## License
+
+critical-css-gen is licensed under [GNU General Public License v2 (or later)](./LICENSE.txt)
+

projects/js-packages/critical-css-gen/changelog/add-js-package-critical-css-gen

@@ -0,0 +1,4 @@
+Significance: minor
+Type: added
+
+Add package files.

projects/js-packages/critical-css-gen/changelog/initial-version

@@ -0,0 +1,4 @@
+Significance: patch
+Type: added
+
+Initial version.

projects/js-packages/critical-css-gen/composer.json

@@ -0,0 +1,44 @@
+{
+	"name": "automattic/jetpack-critical-css-gen",
+	"description": "A flexible Critical CSS Generator that supports multiple URLs and viewports, with both server-side and client-side generation capabilities.",
+	"type": "library",
+	"license": "GPL-2.0-or-later",
+	"require": {},
+	"require-dev": {
+		"automattic/jetpack-changelogger": "@dev"
+	},
+	"autoload": {
+		"classmap": [
+			"src/"
+		]
+	},
+	"scripts": {
+		"build-development": [
+			"pnpm run build"
+		],
+		"build-production": [
+			"NODE_ENV=production pnpm run build"
+		],
+		"test-js": [
+			"pnpm exec playwright install && pnpm run test"
+		]
+	},
+	"repositories": [
+		{
+			"type": "path",
+			"url": "../../packages/*",
+			"options": {
+				"monorepo": true
+			}
+		}
+	],
+	"minimum-stability": "dev",
+	"prefer-stable": true,
+	"extra": {
+		"autotagger": true,
+		"changelogger": {
+			"link-template": "https://github.com/Automattic/jetpack-critical-css-gen/compare/v${old}...v${new}"
+		},
+		"mirror-repo": "Automattic/jetpack-critical-css-gen"
+	}
+}

projects/js-packages/critical-css-gen/jest.config.cjs

@@ -0,0 +1,5 @@
+const baseConfig = require( 'jetpack-js-tools/jest/config.base.js' );
+
+module.exports = {
+	...baseConfig,
+};

projects/js-packages/critical-css-gen/package.json

@@ -0,0 +1,78 @@
+{
+	"private": true,
+	"type": "module",
+	"name": "@automattic/jetpack-critical-css-gen",
+	"version": "0.1.0-alpha",
+	"description": "A flexible Critical CSS Generator that supports multiple URLs and viewports, with both server-side and client-side generation capabilities.",
+	"homepage": "https://github.com/Automattic/jetpack/tree/HEAD/projects/js-packages/critical-css-gen/#readme",
+	"bugs": {
+		"url": "https://github.com/Automattic/jetpack/labels/[JS Package] Critical Css Gen"
+	},
+	"repository": {
+		"type": "git",
+		"url": "https://github.com/Automattic/jetpack.git",
+		"directory": "projects/js-packages/critical-css-gen"
+	},
+	"license": "GPL-2.0-or-later",
+	"author": "Automattic",
+	"scripts": {
+		"build:browser": "rollup -c",
+		"build:node": "tsc",
+		"build": "pnpm run clean && pnpm run build:browser && pnpm run build:node",
+		"clean": "rm -rf build-node/ && rm -rf build-browser/",
+		"test": "pnpm build && NODE_ENV=test NODE_PATH=./node_modules jest --forceExit --config=tests/config/jest.config.js"
+	},
+	"main": "./build-node/node.js",
+	"browser": "./build-browser/bundle.js",
+	"devDependencies": {
+		"@babel/core": "7.24.7",
+		"@babel/preset-env": "7.24.7",
+		"@babel/preset-typescript": "7.24.7",
+		"@rollup/plugin-commonjs": "26.0.1",
+		"@rollup/plugin-json": "4.1.0",
+		"@rollup/plugin-node-resolve": "13.3.0",
+		"@rollup/plugin-terser": "0.4.3",
+		"@rollup/plugin-typescript": "8.3.3",
+		"@types/clean-css": "4.2.5",
+		"@types/css-tree": "2.0.1",
+		"@types/node": "^20.4.2",
+		"express": "4.19.2",
+		"jest": "29.7.0",
+		"playwright": "1.45.1",
+		"playwright-core": "^1.45.1",
+		"prettier": "npm:[email protected]",
+		"rollup": "2.79.1",
+		"rollup-plugin-polyfill-node": "0.13.0",
+		"source-map": "0.7.4",
+		"source-map-js": "1.2.0",
+		"tslib": "2.5.0",
+		"typescript": "5.0.4",
+		"webpack": "5.76.0",
+		"webpack-dev-middleware": "5.3.4"
+	},
+	"exports": {
+		".": {
+			"jetpack:src": "./src/node.ts",
+			"types": "./build-node/node.d.ts",
+			"browser": "./build-browser/bundle.js",
+			"import": "./build-node/node.js",
+			"require": "./build-node/node.js",
+			"default": "./build-node/node.js"
+		}
+	},
+	"dependencies": {
+		"clean-css": "^5.3.1",
+		"css-tree": "^2.3.1"
+	},
+	"peerDependencies": {
+		"playwright-core": "^1.45.1"
+	},
+	"peerDependenciesMeta": {
+		"playwright-core": {
+			"optional": true
+		}
+	},
+	"engines": {
+		"node": ">=18.0.0"
+	}
+}

projects/js-packages/critical-css-gen/rollup.config.js

@@ -0,0 +1,47 @@
+import commonjs from '@rollup/plugin-commonjs';
+import json from '@rollup/plugin-json';
+import resolve from '@rollup/plugin-node-resolve';
+import terser from '@rollup/plugin-terser';
+import typescript from '@rollup/plugin-typescript';
+import nodePolyfills from 'rollup-plugin-polyfill-node';
+
+const sharedPlugins = [
+	resolve( {
+		browser: true,
+		preferBuiltins: false,
+		modulesOnly: false,
+	} ),
+	typescript( {
+		tsconfig: 'tsconfig.browser.json',
+		sourceMap: true,
+		inlineSources: false,
+		declaration: false,
+	} ),
+	commonjs(),
+	nodePolyfills(),
+	json(),
+];
+
+export default {
+	input: 'src/browser.ts',
+	output: [
+		{
+			sourcemap: true,
+			format: 'iife',
+			name: 'CriticalCSSGenerator',
+			file: 'build-browser/bundle.full.js',
+		},
+		{
+			sourcemap: true,
+			format: 'iife',
+			name: 'CriticalCSSGenerator',
+			file: 'build-browser/bundle.js',
+			plugins: [ terser() ],
+		},
+	],
+	plugins: sharedPlugins,
+	preserveSymlinks: true,
+	watch: {
+		clearScreen: false,
+	},
+};