Socket
Socket
Sign inDemoInstall

postcss-critical-css

Package Overview
Dependencies
193
Maintainers
1
Versions
22
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

postcss-critical-css

Generate critical CSS using PostCSS


Version published
Maintainers
1
Weekly downloads
511
decreased by-10.98%

Weekly downloads

Readme

Source

PostCSS Critical CSS

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.

Install

npm install postcss-critical-css --save

Examples

An example is available in this repo. See the /example directory, and use the command npm run example to test it out.

Usage examples

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.

Using the @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;
}

Using the @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;
}

Using the @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;
}

Using the custom property, 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;
}

Using the custom property, 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;
}

Using the custom property, 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;
}

Using the custom property, 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;
}

Plugin options

The plugin takes a single object as its only parameter. The following properties are valid:

ArgTypeDescriptionDefault
outputPathstringPath to which critical CSS should be outputCurrent working directory
outputDeststringDefault critical CSS file name"critical.css"
preservebooleanWhether 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
minifybooleanMinify output CSS?true

Keywords

FAQs

Last updated on 29 Dec 2020

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.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc