gulp-clean-css is outdated causing CSS geometry properties to be removed in Production

[Currey]

What should happen?

scss that references SVG geometry properties should compile to css when using --production.

What happens instead?

SVG geometry properties are removed from compiled css on --production.

Possible Solution

gulp-clean-css, a wrapper for clean-css, appears to be the culprit. It is unmaintained and hasn't been updated in years. Meanwhile, clean-css has been maintained and supports geometry properties (and other fixes).

I have installed clean-css, but I am unsure how to correctly reference it in my projects gulpfile.babel.js.

Test Case and/or Steps to Reproduce (for bugs)

How to reproduce:

1. Write the following scss:

svg {
  circle {
    fill: red;
    cx: 50%;
    cy: 4rem;
    r: 2rem;
  }
}

2. Either run yarn build or yarn start --production
3. gulp-clean-css will remove geometry properties (cx, cy, r properties in this example) as the outdated version considers these properties as invalid. Compiled css output:

svg{fill:red}

Expected compiled css output:

svg{fill:red;cx:50%;cy:4rem;r:2rem;}

Context

This slows down development as I need to manually reenter missing properties into compiled css manually. As a temporary workaround, I have been adding missing properties to content: "<missing properties>" to aid search and replace.

Your Environment

• Foundation version(s) used: 6.7.5
• Browser(s) name and version(s): Google Chrome - Version 110.0.5481.177 (Official Build) (x86_64)
• Device, Operating System and version: macOS Ventura 13.2.1

Checklist

• [x] I have read and follow the CONTRIBUTING.md document.
• [x] There are no other issues similar to this one.
• [x] The issue title and template are correctly filled.