Concatted CSS files ?

[eva2000]

On community.nodebb.org there's like 6-7 CSS files loaded. Is there anyway to define in Admin control panel how the CSS links are going to be served ?

I ask, as Centmin Mod Nginx includes http concat Nginx module http://centminmod.com/nginx.html#httpconcat which allows you to concat several CSS and JS files together to save on http requests

so 2 bootstrap css files will be served if the template or html file serves the url as

/css/??bootstrap.css,bootstrap-responsive.css

on a more specific example

• http://community.nodebb.org/plugins/nodebb-widget-essentials/css/widget.css
• http://community.nodebb.org/plugins/markdown/default.css
• http://community.nodebb.org/plugins/emoji-extended-css/style.css
• http://community.nodebb.org/plugins/nodebb-plugin-youtube/style.css
• http://community.nodebb.org/plugins/nodebb-plugin-topic-badges/css/main.css

would be served as 1 single request

/plugins/??nodebb-widget-essentials/css/widget.css,markdown/default.css,emoji-extended-css/style.css,nodebb-plugin-youtube/style.css,nodebb-plugin-topic-badges/css/main.css

[psychobunny]

I think (@julian correct me if I'm wrong) that we recently added the ability to minify all our plugin CSS files along with our core CSS in one file

[julian]

Yep. You'll notice the mentions plugin no longer has a CSS file. It uses LESS now, and it gets bundled into stylesheet.css

The plugin writers (which is mostly us) will have to update the plugins to send in LESS files instead of CSS.

[eva2000]

sweet, but do you mean

• http://community.nodebb.org/stylesheet.css?v=v0.3.2-289-g815e783

as it seems the rest of those css also still get loaded http://www.webpagetest.org/result/140226_X8_60a2df5846b61aac9f61c1f1ec8fb52b/2/details/

or do you mean currently it's duplicated by the plugin authors and only stylesheet.css is needed ?

[julian]

What I mean is... in the source right now:

<link rel="stylesheet" href="/plugins/nodebb-widget-essentials/css/widget.css">
<link rel="stylesheet" href="/plugins/markdown/default.css">
<link rel="stylesheet" href="/plugins/emoji-extended-css/style.css">
<link rel="stylesheet" href="/plugins/nodebb-plugin-youtube/style.css">
<link rel="stylesheet" href="/plugins/nodebb-plugin-topic-badges/css/main.css">

Those stylesheets are still CSS. Once the plugins are upgraded to use LESS, then they will be bundled into stylesheet.css, thus reducing the # of files requested

[eva2000]

@julian ah i get it now

[Schamper]

@julian said:

Yep. You'll notice the mentions plugin no longer has a CSS file. It uses LESS now, and it gets bundled into stylesheet.css

The plugin writers (which is mostly us) will have to update the plugins to send in LESS files instead of CSS.

Sweet

[julian]

@mr_waffle It's not just that you get to use LESS now, the really cool part is that you also get to use the bootstrap variables in your plugins too!

I updated mentions above -- notice that on Lavender, mentions have a white background, while in Vanilla/Cerulean, they're reminiscent of the more typical bootstrap colour.

Exampli gratis:

	color: @state-info-text;
	background: @state-info-bg;
	border: 1px solid @state-info-border;

[Schamper]

@julian Ooooooh fancy. Guess I'll have to get to refactoring some time.