fix: characters escaping (#4472)

src/language-css/printer-postcss.js

@@ -410,9 +410,6 @@ function genericPrint(path, options, print) {
         const iNextNode = node.groups[i + 1];
         const iNextNextNode = node.groups[i + 2];
 
-        if (isPostcssSimpleVar(iNode, iNextNode)) {
-          continue;
-        }
         // Ignore after latest node (i.e. before semicolon)
         if (!iNextNode) {
           continue;
@@ -433,6 +430,16 @@ function genericPrint(path, options, print) {
           continue;
         }
 
+        // Ignore `\` (i.e. `$variable: \@small;`)
+        if (iNode.value === "\\") {
+          continue;
+        }
+
+        // Ignore `$$` (i.e. `background-color: $$(style)Color;`)
+        if (isPostcssSimpleVar(iNode, iNextNode)) {
+          continue;
+        }
+
         if (
           (iPrevNode &&
             iPrevNode.type === "value-comment" &&

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

@@ -0,0 +1,142 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`character_escaping.css 1`] = `
+#♥ {}
+#© {}
+#“‘’” {}
+#☺☃ {}
+#⌘⌥ {}
+#𝄞♪♩♫♬ {}
+#💩 {}
+#\\? {}
+#\\@ {}
+#\\. {}
+#\\3A \\) {}
+#\\3A \\\`\\( {}
+#\\31 23 {}
+#\\31 a2b3c {}
+#\\<p\\> {}
+#\\<\\>\\<\\<\\<\\>\\>\\<\\> {}
+#\\+\\+\\+\\+\\+\\+\\+\\+\\+\\+\\[\\>\\+\\+\\+\\+\\+\\+\\+\\>\\+\\+\\+\\+\\+\\+\\+\\+\\+\\+\\>\\+\\+\\+\\>\\+\\<\\<\\<\\<\\-\\]\\>\\+\\+\\.\\>\\+\\.\\+\\+\\+\\+\\+\\+\\+\\.\\.\\+\\+\\+\\.\\>\\+\\+\\.\\<\\<\\+\\+\\+\\+\\+\\+\\+\\+\\+\\+\\+\\+\\+\\+\\+\\.\\>\\.\\+\\+\\+\\.\\-\\-\\-\\-\\-\\-\\.\\-\\-\\-\\-\\-\\-\\-\\-\\.\\>\\+\\.\\>\\. {}
+#\\# {}
+#\\#\\# {}
+#\\#\\.\\#\\.\\# {}
+#\\#fake-id {} /* matches the element with id="#fake-id" */
+#\\_ {}
+#\\{\\} {}
+#\\.fake\\-class {}
+#foo\\.bar {}
+#\\3A hover {}
+#\\3A hover\\3A focus\\3A active {}
+#\\[attr\\=value\\] {}
+#f\\/o\\/o {}
+#f\\\\o\\\\o {}
+#f\\*o\\*o {}
+#f\\!o\\!o {}
+#f\\'o\\'o {}
+#f\\~o\\~o {}
+#f\\+o\\+o {}
+#-a-b-c- {}
+#a\\\\b {}
+
+@keyframes \\@mymove {
+    from {top: 0px;}
+    to {top: 200px;}
+}
+
+.foo {
+    animation-name: \\@mymove;
+    content: "\\21D3";
+}
+
+~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+#♥ {
+}
+#© {
+}
+#“‘’” {
+}
+#☺☃ {
+}
+#⌘⌥ {
+}
+#𝄞♪♩♫♬ {
+}
+#💩 {
+}
+#\\? {
+}
+#\\@ {
+}
+#\\. {
+}
+#\\3A \\) {
+}
+#\\3A \\\`\\( {
+}
+#\\31 23 {
+}
+#\\31 a2b3c {
+}
+#\\<p\\> {
+}
+#\\<\\>\\<\\<\\<\\>\\>\\<\\> {
+}
+#\\+\\+\\+\\+\\+\\+\\+\\+\\+\\+\\[\\>\\+\\+\\+\\+\\+\\+\\+\\>\\+\\+\\+\\+\\+\\+\\+\\+\\+\\+\\>\\+\\+\\+\\>\\+\\<\\<\\<\\<\\-\\]\\>\\+\\+\\.\\>\\+\\.\\+\\+\\+\\+\\+\\+\\+\\.\\.\\+\\+\\+\\.\\>\\+\\+\\.\\<\\<\\+\\+\\+\\+\\+\\+\\+\\+\\+\\+\\+\\+\\+\\+\\+\\.\\>\\.\\+\\+\\+\\.\\-\\-\\-\\-\\-\\-\\.\\-\\-\\-\\-\\-\\-\\-\\-\\.\\>\\+\\.\\>\\. {
+}
+#\\# {
+}
+#\\#\\# {
+}
+#\\#\\.\\#\\.\\# {
+}
+#\\#fake-id {
+} /* matches the element with id="#fake-id" */
+#\\_ {
+}
+#\\{\\} {
+}
+#\\.fake\\-class {
+}
+#foo\\.bar {
+}
+#\\3A hover {
+}
+#\\3A hover\\3a focus\\3a active {
+}
+#\\[attr\\=value\\] {
+}
+#f\\/o\\/o {
+}
+#f\\\\o\\\\o {
+}
+#f\\*o\\*o {
+}
+#f\\!o\\!o {
+}
+#f\\'o\\'o {
+}
+#f\\~o\\~o {
+}
+#f\\+o\\+o {
+}
+#-a-b-c- {
+}
+#a\\\\b {
+}
+
+@keyframes \\@mymove {
+  from {
+    top: 0px;
+  }
+  to {
+    top: 200px;
+  }
+}
+
+.foo {
+  animation-name: \\@mymove;
+  content: "\\21D3";
+}
+
+`;

tests/css_character_escaping/character_escaping.css

@@ -0,0 +1,48 @@
+#♥ {}
+#© {}
+#“‘’” {}
+#☺☃ {}
+#⌘⌥ {}
+#𝄞♪♩♫♬ {}
+#💩 {}
+#\? {}
+#\@ {}
+#\. {}
+#\3A \) {}
+#\3A \`\( {}
+#\31 23 {}
+#\31 a2b3c {}
+#\<p\> {}
+#\<\>\<\<\<\>\>\<\> {}
+#\+\+\+\+\+\+\+\+\+\+\[\>\+\+\+\+\+\+\+\>\+\+\+\+\+\+\+\+\+\+\>\+\+\+\>\+\<\<\<\<\-\]\>\+\+\.\>\+\.\+\+\+\+\+\+\+\.\.\+\+\+\.\>\+\+\.\<\<\+\+\+\+\+\+\+\+\+\+\+\+\+\+\+\.\>\.\+\+\+\.\-\-\-\-\-\-\.\-\-\-\-\-\-\-\-\.\>\+\.\>\. {}
+#\# {}
+#\#\# {}
+#\#\.\#\.\# {}
+#\#fake-id {} /* matches the element with id="#fake-id" */
+#\_ {}
+#\{\} {}
+#\.fake\-class {}
+#foo\.bar {}
+#\3A hover {}
+#\3A hover\3A focus\3A active {}
+#\[attr\=value\] {}
+#f\/o\/o {}
+#f\\o\\o {}
+#f\*o\*o {}
+#f\!o\!o {}
+#f\'o\'o {}
+#f\~o\~o {}
+#f\+o\+o {}
+#-a-b-c- {}
+#a\\b {}
+
+@keyframes \@mymove {
+    from {top: 0px;}
+    to {top: 200px;}
+}
+
+.foo {
+    animation-name: \@mymove;
+    content: "\21D3";
+}
+

tests/css_character_escaping/jsfmt.spec.js

@@ -0,0 +1 @@
+run_spec(__dirname, ["css"]);

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

@@ -884,6 +884,13 @@ light: #eaf0c6
 @function color($color, $tone: "base") {
 @return map-get(map-get($colors, $color), $tone);
 }
+
+
+@media only screen and (max-width: 767px) {
+  @include widths(2 3 4, \\@small);
+}
+
+$widths-breakpoint-separator: \\@small;
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 @media #{$g-breakpoint-tiny} {
 }
@@ -1568,4 +1575,10 @@ $colors: (
   @return map-get(map-get($colors, $color), $tone);
 }
 
+@media only screen and (max-width: 767px) {
+  @include widths(2 3 4, \\@small);
+}
+
+$widths-breakpoint-separator: \\@small;
+
 `;

tests/css_scss/scss.css

@@ -874,3 +874,10 @@ light: #eaf0c6
 @function color($color, $tone: "base") {
 @return map-get(map-get($colors, $color), $tone);
 }
+
+
+@media only screen and (max-width: 767px) {
+  @include widths(2 3 4, \@small);
+}
+
+$widths-breakpoint-separator: \@small;