Repository: ProjectEvergreen/greenwood (js)

Issue:
CSS functions in declarations not getting padded with a space
For example this
```css
h1, h2 {
  border-top: 3px solid var(--color-secondary);
}
```

Comes out as this, missing the space between the space, causing the styles to fail
```css
h1, h2 {
  border-top: 3px solidvar(--color-secondary);
}
```

Pull request description:
fix CSS functions in declarations not getting padded with a space
<!--
## Submitting a Pull Request
We love contributions and appreciate any help you can offer!
-->

## Related Issue
resolves #1031 

## Summary of Changes
1. Handle CSS functions in declarations needing to be padded with a space
1. Add test case

Patch:
diff --git a/packages/cli/src/plugins/resource/plugin-standard-css.js b/packages/cli/src/plugins/resource/plugin-standard-css.js
index eee63615..cbb05d2a 100644
--- a/packages/cli/src/plugins/resource/plugin-standard-css.js
+++ b/packages/cli/src/plugins/resource/plugin-standard-css.js
@@ -1,5 +1,5 @@
 /*
- * 
+ *
  * Manages web standard resource related operations for CSS.
  * This is a Greenwood default plugin.
  *
@@ -60,6 +60,10 @@ function bundleCss(body, url, projectDirectory) {
 
         }
       } else if (type === 'Function') {
+        /* ex: border-left: 3px solid var(--color-secondary); */
+        if (this.declaration && item.prev && item.prev.data.type === 'Identifier') {
+          optimizedCss += ' ';
+        }
         optimizedCss += `${name}(`;
       } else if (type === 'MediaFeature') {
         optimizedCss += ` (${name}:`;
@@ -175,7 +179,7 @@ function bundleCss(body, url, projectDirectory) {
           break;
         case 'Selector':
           if (item.next) {
-            optimizedCss += ',';  
+            optimizedCss += ',';
           }
           break;
         case 'AttributeSelector':
@@ -208,7 +212,7 @@ class StandardCssResource extends ResourceInterface {
 
   async serve(url) {
     return new Promise(async (resolve, reject) => {
-      try {  
+      try {
         const css = await fs.promises.readFile(url, 'utf-8');
 
         resolve({
@@ -223,7 +227,7 @@ class StandardCssResource extends ResourceInterface {
 
   async shouldOptimize(url) {
     const isValidCss = path.extname(url) === this.extensions[0] && this.compilation.config.optimization !== 'none';
-    
+
     return Promise.resolve(isValidCss);
   }
 


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 131b5f07..5c565df5 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
@@ -12,7 +12,7 @@
 
 body{background-color:green}
 
-h1,h2{color:var(--primary-color);border:0.5px solid #dddde1;}
+h1,h2{color:var(--primary-color);border:0.5px solid #dddde1;border-left:3px solid var(--color-secondary);border-top:3px solid var(--color-secondary);}
 
 #foo,.bar{color:var(--secondary-color)}
 
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 a0868cae..2689da7c 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
@@ -13,6 +13,8 @@ body {
 h1, h2 {
   color: var(--primary-color);
   border: 0.5px solid #dddde1;
+  border-left: 3px solid var(--color-secondary);
+  border-top: 3px solid var(--color-secondary);
 }
 
 #foo, .bar {