❤
npm
Sign UpSign In

purify-amp-css

1.1.1 • Public • Published

Purify AMP CSS

npm version

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:

import express from 'express';
import purifyAmpCss from 'purify-amp-css';
 
const app = express()
 
app.use(purifyAmpCss.middleware());

Here's an example using Node's HTTP server:

import http from 'http';
import { purifyAmpCss } from 'purify-amp-css';
import myAmpMarkup from './some/markup';
 
http.createServer((req, res) => {
  purifyAmpCss(req, res);
 
  res.end(myAmpMarkup);
}).listen(8080);

Here's an example using Next.js:

import Document, { Html, Head, Main, NextScript } from 'next/document';
import { purifyAmpCss } from 'purify-amp-css';
 
class MyDocument extends Document {
  static async getInitialProps(ctx) {
    const initialProps = await Document.getInitialProps(ctx);
 
    purifyAmpCss(ctx.req, ctx.res);
 
    return { ...initialProps };
  }
 
  render() {
    return (
      <Html>
        <Head />
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    )
  }
}
 
export default MyDocument;

Configuration

An options object can be passed to the named export like so:

import { purifyAmpCss } from 'purify-amp-css';
 
const options = { minify: true };
 
purifyAmpCss(req, res, options);

Or when using the Express middleware:

import purifyAmpCss from 'purify-amp-css';
 
const options = { minify: true };
 
app.use(purifyAmpCss.middleware(options));

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

Readme

Keywords

Package Sidebar

Install

npm i purify-amp-css

Repository

github.com/alexandermendes/purify-amp-css

Homepage

github.com/alexandermendes/purify-amp-css#readme

Weekly Downloads

0

Version

1.1.1

License

MIT

Unpacked Size

13.2 kB

Total Files

4

Last publish

Collaborators

  • alexmendes
Try on RunKit
Report malware