fix: don't lowercase variable in css modules (#4152)

src/language-css/parser-postcss.js

@@ -232,6 +232,7 @@ function parseNestedCSS(node) {
 
       try {
         node.selector = parseSelector(selector);
+        node.raws.selector = selector;
       } catch (e) {
         // Fail silently. It's better to print it as is than to try and parse it
         // Note: A common failure is for SCSS nested properties. `background:

src/language-css/printer-postcss.js

@@ -93,10 +93,16 @@ function genericPrint(path, options, print) {
         node.value.type === "value-root" &&
         node.value.group.type === "value-value" &&
         node.prop === "composes";
+      const ruleAncestorNode = getAncestorNode(path, "css-rule");
+      const isiCSS =
+        ruleAncestorNode &&
+        ruleAncestorNode.raws.selector &&
+        (ruleAncestorNode.raws.selector.startsWith(":import") ||
+          ruleAncestorNode.raws.selector.startsWith(":export"));
 
       return concat([
         node.raws.before.replace(/[\s;]/g, ""),
-        maybeToLowerCase(node.prop),
+        isiCSS ? node.prop : maybeToLowerCase(node.prop),
         node.raws.between.trim() === ":" ? ":" : node.raws.between.trim(),
         isValueExtend ? "" : " ",
         isComposed

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

@@ -1,16 +1,98 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`modules.css 1`] = `
-.title {
-  @nest :global(h1)& {
-    background: red;
-  }
-}
-~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+@value colors: './colors.css';
+@value first, second, third from colors;
+
 .title {
   @nest :global(h1)& {
     background: red;
   }
 }
 
+.className {
+  color: green;
+  background: red;
+}
+
+.otherClassName {
+  composes: className;
+  color: yellow;
+}
+
+.otherClassName {
+  composes: className from "./style.css";
+}
+
+.otherClassName {
+  composes: globalClassName from global;
+}
+
+:global {
+  .global-class-name {
+    color: green;
+  }
+}
+
+.root :global .text {
+  color: brown;
+  font-size: 24px;
+  font-family: helvetica, arial, sans-serif;
+  font-weight: 600;
+}
+
+:import("path/to/dep.css") {
+  localAlias: keyFromDep;
+}
+:export {
+  exportedKey: exportedValue;
+}
+~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+@value colors: './colors.css';
+@value first, second, third from colors;
+
+.title {
+  @nest :global(h1)& {
+    background: red;
+  }
+}
+
+.className {
+  color: green;
+  background: red;
+}
+
+.otherClassName {
+  composes: className;
+  color: yellow;
+}
+
+.otherClassName {
+  composes: className from "./style.css";
+}
+
+.otherClassName {
+  composes: globalClassName from global;
+}
+
+:global {
+  .global-class-name {
+    color: green;
+  }
+}
+
+.root :global .text {
+  color: brown;
+  font-size: 24px;
+  font-family: helvetica, arial, sans-serif;
+  font-weight: 600;
+}
+
+:import("path/to/dep.css") {
+  localAlias: keyFromDep;
+}
+:export {
+  exportedKey: exportedValue;
+}
+
 `;

tests/css_modules/modules.css

@@ -1,5 +1,46 @@
+@value colors: './colors.css';
+@value first, second, third from colors;
+
 .title {
   @nest :global(h1)& {
     background: red;
   }
 }
+
+.className {
+  color: green;
+  background: red;
+}
+
+.otherClassName {
+  composes: className;
+  color: yellow;
+}
+
+.otherClassName {
+  composes: className from "./style.css";
+}
+
+.otherClassName {
+  composes: globalClassName from global;
+}
+
+:global {
+  .global-class-name {
+    color: green;
+  }
+}
+
+.root :global .text {
+  color: brown;
+  font-size: 24px;
+  font-family: helvetica, arial, sans-serif;
+  font-weight: 600;
+}
+
+:import("path/to/dep.css") {
+  localAlias: keyFromDep;
+}
+:export {
+  exportedKey: exportedValue;
+}