Skip to content

docs: switch to dropcss in AMP example #10546

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 10 commits into from
Aug 23, 2023
Merged

docs: switch to dropcss in AMP example #10546

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
ac3e0ad
fix: switch to dropcss
ghostdevv Aug 12, 2023
acf9255
fix: use buffer
ghostdevv Aug 12, 2023
7e68c71
fix: cleanup
ghostdevv Aug 12, 2023
323d528
play it safe
ghostdevv Aug 12, 2023
4ccca14
docs: add note about adding amp to html
ghostdevv Aug 12, 2023
930273d
docs: add dropcss note
ghostdevv Aug 12, 2023
052d5cd
Merge remote-tracking branch 'upstream/master' into amp-purify-css
ghostdevv Aug 12, 2023
b614da2
fix: tabs
ghostdevv Aug 12, 2023
0fd9493
Update documentation/docs/40-best-practices/20-seo.md
ghostdevv Aug 12, 2023
50f46cc
Update documentation/docs/40-best-practices/20-seo.md
dummdidumm Aug 23, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
47 changes: 45 additions & 2 deletions documentation/docs/40-best-practices/20-seo.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.
2 changes: 1 addition & 1 deletion packages/kit/test/apps/amp/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
14 changes: 14 additions & 0 deletions packages/kit/test/apps/amp/src/app.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 };
}
2 changes: 1 addition & 1 deletion packages/kit/test/apps/amp/src/app.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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" />
Expand Down
21 changes: 8 additions & 13 deletions packages/kit/test/apps/amp/src/hooks.server.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
}
Loading