# Do not minify empty css variables!!!

**URL:** <https://community.hubspot.com/t/do-not-minify-empty-css-variables/63520>\
**Category:** HubSpot Ideas\
**Tags:** design-manager\
**Created:** [August 23, 2022, 9:14am UTC](https://community.hubspot.com/t/do-not-minify-empty-css-variables/63520 "2022-08-23T09:14:04Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![arinker](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/arinker/32/14511_2.png) [@arinker](https://community.hubspot.com/u/arinker)\
**Post date:** [August 23, 2022, 9:14am UTC](https://community.hubspot.com/t/do-not-minify-empty-css-variables/63520/1 "2022-08-23T09:14:04Z")

</div>

In CSS it can be very helpful to provide empty css variables, like [Tailwind filters](https://tailwindcss.com/docs/blur) do. Empty css variables are also standard compliant.

**Example**

```lia-code-sample
*, ::before, ::after {
 --brightness: ;
 --contrast: ;
}
brightness-1 {
 --brightness: brightness(1);
}
contrast-1 {
 --contrast: contrast(1);
}
[class*="brightness"],
[class*="contrast"] {
 filter: --var(--brightness) --var(--contrast)
}

```

Unfortunately, the HubSpot css minification ignores these empty css variables and leaves them out and thus breaks some features.

Please do not minify empty css variables!!!

---

<div class="post-metadata">

**Author:** ![arinker](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/arinker/32/14511_2.png) [@arinker](https://community.hubspot.com/u/arinker)\
**Post date:** [November 8, 2022, 8:21am UTC](https://community.hubspot.com/t/do-not-minify-empty-css-variables/63520/2 "2022-11-08T08:21:22Z")

</div>

Can be **solved** by including empty variables between a

**{% raw %}**

an an

**{% endraw %}**

tag.

```lia-code-sample
{% raw %}
*, ::before, ::after {
 --tw-pan-x: ;
 --tw-pan-y: ;
 --tw-pinch-zoom: ;
 --tw-ordinal: ;
 --tw-slashed-zero: ;
 --tw-numeric-figure: ;
 --tw-numeric-spacing: ;
 --tw-numeric-fraction: ;
 --tw-ring-inset: ;
 --tw-blur: ;
 --tw-brightness: ;
 --tw-contrast: ;
 --tw-grayscale: ;
 --tw-hue-rotate: ;
 --tw-invert: ;
 --tw-saturate: ;
 --tw-sepia: ;
 --tw-drop-shadow: ;
 --tw-backdrop-blur: ;
 --tw-backdrop-brightness: ;
 --tw-backdrop-contrast: ;
 --tw-backdrop-grayscale: ;
 --tw-backdrop-hue-rotate: ;
 --tw-backdrop-invert: ;
 --tw-backdrop-opacity: ;
 --tw-backdrop-saturate: ;
 --tw-backdrop-sepia: ;
}
{% endraw %}

```