Security News
GitHub Removes Malicious Pull Requests Targeting Open Source Repositories
GitHub removed 27 malicious pull requests attempting to inject harmful code across multiple open source repositories, in another round of low-effort attacks.
criticalcss
Advanced tools
Finds the Above the Fold CSS for your page, and outputs it into a file
Finds the Above the Fold CSS for your page, and outputs it into a file
Install the module with: npm install criticalcss
var criticalcss = require("criticalcss");
criticalcss.findCritical("path/to/file/or/url", options (only rules required), function(err, output){
if( err ){
throw new Error( err );
} else {
fs.writeFileSync( filename, output );
}
});
criticalcss.getRules("path/to/css/file/", function(err, output){
if( err ){
throw new Error( err );
} else {
fs.writeFileSync( filename, output );
}
});
Using both together:
var request = require('request');
var path = require( 'path' );
var criticalcss = require("criticalcss");
var fs = require('fs');
var tmpDir = require('os').tmpdir();
var cssUrl = 'http://site.com/style.css';
var cssPath = path.join( tmpDir, 'style.css' );
request(cssUrl).pipe(fs.createWriteStream(cssPath)).on('close', function() {
criticalcss.getRules(cssPath, function(err, output) {
if (err) {
throw new Error(err);
} else {
criticalcss.findCritical("https://site.com/", { rules: JSON.parse(output) }, function(err, output) {
if (err) {
throw new Error(err);
} else {
console.log(output);
}
});
}
});
});
.findCritical
Takes url or path to file, an options hash, and a callback function
width
: 1200;height
: 900;forceInclude
: [];rules
: []; // REQUIREDbuffer
: 800*1024;ignoreConsole
: false;Type: Integer
Default value: 1200
The width of the window being used for determining "above the fold"
Type: Integer
Default value: 900
The height of the window being used for determining "above the fold"
Type: Array
Default value: []
An array of selectors that should be included in the critical css no matter what. This is sometimes necessary with js-enhanced components.
Type: Array
Default value: []
A JSON.stringify
d version of a
CSSRuleList
Type: Integer
Default value: 800*1024
Sets the maxBuffer
for child_process.execFile in Node.
Necessary for potential memory issues.
Type: Boolean
Default value: false
Since criticalCSS handles output from STDOUT, it will also catch any
outputs to console
that are in the JavaScript on a page. If set to
true
, those will be silenced.
.getRules
Takes a path to the CSS file and a callback function and returns a JSON.stringify
'd subset of a CSSRuleList
buffer
: 800*1024;Sure, we got that.
Commands:
run Run criticalcss
Options:
--help Show help [boolean]
-u, --url The url you would like to run criticalcss against
[string] [required]
-f, --file The local css file you're referencing for criticalcss
[string] [required]
-w, --width The width of your viewport [default: 1200]
-h, --height The height of your viewport [default: 900]
-o, --output The name of your output css file
[string] [default: "dist/dist.css"]
-b, --buffer Specifies the largest amount of data allowed on
stdout or stderr - if this value is exceeded then the
child process is killed [default: 819200]
--force, --forceInclude Sometimes selectors need to be forced into the
criticalcss [array] [default: []]
-i, --ignoreConsole Criticalcss will pick up console errors, set this to
ignore them [boolean] [default: false]
Check out the tests!
In lieu of a formal styleguide, take care to maintain the existing coding style. Add unit tests for any new or changed functionality. Lint and test your code using Grunt.
ignoreConsole
optiongetRules
and moved to passing in a required Array
of rules into the options hash on findCritical
forceInclude
functionality. This allows the user to
pass in an array of strings that are selectors. These selectors, if
found in the CSS, will be treated as though they are above the fold and
will therefore be automatically included.Copyright (c) 2014 Scott Jehl/Jeffrey Lembeck/Filament Group Licensed under the MIT license.
FAQs
Finds the Above the Fold CSS for your page, and outputs it into a file
The npm package criticalcss receives a total of 81 weekly downloads. As such, criticalcss popularity was classified as not popular.
We found that criticalcss demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 3 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
GitHub removed 27 malicious pull requests attempting to inject harmful code across multiple open source repositories, in another round of low-effort attacks.
Security News
RubyGems.org has added a new "maintainer" role that allows for publishing new versions of gems. This new permission type is aimed at improving security for gem owners and the service overall.
Security News
Node.js will be enforcing stricter semver-major PR policies a month before major releases to enhance stability and ensure reliable release candidates.