Skip to content
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.

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

✨ Version lock CSS #17562

Merged
merged 4 commits into from Aug 17, 2018
Merged

Conversation

jridgewell
Copy link
Contributor

This ensures that when an AMP doc is Server Side Rendered (by inlining
the v0.css or any extension's CSS into the doc), the inlined styles are
exactly what the JS expects. This eliminates the possibility of version
skew for pages that use cached v0.js but inlined CSS.

This ensures that when an AMP doc is Server Side Rendered (by inlining
the v0.css or any extension's CSS into the doc), the inlined styles are
exactly what the JS expects. This eliminates the possibility of version
skew for pages that use cached v0.js but inlined CSS.
@@ -131,6 +131,7 @@ export function installStylesLegacy(
* @return {!Element}
*/
function insertStyleElement(cssRoot, cssText, isRuntimeCss, ext) {
cssText = cssText.trim();
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Do we need to trim?
Because if we do we should make it so that we don't have to.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

No, AMP Cache doesn't.

But, I'm concerned with pub SSR generating:

<style>
/* whitespace *//* CSS */
/* whitespace */</style>

If they do that, I didn't want to override the CSS and cause a reparse. And if we allow it to remain, we would need to strip the value when installing CSS into child windows.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We should consider that invalid for SSR. @honeybadgerdontcare

Let's avoid the trimming here. It may increase memory usage.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Removed the trimming.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Agreed, we can assist with pub SSR generation. Filed b/112736946 and b/112737536.

@@ -146,6 +147,9 @@ function insertStyleElement(cssRoot, cssText, isRuntimeCss, ext) {
if (key) {
const existing = getExistingStyleElement(cssRoot, styleMap, key);
if (existing) {
if (existing.textContent.trim() !== cssText) {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can we add a test for this?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Done.

@erwinmombay erwinmombay merged commit 8d2f106 into ampproject:master Aug 17, 2018
@jridgewell jridgewell deleted the version-lock-css branch August 17, 2018 17:59
Enriqe pushed a commit to Enriqe/amphtml that referenced this pull request Nov 28, 2018
* Version lock CSS

This ensures that when an AMP doc is Server Side Rendered (by inlining
the v0.css or any extension's CSS into the doc), the inlined styles are
exactly what the JS expects. This eliminates the possibility of version
skew for pages that use cached v0.js but inlined CSS.

* Tests

* Don't trim

* Don't trim
@jridgewell jridgewell added this to To do in Make Malte, Dima, Justin Happy via automation Feb 23, 2019
@jridgewell jridgewell moved this from To do to Done in Make Malte, Dima, Justin Happy Feb 23, 2019
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Development

Successfully merging this pull request may close these issues.

None yet

5 participants