Add prettier

Author: Mark George

.eslintrc

@@ -1,7 +1,5 @@
 {
-	"plugins": [
-		"jest"
-	],
+	"plugins": ["jest"],
 	"env": {
 		"browser": true,
 		"node": true,
@@ -18,7 +16,9 @@
 		"plugin:@wordpress/eslint-plugin/recommended"
 	],
 	"rules": {
-		"no-unused-vars": [ "error", { "args": "after-used", "argsIgnorePattern": "^_" }]
+		"no-unused-vars": [
+			"error",
+			{ "args": "after-used", "argsIgnorePattern": "^_" }
+		]
 	}
 }
-

.github/workflows/issues-to-projects.yml

@@ -12,6 +12,6 @@ jobs:
       - uses: leonsteinhaeuser/[email protected]
         with:
           gh_token: ${{ secrets.PROJECT_MANAGEMENT_TOKEN }}
-          organization: 'automattic'
+          organization: "automattic"
           project_id: 322
           resource_node_id: ${{ github.event.issue.node_id }}

.github/workflows/jest-test.yml

@@ -10,7 +10,7 @@ jobs:
       - name: Setup Node.js
         uses: actions/setup-node@v1
         with:
-          node-version: '12'
+          node-version: "12"
 
       - name: Install Dependencies
         run: npm ci

.github/workflows/lint.yml

@@ -10,7 +10,7 @@ jobs:
       - name: Setup Node.js
         uses: actions/setup-node@v1
         with:
-          node-version: '12'
+          node-version: "12"
 
       - name: Install Dependencies
         run: npm ci

LICENSE.md

@@ -1,4 +1,4 @@
-The files in this project are Copyright © Automattic Inc, 2021, and licensed under the The GPLv2 (or later) from the [Free Software Foundation](http://www.fsf.org/).  Its text follows.
+The files in this project are Copyright © Automattic Inc, 2021, and licensed under the The GPLv2 (or later) from the [Free Software Foundation](http://www.fsf.org/). Its text follows.
 
 Version 2, June 1991
 
@@ -27,7 +27,6 @@ The precise terms and conditions for copying, distribution and modification foll
 
 ### GNU General Public License Terms and Conditions for Copying, Distribution, and Modification
 
-
 <ol start="0">
 
   <li>This License applies to any program or other work which contains a notice placed by the copyright holder saying it may be distributed under the terms of this General Public License. The "Program", below, refers to any such program or work, and a "work based on the Program" means either the Program or any derivative work under copyright law: that is to say, a work containing the Program or a portion of it, either verbatim or with modifications and/or translated into another language. (Hereinafter, translation is included without limitation in the term "modification".) Each licensee is addressed as "you". Activities other than copying, distribution and modification are not covered by this License; they are outside its scope. The act of running the Program is not restricted, and the output from the Program is covered only if its contents constitute a work based on the Program (independent of having been made by running the Program). Whether that is true depends on what the Program does.</li>

README.md

@@ -1,26 +1,31 @@
 # jetpack-boost-critical-css-gen
+
 Critical CSS Generator built for Jetpack Boost. It can generate Critical CSS on the server-side using Puppeteer, or on the client-side using iframes. It also supports generating blocks of Critical CSS that can apply to multiple URLs, and/or multiple viewports.
 
 # Warning
+
 This is a work in progress, and its API is not guaranteed to be stable. :)
 
 # Basic API
+
 ```
 const { BrowserInterfacePlaywright, BrowserInterfacePuppeteer, BrowserInterfaceIframe, generateCriticalCSS } = require( 'jetpack-boost-critical-css-gen' );
 const [css, warnings] = generateCriticalCSS( options );
 ```
 
 Where `options` is an object with the following keys:
+
 - `urls` (required) - An array of URLs to generate Critical CSS for.
 - `viewports` (required) - An array of viewport sizes to generate Critical CSS for. Each entry should be an object with a `width` and `height` property.
 - `browserInterface` (required) - An instance of `BrowserInterfacePlaywright` or `BrowserInterfacePuppeteer` or `BrowserInterfaceIframe` which defines an interface for the Generator to query the (real or virtual) browser.
 - `progressCallback` - A callback to receive progress information, with two arguments; `step` and `stepCount`. Each are integers; progress percentage can be expressed in the form `percentage = step * 100 / stepCount`.
 - `filters` - An object describing a filter to run each property and/or atRule through for inclusion.
 
 Example usage:
+
 ```
   const { BrowserInterfaceIframe, generateCriticalCSS } = require( 'jetpack-boost-critical-css-gen' );
-  
+
   const [css, warnings] = await generateCriticalCSS( {
     urls: [ 'http://example.com' ],
     viewports: [ { width: 800, height: 600 } ],

bin/generate.js

@@ -1,50 +1,47 @@
-const playwright = require( 'playwright' );
-const {
-	generateCriticalCSS,
-	BrowserInterfacePlaywright,
-} = require( '../index' );
+const playwright = require("playwright");
+const { generateCriticalCSS, BrowserInterfacePlaywright } = require("../index");
 
 async function main() {
-	const urls = process.argv.slice( 2 );
+	const urls = process.argv.slice(2);
 
-	if ( urls.length === 0 ) {
-		console.log( 'Usage: node bin/generate.js [url1] [url2] ...' );
+	if (urls.length === 0) {
+		console.log("Usage: node bin/generate.js [url1] [url2] ...");
 	}
 
-	console.log( 'Loading pages: ' );
-	console.log( urls );
+	console.log("Loading pages: ");
+	console.log(urls);
 
 	const browser = await playwright.chromium.launch();
 	const testPages = {};
-	for ( const url of urls ) {
-		testPages[ url ] = await browser.newPage();
-		await testPages[ url ].goto( url );
+	for (const url of urls) {
+		testPages[url] = await browser.newPage();
+		await testPages[url].goto(url);
 	}
 
-	console.log( 'Generating Critical CSS...' );
+	console.log("Generating Critical CSS...");
 
-	const [ css, warnings ] = await generateCriticalCSS( {
+	const [css, warnings] = await generateCriticalCSS({
 		urls,
 		viewports: [
 			{ width: 414, height: 896 },
 			{ width: 1200, height: 800 },
 			{ width: 1920, height: 1080 },
 		],
-		browserInterface: new BrowserInterfacePlaywright( testPages ),
-	} );
+		browserInterface: new BrowserInterfacePlaywright(testPages),
+	});
 
-	if ( warnings.length ) {
-		console.log( '\n\nwarnings => ' );
-		console.log( warnings );
+	if (warnings.length) {
+		console.log("\n\nwarnings => ");
+		console.log(warnings);
 	}
 
-	console.log( 'css => ' );
-	console.log( css );
+	console.log("css => ");
+	console.log(css);
 }
 
 main()
-	.catch( ( err ) => {
-		console.error( err );
-		process.exit( 1 );
-	} )
-	.then( () => process.exit( 0 ) );
+	.catch((err) => {
+		console.error(err);
+		process.exit(1);
+	})
+	.then(() => process.exit(0));

package-lock.json

@@ -8,8 +8,8 @@
 	"scripts": {
 		"build": "tsc --declaration && rollup -c",
 		"prepare": "npm run build",
-		"lint": "eslint . && echo '✔ eslint ran successfully.'",
-		"lint:fix": "eslint --fix . && echo '✔ eslint ran successfully.'",
+		"lint": "prettier --check . && eslint . && echo '✔ eslint and prettier ran successfully.'",
+		"lint:fix": "prettier --write . && eslint --fix . && echo '✔ eslint and prettier ran successfully.'",
 		"test": "NODE_ENV=test jest --forceExit --config=tests/config/jest.config.js"
 	},
 	"husky": {
@@ -32,6 +32,7 @@
 		"jest-environment-puppeteer": "^6.1.1",
 		"os-browserify": "^0.3.0",
 		"path-browserify": "^1.0.1",
+		"prettier": "^2.7.1",
 		"puppeteer": "^16.2.0",
 		"rollup": "^2.78.1",
 		"rollup-plugin-polyfill-node": "^0.10.2",

package.json

@@ -1,35 +1,37 @@
-import commonjs from '@rollup/plugin-commonjs';
-import resolve from '@rollup/plugin-node-resolve';
-import json from '@rollup/plugin-json';
-import { terser } from 'rollup-plugin-terser';
-import nodePolyfills from 'rollup-plugin-polyfill-node';
-import typescript from '@rollup/plugin-typescript';
+import commonjs from "@rollup/plugin-commonjs";
+import resolve from "@rollup/plugin-node-resolve";
+import json from "@rollup/plugin-json";
+import { terser } from "rollup-plugin-terser";
+import nodePolyfills from "rollup-plugin-polyfill-node";
+import typescript from "@rollup/plugin-typescript";
 
 export default {
-	input: 'src/index.ts',
-	output: [ {
-		sourcemap: true,
-		format: 'iife',
-		name: 'CriticalCSSGenerator',
-		file: 'dist/bundle.js',
-	}, 
-	{
-		sourcemap: true,
-		format: 'iife',
-		name: 'CriticalCSSGenerator',
-		file: 'dist/bundle.min.js',
-		plugins: [ terser() ],
-	}],
+	input: "src/index.ts",
+	output: [
+		{
+			sourcemap: true,
+			format: "iife",
+			name: "CriticalCSSGenerator",
+			file: "dist/bundle.js",
+		},
+		{
+			sourcemap: true,
+			format: "iife",
+			name: "CriticalCSSGenerator",
+			file: "dist/bundle.min.js",
+			plugins: [terser()],
+		},
+	],
 
 	plugins: [
-		resolve( { browser: true, preferBuiltins: false } ),
-		typescript( {
+		resolve({ browser: true, preferBuiltins: false }),
+		typescript({
 			sourceMap: true,
 			inlineSources: false,
-		} ),
-		commonjs( {
+		}),
+		commonjs({
 			transformMixedEsModules: true,
-		} ),
+		}),
 		nodePolyfills(),
 		json(),
 	],