Merge pull request #3797 from prettier/feat-css-lowercase-wide-keywords

feat(css): lowercase wide keywords

src/language-css/clean.js

@@ -22,7 +22,11 @@ function clean(ast, newObj) {
   }
 
   if (
-    (ast.type === "value-word" && ast.isColor && ast.isHex) ||
+    (ast.type === "value-word" &&
+      ((ast.isColor && ast.isHex) ||
+        ["initial", "inherit", "unset", "revert"].indexOf(
+          newObj.value.replace().toLowerCase()
+        ) !== -1)) ||
     ast.type === "media-feature" ||
     ast.type === "selector-root-invalid" ||
     ast.type === "selector-pseudo"

src/language-css/printer-postcss.js

@@ -421,7 +421,7 @@ function genericPrint(path, options, print) {
       return n.value;
     }
     case "value-word": {
-      if (n.isColor && n.isHex) {
+      if ((n.isColor && n.isHex) || isWideKeywords(n.value)) {
         return n.value.toLowerCase();
       }
       return n.value;
@@ -551,6 +551,14 @@ function maybeToLowerCase(value) {
     : value.toLowerCase();
 }
 
+function isWideKeywords(value) {
+  return (
+    ["initial", "inherit", "unset", "revert"].indexOf(
+      value.replace().toLowerCase()
+    ) !== -1
+  );
+}
+
 module.exports = {
   options: printerOptions,
   print: genericPrint,

tests/css_case/__snapshots__/jsfmt.spec.js.snap

@@ -21,6 +21,10 @@ svg[viewBox] linearGradient,
     background: Var(--Keep-custom-Prop);
     animation-name: KeepAnimationName;
     important: something !IMPORTANT;
+    font-family: INITIAL;
+    padding: UNSET;
+    border: INHERIT;
+    all: REVERT;
 }
 
 @keyframes KeepAnimationName {
@@ -109,6 +113,10 @@ svg[viewBox] linearGradient,
   background: Var(--Keep-custom-Prop);
   animation-name: KeepAnimationName;
   important: something !IMPORTANT;
+  font-family: initial;
+  padding: unset;
+  border: inherit;
+  all: revert;
 }
 
 @keyframes KeepAnimationName {
@@ -207,6 +215,10 @@ svg[viewBox] linearGradient,
     background: Var(--Keep-custom-Prop);
     animation-name: KeepAnimationName;
     important: something !IMPORTANT;
+    font-family: INITIAL;
+    padding: UNSET;
+    border: INHERIT;
+    all: REVERT;
 }
 
 @keyframes KeepAnimationName {
@@ -297,6 +309,10 @@ svg[viewBox] linearGradient,
   background: Var(--Keep-custom-Prop);
   animation-name: KeepAnimationName;
   important: something !important;
+  font-family: initial;
+  padding: unset;
+  border: inherit;
+  all: revert;
 }
 
 @keyframes KeepAnimationName {

tests/css_case/case.less

@@ -18,6 +18,10 @@ svg[viewBox] linearGradient,
     background: Var(--Keep-custom-Prop);
     animation-name: KeepAnimationName;
     important: something !IMPORTANT;
+    font-family: INITIAL;
+    padding: UNSET;
+    border: INHERIT;
+    all: REVERT;
 }
 
 @keyframes KeepAnimationName {

tests/css_case/case.scss

@@ -17,6 +17,10 @@ svg[viewBox] linearGradient,
     background: Var(--Keep-custom-Prop);
     animation-name: KeepAnimationName;
     important: something !IMPORTANT;
+    font-family: INITIAL;
+    padding: UNSET;
+    border: INHERIT;
+    all: REVERT;
 }
 
 @keyframes KeepAnimationName {