HubSpot Ideas

arinker

Do not minify empty css variables!!!

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!!!
1 Reply
arinker
Top Contributor | Partner

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