Use rendered rather than emitted CSS in AMP mode

[Rich-Harris]

Is your feature request related to a problem? Please describe.
AMP pages have a strict (and somewhat arbitrary) limit on the amount of CSS a page can include. They also provide a guarantee that doesn't exist in non-AMP mode, namely that if condition is false at SSR time...

<script>
  import Foo from '$lib/components/Foo.svelte';

  export let condition;
</script>

{#if condition}
  <Foo/>
{/if}

...we can safely omit the styles emitted by Foo.svelte.

It would be nice if we could take advantage of that and only include styles for components that were rendered, to increase the likelihood of staying beneath the 75kb ceiling.

Describe the solution you'd like

• Configure the Svelte plugin to not emit CSS in AMP mode
• Use rendered.css instead of inspecting the module graph

How important is this feature to you?
It depends on the outcome of the research we plan to conduct on how much traffic our app would lose if we told AMP to bugger off once and for all.

[quantuminformation]

I'm not too bothered by it, I just had to Google about it today when I noticed amp in the code

[jerriclynsjohn]

@Rich-Harris I think its absolutely relevant to also think about adding an option for AMP to output AMP compliant HTML to a different folder, apart from the actual HTML. I've given an example in this issue #1308. Also, how can we handle CSS when we use preprocessor, I've described the problem that I faced when I'm using tailwindCSS in this issue #1310

[benmccann]

Is there any reason to use AMP anymore? Google no longer prioritizes it in search results: https://www.lafoo.com/the-end-of-amp/. I would think you'd be better off not using it and that we'd be better off to drop support for it

[jerriclynsjohn]

I hope they ditch AMP too but they've recently invested in AMP stories and they are promoting that pretty strongly. I think Google will improve AMP implementation instead of just dropping it.