Security News
New Proposed CISA Mandate Would Require Critical Infrastructure to Report Ransom Payments Within 24 Hours
CISA has proposed a set of new rules that would require critical infrastructure to report cyber incidents and ransom payments.
postcss-critical-css
Advanced tools
Generate critical CSS using PostCSS
Weekly downloads
Readme
This plugin allows the user to define and output critical CSS using custom atRules, and/or custom CSS properties. Critical CSS may be output to one or more files, as defined within the plugin options and/or within the CSS. Depending on the plugin options used, processed CSS may be left unchanged, or critical CSS may be removed from it.
npm install postcss-critical-css --save
An example is available in this repo. See the /example
directory, and use the command npm run example
to test it out.
All examples given below show the input CSS and the critical CSS that is output from it. Note that the input CSS will remain unchanged, unless preserve
is set to false
in the plugin options. Use npm run example
to see how this works.
@critical
atRule/* In foo.css */
@critical;
.foo {
border: 3px solid gray;
display: flex;
padding: 1em;
}
Will output:
/* In critical.css */
.foo {
border: 3px solid gray;
display: flex;
padding: 1em;
}
@critical
atRule with a custom file path/* In foo.css */
@critical bar.css;
.foo {
border: 3px solid gray;
display: flex;
padding: 1em;
}
Will output:
/* In bar.css */
.foo {
border: 3px solid gray;
display: flex;
padding: 1em;
}
@critical
atRule with a subset of styles/* In foo.css */
.foo {
border: 3px solid gray;
display: flex;
padding: 1em;
}
@critical {
.bar {
border: 10px solid gold;
color: gold;
}
}
Will output:
/* In critical.css */
.bar {
border: 10px solid gold;
color: gold;
}
critical-selector
/* In foo.css */
.foo {
critical-selector: this;
border: 3px solid gray;
display: flex;
padding: 1em;
}
Will output:
/* In critical.css */
.foo {
border: 3px solid gray;
display: flex;
padding: 1em;
}
critical-selector
, with a custom selector./* In foo.css */
.foo {
critical-selector: .bar;
border: 3px solid gray;
display: flex;
padding: 1em;
}
Will output:
/* In critical.css */
.bar {
border: 3px solid gray;
display: flex;
padding: 1em;
}
critical-filename
/* in foo.css */
.foo {
critical-selector: this;
critical-filename: secondary-critical.css;
border: 3px solid gray;
display: flex;
padding: 1em;
}
Will output:
/* In secondary-critical.css */
.foo {
border: 3px solid gray;
display: flex;
padding: 1em;
}
critical-selector
, with value scope
This allows the user to output the entire scope of a module, including children.
/* in foo.css */
.foo {
critical-selector: scope;
border: 3px solid gray;
display: flex;
padding: 1em;
}
.foo a {
color: blue;
text-decoration: none;
}
Will output:
/* In critical.css */
.foo {
border: 3px solid gray;
display: flex;
padding: 1em;
}
.foo a {
color: blue;
text-decoration: none;
}
The plugin takes a single object as its only parameter. The following properties are valid:
Arg | Type | Description | Default |
---|---|---|---|
outputPath | string | Path to which critical CSS should be output | Current working directory |
outputDest | string | Default critical CSS file name | "critical.css" |
preserve | boolean | Whether or not to remove selectors from primary CSS document once they've been marked as critical. This should prevent duplication of selectors across critical and non-critical CSS. | true |
minify | boolean | Minify output CSS? | true |
FAQs
Generate critical CSS using PostCSS
The npm package postcss-critical-css receives a total of 419 weekly downloads. As such, postcss-critical-css popularity was classified as not popular.
We found that postcss-critical-css demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer 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
CISA has proposed a set of new rules that would require critical infrastructure to report cyber incidents and ransom payments.
Security News
Redis is no longer OSS, breaking its explicit commitment to remain under the BSD 3-Clause License forever. This has angered contributors who are now working to fork the software.
Product
Socket AI now enables 'AI detected potential malware' alerts by default, ensuring users benefit from AI-powered state-of-the-art malware detection without needing to opt-in.