🚀 [Story performance] Set up story prestyle #35829
Conversation
build-system/tasks/css/index.js
Outdated
| @@ -75,6 +75,13 @@ const cssEntryPoints = [ | |||
| outCss: 'amp-story-player-shadow-v0.css', | |||
| append: false, | |||
| }, | |||
| { | |||
| // Story CSS used to layout story before JS loads. | |||
| path: 'amp-story-prestyle.css', | |||
There was a problem hiding this comment.
I'm not a big fan of "prestyle" since it's technically all the styles. We don't even need to include the CSS in the JS bundle when this is loaded, and this is def something we should look into very soon.
I'm open to anything, but since the script is amp-story-1.0.js, should we do amp-story-1.0.css?
There was a problem hiding this comment.
SG to change the name since we're including the CSS styles of amp-story, but it would be confusing to name it amp-story-1.0.css since there's already a CSS output at https://cdn.ampproject.org/v0/amp-story-1.0.css. I think it might even clash the paths so we shouldn't do that. What about amp-story-v1.css that matches all the other exported CSS files in this list?
There was a problem hiding this comment.
I honestly think the correct way forward might be to use amp-story-1.0.css, not even generate a new target, and down the line remove it from the JS bundle. From our convo with @jridgewell this should be super easy to do
css/amp-story-prestyle.css
Outdated
| } | ||
| .i-amphtml-notbuilt > * { | ||
| display: initial; | ||
| } |
There was a problem hiding this comment.
This is OK for this boilerplate PR but as we discussed, in the next PR this should be a @import 'amp-story.css'
There was a problem hiding this comment.
Yes, I think some of these styles will still be needed (they are not in amp-story.css) but on the next PR I'll import the CSS and deal with it.
| <link rel="preconnect" href="https://fonts.googleapis.com"> | ||
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> | ||
| <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&display=swap" rel="stylesheet"> | ||
| <link rel="stylesheet" href="/css/amp-story-prestyle.css"> |
There was a problem hiding this comment.
This should be https://cdn.ampproject.org/v0/amp-story-1.0.css and get automatically rewritten. Can you look into what that involves and/or create a ticket?
Set up visual tests and CSS deployment for prestyle.