CSS missing only when logged in

[joseph-farruggio]

There are some styles that are being stripped from the page when i'm logged in.

Could this possibly be due to CSS tree shaking and also why the admin bar is not displayed?

[westonruter]

That's likely. If you view source of the page it should indicate which styles are specifically excessive and thus being removed. You should see a CSS manifest in an HTML comment right before the style[amp-custom] element.

Nevertheless, please test the latest pre-release: v1.3-RC1. In this new version the admin bar is exempted from validation, so its CSS (and JS!) is not sanitized. See #3187.

[joseph-farruggio]

After installing v1.3-RC1, some styles came back, but not all of them. The things that are still being excluded are:

• two background images via inline CSS
• inline background color on a form button
• I have a honeypot form field with inline CSS to move the field out of the viewport
• Styles affecting h2s. They are supposed to be center aliened, but for admins they are left aligned

What can I do to investigate this further?

[westonruter]

Share the HTML comment that appears before the style element.

[joseph-farruggio]

The style[amp-custom] element is populated with:
    75 B (24%): link#amp-default-css[rel=stylesheet][href=https://www.mightymoms.club/wp-content/plugins/amp/assets/css/amp-default.css?ver=1.3-RC1-20190918T205018Z-820046ad][type=text/css][media=all]
   600 B (5%): link#wp-block-library-css[rel=stylesheet][href=https://www.mightymoms.club/wp-includes/css/dist/block-library/style.min.css?ver=5.2.3][type=text/css][media=all]
 16637 B (58%): link#mightymoms-style-css[rel=stylesheet][href=https://www.mightymoms.club/wp-content/themes/mightymoms/dist/css/style.min.css?ver=20190420][type=text/css][media=all]
  2014 B (79%): link#yoast-seo-adminbar-css[rel=stylesheet][href=https://www.mightymoms.club/wp-content/plugins/wordpress-seo-premium/css/dist/adminbar-1210.min.css?ver=12.1][type=text/css][media=all]
   522 B: style[type=text/css]
    29 B: style[type=text/css]
     0 B: style[type=text/css]
  3203 B (67%): link#wpcom-notes-admin-bar-css[rel=stylesheet][href=https://s0.wp.com/wp-content/mu-plugins/notes/admin-bar-v2.css?ver=7.7.1-201938][type=text/css][media=all]
 26254 B (90%): link#noticons-css[rel=stylesheet][href=https://s0.wp.com/i/noticons/noticons.css?ver=7.7.1-201938][type=text/css][media=all]
   219 B: a.image amp-wp-5f3b862[href=https://www.mightymoms.club/toddler-care/toddler-curly-hair/]
    74 B: div.wp-block-spacer amp-wp-4532fbd[aria-hidden=true]
    87 B: section.subscribe-box mm-block full has-image amp-wp-a9a596c
    93 B: div.offscreen amp-wp-4bb72de[aria-hidden=true]
    76 B: span.amp-wp-dc2af39[visible-when-invalid=typeMismatch][validation-for=email-block_5cf890c27c1d5]
    74 B: div.wp-block-spacer amp-wp-3b36a7e[aria-hidden=true]
Total included size: 49,957 bytes (62% of 80,259 total after tree shaking)

The following stylesheets are too large to be included in style[amp-custom]:
  5334 B (22%): link#googlesitekit_adminbar_css-css[rel=stylesheet][href=https://www.mightymoms.club/wp-content/plugins/google-site-kit/dist/assets/css/adminbar.css?ver=1.0.0-beta.1.0.6][type=text/css][media=all]
    39 B: style[type=text/css][media=print]
   430 B: style[type=text/css]
   224 B: a.image amp-wp-89fc51d[href=https://www.mightymoms.club/baby-sleep/sleep-apnea-in-children/]
   228 B: a.image amp-wp-c81a4ac[href=https://www.mightymoms.club/family-halloween/baby-costumes/]
    73 B: p.amp-wp-421b998
   206 B: input#mc-embedded-subscribe.button amp-wp-935b37f[type=submit][value=Request Your Copy][name=subscribe]
    80 B: p.amp-wp-13076d9
Total excluded size: 6,614 bytes (26% of 24,898 total after tree shaking)

Total combined size: 56,571 bytes (53% of 105,157 total after tree shaking)

[westonruter]

Excellent. The issue is the “Notes” module in Jetpack. If you turn that off that module then the CSS should no longer be a problem.

I have a PR open for Jetpack which includes direct support for this: Automattic/jetpack#13450

It looks like I need to open a PR for Yoast as well.

Nevertheless, instead of deactivating the Jetpack module you can also just add this code to your custom theme or plugin to mark the stylesheets as being in AMP dev mode:

add_filter(
	'amp_dev_mode_element_xpaths',
	function ( $xpaths ) {
		$ids = [
			'yoast-seo-adminbar-css',
			'wpcom-notes-admin-bar-css',
			'noticons-css',
			// Add more element IDs as desired.
		];
		foreach ( $ids as $id ) {
			$xpaths[] = sprintf( '//*[ @id = "%s" ]', $id );
		}
		return $xpaths;
	}
);

[joseph-farruggio]

Dude. Thanks so much. Everything works as expected now.

[westonruter]

Opened PR to add AMP dev mode support for WordPress SEO: Yoast/wordpress-seo#13502