Purify AMP CSS
AMP pages currently have a 75KB CSS limit.
This package aims to help you stay within that limit by monkey patching the
Node HTTP ServerResponse so that when markup
is returned from the server the contents of the <style amp-custom>
element
can be run through PurifyCSS, removing any unused styles
and replacing with a purified and minified version.
As AMP pages are served from the AMP cache any performance hit taken when initially rendering the page shouldn't matter in production.
Installation
yarn add purify-amp-css -D
Usage
Here's an example using Express:
;; const app = app;
Here's an example using Node's HTTP server:
;;; http;
Here's an example using Next.js:
;; static async { const initialProps = await Document; ; return ...initialProps ; } { return <Html> <Head /> <body> <Main /> <NextScript /> </body> </Html> } ;
Configuration
An options object can be passed to the named export like so:
; const options = minify: true ; ;
Or when using the Express middleware:
; const options = minify: true ; app;
The following options are available:
Option | Description | Default |
---|---|---|
minify |
Minify the AMP CSS | true |
whitelist |
Array of selectors to always leave in | [] |
debug |
Log the amount of CSS that was removed | false |