Do not minify empty css variables!!!

HubSpot Ideas

Status: Idea Submitted

1

In CSS it can be very helpful to provide empty css variables, like Tailwind filters do. Empty css variables are also standard compliant.

Example

*, ::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!!!

2

Can be solved by including empty variables between a

{% raw %}

an an

{% endraw %}

tag.

{% 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 %}