@s-ui/critical-css

Extract Critical CSS from a set of URLs for an app

Usage no npm install needed!

<script type="module">
  import sUiCriticalCss from 'https://cdn.skypack.dev/@s-ui/critical-css';
</script>

README

sui-critical-css

Extract Critical CSS from a set of URLs for an app

How it works

  1. Read the config options and routes provided.
  2. For each route, it opens a browser, navigate and extract the Critical CSS.
  3. Create a css file in the critical-css folder.
  4. After doing this for each route, then creates a critical.json file that could be read for every path to extract the critical-css.

How to use to extract

Install package to your project:

npm install @s-ui/critical-css -D

Programatical usage:

In order to extract critical css and match extracted files with your page or route you can use two approaches:

  • Using path-to-regex
  • Using page component displayName

You can combine both of them.

Using path-to-regex:

You can use Express Route Tester to create and validate that your Path-to-Regexp works as expected.

Example:

// scripts/get-critical-css-for-routes.js
import {extractCSSFromApp} from '@s-ui/critical-css'

const config = {
  hostname: 'http://localhost'
}

const routes = {
  '/:lang': {
    url: '/es'
  },
  '/:lang/catalogo-productos': {
    url: '/es/catalogo-productos'
  }
}

extractCSSFromApp({config, routes})

Using displayName

Example:

// scripts/get-critical-css-for-routes.js
import {extractCSSFromApp} from '@s-ui/critical-css'

// Page display names
const displayNames = {
  home: 'Home',
  list: 'List'
}

const config = {
  hostname: 'http://localhost'
}

const routes = {
  [displayNames.home]: {
    url: '/es'
  },
  [displayNames.list]: {
    url: '/es/catalogo-productos'
  }
}

extractCSSFromApp({config, routes})

Use in your server

You should execute this script on your CI before deploying/dockerizing your app.

node scripts/get-critical-css-for-routes.js