1.0.1 • Published 3 days ago
@tbela99/critical v1.0.1
CRITICAL PATH GENERATOR
Critical path generator tools using node oe the web browser.
Web browser script
Extract critical CSS path for the current viewport in the current page.
Using modules
<script type="module">
import {parse, render} from 'https://esm.sh/@tbela99/css-parser/web';
import {extract} from 'https://esm.sh/tbela99/critical/browser';
const result = await extract({ fonts: true });
// css is optimized using https://www.npmjs.com/package/@tbela99/css-parser
// pretty print css
const css = await parse(results.styles.join('\n')).then(result => render(result.ast, {minify: false}).code);
console.debug(css);
</script>
Without using modules
<script src="./dist/browser-umd.js"></script>
<script src="https://cdn.jsdelivr.net/gh/tbela99/css-parser/dist/index-umd-web.js"></script>
<script>
const {parse, render} = CSSParser;
const {extract} = critical;
const result = await extract({fonts: true});
// optimize and pretty print css
const css = await parse(results.styles.join('\n')).then(result => render(result.ast, {minify: false}).code);
console.debug(css);
</script>
Options
- options: object
- fonts: bool? generate Javascript to load web fonts dynamically
- html: bool? generate an HTML page containing inlined critical css
- signal: AbortSignal? abort critical extraction using AbortSignal
Limitations
The web browser script is subject to the same origin policy and CSP. This can prevent the script from reading external stylesheets.
Node script
Generate critical CSS path from your nodejs script
import {critical} from "@tbela99/critical";
const urls = [
'http://github.com',
'https://docs.npmjs.com/cli/v8/configuring-npm/package-json#directories'
];
urls.forEach(async url => critical(url, {
html: true,
console: true,
screenshot: true,
secure: false,
// dimensions can be specified as an array of string or object
dimensions: ['1400x900', '1200x675', '992x558']
}).then((results) => {
// print extracted CSS
console.log(results.styles.join('\n'));
}));
Node script options
- options: object
browser settings
- headless: bool. start the browser in headless mode. default true
- browser: string. browser to use choices: "chromium", "firefox", "webkit", "edge", "chrome" default "chromium"
- browserType: string. use a desktop or mobile browser choices: 'desktop', 'mobile'
- randomBrowser: use a random web browser
- randomUserAgent: bool. use a random user agent runtime settings
- container: bool. turn off additional security features, required to run inside a container
- secure: bool. enforce browser security features such as CSP and same origin policy. default false screenshots settings
- screenshot: bool. generate screenshot for each viewport mentioned. default false
- colorScheme: string. force a color scheme choices: 'dark', 'light'
- filename: string. prefix of the generated files
- width: int. viewport width. default 800
- height: int. viewport height. default 600
- dimensions: array or string. array of viewports. this takes precedence over height and width. viewports can be specified as objects with width and height property or a string. output settings
- html: bool. generate an HTML page containing the inlined critical css
- output: string. change output directory. default './output/'
- fonts: bool. generate javascript to load web fonts. default true debugging settings
- console: bool. log console messages from the pages. default true
- verbose: bool. enable verbose mode
Command line script
when installed globally, it is available as critical-cli
$ sudo npm install -g @tbela99/critical
$ critical-cli -i http://google.com
Usage
$ critical-cli [options+] url [url+]
run the command line tools:
Example: critical-cli -d 800x600 -d 1024x768 -i https://facebook.com
Options:
--version Show version number [boolean]
-t, --headless enable or disable headless mode [boolean] [default: true]
-b, --browser browser to use
[string] [choices: "chromium", "firefox", "webkit", "edge", "chrome"] [default
: "chromium"]
-k, --browser-type use a mobile browser
[string] [choices: "mobile", "desktop"]
-r, --randomBrowser use a random browser [boolean] [default: false]
-i, --screenshot Generate screenshots [boolean]
-s, --secure enable or disable security settings such as CSP and same
origin policy [boolean]
-m, --color-scheme color scheme
[string] [choices: "light", "dark"] [default: "dark"]
-o, --output Output directory [string]
-n, --filename prefix of the generated files [string]
-w, --width Viewport width [number]
-a, --height Viewport height [number]
-d, --dimensions Array of viewports, override height/width settings[array]
-f, --fonts Generate javascript to load fonts dynamically [boolean]
-l, --console Show console messages from the browser [boolean]
-c, --container Disable additional security settings to run inside a cont
ainer [boolean]
-p, --html Generate an HTML page containing inlined critical css
[boolean]
-v, --verbose Enable verbose mode [boolean] [default: false]
-h, --help Show help [boolean]
Example
$ critical-cli https://github.com/ https://nodejs.org --secure=no -i -d '1440x900' -d '1366x768'
CHANGELOG
V1.0.0
- converted to typescript
- changed default export to es module
- optimized generated css (merge rule, remove duplicate, minify, generate nested css)
- specify color scheme dark/light