diff --git a/src/language-css/printer-postcss.js b/src/language-css/printer-postcss.js index 86877b779..95f2362cb 100644 --- a/src/language-css/printer-postcss.js +++ b/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" && diff --git a/tests/css_character_escaping/__snapshots__/jsfmt.spec.js.snap b/tests/css_character_escaping/__snapshots__/jsfmt.spec.js.snap new file mode 100644 index 000000000..3e63d3325 --- /dev/null +++ b/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 {} +#\\ {} +#\\<\\>\\<\\<\\<\\>\\>\\<\\> {} +#\\+\\+\\+\\+\\+\\+\\+\\+\\+\\+\\[\\>\\+\\+\\+\\+\\+\\+\\+\\>\\+\\+\\+\\+\\+\\+\\+\\+\\+\\+\\>\\+\\+\\+\\>\\+\\<\\<\\<\\<\\-\\]\\>\\+\\+\\.\\>\\+\\.\\+\\+\\+\\+\\+\\+\\+\\.\\.\\+\\+\\+\\.\\>\\+\\+\\.\\<\\<\\+\\+\\+\\+\\+\\+\\+\\+\\+\\+\\+\\+\\+\\+\\+\\.\\>\\.\\+\\+\\+\\.\\-\\-\\-\\-\\-\\-\\.\\-\\-\\-\\-\\-\\-\\-\\-\\.\\>\\+\\.\\>\\. {} +#\\# {} +#\\#\\# {} +#\\#\\.\\#\\.\\# {} +#\\#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 { +} +#\\ { +} +#\\<\\>\\<\\<\\<\\>\\>\\<\\> { +} +#\\+\\+\\+\\+\\+\\+\\+\\+\\+\\+\\[\\>\\+\\+\\+\\+\\+\\+\\+\\>\\+\\+\\+\\+\\+\\+\\+\\+\\+\\+\\>\\+\\+\\+\\>\\+\\<\\<\\<\\<\\-\\]\\>\\+\\+\\.\\>\\+\\.\\+\\+\\+\\+\\+\\+\\+\\.\\.\\+\\+\\+\\.\\>\\+\\+\\.\\<\\<\\+\\+\\+\\+\\+\\+\\+\\+\\+\\+\\+\\+\\+\\+\\+\\.\\>\\.\\+\\+\\+\\.\\-\\-\\-\\-\\-\\-\\.\\-\\-\\-\\-\\-\\-\\-\\-\\.\\>\\+\\.\\>\\. { +} +#\\# { +} +#\\#\\# { +} +#\\#\\.\\#\\.\\# { +} +#\\#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"; +} + +`; diff --git a/tests/css_character_escaping/character_escaping.css b/tests/css_character_escaping/character_escaping.css new file mode 100644 index 000000000..eb7056975 --- /dev/null +++ b/tests/css_character_escaping/character_escaping.css @@ -0,0 +1,48 @@ +#♥ {} +#© {} +#“‘’” {} +#☺☃ {} +#⌘⌥ {} +#𝄞♪♩♫♬ {} +#💩 {} +#\? {} +#\@ {} +#\. {} +#\3A \) {} +#\3A \`\( {} +#\31 23 {} +#\31 a2b3c {} +#\ {} +#\<\>\<\<\<\>\>\<\> {} +#\+\+\+\+\+\+\+\+\+\+\[\>\+\+\+\+\+\+\+\>\+\+\+\+\+\+\+\+\+\+\>\+\+\+\>\+\<\<\<\<\-\]\>\+\+\.\>\+\.\+\+\+\+\+\+\+\.\.\+\+\+\.\>\+\+\.\<\<\+\+\+\+\+\+\+\+\+\+\+\+\+\+\+\.\>\.\+\+\+\.\-\-\-\-\-\-\.\-\-\-\-\-\-\-\-\.\>\+\.\>\. {} +#\# {} +#\#\# {} +#\#\.\#\.\# {} +#\#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"; +} + diff --git a/tests/css_character_escaping/jsfmt.spec.js b/tests/css_character_escaping/jsfmt.spec.js new file mode 100644 index 000000000..7d3726c81 --- /dev/null +++ b/tests/css_character_escaping/jsfmt.spec.js @@ -0,0 +1 @@ +run_spec(__dirname, ["css"]); diff --git a/tests/css_scss/__snapshots__/jsfmt.spec.js.snap b/tests/css_scss/__snapshots__/jsfmt.spec.js.snap index 6ab0c825e..1fae0540e 100644 --- a/tests/css_scss/__snapshots__/jsfmt.spec.js.snap +++ b/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; + `; diff --git a/tests/css_scss/scss.css b/tests/css_scss/scss.css index d599773cb..582cda1c6 100644 --- a/tests/css_scss/scss.css +++ b/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;