Jetpack: Concatenated jetpack.css should only include CSS for active modules

[joendotcom]

From https://developer.jetpack.com/hooks/jetpack_implode_frontend_css/ :

Instead of including a separate CSS file for each Jetpack feature, Jetpack enqueues only one file, built by concatenating all CSS from all Jetpack features. This limit the number of requests made when loading a site.

However, the CSS file could be a lot more compact by only including the CSS for modules in use.

Steps to reproduce the issue

Note: To test this, set up a Jetpack with only Subscriptions module enabled and make sure to add the Blog Subscriptions widget.

1. Load Jetpack site and check network console. A ~12KB jetpack.css file will be loaded.

1. Add the filter add_filter( 'jetpack_implode_frontend_css', '__return_false' );

2. Load Jetpack site and check network console. A ~307B subscriptons.css file will be loaded:
   

What I expected

Jetpack only includes CSS for active modules

What happened instead

Jetpack includes all CSS.

Ref: 636984-zen

[kraftbj]

I'm on the fence of considering this as a duplicate of https://github.com/Automattic/jetpack/issues/1258 .

I believe at the time of implementation, working on-the-fly concatenation provided a performance hit for typical installs vs the one file approach.

The feature is probably due, at some point, for a refactor, namely after one of the major servers start offering server push on HTTP2, since individual files would be better in those cases, etc.

[georgestephanis]

I think this is a "PRs Welcome" issue. I'd love to only serve up the relevant modules, maybe storing a cached concatenated css file in the uploads directory somewhere?

[georgestephanis]

Incidentally, it doesnt include all css, just those we decided are worth the tradeoff -- small or common ones to save on http requests and connections.

[joendotcom]

@kraftbj

I'm on the fence of considering this as a duplicate of #1258 .

Apologies, I misread that issue as closed. Certainly related.

[kraftbj]

maybe storing a cached concatenated css file in the uploads directory somewhere?

Yeah, maybe something like:

1. have an option set if a custom file is done (created and verified it exists)
2. if the option is not set, use jetpack.css as is or just implode false, kick off a cron job to build it in the background set the option.
3. when a module/feature setting is changed, delete the option and queue up a cron job.

[htdat]

Another user reports the same issue with Contact Form module:

• Disable Contact Form module.
• Jetpack CSS file still loads the styles for this module and override the user's contact forms style.

Ref: 650030-zen

[tannerchung]

Another user reports the same issue with Contact Form module:

Yes that was me! I have to turn off Jetpack completely in order to avoid having the Contact Form affecting the current contact form I have. This is adversely affecting business since I'm also offering clients free personal Jetpack subscriptions, namely the 30 day backups and Photon CDN, but now I cannot promise this to them and I'm worried similar situations like this will happen in the future.

[kraftbj]

Hi @tannerchung - you can add the add_filter( 'jetpack_implode_frontend_css', '__return_false' ); via your theme's functions.php file or a core functionality plugin to disable jetpack.css, which will only load individual module CSS files.

[jeherve]

I'm on the fence of considering this as a duplicate of #1258 .

I'm going to go ahead and close as duplicate. I agree they're similar.