purify-amp-css
v1.1.1
Published
A Jest matcher to validate AMP markup
Downloads
7
Maintainers
alexmendesReadme
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 -DUsage
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 |