compile-critical-css v0.1.2

compile-critical-css

Compile css to critical css function

Installation

npm i compile-critical-css

or

yarn add compile-critical-css

Usage

const { compile } = require( 'compile-critical-css' )

const fnString = compile( `
  .a, .b { color: #000 }
  #c { color: #111 }
  div { color: #222 }

  @media print {
    .d {
      color: #ddd;
    }

    .e {
      color: #f2f2f2;
    }
  }

  @keyframes move {
    from { top: 0px; }
    to { top: 100px; }
  }
` )

Then write fnString to ./path/to/fn.js, and module.exports it

In another file, require the compiled function

const getCriticalCSS = require( './path/to/fn.js' )

const css = getCriticalCSS( [
  'a',
  'e',
] )

The css will be

.a, .b { color: #000 }
#c { color: #111 }
div { color: #222 }

@media print {
  .e {
    color: #f2f2f2;
  }
}

@keyframes move {
  from { top: 0px; }
  to { top: 100px; }
}

Inline this in your html file, enjoy it!

License

MIT