# scope\_css removing custom CSS

**URL:** <https://community.hubspot.com/t/scope-css-removing-custom-css/82261>\
**Category:** CMS Development\
**Created:** [May 30, 2023, 1:54pm UTC](https://community.hubspot.com/t/scope-css-removing-custom-css/82261 "2023-05-30T13:54:22Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![Michael-C](https://avatars.discourse-cdn.com/v4/letter/m/f19dbf/32.png) [@Michael-C](https://community.hubspot.com/u/Michael-C)\
**Post date:** [May 30, 2023, 1:54pm UTC](https://community.hubspot.com/t/scope-css-removing-custom-css/82261/1 "2023-05-30T13:54:22Z")

</div>

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:

```lia-code-sample
<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](https://d2qpr2jzcazej7.cloudfront.net/original/3X/7/8/78e8990ab6ade119a89ec34697a4bb4506c3768a.png)

- 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](https://d2qpr2jzcazej7.cloudfront.net/original/3X/b/d/bd212380b7b87d9f26d4b524550a869c826d87eb.png)

- 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?

---

<div class="post-metadata">

**Author:** ![alyssamwilie](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/alyssamwilie/32/2072_2.png) [@alyssamwilie](https://community.hubspot.com/u/alyssamwilie)\
**Post date:** [May 31, 2023, 3:05am UTC](https://community.hubspot.com/t/scope-css-removing-custom-css/82261/2 "2023-05-31T03:05:40Z")

</div>

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.

```lia-code-sample
{% if module.styles.background_color.color %}
 background-color: {{ module.styles.background_color.css }};
{% endif %}

```

---

<div class="post-metadata">

**Author:** ![Michael-C](https://avatars.discourse-cdn.com/v4/letter/m/f19dbf/32.png) [@Michael-C](https://community.hubspot.com/u/Michael-C)\
**Post date:** [May 31, 2023, 2:12pm UTC](https://community.hubspot.com/t/scope-css-removing-custom-css/82261/3 "2023-05-31T14:12:57Z")

</div>

That did it, thanks!!