fix(postcss-convert-values): keep % unit in @Property (#1531)

Co-authored-by: Ludovico Fischer <43557+ludofischer@users.noreply.github.com>

CONTRIBUTORS.md

@@ -69,3 +69,4 @@ Thanks goes to these wonderful people:
 - Jakka Prihatna
 - James George
 - Jordy D'Hoker
+- Xiaojun Zhou

packages/postcss-convert-values/src/index.js

@@ -118,13 +118,24 @@ function shouldKeepZeroUnit(decl, browsers) {
     (decl.value.includes('%') &&
       keepZeroPercent.has(lowerCasedProp) &&
       browsers.includes('ie 11')) ||
-    (parent &&
+    (lowerCasedProp === 'stroke-dasharray' &&
+      parent &&
       parent.parent &&
       parent.parent.type === 'atrule' &&
-      /** @type {import('postcss').AtRule} */ (
-        parent.parent
-      ).name.toLowerCase() === 'keyframes' &&
-      lowerCasedProp === 'stroke-dasharray') ||
+      /** @type {import('postcss').AtRule} */
+      (parent.parent).name.toLowerCase() === 'keyframes') ||
+    (lowerCasedProp === 'initial-value' &&
+      parent &&
+      parent.type === 'atrule' &&
+      /** @type {import('postcss').AtRule} */
+      (parent).name === 'property' &&
+      /** @type {import('postcss').AtRule} */
+      (parent).nodes.some(
+        (node) =>
+          node.type === 'decl' &&
+          node.prop.toLowerCase() === 'syntax' &&
+          node.value === "'<percentage>'"
+      )) ||
     keepWhenZero.has(lowerCasedProp)
   );
 }

packages/postcss-convert-values/test/index.js

@@ -430,5 +430,13 @@ test(
   )
 );
 
+test(
+  `should not strip the percentage from 0 in @property, for initial-value`,
+  processCSS(
+    `@property --percent{syntax:'<percentage>';inherits:false;initial-value:0%;}`,
+    `@property --percent{syntax:'<percentage>';inherits:false;initial-value:0%;}`,
+    )
+);
+
 test('should use the postcss plugin api', usePostCSSPlugin(plugin()));
 test.run();