• 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