fix: preserve empty custom properties (#1351)

* fix(postcss-minify-params): reduce custom property value to 1 space instead of 0

Fix #1130

minify-params handles whitespace inside at rules separately from
normalize-whitespace. I also realizes it uses a kind of hack,
as it parses the atrule parameters with postcss-value-parser,
so the resulting AST does not make a lot of sense.

* fix(postcss-normalize-whitespace): turn empty custom properties into 1 space

* fix(postcss-discard-empty): preserve empty custom properties

Fix #1350

Empty custom properties are valid according to the latest spec updates
and various CSS tricks use them.

* test(postcss-discard-empty): test for property with space value

packages/postcss-discard-empty/src/index.js

@@ -19,7 +19,7 @@ function discardAndReport(css, result) {
     }
 
     if (
-      (type === 'decl' && !node.value) ||
+      (type === 'decl' && !node.value && !node.prop.startsWith('--')) ||
       (type === 'rule' && !node.selector) ||
       (sub && !sub.length) ||
       (type === 'atrule' &&

packages/postcss-discard-empty/test/index.js

@@ -85,6 +85,11 @@ test(
   passthroughCSS('h1{/*comment*/}')
 );
 
+test(
+  'should preserve empty custom properties',
+  passthroughCSS('*{--tw-shadow:; --something-else: ;}')
+);
+
 test(
   'should report removed selectors',
   testRemovals('h1{}.hot{}.a.b{}{}@media screen, print{h1,h2{}}', '', [

packages/postcss-minify-params/src/index.js

@@ -69,11 +69,21 @@ function transform(legacy, rule) {
   const params = valueParser(rule.params);
 
   params.walk((node, index) => {
-    if (node.type === 'div' || node.type === 'function') {
+    if (node.type === 'div') {
       node.before = node.after = '';
-
+    } else if (node.type === 'function') {
+      node.before = '';
+      if (
+        node.nodes[0] &&
+        node.nodes[0].type === 'word' &&
+        node.nodes[0].value.startsWith('--') &&
+        node.nodes[2] === undefined
+      ) {
+        node.after = ' ';
+      } else {
+        node.after = '';
+      }
       if (
-        node.type === 'function' &&
         node.nodes[4] &&
         node.nodes[0].value.toLowerCase().indexOf('-aspect-ratio') === 3
       ) {

packages/postcss-minify-params/test/index.js

@@ -183,6 +183,22 @@ test(
   )
 );
 
+test(
+  'should normalize space in custom property values',
+  processCSS(
+    '@supports (--foo:  ){html{background:green}}',
+    '@supports (--foo: ){html{background:green}}'
+  )
+);
+
+test(
+  'should minimize custom properties with multiple conditions',
+  processCSS(
+    '@supports ((--foo:  ) or (--bar: green )){html{background:green}}',
+    '@supports ((--foo: ) or (--bar:green)){html{background:green}}'
+  )
+);
+
 test(
   'should not throw on empty parentheses',
   passthroughCSS('@media (){h1{color:blue}}')

packages/postcss-normalize-whitespace/src/index.js

@@ -65,7 +65,6 @@ function pluginCreator() {
 
           // Remove whitespaces around ie 9 hack
           node.value = node.value.replace(/\s*(\\9)\s*/, '$1');
-
           const value = node.value;
 
           if (cache.has(value)) {
@@ -79,6 +78,9 @@ function pluginCreator() {
             cache.set(value, result);
           }
 
+          if (node.prop.startsWith('--') && node.value === '') {
+            node.value = ' ';
+          }
           // Remove extra semicolons and whitespace before the declaration
           if (node.raws.before) {
             const prev = node.prev();

packages/postcss-normalize-whitespace/test/index.js

@@ -58,6 +58,15 @@ test(
   )
 );
 
+test(
+  'should trim space around custom property',
+  processCSS('h1{--prop:  }', 'h1{--prop: }')
+);
+
+test(
+  'should add space around empty custom property',
+  processCSS('h1{--prop:}', 'h1{--prop: }')
+);
 test(
   'should not trim spaces inside of nested var function',
   processCSS(