remove built-in AMP support

[Rich-Harris]

• fixes Move amp support to a plugin #2603
• fixes AMP rendered as a separate page with canonical link #1308
• fixes AMP hybrid mode just like next.js #4029

This removes the amp: true config option in favour of a more appropriate solution (we despise AMP and want to hasten its demise, but still need to provide some way for people to deal with it).

It adds a new @sveltejs/kit/amp module which exports a transform function, which:

• removes all <script> tags
• ensures there are no <link rel="stylesheet"> elements
• adds an amp-custom attribute to <style>
• removes <meta http-equiv> elements
• adds the AMP boilerplate
• adds <amp-install-serviceworker> if appropriate
• CSP CSP support for AMP pages #3557

Some of these are TODO and I haven't quite figured out how to solve them. Also TODO:

• docs

Using it is relatively straightforward — set inlineStyleThreshold to Infinity (external stylesheets are disallowed), and add the following to src/hooks.js:

import * as amp from '@sveltejs/kit/amp';

/** @type {import('@sveltejs/kit').Handle} */
export function handle({ event, resolve }) {
  return resolve(event, {
    transformPage: ({ html }) => amp.transform(html);
  });
}

One thing we lose is the ability to exclude CSS from components that are imported but not rendered for a given page. Given AMP's wholly arbitrary CSS size limit, that can be a problem. This can be solved (at least for prerendered pages, where it doesn't matter how expensive this sort of processing is) with something like https://github.com/purifycss/purifycss:

import purify from 'purify-css';
import * as amp from '@sveltejs/kit/amp';

/** @type {import('@sveltejs/kit').Handle} */
export function handle({ event, resolve }) {
  return resolve(event, {
    transformPage: ({ html }) => {
      html = amp.transform(html);

      // remove unused CSS
      let css = '';
      const markup = html.replace(
        /<style([^>]*?)>([^]+?)<\/style>/,
        (match, attributes, contents) => {
          css = contents;
          return `<style${attributes}></style>`;
        }
      );

      css = purify(markup, css);
      return markup.replace('</style>', `${css}</style>`);
    }
  });
}

It's not quite as turnkey as the current solution, but it's fine.

Another thing we lose is validation. This, too, can easily be solved in userland by using amphtml-validator directly.

Please don't delete this checklist! Before submitting the PR, please make sure you do the following:

• It's really useful if your PR references an issue where it is discussed ahead of time. In many cases, features are absent for a reason. For large changes, please create an RFC: https://github.com/sveltejs/rfcs
• This message body should clearly illustrate what problems it solves.
• Ideally, include a test that fails without this PR but passes with it.

Tests

• Run the tests with pnpm test and lint the project with pnpm lint and pnpm check

Changesets

• If your PR makes a change that should be noted in one or more packages' changelogs, generate a changeset by running pnpx changeset and following the prompts. All changesets should be patch until SvelteKit 1.0

[changeset-bot]

🦋 Changeset detected

Latest commit: 4c96bff

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@sveltejs/kit	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[Rich-Harris]

cc @john-michael-murphy as I know this'll probably affect you lot

[john-michael-murphy]

Migration looks doable. Thank you for the heads up. AMP is such a thorn!

[Rich-Harris]

There's no good way to do automatic service worker installation (the transformer can't read the config, or paths.base etc), so i'm going to leave that to users, who can easily inject <amp-install-serviceworker> themselves

[benmccann]

having kit in the name kit-amp seems a bit redundant. maybe just amp?

[Rich-Harris]

having kit in the name kit-amp seems a bit redundant. maybe just amp?

originally i was thinking that we might end up having kit-specific stuff in there, but i'm inclined to do this just because my muscles are so used to cd pac[tab]/k[tab]/t[tab]/a[tab]/b[tab taking me to packages/kit/test/apps/basics and it doesn't any more, and it will make me resent AMP even more than i currently do