Repository: ProjectEvergreen/greenwood (js)

Issue:
functions in CSS declarations (like CSS `var`) are being incorrectly optimized
## Summary
When writing a CSS selector that has a CSS Variable (`Function`) that comes _after_ something like an `Identifier`, the resulting CSS is incorrectly optimized with a space missing between the `Declaration` values

**Input**
```css
.snippet {
  padding: 0 var(--size-4);
}
```

**Output**
```css
# actual
.snippet{padding:0var(--size-4);}

# expected
.snippet{padding:0 var(--size-4);}
```

and thus "breaks" in browsers
![Screenshot 2024-06-07 at 11 38 29 AM](https://github.com/ProjectEvergreen/greenwood/assets/895923/87a0aa7f-17d6-49ea-b727-cc3b524d4a87)


## Details
Interestingly enough, the other way around works just fine

**Input**
```css
.snippet {
  margin: var(--size-4) 0;
}
```

**Output**
```css
.snippet{margin:var(--size-4) 0;}
```
![Screenshot 2024-06-07 at 11 38 29 AM](https://github.com/ProjectEvergreen/greenwood/assets/895923/87f2ba7f-659a-4249-b030-1ef839ddc0a5)

Pull request description:
bug/issue 1242 handle optimization ordering issue with functions in CSS declarations
<!--
## Submitting a Pull Request
We love contributions and appreciate any help you can offer!
-->

## Related Issue
resolves #1242 

## Summary of Changes
1. Improve handling for `Function` type optimization formatting

> Not sure if there is a better way than deny-listing, or are there any other specific types to be guarding against?

Patch:
diff --git a/packages/cli/src/plugins/resource/plugin-standard-css.js b/packages/cli/src/plugins/resource/plugin-standard-css.js
index 64c1ba00..b98e3bfb 100644
--- a/packages/cli/src/plugins/resource/plugin-standard-css.js
+++ b/packages/cli/src/plugins/resource/plugin-standard-css.js
@@ -96,7 +96,7 @@ function bundleCss(body, url, compilation) {
         }
       } else if (type === 'Function') {
         /* ex: border-left: 3px solid var(--color-secondary); */
-        if (this.declaration && item.prev && item.prev.data.type === 'Identifier') {
+        if (this.declaration && item.prev && (item.prev.data.type !== 'Operator' && item.prev.data.type !== 'Url')) {
           optimizedCss += ' ';
         }
         optimizedCss += `${name}(`;


Test patch:
diff --git a/packages/cli/test/cases/build.config.optimization-default/fixtures/expected.css b/packages/cli/test/cases/build.config.optimization-default/fixtures/expected.css
index 2820fe9d..51eaddcf 100644
--- a/packages/cli/test/cases/build.config.optimization-default/fixtures/expected.css
+++ b/packages/cli/test/cases/build.config.optimization-default/fixtures/expected.css
@@ -58,4 +58,6 @@ a[href*='greenwood'],a[href$='.pdf']{color:orange}
 
 h1:has(+h2){margin:0 0 0.25rem 0}
 
-:is(ol,ul,menu:unsupported) :is(ol,ul){color:green}
\ No newline at end of file
+:is(ol,ul,menu:unsupported) :is(ol,ul){color:green}
+
+.snippet{margin:var(--size-4) 0;padding:0 var(--size-4);}
\ No newline at end of file
diff --git a/packages/cli/test/cases/build.config.optimization-default/src/styles/main.css b/packages/cli/test/cases/build.config.optimization-default/src/styles/main.css
index 947b402f..8877b8e2 100644
--- a/packages/cli/test/cases/build.config.optimization-default/src/styles/main.css
+++ b/packages/cli/test/cases/build.config.optimization-default/src/styles/main.css
@@ -130,4 +130,9 @@ h1:has(+ h2) {
 
 :is(ol, ul, menu:unsupported) :is(ol, ul) {
   color: green;
+}
+
+.snippet {
+  margin: var(--size-4) 0;
+  padding: 0 var(--size-4);
 }
\ No newline at end of file