From 00f842aaf9cc0101ecdbc4204b611369d3779f00 Mon Sep 17 00:00:00 2001 From: Andrew Welch Date: Mon, 31 May 2021 12:48:23 -0400 Subject: [PATCH 1/4] Updated README.md --- README.md | 20 ++++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/README.md b/README.md index c732b94..89d7e6b 100644 --- a/README.md +++ b/README.md @@ -72,16 +72,16 @@ This is the full [config for critical](https://github.com/addyosmani/critical#op You may optionally override any properties you like here. The default values passed in are: -```js -const defaultCriticalConfig = { - inline: false, - minify: true, - extract: false, - width: 1200, - height: 1200, - penthouse: { - blockJSRequests: false - } +```ts +const defaultCriticalConfig: Partial = { + inline: false, + minify: true, + extract: false, + width: 1200, + height: 1200, + penthouse: { + blockJSRequests: false + } }; ``` From 8a8b611c2c7e2def7859ad2cea455303a838a2aa Mon Sep 17 00:00:00 2001 From: Andrew Welch Date: Mon, 31 May 2021 19:52:57 -0400 Subject: [PATCH 2/4] Initial type refactor --- dist/index.d.ts | 146 ++++++++++++++++++++++--- package-lock.json | 2 +- package.json | 2 +- src/@types/critical.d.ts | 4 +- src/@types/penthouse.d.ts | 2 +- src/@types/rollup-plugin-critical.d.ts | 35 ++++++ src/index.ts | 38 +------ 7 files changed, 175 insertions(+), 54 deletions(-) create mode 100644 src/@types/rollup-plugin-critical.d.ts diff --git a/dist/index.d.ts b/dist/index.d.ts index 54fcf39..7c8c8ed 100644 --- a/dist/index.d.ts +++ b/dist/index.d.ts @@ -1,11 +1,141 @@ -import { Plugin } from 'rollup'; -interface CriticalPages { +export interface PenthouseConfig { + /** Accessible url. Use file:/// protocol for local html files. */ + url: string; + /** Original css to extract critical css from */ + cssString: string; + /** Path to original css file on disk (if using instead of `cssString`) */ + css: string; + /** Width for critical viewport */ + width: number; + /** Height for critical viewport */ + height: number; + /** Configuration for screenshots (not used by default). See [Screenshot example](https://github.com/pocketjoso/penthouse/blob/master/examples/screenshots.js) */ + screenshots: object; + /** Keep media queries even for width/height values larger than critical viewport. */ + keepLargerMediaQueries: boolean; + /** + * Array of css selectors to keep in critical css, even if not appearing in critical viewport. + * Strings or regex (f.e. `['.keepMeEvenIfNotSeenInDom', /^\.button/]`) + */ + forceInclude: Array; + /** + * Array of css selectors to remove in critical css, even if appearing in critical viewport. + * Strings or regex (f.e. `['.doNotKeepMeEvenIfNotSeenInDom', /^\.button/]`) + */ + forceExclude: Array; + /** Css properties to filter out from critical css */ + propertiesToRemove: Array; + /** Ms; abort critical CSS generation after this time */ + timeout: number; + /** Settings for puppeteer. See [Custom puppeteer browser example](https://github.com/pocketjoso/penthouse/blob/master/examples/custom-browser.js) */ + puppeteer: object; + /** Ms; stop waiting for page load after this time (for sites when page load event is unreliable) */ + pageLoadSkipTimeout: number; + /** + * ms; wait time after page load before critical css extraction starts + * (also before "before" screenshot is taken, if used) + */ + renderWaitTime: number; + /** set to false to load JS (not recommended) */ + blockJSRequests: boolean; + /** characters; strip out inline base64 encoded resources larger than this */ + maxEmbeddedBase64Length: number; + /** Can be specified to limit nr of elements to inspect per css selector, reducing execution time. */ + maxElementsToCheckPerSelector: number; + /** specify which user agent string when loading the page */ + userAgent: string; + /** Set extra http headers to be sent with the request for the url. */ + customPageHeaders: object; + /** For formatting of each cookie, see [Puppeteer setCookie docs](https://github.com/puppeteer/puppeteer/blob/v1.9.0/docs/api.md#pagesetcookiecookies) */ + cookies: Array; + /** Make Penthouse throw on errors parsing the original CSS. Legacy option, not recommended */ + strict: boolean; + /** + * Let Penthouse stop if the server response code is not matching this value. number and + * regex types are tested against the [response.status()](https://github.com/puppeteer/puppeteer/blob/v1.14.0/docs/api.md#responsestatus). A function is also allowed and + * gets [Response](https://github.com/puppeteer/puppeteer/blob/v1.14.0/docs/api.md#class-response) as argument. The function should return a boolean. + */ + allowedResponseCode: number | RegExp | Function; +} +import { PenthouseConfig } from './penthouse'; + +export type DeclCallback = (node: object, value: string) => boolean; + +export interface CriticalConfig { + /** Inline critical-path CSS using filamentgroup's loadCSS. Pass an object to configure `inline-critical` */ + inline: boolean; + /** Base directory in which the source and destination are to be written */ + base: string; + /** HTML source to be operated against. This option takes precedence over the `src` option */ + html: string; + /** An array of paths to css files, file globs or Vinyl file objects. */ + css: Array; + /** Location of the HTML source to be operated against */ + src: string; + /** + * Location of where to save the output of an operation. + * Use an object with 'html' and 'css' props if you want to store both + */ + target: string | Partial<{ + css: string; + html: string; + uncritical: string; + }>; + /** Width of the target viewport */ + width: number; + /** Height of the target viewport */ + height: number; + /** Enable minification of generated critical-path */ + minify: boolean; + /** + * Remove the inlined styles from any stylesheets referenced in the HTML. + * It generates new references based on extracted content so it's safe to use for + * multiple HTML files referencing the same stylesheet. Use with caution. + * Removing the critical CSS per page results in a unique async loaded CSS file for every page. + * Meaning you can't rely on cache across multiple pages + */ + extract: boolean; + /** Inline images */ + inlineImages: boolean; + /** List of directories/urls where the inliner should start looking for assets */ + assetPaths: Array; + /** Sets a max file size (in bytes) for base64 inlined images */ + maxImageFileSize: number; + /** + * Critical tries it's best to rebase the asset paths relative to the document. + * If this doesn't work as expected you can always use this option to control the rebase paths. + * See postcss-url for details. (https://github.com/pocketjoso/penthouse#usage-1). + */ + rebase: object | Function; + /** ignore CSS rules */ + ignore: Partial<{ + atrule: Array; + rule: Array; + decl: DeclCallback; + }>; + /** User agent to use when fetching a remote src */ + userAgent: string; + /** Configuration options for `penthouse`. */ + penthouse: Partial; + /** Configuration options for `got`. */ + request: object; + /** RFC2617 basic authorization: `user` */ + user: string; + /** RFC2617 basic authorization: `pass` */ + pass: string; + /** Throw an error if no css is found */ + strict: boolean; +} +import { CriticalConfig } from './critical'; + +export interface CriticalPages { /** Combined with `criticalUrl` to determine the URLs to scrape for Critical CSS */ uri: string; /** Critical CSS files are named with the `template` path, and saved to the `criticalBase` directory */ template: string; } -interface CriticalPluginConfig { + +export interface CriticalPluginConfig { /** * The base URL to use in combination with the `criticalPages` `uri`s to determine the URLs to scrape for Critical CSS. * This can also be a file system path. This is combined with `criticalPages.uri` @@ -33,13 +163,3 @@ interface CriticalPluginConfig { */ criticalConfig?: Partial; } -/** - * [Vite.js](https://vitejs.dev/) & [Rollup](https://rollupjs.org/) plugin for generating critical CSS - * that uses the [critical](https://github.com/addyosmani/critical) generator under the hood. - * - * @param {CriticalPluginConfig} pluginConfig - the plugin configuration object - * @param {Function} callback - callback upon completion of the critical CSS generation - * @constructor - */ -declare function PluginCritical(pluginConfig: CriticalPluginConfig, callback?: Function): Plugin; -export default PluginCritical; diff --git a/package-lock.json b/package-lock.json index 1582ead..a49ef5a 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { "name": "rollup-plugin-critical", - "version": "1.0.1", + "version": "1.0.2", "lockfileVersion": 1, "requires": true, "dependencies": { diff --git a/package.json b/package.json index f193164..a962dde 100644 --- a/package.json +++ b/package.json @@ -30,7 +30,7 @@ "build": "npm run build:cjs && npm run build:esm && npm run build:types", "build:cjs": "tsc -p config/cjs.json", "build:esm": "tsc -p config/esm.json", - "build:types": "tsc -p config/types.json", + "build:types": "cp src/@types/penthouse.d.ts dist/index.d.ts && cat src/@types/critical.d.ts >> dist/index.d.ts && cat src/@types/rollup-plugin-critical.d.ts >> dist/index.d.ts", "check": "tsc -p config/base.json --noEmit", "lint": "eslint -p .", "test": "jest --passWithNoTests --coverage" diff --git a/src/@types/critical.d.ts b/src/@types/critical.d.ts index 4301214..cc18c51 100644 --- a/src/@types/critical.d.ts +++ b/src/@types/critical.d.ts @@ -1,6 +1,6 @@ -type DeclCallback = (node: object, value: string) => boolean; +export type DeclCallback = (node: object, value: string) => boolean; -interface CriticalConfig { +export interface CriticalConfig { /** Inline critical-path CSS using filamentgroup's loadCSS. Pass an object to configure `inline-critical` */ inline: boolean; /** Base directory in which the source and destination are to be written */ diff --git a/src/@types/penthouse.d.ts b/src/@types/penthouse.d.ts index b15e416..83db29e 100644 --- a/src/@types/penthouse.d.ts +++ b/src/@types/penthouse.d.ts @@ -1,4 +1,4 @@ -interface PenthouseConfig { +export interface PenthouseConfig { /** Accessible url. Use file:/// protocol for local html files. */ url: string; /** Original css to extract critical css from */ diff --git a/src/@types/rollup-plugin-critical.d.ts b/src/@types/rollup-plugin-critical.d.ts new file mode 100644 index 0000000..6d09021 --- /dev/null +++ b/src/@types/rollup-plugin-critical.d.ts @@ -0,0 +1,35 @@ +export interface CriticalPages { + /** Combined with `criticalUrl` to determine the URLs to scrape for Critical CSS */ + uri: string; + /** Critical CSS files are named with the `template` path, and saved to the `criticalBase` directory */ + template: string; +} + +export interface CriticalPluginConfig { + /** + * The base URL to use in combination with the `criticalPages` `uri`s to determine the URLs to scrape for Critical CSS. + * This can also be a file system path. This is combined with `criticalPages.uri` + * to determine pages to scrap for critical CSS. + * Determines the `criticalConfig.src` property + */ + criticalUrl: string; + /** + * The base file system path to where the generated Critical CSS file should be saved. + * This is combined with `criticalPages.template` with `_critical.min.css` appended + * to it to determine the saved critical CSS file name. + * Determines the `criticalConfig.target` property + */ + criticalBase?: string; + /** + * An array objects that contain the page `uri`s that are combined with the `criticalUrl` to + * determine the URLs to scrape for Critical CSS. The resulting files are named with the + * `template` path, and saved to the `criticalBase` directory + */ + criticalPages: Partial[]; + /** + * This is the full [config for critical](https://github.com/addyosmani/critical#options) that is passed + * through to the `critical` package. + * You may optionally override any properties you like here + */ + criticalConfig?: Partial; +} diff --git a/src/index.ts b/src/index.ts index 11f82ab..2587fc3 100644 --- a/src/index.ts +++ b/src/index.ts @@ -1,5 +1,7 @@ import {Plugin} from 'rollup'; import path from 'path'; +import { CriticalConfig } from './@types/critical'; +import { CriticalPluginConfig } from './@types/rollup-plugin-critical'; const critical = require('critical'); const criticalSuffix = '_critical.min.css'; @@ -18,42 +20,6 @@ const defaultCriticalConfig: Partial = { } }; -interface CriticalPages { - /** Combined with `criticalUrl` to determine the URLs to scrape for Critical CSS */ - uri: string; - /** Critical CSS files are named with the `template` path, and saved to the `criticalBase` directory */ - template: string; -} - -interface CriticalPluginConfig { - /** - * The base URL to use in combination with the `criticalPages` `uri`s to determine the URLs to scrape for Critical CSS. - * This can also be a file system path. This is combined with `criticalPages.uri` - * to determine pages to scrap for critical CSS. - * Determines the `criticalConfig.src` property - */ - criticalUrl: string; - /** - * The base file system path to where the generated Critical CSS file should be saved. - * This is combined with `criticalPages.template` with `_critical.min.css` appended - * to it to determine the saved critical CSS file name. - * Determines the `criticalConfig.target` property - */ - criticalBase?: string; - /** - * An array objects that contain the page `uri`s that are combined with the `criticalUrl` to - * determine the URLs to scrape for Critical CSS. The resulting files are named with the - * `template` path, and saved to the `criticalBase` directory - */ - criticalPages: Partial[]; - /** - * This is the full [config for critical](https://github.com/addyosmani/critical#options) that is passed - * through to the `critical` package. - * You may optionally override any properties you like here - */ - criticalConfig?: Partial; -} - /** * [Vite.js](https://vitejs.dev/) & [Rollup](https://rollupjs.org/) plugin for generating critical CSS * that uses the [critical](https://github.com/addyosmani/critical) generator under the hood. From 4ddf5e89ca51752d342c79b41d9c53ed6490199d Mon Sep 17 00:00:00 2001 From: Andrew Welch Date: Mon, 31 May 2021 22:52:37 -0400 Subject: [PATCH 3/4] Fixed `dist/index.d.ts` to have complete type definitions Signed-off-by: Andrew Welch --- dist/index.d.ts | 14 +- src/@types/critical.d.ts | 67 ---------- src/@types/penthouse.d.ts | 59 --------- src/@types/rollup-plugin-critical.d.ts | 35 ----- src/index.ts | 6 +- src/types.d.ts | 175 +++++++++++++++++++++++++ 6 files changed, 190 insertions(+), 166 deletions(-) delete mode 100644 src/@types/critical.d.ts delete mode 100644 src/@types/penthouse.d.ts delete mode 100644 src/@types/rollup-plugin-critical.d.ts create mode 100644 src/types.d.ts diff --git a/dist/index.d.ts b/dist/index.d.ts index 7c8c8ed..d9890cc 100644 --- a/dist/index.d.ts +++ b/dist/index.d.ts @@ -1,3 +1,5 @@ +import {Plugin} from 'rollup'; + export interface PenthouseConfig { /** Accessible url. Use file:/// protocol for local html files. */ url: string; @@ -57,7 +59,6 @@ export interface PenthouseConfig { */ allowedResponseCode: number | RegExp | Function; } -import { PenthouseConfig } from './penthouse'; export type DeclCallback = (node: object, value: string) => boolean; @@ -126,7 +127,6 @@ export interface CriticalConfig { /** Throw an error if no css is found */ strict: boolean; } -import { CriticalConfig } from './critical'; export interface CriticalPages { /** Combined with `criticalUrl` to determine the URLs to scrape for Critical CSS */ @@ -163,3 +163,13 @@ export interface CriticalPluginConfig { */ criticalConfig?: Partial; } + +/** + * [Vite.js](https://vitejs.dev/) & [Rollup](https://rollupjs.org/) plugin for generating critical CSS + * that uses the [critical](https://github.com/addyosmani/critical) generator under the hood. + * + * @param {CriticalPluginConfig} pluginConfig - the plugin configuration object + * @param {Function} callback - callback upon completion of the critical CSS generation + * @constructor + */ +declare function PluginCritical(pluginConfig: CriticalPluginConfig, callback?: Function): Plugin; diff --git a/src/@types/critical.d.ts b/src/@types/critical.d.ts deleted file mode 100644 index cc18c51..0000000 --- a/src/@types/critical.d.ts +++ /dev/null @@ -1,67 +0,0 @@ -export type DeclCallback = (node: object, value: string) => boolean; - -export interface CriticalConfig { - /** Inline critical-path CSS using filamentgroup's loadCSS. Pass an object to configure `inline-critical` */ - inline: boolean; - /** Base directory in which the source and destination are to be written */ - base: string; - /** HTML source to be operated against. This option takes precedence over the `src` option */ - html: string; - /** An array of paths to css files, file globs or Vinyl file objects. */ - css: Array; - /** Location of the HTML source to be operated against */ - src: string; - /** - * Location of where to save the output of an operation. - * Use an object with 'html' and 'css' props if you want to store both - */ - target: string | Partial<{ - css: string; - html: string; - uncritical: string; - }>; - /** Width of the target viewport */ - width: number; - /** Height of the target viewport */ - height: number; - /** Enable minification of generated critical-path */ - minify: boolean; - /** - * Remove the inlined styles from any stylesheets referenced in the HTML. - * It generates new references based on extracted content so it's safe to use for - * multiple HTML files referencing the same stylesheet. Use with caution. - * Removing the critical CSS per page results in a unique async loaded CSS file for every page. - * Meaning you can't rely on cache across multiple pages - */ - extract: boolean; - /** Inline images */ - inlineImages: boolean; - /** List of directories/urls where the inliner should start looking for assets */ - assetPaths: Array; - /** Sets a max file size (in bytes) for base64 inlined images */ - maxImageFileSize: number; - /** - * Critical tries it's best to rebase the asset paths relative to the document. - * If this doesn't work as expected you can always use this option to control the rebase paths. - * See postcss-url for details. (https://github.com/pocketjoso/penthouse#usage-1). - */ - rebase: object | Function; - /** ignore CSS rules */ - ignore: Partial<{ - atrule: Array; - rule: Array; - decl: DeclCallback; - }>; - /** User agent to use when fetching a remote src */ - userAgent: string; - /** Configuration options for `penthouse`. */ - penthouse: Partial; - /** Configuration options for `got`. */ - request: object; - /** RFC2617 basic authorization: `user` */ - user: string; - /** RFC2617 basic authorization: `pass` */ - pass: string; - /** Throw an error if no css is found */ - strict: boolean; -} diff --git a/src/@types/penthouse.d.ts b/src/@types/penthouse.d.ts deleted file mode 100644 index 83db29e..0000000 --- a/src/@types/penthouse.d.ts +++ /dev/null @@ -1,59 +0,0 @@ -export interface PenthouseConfig { - /** Accessible url. Use file:/// protocol for local html files. */ - url: string; - /** Original css to extract critical css from */ - cssString: string; - /** Path to original css file on disk (if using instead of `cssString`) */ - css: string; - /** Width for critical viewport */ - width: number; - /** Height for critical viewport */ - height: number; - /** Configuration for screenshots (not used by default). See [Screenshot example](https://github.com/pocketjoso/penthouse/blob/master/examples/screenshots.js) */ - screenshots: object; - /** Keep media queries even for width/height values larger than critical viewport. */ - keepLargerMediaQueries: boolean; - /** - * Array of css selectors to keep in critical css, even if not appearing in critical viewport. - * Strings or regex (f.e. `['.keepMeEvenIfNotSeenInDom', /^\.button/]`) - */ - forceInclude: Array; - /** - * Array of css selectors to remove in critical css, even if appearing in critical viewport. - * Strings or regex (f.e. `['.doNotKeepMeEvenIfNotSeenInDom', /^\.button/]`) - */ - forceExclude: Array; - /** Css properties to filter out from critical css */ - propertiesToRemove: Array; - /** Ms; abort critical CSS generation after this time */ - timeout: number; - /** Settings for puppeteer. See [Custom puppeteer browser example](https://github.com/pocketjoso/penthouse/blob/master/examples/custom-browser.js) */ - puppeteer: object; - /** Ms; stop waiting for page load after this time (for sites when page load event is unreliable) */ - pageLoadSkipTimeout: number; - /** - * ms; wait time after page load before critical css extraction starts - * (also before "before" screenshot is taken, if used) - */ - renderWaitTime: number; - /** set to false to load JS (not recommended) */ - blockJSRequests: boolean; - /** characters; strip out inline base64 encoded resources larger than this */ - maxEmbeddedBase64Length: number; - /** Can be specified to limit nr of elements to inspect per css selector, reducing execution time. */ - maxElementsToCheckPerSelector: number; - /** specify which user agent string when loading the page */ - userAgent: string; - /** Set extra http headers to be sent with the request for the url. */ - customPageHeaders: object; - /** For formatting of each cookie, see [Puppeteer setCookie docs](https://github.com/puppeteer/puppeteer/blob/v1.9.0/docs/api.md#pagesetcookiecookies) */ - cookies: Array; - /** Make Penthouse throw on errors parsing the original CSS. Legacy option, not recommended */ - strict: boolean; - /** - * Let Penthouse stop if the server response code is not matching this value. number and - * regex types are tested against the [response.status()](https://github.com/puppeteer/puppeteer/blob/v1.14.0/docs/api.md#responsestatus). A function is also allowed and - * gets [Response](https://github.com/puppeteer/puppeteer/blob/v1.14.0/docs/api.md#class-response) as argument. The function should return a boolean. - */ - allowedResponseCode: number | RegExp | Function; -} diff --git a/src/@types/rollup-plugin-critical.d.ts b/src/@types/rollup-plugin-critical.d.ts deleted file mode 100644 index 6d09021..0000000 --- a/src/@types/rollup-plugin-critical.d.ts +++ /dev/null @@ -1,35 +0,0 @@ -export interface CriticalPages { - /** Combined with `criticalUrl` to determine the URLs to scrape for Critical CSS */ - uri: string; - /** Critical CSS files are named with the `template` path, and saved to the `criticalBase` directory */ - template: string; -} - -export interface CriticalPluginConfig { - /** - * The base URL to use in combination with the `criticalPages` `uri`s to determine the URLs to scrape for Critical CSS. - * This can also be a file system path. This is combined with `criticalPages.uri` - * to determine pages to scrap for critical CSS. - * Determines the `criticalConfig.src` property - */ - criticalUrl: string; - /** - * The base file system path to where the generated Critical CSS file should be saved. - * This is combined with `criticalPages.template` with `_critical.min.css` appended - * to it to determine the saved critical CSS file name. - * Determines the `criticalConfig.target` property - */ - criticalBase?: string; - /** - * An array objects that contain the page `uri`s that are combined with the `criticalUrl` to - * determine the URLs to scrape for Critical CSS. The resulting files are named with the - * `template` path, and saved to the `criticalBase` directory - */ - criticalPages: Partial[]; - /** - * This is the full [config for critical](https://github.com/addyosmani/critical#options) that is passed - * through to the `critical` package. - * You may optionally override any properties you like here - */ - criticalConfig?: Partial; -} diff --git a/src/index.ts b/src/index.ts index 2587fc3..c7e9a48 100644 --- a/src/index.ts +++ b/src/index.ts @@ -1,7 +1,7 @@ import {Plugin} from 'rollup'; import path from 'path'; -import { CriticalConfig } from './@types/critical'; -import { CriticalPluginConfig } from './@types/rollup-plugin-critical'; +import { CriticalConfig } from './types'; +import { CriticalPluginConfig } from './types'; const critical = require('critical'); const criticalSuffix = '_critical.min.css'; @@ -75,4 +75,4 @@ function PluginCritical(pluginConfig: CriticalPluginConfig, callback?: Function) } } -export default PluginCritical +export default PluginCritical; diff --git a/src/types.d.ts b/src/types.d.ts new file mode 100644 index 0000000..d9890cc --- /dev/null +++ b/src/types.d.ts @@ -0,0 +1,175 @@ +import {Plugin} from 'rollup'; + +export interface PenthouseConfig { + /** Accessible url. Use file:/// protocol for local html files. */ + url: string; + /** Original css to extract critical css from */ + cssString: string; + /** Path to original css file on disk (if using instead of `cssString`) */ + css: string; + /** Width for critical viewport */ + width: number; + /** Height for critical viewport */ + height: number; + /** Configuration for screenshots (not used by default). See [Screenshot example](https://github.com/pocketjoso/penthouse/blob/master/examples/screenshots.js) */ + screenshots: object; + /** Keep media queries even for width/height values larger than critical viewport. */ + keepLargerMediaQueries: boolean; + /** + * Array of css selectors to keep in critical css, even if not appearing in critical viewport. + * Strings or regex (f.e. `['.keepMeEvenIfNotSeenInDom', /^\.button/]`) + */ + forceInclude: Array; + /** + * Array of css selectors to remove in critical css, even if appearing in critical viewport. + * Strings or regex (f.e. `['.doNotKeepMeEvenIfNotSeenInDom', /^\.button/]`) + */ + forceExclude: Array; + /** Css properties to filter out from critical css */ + propertiesToRemove: Array; + /** Ms; abort critical CSS generation after this time */ + timeout: number; + /** Settings for puppeteer. See [Custom puppeteer browser example](https://github.com/pocketjoso/penthouse/blob/master/examples/custom-browser.js) */ + puppeteer: object; + /** Ms; stop waiting for page load after this time (for sites when page load event is unreliable) */ + pageLoadSkipTimeout: number; + /** + * ms; wait time after page load before critical css extraction starts + * (also before "before" screenshot is taken, if used) + */ + renderWaitTime: number; + /** set to false to load JS (not recommended) */ + blockJSRequests: boolean; + /** characters; strip out inline base64 encoded resources larger than this */ + maxEmbeddedBase64Length: number; + /** Can be specified to limit nr of elements to inspect per css selector, reducing execution time. */ + maxElementsToCheckPerSelector: number; + /** specify which user agent string when loading the page */ + userAgent: string; + /** Set extra http headers to be sent with the request for the url. */ + customPageHeaders: object; + /** For formatting of each cookie, see [Puppeteer setCookie docs](https://github.com/puppeteer/puppeteer/blob/v1.9.0/docs/api.md#pagesetcookiecookies) */ + cookies: Array; + /** Make Penthouse throw on errors parsing the original CSS. Legacy option, not recommended */ + strict: boolean; + /** + * Let Penthouse stop if the server response code is not matching this value. number and + * regex types are tested against the [response.status()](https://github.com/puppeteer/puppeteer/blob/v1.14.0/docs/api.md#responsestatus). A function is also allowed and + * gets [Response](https://github.com/puppeteer/puppeteer/blob/v1.14.0/docs/api.md#class-response) as argument. The function should return a boolean. + */ + allowedResponseCode: number | RegExp | Function; +} + +export type DeclCallback = (node: object, value: string) => boolean; + +export interface CriticalConfig { + /** Inline critical-path CSS using filamentgroup's loadCSS. Pass an object to configure `inline-critical` */ + inline: boolean; + /** Base directory in which the source and destination are to be written */ + base: string; + /** HTML source to be operated against. This option takes precedence over the `src` option */ + html: string; + /** An array of paths to css files, file globs or Vinyl file objects. */ + css: Array; + /** Location of the HTML source to be operated against */ + src: string; + /** + * Location of where to save the output of an operation. + * Use an object with 'html' and 'css' props if you want to store both + */ + target: string | Partial<{ + css: string; + html: string; + uncritical: string; + }>; + /** Width of the target viewport */ + width: number; + /** Height of the target viewport */ + height: number; + /** Enable minification of generated critical-path */ + minify: boolean; + /** + * Remove the inlined styles from any stylesheets referenced in the HTML. + * It generates new references based on extracted content so it's safe to use for + * multiple HTML files referencing the same stylesheet. Use with caution. + * Removing the critical CSS per page results in a unique async loaded CSS file for every page. + * Meaning you can't rely on cache across multiple pages + */ + extract: boolean; + /** Inline images */ + inlineImages: boolean; + /** List of directories/urls where the inliner should start looking for assets */ + assetPaths: Array; + /** Sets a max file size (in bytes) for base64 inlined images */ + maxImageFileSize: number; + /** + * Critical tries it's best to rebase the asset paths relative to the document. + * If this doesn't work as expected you can always use this option to control the rebase paths. + * See postcss-url for details. (https://github.com/pocketjoso/penthouse#usage-1). + */ + rebase: object | Function; + /** ignore CSS rules */ + ignore: Partial<{ + atrule: Array; + rule: Array; + decl: DeclCallback; + }>; + /** User agent to use when fetching a remote src */ + userAgent: string; + /** Configuration options for `penthouse`. */ + penthouse: Partial; + /** Configuration options for `got`. */ + request: object; + /** RFC2617 basic authorization: `user` */ + user: string; + /** RFC2617 basic authorization: `pass` */ + pass: string; + /** Throw an error if no css is found */ + strict: boolean; +} + +export interface CriticalPages { + /** Combined with `criticalUrl` to determine the URLs to scrape for Critical CSS */ + uri: string; + /** Critical CSS files are named with the `template` path, and saved to the `criticalBase` directory */ + template: string; +} + +export interface CriticalPluginConfig { + /** + * The base URL to use in combination with the `criticalPages` `uri`s to determine the URLs to scrape for Critical CSS. + * This can also be a file system path. This is combined with `criticalPages.uri` + * to determine pages to scrap for critical CSS. + * Determines the `criticalConfig.src` property + */ + criticalUrl: string; + /** + * The base file system path to where the generated Critical CSS file should be saved. + * This is combined with `criticalPages.template` with `_critical.min.css` appended + * to it to determine the saved critical CSS file name. + * Determines the `criticalConfig.target` property + */ + criticalBase?: string; + /** + * An array objects that contain the page `uri`s that are combined with the `criticalUrl` to + * determine the URLs to scrape for Critical CSS. The resulting files are named with the + * `template` path, and saved to the `criticalBase` directory + */ + criticalPages: Partial[]; + /** + * This is the full [config for critical](https://github.com/addyosmani/critical#options) that is passed + * through to the `critical` package. + * You may optionally override any properties you like here + */ + criticalConfig?: Partial; +} + +/** + * [Vite.js](https://vitejs.dev/) & [Rollup](https://rollupjs.org/) plugin for generating critical CSS + * that uses the [critical](https://github.com/addyosmani/critical) generator under the hood. + * + * @param {CriticalPluginConfig} pluginConfig - the plugin configuration object + * @param {Function} callback - callback upon completion of the critical CSS generation + * @constructor + */ +declare function PluginCritical(pluginConfig: CriticalPluginConfig, callback?: Function): Plugin; From c7d8c796e4288cc6a55a18d59cebe3f1323ab6b2 Mon Sep 17 00:00:00 2001 From: Andrew Welch Date: Mon, 31 May 2021 22:52:51 -0400 Subject: [PATCH 4/4] Version 1.0.3 Signed-off-by: Andrew Welch --- CHANGELOG.md | 4 ++++ package-lock.json | 2 +- package.json | 4 ++-- 3 files changed, 7 insertions(+), 3 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index c0b1523..d0f893a 100755 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,6 +2,10 @@ All notable changes to this project will be documented in this file. +## 1.0.3 - 2021-05-31 +### Fixed +* Fixed `dist/index.d.ts` to have complete type definitions + ## 1.0.2 - 2021-05-31 ### Changed * Administrivia diff --git a/package-lock.json b/package-lock.json index a49ef5a..34baf85 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { "name": "rollup-plugin-critical", - "version": "1.0.2", + "version": "1.0.3", "lockfileVersion": 1, "requires": true, "dependencies": { diff --git a/package.json b/package.json index a962dde..155a24b 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "rollup-plugin-critical", - "version": "1.0.2", + "version": "1.0.3", "description": "Rollup plugin to generate critical CSS.", "author": "nystudio107", "license": "MIT", @@ -30,7 +30,7 @@ "build": "npm run build:cjs && npm run build:esm && npm run build:types", "build:cjs": "tsc -p config/cjs.json", "build:esm": "tsc -p config/esm.json", - "build:types": "cp src/@types/penthouse.d.ts dist/index.d.ts && cat src/@types/critical.d.ts >> dist/index.d.ts && cat src/@types/rollup-plugin-critical.d.ts >> dist/index.d.ts", + "build:types": "cp src/types.d.ts dist/index.d.ts", "check": "tsc -p config/base.json --noEmit", "lint": "eslint -p .", "test": "jest --passWithNoTests --coverage"