docs: switch to dropcss in AMP example (#10546)

Closes #10536 Switch to using dropcss Add note about removing css in the docs Add note in docs about adding <html amp> as we don't do that anywhere. I also want to discourage people from using ⚡ since dropcss doesn't support it - people definitely will be using it so I've added a safeguard (.replace('⚡', 'amp')) --------- Co-authored-by: Puru Vijay <47742487+PuruVJ@users.noreply.github.com> Co-authored-by: Simon H <5968653+dummdidumm@users.noreply.github.com>
sveltejs · Aug 23, 2023 · d407c75 · d407c75
1 parent 7c37a2f
commit d407c75
Show file tree

Hide file tree

Showing 6 changed files with 76 additions and 389 deletions.
diff --git a/documentation/docs/40-best-practices/20-seo.md b/documentation/docs/40-best-practices/20-seo.md
@@ -106,21 +106,64 @@ export default config;
 export const csr = false;
 ```
 
+...adding `amp` to your `app.html`
+
+```html
+<html amp>
+...
+```
+
 ...and transforming the HTML using `transformPageChunk` along with `transform` imported from `@sveltejs/amp`:
 
 ```js
+/// file: src/hooks.server.js
 import * as amp from '@sveltejs/amp';
 
 /** @type {import('@sveltejs/kit').Handle} */
 export async function handle({ event, resolve }) {
 	let buffer = '';
-	return resolve(event, {
+	return await resolve(event, {
 		transformPageChunk: ({ html, done }) => {
 			buffer += html;
-			if (done) return amp.transform(html);
+			if (done) return amp.transform(buffer);
 		}
 	});
 }
 ```
 
+To prevent shipping any unused CSS as a result of transforming the page to amp, we can use [`dropcss`](https://www.npmjs.com/package/dropcss):
+
+```js
+/// file: src/hooks.server.js
+// @errors: 2307
+import * as amp from '@sveltejs/amp';
+import dropcss from 'dropcss';
+
+/** @type {import('@sveltejs/kit').Handle} */
+export async function handle({ event, resolve }) {
+	let buffer = '';
+
+	return await resolve(event, {
+		transformPageChunk: ({ html, done }) => {
+			buffer += html;
+
+			if (done) {
+				let css = '';
+				const markup = amp
+					.transform(buffer)
+					.replace('⚡', 'amp') // dropcss can't handle this character
+					.replace(/<style amp-custom([^>]*?)>([^]+?)<\/style>/, (match, attributes, contents) => {
+						css = contents;
+						return `<style amp-custom${attributes}></style>`;
+					});
+
+				css = dropcss({ css, html: markup }).css;
+				return markup.replace('</style>', `${css}</style>`);
+			}
+		}
+	});
+}
+
+```
+
 > It's a good idea to use the `handle` hook to validate the transformed HTML using `amphtml-validator`, but only if you're prerendering pages since it's very slow.
diff --git a/packages/kit/test/apps/amp/package.json b/packages/kit/test/apps/amp/package.json
@@ -15,7 +15,7 @@
 		"@sveltejs/amp": "workspace:^",
 		"@sveltejs/kit": "workspace:^",
 		"cross-env": "^7.0.3",
-		"purify-css": "^1.2.5",
+		"dropcss": "^1.0.16",
 		"svelte": "^4.0.5",
 		"svelte-check": "^3.4.4",
 		"typescript": "^4.9.4",

diff --git a/packages/kit/test/apps/amp/src/app.d.ts b/packages/kit/test/apps/amp/src/app.d.ts
@@ -1 +1,15 @@
 /// <reference types="@sveltejs/kit" />
+
+declare module 'dropcss' {
+	interface Options {
+		html: string;
+		css: string;
+
+		shouldDrop?: (selector: string) => boolean;
+		didRetain?: (selector: string) => void;
+
+		keepText?: boolean;
+	}
+
+	export default function dropcss(options: Options): { css: string };
+}
diff --git a/packages/kit/test/apps/amp/src/app.html b/packages/kit/test/apps/amp/src/app.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html ⚡ lang="en">
+<html lang="en" amp>
 	<head>
 		<meta charset="utf-8" />
 		<meta name="viewport" content="width=device-width" />

diff --git a/packages/kit/test/apps/amp/src/hooks.server.js b/packages/kit/test/apps/amp/src/hooks.server.js
@@ -1,32 +1,27 @@
-import purify from 'purify-css';
 import * as amp from '@sveltejs/amp';
+import dropcss from 'dropcss';
 
 /** @type {import('@sveltejs/kit').Handle} */
 export async function handle({ event, resolve }) {
 	let buffer = '';
 
-	const response = await resolve(event, {
+	return await resolve(event, {
 		transformPageChunk: ({ html, done }) => {
 			buffer += html;
 
 			if (done) {
-				const html = amp.transform(buffer);
-
-				// remove unused CSS
 				let css = '';
-				const markup = html.replace(
-					/<style amp-custom([^>]*?)>([^]+?)<\/style>/,
-					(match, attributes, contents) => {
+				const markup = amp
+					.transform(buffer)
+					.replace('⚡', 'amp')
+					.replace(/<style amp-custom([^>]*?)>([^]+?)<\/style>/, (match, attributes, contents) => {
 						css = contents;
 						return `<style amp-custom${attributes}></style>`;
-					}
-				);
+					});
 
-				css = purify(markup, css);
+				css = dropcss({ css, html: markup }).css;
 				return markup.replace('</style>', `${css}</style>`);
 			}
 		}
 	});
-
-	return response;
 }