@s-ui/critical-css

1.32.0 • Public • Published

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.
  5. Use then @s-ui/critical-css-middleware to extract to use in your Express app the CSS.

How to use to extract

Install package to your project:

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

Programmatic 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.

Additionally there are two optional config parameters:

  • requiredClassNames: A list of required css class names. If they aren't present in the generated Critical CSS, it would be discarded. By default there would be 2 retries to try to get the correct Critical CSS
  • retries: Number of retries if the requiredClassNames aren't present in the Critical CSS. By default it's 2.

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', '/en/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',
    requiredClassNames: ['.ma-AdCardV2'],
    retries: 3
  }
}

extractCSSFromApp({config, routes})

/@s-ui/critical-css/

    Package Sidebar

    Install

    npm i @s-ui/critical-css

    Weekly Downloads

    4,410

    Version

    1.32.0

    License

    ISC

    Unpacked Size

    11.2 kB

    Total Files

    7

    Last publish

    Collaborators

    • alejandro.ferrante
    • ivanmlaborda
    • salvador.juan
    • andresin87.adevinta
    • izeller
    • gfabregoadv
    • a.ferrer
    • ignacio_navarro
    • oscar_ramirez
    • jordi.munoz
    • joanleon-adv
    • aitor.rodriguez
    • luis-garrido
    • jenifer.lopez
    • isabelgomez87
    • pa.chruscinski.ext
    • schibstedspain
    • alfredo.arronte
    • belen.santos
    • xavi_ballestar
    • ferrangbtw
    • jamile.radloff
    • davidmartin2108
    • sergi.quintela
    • estefania_garcia
    • carlosvillu-adevinta
    • miriam-gil
    • arnau.guell
    • ferran.simon
    • victor.perez.adevinta
    • mariapaula.forero.ext
    • oscar.gomez
    • david.nieto
    • oriol.puig
    • nacho_torrella
    • xavi.murcia
    • ignacio.rodriguez
    • francisco.ruiz.lloret
    • sziauberyte
    • alfredo.zimperz
    • andresadv
    • javiauso
    • alverd004
    • marian.lucaci
    • pablogs
    • alisa_bayanova
    • cristhianb
    • sergiocollado
    • pablo.rey-adevinta
    • beatrizip
    • alex.castells
    • david.cuadrado.ext
    • giovanny.sayas.ext
    • patricio.sartore
    • azahara
    • marc.benito
    • sergio.escano
    • cristina.rodriguez.duque
    • pol.valls
    • frandelacasa-adevinta
    • carolina.mallo.ext
    • daniel.perez.ext
    • hpintos_adevinta
    • carlos.gonzalezl
    • albert.peiro
    • oscar-raig-adevinta
    • thomas.page.ext
    • sebastian.badea.adevinta
    • victoria.pasichnyk.ext
    • sendami.luque.ext
    • luz_adv
    • alfredo.narvaez
    • ruben-martin
    • dann41
    • emiliovz
    • adria.velardos
    • arturo.vicente
    • diegomr
    • sergi.martinez.adevinta
    • guillemgc3
    • frontend-jobs
    • javiermiguel
    • atilioscolaroadv
    • crotundu.adevinta
    • candymd
    • florinz
    • denis_z
    • anya_ok
    • hector-prieto-moreno