scope_css removing custom CSS

Developer Support CMS Development
1

I’ve got an odd issue that seems to me to be a system bug. I’m writing a custom module, with a few fields for styling. Those fields output their user-selected values in the module.html file, like so:

<aside class="callout-wrapper">
	<!-- stuff here -->
</aside>

{% require_css %}
	<style>
		{% scope_css %}
		.callout-wrapper {
			zoom: 1;
		{% if module.styles.spacing.css %}
			{{ module.styles.spacing.css }}
		{% endif %}
		{% if module.styles.background_color %}
		 background-color: {{ module.styles.background_color.css }};
		{% endif %}
			color: red;
		}
		{% end_scope_css %}
	</style>
{% end_require_css %}

Now, when I preview that module from the Design Manager, or when I use that module in a Post or Page or whatever, I can locate the scoped, module-specific `<style>…</style>` block inside the `<head>…</head>` element. But here’s the odd part:

  • If the module has a background color selected, the <style> tag contents are fully as-expected: scoped selector, and inside of that, the zoom (for testing), color (also for testing), spacing, and BG color rules:

MichaelC_1-1685454567937.png
MichaelC_1-1685454567937.png721×311 31.5 KB

  • If the module has an empty background color field, then the <style> tag has the scoped selector, and an empty pair of curly braces:

MichaelC_0-1685454474999.png
MichaelC_0-1685454474999.png863×224 38.1 KB

  • If I remove the scoped_css tag from the module, then the output is as it should be… but I do need that scoped_css tag to be there.

Any idea what’s going on?

2

Try changing your if statement to check if the color value exists on the background color field. Just checking the field as a whole is going to always make that statement true so it’s likely outputting incorrect/incomplete CSS when a color isn’t selected. Without scope_css the incorrect CSS just gets wiped, but scope_css will completely error out and cause the whole block not to render if there’s incorrect CSS anywhere in it.

{% if module.styles.background_color.color %}
 background-color: {{ module.styles.background_color.css }};
{% endif %}
3

That did it, thanks!!