critical - npm Package Compare versions
Comparing version 0.5.4 to 0.5.5
| { | ||
| "name": "critical", | ||
| "version": "0.5.4", | ||
| "version": "0.5.5", | ||
| "description": "Extract & Inline Critical-path CSS from HTML", | ||
@@ -9,14 +9,13 @@ "author": "Addy Osmani", | ||
| "scripts": { | ||
| "test": "mocha test/test.js --timeout 100000" | ||
| "test": "jshint . && mocha test/*.js --timeout 100000" | ||
| }, | ||
| "files": [ | ||
| "bin/critical", | ||
| "src/critical.js", | ||
| "src/helper/inline-styles.js" | ||
| "cli.js", | ||
| "index.js", | ||
| "lib" | ||
| ], | ||
| "bin": { | ||
| "critical": "./bin/critical" | ||
| "critical": "cli.js" | ||
| }, | ||
| "preferGlobal": true, | ||
| "main": "src/critical.js", | ||
| "keywords": [ | ||
@@ -36,11 +35,11 @@ "critical", | ||
| "cli": "^0.6.5", | ||
| "get-stdin": "^3.0.0", | ||
| "get-stdin": "^4.0.1", | ||
| "imageinliner": "^0.2.2", | ||
| "indent-string": "^1.2.0", | ||
| "inline-critical": "^0.0.9", | ||
| "lodash": "^2.4.1", | ||
| "meow": "^2.0.0", | ||
| "inline-critical": "^0.1.0", | ||
| "lodash": "^3.2.0", | ||
| "meow": "^3.0.0", | ||
| "object-assign": "^2.0.0", | ||
| "oust": "^0.2.0", | ||
| "penthouse": "0.2.53", | ||
| "penthouse": "0.3.0", | ||
| "slash": "^1.0.0", | ||
@@ -52,2 +51,4 @@ "tempfile": "^1.1.0", | ||
| "async": "^0.9.0", | ||
| "chai": "^2.1.0", | ||
| "jshint": "^2.6.0", | ||
| "mocha": "*", | ||
@@ -54,0 +55,0 @@ "mockery": "^1.4.0" |
| # critical [](https://travis-ci.org/addyosmani/critical) | ||
| > Critical extracts & inlines critical-path (above-the-fold) CSS from HTML | ||
|  | ||
| Critical extracts & inlines critical-path (above-the-fold) CSS from HTML | ||
| ## Install | ||
| ```sh | ||
| ``` | ||
| $ npm install --save critical | ||
| ``` | ||
| ## Build plugins | ||
| * [grunt-critical](https://github.com/bezoerb/grunt-critical) | ||
| * Gulp users should use Critical directly | ||
| - [grunt-critical](https://github.com/bezoerb/grunt-critical) | ||
| - Gulp users should use Critical directly | ||
| ## Demo projects | ||
| * [Optimize a basic page with Gulp](https://github.com/addyosmani/critical-path-css-demo) with a [tutorial](https://github.com/addyosmani/critical-path-css-demo#tutorial) | ||
| * [Optimize an Angular boilerplate with Gulp](https://github.com/addyosmani/critical-path-angular-demo) | ||
| * [Optimize a Weather app with Gulp](https://github.com/addyosmani/critical-css-weather-app) | ||
| - [Optimize a basic page with Gulp](https://github.com/addyosmani/critical-path-css-demo) with a [tutorial](https://github.com/addyosmani/critical-path-css-demo#tutorial) | ||
| - [Optimize an Angular boilerplate with Gulp](https://github.com/addyosmani/critical-path-angular-demo) | ||
| - [Optimize a Weather app with Gulp](https://github.com/addyosmani/critical-css-weather-app) | ||
| ## Usage | ||
@@ -41,3 +45,3 @@ | ||
| html: '<html>...</html>', | ||
| // HTML source file | ||
@@ -50,6 +54,6 @@ src: 'index.html', | ||
| // Viewport width | ||
| width: 320, | ||
| width: 1300, | ||
| // Viewport height | ||
| height: 480, | ||
| height: 900, | ||
@@ -79,4 +83,4 @@ // Target for final HTML output | ||
| dest: 'styles/main.css', | ||
| width: 320, | ||
| height: 480 | ||
| width: 1300, | ||
| height: 900 | ||
| }); | ||
@@ -93,4 +97,4 @@ ``` | ||
| minify: true, | ||
| width: 320, | ||
| height: 480 | ||
| width: 1300, | ||
| height: 900 | ||
| }); | ||
@@ -105,4 +109,4 @@ ``` | ||
| src: 'index.html', | ||
| width: 320, | ||
| height: 480 | ||
| width: 1300, | ||
| height: 900 | ||
| }, function (err, output) { | ||
@@ -114,2 +118,22 @@ // You now have critical-path CSS | ||
| ### Generate critical-path CSS with multiple resolutions | ||
| When your site is adaptive and you want to deliver critical CSS for multiple screen resolutions this is a useful option. | ||
| *note:* (your final output will be minified as to eliminate duplicate rule inclusion) | ||
| ```js | ||
| critical.generate({ | ||
| base: 'test/', | ||
| src: 'index.html', | ||
| dest: 'styles/main.css', | ||
| dimensions: [{ | ||
| height: 200, | ||
| width: 500 | ||
| }, { | ||
| height: 900, | ||
| width: 1200 | ||
| }] | ||
| }); | ||
| ``` | ||
| ### Inline `<style>` / critical CSS from generation | ||
@@ -150,2 +174,3 @@ | ||
| ### Options | ||
@@ -161,2 +186,3 @@ | ||
| | height | `integer` | (Generation only) Height of the target viewport | | ||
| | dimensions | `array` | (Generation only) an array of objects containing height and width. | ||
| | minify | `boolean` | Enable minification of CSS output | | ||
@@ -169,2 +195,3 @@ | extract | `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| | ||
| ## CLI | ||
@@ -174,12 +201,13 @@ | ||
| ```shell | ||
| cat test/fixture/index.html | critical --base test/fixture > critical.css | ||
| ``` | ||
| $ cat test/fixture/index.html | critical --base test/fixture > critical.css | ||
| ``` | ||
| You can also pass in the critical CSS file as an option. | ||
| ```shell | ||
| critical test/fixture/index.html --base test/fixture > critical.css | ||
| ``` | ||
| $ critical test/fixture/index.html --base test/fixture > critical.css | ||
| ``` | ||
| ## Why? | ||
@@ -239,2 +267,3 @@ | ||
| ## Can I contribute? | ||
@@ -245,1 +274,6 @@ | ||
| free to open up an issue and we can discuss it. | ||
| ## License | ||
| Apache-2.0 © Addy Osmani |
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Major refactor
Supply chain riskPackage has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by4.96%
23816
- Number of package files
- increased by20%
6
- Lines of code
- increased by30.63%
418
- Number of lines in readme file
- increased by14.53%
268
Worsened metrics
- Dev dependency count
- increased by66.67%
5
- Number of medium supply chain risk alerts
- increased byInfinity%
1
Dependency changes
+ Addedarray-find-index@1.0.2(transitive)
+ Addedcamelcase@2.1.1(transitive)
+ Addedcamelcase-keys@2.1.0(transitive)
+ Addedclean-css@3.4.28(transitive)
+ Addedcommander@2.8.1(transitive)
+ Addedcurrently-unhandled@0.4.1(transitive)
+ Addeddom-serializer@0.1.0(transitive)
+ Addederror-ex@1.3.2(transitive)
+ Addedfind-up@1.1.2(transitive)
+ Addedfunction-bind@1.1.2(transitive)
+ Addedgraceful-readlink@1.0.1(transitive)
+ Addedhasown@2.0.2(transitive)
+ Addedhosted-git-info@2.8.9(transitive)
+ Addedindent-string@2.1.0(transitive)
+ Addedinline-critical@0.1.4(transitive)
+ Addedis-arrayish@0.2.1(transitive)
+ Addedis-core-module@2.15.1(transitive)
+ Addedis-utf8@0.2.1(transitive)
+ Addedload-json-file@1.1.0(transitive)
+ Addedloud-rejection@1.6.0(transitive)
+ Addedmeow@3.7.0(transitive)
+ Addednormalize-package-data@2.5.0(transitive)
+ Addedobject-assign@4.1.1(transitive)
+ Addedparse-json@2.2.0(transitive)
+ Addedpath-exists@2.1.0(transitive)
+ Addedpath-parse@1.0.7(transitive)
+ Addedpath-type@1.1.0(transitive)
+ Addedpenthouse@0.3.0(transitive)
+ Addedpify@2.3.0(transitive)
+ Addedread-pkg@1.1.0(transitive)
+ Addedread-pkg-up@1.0.1(transitive)
+ Addedredent@1.0.0(transitive)
+ Addedrepeating@2.0.1(transitive)
+ Addedresolve@1.22.8(transitive)
+ Addedsemver@5.7.2(transitive)
+ Addedsignal-exit@3.0.7(transitive)
+ Addedsource-map@0.4.4(transitive)
+ Addedspdx-correct@3.2.0(transitive)
+ Addedspdx-exceptions@2.5.0(transitive)
+ Addedspdx-expression-parse@3.0.1(transitive)
+ Addedspdx-license-ids@3.0.20(transitive)
+ Addedstrip-bom@2.0.0(transitive)
+ Addedstrip-indent@1.0.1(transitive)
+ Addedsupports-preserve-symlinks-flag@1.0.0(transitive)
+ Addedtrim-newlines@1.0.0(transitive)
+ Addedvalidate-npm-package-license@3.0.4(transitive)
- Removedcamelcase-keys@1.0.0(transitive)
- Removedcheerio@0.17.0(transitive)
- Removeddomhandler@2.2.1(transitive)
- Removedhtmlparser2@3.7.3(transitive)
- Removedinline-critical@0.0.9(transitive)
- Removedmeow@2.1.0(transitive)
- Removedpenthouse@0.2.53(transitive)
Updatedget-stdin@^4.0.1
Updatedinline-critical@^0.1.0
Updatedlodash@^3.2.0
Updatedmeow@^3.0.0
Updatedpenthouse@0.3.0